/* 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;
}

/* Terracotta marketing identity — one accent, no gradient pair.
     The neutrals are warm on purpose: cool blue-greys under a warm accent are the tell of a
     half-finished recolour. Every one of them still clears WCAG AA on white, which is why
     they are exact values and not eyeballed — --muted-lt is the tightest at 5.04:1, and its
     predecessor #8c90a0 measured ~3.2:1 and failed for the caption and helper text it
     colours. */
:root {
  --ink: #14100e; /* 18.9:1 */
  --ink-2: #262019; /* 16.1:1 */
  --muted: #6b6058; /* 6.1:1 */
  --muted-lt: #786d64; /* 5.0:1 */
  --line: #ece5e0;
  --paper: #ffffff;
  --paper-2: #faf8f6;
  --paper-3: #fdf1ec;
  /* One accent, deliberately not a gradient pair. The old #5b6cff/#9b6cff gave white button
     text 4.17:1 and 3.51:1 against a 4.5:1 floor, so the primary CTA failed AA across its
     whole width - worst at the purple end. The second brand colour is gone entirely: it was
     doing work a single confident one should do, and blue-to-purple is the most over-used
     signature in software marketing. */
  --accent: #b4441f; /* 5.54:1 on white */
  --accent-ink: #8f3418;
  --good: #17a673;
  --good-bg: #e7f4ee;
  /* Rose, not a true red: the old #b3261e sat at 1.18:1 against the terracotta accent, which
     made an error message and a brand button the same colour to the eye. */
  --danger: #9f1239;

  --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: var(--accent);
  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: var(--accent);
  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(180, 68, 31, 0.14), transparent 60%),
    radial-gradient(560px 380px at 85% 0%, rgba(207, 96, 56, 0.12), 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: #fdf1ec;
  border: 1px solid #f3ded4;
  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) 30%, var(--accent));
  -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(38, 32, 25, 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, #b4441f, #cf6038);
}
.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(38, 32, 25, 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, #b4441f, #cf6038);
}
.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(38, 32, 25, 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, #fdf1ec, #f9e8e0);
  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: var(--accent);
  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, var(--ink), var(--ink-2));
  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: var(--accent);
}
.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(180, 68, 31, 0.4);
  transform: translateY(-6px);
}
.pop-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  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, #fdf1ec, #f9e8e0);
  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(38, 32, 25, 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, #b4441f, #cf6038);
}
.ev-b {
  background: linear-gradient(135deg, #17a673, #35b98c);
}
.ev-c {
  background: linear-gradient(135deg, #ef7d55, #e5566f);
}
.ev-d {
  background: linear-gradient(135deg, #0f766e, #15968b);
}

/* 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: var(--accent);
  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: var(--accent);
}

/* ---------- 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;
}

/* ---- Hero reveal ---------------------------------------------------------------------
 * Modelled on linear.app's hero, whose h1 spans settle at
 *   opacity: 1; filter: blur(0px); transform: translateY(0%)
 * — three properties animating together per beat. The blur is the part that makes it read
 * as expensive: a fade-and-rise is ordinary, text resolving INTO FOCUS is not. The rise is
 * in %, so it scales with the type instead of needing a value per breakpoint.
 *
 * Linear staggers phrase by phrase inside the headline. We cannot: our headline is a
 * .grad-text span using background-clip:text, and inside a clipped-background element a
 * child's opacity and filter are ignored outright while a transform makes the word vanish —
 * the glyphs are painted by the ancestor's clipped background, which does not follow a
 * transformed child. Tested on the page, not assumed. Worse, the admin-authored headline
 * arrives as ONE gradient span, so an inline-block split could not wrap and would overflow
 * every phone.
 *
 * So the stagger runs across the five hero elements instead, and the headline animates
 * whole. Same signature, no wrapping risk, and it survives the copy being swapped by
 * /api/public/landing-content — that replaces the children of these elements, never the
 * elements themselves, so nothing has to be re-armed.
 *
 * `both` fill matters: it holds the from-state before the delay elapses. Without it every
 * element would paint fully visible, then snap to hidden when its turn came.
 */
@keyframes rv-in {
  from {
    opacity: 0;
    filter: blur(14px);
    transform: translateY(38%);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}
.js-reveal .hero-copy > * {
  animation: rv-in .8s cubic-bezier(.22, .7, .3, 1) both;
}
/* The beats are spaced far enough apart to be read as separate arrivals rather than one
 * wash. The order is deliberate and is NOT DOM order: the mockup lands between the buttons
 * and the note, so the note — the reassurance line — is the last thing to settle and closes
 * the sequence.
 *
 *   .055s  eyebrow     1  Built in Cyprus
 *   .187s  headline    2  Run your whole shop from one calm dashboard.
 *   .385s  lead        3  Calenti brings booking, calendar...
 *   .583s  buttons     4  Start free / See what's inside
 *   .770s  mockup      -  (sits outside .hero-copy, hence its own rule below)
 *   .968s  note        5  Live in minutes · Start free, no card needed
 *
 * Every delay is the earlier set times 1.1 — the sequence sits back a touch without
 * changing its rhythm, since scaling them all keeps the gaps proportional.
 */
.js-reveal .hero-copy > *:nth-child(1) {
  animation-delay: .055s;
}
.js-reveal .hero-copy > *:nth-child(2) {
  animation-delay: .187s;
}
.js-reveal .hero-copy > *:nth-child(3) {
  animation-delay: .385s;
}
.js-reveal .hero-copy > *:nth-child(4) {
  animation-delay: .583s;
}
.js-reveal .hero-copy > *:nth-child(5) {
  animation-delay: .968s;
}
/* The mockup is a large block, so it rises a little and barely blurs — the same treatment at
 * full strength reads as the whole page lurching. */
.js-reveal .hero-visual {
  animation: rv-visual 1s cubic-bezier(.22, .7, .3, 1) both;
  animation-delay: .77s;
}
@keyframes rv-visual {
  from {
    opacity: 0;
    filter: blur(6px);
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

/* ---- Icons that draw themselves in ---------------------------------------------------
 * The section icons are real strokes (fill:none, stroke:currentColor), which is what makes
 * this possible: stroke-dasharray can only chase an outline, never a filled shape. Each
 * shape is given pathLength="1" in JS, so one dash rule covers a circle, a rect and a
 * multi-segment path alike regardless of their real lengths — the dash is one unit long and
 * starts pushed fully out of view, and animating the offset to 0 slides it back in, which
 * reads as the icon being drawn.
 *
 * .draw-pending is added by JS, never by the HTML. If the script fails or never runs the
 * icons simply render as they always did, rather than staying invisible.
 */
.draw-pending > * {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.draw-go > * {
  animation: draw-stroke .85s cubic-bezier(.4, 0, .2, 1) forwards;
}
/* A multi-part icon draws part by part rather than all at once — the outline, then what sits
 * inside it. Four covers the most complex icon on the page. */
.draw-go > *:nth-child(2) {
  animation-delay: .13s;
}
.draw-go > *:nth-child(3) {
  animation-delay: .24s;
}
.draw-go > *:nth-child(4) {
  animation-delay: .33s;
}
/* Redraw on hover. The scroll trigger alone is close to pointless on a desktop: the trust
 * row is already on screen at load so it draws before anyone is looking, and in the
 * three-column feature grid the two rows sit ~265px apart, so against a 900px viewport all
 * six cross the threshold within a flick of the wheel and read as one blur rather than a
 * sequence. Single-column phones are the only place the icons genuinely arrive one at a
 * time, which is why it works there and not here.
 *
 * Hover gives the desktop its own trigger, under the visitor's control and repeatable. It
 * needs a separate keyframe name from draw-stroke: re-applying a running animation's own
 * name does not restart it, a differently named one does.
 */
@media (hover: hover) {
  .feat-card:hover .feat-ic svg > *,
  .sup-card:hover .sup-ic svg > *,
  .trust-item:hover svg > * {
    animation: draw-again .75s cubic-bezier(.4, 0, .2, 1) forwards;
    animation-delay: 0s;
  }
}
@keyframes draw-again {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes draw-stroke {
  to {
    stroke-dashoffset: 0;
  }
}

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