/* Shared marketing stylesheet for calenti.cy — the landing page (/) and the features page
   (/features). Extracted from the inline <style> block index.html used to carry, so a visitor
   who moves between the two pages pays for it once instead of downloading a second copy.

   Loaded as a plain <link> from both pages. There is no build step for this site: it is a
   direct-upload Cloudflare Pages project (see CLAUDE.md), so this file ships exactly as written
   and any edit needs a Pages deploy to appear. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/inter-var-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: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/inter-var-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: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/inter-var-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/manrope-var-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: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/manrope-var-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: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/manrope-var-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* Indigo/violet marketing identity — the accent pair drives every gradient on the page.
     --muted-lt is deliberately NOT the original #8c90a0: that measured ~3.2:1 on white and
     failed WCAG AA for the caption and helper text it colours. #6f7488 keeps the cool
     blue-grey cast of the original palette at 4.9:1, which passes. */
:root {
  --ink: #0b0d14;
  --ink-2: #1a1d2b;
  --muted: #5b6072;
  --muted-lt: #6f7488; /* 4.9:1 on white, AA pass — was #8c90a0 (~3.2:1, fail) */
  --line: #e7e8ee;
  --paper: #ffffff;
  --paper-2: #f7f7fb;
  --paper-3: #eef0ff;
  --accent: #5b6cff;
  --accent2: #9b6cff;
  --accent-ink: #4048c7;
  --good: #17a673;
  --good-bg: #e7f4ee;
  --danger: #b3261e;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 28px;
  --r-pill: 999px;

  --sec-pad: clamp(3rem, 8vw, 5.5rem);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
h1,
h2,
h3,
.brand {
  font-family: Manrope, Inter, sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
a {
  color: inherit;
}
img,
svg {
  display: block;
  max-width: 100%;
}
.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 3px;
}

button,
.btn {
  font-family: inherit;
  cursor: pointer;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 1.5rem;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: .95rem;
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn-primary {
  background: linear-gradient(120deg, var(--accent), var(--accent2));
  color: #fff;
}
.btn-primary:hover {
  filter: brightness(1.06);
}
.btn-ghost {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover {
  border-color: var(--muted-lt);
}
.btn-dark {
  background: var(--ink);
  color: #fff;
}
.btn-dark:hover {
  background: #000;
}
.btn-lg {
  padding: 1rem 1.9rem;
  font-size: 1.02rem;
}
.btn-block {
  width: 100%;
}

/* ---------- Nav ---------- */
header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
nav.wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  height: 72px;
}
.brand {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--ink);
}
.brand .mark {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
}
/* Greek labels are noticeably longer than the English ones — nowrap plus a tighter gap keeps
     the row on one line, and the drawer takes over earlier (1024px) so it never collides
     with the brand. */
.nav-links {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  flex-wrap: nowrap;
}
.nav-links a {
  white-space: nowrap;
}
.nav-links a {
  font-size: .93rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
}
.nav-links a:hover {
  color: var(--ink);
}
.nav-cta {
  display: flex;
  align-items: center;
  gap: .8rem;
}
.lang-pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: .35rem .75rem;
}
.lang-pill .lang-opt {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: var(--muted);
}
.lang-pill .lang-opt[aria-current="true"] {
  color: var(--accent-ink);
}
.lang-pill .lang-sep {
  opacity: 0.5;
}
.menu-btn {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: .45rem;
  color: var(--ink);
  align-items: center;
  justify-content: center;
}
.menu-btn svg {
  width: 20px;
  height: 20px;
}

/* Mobile drawer — the nav anchors have to stay reachable below 880px, where .nav-links hides. */
.mobile-menu {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--paper);
  padding: .5rem 0 1.1rem;
}
.mobile-menu.open {
  display: block;
}
.mobile-menu a {
  display: block;
  padding: .8rem .25rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.mobile-menu a:last-of-type {
  border-bottom: none;
}
.mobile-menu .lang-row {
  display: flex;
  justify-content: flex-start;
  padding-top: .9rem;
}

@media (max-width: 1024px) {
  .nav-links {
    display: none;
  }
  .nav-cta .lang-pill {
    display: none;
  }
  .nav-cta .btn-ghost {
    display: none;
  }
  .menu-btn {
    display: inline-flex;
  }
  .nav-cta {
    gap: .5rem;
  }
  /* Brand + CTA + hamburger have to share one 375px row without colliding. */
  .nav-cta .btn-primary {
    padding: .6rem 1rem;
    font-size: .85rem;
  }
  .brand {
    font-size: 1.2rem;
  }
}
@media (max-width: 400px) {
  .nav-cta .btn-primary {
    padding: .55rem .85rem;
    font-size: .8rem;
  }
  .brand {
    font-size: 1.05rem;
    gap: .4rem;
  }
  .brand .mark {
    width: 28px;
    height: 28px;
    font-size: .9rem;
  }
}
@media (min-width: 881px) {
  .mobile-menu,
  .mobile-menu.open {
    display: none;
  }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: var(--sec-pad) 0 clamp(2.5rem, 6vw, 4rem);
}
.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 620px;
  background: radial-gradient(700px 420px at 18% 10%, rgba(91, 108, 255, 0.16), transparent 60%),
    radial-gradient(560px 380px at 85% 0%, rgba(155, 108, 255, 0.14), transparent 60%);
  pointer-events: none;
}
.hero > * {
  position: relative;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--accent-ink);
  background: #eef0ff;
  border: 1px solid #dde0ff;
  padding: .4rem .85rem;
  border-radius: var(--r-pill);
  margin-bottom: 1.6rem;
}
.eyebrow .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 3px rgba(23, 166, 115, 0.18);
  flex-shrink: 0;
}
.hero h1 {
  font-size: clamp(2.4rem, 5.2vw, 3.8rem);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 1.3rem;
  max-width: 18ch;
}
.grad-text {
  background: linear-gradient(120deg, var(--ink) 20%, var(--accent) 65%, var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p.lead {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--muted);
  max-width: 46ch;
  line-height: 1.6;
  margin: 0 0 2.1rem;
  font-family: Inter, sans-serif;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2.3rem;
}
.hero-note {
  font-size: .85rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: .45rem;
}
.hero-note svg {
  width: 15px;
  height: 15px;
  color: var(--good);
  flex-shrink: 0;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 3.5rem;
  align-items: center;
}
/* Stacked hero: headline first. The visual used to sit above it (order:-1), which pushed
     the value proposition and both CTAs below the fold on a phone. */
@media (max-width: 980px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}
@media (max-width: 620px) {
  .hero-grid {
    gap: 2rem;
  }
  .hero-actions {
    margin-bottom: 1.6rem;
  }
}
/* .btn sets white-space:nowrap, so a long label on a btn-lg (the closing CTA) was 404px wide
     and pushed the page into a horizontal scroll on a 375px phone. */
@media (max-width: 620px) {
  .btn-lg {
    width: 100%;
    justify-content: center;
  }
  /* .btn sets white-space:nowrap; a long Greek label then can't fit a 320px screen. */
  .btn {
    white-space: normal;
    text-align: center;
    max-width: 100%;
  }
  .setup-card {
    padding: 1.5rem 1.25rem;
  }
}

/* Hero mock dashboard card */
.hero-visual {
  position: relative;
}
.mock {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 24px 50px -30px rgba(17, 24, 39, 0.45);
  overflow: hidden;
}
.mock-bar {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}
.mock-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d1d5db;
}
.mock-title {
  margin-left: .5rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
  font-family: Inter, sans-serif;
}
.mock-body {
  padding: 1.1rem 1.2rem 1.4rem;
}
.mock-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .9rem;
}
.mock-row h4 {
  margin: 0;
  font-size: .95rem;
  font-weight: 700;
}
.mock-pill {
  font-size: .72rem;
  font-weight: 700;
  color: var(--good);
  background: var(--good-bg);
  padding: .25rem .6rem;
  border-radius: var(--r-pill);
  font-family: Inter, sans-serif;
}
.mock-cal {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: .5rem;
}
.mock-times {
  display: flex;
  flex-direction: column;
  gap: 1.05rem;
  padding-top: .25rem;
}
.mock-times span {
  font-size: .72rem;
  color: var(--muted-lt);
}
.mock-slots {
  position: relative;
  border-left: 1px solid var(--line);
  padding-left: .8rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.mock-evt {
  border-radius: var(--r-sm);
  padding: .5rem .7rem;
  font-size: .78rem;
  font-weight: 600;
  color: #fff;
}
.mock-evt small {
  display: block;
  font-weight: 500;
  opacity: 0.9;
  font-size: .7rem;
  margin-top: .1rem;
}
.e1 {
  background: linear-gradient(120deg, #5b6cff, #7d8bff);
}
.e2 {
  background: linear-gradient(120deg, #17a673, #2ec98d);
  margin-left: 1.6rem;
}
.e3 {
  background: linear-gradient(120deg, #ff8a5b, #ff6b8b);
  margin-left: .8rem;
}
.float-card {
  position: absolute;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 18px 36px -20px rgba(17, 24, 39, 0.4);
  padding: .8rem 1rem;
  display: flex;
  align-items: center;
  gap: .7rem;
}
.float-1 {
  top: -1.4rem;
  right: -1.6rem;
}
.float-2 {
  bottom: -1.6rem;
  left: -1.8rem;
}
@media (max-width: 560px) {
  .float-1,
  .float-2 {
    display: none;
  }
}
.float-ic {
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.float-1 .float-ic {
  background: linear-gradient(135deg, #17a673, #2ec98d);
}
.float-2 .float-ic {
  background: linear-gradient(135deg, #5b6cff, #9b6cff);
}
.float-t {
  font-size: .78rem;
  font-weight: 700;
  font-family: Inter, sans-serif;
}
.float-s {
  font-size: .72rem;
  color: var(--muted);
  font-family: Inter, sans-serif;
}

/* ---------- Trust strip ---------- */
.trust {
  padding: 2.4rem 0;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem 3rem;
  align-items: center;
  justify-content: center;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--muted);
  font-size: .88rem;
  font-weight: 500;
}
.trust-item svg {
  width: 19px;
  height: 19px;
  color: var(--ink);
  flex-shrink: 0;
}

/* ---------- Section shell ---------- */
section {
  padding: var(--sec-pad) 0;
}
.sec-head {
  max-width: 640px;
  margin: 0 auto 3.2rem;
  text-align: center;
}
.sec-eyebrow {
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted-lt);
  margin-bottom: .8rem;
  font-family: Inter, sans-serif;
}
.sec-head h2 {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  margin: 0 0 .9rem;
}
.sec-head p {
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0;
}

/* ---------- Features ---------- */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}
@media (max-width: 900px) {
  .feat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 620px) {
  .feat-grid {
    grid-template-columns: 1fr;
  }
}
.feat-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.7rem 1.6rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.feat-card:hover {
  border-color: var(--muted-lt);
  box-shadow: 0 14px 30px -24px rgba(17, 24, 39, 0.5);
}
.feat-ic {
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #eef0ff, #f4ecff);
  color: var(--accent-ink);
  margin-bottom: 1.1rem;
}
.feat-ic svg {
  width: 22px;
  height: 22px;
}
.feat-card h3 {
  font-size: 1.15rem;
  margin: 0 0 .5rem;
}
.feat-card p {
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

/* ---------- How it works ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
@media (max-width: 820px) {
  .steps {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }
}
.step {
  position: relative;
  padding-left: 3.6rem;
}
.step .num {
  position: absolute;
  left: 0;
  top: 0;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
}
.step h3 {
  margin: .3rem 0 .5rem;
  font-size: 1.15rem;
}
.step p {
  margin: 0;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.65;
}

/* ---------- Bilingual banner ---------- */
.bi {
  background: linear-gradient(120deg, #0b0d14, #1a1d2b);
  border-radius: var(--r-lg);
  color: #fff;
  padding: clamp(2.2rem, 5vw, 3.4rem);
  display: flex;
  align-items: center;
  gap: 3rem;
}
@media (max-width: 820px) {
  .bi {
    flex-direction: column;
    text-align: center;
  }
}
.bi-copy h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin: 0 0 .8rem;
  color: #fff;
}
.bi-copy p {
  color: #d1d5db;
  font-size: 1rem;
  line-height: 1.65;
  margin: 0;
  max-width: 46ch;
}
.bi-flags {
  display: flex;
  gap: 1rem;
  flex-shrink: 0;
}
.lang-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-md);
  padding: 1.1rem 1.4rem;
  min-width: 96px;
}
/* Language is shown in its own script rather than as a flag emoji — Windows has no
     regional-indicator glyphs and renders those as bare "GB"/"GR" letter pairs. */
.lang-card .code {
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  font-family: Manrope, Inter, sans-serif;
}
.lang-card span {
  font-size: .78rem;
  font-weight: 500;
  color: #d1d5db;
}

/* ---------- Pricing ---------- */
.price-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  margin: -1.4rem 0 3rem;
}
/* Both labels carry the same weight in both states, and only the colour changes. The big jump
   on every flip was the save badge inside the yearly label appearing and disappearing, which
   moved the centred row by ~41px; that badge is gone. Holding the weight steady removes what
   was left — measured at 1px, from 500 vs 600 reflowing the active label. */
.price-toggle span {
  font-size: .9rem;
  font-weight: 600;
  color: var(--muted);
  transition: color .15s ease;
}
.price-toggle span.active {
  color: var(--ink);
}
.switch {
  position: relative;
  width: 46px;
  height: 26px;
  border-radius: var(--r-pill);
  background: var(--line);
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform .2s ease;
}
.switch.on {
  background: linear-gradient(120deg, var(--accent), var(--accent2));
}
.switch.on::after {
  transform: translateX(20px);
}
.save-badge {
  font-size: .72rem;
  font-weight: 700;
  color: var(--good);
  background: var(--good-bg);
  padding: .18rem .5rem;
  border-radius: var(--r-pill);
}

/* Flex rather than a fixed four-column grid. The grid hardcoded `repeat(4, …)`, so the day a
   plan was added or retired the cards filled columns from the left and left a hole on the right
   — three plans sat left-aligned under a centred heading. Wrapping flex items with
   justify-content:center have no columns to leave empty, so any number of plans centres itself.

   min-width:0 does the job the old minmax(0, …) did: without it a card holding an un-shrinkable
   string refuses to shrink below its content and grows wider than its neighbours, and the row
   stops reading as a set of equal plans. max-width caps a lone card from stretching the full
   1180px wrap, and the flex-basis is what drives the wrap to 2-up then 1-up on narrow screens,
   so the old width media queries are gone with it. */
.price-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.3rem;
  align-items: stretch;
}
.price-grid > * {
  flex: 1 1 240px;
  min-width: 0;
  max-width: 320px;
}
.price-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.8rem 1.6rem 2rem;
  display: flex;
  flex-direction: column;
  position: relative;
}
.price-card.pop {
  border-color: var(--accent);
  box-shadow: 0 22px 50px -22px rgba(91, 108, 255, 0.45);
  transform: translateY(-6px);
}
.pop-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(120deg, var(--accent), var(--accent2));
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  padding: .3rem .8rem;
  border-radius: var(--r-pill);
  white-space: nowrap;
  font-family: Inter, sans-serif;
}
.price-card h3 {
  margin: 0 0 .3rem;
  font-size: 1.2rem;
}
.price-card .pdesc {
  font-size: .84rem;
  color: var(--muted);
  margin: 0 0 1.3rem;
  min-height: 2.4em;
}
.price-amt {
  display: flex;
  align-items: baseline;
  gap: .3rem;
  margin-bottom: .35rem;
}
.price-amt .num {
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-family: Manrope, Inter, sans-serif;
  font-variant-numeric: tabular-nums;
}
.price-amt .per {
  font-size: .85rem;
  color: var(--muted);
}
/* The real charge, always stated under the derived per-month figure — never only the divided one. */
.price-card .pbilled {
  font-size: .78rem;
  color: var(--muted);
  margin: 0 0 1.1rem;
}
.price-card .ptrial {
  align-self: flex-start;
  margin: 0 0 1.3rem;
}
.price-fn {
  color: var(--muted);
  font-size: .8rem;
  text-align: center;
  margin: 1.4rem 0 0;
  font-family: Inter, sans-serif;
}
.price-card .phead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}
.price-list {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .65rem;
  flex: 1;
}
.price-list li {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  font-size: .87rem;
  color: var(--ink-2);
}
.price-list svg {
  width: 16px;
  height: 16px;
  color: var(--good);
  flex-shrink: 0;
  margin-top: .15rem;
}
/* Shown if the live tiers request fails — a stuck "Loading…" card on the pricing section is
     worse than an honest fallback, and hardcoded prices here would go stale the moment an
     admin edits a tier or starts a promo. */
/* Spans the whole row rather than sitting in a card slot: this is the "Loading plans…" state
   and the failed-request message, not a plan. It used `grid-column: 1 / -1` when the row was a
   grid; under flex that does nothing, so it needs the basis and the cap lifted explicitly or
   the shared .price-grid > * rule squeezes the message into one 320px column. */
.price-fallback {
  flex: 1 1 100%;
  max-width: none;
  text-align: center;
  padding: 2.5rem 1.5rem;
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
}
.price-fallback p {
  color: var(--muted);
  margin: 0 0 1.2rem;
  font-size: .95rem;
}

/* ---------- FAQ ---------- */
.faq {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: .8rem;
}
.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--paper);
}
.faq-q {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 1.15rem 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: .98rem;
  font-weight: 600;
  color: var(--ink);
  font-family: Inter, sans-serif;
}
.faq-q .chev {
  width: 18px;
  height: 18px;
  transition: transform .2s ease;
  color: var(--muted);
  flex-shrink: 0;
}
.faq-item.open .faq-q .chev {
  transform: rotate(180deg);
}
/* max-height is set from the answer's measured scrollHeight in JS (see setFaqOpen) rather
     than a hardcoded cap — FAQ text is admin-editable and the previous fixed 240px silently
     clipped anything longer. Starts at 0 so the closed state is correct before JS runs. */
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
}
.faq-a p {
  margin: 0;
  padding: 0 1.4rem 1.2rem;
  color: var(--muted);
  font-size: .91rem;
  line-height: 1.65;
}

/* ---------- Final CTA ---------- */
.cta-band {
  background: linear-gradient(120deg, #eef0ff, #f6efff);
  border-radius: var(--r-lg);
  padding: clamp(2.4rem, 6vw, 3.6rem) 2rem;
  text-align: center;
}
.cta-band h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  margin: 0 0 .8rem;
}
.cta-band p {
  color: var(--muted);
  margin: 0 0 2rem;
}
.cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ---------- Footer ---------- */
footer {
  border-top: 1px solid var(--line);
  padding: 3.4rem 0 2.2rem;
}
.foot-top {
  display: flex;
  justify-content: space-between;
  gap: 3rem;
  flex-wrap: wrap;
  margin-bottom: 2.6rem;
}
.foot-brand {
  max-width: 280px;
}
.foot-brand p {
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.6;
  margin: .9rem 0 1.2rem;
}
.foot-cols {
  display: flex;
  gap: 3.5rem;
  flex-wrap: wrap;
}
.foot-col h4 {
  font-size: .85rem;
  font-weight: 600;
  margin: 0 0 .9rem;
  font-family: Inter, sans-serif;
}
.foot-col a {
  display: block;
  font-size: .88rem;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: .65rem;
}
.foot-col a:hover {
  color: var(--ink);
}
.foot-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1.8rem;
  border-top: 1px solid var(--line);
  font-size: .83rem;
  color: var(--muted);
}
.lead-mini {
  display: flex;
  gap: .5rem;
  max-width: 320px;
}
.lead-mini input {
  flex: 1;
  min-width: 0;
  padding: .65rem .9rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  font-size: .85rem;
  font-family: inherit;
  color: var(--ink);
}
.lead-mini button {
  padding: .65rem 1.1rem;
  border-radius: var(--r-sm);
  border: none;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  font-size: .85rem;
}
.lead-msg {
  font-size: .8rem;
  margin-top: .5rem;
  min-height: 1em;
}
.lead-msg.ok {
  color: var(--good);
}
.lead-msg.err {
  color: var(--danger);
}

/* ---------- Industry chips ---------- */
.verticals {
  padding: 2.6rem 0 0;
}
.verticals-lbl {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-lt);
  text-align: center;
  margin: 0 0 1.1rem;
}
.vert-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .7rem;
}
/* Square tiles — the same shape as the photo tiles a client meets on a real shop page. */
.vert-card {
  position: relative;
  overflow: hidden;
  width: 10.5rem;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
  padding: .8rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper) center / cover no-repeat;
  transition: border-color .15s ease, transform .15s ease;
}
.vert-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.vc-head {
  text-align: center;
  font-size: .92rem;
  font-weight: 550;
  color: var(--ink);
}
/* Pushed to the top of the tile; the label and buttons sit at the bottom. Hidden once the
     card has a photo, where it would just clutter the image. */
.vc-emoji {
  font-size: 1.9rem;
  line-height: 1;
  margin-bottom: auto;
}
/* A photo needs the text lifted off it: dark at the bottom where the label and buttons are,
     near-clear at the top so the picture still reads. */
.vert-card.has-img::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 13, 20, 0.88) 0%,
    rgba(10, 13, 20, 0.5) 48%,
    rgba(10, 13, 20, 0.14) 100%
  );
}
.vert-card.has-img .vc-emoji {
  display: none;
}
.vert-card.has-img .vc-head {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
.vert-card.has-img .vc-soon {
  color: rgba(255, 255, 255, 0.82);
}
.vert-card.has-img .vc-btn {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.38);
  color: #fff;
}
.vert-card.has-img .vc-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: #fff;
}
.vert-card.has-img .vc-btn.primary {
  background: var(--accent);
  border-color: var(--accent);
}
.vc-head,
.vc-acts {
  position: relative;
  z-index: 1;
}
.vc-acts {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .35rem;
}
.vc-btn {
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  padding: .32rem .7rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--paper-3);
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  white-space: nowrap;
  transition: border-color .15s ease, background .15s ease;
}
.vc-btn:hover {
  border-color: var(--accent);
  background: var(--paper);
}
.vc-btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.vc-btn.primary:hover {
  filter: brightness(1.08);
  background: var(--accent);
}
/* Trades whose demo shop isn't published yet: shown so the section still names every trade
     we serve, but with no dead link to a shop the API doesn't have. Flip data-ready to "true"
     on the card once the slug is live and the buttons render themselves. */
.vc-soon {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted-lt);
  padding: .32rem .55rem;
}
.vert-note {
  text-align: center;
  font-size: .85rem;
  color: var(--muted-lt);
  margin: 1.1rem 0 0;
}
/* Five cards centred on a narrow screen wrap 1/2/1/1 and look ragged; letting them grow
     fills each row evenly instead. */
@media (max-width: 620px) {
  .vert-card {
    flex: 1 1 8.5rem;
    width: auto;
    max-width: 11rem;
  }
}

/* ---------- Demo preview modal ---------- */
.pv-back {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: 1.25rem;
  background: rgba(15, 18, 26, 0.74);
  backdrop-filter: blur(4px);
}
.pv-back[hidden] {
  display: none;
}
.pv-bar {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: min(400px, 100%);
  color: #fff;
}
.pv-title {
  font-size: .9rem;
  font-weight: 600;
  margin-right: auto;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.pv-bar .vc-btn {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}
.pv-bar .vc-btn:hover {
  background: rgba(255, 255, 255, 0.26);
  border-color: #fff;
}
/* Phone-shaped, because that is how the client actually meets this page. */
.pv-phone {
  width: min(400px, 100%);
  height: min(760px, 76vh);
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.pv-phone iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
@media (max-width: 620px) {
  .pv-back {
    padding: .75rem;
  }
  .pv-phone {
    height: 78vh;
  }
}

/* ---------- Product showcase (tabbed) ---------- */
.showcase-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0 0 2.4rem;
}
.sc-tab {
  background: none;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  padding: .6rem 1.25rem;
  font: inherit;
  font-size: .93rem;
  font-weight: 600;
  color: var(--muted);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.sc-tab:hover {
  color: var(--ink);
}
.sc-tab[aria-selected="true"] {
  background: var(--paper-3);
  color: var(--accent-ink);
  border-color: var(--line);
}
.sc-panel {
  display: none;
}
.sc-panel.active {
  display: block;
  animation: scfade .35s ease;
}
@keyframes scfade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.sc-layout {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 3rem;
  align-items: center;
}
@media (max-width: 940px) {
  .sc-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}
.sc-copy h3 {
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  letter-spacing: -0.02em;
  margin: 0 0 .8rem;
}
.sc-copy p {
  color: var(--muted);
  line-height: 1.65;
  margin: 0 0 1.3rem;
  font-family: Inter, sans-serif;
}
.sc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .65rem;
}
.sc-list li {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  font-size: .93rem;
  color: var(--ink-2);
}
.sc-list svg {
  width: 16px;
  height: 16px;
  color: var(--good);
  flex-shrink: 0;
  margin-top: .22rem;
}

/* App-chrome frame shared by every showcase mock */
.app {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 24px 60px -28px rgba(17, 20, 45, 0.3);
  overflow: hidden;
  font-family: Inter, sans-serif;
}
.app-top {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}
.app-top .mock-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line);
}
.app-top .app-title {
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
  margin-left: .35rem;
}
.app-body {
  padding: 1rem 1.1rem 1.15rem;
}

/* Calendar mock */
.cal-head {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: .85rem;
}
.cal-date {
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.cal-meta {
  font-size: .78rem;
  color: var(--muted-lt);
}
.cal-cols {
  display: grid;
  grid-template-columns: 46px 1fr 1fr;
  gap: .5rem;
}
.cal-staff {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  font-size: .76rem;
  font-weight: 600;
  color: var(--muted);
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--line);
}
.cal-av {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--paper-3);
  color: var(--accent-ink);
  font-size: .6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
/* 60px == one hour, so an event's top/height is its real start time and duration. */
.cal-grid {
  display: grid;
  grid-template-columns: 46px 1fr 1fr;
  gap: .5rem;
  margin-top: .55rem;
}
.cal-times {
  position: relative;
  height: 220px;
  font-size: .68rem;
  color: var(--muted-lt);
}
.cal-times span {
  position: absolute;
  left: 0;
  transform: translateY(-.4em);
}
.cal-col {
  position: relative;
  height: 220px;
  border-left: 1px solid var(--line);
}
.cal-col::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 60px);
  opacity: 0.7;
}
.cal-evt {
  position: absolute;
  left: 4px;
  right: 0;
  border-radius: 8px;
  padding: .3rem .5rem;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.cal-evt b {
  font-size: .72rem;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-evt small {
  font-size: .64rem;
  opacity: 0.85;
  white-space: nowrap;
}
/* A 20-minute slot is only 20px tall — too short for two stacked lines, so short
     appointments put the name inline with the service instead of under it. */
.cal-evt.compact {
  flex-direction: row;
  align-items: center;
  gap: .35rem;
  padding: 0 .5rem;
}
.cal-evt.compact b {
  font-size: .66rem;
}
.cal-evt.compact small {
  font-size: .6rem;
}
.ev-a {
  background: linear-gradient(135deg, #5b6cff, #7a6cff);
}
.ev-b {
  background: linear-gradient(135deg, #17a673, #35b98c);
}
.ev-c {
  background: linear-gradient(135deg, #ef7d55, #e5566f);
}
.ev-d {
  background: linear-gradient(135deg, #9b6cff, #b775ff);
}

/* POS mock */
.pos-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: .9rem;
}
@media (max-width: 520px) {
  .pos-grid {
    grid-template-columns: 1fr;
  }
}
.pos-lbl {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted-lt);
  margin: 0 0 .5rem;
}
.pos-tile {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .6rem .7rem;
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: .45rem;
}
.pos-tile .pt-ic {
  font-size: 1.05rem;
}
.pos-tile b {
  font-size: .8rem;
  font-weight: 600;
  display: block;
}
.pos-tile small {
  font-size: .68rem;
  color: var(--muted-lt);
}
.pos-line {
  display: flex;
  justify-content: space-between;
  font-size: .8rem;
  padding: .38rem 0;
  border-bottom: 1px dashed var(--line);
}
.pos-line span:last-child {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.pos-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: .6rem 0 .7rem;
  font-weight: 700;
}
.pos-total .pt-amt {
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.pos-pay {
  display: flex;
  gap: .35rem;
  margin-bottom: .6rem;
}
.pos-pay span {
  flex: 1;
  text-align: center;
  font-size: .7rem;
  font-weight: 600;
  padding: .42rem .2rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
}
.pos-pay span.on {
  border-color: var(--accent);
  background: var(--paper-3);
  color: var(--accent-ink);
}
.pos-charge {
  background: linear-gradient(120deg, var(--accent), var(--accent2));
  color: #fff;
  text-align: center;
  font-size: .82rem;
  font-weight: 650;
  padding: .6rem;
  border-radius: 10px;
}

/* Reports mock */
.rep-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
  margin-bottom: .9rem;
}
@media (max-width: 520px) {
  .rep-tiles {
    grid-template-columns: repeat(2, 1fr);
  }
}
.rep-tile {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .6rem .65rem;
}
.rep-tile b {
  display: block;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.rep-tile small {
  font-size: .66rem;
  color: var(--muted-lt);
}
.rep-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem;
}
@media (max-width: 520px) {
  .rep-split {
    grid-template-columns: 1fr;
  }
}
.rep-row {
  display: flex;
  justify-content: space-between;
  font-size: .78rem;
  padding: .34rem 0;
  border-bottom: 1px solid var(--line);
}
.rep-row:last-child {
  border-bottom: none;
}
.rep-row span:last-child {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.rep-bar {
  height: 5px;
  border-radius: 3px;
  background: var(--paper-3);
  overflow: hidden;
  margin-top: .3rem;
}
.rep-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}

/* ---------- Free setup ---------- */
.setup-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  padding: clamp(1.8rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 2.6rem;
  align-items: center;
}
@media (max-width: 880px) {
  .setup-card {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }
}
.setup-card h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  letter-spacing: -0.025em;
  margin: 0 0 .8rem;
}
.setup-card p {
  color: var(--muted);
  line-height: 1.65;
  margin: 0 0 1.5rem;
  font-family: Inter, sans-serif;
}
.setup-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .8rem;
}
.setup-list li {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  font-size: .93rem;
}
.setup-list .sl-n {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--paper-3);
  color: var(--accent-ink);
  font-size: .7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.setup-badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: var(--good-bg);
  color: #0f7a55;
  font-size: .78rem;
  font-weight: 650;
  padding: .4rem .85rem;
  border-radius: var(--r-pill);
  margin-bottom: 1rem;
}

/* ---------- Referral ---------- */
.ref-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  padding: clamp(1.8rem, 4vw, 2.8rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.2rem;
}
@media (max-width: 880px) {
  .ref-card {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
}
.ref-card h2 {
  font-size: clamp(1.4rem, 3vw, 2rem);
  letter-spacing: -0.025em;
  margin: 0 0 .8rem;
  grid-column: 1 / -1;
}
.ref-side {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
}
.ref-side .ref-ic {
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  background: var(--paper-3);
  color: var(--accent-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ref-side p {
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
  font-family: Inter, sans-serif;
  font-size: .95rem;
}
.ref-note {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: .82rem;
  margin: 0;
  font-family: Inter, sans-serif;
}

/* ---------- Support ---------- */
.sup-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 880px) {
  .sup-grid {
    grid-template-columns: 1fr;
  }
}
.sup-card {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  padding: 1.6rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.sup-card .sup-ic {
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  background: var(--paper-3);
  color: var(--accent-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .3rem;
}
.sup-card .sup-ic svg {
  width: 18px;
  height: 18px;
}
.sup-card h3 {
  font-size: 1.02rem;
  margin: 0;
  letter-spacing: -0.01em;
}
.sup-card p {
  font-size: .89rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
  font-family: Inter, sans-serif;
}
.sup-card a {
  font-size: .89rem;
  font-weight: 600;
  color: var(--accent-ink);
  text-decoration: none;
  margin-top: auto;
  padding-top: .5rem;
}
.sup-card a:hover {
  text-decoration: underline;
}

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