/* Home polish (Paula, 9 Oct 2026). Loaded after styles.css. Layout and type size only; no markup change; the colours
   and the words are untouched. First the hero at every width, then the phone block (640px and under). */

/* ── Hero, every width: four groups with air between them, and the notes no wider than the lede ── */
.xhero { gap: 0; padding: 72px 0 56px; }
.xhero .xtag { margin-bottom: 22px; }
.xhero h1 { margin: 0 0 22px; max-width: 17ch; }
.xlede { margin: 0 0 30px; max-width: 54ch; }
.xhero .btn-row { margin: 0 0 26px; gap: 10px; }
.xhero .slab-alt { margin: 0; max-width: 58ch; font-size: 14.5px; line-height: 1.55; color: var(--ink-dim); }
.xhero .slab-alt + .slab-alt { margin-top: 8px; }
.xhero .slab-alt a { color: var(--accent); }
.xhero + .xcard.xwide { margin-top: 8px; }

@media (max-width: 640px) {
  /* one notch smaller for the whole page: the text scale the components already read */
  :root { --t-md: 15.5px; --t-base: 15px; --t-sm: 13.5px; --t-note: 12.5px; }
  body { font-size: 15px; line-height: 1.55; }

  /* hero: a headline that fits in three lines, one calm paragraph, two buttons, then the small notes */
  .xhero { padding: 28px 0 22px; }
  .xhero .xtag { margin-bottom: 16px; }
  .xhero h1 { margin-bottom: 14px; }
  .xlede { margin-bottom: 20px; }
  .xhero .btn-row { margin-bottom: 18px; }
  .xhero .xtag, .xhero .eyebrow { font-size: 11px; letter-spacing: .08em; }
  .xhero h1 { max-width: none; font-size: clamp(28px, 8.2vw, 33px); line-height: 1.08; letter-spacing: -.025em; }
  .xlede { max-width: none; font-size: 15px; line-height: 1.5; }
  .xhero .btn-row { margin-top: 2px; gap: 8px; }
  .xhero .btn-row .btn { min-height: 42px; padding: 0 16px; font-size: 14px; }
  .xhero .slab-alt { font-size: 13.5px; line-height: 1.5; max-width: 44ch; }
  .xhero .slab-alt a { font-size: 13.5px; }

  /* the navy package card: "Who is looking" on its own line, the switch full width, smaller caps */
  .pv { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 8px; padding: 8px 0 2px; }
  .pv-k { font-size: 10.5px; }
  .pv-seg { display: flex; width: 100%; }
  .pv-seg button { flex: 1 1 0; min-height: 30px; padding: 0 8px; font-size: 12px; white-space: nowrap; }
  .pkg-tag, .vxh .pkg-tag { font-size: 10.5px; letter-spacing: .06em; padding: 3px 8px; }
  .pkg-q, .vxh .pkg-q { font-size: 15.5px; line-height: 1.3; }
  .sv-see, .sv-hide { font-size: 13px; }
  .pkg-foot, .pkg-note { font-size: 13px; }

  /* section heads: the title may wrap, the link stays on the right */
  .xhead { align-items: baseline; }
  .xhead h2 { white-space: normal; font-size: 22px; }
  .xhead .more { font-size: 13.5px; }

  /* four situations: number, text and the arrow in one grid; the mode under the question */
  .xrow { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "num text go" "num mode go"; gap: 6px 12px; align-items: start; padding: 16px 14px 16px 12px; }
  .xrow .xtag.solid { grid-area: num; align-self: start; margin-top: 3px; font-size: 11px; padding: 3px 8px; }
  .xrow-t { grid-area: text; gap: 3px; }
  .xrow-t h3 { font-size: 16px; line-height: 1.25; letter-spacing: -.01em; }
  .xrow-t p { font-size: 13.5px; line-height: 1.45; }
  .xrow-m { grid-area: mode; justify-self: start; margin-top: 4px; font-size: 13px; }
  .xrow-go { grid-area: go; align-self: center; }

  /* the four mode cards: a little less tall */
  .xt { min-height: 0; padding: 18px; }
  .xt h3 { font-size: 19px; margin-top: 12px; }
  .xt p { font-size: 13.5px; }
  .xa { margin: 14px 0 12px; }
  .xcard.ns h2 { font-size: 24px; }
}

/* ── Desktop, 1100px and up: the hero and the blue example side by side, so the example sits in the first screen ── */
@media (min-width: 1100px) {
  main.vxh { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 40px; align-items: center; }
  main.vxh > * { grid-column: 1 / -1; min-width: 0; }
  main.vxh > .xhero { grid-column: 1; justify-items: start; text-align: left; padding: 40px 0 32px; }
  main.vxh > .xhero h1 { max-width: 18ch; font-size: clamp(34px, 3.5vw, 48px); line-height: 1.06; }
  main.vxh > .xhero .xlede { max-width: 52ch; font-size: 15.5px; line-height: 1.55; }
  main.vxh > .xhero .btn-row { justify-content: flex-start; }
  main.vxh > .xhero .slab-alt { max-width: 54ch; text-align: left; font-size: 13.5px; }
  main.vxh > .xcard.xwide { grid-column: 2; grid-template-columns: 1fr; gap: 16px; margin: 32px 0 0; padding: 20px; align-self: center; }
  main.vxh > .xcard.xwide .art { padding: 10px 14px; }
  main.vxh > .xcard.xwide .art svg { display: block; width: 100%; max-height: 150px; }
  main.vxh > .xcard.xwide .pkg { padding: 16px; }
  main.vxh > .xcard.xwide .pkg-q { font-size: 15px; }
  main.vxh > .xcard.xwide .pkg-row { padding: 10px 0; }
}

/* ── The two notes under the hero buttons: two labelled rows between hairlines instead of two loose sentences.
   The labels are drawn by CSS ("Demos", "Timing"); the words of the notes are untouched. ── */
.xhero .slab-alt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 14px; align-items: start; margin: 0; padding: 11px 0; border-top: 1px solid var(--line); text-align: left; }
.xhero .slab-alt + .slab-alt { margin-top: 0; }
.xhero .slab-alt:last-of-type { border-bottom: 1px solid var(--line); }
.xhero .slab-alt::before { content: "Demos"; display: inline-block; margin-top: 1px; padding: 3px 8px; border-radius: 6px; background: var(--accent-wash); color: var(--accent); font: 600 10.5px/1.5 var(--sans); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.xhero .slab-alt + .slab-alt::before { content: "Timing"; }
.xhero .slab-alt a { font-weight: 600; }
@media (min-width: 1100px) { main.vxh > .xhero .slab-alt { max-width: 56ch; } }
@media (max-width: 640px) { .xhero .slab-alt { width: 100%; max-width: none; gap: 0 10px; padding: 10px 0; } }
/* the second note carries a link as its own element: it lives in the text column, under the sentence */
.xhero .slab-alt { grid-template-columns: 62px minmax(0, 1fr); }
.xhero .slab-alt::before { justify-self: start; }
.xhero .slab-alt > a { grid-column: 2; justify-self: start; margin-top: 4px; }

/* ── Phone top bar and hero, pass 2: a bar that fits in one calm row, a headline with air, a shorter lede ── */
@media (max-width: 640px) {
  .sidebar { padding: 8px 14px !important; min-height: 0; }
  .sidebar .brand { min-height: 40px; }
  .sidebar .brand img { width: 112px !important; height: auto; margin: 0 !important; }
  .side-foot { gap: 6px !important; }
  .side-foot .btn { min-height: 38px !important; padding: 0 11px !important; font-size: 13px !important; border-radius: 9px; }
  .menu > summary { min-width: 38px !important; min-height: 38px !important; border-radius: 9px; }
  .xhero { padding: 26px 0 20px; }
  .xhero .xtag { margin-bottom: 14px; padding: 4px 9px; font-size: 10.5px; }
  .xhero h1 { margin-bottom: 12px; font-size: clamp(27px, 7.6vw, 31px); line-height: 1.1; letter-spacing: -.02em; max-width: 17ch; }
  .xlede { margin-bottom: 18px; font-size: 14.5px; line-height: 1.5; max-width: 40ch; }
  .xhero .btn-row { margin-bottom: 16px; }
  .xhero .btn-row .btn { min-height: 40px; }
  .xhero .slab-alt { font-size: 13px; padding: 9px 0; }
  .xhero + .xcard.xwide { margin-top: 20px; }
}

/* ── Phone, pass 3: bigger headline, smaller everything else ── */
@media (max-width: 640px) {
  :root { --t-md: 14.5px; --t-base: 14px; --t-sm: 13px; --t-note: 12px; --t-body: 14px; }
  body { font-size: 14px; }
  .xhero h1 { max-width: none; font-size: clamp(32px, 9vw, 37px); line-height: 1.05; letter-spacing: -.028em; margin-bottom: 14px; }
  .xlede { font-size: 13.5px; line-height: 1.5; max-width: 38ch; color: var(--ink-dim); }
  .xhero .slab-alt { font-size: 12.5px; line-height: 1.5; }
  .xhero .slab-alt::before { font-size: 10px; }
  .xhero .btn-row .btn { min-height: 38px; font-size: 13.5px; }
  .pkg-top, .pkg-top strong { font-size: 13px; }
  .pkg-top span { font-size: 11.5px; }
  .pkg-q, .vxh .pkg-q { font-size: 14.5px; }
  .sv-see, .sv-hide, .sv-v { font-size: 12.5px; }
  .pkg-foot { font-size: 12px; }
  .xhead h2 { font-size: 21px; }
  .xrow-t h3 { font-size: 15.5px; }
  .xrow-t p { font-size: 13px; }
  .xrow-m { font-size: 12.5px; }
  .xt h3 { font-size: 18px; }
  .xt p { font-size: 13px; }
  .xcard.ns h2 { font-size: 22px; }
}
@media (max-width: 640px) { .xhero h1 { margin-bottom: 22px; } .xlede { margin-bottom: 22px; } }

/* ── Four situations on a phone, pass 2: a plain number (1 to 4), the mode on its own line under a hairline ── */
@media (max-width: 640px) {
  :has(> .xrow) { counter-reset: xrow; }
  .xrow { counter-increment: xrow; gap: 4px 12px; padding: 16px 14px 14px 14px; }
  .xrow .xtag.solid { font-size: 0; line-height: 0; padding: 0; background: transparent; color: var(--accent); width: 22px; min-width: 22px; height: auto; margin-top: 1px; justify-self: start; }
  .xrow .xtag.solid::before { content: counter(xrow); font: 700 15px/1.25 var(--sans); letter-spacing: 0; color: var(--accent); }
  .xrow-t h3 { font-size: 16px; }
  .xrow-m { grid-column: 2; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--x-out); width: 100%; justify-self: stretch; font-size: 12.5px; font-weight: 600; color: var(--accent); }
  .xrow-go { align-self: start; margin-top: 2px; }
}