/* ==========================================================================
   The Inner Child Healing — non-blocking global styles.
   Components, guides, sections, forms and utilities.
   Every colour comes from the design profile via CSS variables; nothing is
   hard-coded here except the footer's dark surface.
   ========================================================================== */

/* General utilities -------------------------------------------------------- */
.ic-section { padding-block: var(--ic-section-pad, clamp(48px, 7vw, 88px)); }
.ic-section--tint { background: var(--ic-ink-50); }
.ic-section--teal { background: linear-gradient(160deg, var(--ic-teal-800), var(--ic-teal-900)); color: #fff; }
.ic-section--teal h2, .ic-section--teal h3 { color: #fff; }

.ic-section__head { max-width: 760px; margin-inline: auto; text-align: center; margin-block-end: 48px; }
.ic-section__eyebrow {
  display: inline-block; font-weight: 700; font-size: 14px; letter-spacing: .5px;
  color: var(--ic-teal-600); background: var(--ic-teal-50); padding: 6px 16px; border-radius: 50px;
  margin-block-end: 16px;
}
.ic-section--teal .ic-section__eyebrow { color: #fff; background: rgba(255,255,255,.15); }
.ic-section__lead { font-size: 1.15rem; color: var(--ic-ink-500); margin-block-start: 14px; }
.ic-section--teal .ic-section__lead { color: rgba(255,255,255,.85); }

.ic-text-center { text-align: center; }
.ic-mt-lg { margin-block-start: 40px; }
.ic-grid { display: grid; gap: var(--ic-grid-gap, 24px); }
.ic-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.ic-grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ic-grid--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* Cards -------------------------------------------------------------------- */
.ic-card {
  background: var(--paper); border: 1px solid var(--ic-ink-100); border-radius: var(--ic-radius);
  padding: 28px; box-shadow: var(--ic-shadow); transition: transform .2s, box-shadow .2s, border-color .2s;
  height: 100%;
}
.ic-card:hover { transform: translateY(-4px); box-shadow: var(--ic-shadow-lg); border-color: var(--ic-teal-500); }
/* Alternate card style: a visible border and no shadow, set by DESIGN.cardStyle. */
[data-cards='outline'] .ic-card { box-shadow: none; border-color: var(--ic-ink-300); }
[data-cards='outline'] .ic-card:hover { box-shadow: none; border-color: var(--ic-teal-600); }
.ic-card__icon {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px;
  background: var(--ic-teal-50); color: var(--ic-teal-700); margin-block-end: 18px; font-size: 26px;
}
.ic-card h3 { margin-block-end: 10px; }
.ic-card p { color: var(--ic-ink-700); }
/* min-block-size >= 44px: a comfortable touch target on mobile (was 31px). */
.ic-card__link { display: inline-flex; align-items: center; gap: 6px; margin-block-start: 16px; font-weight: 700; min-block-size: 44px; }
.ic-card__link::after { content: '←'; }

/* Guide card --------------------------------------------------------------- */
.ic-article-card {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ic-ink-100);
  border-radius: var(--ic-radius); overflow: hidden; box-shadow: var(--ic-shadow);
  transition: transform .2s, box-shadow .2s;
}
.ic-article-card:hover { transform: translateY(-4px); box-shadow: var(--ic-shadow-lg); }
.ic-article-card__body { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.ic-article-card__cat {
  align-self: flex-start; font-size: 12.5px; font-weight: 700; color: var(--ic-teal-700);
  background: var(--ic-teal-50); padding: 4px 12px; border-radius: 50px;
}
.ic-article-card__title { font-size: 1.2rem; }
.ic-article-card__title a { color: var(--ic-ink-900); }
.ic-article-card__title a:hover { color: var(--ic-teal-700); text-decoration: none; }
.ic-article-card__excerpt { color: var(--ic-ink-500); font-size: .96rem; flex: 1; }
.ic-article-card__meta { display: flex; gap: 14px; font-size: 13px; color: var(--ic-ink-500); margin-block-start: 6px; }

/* Numbers and stats -------------------------------------------------------- */
.ic-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; }
.ic-stat { text-align: center; }
.ic-stat__num { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; color: var(--ic-teal-600); line-height: 1; }
.ic-section--teal .ic-stat__num { color: #fff; }
.ic-stat__label { color: var(--ic-ink-500); margin-block-start: 8px; font-weight: 600; }
.ic-section--teal .ic-stat__label { color: rgba(255,255,255,.8); }

/* Steps -------------------------------------------------------------------- */
.ic-steps { counter-reset: step; display: grid; gap: 20px; }
.ic-step { position: relative; padding-inline-start: 64px; }
.ic-step::before {
  counter-increment: step; content: counter(step);
  position: absolute; inset-inline-start: 0; inset-block-start: 0;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ic-teal-700); color: #fff; font-weight: 800; font-size: 18px;
}
.ic-step h3 { margin-block-end: 6px; }
.ic-step p { color: var(--ic-ink-700); }

/* FAQ accordion ------------------------------------------------------------ */
.ic-faq { max-width: 820px; margin-inline: auto; display: grid; gap: 14px; }
.ic-faq__item { border: 1px solid var(--ic-ink-100); border-radius: var(--ic-radius-sm); background: #fff; overflow: hidden; }
.ic-faq__item summary {
  cursor: pointer; padding: 20px 24px; font-weight: 700; font-size: 1.08rem; color: var(--ic-ink-900);
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.ic-faq__item summary::-webkit-details-marker { display: none; }
.ic-faq__item summary::after { content: '+'; font-size: 1.6rem; color: var(--ic-teal-600); font-weight: 400; transition: transform .2s; }
.ic-faq__item[open] summary::after { transform: rotate(45deg); }
.ic-faq__item summary:hover { color: var(--ic-teal-700); }
.ic-faq__answer { padding: 0 24px 22px; color: var(--ic-ink-700); }

/* Site footer -------------------------------------------------------------- */
.ic-site-footer { background: var(--ic-ink-900); color: #d9cec6; padding-block: 56px 28px; margin-block-start: 40px; }
.ic-site-footer__grid { display: grid; grid-template-columns: 1.6fr repeat(auto-fit, minmax(150px, 1fr)); gap: 40px; }
.ic-site-footer__brand .ic-brand__name { color: #fff; font-size: 22px; display: inline-block; margin-block-end: 12px; }
.ic-site-footer__brand p { color: #b8a99e; margin-block-end: 18px; font-size: .95rem; }
.ic-site-footer__title { color: #fff; font-size: 1rem; margin-block-end: 16px; }
.ic-site-footer__col ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.ic-site-footer__col a { color: #b8a99e; font-size: .95rem; }
.ic-site-footer__col a:hover { color: #fff; text-decoration: none; }
.ic-site-footer__bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  border-block-start: 1px solid #4a3a31; margin-block-start: 40px; padding-block-start: 24px;
  font-size: .9rem; color: #9c8b80;
}
.ic-site-footer__contact { display: flex; gap: 10px; align-items: center; }
.ic-site-footer__contact a { color: #b8a99e; }
@media (max-width: 780px) { .ic-site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .ic-site-footer__grid { grid-template-columns: 1fr; } }

/* Breadcrumbs -------------------------------------------------------------- */
.ic-breadcrumbs { background: var(--ic-ink-50); border-block-end: 1px solid var(--ic-ink-100); font-size: 14px; }
.ic-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; list-style: none; padding-block: 12px; }
.ic-breadcrumbs li { display: flex; align-items: center; gap: 8px; color: var(--ic-ink-500); }
.ic-breadcrumbs a { color: var(--ic-ink-700); }
.ic-breadcrumbs [aria-current='page'] { color: var(--ic-teal-700); font-weight: 600; }
.ic-breadcrumbs__sep { color: var(--ic-ink-300); }

/* Hero --------------------------------------------------------------------- */
.ic-hero { position: relative; overflow: hidden; background: linear-gradient(165deg, var(--ic-teal-50), #fff 60%); }
.ic-hero__inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; padding-block: clamp(48px, 8vw, 96px); }
.ic-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px;
  color: var(--ic-teal-700); background: #fff; padding: 8px 16px; border-radius: 50px; box-shadow: var(--ic-shadow); margin-block-end: 20px;
}
.ic-hero h1 { margin-block-end: 18px; }
.ic-hero__lead { font-size: 1.2rem; color: var(--ic-ink-700); margin-block-end: 28px; max-width: 60ch; }
.ic-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-block-end: 28px; }
.ic-hero__trust { display: flex; flex-wrap: wrap; gap: 20px; font-size: .92rem; color: var(--ic-ink-500); }
.ic-hero__trust span { display: inline-flex; align-items: center; gap: 6px; }
.ic-hero__trust span::before { content: '✓'; color: var(--ic-teal-600); font-weight: 800; }
.ic-hero__card {
  background: #fff; border-radius: var(--ic-radius); box-shadow: var(--ic-shadow-lg); padding: 28px;
  border: 1px solid var(--ic-ink-100);
}
.ic-hero__card h2 { font-size: 1.2rem; margin-block-end: 16px; }
@media (max-width: 860px) { .ic-hero__inner { grid-template-columns: 1fr; gap: 32px; } .ic-hero__card { order: 2; } }

/* Mobile hero. Stacking puts the text column and the card in one column, which
   doubles the height: measured at 1476px on an 812px screen, two full screens before
   the first section. The rhythm is compressed here and the trust strip is hidden,
   because its three promises are repeated verbatim in the hero card just below it.
   Do not delete this block — without it the hero is twice the viewport again. */
@media (max-width: 640px) {
  .ic-hero__inner { padding-block: 26px; gap: 18px; }
  .ic-hero h1 { line-height: 1.25; }
  .ic-hero__lead { font-size: 1.05rem; margin-block-end: 20px; }
  .ic-hero__actions { gap: 10px; margin-block-end: 18px; }
  .ic-hero__trust { display: none; }
  .ic-hero__card { padding: 20px; }
  .ic-hero__card h2 { margin-block-end: 12px; }
  .ic-hero__card .ic-check-list { gap: 10px; }
}

/* CTA band ----------------------------------------------------------------- */
.ic-cta-band { text-align: center; }
.ic-cta-band h2 { margin-block-end: 14px; }
.ic-cta-band p { max-width: 640px; margin: 0 auto 26px; font-size: 1.1rem; }
.ic-cta-band .ic-btn { font-size: 17px; padding: 15px 34px; }

/* Guide body (prose) ------------------------------------------------------- */
.ic-prose { max-width: 760px; margin-inline: auto; }
.ic-prose > * + * { margin-block-start: 1.25em; }
/* scroll-margin must derive from --ic-header-h, because the header is sticky. A hard
   number hides the heading underneath it when you jump from the table of contents. */
.ic-prose h2 { margin-block-start: 1.8em; padding-block-end: .3em; border-block-end: 2px solid var(--ic-teal-50); scroll-margin-top: calc(var(--ic-header-h, 72px) + 16px); }
.ic-prose h3 { margin-block-start: 1.5em; color: var(--ic-teal-800); scroll-margin-top: calc(var(--ic-header-h, 72px) + 16px); }
.ic-prose p, .ic-prose li { color: var(--ic-ink-700); }
.ic-prose ul, .ic-prose ol { padding-inline-start: 1.4em; display: grid; gap: .5em; }
.ic-prose li { padding-inline-start: 4px; }
.ic-prose a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ic-prose strong { color: var(--ic-ink-900); }
.ic-prose blockquote {
  border-inline-start: 4px solid var(--ic-teal-600); background: var(--ic-teal-50);
  padding: 16px 22px; border-radius: 0 var(--ic-radius-sm) var(--ic-radius-sm) 0; color: var(--ic-ink-700); font-style: normal;
}
.ic-prose blockquote p { margin: 0; }
.ic-prose img { border-radius: var(--ic-radius-sm); margin-block: 1.5em; box-shadow: var(--ic-shadow); }
.ic-prose code {
  background: var(--ic-ink-100); padding: 2px 7px; border-radius: 6px; font-size: .9em;
  font-family: 'Consolas', 'Courier New', monospace; direction: ltr; display: inline-block;
}

/* Responsive tables -------------------------------------------------------- */
.ic-table-wrap { overflow-x: auto; margin-block: 1.5em; border-radius: var(--ic-radius-sm); border: 1px solid var(--ic-ink-100); }
/* `.ic-table-wrap` is styled alongside `.ic-prose` on purpose: tables written by hand in
   `src/pages` live inside `.ic-table-wrap` with no `.ic-prose` ancestor, and without this
   they render with no width, no borders and no padding — a narrow table adrift in a
   wide container. No checker catches it, because the markup is perfectly valid. */
.ic-prose table, .ic-table-wrap table { width: 100%; border-collapse: collapse; font-size: .96rem; min-width: 460px; }
.ic-prose thead, .ic-table-wrap thead { background: var(--ic-teal-700); color: #fff; }
.ic-prose th, .ic-prose td, .ic-table-wrap th, .ic-table-wrap td { padding: 13px 16px; text-align: start; border-block-end: 1px solid var(--ic-ink-100); }
.ic-prose tbody tr:nth-child(even), .ic-table-wrap tbody tr:nth-child(even) { background: var(--ic-ink-50); }
.ic-prose tbody tr:hover, .ic-table-wrap tbody tr:hover { background: var(--ic-teal-50); }

/* Critical on mobile: min-width:460px makes every table wider than the guide column
   (~335px on a 375px screen), so the reader has to drag each one sideways. On narrow
   screens the minimum is dropped and the padding tightened. Do not delete this. */
@media (max-width: 560px) {
  .ic-prose table, .ic-table-wrap table { min-width: 0; font-size: .86rem; }
  .ic-prose th, .ic-prose td, .ic-table-wrap th, .ic-table-wrap td {
    padding: 9px 10px;
    /* Long unbroken phrases in a cell push the table past the column even with
       min-width:0, which is what turns "scrollable table" into "drag every table".
       Allowing a break inside a word costs very little at this size and removes it. */
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
  }
}

/* Direct-answer box (featured snippet target) ------------------------------ */
.ic-answer-box {
  background: var(--ic-teal-50); border: 1px solid var(--ic-teal-500); border-inline-start-width: 5px;
  border-radius: var(--ic-radius-sm); padding: 20px 24px; margin-block: 1.5em;
}
.ic-answer-box strong { color: var(--ic-teal-800); }

/* Table of contents -------------------------------------------------------- */
.ic-toc { background: var(--ic-ink-50); border: 1px solid var(--ic-ink-100); border-radius: var(--ic-radius); padding: 22px 26px; margin-block: 2em; }
.ic-toc h2 { font-size: 1.1rem; margin: 0 0 14px; border: 0; padding: 0; }
.ic-toc ol { margin: 0; padding-inline-start: 1.2em; display: grid; gap: 8px; }
.ic-toc a { color: var(--ic-ink-700); text-decoration: none; }
.ic-toc a:hover { color: var(--ic-teal-700); text-decoration: underline; }

/* Guide header ------------------------------------------------------------- */
.ic-article-header { max-width: 760px; margin-inline: auto; text-align: center; padding-block: 40px 8px; }
.ic-article-header__cat { color: var(--ic-teal-700); font-weight: 700; }
.ic-article-header h1 { margin-block: 14px 18px; }
.ic-article-header__meta {
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; align-items: center;
  color: var(--ic-ink-500); font-size: .92rem;
}
.ic-article-header__meta time, .ic-article-header__meta span { display: inline-flex; align-items: center; gap: 6px; }

/* Author box (E-E-A-T) ----------------------------------------------------- */
.ic-author-box {
  display: flex; gap: 18px; align-items: center; max-width: 760px; margin: 48px auto 0;
  padding: 24px; background: var(--ic-ink-50); border: 1px solid var(--ic-ink-100); border-radius: var(--ic-radius);
}
.ic-author-box__avatar {
  width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--ic-teal-600), var(--ic-teal-800)); color: #fff; font-size: 26px; font-weight: 800;
}
.ic-author-box__name { font-weight: 800; color: var(--ic-ink-900); }
.ic-author-box__title { color: var(--ic-ink-500); font-size: .92rem; }

/* Related guides ----------------------------------------------------------- */
.ic-related { border-block-start: 1px solid var(--ic-ink-100); margin-block-start: 48px; padding-block-start: 40px; }

/* Forms -------------------------------------------------------------------- */
.ic-form-field { display: grid; gap: 6px; margin-block-end: 18px; }
.ic-form-field label { font-weight: 700; font-size: .95rem; }
.ic-form-field input, .ic-form-field textarea, .ic-form-field select {
  font-family: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid var(--ic-ink-300);
  border-radius: var(--ic-radius-sm); background: #fff; color: var(--ic-ink-900); width: 100%;
}
.ic-form-field input:focus, .ic-form-field textarea:focus, .ic-form-field select:focus {
  outline: none; border-color: var(--ic-teal-600); box-shadow: 0 0 0 3px rgba(168,91,61,.18);
}

/* Tick list ---------------------------------------------------------------- */
.ic-check-list { list-style: none; padding: 0; display: grid; gap: 14px; }
/* The tick is absolutely positioned rather than a flex sibling. With display:flex on the
   li, a bare <strong> becomes its own flex item and the text after it becomes a second
   one — which renders "**The pattern.** The situation that..." as two columns on a phone.
   Absolute positioning lets the content flow as ordinary inline text whatever is inside. */
.ic-check-list li { position: relative; padding-inline-start: 38px; min-block-size: 26px; }
.ic-check-list li::before {
  content: '✓'; position: absolute; inset-inline-start: 0; inset-block-start: 0;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--ic-teal-50); color: var(--ic-teal-700); display: grid; place-items: center; font-weight: 700; font-size: 14px;
}

/* Accessibility: reduced motion -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   The Inner Child Healing — site-specific components
   (quiz, product, hubs, pricing, safety notes). Built only on design-profile
   variables so a profile change carries through without edits here.
   This file is appended into global.css at build time by scripts/build-css.mjs.
   ========================================================================== */

/* Safety / disclaimer notes ------------------------------------------------ */
.ic-note {
  border: 1px solid var(--ic-ink-300); border-inline-start: 4px solid var(--sage);
  background: var(--sage-50); border-radius: var(--ic-radius-sm);
  padding: 16px 20px; font-size: .95rem; color: var(--ic-ink-700);
}
.ic-note--warm { border-inline-start-color: var(--ic-teal-600); background: var(--ic-teal-50); }
.ic-note strong { color: var(--ic-ink-900); }
.ic-note a { font-weight: 600; }
.ic-note + .ic-note { margin-block-start: 14px; }

/* Eyebrow / label ---------------------------------------------------------- */
.ic-label {
  display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ic-teal-700); margin-block-end: 12px;
}
.ic-section--teal .ic-label { color: rgba(255,255,255,.82); }

/* Lede paragraph under an H1 ---------------------------------------------- */
.ic-lede { font-size: 1.16rem; color: var(--ic-ink-700); max-width: 68ch; }

/* Pill row ---------------------------------------------------------------- */
.ic-pill-row { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin-block-start: 16px; }
.ic-pill-row li { margin: 0; }
.ic-pill {
  display: inline-block; padding: 7px 14px; border-radius: 50px; font-size: 14px;
  border: 1px solid var(--ic-ink-300); color: var(--ic-ink-700); background: var(--paper);
}
a.ic-pill:hover { border-color: var(--ic-teal-600); color: var(--ic-teal-800); text-decoration: none; background: var(--ic-teal-50); }

/* Routing hub of cards ----------------------------------------------------- */
.ic-route-grid { display: grid; gap: var(--ic-grid-gap, 22px); grid-template-columns: repeat(auto-fit, minmax(262px, 1fr)); }
.ic-route {
  border: 1px solid var(--ic-ink-300); border-radius: var(--ic-radius); padding: 22px;
  background: var(--paper); display: flex; flex-direction: column; gap: 10px;
}
.ic-route h3 { font-size: 1.12rem; }
.ic-route p { color: var(--ic-ink-500); font-size: .94rem; }
.ic-route ul { list-style: none; padding: 0; display: grid; gap: 7px; margin-block-start: 4px; }
.ic-route ul a { font-size: .95rem; color: var(--ic-ink-700); display: inline-block; padding-block: 3px; }
.ic-route ul a:hover { color: var(--ic-teal-800); }

/* Two-column feature rows -------------------------------------------------- */
.ic-split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 820px) { .ic-split { grid-template-columns: 1fr; gap: 26px; } }

/* Framework strip: pattern to need to response ---------------------------- */
.ic-framework { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ic-framework__step {
  border: 1px solid var(--ic-ink-300); border-radius: var(--ic-radius); padding: 20px; background: var(--paper);
}
.ic-framework__step span {
  display: block; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ic-teal-700); font-weight: 600; margin-block-end: 8px;
}
.ic-framework__step h3 { font-size: 1.08rem; margin-block-end: 6px; }
.ic-framework__step p { font-size: .93rem; color: var(--ic-ink-500); }
@media (max-width: 760px) { .ic-framework { grid-template-columns: 1fr; } }

/* Quiz --------------------------------------------------------------------- */
.ic-quiz { max-width: 720px; margin-inline: auto; }
.ic-quiz__progress { display: flex; align-items: center; gap: 12px; margin-block-end: 22px; font-size: 14px; color: var(--ic-ink-500); }
.ic-quiz__bar { flex: 1; height: 6px; border-radius: 4px; background: var(--ic-ink-100); overflow: hidden; }
.ic-quiz__bar span { display: block; height: 100%; background: var(--ic-teal-600); transition: width .25s ease; }
.ic-quiz__q { border: 1px solid var(--ic-ink-300); border-radius: var(--ic-radius); padding: 26px; background: var(--paper); }
.ic-quiz__q h2 { font-size: clamp(1.25rem, 3vw, 1.55rem); margin-block-end: 6px; }
.ic-quiz__hint { color: var(--ic-ink-500); font-size: .93rem; margin-block-end: 18px; }
.ic-quiz__options { list-style: none; padding: 0; display: grid; gap: 10px; }
.ic-quiz__option {
  display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: start;
  padding: 15px 17px; border: 1.5px solid var(--ic-ink-300); border-radius: var(--ic-radius-sm);
  background: var(--paper); cursor: pointer; font: inherit; color: var(--ic-ink-900);
  min-height: 52px; transition: border-color .15s, background .15s;
}
.ic-quiz__option:hover { border-color: var(--ic-teal-600); background: var(--ic-teal-50); }
.ic-quiz__option[aria-pressed="true"] { border-color: var(--ic-teal-700); background: var(--ic-teal-50); }
.ic-quiz__key {
  flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ic-ink-50); color: var(--ic-ink-700); font-size: 13px; font-weight: 600;
}
.ic-quiz__option[aria-pressed="true"] .ic-quiz__key { background: var(--ic-teal-700); color: #fff; }
.ic-quiz__nav { display: flex; justify-content: space-between; gap: 12px; margin-block-start: 20px; }
.ic-quiz__nav .ic-btn { min-width: 118px; }

/* Result ------------------------------------------------------------------- */
.ic-result-card {
  border: 1px solid var(--ic-teal-500); border-radius: var(--ic-radius); background: var(--ic-teal-50);
  padding: 30px; margin-block-end: 28px;
}
.ic-result-card h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin-block: 6px 12px; }
.ic-result-second { font-size: .96rem; color: var(--ic-ink-700); }
.ic-practice { border: 1px solid var(--ic-ink-300); border-radius: var(--ic-radius); padding: 22px; background: var(--paper); }
.ic-practice h3 { font-size: 1.06rem; margin-block-end: 8px; }
.ic-practice p { color: var(--ic-ink-700); font-size: .95rem; }

/* Pricing / offer ---------------------------------------------------------- */
.ic-offer {
  border: 2px solid var(--ic-teal-700); border-radius: var(--ic-radius); background: var(--paper);
  padding: 32px; max-width: 620px; margin-inline: auto; text-align: center;
}
.ic-offer__price { font-family: var(--ic-font-heading); font-size: 3.4rem; line-height: 1; color: var(--ic-teal-800); }
.ic-offer__billing { color: var(--ic-ink-500); font-size: .95rem; margin-block: 8px 22px; }
.ic-offer .ic-check-list { text-align: start; margin-block-end: 26px; }
.ic-offer__fine { font-size: .86rem; color: var(--ic-ink-500); margin-block-start: 14px; }

/* Value stack -------------------------------------------------------------- */
.ic-stack { list-style: none; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.ic-stack li { display: flex; gap: 10px; align-items: flex-start; font-size: .96rem; color: var(--ic-ink-700); }
.ic-stack li::before { content: "\2713"; color: var(--ic-teal-600); font-weight: 700; flex: none; }

/* What it is not ----------------------------------------------------------- */
.ic-not-list { list-style: none; padding: 0; display: grid; gap: 9px; }
.ic-not-list li { display: flex; gap: 10px; align-items: flex-start; color: var(--ic-ink-700); }
.ic-not-list li::before { content: "\00d7"; color: var(--ic-ink-500); font-weight: 700; flex: none; font-size: 1.1em; }

/* Product dashboard -------------------------------------------------------- */
.ic-module-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.ic-module {
  border: 1px solid var(--ic-ink-300); border-radius: var(--ic-radius); padding: 18px; background: var(--paper);
  display: flex; flex-direction: column; gap: 6px;
}
.ic-module:hover { border-color: var(--ic-teal-600); text-decoration: none; }
.ic-module h3 { font-size: 1.02rem; }
.ic-module p { font-size: .89rem; color: var(--ic-ink-500); }
.ic-map-nav { display: flex; flex-wrap: wrap; gap: 7px; margin-block-end: 26px; }
.ic-map-nav a {
  font-size: 13.5px; padding: 7px 13px; border-radius: 50px; border: 1px solid var(--ic-ink-300);
  color: var(--ic-ink-700); background: var(--paper); min-height: 36px; display: inline-flex; align-items: center;
}
.ic-map-nav a:hover, .ic-map-nav a[aria-current="page"] { border-color: var(--ic-teal-600); color: var(--ic-teal-800); background: var(--ic-teal-50); text-decoration: none; }

/* Tool panels inside the product ------------------------------------------ */
.ic-tool { border: 1px solid var(--ic-ink-300); border-radius: var(--ic-radius); padding: 24px; background: var(--paper); }
.ic-tool + .ic-tool { margin-block-start: 20px; }
.ic-tool h2 { font-size: 1.35rem; margin-block-end: 6px; }
.ic-tool__hint { color: var(--ic-ink-500); font-size: .92rem; margin-block-end: 18px; }
.ic-tool__out {
  border: 1px solid var(--ic-teal-500); background: var(--ic-teal-50); border-radius: var(--ic-radius-sm);
  padding: 18px 20px; margin-block-start: 18px;
}
.ic-tool__out h3 { font-size: 1rem; margin-block-end: 6px; color: var(--ic-teal-800); }
.ic-tool__out p + h3 { margin-block-start: 14px; }
.ic-saved-list { list-style: none; padding: 0; display: grid; gap: 12px; margin-block-start: 18px; }
.ic-saved-item { border: 1px solid var(--ic-ink-100); border-radius: var(--ic-radius-sm); padding: 14px 16px; background: var(--ic-ink-50); font-size: .93rem; }
.ic-saved-item time { color: var(--ic-ink-500); font-size: .84rem; display: block; margin-block-end: 6px; }
.ic-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ic-chip {
  padding: 8px 14px; border-radius: 50px; border: 1.5px solid var(--ic-ink-300); background: var(--paper);
  font: inherit; font-size: 14px; cursor: pointer; color: var(--ic-ink-700); min-height: 40px;
}
.ic-chip[aria-pressed="true"] { border-color: var(--ic-teal-700); background: var(--ic-teal-50); color: var(--ic-teal-900); }

/* Day plans ---------------------------------------------------------------- */
.ic-day { border: 1px solid var(--ic-ink-300); border-radius: var(--ic-radius); padding: 20px; background: var(--paper); }
.ic-day + .ic-day { margin-block-start: 14px; }
.ic-day__num { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ic-teal-700); font-weight: 600; }
.ic-day h3 { font-size: 1.1rem; margin-block: 4px 12px; }
.ic-day dl { display: grid; gap: 10px; margin: 0; }
.ic-day dt { font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ic-ink-500); font-weight: 600; }
.ic-day dd { margin: 2px 0 0; color: var(--ic-ink-700); font-size: .95rem; }

/* Guide index -------------------------------------------------------------- */
.ic-guide-list { list-style: none; padding: 0; display: grid; gap: 2px; }
.ic-guide-list li a {
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  padding: 13px 4px; border-block-end: 1px solid var(--ic-ink-100); color: var(--ic-ink-900);
}
.ic-guide-list li a:hover { color: var(--ic-teal-800); background: var(--ic-teal-50); text-decoration: none; }
.ic-guide-list small { color: var(--ic-ink-500); font-size: .82rem; flex: none; }

/* Print — the playbook is meant to be printed ----------------------------- */
@media print {
  .ic-site-header, .ic-site-footer, .ic-breadcrumbs, .ic-map-nav, .ic-btn, .ic-note { display: none !important; }
  body { background: #fff; font-size: 12pt; }
  .ic-tool, .ic-day, .ic-card { border-color: #999; break-inside: avoid; }
}

/* Heading-sized text that must not be an <h1> (gated states render alongside a real H1). */
.ic-h1-like { font-family: var(--ic-font-heading); font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.24; font-weight: 600; color: var(--ic-ink-900); }

/* Inline action button inside a list item (Keep / Add / Yes). Sits after the text and
   wraps with it, which is what you want on a phone. */
.ic-check-list .ic-chip { margin-inline-start: 10px; vertical-align: middle; }

/* Vertical rhythm outside .ic-prose ------------------------------------------
   The reset sets `* { margin: 0 }`, which is right for a component-driven page but
   leaves headings touching the paragraph beneath them on hand-written sections.
   `.ic-prose` has its own rhythm, so these rules deliberately stop at its boundary. */
.ic-section h1 { margin-block-end: 14px; }
.ic-section h2 { margin-block-end: 12px; }
.ic-section h3 { margin-block-end: 8px; }
.ic-section .ic-label + h1,
.ic-section .ic-label + h2 { margin-block-start: 0; }
.ic-section p + p { margin-block-start: 14px; }
.ic-prose h1, .ic-prose h2, .ic-prose h3, .ic-prose p + p { margin-block-end: revert; }
.ic-tool h2 + p, .ic-tool h3 + p { margin-block-start: 6px; }
.ic-tool p + p { margin-block-start: 12px; }

/* Mobile hero, second pass ------------------------------------------------
   Measured on the live site: the stacked hero came to 1160px against an 812px
   screen (1.43 viewports). The primary CTA was still above the fold, but the
   framework card below it pushed the first real section a long way down. This
   tightens the rhythm inside the card rather than hiding content. */
@media (max-width: 640px) {
  .ic-hero__lead { font-size: 1rem; line-height: 1.6; margin-block-end: 16px; }
  .ic-hero__card { padding: 18px; }
  .ic-hero__card h2 { font-size: 1.06rem; margin-block-end: 10px; }
  .ic-hero__card .ic-check-list { gap: 9px; }
  .ic-hero__card .ic-check-list li { padding-inline-start: 32px; font-size: .94rem; line-height: 1.5; }
  .ic-hero__card .ic-check-list li::before { width: 22px; height: 22px; font-size: 12px; }
}

/* Touch targets -----------------------------------------------------------
   Two controls measured under 44px on the live site: the header lockup (263x42)
   and the footer email link (205x25). Inline links inside a sentence are
   deliberately not padded — WCAG 2.5.8 exempts them, and padding them would
   break the line box of every paragraph on the site. */
.ic-brand { min-block-size: 44px; }
.ic-site-footer__contact a { display: inline-flex; align-items: center; min-block-size: 44px; }