/* Editorial long-form pages reached from the shared navigation. */
.deep-page { padding-top: var(--nav-h); background: var(--pure-white); color: var(--color-ink); }

/* Three grounds, so nine pages do not read as one long white scroll.
   Paper is the default. Blue is the brand statement. Ink is for the pages
   someone reads rather than scans. Only the ground and the ink flip: every
   rule below keeps working because it draws with currentColor or a token. */
.deep-page--blue { background: var(--color-accent); color: var(--pure-white); }
.deep-page--blue .deep-kicker,
.deep-page--blue .deep-hero h1 em,
.deep-page--blue .deep-section__head p:first-child,
.deep-page--blue .deep-section__head h2 em,
.deep-page--blue .deep-note h2 em { color: var(--color-blue-soft); }
.deep-page--blue .deep-hero::after { border-color: var(--overlay-white-25); }
.deep-page--blue .deep-hero__intro,
.deep-page--blue .deep-section__copy p,
.deep-page--blue .deep-boundary ul { color: var(--white-70); }
.deep-page--blue .deep-boundaries { background: var(--overlay-white-25); }
.deep-page--blue .deep-boundary { background: var(--color-accent); color: var(--pure-white); }
.deep-page--blue .deep-boundary li { border-color: var(--overlay-white-25); }
.deep-page--blue .deep-step,
.deep-page--blue .faq-page article { border-color: var(--overlay-white-38); }
.deep-page--blue .deep-action { border-color: var(--overlay-white-48); color: var(--pure-white); }
.deep-page--blue .deep-action--primary { border-color: var(--pure-white); background: var(--pure-white); color: var(--color-accent); }
.deep-page--blue .text-link { color: var(--color-blue-soft); }
/* Cards are blue on paper. On a blue page that is invisible, so they invert. */
.deep-page--blue .deep-card { background: var(--pure-white); color: var(--color-ink); border-right-color: var(--color-rule); }
.deep-page--blue .deep-card__num { color: var(--color-accent); }
.deep-page--blue .deep-card p { color: var(--color-body-muted); }
.deep-page--blue .deep-card h3 { margin-top: var(--s-10); }
/* The footer is a sibling of main, so the ground class cannot reach it by descent. */
body:has(.deep-page--blue) .deep-footer { background: var(--color-ink); }
body:has(.deep-page--blue) .deep-card:first-child { border-radius: var(--r-lg) 0 0 var(--r-lg); }

.deep-page--ink { background: var(--color-ink); color: var(--pure-white); }
.deep-page--ink .deep-kicker,
.deep-page--ink .deep-hero h1 em,
.deep-page--ink .deep-section__head p:first-child,
.deep-page--ink .deep-section__head h2 em { color: var(--color-blue-soft); }
.deep-page--ink .deep-hero::after { border-color: var(--overlay-white-25); }
.deep-page--ink .deep-hero__intro,
.deep-page--ink .deep-section__copy p,
.deep-page--ink .deep-boundary ul { color: var(--white-70); }
.deep-page--ink .deep-boundaries { background: var(--overlay-white-25); }
.deep-page--ink .deep-boundary { background: var(--color-ink); }
.deep-page--ink .deep-step { border-color: var(--overlay-white-38); }
.deep-page h1, .deep-page h2, .deep-page h3, .deep-page p { margin: 0; }
.deep-hero { position: relative; min-height: min(820px, calc(100svh - var(--nav-h))); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); align-items: end; gap: var(--s-12); padding: clamp(var(--s-20), 11vw, var(--s-40)) var(--gutter) var(--section-y); overflow: clip; }
.deep-hero::after { content: ""; position: absolute; width: min(46vw, 660px); aspect-ratio: 1; right: -9%; top: 4%; border: 1px solid var(--color-faint); border-radius: 50%; pointer-events: none; }
.deep-kicker { margin-bottom: var(--s-8) !important; color: var(--color-accent); font-size: var(--t-label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.deep-hero h1 { position: relative; z-index: 1; max-width: 10ch; font-size: clamp(4rem, 9.2vw, 9rem); font-weight: 500; letter-spacing: -.07em; line-height: .82; }
.deep-hero h1 em { display: block; color: var(--color-accent); }
.deep-hero__intro { position: relative; z-index: 1; max-width: 38rem; padding-bottom: var(--s-4); color: var(--color-body-muted); font-size: clamp(1.15rem, 1.8vw, 1.65rem); line-height: 1.35; }
.deep-hero__intro > p { margin: 0; }
.deep-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-8); }
.deep-action { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--s-6); border: 1px solid var(--color-rule-strong); border-radius: var(--r-pill); color: var(--color-ink); font-size: var(--t-label); font-weight: 620; text-decoration: none; }
.deep-action--primary { border-color: var(--color-accent); background: var(--color-accent); color: var(--pure-white); }
.deep-action:hover { transform: translateY(-1px); }
.deep-action--unavailable { cursor: not-allowed; opacity: .56; }
/* The mark rides the text baseline; centring it geometrically leaves it high,
   because Apple's glyph carries no descender. */
.deep-action:has(.apple-mark) { gap: .5em; }
.deep-action .apple-mark { flex: 0 0 auto; margin-block-start: -.12em; }
.deep-action--unavailable:hover { transform: none; }
.deep-section { padding: var(--section-y) var(--gutter); }
.deep-section__head { display: grid; grid-template-columns: minmax(200px, .55fr) minmax(0, 1.45fr); gap: var(--s-12); margin-bottom: clamp(var(--s-12), 8vw, var(--s-24)); }
.deep-section__head p:first-child { color: var(--color-accent); font-size: var(--t-label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.deep-section__head h2 { max-width: 13ch; font-size: clamp(3rem, 7vw, 7rem); font-weight: 500; letter-spacing: -.065em; line-height: .88; }
.deep-section__head h2 em { color: var(--color-accent); }
.deep-section__copy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8); max-width: 920px; margin-left: auto; }
.deep-section__copy p { color: var(--color-body-muted); font-size: clamp(1rem, 1.25vw, 1.2rem); line-height: 1.55; }
.deep-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.deep-card { min-height: 430px; display: flex; flex-direction: column; padding: clamp(var(--s-6), 3vw, var(--s-10)); border-right: 1px solid var(--color-rule); background: var(--color-accent); color: var(--pure-white); }
.deep-card:first-child { border-radius: var(--r-lg) 0 0 var(--r-lg); }
.deep-card:last-child { border: 0; border-radius: 0 var(--r-lg) var(--r-lg) 0; }
.deep-card__num { color: var(--color-blue-soft); font-family: var(--font-editorial); font-size: 1.2rem; font-style: italic; }
.deep-card h3 { margin-top: auto; font-size: clamp(2rem, 3vw, 3.2rem); font-weight: 500; letter-spacing: -.055em; line-height: .96; }
.deep-card p { max-width: 30ch; margin-top: var(--s-5); color: var(--white-70); line-height: 1.5; }
.deep-section--blue { background: var(--color-accent); color: var(--pure-white); }
.deep-section--blue .deep-section__head p:first-child,
.deep-section--blue .deep-section__head h2 em { color: var(--color-blue-soft); }
.deep-section--blue .deep-section__copy p { color: var(--white-70); }
.deep-steps { max-width: 1080px; margin-left: auto; }
.deep-step { display: grid; grid-template-columns: 80px minmax(180px, .7fr) minmax(0, 1.3fr); gap: var(--s-8); padding: var(--s-8) 0; border-top: 1px solid currentColor; }
.deep-step span { font-family: var(--font-editorial); font-size: 1.2rem; font-style: italic; }
.deep-step h3 { max-width: 14ch; font-size: clamp(1.7rem, 2.8vw, 2.8rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.02; }
.deep-step p { max-width: 50ch; color: color-mix(in srgb, currentColor 82%, transparent); font-size: clamp(1rem, 1.05vw, 1.0625rem); line-height: 1.55; }
.deep-boundaries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--color-rule); }
.deep-boundary { min-height: 420px; padding: clamp(var(--s-6), 4vw, var(--s-12)); background: var(--pure-white); }
.deep-boundary h3 { margin-bottom: var(--s-8); font-size: clamp(2.2rem, 4vw, 4.5rem); font-weight: 500; letter-spacing: -.06em; }
.deep-boundary ul { display: grid; gap: var(--s-4); margin: 0; padding: 0; list-style: none; color: var(--color-body-muted); }
.deep-boundary li { padding-top: var(--s-4); border-top: 1px solid var(--color-rule); line-height: 1.45; }
.product-paths .deep-boundary { display: flex; flex-direction: column; }
.product-paths .deep-boundary > p:not(.deep-kicker) { max-width: 43ch; color: var(--color-body-muted); line-height: 1.55; }
.text-link { width: fit-content; margin-top: auto; padding-top: var(--s-8); color: var(--color-accent); font-weight: 620; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.product-access { display: grid; grid-template-columns: minmax(0, .9fr) minmax(320px, 1.1fr); gap: clamp(var(--s-10), 8vw, var(--s-24)); padding: var(--section-y) var(--gutter); background: var(--color-ground); }
.product-access__copy h2 { max-width: 10ch; margin: 0; font-size: clamp(3rem, 6vw, 6.5rem); font-weight: 500; letter-spacing: -.065em; line-height: .88; }
.product-access__copy h2 em { color: var(--color-accent); }
.product-access__copy > p:not(.deep-kicker) { max-width: 40ch; margin-top: var(--s-6); color: var(--color-body-muted); font-size: clamp(1rem, 1.25vw, 1.2rem); line-height: 1.55; }
.product-access__panel { align-self: start; padding: clamp(var(--s-8), 5vw, var(--s-16)); border-radius: var(--r-lg); background: var(--color-accent); color: var(--pure-white); }
.product-access__label { color: var(--color-blue-soft); font-family: var(--font-technical); font-size: var(--t-label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.product-access__panel h3 { max-width: 12ch; margin-top: var(--s-10); font-size: clamp(2.4rem, 4.5vw, 5rem); font-weight: 500; letter-spacing: -.06em; line-height: .92; }
.product-access__panel > p:not(.product-access__label) { max-width: 48ch; margin-top: var(--s-8); color: var(--white-70); line-height: 1.55; }
.product-access__panel .deep-action { border-color: var(--overlay-white-25); color: var(--pure-white); }
.product-access__panel .deep-action--primary { border-color: var(--pure-white); background: var(--pure-white); color: var(--color-accent); }
.faq-page { padding: 0 var(--gutter) var(--section-y); }
.faq-page article { display: grid; grid-template-columns: 56px minmax(200px, .8fr) minmax(280px, 1fr); gap: var(--s-8); padding: var(--s-6) 0 var(--s-8); border-top: 1px solid var(--color-rule-strong); align-items: start; }
.faq-page__index { color: var(--color-accent); font-family: var(--font-technical); font-size: var(--t-label); }
.faq-page h2 { max-width: 22ch; font-size: clamp(1.4rem, 2.1vw, 2.25rem); font-weight: 520; letter-spacing: -.04em; line-height: 1.04; }
.faq-page article > div { display: grid; gap: var(--s-3); max-width: 54ch; padding-top: var(--s-1); color: var(--color-body-muted); font-size: clamp(1rem, 1.15vw, 1.15rem); line-height: 1.55; }
.deep-cards--brief .deep-card { min-height: 300px; }
.deep-cards--brief .deep-card h3 { margin-top: var(--s-10); max-width: 14ch; font-size: clamp(1.6rem, 2.1vw, 2.2rem); }
.deep-cards--brief .deep-card p:not(.deep-card__num) { max-width: 34ch; color: var(--white-85); font-size: clamp(1rem, 1.05vw, 1.0625rem); }
.deep-note { max-width: 980px; margin: 0 auto; padding: var(--section-y) var(--gutter); text-align: center; }
.deep-note p { color: var(--color-accent); font-size: var(--t-label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.deep-note h2 { margin-top: var(--s-6); font-size: clamp(3rem, 7vw, 7rem); font-weight: 500; letter-spacing: -.065em; line-height: .9; }
.deep-note h2 em { display: block; color: var(--color-accent); }
/* Each closing note ends with one link out. .deep-note centres its text, but
   .deep-actions is a left-aligned flex row, so it needs centring on its own. */
.deep-note .deep-actions { justify-content: center; }
.deep-footer { padding: clamp(var(--s-16), 9vw, var(--s-32)) var(--gutter) var(--s-8); background: var(--color-accent); color: var(--pure-white); }
.deep-footer__top { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: var(--s-12); }
.deep-footer__top h2 { max-width: 12ch; font-size: clamp(2.5rem, 5vw, 5.5rem); font-weight: 500; letter-spacing: -.06em; line-height: .9; }
.deep-footer__links { display: grid; grid-template-columns: repeat(2, minmax(130px, 1fr)); gap: var(--s-3) var(--s-12); }
.deep-footer__links a { color: var(--white-70); text-decoration: none; }
.deep-footer__links a:hover { color: var(--pure-white); }
.deep-footer__bottom { display: flex; justify-content: space-between; align-items: end; gap: var(--s-8); margin-top: clamp(var(--s-20), 12vw, var(--s-40)); padding-top: var(--s-8); border-top: 1px solid var(--overlay-white-25); color: var(--white-70); font-size: var(--t-label); }
.deep-footer__brand { width: min(440px, 42vw); line-height: 0; }
.deep-footer__brand img { width: 100%; height: auto; }

@media (max-width: 820px) {
  .deep-hero { min-height: 760px; grid-template-columns: 1fr; align-content: end; }
  .deep-hero__intro { max-width: 30rem; }
  .deep-section__head, .deep-section__copy, .deep-footer__top, .product-access { grid-template-columns: 1fr; }
  .deep-cards { grid-template-columns: 1fr; gap: 1px; }
  .deep-card { min-height: 310px; border: 0; border-bottom: 1px solid var(--overlay-white-25); border-radius: 0 !important; }
  .deep-card:first-child { border-radius: var(--r-lg) var(--r-lg) 0 0 !important; }
  .deep-card:last-child { border-radius: 0 0 var(--r-lg) var(--r-lg) !important; }
  .deep-step { grid-template-columns: 52px minmax(0, 1fr); }
  .deep-step p { grid-column: 2; }
  .deep-boundaries { grid-template-columns: 1fr; }
  .faq-page article { grid-template-columns: 42px minmax(0, 1fr); gap: var(--s-4); }
  .faq-page article > div { grid-column: 2; }
  .deep-footer__links { margin-top: var(--s-6); }
}

@media (max-width: 560px) {
  .deep-hero { min-height: 680px; padding-inline: var(--s-5); }
  .deep-hero h1 { font-size: clamp(3.6rem, 18vw, 5.5rem); }
  .deep-section, .deep-note, .deep-footer, .product-access, .faq-page { padding-inline: var(--s-5); }
  .deep-section__copy { grid-template-columns: 1fr; }
  .deep-footer__links { grid-template-columns: 1fr 1fr; gap: var(--s-3) var(--s-5); }
  .deep-footer__bottom { align-items: start; flex-direction: column; }
  .deep-footer__brand { width: 70vw; }
}

/* The combined About page was added after the restored 01944ed system. Keep it
   inside the same editorial grid instead of giving it a second visual language. */
.about { padding: 0 var(--gutter) var(--section-y); }
.about__part {
  display: grid;
  grid-template-columns: minmax(120px, .35fr) minmax(0, 1.65fr);
  gap: var(--s-10);
  padding: var(--section-y) 0;
  border-top: 1px solid var(--color-rule-strong);
}
.about__label {
  color: var(--color-accent);
  font-family: var(--font-technical);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.about__body { display: grid; gap: var(--s-6); }
.about__body > h2 {
  max-width: 18ch;
  font-size: clamp(2.6rem, 5vw, 5.5rem);
  font-weight: 500;
  letter-spacing: -.06em;
  line-height: .94;
}
.about__body > h2 em { color: var(--color-accent); }
.about__body > p { max-width: 68ch; color: var(--color-body-muted); font-size: 1.05rem; line-height: 1.62; }
.about__people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); margin-top: var(--s-8); }
.person { overflow: hidden; border: 1px solid var(--color-rule); border-radius: var(--r-lg); background: var(--color-ground); }
.person__portrait { width: 100%; aspect-ratio: 1; object-fit: cover; }
.person > div { display: grid; gap: var(--s-3); padding: var(--s-6); }
.person h3 { font-size: clamp(1.7rem, 2.6vw, 2.5rem); font-weight: 540; letter-spacing: -.04em; }
.person p { color: var(--color-body-muted); line-height: 1.55; }
.person__links a { color: var(--color-accent); font-weight: 650; text-underline-offset: 4px; }

@media (max-width: 820px) {
  .about__part { grid-template-columns: 1fr; gap: var(--s-5); }
  .about__people { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .about { padding-inline: var(--s-5); }
}

/* ─────────────────────────────────────────────────────────────────────────
   SECTION LAYOUT VARIANTS

   `.deep-section__head` is one grid — minmax(200px,.55fr) / minmax(0,1.45fr) —
   and every section on every deep page used it. So the eyebrow sat in the same
   margin and the headline began at the same x thirteen times running, under
   `.deep-section__copy` that was always two right-aligned columns and
   `.deep-cards` that was always three equal columns. Nothing was wrong with any
   one of those. The problem was that there was only one of each, so the eye
   landed in the same place in every section and the pages read as a template
   rather than as a sequence of different claims.

   These are alternate arrangements of the same markup. No copy, colour or type
   changes — only where things sit. Desktop only: below 820px the existing
   single-column rules already collapse everything and should keep doing so.

   The rule when assigning them: no two consecutive sections may share both a
   head variant and a body variant.
   ───────────────────────────────────────────────────────────────────────── */

@media (min-width: 821px) {

  /* ── Head arrangements ── */

  /* Eyebrow directly above the headline, both flush to the gutter. Removes the
     indent entirely, so the section starts at the page edge instead of a third
     of the way in. */
  .deep-section--head-stack .deep-section__head {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-5);
  }
  .deep-section--head-stack .deep-section__head h2 { max-width: 20ch; }

  /* Headline takes the left, eyebrow is pushed to the far right and dropped to
     the headline's last baseline — the mirror of the default. */
  .deep-section--head-wide .deep-section__head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--s-10);
  }
  .deep-section--head-wide .deep-section__head p:first-child {
    order: 2;
    text-align: right;
    padding-bottom: .55em;
  }
  .deep-section--head-wide .deep-section__head h2 { order: 1; max-width: 18ch; }

  /* Eyebrow and headline on one line, set tight, so the pair reads as a single
     run instead of two things separated by a column of air. */
  .deep-section--head-tight .deep-section__head {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: var(--s-6);
  }
  .deep-section--head-tight .deep-section__head p:first-child {
    white-space: nowrap;
    padding-top: .5em;
  }
  .deep-section--head-tight .deep-section__head h2 { max-width: 16ch; }

  /* ── Body arrangements ── */

  /* Breaks the joined blue slab into separate tiles and steps them down. The
     dividers and the shared outer radius are what make three cards read as one
     object; separating them is what makes this section not the previous one.
     Transform does not affect flow, so the section reclaims the offset with
     margin-bottom. */
  .deep-section--cards-split .deep-cards { gap: var(--s-4); }
  .deep-section--cards-split .deep-card {
    border-right: 0;
    border-radius: var(--r-lg) !important;
  }
  .deep-section--cards-split .deep-card:nth-child(2) { transform: translateY(44px); }
  .deep-section--cards-split .deep-card:nth-child(3) { transform: translateY(88px); }
  .deep-section--cards-split .deep-cards { margin-bottom: 88px; }

  /* One card carries the section and the other two stack beside it. Same three
     articles, no longer three equal things. */
  .deep-section--cards-lead .deep-cards {
    grid-template-columns: 1.55fr 1fr;
    gap: var(--s-4);
  }
  .deep-section--cards-lead .deep-card {
    border-right: 0;
    border-radius: var(--r-lg) !important;
  }
  .deep-section--cards-lead .deep-card:first-child { grid-row: span 2; }
  /* The lead card is now twice as tall as the brief cards it was sized for, so
     its content is pushed to the foot rather than stranded at the top over a
     column of empty accent. */
  .deep-section--cards-lead .deep-card:first-child h3 { margin-top: auto; }
  .deep-section--cards-lead .deep-card:not(:first-child) { min-height: 0; }

  /* Copy moves off the right margin and sits under the gutter instead. */
  .deep-section--copy-left .deep-section__copy {
    margin-left: 0;
    max-width: 780px;
  }

  /* Numbered rows become two columns — a list rather than a full-width ledger. */
  .deep-section--steps-two .deep-steps {
    margin-left: 0;
    max-width: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s-16);
  }
  .deep-section--steps-two .deep-step { grid-template-columns: 56px minmax(0, 1fr); }
  .deep-section--steps-two .deep-step p { grid-column: 2; max-width: 42ch; }

  /* The ledger stays full width but anchors left instead of right. */
  .deep-section--steps-left .deep-steps { margin-left: 0; }
}

/* Founders share the Company page's blue canvas; portrait cards keep their own ink. */
.deep-page--blue .about__label,
.deep-page--blue .about__body > h2 em { color: var(--color-blue-soft); }
.deep-page--blue .about__body > p { color: var(--white-70); }
.deep-page--blue .about__part { border-color: var(--overlay-white-38); }
.person { color: var(--color-ink); }