/* SYNOTACY — DROP 001
   Direction: AURA register. White ground, heavy black type, product forward,
   conversion first. Trevelian built AURA and its own pitch is "Browsers →
   Buyers", so this follows that structure rather than an atmospheric one.

   v2 was black and buried the email field below the fold with no social proof.
   Rejected and rebuilt. What carried over from AURA: near-white ground, bold
   geometric sans, scarcity ticker above the nav, centred wordmark, huge display
   type on a dark hero panel, caption bars under product cards with the name
   left and the status right, horizontal rails.

   Still deliberately NOT included: a waitlist counter (the list is at zero) and
   a countdown (no ship date is signed; a fake one is a preorder lie). */

:root{
  --paper:#f4f3f1;      /* warm near-white ground */
  --white:#ffffff;
  --ink:#0a0a0b;
  --soft:#55565a;       /* 7.3:1 on paper */
  --faint:#65666a;      /* measured 5.3:1 on --paper, 5.9:1 on white. #76777b failed at 4.03. */
  --hair:#dedbd6;
  --dark:#111113;       /* hero panel */
  --onDark:#f4f3f1;
  --onDarkDim:#a3a4a8;  /* 6.4:1 on --dark */

  --sans:"Inter","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Consolas,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --gut:clamp(18px,4.2vw,56px);
  --maxw:1500px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.skip{position:absolute;left:-9999px;z-index:999;padding:12px 18px;background:var(--ink);color:var(--paper)}
.skip:focus{left:12px;top:12px}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- ticker ---------- */
.tick{background:var(--ink);color:var(--paper);overflow:hidden;white-space:nowrap}
.tick__in{display:inline-flex;gap:0;animation:slide 38s linear infinite;will-change:transform}
.tick span{
  display:inline-block;padding:9px 38px;
  font:600 12px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.tick__in{animation:none}}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:90;background:var(--white);
  border-bottom:1px solid var(--hair);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:6px var(--gut);
}
.nav__l,.nav__r{display:flex;gap:22px;align-items:center}
.nav__r{justify-content:flex-end}
/* 44px is the touch floor (Apple HIG 44pt / Material 48dp). Every nav link
   carries it as min-height rather than as font size, so the hit area grows
   without the type growing. The nav's own padding was cut to 6px to pay for it. */
.nav a{font:600 12px/1 var(--sans);letter-spacing:.02em;
  display:inline-flex;align-items:center;min-height:44px}
.nav a:hover{opacity:.6}
.nav__mark{font:800 17px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;
  justify-content:center;padding:0 6px}
.nav__cta{
  background:var(--ink);color:var(--white);padding:0 20px;
  font:700 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
}
.nav__cta:hover{opacity:.82}
@media(max-width:860px){
  .nav{grid-template-columns:1fr auto;padding:6px var(--gut)}
  .nav__l{display:none}
}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:1fr;background:var(--dark);color:var(--onDark)}
@media(min-width:1000px){.hero{grid-template-columns:1.15fr .85fr}}

.hero__img{position:relative;min-height:clamp(340px,52vh,600px);overflow:hidden;background:#17171a}
.hero__img img,.hero__img video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__img video{opacity:0;transition:opacity 1.1s var(--ease)}
.hero__img video.on{opacity:1}
.hero__tagwrap{position:absolute;left:0;right:0;bottom:0;padding:clamp(20px,3.4vw,40px);
  background:linear-gradient(0deg,rgba(0,0,0,.78),transparent)}
.hero__word{
  font:800 clamp(46px,9vw,124px)/.86 var(--sans);letter-spacing:-.035em;
  text-transform:uppercase;margin:0 0 10px;
}
.hero__sub{font:600 12px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--onDarkDim)}

/* capture, above the fold, beside the image */
.hero__buy{
  display:flex;flex-direction:column;justify-content:center;gap:20px;
  padding:clamp(28px,4.4vw,56px);background:var(--dark);
}
.hero__eyebrow{font:700 12px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--onDarkDim)}
.hero__h1{
  font:800 clamp(26px,3.5vw,44px)/1.06 var(--sans);letter-spacing:-.025em;margin:0;
  text-wrap:balance;
}
.hero__p{margin:0;color:var(--onDarkDim);font-size:15.5px;line-height:1.6;max-width:44ch}
/* Below 1000px the hero is one column, so the image stacks ON TOP of the
   capture block. Measured on a 375x812 phone, a 52vh image put the email field
   at y=778 against an 812 fold — 34px visible. That is the exact failure this
   rebuild existed to fix, so on one column the image is capped and the body
   paragraph moves below the field. The field then lands near y=530.
   The paragraph is reassurance, not the argument; the h1 is the argument, and
   it stays above the ask. */
@media(max-width:999px){
  .hero__img{min-height:0;height:min(38vh,300px)}
  .hero__buy{padding:22px var(--gut) 28px;gap:14px}
  .hero__p{order:9;margin-top:2px;font-size:15px}
  .hero__word{font-size:clamp(38px,8.4vw,64px)}
}

/* ---------- form ---------- */
.form{display:flex;gap:9px;flex-wrap:wrap}
.form input[type=email]{
  flex:1 1 230px;min-height:54px;padding:0 17px;border:1px solid transparent;
  background:var(--white);color:var(--ink);font:400 16px/1 var(--sans);
}
.form input::placeholder{color:var(--faint)}
.form input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 2px rgba(255,255,255,.55)}
.form button{
  min-height:54px;padding:0 26px;background:var(--white);color:var(--ink);
  font:700 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  transition:transform .18s var(--ease),opacity .18s var(--ease);
}
.form button:hover{opacity:.86}
.form button:active{transform:scale(.985)}
.form button[disabled]{opacity:.5;cursor:default}
.microcopy{font:400 12.5px/1.6 var(--sans);color:var(--onDarkDim)}
.err{font:400 12.5px/1.6 var(--sans);color:#ffb4b4;min-height:1.2em}
.done{
  background:var(--white);color:var(--ink);padding:20px 22px;
  font:700 12px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;
}

/* light variant, used lower on the page */
.form--light input[type=email]{background:var(--white);border:1px solid var(--hair)}
.form--light button{background:var(--ink);color:var(--white)}
.form--light input:focus{box-shadow:0 0 0 2px rgba(10,10,11,.14)}

/* ---------- proof strip ---------- */
.proof{background:var(--white);border-bottom:1px solid var(--hair)}
.proof__in{display:flex;flex-wrap:wrap;gap:clamp(20px,5vw,68px);padding-block:22px;align-items:center}
.proof__i{display:flex;flex-direction:column;gap:5px}
.proof__n{font:800 20px/1 var(--sans);letter-spacing:-.02em}
.proof__l{font:600 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}

/* ---------- section head ---------- */
.head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.head h2{font:800 clamp(24px,4.4vw,46px)/1 var(--sans);letter-spacing:-.03em;text-transform:uppercase;margin:0}
.head .r{font:600 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}

/* ---------- product grid (AURA caption-bar pattern) ---------- */
.drop{padding-block:clamp(48px,7vw,92px)}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(10px,1.4vw,18px)}
@media(min-width:900px){.grid{grid-template-columns:repeat(4,1fr)}}
.card{background:var(--white);border:1px solid var(--hair);display:flex;flex-direction:column}
.card__m{aspect-ratio:1/1.2;overflow:hidden;background:#eceae6}
.card__m img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
@media(hover:hover){.card:hover .card__m img{transform:scale(1.035)}}
.card__b{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:13px 14px;border-top:1px solid var(--hair);
}
.card__n{font:600 13.5px/1.25 var(--sans);letter-spacing:-.005em}
.card__s{font:700 12px/1 var(--mono);letter-spacing:.1em;color:var(--faint);white-space:nowrap}
.card--wide{grid-column:span 2}
@media(min-width:900px){.card--wide{grid-column:span 2}}

/* ---------- how it works ---------- */
.how{background:var(--white);border-block:1px solid var(--hair);padding:clamp(48px,7vw,92px) 0}
.steps{display:grid;grid-template-columns:1fr;gap:clamp(22px,3vw,40px)}
@media(min-width:800px){.steps{grid-template-columns:repeat(3,1fr)}}
.step__n{font:800 13px/1 var(--mono);letter-spacing:.14em;color:var(--faint);margin-bottom:12px}
.step h3{font:800 18px/1.25 var(--sans);letter-spacing:-.015em;margin:0 0 9px}
.step p{margin:0;color:var(--soft);font-size:15px;line-height:1.65}

/* ---------- closing capture ---------- */
.close{padding:clamp(52px,8vw,110px) 0;text-align:center}
.close h2{font:800 clamp(28px,5.6vw,64px)/1.02 var(--sans);letter-spacing:-.035em;text-transform:uppercase;margin:0 0 14px}
.close p{color:var(--soft);max-width:52ch;margin:0 auto 28px;line-height:1.7}
.close .form{max-width:520px;margin:0 auto}
.close .microcopy{color:var(--faint);margin-top:14px}
.close .err{color:#a4302f}

/* ---------- faq ---------- */
.faq{background:var(--white);border-top:1px solid var(--hair);padding:clamp(44px,6vw,84px) 0}
.faq details{border-bottom:1px solid var(--hair);padding:7px 0}
.faq summary{
  font:700 15.5px/1.4 var(--sans);letter-spacing:-.01em;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  padding:11px 0;min-height:44px;box-sizing:border-box;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 20px/1 var(--mono);color:var(--faint)}
.faq details[open] summary::after{content:"\2212"}
.faq p{margin:2px 0 11px;color:var(--soft);line-height:1.7;max-width:70ch;font-size:15px}

/* ---------- footer ---------- */
.ftr{padding:clamp(34px,4vw,54px) 0 30px}
/* Decorative watermark only. aria-hidden in the markup, so the 1.25:1 ratio
   against the ground is intentional and exempt, not an oversight. */
.ftr__w{font:800 clamp(38px,12vw,160px)/1 var(--sans);letter-spacing:-.04em;text-transform:uppercase;color:var(--hair);margin:0 0 26px}
.ftr__r{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-top:20px;border-top:1px solid var(--hair)}
.ftr__r a,.ftr__r span{font:600 12px/1.8 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.ftr__r a{display:inline-block;padding:15px 0;margin:-15px 0}
.ftr__r a:hover{color:var(--ink)}

/* ---------- reveal (progressive enhancement: visible unless JS says otherwise) ---------- */
.rv{opacity:1;transform:none}
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv,.js .rv{opacity:1;transform:none;transition:none}
  .card__m img{transition:none}
}