/* =====================================================================
   ClinicOS — Home
   Premium enterprise SaaS layout: split hero with product, capability
   row, day timeline, navy method panel, outcome cards, closing band.

   Everything below reads from the home type + space system declared at
   the top. No component sets its own size, leading, tracking or rhythm;
   if a value needs to change, it changes once, here.
   ===================================================================== */

main {
  /* ---------- Type scale (home runs one step above the inner pages) --- */
  --fs-display: clamp(2.375rem,  1.36rem + 3.40vw, 4.25rem);     /* 38 → 68 */
  --fs-h1:      clamp(1.9375rem, 1.36rem + 2.10vw, 2.9375rem);   /* 31 → 47 */
  --fs-h2:      clamp(1.5625rem, 1.20rem + 1.45vw, 2.25rem);     /* 25 → 36 */
  --fs-h3:      clamp(1.0625rem, 0.97rem + 0.50vw, 1.1875rem);   /* 17 → 19 */
  --fs-lead:    clamp(1.0625rem, 0.98rem + 0.42vw, 1.25rem);     /* 17 → 20 */
  --fs-body:    clamp(1rem,      0.95rem + 0.28vw, 1.125rem);    /* 16 → 18 */
  --fs-small:   0.9375rem;                                       /* 15 */
  --fs-caption: 0.8125rem;                                       /* 13 */

  /* ---------- Leading ------------------------------------------------ */
  --lh-display: 1.20;
  --lh-heading: 1.45;
  --lh-body:    1.85;
  --lh-tight:   1.30;

  /* ---------- Tracking ----------------------------------------------- */
  --ls-display: -0.006em;   /* large serif closes up */
  --ls-heading:  0.004em;
  --ls-body:     0.015em;
  --ls-caption:  0.14em;    /* small caps-ish labels */
  --ls-button:   0.08em;

  /* ---------- Space system ------------------------------------------- */
  --gap-section: clamp(5.5rem, 3rem + 7.5vw, 9rem);        /* between sections */
  --gap-block:   clamp(2.75rem, 1.6rem + 3.4vw, 4.25rem);  /* head → content  */
  --gap-group:   var(--sp-7);                              /* inside a group   */
  --gap-para:    var(--sp-5);                              /* paragraph rhythm */
  --gap-card:    var(--sp-6);                              /* between cards    */
  --gap-btn:     var(--sp-4);                              /* between buttons  */
  --pad-card:    var(--sp-6);

  /* ---------- Surface ------------------------------------------------ */
  --navy:      #16274C;
  --navy-deep: #101D3A;
  --gold:      #A8814B;
  --card-r:    18px;
  --shadow-xs: 0 1px 2px rgba(16, 29, 58, 0.05);
  --shadow-sm: 0 8px 28px rgba(16, 29, 58, 0.07);
  --shadow-photo: 0 18px 48px rgba(16, 29, 58, 0.10);
  --hairline:  1px solid var(--c-line);
}

/* ---------------------------------------------------------------------
   Shared type roles
   --------------------------------------------------------------------- */
.sec__head { text-align: center; }
.sec__head .sec__title { max-width: 34ch; margin-inline: auto; }
/* a quiet label above a section, in the brand caption voice */
.out__title, .flow__title { max-width: 22ch; }

/* Every section title on the page obeys one rule. */
.sec__title,
.flow__title,
.out__title {
  max-width: 24ch;
  font-family: var(--ff-display);
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--navy);
  text-wrap: balance;
}
.sec__rule {
  display: block;
  width: 56px;
  height: 1px;
  margin: var(--sp-6) auto 0;
  background: var(--c-line);
}

/* One caption rule for kickers, labels, times and card meta. */
.hero__kicker,
.mth__kicker,
.tl__time,
.trust__label,
.flow__sub {
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--c-text-mute);
}
.tl__time {
  font-family: var(--ff-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caption);
  color: var(--navy);
}

/* Card headings and card body, wherever a card appears. */
.ocard__text h3,
.mth__points h3 {
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
}
.cap__body,
.ocard__text p,
.mth__points p,
.tl__text {
  margin-top: var(--sp-3);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--c-text-soft);
}

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(2.5rem, 1rem + 4vw, 4.5rem));
  padding-bottom: clamp(1.75rem, 0.9rem + 2.2vw, 2.5rem);
  background:
    radial-gradient(80% 70% at 78% 42%, #FFFFFF 0%, rgba(255,255,255,0) 62%),
    linear-gradient(180deg, var(--c-paper) 0%, #FAF8F5 100%);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: var(--sp-8);
  align-items: center;
  min-height: clamp(540px, 44vw, 660px);
}
.hero__copy   { grid-column: 1 / -1; }
.hero__visual { grid-column: 1 / -1; }
@media (min-width: 1000px) {
  .hero__copy   { grid-column: 1 / 7; }
  .hero__visual { grid-column: 7 / 13; }
}

.hero__copy { padding-top: clamp(0px, 2vw, 34px); }
.hero__title {
  margin-top: var(--sp-7);
  font-family: var(--ff-display);
  font-size: var(--fs-display);
  font-weight: 500;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--navy);
  max-width: 22ch;
  /* the trailing full stop stays with the phrase it closes */
  text-wrap: pretty;
}
.hero__accent { color: var(--navy); }
.hero__desc {
  margin-top: var(--sp-6);
  /* medium after the title, large before the ask */
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--c-text-soft);
  max-width: 34ch;          /* the comfortable measure for this size */
}
.hero__actions { margin-top: clamp(2.5rem, 1.6rem + 2.6vw, 3.5rem); display: flex; flex-wrap: wrap; gap: var(--gap-btn); }

.trust {
  margin-top: var(--sp-6);
  padding-top: var(--gap-group);
  border-top: var(--hairline);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
}
.trust__item + .trust__item { padding-left: var(--sp-6); border-left: var(--hairline); }
.trust__key {
  font-family: var(--ff-display);
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
  color: var(--navy);
}
.trust__label { margin-top: var(--sp-4); }

/* The mockup should sit in the room, not on top of it: ambient light
   behind, a soft contact shadow under, nothing that glows. */
.hero__visual { position: relative; }
.hero__visual::before {
  content: "";
  position: absolute;
  inset: -8% -6% -4%;
  background: radial-gradient(58% 52% at 52% 46%, rgba(22, 39, 76, 0.055) 0%, rgba(22, 39, 76, 0) 70%);
  pointer-events: none;
}
.hero__visual::after {
  content: "";
  position: absolute;
  left: 8%; right: 6%; bottom: 2%;
  height: 42px;
  background: radial-gradient(50% 100% at 50% 0%, rgba(16, 29, 58, 0.16) 0%, rgba(16, 29, 58, 0) 72%);
  filter: blur(6px);
  pointer-events: none;
}
.hero__visual img { display: block; width: 100%; height: auto; position: relative; }
@media (min-width: 1000px) {
  .hero__visual { margin-right: calc(-1 * var(--grid-gutter)); }
  .hero__visual img { width: 106%; max-width: none; }
}

/* ---------------------------------------------------------------------
   Capability
   --------------------------------------------------------------------- */
.cap { padding-block: clamp(4.5rem, 2.4rem + 6vw, 7rem); background: linear-gradient(180deg, #FAF8F5 0%, var(--c-paper) 100%); }
.cap__grid {
  margin-top: clamp(2rem, 1.2rem + 2.4vw, 3rem);
  row-gap: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: var(--sp-9);
}
@media (min-width: 700px)  { .cap__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Six across cannot hold a sentence-length title; three across reads as a
   chapter rather than a strip of information. */
@media (min-width: 1080px) { .cap__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 0; } }
.cap__item { text-align: left; padding: var(--sp-6) var(--sp-4); display: flex; flex-direction: column; }
/* the sentence leads; the mark follows it */
.cap__title { order: -1; margin-top: 0 !important; padding-bottom: var(--sp-4); border-bottom: 1px solid var(--c-line-soft); }
.cap__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}
.cap__body { order: 1; }
@media (min-width: 1080px) {
  .cap__item { padding: var(--sp-6) var(--sp-7); border-radius: var(--card-r); transition: background var(--dur-slow) var(--ease-editorial); }
  .cap__item:hover { background: var(--c-paper-raised); }
  .cap__item:hover .cap__icon svg { stroke: var(--gold); }
  /* an inset rule, so six columns never read as a table */
  .cap__item + .cap__item { position: relative; }
  .cap__item:not(:nth-child(3n + 1))::before {
    content: "";
    position: absolute;
    left: 0; top: 12%; bottom: 12%;
    width: 1px;
    background: var(--c-line-soft);
  }
}
.cap__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; }
.cap__icon svg {
  width: 26px; height: 26px;
  fill: none; stroke: var(--navy); stroke-width: 1.1;
  transition: stroke var(--dur-slow) var(--ease-editorial);
  stroke-linecap: round; stroke-linejoin: round;
}
.cap__title {
  font-family: var(--ff-display);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--navy);
}

/* ---------------------------------------------------------------------
   A day
   --------------------------------------------------------------------- */
.flow { padding-block: clamp(4rem, 2.4rem + 4.6vw, 6rem); background: var(--c-paper-sunken); }
.flow__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: var(--sp-8);
  align-items: center;
  min-height: clamp(420px, 34vw, 540px);
}
.flow__copy   { grid-column: 1 / -1; }
.flow__visual { grid-column: 1 / -1; }
@media (min-width: 1000px) {
  .flow__copy   { grid-column: 1 / 7; }
  .flow__visual { grid-column: 8 / 13; }
}
.flow__sub { margin-top: var(--gap-para); }

.tl {
  margin-top: clamp(2rem, 1.2rem + 2.2vw, 2.75rem);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-group) var(--sp-5);
}
@media (min-width: 560px) { .tl { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-5); } }
.tl__step { position: relative; }
@media (min-width: 560px) {
  .tl__step::after {
    content: "";
    position: absolute;
    top: 27px; left: 50%; width: 100%; height: 1px;
    background: var(--c-line-soft);
  }
  .tl__step:last-child::after { display: none; }
}
.tl__dot {
  position: relative;
  z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--c-paper-raised);
  border: 1px solid var(--c-line-soft);
  box-shadow: var(--shadow-xs);
}
.tl__dot svg { width: 25px; height: 25px; fill: none; stroke: var(--navy); stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.tl__time { margin-top: var(--sp-6); font-size: var(--fs-small); }
.tl__text { margin-top: var(--sp-4); font-size: var(--fs-small); line-height: 2; }
.flow__more { margin-top: clamp(1.75rem, 1.1rem + 1.8vw, 2.5rem); }

/* Every photograph on the page is framed the same way. */
.flow__visual img,
.ocard__shot img,
.mth__media img {
  box-shadow: inset 0 0 0 1px rgba(16, 29, 58, 0.08);
}
.flow__visual {
  border-radius: var(--card-r);
  overflow: hidden;
  box-shadow: var(--shadow-photo);
}
.flow__visual img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 4; object-fit: cover;
}
@media (min-width: 1000px) {
  /* the picture leans into the column gap — desktop only, or it overflows */
  .flow__visual img { width: 100%; }
}

/* ---------------------------------------------------------------------
   Method — one navy chapter
   --------------------------------------------------------------------- */
.mth { background: var(--navy); color: var(--c-text-invert); }
.mth__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  min-height: clamp(480px, 40vw, 620px);
}
.mth__panel  { grid-column: 1 / -1; display: flex; align-items: center; }
.mth__media  { grid-column: 1 / -1; }
.mth__points {
  grid-column: 1 / -1;
  list-style: none;
  padding: clamp(2.5rem, 1.5rem + 3vw, 4rem) var(--grid-gutter);
  background: var(--navy-deep);
}
@media (min-width: 1000px) {
  .mth__panel  { grid-column: 1 / 6; }
  .mth__media  { grid-column: 6 / 10; position: relative; }
  .mth__media::after {
    content: "";
    position: absolute; inset: 0;
    box-shadow: inset 1px 0 0 rgba(243,241,238,0.10), inset -1px 0 0 rgba(243,241,238,0.10);
    pointer-events: none;
  }
  .mth__points {
    grid-column: 10 / 13;
    display: flex; flex-direction: column; justify-content: center;
    padding: clamp(2.5rem, 1.5rem + 3vw, 4rem) clamp(1.5rem, 1rem + 2.2vw, 3rem);
  }
}
.mth__inner {
  padding: clamp(2.75rem, 1.7rem + 3.6vw, 4.75rem) clamp(1.5rem, 1rem + 2.6vw, 3.5rem);
  max-width: 620px;
  margin-left: auto;
}
.mth__kicker { color: var(--gold); letter-spacing: var(--ls-caption); }
.mth__title {
  margin-top: var(--gap-para);
  font-family: var(--ff-display);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}
.mth__body {
  margin-top: var(--gap-para);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: rgba(243, 241, 238, 0.78);
  max-width: 38ch;
}
.mth__link { margin-top: var(--gap-group); }

.mth__media img { display: block; width: 100%; height: 100%; min-height: 320px; object-fit: cover; }

.mth__points li { display: flex; gap: var(--sp-5); align-items: flex-start; }
.mth__points li + li { margin-top: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); }
.mth__mark {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 11px;
  background: rgba(243, 241, 238, 0.08);
  border: 1px solid rgba(243, 241, 238, 0.14);
}
.mth__mark svg { width: 18px; height: 18px; fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.mth__points h3 { color: var(--c-text-invert); font-size: var(--fs-h3); }
.mth__points p { color: rgba(243, 241, 238, 0.66); }

/* ---------------------------------------------------------------------
   Outcome
   --------------------------------------------------------------------- */
.out { padding-block: clamp(3.5rem, 2.1rem + 4.2vw, 5rem); }
.out__grid {
  margin-top: clamp(2rem, 1.2rem + 2.4vw, 3rem);
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--sp-5);
}
@media (min-width: 700px) { .out__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) {
  /* two small stacked on the left, one large holding the right, then a
     statement that runs the full measure. */
  .out__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .ocard--sm   { grid-column: 1 / 6; }
  .ocard--lg   { grid-column: 6 / 13; grid-row: 1 / 3; }
  .ocard--stat { grid-column: 1 / -1; min-height: 0; padding: var(--sp-6) var(--sp-8); }
  .ocard--stat .ocard__lead { max-width: 26ch; }
  .ocard--stat .ocard__note { max-width: 52ch; }
}

.ocard {
  display: flex;
  flex-direction: column;
  min-height: 220px;
  background: var(--c-paper-raised);
  border: 1px solid rgba(16, 29, 58, 0.07);
  border-radius: var(--card-r);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: box-shadow var(--dur-slow) var(--ease-editorial), transform var(--dur-slow) var(--ease-editorial);
}
.ocard:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.ocard__text { padding: var(--sp-5) var(--sp-6); }
.ocard__text h3 { color: var(--navy); }
.ocard__shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ocard--sm { flex-direction: row; align-items: stretch; min-height: 0; }
.ocard--sm .ocard__shot { flex: 0 0 38%; }
.ocard--sm .ocard__shot img { aspect-ratio: 1 / 1; }
.ocard--sm .ocard__text { padding: var(--sp-6) var(--sp-6) var(--sp-6) var(--sp-5); }
.ocard--sm .ocard__text { flex: 1 1 auto; align-self: center; }
.ocard--lg .ocard__shot { order: -1; }
.ocard--lg .ocard__shot img { aspect-ratio: 4 / 3; }

.ocard--stat {
  justify-content: center;
  align-items: flex-start;
  min-height: 260px;
  padding: var(--gap-group) var(--pad-card);
  background: var(--navy);
  border-color: var(--navy);
}
.ocard__lead {
  font-family: var(--ff-display);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--c-text-invert);
  max-width: 12ch;
}
.ocard__lead::after {
  content: "";
  display: block;
  width: 34px; height: 2px;
  margin-top: var(--gap-para);
  background: var(--gold);
}
.ocard__note {
  margin-top: var(--gap-para);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: rgba(243, 241, 238, 0.72);
}

/* ---------------------------------------------------------------------
   Closing band
   --------------------------------------------------------------------- */
.cta { padding-block: clamp(3rem, 1.8rem + 3.4vw, 5rem); }
.cta__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: var(--gap-group);
  align-items: center;
  min-height: 200px;
  padding: clamp(3.25rem, 2rem + 3.2vw, 4.5rem) clamp(2.5rem, 1.4rem + 5vw, 6.5rem);
  background: var(--navy-deep);
  color: var(--c-text-invert);
  border-radius: var(--card-r);
}
.cta__copy    { grid-column: 1 / -1; }
.cta__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--gap-btn); }
@media (min-width: 900px) {
  .cta__copy    { grid-column: 1 / 8; }
  .cta__actions { grid-column: 8 / 13; justify-content: flex-end; }
}
.cta__title {
  font-family: var(--ff-display);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}
.cta__desc {
  margin-top: var(--gap-para);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: rgba(243, 241, 238, 0.76);
  max-width: 42ch;
}

/* ---------------------------------------------------------------------
   Buttons — typography, not just padding
   --------------------------------------------------------------------- */
main .btn {
  font-size: var(--fs-small);
  letter-spacing: var(--ls-button);
  font-weight: 500;
}
.hero__actions .btn,
.cta__actions .btn {
  min-height: 56px;
  padding-inline: var(--sp-7);
  font-size: var(--fs-body);
}
/* the primary ask sits a touch tighter than the quiet ones */
.hero__actions .btn--primary,
.cta__actions .btn--accent { letter-spacing: 0.06em; }
.hero__actions .btn--ghost,
.cta__actions .btn--ghost-on-ink { letter-spacing: 0.1em; }
.mth__link .btn { letter-spacing: var(--ls-button); }

.btn--accent {
  --btn-bg: var(--gold);
  --btn-fg: #1A1206;
  --btn-line: var(--gold);
}
.btn--accent:hover { --btn-bg: #B98D4E; --btn-line: #B98D4E; }
.cta__actions .btn--ghost-on-ink { --btn-line: rgba(243, 241, 238, 0.55); --btn-fg: #FFFFFF; }
/* the band settles into the footer instead of stopping against it */
.cta { background: linear-gradient(180deg, var(--c-paper) 0%, var(--c-paper) 62%, #F3F0EB 100%); }

/* =====================================================================
   UI convergence — the supplied homepage template is the single design
   baseline. Everything below overrides the editorial treatment so the
   page reads as the same design system, with ClinicOS brand and copy.
   ===================================================================== */

/* ---- Global rhythm: the template is denser than an essay ------------ */
main { --gap-section: clamp(4rem, 2.2rem + 4.6vw, 6rem); }
.cap, .flow, .out { padding-block: var(--gap-section); }
.cta { padding-block: clamp(2.5rem, 1.6rem + 2.6vw, 4rem); }

/* ---- Hero: tighter vertical density, larger product ---------------- */
.hero { padding-bottom: clamp(2rem, 1.2rem + 2vw, 3rem); }
.hero__grid { min-height: clamp(480px, 38vw, 580px); row-gap: var(--sp-7); }
.hero__copy { padding-top: 0; }
.hero__title { margin-top: var(--sp-5); font-size: clamp(2.125rem, 1.3rem + 3vw, 3.5rem); line-height: 1.3; }
.hero__desc { margin-top: var(--sp-5); font-size: 1.0625rem; line-height: 1.85; max-width: 32ch; }
.hero__actions { margin-top: var(--sp-6); }
.hero__actions .btn { min-height: 50px; padding-inline: var(--sp-6); font-size: 0.9375rem; }
.trust { margin-top: var(--sp-7); padding-top: var(--sp-6); gap: var(--sp-5); }
.trust__item + .trust__item { padding-left: var(--sp-5); }
.trust__key { font-size: 1.125rem; }
.trust__label { margin-top: var(--sp-3); font-size: 0.8125rem; }

/* ---- Capability: template feature style — icon on top, six across --- */
.caps__head, .cap .sec__head { margin-bottom: 0; }
.cap__grid { margin-top: clamp(2.25rem, 1.4rem + 2.6vw, 3.5rem); }
@media (min-width: 1080px) {
  .cap__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cap__item { padding: var(--sp-5) var(--sp-4); }
  .cap__item:not(:nth-child(3n + 1))::before { display: none; }
  .cap__item + .cap__item::before {
    content: ""; position: absolute; left: 0; top: 8%; bottom: 8%;
    width: 1px; background: var(--c-line-soft); display: block;
  }
  .cap__item + .cap__item { position: relative; }
}
.cap__item { text-align: center; }
.cap__icon { order: -1; align-self: center; margin-top: 0; width: 44px; height: 44px; }
.cap__icon svg { width: 30px; height: 30px; }
.cap__title {
  order: 0;
  margin-top: var(--sp-4) !important;
  padding-bottom: 0;
  border-bottom: 0;
  font-size: 1.0625rem;
  line-height: 1.5;
}
.cap__body { order: 1; margin-top: var(--sp-3); font-size: 0.875rem; line-height: 1.8; }

/* ---- Day: landscape frame, tighter track --------------------------- */
.flow__grid { min-height: 0; row-gap: var(--sp-7); }
@media (min-width: 1000px) { .flow__visual { grid-column: 7 / 13; } }
.flow__visual img { aspect-ratio: 16 / 11; }
@media (min-width: 1000px) { .flow__visual img { width: 100%; margin-left: 0; } }
.flow__sub { margin-top: var(--sp-4); font-size: 0.9375rem; }
.tl { margin-top: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); gap: var(--sp-4); }
.tl__dot { width: 40px; height: 40px; }
.tl__dot svg { width: 20px; height: 20px; }
.tl__step::after { top: 20px !important; }
.tl__time { margin-top: var(--sp-4); font-size: 0.8125rem; }
.tl__text { margin-top: var(--sp-2); font-size: 0.8125rem; line-height: 1.75; }
.flow__more { margin-top: clamp(1.5rem, 1rem + 1.6vw, 2.25rem); }

/* ---- Believe: tighter panel, feature-list rhythm -------------------- */
.mth__grid { min-height: clamp(400px, 32vw, 500px); }
.mth__inner { padding: clamp(2.5rem, 1.6rem + 3vw, 4rem) clamp(1.5rem, 1rem + 2.4vw, 3rem); }
.mth__title { margin-top: var(--sp-4); font-size: clamp(1.375rem, 1.05rem + 1.2vw, 1.75rem); line-height: 1.55; }
.mth__body { margin-top: var(--sp-4); font-size: 0.9375rem; line-height: 1.85; }
.mth__link { margin-top: var(--sp-6); }
.mth__points li + li { margin-top: var(--sp-6); }
.mth__mark { width: 34px; height: 34px; border-radius: 9px; }
.mth__mark svg { width: 16px; height: 16px; }
.mth__points h3 { font-size: 1rem; }
.mth__points p { margin-top: var(--sp-2); font-size: 0.8125rem; line-height: 1.75; }

/* ---- Outcome: four equal cards, template density -------------------- */
.out__grid { margin-top: clamp(2rem, 1.3rem + 2.2vw, 3rem); gap: var(--sp-5); }
@media (min-width: 1080px) {
  .out__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ocard--sm, .ocard--lg, .ocard--stat { grid-column: auto; grid-row: auto; }
}
.ocard { flex-direction: row; align-items: stretch; min-height: 0; }
.ocard__text { padding: var(--sp-5); flex: 1 1 auto; align-self: center; }
.ocard__text h3 { font-size: 1.0625rem; line-height: 1.5; }
.ocard__text p { margin-top: var(--sp-3); font-size: 0.8125rem; line-height: 1.8; }
.ocard__shot { flex: 0 0 40%; margin-top: 0; }
.ocard__shot img { height: 100%; aspect-ratio: auto; }
.ocard--sm .ocard__shot { flex: 0 0 40%; }
.ocard--sm .ocard__text { padding: var(--sp-5); }
.ocard--lg .ocard__shot { order: 0; }
.ocard--lg .ocard__shot img { aspect-ratio: auto; }
.ocard--stat { flex-direction: column; justify-content: center; padding: var(--sp-6) var(--sp-5); }
.ocard__lead { font-size: 1.25rem; line-height: 1.5; max-width: 14ch; }
.ocard__lead::after { width: 28px; margin-top: var(--sp-4); }
.ocard__note { margin-top: var(--sp-4); font-size: 0.8125rem; line-height: 1.8; }
@media (min-width: 1080px) { .ocard--stat { grid-column: auto !important; padding: var(--sp-6) var(--sp-5) !important; } }

/* ---- CTA: template band proportions -------------------------------- */
.cta__grid { min-height: 0; padding: clamp(2.25rem, 1.6rem + 2.2vw, 3.25rem) clamp(2rem, 1.3rem + 3vw, 4rem); }
.cta__title { font-size: clamp(1.25rem, 1.05rem + 1vw, 1.625rem); line-height: 1.55; }
.cta__desc { margin-top: var(--sp-4); font-size: 0.9375rem; line-height: 1.85; }
.cta__actions .btn { min-height: 50px; padding-inline: var(--sp-6); font-size: 0.9375rem; }

/* ---- Section titles: template scale --------------------------------- */
.sec__title, .flow__title, .out__title {
  font-size: clamp(1.375rem, 1.1rem + 1.15vw, 1.875rem);
  line-height: 1.5;
  max-width: 30ch;
}
.sec__rule { margin-top: var(--sp-5); }

/* Final convergence: section share of page height measured off the
   supplied template raster. CTA and Outcome carried more weight than
   the baseline; both are brought down to the template's proportion. */
.cta { padding-block: clamp(1.75rem, 1.1rem + 2vw, 2.75rem); }
.cta__grid { padding: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem) clamp(1.75rem, 1.2rem + 2.6vw, 3.5rem); }
.cta__desc { margin-top: var(--sp-3); }
.cta__actions .btn { min-height: 46px; }

.out { padding-block: clamp(3rem, 1.8rem + 3.4vw, 4.5rem); }
.out__grid { margin-top: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); gap: var(--sp-4); }
.ocard__text { padding: var(--sp-4) var(--sp-5); }
.ocard__text p { margin-top: var(--sp-2); }
.ocard--stat { padding: var(--sp-5) var(--sp-5); }
@media (min-width: 1080px) { .ocard--stat { padding: var(--sp-5) var(--sp-5) !important; } }
.ocard__lead { font-size: 1.125rem; }
.ocard__lead::after { margin-top: var(--sp-3); }
.ocard__note { margin-top: var(--sp-3); }

.cap { padding-block: clamp(3.25rem, 2rem + 3.6vw, 5rem); }
.flow { padding-block: clamp(3.25rem, 2rem + 3.6vw, 5rem); }