/* DuskPlay v4 — landing pages, minimal */
.sec,.hero-in{max-width:1040px;margin:0 auto;padding-left:clamp(16px,4vw,40px);padding-right:clamp(16px,4vw,40px)}
.hero{padding:clamp(72px,11vw,140px) 0 clamp(56px,8vw,96px);border-bottom:1px solid var(--line)}
.hero-in{text-align:center}
.hero h1{max-width:820px;margin:14px auto 18px}
.hero .lede{margin:0 auto 32px}
.hero.left .hero-in{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;text-align:left;align-items:start}
.hero.left h1,.hero.left .lede{margin-left:0}

.wl{max-width:460px;margin:0 auto}
.wl-row{display:flex;gap:8px}
.wl-row input{flex:1;min-width:0}
.wl-note{font-size:13px;color:var(--muted);margin-top:12px}
.done{display:none;padding:12px 0}
.done .form-ok{display:inline-flex;align-items:center;gap:8px}

.sec{padding-top:clamp(56px,8vw,96px);padding-bottom:clamp(8px,2vw,16px)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.sec-head h2{margin-top:6px}
.text-link{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:14px;text-decoration:none;min-height:44px}
.text-link:hover{color:var(--text)}
.text-link .ico{width:15px;height:15px}

/* features: simple 3/4-col text */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.why.four{grid-template-columns:repeat(4,1fr);gap:32px}
.why-item .ico{color:var(--text);margin-bottom:14px}
.why-item h3{margin-bottom:6px;font-size:16px}
.why-item p{color:var(--muted);font-size:15px;line-height:1.6}

/* collections: flat tiles */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.tile{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:22px 22px;text-decoration:none;color:var(--text);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .15s;min-height:88px}
.tile:nth-child(3n){border-right:0}
.tile:nth-last-child(-n+3){border-bottom:0}
.tile:hover{background:var(--surface)}
.tile .t-l{display:flex;align-items:center;gap:14px}
.tile .ico{color:var(--muted)}
.tile b{display:block;font-weight:600;font-size:15px}
.tile small{display:block;color:var(--muted);font-size:13px}
.tile .arr{color:var(--muted);transition:transform .15s,color .15s}
.tile:hover .arr{color:var(--text);transform:translateX(2px)}

/* list of links */
.list{border-top:1px solid var(--line)}
.list a{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--text)}
.list a span{color:var(--muted)}
.list a:hover span{color:var(--text)}

.final{max-width:1040px;margin:clamp(56px,8vw,96px) auto 0;padding:0 clamp(16px,4vw,40px)}
.final-in{border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(36px,6vw,64px) 24px;text-align:center;background:var(--surface)}
.final-in h2{margin-bottom:8px}
.final-in>p{color:var(--muted);margin:0 auto 24px;max-width:460px}
.final-form{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;max-width:460px;margin:0 auto}
.final-form input{flex:1;min-width:200px}

/* creators */
.apply{border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;background:var(--surface)}
.apply form{display:flex;flex-direction:column;gap:10px}
.apply-title{font-weight:600;font-size:16px;margin-bottom:4px}
.apply .btn{width:100%;margin-top:4px}
.tiny{font-size:12.5px;color:var(--muted)}
.tiny a{color:var(--text-2)}
.pnote{display:block;font-weight:400;color:var(--muted);font-size:13px;margin-top:3px}
td.cut{white-space:nowrap;color:var(--text-2)}
tr.dp td{background:var(--surface)}
tr.dp td.cut{color:var(--text);font-weight:600}

@media(max-width:860px){
  .hero.left .hero-in{grid-template-columns:1fr;gap:32px}
  .why,.why.four{grid-template-columns:1fr 1fr}
  .tiles{grid-template-columns:1fr 1fr}
  .tile:nth-child(3n){border-right:1px solid var(--line)}
  .tile:nth-child(2n){border-right:0}
  .tile:nth-last-child(-n+3){border-bottom:1px solid var(--line)}
  .tile:nth-last-child(-n+2){border-bottom:0}
}
@media(max-width:560px){
  .wl-row{flex-direction:column}
  .why,.why.four{grid-template-columns:1fr;gap:28px}
  .tiles{grid-template-columns:1fr}
  .tile,.tile:nth-child(2n),.tile:nth-child(3n){border-right:0}
  .tile:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
  .tile:last-child{border-bottom:0}
  .final-form input,.final-form .btn{width:100%}
}
.hero.left .hero-in>*{min-width:0}

/* ─── v4.1 colour layer ─── */
.hero{position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;left:50%;top:-30%;width:min(1100px,140vw);height:620px;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(242,166,90,.16),rgba(232,112,92,.08) 55%,transparent)}
.hero.left::before{left:30%}
.hero-in{position:relative}
.why-item .ico{color:var(--accent);width:40px;height:40px;padding:10px;border-radius:10px;background:var(--accent-soft)}
.tile .ico{width:38px;height:38px;padding:9px;border-radius:10px;color:var(--c,#F2A65A);background:color-mix(in srgb,var(--c,#F2A65A) 14%,transparent)}
.tile:nth-child(1){--c:#F2A65A}.tile:nth-child(2){--c:#E8705C}.tile:nth-child(3){--c:#7CC4A1}
.tile:nth-child(4){--c:#E57AA8}.tile:nth-child(5){--c:#A98BEB}.tile:nth-child(6){--c:#6FB3E8}
.tile:hover .arr{color:var(--c)}
.list a span{color:var(--accent)}
.text-link{color:var(--accent)}
.text-link:hover{color:#F6B877}
.final-in{border-color:rgba(242,166,90,.35);background:radial-gradient(80% 120% at 50% 120%,rgba(232,112,92,.18),transparent 60%),radial-gradient(60% 90% at 50% 110%,rgba(242,166,90,.16),transparent 60%),var(--surface)}
.apply{border-color:rgba(242,166,90,.3)}
tr.dp td{background:var(--accent-soft)}
tr.dp td.cut{color:var(--accent)}

/* creators: demand stats, steps, faq */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.stat{border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;background:var(--surface)}
.stat b{display:block;font-size:clamp(26px,3.2vw,34px);font-weight:700;letter-spacing:-.02em;line-height:1.1;
  background:linear-gradient(180deg,#F2A65A,#E8705C);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{display:block;color:var(--muted);font-size:14px;margin-top:6px;line-height:1.45}
.stats-note{font-size:13px;color:var(--muted);margin-top:12px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;counter-reset:st}
.step{border:1px solid var(--line);border-radius:var(--r-lg);padding:22px}
.step::before{counter-increment:st;content:counter(st);display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:var(--accent-soft);color:var(--accent);font-weight:600;font-size:14px;margin-bottom:12px}
.step h3{font-size:16px;margin-bottom:6px}
.step p{color:var(--muted);font-size:15px;line-height:1.6}
.keep-list{columns:2;column-gap:40px;padding-left:0;list-style:none}
.keep-list li{break-inside:avoid;display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);color:var(--text-2)}
.keep-list li .ico{color:var(--accent);flex:none;width:18px;height:18px;margin-top:3px}
.cfaq details{border-bottom:1px solid var(--line);padding:16px 0}
.cfaq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:12px}
.cfaq summary::after{content:"+";color:var(--accent)}
.cfaq details[open] summary::after{content:"–"}
.cfaq details p{color:var(--muted);margin-top:10px;line-height:1.65}
.hero-proof{display:inline-flex;align-items:center;gap:8px;margin-top:8px;font-size:14px;color:var(--text-2)}
.hero-proof i{width:8px;height:8px;border-radius:50%;background:#7CC4A1;box-shadow:0 0 0 4px rgba(124,196,161,.18)}
.cstrip{max-width:1040px;margin:clamp(56px,8vw,96px) auto 0;padding:0 clamp(16px,4vw,40px)}
.cstrip-in{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px}
.cstrip-in h2{font-size:clamp(20px,2.4vw,26px);margin-bottom:4px}
.cstrip-in p{color:var(--muted)}
@media(max-width:860px){.stats{grid-template-columns:1fr 1fr}.steps{grid-template-columns:1fr}.keep-list{columns:1}}

/* ─── v4.2: teasers, terms, mobile bar ─── */
.tease{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.tz{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);transition:transform .2s ease,border-color .2s}
.tz:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--a) 45%,var(--line))}
.tz-cover{position:relative;aspect-ratio:3/4;display:grid;place-items:center;
  background:radial-gradient(120% 80% at 30% 15%,color-mix(in srgb,var(--a) 55%,transparent),transparent 60%),linear-gradient(160deg,var(--b),#0d0d0d 85%)}
.tz-cover::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.035) 0 2px,transparent 2px 14px);mix-blend-mode:overlay}
.tz-lock{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:rgba(10,10,10,.55);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.12);color:var(--a)}
.tz-lock .ico{width:20px;height:20px}
.tz-info{padding:12px 14px}
.tz-info small{display:block;color:var(--a);font-size:12px;font-weight:500;letter-spacing:.01em}
.tz-info b{display:block;font-weight:600;font-size:14.5px;margin-top:2px}
.terms{display:grid;grid-template-columns:.9fr 1.1fr;gap:12px}
.term-main{border:1px solid rgba(242,166,90,.35);border-radius:var(--r-lg);padding:clamp(24px,4vw,36px);
  background:radial-gradient(90% 120% at 0% 0%,rgba(242,166,90,.16),transparent 60%),var(--surface);display:flex;flex-direction:column;justify-content:center}
.term-main b{font-size:clamp(64px,9vw,96px);font-weight:700;letter-spacing:-.04em;line-height:1;
  background:linear-gradient(180deg,#F2A65A,#E8705C);-webkit-background-clip:text;background-clip:text;color:transparent}
.term-main p{color:var(--text-2);font-size:16px;line-height:1.6;margin-top:10px}
.term-main strong{color:var(--text)}
.term-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.term{border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;transition:border-color .2s}
.term:hover{border-color:rgba(242,166,90,.35)}
.term .ico{width:36px;height:36px;padding:9px;border-radius:10px;color:var(--accent);background:var(--accent-soft);margin-bottom:12px}
.term h3{font-size:15.5px;margin-bottom:4px}
.term p{color:var(--muted);font-size:14.5px;line-height:1.55}
.hero .lede strong{color:var(--text);font-weight:600}
.mbar{display:none}
@media(max-width:860px){.tease{grid-template-columns:1fr 1fr}.terms{grid-template-columns:1fr}}
@media(max-width:560px){
  .term-grid{grid-template-columns:1fr}
  .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;align-items:center;justify-content:space-between;gap:12px;
    padding:10px max(16px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
    background:rgba(12,12,12,.92);backdrop-filter:blur(12px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .25s ease}
  .mbar.on{transform:none}
  .mbar span{font-size:13.5px;color:var(--text-2)}
  .mbar .btn{min-height:42px;padding:0 16px;font-size:14px;white-space:nowrap}
}
.hero-in>.wl .hero-proof{justify-content:center}
@media(max-width:560px){.tz-cover{aspect-ratio:1/1}.tz-info small{font-size:11.5px}}