/* ============================================================
   ADITOR — AD TEARDOWNS (review.aditor.ai)
   Dark canvas, one accent, quiet. Tokens per Aditor Design System.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&display=swap');

:root{
  --bg-canvas:#0B0B0D; --surface-sunken:#08080A; --surface-raised:#111114; --surface-elevated:#17171B;
  --halo-orange:rgba(255,107,53,.10); --halo-steel:rgba(143,185,230,.06);
  --glass-fill:rgba(255,255,255,.035); --glass-border:rgba(255,255,255,.08);
  --ink-1:#F5F5F2; --ink-2:#A8A8A4; --ink-3:#6B6B68; --ink-4:#2E2E30;
  --brand:#FF6B35; --brand-hi:#FF7A3D; --brand-lo:#E8552A; --brand-deep:#C44D1E;
  --brand-30:rgba(255,107,53,.30); --brand-10:rgba(255,107,53,.10); --brand-06:rgba(255,107,53,.06);
  --brand-gradient:linear-gradient(135deg,#FF7A3D 0%,#E8552A 100%);
  --brand-glow:0 8px 32px rgba(255,107,53,.22);
  --steel:#8FB9E6; --error:#C75050; --error-soft:rgba(199,80,80,.12); --success:#7FA776;
  --font-serif:'Instrument Serif',Times,serif;
  --font-sans:'Geist','SF Pro Text',-apple-system,sans-serif;
  --font-mono:'Geist Mono','SF Mono',ui-monospace,monospace;
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;--s-6:24px;--s-8:32px;--s-10:40px;--s-12:48px;--s-16:64px;--s-20:80px;--s-24:96px;
  --r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:20px;--r-2xl:28px;--r-pill:999px;
  --shadow-md:0 4px 16px rgba(0,0,0,.35); --shadow-lg:0 12px 40px rgba(0,0,0,.5);
  --shadow-xl:0 24px 80px rgba(0,0,0,.62);
  --inner-top:inset 0 1px 0 rgba(255,255,255,.06);
  --ease:cubic-bezier(.22,1,.36,1); --dur:.26s; --dur-lg:.4s;
  --maxw:1120px;
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{min-height:100%;background:var(--bg-canvas);color:var(--ink-1);font-family:var(--font-sans);
  font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden}

.bg-atmosphere{position:fixed;inset:0;z-index:0;pointer-events:none;background-color:var(--bg-canvas);
  background-image:
    radial-gradient(1200px 760px at 58% -16%,var(--halo-orange),transparent 60%),
    radial-gradient(900px 700px at 2% 108%,var(--halo-steel),transparent 60%)}
.grain{position:fixed;inset:0;pointer-events:none;z-index:70;opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
::selection{background:var(--brand-30);color:var(--ink-1)}

main{position:relative;z-index:10;max-width:var(--maxw);margin:0 auto;
  padding:0 clamp(20px,5vw,64px) var(--s-20)}

/* ============================ TOPBAR ============================ */
.topbar{position:relative;z-index:20;max-width:var(--maxw);margin:0 auto;
  padding:clamp(20px,3vw,32px) clamp(20px,5vw,64px);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4)}
.wordmark{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:15px;
  letter-spacing:-.02em;color:var(--ink-1);text-decoration:none}
.wordmark .tick{width:9px;height:9px;border-radius:2px;background:var(--brand-gradient);
  box-shadow:var(--brand-glow);animation:pulse 3.6s var(--ease) infinite}
.wordmark .sep{color:var(--ink-4);font-weight:400}
.wordmark .ctx{color:var(--ink-3);font-weight:400;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.18em;text-transform:uppercase}
.topmeta{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 var(--brand-30)}50%{box-shadow:0 0 16px 2px var(--brand-30)}}

/* ============================ TYPE PRIMITIVES ============================ */
.headline{font-family:var(--font-serif);font-weight:400;line-height:1.04;letter-spacing:-.02em;
  font-size:clamp(40px,7vw,74px);color:var(--ink-1)}
.h-mid{font-size:clamp(30px,4.4vw,46px)}
.em{font-style:italic;background:var(--brand-gradient);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;padding-right:.04em}
.lede{color:var(--ink-2);font-size:clamp(16px,1.5vw,18px);line-height:1.65;max-width:56ch}
.lede b{color:var(--ink-1);font-weight:500}

/* entrance — one staggered reveal per load, ease-out only */
.reveal{opacity:0;transform:translateY(14px);
  animation:rise .7s var(--ease) forwards;animation-delay:calc(var(--i,0)*80ms + 100ms)}
@keyframes rise{to{opacity:1;transform:none}}

/* ============================ HERO ============================ */
/* Compact by design: headline, who does it, one process line, then the dropzone.
   No CTA button up here — the dropzone IS the call to action. */
.hero{padding:clamp(32px,5.5vh,64px) 0 clamp(56px,9vh,96px);display:flex;flex-direction:column;
  align-items:flex-start;gap:var(--s-5)}
.hero .headline{max-width:18ch}

.byline{display:flex;align-items:center;gap:var(--s-3)}
.face{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;
  border:1px solid var(--glass-border);box-shadow:var(--inner-top)}
.bytext{display:flex;flex-direction:column;color:var(--ink-2);font-size:15px;line-height:1.45}
.bywho{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3)}

.process{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-family:var(--font-mono);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.process i{width:4px;height:4px;border-radius:50%;background:var(--ink-4);flex:none}

/* ============================ FORM ============================ */
.form{width:100%;max-width:640px;display:flex;flex-direction:column;gap:var(--s-4);margin-top:var(--s-1)}

/* each stage opens downwards when the step before it is done */
.stage{display:flex;flex-direction:column;gap:var(--s-5)}
.stage:not([hidden]){animation:stageIn .42s var(--ease) both}
.stage.sub{gap:var(--s-3)}
@keyframes stageIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

.field{display:flex;flex-direction:column;gap:var(--s-3)}
.lbl{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2);display:flex;align-items:center;gap:8px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
.hint{color:var(--ink-3);font-size:13px;line-height:1.6;margin-top:calc(-1 * var(--s-3))}
.hint a{color:var(--brand-hi);text-decoration:none;border-bottom:1px solid var(--brand-30)}
.hint a:hover{border-bottom-color:var(--brand)}

.inp{width:100%;padding:13px 15px;border-radius:var(--r-md);background:var(--surface-sunken);
  border:1px solid var(--ink-4);color:var(--ink-1);font-family:var(--font-sans);font-size:15px;
  box-shadow:var(--inner-top);transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.inp::placeholder{color:var(--ink-3)}
.inp:focus{outline:0;border-color:var(--brand-30);box-shadow:var(--inner-top),0 0 0 3px var(--brand-06)}
.inp[aria-invalid="true"]{border-color:var(--error)}

/* dropzone — the hero element of the page, so it is deliberately large */
.drop{position:relative;border:1.5px dashed var(--ink-4);border-radius:var(--r-xl);
  background:var(--surface-sunken);padding:clamp(36px,6vw,60px) var(--s-5);cursor:pointer;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.drop:hover,.drop:focus-visible{outline:0;border-color:var(--brand-30);background:var(--brand-06)}
.drop.is-drag{border-color:var(--brand);background:var(--brand-10)}
.drop.has-file{border-style:solid;border-color:var(--brand-30);background:var(--surface-raised);
  padding:var(--s-4) var(--s-5);cursor:default}
.drop-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s-2)}
.dropicon{width:34px;height:34px;color:var(--brand);margin-bottom:var(--s-2)}
.drop-t{font-weight:500;font-size:18px;color:var(--ink-1)}
.drop-s{color:var(--ink-3);font-size:13px}
.drop-file{display:flex;align-items:center;gap:var(--s-3)}
.fileok{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--brand-06);border:1px solid var(--brand-30);color:var(--brand-hi)}
.fileok svg{width:15px;height:15px}
.filemeta{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.filename{font-weight:500;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.filesize{font-family:var(--font-mono);font-size:11px;color:var(--ink-3);letter-spacing:.06em}

.ghostbtn{background:var(--surface-elevated);border:1px solid var(--ink-4);color:var(--ink-2);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  padding:8px 14px;border-radius:var(--r-pill);cursor:pointer;box-shadow:var(--inner-top);flex:none;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.ghostbtn:hover{color:var(--ink-1);border-color:var(--brand-30)}

/* consent */
.check{display:flex;gap:var(--s-3);align-items:flex-start;cursor:pointer}
.check input{position:absolute;opacity:0;width:0;height:0}
.check .box{flex:none;width:20px;height:20px;margin-top:2px;border-radius:6px;
  background:var(--surface-sunken);border:1px solid var(--ink-4);box-shadow:var(--inner-top);
  position:relative;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.check .box::after{content:'';position:absolute;left:6px;top:3px;width:5px;height:9px;
  border:2px solid #1a0d06;border-top:0;border-left:0;transform:rotate(40deg) scale(.5);opacity:0;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.check input:checked + .box{background:var(--brand-gradient);border-color:transparent}
.check input:checked + .box::after{opacity:1;transform:rotate(40deg) scale(1)}
.check input:focus-visible + .box{box-shadow:var(--inner-top),0 0 0 3px var(--brand-06);border-color:var(--brand-30)}
.checktext{color:var(--ink-2);font-size:14px;line-height:1.6}
.check.is-bad .box{border-color:var(--error)}

/* product choice — only rendered once consent is ticked */
.choice{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
.opt-card{position:relative;display:block;cursor:pointer}
.opt-card input{position:absolute;opacity:0;width:0;height:0}
.oc-body{display:flex;flex-direction:column;gap:3px;padding:14px 16px;border-radius:var(--r-md);
  background:var(--surface-sunken);border:1px solid var(--ink-4);box-shadow:var(--inner-top);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.opt-card:hover .oc-body{border-color:var(--brand-30)}
.opt-card input:checked + .oc-body{border-color:var(--brand);background:var(--brand-06)}
.opt-card input:focus-visible + .oc-body{box-shadow:var(--inner-top),0 0 0 3px var(--brand-06)}
.oc-t{font-weight:600;font-size:14.5px}

.turnstile:empty{display:none}

/* ============================ SUBMIT ============================ */
/* Grey and inert until the consent box is ticked, then it turns brand-orange. */
.cta{display:inline-flex;align-items:center;justify-content:center;gap:11px;padding:15px 26px;
  border-radius:14px;border:0;font-family:var(--font-sans);font-weight:600;font-size:17px;
  color:#1a0d06;background:var(--brand-gradient);box-shadow:var(--brand-glow),var(--inner-top);
  cursor:pointer;text-decoration:none;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
             background var(--dur) var(--ease),color var(--dur) var(--ease)}
.cta:hover{transform:translateY(-1px);box-shadow:0 14px 44px rgba(255,107,53,.38),var(--inner-top)}
.cta:active{transform:none;background:var(--brand-deep)}
.cta.submit{width:100%}
.cta[disabled]{background:var(--surface-elevated);color:var(--ink-3);
  border:1px solid var(--ink-4);box-shadow:var(--inner-top);cursor:not-allowed;transform:none;pointer-events:none}

/* errors */
.err{color:var(--error);font-size:13px;line-height:1.5}
.formerr{background:var(--error-soft);border:1px solid rgba(199,80,80,.28);border-radius:var(--r-md);padding:12px 14px}

/* progress */
.progwrap{display:flex;flex-direction:column;gap:var(--s-3)}
.progtop{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.progtop span:last-child{color:var(--brand-hi)}
.prog{height:6px;border-radius:4px;background:var(--surface-sunken);border:1px solid var(--ink-4);overflow:hidden}
.prog i{display:block;height:100%;border-radius:4px;background:var(--brand-gradient);
  transition:width .3s var(--ease)}
.cancel{align-self:flex-start}

/* success */
.done{width:100%;max-width:640px;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-4);
  background:var(--glass-fill);border:1px solid var(--glass-border);border-radius:var(--r-2xl);
  padding:clamp(22px,3.5vw,34px);box-shadow:var(--inner-top),var(--shadow-lg)}
.donetick{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--brand-06);border:1px solid var(--brand-30);color:var(--brand-hi)}
.donetick svg{width:22px;height:22px}

.foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding-top:var(--s-8);border-top:1px solid var(--ink-4);
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.foot .dim{color:var(--ink-3)}
.foot a{color:var(--ink-3);text-decoration:none}
.foot a:hover{color:var(--brand-hi)}

/* ============================ RESPONSIVE ============================ */
@media (max-width:620px){
  body{font-size:15px}
  .hero{padding:var(--s-6) 0 var(--s-10);gap:var(--s-4)}
  .hero .headline{max-width:none}
  .grid2,.choice{grid-template-columns:1fr}
  .topmeta{display:none}
  .foot{flex-direction:column;align-items:flex-start;gap:var(--s-2)}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}