/* DDX Research — The Future of Brand, Product and Customer Experiences in an Age of AI
 *
 * Two worlds, deliberately. The landing is the DDX invitation: near-black, the
 * ember render, one yellow rule, display type at poster scale. The
 * questionnaire is the instrument: warm paper, near-black text, generous
 * measure, and the yellow reduced to marks — a progress fill, a tick, a focus
 * ring. Reading comfort wins inside the survey; the drama is spent up front,
 * where it is doing the work of getting someone to start.
 *
 * Yellow on white is not readable, so the accent is never text on paper. It is
 * only ever a fill behind near-black, or a rule.
 */

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}

:root{
  --ink:#0A0A0A;
  --ink-2:#2A2926;
  --muted:#6E6B64;
  --paper:#F4F2ED;
  --card:#FFFFFF;
  --rule:rgba(10,10,10,.13);
  --rule-strong:rgba(10,10,10,.34);
  --ghost:rgba(10,10,10,.30);
  --dark:#050505;
  --dark-2:#0E0E0E;
  --accent:#FFF204;
  --accent-rgb:255,242,4;

  --font:"Helvetica Neue",Inter,Helvetica,Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;

  --measure:38rem;          /* the reading column */
  --rail:210px;
  --pad:clamp(20px,5vw,64px);

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}

html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--font);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
button,input,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* One focus treatment everywhere: a yellow ring on a dark keyline, so it is
   visible on paper, on the card and on the ember alike. */
:focus-visible{outline:none;box-shadow:0 0 0 2px var(--paper),0 0 0 5px rgba(var(--accent-rgb),.95),0 0 0 6px rgba(10,10,10,.55);border-radius:4px}
.on-dark :focus-visible{box-shadow:0 0 0 2px var(--dark),0 0 0 5px rgba(var(--accent-rgb),.95)}

/* ============================================================ type */

.eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  color:var(--muted);
}
.on-dark .eyebrow{color:rgba(255,255,255,.62)}

.display{
  font-weight:700;letter-spacing:-.032em;line-height:.98;
  font-size:clamp(2.4rem,6.4vw,4.6rem);
}
h2.section-title{font-size:clamp(1.5rem,3.4vw,2.1rem);font-weight:700;letter-spacing:-.025em;line-height:1.08}
.deck{font-family:var(--serif);font-style:italic;font-size:clamp(1.12rem,2.1vw,1.42rem);line-height:1.42;color:var(--ink-2)}
.on-dark .deck{color:rgba(255,255,255,.82)}
.lede{font-size:clamp(1rem,1.5vw,1.12rem);line-height:1.62;color:var(--ink-2)}
.fine{font-size:14px;line-height:1.55;color:var(--muted)}

/* The masked word-reveal on the landing headline. */
/* The mask has to be taller than the line box or it shears the descenders off
   "generation" and "experiences". The padding gives them room; the negative
   margin keeps the extra space out of the layout. */
.word{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.14em;margin-bottom:-.14em}
.word>span{display:inline-block;will-change:transform}

.rule{height:3px;width:56px;background:var(--accent);transform-origin:left center}

/* ============================================================ landing */

.on-dark{background:var(--dark);color:#fff}

.hero{
  position:relative;min-height:100svh;display:flex;flex-direction:column;
  padding:var(--pad);overflow:hidden;isolation:isolate;
}
.hero__bg{position:absolute;inset:0;z-index:-2;overflow:hidden;background:var(--dark)}
.hero__bg img{
  width:100%;height:100%;object-fit:cover;object-position:62% 42%;
  transform:scale(1.08);animation:drift 34s var(--ease-out) infinite alternate;
}
@keyframes drift{
  from{transform:scale(1.06) translate3d(0,0,0)}
  to{transform:scale(1.16) translate3d(-1.4%,-1.6%,0)}
}
/* The ember is beautiful and busy. These two washes buy back the contrast the
   headline needs without flattening the render. */
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(5,5,5,.72) 0%,rgba(5,5,5,.30) 34%,rgba(5,5,5,.86) 82%,var(--dark) 100%),
    radial-gradient(120% 78% at 78% 26%,rgba(5,5,5,0) 30%,rgba(5,5,5,.66) 100%);
}

.masthead{display:flex;align-items:center;gap:14px;position:relative;z-index:1}
.masthead img{width:78px;height:auto}
.masthead span{
  font-size:11.5px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(255,255,255,.72);padding-top:2px;
}

.hero__body{
  /* auto top margin pushes the block to the bottom of the hero. On a short
     laptop screen that margin collapses to nothing, so the clearance from the
     masthead is padding, which always applies. */
  margin:auto 0 0;max-width:min(56rem,100%);position:relative;z-index:1;
  padding:clamp(30px,7vh,84px) 0 clamp(8px,4vh,40px);
}
.hero__study{
  font-size:12px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  color:rgba(255,255,255,.62);margin-bottom:26px;
}
.hero .display{margin:22px 0 26px;max-width:20ch;line-height:1.02}
.hero .display em{font-style:normal;color:var(--accent)}
.hero__deck{max-width:44ch}

.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;margin-top:38px}

/* The primary action. The sheen is a single pass on hover — a loop would turn
   a button into an advertisement. */
.btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;gap:12px;
  padding:16px 32px;border-radius:999px;
  background:var(--accent);color:#0A0A0A;
  font-size:16px;font-weight:600;letter-spacing:.005em;
  transition:transform .28s var(--ease-out),box-shadow .28s var(--ease-out);
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(104deg,transparent 32%,rgba(255,255,255,.62) 50%,transparent 68%);
  transform:translateX(-130%);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 34px -12px rgba(var(--accent-rgb),.6)}
.btn:hover::after{animation:sheen .78s var(--ease-out) 1}
.btn:active{transform:translateY(0)}
.btn svg{width:17px;height:17px;transition:transform .32s var(--ease-out)}
.btn:hover svg{transform:translateX(4px)}
@keyframes sheen{to{transform:translateX(130%)}}

.btn--ghost{
  background:transparent;color:inherit;border:1px solid var(--rule-strong);
  padding:14px 24px;font-weight:500;
}
.on-dark .btn--ghost{border-color:rgba(255,255,255,.28);color:#fff}
.btn--ghost:hover{transform:none;box-shadow:none;border-color:currentColor}
.btn--ghost::after{display:none}
.btn[disabled]{opacity:.42;pointer-events:none}

.scroll-cue{
  position:relative;z-index:1;margin-top:34px;display:flex;align-items:center;gap:10px;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);
}
.scroll-cue i{display:block;width:1px;height:26px;background:linear-gradient(180deg,rgba(255,255,255,.5),transparent);animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.4);opacity:.35;transform-origin:top}50%{transform:scaleY(1);opacity:1;transform-origin:top}}

/* ---- themes + before you begin, on paper ---- */

.paper-section{padding:clamp(42px,5.5vw,76px) var(--pad) clamp(52px,6vw,84px);background:var(--paper)}
.wrap{max-width:74rem;margin:0 auto}
.wrap--read{max-width:var(--measure)}
.intro{margin-top:22px}
.intro .lede{font-size:1rem;line-height:1.55}
.intro .lede+.lede{margin-top:12px}

/* The three themes and "Before you begin" used to be two full-width blocks
   stacked one after the other, which put the start button a long way down.
   Side by side they say the same thing in half the height. */
.strip{display:grid;gap:clamp(30px,4vw,54px);margin-top:clamp(40px,5vw,64px)}
@media (min-width:920px){.strip{grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,72px)}}
.strip__col{min-width:0}

.themes{list-style:none;margin-top:20px}
.themes li{display:flex;gap:16px;align-items:baseline;padding:15px 0;border-top:1px solid var(--rule)}
.themes li:last-child{border-bottom:1px solid var(--rule)}
.themes b{
  font-size:11px;font-weight:600;letter-spacing:.16em;color:var(--muted);
  font-variant-numeric:tabular-nums;flex:0 0 auto;
}
.themes p{font-size:1.04rem;line-height:1.38;font-weight:500;letter-spacing:-.014em}

.begin{padding:clamp(22px,2.6vw,30px);border:1px solid var(--rule);background:var(--card);border-radius:20px}
.begin h3{font-size:12px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.begin p{font-size:.95rem;line-height:1.5;color:var(--ink-2)}
.begin p+p{margin-top:11px}
.begin .fine{margin-top:16px;padding-top:14px;border-top:1px solid var(--rule);font-size:13px}

.privacy-missing{
  display:inline-flex;align-items:center;gap:8px;
  border-bottom:1px dashed var(--rule-strong);color:var(--muted);cursor:help;
}

/* ============================================================ survey */

#survey{min-height:100svh;display:flex;flex-direction:column;background:var(--paper)}

.topbar{
  position:sticky;top:0;z-index:40;background:rgba(244,242,237,.90);
  backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--rule);
}
.topbar__inner{
  max-width:74rem;margin:0 auto;padding:13px var(--pad);
  display:flex;align-items:center;gap:18px;
}
/* The shipped wordmarks are drawn for a dark ground — white type, and in
   Footprint's case a green leaf, which rules out a blanket invert. So the
   paper top bar gets its own recoloured file: the type goes near-black, the
   leaf keeps its green. Just the mark, no container. */
.topbar img{width:56px;flex:0 0 auto}
.topbar__title{font-size:12.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar__count{margin-left:auto;font-size:12.5px;font-weight:600;letter-spacing:.06em;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}

/* The rail is 2px and full-bleed. It is the only thing on the page allowed to
   move on its own. */
.progress{height:2px;background:rgba(10,10,10,.09);position:relative;overflow:hidden}
.progress__fill{
  height:100%;width:0;background:var(--accent);transform-origin:left;
  transition:width .62s var(--ease-out);
}
.progress__fill::after{
  content:"";position:absolute;top:0;bottom:0;width:56px;right:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85));
  mix-blend-mode:overlay;
}

.layout{
  flex:1;width:100%;max-width:74rem;margin:0 auto;
  padding:clamp(30px,5vw,58px) var(--pad) 140px;
  display:grid;gap:clamp(28px,5vw,64px);
}
@media (min-width:1060px){
  .layout{grid-template-columns:var(--rail) minmax(0,1fr);align-items:start}
}

/* ---- section rail: the whole shape of the questionnaire, always visible ---- */

.rail{display:none}
@media (min-width:1060px){
  .rail{display:block;position:sticky;top:104px}
}
.rail ol{list-style:none;display:flex;flex-direction:column;gap:2px}
.rail li{position:relative}
.rail button{
  display:flex;gap:12px;align-items:baseline;width:100%;text-align:left;
  padding:9px 10px 9px 0;color:var(--ghost);
  transition:color .3s var(--ease-out);
}
.rail em{
  font-style:normal;font-size:11px;font-weight:600;letter-spacing:.1em;
  font-variant-numeric:tabular-nums;flex:0 0 auto;padding-top:1px;
}
.rail span{font-size:13.5px;line-height:1.3;letter-spacing:-.006em}
.rail li.is-done button{color:var(--muted)}
.rail li.is-done button:hover{color:var(--ink)}
.rail li.is-current button{color:var(--ink);font-weight:600}
.rail li.is-current::before{
  content:"";position:absolute;left:-14px;top:10px;bottom:10px;width:2px;
  background:var(--accent);animation:railIn .5s var(--ease-out) both;
}
@keyframes railIn{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.rail li[aria-disabled=true] button{pointer-events:none}
.rail__meter{margin-top:26px;padding-top:20px;border-top:1px solid var(--rule)}
.rail__meter b{display:block;font-size:26px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.rail__meter span{font-size:12px;color:var(--muted);letter-spacing:.06em}

/* ---- the section screen ---- */

.stage{min-width:0}
.stage__head{margin-bottom:clamp(26px,4vw,42px);max-width:var(--measure)}
.stage__head .eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.stage__head .eyebrow i{display:block;height:1px;flex:1;background:var(--rule);max-width:110px}
.stage__intro{margin-top:20px;padding-left:18px;border-left:2px solid var(--accent)}
.stage__intro p{font-size:.99rem;line-height:1.6;color:var(--ink-2)}
.stage__intro p+p{margin-top:10px}

.questions{display:flex;flex-direction:column;max-width:var(--measure)}

/* ---- one question, in three states ----
   ahead : the overview. You can read what is coming; you cannot answer it yet.
   active: the only thing on the page with controls.
   done  : one line, with the answer, and a way back in. */

.q{
  position:relative;padding:22px 0;border-top:1px solid var(--rule);
  transition:opacity .42s var(--ease-out),filter .42s var(--ease-out);
}
.q:first-child{border-top:0;padding-top:4px}

.q.is-ahead{opacity:.26;filter:blur(.35px);pointer-events:none;user-select:none}
.q.is-ahead .q__body,.q.is-ahead .q__summary{display:none}
.q.is-ahead .q__text{font-weight:500}

.q.is-active{opacity:1}
.q.is-active::before{
  content:"";position:absolute;left:calc(var(--pad) * -.42);top:24px;width:3px;height:22px;
  border-radius:999px;background:var(--accent);animation:railIn .45s var(--ease-out) both;
}
@media (max-width:1059px){.q.is-active::before{left:-14px}}

.q.is-done{opacity:1}
.q.is-done .q__body{display:none}
.q.is-done .q__text{font-size:.95rem;font-weight:500;color:var(--muted);letter-spacing:0}

.q__num{
  font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--muted);
  font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:9px;margin-bottom:10px;
}
.q__optional{
  padding:2px 7px;border:1px solid var(--rule);border-radius:2px;
  letter-spacing:.1em;color:var(--muted);font-weight:600;
}
.q__text{
  font-size:clamp(1.14rem,2vw,1.34rem);font-weight:600;line-height:1.32;
  letter-spacing:-.019em;transition:font-size .35s var(--ease-out),color .35s var(--ease-out);
}
.q__hint{margin-top:8px;font-size:13.5px;font-weight:600;letter-spacing:.02em;color:var(--ink-2)}
.q__help{margin-top:10px;font-size:14px;line-height:1.5;color:var(--muted);max-width:52ch}
.q__body{margin-top:20px}

/* the collapsed answer */
.q__summary{
  display:flex;align-items:flex-start;gap:14px;margin-top:8px;
}
.q__summary p{flex:1;font-size:1.02rem;line-height:1.42;letter-spacing:-.01em}
.q__summary p span{
  display:inline-block;background:rgba(var(--accent-rgb),.34);
  box-shadow:0 0 0 1px rgba(10,10,10,.06);padding:1px 6px;margin:2px 3px 2px 0;border-radius:2px;
}
.q__change{
  flex:0 0 auto;font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid var(--rule-strong);padding-bottom:1px;
  transition:color .25s;
}
.q__change:hover{color:var(--ink)}

/* ---- options ---- */

.opts{display:flex;flex-direction:column;gap:8px}
.opt{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;align-items:flex-start;gap:14px;width:100%;text-align:left;
  padding:15px 24px;min-height:58px;
  background:var(--card);border:1px solid var(--rule);border-radius:999px;
  transition:border-color .24s var(--ease-out),transform .24s var(--ease-out),box-shadow .24s var(--ease-out);
}
.opt::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(104deg,transparent 36%,rgba(var(--accent-rgb),.20) 50%,transparent 64%);
  transform:translateX(-130%);
}
.opt:hover{border-color:var(--rule-strong);transform:translateY(-1px);box-shadow:0 6px 20px -14px rgba(10,10,10,.5)}
.opt:hover::after{animation:sheen .7s var(--ease-out) 1}
.opt[aria-checked=true]{
  border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);
  background:linear-gradient(0deg,rgba(var(--accent-rgb),.16),rgba(var(--accent-rgb),.16)),var(--card);
}
.opt[aria-checked=true] .opt__label{font-weight:600}
.opt[aria-disabled=true]{opacity:.38;pointer-events:none}

.opt__mark{
  flex:0 0 auto;width:21px;height:21px;margin-top:1px;
  border:1.5px solid var(--rule-strong);background:var(--card);
  display:grid;place-items:center;transition:background .22s,border-color .22s;
}
.opt--single .opt__mark{border-radius:50%}
.opt--multi .opt__mark{border-radius:3px}
.opt[aria-checked=true] .opt__mark{background:var(--accent);border-color:var(--ink)}
.opt__mark svg{width:12px;height:12px;opacity:0;transition:opacity .18s}
.opt[aria-checked=true] .opt__mark svg{opacity:1}
.opt__mark path{fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.opt__label{font-size:1rem;line-height:1.4;letter-spacing:-.008em}

.opt-note{
  margin-top:12px;font-size:13px;color:var(--muted);display:flex;gap:8px;align-items:center;
}
.opt-note.is-limit{color:var(--ink)}

/* the "Other" text field, revealed under its option */
.other-field{margin-top:8px;padding-left:34px}
.other-field label{display:block;font-size:12.5px;font-weight:600;letter-spacing:.06em;color:var(--muted);margin-bottom:6px}

.field-input,.textarea{
  width:100%;background:var(--card);border:1px solid var(--rule);border-radius:999px;
  padding:14px 22px;font-size:1rem;line-height:1.5;
  transition:border-color .22s;
}
.field-input:focus,.textarea:focus{border-color:var(--ink)}
.textarea{min-height:140px;resize:vertical;border-radius:20px;padding:16px 20px}
.char-count{margin-top:7px;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;text-align:right}

/* ---- matrix ----
   Rows are cards on every width. On wide screens the scale becomes a single
   row of segments; on narrow ones it wraps. There is never a horizontal
   scroll and never a header row a respondent has to remember. */

.matrix{display:flex;flex-direction:column;gap:10px}
.matrix__row{
  border:1px solid var(--rule);background:var(--card);border-radius:22px;
  padding:16px 18px;transition:border-color .28s var(--ease-out);
}
.matrix__row.is-set{border-color:rgba(10,10,10,.26)}
.matrix__label{font-size:1rem;font-weight:500;line-height:1.38;letter-spacing:-.008em;margin-bottom:13px}
.matrix__scale{display:flex;flex-wrap:wrap;gap:6px}
.seg{
  position:relative;flex:1 1 auto;min-width:max-content;min-height:44px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:10px 16px;border:1px solid var(--rule);border-radius:999px;background:var(--paper);
  font-size:13.5px;line-height:1.25;letter-spacing:-.004em;color:var(--ink-2);
  transition:background .2s,border-color .2s,color .2s,transform .2s var(--ease-out);
}
.seg:hover{border-color:var(--rule-strong);transform:translateY(-1px)}
.seg[aria-checked=true]{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}
.seg[aria-checked=true]::after{
  content:"";position:absolute;left:26%;right:26%;bottom:5px;height:2px;border-radius:2px;
  background:var(--accent);animation:railIn .32s var(--ease-out) both;transform-origin:center;
}
.matrix__progress{
  margin-top:14px;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;
  display:flex;align-items:center;gap:10px;
}
.matrix__progress i{display:block;height:2px;flex:1;max-width:120px;background:rgba(10,10,10,.1);position:relative;overflow:hidden}
.matrix__progress i b{position:absolute;inset:0 auto 0 0;background:var(--accent);transition:width .4s var(--ease-out)}

/* ---- country combobox ---- */

.combo{position:relative}
.combo__list{
  position:absolute;z-index:30;top:calc(100% + 6px);left:0;right:0;max-height:290px;
  overflow:auto;overscroll-behavior:contain;list-style:none;
  background:var(--card);border:1px solid var(--ink);border-radius:20px;
  box-shadow:0 24px 48px -24px rgba(10,10,10,.42);
}
.combo__list li{
  padding:11px 15px;font-size:.98rem;cursor:pointer;display:flex;justify-content:space-between;gap:12px;
}
.combo__list li[aria-selected=true]{background:rgba(var(--accent-rgb),.30)}
.combo__list li.is-tail{border-top:1px solid var(--rule);color:var(--muted)}
.combo__empty{padding:14px 15px;color:var(--muted);font-size:.95rem}

.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.chip{
  display:inline-flex;align-items:center;gap:9px;padding:7px 9px 7px 13px;
  background:var(--card);border:1px solid var(--ink);border-radius:999px;font-size:.94rem;font-weight:500;
  animation:chipIn .34s var(--ease-spring) both;
}
@keyframes chipIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
.chip button{width:20px;height:20px;display:grid;place-items:center;color:var(--muted);border-radius:2px}
.chip button:hover{color:var(--ink);background:rgba(10,10,10,.06)}

/* ---- validation ---- */

.q.has-error .opt,.q.has-error .matrix__row,.q.has-error .field-input{border-color:#B3261E}
.error{
  margin-top:12px;display:flex;gap:9px;align-items:flex-start;
  font-size:13.5px;line-height:1.45;color:#8C1D18;
  animation:nudge .4s var(--ease-out) both;
}
.error svg{flex:0 0 auto;width:16px;height:16px;margin-top:2px}
@keyframes nudge{0%{transform:translateX(-5px)}55%{transform:translateX(3px)}100%{transform:none}}

/* ---- footer controls ---- */

.controls{
  position:fixed;left:0;right:0;bottom:0;z-index:45;
  background:rgba(244,242,237,.93);
  backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-top:1px solid var(--rule);
}
.controls__inner{
  max-width:74rem;margin:0 auto;padding:14px var(--pad);
  display:flex;align-items:center;gap:16px;
  padding-bottom:calc(14px + env(safe-area-inset-bottom));
}
.controls__status{flex:1;font-size:13px;color:var(--muted);line-height:1.4}
.controls .btn{padding:14px 26px}

/* ============================================================ speaker reel */

.showcase{
  margin-top:22px;border:1px solid var(--rule);background:var(--card);
  overflow:hidden;border-radius:22px;max-width:330px;
}
/* No fixed ratio by default: the typographic card is as tall as its quote.
   A loop, when there is one, is portrait — these recordings are all shot on a
   phone — and gets 9:16 with a ceiling so it never runs away with the page. */
.showcase__media{
  position:relative;background:var(--dark-2);overflow:hidden;
  display:grid;place-items:center;
}
.showcase__media.has-media{aspect-ratio:9/16;max-height:min(58vh,440px)}
.showcase__media img,.showcase__media video{width:100%;height:100%;object-fit:cover}
/* Until artwork is dropped in, the panel shows what it is actually for: real
   contributions, set as type. It never shows a fake video frame. */
.showcase__quote{
  padding:clamp(22px,4vw,34px);color:#fff;text-align:left;width:100%;
  background:radial-gradient(120% 100% at 20% 0%,#1A1A18 0%,var(--dark) 70%);
}
.showcase__quote blockquote{
  font-family:var(--serif);font-style:italic;font-size:clamp(1.02rem,2.2vw,1.24rem);
  line-height:1.45;letter-spacing:-.01em;
}
.showcase__quote cite{
  display:block;margin-top:16px;font-family:var(--font);font-style:normal;
  font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6);
}
.showcase__quote figure{animation:quoteIn .7s var(--ease-out) both}
@keyframes quoteIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.showcase__cap{
  padding:14px 18px;border-top:1px solid var(--rule);
  font-size:13px;line-height:1.45;color:var(--muted);
}
.showcase__dots{display:flex;gap:5px;margin-top:10px}
.showcase__dots i{width:16px;height:2px;background:rgba(10,10,10,.16);transition:background .3s}
.showcase__dots i.is-on{background:var(--accent)}

@media (min-width:1240px){
  /* Beside the question rather than under it, once there is room to spare. */
  .q--showcase .q__body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
  .q--showcase .showcase{margin-top:0}
}

/* ============================================================ end states */

.end{min-height:100svh;display:flex;align-items:center;padding:var(--pad);position:relative;overflow:hidden}
.end .wrap{position:relative;z-index:1}
.end .display{margin:24px 0 22px;max-width:18ch}
.end .lede{max-width:46ch;color:rgba(255,255,255,.78)}

.contact{
  margin-top:clamp(40px,6vw,64px);padding:clamp(26px,3.6vw,38px);
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.035);
  max-width:34rem;
}
.contact h3{font-size:1.28rem;font-weight:700;letter-spacing:-.02em;margin-bottom:6px}
.contact>p{font-size:14px;color:rgba(255,255,255,.62);margin-bottom:22px}
.check{
  display:flex;gap:13px;align-items:flex-start;padding:13px 0;cursor:pointer;
  border-top:1px solid rgba(255,255,255,.1);
}
.check:first-of-type{border-top:0}
.check__box{
  flex:0 0 auto;width:21px;height:21px;border:1.5px solid rgba(255,255,255,.4);border-radius:3px;
  display:grid;place-items:center;transition:background .2s,border-color .2s;
}
.check input{position:absolute;opacity:0;pointer-events:none}
.check input:checked+.check__box{background:var(--accent);border-color:var(--accent)}
.check__box svg{width:12px;height:12px;opacity:0;transition:opacity .18s}
.check input:checked+.check__box svg{opacity:1}
.check__box path{fill:none;stroke:#0A0A0A;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.check span{font-size:.99rem;line-height:1.4}
.contact .field-input{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);color:#fff}
.contact .field-input::placeholder{color:rgba(255,255,255,.4)}
.contact .field-input:focus{border-color:var(--accent)}
.contact__email{margin-top:18px;overflow:hidden}
.contact__actions{margin-top:20px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.contact__note{font-size:13px;color:rgba(255,255,255,.55);margin-top:16px;line-height:1.5}

.ineligible{max-width:40rem}

/* the sealing pass over the Submit button */
.btn.is-sending{pointer-events:none}
.btn.is-sending::before{
  content:"";position:absolute;inset:0;background:rgba(10,10,10,.16);
  transform-origin:left;animation:fill 1.1s var(--ease-out) infinite;
}
@keyframes fill{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}

.notice{
  margin-top:18px;padding:15px 17px;border:1px solid var(--rule);border-radius:18px;
  background:var(--card);font-size:14px;line-height:1.5;display:flex;gap:11px;align-items:flex-start;
}
.notice svg{flex:0 0 auto;width:17px;height:17px;margin-top:2px}
.notice--error{border-color:#B3261E;color:#8C1D18;background:#FDF3F2}
.notice--preview{border-color:var(--rule-strong)}
.on-dark .notice{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.2);color:#fff}
.on-dark .notice--error{background:rgba(179,38,30,.16);border-color:#E5847C;color:#FFD9D5}

/* A full-width bar at the very top of the document, in normal flow. Floating
   it in a corner meant it covered the wordmark on one width and the controls
   on another; this claim is too important to be sitting on top of something
   else, or to be scrollable out of sight. It only exists when there is no
   backend. */
.preview-flag{
  position:sticky;top:0;z-index:70;
  display:block;width:100%;text-align:center;
  background:var(--ink);color:#fff;font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;padding:8px 16px;line-height:1.4;
}
/* Two sticky elements both pinned to 0 would sit on top of each other, so the
   top bar is offset by the height of the preview bar whenever there is one. */
body.is-preview .topbar{top:var(--flag-h)}
body.is-preview{--flag-h:33px}

/* ============================================================ screens */

.screen{animation:screenIn .5s var(--ease-out) both}
@keyframes screenIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

@media (max-width:1059px){
  .topbar__title{display:none}
  .layout{padding-bottom:120px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .q.is-ahead{filter:none}
}

/* The last word of the landing headline carries the accent. Set here rather
   than in the markup so the reveal can rebuild the line into word masks
   without having to preserve an inline element. */
.hero .display .word:last-of-type>span{color:var(--accent)}

/* ---- what you get ----
   The one block on the landing page arguing for the respondent rather than
   describing the study. It sits above the themes because that is the order the
   questions arrive in: why should I, then what is it. */

.cta-aside{display:flex;flex-direction:column;gap:8px;max-width:32ch}
.cta-aside__time{
  display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  padding:6px 15px;border-radius:999px;border:1px solid rgba(255,255,255,.26);
  font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#fff;
}
.cta-aside__time::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);
  animation:pulse 2.6s var(--ease-out) infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.7)}}

.benefits{margin-top:clamp(34px,4.4vw,56px)}
.benefits__title{
  font-size:clamp(1.3rem,2.6vw,1.7rem);font-weight:700;letter-spacing:-.026em;
  max-width:24ch;margin-bottom:26px;
}
.benefits__list{list-style:none;display:grid;gap:2px}
@media (min-width:860px){.benefits__list{grid-template-columns:repeat(3,1fr);gap:22px}}
.benefits__list li{
  position:relative;padding:20px 22px 20px 0;border-top:2px solid var(--ink);
}
.benefits__list b{
  display:block;font-size:1.14rem;font-weight:700;letter-spacing:-.02em;
  line-height:1.25;margin-bottom:10px;
}
.benefits__list p{font-size:.99rem;line-height:1.5;color:var(--ink-2)}
.benefits__list li::after{
  content:"";position:absolute;top:-2px;left:0;height:2px;width:0;background:var(--accent);
  transition:width .7s var(--ease-out);
}
.benefits__list li.is-in::after{width:100%}

/* The per-question step control. Quieter than the section Continue so the two
   never compete: this one finishes a question, that one finishes a section. */
.q__step{margin-top:18px}
.btn--step{
  background:var(--ink);color:var(--paper);padding:11px 22px;font-size:14.5px;
}
.btn--step svg{width:15px;height:15px}
.btn--step:hover{box-shadow:0 10px 26px -14px rgba(10,10,10,.7)}

/* Shown beside the start button while there is no backend. Deliberately
   plain — this is a warning, not a design element. */
.cta-warning{
  flex-basis:100%;max-width:46ch;margin-top:2px;
  font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.72);
}
.cta-warning b{color:#fff;font-weight:600}
.paper-section .cta-warning{color:var(--ink-2)}
.paper-section .cta-warning b{color:var(--ink)}