/* =====================================================================
   KNOW THY BUYER — LANDING SURFACE  (redesign/ktb-ui-ux-light)
   Direction: d3 Editorial Dossier skin (d3-x-gc-final-tokens.md).
   Loaded after the base system in header.php; every rule here wins.
   ---------------------------------------------------------------------
   DESIGN INTENT — read before "fixing" anything:
   Belief: founders should know their buyers as themselves. Genuine care
   for the buyer (empathy, service, helping people succeed) is the
   operating philosophy — never preachy, never cold.
   User need: a first-time visitor feels "a serious instrument made by
   people who care" within seconds.
   Aesthetic: Fortune-500 authority expressed with warmth. Enterprise
   confidence with the soul of a beautifully designed object.
   Hierarchy by space and weight only: paper ground, ink text, hairlines,
   Fraunces headlines, heritage green for CTAs and interactive elements
   ONLY. No shadows, no gradients, no gimmicks. The Kiln gradient mesh
   was rejected — it must never return.
   The slogan appears exactly ONCE on this surface, as the closing
   sign-off (.signoff-slogan). Never add it to the nav, hero, analyzer,
   or any other chrome.
   ===================================================================== */

/* ---------- layout wrapper ---------- */
.wrap{
  max-width:70rem;
  margin:0 auto;
  padding:0 1.25rem;
}

/* ---------- kickers: quiet editorial eyebrows ---------- */
.kicker{
  display:flex;
  align-items:center;
  gap:.875rem;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:1.5rem;
}
.kicker-num{
  font-family:var(--serif);
  font-weight:500;
  letter-spacing:0;
  font-size:.875rem;
  color:var(--ink-soft);
}
.kicker-rule{
  display:inline-block;
  width:3rem;
  height:1px;
  background:var(--hairline);
  flex:none;
}

/* ---------- hero: d3 dossier ---------- */
.hero{
  border-bottom:1px solid var(--hairline);
  padding:5.5rem 0 6rem;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:4.5rem;
  align-items:center;
}
.hero-copy h1{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2.5rem,5.2vw,4rem);
  line-height:1.08;
  letter-spacing:-.01em;
  margin:0 0 1.5rem;
}
.subhead{
  font-size:1.2rem;
  line-height:1.6;
  color:var(--ink-soft);
  max-width:34rem;
  margin:0 0 2.25rem;
}
.cta-row{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  margin-bottom:1.25rem;
}
.micro-note{
  font-size:.875rem;
  color:var(--ink-faint);
}

/* hero visual: the dossier mockup, pure HTML/CSS */
.hero-visual{display:flex;justify-content:center}
.dossier{position:relative;width:min(340px,100%)}
.dossier-page{background:var(--page);border:1px solid var(--hairline)}
.dossier-page-back{position:absolute;inset:0;transform:translate(10px,10px);background:var(--tint)}
.dossier-page-front{position:relative;padding:2rem 1.9rem 1.75rem}
.doc-eyebrow{font-size:.6875rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:.75rem}
.doc-title{font-family:var(--serif);font-weight:600;font-size:1.5rem;line-height:1.25;margin-bottom:.25rem}
.doc-date{font-size:.8125rem;color:var(--ink-faint);padding-bottom:1.25rem;border-bottom:1px solid var(--hairline)}
.verdict{padding:1.25rem 0;border-bottom:1px solid var(--hairline)}
.verdict-label{font-size:.6875rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:.5rem}
.verdict-line{font-family:var(--serif);font-size:1.125rem;font-weight:500;line-height:1.4;margin-bottom:.25rem}
.verdict-detail{font-size:.875rem;color:var(--ink-soft)}
.doc-sections{list-style:none;padding:.5rem 0 1rem;margin:0}
.doc-sections li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--hairline);font-size:.9375rem}
.doc-sections li:last-child{border-bottom:0}
.page-no{font-family:var(--serif);color:var(--ink-faint);font-size:.875rem}
.doc-foot{font-size:.75rem;color:var(--ink-faint);border-top:1px solid var(--hairline);padding-top:1rem}

/* ---------- proof band: honest product facts ---------- */
.proof{
  border-bottom:1px solid var(--hairline);
  padding:4.5rem 0;
}
.proof-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2rem;
  margin:0;
}
.proof-item{
  border-top:1px solid var(--hairline);
  padding-top:1.5rem;
}
.proof-item dt{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.625rem;
  line-height:1.2;
  margin-bottom:.5rem;
}
.proof-item dd{
  font-size:.9375rem;
  color:var(--ink-soft);
  margin:0;
}

/* ---------- steps: one form, one report ---------- */
.steps{
  border-bottom:1px solid var(--hairline);
  padding:4.5rem 0 5rem;
}
.section-title{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2rem,3.6vw,2.75rem);
  line-height:1.15;
  letter-spacing:-.01em;
  margin:0 0 3rem;
}
.step-list{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2.5rem;
  margin:0;
  padding:0;
}
.step{
  border-top:1px solid var(--hairline);
  padding-top:1.5rem;
}
.step-num{
  font-family:var(--serif);
  font-size:.9375rem;
  color:var(--ink-faint);
  margin-bottom:.875rem;
}
.step h3{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.375rem;
  line-height:1.3;
  margin:0 0 .75rem;
}
.step p{
  font-size:.9375rem;
  color:var(--ink-soft);
  margin:0;
}
.steps-cta{margin-top:3rem}

/* ---------- what you get: the section index as a hairline table ---------- */
.sec-index{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--hairline);
}
.sec-index li{
  display:grid;
  grid-template-columns:3.5rem 1fr;
  gap:1.25rem;
  align-items:baseline;
  padding:1.1rem 0;
  border-bottom:1px solid var(--hairline);
}
.sec-index h3{
  font-family:var(--serif);
  font-weight:600;
  font-size:1.15rem;
  margin:0 0 .25rem;
  line-height:1.35;
}
.sec-index p{
  font-size:.95rem;
  color:var(--ink-soft);
  margin:0;
}
.sec-index .always{
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--green);
  margin-left:.6rem;
}

/* ---------- samples: light panel, honest button states ---------- */
.samples-panel{
  border:1px solid var(--hairline);
  background:var(--page);
  padding:2.5rem;
}
.samples-panel .section-title{margin-bottom:.75rem}
.samples-panel > p{
  font-size:1.05rem;
  color:var(--ink-soft);
  margin:0 0 1.75rem;
  max-width:38rem;
}
#sample-buttons{display:flex;flex-wrap:wrap;gap:.75rem}
#sample-preview{
  margin-top:1.25rem;
  font-size:.95rem;
  font-style:italic;
  color:var(--ink-faint);
  min-height:2rem;
}

/* ---------- analyzer: the instrument ----------
   Single-shot input — all questions up front, one submit.
   PHP flow logic in this form must stay byte-identical (owner rule);
   only its chrome is restyled. */
.analyzer{
  border-top:1px solid var(--hairline);
  padding:4.5rem 0 5rem;
}
.analyzer-form{
  background:var(--page);
  border:1px solid var(--hairline);
  padding:2.5rem;
  max-width:56rem;
}
.analyzer-form legend,
.analyzer-form .field-label{
  font-family:var(--serif);
  font-weight:600;
  font-size:1.25rem;
  letter-spacing:-.01em;
}
.analyzer-form .hint{
  font-size:.9rem;
  color:var(--ink-faint);
  margin-top:.5rem;
}
.analyzer-form .ctx-hint{
  font-size:.85rem;
  font-weight:400;
  color:var(--ink-faint);
}
.analyzer-submit{
  width:100%;
  font-size:1.1rem;
  padding:1.15rem 2rem;
}
.analyzer-note{
  text-align:center;
  font-size:.875rem;
  color:var(--ink-faint);
  margin-top:1rem;
}

/* ---------- final sign-off ----------
   The slogan lives here exactly once on this surface — quiet,
   centered, unbadged. A sign-off, not a headline. */
.signoff{
  border-top:1px solid var(--hairline);
  padding:4rem 0 5rem;
  text-align:center;
}
.signoff-cta{margin-bottom:3rem}
.signoff-slogan{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.125rem;
  letter-spacing:.02em;
  color:var(--ink-faint);
  margin:0 auto;
  max-width:36rem;
}

/* ---------- anchors clear the sticky nav ---------- */
#how,#sections,#samples,#analyzer{scroll-margin-top:92px}

/* ---------- keyboard: visible focus everywhere ---------- */
.btn:focus-visible,
.sample-btn:focus-visible,
a:focus-visible,
summary:focus-visible,
.secpick:has(input:focus-visible){
  outline:3px solid var(--green);
  outline-offset:3px;
}
input:focus-visible:not(.field),
textarea:focus-visible:not(.field){
  outline:3px solid var(--green);
  outline-offset:2px;
}
/* .field already gets a green ring from the base system; no double outline. */
.field:focus-visible{outline:none}

/* ---------- motion discipline ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn,.sec-card,.secpick,.sample-btn,
  details.ctx summary .plus{
    transition:none;
  }
}

/* ---------- responsive: 390px is the primary layout ---------- */
@media (max-width:760px){
  .hero{padding:3.5rem 0 4rem}
  .hero-grid{grid-template-columns:1fr;gap:3rem}
  .subhead{font-size:1.0625rem}
  .cta-row .btn{flex:1 1 100%;text-align:center;padding:1.05rem 1.5rem}
  .proof-grid{grid-template-columns:1fr;gap:1.5rem}
  .step-list{grid-template-columns:1fr;gap:2rem}
  .steps-cta .btn{display:block;text-align:center}
  .samples-panel{padding:1.75rem 1.25rem}
  .analyzer-form{padding:1.75rem 1.25rem}
  .sec-index li{grid-template-columns:2.5rem 1fr;gap:.9rem}
}