@import url('./fonts.css');

/* ============================================================
   Caretanyou — design tokens
   Ported verbatim from the Claude Design system bundle
   (_ds/caretanyou-design-system-4be678dc/tokens/*.css).
   ============================================================ */
:root {
  /* Primary · Coral */
  --purple-dark-50:#fdf3ef; --purple-dark-100:#fbddd2; --purple-dark-200:#f7c4b3;
  --purple-dark-300:#f0a288; --purple-dark-400:#ea8968; --purple-dark-500:#e56b4e;
  --purple-dark-600:#cf5f45; --purple-dark-700:#a54a36; --purple-dark-800:#7f3a2b; --purple-dark-900:#612d21;
  /* Apricot */
  --purple-50:#fef6f0; --purple-100:#fce3d2; --purple-200:#fad4bd; --purple-300:#f7c0a1;
  --purple-400:#f5b48f; --purple-500:#f2a074; --purple-600:#dc9068; --purple-700:#ab7051;
  --purple-800:#85573f; --purple-900:#654230;
  /* Pink */
  --pink-50:#fff5f7; --pink-100:#ffe0e7; --pink-200:#ffd1dc; --pink-300:#ffbccc;
  --pink-400:#ffafc2; --pink-500:#ff9bb3; --pink-600:#e88da3; --pink-700:#b56e7f;
  --pink-800:#8c5562; --pink-900:#6b414b;
  /* Rose */
  --pink-dark-50:#fdedf0; --pink-dark-100:#f9c8d3; --pink-dark-200:#f5aabc; --pink-dark-300:#ef7f99;
  --pink-dark-400:#eb6583; --pink-dark-500:#e2415f; --pink-dark-600:#cc3a56; --pink-dark-700:#9f2e43;
  --pink-dark-800:#7b2434; --pink-dark-900:#5d1b27;
  /* Teal */
  --blue-50:#edf6f7; --blue-100:#cfe8ea; --blue-200:#b4dbdf; --blue-300:#8bc8ce;
  --blue-400:#6fbcc3; --blue-500:#46a4ad; --blue-600:#3f949d; --blue-700:#31737a;
  --blue-800:#26595e; --blue-900:#1d4448;
  /* Green */
  --green-50:#eff9f4; --green-100:#ceeedc; --green-200:#b6e5cb; --green-300:#94d9b4;
  --green-400:#80d2a5; --green-500:#60c78f; --green-600:#57b582; --green-700:#448d66;
  --green-800:#356d4f; --green-900:#28543c;
  /* Yellow */
  --yellow-50:#fff9f2; --yellow-100:#fdeed6; --yellow-200:#fde5c2; --yellow-300:#fcd9a7;
  --yellow-400:#fbd295; --yellow-500:#fac77b; --yellow-600:#e4b570; --yellow-700:#b28d57;
  --yellow-800:#8a6d44; --yellow-900:#695434;
  /* Orange */
  --orange-50:#fef4e8; --orange-500:#f7931a;
  /* Red */
  --red-50:#fff0f0; --red-100:#ffcfcf; --red-200:#ffb8b8; --red-300:#ff9797;
  --red-500:#ff6464; --red-600:#e85b5b; --red-700:#b54747; --red-800:#8c3737;
  /* Neutral (warm taupe) */
  --neutral-50:#f6f4f1; --neutral-100:#e6e1db; --neutral-200:#d5cec6; --neutral-300:#beb6ab;
  --neutral-400:#ada498; --neutral-500:#948b7e; --neutral-600:#837a6e; --neutral-700:#655d53;
  --neutral-800:#4d463e; --neutral-900:#3a342e;
  /* Grey (warm cream) */
  --grey-50:#fdfcfa; --grey-100:#faf8f4; --grey-200:#f7f4ef; --grey-300:#f3efe8;
  --grey-400:#eee9e0; --grey-500:#e8e2d7; --grey-600:#d4cdc0; --grey-700:#a8a094;
  /* Alpha white */
  --white-a10:#ffffff1a; --white-a50:#ffffff80; --white-a80:#ffffffcc; --white-a90:#ffffffe6;
  --white:#fff; --black:#000;

  /* Surfaces */
  --surface-page:var(--grey-300); --surface-card:var(--white); --surface-frosted:var(--white-a80);
  --surface-sunken:var(--grey-400); --surface-inverse:var(--purple-dark-900);

  /* Fonts — จับคู่แบบ display/text
     Mitr            = หัวเรื่อง ปุ่ม Hero ตัวเลข และงานตกแต่งทั้งหมด
     ChulaCharasNew  = เนื้อความและรายละเอียดที่ต้องอ่านยาวๆ */
  --font-primary:'ChulaCharasNew','Noto Sans Thai',system-ui,sans-serif;
  --font-display:'Mitr','Noto Sans Thai',system-ui,sans-serif;
  --font-support:'Mitr','Noto Sans Thai',system-ui,sans-serif;

  /* Weights */
  --weight-light:300; --weight-regular:400; --weight-medium:500; --weight-bold:700;
  --text-11:11px; --text-13:13px; --text-14:14px; --text-16:16px; --text-18:18px; --text-20:20px;
  --leading-normal:160%; --leading-tight:150%;

  /* Spacing / radius */
  --space-4:4px; --space-8:8px; --space-12:12px; --space-16:16px; --space-20:20px;
  --space-24:24px; --space-32:32px;
  --radius-12:12px; --radius-25:25px; --radius-pill:999px;

  /* Elevation */
  --shadow-sm:0 0 10px rgba(0,0,0,.1);
  --shadow-md:0 4px 6px -2px rgba(60,42,32,.04), 0 12px 16px -4px rgba(60,42,32,.09);
  --shadow-button:0 20px 30px rgba(120,68,46,.14);
  --shadow-lg:0 8px 24px rgba(74,52,40,.14), 0 2px 6px rgba(74,52,40,.09);
}

/* ============================================================
   Base
   ============================================================ */
*,*::before,*::after { box-sizing: border-box; }
/* Author `display` rules outrank the UA sheet's [hidden] rule, so state the
   intent explicitly — the modal, the sticky bar and the debug panel all rely
   on `hidden` while carrying a display value of their own. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--neutral-900);
  font-family: var(--font-primary);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
p { text-wrap: pretty; }
a { color: var(--purple-dark-600); }
a:hover { color: var(--purple-dark-700); }
img { max-width: 100%; }

/* PRD v1.1 §1.3 — every interactive target is at least 44×44. */
a, button, [role='button'], input, summary { min-height: 44px; }
a { display: inline-flex; align-items: center; }
a.ct-inline { display: inline; min-height: 0; }

:focus-visible { outline: 3px solid var(--purple-dark-400); outline-offset: 2px; }

.ct-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@keyframes ct-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ct-up { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: none; } }
.ct-screen { animation: ct-in .24s cubic-bezier(.4,0,.2,1) both; }
.ct-bar { animation: ct-up .22s cubic-bezier(.4,0,.2,1) both; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.ct-hdr-cta { flex: none; display: flex; }
/* PRD §1.3 wants AIMET + จุฬาฯ visible on every page, and phones are most of the
   traffic — so this line stays on at mobile widths and wraps instead of being
   dropped. `nowrap` only applies once there is room for it on one line. */
.ct-hdr-sub {
  font: 400 12px/1.35 var(--font-primary);
  color: var(--neutral-700);
  overflow-wrap: break-word;
}
@media (min-width: 641px) { .ct-hdr-sub { font-size: 11px; white-space: nowrap; } }
/* Below 641px the header CTA would push the AIMET line onto a second row, so it
   drops out and the sticky bottom CTA carries the action instead — the visitor
   is never more than one screen from a CTA either way (PRD v1.1 §1.3). */
@media (max-width: 640px) { .ct-hdr-cta { display: none; } }

/* ============================================================
   Design-system components (ported from _ds_bundle.js)
   ============================================================ */

/* Button */
.ct-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8);
  border: none; cursor: pointer; font-family: var(--font-display); font-weight: var(--weight-medium);
  border-radius: var(--radius-pill); white-space: nowrap; text-decoration: none;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, border-color .15s ease;
  --btn-200: var(--purple-dark-200); --btn-400: var(--purple-dark-400);
  --btn-500: var(--purple-dark-500); --btn-700: var(--purple-dark-700);
}
.ct-btn--sm { height: 40px; padding: 0 var(--space-20); font-size: var(--text-14); }
.ct-btn--md { height: 48px; padding: 0 var(--space-24); font-size: var(--text-16); }
.ct-btn--lg { height: 52px; padding: 0 var(--space-32); font-size: var(--text-18); }
.ct-btn--block { width: 100%; }
.ct-btn--primary { background: var(--btn-500); color: #fff; box-shadow: var(--shadow-button); }
.ct-btn--primary:hover:not(:disabled) { background: var(--btn-400); }
.ct-btn--primary:active:not(:disabled) { background: var(--btn-700); }
.ct-btn--primary:disabled { background: var(--btn-200); cursor: default; box-shadow: none; }
.ct-btn--secondary { background: var(--grey-50); color: var(--btn-500); box-shadow: var(--shadow-sm); }
.ct-btn--secondary:hover:not(:disabled) { color: var(--btn-400); }
.ct-btn--secondary:disabled { color: var(--btn-200); cursor: default; box-shadow: none; }
/* CTA labels wrap on 360px rather than overflowing. */
.ct-btn--cta {
  white-space: normal; height: auto; min-height: 56px; padding: 14px 24px;
  line-height: 1.4; text-align: center;
}
.ct-btn--cta-sm { white-space: nowrap; height: auto; min-height: 48px; padding: 12px 20px; line-height: 1.4; }

/* Icon — heroicon SVG used as a mask so it inherits currentColor */
.ct-icon {
  display: inline-block; flex: none; vertical-align: middle;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  width: 24px; height: 24px;
}
.ct-proof-icon { width: 18px; height: 18px; display: block; flex: none; color: var(--green-600); fill: currentColor; }

/* ChoiceCard */
.ct-choice {
  display: flex; align-items: center; gap: var(--space-16); width: 100%;
  padding: var(--space-16); border-radius: var(--radius-25); background: #fff; cursor: pointer;
  text-align: left; border: 2px solid transparent; box-shadow: var(--shadow-sm);
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
  min-height: 76px;
}
.ct-choice:hover { box-shadow: var(--shadow-md); }
.ct-choice[data-selected='true'] { border-color: var(--purple-dark-400); background: var(--purple-dark-50); }
.ct-choice__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ct-choice__title { font: var(--weight-medium) var(--text-16)/var(--leading-normal) var(--font-display); color: var(--neutral-900); }
/* PRD v1.1 §1.3 raises the DS default (light 13px) to regular 14px. */
.ct-choice__desc { font: var(--weight-regular) var(--text-14)/var(--leading-normal) var(--font-primary); color: var(--neutral-700); }
.ct-choice__check {
  flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--neutral-200);
  display: inline-flex; align-items: center; justify-content: center; color: #fff; transition: all .15s ease;
}
.ct-choice[data-selected='true'] .ct-choice__check { background: var(--purple-dark-500); border-color: var(--purple-dark-500); }

/* TextInput */
.ct-field { display: flex; flex-direction: column; width: 100%; }
.ct-field__box {
  /* Horizontal-only padding so the input itself fills the 55px field — with the
     DS's uniform 12px padding the actual tap target was 31px, under the 44px
     floor PRD v1.1 §1.3 sets for a one-handed user in a hospital corridor. */
  display: flex; align-items: center; gap: var(--space-20); width: 100%; min-height: 55px;
  padding: 0 var(--space-12); border-radius: var(--radius-25); background: var(--white-a80);
  box-shadow: var(--shadow-sm); border: 1px solid transparent;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ct-field__box:focus-within { border-color: var(--purple-dark-300); box-shadow: 0 0 0 3px var(--purple-dark-100); }
.ct-field__box--error { border-color: var(--red-300); }
.ct-field__input {
  width: 100%; border: none; outline: none; background: none; min-height: 53px;
  /* DS ships weight-light here; PRD v1.1 §1.3 requires 400 for readability. */
  font-family: var(--font-primary); font-weight: var(--weight-regular); font-size: var(--text-16);
  line-height: var(--leading-normal); color: var(--neutral-900);
}
.ct-field__input::placeholder { color: var(--neutral-500); }

/* ProgressBar */
.ct-progress { width: 100%; }
.ct-progress__track {
  position: relative; width: 100%; height: 8px; border-radius: var(--radius-pill);
  background: var(--grey-500); overflow: hidden;
}
.ct-progress__fill {
  position: absolute; inset: 0 auto 0 0; height: 100%; border-radius: var(--radius-pill);
  background: var(--purple-dark-500); transition: width .4s cubic-bezier(.4,0,.2,1);
}

/* ============================================================
   Page composition
   ============================================================ */
.ct-shell { min-height: 100vh; background: var(--surface-page); color: var(--neutral-900); }
.ct-wrap { max-width: 1080px; margin: 0 auto; padding: clamp(24px,4vw,44px) clamp(16px,4vw,40px); }
.ct-h2 { margin: 0 0 18px; font-family: var(--font-display); font-weight: 500; font-size: clamp(24px,3.2vw,27px); line-height: 1.45; }

.ct-hero {
  max-width: 1080px; margin: 0 auto;
  padding: clamp(26px,4.5vw,52px) clamp(16px,4vw,40px) clamp(24px,3vw,36px);
  display: flex; flex-direction: column; gap: clamp(28px,4vw,44px); align-items: center;
}
.ct-hero__intro { width: 100%; max-width: 820px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.ct-hero__badge {
  align-self: center; padding: 8px 16px; border-radius: var(--radius-pill);
  background: var(--purple-dark-50); color: var(--purple-dark-700);
  font: 500 14px/1.55 var(--font-display);
}
.ct-hero__heading { display: flex; flex-direction: column; gap: 9px; }
.ct-hero__eyebrow {
  color: var(--purple-dark-600);
  font: 500 clamp(20px,2.6vw,23px)/1.45 var(--font-display);
  text-wrap: balance;
}
.ct-hero h1 { margin: 0; color: var(--neutral-900); font: 500 clamp(34px,5vw,44px)/1.32 var(--font-display); text-wrap: balance; }
.ct-hero h1 strong { color: var(--purple-dark-600); font-weight: 500; }
.ct-hero__lead {
  max-width: 720px; margin: 0; color: var(--neutral-800);
  font: 400 clamp(19px,2.1vw,21px)/1.58 var(--font-primary);
  text-wrap: balance;
}
.ct-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding-top: 2px; }
.ct-hero__meta { color: var(--neutral-700); font: 400 14px/1.5 var(--font-primary); }
.ct-hero__proofs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 20px; }
.ct-hero__proofs > span { display: flex; align-items: center; gap: 8px; color: var(--neutral-700); font: 400 15px/1.5 var(--font-primary); }
.ct-hero__visual { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; }
@media (max-width: 640px) {
  .ct-hero { align-items: stretch; gap: 28px; }
  .ct-hero__intro { align-items: stretch; text-align: left; }
  .ct-hero__badge { align-self: flex-start; }
  .ct-hero__actions { flex-direction: column; align-items: stretch; }
  .ct-hero__actions .ct-btn { width: 100%; }
  .ct-hero__meta { text-align: center; }
  .ct-hero__proofs { flex-direction: column; align-items: flex-start; }
}

.ct-example { display: flex; flex-direction: column; gap: 18px; }
.ct-example__heading { max-width: 700px; display: flex; flex-direction: column; gap: 6px; }
.ct-example__heading .ct-h2 { margin: 0; }
.ct-example__heading p { margin: 0; color: var(--neutral-700); font: 400 17px/1.62 var(--font-primary); }
.ct-example__eyebrow { color: var(--purple-dark-600); font: 500 14px/1.45 var(--font-display); }
.ct-example__card {
  display: grid; grid-template-columns: minmax(220px, .8fr) minmax(280px, 1.2fr);
  gap: clamp(20px,4vw,40px); align-items: center; padding: clamp(18px,3vw,30px);
  border-radius: var(--radius-25); background: var(--surface-card); box-shadow: var(--shadow-md);
}
.ct-example__thumb {
  position: relative; display: block; padding: 0; overflow: hidden; cursor: pointer;
  border: 1px solid var(--neutral-100); border-radius: 18px; background: var(--white);
  box-shadow: 0 12px 28px rgba(74,52,40,.12); text-align: left;
}
.ct-example__thumb img { width: 100%; height: clamp(260px,34vw,390px); object-fit: cover; object-position: top center; display: block; }
.ct-example__thumb span {
  position: absolute; left: 12px; right: 12px; bottom: 12px; min-height: 44px; padding: 10px 14px;
  display: flex; align-items: center; justify-content: center; border-radius: var(--radius-pill);
  background: rgba(97,45,33,.90); color: var(--white); font: 500 14px/1.4 var(--font-display); text-align: center;
}
.ct-example__content { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.ct-example__title { font: 500 21px/1.45 var(--font-display); }
.ct-example__content ul { margin: 0; padding-left: 1.25em; display: flex; flex-direction: column; gap: 8px; color: var(--neutral-800); font: 400 16px/1.58 var(--font-primary); }
.ct-example__note { margin: 0; color: var(--neutral-600); font: 400 14px/1.55 var(--font-primary); }
.ct-example__actions { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 2px; }
@media (max-width: 680px) {
  .ct-example__card { grid-template-columns: 1fr; }
  .ct-example__thumb img { height: 300px; }
  .ct-example__actions { width: 100%; flex-direction: column; }
  .ct-example__actions .ct-btn { width: 100%; }
}

/* Clinic photo with the payoff heading laid over it.
   The source image is 700×525 (4:3). The card was 3:2 with object-fit:contain,
   which pillarboxed it in white — fine underneath a caption, fatal for overlaid
   text, which would have landed on the white bars. So the card matches the photo
   on mobile and crops to 3:2 only where there is width to spare. */
.ct-photo {
  position: relative;
  /* Capped well under the 1080px content width: at full width the card ran
     1000×667 on a laptop and dominated the page. */
  max-width: 820px;
  margin-inline: auto;
  border-radius: var(--radius-25);
  overflow: hidden;
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
  aspect-ratio: 4 / 3;
}
@media (min-width: 641px) { .ct-photo { aspect-ratio: 3 / 2; } }
.ct-photo__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Scrim. rgba of --purple-dark-900 (#612d21) rather than the token, so the exact
   alpha stops stay reviewable: even where the photo underneath is pure white,
   white text over the bottom 28% keeps ≥6:1 contrast. The gradient fades out
   before the middle so the hands exchanging the document stay visible. */
.ct-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(97, 45, 33, .92) 0%,
    rgba(97, 45, 33, .80) 28%,
    rgba(97, 45, 33, .42) 58%,
    rgba(97, 45, 33, 0) 100%
  );
}

/* The one line that carries the whole promise. Sits above .ct-h2 in the type
   scale but below the h1, and above the scrim in paint order — ::after is
   generated last, so without z-index it would cover the text. */
.ct-payoff {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: clamp(14px, 2.4vw, 24px);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(21px, 3.2vw, 28px);
  line-height: 1.35;
  color: var(--white);
  text-wrap: pretty;
}
.ct-card {
  padding: 22px; border-radius: var(--radius-25); background: var(--surface-card);
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 12px;
}
.ct-badge-round { width: 40px; height: 40px; border-radius: 50%; color: var(--white); font: 600 16px/40px var(--font-support); text-align: center; }
.ct-medallion { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.ct-medallion__icon { width: 24px; height: 24px; display: block; fill: currentColor; }

.ct-header {
  position: sticky; top: 0; z-index: 20; background: var(--surface-frosted);
  backdrop-filter: blur(12px); border-bottom: 1px solid var(--neutral-100);
}
.ct-header__inner { max-width: 1080px; margin: 0 auto; padding: 11px clamp(16px,4vw,40px); display: flex; align-items: center; gap: 12px; }
.ct-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; min-width: 0; }

.ct-hero-labels {
  width: 100%; max-width: 1000px; display: grid; grid-template-columns: repeat(3,1fr);
  gap: 12px; padding: 0 16%;
}
.ct-hero-labels > span {
  display: flex; flex-direction: column; gap: 2px; text-align: center;
  font: 400 15px/1.6 var(--font-primary); color: var(--neutral-700);
}
.ct-hero-labels b { font-family: var(--font-display); font-weight: 500; color: var(--neutral-900); }
@media (max-width: 719px) {
  .ct-hero-labels { display: flex; flex-direction: column; gap: 10px; padding: 0 4px; }
  .ct-hero-labels > span { flex-wrap: wrap; flex-direction: row; align-items: baseline; gap: 2px 8px; text-align: left; font-size: 16px; }
}

.ct-flag { font: 400 13px/1.6 var(--font-primary); color: var(--purple-dark-700); }

/* Footer links.
   The global 44px tap-target floor made each link a 44px box around ~15px of
   text, so the three read as unrelated blocks however small the gap got. These
   are secondary links in a footer, not the primary flow, so the box is sized to
   the text plus padding: ~30px tall, still comfortably above the 24×24 WCAG 2.2
   AA minimum. The 44px floor stays in force everywhere that matters — every
   button and choice card in the questionnaire and outcome screens. */
.ct-footer-links {
  display: flex;
  flex-direction: column;
  gap: 0;
  font: 400 15px/1.45 var(--font-primary);
}
.ct-footer-links a {
  min-height: 0;
  padding: 4px 0;
  width: fit-content;
}

/* Sticky bottom CTA — iOS Safari needs the home-indicator inset. */
.ct-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--surface-frosted);
  backdrop-filter: blur(12px); border-top: 1px solid var(--neutral-100);
  box-shadow: 0 -8px 24px rgba(120,68,46,.10);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.ct-sticky__inner { max-width: 560px; margin: 0 auto; padding: 12px clamp(16px,4vw,24px) 14px; display: flex; flex-direction: column; gap: 6px; }

.ct-flow { max-width: 560px; margin: 0 auto; padding: clamp(18px,4vw,32px) clamp(16px,4vw,28px) 60px; }
.ct-stack { display: flex; flex-direction: column; gap: 18px; }
.ct-question-kicker {
  color: var(--purple-dark-500); font: 500 12px/1 var(--font-support);
  letter-spacing: .09em; text-transform: uppercase;
}
.ct-question-title { margin: 0; color: var(--neutral-900); font: 500 24px/1.5 var(--font-display); }
.ct-question-sub { margin: 0; color: var(--neutral-700); font: 400 16px/1.62 var(--font-primary); }
.ct-outcome-title { margin: 0; color: var(--neutral-900); font: 500 27px/1.45 var(--font-display); }
.ct-outcome-title--sm { font-size: 24px; }
.ct-iconbtn {
  flex: none; width: 44px; height: 44px; border-radius: 50%; border: none;
  background: var(--grey-400); color: var(--neutral-800); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.ct-linkbtn {
  align-self: center; min-height: 44px; padding: 0 18px; border: none; background: none;
  color: var(--neutral-700); font: 400 15px/44px var(--font-primary); cursor: pointer; text-decoration: underline;
}
.ct-chip {
  min-height: 44px; padding: 0 18px; border-radius: 99px; cursor: pointer;
  font: 400 15px/44px var(--font-primary); border: 1px solid var(--neutral-300);
  background: var(--white-a80); color: var(--neutral-800);
}
.ct-chip[aria-pressed='true'] { font-weight: 500; border: 2px solid var(--purple-dark-500); background: var(--white); color: var(--purple-dark-700); }

.ct-note { padding: 16px 18px; border-radius: var(--radius-25); display: flex; gap: 11px; align-items: flex-start; }
.ct-note p { margin: 0; font: 400 15px/1.62 var(--font-primary); }
.ct-note--info { background: var(--blue-50); border: 1px solid var(--blue-200); color: var(--blue-800); }
.ct-note--compact { padding: 13px 15px; border-radius: 18px; }
.ct-note--compact p { font-size: 14px; line-height: 1.52; }
.ct-note--ok { background: var(--green-50); border: 1px solid var(--green-200); color: var(--green-800); }
.ct-note--muted { background: var(--grey-200); border: 1px solid var(--neutral-100); color: var(--neutral-800); }
.ct-note--draft { background: var(--red-50); border: 1px solid var(--red-200); color: var(--red-800); }
.ct-note--review { background: #fff7d6; border: 1px solid #d6a700; color: var(--neutral-900); }
.ct-note--emergency { background: var(--red-50); border: 2px solid var(--red-300); color: var(--red-800); }

.ct-q2-detail {
  display: flex; flex-direction: column; gap: 10px; margin: -4px 0 2px 16px; padding: 16px;
  border-radius: 20px; border: 1px solid var(--purple-dark-200); background: var(--purple-dark-50);
}
.ct-q2-detail__label { color: var(--neutral-800); font: 400 16px/1.5 var(--font-primary); }
@media (max-width: 480px) { .ct-q2-detail { margin-left: 8px; } }

/* Document modal */
.ct-modal {
  position: fixed; inset: 0; z-index: 50;
  background: color-mix(in srgb, var(--surface-inverse) 74%, transparent);
  backdrop-filter: blur(4px); display: flex; flex-direction: column;
}
.ct-modal__bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px clamp(14px,4vw,28px); }
.ct-modal__body { flex: 1; min-height: 0; overflow: auto; padding: 0 clamp(10px,3vw,24px) 8px; }
.ct-modal__img { width: 100%; max-width: 720px; display: block; margin: 0 auto; border-radius: 14px; background: var(--white); box-shadow: var(--shadow-lg); cursor: zoom-in; }
.ct-modal__img[data-zoom='true'] { width: 900px; max-width: none; border-radius: 10px; cursor: zoom-out; }
.ct-modal__foot { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px clamp(14px,4vw,28px) 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 520px) {
  .ct-modal__foot .ct-btn { flex: 1 1 100%; }
  .ct-modal__foot #docZoom { flex: 1 1 100%; }
}

/* Cookie consent banner — sits above the sticky CTA (z 30) and the debug log
   (z 35) but below the document modal (z 50), and is the only fixed
   element shown until the visitor answers. */
.ct-cookie {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 45;
  background: var(--surface-card);
  border-top: 1px solid var(--neutral-200);
  box-shadow: 0 -8px 24px rgba(120, 68, 46, .14);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.ct-cookie__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px clamp(16px, 4vw, 40px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}
.ct-cookie__text {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font: 400 15px/1.6 var(--font-primary);
  color: var(--neutral-800);
}
.ct-cookie__actions { flex: 0 1 auto; display: flex; gap: 10px; }
/* Equal width and identical styling: refusing is exactly as easy as agreeing. */
.ct-cookie__btn { flex: 1 1 0; min-width: 132px; }
.ct-cookie__later {
  flex: 0 0 auto; min-height: 44px; padding: 0 10px; border: 0; background: transparent;
  color: var(--neutral-700); text-decoration: underline; cursor: pointer;
  font: 400 14px/1.5 var(--font-primary);
}
@media (max-width: 520px) {
  .ct-cookie__actions { width: 100%; }
  .ct-cookie__later { width: 100%; }
}

/* Phone type scale: keep body copy comfortably readable while reducing the
   oversized display text and long buttons that otherwise wrap into 3–4 lines. */
@media (max-width: 640px) {
  .ct-header__inner { padding-top: 9px; padding-bottom: 9px; }
  .ct-hdr-sub { font-size: 12px; line-height: 1.3; }

  .ct-wrap { padding: 22px 16px; }
  .ct-h2 { margin-bottom: 14px; font-size: 22px; line-height: 1.42; }

  .ct-hero { padding: 22px 16px 20px; gap: 24px; }
  .ct-hero__intro { gap: 13px; }
  .ct-hero__badge { padding: 7px 12px; font-size: 14px; line-height: 1.45; }
  .ct-hero__heading { gap: 7px; }
  .ct-hero__eyebrow { font-size: 18px; line-height: 1.48; }
  .ct-hero h1 { font-size: 30px; line-height: 1.36; }
  .ct-hero__lead { font-size: 18px; line-height: 1.56; }
  .ct-hero__actions { gap: 8px; padding-top: 1px; }
  .ct-hero__actions .ct-btn--lg,
  .ct-example__actions .ct-btn--lg,
  .ct-sticky .ct-btn--lg { font-size: 16px; }
  .ct-btn--cta { min-height: 52px; padding: 12px 20px; }
  .ct-hero__proofs { gap: 8px; }
  .ct-hero__proofs > span { font-size: 14px; line-height: 1.45; }

  .ct-hero-labels { gap: 7px; }
  .ct-hero-labels > span { gap: 1px 7px; font-size: 15px; line-height: 1.5; }

  .ct-example { gap: 14px; }
  .ct-example__heading { gap: 5px; }
  .ct-example__heading p { font-size: 16px; line-height: 1.58; }
  .ct-example__card { gap: 18px; padding: 16px; }
  .ct-example__thumb img { height: 260px; }
  .ct-example__title { font-size: 19px; line-height: 1.42; }
  .ct-example__content { gap: 12px; }

  .ct-payoff { padding: 16px; font-size: 20px; line-height: 1.4; }

  .ct-flow { padding: 16px 16px 48px; }
  .ct-question-title { font-size: 21px; line-height: 1.45; }
  .ct-question-sub { font-size: 15px; line-height: 1.58; }
  .ct-outcome-title,
  .ct-outcome-title--sm { font-size: 23px; line-height: 1.42; }
  .ct-choice { min-height: 70px; padding: 14px; gap: 12px; }
  .ct-note--compact { padding: 12px 13px; }

  .ct-sticky__inner { padding-top: 9px; padding-bottom: 10px; gap: 4px; }
  .ct-cookie__inner { padding-top: 14px; padding-bottom: 12px; gap: 10px; }
  .ct-cookie__text { font-size: 14px; line-height: 1.5; }
}

/* Text-styled button (footer cookie control) — a button, not a link, because it
   opens a dialog rather than navigating. */
.ct-linklike {
  align-self: flex-start;
  min-height: 44px;
  padding: 0;
  border: none;
  background: none;
  color: var(--purple-dark-600);
  font: 400 14px/1.7 var(--font-primary);
  text-decoration: underline;
  cursor: pointer;
}
.ct-linklike:hover { color: var(--purple-dark-700); }

/* Debug event log — only when config show_event_log is true */
.ct-log {
  position: fixed; right: 14px; bottom: 14px; z-index: 35; width: 290px; max-height: 60vh;
  overflow: auto; padding: 16px; border-radius: 20px; background: var(--surface-card);
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 9px;
}

/* Privacy / static content pages */
.ct-doc { max-width: 760px; margin: 0 auto; padding: clamp(24px,4vw,44px) clamp(16px,4vw,32px) 80px; }
.ct-doc h1 { font: 500 clamp(26px,4vw,32px)/1.4 var(--font-display); margin: 0 0 8px; }
.ct-doc h2 { font: 500 20px/1.5 var(--font-display); margin: 32px 0 10px; }
.ct-doc p, .ct-doc li { font: 400 16px/1.7 var(--font-primary); color: var(--neutral-800); }
.ct-doc ul { padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.ct-doc .ct-meta { font: 400 14px/1.6 var(--font-primary); color: var(--neutral-600); }
.ct-doc a { color: var(--purple-dark-700); scroll-margin-top: 88px; }
.ct-doc a:hover { color: var(--purple-dark-800); }
.ct-doc a.ct-inline { display: inline-block; max-width: 100%; vertical-align: baseline; }
.ct-doc section { scroll-margin-top: 88px; }
.ct-doc .ct-eyebrow { margin: 0 0 6px; font: 500 13px/1.5 var(--font-display); letter-spacing: .04em; color: var(--purple-dark-700); }
.ct-doc-subtitle { margin: 0; font: 400 16px/1.65 var(--font-primary); color: var(--neutral-700); }
.ct-doc-meta-grid {
  margin: 22px 0 24px; padding: 18px; display: grid; gap: 12px;
  background: var(--surface-card); border: 1px solid var(--neutral-100); border-radius: var(--radius-25);
  box-shadow: var(--shadow-sm);
}
.ct-doc-meta-grid p { margin: 0; display: grid; grid-template-columns: minmax(104px, .35fr) 1fr; gap: 10px 18px; }
.ct-doc-meta-grid b { font-family: var(--font-display); font-weight: 500; color: var(--neutral-900); }
.ct-draft-field { color: var(--red-700); font-weight: 700; }
.ct-doc-callout { margin: 18px 0; }
.ct-doc-toc {
  margin: 28px 0 36px; padding: 20px; background: var(--surface-card);
  border: 1px solid var(--neutral-100); border-radius: var(--radius-25); box-shadow: var(--shadow-sm);
}
.ct-doc-toc > p { margin: 0 0 10px; font: 500 18px/1.5 var(--font-display); color: var(--neutral-900); }
.ct-doc-toc ol { margin: 0; padding-left: 24px; columns: 2; column-gap: 32px; }
.ct-doc-toc li { break-inside: avoid; padding: 2px 0; }
.ct-doc-toc a { display: inline; min-height: 0; }
.ct-doc-section { border-top: 1px solid var(--neutral-100); padding-top: 1px; }
.ct-review-text { padding: 14px 16px; border-left: 4px solid #d6a700; background: #fff7d6; }
.ct-contact-list { list-style: none; padding-left: 0 !important; }
.ct-doc-back { margin-top: 40px; }
.ct-static-footer {
  max-width: 1080px; margin: 0 auto; padding: clamp(24px,4vw,36px) clamp(16px,4vw,40px);
  display: flex; flex-direction: column; gap: 8px;
}
.ct-static-footer__links { display: flex; flex-wrap: wrap; gap: 4px 22px; font: 400 14px/1.6 var(--font-primary); }
.ct-static-footer__links a { min-height: 32px; color: var(--purple-dark-700); }
.ct-static-footer__links a:hover { color: var(--purple-dark-800); }
@media (max-width: 640px) {
  .ct-doc-meta-grid p { grid-template-columns: 1fr; gap: 2px; }
  .ct-doc-toc ol { columns: 1; }
}