/* =========================================================
   Clipio — landing page
   ---------------------------------------------------------
   Design rules for this file, kept deliberately narrow:

   1. One accent colour (#1A84EF) and its tints. Nothing else
      is coloured — no secondary hue, no decorative gradient.
   2. Separation comes from 1px borders and flat surface
      steps, never from a drop shadow. Shadows exist only
      where something genuinely floats (sticky nav, the
      active segmented-control thumb) and stay hairline.
   3. Radii and spacing come from the scale below. No one-off
      values in section code.

   The token block is also consumed by css/auth.css, so token
   names must not be renamed without updating that file.
   ========================================================= */

:root{
  /* brand — the only hue on the page */
  --brand:        #1A84EF;
  --brand-hover:  #1272D6;
  --brand-press:  #0E62BC;
  --brand-soft:   #EDF5FE;   /* flat tint, not an alpha wash */
  --brand-soft-2: #DEEBFD;
  --brand-line:   #C6DFFA;
  --brand-ink:    #0B4C8F;   /* brand text that still passes contrast */

  /* surfaces — a flat four-step light scale */
  --page:         #FFFFFF;
  --page-alt:     #F7F8FA;
  --panel:        #F1F3F6;
  --panel-2:      #E9ECF1;

  /* ink */
  --ink:          #0C1116;
  --ink-2:        #4B5563;
  --ink-3:        #7C8794;
  --ink-4:        #A3ACB8;

  /* lines */
  --line:         #E6E9EE;
  --line-strong:  #D6DBE3;

  /* dark surface, used once (the closing panel) */
  --dark:         #0C1116;
  --dark-2:       #141A21;
  --dark-line:    #232A33;
  --dark-ink:     #FFFFFF;
  --dark-ink-2:   #99A3AF;

  /* radii */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-full: 999px;

  --wrap: 1140px;
  --ease: cubic-bezier(.22,1,.36,1);

  /* hairlines only — see rule 2 above */
  --shadow-sm: 0 1px 2px rgba(12,17,22,.05);
  --shadow-md: 0 1px 3px rgba(12,17,22,.06);
  --shadow-lg: 0 2px 8px rgba(12,17,22,.07);
}

*,*::before,*::after{ box-sizing:border-box; }

/* Both the mobile menu and the capture-mode panels set `display` in their
   own rules, which outranks the browser's built-in `[hidden]{display:none}`.
   Script toggles `hidden` on all of them, so this has to win globally rather
   than be patched per component and forgotten on the next one. Same rule,
   same reason, as the one at the top of css/auth.css. */
[hidden]{ display:none !important; }

html{ scroll-behavior:smooth; scroll-padding-top:88px; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--page);
  color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img,svg{ max-width:100%; }
img{ height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; }

/* ---------------- type ----------------
   Tight tracking at display sizes. Headings never carry a
   text-shadow or a gradient fill. */
h1,h2,h3,h4{ margin:0; color:var(--ink); font-weight:660; }
h1{ font-size:clamp(38px,6.2vw,62px); line-height:1.03; letter-spacing:-.038em; }
h2{ font-size:clamp(28px,4vw,40px); line-height:1.1;  letter-spacing:-.032em; }
h3{ font-size:19px;   line-height:1.3;  letter-spacing:-.02em; }
h4{ font-size:15.5px; line-height:1.35; letter-spacing:-.012em; font-weight:600; }
p{ margin:0; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }
.center{ text-align:center; }
.muted{ color:var(--ink-3); }
.accent{ color:var(--brand); }

.lede{
  font-size:clamp(16.5px,1.5vw,18.5px);
  line-height:1.62; color:var(--ink-2); letter-spacing:-.011em;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:-999px; top:8px; z-index:100;
  background:var(--brand); color:#fff; padding:10px 16px; border-radius:var(--r-sm);
}
.skip:focus{ left:16px; }

:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:4px; }

/* ---------------- section rhythm ---------------- */
.section{ padding:clamp(72px,9vw,116px) 0; }
.section--tight{ padding:clamp(52px,6vw,76px) 0; }
.section--alt{ background:var(--page-alt); border-block:1px solid var(--line); }

.sechead{ max-width:660px; margin-bottom:clamp(36px,4.5vw,56px); }
.sechead--center{ margin-inline:auto; text-align:center; }
.sechead p{ margin-top:16px; color:var(--ink-2); font-size:17px; line-height:1.6; }

/* ---------------- eyebrow / pill ---------------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12.5px; font-weight:560; letter-spacing:-.004em;
  color:var(--brand-ink); background:var(--brand-soft);
  border:1px solid var(--brand-line);
  padding:5px 12px 5px 9px; border-radius:var(--r-full);
  margin-bottom:24px;
}
.eyebrow__dot{ width:6px; height:6px; border-radius:50%; background:var(--brand); flex:none; }

.pill{
  display:inline-block;
  font-size:11px; font-weight:620; letter-spacing:.055em; text-transform:uppercase;
  color:var(--brand-ink); background:var(--brand-soft);
  border:1px solid var(--brand-line);
  padding:4px 10px; border-radius:var(--r-full); margin-bottom:16px;
}
.pill--quiet{ color:var(--ink-3); background:var(--panel); border-color:var(--line); }

/* ---------------- buttons ----------------
   Flat fills, no glow. The primary button's only depth is a
   1px darker border. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:560; font-size:14.5px; line-height:1; letter-spacing:-.011em;
  padding:12px 18px; border-radius:var(--r-sm);
  border:1px solid transparent; cursor:pointer;
  transition:background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
  white-space:nowrap;
}
.btn--primary{ background:var(--brand); border-color:var(--brand-hover); color:#fff; }
.btn--primary:hover{ background:var(--brand-hover); border-color:var(--brand-press); }
.btn--primary:active{ background:var(--brand-press); }

.btn--ghost{ background:var(--page); border-color:var(--line-strong); color:var(--ink); }
.btn--ghost:hover{ background:var(--page-alt); border-color:var(--ink-4); }

.btn--soft{ background:var(--panel); border-color:transparent; color:var(--ink); }
.btn--soft:hover{ background:var(--panel-2); }

.btn--sm{ padding:9px 14px; font-size:13.5px; border-radius:var(--r-xs); }
.btn--lg{ padding:14px 22px; font-size:15px; }

.btn__os{ flex:none; }
.btn__tag{
  font-size:10px; font-weight:620; letter-spacing:.05em; text-transform:uppercase;
  border:1px solid currentColor; border-radius:var(--r-full);
  padding:2px 5px; margin-left:2px; opacity:.6;
}

.link-quiet{ font-size:14px; font-weight:500; color:var(--ink-2); }
.link-quiet:hover{ color:var(--ink); }

.link-arrow{
  display:inline-flex; align-items:center; gap:5px;
  color:var(--brand); font-weight:560; font-size:14.5px; letter-spacing:-.011em;
}
.link-arrow svg{ width:14px; height:14px; transition:transform .18s var(--ease); }
.link-arrow:hover svg{ transform:translateX(3px); }

/* ---------------- nav ---------------- */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.78);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color .2s var(--ease);
}
.nav.is-stuck{ border-bottom-color:var(--line); }
.nav__inner{ display:flex; align-items:center; gap:24px; height:62px; }
.nav__brand{ display:inline-flex; align-items:center; gap:8px; font-weight:640; font-size:16.5px; letter-spacing:-.026em; }
.nav__links{ display:flex; gap:2px; margin-inline:auto; }
.nav__links a{
  font-size:14px; font-weight:500; color:var(--ink-2);
  padding:7px 11px; border-radius:var(--r-xs);
  transition:color .15s, background .15s;
}
.nav__links > a,
.nav__menubtn{
  font-size:14px; font-weight:500; color:var(--ink-2);
  padding:7px 11px; border-radius:var(--r-xs);
  transition:color .15s, background .15s;
}
.nav__links > a:hover,
.nav__menubtn:hover{ color:var(--ink); background:var(--panel); }
.nav__actions{ display:flex; align-items:center; gap:14px; }

/* ---- Help dropdown ----
   A button, not a hover-only target: the panel opens on click and on focus,
   closes on Escape and on outside click, so it works from the keyboard and
   on touch. Hover just previews it on pointer devices (see js/main.js). */
.nav__menu{ position:relative; }
.nav__menubtn{
  display:inline-flex; align-items:center; gap:5px;
  border:0; background:transparent; cursor:pointer; font-family:inherit;
}
.nav__menubtn svg{
  width:11px; height:11px; fill:none; stroke:currentColor;
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .18s var(--ease);
}
.nav__menubtn[aria-expanded="true"]{ color:var(--ink); background:var(--panel); }
.nav__menubtn[aria-expanded="true"] svg{ transform:rotate(180deg); }

.nav__panel{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%);
  width:330px; padding:6px;
  background:var(--page); border:1px solid var(--line);
  border-radius:var(--r-md); box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column; gap:2px;
}
/* Bridge the 10px gap between the button and the panel.
   The panel is absolutely positioned, so .nav__menu's own box is only as tall
   as the button — that gap belongs to no element, and dragging the pointer
   down through it fires mouseleave and shuts the menu before you reach an
   item. This invisible strip is a descendant of the panel, so crossing it
   counts as still being inside the group. */
.nav__panel::before{
  content:''; position:absolute;
  left:0; right:0; top:-11px; height:11px;
}
.nav__item{
  display:flex; gap:11px; align-items:flex-start;
  padding:10px 11px; border-radius:var(--r-sm);
  transition:background .13s var(--ease);
}
.nav__item:hover{ background:var(--page-alt); }
.nav__item-ico{
  flex:none; width:30px; height:30px; border-radius:8px;
  display:grid; place-items:center;
  background:var(--brand-soft); color:var(--brand);
}
.nav__item-ico svg{
  width:15px; height:15px; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.nav__item b{ display:block; font-size:14px; font-weight:560; color:var(--ink); letter-spacing:-.012em; }
.nav__item span{ display:block; font-size:12.5px; line-height:1.45; color:var(--ink-3); margin-top:2px; }

.nav__burger{
  display:none; width:38px; height:38px; align-items:center; justify-content:center;
  background:none; border:1px solid var(--line); border-radius:var(--r-xs);
  cursor:pointer; flex-direction:column; gap:4px;
}
.nav__burger span{ display:block; width:16px; height:1.5px; background:var(--ink); border-radius:2px; }

.nav__mobile{
  border-top:1px solid var(--line); background:var(--page);
  padding:12px 24px 20px; display:flex; flex-direction:column; gap:2px;
}
.nav__mobile > a{ padding:11px 0; font-size:15px; font-weight:500; color:var(--ink-2); }
.nav__mobile .btn{ margin-top:12px; }
/* The Help group has nowhere to pop out to on a phone, so it renders inline
   as a labelled sub-list instead of a dropdown. */
.nav__mobile-group{ margin:8px 0 4px; padding-top:12px; border-top:1px solid var(--line); }
.nav__mobile-label{
  font-size:11px; font-weight:620; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-4); margin-bottom:4px;
}
.nav__mobile-group a{ display:block; padding:9px 0; font-size:15px; font-weight:500; color:var(--ink-2); }

/* ---------------- hero ----------------
   No glow layer, no gradient wash. The artwork sits in a plain
   bordered frame — the "no shadow behind the illustration"
   rule this redesign is built around. */
.hero{ padding:clamp(56px,8vw,92px) 0 clamp(44px,6vw,64px); }
.hero__copy{ max-width:780px; margin-inline:auto; text-align:center; }
.hero h1 .nowrap{ white-space:nowrap; }
.hero .lede{ margin:22px auto 0; max-width:620px; }

.hero__cta{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:32px; }
.hero__meta{
  margin-top:16px; font-size:13.5px; color:var(--ink-3);
  display:flex; gap:8px; align-items:center; justify-content:center; flex-wrap:wrap;
}
.hero__meta b{ color:var(--ink-2); font-weight:560; }
.hero__meta .sep{ color:var(--line-strong); }

.hero__art{
  margin-top:clamp(44px,5.5vw,68px);
  border:1px solid var(--line); border-radius:var(--r-2xl);
  background:var(--page-alt); padding:clamp(14px,2vw,26px);
  overflow:hidden;
}
.hero__art img{ width:100%; border-radius:var(--r-lg); background:var(--page); }

/* ---------------- chip strip ---------------- */
.strip{ padding:0 0 clamp(56px,7vw,84px); }
.strip__label{
  text-align:center; font-size:12.5px; font-weight:560;
  color:var(--ink-4); margin-bottom:22px;
}
.strip__row{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.chip{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13.5px; font-weight:500; color:var(--ink-2);
  border:1px solid var(--line); background:var(--page);
  padding:7px 13px; border-radius:var(--r-full);
}
.chip svg{
  width:14px; height:14px; flex:none; color:var(--ink-3);
  fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}

/* ---------------- three-in-one tabs ---------------- */
.modes__tabs{
  display:inline-flex; gap:4px; padding:4px;
  background:var(--panel); border-radius:var(--r-md); margin-bottom:28px;
}
.modes__tab{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; border:0; background:transparent; cursor:pointer;
  border-radius:var(--r-sm); font-size:14.5px; font-weight:560; letter-spacing:-.011em;
  color:var(--ink-2); transition:background .15s var(--ease), color .15s var(--ease);
}
.modes__tab svg{
  width:15px; height:15px; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.modes__tab:hover{ color:var(--ink); }
.modes__tab[aria-selected="true"]{ background:var(--page); color:var(--ink); box-shadow:var(--shadow-sm); }

.modes__panel[hidden]{ display:none; }
.modes__panel{
  display:grid; grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:clamp(24px,3.5vw,48px); align-items:center;
  border:1px solid var(--line); border-radius:var(--r-2xl);
  background:var(--page); padding:clamp(24px,3vw,40px);
}
.modes__copy h3{ font-size:clamp(22px,2.6vw,28px); letter-spacing:-.028em; margin-bottom:14px; }
.modes__copy > p{ color:var(--ink-2); font-size:15.5px; line-height:1.6; }
.modes__panel .checks{ margin-top:20px; }
.modes__art{
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--page-alt); padding:14px; overflow:hidden;
}
.modes__art img{ width:100%; border-radius:var(--r-sm); }

.modes__editor{ margin-top:22px; padding-top:20px; border-top:1px solid var(--line); }
.modes__editor-label{
  font-size:11px; font-weight:620; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-4); margin-bottom:12px;
}
.taglist{ display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:0; padding:0; }
.taglist li{
  font-size:12.5px; font-weight:500; color:var(--ink-2);
  background:var(--panel); border-radius:var(--r-xs); padding:5px 9px;
}

/* ---------------- checks ---------------- */
.checks{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.checks li{
  display:flex; gap:10px; align-items:flex-start;
  font-size:15px; line-height:1.5; color:var(--ink-2); letter-spacing:-.008em;
}
.check{
  flex:none; margin-top:3px; width:17px; height:17px; border-radius:50%;
  background:var(--brand-soft); border:1px solid var(--brand-line); position:relative;
}
.check::after{
  content:''; position:absolute; inset:0; margin:auto;
  width:4.5px; height:8px;
  border:1.6px solid var(--brand); border-top:0; border-left:0;
  transform:rotate(42deg) translate(-.5px,-1px);
}

/* ---------------- bento ----------------
   12-column grid; every cell is a flat bordered card. */
.bento{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:14px; }
.cell{
  grid-column:span 4;
  border:1px solid var(--line); border-radius:var(--r-xl);
  background:var(--page); padding:26px;
  display:flex; flex-direction:column;
  transition:border-color .18s var(--ease);
}
.cell:hover{ border-color:var(--line-strong); }
.cell--4{ grid-column:span 4; }
.cell--5{ grid-column:span 5; }
.cell--6{ grid-column:span 6; }
.cell--7{ grid-column:span 7; }
.cell--8{ grid-column:span 8; }
.cell--12{ grid-column:span 12; }
.cell--alt{ background:var(--page-alt); }
.cell--brand{ background:var(--brand-soft); border-color:var(--brand-line); }
.cell--brand:hover{ border-color:var(--brand); }

.cell__icon{
  width:36px; height:36px; border-radius:var(--r-sm);
  display:grid; place-items:center; margin-bottom:16px;
  background:var(--panel); color:var(--ink);
}
.cell--brand .cell__icon{ background:var(--brand); color:#fff; }
.cell__icon svg{
  width:18px; height:18px; fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}

.cell h3{ margin-bottom:8px; }
.cell > p{ color:var(--ink-2); font-size:14.5px; line-height:1.58; }
.cell .link-arrow{ margin-top:16px; }
.cell .taglist{ margin-top:18px; }
/* A cell that ends in a taglist sits next to taller cells in the same bento
   row and would otherwise leave a block of dead space under its text. Push
   the tags to the floor so the row bottoms line up. */
.cell > .taglist:last-child{ margin-top:auto; padding-top:18px; }

/* platform rows inside a bento cell */
.os{ display:flex; gap:10px; margin-top:auto; padding-top:22px; }
.os__item{
  flex:1; display:flex; align-items:center; gap:9px;
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--page); padding:11px 13px;
  font-size:13.5px; font-weight:560; letter-spacing:-.01em;
}
.os__item svg{ width:16px; height:16px; flex:none; color:var(--ink-2); }
.os__item .note{
  margin-left:auto; font-size:10px; font-weight:620; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-4);
}

/* a headline number inside a bento cell */
.stat{ display:flex; align-items:baseline; gap:8px; margin-top:auto; padding-top:22px; }
.stat b{ font-size:30px; font-weight:660; letter-spacing:-.035em; line-height:1; }
.stat span{ font-size:13.5px; color:var(--ink-3); }

/* ---------------- alternating feature rows ---------------- */
.feature{ padding:clamp(56px,7vw,92px) 0; border-top:1px solid var(--line); }
.feature__inner{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
  gap:clamp(32px,5vw,72px); align-items:center;
}
/* A flipped row moves the artwork into the first grid column, so the column
   widths have to swap with it — otherwise every other illustration renders
   in the narrow copy column and the two sizes visibly disagree. */
.feature--flip .feature__inner{ grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); }
.feature--flip .feature__art{ order:-1; }
.feature__copy h2{ margin-bottom:16px; }
.feature__copy > p{ color:var(--ink-2); font-size:16.5px; line-height:1.62; letter-spacing:-.009em; }
.feature__copy .checks{ margin-top:24px; }
.feature__copy .link-arrow{ margin-top:24px; }
.feature__art{
  border:1px solid var(--line); border-radius:var(--r-xl);
  background:var(--page-alt); padding:clamp(14px,1.8vw,22px);
}
.feature__art img{ width:100%; border-radius:var(--r-md); }

/* ---------------- small feature grid ----------------
   A 1px gap over a line-coloured backdrop draws the hairline
   rules between cells, so there are no per-card borders to
   double up at the seams. */
.minis__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--r-xl); overflow:hidden;
}
.mini{ background:var(--page); padding:26px 24px; }
.mini svg{
  width:19px; height:19px; margin-bottom:14px; color:var(--brand);
  fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
.mini h4{ margin-bottom:6px; }
.mini p{ font-size:14px; line-height:1.55; color:var(--ink-3); }

/* ---------------- testimonials ---------------- */
.tgrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.tcard{
  margin:0; border:1px solid var(--line); border-radius:var(--r-xl);
  background:var(--page); padding:26px;
  display:flex; flex-direction:column; gap:18px;
}
.tcard blockquote{ margin:0; font-size:15.5px; line-height:1.6; color:var(--ink); letter-spacing:-.011em; }
.tcard__head{ display:flex; align-items:center; gap:11px; margin-top:auto; }
.tcard__avatar{
  width:34px; height:34px; border-radius:50%; flex:none;
  background:var(--panel); color:var(--ink-2);
  display:grid; place-items:center; font-size:12px; font-weight:620;
}
.tcard__head strong{ display:block; font-size:14px; font-weight:560; }
.tcard__head span{ display:block; font-size:13px; color:var(--ink-3); }

/* ---------------- FAQ ---------------- */
.faq__list{ max-width:760px; margin-inline:auto; border-top:1px solid var(--line); }
.qa{ border-bottom:1px solid var(--line); }
.qa summary{
  list-style:none; cursor:pointer; padding:22px 40px 22px 0; position:relative;
  font-size:16.5px; font-weight:560; letter-spacing:-.017em;
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary::after{
  content:''; position:absolute; right:6px; top:50%;
  width:9px; height:9px; margin-top:-7px;
  border-right:1.6px solid var(--ink-3); border-bottom:1.6px solid var(--ink-3);
  transform:rotate(45deg); transition:transform .2s var(--ease);
}
.qa[open] summary::after{ transform:rotate(-135deg); margin-top:-2px; }
.qa__body{ padding:0 40px 24px 0; color:var(--ink-2); font-size:15.5px; line-height:1.62; }

/* ---------------- closing CTA ---------------- */
.cta__panel{
  background:var(--dark); border-radius:var(--r-2xl);
  padding:clamp(44px,6vw,76px) clamp(28px,5vw,64px); text-align:center;
}
.cta__panel h2{ color:var(--dark-ink); }
.cta__panel > p{ margin:16px auto 0; max-width:470px; color:var(--dark-ink-2); font-size:16.5px; }
.cta__row{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:32px; }
.cta__panel .btn--ghost{ background:transparent; border-color:var(--dark-line); color:var(--dark-ink); }
.cta__panel .btn--ghost:hover{ background:var(--dark-2); border-color:#333B45; }
.cta__meta{ margin-top:20px; font-size:13px; color:var(--dark-ink-2); }

/* ---------------- newsletter ---------------- */
.news__form{ display:flex; gap:8px; max-width:430px; margin:26px auto 0; }
.news__form input{
  flex:1; min-width:0; padding:12px 14px;
  font-size:14.5px; font-family:inherit; color:var(--ink);
  background:var(--page); border:1px solid var(--line-strong); border-radius:var(--r-sm);
  transition:border-color .15s;
}
.news__form input::placeholder{ color:var(--ink-4); }
.news__form input:focus{ outline:none; border-color:var(--brand); }
.news__note{ margin-top:12px; font-size:13.5px; color:var(--ink-3); min-height:20px; }

/* ---------------- footer ---------------- */
.foot{ border-top:1px solid var(--line); padding:56px 0 40px; background:var(--page-alt); }
.foot__cols{ display:grid; grid-template-columns:1.5fr repeat(4,1fr); gap:32px 24px; }
.foot__brandcol p{ margin-top:12px; font-size:13.5px; color:var(--ink-3); max-width:240px; line-height:1.55; }
.foot h4{
  font-size:12px; font-weight:620; letter-spacing:.055em; text-transform:uppercase;
  color:var(--ink-4); margin-bottom:14px;
}
.foot__cols a{ display:block; font-size:14px; color:var(--ink-2); padding:5px 0; }
.foot__cols a:hover{ color:var(--ink); }
.foot__bar{
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  margin-top:44px; padding-top:22px; border-top:1px solid var(--line);
  font-size:13.5px; color:var(--ink-3);
}
.foot__bar a:hover{ color:var(--ink); }

/* ---------------- reveal ---------------- */
.reveal{ opacity:0; transform:translateY(10px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1000px){
  .nav__links{ display:none; }
  .nav__actions{ margin-left:auto; }
  .nav__actions .link-quiet{ display:none; }
  .nav__burger{ display:inline-flex; }

  .modes__panel{ grid-template-columns:1fr; }
  .modes__art{ order:-1; }

  .feature__inner,
  .feature--flip .feature__inner{ grid-template-columns:1fr; }
  .feature__art,
  .feature--flip .feature__art{ order:-1; }

  .cell,.cell--5,.cell--6,.cell--7,.cell--8{ grid-column:span 6; }
  .cell--12{ grid-column:span 12; }

  .tgrid{ grid-template-columns:1fr; }
  .foot__cols{ grid-template-columns:1fr 1fr; }
}

@media (max-width:620px){
  .wrap{ padding-inline:18px; }
  .cell,.cell--5,.cell--6,.cell--7,.cell--8{ grid-column:span 12; }

  .modes__tabs{ display:flex; width:100%; }
  .modes__tab{ flex:1; justify-content:center; padding:9px 8px; font-size:13.5px; }
  .modes__tab svg{ display:none; }

  .hero__cta{ flex-direction:column; }
  .hero__cta .btn{ width:100%; }
  .os{ flex-direction:column; }
  .foot__cols{ grid-template-columns:1fr; gap:26px; }
  .news__form{ flex-direction:column; }
}