/* ════════════════════════════════════════════════════════════════
   Own Side — product language derived from SCP Brand System v1.1 (Petrol).
   Sans only. No serif anywhere in the identity.

   The accent rule is load-bearing and is enforced structurally: a field
   class sets its own --accent, so primary petrol can never land on ink and
   mineral green can never land on cream. Never set --accent by hand.
   ════════════════════════════════════════════════════════════════ */

:root{
  /* fields */
  --ink:#171717;
  --cream:#F0F0E8;
  --cream-2:#E4E4DA;
  --petrol-deep:#173F43;
  --petrol:#286B68;
  --mineral:#5E8C78;

  /* type on fields */
  --body-cream:#3A3A36;
  --meta-cream:#63635C;
  --body-ink:#C9C9BE;
  --meta-ink:#9C9C93;

  /* strokes */
  --rule-cream:rgba(23,23,23,.16);
  --rule-ink:rgba(240,240,232,.18);

  --display:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --narrow:"Archivo Narrow","Archivo","Helvetica Neue",Arial,sans-serif;

  --pad:24px;                 /* comfortable side padding, mobile */
  --measure:34ch;
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (min-width:600px){ :root{ --pad:56px } }
@media (min-width:1000px){ :root{ --pad:80px } }

/* ─── fields: ground + the accent that is legal on it ─── */
.f-cream{
  background:var(--cream); color:var(--ink);
  --accent:var(--petrol); --body:var(--body-cream); --meta:var(--meta-cream);
  --rule:var(--rule-cream); --onfield:var(--ink);
}
.f-cream-2{
  background:var(--cream-2); color:var(--ink);
  --accent:var(--petrol); --body:var(--body-cream); --meta:var(--meta-cream);
  --rule:var(--rule-cream); --onfield:var(--ink);
}
.f-ink{
  background:var(--ink); color:var(--cream);
  --accent:var(--mineral); --body:var(--body-ink); --meta:var(--meta-ink);
  --rule:var(--rule-ink); --onfield:var(--cream);
}
.f-petrol{
  background:var(--petrol-deep); color:var(--cream);
  --accent:var(--mineral); --body:rgba(240,240,232,.80); --meta:rgba(240,240,232,.62);
  --rule:rgba(240,240,232,.22); --onfield:var(--cream);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--ink);color:var(--cream);
  font-family:var(--sans);-webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:left}
:focus-visible{outline:2px solid var(--accent,var(--mineral));outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ════════ TYPE ROLES ════════
   One Schibsted idea per surface. Archivo carries everything around it. */
.t-display{
  font-family:var(--display);font-weight:500;
  letter-spacing:-.038em;line-height:1;text-wrap:balance;
}
.t-statement{
  font-family:var(--display);font-weight:400;
  letter-spacing:-.028em;line-height:1.16;text-wrap:pretty;
}
.t-body{font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.6;color:var(--body)}
.t-identity{font-family:var(--sans);font-weight:500;font-size:17px;letter-spacing:-.005em}
.t-label{
  font-family:var(--sans);font-weight:500;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
}
.t-label.mute{color:var(--meta)}
.t-meta{font-family:var(--narrow);font-weight:400;font-size:13px;letter-spacing:.08em;color:var(--meta)}
@media (min-width:900px){
  .t-body{font-size:19px}
  .t-label{font-size:12.5px}
  .t-meta{font-size:15px}
  .t-identity{font-size:22px}
}

/* ════════ RULES / STROKES ════════ */
.rule-accent{height:4px;width:88px;background:var(--accent);flex:none}
.rule-accent.sm{width:44px}
.hair{height:1px;background:var(--rule);border:0;margin:0}

/* ════════ MARK ════════
   Masked so one file inherits the field's type colour. Never gradient,
   never on the accent, clear space half the mark's width. */
.mark{
  display:block;flex:none;width:var(--mark,30px);aspect-ratio:154.36/140.8;
  background-color:currentColor;
  -webkit-mask:url(/img/mark.svg) center/contain no-repeat;
  mask:url(/img/mark.svg) center/contain no-repeat;
}
.lockup{display:flex;align-items:center;gap:14px}
.lockup .t-identity{color:var(--onfield)}

/* ════════ SHELL ════════ */
#app{position:relative;width:100%;min-height:100dvh;overflow:hidden}
.view{display:none;flex-direction:column;min-height:100dvh}
.view.on{display:flex}
/* fields run edge to edge; only type is measured */
.bleed{width:100%}
.hold{width:100%;max-width:1180px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

/* ════════ BUTTONS ════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:space-between;gap:20px;
  font-family:var(--sans);font-weight:500;font-size:17px;letter-spacing:-.01em;
  padding:20px 0;width:100%;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  transition:padding-left .3s var(--ease);
}
.btn:hover{padding-left:8px}
.btn svg{width:20px;height:20px;flex:none}
.btn-primary{
  background:var(--accent);color:var(--cream);
  border:0;padding:20px 24px;justify-content:space-between;
  transition:padding-left .3s var(--ease),filter .2s ease;
}
.f-cream .btn-primary,.f-cream-2 .btn-primary{color:var(--cream)}
.btn-primary:hover{padding-left:32px;filter:brightness(1.08)}
.btn-primary[disabled]{opacity:.4;cursor:default;filter:none}
.btn-ghost{
  border:1px solid var(--rule);padding:13px 18px;width:auto;
  font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  transition:border-color .2s ease,color .2s ease;color:var(--body);
}
.btn-ghost:hover{border-color:var(--onfield);color:var(--onfield);padding-left:18px}

/* ════════ PROGRESS ════════
   A rule that grows, not a gauge. Subtle by construction. */
.progress{display:flex;align-items:center;gap:14px}
.progress .track{position:relative;flex:1;height:2px;background:var(--rule)}
.progress .track i{
  position:absolute;inset:0 auto 0 0;height:2px;background:var(--accent);
  transition:width .5s var(--ease);
}
.progress .count{
  font-family:var(--narrow);font-size:13px;letter-spacing:.08em;
  color:var(--meta);font-variant-numeric:tabular-nums;flex:none;
}
.progress .count b{color:var(--onfield);font-weight:500}

/* ════════ 01 · LANDING — the cover ════════ */
#landing{justify-content:space-between}
#landing .top{padding-top:34px}
#landing .mid{flex:1;display:flex;flex-direction:column;justify-content:center;padding-top:56px;padding-bottom:56px}
#landing h1{
  font-size:clamp(40px,11.4vw,64px);margin:0;max-width:12ch;
}
#landing .blurb{margin:28px 0 0;max-width:30ch}
#landing .bot{padding-bottom:40px;display:flex;flex-direction:column;gap:22px}
#landing .terms{max-width:38ch}
@media (min-width:900px){
  #landing .mid{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:end;padding-top:80px;padding-bottom:80px}
  #landing h1{font-size:clamp(64px,7.4vw,104px);max-width:none}
  #landing .blurb{margin:0 0 8px;font-size:21px}
  #landing .bot{flex-direction:row;align-items:center;justify-content:space-between;gap:48px;padding-bottom:64px}
  #landing .bot .btn-primary{width:auto;min-width:300px}
}

/* ════════ 02 · QUESTIONS ════════ */
#assess{background:var(--cream)}
.q-top{padding-top:22px;padding-bottom:18px}
.q-top .row{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:16px}
.back{
  display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--meta);
  padding:6px 0;transition:color .2s ease,transform .25s var(--ease);
}
.back:hover{color:var(--onfield);transform:translateX(-3px)}
.back[disabled]{opacity:.28;cursor:default;transform:none}
.back svg{width:15px;height:15px}

/* The carousel's running device: the previous line held above the live one,
   so sixteen screens read as one unfolding thought rather than sixteen forms. */
.ghost{
  font-family:var(--display);font-weight:400;letter-spacing:-.028em;line-height:1.3;
  font-size:clamp(14px,3.6vw,16px);color:var(--onfield);opacity:.26;
  margin:0 0 30px;max-width:46ch;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
.ghost:empty{display:none}

.q-body{flex:1;display:flex;align-items:center;padding-top:8px;padding-bottom:32px}
.q{
  font-size:clamp(28px,7.6vw,38px);margin:0;
  max-width:18ch;                     /* prevents the awkward wrap */
}
.answers{padding-bottom:34px;display:flex;flex-direction:column}

/* answer states */
.ans{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;min-height:64px;padding:18px 0;
  border-top:1px solid var(--rule);
  font-family:var(--sans);font-weight:400;font-size:18px;letter-spacing:-.01em;
  transition:padding-left .28s var(--ease);
}
.ans:last-child{border-bottom:1px solid var(--rule)}
.ans .t{position:relative;z-index:1;transition:font-weight .2s ease}
.ans .m{
  position:relative;z-index:1;height:2px;width:var(--w,14px);background:var(--onfield);
  opacity:.22;flex:none;transition:opacity .2s ease,background-color .2s ease,width .34s var(--ease);
}
.ans:nth-child(1) .m{--w:14px}
.ans:nth-child(2) .m{--w:26px}
.ans:nth-child(3) .m{--w:38px}
.ans:nth-child(4) .m{--w:50px}
.ans .fillbar{
  position:absolute;inset:0 100% 0 0;background:var(--accent);opacity:.1;
  transition:inset .32s var(--ease);
}
@media (hover:hover){
  .ans:hover{padding-left:10px}
  .ans:hover .m{opacity:.5;background:var(--accent)}
}
/* selected — restored on Back, held not flashed */
.ans[aria-checked="true"]{padding-left:10px}
.ans[aria-checked="true"] .t{font-weight:600}
.ans[aria-checked="true"] .m{opacity:1;background:var(--accent)}
.ans[aria-checked="true"] .fillbar{inset:0 0 0 0;opacity:.08}
/* committing */
.ans.picked{padding-left:10px}
.ans.picked .t{font-weight:600}
.ans.picked .m{opacity:1;background:var(--accent);width:100%}
.ans.picked .fillbar{inset:0 0 0 0;opacity:.14}

@media (min-width:900px){
  #assess .q-body{padding-top:24px;padding-bottom:48px}
  .q-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:72px;align-items:center;width:100%}
  .q{font-size:clamp(40px,4.2vw,58px);max-width:16ch}
  .answers{padding-bottom:0}
  .ans{font-size:20px;min-height:76px}
}

/* panel transitions — editorial panels, not a form wizard */
.stepping .q,.stepping .ghost{transform:translateY(-14px);opacity:0;transition:transform .18s ease-in,opacity .16s ease-in}
.stepping .ans{opacity:.14;transition:opacity .18s ease-in}
.stepping .ans.picked{opacity:1}
.entering .q{animation:panel-in .5s var(--ease) both}
.entering .ghost{animation:panel-in .5s var(--ease) both;animation-delay:.04s}
.entering .ans{animation:rise .42s var(--ease) both}
.entering .ans:nth-child(1){animation-delay:.06s}
.entering .ans:nth-child(2){animation-delay:.1s}
.entering .ans:nth-child(3){animation-delay:.14s}
.entering .ans:nth-child(4){animation-delay:.18s}
.entering.rev .q,.entering.rev .ghost{animation-name:panel-in-rev}
@keyframes panel-in{from{transform:translateY(26px);opacity:0}to{transform:none;opacity:1}}
@keyframes panel-in-rev{from{transform:translateY(-24px);opacity:0}to{transform:none;opacity:1}}
@keyframes rise{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}

/* ════════ 03 · TRANSITION ════════ */
#transition{justify-content:center;align-items:flex-start}
#transition .inner{padding-top:80px;padding-bottom:80px}
#transition .line{
  font-size:clamp(30px,8vw,44px);margin:26px 0 0;max-width:16ch;
  opacity:0;animation:panel-in .7s var(--ease) .15s both;
}
#transition .rule-accent{margin-top:34px;opacity:0;animation:grow .8s var(--ease) .55s both}
@keyframes grow{from{width:0;opacity:0}to{width:88px;opacity:1}}
@media (min-width:900px){ #transition .line{font-size:clamp(48px,5.2vw,72px)} }

/* ════════ 04–05 · RESULT ════════
   Stacked colour fields. Each field carries exactly one Schibsted idea. */
#result{display:none}
#result.on{display:block;min-height:100dvh}
.sect{padding-top:clamp(54px,11vw,104px);padding-bottom:clamp(54px,11vw,104px)}
.sect-tight{padding-top:clamp(40px,8vw,72px);padding-bottom:clamp(40px,8vw,72px)}

.hero{
  font-size:clamp(30px,8.2vw,44px);margin:22px 0 0;max-width:17ch;
}
.hero .ln{display:block;overflow:hidden}
.hero .ln>.inner{display:block}
.hero .dim{opacity:.42}
.hero .fill{opacity:0;transition:opacity .55s ease}
.hero .out{opacity:0;transition:opacity .55s ease;-webkit-text-stroke:1.1px var(--onfield);color:transparent}
.revealed .hero .fill,.revealed .hero .out{opacity:1}
.obs{margin:28px 0 0;max-width:var(--measure)}

/* finding blocks — one display word each */
.finding .word{
  display:block;font-family:var(--display);font-weight:500;
  letter-spacing:-.038em;line-height:1;
  font-size:clamp(56px,17vw,96px);margin:18px 0 0;
}
.finding .word.out{-webkit-text-stroke:1.6px var(--onfield);color:transparent}
.finding p{margin:22px 0 0;max-width:var(--measure)}
.finding .rule-accent{margin-top:26px}

/* the four dimensions — Archivo, so the surface keeps one display idea */
.dims{margin:26px 0 0}
.dim-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding:17px 0;border-top:1px solid var(--rule);
}
.dim-row:last-child{border-bottom:1px solid var(--rule)}
.dim-row .d{font-family:var(--sans);font-weight:500;font-size:clamp(19px,5vw,24px);letter-spacing:-.01em}
.dim-row .d.out{-webkit-text-stroke:.8px var(--onfield);color:transparent}
.dim-row .s{
  font-family:var(--narrow);font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--meta);text-align:right;
}

/* takeaway — the loudest field the flow permits */
.takeaway .line{
  font-size:clamp(27px,7.4vw,42px);margin:22px 0 0;max-width:19ch;
  color:var(--body);
}
.takeaway .line b{font-weight:400;color:var(--cream)}
.takeaway .rule-accent{margin-top:32px}

.acts{display:flex;flex-direction:column;gap:0}
@media (min-width:900px){
  .split{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:start}
  .split.rev{grid-template-columns:1.1fr .9fr}
  .hero{font-size:clamp(48px,5vw,74px);max-width:15ch}
  .finding .word{font-size:clamp(96px,10vw,150px)}
  .takeaway .line{font-size:clamp(44px,4.6vw,64px)}
  .acts{flex-direction:row;gap:40px}
  .acts .btn{width:auto;flex:1}
}

.rv{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ════════ 06 · SHARE ════════
   Reel-cover construction: ink field, mark top left, one line at display
   scale, mineral green rule. */
/* page ground sits darker than the card so the 9:16 crop reads as an object */
#share{align-items:center;justify-content:center;gap:18px;padding:22px 0;background:#0D0D0D}
.storycap{font-family:var(--narrow);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--meta-ink);margin:0}
.storyframe{
  width:352px;height:626px;position:relative;background:var(--ink);
  overflow:hidden;flex:none;transform-origin:center;
  --accent:var(--mineral);--meta:var(--meta-ink);--onfield:var(--cream);--rule:var(--rule-ink);
}
.story-in{position:absolute;inset:0;padding:40px 36px 34px;display:flex;flex-direction:column;color:var(--cream)}
.story-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.story-mid{flex:1;display:flex;flex-direction:column;justify-content:center;gap:30px}
.story-line small{
  display:block;font-family:var(--sans);font-size:13px;font-weight:400;
  color:var(--meta-ink);margin:0 0 6px;
}
.story-line strong{
  display:block;font-family:var(--display);font-weight:500;
  font-size:54px;line-height:1;letter-spacing:-.038em;
}
.story-line strong.out{-webkit-text-stroke:1.5px var(--cream);color:transparent}
.story-line em{
  display:block;font-style:normal;font-family:var(--sans);font-weight:400;
  font-size:16px;line-height:1.45;color:var(--body-ink);margin:10px 0 0;
}
.story-bot{display:flex;flex-direction:column;gap:16px}
.story-bot .ask{font-family:var(--display);font-weight:400;font-size:19px;letter-spacing:-.028em;color:var(--mineral)}
.story-bot .sig{display:flex;flex-direction:column;gap:4px}
.story-bot .sig .a{font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cream)}
.story-bot .sig .b{font-family:var(--narrow);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--meta-ink)}
.share-acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;padding:0 20px}

/* ════════ FEEDBACK / DONE ════════ */
.fbody{flex:1;display:flex;flex-direction:column;justify-content:center;padding-top:64px;padding-bottom:64px}
.fbody h2{font-size:clamp(28px,7.4vw,40px);margin:20px 0 0;max-width:16ch}
.scale-opts{display:flex;flex-direction:column;margin:30px 0 0}
.fopt{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;min-height:62px;padding:17px 0;border-top:1px solid var(--rule);
  font-size:17px;transition:padding-left .28s var(--ease);
}
.fopt:last-child{border-bottom:1px solid var(--rule)}
.fopt .m{height:2px;width:var(--w,14px);background:var(--onfield);opacity:.22;flex:none;transition:opacity .2s,background-color .2s}
.fopt:nth-child(1) .m{--w:14px}
.fopt:nth-child(2) .m{--w:26px}
.fopt:nth-child(3) .m{--w:38px}
.fopt:nth-child(4) .m{--w:50px}
.fopt:hover{padding-left:10px}
.fopt[aria-checked="true"]{padding-left:10px;font-weight:600}
.fopt[aria-checked="true"] .m{opacity:1;background:var(--accent)}
textarea{
  width:100%;margin:26px 0 0;background:transparent;color:var(--onfield);
  border:1px solid var(--rule);padding:16px;
  font-family:var(--sans);font-size:16px;line-height:1.55;resize:vertical;min-height:104px;
}
textarea::placeholder{color:var(--meta)}
textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.note{margin:20px 0 0;max-width:38ch}
@media (min-width:900px){ .fbody h2{font-size:clamp(44px,4.4vw,60px)} .fbody{max-width:820px} }

.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);
  background:var(--cream);color:var(--ink);padding:13px 20px;font-size:14px;font-weight:500;
  opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s var(--ease);z-index:40;
}
.toast.on{opacity:1;transform:translate(-50%,0)}

@supports not (-webkit-text-stroke:1px #000){
  .out{color:var(--onfield)!important;opacity:.55!important;-webkit-text-stroke:0!important}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.08s!important}
}