/* Flapbase Creator Network recruitment page (/creator). Scoped to .cn-page; header and footer come from flapbase-lp.css. */
.cn-page { --cn-night:#0d1f36; --cn-night-2:#16304f; --cn-ink:#12365c; --cn-muted:#4b6479; --cn-paper:#fff9ed; --cn-sand:#f5ecda; --cn-coral:#ee735e; --cn-coral-deep:#d4553f; --cn-blue:#1769d6; --cn-sun:#ffd27a; --cn-line:rgba(18,54,92,.14); color:var(--cn-ink); background:var(--cn-paper); overflow:hidden; }
.cn-page *,.cn-page *::before,.cn-page *::after { box-sizing:border-box; }
.cn-page h1,.cn-page h2,.cn-page h3 { color:inherit; margin-top:0; text-wrap:balance; }
.cn-page h2 { font-size:clamp(30px,4.2vw,54px); font-weight:800; letter-spacing:-.045em; line-height:1.16; margin-bottom:16px; }
.cn-page h3 { font-size:19px; font-weight:750; letter-spacing:-.02em; line-height:1.4; margin-bottom:8px; }
.cn-page p { font-size:16px; line-height:1.85; margin-top:0; }
.cn-page ul,.cn-page ol { margin:0; padding:0; list-style:none; }
.cn-page figure { margin:0; }
.cn-page img { display:block; max-width:100%; }
.cn-eyebrow { color:var(--cn-coral-deep); font-size:12px !important; font-weight:800; letter-spacing:.18em; line-height:1.4 !important; margin-bottom:14px; }
.cn-lead { color:var(--cn-muted); font-size:clamp(16px,1.5vw,18px) !important; max-width:38em; }
.cn-section { margin:0 auto; max-width:1240px; padding:clamp(64px,8vw,112px) clamp(20px,5vw,64px); }
.cn-head { margin-bottom:clamp(32px,4vw,52px); max-width:760px; }

/* Buttons and links */
.cn-actions { align-items:center; display:flex; flex-wrap:wrap; gap:14px 22px; margin-top:30px; }
.cn-actions--center { justify-content:center; }
.cn-button { align-items:center; background:var(--cn-coral); border-radius:999px; box-shadow:0 14px 30px -12px rgba(238,115,94,.8); color:#fff; display:inline-flex; font-size:17px; font-weight:800; justify-content:center; letter-spacing:.01em; min-height:56px; padding:0 30px; text-decoration:none; transition:background .2s,transform .2s; }
.cn-button::after { content:'→'; margin-left:10px; transition:transform .2s; }
.cn-button:hover { background:var(--cn-coral-deep); transform:translateY(-1px); }
.cn-button:hover::after { transform:translateX(3px); }
.cn-button:focus-visible,.cn-link:focus-visible,.cn-faq summary:focus-visible { outline:3px solid var(--cn-sun); outline-offset:3px; }
.cn-link { color:var(--cn-ink); font-size:16px; font-weight:750; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; }
.cn-link:hover { color:var(--cn-coral-deep); }
.cn-link--light { color:#fff; }
.cn-link--light:hover { color:var(--cn-sun); }
.cn-sample { background:rgba(18,54,92,.08); border-radius:999px; color:var(--cn-muted); display:inline-block; font-size:11px; font-weight:750; letter-spacing:.04em; line-height:1.4; padding:3px 9px; white-space:nowrap; }

/* Hero */
.cn-hero { background:radial-gradient(circle at 82% 12%,rgba(238,115,94,.42),transparent 42%),radial-gradient(circle at 4% 96%,rgba(23,105,214,.55),transparent 48%),radial-gradient(circle at 55% 60%,rgba(255,210,122,.12),transparent 40%),var(--cn-night); color:#fff; padding:clamp(48px,7vw,96px) clamp(20px,5vw,64px) clamp(36px,4vw,56px); }
.cn-hero__inner { align-items:center; display:grid; gap:clamp(36px,5vw,72px); grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); margin:0 auto; max-width:1240px; }
.cn-hero .cn-eyebrow { color:var(--cn-sun); }
.cn-page .cn-title { font-size:clamp(31px,6.1vw,86px); font-weight:850; letter-spacing:-.05em; line-height:1.12; margin:0 0 26px; max-width:none; }
.cn-title span { display:block; }
.cn-title span:last-child { background:linear-gradient(90deg,#fff 0%,#ffe2b8 55%,#ffb4a3 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cn-hero__lead { color:#dce7f5; font-size:clamp(16px,1.45vw,18px) !important; max-width:34em; }
.cn-hero__note { color:#aebfd6; font-size:14px !important; line-height:1.75 !important; margin:20px 0 0; max-width:34em; }

.cn-collage { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); grid-template-rows:repeat(12,clamp(26px,3.3vw,44px)); position:relative; }
.cn-collage figure { position:relative; }
.cn-collage__site { grid-column:1/11; grid-row:1/9; z-index:1; }
.cn-collage__phone { align-self:end; grid-column:9/13; grid-row:3/13; transform:rotate(3deg); z-index:3; }
.cn-collage__service { grid-column:1/8; grid-row:8/13; transform:rotate(-2deg); z-index:2; }
.cn-collage__site .cn-browser,.cn-collage__service .cn-browser { height:100%; }
.cn-collage__phone .cn-phone { box-shadow:0 30px 60px -24px rgba(0,0,0,.75); margin:0; width:100%; }
.cn-collage .cn-work__caption { align-items:center; backdrop-filter:blur(8px); background:rgba(13,31,54,.78); border-radius:10px; bottom:10px; color:#fff; display:flex; flex-wrap:wrap; gap:6px; left:10px; max-width:calc(100% - 20px); padding:6px 10px; position:absolute; z-index:4; }
.cn-collage .cn-work__caption strong { font-size:12px; font-weight:750; line-height:1.4; }
.cn-collage .cn-work__meta { display:none; }
.cn-collage .cn-sample { background:rgba(255,255,255,.16); color:#fff; font-size:10px; padding:2px 7px; }
.cn-collage__site .cn-work__caption { bottom:auto; left:auto; right:10px; top:44px; }

.cn-facts { border-top:1px solid rgba(255,255,255,.16); display:grid; gap:0; grid-template-columns:repeat(3,minmax(0,1fr)); margin:clamp(40px,5vw,64px) auto 0; max-width:1240px; }
.cn-facts > div { padding:22px 24px 4px 0; }
.cn-facts > div + div { border-left:1px solid rgba(255,255,255,.12); padding-left:24px; }
.cn-facts dt { color:var(--cn-sun); font-size:12px; font-weight:800; letter-spacing:.12em; margin-bottom:6px; }
.cn-facts dd { color:#e8eef7; font-size:15px; font-weight:600; line-height:1.7; margin:0; }

/* Fictional browser and phone mockups (text + CSS) */
.cn-browser { background:#fff; border-radius:14px; box-shadow:0 34px 70px -28px rgba(4,12,24,.75); color:#1d2b3a; container-type:inline-size; display:flex; flex-direction:column; overflow:hidden; }
.cn-browser__bar { align-items:center; background:#eef1f5; display:flex; flex:0 0 auto; gap:6px; padding:9px 12px; }
.cn-browser__dot { background:#ff6b5e; border-radius:50%; height:9px; width:9px; }
.cn-browser__dot:nth-child(2) { background:#ffbd2e; }
.cn-browser__dot:nth-child(3) { background:#28c840; }
.cn-browser__url { background:#fff; border-radius:999px; color:#8391a0; flex:1; font-size:10px; margin-left:8px; overflow:hidden; padding:3px 10px; text-overflow:ellipsis; white-space:nowrap; }
.cn-browser__screen { display:flex; flex:1; flex-direction:column; min-height:0; overflow:hidden; position:relative; }
.cn-mock-logo { font-family:'Hiragino Mincho ProN','Yu Mincho',serif; font-weight:700; letter-spacing:.06em; }
.cn-mock-title { font-family:'Hiragino Mincho ProN','Yu Mincho',serif; font-weight:700; letter-spacing:.04em; line-height:1.45 !important; margin:0; }
.cn-mock-cta { border-radius:999px; display:inline-block; font-weight:700; }
.cn-browser--minato .cn-mock-nav,.cn-browser--asahi .cn-mock-nav { align-items:center; border-bottom:1px solid #edf0f5; color:#6a7788; display:flex; font-size:clamp(7px,2.1cqi,11px); gap:3.5cqi; padding:2.6cqi 4cqi; }
.cn-browser--minato .cn-mock-nav .cn-mock-logo,.cn-browser--asahi .cn-mock-nav .cn-mock-logo { color:#1f3a68; flex:1; font-size:clamp(8px,2.6cqi,13px); }
.cn-browser--minato .cn-mock-hero { background:linear-gradient(120deg,#f6f8fc 0%,#e6ecf7 60%,#dbe4f4 100%); flex:1; padding:6cqi 5cqi 4cqi; position:relative; }
.cn-browser--minato .cn-mock-hero::after { background:radial-gradient(circle at 40% 40%,#c9d6ef,#9fb3dc); border-radius:50%; content:''; height:34cqi; opacity:.55; position:absolute; right:6cqi; top:5cqi; width:34cqi; }
.cn-browser--minato .cn-mock-kicker { color:#4d6aa3; font-size:clamp(7px,2cqi,11px) !important; font-weight:700; letter-spacing:.12em; line-height:1.4 !important; margin-bottom:2cqi; position:relative; z-index:1; }
.cn-browser--minato .cn-mock-title { color:#1f3a68; font-size:clamp(13px,5.4cqi,30px); max-width:12em; position:relative; z-index:1; }
.cn-browser--minato .cn-mock-cta { background:#1f3a68; color:#fff; font-size:clamp(7px,2.1cqi,11px); margin-top:4cqi; padding:1.6cqi 3.6cqi; position:relative; z-index:1; }
.cn-browser--minato .cn-mock-steps { display:grid; gap:2cqi; grid-template-columns:repeat(3,1fr); padding:3cqi 5cqi 4cqi; }
.cn-browser--minato .cn-mock-steps li { align-items:center; border:1px solid #e3e8f1; border-radius:8px; color:#1f3a68; display:flex; font-size:clamp(7px,2.2cqi,12px); font-weight:700; gap:1.6cqi; padding:1.8cqi 2.4cqi; }
.cn-browser--minato .cn-mock-steps span { color:#8aa0c8; font-size:.85em; }
.cn-browser--naniwa .cn-mock-photo { flex:1; min-height:0; position:relative; }
.cn-mock-photo__image { height:100%; inset:0; object-fit:cover; position:absolute; width:100%; }
.cn-mock-photo__copy { background:linear-gradient(90deg,rgba(20,24,28,.72) 0%,rgba(20,24,28,.18) 70%,transparent 100%); color:#fff; display:flex; flex-direction:column; height:100%; justify-content:flex-end; padding:5cqi; position:relative; }
.cn-mock-photo__copy .cn-mock-logo { font-size:clamp(8px,2.4cqi,13px) !important; margin-bottom:1.6cqi; opacity:.85; }
.cn-mock-photo__copy .cn-mock-title { font-size:clamp(14px,5.6cqi,32px); max-width:9em; }
.cn-browser--naniwa .cn-mock-columns { background:#f7f3ec; display:grid; flex:0 0 auto; gap:2cqi; grid-template-columns:repeat(3,1fr); padding:3cqi 5cqi; }
.cn-browser--naniwa .cn-mock-columns span { border-top:2px solid #b48a5a; color:#3b3128; font-family:'Hiragino Mincho ProN','Yu Mincho',serif; font-size:clamp(7px,2.2cqi,12px); font-weight:700; padding-top:1.4cqi; }

.cn-phone { background:#15181c; border-radius:30px; box-shadow:0 30px 50px -26px rgba(4,12,24,.55); container-type:inline-size; margin:0 auto; padding:8px; width:min(250px,72%); }
.cn-phone__screen { aspect-ratio:9/17; border-radius:23px; display:flex; flex-direction:column; overflow:hidden; padding:12cqi 9cqi 8cqi; position:relative; }
.cn-phone__screen .cn-mock-logo { font-size:6cqi; margin-bottom:6cqi; }
.cn-phone__screen .cn-mock-title { font-size:11cqi; position:relative; z-index:1; }
.cn-phone--komorebi .cn-phone__screen { background:linear-gradient(180deg,#f3f7ee 0%,#e4eedb 100%); color:#27402b; }
.cn-phone--komorebi .cn-mock-logo { color:#4f7a4f; }
.cn-phone--komorebi .cn-mock-title { color:#23402a; }
.cn-phone__leaf { background:radial-gradient(circle at 35% 35%,#b9d7a3,#6f9d63); border-radius:60% 0 60% 0; height:46cqi; opacity:.55; position:absolute; right:-10cqi; top:30cqi; transform:rotate(-18deg); width:46cqi; }
.cn-phone__screen .cn-mock-cta { align-self:flex-start; background:#3f6f45; color:#fff; font-size:5.4cqi; margin:8cqi 0 7cqi; padding:3cqi 6cqi; position:relative; z-index:1; }
.cn-phone__list { display:grid; gap:3cqi; margin-top:auto !important; }
.cn-phone__list li { background:rgba(255,255,255,.75); border-radius:10px; font-size:5.4cqi; font-weight:700; padding:4cqi 5cqi; }
.cn-phone--shiosai .cn-phone__screen { background:radial-gradient(circle at 80% 8%,rgba(201,164,92,.28),transparent 45%),linear-gradient(180deg,#14233d,#0b1628); color:#f3e9d2; }
.cn-phone--shiosai .cn-mock-logo { color:#c9a45c; }
.cn-phone--shiosai .cn-mock-title { color:#fff; }
.cn-phone--shiosai .cn-mock-cta { background:#c9a45c; color:#14233d; }
.cn-phone--shiosai .cn-phone__list li { background:rgba(255,255,255,.08); border:1px solid rgba(201,164,92,.3); }
.cn-phone__steps { display:grid; gap:4cqi; margin:4cqi 0 8cqi !important; }
.cn-phone__steps li { align-items:center; border-bottom:1px solid rgba(201,164,92,.25); display:flex; font-size:7cqi; font-weight:700; gap:4cqi; padding-bottom:4cqi; }
.cn-phone__steps span { align-items:center; background:#c9a45c; border-radius:50%; color:#14233d; display:flex; font-size:5.4cqi; height:11cqi; justify-content:center; width:11cqi; }
.cn-browser--asahi .cn-mock-nav { border-bottom-color:#efe3d1; }
.cn-browser--asahi .cn-mock-nav .cn-mock-logo { color:#4a2f1a; }
.cn-mock-service { background:linear-gradient(180deg,#fbf5ec,#f5e8d4); flex:1; padding:5cqi; }
.cn-mock-service .cn-mock-kicker { color:#c46a2a; font-size:clamp(7px,2cqi,11px) !important; font-weight:700; letter-spacing:.12em; line-height:1.4 !important; margin-bottom:1.6cqi; }
.cn-mock-service .cn-mock-title { color:#4a2f1a; font-size:clamp(13px,5cqi,28px); }
.cn-mock-cards { display:grid; gap:2.4cqi; grid-template-columns:repeat(3,1fr); margin-top:4cqi !important; }
.cn-mock-cards li { background:#fff; border-radius:10px; border-top:3px solid #e0833a; display:flex; flex-direction:column; gap:1cqi; padding:2.6cqi; }
.cn-mock-cards strong { color:#4a2f1a; font-size:clamp(8px,2.8cqi,15px); }
.cn-mock-cards span { color:#7a624d; font-size:clamp(6px,2cqi,11px); line-height:1.5; }


/* Works */
.cn-gallery { display:grid; gap:20px; grid-template-columns:repeat(6,minmax(0,1fr)); }
.cn-work { background:#fff; border:1px solid var(--cn-line); border-radius:20px; display:flex; flex-direction:column; gap:14px; min-width:0; padding:14px; transition:transform .25s,box-shadow .25s; }
.cn-work:hover { box-shadow:0 24px 48px -30px rgba(18,54,92,.55); transform:translateY(-3px); }
.cn-work--site,.cn-work--photo { grid-column:span 4; }
.cn-work--lp { background:linear-gradient(180deg,#eef4e8,#dfeccf); grid-column:span 2; grid-row:span 2; justify-content:space-between; padding-top:36px; }
.cn-work--service,.cn-work--mobile { grid-column:span 3; }
.cn-work--site .cn-browser,.cn-work--photo .cn-browser { aspect-ratio:16/9.4; box-shadow:0 18px 40px -26px rgba(4,12,24,.5); }
.cn-work--service .cn-browser { aspect-ratio:16/10.5; box-shadow:0 18px 40px -26px rgba(4,12,24,.5); }
.cn-work--mobile { justify-content:space-between; }
.cn-phones { display:flex; gap:14px; justify-content:center; padding:10px 0 4px; }
.cn-phones .cn-phone { margin:0; width:min(170px,44%); }
.cn-work--dark { background:var(--cn-night); border-color:var(--cn-night); color:#fff; }
.cn-work--dark .cn-sample { background:rgba(255,255,255,.14); color:#dfe8f3; }
.cn-work--dark .cn-work__meta { color:#aebfd6; }
.cn-work__caption { display:flex; flex-direction:column; gap:4px; padding:0 4px 4px; }
.cn-work__caption .cn-sample { align-self:flex-start; }
.cn-work__caption strong { font-size:16px; font-weight:750; line-height:1.45; }
.cn-work__meta { color:var(--cn-muted); font-size:13px; }
.cn-works__note { color:var(--cn-muted); font-size:12px; margin:18px 0 0; }

/* Loop */
.cn-loop { max-width:1320px; }
.cn-loop__layout { align-items:center; display:grid; gap:clamp(32px,5vw,64px); grid-template-columns:minmax(0,1fr) 640px; }
.cn-loop__photo { margin-top:32px; }
.cn-loop__photo img { aspect-ratio:4/3; border-radius:20px; object-fit:cover; width:100%; }
.cn-loop__diagram { height:640px; margin:0 auto; position:relative; width:640px; }
.cn-ring { inset:0; position:absolute; }
.cn-ring::before { border:2px dashed rgba(238,115,94,.45); border-radius:50%; content:''; inset:88px; position:absolute; }
.cn-ring__step { --a:0deg; background:#fff; border:1px solid var(--cn-line); border-radius:18px; box-shadow:0 18px 36px -26px rgba(18,54,92,.5); left:50%; padding:12px 14px 10px; position:absolute; text-align:center; top:50%; transform:translate(-50%,-50%) rotate(var(--a)) translateY(-232px) rotate(calc(var(--a) * -1)); width:170px; }
.cn-ring__step:nth-child(2) { --a:51.43deg; }
.cn-ring__step:nth-child(3) { --a:102.86deg; }
.cn-ring__step:nth-child(4) { --a:154.29deg; }
.cn-ring__step:nth-child(5) { --a:205.71deg; }
.cn-ring__step:nth-child(6) { --a:257.14deg; }
.cn-ring__step:nth-child(7) { --a:308.57deg; background:var(--cn-night); border-color:var(--cn-night); color:#fff; }
.cn-ring__index { color:var(--cn-coral-deep); display:block; font-size:11px; font-weight:800; letter-spacing:.14em; }
.cn-ring__step strong { display:block; font-size:21px; font-weight:850; letter-spacing:-.02em; line-height:1.3; }
.cn-ring__actor { background:var(--cn-sand); border-radius:999px; color:var(--cn-ink); display:inline-block; font-size:11px; font-weight:750; margin:4px 0 6px; padding:2px 9px; }
.cn-ring__step:nth-child(7) .cn-ring__actor { background:var(--cn-coral); color:#fff; }
.cn-ring__step:nth-child(7) .cn-ring__index { color:var(--cn-sun); }
.cn-ring__copy { color:var(--cn-muted); font-size:13px !important; line-height:1.55 !important; margin:0; }
.cn-ring__step:nth-child(7) .cn-ring__copy { color:#cfdbeb; }
.cn-ring__core { align-items:center; background:radial-gradient(circle at 30% 25%,#ff9c86,var(--cn-coral) 55%,var(--cn-coral-deep)); border-radius:50%; box-shadow:0 30px 60px -30px rgba(212,85,63,.9); color:#fff; display:flex; flex-direction:column; height:210px; justify-content:center; left:50%; padding:24px; position:absolute; text-align:center; top:50%; transform:translate(-50%,-50%); width:210px; }
.cn-ring__arrow { font-size:40px; line-height:1; margin-bottom:6px; }
.cn-ring__core p { font-size:16px !important; font-weight:800; line-height:1.55 !important; margin:0; }

/* Participation path (D9) */
.cn-steps__tiers { display:grid; gap:14px; grid-template-columns:2fr 3fr; margin-bottom:12px; }
.cn-steps__tier { background:var(--cn-sand); border-radius:999px; color:var(--cn-ink); font-size:12px; font-weight:800; letter-spacing:.1em; padding:6px 14px; }
.cn-steps__tier--production { background:var(--cn-night); color:#fff; }
.cn-steps__list { display:grid; gap:14px; grid-template-columns:repeat(5,minmax(0,1fr)); }
.cn-step { background:#fff; border:1px solid var(--cn-line); border-radius:18px; padding:20px 18px; position:relative; }
.cn-step:not(:last-child)::after { color:var(--cn-coral); content:'→'; font-size:18px; font-weight:800; position:absolute; right:-13px; top:22px; z-index:1; }
.cn-step--production { background:var(--cn-night); border-color:var(--cn-night); color:#fff; }
.cn-step:last-child { background:var(--cn-coral); border-color:var(--cn-coral); }
.cn-step__index { color:var(--cn-coral-deep); font-size:13px; font-weight:850; letter-spacing:.1em; }
.cn-step--production .cn-step__index { color:var(--cn-sun); }
.cn-step:last-child .cn-step__index { color:#fff; }
.cn-step__tier { background:var(--cn-sand); border-radius:999px; color:var(--cn-ink); display:inline-block; font-size:11px; font-weight:750; margin-left:8px; padding:2px 8px; }
.cn-step--production .cn-step__tier { background:rgba(255,255,255,.14); color:#fff; }
.cn-page .cn-step h3 { font-size:18px; margin:12px 0 6px; }
.cn-page .cn-step p { color:var(--cn-muted); font-size:14px; line-height:1.75; margin:0; }
.cn-page .cn-step--production p { color:#cfdbeb; }
.cn-page .cn-step:last-child p { color:#fff4ee; }
.cn-page .cn-steps__note { color:var(--cn-muted); font-size:14px; margin:18px 0 0; }

/* Values */
.cn-tool { background:linear-gradient(135deg,#e9f1fb,#fdf1e7); border-radius:24px; display:grid; gap:24px; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); margin-bottom:28px; padding:clamp(16px,2.4vw,28px); }
.cn-designer { background:#fff; border-radius:16px; box-shadow:0 24px 50px -30px rgba(18,54,92,.55); display:grid; gap:14px; grid-template-columns:minmax(120px,.36fr) minmax(0,1fr); padding:14px; }
.cn-designer__side { border-right:1px solid var(--cn-line); padding-right:12px; }
.cn-page .cn-designer__label { color:var(--cn-muted); font-size:10px; font-weight:800; letter-spacing:.12em; line-height:1.4; margin:10px 0 6px; }
.cn-page .cn-designer__app { border-bottom:1px solid var(--cn-line); color:var(--cn-ink); font-size:13px; font-weight:850; line-height:1.4; margin:0 0 4px; padding-bottom:8px; }
.cn-designer__themes li { align-items:center; border-radius:8px; display:flex; font-size:12px; gap:8px; padding:5px 8px; }
.cn-designer__themes li.is-active { background:#eef2fa; font-weight:750; }
.cn-designer__themes span { background:#1f3a68; border-radius:50%; height:14px; width:14px; }
.cn-designer__themes li:nth-child(2) span { background:#3f6f45; }
.cn-designer__themes li:nth-child(3) span { background:#c9a45c; }
.cn-designer__swatches { display:flex; flex-wrap:wrap; gap:6px; }
.cn-designer__swatches span { background:#1f3a68; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); height:18px; width:18px; }
.cn-designer__swatches span:nth-child(2) { background:#4d6aa3; }
.cn-designer__swatches span:nth-child(3) { background:#dbe4f4; }
.cn-designer__swatches span:nth-child(4) { background:#f6f8fc; }
.cn-designer__swatches span:nth-child(5) { background:var(--cn-coral); }
.cn-designer__chips { display:flex; flex-wrap:wrap; gap:6px; }
.cn-designer__chips li { border:1px solid var(--cn-line); border-radius:999px; font-size:11px; padding:2px 10px; }
.cn-designer__chips li.is-active { background:var(--cn-ink); border-color:var(--cn-ink); color:#fff; }
.cn-designer__sections li { border-left:2px solid var(--cn-line); font-size:11px; margin:3px 0; padding:3px 8px; }
.cn-designer__sections li:first-child { border-left-color:var(--cn-coral); font-weight:750; }
.cn-designer__canvas { align-self:center; min-width:0; }
.cn-designer__canvas .cn-browser { aspect-ratio:16/11; border:1px solid var(--cn-line); box-shadow:none; }
.cn-tool figcaption { align-self:center; display:flex; flex-direction:column; gap:10px; padding:8px; }
.cn-tool strong { font-size:clamp(22px,2.4vw,30px); font-weight:850; letter-spacing:-.03em; line-height:1.3; }
.cn-tool span { color:var(--cn-muted); line-height:1.8; }
.cn-tool .cn-tool__kicker { color:var(--cn-coral-deep); font-size:12px; font-weight:800; letter-spacing:.14em; line-height:1.4; }
.cn-values__grid { display:grid; gap:16px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.cn-value { background:#fff; border:1px solid var(--cn-line); border-radius:18px; padding:24px 24px 18px; }
.cn-value__index { color:var(--cn-coral-deep); display:block; font-size:13px; font-weight:850; letter-spacing:.1em; margin-bottom:14px; }
.cn-value p { color:var(--cn-muted); font-size:15px !important; line-height:1.8 !important; margin:0; }
.cn-value--featured { background:var(--cn-night); border-color:var(--cn-night); color:#fff; }
.cn-value--featured .cn-value__index { color:var(--cn-sun); }
.cn-value--featured p { color:#d3deec; }

/* Path */
.cn-path { background:var(--cn-night); color:#fff; max-width:none; }
.cn-path > * { margin-left:auto; margin-right:auto; max-width:1240px; }
.cn-path .cn-eyebrow { color:var(--cn-sun); }
.cn-path .cn-lead { color:#c3d1e3; }
.cn-path__track { display:grid; gap:18px; grid-template-columns:repeat(4,minmax(0,1fr)); }
.cn-stage { background:var(--cn-night-2); border:1px solid rgba(255,255,255,.1); border-radius:20px; display:flex; flex-direction:column; overflow:hidden; position:relative; }
.cn-stage--web { border:2px solid var(--cn-coral); }
.cn-stage__visual { aspect-ratio:4/3; overflow:hidden; }
.cn-stage__visual--icon { align-items:center; display:flex; justify-content:center; }
.cn-stage__visual--sns { background:radial-gradient(circle at 30% 25%,rgba(238,115,94,.35),transparent 60%),#1b2f4c; }
.cn-stage__visual--motion { background:radial-gradient(circle at 70% 30%,rgba(23,105,214,.45),transparent 60%),#1b2f4c; }
.cn-stage__visual--content { background:radial-gradient(circle at 40% 70%,rgba(255,210,122,.3),transparent 60%),#1b2f4c; }
.cn-stage__icon { border:2px dashed rgba(255,255,255,.3); border-radius:26px; color:rgba(255,255,255,.88); font-size:clamp(44px,4.6vw,64px); font-weight:800; letter-spacing:-.02em; line-height:1; min-width:1.9em; padding:.35em .4em; text-align:center; }
.cn-stage__visual--web { background:linear-gradient(135deg,#dfe7f6,#f6efe4); padding:16px 16px 0; }
.cn-stage__visual--web .cn-browser { border-radius:10px 10px 0 0; height:100%; }
.cn-stage__body { padding:18px 20px 22px; }
.cn-stage__top { align-items:center; display:flex; gap:10px; justify-content:space-between; margin-bottom:12px; }
.cn-stage__label { color:#aebfd6; font-size:12px; font-weight:800; letter-spacing:.1em; }
.cn-stage__state { border:1px solid rgba(255,255,255,.3); border-radius:999px; color:#dfe8f3; font-size:11px; font-weight:750; padding:2px 9px; white-space:nowrap; }
.cn-stage--web .cn-stage__state { background:var(--cn-coral); border-color:var(--cn-coral); color:#fff; }
.cn-stage p { color:#c3d1e3; font-size:14px !important; line-height:1.8 !important; margin:0; }

/* Creators */
.cn-creators { max-width:none; background:var(--cn-sand); }
.cn-creators > * { margin-left:auto; margin-right:auto; max-width:1240px; }
.cn-creators__list { display:grid; gap:18px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.cn-creator { background:#fff; border-radius:20px; display:flex; flex-direction:column; gap:14px; padding:22px; }
.cn-creator__top { align-items:center; display:grid; gap:12px; grid-template-columns:auto minmax(0,1fr) auto; }
.cn-creator h3 { font-size:18px; margin:0; }
.cn-creator__handle { color:var(--cn-muted); display:block; font-size:13px; overflow-wrap:anywhere; }
.cn-avatar { align-items:center; background:linear-gradient(135deg,var(--cn-coral),var(--cn-blue)); border-radius:50%; color:#fff; display:flex; font-size:20px; font-weight:800; height:52px; justify-content:center; width:52px; }
.cn-creator--anonymous .cn-avatar { background:transparent; border:2px dashed rgba(18,54,92,.35); color:var(--cn-muted); }
.cn-availability { border-radius:999px; font-size:11px; font-weight:800; padding:3px 9px; white-space:nowrap; }
.cn-availability--open { background:#dff3e6; color:#1d6b3f; }
.cn-availability--limited { background:#fff1d1; color:#8a5a00; }
.cn-availability--closed { background:#eceff3; color:#5b6878; }
.cn-creator__bio { color:var(--cn-muted); font-size:15px !important; line-height:1.8 !important; margin:0; }
.cn-tags { display:flex; flex-wrap:wrap; gap:6px; }
.cn-tags li { background:var(--cn-paper); border:1px solid var(--cn-line); border-radius:999px; font-size:13px; font-weight:650; padding:3px 11px; }
.cn-tags--muted li { background:#f1f3f6; color:#5b6878; text-decoration:line-through; text-decoration-color:rgba(91,104,120,.5); }
.cn-creator__foot { border-top:1px solid var(--cn-line); color:var(--cn-muted); display:flex; font-size:13px !important; gap:12px; justify-content:space-between; line-height:1.6 !important; margin:auto 0 0; padding-top:12px; }
.cn-creators__more { margin:28px 0 0; }

/* Reward and privacy */
.cn-promise__grid { display:grid; gap:16px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.cn-promise__card { background:#fff; border:1px solid var(--cn-line); border-radius:20px; display:flex; flex-direction:column; gap:10px; padding:26px; }
.cn-promise__card p { color:var(--cn-muted); margin:0; }
.cn-promise__card--reward { background:var(--cn-coral); border-color:var(--cn-coral); color:#fff; }
.cn-promise__card--reward p { color:#fff4ee; }
.cn-promise__card--reward p:last-child { border-top:1px solid rgba(255,255,255,.3); font-weight:750; padding-top:10px; }

/* FAQ */
.cn-faq { max-width:980px; }
.cn-faq__list { border-top:1px solid var(--cn-line); }
.cn-faq details { border-bottom:1px solid var(--cn-line); }
.cn-faq summary { cursor:pointer; display:flex; font-size:17px; font-weight:750; gap:16px; justify-content:space-between; line-height:1.55; list-style:none; padding:22px 4px; }
.cn-faq summary::-webkit-details-marker { display:none; }
.cn-faq summary::after { color:var(--cn-coral-deep); content:'+'; flex:0 0 auto; font-size:24px; font-weight:500; line-height:1; transition:transform .2s; }
.cn-faq details[open] summary::after { transform:rotate(45deg); }
.cn-faq details p { color:var(--cn-muted); margin:0; max-width:46em; padding:0 4px 24px; }

/* Join */
.cn-join { background:radial-gradient(circle at 15% 10%,rgba(238,115,94,.5),transparent 45%),radial-gradient(circle at 90% 90%,rgba(23,105,214,.6),transparent 50%),var(--cn-night); color:#fff; padding:clamp(72px,9vw,128px) clamp(20px,5vw,64px); text-align:center; }
.cn-join__inner { margin:0 auto; max-width:820px; }
.cn-join .cn-eyebrow { color:var(--cn-sun); }
.cn-join h2 { font-size:clamp(34px,5vw,64px); }
.cn-join .cn-lead { color:#d3deec; margin:0 auto; }
.cn-join__steps { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:30px 0 4px !important; }
.cn-join__steps li { align-items:center; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:999px; display:flex; font-size:15px; font-weight:650; gap:10px; padding:8px 16px 8px 8px; }
.cn-join__steps span { align-items:center; background:var(--cn-coral); border-radius:50%; display:flex; font-size:13px; font-weight:850; height:26px; justify-content:center; width:26px; }
.cn-join__signed-in { color:#aebfd6; font-size:14px !important; margin:22px 0 0; }
.cn-join__signed-in .cn-link { font-size:14px; }

/* Responsive */
@media (max-width:1180px) {
  .cn-loop__layout { grid-template-columns:1fr; }
  .cn-loop__copy { max-width:760px; }
  .cn-loop__photo { display:none; }
}
@media (max-width:1000px) {
  .cn-hero__inner { grid-template-columns:1fr; }
  .cn-collage { margin:0 auto; max-width:620px; width:100%; }
  .cn-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cn-work--site { grid-column:span 2; }
  .cn-work--lp,.cn-work--photo,.cn-work--service,.cn-work--mobile { grid-column:span 1; grid-row:span 1; }
  .cn-values__grid,.cn-creators__list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cn-path__track { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cn-tool { grid-template-columns:1fr; }
  .cn-steps__tiers { display:none; }
  .cn-steps__list { grid-template-columns:1fr; }
  .cn-step:not(:last-child)::after { bottom:-19px; content:'↓'; left:26px; right:auto; top:auto; }
}
@media (max-width:720px) {
  .cn-section { padding:64px 16px; }
  .cn-hero { padding:40px 16px 32px; }
  .cn-join { padding:72px 16px; }
  .cn-collage { grid-template-rows:repeat(12,27px); }
  .cn-collage .cn-work__caption { padding:4px 8px; }
  .cn-collage .cn-sample { display:none; }
  .cn-collage__site .cn-work__caption { top:38px; }
  .cn-facts { grid-template-columns:1fr; }
  .cn-facts > div,.cn-facts > div + div { border-left:0; padding:16px 0 0; }
  .cn-facts > div + div { border-top:1px solid rgba(255,255,255,.1); margin-top:16px; }
  .cn-actions { gap:16px; }
  .cn-button { width:100%; }
  .cn-gallery,.cn-values__grid,.cn-creators__list,.cn-path__track,.cn-promise__grid { grid-template-columns:1fr; }
  .cn-work--site,.cn-work--lp,.cn-work--photo,.cn-work--service,.cn-work--mobile { grid-column:auto; grid-row:auto; }
  .cn-designer { grid-template-columns:1fr; }
  .cn-designer__side { border-bottom:1px solid var(--cn-line); border-right:0; padding:0 0 12px; }
  .cn-designer__sections,.cn-page .cn-designer__label:nth-of-type(5) { display:none; }
  .cn-work--lp { padding-top:28px; }
  .cn-loop__diagram { height:auto; width:auto; }
  .cn-ring { display:grid; gap:10px; position:relative; }
  .cn-ring::before { border:0; border-left:2px dashed rgba(238,115,94,.45); border-radius:0; inset:24px auto 24px 27px; position:absolute; width:0; }
  .cn-ring__step,.cn-ring__step:nth-child(n) { align-items:baseline; column-gap:12px; display:grid; grid-template-columns:40px auto 1fr; left:auto; padding:14px 16px; position:relative; text-align:left; top:auto; transform:none; width:auto; }
  .cn-ring__index { grid-row:span 2; }
  .cn-ring__actor { justify-self:start; margin:0; }
  .cn-ring__copy { grid-column:2/4; }
  .cn-ring__core { border-radius:18px; flex-direction:row; gap:12px; height:auto; left:auto; margin-top:12px; padding:16px 18px; position:relative; text-align:left; top:auto; transform:none; width:auto; }
  .cn-ring__arrow { font-size:30px; margin:0; }
  .cn-promise__card { padding:22px; }
  .cn-join__steps { align-items:stretch; flex-direction:column; }
  .cn-join__steps li { text-align:left; }
}
@media (prefers-reduced-motion:reduce) {
  .cn-button,.cn-button::after,.cn-work,.cn-faq summary::after { transition:none; }
  .cn-button:hover,.cn-work:hover { transform:none; }
}