/*
 * Rentie marketing site — 2026-08 redesign.
 *
 * Tokens come from the designer's app SVGs (docs/website-design-tokens.md),
 * NOT from the app's old "Sculpted Monolith" system. Coral #FF875A, ink
 * #404040, muted blue #72A1C1 panels, cream surfaces, hand-drawn cat mascot.
 */
/* ───────── Noto Sans Armenian, self-hosted ─────────
   Served from our own origin: loading it from fonts.googleapis.com cost ~830ms
   of render-blocking time for a 1KB stylesheet, because the browser had to
   handshake two Google hosts before a glyph arrived.

   Declared as DISCRETE weights rather than one `font-weight: 400 800` range,
   even though the file is a single variable font and every block points at the
   same URL. This mirrors exactly what Google's own CSS served. The range form
   is tidier, but a browser that does not resolve a ranged @font-face against a
   specific weight request falls back for that weight alone, which showed up as
   Armenian headings at 800 rendering in the system serif (Sylfaen on Windows)
   while 600-weight text beside them stayed correct.

   unicode-range means a visitor fetches only the subsets the page uses.
   Licensed under the SIL Open Font License, which permits self-hosting. */

@font-face {
  font-family: 'Noto Sans Armenian';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/noto-sans-armenian-armenian.woff2') format('woff2');
  unicode-range: U+0308, U+0530-058F, U+2010, U+2024, U+25CC, U+FB13-FB17;
}
@font-face {
  font-family: 'Noto Sans Armenian';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/noto-sans-armenian-armenian.woff2') format('woff2');
  unicode-range: U+0308, U+0530-058F, U+2010, U+2024, U+25CC, U+FB13-FB17;
}
@font-face {
  font-family: 'Noto Sans Armenian';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/noto-sans-armenian-armenian.woff2') format('woff2');
  unicode-range: U+0308, U+0530-058F, U+2010, U+2024, U+25CC, U+FB13-FB17;
}
@font-face {
  font-family: 'Noto Sans Armenian';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/noto-sans-armenian-armenian.woff2') format('woff2');
  unicode-range: U+0308, U+0530-058F, U+2010, U+2024, U+25CC, U+FB13-FB17;
}
@font-face {
  font-family: 'Noto Sans Armenian';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('assets/fonts/noto-sans-armenian-armenian.woff2') format('woff2');
  unicode-range: U+0308, U+0530-058F, U+2010, U+2024, U+25CC, U+FB13-FB17;
}
@font-face {
  font-family: 'Noto Sans Armenian';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/noto-sans-armenian-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Noto Sans Armenian';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/noto-sans-armenian-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Noto Sans Armenian';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/noto-sans-armenian-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Noto Sans Armenian';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/noto-sans-armenian-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Noto Sans Armenian';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('assets/fonts/noto-sans-armenian-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Noto Sans Armenian';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/noto-sans-armenian-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Noto Sans Armenian';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/noto-sans-armenian-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Noto Sans Armenian';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/noto-sans-armenian-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Noto Sans Armenian';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/noto-sans-armenian-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Noto Sans Armenian';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('assets/fonts/noto-sans-armenian-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --coral: #FF875A;
  --coral-deep: #E56F44;      /* hover / pressed */
  --coral-soft: #FFE9DF;      /* tinted chips + icon circles */
  --ink: #404040;             /* headings + mascot line */
  --text: #282828;
  --muted: #71717A;
  --blue: #72A1C1;            /* panels, bands */
  --blue-soft: #E3EDF4;       /* light blue fills */
  --page: #FCFCFC;
  --band: #F7F7F5;
  --card: #FFFFFF;
  --line: #E5E7EB;
  --line-strong: #DDDDDD;
  --lime: #E1E319;            /* selected states, tiny highlights only */
  --error: #EF4444;

  --r-card: 16px;
  --r-input: 14px;
  --r-pill: 999px;

  --font: 'Noto Sans Armenian', 'Aktiv Grotesk', system-ui, -apple-system, sans-serif;

  --shadow-card: 0 1px 2px rgba(40, 40, 40, 0.04), 0 8px 24px rgba(40, 40, 40, 0.06);
  --shadow-pop: 0 12px 40px rgba(40, 40, 40, 0.14);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ───────── page load ─────────
   The document eases in once per page load, so a page settles into view
   instead of snapping. Three deliberate choices:

   - the hidden state lives inside the keyframes, never as a static
     `opacity: 0` on body. The reduced-motion block above disables animations
     with !important, and a static rule would survive it — leaving those
     visitors on a permanently blank page.
   - opacity only, no transform: a transform on body would make it the
     containing block for the fixed .nav-panel and break the mobile menu.
   - pure CSS with no .js guard, so it still runs on the pages that do not
     set the .js class, and a script failure can never strand content hidden. */
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  animation: page-in 0.35s ease-out both;
}

/* height:auto is load-bearing, not cosmetic: the images now carry width/height
   attributes so the browser can reserve space before they load (no layout
   shift). Without height:auto, any CSS that sets only width would leave the
   attribute height in force and squash the picture. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ── type scale ── */
h1 { font-size: clamp(34px, 5vw, 54px); font-weight: 800; line-height: 1.15; letter-spacing: -0.5px; color: var(--ink); text-wrap: balance; }
h2 { font-size: clamp(26px, 3.4vw, 36px); font-weight: 800; line-height: 1.25; color: var(--ink); text-wrap: balance; }
h3 { font-size: 19px; font-weight: 700; line-height: 1.35; color: var(--ink); }
.lede { font-size: clamp(16px, 1.8vw, 19px); line-height: 1.7; color: var(--muted); }

/* ── buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 30px; border: none; border-radius: var(--r-pill);
  font-family: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
  text-decoration: none; transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--coral); color: #fff; box-shadow: 0 6px 20px rgba(255, 135, 90, 0.35); }
.btn-primary:hover { background: var(--coral-deep); }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line-strong); }
.btn-ghost:hover { border-color: var(--ink); }
.btn:focus-visible, a:focus-visible { outline: 3px solid rgba(255, 135, 90, 0.5); outline-offset: 2px; }

.link-quiet { color: var(--muted); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.link-quiet:hover { color: var(--ink); }

/* ── nav ── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(252, 252, 252, 0.92); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; gap: 28px; height: 68px; }
.nav-logo { display: flex; align-items: center; gap: 9px; font-size: 20px; font-weight: 800; color: var(--ink); text-decoration: none; margin-right: auto; }
.nav-logo img { height: 30px; }
.nav a.nav-link { font-size: 15px; font-weight: 600; color: var(--muted); text-decoration: none; }
.nav a.nav-link:hover { color: var(--ink); }
.nav .btn { padding: 11px 22px; font-size: 14.5px; }
/* ───────── feature bubbles: mobile disclosure ─────────
   Eighteen bubbles stack into a very long scroll on a phone, so only the first
   five show until the reader asks for the rest. Desktop is untouched: the field
   wraps into a few rows there and the whole point is seeing it at a glance.
   The button lives outside .bubble-field so it is not caught by nth-child. */
.bubble-more { display: none; }

@media (max-width: 760px) {
  /* Both the hiding and the button are gated on .js, which the page sets in
     <head>. Without scripting the toggle could never run, so hiding thirteen
     bubbles behind a dead button would strand them; instead the full field
     simply renders as it always did. */
  .js .bubble-field .bubble:nth-child(n + 6) { display: none; }
  .js .bubble-field.show-all .bubble { display: inline-flex; }

  .js .bubble-more {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin: 20px auto 0; padding: 12px 24px; min-height: 44px;
    border: 1.5px solid var(--line-strong); border-radius: var(--r-pill);
    background: var(--card); color: var(--ink);
    font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .bubble-more:hover { border-color: var(--ink); }
  .bubble-more:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .bubble-more .chev {
    width: 13px; height: 13px; flex: none; color: var(--muted);
    transition: transform 0.18s ease;
  }
  .bubble-more[aria-expanded="true"] .chev { transform: rotate(180deg); }
}

@media (prefers-reduced-motion: reduce) { .bubble-more .chev { transition: none; } }

/* ───────── language switcher ─────────
   A dropdown carrying flags. The options are real <a> elements inside the
   markup, so the alternates are crawlable and every language is reachable even
   if the script never runs: without JS the menu simply stays open-on-focus.
   Flags are inline SVG rather than emoji, because Windows ships no flag emoji
   at all and renders them as the bare letters "AM" / "GB" / "RU".
   Language names are endonyms (Հայերեն / English / Русский) so a reader
   recognises their own language whatever page they landed on. */
.lang-dd { position: relative; flex: none; }

.lang-dd-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 9px; border: 1.5px solid var(--line-strong); border-radius: 999px;
  background: var(--card); color: var(--ink); cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 700; line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.lang-dd-btn:hover { border-color: var(--ink); }
.lang-dd-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.lang-dd-btn .chev {
  width: 11px; height: 11px; flex: none; color: var(--muted);
  transition: transform .18s ease;
}
.lang-dd-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }

.flag {
  width: 20px; height: 14px; flex: none; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(40, 40, 40, .16);   /* keeps white bands visible */
  display: block;
}

.lang-dd-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 176px; padding: 6px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow-pop);
  display: none; flex-direction: column; gap: 2px;
}
.lang-dd-menu.open { display: flex; }
.lang-dd-menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 9px; min-height: 44px;
  font-size: 14.5px; font-weight: 600; color: var(--ink); text-decoration: none;
}
.lang-dd-menu a:hover { background: var(--band); }
.lang-dd-menu a[aria-current="true"] { background: var(--band); font-weight: 800; }
.lang-dd-menu a[aria-current="true"] .tick { opacity: 1; }
.lang-dd-menu .tick {
  width: 14px; height: 14px; margin-left: auto; flex: none;
  color: var(--coral); opacity: 0;
}

/* Inside the mobile panel the dropdown has nowhere to hang, so the options are
   laid out inline instead and the trigger is hidden. */
.nav-panel .lang-dd {
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line);
}
.nav-panel .lang-dd-btn { display: none; }
.nav-panel .lang-dd-menu {
  position: static; display: flex; min-width: 0; padding: 0;
  border: none; box-shadow: none; background: none; gap: 4px;
}
.nav-panel .lang-dd-menu a { font-size: 15px; padding: 11px 10px; }

@media (prefers-reduced-motion: reduce) { .lang-dd-btn .chev { transition: none; } }

/* ───────── mobile menu ─────────
   Built by nav-menu.js from the links already in .nav-inner, so every page gets
   the same menu without duplicating markup in ten files. Shown only at 800px
   and below, which is where .nav-link stops being displayed inline. */
.nav-burger {
  display: none;
  width: 44px; height: 44px; flex: none; padding: 0;
  border: none; background: transparent; cursor: pointer;
  align-items: center; justify-content: center;
  border-radius: 12px; color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.nav-burger:hover { background: var(--band); }
.nav-burger span {
  display: block; position: relative;
  width: 20px; height: 2px; border-radius: 2px; background: currentColor;
  transition: background-color 0.12s ease;
}
.nav-burger span::before,
.nav-burger span::after {
  content: ''; position: absolute; left: 0;
  width: 20px; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform 0.22s ease, top 0.22s ease;
}
.nav-burger span::before { top: -6px; }
.nav-burger span::after { top: 6px; }
/* burger morphs into an X while the panel is open */
.nav-burger[aria-expanded='true'] span { background: transparent; }
.nav-burger[aria-expanded='true'] span::before { top: 0; transform: rotate(45deg); }
.nav-burger[aria-expanded='true'] span::after { top: 0; transform: rotate(-45deg); }

.nav-panel {
  position: fixed; left: 0; right: 0; top: 68px; z-index: 49;
  display: none; flex-direction: column;
  padding: 8px 24px calc(22px + env(safe-area-inset-bottom));
  background: var(--page); border-bottom: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
  max-height: calc(100dvh - 68px); overflow-y: auto; overscroll-behavior: contain;
}
.nav-panel.open { display: flex; }
.nav-panel a.nav-link {
  display: block; padding: 15px 4px;
  font-size: 17px; font-weight: 700; color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.nav-panel a.nav-link[aria-current='page'] { color: var(--coral); }
.nav-panel a.nav-link:last-of-type { border-bottom: none; }
.nav-panel .btn { margin-top: 14px; width: 100%; text-align: center; }
.nav-panel .socials { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
/* the page behind an open panel must not scroll under it */
body.nav-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .nav-burger span, .nav-burger span::before, .nav-burger span::after { transition: none; }
}

@media (max-width: 800px) {
  .nav a.nav-link { display: none; }
  .nav-panel a.nav-link { display: block; }
  .nav-burger { display: flex; }
  .nav-inner { gap: 14px; }
  /* The bar cannot hold the logo, the switcher, a long call to action and the
     burger at phone widths: Armenian «Նախագրանցվել» and Russian
     «Предварительная регистрация» push the row past the viewport. The switcher
     lives in the menu panel on mobile instead, where nav-menu.js has already
     cloned it. The clone is taken from this element, so hiding it here is safe. */
  .nav-inner .lang-dd { display: none; }
}

/* ── sections ── */
.section { padding: 88px 0; }
.section-band { background: var(--band); }
.eyebrow { display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--coral); margin-bottom: 14px; }

/* ── cards ── */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--shadow-card);
}

/* ── icon circle (matches the designer's coral circle icons) ── */
.ico {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%;
  background: var(--coral); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.ico svg { width: 24px; height: 24px; }

/* ── phone frame for app screenshots ── */
.phone {
  width: min(290px, 78vw); border-radius: 36px; padding: 10px;
  background: var(--ink); box-shadow: var(--shadow-pop);
}
.phone img { border-radius: 27px; width: 100%; }

/* ── forms ── */
.input {
  width: 100%; padding: 14px 16px; font-size: 16px; font-family: inherit;
  color: var(--text); background: var(--card);
  border: 1.5px solid var(--line-strong); border-radius: var(--r-input);
  outline: none; transition: border-color 0.15s;
}
.input:focus { border-color: var(--coral); }
.input.bad { border-color: var(--error); }
.field-label { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: 7px; }
.field-err { display: none; font-size: 13px; color: var(--error); margin-top: 6px; }
.field-err.show { display: block; }

/* ── footer ── */
.footer { background: var(--band); border-top: 1px solid var(--line); padding: 56px 0 28px; }
.footer-top { display: grid; grid-template-columns: 1.2fr 2fr; gap: 40px; align-items: start; }
.footer-brand .nav-logo { margin-bottom: 12px; }
.footer-tag { font-size: 13px; font-weight: 600; letter-spacing: 2.5px; color: var(--muted); }
.footer-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; }
.fcol { display: grid; gap: 11px; align-content: start; }
.fcol p { font-size: 12px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
/* justify-self stops the grid stretching each link to the full column width,
   which made the hover/click target run far past the end of the word */
.fcol a { justify-self: start; font-size: 14.5px; font-weight: 600; color: var(--text); text-decoration: none; }
.fcol a:hover { color: var(--coral-deep); }
.footer-bottom {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--muted);
}

/* ───────── social links ─────────
   One component reused by the footer, the mobile menu and the contact page.
   Icons are brand glyphs, so they are filled paths on currentColor rather than
   the stroked outline icons used elsewhere on the site. */
.socials { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.socials a {
  width: 40px; height: 40px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1.5px solid var(--line-strong);
  background: var(--card); color: var(--ink);
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.socials a:hover { background: var(--coral); border-color: var(--coral); color: #fff; }
/* --ink, not --coral: the ring sits on the white button and the #F7F7F5 footer
   band, and coral only reaches 2.2:1 against both — under the 3:1 WCAG 1.4.11
   asks of a focus indicator. --ink clears it at 9.7:1. */
.socials a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.socials svg { width: 19px; height: 19px; display: block; }
.footer-brand .socials { margin-top: 18px; }

/* The legal pages (privacy, terms) use a one-line .site-footer instead of the
   full .footer. It had no styling at all, so its links rendered in the browser
   default blue and the social row sat flush on the copyright line. Give it the
   same band, rhythm and link colour as the main footer. */
.site-footer { background: var(--band); border-top: 1px solid var(--line); padding: 40px 0 30px; }
.site-footer .socials { margin-bottom: 22px; }
.site-footer p { font-size: 13px; color: var(--muted); }
/* scoped to the copyright line: a bare ".site-footer a" has the same
   specificity as ".socials a" and, being declared later, would repaint the
   social icon buttons muted on these two pages only */
.site-footer p a { color: var(--muted); text-decoration: none; }
.site-footer p a:hover { color: var(--coral-deep); }

@media (prefers-reduced-motion: reduce) {
  .socials a { transition: none; }
}
@media (max-width: 800px) {
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
}

/* ── coral download panel (shared with subpages) ── */
.download { padding: 0 0 96px; }
.dl-panel { background: var(--coral); border-radius: 28px; padding: 56px 52px; overflow: hidden; }
.dl-panel .eyebrow { color: #fff; opacity: 0.85; }
.dl-panel h2 { color: #fff; }
.dl-grid { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; }
.dl-grid .phone { margin-bottom: -120px; }
.dl-badges { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 24px; }
.dl-note { margin-top: 18px; font-size: 13.5px; color: rgba(255, 255, 255, 0.85); }
@media (max-width: 860px) {
  .dl-panel { padding: 40px 28px; }
  .dl-grid { grid-template-columns: 1fr; }
  .dl-grid .phone { display: none; }
}

/* ── subpage hero ── */
.page-hero { padding: 72px 0 56px; }
.page-hero .lede { margin: 18px 0 30px; max-width: 32em; }

/* ── highlight panels (selling points on subpages) ── */
.panel { border-radius: 24px; padding: 40px 36px; }
.panel.blue { background: var(--blue); }
.panel.blue h2, .panel.blue h3 { color: #fff; }
.panel.blue p { color: rgba(255, 255, 255, 0.85); }
.panel.coral { background: var(--coral-soft); }
.panel p { margin-top: 12px; font-size: 15.5px; line-height: 1.7; max-width: 38em; }

/* ── FAQ ── */
.faq-list { max-width: 780px; margin-top: 36px; display: grid; gap: 12px; }
.faq-list details {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--shadow-card); padding: 0 24px; overflow: hidden;
}
.faq-list summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 19px 0; font-size: 16px; font-weight: 700; color: var(--ink);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: ''; width: 11px; height: 11px; flex-shrink: 0;
  border-right: 2.5px solid var(--coral); border-bottom: 2.5px solid var(--coral);
  transform: rotate(45deg); transition: transform 0.2s; margin-top: -4px;
}
.faq-list details[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.faq-list details p { padding: 0 0 20px; font-size: 15px; line-height: 1.7; color: var(--muted); max-width: 42em; }

/* ── final CTA band ── */
.cta-band { background: var(--band); border-top: 1px solid var(--line); padding: 72px 0; text-align: center; }
.cta-band h2 { max-width: 22em; margin: 0 auto 26px; }
.cta-badges { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.cta-note { margin-top: 16px; font-size: 13.5px; color: var(--muted); }
.store-badge {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--ink); color: #fff; border-radius: 14px; padding: 12px 22px;
  text-decoration: none; min-width: 176px; position: relative;
}
.store-badge svg { width: 26px; height: 26px; flex-shrink: 0; }
.store-badge small { display: block; font-size: 11px; opacity: 0.7; font-weight: 600; line-height: 1.2; }
.store-badge strong { font-size: 17px; font-weight: 700; line-height: 1.25; }
.store-badge .soon {
  position: absolute; top: -9px; right: 12px; background: var(--lime); color: var(--ink);
  font-size: 10.5px; font-weight: 800; padding: 2px 9px; border-radius: var(--r-pill);
}

/* ── reveal on scroll ──
   Hidden state only applies once JS has stamped .js on <html>, so content is
   never invisible for crawlers, no-JS visitors, or a failed script load. */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }

/* ═══════════════════════════════════════════════════════════════
   2026 — BLOG (blog.html + blog-*.html). New classes only —
   nothing above this section was changed.
   ═══════════════════════════════════════════════════════════════ */

/* ── listing hero ── */
.blog-hero { padding: 72px 0 8px; text-align: center; }
.blog-hero h1 {
  color: var(--blue); font-weight: 800; letter-spacing: -0.5px;
  font-size: clamp(36px, 5vw, 56px); line-height: 1.12;
}
.blog-hero .sub { margin-top: 12px; font-size: clamp(16px, 2vw, 22px); color: var(--muted); font-weight: 600; }

/* ── category chip ── */
.chip {
  display: inline-flex; align-items: center; align-self: flex-start;
  border: 1.5px solid var(--coral); color: var(--coral);
  border-radius: var(--r-pill); padding: 6px 16px;
  font-size: 13px; font-weight: 700; white-space: nowrap;
}
.chip.blue { border-color: var(--blue); color: var(--blue); }
.chip.fill { background: var(--coral); color: #fff; }

/* ── listing grid ── */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 48px 0 88px; }
.blog-grid > * { min-width: 0; }
.blog-card {
  display: flex; flex-direction: column;
  background: var(--card); border: 1.5px solid var(--coral); border-radius: 24px;
  padding: 30px 28px; text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}
.blog-card.blue { border-color: var(--blue); }
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.blog-card h2 { margin-top: 16px; font-size: 20px; font-weight: 800; line-height: 1.45; color: var(--ink); }
.blog-card .ex {
  margin-top: 10px; font-size: 14.5px; line-height: 1.7; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-card .more { margin-top: auto; padding-top: 18px; font-size: 15px; font-weight: 700; color: var(--coral); }
.blog-card .more::after { content: ' →'; }
@media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr; } }

/* ── post page ── */
.post-wrap { max-width: 768px; margin: 0 auto; padding: 0 24px; }
.post-wrap > * { min-width: 0; }
.post { padding: 64px 0 96px; overflow: hidden; }
.post h1 {
  color: var(--blue); font-size: clamp(30px, 4.5vw, 44px);
  font-weight: 800; line-height: 1.22; letter-spacing: -0.5px;
}
.post-meta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 22px 0 34px; font-size: 14px; font-weight: 600; color: var(--muted);
}
.post .lead { font-size: clamp(17px, 2vw, 19.5px); line-height: 1.75; color: var(--ink); font-weight: 700; }
.post p { margin-top: 16px; font-size: 16px; line-height: 1.8; color: var(--text); }
.post h2 {
  margin: 46px 0 4px; color: var(--blue);
  font-size: clamp(22px, 3vw, 29px); font-weight: 800; line-height: 1.3;
}
.post h3 { margin: 30px 0 0; color: var(--coral); font-size: 19px; font-weight: 800; line-height: 1.4; }

/* numbered sub-heads (coral circle like the steps section) */
.num-h { display: flex; align-items: center; gap: 12px; margin: 32px 0 0; }
.num-h .n {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--coral); color: #fff; font-size: 16px; font-weight: 800;
}
.num-h h3 { margin: 0; }

/* bullet lists as outline cards */
.li-cards { display: grid; gap: 12px; margin: 22px 0 4px; padding: 0; list-style: none; }
.li-cards li {
  display: flex; gap: 13px; align-items: flex-start;
  background: var(--card); border: 1.5px solid var(--blue); border-radius: 16px;
  padding: 15px 18px; font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.6;
}
.li-cards li svg {
  width: 24px; height: 24px; flex-shrink: 0; padding: 5px; margin-top: 1px;
  background: var(--coral); color: #fff; border-radius: 7px; box-sizing: border-box;
}
.li-cards.coral li { border-color: var(--coral); }

/* paper-vs-digital comparison duo */
.vs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 26px 0 4px; }
.vs-grid > * { min-width: 0; }
.vs-card { background: var(--card); border: 1.5px solid var(--line-strong); border-radius: 20px; padding: 24px; }
.vs-card .vs-title { font-size: 17px; font-weight: 800; color: var(--muted); margin-bottom: 14px; }
.vs-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vs-card li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; font-weight: 600; line-height: 1.55; color: var(--muted); }
.vs-card li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); flex-shrink: 0; margin-top: 7px; }
.vs-card.win { background: var(--coral); border-color: var(--coral); }
.vs-card.win .vs-title { color: #fff; }
.vs-card.win li { color: #fff; }
.vs-card.win li::before { background: #fff; }
@media (max-width: 640px) { .vs-grid { grid-template-columns: 1fr; } }

/* misconception cards */
.myth { border: 1.5px solid var(--coral); border-radius: 20px; padding: 20px 24px; margin-top: 16px; background: var(--card); }
.myth .q { font-size: 16px; font-weight: 800; color: var(--coral); line-height: 1.5; }
.myth p { margin-top: 8px; font-size: 15px; line-height: 1.7; color: var(--muted); }

/* closing coral CTA */
.post-cta { margin-top: 60px; background: var(--coral); border-radius: 24px; padding: 44px 36px; text-align: center; }
.post-cta h2 { margin: 0; color: #fff; font-size: clamp(22px, 3vw, 30px); font-weight: 800; line-height: 1.35; }
.post-cta p { margin: 14px auto 0; max-width: 34em; color: #fff; font-size: 15.5px; line-height: 1.7; }
.post-cta .btn { margin-top: 26px; background: #fff; color: var(--coral); }
.post-cta .btn:hover { background: #FFF3EE; }
@media (max-width: 640px) { .post-cta { padding: 34px 24px; } }

/* other articles */
.post-others { margin-top: 60px; }
.post-others h2 { margin: 0 0 20px; }
.other-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.other-grid > * { min-width: 0; }
.other-card {
  display: flex; flex-direction: column;
  background: var(--card); border: 1.5px solid var(--blue); border-radius: 20px;
  padding: 22px; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s;
}
.other-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.other-card .t { font-size: 15.5px; font-weight: 800; color: var(--ink); line-height: 1.5; }
.other-card .more { margin-top: 14px; font-size: 14px; font-weight: 700; color: var(--coral); }
.other-card .more::after { content: ' →'; }
@media (max-width: 640px) { .other-grid { grid-template-columns: 1fr; } }
.footer-tel { display: inline-flex; align-items: center; gap: 11px; margin-top: 16px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 15.5px; letter-spacing: 0.3px; }
.footer-tel i { width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--card); color: var(--ink); transition: background-color 0.15s, border-color 0.15s, color 0.15s; font-style: normal; }
.footer-tel:hover i { background: var(--coral); border-color: var(--coral); color: #fff; }