/* ============================================================
   Michy — homepage

   One document for every width, laid out in normal flow. The
   375px frame (4186:10) is the base; from 1024 up each section
   takes the desktop frame's composition — mostly a two-column
   split of the copy against the thing it describes.

   base.css draws the header, the sign-up and the footer.
   Nothing on this page is positioned.
   ============================================================ */

/* --- shared -------------------------------------------------- */


/* type scale measured off the mobile frame */
.h1 { font: 500 48px/1.3 var(--font-display); letter-spacing: -1.44px; }
.h2 { font: 500 32px/1.1 var(--font-display); letter-spacing: -0.96px; }
.h2--loose { line-height: 1.3125; }
/* Section headings run in two clauses; the second is set in the frame's
   grey, #4c5256. Every .h2 carrying a span sits on a light band — the
   hero's h1 is on the gradient and keeps its own 70% white. */
.h2 span { color: var(--text-secondary); }
.h2--loose >span{ color:#4C5256 }
.h3 { font: 500 26px/1.2 var(--font-display); letter-spacing: -0.78px; }
.h4 { font: 600 22px/1.2 var(--font-display); }
.copy { font: 400 14px/1.5 var(--font-sans); letter-spacing: -0.1px; color: var(--text-secondary); }
.quote { font: 400 16px/1.5 var(--font-sans); letter-spacing: -0.08px; color: var(--text-primary); }
.eyebrow { font: 500 12px/1.5 var(--font-sans); letter-spacing: 0.6px; }
.label { font: 500 14px/1.5 var(--font-label); letter-spacing: -0.07px; }

.lead + .lead { margin-top: 16px; }

/* pull-quote with the brand rule down its left edge */
.pull {
  border-left: 3.5px solid var(--surface-brand);
  padding: 6px 0 6px 21px;
}


/* --- hero -----------------------------------------------------
   Gradient and grid are background layers on the band itself, and the
   band is pulled up under the header so the gradient runs behind it.
   The grid keeps its native 1440x500.486 and centres, as node 4186:20
   has it — scaling it to the frame halved the cells. */
.hero {
  height: 1140px; overflow: hidden;
  margin-top: calc(-1 * var(--head-h)); padding-top: var(--head-h);
  background-color: var(--surface-brand);
  background-image: url("../assets/home/grid-hero.svg"),
                    url("../assets/shared/hero-gradient.jpg");
  background-position: center var(--head-h), center top;
  background-size: 1440px 500.486px, cover;
  background-repeat: no-repeat, no-repeat;
  text-align: center;
  color: var(--text-inverse);
}
.hero__eyebrow { padding-top: 32px; }
.hero__title { margin-top: 8px; }
.hero__title span { color: rgba(255, 255, 255, .7); }
.hero__lead { max-width: 330px; margin: 11px auto 0; color: var(--text-inverse); }
.hero__cta { margin: 23px auto 0; }
/* the hand-drawn arrow belongs to the 1440 frame only */
.hero__arrow { display: none; }

/* --- slack thread mock (hero) --------------------------------- */
.slack {
  margin-top: 29px;
  padding: 43px 39px 40px;
  border-radius: 24px 24px 0 0;
  background: var(--surface-page);
  text-align: left;
  color: var(--text-strong);
}
.slack__top { display: flex; align-items: center; gap: 10px; }
/* the channel rail belongs to the 1440 frame only */
.slack__channels { display: none; }
.slack__mark {
  width: 16px; height: 11px; flex: none;
  background:
    linear-gradient(var(--surface-ink) 0 0) 0 0/100% 2px no-repeat,
    linear-gradient(var(--surface-ink) 0 0) 0 4.5px/70% 2px no-repeat,
    linear-gradient(var(--surface-ink) 0 0) 0 9px/45% 2px no-repeat;
}
.slack__org { font: 600 21px/1 var(--font-display); color: var(--surface-brand-deep); }
.slack__avatar-dot {
  width: 17px; height: 17px; margin-left: auto; flex: none;
  border-radius: 50%; background: var(--surface-brand-deep);
}
.slack__chan { display: flex; align-items: flex-start; margin-top: 29px; }
.slack__chan-name { font: 700 13px/1.3 var(--font-sans); color: var(--surface-brand-deep); }
.slack__chan-meta { margin-top: 5px; font: 400 10px/1.3 var(--font-sans); color: var(--text-muted); }
.slack__watch {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: auto; padding: 6px 12px;
  border-radius: 100px; background: var(--surface-brand-deep);
  font: 400 10px/1 var(--font-sans); color: var(--text-inverse); white-space: nowrap;
  transition: background-color .18s ease;
}
.slack__watch:hover { background: var(--surface-brand); opacity: 1; }
.slack__watch i { width: 9px; height: 9px; border-radius: 50%; background: #fff; }

/* message rows */
.msg { display: flex; gap: 9px; margin-top: 22px; }
.av {
  display: grid; place-items: center; flex: none;
  width: 22px; height: 22px; border-radius: 50%;
  font: 700 11px/1 var(--font-sans);
}
.av--anna { background: var(--surface-tint); color: var(--surface-brand-deep); }
.av--tom  { background: var(--surface-tint-alt); color: var(--surface-brand-deep); }
.av--michy{ background: var(--surface-brand); color: var(--text-inverse); }
.av--gold { background: var(--accent-gold); color: #241800; }
.msg__head { display: flex; align-items: baseline; gap: 6px; }
.msg__head b { font: 700 11px/1.3 var(--font-sans); color: var(--surface-brand-deep); }
.msg__head time { font: 400 9px/1.3 var(--font-sans); color: var(--text-muted); }
.msg__head em {
  padding: 1px 4px; border-radius: 3px; background: var(--surface-tint-alt);
  font: 700 7px/1.3 var(--font-sans); font-style: normal; color: var(--text-subtle);
}
.msg__body { margin-top: 4px; font: 400 11.5px/1.32 var(--font-sans); color: var(--text-strong); }
.msg__body sup { font-size: 8px; color: var(--text-brand); vertical-align: super; line-height: 0; }



/* citation strip */
.cites {
  margin-top: 26px; padding: 14px 16px;
  border-radius: 8px; background: #f4f7fb; list-style: none;
}
.cites li { font: 400 10px/1.4 var(--font-sans); color: var(--text-faint); }
.cites li + li { margin-top: 13px; }
.cites b { font-weight: 700; color: var(--surface-brand); }
.cites__foot { color: var(--text-faint); }

/* ask bar */
.ask {
  display: flex; align-items: center; gap: 10px;
  margin-top: 34px; padding: 9px 9px 9px 16px;
  border: 1px solid #e3e9f0; border-radius: 10px;
}
.ask span { flex: 1; font: 400 11.5px/1.3 var(--font-sans); color: #9aa8bc; }
/* on the in-thread composer the send button sits outside the field */
.ask--dark {
  margin-top: 14px; padding: 0; border: 0; gap: 14px;
}
.ask--dark span {
  padding: 16px 20px; border: 1px solid #e3e9f0; border-radius: 8px;
  font-size: 12.5px; color: var(--text-strong);
}
.ask i {
  display: grid; place-items: center; flex: none;
  width: 33px; height: 33px; border-radius: 50%; background: var(--surface-brand);
}
.ask i img { width: 13px; height: 13px; filter: brightness(0) invert(1); }
.ask--dark i { background: var(--surface-ink); }

/* --- questions ------------------------------------------------ */
.questions { padding: 50px 0 45px; background: var(--surface-page); }
.questions .lead { margin-top: 14px; }
.questions .pull { margin-top: 20px; }
.mine-dark{
  padding: 0px 60px 0px 33px !important;
}

/* the second thread mock sits in a tinted tray */
.thread { margin-top: 17px; padding: 16px 11px; border-radius: 20px; background: var(--surface-muted); }
.thread__card { padding: 20px 20px 20px; border-radius: 14px; background: var(--surface-page); }
.thread__head { display: flex; justify-content: space-between; align-items: baseline; }
.thread__head p:first-child { font: 700 13px/1.3 var(--font-sans); color: var(--surface-ink); }
.thread__head p:last-child { font: 400 11px/1.3 var(--font-sans); color: var(--text-inverse-muted); }
.msg--lg { margin-top: 17px;padding: 0px 33px; }
.msg--lg .msg__body { margin-top: 1px; }
.msg--lg .msg__body { font-size: 13px; line-height: 1.4; }
.msg--lg .msg__head b { font-size: 12px; }
.msg--dark {
   padding: 7px 12px 9px;
   margin:0px 60px 0px 60px;
  border-radius: 10px; 
  margin-top: 20px !important;
  background: var(--surface-ink);
}
.msg--dark .msg__head b { color: var(--text-inverse); }
.msg--dark .msg__head time { color: #f2a50c; }
.msg--dark .msg__body { font-size: 12px; line-height: 1.35; color: var(--text-inverse); }
.thread__foot { 
  margin-top: 2px; font: 400 9px/1.3 var(--font-sans); color: var(--text-inverse-muted);
  padding: 0px 33px;
 }

/* --- dark sections -------------------------------------------- */
.band--dark { background: var(--surface-dark); color: var(--text-inverse); }
.band--dark .copy { color: var(--text-inverse); }

/* the grid ran at 50% as an image layer; as a background it takes the
   same wash from a flat overlay in front of it */
.fragile {
  overflow: hidden; padding: 44px 0 54px;
  background-image: linear-gradient(rgba(12, 22, 37, .5), rgba(12, 22, 37, .5)),
                    url("../assets/home/grid-cta.svg");
  background-position: center; background-size: cover; background-repeat: no-repeat;
}
.fragile .lead { margin-top: 16px; }

.stats {
  display: grid; grid-template-columns: 1fr 1fr;
  margin-top: 25px;
  border-top: 1px solid rgba(255, 255, 255, .18);
}
.stats div {
  padding: 12px 0 13px;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}
.stats div:nth-child(odd) { border-right: 1px solid rgba(255, 255, 255, .18); }
.stats div:nth-child(even) { padding-left: 22px; }
.stats__k { font: 400 12px/1.5 var(--font-sans); color: rgba(255, 255, 255, .75); }
.stats__v { margin-top: 6px; font: 400 26px/1.2 var(--font-serif-alt); }

.notin { margin-top: 24px; font: 500 12px/1.5 var(--font-sans); }
.bullets { margin-top: 12px; list-style: none; }
.bullets li {
  display: flex; gap: 20px;
  font: 400 13px/1.5 var(--font-sans); color: var(--text-inverse);
}
.bullets li + li { margin-top: 15px; }
.bullets li::before {
  content: ""; flex: none; margin-top: 7px;
  width: 6px; height: 6px; background: var(--accent-gold-deep);
}
.rule { height: 1px; margin-top: 23px; background: rgba(255,255,255,.18); }
.says { display: flex; align-items: center; gap: 12px; margin-top: 35px; font: 400 12px/1.5 var(--font-sans); }
.says__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-gold); }
.runway { margin: 26px 0 0 19px; font: 400 26px/1.2 var(--font-serif-alt); }
.goldrule {
  height: 1px; margin: 19px 16px 0;
  background: linear-gradient(90deg, var(--accent-gold-deep), rgba(189, 134, 38, .25));
}
.tofind {
  margin-top: 42px; text-align: center;
  font: 400 26px/1.23 var(--font-serif-alt);
}
.tofind__sub { margin-top: 14px; text-align: center; font: 400 14px/1.5 var(--font-sans); color: #9fb3d1; }

/* --- one plan, 10,000 futures --------------------------------- */
.futures { padding: 46px 0 0; background: var(--surface-page); }
.futures .lead { margin-top: 23px; }

.chart { --plot-h: 125px; margin: 27px 0 0; padding: 8px; border-radius: 20px; background: #eef3f7; }
.chart__inner {
  padding: 16px 16px 14px;
  border-radius: 14px;
  background: linear-gradient(27.6deg, #2e8ae6 0%, #1560c4 42%, #08224e 100%);
  color: var(--text-inverse);
}
.chart__caps { display: grid; gap: 3px; font: 400 11px/1.4 var(--font-sans); }
/* the four gridlines are a repeating gradient rather than four elements */
.chart__plot {
  height: var(--plot-h); margin-top: 14px;
  background-image: repeating-linear-gradient(to bottom,
    transparent 0, transparent calc(22% - 1px),
    rgba(255, 255, 255, .35) calc(22% - 1px), rgba(255, 255, 255, .35) 22%);
}
.chart__plot img { width: 100%; height: 100%; object-fit: fill; opacity: .85; }
.chart__you { display: flex; gap: 8px; margin-top: 6px; font: 400 11px/1.4 var(--font-sans); }
.chart__you::before {
  content: ""; flex: none; margin-top: 5px;
  width: 6px; height: 6px; border-radius: 50%; background: #fff;
}
.chart__legend { display: flex; gap: 22px; margin-top: 14px; list-style: none; }
.chart__legend li { display: flex; gap: 8px; font: 400 11px/1.4 var(--font-sans); }
.chart__legend li::before {
  content: ""; flex: none; margin-top: 5px;
  width: 6px; height: 6px; border-radius: 50%; background: #fff;
}
.chart__foot { margin-top: 16px; font: 400 10.5px/1.4 var(--font-sans); }
.futures .pull { margin-top: 26px; font-size: 14px; line-height: 1.46; padding-top: 0; padding-bottom: 0; }
/* the hand-drawn arrow belongs to the 1440 frame only */
.futures__arrow { display: none; }

/* The bold plan line is a second layer over the fan. The frame draws it at
   the fan's full width, from 35.2% to 78.2% down it, so below 1024 it is
   pulled back over the plot and gives its own height back underneath —
   the three figures sum to zero, so it adds no vertical rhythm. */
.chart__plan {
  display: block; width: 100%; object-fit: fill;
  height: calc(var(--plot-h) * 0.4304);
  margin: calc(var(--plot-h) * -0.648) 0 calc(var(--plot-h) * 0.2176);
}

/* --- your breaking point has a name --------------------------- */
.drivers {
  padding: 51px 0 43px;
  background: linear-gradient(180deg, #fbfdfe 0%, #eaf2f6 100%);
}
.drivers .lead { margin-top: 14px; }
.drivers .pull { margin-top: 26px; }

.drv { margin-top: 21px; padding: 24px 26px 22px; border-radius: 20px; background: #fdfdfd; }
.drv__cap { font: 400 11.5px/1.45 var(--font-sans); color: var(--text-secondary); }
.drv__row { margin-top: 15px; }
.drv__row p { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.drv__row span { font: 400 12.5px/1.3 var(--font-sans); color: var(--text-primary); }
.drv__row b { font: 400 12px/1.3 var(--font-sans); color: var(--text-primary); }
.drv__bar { height: 5px; margin-top: 8px; border-radius: 3px; background: #eceff3; overflow: hidden; }
.drv__bar i { display: block; height: 100%; border-radius: 3px; background: #d7dce2; }
.drv__row--top {
  margin: 7px -12px 0; padding: 12px; border-radius: 10px;
  background: var(--surface-ink);
}
.drv__row--top span, .drv__row--top b { color: var(--text-inverse); }
.drv__row--top .drv__bar { background: #fff; }
.drv__row--top .drv__bar i { background: var(--accent-gold); }
.drv__scale {
  display: flex; justify-content: space-between;
  margin-top: 24px; font: 400 9px/1.4 var(--font-sans); color: var(--text-primary);
}
.drv__note { margin-top: 14px; font: 400 9px/1.4 var(--font-sans); color: var(--text-subtle); }

/* --- know what to watch --------------------------------------- */
.guidance { padding: 56px 0 0; background: var(--surface-page); }
.guidance .lead { margin-top: 19px; }
/* Decorative: a zero-height rail, so the arrow adds no vertical rhythm.
   The asset curls up and to the right. On desktop the copy it points at is
   in the next column, so a quarter turn aims it there; stacked, the cards
   are underneath instead, so it turns further and mirrors, dropping into
   them head-first to the left. The element keeps the asset's 1.227 ratio,
   and at 135deg the turned box is square whatever that ratio, so this
   renders a 17 x 47 stroke 13 in from the column's right edge. */
.guidance__aside { display: grid; justify-items: end; height: 0; }
.guidance__arrow {
  width: 41.8px; height: 34.1px; margin: -19px 3px 0 0;
  transform: scaleX(-1) rotate(135deg);
}

.gcards { display: grid; gap: 11px; margin-top: 42px; }
.gcard {
  padding: 27px 26px 50px;
  border: 1px solid var(--border-default);
  border-radius: 20px;
  background: var(--surface-muted);
}
/* The glass plate overhangs the tile, so the tracks are pinned to the tile's
   own size — an auto track would grow to the plate and shift the glyph. */
.gcard__icon {
  display: grid; place-items: center;
  grid-template-areas: "icon";
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  width: 40px; height: 40px;
  border-radius: 14px; background: var(--surface-brand);
}
.gcard__icon > * { grid-area: icon; }
.gcard__icon::after {
  content: ""; grid-area: icon;
  justify-self: start; align-self: start; margin: -9px 0 0 20px;
  width: 42px; height: 59px; border-radius: 4px;
  background: rgba(255, 255, 255, .1); backdrop-filter: blur(8px);
}
.gcard__icon img { width: 20px; height: 20px; }
.gcard .h3 { margin-top: 45px; }
.gcard .label { margin-top: 14px; color: var(--text-secondary); }

/* --- every number has a source -------------------------------- */
.sources { padding: 52px 0 15px; background: var(--surface-page); }
.sources .h2 { max-width: 320px; }
.sources .lead { margin-top: 17px; max-width: 336px; }
.sources .lead + .lead { max-width: 343px; }
.sources .pull { margin-top: 25px; padding-top: 0; padding-bottom: 0; }
/* the white card and the dark overlay share one grid cell */
.thread--src {
  display: grid; grid-template-areas: "mock";
  grid-template-columns: minmax(0, 1fr);
  margin-top: 7px; padding: 26px 16px 30px;
}
.thread--src > * { grid-area: mock; justify-self: start; align-self: start; }
.thread--src .thread__card { padding: 16px 18px 46px; }
.thread__over {
  margin: -34px -6px 0 26px; padding: 14px 16px 16px;
  border-radius: 12px; background: var(--surface-ink); color: var(--text-inverse-subtle);
}
.msg--tight { align-items: flex-start; margin-top: 0; gap: 10px; }
.msg--tight + .msg--tight { margin-top: 16px; }
.thread__over .msg__body { margin-top: 2px; color: var(--text-inverse-subtle); }
.thread__over .av { width: 20px; height: 20px; }

/* --- built for plans with moving parts ------------------------ */
.pricing {
  overflow: hidden; padding: 60px 0 52px;
  background: var(--surface-brand-deep) url("../assets/shared/hero-gradient.jpg")
              center / cover no-repeat;
}
.pcard { padding: 20px 26px 45px; border-radius: 20px; background: var(--surface-page); }
.pcard .lead { margin-top: 15px; }

.pcard .dgm { width: 100%; margin-top: 12px; }

/* pricing card: the Figma mobile frame sets this body at 12px, and the
   heading box is narrower than the card so it breaks after "plans". */
.pcard .h2 { max-width: 264px; }
.pcard .lead { font-size: 12px; max-width: 275px; }

.glass {
  margin-top: 20px; padding: 32px 26px 38px;
  border: 1px solid rgba(255, 255, 255, .45); border-radius: 20px;
  background: rgba(255, 255, 255, .08); color: var(--text-inverse);
}
.price { display: flex; align-items: baseline; gap: 8px; margin-top: 18px; }
.price b { font: 500 32px/1.1 var(--font-display); letter-spacing: -0.96px; }
.price span { font: 500 13px/1.5 var(--font-sans); letter-spacing: -0.065px; }
.glass__note { margin-top: 12px; font: 500 12px/1.5 var(--font-sans); letter-spacing: -0.06px; }
.glass__rule { height: 1px; margin: 26px 0 0; border: 0; background: rgba(255, 255, 255, .55); }
.glass__big { margin-top: 26px; font: 500 18px/1.5 var(--font-sans); letter-spacing: -0.09px; }

/* --- built with you ------------------------------------------- */
.onboarding { padding: 62px 0 98px; background: var(--surface-page); }
.onboarding .lead { margin-top: 15px; }
.onboarding .pull { margin-top: 20px; padding-top: 0; padding-bottom: 0; }

.systems { margin-top: 32px; padding: 26px 18px 30px; border-radius: 20px; background: var(--surface-muted); }
.systems__cap { font: 500 13px/1.5 var(--font-sans); color: var(--text-primary); }
.systems__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 22px; list-style: none; }
.systems__grid li {
  display: grid; place-items: center; height: 52px;
  border-radius: 10px; background: var(--surface-page);
  font: 500 14px/1.5 var(--font-sans); letter-spacing: -0.07px; color: var(--text-primary);
}
/* Collapsed borders make a table's own padding a no-op, which left the
   ledger's rows flush against the card's edges. Separate borders with zero
   spacing keep the look and let the inset apply — the caption then sits
   outside the table box, so it carries the card's top and its background,
   exactly as the phone and desktop blocks already do. */
.fin {
  width: 100%; table-layout: fixed; margin-top: 14px;
  padding: 0 20px 6px; border-radius: 0 0 14px 14px;
  background: var(--surface-page);
  border-collapse: separate; border-spacing: 0;
}
/* A <caption> laid out as flex shrinks to fit, which leaves space-between
   nothing to spread and strands the right-hand label mid-table. It stays a
   table-caption, and that label floats to the edge — the way both frames
   draw it. The table is border-collapse, so its own padding is a no-op and
   the inset has to live here. */
.fin caption {
  display: table-caption; padding: 18px 20px 13px; text-align: left;
  border-radius: 14px 14px 0 0; background: var(--surface-page);
  font: 500 12.5px/1.5 var(--font-sans); color: var(--text-primary);
}
.fin caption span:last-child { float: right; font-weight: 500; }
.fin th, .fin td {
  padding: 11px 0; border-top: 1px solid #eceff2;
  font: 400 11px/1.5 var(--font-sans); color: var(--text-secondary);
}
.fin th { text-align: left; font-weight: 400; }
.fin td { text-align: right; }
.notif { margin-top: 14px; padding: 14px 16px 16px; border-radius: 14px; background: var(--surface-ink); color: var(--text-inverse-subtle); }
.notif__head { display: flex; align-items: center; gap: 8px; }
.notif__head img { width: 15px; height: 15px; }
.notif__head b { font: 700 12px/1.3 var(--font-sans); }
.notif__head time { margin-left: auto; font: 400 9.5px/1.3 var(--font-sans); }
.notif__title { margin-top: 10px; font: 400 14px/1.4 var(--font-sans); }
.notif__item { display: flex; gap: 5px; margin-top: 12px; font: 400 11px/1.4 var(--font-sans); color: var(--text-inverse); }
.notif__item::before { content: "\2022"; flex: none; }
.notif__item sup, .notif__cite sup { font-size: 7px; color: rgba(111, 180, 245, .94); }
.notif__cite { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .12); font: 400 9px/1.4 var(--font-sans); color: rgba(255, 255, 255, .5); }

/* --- interactive states ---------------------------------------- */
a { transition: opacity .18s ease; }
a:hover { opacity: .75; }

/* --- text-box widths, matched to the Figma frame ---------------- */
/* Figma sets an explicit width per text node; these reproduce its
   exact line breaks. */
.questions .h2   { max-width: 264px; }
.questions .lead { max-width: 299px; }
.questions .pull { max-width: 304px; padding-top: 6px; padding-bottom: 6px; }
.drivers .h2 { max-width: 287px; }
.drivers   .pull { max-width: 296px; margin-top: 33px; padding-top: 0; padding-bottom: 0; }

/* Hero Slack mock, matched to the 375px Figma frame (node 4186:10).
   Measured off that render: the avatar is 29px not 22, the gap to the message
   is 13px not 9, and the body sets at 10px on a 15px line pitch - my 11.5px
   was wrapping the Michy reply to six lines where Figma takes five, which is
   what pushed the citation strip and the ask bar down past the fold.
   Scoped below 700px: the tablet band frees .hero's height, so the card
   is not clipped there and must keep the wider layout's own rhythm. */
@media (max-width: 699.98px) {
  .slack .av {
    width: 29px;
    height: 29px;
  }
  .slack .msg { gap: 13px; }
  /* Figma sets the two messages on different leading: the Anna reply runs at a 12px pitch, the Michy reply at 15px. Measured off the frame, not assumed. */ .slack .msg__body {
    font-size: 10px;
    line-height: 1.2;
    margin-top: 6px;
  }
  .slack .msg + .msg .msg__body { line-height: 1.5; }
  .slack .msg + .msg .msg__head { padding-top: 2px; }
  /* Vertical rhythm solved against four landmarks in the 375px frame: the card top (620), the Michy avatar (815), the citation strip (926) and the ask bar (1074). Only the second message carries the tightened margin - the Anna message already lands within 1px, so .msg itself must not change. */ .slack .msg { margin-top: 14px; }
  .slack .msg + .msg { margin-top: 14px; }
  .slack .cites { margin-top: 14px; }
  /* re-measured against the 375 frame: the first message sits 34 under the
     channel row (was 23) and the reply 5 under it; the strip is 120 tall;
     the CTA is the frame's 48-tall pill and the card follows it by 28 */
  .slack .slack__chan + .msg { margin-top: 21px; }
  .slack .msg + .msg { margin-top: 5px; }
  .slack .cites { margin-top: 17px; padding: 12px 16px; }
  .hero__cta { --pill-pad: 5.9px; --pill-dot: 36.18px; margin-top: 27px; }
  .slack { margin-top: 28px; }
  /* the band ends where the card ends: the frame's 1140 is that sum at 375,
     but a fixed height leaves a hole under the ask bar at any other width,
     so the height comes from the content here as it does above 700 */
  .hero { height: auto; }
  .slack .ask {
    margin-top: 23px;
    height: 41px;
    padding: 0 9px 0 16px;
    border-color: #d9e1ec;
  }
  /* cites is 125 tall now, not 123 */ /* Fragile section, matched to the same frame: it runs 1999-2879 there (881 tall). Mine started 4px high - the questions section above was 855 against Figma's 860, though its own content aligns within 2px, so the shortfall is at its foot - and ran 8px long with a 4px-tight bullet list. The bullet rule must stay inside this query: the tablet band lays the bullets out as a grid with margin-top:0, which a .fragile-scoped rule would otherwise outrank. */ .questions { padding-bottom: 50px; }
  .fragile { padding: 40px 0 51px; }
  /* re-measured against the 375 frame: the band is the flat dark surface
     (no grid), the stat cells sit in a boxed grid with a 20px inset, the
     bullets hug their squares, the gold rule fades in from the left */
  .fragile { background-image: none; }
  .stats { border: 1px solid rgba(255, 255, 255, .18); border-bottom: 0; }
  .stats div, .stats div:nth-child(even) { padding: 12px 20px 13px; }
  .notin { margin-top: 24px; text-transform: capitalize; }
  .bullets li { gap: 10px; }
  .goldrule { background: linear-gradient(90deg, rgba(255, 255, 255, .1), var(--accent-gold)); }
  .tofind { line-height: 1.12; }
  .tofind__sub { color: rgba(255, 255, 255, .75); }
  /* .tofind is 28px now, not 26 */ .fragile .bullets li + li { margin-top: 17px; }
  /* --- hero, matched node-by-node to frame 4186:10 --------------- card 4186:23 16,614,343x525 radius-top 25 Acme 4186:153 top 655 cites 4186:25 55,926,265x125 r10 #f4f8fd ask 4186:26 55,1074,266x41 r10 #d9e1ec CTA pill 4186:33 76,538,223.084x48 with the dot 4186:34 inset 5.9px right */ .slack {
    padding: 43px 39px 24px;
    border-radius: 25px 25px 0 0;
  }
  .cites {
    padding: 15px 16px;
    border-radius: 10px;
    background: #f4f8fd;
  }
  .hero .pill { justify-content: space-between; }
  /* --- questions, matched node-by-node to frame 4186:10 ----------- heading 4186:37 16,1189 w271 · lead 4186:38 16,1329 w304 quote rule 4186:40 16,1454 3x116 · quote text 4186:39 40,1464 w280 tray 4186:182 16,1593 344x353 r25 #e8f0f5 */ .questions .h2 { max-width: 271px; }
  .questions .lead { max-width: 304px; }
  .questions .pull {
    max-width: 304px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .questions .thread {
    border-radius: 25px;
    padding: 13px 11px;
    margin-top: 23px;
  }
  .questions { padding-bottom: 53px; }
  /* fragile band starts 1999 */ /* --- sizes read off frame 4186:10, not fitted ------------------ Every value below is the node's own text-[Npx]; my build had drifted from each by 1-2px, and the diagram by a full scale step. */ .runway { font-size: 28px; }
  /* was 26 */ .tofind { font-size: 28px; }
  /* was 26 */ .chart__you { font-size: 10px; }
  /* was 11 */ .chart__foot { font-size: 10px; }
  /* was 10.5 */ .price span { font-size: 12px; }
  /* was 13 */ .systems__cap { font-size: 14px; }
  /* was 13 */ /* The mobile plan-model diagram is the desktop one at exactly 0.601: Seats 94.976/158, Usage 87.161/145, Revenue 97.981/163, Plan 69.729/116 all give 0.601, and the label 16*0.601 = 9.616 matches its 9.618. So the box is 526*0.601 = 316.1 wide, starting at x=29 - which is 13px outside the card's 26px padding, not flush with the text column. */ /* CTA band starts at 8292 in the frame; the gap below the onboarding section ran 49px long. */ .onboarding { padding-bottom: 55px; }
  /* fin table 4186:326 and notif 4186:346 are both 302 wide inset 21px from the systems card, not full-bleed inside it. The table is border-collapse, so padding on it is a no-op - its height has to be explicit. */ .systems .notif { padding-bottom: 12px; }
  /* 135 tall, node 4186:346 */ /* --- questions thread mock, sizes read off node 4186:182 ------- Every line in this mock was running ~1.2x large. */ #questions .thread__head p:first-child { font-size: 9.576px; }
  #questions .thread__head p:last-child { font-size: 8.379px; }
  #questions .av { font-size: 7.886px; }
  #questions .msg__head b { font-size: 8.45px; }
  #questions .msg__head time { font-size: 6.76px; }
  #questions .msg--lg .msg__body { font-size: 10.703px; }
  #questions .msg--dark .msg__body { font-size: 9.576px; }
  #questions .ask--dark span { font-size: 12.139px; }
  #questions .thread__foot { font-size: 8px; }
  /* the tray is a fixed 344x353 frame (4186:182); with the mock type at its real size the content no longer fills it, so the box is set explicitly */ /* --- sources mock, node 4186:90 -------------------------------- Outer 343x355 with overflow-clip; the white thread card is a 274x273 box at (25,19) and the dark overlay 285x130 at (42,207), both absolutely placed rather than stacked in flow. The card's own content measures 264 tall, so 273 gives it room - this is a resize, not a crop. */ .pcard { padding-bottom: 36px; }
  /* card 366 tall, node 4186:16 */ .glass { padding-bottom: 23px; }
  /* card 373 tall, node 4186:15 */ /* Section gaps, each the measured shortfall to its box's Figma top: chart 3153, drivers card 3914, guidance 4756, sources 5926, pricing 6396, glass 6790, systems 7661, CTA 8292, form 8536. */ .futures { padding-top: 48px; }
  /* +2 */ .drivers { padding-top: 57px; }
  /* +6 */ .guidance { padding-top: 56px; }
  /* absorbs the +3 from the drivers card height */ .sources { padding-top: 67px; }
  /* +15 */ .pricing { padding-top: 100px; }
  /* +40 */ .glass { margin-top: 28px; }
  /* +8 */ .systems { margin-top: 46px; }
  /* +14 */ .systems { padding-bottom: 33px; }
  /* card 581 tall, node 4186:313 */ .onboarding { padding-bottom: 50px; }
  /* +26 */ .drv { padding-bottom: 25px; }
  /* card 356 tall, node 4186:46 */ .notif { margin-top: 11px; }
}

/* ============================================================
   Pinned geometry — only from 375px up
   These reproduce exact Figma boxes from the 375px frame. Below
   375 they would overflow the column (the 344px tray already did
   at 320 and 350), so under that width the layout stays fluid
   and simply scales down instead of pinning to numbers it cannot
   fit.
   ============================================================ */
@media (min-width: 375px) and (max-width: 699.98px) {
  .questions .thread { width: 344px; }
  /* the ask bar spans the column, as the citation strip above it does */
  #questions .thread { height: 353px; }
  .thread--src {
    height: 355px;
    overflow: hidden;
    padding: 0;
  }
  .systems .fin, .systems .notif {
    width: 302px;
    margin-left: 3px;
  }
  .systems .fin { height: 206px; }
  .pcard .dgm {
    width: 316.1px;
    margin-left: -13px;
  }
  .thread--src .thread__card {
    margin: 19px 0 0 25px;
    width: 274px;
    height: 273px;
    border-radius: 17.298px;
  }
  .thread--src .thread__over {
    margin: 207px 0 0 42px;
    width: 285px;
    height: 130px;
    border-radius: 17.298px;
  }
}

/* --- tablet (700-1023px) ------------------------------------------------
   No tablet frame exists in the Figma file, so this band widens the mobile
   layout rather than inventing a new one: the column grows, the card grids
   go multi-column, and text blocks keep a readable measure. --------------- */
@media (min-width: 700px) and (max-width: 1023.98px) {
  .hero { height: auto; padding-bottom: 0; }
  .hero__lead, .questions .lead, .questions .h2,
  .questions .pull, .drivers .h2, .drivers .pull,
  .sources .lead { max-width: 620px; }
  .hero__lead { max-width: 520px; }
  .hero__title { max-width: 620px; margin-left: auto; margin-right: auto; }
  .gcards { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .gcard { padding: 24px 22px 28px; }
  .gcard .h3 { margin-top: 34px; }
  /* the panel is twice the phone's width, so it takes a wider inset and a
     clearer gap between the chips and the table below them */
  .systems { padding: 32px 32px 34px; }
  .systems__grid { grid-template-columns: repeat(4, 1fr); }
  .systems .fin { margin-top: 26px; }
  .systems .fin caption { font-size: 16px; font-weight: 600; }
  .systems .notif { margin-top: 22px; }
  /* four cells, not the phone's two, so the odd/even pattern the base uses
     to inset the right column has to give way to a uniform one: the first
     cell sits flush with the column, the rest clear their own divider. */
  .stats { grid-template-columns: repeat(4, 1fr); }
  .stats div, .stats div:nth-child(even) {
    padding-left: 22px; border-right: 1px solid rgba(255, 255, 255, .18);
  }
  .stats div:first-child { padding-left: 0; }
  .stats div:last-child { border-right: 0; }
  .bullets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 24px; }
  .bullets li + li { margin-top: 0; }

  /* these kept the phone's measure while their column ran to 620 */
  .sources .h2 { max-width: 620px; }
  .sources .lead + .lead { max-width: 620px; }
  .pcard .h2, .pcard .lead { max-width: none; }

  /* The mock is one card with the refusal hanging off its foot. The phone's
     offsets are pinned to the 375 frame and the desktop's to the 1440 one,
     so between them the two simply stacked on the same spot: here they run
     in flow, the overlay pulled back over the card's lower edge. */
  .thread--src { display: block; padding: 26px 24px 30px; }
  .thread--src .thread__card {
    width: 100%; margin: 0;
    /* the overlay eats the last 52px, so the foot has to clear the copy */
    padding: 24px 28px 96px;
  }
  .thread--src .thread__over {
    width: calc(100% - 68px); margin: -52px 0 0 68px;
    padding: 22px 26px 24px;
  }
}

/* ============================================================
   .dgm — the "plan model" node diagram

   One component, drawn once in Figma's own 526x204 coordinate
   space and reused at both sizes. --u is one design pixel: at
   1440 the box is 526px wide so --u is exactly 1px and every
   number below is the Figma number; narrower, the whole diagram
   scales with its container, type and radii included.

   Every part shares a single grid cell and is placed by its own
   margin, so the free-form layout needs no positioning. Paint
   order is DOM order: wires first, then nodes over them.
   ============================================================ */
.dgm {
  --u: calc(100cqw / 526);
  display: grid; grid-template-areas: "dgm";
  grid-template-columns: minmax(0, 1fr);
  width: 526px; aspect-ratio: 526 / 204;
  container-type: inline-size;
}
.dgm > * {
  grid-area: dgm; justify-self: start; align-self: start;
  /* margin-top / margin-left carry the node's own Figma coordinate */
  margin: calc(var(--u) * var(--y, 0)) 0 0 calc(var(--u) * var(--x, 0));
}

/* connectors, under the nodes they join */
.dgm__wire--a { --x: 124; --y: 68.5;   width: calc(var(--u)*119.5); height: calc(var(--u)*17.5); }
.dgm__wire--b { --x: 291; --y: 34.497; width: calc(var(--u)*129);   height: calc(var(--u)*69.006); }
.dgm__wire--c { --x: 245; --y: 162.5;  width: calc(var(--u)*103.5); height: calc(var(--u)*41.5); }

.dgm__node  { height: calc(var(--u)*70); border-radius: calc(var(--u)*10); }
.dgm__dot   { display: grid; place-items: center; width: calc(var(--u)*40); height: calc(var(--u)*40); }
.dgm__dot img { width: 100%; height: 100%; }
.dgm__glyph { width: calc(var(--u)*18); height: calc(var(--u)*18); }
.dgm__label {
  font-family: var(--font-sans); font-weight: 500;
  font-size: calc(var(--u)*16); line-height: 1.5;
  letter-spacing: calc(var(--u)*-0.08); white-space: nowrap;
}

.dgm__node--seats  { --x: 0;   --y: 46;  width: calc(var(--u)*158); background: var(--surface-dark); }
.dgm__dot--seats   { --x: 17;  --y: 61; }
.dgm__glyph--seats { --x: 27;  --y: 71;  width: calc(var(--u)*19); height: calc(var(--u)*19); }
.dgm__label--seats { --x: 70;  --y: 69;  color: var(--text-inverse-subtle); }

.dgm__node--usage  { --x: 381; --y: 0;   width: calc(var(--u)*145); background: var(--surface-muted); }
.dgm__dot--usage   { --x: 398; --y: 15; }
.dgm__glyph--usage { --x: 409; --y: 26; }
.dgm__label--usage { --x: 451; --y: 23;  color: var(--text-primary); }

.dgm__node--rev    { --x: 349; --y: 128; width: calc(var(--u)*163); background: var(--accent-gold); }
.dgm__dot--rev     { --x: 366; --y: 143; }
.dgm__glyph--rev   { --x: 377; --y: 154; }
.dgm__label--rev   { --x: 419; --y: 151; color: var(--text-inverse-subtle); }

/* the plan-model card sits above the connectors that run into it */
.dgm__plan {
  --x: 187; --y: 85;
  width: calc(var(--u)*116); height: calc(var(--u)*88);
  border-radius: calc(var(--u)*15); background: var(--surface-subtle);
  box-shadow: 0 calc(var(--u)*10) calc(var(--u)*20) rgba(0, 0, 0, .15);
}
.dgm__plan-label {
  --x: 212; --y: 105; width: calc(var(--u)*67);
  color: var(--text-primary); text-align: center; white-space: normal;
}


/* ============================================================
   Desktop — the 1440 frame's composition

   The flow above is the whole page; from 1024 up each section
   only changes shape. Almost every one is the same move: the
   copy takes one column and the thing it describes takes the
   other, on the shared 1216 measure.
   ============================================================ */
@media (min-width: 1024px) {

  /* --- type: the frame's larger scale ------------------------------- */
  .h1    { font-size: var(--fs-title); letter-spacing: -.03em; }
  .h2    { font-size: var(--fs-h2); letter-spacing: -.03em; }
  .h3    { font-size: 32px; letter-spacing: -.03em; }
  .copy  { font-size: var(--fs-body); letter-spacing: -.005em; }
  .quote { font-size: 18px; }
  .label { font-size: 16px; }
  .lead + .lead { margin-top: 21px; }
  .pull  { padding: 0 0 0 24px; }

  /* --- hero ---------------------------------------------------------- */
  /* the band takes its height from the mock, which ends at its bottom edge */
  .hero { height: auto; }
  .hero__eyebrow { padding-top: 48px;font-size: 14px;font-weight: 400; }
  .hero__title { max-width: 869px; margin: 10px auto 0; }
  .hero__lead  { max-width: 769px; margin-top: 10px; }
  .hero__cta   { margin-top: 22px; }
  /* sits at its static spot after the CTA and takes no room in the line, so
     the margins push it up and to the right without moving the pill. */
  .hero__arrow {
    display: inline-block; position: absolute;
    width: 62px; height: 55px; margin: 0px 0 0 260px;
  }

  /* the mock: a channel rail beside the thread, 1128 wide and centred */
  .slack--hero {
    display: grid; grid-template-columns: 219px minmax(0, 1fr);
    width: min(1128px, 100%); margin: 65px auto 0; padding: 0;
    border-radius: 24px 24px 0 0; overflow: hidden;
    /* a 1px ring held 25px off the mock, the gap left clear. outline follows
       the corner radius and isn't clipped by the mock's own overflow; the hero
       clips the mock at the bottom, so the ring reads on top, left and right. */
    outline: 1px solid rgba(255, 255, 255, .7);
    outline-offset: 25px;
  }
  /* the rail is the frame's dark navy column */
  .slack__rail {
    padding: 31px 19px 31px 26px; background: var(--surface-ink); color: var(--text-inverse);
  }
  .slack__rail .slack__org {
    font: 700 14.5px/1 var(--font-sans); color: var(--text-inverse);
  }
  .slack__rail .slack__mark { display: none; }
  .slack__rail .slack__avatar-dot { width: 20px; height: 20px; background: var(--surface-page); }
  .slack__pane { padding: 0 42px 24px; }
  /* the channel header runs full-bleed so its rule meets the rail */
  .slack__pane .slack__chan {
    align-items: center; margin: 0 -42px; padding: 23px 42px 9px;
    border-bottom: 1px solid var(--border-default);
  }
  .slack__pane .slack__chan > div { display: flex; align-items: baseline; gap: 31px; }
  .slack__channels {
    display: block; margin-top: 20px; padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .65);
  }
  .slack__group {
    margin-top: 22px; font: 400 11.5px/1.5 var(--font-sans); color: var(--text-inverse-muted);
  }
  .slack__channels .slack__group:first-child { margin-top: 0px; }
  .slack__channels ul { list-style: none; margin-top: 4px; }
  .slack__channels li {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 12px; margin: 0 -5px 0 -12px; border-radius: 6px;
    font: 400 13px/1.5 var(--font-sans); color: var(--text-inverse);
  }
  .slack__channels .is-current {
    background: var(--brand-primary-light); font-weight: 600;
  }
  .slack__dms i {
    flex: none; width: 11px; height: 11px; border-radius: 50%;
    background: var(--surface-page);
  }
  .slack__dms li:first-child i { background: var(--blue-300); }
  .slack__dms em {
    padding: 1px 5px; border-radius: 3px; background: var(--surface-page);
    font: 700 9px/1.3 var(--font-sans); font-style: normal; color: var(--surface-ink);
  }
  .slack__chan-name { font-size: 17px; }
  .slack__chan-meta { margin-top: 0; font-size: 12px; }
  .slack__watch { gap: 11px; padding: 8px 40px 8px 12px; font-size: 12px; letter-spacing: 0.02rem;}
  .slack__watch i { width: 18px; height: 18px; }

  .slack--hero .msg { gap: 17px; margin-top: 28px; }
  .slack--hero .slack__chan + .msg { margin-top: 32px; }
  .slack--hero .av { width: 35px; height: 35px; font-size: 17px; }
  .slack--hero .msg__head b { font-size: 15px; }
  .slack--hero .msg__head time { font-size: 11px; }
  /* the reply measures 460 in the frame; the rest of the pane stays clear */
  .slack--hero .msg__body { max-width: 460px; margin-top: 4px; font-size: 15px; line-height: 1.45; }
  /* the citation strip lines up with the reply text, two entries to a row */
  .slack--hero .cites {
    display: grid; grid-template-columns: 201px auto; row-gap: 4px;
    width: 617px; max-width: 100%; margin: 10px 0 0 52px;
    padding: 12px 20px 10px; border-radius: 8px;
  }
  .slack--hero .cites li { font: 600 11px/1.5 var(--font-sans); }
  .slack--hero .cites li + li { margin-top: 0; }
  .slack--hero .ask {
    margin-top: 42px; height: 65px; padding: 0 24px 0 26px; border-radius: 12px;
  }
  .slack--hero .ask span { font-size: 14px; }
  .slack--hero .ask i { width: 35px; height: 35px; }
  .slack--hero .ask i img { width: 13px; height: 8px; }

  /* --- the questions you would ask ----------------------------------- */
  .questions { background: #FAFAFA;padding:146px 0px }
  .questions .wrap {
    display: grid; 
    grid-template-columns: 482fr 538fr; 
    column-gap: 164px;
    align-items: start;
  }
  .questions .h2, .questions .lead, .questions .pull { max-width: none; grid-column: 1; }
  .questions .h2   { margin-top: 76px; }
  .questions .lead { margin-top: -70px; }
  .questions .pull { margin-top: -55px; }
  .questions .thread {
    grid-column: 2; grid-row: 1 / span 3;
    min-height: 534px; margin-top: 0;
     padding: 0px;
      border-radius: 25px;
    background: var(--surface-page); 
    border: 1px solid var(--border-default);
    background: var(--surface-page); 
     box-shadow: 0 0 0 37px #E8F0F5, 0 0 0 37px #E8F0F5;

  }
  .questions .thread__card { padding: 0; border-radius: 0; background: none; }
  .questions .thread__head { border-bottom: 1px solid var(--border-default);padding-left: 33px; padding: 22px 33px; }
  .questions .thread__head p:first-child { font-size: 16px; }
  .questions .thread__head p:last-child { font-size: 14px; }
  .questions .av { width: 32px; height: 32px; font-size: 16px; }
  .questions .msg { gap: 12px; }
  .questions .msg--lg { margin-top: 32px; }
  .questions .msg__head b { font-size: 14px; }
  .questions .msg__head time { font-size: 12px; }
  .questions .msg--lg .msg__body { margin-top: 3px; font-size: 18px; line-height: 1.35; }
  .questions .msg--dark { margin-top: 40px; padding: 20px 22px; border-radius: 14px; }
  .questions .msg--dark .msg__body { font-size: 16px; }
  .questions .ask--dark { margin-top: 36px; height: 57px; padding: 0 14px 0 21px; }
  .questions .ask--dark span { font-size: 16px; }
  .questions .thread__foot { margin-top: 24px; font-size: 12px; }

  /* --- a good plan can still be fragile ------------------------------
     One grid for the whole block. The four stats and the "not in the
     forecast" list share a single ruled row of cells, so .stats gives up
     its own box (display: contents) and its children sit in the grid
     directly. The frame's dividers fall at 310, 500, 690 and 880, which
     makes the columns 198, 190, 190, 190 and a 448 aside; the fourth is
     split 46 + 144 so the lead can start at 736 above it. */
  /* the 1440 frame sets this band on the flat dark surface, no grid */
  /* The frame lays a soft blue ellipse over the flat dark surface behind
     the closing lines — 1193.9 x 414 at (126, 529.7), which centres it on
     the frame and sets its foot on the section's. Anchoring it to the foot
     keeps that true whatever the section measures. */
  .fragile {
    padding: 85px 0 104px;
    background-image: url("../assets/home/fragile-08.svg");
    background-position: center bottom;
    background-size: 1193.9px 414px;
    background-repeat: no-repeat;
  }
  .fragile .wrap:first-of-type {
    display: grid; align-items: start;
    grid-template-columns:
      minmax(0, 198fr) repeat(2, minmax(0, 190fr))
      minmax(0, 46fr) minmax(0, 144fr) minmax(0, 448fr);
  }
  .fragile .h2   { grid-column: 1 / 4; grid-row: 1; max-width: 455px; }
  .fragile .lead { grid-column: 5 / 7; grid-row: 1; max-width: 512px; margin-top: 19px; }
  .stats { display: contents; }
  /* The ruled row: each cell carries the top rule and the divider on its
     right, and the row's lower rule is one element, because the frame insets
     that one 8px either side where the top rule runs the full column. All of
     them are stroked solid #5a7392 there, not a wash of white. */
  .stats div, .fragile__aside {
    grid-row: 2; display: flex; flex-direction: column; justify-content: center;
    min-height: 219px; margin-top: 49px; padding: 9px 0 0 26px;
    border-top: 1px solid var(--neutral-700);
    border-right: 1px solid var(--neutral-700);
  }
  .stats div:nth-child(1) { grid-column: 1; padding-left: 8px; }
  .stats div:nth-child(2) { grid-column: 2; padding-left: 26px; }
  .stats div:nth-child(3) { grid-column: 3; }
  .stats div:nth-child(4) { grid-column: 4 / 6; padding-left: 26px; }
  .fragile__aside { grid-column: 6; padding: 4px 0 0 52px; border-right: 0; }
  .fragile .rule {
    display: block; grid-column: 1 / -1; grid-row: 2; align-self: end;
    width: calc(100% - 16px); height: 1px; margin: 0 auto;
    background: var(--neutral-700);
  }
  /* the frame's label is 14/500 with the value 11 under it */
  .stats__k { font: 500 14px/1.21 var(--font-sans); }
  /* the frame sets these in the sans at 32/1.5, not the serif */
  .stats__v { margin-top: 11px; font: 500 32px/1.5 var(--font-sans); }
  .notin    { margin-top: 0; font-size: 16px; }
  .bullets  { margin-top: 21px; }
  .bullets li { gap: 19px; font-size: 16px; }
  .bullets li + li { margin-top: 23px; }
  /* "your plan says" and the figure share one line under the row */
  /* the frame puts the dot at 120 and the label at 139, the figure beside
     them in the serif at 32/1.5 */
  .says   { grid-column: 1 / -1; grid-row: 3; gap: 11px; margin-top: 48px;
            padding-left: 8px; font-size: 14px; }
  .says__dot { width: 8px; height: 8px; }
  .runway { grid-column: 1 / -1; grid-row: 3; align-self: center;
            margin: 31px 0 0 172px; font: 400 32px/1.5 var(--font-serif-alt); }
  /* the gold rule runs the content column, fading in from the left */
  .goldrule {
    width: min(100% - var(--gutter) * 2, 1216px); margin: 40px auto 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, .1), var(--accent-gold));
  }
  .tofind { max-width: 510px; margin: 108px auto 0;
            font: 400 42px/1.3 var(--font-serif-alt); text-align: center; }
  .tofind__sub { max-width: 420px; margin: 33px auto 0; font-size: 16px; text-align: center; }

  /* --- one plan, 10,000 futures --------------------------------------
     The frame sets the title on one line, the lead and the pull-quote
     side by side beneath it (604 / 496, 116 apart), and a hand-drawn arrow
     between them. The chart is drawn to the frame's own geometry: every
     piece is placed inside a 1168 x 602 inner card, x as a share of the
     width so the card can narrow with the column, y in px. */
  /* the tint starts 28% down the wrapper: the middle of the futures band
     (511 of its 1022) against the two bands together (1814) */
  .fade {
    background: linear-gradient(180deg, rgba(232, 240, 245, 0) 28%, #e8f0f5 100%) #fafafa;
  }
  .futures, .drivers { background: none; }
  .futures { padding: 109px 0 42px; }
  .futures .wrap {
    display: grid;
    grid-template-columns: minmax(0, 604fr) minmax(0, 496fr);
    column-gap: 116px; align-items: start;
  }
  .futures .h2   { grid-column: 1 / -1; grid-row: 1; max-width: none; }
  .futures .lead { grid-column: 1; grid-row: 2; max-width: 567px; margin-top: 21px; }
  .futures .pull {
    grid-column: 2; grid-row: 2; max-width: 448px; margin-top: 21px; padding: 7px 0 7px 24px;
    border-left-color: var(--blue-300); font-size: 16px; line-height: 1.5;
  }
  /* the arrow sits 621 in and 68 below the lead; the negative bottom
     margin keeps it from stretching the row */
  .futures__arrow {
    display: block; grid-column: 1 / -1; grid-row: 2; justify-self: start;
    width: 53px; height: 43px; margin: 89px 0 -43px 621px;
    /* the asset points up and right; the frame has it curling down to the quote */
    transform: rotate(180deg);
  }
  .chart { grid-column: 1 / -1; margin-top: 58px; padding: 24px; border-radius: 32px; }
  .chart__inner { position: relative; height: 602px; padding: 0; border-radius: 22px; }
  .chart__inner > * { position: absolute; margin: 0; }
  .chart__caps {
    display: flex; justify-content: space-between;
    top: 60px; left: 11.6%; right: 9.1%; font-size: 14px;
  }
  /* four gridlines, 96 apart, 906 wide at 1440 */
  .chart__plot {
    top: 156px; left: 13.3%; width: 77.6%; height: 289px;
    background-image:
      linear-gradient(rgba(255, 255, 255, .35), rgba(255, 255, 255, .35)),
      linear-gradient(rgba(255, 255, 255, .35), rgba(255, 255, 255, .35)),
      linear-gradient(rgba(255, 255, 255, .35), rgba(255, 255, 255, .35)),
      linear-gradient(rgba(255, 255, 255, .35), rgba(255, 255, 255, .35));
    background-size: 100% 1px; background-repeat: no-repeat;
    background-position: 0 0, 0 96px, 0 192px, 0 288px;
  }
  /* the fan starts 43 in from the first gridline and rises above it */
  .chart__plot img {
    position: absolute; top: -52px; left: 4.75%; width: 83.2%; height: 375px;
  }
  .chart__plan { display: block; top: 237px; left: 16.95%; width: 64.55%; height: 160px; }
  /* label, then the dot sitting on the plan's first point */
  .chart__you {
    top: 396px; right: calc(83.05% - 5px); transform: translateY(-50%);
    flex-direction: row-reverse; align-items: center; gap: 12px;
    font-size: 14px; white-space: nowrap;
  }
  .chart__you::before { width: 10px; height: 10px; margin: 0; }
  /* the key: a short tick and a label beside the fan's right edge */
  .chart__legend { top: 0; left: 81.6%; display: block; }
  .chart__legend li {
    position: absolute; transform: translateY(-50%);
    align-items: center; gap: 10px; font-size: 14px; white-space: nowrap;
  }
  .chart__legend li:nth-child(1) { top: 143px; }
  .chart__legend li:nth-child(2) { top: 226px; }
  .chart__legend li:nth-child(3) { top: 340px; }
  .chart__legend li::before { width: 23px; height: 1px; margin: 0; border-radius: 0; }
  .chart__foot { top: 541px; left: 12.2%; transform: translateY(-50%); font-size: 13px; }

  /* --- your breaking point has a name --------------------------------
     The frame: a 610 card on the left (62 inset, 40 radius) with the copy
     column 68 to its right, centred against the card's height. */
  .drivers { padding: 45px 0 67px; }
  .drivers .wrap {
    display: grid; grid-template-columns: minmax(0, 610fr) minmax(0, 538fr);
    /* the copy rows size to their content; the fr row takes what the card
       adds, so the card cannot push the lead and quote apart */
    grid-template-rows: auto auto auto 1fr;
    column-gap: 68px; align-items: start;
  }
  .drivers .h2   { grid-column: 2; max-width: 440px; margin-top: 131px; }
  .drivers .lead { grid-column: 2; max-width: 468px; margin-top: 25px; }
  .drivers .pull { grid-column: 2; max-width: 440px; margin-top: 46px; padding-left: 23px; }
  .drv {
    grid-column: 1; grid-row: 1 / -1;
    margin-top: 0; padding: 51px 62px 32px; border-radius: 40px;
  }
  .drv__cap  { max-width: 450px; font-size: 16px; line-height: 1.5; }
  .drv__row  { margin-top: 27px; }
  .drv__row span { font-size: 18px; }
  .drv__row b    { font-size: 16px; }
  .drv__bar  { height: 9px; margin-top: 15px; border-radius: 5px; }
  .drv__bar i { border-radius: 5px; }
  /* the lead row: a dark card 16 proud of the text edge */
  .drv__row--top { margin: 19px -16px 0; padding: 22px 16px 25px; border-radius: 14px; }
  .drv__row--top + .drv__row { margin-top: 25px; }
  .drv__scale { margin-top: 70px; font-size: 14px; }
  .drv__note  { grid-column: 1; margin: 32px 0 0 62px; font-size: 13px; color: var(--text-primary); }

  /* --- know what to watch -------------------------------------------- */
  .guidance { padding: 154px 0 117px; }
  .guidance .wrap {
    display: grid; grid-template-columns: minmax(0, 454fr) minmax(0, 594fr);
    column-gap: 168px; align-items: start;
  }
  .guidance .h2   { grid-column: 1; grid-row: 1; max-width: 455px; }
  .guidance .h2 span, .sources .h2 span { color: var(--text-secondary); }
  .guidance .lead { grid-column: 2; max-width: 540px; }
  .guidance .lead:first-of-type { grid-row: 1; margin-top: -7px; }
  .guidance .lead + .lead { margin-top: -10px; }
  /* the asset curls up and right; the frame has it dropping down into the
     second paragraph, so it turns a quarter. offsets are to the turned box. */
  .guidance__aside { grid-column: 2; grid-row: 1; justify-self: start; margin-left: -101px; }
  .guidance__arrow { width: 53px; height: 43px; margin: 101px 0 0; transform: rotate(90deg); }
  .gcards {
    grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr);
    gap: 32px; margin-top: 65px;
  }
  /* 339 tall in the frame, the title and label held to the foot */
  .gcard {
    display: flex; flex-direction: column;
    min-height: 339px; padding: 43px 30px 40px; border-radius: 16px;
  }
  /* the tile is the frame's upright 60 x 72 with the glyph at its own 29 */
  .gcard__icon { width: 60px; height: 72px; border-radius: 16px; }
  .gcard__icon img { width: 29px; height: 29px; }
  .gcard__icon::after {
    margin: -8px 0 0 30px; width: 64px; height: 90px; border-radius: 6px;
    backdrop-filter: blur(3px);
  }
  .gcard .h3 { margin-top: auto; }
  .gcard .label { margin-top: 15px; }

  /* --- every number has a source -------------------------------------
     The mock is the frame's 609 x 624 tray: a white thread card and the
     dark reply placed inside it at fixed offsets, the tray itself starting
     82 above the title. */
  .sources { padding: 174px 0 108px; background: #fafafa; }
  .sources .wrap {
    display: grid; grid-template-columns: minmax(0, 482fr) minmax(0, 609fr);
    /* the copy rows size to their content; the fr row takes what the tray
       adds, so the tray cannot push the paragraphs apart */
    grid-template-rows: repeat(4, auto) 1fr;
    column-gap: 125px; align-items: start;
  }
  .sources .h2   { grid-column: 1; max-width: 482px; }
  .sources .lead { grid-column: 1; max-width: 445px; }
  .sources .lead:first-of-type { margin-top: 25px; }
  .sources .lead + .lead { max-width: 445px; margin-top: 15px; }
  .sources .pull { grid-column: 1; max-width: 448px; margin-top: 46px; padding-left: 23px; }
  .thread--src {
    grid-column: 2; grid-row: 1 / -1; display: block; position: relative;
    height: 624px; margin-top: -82px; padding: 0; border-radius: 40px;
  }
  .thread--src .thread__card {
    position: absolute; top: 50px; left: 49px; width: 470px; height: 438px;
    margin: 0; padding: 54px 26px 40px; border-radius: 24px;
  }
  .thread--src .thread__card .msg { gap: 17px; }
  .thread--src .thread__card .msg + .msg { margin-top: 26px; }
  .thread--src .msg__head b { font-size: 16px; }
  .thread--src .msg__head time { font-size: 13px; }
  .thread--src .msg__body { max-width: 312px; margin-top: 6px; font-size: 16px; line-height: 1.5; }
  .thread--src .av { width: 26px; height: 26px; font-size: 13px; }
  .thread--src .thread__over {
    position: absolute; top: 354px; left: 102px; width: 472px;
    margin: 0; padding: 39px 30px 30px 27px; border-radius: 24px;
  }
  .thread--src .msg--tight { gap: 15px; }
  .thread--src .msg--tight + .msg--tight { margin-top: 40px; }
  .thread--src .thread__over .msg__body { max-width: 320px; margin-top: 1px; }
  .thread--src .thread__over .av { width: 26px; height: 26px; }

  /* The mock's composition is pinned to the frame: the overlay starts 102
     into the tray and runs 472 wide, so its tray has to hold 574. The second
     column only reaches that at about 1256, and below 1200 the overlay ran
     clean off the page — 77px at the 1024 boundary. The section stacks up to
     1280 instead, which hands the mock a full-width tray and leaves the
     composition itself untouched. */
  @media (max-width: 1279.98px) {
    .sources .wrap { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
    .sources .h2, .sources .lead, .sources .pull { grid-column: 1; }
    /* the copy has the whole measure now, not a 482 column beside the tray */
    .sources .h2 { max-width: 620px; }
    .sources .lead, .sources .lead + .lead, .sources .pull { max-width: 620px; }
    /* the tray keeps the width it has at 1440 so the composition inside it
       is untouched; it just centres under the copy instead of sitting beside */
    .thread--src {
      grid-column: 1; grid-row: auto;
      width: 609px; margin: 40px auto 0;
    }
  }

  /* --- built for plans with moving parts ----------------------------- */
  /* the frame lays the hero grid over the gradient here too */
  .pricing {
    padding: 110px 0 112px;
    background-image: url("../assets/home/grid-cta.svg"), url("../assets/shared/hero-gradient.jpg");
    background-position: center top, center; background-size: 1440px auto, cover;
    background-repeat: no-repeat, no-repeat;
  }
  .pricing .wrap {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 38px;
    align-items: stretch;
  }
  .pcard { padding: 56px 50px 45px; border-radius: 32px; }
  .pcard .h2   { max-width: 488px; font-size: 42px; }
  .pcard .h2 span { color: var(--text-secondary); }
  .pcard .lead { max-width: 456px; font-size: 16px; margin-top: 22px; }
  /* the frame lets the diagram run 17px into the card's padding either side */
  .pcard .dgm  { width: min(526px, calc(100% + 34px)); margin: 0 0 0 -17px; }
  .glass {
    margin-top: 0; padding: 73px 50px 30px; border-radius: 32px;
  }
  .glass .h4 { font-size: 29px; }
  .price { gap: 10px; margin-top: 44px; }
  .price b { font-size: 46px; line-height: 1; }
  .price span { font-size: 14px; }
  .glass__note { max-width: 385px; margin-top: 18px; font-size: 15px; }
  .glass__rule { margin-top: 31px; }
  .glass__big  { max-width: 401px; margin-top: 30px; font-size: 22px; }

  /* --- built with you --------------------------------------------------
     The frame: a 610 tray on the left (40 radius, 48 inset) whose tiles,
     ledger and notification are wired together by hairlines, the copy
     column 52 to its right, 468 wide. */
  .onboarding { padding: 221px 0 102px; }
  .onboarding .wrap {
    display: grid; grid-template-columns: minmax(0, 610fr) minmax(0, 554fr);
    /* the copy rows size to their content; the fr row takes what the tray
       adds, so the tray cannot push the paragraphs apart */
    grid-template-rows: repeat(3, auto) 1fr;
    column-gap: 52px; align-items: start;
  }
  .onboarding .h2   { grid-column: 2; max-width: 468px; }
  .onboarding .lead { grid-column: 2; max-width: 468px; margin-top: 25px; }
  .onboarding .pull { grid-column: 2; max-width: 448px; margin-top: 42px; padding-left: 23px; }
  .systems {
    grid-column: 1; grid-row: 1 / -1;
    margin-top: -119px; padding: 36px 48px 54px; border-radius: 40px;
  }
  .systems__cap { font-size: 13px; text-align: center; }
  .systems__grid { position: relative; grid-template-columns: repeat(4, 1fr); gap: 17px; margin-top: 18px; }
  .systems__grid li { position: relative; height: 66px; padding: 0; border-radius: 8px; font-size: 16px; }
  /* the wiring: a drop from each tile, a bus 26 below them, a stem to the
     ledger, and a second stem from the ledger to the notification */
  .systems__grid li::after, .systems__grid::before, .systems__grid::after, .notif::before {
    content: ""; position: absolute; background: #dfe5ea;
  }
  .systems__grid li::after { left: 50%; top: 100%; width: 1px; height: 26px; }
  .systems__grid::after  { left: 58px; right: 58px; top: calc(100% + 26px); height: 1px; }
  .systems__grid::before { left: 50%; top: calc(100% + 26px); width: 1px; height: 28px; }
  .notif::before { left: 50%; top: -28px; width: 1px; height: 28px; }
  /* the ledger: separate borders so the table takes its 19px inset, the
     caption carrying the top of the white card */
  .fin {
    margin-top: 54px; padding: 0 19px 5px; border-radius: 0 0 16px 16px;
    border-collapse: separate; border-spacing: 0;
  }
  .fin caption {
    display: table-caption; text-align: left; padding: 22px 19px 13px;
    border-radius: 16px 16px 0 0; background: var(--surface-page);
    font-size: 16px; font-weight: 600;
  }
  .fin caption span:last-child { float: right; font-weight: 500; }
  .fin th, .fin td { padding: 11px 0; font-size: 13px; }
  /* the notification: the mark stands in a column of its own on the left */
  .notif {
    position: relative; margin-top: 28px; padding: 18px 26px 11px 66px; border-radius: 16px;
  }
  .notif__head img { position: absolute; top: 18px; left: 21px; width: 29px; height: 30px; }
  .notif__head b { font-size: 14px; }
  .notif__head time { margin-left: 0; font-size: 13px; }
  .notif__title { margin-top: 7px; font-size: 16px; }
  .notif__item { margin-top: 4px; font-size: 13px; }
  .notif__cite { width: 324px; max-width: 100%; margin-top: 11px; padding-top: 8px; font-size: 11px; }
}

/* ============================================================
   Questions section below 700, re-measured against the 375 frame.
   The base rules above carry the 1440 mock's insets (the 33px message
   padding, the 60px bubble margins, the composer's padding); the id
   selectors here outrank them and the fixed tray height, and the query
   keeps every value away from tablet and desktop.
   ============================================================ */
@media (max-width: 699.98px) {
  #questions .thread { height: auto; padding: 10px 14px 13px; }
  #questions .thread__card { padding: 24px 15px 16px; border-radius: 16px; }
  /* the avatar column starts 6 outside the text edge, as the frame has it */
  #questions .msg--lg { margin: 24px 0 0 -6px; padding: 0; }
  #questions .thread__head + .msg--lg { margin-top: 21px; }
  #questions .msg--lg .av { width: 20px; height: 20px; }
  /* the frame wraps Tom before "in": the body measures 230 there */
  #questions .msg--lg .msg__body { max-width: 230px; }
  /* the dark reply runs 10 in from the text edge to 5 short of the right */
  #questions .msg--dark {
    margin: 19px 5px 0 10px !important; padding: 12px 12px 15px 11px; gap: 12px;
  }
  #questions .msg--dark .av { width: 22px; height: 22px; }
  /* the composer: a 40-tall field the width of the column, the send disc
     25 across, 5 off its right edge */
  #questions .ask--dark { margin: 19px 0 0; padding: 0 !important; gap: 5px; }
  #questions .ask--dark span {
    flex: 1; padding: 13px 15px; font-size: 9.6px; line-height: 1.4; white-space: nowrap;
  }
  #questions .ask--dark i { width: 25px; height: 25px; }
  #questions .ask--dark i img { width: 10px; height: 10px; }
  #questions .thread__foot { margin-top: 5px; padding: 0; }
}

/* ============================================================
   Guidance and sources below 700, re-measured against the 375 frame.
   Scoped to the query so tablet and desktop keep their own rules.
   ============================================================ */
@media (max-width: 699.98px) {
  .guidance__arrow { margin-top: -13px; }
  .gcards { margin-top: 48px; }
  /* the tiles: 34 in from the top, 24 from the sides, an upright 40 x 48 tile */
  .gcard { padding: 34px 24px 30px; }
  .gcard__icon { height: 48px; }
  /* the plate only softens the tile; the glyph stays legible through it */
  .gcard__icon::after { backdrop-filter: blur(3px); }
  .gcard .h3 { margin-top: 49px; }
  /* the sources band sits 58 under the last card and 42 over the next */
  .sources { padding-top: 55px; padding-bottom: 42px; }
  .sources .h2 span { color: var(--text-secondary); }
  /* the mock's type at the frame's size, so the thread wraps as it does there */
  .thread--src .msg__head b { font-size: 8.5px; }
  .thread--src .msg__head time { font-size: 7px; }
  .thread--src .msg__head em { font-size: 6px; }
  .thread--src .msg__body { font-size: 9.5px; line-height: 1.45; }
}

/* ============================================================
   Onboarding below 700, re-measured against the 375 frame.
   Scoped to the query so tablet and desktop keep their own rules.
   ============================================================ */
@media (max-width: 699.98px) {
  .onboarding { padding-top: 30px; padding-bottom: 32px; }
  /* the tray: 32 under the quote, 22 in from its sides, 37 to the caption */
  .systems { margin-top: 28px; padding: 31px 22px 23px; }
  .systems__grid { gap: 15px 13px; margin-top: 24px; }
  .systems__grid li { height: 48px; }
  /* the ledger and the notification fill the tray's column */
  .systems .fin, .systems .notif { width: 100%; margin-left: 0; }
  /* the ledger: separate borders so its 17px inset applies, the caption
     carrying the top of the white card with the period at the right */
  .systems .fin {
    height: auto; margin-top: 11px; padding: 0 17px 2px; border-radius: 0 0 14px 14px;
    border-collapse: separate; border-spacing: 0;
  }
  .systems .fin caption {
    display: table-caption; text-align: left; padding: 18px 17px 12px;
    border-radius: 14px 14px 0 0; background: var(--surface-page);
  }
  .systems .fin caption span:last-child { float: right; }
  .systems .notif { margin-top: 12px; }
}