/* ============================================================================
   SoftSync — landing (editorial, neutral)
   Inspiration: Basecamp's editorial walkthrough. Palette: neutral warm-off-white,
   near-black ink + buttons, a single yellow highlight. Display headlines in
   Instrument Serif (the product's own heading font); body in Inter.
   Built on softsync-tokens.css.
============================================================================ */

:root {
  /* The product's own surface — warm cream + white. Neutral ink + black accent. */
  --bg:          #fdfaf7;
  --bg-raised:   #ffffff;
  --bg-sunken:   #f6f1e8;
  --line:        #ece4d3;
  --line-2:      #f3ecdd;
  --line-strong: #ddd2bd;
  --ink:    #221f1c;
  --ink-2:  #423d37;
  --ink-3:  #6a645b;   /* WCAG AA: ≥4.5:1 as text on cream/white/sunken */
  --ink-4:  #6d6760;   /* AA-safe muted text (≥4.5:1 even on the sunken bg) */
  --accent:     #221f1c;   /* near-black — buttons, marks */
  --accent-ink: #ffffff;
  --hl:     #221f1c;        /* highlight = the neutral near-black accent (matches buttons) */

  --maxw: 1140px;
  --measure: 60ch;
  --gutter: clamp(24px, 5vw, 56px);   /* phone floor 24px — a touch more breathing room so body copy isn't cramped to the edge */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.5, 0.5, 1);   /* gentle overshoot — macOS-like */
  --hero-top: 76px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 18px;
  line-height: 1.65;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }

/* ── Type ─────────────────────────────────────────────────────────────── */
/* Sans display — like the product UI and the new Basecamp. Serif only as a tiny accent. */
h1, h2, h3 { font-family: var(--sans); font-weight: 600; letter-spacing: -0.032em; line-height: 1.04; margin: 0; color: var(--ink); }
h1 { font-size: clamp(40px, 5.4vw, 66px); }
h2 { font-size: clamp(30px, 4vw, 48px); }
h3 { font-size: clamp(24px, 3vw, 34px); line-height: 1.1; }
.eyebrow { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }
em { font-style: italic; }
.it { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: 0.01em; }
p { margin: 0 0 1.05em; }
.lead { font-size: clamp(19px, 2vw, 23px); line-height: 1.5; color: var(--ink-2); }

/* the one accent: yellow highlight marker */
.hl { background: var(--hl); color: #fff; padding: 0.02em 0.2em; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; font-weight: inherit; }

/* ── Focus visibility (WCAG 2.4.7) ────────────────────────────────────────
   Keyboard focus ring for every interactive element. The 2px offset places it
   just outside the element on the page background, so it stays visible even on
   the dark buttons. Light variant inside dark sections. Mouse clicks don't show
   it (:focus-visible), so the look is unchanged for pointer users. */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 3px; }
/* white ring only where the focused element sits on a dark background */
.section-ink :focus-visible, .calm :focus-visible { outline-color: #fff; }
main:focus { outline: none; }   /* skip-link target; don't ring the whole region */

/* ── Skip link (WCAG 2.4.1) — hidden until keyboard-focused ─────────────── */
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 200; background: var(--ink); color: #fff; padding: 11px 18px; border-radius: var(--radius); font-family: var(--sans); font-weight: 600; font-size: 14px; text-decoration: none; transform: translateY(-160%); transition: transform .18s var(--ease); }
.skip-link:focus { transform: none; }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sans); font-size: 15px; font-weight: 500; line-height: 1;
  padding: 14px 26px; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer;
  transition: transform .12s var(--ease), background .18s, border-color .18s, color .18s; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #000; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--bg-sunken); border-color: var(--ink-4); }
.btn-white { background: var(--bg-raised); color: var(--ink); border-color: var(--line-strong); }
.btn-white:hover { background: #fff; border-color: var(--ink-4); }
.btn-sm { font-size: 14px; padding: 10px 18px; }

/* ── Nav ──────────────────────────────────────────────────────────────── */
/* Not a bar — just the actions at the top, scrolls away with the page. No divider. */
.lnav { position: absolute; inset: 0 0 auto 0; z-index: 50; height: 64px; display: flex; align-items: center; background: transparent; border: 0; }
.lnav.scrolled { background: transparent; }
.lnav .wrap { display: flex; align-items: center; justify-content: flex-end; width: 100%; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-weight: 600; font-size: 16px; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }
.brand img { width: 26px; height: 26px; border-radius: 7px; }
.lnav-links { display: flex; align-items: center; gap: 30px; }
.lnav-links a { font-family: var(--sans); font-size: 14px; color: var(--ink-3); text-decoration: none; transition: color .15s; }
.lnav-links a:hover { color: var(--ink); }

/* ── Layout rhythm ────────────────────────────────────────────────────── */
section { padding-block: clamp(44px, 6vw, 84px); }
.tight { padding-block: clamp(40px, 5vw, 64px); }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
article p, .prose p { color: var(--ink-2); max-width: var(--measure); }
article a, .prose a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
article a:hover, .prose a:hover { text-decoration-color: var(--ink); }

/* ── Hero (two-column, full) ──────────────────────────────────────────── */
.hero { display: flex; align-items: flex-start; padding: var(--hero-top) 0 48px; overflow: hidden; }
.hero > .wrap { width: 100%; }
.hero-grid { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: clamp(36px, 5vw, 72px); align-items: start; }
/* left column is sized to the viewport: menu pinned up top, headline anchored to the bottom (and still on-screen) */
.hero-copy { display: flex; flex-direction: column; justify-content: space-between; min-height: calc(90vh - 56px); min-height: calc(90svh / var(--zoom, 1) - 56px); }
.hero-visual { align-self: start; }
/* Title block — big problem-first hook + a small supporting line, tight together */
.hero-headline { font-family: var(--sans); font-weight: 450; font-size: clamp(17px, 1.85vw, 21px); line-height: 1.45; letter-spacing: -0.01em; color: var(--ink-3); max-width: 34ch; margin: 0; }
.hero-headline .big { display: block; font-weight: 600; color: var(--ink); font-size: clamp(29px, 3vw, 40px); line-height: 1.07; letter-spacing: -0.03em; margin-bottom: 16px; }
.hero-headline .it { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: 0.01em; color: var(--ink); }
.hero-ctas { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }
.hero-visual { position: relative; }
/* Full app, content-filled (no empty band). Width tuned so the whole shot fits the hero
   at full height and bleeds off the right. */
.hero-visual .shot { width: 1380px; max-width: none; }

/* Logo lives in the hero (Basecamp-style), not the top bar */
.hero-brand { display: inline-flex; align-items: center; gap: 12px; margin-top: 8px; margin-bottom: 34px; font-family: var(--sans); font-weight: 600; font-size: 22px; color: var(--ink); letter-spacing: -0.02em; }
.hero-brand img { width: 34px; height: 34px; border-radius: 9px; }

/* Real nav, with descriptions. Grouped tight (proximity) + underlined labels (link affordance). */
.hero-menu { display: grid; gap: 2px; margin-bottom: 36px; max-width: 540px; }
.hero-menu a { font-family: var(--sans); font-size: 16px; color: var(--ink-3); width: fit-content; padding: 3px 0; transition: transform .15s var(--ease); }
.hero-menu a strong { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: var(--line-strong); transition: text-decoration-color .15s; }
.hero-menu a:hover { color: var(--ink-2); }
.hero-menu a:hover strong { text-decoration-color: var(--ink); }
.hero-menu a .dash { color: var(--ink-4); margin: 0 3px; }

/* Globe + EN language toggle in the nav, left of Sign in — no box */
.lang--icon .lang-btn { gap: 6px; padding: 7px 9px; border: 0; background: transparent; color: var(--ink-3); border-radius: var(--radius); font-family: var(--sans); font-size: 14px; font-weight: 500; }
.lang--icon .lang-btn:hover, .lang--icon .lang-btn[aria-expanded="true"] { color: var(--ink); background: var(--bg-sunken); }
.lang--icon .lang-btn .globe { width: 16px; height: 16px; }
.lang--icon .lang-menu { right: 0; left: auto; }

/* ── Mobile nav: brand in the bar + hamburger panel (Basecamp-style) ───── */
/* Brand only appears in the bar on mobile; on desktop the logo lives in the hero */
.lnav .lnav-brand { display: none; align-items: center; gap: 10px; font-family: var(--sans); font-weight: 600; font-size: 18px; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
.lnav .lnav-brand img { width: 30px; height: 30px; border-radius: 8px; }

.nav-burger { display: none; position: relative; width: 42px; height: 42px; flex: 0 0 auto; padding: 0; border: 0; background: transparent; border-radius: var(--radius); color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .15s; }
.nav-burger:hover { background: var(--bg-sunken); }
.nav-burger .bx { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity .2s var(--ease), transform .2s var(--ease); }
.nav-burger .bx svg { width: 20px; height: 20px; display: block; }
.nav-burger .b-close { opacity: 0; transform: rotate(-90deg); }
.nav-open .nav-burger .b-open { opacity: 0; transform: rotate(90deg); }
.nav-open .nav-burger .b-close { opacity: 1; transform: none; }

/* Slide-down panel + scrim — kept out of the DOM flow on desktop */
.nav-scrim, .nav-panel { display: none; }
.nav-scrim { position: fixed; inset: 0; z-index: 90; background: rgba(34,31,28,.22); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .25s var(--ease); }
.nav-panel { position: fixed; top: 60px; right: var(--gutter); left: var(--gutter); margin-left: auto; max-width: 340px; z-index: 95; background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 10px; transform-origin: top right; opacity: 0; transform: translateY(-10px) scale(.97); pointer-events: none; transition: opacity .2s var(--ease), transform .28s var(--spring); }
.nav-panel-links { display: grid; gap: 1px; }
.nav-panel-links a { display: flex; align-items: baseline; gap: 8px; padding: 11px 12px; border-radius: var(--radius); font-family: var(--sans); font-size: 16px; line-height: 1.2; color: var(--ink-3); text-decoration: none; transition: background .12s; }
.nav-panel-links a strong { color: var(--ink); font-weight: 600; }
.nav-panel-links a span { font-size: 13.5px; }
.nav-panel-links a:hover, .nav-panel-links a:active { background: var(--bg-sunken); }
.nav-panel-foot { display: grid; gap: 8px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.btn-block { width: 100%; justify-content: center; }
/* Language: same globe-dropdown as the desktop bar (scales past 2 languages) */
.nav-panel-lang { position: relative; margin-top: 10px; }
.nav-panel-lang .lang-btn { width: 100%; justify-content: flex-start; gap: 9px; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius); background: transparent; color: var(--ink-2); font-family: var(--sans); font-size: 14.5px; font-weight: 500; cursor: pointer; }
.nav-panel-lang .lang-btn:hover, .nav-panel-lang .lang-btn[aria-expanded="true"] { background: var(--bg-sunken); color: var(--ink); }
.nav-panel-lang .lang-btn .globe { width: 16px; height: 16px; }
.nav-panel-lang .lang-btn .chev { width: 12px; height: 12px; margin-left: auto; color: var(--ink-4); transition: transform .2s var(--ease); }
.nav-panel-lang .lang-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
/* opens upward from the bottom row, full panel width, scrolls if many languages */
.nav-panel-lang .lang-menu { top: auto; bottom: calc(100% + 8px); left: 0; right: 0; min-width: 0; max-height: 248px; overflow-y: auto; transform: translateY(6px); }
.nav-panel-lang .lang-menu.open { transform: none; }
.nav-panel-lang .lang-menu button { padding: 11px 12px; font-size: 15px; }

@media (max-width: 980px) {
  .hero { min-height: 0; padding-top: clamp(84px, 12vw, 108px); }
  .hero-grid { grid-template-columns: 1fr; gap: clamp(28px, 5vw, 40px); }
  .hero-copy { display: block; min-height: 0; }   /* drop the desktop viewport-height spacer */
  .hero-headline { margin-top: 0; }
  .hero-visual { align-self: auto; margin-right: calc(-1 * var(--gutter)); }
  /* margin:0 kills the UA <figure> margin so the shot's LEFT edge lines up with
     the headline + "1-minute tour" button (the gutter), then bleeds off right */
  .hero-visual .shot { width: 130%; margin: 0; }
}

/* ── Screenshot frame ─────────────────────────────────────────────────── */
.shot { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-raised); box-shadow: var(--shadow-lg); overflow: hidden; }
.shot img, .shot video { width: 100%; height: auto; display: block; }
.vidwrap { margin: 0 0 30px; }
.vctl { display: flex; gap: 2px; margin-top: 8px; }
.vctl-btn { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-4); cursor: pointer; transition: color .15s, background .15s; }
.vctl-btn:hover { color: var(--ink); background: var(--bg-sunken); }
.vctl-btn svg { width: 13px; height: 13px; display: block; }
/* fullscreen affordance — phones/tablets only (on desktop the clips are already
   large, and tapping for OS fullscreen is a touch convenience) */
.vctl-fs { display: none; }
@media (max-width: 900px) { .vctl-fs { display: inline-flex; margin-left: auto; } }   /* sits at the right end of the control row */
.vctl-btn .i-pause { display: none; }
.vctl-btn.is-playing .i-play { display: none; }
.vctl-btn.is-playing .i-pause { display: block; }
.shot.bleed { max-width: 1120px; margin-inline: auto; }
figcaption { margin-top: 14px; font-size: 14px; color: var(--ink-3); font-family: var(--sans); }

/* ── Two-column letter (Basecamp "columns") ───────────────────────────── */
.columns { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.columns header h2 { position: sticky; top: 92px; }
.columns .prose { font-size: 19px; }
/* second sentence of the "Come see it live" intro — its own line. Tight on
   desktop, a little more air on phones (where the cramped <br> read badly). */
.cls-sub { display: block; margin-top: .18em; }
.sig { margin-top: 28px; font-family: var(--sans); font-size: 15px; color: var(--ink-3); line-height: 1.4; }
.sig--person { display: flex; align-items: center; gap: 14px; }
.sig-photo { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1px solid var(--line-strong); }
.sig .name { font-family: var(--sans); font-style: normal; font-weight: 600; font-size: 17px; letter-spacing: -0.01em; color: var(--ink); display: block; margin-bottom: 2px; }
.sig a { color: var(--ink); }

/* ── Pillar eyebrow ───────────────────────────────────────────────────── */
.pillar { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.pillar b { color: var(--ink); font-weight: 600; }

/* ── Audience split (two doors in) ────────────────────────────────────── */
.who { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }
.who .card { background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px 32px; box-shadow: var(--shadow-xs); transition: transform .2s var(--ease), box-shadow .25s var(--ease); }
.who .card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.who .card .eyebrow { display: block; margin-bottom: 13px; }
.who .card h3 { font-size: 22px; margin-bottom: 10px; letter-spacing: -0.02em; }
.who .card p { color: var(--ink-3); font-size: 16px; max-width: 40ch; margin: 0; }
.who .card p .hl { color: var(--ink); }
@media (max-width: 760px) { .who { grid-template-columns: 1fr; } }

/* ── Alternating feature rows ─────────────────────────────────────────── */
.frow { display: grid; grid-template-columns: 1fr 1.06fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.frow + .frow { margin-top: clamp(56px, 8vw, 110px); }
.frow .ftext .eyebrow, .frow .ftext .pillar { display: block; margin-bottom: 14px; }
.frow .ftext h3 { font-size: clamp(24px, 2.7vw, 33px); letter-spacing: -0.03em; line-height: 1.08; margin-bottom: 16px; }
.frow .ftext p { color: var(--ink-2); font-size: 18px; line-height: 1.55; max-width: 46ch; }
.frow .ftext p .hl { color: var(--ink); }
.frow.rev .ftext { order: 2; }
.frow .fvisual .shot { width: 100%; }
@media (max-width: 900px) { .frow { grid-template-columns: 1fr; gap: 28px; } .frow.rev .ftext { order: 0; } }

/* feature chips under copy */
.feat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.feat-chips span { font-family: var(--sans); font-size: 13.5px; color: var(--ink-2); background: var(--bg-raised); border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; }
.feat-chips span b { color: var(--ink); font-weight: 600; }

/* three-view strip */
.viewstrip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px; }
.viewstrip figure { margin: 0; }
.viewstrip .shot { width: 100%; }
.viewstrip figcaption { margin-top: 9px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); text-align: center; }
@media (max-width: 700px) { .viewstrip { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }

/* ============================================================================
   Long-form pages (Features / Simplicity / Speed / Intelligence)
   Basecamp Features layout: one calm, centered column. Centered hero,
   then a stack of big screenshots, each followed by a left-aligned heading
   + paragraph. Lots of breathing room.
============================================================================ */
/* Brand header — the SoftSync logo is its own top-of-page header on every
   subpage, decoupled from the hero, so it sits at the exact same spot no matter
   what the first section does (centred fold, tight video, etc.). The .wrap
   inside keeps it aligned to the same gutter as the headings below. */
/* Floor scales down on phones so the logo sits up near the top like a normal
   mobile header (matching index's top bar) instead of ~100px down; desktop is
   unchanged (10vw ≥ 88 once past ~880px). */
.page-brand { padding-top: clamp(32px, 10vw, 140px); }
.page-brand .hero-brand { margin: 0; }

/* Heading section top spacing — the gap from the brand header down to the H1.
   (The brand itself no longer lives here, so this is a smaller gap, not the
   page's whole top padding.) */
.page-head { padding-top: clamp(16px, 2.5vw, 28px); }
.page-head--flush { padding-bottom: 0; }                      /* live app sits flush below (intelligence) */
.page-head--tight { padding-bottom: clamp(20px, 3vw, 40px); } /* journeys */

.lp { max-width: 860px; margin: 0; }
.lp-head { text-align: left; max-width: 720px; margin: clamp(26px, 4vw, 44px) 0 clamp(46px, 7vw, 80px); }
.lp-head:has(+ .journeys) { margin-bottom: clamp(16px, 2.5vw, 28px); }
.lp-head .eyebrow, .lp-head .pillar { display: block; margin-bottom: 18px; }
.lp-head h1 { font-size: clamp(34px, 5vw, 54px); letter-spacing: -0.035em; line-height: 1.04; }
.lp-head .lead { margin: 22px 0 0; max-width: 52ch; color: var(--ink-3); font-size: clamp(18px, 2vw, 21px); line-height: 1.5; }
.lp-head .doccta { margin-top: 30px; display: flex; gap: 12px; justify-content: flex-start; flex-wrap: wrap; }

.lp-block + .lp-block { margin-top: clamp(56px, 8vw, 100px); }
.lp-block figure.shot { margin: 0; width: 100%; }
.lp-block .eyebrow { display: block; margin-bottom: 14px; }
.lp-block h2 { font-size: clamp(24px, 2.7vw, 32px); letter-spacing: -0.03em; line-height: 1.12; margin: 0 0 14px; }
.lp-block h2 .tag-exc, .lp-block h2 .tag-soon { vertical-align: middle; margin-left: 6px; }
.lp-block p { color: var(--ink-2); font-size: 18px; line-height: 1.6; }
.lp-block p + p { margin-top: 1em; }
.lp-block .lead-p { font-size: 20px; color: var(--ink); }

/* checkmark list (Reliability) */
.checks { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; max-width: 60ch; }
.checks li { position: relative; padding-left: 30px; font-family: var(--sans); font-size: 17px; color: var(--ink-2); line-height: 1.5; }
.checks li::before { content: "✓"; position: absolute; left: 0; top: 1px; color: #2c9e63; font-weight: 700; }
.checks li strong, .checks li b { color: var(--ink); font-weight: 600; }

/* speed page — instant timing chips */
.ticks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 22px 0 0; max-width: 60ch; }
.ticks div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 16px; }
.ticks .lbl { font-family: var(--sans); font-size: 15px; color: var(--ink-2); }
.ticks .t { font-family: var(--mono); font-size: 14px; font-weight: 600; color: #2c9e63; letter-spacing: -0.01em; }
@media (max-width: 560px) { .ticks { grid-template-columns: 1fr; } }

/* big statement line for the speed page */
.bigstate { font-family: var(--sans); font-weight: 600; letter-spacing: -0.035em; line-height: 1.04; font-size: clamp(30px, 4.4vw, 52px); color: var(--ink); max-width: 18ch; }
.bigstate .dim { color: var(--ink-4); }

/* example automations list (intelligence) */
.recipes { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; max-width: 62ch; }
.recipes li { background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; font-family: var(--sans); font-size: 16px; color: var(--ink-2); line-height: 1.45; }
.recipes li b { color: var(--ink); font-weight: 600; }
.recipes li .ic { color: var(--ink-4); margin-right: 8px; }

/* ============================================================================
   Homepage v2 — varied rhythm (letter → one-liners → big feature → bento →
   bold stat → proof → it's time → CTA)
============================================================================ */
.section-ink { background: var(--ink); color: #fff; }
.section-ink .eyebrow, .section-ink .pillar { color: rgba(255,255,255,.5); }
.section-ink .pillar b { color: #fff; }
.section-ink h2, .section-ink h3 { color: #fff; }
.section-ink p { color: rgba(255,255,255,.72); }
.section-ink .composer-hint { color: rgba(255,255,255,.4); }

/* ── "The noise is gone" — full-height dark moment that clears on scroll ── */
.calm { position: relative; min-height: 100vh; min-height: calc(100svh / var(--zoom, 1)); display: flex; align-items: center; justify-content: center; text-align: center; background: #15120f; color: #fff; overflow: hidden; padding-block: clamp(56px, 10vh, 80px); }
.calm .wrap { position: relative; z-index: 3; max-width: 820px; }
.calm h2 { color: #fff; font-size: clamp(30px, 5vw, 56px); letter-spacing: -0.035em; line-height: 1.05; filter: blur(9px); opacity: 0; transform: translateY(10px) scale(.99); transition: filter 1s var(--ease), opacity 1s var(--ease), transform 1s var(--ease); }
.calm p { color: rgba(255,255,255,.62); max-width: 48ch; margin: 22px auto 0; font-size: clamp(17px, 1.9vw, 20px); line-height: 1.5; opacity: 0; transform: translateY(8px); transition: opacity .9s ease .35s, transform .9s var(--ease) .35s; }
.calm.in h2 { filter: blur(0); opacity: 1; transform: none; }
.calm.in p { opacity: 1; transform: none; }
/* the noise: scattered chips that wink out */
.calm-noise { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.calm-noise span { position: absolute; font-family: var(--sans); font-size: 13px; color: rgba(255,255,255,.5); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); border-radius: 9px; padding: 6px 12px; white-space: nowrap; opacity: 1; transform: none; transition: opacity .6s ease, transform 1s var(--ease); }
.calm.in .calm-noise span { opacity: 0; transform: translateY(-14px) scale(.9); }
@media (prefers-reduced-motion: reduce) {
  .calm h2, .calm p { filter: none; opacity: 1; transform: none; transition: none; }
  .calm-noise { display: none; }
}

/* trust strip under hero */
.proof-row { display: flex; align-items: center; justify-content: center; gap: 12px 22px; flex-wrap: wrap; font-family: var(--sans); font-size: 14px; color: var(--ink-3); }
.proof-row b { color: var(--ink); font-weight: 600; }
.proof-row .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ink-4); }

/* problem one-liners */
.pains { list-style: none; margin: 6px 0 0; padding: 0; }
.pains li { font-family: var(--sans); font-weight: 600; letter-spacing: -0.03em; font-size: clamp(21px, 2.8vw, 32px); line-height: 1.18; color: var(--ink); padding: 24px 0; border-bottom: 1px solid var(--line); }
.pains li:first-child { border-top: 1px solid var(--line); }

/* big feature (Autopilot centerpiece) */
.bigfeat { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (max-width: 900px) { .bigfeat { grid-template-columns: 1fr; gap: 32px; } }

/* ── Hero-style product showcase (big screenshot bleeding off one edge) ──── */
.show { overflow: hidden; }
.show-grid { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.show-text h2 { font-size: clamp(30px, 4vw, 46px); letter-spacing: -0.035em; line-height: 1.04; }
.show-text p { color: var(--ink-2); font-size: 19px; line-height: 1.55; margin-top: 18px; max-width: 42ch; }
.show-text .composer { margin-top: 26px; }
.show-visual .shot { width: 1240px; max-width: none; }
/* view switcher (Table / Pipeline / Calendar) that swaps the screenshot.
   Active state is a single sliding pill (JS-positioned), mirroring the app. */
.viewswitch { position: relative; display: inline-flex; gap: 2px; margin-top: 26px; padding: 4px; background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 999px; }
.vw-btn { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--ink-3); background: transparent; border: 0; padding: 9px 16px; border-radius: 999px; cursor: pointer; transition: color .2s ease; }
.vw-btn svg { width: 15px; height: 15px; }
.vw-btn:hover { color: var(--ink); }
.vw-btn.is-on { color: var(--ink); }
.viewswitch .seg-pill { position: absolute; top: 4px; left: 0; height: calc(100% - 8px); width: 0; background: var(--bg-raised); border-radius: 999px; box-shadow: var(--shadow-xs); transform: translateX(0); transition: transform 340ms cubic-bezier(.22,.8,.22,1), width 340ms cubic-bezier(.22,.8,.22,1); z-index: 0; pointer-events: none; }
/* stacked screenshots that crossfade */
.shot--stack { position: relative; aspect-ratio: 16 / 9; }
.shot--stack img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; opacity: 0; transition: opacity .5s var(--ease); }
.shot--stack img.is-on { opacity: 1; }

/* reversed — visual on the left, bleeding off the left edge */
.show-grid.rev { grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr); }
.show-grid.rev .show-text { order: 2; }
.show-grid.rev .show-visual { order: 1; display: flex; justify-content: flex-end; }
.show-grid.rev .show-visual .shot { flex-shrink: 0; }
@media (max-width: 900px) {
  .show-grid, .show-grid.rev { grid-template-columns: 1fr; gap: 30px; }
  .show-grid.rev .show-text { order: 0; }
  /* keep the desktop left/right rhythm on phones: default sections bleed off the
     RIGHT edge (flush left with the text/buttons above), reversed sections bleed
     off the LEFT edge (flush right). margin:0 on the shot removes the UA <figure>
     margin so the anchored edge lines up exactly with the content gutter. */
  .show-visual { margin-left: 0; margin-right: calc(-1 * var(--gutter)); }
  .show-grid.rev .show-visual { margin-left: calc(-1 * var(--gutter)); margin-right: 0; justify-content: flex-end; }
  .show-visual .shot { width: 170%; flex-shrink: 0; margin: 0; }   /* bigger so the app is legible on phones */
}

/* bento grid */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.bento .cell { background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(24px, 2.4vw, 32px); box-shadow: var(--shadow-xs); display: flex; flex-direction: column; transition: transform .2s var(--ease), box-shadow .25s var(--ease); }
.bento .cell:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.bento .cell .eyebrow { display: block; margin-bottom: 11px; }
.bento .cell h3 { font-size: clamp(20px, 2vw, 23px); letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 9px; }
.bento .cell p { color: var(--ink-3); font-size: 15.5px; line-height: 1.5; margin: 0; }
.bento .cell .ss { margin-top: 20px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg-sunken); }
.bento .cell .ss img { width: 100%; display: block; }
.bento .c2 { grid-column: span 2; }
.bento .c3 { grid-column: span 3; }
.bento .c4 { grid-column: span 4; }
@media (max-width: 900px) { .bento { grid-template-columns: 1fr; } .bento .c2, .bento .c3, .bento .c4 { grid-column: auto; } }

/* urgency — "it's time" */
.timelist { list-style: none; margin: 8px 0 0; padding: 0; max-width: 860px; }
.timelist li { font-family: var(--sans); font-weight: 500; font-size: clamp(18px, 2.1vw, 25px); line-height: 1.35; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.6); }
.timelist li strong { color: #fff; font-weight: 600; }

/* light "it's time" list (calm, on cream) */
.timelite { list-style: none; margin: 0; padding: 0; }
.timelite li { font-family: var(--sans); font-size: clamp(17px, 1.9vw, 21px); line-height: 1.4; color: var(--ink-3); padding: 15px 0; border-bottom: 1px solid var(--line); }
.timelite li:first-child { border-top: 1px solid var(--line); }
.timelite li strong { color: var(--ink); font-weight: 600; }
.timelite li strong.hl { color: #fff; }

/* live class cards (Basecamp-style dated cards) */
.classes-grid { display: flex; flex-direction: column; gap: 14px; margin-top: 34px; }

/* calendar badge (shared) */
.cal-badge { flex-shrink: 0; width: 52px; text-align: center; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--bg-raised); }
.cal-badge .m { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; background: var(--ink); color: #fff; padding: 4px 0; }
.cal-badge .d { display: block; font-family: var(--sans); font-weight: 600; font-size: 21px; color: var(--ink); padding: 5px 0 6px; }
.cal-badge--lg { width: 62px; }
.cal-badge--lg .m { font-size: 10px; padding: 4px 0; }
.cal-badge--lg .d { font-size: 22px; padding: 3px 0 5px; }

/* featured "next session" card */
.class-next { display: flex; align-items: center; gap: 20px; background: var(--bg-raised); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); padding: 22px 24px; box-shadow: var(--shadow-xs); transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; }
.class-next:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--ink); }
.cn-body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.cn-eyebrow { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--ink-2); text-transform: uppercase; }
.cn-title { font-family: var(--sans); font-weight: 600; font-size: 19px; color: var(--ink); margin-top: 2px; }
.cn-meta { font-size: 14px; color: var(--ink-3); }
.cn-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: #fff; font-family: var(--sans); font-weight: 500; font-size: 15px; padding: 12px 20px; border-radius: var(--radius); white-space: nowrap; transition: gap .2s var(--ease), background .2s; }
.class-next:hover .cn-btn { background: var(--accent); }
.cn-arrow { transition: transform .2s var(--ease); }
.class-next:hover .cn-arrow, .class-row:hover .cn-arrow { transform: translateX(3px); }

/* upcoming rows */
.class-list { display: flex; flex-direction: column; }
.class-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 14px; border-radius: var(--radius); border-bottom: 1px solid var(--line); transition: background .15s var(--ease), padding-left .2s var(--ease); }
.class-row:last-child { border-bottom: 0; }
.class-row:hover { background: var(--bg-raised); padding-left: 18px; }
.cr-date { display: flex; flex-direction: column; gap: 1px; }
.cr-date b { font-family: var(--sans); font-weight: 600; font-size: 15px; color: var(--ink); }
.cr-date span { font-size: 13px; color: var(--ink-3); }
.cr-go { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 500; color: var(--ink-2); }
.class-row:hover .cr-go { color: var(--ink); }

@media (max-width: 560px) {
  .class-next { flex-wrap: wrap; gap: 14px; }
  .cn-btn { width: 100%; justify-content: center; }
}

/* ── "The answer is yes" — bigger, bolder, with green check badges ──────── */
.yes-kicker { font-family: var(--sans); font-size: clamp(18px, 2vw, 22px); color: var(--ink-3); margin: 0 0 16px; }
.yes--big { columns: 2; column-gap: 64px; max-width: 1020px; margin-top: clamp(30px, 4vw, 44px); }
.yes--big li { break-inside: avoid; position: relative; list-style: none; font-family: var(--sans); font-size: clamp(17px, 1.7vw, 19px); line-height: 1.4; color: var(--ink-2); padding: 18px 0 18px 32px; border-bottom: 1px solid var(--line); }
.yes--big li::before { content: "✓"; position: absolute; left: 0; top: 18px; color: #2c9e63; font-weight: 700; font-size: 16px; }
@media (max-width: 760px) { .yes--big { columns: 1; } }

/* floating peekaboo CTA — springs up from the bottom-right after ~30% scroll */
.peek { position: fixed; right: 24px; bottom: 24px; z-index: 80; transform: translateY(170%);
  display: inline-flex; align-items: center; gap: 10px; background: var(--ink); color: #fff;
  font-family: var(--sans); font-weight: 600; font-size: 15px; letter-spacing: -0.01em;
  padding: 13px 24px 13px 20px; border-radius: var(--radius); box-shadow: 0 16px 36px -12px rgba(20,18,15,.55);
  opacity: 0; pointer-events: none;
  transition: transform .55s var(--spring), opacity .3s ease, box-shadow .2s var(--ease); }
.peek.show { transform: translateY(0); opacity: 1; pointer-events: auto; }
.peek:hover { box-shadow: 0 22px 44px -12px rgba(20,18,15,.65); }
.peek img { width: 20px; height: 20px; filter: brightness(0) invert(1); }
@media (prefers-reduced-motion: reduce) { .peek { transition: opacity .25s ease; } .peek.show { transform: translateY(0); } }

/* ── Statement divider ────────────────────────────────────────────────── */
.statement h2 { max-width: 18ch; }
.statement .lead { margin-top: 18px; color: var(--ink-3); }

/* ── Walkthrough block (headline + intro + visual) ────────────────────── */
.walk { max-width: 760px; }
.walk .eyebrow { display: block; margin-bottom: 16px; }
.walk h3 { margin-bottom: 16px; }
.walk p { color: var(--ink-2); font-size: 19px; max-width: var(--measure); }
.visual { margin-top: clamp(28px, 4vw, 48px); }
.visual + .walk, section + section { }
.walk-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; max-width: 620px; }
.walk-list li { background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; font-family: var(--sans); font-size: 16px; color: var(--ink-2); }

/* ── Stats inline ─────────────────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; margin-top: 8px; }
.stat .n { font-family: var(--sans); font-weight: 600; letter-spacing: -0.04em; font-size: clamp(40px, 5vw, 56px); line-height: 1; color: var(--ink); }
.stat .l { margin-top: 8px; font-family: var(--sans); font-size: 14px; color: var(--ink-3); }

/* Three things — plain text columns, no boxes */
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px); }
.three .item .eyebrow { display: block; margin-bottom: 14px; }
.three .item h3 { font-size: 21px; margin-bottom: 10px; }
.three .item p { color: var(--ink-3); font-size: 16px; max-width: 34ch; }
.three .item .mini { margin-top: 14px; font-family: var(--sans); font-size: 14px; color: var(--ink-2); }
.three .item .mini b { font-weight: 600; }
@media (max-width: 880px) { .three { grid-template-columns: 1fr; gap: 36px; } }

/* ── YES list ─────────────────────────────────────────────────────────── */
.yes-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.yes-tag { font-family: var(--sans); font-weight: 600; font-style: normal; color: #fff; background: var(--hl); padding: 0 .16em; border-radius: 5px; }
.yes { list-style: none; margin: 36px 0 0; padding: 0; columns: 2; column-gap: 56px; max-width: 920px; }
.yes li { break-inside: avoid; font-family: var(--sans); font-size: 16px; color: var(--ink-2); padding: 13px 0 13px 28px; border-bottom: 1px solid var(--line); position: relative; line-height: 1.45; }
.yes li::before { content: "✓"; position: absolute; left: 0; top: 13px; color: #2c9e63; font-weight: 700; font-size: 14px; }

/* ── "It's time" closer ───────────────────────────────────────────────── */
.timer { max-width: 880px; }
.timer h2 { max-width: 18ch; margin-bottom: 28px; }
.timer ul { list-style: none; margin: 0; padding: 0; }
.timer li { font-family: var(--serif); font-size: clamp(20px, 2.4vw, 27px); line-height: 1.35; color: var(--ink-3); padding: 16px 0; border-bottom: 1px solid var(--line); }
.timer li strong { color: var(--ink); font-weight: 400; }

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.faq { max-width: 760px; }
.faq-q { font-family: var(--sans); font-weight: 600; letter-spacing: -0.02em; font-size: clamp(19px, 2vw, 23px); color: var(--ink); margin: 44px 0 10px; }
.faq-q:first-of-type { margin-top: 28px; }
.faq-a { font-family: var(--sans); font-size: 17px; color: var(--ink-2); max-width: var(--measure); }
.faq-a a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ── Final CTA ────────────────────────────────────────────────────────── */
.cta { text-align: center; }
.cta h2 { max-width: 16ch; margin: 0 auto; }
.cta .lead { margin: 20px auto 32px; max-width: 30ch; color: var(--ink-3); }

/* ── Footer ───────────────────────────────────────────────────────────── */
.lfoot { border-top: 1px solid var(--line); margin-top: 28px; padding-top: 76px; }
.lfoot-top { display: flex; align-items: center; justify-content: space-between; gap: 20px 44px; flex-wrap: wrap; }
.lfoot-links { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.lfoot-links a { font-family: var(--sans); font-size: 14.5px; color: var(--ink-3); text-decoration: none; }
.lfoot-links a:hover { color: var(--ink); }
.lfoot-base { display: flex; align-items: center; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap; margin-top: 48px; font-family: var(--sans); font-size: 13.5px; color: var(--ink-4); }
/* Plain text flow (NOT flex) so the inline flag stays in the sentence instead of
   splitting it into text│flag│text columns that wrap badly on phones. */
.lfoot-made { color: var(--ink-3); margin-right: auto; }
.lfoot-legal { display: inline-flex; align-items: center; gap: 18px; }
.lfoot-legal a { color: var(--ink-4); text-decoration: none; transition: color .15s; }
.lfoot-legal a:hover { color: var(--ink); }
/* Norwegian statutory company disclosure (Foretaksregisterloven §10-2) — name, HQ, register, org no + MVA */
.lfoot-org { margin: 18px 0 0; font-family: var(--sans); font-size: 12.5px; line-height: 1.5; color: var(--ink-4); }
.lfoot-org strong { color: var(--ink-3); font-weight: 600; }
.lfoot-reg::before { content: " · "; }   /* separator after the company name on one line (desktop) */

/* ── Journeys page ─────────────────────────────────────────────────────── */
.journeys { display: block; margin-top: clamp(20px, 3vw, 36px); perspective: 1700px; }
.journey { background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(22px, 3vw, 34px); box-shadow: var(--shadow-xs); margin-bottom: 20px; transition: box-shadow .25s var(--ease), border-color .25s; }
.journey:hover { box-shadow: var(--shadow); border-color: var(--line-strong); }
.journey-head h2 { font-size: clamp(20px, 2.4vw, 26px); line-height: 1.15; margin: 0; }
.journey-head p { color: var(--ink-3); margin: 8px 0 0; max-width: 56ch; font-size: 15.5px; line-height: 1.5; }

.jpath { display: flex; align-items: flex-start; margin-top: clamp(26px, 3vw, 38px); }
.jnode { flex: 0 0 auto; width: 104px; text-align: center; }
.jlogo { width: 56px; height: 56px; border-radius: 16px; margin: 0 auto; background: var(--bg); border: 1px solid var(--line-strong); display: flex; align-items: center; justify-content: center; font-family: var(--sans); font-weight: 700; font-size: 18px; color: var(--ink-3); overflow: hidden; box-shadow: var(--shadow-xs); }
.jlogo img { max-width: 40px; max-height: 34px; width: auto; height: auto; object-fit: contain; }
.jlogo svg { width: 26px; height: 26px; color: var(--ink-3); }
.jnode-name { display: block; font-family: var(--sans); font-weight: 600; font-size: 13px; color: var(--ink-2); margin-top: 12px; line-height: 1.25; }
.jnode-cap { display: block; font-size: 11.5px; color: var(--ink-4); margin-top: 3px; line-height: 1.3; }
.jnode--end .jlogo { background: var(--ink); border-color: var(--ink); }
.jnode--end .jlogo img { filter: brightness(0) invert(1); }
.jnode--end .jnode-name { color: var(--ink); }

.jarc { flex: 1 1 auto; min-width: 22px; height: 56px; }
.jarc path { fill: none; stroke: var(--line-strong); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }

/* Card deck: one stage pins to the viewport; cards are stacked papers, shuffled by scroll.
   JS (journeys.html) sets .journeys height + per-card transforms. Falls back to a plain
   list when JS is off, on mobile, or with reduced motion. */
.deck-on .journeys { position: relative; }
.deck-on .deck-stage { position: sticky; top: clamp(72px, 11vh, 116px); margin-bottom: 0; }
.deck-on .journey { position: absolute; left: 0; right: 0; top: 0; margin: 0; transform-origin: center top; backface-visibility: hidden; will-change: transform, opacity; transition: none; }

@media (max-width: 680px) {
  .jpath { flex-direction: column; align-items: center; gap: 4px; margin-top: 24px; }
  .jnode { width: auto; }
  .jarc { width: 2px; height: 22px; flex: 0 0 auto; }
}

/* plain social icons, sat on the baseline (no boxes) */
.lfoot-social { display: flex; align-items: center; gap: 18px; }
.lfoot-social a { display: inline-flex; color: var(--ink-4); transition: color .15s, transform .15s var(--ease); }
.lfoot-social a:hover { color: var(--ink); transform: translateY(-1px); }
.lfoot-social svg { width: 18px; height: 18px; display: block; }

/* small inline Norwegian flag — real proportions & colours */
.no-flag {
  display: inline-block; width: 22px; height: 16px; border-radius: 2px;
  margin: 0 8px; vertical-align: -3px;
  background:
    linear-gradient(180deg, transparent 7px, #00205b 7px 9px, transparent 9px),
    linear-gradient(90deg,  transparent 7px, #00205b 7px 9px, transparent 9px),
    linear-gradient(180deg, transparent 6px, #fff 6px 10px, transparent 10px),
    linear-gradient(90deg,  transparent 6px, #fff 6px 10px, transparent 10px),
    #ba0c2f;
  box-shadow: 0 0 0 1px rgba(34,31,28,.10);
}

/* Norwegian flag band — full-bleed at the very bottom, grows in height as you reach the end,
   and gently waves like cloth (animated wavy top edge) */
.flag-band { position: relative; height: 150px; margin-top: 42px; overflow: hidden; }
.flag-band__fill {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0;
  will-change: height;
  background: linear-gradient(180deg,
    #ba0c2f 0 37.5%,
    #fff    37.5% 43.75%,
    #00205b 43.75% 56.25%,
    #fff    56.25% 62.5%,
    #ba0c2f 62.5% 100%);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='200' viewBox='0 0 240 200' preserveAspectRatio='none'%3E%3Cpath d='M0 16 C40 8 80 8 120 16 C160 24 200 24 240 16 L240 200 L0 200 Z' fill='white'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='200' viewBox='0 0 240 200' preserveAspectRatio='none'%3E%3Cpath d='M0 16 C40 8 80 8 120 16 C160 24 200 24 240 16 L240 200 L0 200 Z' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-size: 240px 100%; mask-size: 240px 100%;
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
  animation: flagwave 7s linear infinite;
}
@keyframes flagwave {
  from { -webkit-mask-position: 0 0;      mask-position: 0 0; }
  to   { -webkit-mask-position: -240px 0; mask-position: -240px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .flag-band__fill { height: 150px !important; animation: none; -webkit-mask-image: none; mask-image: none; }
}

/* ── Reveal (calm) ────────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* ── Big & ultra-wide screens ─────────────────────────────────────────────
   New-Basecamp approach: above a reference width we ZOOM the whole page (see
   assets/zoom.js), so the layout — and the half-bleed product screenshots —
   scales up to fill the canvas instead of sitting small in a sea of margin.
   The zoom is uniform, so we don't bump --maxw here; we only have to keep the
   full-height (vh) sections one screen tall by dividing them back out by the
   live zoom factor (--zoom, set by the script; defaults to 1). */

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 880px) {
  body { font-size: 17px; }
  .lnav-links { display: none; }
  .columns { grid-template-columns: 1fr; gap: 24px; }
  .columns header h2 { position: static; }
  /* Calmer long-form reading on phones: the 19px desktop body copy felt dense
     edge-to-edge. Step it down a touch and open the line/paragraph rhythm. */
  .columns .prose, .prose { font-size: 16.5px; }
  .columns .prose p, .prose p { line-height: 1.65; }
  .columns .prose p + p { margin-top: 16px; }
  .show-text p { font-size: 16.5px; line-height: 1.62; }
  .cls-sub { margin-top: .55em; }   /* more air between the two lines on phones */
  .stats { grid-template-columns: 1fr; gap: 28px; text-align: left; }
  .yes { columns: 1; }
  .lfoot-top { flex-direction: column; align-items: flex-start; gap: 22px; }
  /* On phones the base row crammed Privacy/Terms hard-left and the social icons
     hard-right with a dead gap between. Stack it into a calm left-aligned column. */
  .lfoot-base { flex-direction: column; align-items: flex-start; gap: 18px; margin-top: 36px; }
  .lfoot-made { margin-right: 0; }
  .lfoot-made .made-rest { display: block; }   /* break after the flag on phones */
  /* company name on its own line, the register details break to the next line */
  .lfoot-org strong { display: block; }
  .lfoot-reg::before { content: none; }

  /* Sub-page header logo: match the index bar logo (30px / 18px) so the SoftSync
     mark is the same size everywhere on phones (index uses .lnav-brand there). */
  .page-brand .hero-brand { font-size: 18px; gap: 10px; }
  .page-brand .hero-brand img { width: 30px; height: 30px; border-radius: 8px; }

  /* Nav: brand left, compact actions + hamburger right */
  .lnav .wrap { justify-content: space-between; gap: 12px; }
  .lnav .lnav-brand { display: inline-flex; }
  .nav-burger { display: inline-flex; }
  .nav-actions { gap: 8px; }
  .nav-actions .lang, .nav-actions .nav-login { display: none; }   /* moved into the panel */
  /* index only: logo + full menu now live in the bar/panel, so drop the hero
     duplicates. Scoped to .hero-top (which exists only on the homepage) so the
     sub-pages keep their hero-brand home link. */
  .hero-copy > .hero-top { display: none; }

  /* The bar was jammed against the very top edge on phones (logo ~17px down),
     while the sub-pages sit much lower. Drop it down so the logo/CTA/burger sit
     at a comfortable height, and push the hero copy down to keep clear of it. */
  .lnav { top: 26px; }
  .hero { padding-top: clamp(124px, 19vw, 152px); padding-bottom: clamp(40px, 9vw, 72px); }

  /* Panel + scrim become live (animated via .nav-open on <body>) */
  .nav-scrim, .nav-panel { display: block; }
  .nav-panel { top: 88px; }   /* sits just below the lowered bar */
  .nav-open .lnav { z-index: 100; }   /* keep brand + close button above the scrim */
  .nav-open .nav-scrim { opacity: 1; pointer-events: auto; }
  .nav-open .nav-panel { opacity: 1; transform: none; pointer-events: auto; }

  /* "Take a 1-minute tour" on phones: no scroll-spring to hunt for (easy to tap),
     but it fades up with the rest of the hero copy instead of popping in instantly
     before the page settles. (JS skips adding .tour--show on mobile so this wins.) */
  .hero .tour { max-height: none; margin-top: 18px; pointer-events: auto;
    opacity: 0; transform: translateY(12px); animation: tourReveal .7s var(--ease) .32s both; }

  /* "It's time for SoftSync." reads awkwardly mid-sentence when the highlight
     box wraps on a narrow screen — drop it onto its own line under the question. */
  .timelite li strong.hl { display: block; width: fit-content; margin-top: 9px; }
}

/* Keep the primary CTA in the bar on phones — it's the main conversion action,
   so we never want to lose it to the burger. Compact it down and, on the very
   smallest screens, drop the brand wordmark (logo still links home) to make room. */
@media (max-width: 440px) {
  .nav-actions .nav-signup { padding: 8px 13px; font-size: 13.5px; }
}
@media (max-width: 360px) {
  .lnav .lnav-brand span { display: none; }
}

/* ============================================================================
   Subtle interactivity — micro-interactions, kept calm and simple
============================================================================ */

/* Buttons: gentle lift */
.btn { transition: transform .14s var(--ease), background .18s, border-color .18s, color .18s, box-shadow .2s var(--ease); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgba(20,18,15,.4); }
.btn-ghost:hover { transform: translateY(-1px); }

/* Screenshots: lift on hover */
.shot { transition: transform .55s var(--ease), box-shadow .55s var(--ease); will-change: transform; }
.shot:hover { transform: translateY(-6px); box-shadow: 0 44px 88px -26px rgba(31,30,28,.28), 0 8px 16px rgba(31,30,28,.06); }

/* Animated underline for text links */
.lnav-links a, .lfoot-links a, .sig a, .faq-a a, .prose a, .link-anim {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size .28s var(--ease), color .15s;
}
.lnav-links a:hover, .lfoot-links a:hover, .sig a:hover, .faq-a a:hover, .prose a:hover, .link-anim:hover { background-size: 100% 1px; }
.prose a, .faq-a a { text-decoration: none; } /* replace static underline with animated one */

.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-signin { font-family: var(--sans); font-size: 14px; color: var(--ink-3); }
.nav-signin:hover { color: var(--ink); }

/* ── Language selector ────────────────────────────────────────────────── */
/* Matches the button shape/height so EN · Sign in · Sign up free read as one row */
.lang { position: relative; }
.lang-btn { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 14px; font-weight: 500; line-height: 1; color: var(--ink-3); background: transparent; border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 10px 13px; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.lang-btn:hover { color: var(--ink); border-color: var(--ink-4); background: var(--bg-raised); }
.lang-btn .globe { width: 15px; height: 15px; }
.lang-btn .chev { width: 9px; height: 9px; transition: transform .2s var(--ease); }
.lang-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.lang-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 156px; background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 5px; z-index: 60; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .18s var(--ease), transform .18s var(--ease); }
.lang-menu.open { opacity: 1; transform: none; pointer-events: auto; }
.lang-menu button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font-family: var(--sans); font-size: 14px; color: var(--ink-2); background: transparent; border: 0; border-radius: 8px; padding: 9px 11px; cursor: pointer; transition: background .12s, color .12s; }
.lang-menu button:hover { background: var(--bg-sunken); color: var(--ink); }
.lang-menu button .flag { font-size: 15px; line-height: 1; }
.lang-menu button .tick { margin-left: auto; opacity: 0; color: var(--ink); font-weight: 600; }
.lang-menu button[aria-checked="true"] { color: var(--ink); font-weight: 500; }
.lang-menu button[aria-checked="true"] .tick { opacity: 1; }

/* Reveal: refined + stagger helpers */
.reveal { transition-duration: .62s; transform: translateY(12px); }
.d1 { transition-delay: .06s; } .d2 { transition-delay: .12s; } .d3 { transition-delay: .18s; } .d4 { transition-delay: .26s; }
/* Hero screenshot: slightly bigger, slower entrance */
.hero-shot.reveal { transform: translateY(30px) scale(.992); transition-duration: .9s; }
.hero-shot.reveal.in { transform: none; }

/* Walk-list rows: subtle hover */
.walk-list li { transition: border-color .18s, transform .18s var(--ease); }
.walk-list li:hover { border-color: var(--line-strong); transform: translateX(2px); }

/* ── Live Autopilot composer (the one interactive moment) ─────────────── */
.composer { max-width: 600px; margin-top: 28px; }
.composer-box { display: flex; align-items: center; gap: 12px; background: var(--bg-raised);
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 15px 15px 15px 20px; box-shadow: var(--shadow-sm); }
.composer-field { flex: 1; min-width: 0; display: flex; align-items: center; font-family: var(--sans); font-size: 16px; color: var(--ink-2); line-height: 1.4; min-height: 1.5em; }
.composer-caret { width: 2px; height: 19px; background: var(--ink); display: inline-block; margin-left: 1px; animation: bk 1.05s steps(1) infinite; }
@keyframes bk { 50% { opacity: 0; } }
.composer-go { flex-shrink: 0; background: var(--ink); color: #fff; font-family: var(--sans); font-size: 13px; font-weight: 500; padding: 9px 15px; border-radius: var(--radius); }
.composer-hint { margin-top: 13px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); }
@media (prefers-reduced-motion: reduce) { .composer-caret { animation: none; } .shot, .btn, .walk-list li { transition: none; } }

/* ── Descriptive link list (Basecamp-style "menu") ────────────────────── */
.navlist { display: grid; gap: 0; max-width: 600px; margin-top: 38px; }
.navlist a { display: flex; align-items: baseline; gap: 8px; padding: 15px 2px; border-top: 1px solid var(--line); font-family: var(--sans); font-size: 16px; color: var(--ink-3); transition: padding-left .2s var(--ease), color .15s; }
.navlist a:last-child { border-bottom: 1px solid var(--line); }
.navlist a strong { color: var(--ink); font-weight: 600; flex-shrink: 0; }
.navlist a .dash { color: var(--ink-4); }
.navlist a:hover { color: var(--ink); padding-left: 8px; }
.navlist a .arrow { margin-left: auto; opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s var(--ease); color: var(--ink-3); }
.navlist a:hover .arrow { opacity: 1; transform: none; }

/* ── Testimonials — gentle auto-scroll, pause on hover ────────────────── */
.marquee { overflow: hidden; margin-top: 8px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee-track { display: flex; gap: 20px; width: max-content; animation: marq 60s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marq { to { transform: translateX(-50%); } }
.quote { flex: 0 0 400px; background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px 30px; box-shadow: var(--shadow-xs); }
.quote p { font-family: var(--sans); font-size: 17px; line-height: 1.5; color: var(--ink); margin: 0 0 16px; }
.quote cite { font-style: normal; font-family: var(--sans); font-size: 13px; color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; flex-wrap: wrap; } }
@media (max-width: 880px) { .quote { flex-basis: 300px; } }

/* ── Customer logos — "in good company" quiet strip ───────────────────── */
.logos { padding-block: clamp(34px, 4.5vw, 60px); }
.logos-line { text-align: center; font-family: var(--sans); font-size: 16px; color: var(--ink-3); margin: 0 0 30px; }
.logos-line strong { color: var(--ink); font-weight: 600; }
.logos-track { gap: clamp(38px, 5vw, 64px); align-items: center; animation-duration: 52s; animation-play-state: paused; }
/* Hold the row at its starting arrangement until the strip scrolls into view,
   so the first impression is the order we designed (banks in the clear centre,
   not the clipped left edge). Hover still pauses it. */
.logos-marquee.in .logos-track { animation-play-state: running; }
.logos-marquee.in:hover .logos-track { animation-play-state: paused; }
/* Logos sit quiet and monochrome, then bloom to full colour on hover.
   Works for <img> (real logos) and the .logo--ph text wordmarks below. */
.logo { flex: 0 0 auto; height: 30px; width: auto; max-width: 132px; object-fit: contain; filter: grayscale(1); opacity: .5; transition: opacity .3s var(--ease), filter .3s var(--ease); }
/* Per-logo optical balance — trimmed sources vary in glyph weight/ratio, so a
   couple are nudged off the 30px baseline so none visually dominates the row. */
.logo[data-logo="dnb"] { height: 44px; }            /* flagship bank — sized up for emphasis */
.logo[data-logo="enetgi"], .logo[data-logo="placemoint"] { height: 22px; }  /* very wide wordmarks */
.logo--ph { display: inline-flex; align-items: center; height: 30px; font-family: var(--serif); font-size: 22px; font-weight: 500; color: var(--ink); white-space: nowrap; filter: none; }
.logos-marquee:hover .logo { opacity: .28; }
.logos-marquee .logo:hover { opacity: 1; filter: grayscale(0); }
@media (prefers-reduced-motion: reduce) {
  .logos-track { justify-content: center; gap: 30px 48px; }
  .logos-marquee:hover .logo { opacity: .5; }
}
/* Phones: smaller line + logos so the strip shows a few names at once and the
   intro reads comfortably. (Big screens scale up via the page zoom.) */
@media (max-width: 600px) {
  .logos { padding-block: clamp(30px, 9vw, 48px); }
  .logos-line { font-size: 15px; margin-bottom: 22px; max-width: 30ch; margin-inline: auto; }
  .logos-track { gap: 40px; }
  .logo { height: 25px; }
  .logo[data-logo="dnb"] { height: 37px; }
  .logo[data-logo="enetgi"], .logo[data-logo="placemoint"] { height: 18px; }
}

/* ── "Take a tour" banner — animated product preview (no real video) ──── */
.tour { display: inline-flex; align-items: center; gap: 14px; margin-top: 28px;
  background: var(--ink); color: #fff; padding: 10px 22px 10px 10px; border-radius: 14px;
  box-shadow: var(--shadow-sm); transition: transform .16s var(--ease), box-shadow .2s var(--ease); }
.tour:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.tour-thumb { position: relative; width: 92px; height: 60px; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: var(--bg-sunken); }
.tour-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; opacity: 0; animation: tourCycle 12s infinite; }
.tour-thumb img:nth-child(2) { animation-delay: 4s; }
.tour-thumb img:nth-child(3) { animation-delay: 8s; }
@keyframes tourCycle { 0%, 25% { opacity: 1; } 33%, 100% { opacity: 0; } }
.tour-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.tour-play i { position: relative; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.95); display: flex; align-items: center; justify-content: center; }
.tour-play i::after { content: ""; border-left: 9px solid var(--ink); border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px; }
.tour-play i::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid rgba(255,255,255,.55); animation: tourPulse 2.1s ease-out infinite; }
@keyframes tourPulse { 0% { transform: scale(.75); opacity: .7; } 100% { transform: scale(1.45); opacity: 0; } }
/* mobile hero tour: fades up with the rest of the hero copy (see @media 880) */
@keyframes tourReveal { to { opacity: 1; transform: none; } }
.tour-label { font-family: var(--sans); font-weight: 500; font-size: 15px; letter-spacing: -0.01em; }
@media (prefers-reduced-motion: reduce) {
  .tour-thumb img { animation: none; }
  .tour-thumb img:nth-child(2), .tour-thumb img:nth-child(3) { opacity: 0; }
  .tour-thumb img:first-child { opacity: 1; }
  .tour-play i::before { animation: none; display: none; }
  .hero .tour { animation: none; opacity: 1; transform: none; }
}

/* Tour banner sits just below the headline (off-screen on load). A short scroll lifts the
   title naturally and slides the banner into view — so the hero isn't busy on landing. */
/* In-flow: the pill grows from nothing and fluidly pushes the title up (macOS-like spring). */
.tour { max-height: 0; margin-top: 0; opacity: 0; transform: translateY(6px) scale(.96); transform-origin: left center;
  overflow: hidden; pointer-events: none;
  transition: max-height .6s var(--spring), margin-top .6s var(--spring), opacity .38s ease, transform .6s var(--spring), box-shadow .2s var(--ease); }
.tour.tour--show { max-height: 96px; margin-top: 30px; opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.tour.tour--show:hover { box-shadow: var(--shadow); }
@media (prefers-reduced-motion: reduce) { .tour { transition: opacity .3s; max-height: 96px; margin-top: 30px; opacity: 1; transform: none; } }

/* ============================================================================
   Pricing page
============================================================================ */

/* Subpage top bar: brand left, actions right, sticky + faintly frosted */
.lnav--bar { position: sticky; top: 0; height: 60px; background: rgba(253,250,247,0.82); -webkit-backdrop-filter: saturate(140%) blur(12px); backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s, background .2s; }
.lnav--bar.scrolled { border-bottom-color: var(--line); }
.lnav--bar .wrap { justify-content: space-between; }
.lnav-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-weight: 600; font-size: 17px; color: var(--ink); letter-spacing: -0.02em; }
.lnav-brand img { width: 27px; height: 27px; border-radius: 7px; }

/* Centered hero */
.price-hero { text-align: center; padding: clamp(64px, 9vw, 104px) 0 clamp(36px, 5vw, 56px); }
.price-hero .eyebrow { display: block; margin-bottom: 18px; }
.price-hero h1 { max-width: 16ch; margin: 0 auto; font-size: clamp(38px, 5vw, 60px); }
.price-hero .lead { max-width: 46ch; margin: 20px auto 0; color: var(--ink-3); }
.price-proof { margin-top: 22px; font-family: var(--sans); font-size: 14px; color: var(--ink-3); }
.price-proof b { color: var(--ink); font-weight: 600; }

/* Billing toggle — the product's segmented control (.seg-toggle), landing-sized */
.billing { position: relative; display: inline-flex; align-items: center; gap: 1px; margin: 30px auto 0; padding: 3px; background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 999px; }
.billing button { position: relative; z-index: 1; display: inline-flex; align-items: center; font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: -0.005em; color: var(--ink-3); background: transparent; border: 0; padding: 9px 20px; border-radius: 999px; cursor: pointer; line-height: 1; transition: color .2s ease; }
.billing button:hover { color: var(--ink); }
.billing button.on { color: var(--ink); }
.billing .seg-pill { position: absolute; top: 3px; left: 0; height: calc(100% - 6px); width: 0; background: var(--bg-raised); border-radius: 999px; box-shadow: var(--shadow-xs); transform: translateX(0); transition: transform 340ms cubic-bezier(.22,.8,.22,1), width 340ms cubic-bezier(.22,.8,.22,1); z-index: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .seg-pill { transition: none !important; } }
.billing .save { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; color: #1f6b43; margin-left: 7px; }

/* exclusive / soon tags (from the product's pricing matrix) */
.tag-exc, .tag-soon { display: inline-block; font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; vertical-align: middle; }
.tag-exc { color: #1f6b43; background: #e6f4ec; border: 1px solid #cfe9da; }
.tag-soon { color: var(--ink-3); background: var(--bg-sunken); border: 1px solid var(--line); }

/* ── Simple pricing (Basecamp-style: free strip + two cards + checklists) ── */
.pquote { margin: 26px 0 0; padding-left: 18px; border-left: 2px solid var(--line-strong); font-family: var(--sans); font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.pquote cite { display: block; margin-top: 10px; font-style: normal; font-size: 13px; color: var(--ink-3); }

/* "Start free" strip */
.freecard { display: flex; align-items: center; justify-content: space-between; gap: 30px; background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px 28px; box-shadow: var(--shadow-xs); }
.freecard .fc-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.freecard .fc-name { font-family: var(--sans); font-weight: 600; font-size: 19px; letter-spacing: -0.02em; color: var(--ink); }
.freecard .fc-price { font-family: var(--sans); font-size: 14px; color: var(--ink-3); }
.freecard p { margin: 8px 0 0; font-family: var(--sans); font-size: 15px; color: var(--ink-3); max-width: 64ch; }
.freecard .btn { flex-shrink: 0; }
@media (max-width: 720px) { .freecard { flex-direction: column; align-items: flex-start; } .freecard .btn { width: 100%; } }

.levelup { margin: 30px 0 18px; font-family: var(--sans); font-size: 15px; color: var(--ink-3); }
.levelup b { color: var(--ink); font-weight: 600; }

/* Two paid cards side by side */
.paid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 720px) { .paid2 { grid-template-columns: 1fr; } }

/* Simple checklist (core features / company) */
.corelist { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.corelist li { position: relative; padding-left: 30px; font-family: var(--sans); font-size: 17px; line-height: 1.45; color: var(--ink-2); }
.corelist li::before { content: "✓"; position: absolute; left: 0; top: 1px; color: #2c9e63; font-weight: 700; font-size: 15px; }
.corelist li b { color: var(--ink); font-weight: 600; }
.corelist li .muted { color: var(--ink-4); }
.corelist .tag-exc, .corelist .tag-soon { margin-left: 4px; }

/* Plans */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; margin-top: 48px; }
.plan { position: relative; display: flex; flex-direction: column; background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px 28px; box-shadow: var(--shadow-xs); transition: transform .2s var(--ease), box-shadow .25s var(--ease), border-color .2s; }
.plan:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.plan--featured { border-color: var(--ink); box-shadow: 0 24px 60px -28px rgba(31,30,28,.45); }
.plan--featured:hover { border-color: var(--ink); }
.plan-tag { position: absolute; top: -11px; left: 28px; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: var(--hl); padding: 4px 10px; border-radius: 999px; }
.plan-name { font-family: var(--sans); font-weight: 600; font-size: 20px; letter-spacing: -0.02em; color: var(--ink); }
.plan-blurb { font-family: var(--sans); font-size: 14px; line-height: 1.45; color: var(--ink-3); margin: 8px 0 0; min-height: 40px; }
.plan-price { display: flex; align-items: baseline; gap: 4px; margin: 22px 0 2px; }
.plan-price .amount { font-family: var(--sans); font-weight: 600; font-size: 46px; letter-spacing: -0.04em; line-height: 1; color: var(--ink); }
.plan-price .per { font-family: var(--sans); font-size: 14px; color: var(--ink-3); line-height: 1.2; }
.plan-note { font-family: var(--sans); font-size: 13px; color: var(--ink-3); min-height: 34px; margin: 6px 0 0; line-height: 1.4; }
.plan .btn { width: 100%; margin: 18px 0 4px; }
.plan-feats { list-style: none; margin: 18px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 11px; }
.plan-feats .lede { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: -3px; }
.plan-feats li { position: relative; font-family: var(--sans); font-size: 14.5px; line-height: 1.4; color: var(--ink-2); padding-left: 26px; }
.plan-feats li:not(.lede)::before { content: "✓"; position: absolute; left: 0; top: 0; color: #2c7a4b; font-weight: 700; font-size: 13px; }
.plan-feats li b { font-weight: 600; color: var(--ink); }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } .plan-blurb, .plan-note { min-height: 0; } }

/* "Every plan includes" */
.includes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 56px; margin-top: 36px; max-width: 920px; }
.includes li { list-style: none; padding: 16px 0; border-bottom: 1px solid var(--line); display: flex; gap: 14px; align-items: baseline; }
.includes li .t { font-family: var(--sans); font-size: 16px; font-weight: 600; color: var(--ink); flex-shrink: 0; }
.includes li .d { font-family: var(--sans); font-size: 15px; color: var(--ink-3); }
.includes li .repl { color: var(--ink-4); }
@media (max-width: 760px) { .includes { grid-template-columns: 1fr; } }

/* Trust row */
.trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 8px; }
.trust .item .eyebrow { display: block; margin-bottom: 10px; }
.trust .item h4 { font-family: var(--sans); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; margin: 0 0 6px; color: var(--ink); }
.trust .item p { font-family: var(--sans); font-size: 14.5px; color: var(--ink-3); margin: 0; max-width: 30ch; }
@media (max-width: 880px) { .trust { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 520px) { .trust { grid-template-columns: 1fr; } }

/* The "no" line */
.nos { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 26px; }
.nos span { font-family: var(--sans); font-size: 15px; color: var(--ink-2); background: var(--bg-raised); border: 1px solid var(--line); border-radius: 999px; padding: 9px 18px; }
.nos span b { color: var(--ink); font-weight: 600; }

/* ── Tour video modal (placeholder) ───────────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 28px; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(20, 18, 16, 0.55); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); animation: mFade .25s ease; }
.modal-dialog { position: relative; width: min(1180px, 94vw); animation: mPop .34s var(--spring); }
/* aspect-ratio defaults to 16:9 for the poster; JS snaps it to the real clip's
   ratio on metadata, so the video fills the frame edge-to-edge with no letterbox
   (was pillar-boxing — space left/right but none top/bottom). max-height keeps it
   on screen on short displays. */
.modal-video { position: relative; width: 100%; aspect-ratio: 16 / 10; max-height: 86vh; background: var(--ink); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.modal-video video, .modal-video iframe, .modal-video img { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; }
/* contain (not cover) so the native fullscreen player letterboxes the landscape
   clip on a portrait phone instead of zoom-cropping it. The 16:10 frame matches
   the clip, so inline there's no letterbox anyway. */
.modal-video video { object-fit: contain; }
.modal-video-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; }
.modal-play { width: 66px; height: 66px; border-radius: 50%; background: rgba(255,255,255,.96); display: flex; align-items: center; justify-content: center; }
.modal-play i::after { content: ""; display: block; border-left: 19px solid var(--ink); border-top: 12px solid transparent; border-bottom: 12px solid transparent; margin-left: 5px; }
.modal-ph-label { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.modal-close { position: absolute; top: 14px; right: 14px; z-index: 3; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(20,18,16,.55); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); -webkit-tap-highlight-color: transparent; transition: background .15s; }
.modal-close:hover { background: rgba(20,18,16,.82); }
.modal-close svg { width: 16px; height: 16px; display: block; }
@keyframes mFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mPop { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .modal-backdrop, .modal-dialog { animation: none; } }

/* ============================================================
   Legal & trust — privacy.html / terms.html (in pages/)
   A quiet compliance strip, a few principle statements, and the
   long-form policy text. Reuses the neutral :root tokens; no caps,
   no burgundy — matches the homepage. See page-header-convention.
   ============================================================ */

/* principle statements — three plain claims under the hero */
.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); margin: clamp(8px, 2vw, 24px) 0 0; }
.principle { border-top: 2px solid var(--ink); padding-top: 18px; }
.principle h2, .principle h3 { font-size: clamp(20px, 2.4vw, 26px); letter-spacing: -0.03em; line-height: 1.1; margin: 0 0 10px; font-weight: 600; }
.principle p { color: var(--ink-3); font-size: 16px; line-height: 1.55; margin: 0; }

/* compliance strip — GDPR / hosting / SOC 2 / ISO.
   NB: the bare ".trust" class is already taken (see ~line 892, a 4-col grid),
   so the section wrapper here is ".compliance" to avoid the collision. */
.compliance { padding: clamp(48px, 7vw, 96px) 0; }
.trust-head { max-width: 620px; margin: 0 0 clamp(28px, 4vw, 44px); }
.trust-head h2 { font-size: clamp(26px, 3.2vw, 38px); letter-spacing: -0.035em; line-height: 1.06; margin: 0 0 14px; }
.trust-head p { color: var(--ink-3); font-size: clamp(16px, 1.8vw, 19px); line-height: 1.55; margin: 0; max-width: 52ch; }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 20px); }
.trust-card { background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(20px, 2.2vw, 28px); box-shadow: var(--shadow-sm); }
.trust-card .ic { display: flex; width: 32px; height: 32px; color: var(--ink); margin-bottom: 16px; }  /* flex, not inline — an inline <span> ignores width/height and the SVG balloons */
.trust-card .ic svg { width: 100%; height: 100%; }
.trust-card h3 { font-size: 17px; letter-spacing: -0.02em; margin: 0 0 4px; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.trust-card .state { font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em; color: var(--ink-3); background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; }
.trust-card .state.is-live { color: #1f7a4d; background: #eaf5ee; border-color: #cfe7d8; }
.trust-card p { color: var(--ink-3); font-size: 14.5px; line-height: 1.5; margin: 8px 0 0; }
.trust-note { margin: clamp(20px, 2.6vw, 30px) 0 0; font-size: 13.5px; color: var(--ink-4); line-height: 1.5; max-width: 64ch; }

/* long-form policy */
.legal { padding-bottom: clamp(64px, 9vw, 120px); }
.legal-wrap { max-width: 760px; margin: 0; }
.legal-body { overflow-wrap: break-word; }   /* long URLs/links wrap instead of overflowing on phones */
.legal-meta { display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 clamp(28px, 4vw, 44px); padding-bottom: clamp(22px, 3vw, 32px); border-bottom: 1px solid var(--line); }
.legal-meta span { font-family: var(--mono); font-size: 12px; letter-spacing: 0.01em; color: var(--ink-3); }
.legal-meta span:not(:first-child) { margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--line); }
.legal-body h2 { font-size: clamp(21px, 2.4vw, 27px); letter-spacing: -0.03em; line-height: 1.12; margin: clamp(40px, 5vw, 60px) 0 14px; padding-top: clamp(40px, 5vw, 60px); border-top: 1px solid var(--line); }
.legal-body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-body h3 { font-size: 17px; letter-spacing: -0.02em; line-height: 1.3; margin: 28px 0 10px; color: var(--ink); }
.legal-body p, .legal-body li { color: var(--ink-2); font-size: 16px; line-height: 1.65; }
.legal-body p { margin: 0 0 14px; }
.legal-body ul { margin: 0 0 16px; padding-left: 22px; }
.legal-body li { margin: 0 0 7px; }
.legal-body li::marker { color: var(--ink-4); }
.legal-body a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.legal-body a:hover { text-decoration-color: var(--ink); }
.legal-body strong { color: var(--ink); font-weight: 600; }
.legal-lead { font-size: clamp(17px, 1.9vw, 19px) !important; color: var(--ink-2) !important; line-height: 1.6 !important; margin-bottom: 18px !important; }
/* sub-processor tables — keep them readable; scroll horizontally on narrow screens */
.legal-table { margin: 4px 0 18px; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius); }
.legal-table table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
.legal-table th, .legal-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.45; }
.legal-table thead th { background: var(--bg-sunken); color: var(--ink); font-weight: 600; font-size: 12.5px; letter-spacing: 0.01em; white-space: nowrap; }
.legal-table tbody td { color: var(--ink-2); }
.legal-table tbody td:first-child { color: var(--ink); font-weight: 600; }
.legal-table tbody tr:last-child td { border-bottom: 0; }

@media (max-width: 880px) {
  .principles { grid-template-columns: 1fr; gap: 22px; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .trust-grid { grid-template-columns: 1fr; }
}