/* PK2 AI Advisors · AI Tools Assessment
   Layout only. This sheet places the seven sections of the assessment page and
   the offer card in its hero. Every colour, size, and spacing value resolves
   through tokens.css, and every component on the page (buttons, labels,
   hairlines, the two grounds, the section rhythm) comes from site.css.

   Load order: tokens.css, site.css, assessment.css.

   No hex value appears in this file. No raw pixel value appears for anything
   tokens.css already carries. Two blocks at the foot of the sheet are the
   exception and are flagged where they start: the success-page block, which
   carries /success.html's own base because that page loads no site.css, and
   the motion layer, whose durations predate the duration tokens.

   Slate has one job here: it marks money and risk. Three surfaces take it, the
   offer card in the hero, the guarantee band, and the closer that asks for the
   sale, and nothing else on the page goes dark.
*/

/* Two headlines on this page carry an <em>. The markup is the emphasis, and it
   is kept, but the word renders exactly like the rest of the headline: nothing
   else on the site sets a heading in italic. */
h1 em,
h2 em {
  font-style: normal;
  font-weight: inherit;
}

/* ----------------------------------------------------- shared utilities -- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* --------------------------------------------------------------- 01 hero -- */

/* Same grammar as the home page hero: the argument on the left, the object on
   the right. The top step is .section-first, the step every page on the site
   opens on.

   The card is not a column of the grid. It is an object with a width of its
   own, capped and anchored to the container's right edge, and the argument
   takes back everything the cap gives up. --offer-cap is the one raw width on
   this page: it is the narrowest the spec sheet holds with its figure column,
   its longest name, and the pill all on their own single lines. */
.hero { padding-bottom: var(--section-bottom); }

.hero-layout {
  --offer-cap: 460px;
  grid-template-columns: 1fr min(var(--offer-cap), 100%);
  row-gap: var(--space-6);
  align-items: start;
}

.hero-copy   { grid-column: 1; }
.hero-figure { grid-column: 2; }

.hero-copy > .label + h1 { margin-top: var(--space-eyebrow); }

.hero-sub {
  margin-top: var(--space-4);
  max-width: var(--measure);
  color: var(--text);
}

/* The offer card. Everything the money buys, stated as a spec sheet: a mono
   figure column set flush right so the units stack, a body-face name beside
   it, and hairline rules holding the three parts apart. The card is the only
   place the price appears above the fold, and the pill inside it is the same
   object as every other pill on the site: intrinsic width, sitting on the left
   edge of the card's text column. */
.offer-card {
  padding: var(--space-5);
  border-radius: var(--radius-card);
}

.offer-card > .rule { margin-block: var(--space-4); }

/* One grid for the whole list, not one per row: the figure column has to be
   sized by the longest figure in the card, or "9 pages" pushes its own row out
   and the units stop stacking. */
.offer-spec {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-4);
  row-gap: var(--space-2);
  align-items: baseline;
}

.offer-spec-figure { text-align: right; }

.offer-spec-name { color: var(--muted-inv); }

.offer-card-note  { margin-top: var(--space-3); }
.offer-card-micro { margin-top: var(--space-2); }

/* The way out of the card for a reader who isn't ready to buy. It sits under
   the booking note in both places it appears, the hero card and the closer, so
   it takes one spacing rule. */
.offer-question { margin-top: var(--space-3); }

/* -------------------------------------------------------- ruled row lists -- */

/* Both list sections on the page run the same shape: a hairline-ruled row whose
   head sits beside its body on the section split from site.css. The body column
   ends at the container's right edge, so a row is never a short line with paper
   left over beside it. */
.rows { border-top: var(--hair) solid var(--hairline); }

.row {
  padding-block: var(--space-5);
  border-bottom: var(--hair) solid var(--hairline);
}

.section-head + .rows { margin-top: var(--space-heading); }

/* ------------------------------------------------------- 02 the deliverable -- */

.report-intro { margin-top: var(--space-6); }

.report-rows {
  margin-top: var(--space-eyebrow);
  list-style: none;
}

.report-rows .h3 { display: block; }

/* The nine-page list is an index, not a menu: one step tighter than the ruled
   rows elsewhere on the page, so the five items read as one block. */
.report-rows .row { padding-block: var(--space-4); }

/* The section's closing line. It sits under a full-width list rather than
   beside anything, so it takes the lead treatment: one step up in size, on the
   wider column that holds the same line length at that size. */
.report-close { margin-top: var(--space-6); }

/* ----------------------------------------------------- 03 how it works -- */

/* Three steps that happen in a fixed order, so they are set as three equal
   columns and read left to right in one glance rather than as three ruled
   bands stacked down the page. Inside a column the step stacks: the mono
   number, the title one eyebrow step under it, the description one heading
   step under that, which is the same 14/28 rhythm the split rows run
   horizontally. The top and bottom hairlines stay: the cells stretch to a
   common height, so the bottom rules line up across the three. */
.how-rows {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--gutter);
}

.how-rows .row { display: block; }

.how-rows .section-split-head + .section-split-body {
  margin-top: var(--space-heading);
}

/* The section's closing line on scope: it sits in the body column of the split
   so it lines up with the step descriptions above rather than starting at the
   container's left edge. */
.how-scope { margin-top: var(--space-6); }

/* ----------------------------------------------------- 04 the guarantee -- */

/* A slim band, not a full section. It keeps the eyebrow and drops the rest of
   the section head: the heading and the one paragraph under
   it centre on the lead column, because a left-aligned statement this short
   hangs off the edge of a 1040px container with nothing to balance it. */
.guarantee-heading {
  margin-top: var(--space-eyebrow);
  text-align: center;
}

/* The heading takes the lead column. The paragraph under it does not: at
   --size-body-lg the lead column runs 89 characters to the line, and the
   reading column is what holds it to the ~75 every other paragraph on the site
   is held to. */
.guarantee-body {
  margin-top: var(--space-heading);
  max-width: var(--measure);
  color: var(--muted-inv);
  text-align: center;
}

.guarantee-heading { max-width: var(--measure-lead); }

.guarantee-heading,
.guarantee-body { margin-inline: auto; }

/* --------------------------------------------------------- 06 ask first -- */

/* The form is the tool page's form. The geometry below is the same as the
   .tool-* block in css/tools.css, restated here because this page loads
   tokens, site, and this sheet and nothing else: ruled inputs with no fill,
   a mono label above each one, and the pill on its own row under them. */
.question-sub { color: var(--text); }

/* site.css resets the copy elements, not the form element, and some engines
   still hand a form a block-end margin of their own. */
.question-form { margin: 0; }

/* Display:none, not a visually-hidden clip: the honeypot has to be out of the
   tab order and out of the accessibility tree, not merely off screen. */
.question-hp { display: none; }

.question-fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.question-field-wide { grid-column: 1 / -1; }

.question-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.question-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--size-label);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}

.question-input {
  width: 100%;
  min-height: var(--btn-height);
  padding: var(--space-2) var(--space-3);
  border: var(--hair) solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: 1.5;
  transition: border-color var(--dur-ui) ease;
}

.question-input:hover { border-color: var(--text-muted); }
.question-input:focus { border-color: var(--ink); }

.question-textarea {
  min-height: calc(var(--btn-height) * 2);
  resize: vertical;
}

.question-hint { margin-top: var(--space-1); }

.question-run {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

/* The reassurance sits beside the button while there is room for it and drops
   under the button when there is not, which is what the wrap above does. */
.question-support { max-width: var(--measure); }

/* The confirmation. It replaces the form in the form's own column: the deeper
   cream, and one gold rule down the left edge in the weight a marker leaves. */
.question-confirm {
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--gold);
  background: var(--paper-2);
  color: var(--ink);
}

.question-confirm:focus-visible { outline-offset: var(--space-1); }

.question-confirm-after { margin-top: var(--space-4); }

/* -------------------------------------------------------------- 07 start -- */

.closer-action { margin-top: var(--space-5); }
.closer-micro  { margin-top: var(--space-3); }

/* --------------------------------------------------------------- narrow -- */

/* At 1024 the shared grid drops to eight columns and the hero stacks: the copy
   first, then the card full width directly under the sub. site.css collapses
   the split inside the ruled rows and the FAQ answers at the same width. */
@media (max-width: 1024px) {
  .hero-layout { grid-template-columns: 1fr; }

  .hero-copy,
  .hero-figure { grid-column: 1; }

  /* The three steps stack back into ruled rows in source order, and the gap
     between a step's head and its body goes back to the split's row gap. */
  .how-rows { display: block; }
  .how-rows .row { display: grid; }
  .how-rows .section-split-head + .section-split-body { margin-top: 0; }
}

@media (max-width: 640px) {
  .offer-card { padding: var(--space-5) var(--space-4); }

  /* One field to a row. Two 150px inputs side by side are not two fields, they
     are one field cut in half. */
  .question-fields {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .question-field-wide { grid-column: 1; }
}

/* ==========================================================================
   SUCCESS PAGE
   /success.html loads tokens.css, this sheet, and faq.css with no site.css
   under it, so this block carries its own base: the reset, the body type, and
   the three copy classes that page uses. .visually-hidden is above, and
   .text-link comes from faq.css. The clamp() values below are the ones that page
   shipped with and are held here rather than in tokens.css, because nothing
   else on the site is set from them.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, dl, dd, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; }
img { display: block; max-width: 100%; }
a { color: var(--ink); }

.success-page {
  --pad: clamp(24px, 8vw, 200px);
  min-height: 100vh;
  padding: clamp(48px, 7vw, 96px) var(--pad) clamp(56px, 8vw, 120px);
  background: var(--paper);
  color: var(--ink);
}

.success-inner {
  max-width: 800px;
  margin: 0 auto;
}

.success-page h1 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-top: clamp(20px, 2.5vw, 32px);
  max-width: 20ch;
  color: var(--ink);
}

.success-page .kicker {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}

.success-page .lede {
  margin-top: clamp(24px, 3vw, 40px);
  font-size: clamp(18px, 1.5vw, 19px);
  line-height: 1.6;
  max-width: 62ch;
}

.success-page .micro {
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--text-muted);
  max-width: 62ch;
}

@media (min-width: 768px) {
  .success-page .kicker { font-size: 13px; }
  .success-page .micro  { font-size: 14px; }
}

.success-page a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

/* Scoped one level deeper: the Cal.com embed script injects a stylesheet
   that zeroes the margin on its own .cal-inline-container class. */
.success-inner .cal-embed {
  margin: clamp(40px, 5vw, 72px) 0 32px;
  background: var(--sheet);
  border: var(--hair) solid var(--hairline);
  min-height: 560px;
  padding: 8px;
}

/* ==========================================================================
   MOTION LAYER
   Every hidden-until-reveal state below is scoped under `html.js`, so with
   JavaScript off both pages render exactly as they do with it. One easing
   curve governs every choreographed move.
   ========================================================================== */

:root {
  --ease-sig: cubic-bezier(.76, 0, .24, 1);
}

/* --- Lenis (smooth scroll) ------------------------------------------------ */

html.lenis,
html.lenis body { height: auto; }

.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* --- Reveal primitives ---------------------------------------------------- */

/* Blur + rise, the success page's opening.
   The transition lives on the revealed state, not the hidden one. Declared the
   other way round, the browser animates the *hide* the moment the `js` class
   lands, and the reveal that follows has nothing left to travel. */
html.js .success-inner > .kicker,
html.js .success-inner > h1,
html.js .success-inner > .lede {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(16px);
}

html.js .success-inner > .is-in {
  opacity: 1;
  filter: none;
  transform: none;
  transition:
    opacity   800ms var(--ease-sig),
    filter    800ms var(--ease-sig),
    transform 800ms var(--ease-sig);
  transition-delay: var(--reveal-delay, 0ms);
}

/* Fade + rise: the scroll-reveal pattern */
html.js .reveal-rise {
  opacity: 0;
  transform: translateY(24px);
}

html.js .reveal-rise.is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity   700ms var(--ease-sig),
    transform 700ms var(--ease-sig);
  transition-delay: var(--reveal-delay, 0ms);
}

/* Word-by-word mask reveal. JS wraps each word in .word (the mask) around an
   inner span that starts parked below the mask. The bottom padding buys room
   for descenders, and the hidden transform adds that same amount back so no
   sliver of the glyph tops shows through. */
html.js .word {
  display: inline-block;
  overflow: hidden;
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
}

html.js .word > span {
  display: inline-block;
  transform: translateY(calc(110% + 0.16em));
  transition: transform 850ms var(--ease-sig);
  transition-delay: var(--word-delay, 0ms);
}

html.js .is-in .word > span { transform: none; }

/* --- Preloader (JS-created, assessment page only) -------------------------- */

html.js .preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

html.js .preloader.is-out { pointer-events: none; }

html.js .preloader-slab {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--ink);
  will-change: transform;
  transition:
    transform     650ms var(--ease-sig),
    border-radius 650ms var(--ease-sig);
}

html.js .preloader.is-out .preloader-slab {
  transform: translateY(-100%);
  border-radius: 0 0 50% 50%;
}

html.js .preloader-mark {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-inv);
  opacity: 0;
  transition: opacity 300ms var(--ease-sig);
}

html.js .preloader.is-ready .preloader-mark { opacity: 1; }

html.js .preloader-dot {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--gold);
}

/* --- Reduced motion: no reveals, no preloader ----------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  html.js .success-inner > .kicker,
  html.js .success-inner > h1,
  html.js .success-inner > .lede,
  html.js .reveal-rise {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }

  html.js .word > span { transform: none !important; }

  html.js .preloader { display: none !important; }

  *, *::before, *::after {
    transition-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}