/* The AI Skills page (/ai): the check is the first screen, one question at a time (Aylam, October 15 and 16). Loads after /src/door/door.css, which holds the
   door pages' header, links, statistics, the tension rows, the form fields and options, the waitlist card, "Who you'd work with",
   the questions and the close slab. Tokens in /src/site/tokens.css. */

/* ------------------------------------------------------------------ first screen: the question, a quiet call link, then the check */
/* the hero reserves a band at its bottom for the L7 plate, "the ground under the check", so the card never covers it */
.aif { position: relative; --plate-h: clamp(260px, 38vh, 380px); padding: 0 var(--pad-x) calc(var(--plate-h) + 24px); }
/* on arrival the first screen holds only the headline, the lede and the first question; the worry section starts below the fold
   and the hero grows as the card unfolds (finish review, October 16; the header is 92px tall, 76px on phones) */
html:not(.no-js) .aif { min-height: calc(100svh - 92px); }
.aif__head, .lc { position: relative; z-index: 1; }

/* the L7 plate (Brand Design Director's brief, October 16; amended October 26): a full-bleed plaster band at the hero's bottom
   with this page's own crack, entering from the right. Bare on arrival; the visitor's answer gilds it (level-check.js adds
   is-answered), and it stays gold. Without JavaScript it is gold. The masks fade it into the page on every edge */
.aif__plate { position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: var(--plate-h); pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 24%, #000 76%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 24%, #000 76%, transparent 100%);
  mask-composite: intersect; }
.aif__plate picture { position: absolute; inset: 0; }
.aif__plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.aif__plate .is-gold { opacity: 0; transition: opacity 600ms ease; }
.aif.is-answered .aif__plate .is-gold, html.no-js .aif__plate .is-gold { opacity: 1; }
.aif__head { padding: clamp(24px, 4vh, 56px) 0 clamp(20px, 3vh, 34px); }
.aif__title { font-weight: 500; font-size: clamp(42px, 3.8vw, 56px); line-height: 1.05; letter-spacing: -.028em; text-wrap: balance; }
.aif__lede { margin-top: 18px; font-size: 20px; line-height: 1.5; color: var(--charcoal-soft); max-width: 48em; text-wrap: pretty; }
.aif__call { margin-top: 14px; font-size: 16.5px; }

/* ------------------------------------------------------------------ the check: one row per question, the question left (4) and its
   answers right (8), each row unfolding after the answer before it (Aylam, October 16) */
.lc { scroll-margin-top: 24px; background: #FBF8F1; border: 1px solid rgba(17,20,17,.09); border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 18px 40px rgba(37,42,38,.13), 0 2px 6px rgba(37,42,38,.08); }
.lc__step { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 14px 4vw; align-items: start;
  padding: clamp(22px, 2vw, 28px) clamp(24px, 2.8vw, 40px); }
.lc__fold .lc__step { border-top: 1px solid rgba(17,20,17,.08); }
.lc__ask { margin: 0; padding-top: 6px; font-size: clamp(20px, 1.6vw, 23px); font-weight: 500; line-height: 1.3; letter-spacing: -.014em; color: var(--ink); text-wrap: balance; }
.lc__ans { min-width: 0; }

/* a row unfolds: its height opens from zero (grid rows 0fr to 1fr) and its content rises into place */
.lc__fold { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 280ms var(--ease-out); }
.lc__fold[hidden] { display: none; }
.lc__fold.is-closed { grid-template-rows: 0fr; }
.lc__in { min-height: 0; overflow: hidden; }
.lc__fold:not(.is-closed):not(.is-opening) .lc__in { overflow: visible; }
.lc__fold.is-opening .lc__step { animation: step-in 300ms var(--ease-out) both; }
@keyframes step-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* task chips: answers, not picks, so a chosen chip fills Ink with no gold (The Picked Not Answered Rule) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; -webkit-tap-highlight-color: transparent; }
.chip__in { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip__t { display: block; padding: 10px 15px; font-size: 16px; line-height: 1.3; color: var(--graphite); background: rgba(255,255,255,.55);
  border: 1px solid rgba(17,20,17,.45); border-radius: 10px; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; }
.chip__in:checked + .chip__t { color: var(--white); background: var(--ink); border-color: var(--ink); }
.chip__in:focus-visible + .chip__t { outline: 2px solid var(--slate); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .chip:hover .chip__in:not(:checked) + .chip__t { color: var(--ink); border-color: rgba(17,20,17,.8); } }
.chip:active .chip__t { transform: translateY(1px); }

/* "How do you handle it today?": three lines written for the picked task; the picked line is the answer and gets the tick seam,
   as on /leadership: gold marks what the visitor picked */
.todays { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(17,20,17,.08); }
.todays li { border-bottom: 1px solid rgba(17,20,17,.08); }
/* inside the card the rows' dividers already frame the list, so no second hairline above or below it (Brand Design Director M3) */
.lc .todays { border-top: 0; }
.lc .todays li:last-child { border-bottom: 0; }
.today { --dot: 20px; position: relative; isolation: isolate; display: flex; align-items: flex-start; gap: 14px; margin-left: -18px; padding: 13px 12px 13px 18px;
  font-size: 17.5px; line-height: 1.4; color: var(--graphite); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color 160ms ease; }
.today::after { content: ""; position: absolute; z-index: -1; inset: 3px 0 3px 8px; border-radius: 10px; transition: background-color 160ms ease; }
.today__in { position: absolute; z-index: 1; left: 18px; top: calc(13px + (1lh - var(--dot)) / 2); width: var(--dot); height: var(--dot); margin: 0; opacity: 0; cursor: pointer; }
.today__dot { flex: none; position: relative; width: var(--dot); height: var(--dot); margin-top: calc((1lh - var(--dot)) / 2); border-radius: 50%;
  border: 1.5px solid rgba(17,20,17,.55); background: rgba(255,255,255,.7); box-shadow: inset 0 1px 2px rgba(17,20,17,.07); transition: border-color 160ms ease; }
.today__dot::after { content: ""; position: absolute; inset: 3.5px; border-radius: 50%; background: var(--ink); transform: scale(0); transition: transform 160ms var(--ease-out); }
.today__t { text-wrap: pretty; }
.today::before { content: ""; position: absolute; left: 0; top: calc(13px + (1lh - var(--dot)) / 2 + 1px); width: 3px; height: calc(var(--dot) - 2px);
  border-radius: 2px; background: var(--gold); transform: scaleY(0); transition: transform 240ms var(--ease-out); }
.today:has(.today__in:checked) { color: var(--ink); font-weight: 500; }
.today:has(.today__in:checked)::before { transform: scaleY(1); }
.today__in:checked + .today__dot { border-color: var(--ink); }
.today__in:checked + .today__dot::after { transform: scale(1); }
.today__in:focus-visible + .today__dot { outline: 2px solid var(--slate); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .today:hover { color: var(--ink); }
  .today:hover::after { background: rgba(23,48,56,.05); }
  .today:hover .today__dot { border-color: rgba(17,20,17,.8); }
}
.today:active::after { background: rgba(23,48,56,.08); }

/* the result: the small ladder with the flat gold seam under the visitor's level (the answer owns the gold), their level and its
   promise on the left; their task at that level and the one gold action, the sign-up that books the call, on the right */
.lc__step--res { padding-top: clamp(24px, 2.2vw, 32px); padding-bottom: clamp(26px, 2.4vw, 34px); }
.lad { position: relative; display: flex; align-items: center; gap: 12px; width: max-content; list-style: none; margin: 0; padding: 0 0 10px; cursor: default; }
.lad__i { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; line-height: 1.2; color: #6B706B; transition: color 220ms ease; }
/* the steps sit on one track at the seam's line, the visitor's step in gold (Brand Design Director M4) */
.lad__i + .lad__i::before { content: ""; align-self: flex-end; width: 24px; height: 1px; transform: translateY(10px); background: rgba(17,20,17,.18); }
.lad__i.is-past { color: #555A55; }
.lad__i.is-lit { color: var(--ink); }
.lad::after { content: ""; position: absolute; left: var(--seam-x, 0); bottom: -2px; width: var(--seam-w, 0); height: 3px; border-radius: 2px; background: var(--gold); opacity: 0;
  transition: left 320ms var(--ease-out), width 320ms var(--ease-out), opacity 200ms ease; }
.lad.is-set::after { opacity: 1; }
.lad.is-placing::after { transition: opacity 200ms ease; }
.lc__start { margin-top: 20px; font-size: clamp(28px, 2.4vw, 34px); font-weight: 500; line-height: 1.12; letter-spacing: -.022em; color: var(--ink); }
.lc__promise { margin-top: 8px; font-size: 18px; line-height: 1.45; color: var(--charcoal-soft); text-wrap: pretty; }
.lc__ex-l { font-weight: 500; color: var(--slate); }
.lc__ex { padding-top: 2px; font-size: clamp(19px, 1.5vw, 21px); line-height: 1.45; color: var(--ink); max-width: 34em; text-wrap: pretty; }
.lc__btn { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 22px; font-size: 16px; }
.lc__line { margin-top: 14px; font-size: 15.5px; line-height: 1.5; color: var(--charcoal-soft); max-width: 42em; text-wrap: pretty; }
.lc__go.is-in > * { animation: row-in 260ms var(--ease-out) both; }
@keyframes row-in { from { opacity: .35; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* without JavaScript: the three levels as a plain list, each with its "Start here if" line and its sign-up link to the call */
.lplain { list-style: none; margin: 0; padding: clamp(24px, 2.6vw, 38px); }
.lplain__i + .lplain__i { margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(17,20,17,.08); }
.lplain__h { font-size: 21px; font-weight: 500; letter-spacing: -.012em; line-height: 1.3; }
.lplain__n { margin-right: 10px; color: var(--slate); }
.lplain__if { margin-top: 8px; font-size: 17px; line-height: 1.45; color: var(--ink); }
.lplain__if b { font-weight: 500; }
.lplain__t { margin-top: 6px; font-size: 16.5px; line-height: 1.5; color: var(--graphite); }
.lplain__more { margin-top: 10px; font-size: 16.5px; }
html:not(.no-js) .lplain { display: none; }
html.no-js .lc__step, html.no-js .lc__fold { display: none; }
/* without JavaScript there are no questions to answer: drop the line that promises them, and the form's second "email me"
   (Brand Design Director M4) */
html.no-js .aif__lede-check { display: none; }

/* ------------------------------------------------------------------ the worry section and "What you'll learn" come in only after an
   answer (Aylam, October 16: "should only appear after selections are made at the top"); without JavaScript both show in full.
   The worry section speaks to the visitor's level, with a short cross-fade when the answer changes */
html:not(.no-js) .door--ai .tension:not(.is-on), html:not(.no-js) .ladder:not(.is-on) { display: none; }
.door--ai [data-t-title], .door--ai [data-t-body] { transition: opacity 180ms ease; }
.door--ai .tension.is-out [data-t-title], .door--ai .tension.is-out [data-t-body] { opacity: 0; }

/* ------------------------------------------------------------------ the worry in their words, then the statistic */
.door--ai .tension { padding: 12vh 0 11vh; border-top: 0; }
.door--ai .tension__h { color: var(--ink); }
/* no lead line above the worries on this page, so no indent; the list's last hairline closes it, so the statistic has none of its own
   (Brand Design Director M3) */
.door--ai .tension__qs { margin-top: 0; padding-left: 0; }
.stat--tension { margin-top: 26px; font-size: 17px; }

/* ------------------------------------------------------------------ the three levels in plain terms */
.ladder { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 30px 6vw; align-items: start;
  margin: 0 var(--pad-x); padding: 10vh 0 8vh; border-top: 1px solid rgba(17,20,17,.1); }
.ladder__side { position: sticky; top: 32px; }
.ladder__h { font-size: clamp(30px, 2.6vw, 40px); font-weight: 500; letter-spacing: -.022em; line-height: 1.12; text-wrap: balance; }
.ladder__format { margin-top: 16px; font-size: 18px; line-height: 1.5; color: var(--graphite); max-width: 22em; text-wrap: pretty; }
html:not(.no-js) .ladder:not(.is-all) .lvl:not(.is-yours) { display: none; }
html:not(.no-js) .ladder:not(.is-all) .lvl.is-yours { border-top: 0; padding-top: 4px; }
/* the toggle opens and closes the other levels in place, under the format line, with the questions' chevron (Brand Design
   Director, round two M1) */
.ladder__all { margin-top: 14px; font-size: 17px; }
html.no-js .ladder__all { display: none; }
.ladder__toggle { display: inline-flex; align-items: center; gap: 8px; padding: 0; font: inherit; font-weight: 500; color: var(--ink); background: none; border: 0; cursor: pointer;
  text-decoration: underline; text-decoration-color: rgba(17,20,17,.32); text-decoration-thickness: 1px; text-underline-offset: .3em; }
.ladder__toggle svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--slate); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 220ms var(--ease-out); }
.ladder__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) { .ladder__toggle:hover { text-decoration-color: var(--ink); } }
.lvl { padding: 30px 0 34px; border-top: 1px solid rgba(17,20,17,.1); scroll-margin-top: 24px; }
.lvl:first-child { border-top: 0; padding-top: 4px; }
.lvl__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; }
.lvl__name { font-size: clamp(26px, 2.1vw, 32px); font-weight: 500; letter-spacing: -.02em; line-height: 1.12; }
.lvl__promise { text-wrap: balance; margin-top: 8px; font-size: clamp(19px, 1.5vw, 21px); line-height: 1.4; color: var(--ink); }
.lvl__for { margin-top: 10px; font-size: 17.5px; line-height: 1.5; color: var(--charcoal-soft); max-width: 36em; text-wrap: pretty; }
.lvl__do { margin-top: 20px; font-size: 16px; font-weight: 500; color: var(--ink); }
.lvl__list { list-style: none; margin: 6px 0 0; padding: 0; max-width: 38em; }
.lvl__list li { position: relative; padding: 8px 0 8px 20px; font-size: 17.5px; line-height: 1.45; color: var(--graphite); text-wrap: pretty; }
.lvl__list li::before { content: ""; position: absolute; left: 0; top: calc(8px + .725em - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--slate); }
.lvl__line { margin-top: 12px; font-size: 17.5px; line-height: 1.5; color: var(--graphite); max-width: 36em; text-wrap: pretty; }
/* where 201 and 301 come from: his own workflows and his own second brain (Aylam's records) */
.lvl__from { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(17,20,17,.08); font-size: 16.5px; line-height: 1.5; color: var(--charcoal-soft); max-width: 38em; text-wrap: pretty; }
.lvl__more { margin-top: 18px; font-size: 17px; }
/* after an answer, the visitor's level is marked here too: the tick seam beside its name and "Your level" */
.lvl__head { position: relative; }
.lvl.is-yours .lvl__head::before { content: ""; position: absolute; left: -18px; top: 7px; width: 3px; height: 26px; border-radius: 2px; background: var(--gold); }
.lvl__yours { font-size: 15px; font-weight: 500; color: var(--ink); }
.lvl__yours[hidden] { display: none; }

/* ------------------------------------------------------------------ under the levels: one alternative, one-on-one AI coaching, and one
   line each for the Intensive and the Learning Circle (Aylam, October 16: "One path") */
.alt { margin-top: 26px; padding-top: 28px; border-top: 1px solid rgba(17,20,17,.1); }
.alt__h { font-size: 22px; font-weight: 500; letter-spacing: -.012em; line-height: 1.25; color: var(--ink); }
.alt__line { margin-top: 8px; font-size: 17.5px; line-height: 1.5; color: var(--graphite); max-width: 34em; text-wrap: pretty; }
.alt__act { margin-top: 12px; font-size: 17px; }
.alt__more { margin-top: 22px; font-size: 17px; line-height: 1.5; color: var(--graphite); max-width: 36em; text-wrap: pretty; }
.alt__coach + .alt__more { margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(17,20,17,.08); }
.alt__more b { font-weight: 500; color: var(--ink); }

/* the close: one line for people not ready to pick a time, in place of the form (Aylam, October 16) */
.dclose__mail { grid-column: 1; margin-top: -12px; font-size: 15.5px; line-height: 1.5; color: var(--warm-gray); }
.dclose__mail a { color: var(--white); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(247,243,234,.45); text-underline-offset: .3em; }
@media (hover: hover) and (pointer: fine) { .dclose__mail a:hover { text-decoration-color: var(--white); } }

.door--ai .who { padding-top: 10vh; }
.qa__links .tlink--arrow { margin-left: 0; }
.qa__links { display: flex; flex-wrap: wrap; gap: 10px 24px; padding: 0 0 24px; font-size: 17px; }
.door--ai .dclose { padding-top: 0; }

/* ------------------------------------------------------------------ tablet and phone */
@media (min-width: 981px) { .door--ai .who { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
@media (max-width: 980px) {
  /* stacked: each question over its answers */
  .lc__step { grid-template-columns: 1fr; }
  .lc__ask { padding-top: 0; }
  .ladder { grid-template-columns: 1fr; }
  .dclose__mail { margin-top: -6px; }
  .ladder__side { position: static; }
}
@media (max-width: 700px) {
  .aif { --plate-h: 200px; }
  html:not(.no-js) .aif { min-height: calc(100svh - 76px); }
  .lc { scroll-margin-top: 24px; }
  /* the picked line's seam clear of the card's edge (Brand Design Director M2; the /leadership fix of October 15) */
  .today { margin-left: -10px; padding-left: 10px; }
  .today__in { left: 10px; }
  .today::after { inset: 3px 0 3px 4px; }
  .door--ai .tension { padding: 9vh 0; }
  .door--ai .tension__qs { padding-left: 0; }
  /* the tick seam beside "Your level" clear of the screen edge (Brand Design Director M2) */
  .lvl.is-yours .lvl__head::before { left: -12px; }
  .aif__head { padding-top: 30px; }
  .aif__title { font-size: clamp(34px, 10.2vw, 42px); }
  .aif__lede { font-size: 18px; margin-top: 14px; }
  .lc__step { padding: 22px 20px 24px; }
  .lc__ask { font-size: 20px; }
  .today { font-size: 16.5px; }
  .lc__btn { gap: 14px; }
  .lc__btn .btn--gold { width: 100%; justify-content: center; font-size: 17px; padding: 18px 24px; }
  .lc__start { font-size: 28px; }
  .lvl__list li, .lvl__for, .lvl__from, .alt__line, .alt__more { font-size: 16.5px; }
}
/* short and narrow phones: the first screen a step tighter so the first question and its chips start on it (the /leadership
   short-phone rule) */
@media (max-width: 360px), (max-width: 700px) and (max-height: 700px) {
  .aif__head { padding-top: 20px; padding-bottom: 20px; }
  .aif__title { font-size: 30px; }
  .aif__lede { font-size: 16px; line-height: 1.45; margin-top: 10px; }
  .aif__call { margin-top: 10px; font-size: 15.5px; }
}
@media (max-width: 360px) {
  .aif { --plate-h: 176px; }
  .chip__t { padding: 9px 12px; font-size: 15px; }
  .lc__step { padding: 20px 16px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .lad::after, .lad__i, .today::before, .today__dot::after, .chip__t, .lc__fold, .aif__plate .is-gold { transition: none; }
  .lc__fold.is-opening .lc__step, .lc__go.is-in > * { animation: none; }
  .door--ai [data-t-title], .door--ai [data-t-body] { transition: none; }
  .ladder__toggle svg { transition: none; }
  .chip:active .chip__t { transform: none; }
}