/* Tendd wireframes - shared greyscale system.
   Structure only: no color, no brand, no type scale, no shadows, no icons.
   Used by every screen page. The overview (index.html) has its own inline CSS. */

:root {
  --ink: #1d1d1d;
  --mid: #4f4f4f;
  --soft: #7a7a7a;
  --faint: #9a9a9a;
  --line: #c9c9c9;
  --line2: #e0e0e0;
  --panel: #f2f2f2;
  --panel2: #f8f8f8;
  --skel: #dcdcdc;
  --page: #e8e8e8;
  --frame: #ffffff;
}

* { box-sizing: border-box; }
/* Keep native form controls (radios, checkboxes) greyscale, not the OS accent */
input, select, textarea, button, progress { accent-color: #777; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--page);
  line-height: 1.45;
}

/* ---- Layout: review side menu (tree) + stage ----
   The .stage is the container-query context that drives the desktop reflow at
   the bottom of this file, independent of viewport width. */
.layout { display: flex; align-items: flex-start; }
.stage { flex: 1; min-width: 0; padding: 28px 16px 56px; container-type: inline-size; }
/* The landing wants an edge-to-edge stage (its sections are full-bleed). */
.stage.stage-flush { padding: 0; }

/* Wireframe navigation tree (the review side menu, built by nav.js) */
details.wftree {
  flex: none; width: 250px; align-self: stretch;
  border-right: 1px solid var(--line); background: var(--panel2);
  position: sticky; top: 0; max-height: 100vh; overflow: auto;
  font-size: 12px;
}
details.wftree > summary {
  padding: 12px 14px; font-weight: 700; cursor: pointer;
  border-bottom: 1px solid var(--line2); list-style: none; color: var(--mid);
}
details.wftree > summary::-webkit-details-marker { display: none; }
details.wftree > summary::before { content: "\2261  "; color: var(--faint); }
.wftree-body { padding: 8px 10px 16px; }
.wftree .cluster { margin: 12px 4px 4px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--faint); font-weight: 600; }
.wftree ul { list-style: none; margin: 0; padding: 0; }
.wftree a { display: block; padding: 3px 8px; color: var(--mid); text-decoration: none; border-left: 2px solid transparent; }
.wftree a:hover { background: var(--panel); }
.wftree .wf-screen > a { font-weight: 600; }
.wftree .states a { padding-left: 20px; font-size: 11px; color: var(--soft); }
.wftree a.wf-overview-link { font-weight: 600; margin-bottom: 4px; color: var(--soft); }
.wftree a.current { border-left-color: var(--ink); background: var(--frame); font-weight: 700; color: var(--ink); }
.wftree .wf-track-out { margin-top: 14px; padding-top: 6px; border-top: 1px solid var(--line); }
.wftree .wf-track-out .wf-screen > a::after { content: " \2197"; color: var(--faint); font-weight: 400; }

@media (max-width: 819px) {
  .layout { display: block; }
  details.wftree { width: auto; position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--line); }
}

/* ---- The mobile screen frame (mobile-first is the primary layout) ---- */
.phone {
  max-width: 420px; margin: 0 auto; min-height: 720px;
  background: var(--frame); border: 1px solid var(--line);
  display: flex; flex-direction: column; position: relative;
}

/* GC1 App header */
.appbar {
  border-bottom: 1px solid var(--line);
  padding: 12px 16px; display: flex; align-items: center; justify-content: space-between;
  background: var(--panel2);
}
.appbar .wordmark { font-weight: 700; letter-spacing: 0.02em; }
.appbar .right { font-size: 12px; color: var(--soft); }
.gc-tag { font-size: 9px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.08em; }

/* Scroll body of the screen */
.screen { flex: 1; padding: 14px 14px 84px; }

/* Zone: a labelled region */
.zone { border: 1px solid var(--line); margin: 0 0 12px; padding: 10px 12px 12px; background: var(--frame); }
.zone > .zlabel {
  display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--faint); margin: 0 0 8px; font-weight: 600;
}
.zone.plain { border-style: dashed; }
.zaction { font-size: 11px; color: var(--soft); margin-top: 8px; }
.zaction b { color: var(--mid); font-weight: 600; }

/* GC3 Recurring summary strip */
.summary .count { font-size: 14px; color: var(--mid); margin: 0 0 2px; }
.summary .total { font-size: 40px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; margin: 0; }
.summary .context { font-size: 12px; color: var(--soft); margin: 4px 0 0; }
.summary .trust { font-size: 11px; color: var(--faint); margin: 8px 0 0; }

/* Alert banner (GC5) */
.alert-banner { border: 1px solid var(--line); background: var(--panel); padding: 10px 12px; }
.alert-banner p { margin: 0; font-size: 13px; color: var(--mid); }
.alert-banner .go { font-size: 11px; color: var(--soft); margin-top: 6px; display: inline-block; }

/* Category group + GC4 rows */
.group-title { font-size: 12px; color: var(--soft); margin: 14px 0 6px; text-transform: uppercase; letter-spacing: 0.05em; }
ul.list { list-style: none; margin: 0; padding: 0; }
.row {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--line2); border-left: 3px solid var(--line);
  padding: 10px 12px; margin: 0 0 8px; background: var(--frame);
  text-decoration: none; color: inherit; min-height: 44px;
}
.row:hover { border-left-color: var(--soft); }
.logo { flex: none; width: 34px; height: 34px; border: 1px dashed var(--line); display: flex; align-items: center; justify-content: center; font-size: 8px; color: var(--faint); text-align: center; }
.row .body { flex: 1; min-width: 0; }
.row .name { display: block; font-weight: 600; font-size: 14px; }
.row .meta { display: block; font-size: 12px; color: var(--soft); }
.row .when { display: block; font-size: 11px; color: var(--faint); }
.tag { flex: none; font-size: 10px; border: 1px solid var(--line); padding: 2px 7px; color: var(--soft); text-transform: uppercase; letter-spacing: 0.04em; }
.tag.trial { border-style: dashed; }
.tag.cancelled { color: var(--faint); }

/* Skeleton (loading) */
.skel { background: var(--skel); border-radius: 2px; display: inline-block; height: 12px; }
.skel.lg { height: 30px; }
.skel.block { display: block; }

/* Secondary actions */
.act-row { display: flex; flex-wrap: wrap; gap: 8px; }
.btn { display: inline-block; border: 1px solid var(--line); background: var(--frame); padding: 9px 14px; font-size: 13px; color: var(--mid); text-decoration: none; cursor: pointer; }
.btn.primary { border-color: var(--soft); font-weight: 600; color: var(--ink); }
.btn:hover { border-color: var(--soft); }
.locklabel { font-size: 10px; border: 1px solid var(--line); padding: 1px 5px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.05em; margin-left: 6px; }

/* Collapsible nudge */
.nudge { display: flex; align-items: center; justify-content: space-between; }
.nudge .chev { color: var(--faint); font-size: 12px; }

/* GC2 Global tab bar (bottom on mobile) */
.tabbar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; border-top: 1px solid var(--line); background: var(--panel2);
}
.tabbar a {
  flex: 1; text-align: center; padding: 10px 4px 12px; font-size: 12px;
  color: var(--soft); text-decoration: none; border-top: 2px solid transparent;
}
.tabbar a .ic { display: block; width: 18px; height: 18px; border: 1px solid var(--line); margin: 0 auto 4px; }
.tabbar a.cur { color: var(--ink); font-weight: 600; border-top-color: var(--ink); background: var(--frame); }

/* Onboarding chain: no tab bar, so less reserved bottom space */
.phone.onboarding .screen { padding-bottom: 28px; }
.appbar .back { font-size: 12px; color: var(--soft); text-decoration: none; }
.appbar .back:hover { color: var(--ink); }
.stepdot { font-size: 11px; color: var(--faint); }

/* Value preview + headline (Welcome) */
.hero-h { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin: 4px 0 6px; }
.hero-sub { font-size: 13px; color: var(--soft); margin: 0 0 4px; }
.preview-label { font-size: 10px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 6px; }

/* Choice cards (Path Choice) */
.opt { display: block; border: 1px solid var(--line); padding: 14px; margin: 0 0 10px; text-decoration: none; color: inherit; background: var(--frame); }
.opt:hover { border-color: var(--soft); }
.opt h3 { margin: 0 0 4px; font-size: 15px; }
.opt p { margin: 0; font-size: 12px; color: var(--soft); }
.opt .pick { font-size: 11px; color: var(--faint); margin-top: 8px; display: inline-block; }

/* Form fields (Add Subscription, later) */
.field { margin: 0 0 10px; }
.field label { display: block; font-size: 11px; color: var(--soft); margin: 0 0 3px; text-transform: uppercase; letter-spacing: 0.04em; }
.field input, .field select { width: 100%; padding: 8px 10px; border: 1px solid var(--line); background: var(--frame); font: inherit; font-size: 13px; color: var(--ink); }

/* Guided Reveal steps */
.revstep { border: 1px solid var(--line); padding: 12px 14px; margin: 0 0 10px; background: var(--frame); }
.revstep.dim { border-style: dashed; opacity: 0.55; }
.revstep .stepnum { font-size: 10px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.06em; display: block; margin-bottom: 6px; }
.revstep .big { font-size: 22px; font-weight: 700; }

/* Detail: key/value and section rows */
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line2); font-size: 13px; }
.kv:last-child { border-bottom: 0; }
.kv .k { color: var(--soft); }
.kv .v { color: var(--ink); text-align: right; }
.detail-head { display: flex; align-items: center; gap: 12px; }
.detail-head .name { font-size: 18px; font-weight: 700; }
.detail-head .amt { font-size: 13px; color: var(--soft); }
.callout { border: 1px solid var(--line); background: var(--panel); padding: 10px 12px; margin: 0 0 12px; font-size: 13px; }
.callout .k { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--faint); margin-bottom: 4px; }

/* Generic empty / error message block */
.msg { text-align: center; padding: 40px 16px; }
.msg h2 { font-size: 16px; margin: 0 0 8px; }
.msg p { font-size: 13px; color: var(--soft); margin: 0 0 16px; }

@media (max-width: 460px) {
  .stage { padding: 14px 8px 40px; }
  .phone { border-left: 0; border-right: 0; }
}

/* ============================================================
   Desktop reflow (mobile-first: this is the wide-screen layer).
   Triggered by the STAGE width via a container query, so the screen
   reflows on its own space regardless of the wireframe tree.
   The IA delta (navigation.md, core.md): the bottom tab bar (GC2) becomes a
   left rail and GC1 (the header) folds into the top of that rail. Single-column
   app screens sit in a centered comfortable measure. Home and Subscription
   Detail become a two-pane master-detail at >=1040 (see the block below).
   Onboarding has no delta: it stays a single centered column, just wider.
   ============================================================ */

/* The two-pane extra panels only exist on wide desktop; hidden everywhere else. */
.detailpane, .masterpane { display: none; }

@container (min-width: 760px) {
  .phone:not(.onboarding):not(.dash) {
    max-width: none; width: 100%;
    display: grid;
    grid-template-columns: 212px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    min-height: 660px;
  }
  /* GC1 folds into the TOP of the left rail on desktop (IA navigation.md). */
  .phone:not(.onboarding):not(.dash) > .appbar {
    grid-column: 1; grid-row: 1;
    flex-direction: column; align-items: flex-start; gap: 3px;
    background: var(--panel2); border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line); padding: 16px 18px;
  }
  /* Content fills the height beside the rail (the header no longer spans the top). */
  .phone:not(.onboarding):not(.dash) > .screen {
    grid-column: 2; grid-row: 1 / -1; padding: 24px 30px 32px;
  }
  /* Single-column app screens: a comfortable measure, centered in the wide
     column (IA: centered with more surrounding space), so a list does not
     stretch on large monitors. Two-pane screens keep their master filling
     its narrower track. */
  .phone:not(.onboarding):not(.dash):not(.tp-home):not(.tp-detail) > .screen {
    width: min(100%, 820px); justify-self: center;
  }
  /* GC2: bottom tab bar -> left rail, sitting under the folded header */
  .phone:not(.onboarding):not(.dash) > .tabbar {
    position: static; grid-column: 1; grid-row: 2;
    flex-direction: column; border-top: 0; border-right: 1px solid var(--line);
    align-content: start; background: var(--panel2); padding: 8px 0;
  }
  .phone:not(.onboarding):not(.dash) > .tabbar a {
    flex: none; text-align: left; padding: 11px 18px; border-top: 0;
    border-left: 3px solid transparent; display: flex; align-items: center; gap: 10px;
  }
  .phone:not(.onboarding):not(.dash) > .tabbar a .ic { margin: 0; }
  .phone:not(.onboarding):not(.dash) > .tabbar a.cur { border-top: 0; border-left-color: var(--ink); background: var(--frame); }

  /* Onboarding: same single centered column, just more room (one thing at a time) */
  .phone.onboarding { max-width: 560px; }
}

/* Two-pane master-detail on wide desktop (>=1040 of stage width).
   Home: list stays as the master (col 2), a selected-item detail opens on the
   right (col 3) instead of navigating away. Subscription Detail: the list
   returns as a master on the left (col 2), the detail sits on the right (col 3).
   Both panes span the full height beside the rail (header is folded into it). */
@container (min-width: 1040px) {
  .phone.tp-home:not(.dash) {
    grid-template-columns: 212px minmax(320px, 0.95fr) minmax(340px, 1.15fr);
  }
  .phone.tp-home:not(.dash) > .detailpane {
    display: block; grid-column: 3; grid-row: 1 / -1;
    border-left: 1px solid var(--line); padding: 24px 30px 32px; overflow: auto;
  }
  .phone.tp-detail:not(.dash) {
    grid-template-columns: 212px minmax(300px, 0.9fr) minmax(340px, 1.1fr);
  }
  .phone.tp-detail:not(.dash) > .masterpane {
    display: block; grid-column: 2; grid-row: 1 / -1;
    border-right: 1px solid var(--line); padding: 18px 18px 28px; overflow: auto;
  }
  .phone.tp-detail:not(.dash) > .screen { grid-column: 3; grid-row: 1 / -1; }
}

/* Panels: shared look. A small label marks them as the desktop second pane. */
.pane-note {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--faint); margin: 0 0 12px; font-weight: 600;
}
.masterpane .mp-title { font-size: 12px; color: var(--soft); margin: 0 0 8px; text-transform: uppercase; letter-spacing: 0.05em; }
.masterpane .row.cur { border-left-color: var(--ink); background: var(--panel2); }

/* ============================================================
   Full-page dashboard shell (app screens marked .dash).
   Replaces the framed-phone desktop model: on desktop the app goes edge
   to edge like the landing, with a persistent full-height sidebar (brand
   + nav) and a content area that owns the width and scrolls on its own,
   so the wide screen has no floating card and no empty void. Still
   greyscale, structure only. Mobile keeps the phone frame, but its tab
   bar becomes viewport-fixed chrome instead of resting at the card bottom.
   ============================================================ */

/* Edge-to-edge: no grey stage gutter around a dash app. */
.stage.stage-app { padding: 0; }

@container (min-width: 760px) {
  .phone.dash {
    max-width: none; width: 100%; height: 100vh; border: 0;
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    background: var(--frame);
  }
  /* GC1 brand block sits at the top of the sidebar. */
  .phone.dash > .appbar {
    grid-column: 1; grid-row: 1;
    flex-direction: column; align-items: flex-start; gap: 4px;
    border-right: 1px solid var(--line); border-bottom: 1px solid var(--line2);
    padding: 18px 20px;
  }
  /* GC2 tab bar becomes the full-height sidebar nav under the brand. */
  .phone.dash > .tabbar {
    position: static; grid-column: 1; grid-row: 2;
    flex-direction: column; border-top: 0; border-right: 1px solid var(--line);
    align-content: start; background: var(--panel2); padding: 10px 0; overflow: auto;
  }
  .phone.dash > .tabbar a {
    flex: none; text-align: left; padding: 12px 20px; border-top: 0;
    border-left: 3px solid transparent; display: flex; align-items: center; gap: 10px;
  }
  .phone.dash > .tabbar a .ic { margin: 0; }
  .phone.dash > .tabbar a.cur { border-top: 0; border-left-color: var(--ink); background: var(--frame); }
  /* Content owns the width and scrolls independently of the sidebar. */
  .phone.dash > .screen {
    grid-column: 2; grid-row: 1 / -1; overflow: auto; padding: 26px 34px 40px;
  }
  /* Single-column app screens: a comfortable reading measure, left-aligned
     inside the full-bleed content area (not a centered floating card). */
  .phone.dash:not(.tp-home):not(.tp-detail) > .screen > * { max-width: 940px; }
}

/* Two-pane master-detail: the detail fills the full height beside the
   list, so a wide screen has no empty void. */
@container (min-width: 1040px) {
  .phone.dash.tp-home {
    grid-template-columns: 240px minmax(360px, 1.05fr) minmax(360px, 1fr);
  }
  .phone.dash.tp-home > .detailpane {
    display: block; grid-column: 3; grid-row: 1 / -1;
    border-left: 1px solid var(--line); padding: 26px 30px 40px; overflow: auto;
  }
  .phone.dash.tp-detail {
    grid-template-columns: 240px minmax(320px, 0.9fr) minmax(360px, 1.1fr);
  }
  .phone.dash.tp-detail > .masterpane {
    display: block; grid-column: 2; grid-row: 1 / -1;
    border-right: 1px solid var(--line); padding: 20px 20px 32px; overflow: auto;
  }
  .phone.dash.tp-detail > .screen { grid-column: 3; grid-row: 1 / -1; }
}

/* Mobile: the bottom tab bar becomes real chrome fixed to the viewport,
   instead of resting at the bottom of a tall scrolling card. */
@media (max-width: 460px) {
  .phone.dash .tabbar { position: fixed; }
}

/* ============================================================
   Landing page (Welcome / Value Intro as the public front door).
   Full-width marketing wireframe: greyscale, structure only, real copy.
   Mobile-first; sections become multi-column at >= 760px.
   Not framed as a phone; this is the web front door that leads into the
   onboarding chain (its CTAs go to path-choice.html).
   ============================================================ */
.landing { background: var(--frame); color: var(--ink); }
.lp-wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* Top navigation */
.lp-nav { border-bottom: 1px solid var(--line); background: var(--frame); }
.lp-nav .lp-wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 16px; padding-bottom: 16px; }
.lp-nav .brand { font-weight: 700; font-size: 18px; letter-spacing: 0.02em; }
.lp-nav .lp-links { display: none; gap: 22px; }
.lp-nav .lp-links a { color: var(--mid); text-decoration: none; font-size: 14px; }
.lp-nav .lp-links a:hover { color: var(--ink); }
.lp-nav .lp-actions { display: flex; align-items: center; gap: 14px; }
.lp-nav .signin { color: var(--mid); text-decoration: none; font-size: 14px; }
.lp-nav .signin:hover { color: var(--ink); }

/* Section rhythm */
.lp-section { border-bottom: 1px solid var(--line2); }
.lp-section .lp-wrap { padding-top: 52px; padding-bottom: 52px; }
.lp-eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; color: var(--soft); margin: 0 0 12px; }
.lp-h1 { font-size: 32px; line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 14px; font-weight: 700; }
.lp-h2 { font-size: 23px; margin: 0 0 10px; letter-spacing: -0.01em; }
.lp-lead { font-size: 16px; color: var(--mid); margin: 0 0 22px; max-width: 46ch; }
.lp-intro { max-width: 54ch; color: var(--mid); margin: 0 0 26px; }

/* Buttons (landing scale) */
.lp-cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.lp-btn { display: inline-block; border: 1px solid var(--line); background: var(--frame); padding: 12px 20px; font-size: 15px; color: var(--mid); text-decoration: none; }
.lp-btn.primary { border-color: var(--ink); color: var(--ink); font-weight: 700; }
.lp-btn:hover { border-color: var(--soft); }
.lp-micro { font-size: 13px; color: var(--soft); margin: 14px 0 0; }

/* Hero */
.lp-hero .lp-wrap { display: grid; grid-template-columns: 1fr; gap: 30px; }
.lp-preview { border: 1px solid var(--line); background: var(--panel2); padding: 16px; }
.lp-preview .plabel { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--faint); margin: 0 0 10px; }
.lp-preview .pcount { font-size: 14px; color: var(--mid); margin: 0; }
.lp-preview .ptotal { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; margin: 2px 0; line-height: 1.05; }
.lp-preview .pctx { font-size: 12px; color: var(--soft); margin: 0 0 12px; }

/* Benefit / step grids */
.lp-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 10px; }
.lp-card { border: 1px solid var(--line); padding: 20px; background: var(--frame); }
.lp-card h3 { margin: 0 0 8px; font-size: 17px; }
.lp-card p { margin: 0; color: var(--mid); font-size: 14px; }
.lp-step .snum { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border: 1px solid var(--line); font-weight: 700; margin-bottom: 12px; }

/* Trust list */
.lp-trust ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 16px; }
.lp-trust li { border-left: 3px solid var(--line); padding: 2px 0 2px 14px; }
.lp-trust li strong { display: block; margin-bottom: 3px; font-size: 15px; }
.lp-trust li span { color: var(--mid); font-size: 14px; }

/* Social proof */
.lp-quotes { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 10px; }
.lp-quote { border: 1px solid var(--line2); background: var(--panel2); padding: 18px; }
.lp-quote p { margin: 0 0 10px; font-size: 15px; }
.lp-quote .who { font-size: 13px; color: var(--soft); }

/* Final CTA */
.lp-final { background: var(--panel); }
.lp-final .lp-wrap { text-align: center; }
.lp-final .lp-lead { margin-left: auto; margin-right: auto; }
.lp-final .lp-cta-row { justify-content: center; }

/* Footer (marketing site only; the app itself has no footer) */
.lp-footer { background: var(--panel2); border-top: 1px solid var(--line); }
.lp-footer .lp-wrap { padding-top: 40px; padding-bottom: 40px; display: grid; grid-template-columns: 1fr; gap: 24px; }
.lp-footer .fcol h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--faint); margin: 0 0 10px; }
.lp-footer .fcol a { display: block; color: var(--mid); text-decoration: none; font-size: 14px; padding: 3px 0; }
.lp-footer .fcol a:hover { color: var(--ink); }
.lp-footer .fbrand { font-weight: 700; }
.lp-footer .fbrand p { color: var(--soft); font-size: 12px; margin: 8px 0 0; max-width: 32ch; font-weight: 400; }

@media (min-width: 760px) {
  .lp-nav .lp-links { display: flex; }
  .lp-h1 { font-size: 46px; }
  .lp-h2 { font-size: 27px; }
  .lp-hero .lp-wrap { grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: 48px; padding-top: 70px; padding-bottom: 70px; }
  .lp-section .lp-wrap { padding-top: 64px; padding-bottom: 64px; }
  .lp-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .lp-trust ul { grid-template-columns: 1fr 1fr; gap: 20px 34px; }
  .lp-quotes { grid-template-columns: repeat(3, 1fr); }
  .lp-footer .lp-wrap { grid-template-columns: 2fr 1fr 1fr 1fr; }
}