/* The Louli's Call V2, prototype styling.
 *
 * Design intent, in one line: it should feel like being handed a real situation by a strong
 * media director, not like taking an online quiz. That rules out scores, progress bars,
 * percentages, badges and any celebratory motion. What is left has to carry weight through
 * typography, restraint and timing instead.
 *
 * Motion is used for exactly one job: making the sequence choice locked -> consequence ->
 * reasoning legible. Nothing decorative moves. Everything respects prefers-reduced-motion.
 */

:root{
  --paper:#FBF6E9; --ink:#16150F; --ink-2:#4A4840; --ink-3:#6B685F;
  --line:#DED8C9; --yellow:#F0C544; --coral:#F0A18C; --ok:#2A7049;
  --card:#FFFDF7;
  --l-strategy:#E3C89F; --l-planning:#E0AEB5; --l-creative:#D9A894;
  --l-performance:#CBB9D5; --l-operations:#CDD7B7; --l-the:#D6B8BC;
  --r:14px;
  --shadow:0 1px 2px rgba(22,21,15,.05), 0 8px 24px -12px rgba(22,21,15,.18);
  --shadow-lift:0 2px 4px rgba(22,21,15,.06), 0 18px 40px -16px rgba(22,21,15,.26);
  --sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --t:.22s cubic-bezier(.22,.61,.36,1);
  --measure:34rem;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 1rem/1.6 var(--sans); letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
button{font:inherit; color:inherit}

.wrap{max-width:53rem; margin:0 auto; padding:0 24px}

/* ------------------------------------------------------------------ chrome */
.top{
  position:sticky; top:0; z-index:20; background:rgba(251,246,233,.92);
  backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid var(--line);
}
.top .wrap{display:flex; align-items:center; justify-content:space-between; height:56px; gap:16px}
.brand{display:flex; align-items:center; gap:9px; font-weight:640; font-size:.92rem; text-decoration:none; color:inherit}
.brand img{width:26px; height:26px}
/* Deliberately not a progress bar. It names the case rather than counting it, because
   "2 of 2" turns a professional situation into a test with an end. */
.where{font-size:.78rem; color:var(--ink-3); letter-spacing:.02em}

.proto{
  background:#efe7d2; border-bottom:1px solid var(--line);
  font-size:.76rem; color:var(--ink-2); text-align:center; padding:7px 16px;
}

/* ------------------------------------------------------------------ situation */
main{padding:40px 0 96px}

.eyebrow{
  font-size:.7rem; font-weight:680; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 10px;
}
h1{
  font-size:clamp(1.85rem, 5.2vw, 2.7rem); line-height:1.06; letter-spacing:-.028em;
  font-weight:680; margin:0 0 6px;
}
.teaser{font-size:1.05rem; color:var(--ink-2); margin:0 0 30px; max-width:var(--measure)}

.situation{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:26px 26px 22px; box-shadow:var(--shadow); margin-bottom:38px;
}
.situation p{margin:0 0 12px; max-width:var(--measure)}
.situation p:last-child{margin-bottom:0}
.situation strong{font-weight:640}
.situation em{font-style:normal; background:linear-gradient(transparent 62%, var(--yellow) 62%); padding:0 2px}

/* ------------------------------------------------------------------ the ask */
.ask{
  font-size:clamp(1.3rem,3.4vw,1.6rem); font-weight:680; letter-spacing:-.02em;
  margin:0 0 4px;
}
.ask-note{font-size:.85rem; color:var(--ink-3); margin:0 0 18px}

/* ------------------------------------------------------------------ options */
.opts{display:grid; gap:10px; margin-bottom:8px}
.opt{
  display:block; width:100%; text-align:left; cursor:pointer;
  background:var(--card); border:1.5px solid var(--line); border-radius:var(--r);
  padding:17px 19px; transition:border-color var(--t), box-shadow var(--t), transform var(--t);
}
.opt:hover{border-color:#c9c0aa; box-shadow:var(--shadow); transform:translateY(-1px)}
.opt:focus-visible{outline:2.5px solid var(--ink); outline-offset:2px}
.opt b{display:block; font-weight:640; font-size:1.02rem; line-height:1.34; margin-bottom:5px; letter-spacing:-.012em}
.opt span{display:block; color:var(--ink-2); font-size:.92rem; line-height:1.52}

/* The locked state has to read instantly, because everything after it is a response to
   this one choice. Chosen keeps full contrast and gains a rule; the rest recede but stay
   readable, so the learner can still see what they passed over. */
.opts.locked .opt{cursor:default; transform:none}
.opts.locked .opt:hover{box-shadow:none; border-color:var(--line)}
.opts.locked .opt[aria-pressed="false"]{opacity:.42}
.opt[aria-pressed="true"]{
  border-color:var(--ink); box-shadow:var(--shadow-lift);
  position:relative; padding-left:19px;
}
.opt[aria-pressed="true"]::before{
  content:''; position:absolute; left:-1.5px; top:-1.5px; bottom:-1.5px; width:5px;
  background:var(--ink); border-radius:var(--r) 0 0 var(--r);
}
.chosen-tag{
  display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:7px;
}

/* ------------------------------------------------------------------ verdict */
.verdict{
  display:inline-flex; align-items:center; gap:7px; margin-top:11px;
  font-size:.8rem; font-weight:640; letter-spacing:-.005em;
  padding:5px 11px; border-radius:999px; border:1px solid var(--line); background:var(--paper);
}
.verdict::before{content:''; width:7px; height:7px; border-radius:50%; background:var(--ink-3)}
.v-strong{border-color:#bcd6c4; background:#f0f7f2; color:#1f5537}
.v-strong::before{background:var(--ok)}
.v-risk{border-color:#f0cfc4; background:#fdf3ef}
.v-risk::before{background:#C4643F}
.v-cond::before{background:var(--yellow)}
.v-weak::before{background:var(--ink-3)}

/* ------------------------------------------------------------------ consequence */
.step{margin-top:34px}
.step[hidden]{display:none}

.rule-line{
  display:flex; align-items:center; gap:14px; margin:38px 0 20px;
  font-size:.7rem; font-weight:680; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3);
}
.rule-line::after{content:''; flex:1; height:1px; background:var(--line)}

/* Consequence is visually distinct from teaching: it is the world responding to a choice,
   so it sits on ink rather than paper. The Room and the Call are teaching and stay light. */
.conseq{
  background:var(--ink); color:#F4F0E4; border-radius:var(--r);
  padding:26px 26px 24px; box-shadow:var(--shadow-lift);
}
.conseq h3{
  font-size:.7rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:#A9A493; margin:0 0 8px;
}
.conseq p{margin:0 0 18px; max-width:var(--measure); color:#EDE8DA; font-size:.97rem; line-height:1.62}
.conseq p:last-child{margin-bottom:0}
.conseq .split{display:grid; gap:20px; margin-bottom:18px}
@media(min-width:720px){.conseq .split{grid-template-columns:1fr 1fr; gap:26px}}
.conseq .split p{margin:0}
.c-next{border-top:1px solid rgba(244,240,228,.16); padding-top:18px}

/* The communication consequence is a second, smaller block: it modifies the action's
   outcome rather than replacing it, and the styling has to say so. */
.conseq-comm{
  margin-top:14px; background:var(--card); border:1px solid var(--line);
  border-left:4px solid var(--yellow); border-radius:0 var(--r) var(--r) 0;
  padding:20px 22px;
}
.conseq-comm h3{
  font-size:.7rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 8px;
}
.conseq-comm p{margin:0 0 12px; max-width:var(--measure); font-size:.95rem}
.conseq-comm p:last-child{margin-bottom:0}
.conseq-comm .lbl{font-weight:640; color:var(--ink)}

/* ------------------------------------------------------------------ the room */
.room{display:grid; gap:10px}
.lens{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:16px 18px; display:grid; grid-template-columns:44px 1fr; gap:14px; align-items:start;
}
.lens img{width:44px; height:44px; border-radius:10px; background:var(--paper)}
.lens .who{
  font-size:.68rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 3px;
}
.lens .line{margin:0; font-size:1rem; line-height:1.5; font-weight:520; letter-spacing:-.01em}
.lens[data-k="strategy"]{border-left:4px solid var(--l-strategy)}
.lens[data-k="planning"]{border-left:4px solid var(--l-planning)}
.lens[data-k="creative"]{border-left:4px solid var(--l-creative)}
.lens[data-k="performance"]{border-left:4px solid var(--l-performance)}
.lens[data-k="operations"]{border-left:4px solid var(--l-operations)}

/* Progressive disclosure. One sharp line by default; depth for the practitioner who
   wants it. A details element rather than a script, so it works before JS and keeps
   the accessibility semantics for free. */
details.more{margin-top:9px}
/* The disclosure is a real control, so it gets a real target. Underlining the text alone
   gave a 23px tap area, which fails on a phone and is the kind of thing that reads as the
   depth layer being decorative. The rule stays on the text; the padding does the work. */
details.more>summary{
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:6px;
  min-height:44px; padding:10px 2px;
  font-size:.82rem; font-weight:620; color:var(--ink-2);
}
details.more>summary>span{border-bottom:1px solid var(--line); padding-bottom:1px}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::after{content:'+'; font-weight:600; color:var(--ink-3)}
details.more[open]>summary::after{content:'\2212'}
details.more>summary:focus-visible{outline:2.5px solid var(--ink); outline-offset:3px}
details.more>div{
  margin-top:10px; color:var(--ink-2); font-size:.93rem; line-height:1.62;
  max-width:var(--measure); border-left:2px solid var(--line); padding-left:14px;
}
.conseq details.more>summary{color:#CFC9B8; border-bottom-color:rgba(244,240,228,.28)}
.conseq details.more>summary::after{color:#A9A493}
.conseq details.more>div{color:#DCD6C6; border-left-color:rgba(244,240,228,.2)}

/* ------------------------------------------------------------------ the call */
.thecall{
  background:var(--card); border:1.5px solid var(--ink); border-radius:var(--r);
  padding:26px; box-shadow:var(--shadow-lift);
}
.call-h{display:flex; align-items:center; gap:12px; margin-bottom:16px}
.call-h img{width:44px; height:44px; border-radius:10px}
.call-h b{display:block; font-size:1rem; font-weight:680; letter-spacing:-.015em}
.call-h span{display:block; font-size:.8rem; color:var(--ink-3)}
.call-rec{font-size:1.08rem; line-height:1.5; font-weight:560; letter-spacing:-.014em; margin:0 0 16px; max-width:var(--measure)}
.call-why{margin:0 0 20px; padding:0; list-style:none}
.call-why li{
  position:relative; padding-left:20px; margin-bottom:10px;
  color:var(--ink-2); font-size:.95rem; line-height:1.58; max-width:var(--measure);
}
.call-why li::before{content:''; position:absolute; left:0; top:.62em; width:9px; height:1.5px; background:var(--ink-3)}

.therule{
  margin-top:20px; padding:18px 20px; border-radius:var(--r);
  background:var(--yellow); color:var(--ink);
}
.therule .k{
  font-size:.68rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  opacity:.62; margin:0 0 5px;
}
.therule p{margin:0; font-size:1.12rem; line-height:1.36; font-weight:640; letter-spacing:-.02em}

/* ------------------------------------------------------------------ optional writing */
.reflect{
  margin-top:34px; background:var(--card); border:1px dashed var(--line);
  border-radius:var(--r); padding:20px 22px;
}
.reflect p.q{margin:0 0 4px; font-weight:640; font-size:1rem}
.reflect p.n{margin:0 0 12px; font-size:.85rem; color:var(--ink-3)}
.reflect textarea{
  width:100%; min-height:88px; resize:vertical; padding:12px 14px;
  border:1px solid var(--line); border-radius:10px; background:var(--paper);
  font:inherit; font-size:.95rem; color:inherit;
}
.reflect textarea:focus-visible{outline:2.5px solid var(--ink); outline-offset:1px}

/* ------------------------------------------------------------------ buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:46px; padding:11px 22px; border-radius:999px; border:1.5px solid var(--ink);
  background:var(--ink); color:var(--paper); font-weight:640; font-size:.95rem;
  cursor:pointer; text-decoration:none; transition:transform var(--t), box-shadow var(--t);
}
.btn:hover{transform:translateY(-1px); box-shadow:var(--shadow-lift)}
.btn:focus-visible{outline:2.5px solid var(--ink); outline-offset:3px}
.btn-g{background:transparent; color:var(--ink)}
.btn-row{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:30px}
.btn-row .note{font-size:.85rem; color:var(--ink-3)}

/* ------------------------------------------------------------------ motion
   One job only: make choice -> consequence -> reasoning legible as a sequence. */
@keyframes rise{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
.step:not([hidden]){animation:rise .34s cubic-bezier(.22,.61,.36,1) both}
.step.d1{animation-delay:.05s}
.step.d2{animation-delay:.13s}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
}

/* ------------------------------------------------------------------ 375px
   The single interaction requirement on small screens: after committing, the consequence
   must be the thing in view. Handled in JS by scrolling the consequence heading into
   position rather than by shrinking anything here. */
@media(max-width:560px){
  .wrap{padding:0 16px}
  main{padding:28px 0 72px}
  .situation{padding:20px 18px 18px; border-radius:12px}
  .opt{padding:15px 16px}
  .opt b{font-size:.98rem}
  .opt span{font-size:.89rem}
  .conseq{padding:22px 18px}
  .conseq-comm{padding:17px 16px}
  .thecall{padding:22px 18px}
  .lens{grid-template-columns:38px 1fr; gap:12px; padding:14px 15px}
  .lens img{width:38px; height:38px}
  /* Once a choice is locked, the options you passed over collapse to their titles. They stay
     visible, because seeing what you did not pick is part of the point, but four full option
     bodies pushed the next question most of a screen further down on a phone. */
  .opts.locked .opt[aria-pressed="false"] span:not(.verdict){display:none}
  .opts.locked .opt[aria-pressed="false"]{padding:12px 16px}
  .opts.locked .opt[aria-pressed="false"] b{margin-bottom:0; font-size:.93rem}
  .therule p{font-size:1.04rem}
  .btn{width:100%}
  .btn-row .note{width:100%; text-align:center}
}

/* ------------------------------------------------------------------ the verdict band
   Arrives after the consequence, never at selection. It is the senior person's reaction
   once you have both decided and been shown what the decision did. */
.verdict-band{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding:14px 18px; border-radius:var(--r); margin-bottom:14px;
  border:1px solid var(--line); background:var(--card);
}
.verdict-band .vb-k{
  font-size:.68rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3);
}
.verdict-band .vb-v{font-weight:640; font-size:1.02rem; letter-spacing:-.015em}
.verdict-band.v-strong{background:#f0f7f2; border-color:#bcd6c4}
.verdict-band.v-strong .vb-v{color:#1f5537}
.verdict-band.v-risk{background:#fdf3ef; border-color:#f0cfc4}
.verdict-band.v-cond{background:#fdf8e8; border-color:#ecdcae}

/* ------------------------------------------------------------------ the email moment */
.gate,.bridge{
  margin-top:34px; background:var(--card); border:1.5px solid var(--ink);
  border-radius:var(--r); padding:26px; box-shadow:var(--shadow-lift);
}
.gate-h{margin:0 0 6px; font-size:1.28rem; font-weight:680; letter-spacing:-.022em}
.gate-s{margin:0 0 18px; color:var(--ink-2); max-width:var(--measure); font-size:.97rem}
.gate-field{display:flex; gap:10px; flex-wrap:wrap}
.gate-field input{
  flex:1 1 15rem; min-height:46px; padding:11px 15px; font:inherit; font-size:.97rem;
  border:1.5px solid var(--line); border-radius:999px; background:var(--paper); color:inherit;
}
.gate-field input:focus-visible{outline:2.5px solid var(--ink); outline-offset:1px}
.gate-err{margin:10px 0 0; color:#9A3B1C; font-size:.88rem; min-height:0}
.gate-err:empty{display:none}
.gate-fine{margin:12px 0 0; font-size:.82rem; color:var(--ink-3); max-width:var(--measure)}
.bridge .btn-row{margin-top:18px}

/* ------------------------------------------------------------------ footer
   Carries the obligations rather than a design: a route home, the legal pages, and the
   control that lets somebody change their consent choice after the banner has gone. */
.foot{border-top:1px solid var(--line); margin-top:64px; padding:26px 0 40px}
.foot .wrap{display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; justify-content:space-between}
.foot span{font-size:.85rem; color:var(--ink-3)}
.foot nav{display:flex; flex-wrap:wrap; gap:6px 18px}
.foot a{
  font-size:.85rem; color:var(--ink-2); text-decoration:none;
  display:inline-flex; align-items:center; min-height:44px;
}
.foot a:hover{color:var(--ink); text-decoration:underline}
.foot a:focus-visible{outline:2.5px solid var(--ink); outline-offset:3px}
@media(max-width:560px){
  .foot .wrap{justify-content:flex-start}
  .foot nav{gap:2px 16px}
}