/* =========================================================================
   YER house-style override — loads AFTER styles.css and only re-skins
   colour, type and surface. Structure/layout rules in styles.css are
   untouched, so removing the <link> restores the previous look exactly.

   v2 — the identity-kit typography, in the Studio YER layout language.

     type    General Sans (300/400/500/600) + Utopia for display and
             big numbers, exactly as the A4 identity kit specifies
     paper   #F8F8F6 page, #FFFFFF cards, 1px #DDDBD7 hairline, no shadow
     ink     #19224C navy headings, #6B6965 warm grey body, #AEACA8 labels
     accent  #F1C319 as a solid block — pill buttons, tiles, highlights
     frame   white top bar with a hairline, full-bleed navy footer

   The paper, hairlines, pills and navy footer are measured off
   studioyer.nl. The typefaces are the kit's, not the studio's.

   Kept from v1: the text-safe amber/steel split (a fill colour and a text
   colour are not the same colour) and the end-of-flow gate alignment fix.
   ========================================================================= */

/* ---------- type -------------------------------------------------------- */
@font-face { font-family:"General Sans"; font-weight:300; font-display:swap;
             src:url("../fonts/GeneralSans-Light.ttf") format("truetype"); }
@font-face { font-family:"General Sans"; font-weight:400; font-display:swap;
             src:url("../fonts/GeneralSans-Regular.ttf") format("truetype"); }
@font-face { font-family:"General Sans"; font-weight:500; font-display:swap;
             src:url("../fonts/GeneralSans-Medium.ttf") format("truetype"); }
/* Semibold is the heaviest cut in the kit. Claiming 600–900 stops the
   browser faking a bold anywhere styles.css asks for 700 or 800. */
@font-face { font-family:"General Sans"; font-weight:600 900; font-display:swap;
             src:url("../fonts/GeneralSans-Semibold.ttf") format("truetype"); }
@font-face { font-family:"Utopia Display"; font-weight:400; font-display:swap;
             src:url("../fonts/UtopiaRegular.otf") format("opentype"); }
@font-face { font-family:"Utopia Numbers"; font-weight:400 700; font-display:swap;
             src:url("../fonts/fonnts_com-Utopia-Std-Semibold-.otf") format("opentype"); }

/* ---------- tokens ------------------------------------------------------ */
:root {
  /* --navy is already the exact YER logo navy — untouched. */
  --amber:        #F1C319;   /* the correct YER yellow (was #EEAB00) */
  --amber-dk:     #8A6A00;   /* readable amber for TEXT on white/light */
  --amber-hover:  #D9AF00;   /* dark fill for button hover states */
  --steel:        #00AEEF;   /* YER light blue — chart series and fills */
  --steel-dk:     #0086B3;   /* readable steel for TEXT on white */

  /* Warm neutrals, straight off studioyer.nl. The app's greys were
     blue-tinted; mixing the two families is what reads as off-brand. */
  --ink:          #19224C;   /* navy doubles as body ink, as on the studio */
  --mute:         #6B6965;
  --bg:           #F8F8F6;
  --card:         #FFFFFF;
  --line:         #DDDBD7;
  --line-2:       #EEECEA;
  --faint:        #AEACA8;   /* eyebrows, counters, quiet labels */

  --shadow:       none;      /* the studio is flat — hairlines hold the edge */
  --shadow-modal: 0 24px 64px -20px rgba(25,34,76,.35);
  --radius:       12px;
  --radius-sm:    8px;
  --radius-xs:    6px;

  --font-sans:    "General Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Utopia Display", "General Sans", Georgia, serif;
  --font-num:     "Utopia Numbers", "Utopia Display", Georgia, serif;
}

/* ---------- base -------------------------------------------------------- */
body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--mute);
}
h1, h2, h3 { color: var(--navy); letter-spacing: -.005em; }

/* Hero display headings — Utopia Regular, per the brand rule (nowhere else). */
.intro-title, .op-h1, .pv-modal h2, .review-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
}
/* Big KPI / score numbers — Utopia Semibold, per the brand rule. */
.overall-num, .lr-num, .roi-val, .op-overall-num,
.op-gap-now b, .op-gap-goal b {
  font-family: var(--font-num);
  font-weight: 400;
  letter-spacing: -.01em;
}

/* Eyebrows — the small kicker that sits above a heading. Caps, tracked wide. */
.intro-eyebrow, .map-eyebrow, .op-eyebrow, .align-eyebrow, .gate-eyebrow {
  color: var(--navy);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
/* ...except the front-door eyebrow, which keeps the studio's grey. */
.intro-eyebrow { color: var(--faint); }

/* Block headings. Sentence case: these head a whole paragraph, so they read
   as headings rather than as labels. Tracking goes back to normal — the wide
   letter-spacing above is a small-caps device and looks broken on lowercase. */
.intro-item h2, .intro-map h2, .intro-data h2, .pk-h, .rv-block-h, .op-h2 {
  color: var(--navy);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.uc-imp-name.primary::after, .pk-uc { color: var(--amber-dk); }

/* ---------- top bar ----------------------------------------------------- */
/* White, not navy: the studio leads with paper and saves navy for the foot. */
header.top {
  background: #fff;
  color: var(--navy);
  border-bottom: 1px solid var(--line-2);
}
.top-inner { padding: 14px 24px; }
/* styles.css flips the wordmark white for the navy bar; on paper the logo
   goes back to its own colours. */
header.top .top-inner .logo path[fill="#19224C"] { fill: #19224C; }
.top-title { border-left: 1px solid var(--line); color: var(--mute); opacity: 1; font-size: 13px; }
.top-title strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  color: var(--navy);
}

.top-inner .top-link {
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 12.5px;
  opacity: 1;
  transition: background .15s, border-color .15s;
}
.top-inner .top-link:hover { background: var(--bg); border-color: #C9C6C1; }
.top-inner .top-link:disabled { color: var(--faint); border-color: var(--line-2); opacity: 1; cursor: default; }

/* ---------- buttons ----------------------------------------------------- */
.btn {
  background: var(--amber);
  color: var(--navy);
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  box-shadow: none;
}
.btn:hover { background: var(--amber-hover); box-shadow: none; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(25,34,76,.16); }
.btn.ghost { background: #fff; border: 1px solid var(--line); font-weight: 600; }
.btn.ghost:hover { background: var(--bg); border-color: #C9C6C1; }

/* ---------- surfaces ---------------------------------------------------- */
.card, .intro-card, .chat-col, .map-card, .pv-map, .gate {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
}

/* ---------- front door -------------------------------------------------- */
.intro { padding: 48px 24px 60px; }
/* The card is the grid. Everything spans both columns except the two closing
   blocks, which sit side by side in the same rhythm as the four above them.
   Before this they ran the full width with an inherited 78ch cap on their
   paragraphs, so the text stopped at a measure that lined up with nothing. */
.intro-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 48px;
  padding: 44px 44px 40px;
}
.intro-card > * { grid-column: 1 / -1; }
.intro-eyebrow { font-size: 12px; margin-bottom: 16px; }
.intro-title {
  font-size: 44px;
  line-height: 1.14;
  color: var(--navy);
  margin: 0 0 18px;
  max-width: 24ch;
}
/* The studio's signature: a solid yellow block behind part of the heading.
   Keep the span short — "with AI?" — so the block never wraps onto two
   lines, which is what makes it read as one deliberate mark rather than
   two stray rectangles. Needs a <span class="hl"> in conversation.html;
   without it this rule simply never matches. */
.intro-title .hl {
  display: inline-block;
  background: var(--amber);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  /* Its own line-height, tighter than the heading's: as a plain inline the
     block is as tall as the font's full em box and the descenders of the
     line above land on it. */
  line-height: .88;
  /* Asymmetric on purpose: heavier on top, lighter underneath, which lifts
     the block off the ascenders without changing its height. */
  padding: .09em .16em .06em;
}
.intro-lede { font-size: 17px; line-height: 1.7; color: var(--mute); max-width: 62ch; margin-bottom: 32px; }

.intro-grid {
  gap: 28px 48px;
  padding: 30px 0;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}
.intro-item h2, .intro-map h2, .intro-data h2 { font-size: 14px; margin-bottom: 8px; }
.intro-item p { font-size: 15px; line-height: 1.65; color: var(--mute); }
.intro-map p, .intro-data p { font-size: 15px; line-height: 1.7; }
.intro-map b, .intro-data b { font-weight: 600; color: var(--navy); }

/* Both closing blocks sit on the same surface. */
.intro-map, .intro-data {
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 22px 24px;
}
.intro-map p:last-child, .intro-data p:last-child { margin-bottom: 0; }

/* They share the columns of the grid above. Their paragraphs carried an
   inherited 78ch cap, which is what made them stop at a width that lined
   up with nothing. */
.intro-map, .intro-data { margin-top: 28px; }
.intro-map  { grid-column: 1; }
.intro-data { grid-column: 2; }
.intro-map p, .intro-data p { max-width: none; }
/* Keeps the closing word off a line of its own. */
.intro-map p, .intro-data p { text-wrap: pretty; }

/* The closing row: the call to action on the left, the reassurance line
   right-aligned on the text edge, bottoms level. */
.intro-start { font-size: 15px; padding: 14px 28px; margin-top: 32px;
               grid-column: 1; justify-self: start; align-self: end; }
.intro-sub { color: var(--mute); font-size: 13px;
             grid-column: 2; justify-self: end; align-self: end; margin-top: 32px; }
.intro-link { color: var(--navy); font-weight: 600; text-underline-offset: 3px; }

/* The admission note under the email field is a single sentence; without
   this it inherits a measure that breaks it over two lines. */
#door-hint { max-width: none; }

/* ---------- conversation ------------------------------------------------ */
.ai-notice { background: #FDF6DC; border-bottom: 1px solid #EFE3AF; color: #6B5A15; }
.ai-notice .ai-dot { border-radius: var(--radius-xs); font-weight: 600; }

.stage-rail { background: var(--bg); border-bottom: 1px solid var(--line-2); padding: 12px 18px; }
.stage-rail .st { background: #fff; border: 1px solid var(--line-2); color: var(--mute); font-weight: 500; font-size: 11.5px; }
.stage-rail .st.active { background: var(--navy); border-color: var(--navy); color: #fff; }
.stage-rail .st.done { background: #FDF6DC; border-color: #EFE3AF; color: var(--navy); }
.stage-rail .st.done::before { color: var(--amber-dk); }

.chat-log { padding: 22px 20px; gap: 16px; }
.msg-who { font-size: 10px; font-weight: 600; letter-spacing: .12em; color: var(--faint); }
.msg-body { font-size: 15px; line-height: 1.6; border-radius: 12px; padding: 12px 16px; }
.msg-assistant .msg-body {
  background: var(--bg);
  border: 1px solid var(--line-2);
  color: var(--navy);
  border-bottom-left-radius: 4px;
}
.msg-user .msg-body { background: var(--navy); color: #fff; border-bottom-right-radius: 4px; }
.msg.streaming.has-text .msg-body::after { color: var(--amber-dk); }

.chat-input { padding: 14px 16px; border-top: 1px solid var(--line-2); }
.chat-input textarea { border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 15px; }
.chat-input textarea:focus { border-color: var(--navy-2); box-shadow: 0 0 0 3px rgba(25,34,76,.10); }
.chat-hint { color: var(--mute); }

.chip {
  font-size: 13.5px;
  font-weight: 500;
  padding: 8px 15px;
  border: 1px solid var(--line);
  color: var(--navy);
  background: #fff;
}
.chip:hover { background: var(--bg); border-color: #C9C6C1; }
.chips .chip.chip-picked { background: var(--navy); border-color: var(--navy); color: #fff; }
.chips-scale .chip { background: var(--bg); border-color: var(--line-2); }
.chips-scale .chip:hover { background: #F1EFEA; }
.chips-hint { color: var(--faint); }

/* ---------- readiness panel --------------------------------------------- */
.map-card { padding: 24px; }
.map-eyebrow { font-size: 11px; }
.map-title { font-family: var(--font-display); font-weight: 400; font-size: 21px; }
.overall-num { font-size: 40px; line-height: 1; }
.overall-tier { font-weight: 600; font-size: 11.5px; letter-spacing: .02em; }
.pk-list, .pk-ideal { color: var(--mute); }
.map-legend .lg-item, .map-legend .lg-note { color: var(--faint); }
.map-legend .lg-scale, .map-legend .lg-band { color: var(--mute); }
.review-open { border-radius: var(--radius-sm); }
.review-open:not(:disabled) { border-color: var(--amber); color: var(--amber-dk); }

/* ---------- overlays ---------------------------------------------------- */
.pv-overlay, .review-overlay, .op-overlay { background: rgba(25,34,76,.55); }
.pv-modal, .review-modal {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-modal);
}
/* White panel, warm bubbles — the other way round and the two tones match,
   which flattens the transcript into one grey slab. */
.pv-chat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.pv-map { border-radius: var(--radius); }
.pv-map-head .overall-num { font-size: 30px; }
.pv-note, .review-intro { color: var(--mute); }

/* ---------- end-of-flow gate -------------------------------------------- */
/* The gate inherits text-align:center from the older standalone .gate rule
   earlier in styles.css, which also centred its form labels and the
   consent/booking rows. Left-align the input parts; keep the header centred. */
.gate-field > label, .gate-consent, .gate-booking-row label,
.gate-note, .gate-tz { text-align: left; }
.gate { padding: 24px; }
.gate-title { font-family: var(--font-display); font-weight: 400; font-size: 20px; }
.gate-sub { font-size: 14px; color: var(--mute); }
.gate-consent {
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  line-height: 1.6;
  color: var(--navy);
}
.gate-field > label { font-weight: 600; font-size: 12.5px; }
.gate-req { color: #B4390F; }
.gate-field input[type="email"], .gate-booking-row input {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.gate-booking { border: 1px dashed var(--line); border-radius: var(--radius-sm); }
.gate-booking-row label { align-items: flex-start; }
.gate-submit { padding: 14px 24px; font-size: 15px; }

/* ---------- one-pager --------------------------------------------------- */
.onepager { border-radius: var(--radius); box-shadow: var(--shadow-modal); }
.op-head { background: var(--navy); border-bottom: 3px solid var(--amber); padding: 28px 30px; }
.op-h1 { font-size: 26px; }
.op-eyebrow { color: rgba(255,255,255,.72); opacity: 1; }
.op-overall { border-radius: var(--radius-sm); }
.op-h2 { font-size: 11.5px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.op-body { color: var(--mute); }
.op-gap-goal b { color: var(--steel-dk); }
.op-uc { border: 1px solid var(--line); border-radius: var(--radius-sm); }
.op-tag { font-weight: 600; }
.op-tag-cat { background: var(--bg); color: var(--navy); }
.op-tag-val { background: #E6F7FE; color: var(--steel-dk); }
.op-next { background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--radius-sm); }
.op-foot { border-top: 1px solid var(--line-2); color: var(--faint); }

/* ---------- footer ------------------------------------------------------ */
/* Full-bleed navy bar, the way the studio closes its page. */
footer {
  background: var(--navy);
  color: rgba(255,255,255,.72);
  padding: 30px 24px;
  font-size: 12.5px;
}
footer .proto { background: rgba(255,255,255,.12); color: #fff; font-weight: 600; letter-spacing: .08em; }

/* ---------- responsive -------------------------------------------------- */
@media (max-width: 900px) {
  .intro { padding: 28px 18px 40px; }
  .intro-card { grid-template-columns: 1fr; padding: 30px 24px 28px; }
  .intro-map, .intro-data { grid-column: 1; }
  .intro-data { margin-top: 16px; }
  .intro-start { grid-column: 1; justify-self: start; }
  .intro-sub { grid-column: 1; justify-self: start; align-self: auto; margin-top: 12px; }
  .intro-title { font-size: 32px; max-width: none; }
  .intro-lede { font-size: 16px; }
}