/* Drop Companion concept page: the section styles of the original page (2026-09-23), moved here
   unchanged when the page became the hub home (2026-09-24). Tokens, nav, footer and buttons now come
   from fn.css; this file only styles the concept sections. */
*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden}
a{color:var(--cyan); text-decoration:none}
a:hover{color:#8df1ff}
h1,h2,h3{font-family:var(--display); font-weight:400; margin:0; letter-spacing:.015em; text-wrap:balance}
p{margin:0}
svg{display:block}
:focus-visible{outline:2px solid var(--cyan); outline-offset:3px}

.wrap{max-width:1240px; margin:0 auto; padding:0 56px}
section{padding:104px 0; position:relative}
.band{background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
h2{font-size:clamp(40px,5vw,64px); line-height:.96}
h3{font-size:25px; line-height:1.05; letter-spacing:.03em}
.col{max-width:62ch}
.lede{font-size:19px; color:var(--ink-2); margin-top:18px}
.eyebrow{display:inline-flex; align-items:center; gap:10px; margin-bottom:18px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--cyan)}
.eyebrow::before{content:""; width:22px; height:3px; border-radius:2px; background:linear-gradient(90deg,var(--cyan),var(--violet))}

/* buttons: the app skin's gradient with a cut corner */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; cursor:pointer; border:0;
  font-family:var(--display); font-size:21px; letter-spacing:.06em; line-height:1; padding:16px 28px 14px;
  color:var(--on-accent); background:linear-gradient(135deg,var(--cyan),var(--blue));
  clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);
  transition:transform .18s ease, filter .18s ease}
.btn:hover{color:var(--on-accent); transform:translateY(-1px); filter:brightness(1.1)}
.btn-ghost{display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--display); font-size:21px; letter-spacing:.06em; line-height:1; padding:15px 26px 13px;
  color:var(--ink); border:1px solid var(--line-2); border-radius:10px; background:var(--raise);
  transition:background .2s ease, border-color .2s ease}
.btn-ghost:hover{color:#fff; background:rgba(126,162,255,.14); border-color:rgba(126,162,255,.6)}
.cta-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px}
.soon{display:inline-flex; align-items:center; gap:9px; padding:6px 13px; border-radius:999px;
  border:1px solid rgba(255,210,61,.45); background:rgba(255,210,61,.08);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--yellow)}
.soon i{width:7px; height:7px; border-radius:50%; background:var(--yellow); box-shadow:0 0 0 0 rgba(255,210,61,.6); animation:ping 2.4s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(255,210,61,.55)}70%{box-shadow:0 0 0 9px rgba(255,210,61,0)}100%{box-shadow:0 0 0 0 rgba(255,210,61,0)}}


/* ---- hero ---- */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line);
  background:
    radial-gradient(900px 520px at 8% -6%, rgba(47,123,255,.24), transparent 62%),
    radial-gradient(760px 520px at 100% 108%, rgba(163,91,255,.22), transparent 62%),
    var(--bg)}
.hero::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(126,162,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(126,162,255,.06) 1px, transparent 1px);
  background-size:48px 48px; -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 85%); mask-image:linear-gradient(180deg,#000 0%,transparent 85%)}
.hero-in{position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); gap:56px; align-items:center; padding-top:64px; padding-bottom:84px}
.hero h1{font-size:clamp(58px,7.4vw,108px); line-height:.9; margin-top:22px}
.hero h1 em{font-style:normal; background:linear-gradient(95deg,var(--cyan) 0%,#8f9bff 50%,var(--violet) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.hero .sub{font-size:20px; color:var(--ink-2); margin-top:24px; max-width:32em}
.hero .sub b{color:var(--ink); font-weight:600}
.hero .note{font-size:13.5px; color:var(--ink-3); margin-top:14px}
.shot{position:relative}
.shot .screen{border-radius:18px; overflow:hidden; border:1px solid var(--line-2);
  box-shadow:0 40px 90px -40px rgba(47,123,255,.55), 0 0 0 6px rgba(126,162,255,.05)}
.shot .screen svg{width:100%; height:auto}
.shot figcaption{font-size:13px; color:var(--ink-3); margin-top:14px; line-height:1.5}
.shot figcaption b{color:var(--ink-2); font-weight:500}

/* ---- the outfit is the character ---- */
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px; align-items:center}
.feat{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 36px; margin-top:36px}
.feat h3{font-size:22px}
.feat p{color:var(--ink-2); font-size:15.5px; margin-top:6px}
.locker{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.tile{position:relative; border-radius:14px; overflow:hidden; background:var(--panel-2); border:1px solid var(--line-2); display:flex; flex-direction:column}
.tile .art{position:relative; aspect-ratio:3/3.4; background:radial-gradient(120% 90% at 50% 100%, var(--c1) 0%, var(--c2) 55%, #0b1122 100%)}
.tile .art::before{content:""; position:absolute; left:0; right:0; top:0; height:5px; background:var(--c1)}
.tile .art svg{position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:82%; height:auto}
.tile .lbl{padding:12px 14px 14px; border-top:1px solid var(--line)}
.tile .lbl b{display:block; font-family:var(--display); font-weight:400; font-size:22px; letter-spacing:.05em; line-height:1}
.tile .lbl span{display:block; font-size:13.5px; line-height:1.45; color:var(--ink-2); margin-top:6px}
.swap{margin-top:14px; display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:14px;
  border:1px dashed var(--line-2); background:var(--raise)}
.swap svg{flex:none}
.swap p{font-size:15px; color:var(--ink-2)}
.swap p b{color:var(--ink); font-weight:600}

/* ---- what she notices ---- */
.subhead{display:flex; align-items:baseline; justify-content:space-between; gap:18px; flex-wrap:wrap; margin:56px 0 18px}
.subhead h3{font-size:30px}
.subhead span{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.cards{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
.cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{position:relative; padding:22px 22px 24px; border-radius:14px; background:var(--panel); border:1px solid var(--line);
  transition:transform .2s ease, border-color .2s ease}
.card::before{content:""; position:absolute; left:18px; right:18px; top:-1px; height:3px; border-radius:0 0 3px 3px; background:var(--a,var(--cyan))}
.card:hover{transform:translateY(-2px); border-color:var(--line-2)}
.card .ic{width:44px; height:44px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--a,var(--cyan)) 14%, transparent); color:var(--a,var(--cyan)); margin-bottom:16px}
.card h4{font-family:var(--display); font-weight:400; font-size:24px; letter-spacing:.04em; line-height:1; margin:0}
.card p{font-size:15px; color:var(--ink-2); margin-top:9px; line-height:1.55}
.card q{display:block; margin-top:12px; font-family:var(--mono); font-size:13px; color:var(--ink); quotes:none;
  padding:8px 11px; border-radius:8px; background:rgba(126,162,255,.08); border:1px solid var(--line)}
.checked{display:flex; gap:14px; align-items:flex-start; margin-top:36px; padding:18px 22px; border-radius:14px;
  border:1px solid rgba(61,220,151,.35); background:rgba(61,220,151,.06)}
.checked svg{flex:none; margin-top:2px}
.checked p{font-size:15.5px; color:var(--ink-2)}
.checked b{color:var(--ink); font-weight:600}

/* ---- how it works ---- */
.flow{display:grid; grid-template-columns:minmax(0,2.1fr) minmax(190px,.7fr) minmax(0,1fr); gap:0; align-items:stretch; margin-top:52px}
.pc{position:relative; display:grid; grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr); align-items:stretch;
  border:2px dashed rgba(47,228,255,.45); border-radius:20px; padding:34px 22px 22px; background:rgba(47,228,255,.035)}
.pc > .tag, .step3 > .tag{position:absolute; top:-13px; left:22px; font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--on-accent); background:var(--cyan); padding:3px 10px; border-radius:6px}
.step{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:22px 20px 22px}
.step .n{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.step .n b{font-family:var(--display); font-weight:400; font-size:44px; line-height:.8; color:transparent;
  -webkit-text-stroke:1.4px var(--cyan)}
.step .n svg{color:var(--cyan)}
.step h3{font-size:26px}
.step p{font-size:15px; color:var(--ink-2); margin-top:8px; line-height:1.55}
.step ul{margin:12px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:6px}
.step li{font-family:var(--mono); font-size:12px; color:var(--ink); padding:4px 9px; border-radius:999px; border:1px solid var(--line-2); background:var(--raise)}
.arr{display:flex; align-items:center; justify-content:center; color:var(--cyan)}
.hand{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:0 12px; text-align:center}
.hand .pkt{font-family:var(--mono); font-size:12.5px; line-height:1.4; color:var(--on-accent); background:var(--yellow); padding:8px 11px; border-radius:9px;
  box-shadow:0 10px 30px -12px rgba(255,210,61,.6); max-width:210px}
.hand small{font-size:12.5px; line-height:1.45; color:var(--ink-3); max-width:180px}
.hand .line{color:var(--yellow)}
.step3{position:relative; border:2px solid rgba(163,91,255,.45); border-radius:20px; padding:34px 22px 22px; background:rgba(163,91,255,.05); display:flex}
.step3 > .tag{background:var(--violet); color:#fff}
.step3 .step{flex:1}
.step3 .step .n b{-webkit-text-stroke-color:var(--violet)}
.step3 .step .n svg{color:var(--violet)}
.noimg{display:flex; gap:12px; align-items:center; margin-top:22px; font-size:15px; color:var(--ink-2)}
.noimg svg{flex:none; color:var(--cyan)}
.noimg b{color:var(--ink); font-weight:600}

/* ---- fair play ---- */
.fair{position:relative; margin-top:48px; border-radius:22px; padding:2px;
  background:linear-gradient(135deg, rgba(47,228,255,.7), rgba(47,123,255,.35) 40%, rgba(163,91,255,.7))}
.fair-in{border-radius:20px; background:linear-gradient(180deg,#0f1730,#0b1122); padding:40px 42px 38px}
.fair-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:34px 48px}
.fair h3{font-size:30px; display:flex; align-items:center; gap:12px}
.fair ul{list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:13px}
.fair li{display:flex; gap:12px; align-items:flex-start; font-size:16px; color:var(--ink-2); line-height:1.5}
.fair li b{color:var(--ink); font-weight:600}
.fair li svg{flex:none; margin-top:2px}
.fair .only{margin-top:34px; padding-top:28px; border-top:1px solid var(--line); display:flex; gap:16px; align-items:center}
.fair .only p{font-family:var(--display); font-size:clamp(26px,3vw,36px); line-height:1.02; letter-spacing:.02em}
.fair .only p em{font-style:normal; color:var(--cyan)}
.cannot{margin-top:18px; padding:22px 26px; border-radius:14px; border:1px solid var(--line); background:var(--panel)}
.cannot p{font-size:15.5px; color:var(--ink-2)}
.cannot b{color:var(--ink); font-weight:600}

/* ---- performance ---- */
.stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:48px}
.stat{padding:26px 26px 26px; border-radius:14px; background:var(--panel-2); border:1px solid var(--line); border-left:3px solid var(--a,var(--cyan))}
.stat .big{font-family:var(--display); font-size:64px; line-height:.9; color:var(--ink)}
.stat .big small{font-size:30px; color:var(--ink-2)}
.stat .k{font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin-top:12px}
.stat p{font-size:15px; color:var(--ink-2); margin-top:8px; line-height:1.55}
.quote{margin-top:14px; display:grid; grid-template-columns:auto minmax(0,1fr); gap:22px; align-items:center; padding:26px 30px; border-radius:14px;
  background:var(--panel); border:1px solid var(--line)}
.quote blockquote{margin:0; font-family:var(--display); font-size:clamp(28px,3.2vw,40px); line-height:1.02; letter-spacing:.02em}
.quote cite{display:block; font-style:normal; font-family:var(--sans); font-size:14px; color:var(--ink-3); margin-top:10px; letter-spacing:0; line-height:1.5}

/* ---- FAQ ---- */
.faq{margin-top:44px; display:flex; flex-direction:column; gap:10px; max-width:900px}
.faq details{border-radius:14px; background:var(--panel); border:1px solid var(--line); transition:border-color .2s ease}
.faq details[open]{border-color:var(--line-2)}
.faq summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:20px 24px;
  font-family:var(--display); font-size:25px; letter-spacing:.03em; line-height:1.05}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; flex:none; width:12px; height:12px; border-right:2.5px solid var(--cyan); border-bottom:2.5px solid var(--cyan);
  transform:rotate(45deg) translate(-3px,-3px); transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(225deg) translate(-3px,-3px)}
.faq summary:hover{color:#fff}
.faq .a{padding:0 24px 22px; display:flex; flex-direction:column; gap:12px}
.faq .a p{font-size:16px; color:var(--ink-2)}
.faq .a b{color:var(--ink); font-weight:600}

/* ---- early access ---- */
.early{text-align:center; overflow:hidden;
  background:
    radial-gradient(700px 360px at 50% 0%, rgba(47,228,255,.16), transparent 70%),
    radial-gradient(600px 360px at 50% 120%, rgba(163,91,255,.2), transparent 70%),
    var(--panel)}
.early h2{max-width:14ch; margin:22px auto 0}
.early .lede{max-width:50ch; margin:20px auto 0}
.early .cta-row{justify-content:center}
.early .note{font-size:13.5px; color:var(--ink-3); margin-top:14px}
.share{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; margin-top:34px}
.share .lbl{font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin-right:4px}
.share a,.share button{display:inline-flex; align-items:center; gap:7px; min-height:38px; padding:0 14px; border-radius:999px;
  border:1px solid var(--line-2); background:rgba(7,11,22,.5); color:var(--ink-2); font:500 14px var(--sans); cursor:pointer}
.share a:hover,.share button:hover{border-color:var(--cyan); color:var(--ink)}
.share [data-native]{display:none}
.share.can-native [data-native]{display:inline-flex}


/* ---- motion: progressive, off for anyone who asked for less ---- */
.js .reveal{opacity:0; transform:translate3d(0,26px,0); transition:opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1)}
.js .reveal.show{opacity:1; transform:none}
.js .reveal.s2{transition-delay:.08s} .js .reveal.s3{transition-delay:.16s} .js .reveal.s4{transition-delay:.24s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes blink{0%,92%,100%{opacity:1}95%{opacity:.15}}
.bob{animation:bob 4s ease-in-out infinite}
.pulse-dash{animation:dash 14s linear infinite}
@keyframes dash{to{stroke-dashoffset:-200}}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .soon i,.bob,.pulse-dash{animation:none !important}
  .js .reveal{opacity:1; transform:none; transition:none}
  .btn,.card{transition:none}
}

/* ---- tablet ---- */
@media (max-width:1100px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flow{grid-template-columns:1fr; gap:0}
  .hand{flex-direction:row; padding:20px 0 34px; justify-content:center; text-align:left}
  .hand .line{transform:rotate(90deg)}
  .hand .pkt,.hand small{max-width:none}
}
@media (max-width:900px){
  .wrap{padding:0 20px}
  section{padding:64px 0}
  .hero-in{grid-template-columns:1fr; gap:40px; padding-top:34px; padding-bottom:56px}
  .split{grid-template-columns:1fr; gap:40px}
  .fair-grid,.stats{grid-template-columns:1fr}
  .fair-in{padding:30px 22px 28px}
  .quote{grid-template-columns:1fr; gap:14px; padding:22px}
  .subhead{margin-top:44px}
}
@media (max-width:640px){
  body{font-size:16.5px}
  .hero .sub{font-size:18px}
  .lede{font-size:17.5px}
  .feat{grid-template-columns:1fr; gap:20px}
  .cards,.cards.two{grid-template-columns:1fr; gap:10px}
  .card{display:grid; grid-template-columns:40px minmax(0,1fr); column-gap:14px; align-items:start; padding:18px 18px 18px}
  .card .ic{width:40px; height:40px; margin:0; grid-row:span 3}
  .card h4{font-size:22px; margin-top:9px}
  .card p{margin-top:6px}
  .card q{grid-column:2}
  .locker{gap:9px}
  .tile .lbl{padding:10px 10px 12px}
  .tile .lbl b{font-size:19px}
  .tile .lbl span{font-size:12.5px}
  .pc{grid-template-columns:1fr; padding:32px 14px 14px}
  .pc .arr{height:40px}
  .pc .arr svg{transform:rotate(90deg)}
  .step3{padding:32px 14px 14px}
  .hand{flex-direction:column; text-align:center}
  .faq summary{font-size:22px; padding:18px 18px}
  .faq .a{padding:0 18px 20px}
  .btn,.btn-ghost{width:100%}
}