/* ---------------------------------------------------------------------------
   Tablet and phone layout (added 2026-09-12).

   The rest of the site is authored on a fixed 1920 px design canvas: .wrap is
   1480 px wide, sections have traced heights and most elements are placed with
   absolute left/top values. js/site.js scales that canvas down with body zoom,
   which is fine while the viewport is wide enough to read the result -- at
   1024 px the page is at 53 %, at 390 px it is at 20 % and unreadable.

   So below 1100 px js/site.js stops zooming (zoom = 1) and this sheet converts
   the canvas to a flowing layout: absolutes become static, fixed widths become
   auto, section heights collapse to their content, and the multi-column blocks
   fall back to two columns on tablet and one on the phone.

   Loaded last on every page, so it wins over site.css, page.css,
   margin-scan.css, intro.css and consent.css at equal specificity.
   Nothing here applies at 1100 px and above: the desktop layout is untouched.
--------------------------------------------------------------------------- */

/* ---- base: the burger and its panel exist on every page but are inert above
   1100 px. .nav-panel is display:contents there, so .nav-links and .nav-actions
   keep .nav as their containing block and the desktop bar is pixel-identical. */
.nav-panel { display: contents; }
.nav-burger { display: none; }

/* ===================== TABLET AND PHONE (< 1100 px) ===================== */
@media (max-width: 1099px) {

  /* ---- canvas ---- */
  html { scroll-padding-top: 88px; }
  body { min-height: 100vh; }              /* zoom is 1 here, so no divide-back */
  .wrap { width: auto; max-width: 100%; margin: 0; padding: 0 24px; }
  body::before { height: 80px; -webkit-mask-image: linear-gradient(180deg,#000 0 44px,transparent 80px); mask-image: linear-gradient(180deg,#000 0 44px,transparent 80px); }

  /* ---- nav: logo + burger; the links and actions drop into a panel ----
     js/site.js wraps .nav-links and .nav-actions in .nav-panel on every page.
     Above this breakpoint the wrapper is display:contents, so the desktop bar
     keeps its original absolute placement. */
  .nav { left: 16px; right: 16px; width: auto; translate: none; top: 12px; height: 64px; overflow: visible; }
  .nav-logo { left: 16px; top: 20px; width: 180px; height: 24px; }
  .nav-logo img { width: 180px; height: 24px; }
  .nav-burger {
    display: flex; position: absolute; right: 12px; top: 12px; width: 40px; height: 40px;
    flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    border: 1px solid var(--g200); border-radius: 10px; background: var(--white); cursor: pointer; padding: 0;
  }
  .nav-burger span { display: block; width: 18px; height: 1.5px; border-radius: 1px; background: var(--g900); transition: transform .25s ease, opacity .2s ease; }
  .nav.is-open .nav-burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav.is-open .nav-burger span:nth-child(2) { opacity: 0; }
  .nav.is-open .nav-burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  .nav-panel {
    display: none; position: absolute; left: 0; right: 0; top: 72px; padding: 12px;
    background: var(--white); border: 1px solid var(--g200); border-radius: 16px;
    box-shadow: 0 8px 17px rgba(95,94,161,.06), 0 30px 30px rgba(95,94,161,.06);
  }
  .nav.is-open .nav-panel { display: block; }
  /* Without JavaScript there is no .nav-panel, and the links would sit absolutely centred on top of
     the logo in a 64 px bar. Direct children of .nav only match in that case. */
  .nav > .nav-links, .nav > .nav-actions { display: none; }
  .nav-panel .nav-links { position: static; translate: none; flex-direction: column; align-items: stretch; }
  .nav-panel .nav-link { justify-content: flex-start; padding: 12px; }
  .nav-panel .nav-actions { position: static; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--g200); justify-content: space-between; }
  .nav-panel .nav-actions .btn { flex: 1 1 auto; }
  .lang-toggle { margin-right: 0; }

  /* The page-load intro flies the wordmark in from x=1255, which is off the end
     of a narrow bar. Skip it here: the nav is simply present from first paint. */
  html.intro .nav-logo { opacity: 1; transform: none; }
  html.intro .nav-logo-img { visibility: visible; }
  html.intro .lp { display: none; }
  html.intro .nav-link, html.intro .nav-actions .lang-toggle, html.intro .nav-actions .btn { opacity: 1; }
  html.intro-run .nav-logo, html.intro-run .nav-link,
  html.intro-run .nav-actions .lang-toggle, html.intro-run .nav-actions .btn { animation: none; }

  /* ---- hero ---- */
  .hero { height: auto; padding: 128px 0 0; }
  .hero-copy { position: static; left: auto; top: auto; width: auto; }
  .hero h1 { white-space: normal; text-wrap: balance; font-size: 40px; line-height: 50px; letter-spacing: -1.2px; }
  .hero-sub { width: auto; max-width: 660px; font-size: 17px; line-height: 26px; }
  .hero-btns { margin-top: 26px; }
  .hero-stage { position: static; left: auto; top: auto; width: auto; height: auto; margin-top: 40px; aspect-ratio: 1480 / 547; }
  .hero-stage video { height: 100%; }

  /* margin-scan.html reuses the hero with its own paddings */
  .ms .hero { padding: 128px 0 64px; }
  .ms .hero-copy { width: auto; }
  .ms .hero-sub { width: auto; }

  /* ---- logo band + quote + stats ---- */
  .band-sec { padding-top: 56px; }
  .band-row1 { height: auto; padding: 28px 0 24px; }
  .band-title { position: static; left: auto; top: auto; width: auto; padding: 0 24px; }
  /* position:relative, not static -- .reel is absolutely positioned and would otherwise resolve
     against .band-row1 and slide the logos right out of the strip. */
  .marquee { position: relative; left: auto; top: auto; width: 100%; margin-top: 20px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); }
  .hatch-row { height: 72px; }
  .band-row3 { padding: 28px 24px; }
  .quote { width: auto; font-size: 22px; line-height: 32px; }
  .author { position: static; left: auto; top: auto; margin-top: 24px; }
  .author .role { width: auto; }
  .band-row4 { padding: 28px 24px; }
  .stats { flex-wrap: wrap; gap: 16px; }
  .stat { flex: 1 1 calc(50% - 8px); padding: 22px 24px; }
  .stat-num { font-size: 34px; line-height: 42px; }
  .stat-lbl { font-size: 16px; line-height: 24px; }

  /* margin-scan band overrides */
  .ms .band-row1 { flex-direction: column; gap: 24px; padding: 28px 24px; }
  .ms .band-title { width: auto; padding: 0; }
  .ms-pains { grid-template-columns: 1fr; gap: 16px; }
  .ms .band-row3 { padding: 28px 24px; }
  .ms-qrow { flex-direction: column; gap: 24px; }
  .ms .quote { width: auto; }
  .ms-slbl { margin-top: 28px; }

  /* ---- benefits ---- */
  .benefits { height: auto; margin-top: 0; padding: 72px 0; }
  .h-big { font-size: 34px; line-height: 44px; letter-spacing: -.9px; }
  .benefits .h-big { position: static; left: auto; top: auto; translate: none; width: auto; white-space: normal; }
  /* relative, not static -- the .feather overlays are absolutely positioned inside and would
     otherwise resolve against .benefits and stretch across the whole section. */
  .slot { position: relative; left: auto; top: auto; width: auto; height: auto; aspect-ratio: 1480 / 651; margin-top: 36px; }
  .slot video { height: 100%; }
  /* The white edge feathers stay -- without them the loop ends in a hard cut against the section.
     They are 150/95 px on the 1480 px desktop stage, which would eat half of a narrow one. */
  .feather.l, .feather.r { width: 64px; }
  .feather.t, .feather.b { height: 48px; }
  /* The hero stage has no feather elements of its own (the desktop render fades inside the video),
     so a mask gives it the same soft left and right edge once the stage is cropped. */
  .hero-stage {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  }
  .stat-row { position: static; left: auto; top: auto; width: auto; margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 36px 32px; }
  .item-text { width: auto; }
  .item-text h3 { font-size: 24px; line-height: 32px; }
  .item-text p { font-size: 17px; line-height: 26px; }

  .ms .benefits { padding: 72px 0; }
  .ms .benefits .slot { width: auto; margin-top: 36px; }
  .ms .stat-row { margin-top: 48px; }
  .ms-sec { padding: 72px 0; }
  .ms-lead, .ms-note { width: auto; }
  .ms-note { margin-top: 36px; }
  .ms-grid { margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 36px 32px; }
  .ms-inc { margin-top: 48px; }
  .ms-inc-hd { flex-direction: column; gap: 16px; padding: 28px 24px; }
  .ms-inc-hd p { width: auto; }
  .ms-inc-list { padding: 28px 24px; grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; gap: 16px; }
  .ms-panel { margin-top: 48px; }
  .ms-panel-row { grid-template-columns: 1fr; gap: 20px; padding: 28px 24px; }
  .ms-panel-foot { grid-template-columns: 1fr; }
  .ms-cell { padding: 28px 24px; }
  .ms-cell + .ms-cell { border-left: 0; border-top: 1px solid var(--g200); }
  .ms-qa { margin-top: 48px; }
  .ms-qa-row { flex-direction: column; gap: 12px; padding: 28px 24px; }
  .ms-qa-row h3 { width: auto; font-size: 24px; line-height: 32px; }
  .ms-qa-row p { font-size: 17px; line-height: 26px; }
  .ms .cta-sec { padding-top: 56px; }
  .ms-tail { flex-direction: column; gap: 12px; }
  .ms-tail .tag { white-space: normal; }

  /* ---- what waiting costs ---- */
  .math { padding: 72px 0; }
  .math-box { width: auto; }
  .math-hd { padding: 36px 24px 32px; }
  .math-intro { width: auto; font-size: 17px; line-height: 26px; }
  .math-body { padding: 28px 24px 32px; }
  .math-stats { width: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .mstat { padding: 22px 24px; }
  /* Three tiles in a two-column grid. The odd one keeps the others' width and sits centred under
     them, rather than running full width with its figure hanging off the left edge. */
  .math-stats .mstat:last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 8px); }
  .mstat-num { font-size: 32px; line-height: 40px; }
  .mstat-lbl { font-size: 16px; line-height: 24px; }
  .math-close { font-size: 17px; line-height: 26px; }

  /* ---- wave ---- */
  .wave { height: 56px; }
  .wave::before { top: -10px; width: 2000px; height: 77px; }

  /* ---- feature cards (the bento grid) ----
     The five cards keep their order, their video and their header; they stop
     being absolutely placed and become a two-column grid, with the Ask Valento
     card spanning both as it does on the desktop. The header moves above the
     video instead of floating over it, because at this width overlaid copy sits
     on top of the render's own chart labels. */
  .features { height: auto; padding: 72px 0; }
  /* stretch, not start: the two cards in a row carry headers of different line counts, and with
     start their videos and their bottom edges land at different heights. Stretched, the row is as
     tall as its tallest card and `margin-top: auto` on the video pins every video to the bottom, so
     the headers align at the top and the renders align along one line. */
  .features .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
  .features .h-big { position: static; left: auto; top: auto; translate: none; width: auto; white-space: normal; grid-column: 1 / -1; margin-bottom: 12px; }
  .card { position: relative; left: auto; top: auto; width: auto; height: auto; display: flex; flex-direction: column; }
  .card.wide { width: auto; grid-column: 1 / -1; }
  .card-hd { position: static; left: auto; top: auto; width: auto; order: 0; padding: 28px 28px 20px; }
  .card.wide .card-hd { left: auto; text-align: center; }
  .card-hd h3 { font-size: 24px; line-height: 32px; }
  .card-hd p { font-size: 17px; line-height: 26px; }
  /* The header is a band above the video here instead of sitting on it, so the whole card shows the
     render's ground; --card-ground carries it (site.css). The radius still clips the black corners of
     the render's rounded stage (see .card video in site.css); 14 px covers every card width here. */
  .card video { position: static; inset: auto; order: 1; margin-top: auto; width: 100%; height: auto; aspect-ratio: 730 / 628; border-radius: 14px; }
  .card.wide video { aspect-ratio: 1480 / 628; }
  .scrim { display: none; }

  /* ---- pricing ---- */
  .pricing { padding: 72px 0 80px; }
  .plans-box { width: auto; }
  .plans-hd { height: auto; padding: 32px 24px; }
  .plans-hd-in { position: static; left: auto; top: auto; translate: none; width: auto; flex-direction: column; align-items: flex-start; gap: 14px; }
  .plans-hd h2 { white-space: normal; font-size: 34px; line-height: 44px; letter-spacing: -.9px; }
  .plans-hd p { width: auto; font-size: 17px; line-height: 26px; }
  .plans { padding: 24px 0; }
  .plans-row { width: auto; display: grid; grid-template-columns: 1fr; column-gap: 0; row-gap: 24px; padding: 0 24px; }
  .plan { width: auto; display: block; grid-row: auto; }
  .plan-content { padding: 24px; gap: 24px; }
  .plan-hd h3 { font-size: 24px; line-height: 32px; }
  .price b { font-size: 36px; line-height: 48px; }
  /* The chip is absolute at left:258 on the desktop, which lands on top of the plan title once the
     card is narrower. Here it flows above the title instead -- as a flex item rather than on a
     padding reserve, so the two plans that carry no chip get no empty band above their heading. */
  .plan-hd { display: flex; flex-direction: column; }
  .badge { position: static; order: -1; align-self: flex-start; margin-bottom: 14px; }
  .arc { display: none; }
  .plan-info { padding: 24px; }

  /* ---- closing CTA ---- */
  .cta { height: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 56px 24px; }
  .cta h2 { position: static; left: auto; top: auto; translate: none; white-space: normal; font-size: 30px; line-height: 40px; }
  .cta-btns { position: static; left: auto; bottom: auto; flex-wrap: wrap; justify-content: center; }
  .decor { display: none; }

  /* ---- homepage footer: the 1480 x 706 cell grid becomes a stack ---- */
  .footer { height: auto; margin-top: 80px; }
  .footer .wrap { height: auto !important; padding: 0; }
  .f-top, .f-bot { position: static; left: auto; top: auto; bottom: auto; width: auto; height: auto; border-left: 0; border-right: 0; }
  .f-top { height: 48px; }
  .footer .f-cell { position: static; left: auto !important; top: auto; width: auto !important; height: auto; border-left: 0; border-right: 0; }
  /* The cube cell keeps its mark -- it is the footer's only piece of brand art. It becomes a band
     between the two link cells instead of the middle column. zoom, not transform: scale, because the
     "VA." mark is placed on the cube's top face with a hand-computed isometric matrix at fixed px
     coordinates (site.css .f-va), and zoom scales the layout those coordinates resolve against, so the
     mark stays welded to the face. The band's height follows the scaled cube. */
  .f-mid { display: flex; justify-content: center; }
  .f-cube { position: relative; left: auto; top: auto; zoom: .85; }
  .f-left, .f-right { display: flex; flex-wrap: wrap; gap: 32px 48px; padding: 32px 24px; }
  .footer .f-col { position: static; left: auto !important; top: auto !important; width: auto !important; }
  .f-tag { position: static; left: auto; top: auto; width: 100%; color: var(--g500); }
  .f-social { position: static; left: auto; top: auto; translate: none; width: 100%; }
  .f-bot { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px; background-position: -2.5px 0; }
  .f-word { position: static; left: auto; top: auto; width: 100%; max-width: 420px; height: auto; }
  .f-copy { position: static; left: auto; top: auto; translate: none; white-space: normal; text-align: center; }

  /* ---- sub-pages (page.css) ---- */
  .page { padding: 128px 0 80px; }
  .page-hd, .book-page .page-hd { width: auto; }
  .page h1 { font-size: 38px; line-height: 48px; letter-spacing: -1.2px; }
  .page-sub { font-size: 17px; line-height: 26px; }
  .prose { width: auto !important; margin-top: 40px; }  /* team.html carries an inline width:1000px */
  .prose h2 { margin-top: 40px; font-size: 24px; line-height: 32px; }
  .faq-group { margin-top: 36px; }
  .faq details p { padding-right: 0; }
  .team-grid, .team-photo, .promise, .page-cta, .nl-form, .nl-what { width: auto; }
  .team-photo { margin-left: 0; margin-right: 0; }   /* <figure> carries the UA 40 px side margins */
  .team-grid { grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
  .promise { grid-template-columns: 1fr 1fr; }
  .page-cta { flex-direction: column; align-items: flex-start; gap: 24px; padding: 32px; margin-top: 56px; }
  .page-cta h2 { font-size: 26px; line-height: 34px; }
  .nl-form { padding: 28px; }
  .nl-what { grid-template-columns: repeat(3, 1fr); }
  .pfoot .wrap { height: auto; flex-direction: column; gap: 14px; padding: 24px; text-align: center; }
  .pfoot ul { flex-wrap: wrap; justify-content: center; gap: 8px 20px; }

  /* ---- flash survey (survey.css) ----
     The charts already stack their label over their bar at every width, so only the fixed widths and
     the two-up grid have to give. */
  .sv-col, .sv-note, .sv-keys, .sv-h2, .sv-lead, .sv-charts, .sv-table, .sv-finding, .sv-method, .sv-src { width: auto; }
  .sv-h2 { margin-top: 56px; font-size: 24px; line-height: 32px; }
  .sv-keys { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .sv-key { padding: 22px 24px; }
  .sv-key-num { font-size: 32px; line-height: 40px; }
  .sv-key-lbl { font-size: 15px; line-height: 24px; }
  .sv-chart { padding: 24px; }
  .sv-finding { padding: 36px; }
  .sv-finding h2 { font-size: 26px; line-height: 36px; }
  .sv-finding p { font-size: 16px; line-height: 26px; }
  .sv-table th, .sv-table td { padding-left: 20px; padding-right: 20px; }

  /* ---- cookie banner ---- */
  .consent { left: 12px; right: 12px; bottom: 12px; translate: none; width: auto; padding: 18px 20px; }
  .consent-row { flex-direction: column; align-items: stretch; gap: 16px; }
  .consent-btns { flex-wrap: wrap; }
  .consent-btns .btn { flex: 1 1 auto; }
  .consent-cats { grid-template-columns: 1fr; }
  .consent-details .consent-btns { justify-content: stretch; }
}

/* ========================== PHONE (< 768 px) ========================== */
/* Not a narrower tablet: the tiles, the benefit items and the type are re-proportioned so the page
   reads as a phone layout rather than one desktop element per screenful. */
@media (max-width: 767px) {

  .wrap { padding: 0 16px; }
  .nav { left: 12px; right: 12px; }
  .nav-logo { left: 14px; top: 21px; width: 150px; height: 20px; }
  .nav-logo img { width: 150px; height: 20px; }

  /* ---- type scale ----
     The desktop sizes are drawn for a 1480 px column. Carried to a 358 px one they read as oversized
     rather than confident, so the whole scale steps down one notch here. */
  .btn { padding: 11px 14px; font-size: 16px; line-height: 22px; }
  .btn-sm { padding: 9px 12px; font-size: 13px; line-height: 18px; }
  .eyebrow, .hero-kicker, .math-kicker, .stats-kicker { font-size: 11px; line-height: 16px; letter-spacing: .06em; }

  /* ---- hero ---- */
  .hero { padding: 104px 0 0; }
  .hero-kicker { margin: 0 auto; max-width: 300px; text-wrap: balance; }
  .hero h1 { margin-top: 12px; font-size: 26px; line-height: 33px; letter-spacing: -.4px; }
  .hero-sub { margin-top: 10px; font-size: 15px; line-height: 23px; }
  .hero-btns { margin-top: 22px; }
  /* margin-scan.html carries two hero buttons; side by side at 358 px their labels are clipped, so
     each takes its own row. The width cap stops a lone button spanning the whole viewport. */
  .hero-btns { flex-wrap: wrap; gap: 10px; }
  .hero-btns .btn { flex: 1 1 100%; max-width: 320px; padding: 12px 20px; font-size: 16px; line-height: 22px; }
  /* The renders keep their own aspect ratio here -- the videos are object-fit:cover, so any other
     ratio would slice the sides off the animation. They win their size back by running full-bleed
     out to the viewport edges instead. */
  .hero-stage { margin: 26px -16px 0; }

  /* ---- logo band, quote, stat tiles ---- */
  .band-sec { padding-top: 40px; }
  .band-row1 { padding: 22px 0 20px; }
  .band-title { padding: 0 20px; font-size: 16px; line-height: 23px; }
  /* The logos sit on a 250 px pitch drawn for a 1100 px window; at 358 px a plain crop lands in the
     gaps between them, so the whole reel is scaled down and more of it fits in view. */
  .marquee { height: 44px; margin-top: 16px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); }
  .reel { zoom: .72; }
  .hatch-row { height: 44px; }
  .band-row3, .band-row4 { padding: 22px 20px 24px; }
  .quote { font-size: 17px; line-height: 26px; letter-spacing: -.2px; }
  .author { margin-top: 20px; }
  .author .name { font-size: 17px; line-height: 25px; white-space: normal; }
  .author .role { font-size: 14px; line-height: 21px; }
  /* Four tiles, two up. Full-width tiles at 40 px type were four screenfuls of almost nothing. */
  .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .stat { padding: 16px 16px 18px; border-radius: 14px; }
  .stat-num { font-size: 22px; line-height: 28px; letter-spacing: -.4px; }
  .stat-lbl { margin-top: 6px; font-size: 13px; line-height: 18px; }

  /* ---- section headlines ---- */
  .benefits, .features, .math, .ms-sec, .ms .benefits { padding: 56px 0; }
  .h-big { font-size: 24px; line-height: 32px; letter-spacing: -.4px; }

  /* ---- benefit items: two per row, compact tile ---- */
  .slot, .ms .benefits .slot { margin: 26px -16px 0; }
  .stat-row, .ms-grid { margin-top: 36px; grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .item { flex-direction: column; gap: 12px; }
  .icon { width: 56px; height: 56px; border-radius: 10px; }
  /* The glyph is drawn on a 105 px grid with percentage insets, so the tile is scaled, not re-laid.
     The -1 px offset is kept from the desktop rule -- it is what covers the tile's 1 px border. */
  .glyph { transform: scale(.5333); transform-origin: 0 0; }
  .icon.num b { font-size: 19px; line-height: 26px; }
  .item-text h3 { font-size: 16px; line-height: 23px; letter-spacing: -.2px; }
  .item-text p { margin-top: 6px; font-size: 13px; line-height: 20px; }
  .item-text .eff { margin-top: 6px; font-size: 12px; line-height: 17px; }

  /* ---- what waiting costs ---- */
  .math-hd { padding: 28px 20px 24px; }
  .math-intro { margin-top: 14px; font-size: 15px; line-height: 23px; }
  .math-body { padding: 20px 16px 24px; }
  .math-stats { gap: 12px; }
  .math-stats .mstat:last-child { width: calc(50% - 6px); }   /* matches the 12 px gap */
  .mstat { padding: 16px 16px 18px; border-radius: 14px; }
  .mstat-num { font-size: 22px; line-height: 28px; }
  .mstat-lbl { margin-top: 6px; font-size: 13px; line-height: 18px; }
  .math-foot { margin-top: 24px; }
  .math-close { font-size: 15px; line-height: 23px; }

  /* ---- wave ---- */
  .wave { height: 40px; }
  .wave::before { top: -6px; width: 1200px; height: 46px; }

  /* ---- feature cards ---- */
  .features .wrap { grid-template-columns: 1fr; gap: 16px; }
  .card-hd { padding: 22px 20px 16px; }
  .card-hd h3 { font-size: 19px; line-height: 26px; }
  .card-hd p { margin-top: 7px; font-size: 14px; line-height: 22px; }
  /* native 730 x 560 / 1480 x 560 kept from the tablet block -- no crop */

  /* ---- pricing ---- */
  .pricing { padding: 56px 0 64px; }
  .plans-hd { padding: 26px 20px; }
  .plans-hd h2 { font-size: 24px; line-height: 32px; letter-spacing: -.4px; }
  .plans-row { padding: 0 16px; row-gap: 20px; }
  .plan-content, .plan-info { padding: 20px; }
  .plan-content { gap: 22px; }
  .plan-hd h3 { font-size: 19px; line-height: 26px; }
  .plan-hd .desc { margin-top: 8px; font-size: 14px; line-height: 22px; }
  .price { flex-wrap: wrap; gap: 2px 10px; }
  .price b { font-size: 27px; line-height: 36px; }
  .price span { text-align: left; font-size: 13px; line-height: 19px; }
  .plan-info .lbl, .plan-info li { font-size: 14px; line-height: 22px; }
  .plan-info ul { gap: 12px; }

  /* ---- CTA ---- */
  .cta { padding: 40px 20px; gap: 20px; }
  .cta h2 { font-size: 21px; line-height: 30px; }
  .cta-btns { width: 100%; flex-direction: column; align-items: stretch; }
  .cta-btns .btn { width: 100%; }

  /* ---- footer ---- */
  .footer { margin-top: 56px; }
  .f-top { height: 40px; }
  .f-cube { zoom: .6; }   /* 522 x .6 = 313 -- still clear of a 320 px viewport */
  .f-left, .f-right { gap: 26px 40px; padding: 26px 16px; }
  .f-bot { padding: 20px 16px; }

  /* ---- margin-scan page ---- */
  .ms .band-row1, .ms .band-row3 { padding: 22px 20px; }
  .ms-inc-hd, .ms-inc-list, .ms-panel-row, .ms-cell, .ms-qa-row { padding: 22px 20px; }
  .ms-inc-hd h3, .ms-qa-row h3 { font-size: 19px; line-height: 26px; }
  .ms-qa-row p, .ms-panel-row p, .ms-cell blockquote, .ms-cell > p { font-size: 15px; line-height: 23px; }
  .ms-lead { font-size: 15px; line-height: 23px; }

  /* ---- flash survey ----
     The three headline figures go one per row: at 358 px a third of the width leaves room for about
     two words per line and the labels are full sentences. */
  .sv-note { padding: 20px 22px; font-size: 15px; line-height: 24px; }
  .sv-keys { grid-template-columns: 1fr; gap: 12px; }
  .sv-key-num { font-size: 28px; line-height: 36px; }
  .sv-h2 { margin-top: 48px; font-size: 21px; line-height: 28px; }
  .sv-lead { font-size: 15px; line-height: 25px; }
  .sv-charts { grid-template-columns: 1fr; gap: 16px; }
  .sv-chart { padding: 20px; }
  .sv-chart h3 { font-size: 16px; line-height: 24px; }
  .sv-lbl, .sv-val { font-size: 14px; line-height: 21px; }
  .sv-foot { font-size: 13px; line-height: 21px; }
  /* Two columns of prose in a 358 px window leaves ~150 px a side, so the cross-tab becomes one
     block per row: the heading cell reads as the row's title and the value sits under it. */
  .sv-table thead { display: none; }
  .sv-table table, .sv-table tbody, .sv-table tr, .sv-table td { display: block; }
  .sv-table tr + tr { border-top: 1px solid var(--g200); }
  .sv-table td { border: 0; padding: 4px 20px; font-size: 14px; line-height: 22px; }
  .sv-table td:first-child { width: auto; padding-top: 18px; }
  .sv-table td:last-child { padding-bottom: 18px; }
  .sv-finding { padding: 28px 22px; }
  .sv-finding h2 { font-size: 21px; line-height: 30px; }
  .sv-finding p { margin-top: 14px; font-size: 15px; line-height: 25px; }
  .sv-method { padding: 22px; }
  .sv-method li { font-size: 14px; line-height: 23px; }

  /* ---- sub-pages ---- */
  .page { padding: 104px 0 64px; }
  .page-sub { font-size: 15px; line-height: 23px; }
  .prose { font-size: 15px; line-height: 25px; }
  .prose h2 { font-size: 21px; line-height: 28px; }
  .faq summary { font-size: 16px; line-height: 24px; padding: 16px 0; }
  .page h1 { font-size: 27px; line-height: 35px; letter-spacing: -.5px; }
  .team-grid, .promise, .nl-what { grid-template-columns: 1fr; }
  .person, .nl-form { padding: 22px; }
  .page-cta { padding: 26px; }
  .page-cta .btn { width: 100%; }

  .consent-btns .btn { flex: 1 1 100%; }
}