/* The Louli's Call. Validation prototype.
 *
 * Layered on top of assets/tcs.css, which already owns the palette, the nav, buttons and the
 * --l-* domain accents from roster.json. Nothing here redefines a token, so a character accent
 * always matches its character and cannot drift.
 *
 * Reading-first. One column, generous measure, no sidebars. The learner is being asked to think,
 * and every element competing for attention is a tax on that. */

/* Skip link. Off-screen until focused, which is the whole point: a keyboard user needs it and
   nobody else should see it. These two pages are the first on the site to carry one, so the style
   lives here rather than in tcs.css until the pattern is adopted more widely. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 12px 18px; background: var(--ink); color: var(--paper);
  text-decoration: none; border-radius: 0 0 var(--r) 0;
}
.skip-link:focus, .skip-link:focus-visible { left: 0; }

.c-wrap { max-width: 720px; margin: 0 auto; padding: 0 20px 96px; }

/* ---------------------------------------------------------------- situation */
.c-sit { padding: clamp(28px, 5vw, 52px) 0 8px; }
.c-sit h1 { margin: 8px 0 20px; font-size: clamp(1.7rem, 4vw, 2.5rem); }
.c-sit p { margin-bottom: 14px; font-size: 1.05rem; }
.c-sit strong { font-weight: 700; }

/* ---------------------------------------------------------------- commitment
   The visual weight here is deliberate. It is the only step that asks something of the learner,
   and the whole experiment turns on whether they do it. */
.c-commit {
  margin: 28px 0; padding: clamp(20px, 4vw, 30px);
  background: var(--yellow-soft); border: 1px solid var(--line-2); border-radius: var(--r-lg);
}
.c-commit h2 { font-size: 1.2rem; margin-bottom: 6px; }
.c-commit .lede { font-size: 1.05rem; color: var(--ink); font-weight: 600; margin-bottom: 14px; }
.c-commit textarea {
  width: 100%; padding: 13px 14px; font: inherit; font-size: 1rem; line-height: 1.5;
  border: 1px solid var(--line-2); border-radius: var(--r); background: var(--paper);
  color: var(--ink); resize: vertical; min-height: 120px;
}
.c-commit textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.c-commit textarea:disabled { opacity: .6; }
.c-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 14px; }
.c-err { color: var(--bad); font-size: .9rem; margin-top: 8px; }
.c-commit.is-done { background: var(--paper-2); }

/* Never hidden, never delayed, never de-emphasised into invisibility. Coercing the commitment
   would inflate the commit rate and destroy the only honest reading of it. */
.c-skip {
  background: none; border: 0; padding: 12px 4px; min-height: 44px;
  font: inherit; font-size: .92rem; color: var(--ink-2);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.c-skip:hover { color: var(--ink); }

/* ---------------------------------------------------------------- what you said */
.c-mine {
  margin: 0 0 30px; padding: 18px 20px;
  border-left: 3px solid var(--ink); background: var(--paper-2); border-radius: 0 var(--r) var(--r) 0;
}
.c-mine h3 { font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.c-mine-b { margin-top: 8px; white-space: pre-wrap; font-size: 1rem; }

/* ---------------------------------------------------------------- lenses */
.c-reveal > h2 { margin: 34px 0 18px; font-size: 1.45rem; }

.lens {
  margin-bottom: 14px; padding: 18px 20px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper);
  border-left: 4px solid var(--line-2);
}
.lens-strategy    { border-left-color: var(--l-strategy); }
.lens-planning    { border-left-color: var(--l-planning); }
.lens-creative    { border-left-color: var(--l-creative); }
.lens-performance { border-left-color: var(--l-performance); }
.lens-operations  { border-left-color: var(--l-operations); }

.lens-h { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.lens-h img { width: 44px; height: 44px; border-radius: 50%; background: var(--paper-2); flex: 0 0 auto; }
.lens-h b { display: block; font-size: 1rem; letter-spacing: -.01em; }
.lens-h span { display: block; font-size: .84rem; color: var(--ink-3); font-style: italic; }
.lens-b { font-size: .99rem; color: var(--ink-2); }
.lens-b strong, .lens-b em { color: var(--ink); }

/* ---------------------------------------------------------------- the call */
.c-call {
  margin: 30px 0; padding: clamp(20px, 4vw, 28px);
  background: var(--ink); color: var(--paper); border-radius: var(--r-lg);
}
.c-call .lens-h { margin-bottom: 18px; }
.c-call .lens-h b { color: var(--paper); font-size: 1.1rem; }
.c-call .lens-h span { color: rgba(251, 246, 233, .62); }
.c-call .lens-h img { background: rgba(251, 246, 233, .1); }
/* Findings: facts uncovered after the decision moment, visually distinct from opinion. */
.c-found {
  margin: 26px 0; padding: clamp(18px, 4vw, 26px);
  background: var(--yellow-soft); border-radius: var(--r-lg);
}
.c-found h2 { font-size: 1.1rem; margin-bottom: 10px; }
.c-found p { font-size: 1rem; color: var(--ink); }
.c-found p + p { margin-top: 10px; }

/* The recommendation leads the call: slightly larger, no label, the answer itself. */
.call-rec {
  font-size: clamp(1.05rem, 1.8vw, 1.2rem); line-height: 1.55;
  color: var(--paper); font-weight: 600;
  padding-bottom: 16px;
}
.call-row { padding: 14px 0; border-top: 1px solid rgba(251, 246, 233, .16); }
.call-why { margin: 0; padding-left: 20px; }
.call-why li { color: rgba(251, 246, 233, .93); font-size: 1rem; padding: 5px 0; }
.call-row h4 {
  font-size: .76rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--yellow); margin-bottom: 6px;
}
.call-row p { color: rgba(251, 246, 233, .93); font-size: 1rem; }
.call-row em { color: var(--paper); }

/* ---------------------------------------------------------------- the mistake */
.c-mistake {
  margin: 26px 0; padding: clamp(18px, 4vw, 26px);
  border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--paper-2);
}
.c-mistake h3 { font-size: 1.15rem; margin-bottom: 10px; }
.c-mistake p { margin-bottom: 12px; font-size: .99rem; color: var(--ink-2); }
.c-mistake p:last-child { margin-bottom: 0; }
.c-mistake strong, .c-mistake b { color: var(--ink); }
.c-def { border-left: 3px solid var(--ok); padding-left: 14px; }
.c-note {
  font-size: .9rem; color: var(--ink-3); border-top: 1px dashed var(--line-2);
  padding-top: 12px; margin-top: 4px;
}

/* ---------------------------------------------------------------- reflection */
.c-reflect { margin: 30px 0; padding-top: 24px; border-top: 1px solid var(--line); }
.c-reflect h3 { font-size: 1.05rem; margin-bottom: 16px; }
.c-q { margin-bottom: 18px; }
.c-q p { font-size: .97rem; margin-bottom: 8px; }
.c-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.c-opt {
  min-height: 44px; padding: 10px 16px; font: inherit; font-size: .92rem;
  border: 1px solid var(--line-2); border-radius: 100px; background: var(--paper);
  color: var(--ink-2); cursor: pointer; transition: var(--t);
}
.c-opt:hover { border-color: var(--ink-3); color: var(--ink); }
.c-opt.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---------------------------------------------------------------- next and capture */
.c-next { margin: 30px 0 20px; padding-top: 24px; border-top: 1px solid var(--line); }
.c-next h3 { font-size: 1.2rem; margin-bottom: 6px; }
.c-next .lede { margin-bottom: 16px; }
.c-next .btn { margin-bottom: 14px; }

.c-cap { display: flex; flex-direction: column; gap: 10px; max-width: 420px; }
.c-cap label { font-size: .9rem; font-weight: 600; }
.c-cap input[type=email] {
  padding: 12px 14px; font: inherit; border: 1px solid var(--line-2);
  border-radius: var(--r); background: var(--paper); color: var(--ink); min-height: 44px;
}
/* The label is the tap target: it wraps the 18px input, so it is the thing that has to
   reach 44px, and now does. */
.c-check { display: flex; align-items: center; gap: 9px; font-weight: 400; font-size: .92rem; min-height: 44px; }
.c-check input { width: 18px; height: 18px; flex: 0 0 auto; }
.c-cap-ok { color: var(--ok); font-size: .92rem; }

.fine { font-size: .86rem; color: var(--ink-3); margin-top: 10px; }

/* ---------------------------------------------------------------- shells and offer */
.c-shells { display: grid; gap: 12px; margin-top: 20px; }
.c-shell {
  padding: 16px 18px; border: 1px dashed var(--line-2);
  border-radius: var(--r); background: var(--paper-2);
}
.c-shell b { display: block; margin-bottom: 4px; }
.c-shell span { font-size: .93rem; color: var(--ink-3); }

/* The quiet way out of the shells. It was a bare text link in a .fine paragraph, which read
   as a footnote rather than a decision the reader is allowed to make. Deliberately not a
   button: price is still a hypothesis, so this must not behave like a checkout. A hairline
   above, generous target, and an arrow that moves on hover is enough to say considered. */
.c-costs {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 22px; padding: 16px 2px 0;
  border-top: 1px solid var(--line);
  font-size: .95rem; font-weight: 600; color: var(--ink-2);
  text-decoration: none; min-height: 44px;
}
.c-costs span { color: var(--ink-3); font-weight: 400; }
.c-costs .c-costs-go { display: inline-block; transition: transform .18s ease; color: var(--ink); }
.c-costs:hover { color: var(--ink); }
.c-costs:hover .c-costs-go { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .c-costs .c-costs-go { transition: none; } }
@media (max-width: 460px) {
  .c-costs { flex-direction: column; align-items: flex-start; gap: 4px; }
}

.o-price { font-size: clamp(2.4rem, 7vw, 3.4rem); font-weight: 700; letter-spacing: -.04em; }
.o-box {
  margin: 26px 0; padding: clamp(22px, 4vw, 32px);
  border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--paper-2);
}
.o-box ul { margin: 16px 0 0 18px; }
.o-box li { margin-bottom: 8px; font-size: .99rem; color: var(--ink-2); }
.o-note { font-size: .9rem; color: var(--ink-3); margin-top: 16px; }

@media (max-width: 560px) {
  .c-call { border-radius: var(--r); }
  .lens-h img { width: 38px; height: 38px; }
}

/* ------------------------------------------------------------------ offer: the anatomy
   The ChatGPT objection is answered by showing what a case holds, once. Six labelled parts,
   quiet grid, no accent colour: the demonstration does the persuading. */
.o-why{margin:34px 0 6px}
.o-why h2{font-size:1.25rem; letter-spacing:-.018em; margin:0 0 10px; max-width:36rem}
.o-why > p{color:var(--ink-2); max-width:36rem; margin:0 0 18px}
.o-anatomy{display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden}
.o-anatomy > div{background:var(--card,#FFFDF7); padding:14px 18px; display:grid; grid-template-columns:11rem 1fr; gap:14px; align-items:baseline}
.o-anatomy b{font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.o-anatomy span{color:var(--ink-2); font-size:.93rem; line-height:1.55}
.o-refund{margin:16px 0 0; font-size:.9rem; color:var(--ink-2); border-top:1px solid var(--line); padding-top:14px}
@media(max-width:560px){ .o-anatomy > div{grid-template-columns:1fr; gap:4px; padding:12px 14px} }

/* ------------------------------------------------------------------ compliance clarity */
.o-clarity{margin:30px 0 8px; border:1px solid var(--line); border-radius:14px; padding:20px 22px; background:var(--card,#FFFDF7)}
.o-clarity-line{margin:0 0 16px; font-weight:600; color:var(--ink); max-width:38rem}
.o-clarity h3{margin:0 0 6px; font-size:1rem}
.o-clarity p:last-child{margin:0; color:var(--ink-2); max-width:38rem}