/* SkySale — shared styles.
 *
 * One visual world, committed to: a near-black ground with money as the only
 * colour. Accounting's own two colours (credit green, debit red) appear on
 * figures and nowhere else, so a red number always means money going out
 * rather than "this bit is important".
 *
 * All motion is native scroll-driven animation. No library, no observers, no
 * JavaScript — and where a browser doesn't support it, every word is simply
 * there at rest. Nothing is ever parked invisible waiting to be scrolled to.
 */

:root {
  --void:      #07090C;
  --panel:     #0E1319;
  --panel-2:   #141B23;
  --line:      #1D2731;
  --line-soft: #161E27;
  --ink:       #F2F5F8;
  --ink-dim:   #94A3B5;
  --ink-faint: #5D6B7C;
  --blue:      #4DA3E8;
  --blue-deep: #2B7FC4;
  --blue-glow: rgba(77, 163, 232, .16);
  --credit:    #45C08A;
  --debit:     #E8707C;

  --display: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --gutter: clamp(20px, 5vw, 64px);
  --measure: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--display);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.wrap { max-width: var(--measure); margin: 0 auto; padding-inline: var(--gutter); }
.narrow { max-width: 820px; }

h1, h2, h3 { margin: 0; line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; font-weight: 500; }
h1 { font-size: clamp(2.7rem, 7.5vw, 5.6rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.45rem); letter-spacing: -.02em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }

.eyebrow {
  font-family: var(--mono); font-size: .7rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--blue);
}
.lede { font-size: clamp(1.05rem, 1.7vw, 1.3rem); color: var(--ink-dim); max-width: 58ch; line-height: 1.55; }
.dim { color: var(--ink-dim); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

:where(a, button):focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 4px; }

/* ── Masthead ──────────────────────────────────────────────────────────── */
header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: rgba(7, 9, 12, .72);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.masthead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; padding-block: 14px;
}
.logo { font-size: 1.22rem; font-weight: 700; letter-spacing: -.035em; }
.logo span { color: var(--blue); }
/* Wraps, because a row of links that can't wrap is a row that runs off the
   side of a phone and takes the whole page's horizontal scroll with it. */
nav { display: flex; flex-wrap: wrap; gap: clamp(14px, 2.4vw, 30px); align-items: center; font-size: .92rem; }
nav a { color: var(--ink-dim); transition: color .2s; white-space: nowrap; }
nav a:hover, nav a[aria-current="page"] { color: var(--ink); }
/* The section links go on a phone; signing in does not. Someone on a phone
   is far more likely to be an existing shop opening their register than a
   stranger reading about reconciliation — and with every .opt hidden there
   was no way in from a phone at all. */
@media (max-width: 860px) {
  nav .opt:not(.signin) { display: none; }
  nav .signin {
    display: inline-flex; align-items: center; min-height: 44px;
    padding: 0 18px; border: 1.5px solid var(--line);
    border-radius: 999px; color: var(--ink);
  }
  nav .signin:hover { border-color: var(--blue); color: var(--blue); }
}
/* On a phone both buttons share one line with the logo; let them wrap and
   the masthead doubles in height and sits over the page. */
@media (max-width: 480px) {
  .masthead { gap: 10px; padding-block: 10px; }
  .masthead nav { flex-wrap: nowrap; gap: 8px; }
  nav .signin { padding: 0 14px; min-height: 40px; font-size: .86rem; }
  .masthead .btn-sm { padding: 10px 14px; font-size: .86rem; }
}
@media (max-width: 360px) {
  .logo { font-size: 1.05rem; }
  nav .signin { padding: 0 11px; }
  .masthead .btn-sm { padding: 10px 11px; font-size: .8rem; }
}

.btn {
  display: inline-block; font-family: var(--display); font-weight: 600;
  font-size: .95rem; padding: 12px 24px; border-radius: 100px;
  border: 1px solid transparent; transition: background .2s, border-color .2s, color .2s;
  white-space: nowrap;
}
.btn-solid { background: var(--blue); color: #04121E; }
.btn-solid:hover { background: #6FB8F0; }
.btn-ghost { border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--blue); color: var(--blue); }
.btn-sm { padding: 9px 18px; font-size: .88rem; }
/* The one action the site exists to produce. Bigger than the rest, and it
   keeps a ring of the accent around it so it still reads as the loud one
   against the dark ground, where a flat fill can recede. */
.btn-lg { padding: 15px 30px; font-size: 1rem; }
.btn-solid { box-shadow: 0 0 0 0 var(--blue-glow); transition: background .2s, box-shadow .25s, transform .15s; }
.btn-solid:hover { box-shadow: 0 0 0 6px var(--blue-glow); transform: translateY(-1px); }

/* The masthead's button stays put at phone width, unlike the section links —
   a nav that collapses to nothing is a page with no way forward on a phone. */
@media (max-width: 860px) { .masthead .btn { display: inline-block; } }

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero { padding-block: clamp(70px, 13vh, 130px) clamp(50px, 9vh, 100px); position: relative; }
/* One soft light source, behind the headline. The only gradient on the site. */
.hero::before {
  /* Kept inside the viewport. It used to hang 30% past each edge, which no
     one could see — overflow-x on the body clipped it — but it made the page
     measure a third wider than the screen, which reads as broken layout every
     time anyone checks. The gradient is widened instead, so it looks the same
     and the page is the width it says it is. */
  content: ''; position: absolute; inset: -20% 0 auto; height: 640px;
  background: radial-gradient(120% 60% at 50% 0%, var(--blue-glow), transparent 70%);
  pointer-events: none; z-index: -1;
}
.hero h1 { margin-block: 20px 26px; }
.hero h1 em { font-style: normal; color: var(--blue); }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }

/* ── Sections ──────────────────────────────────────────────────────────── */
section { padding-block: clamp(64px, 11vh, 132px); }
.rule-top { border-top: 1px solid var(--line-soft); }
.sec-head { margin-bottom: clamp(34px, 6vh, 62px); }
.sec-head h2 { margin-block: 16px 18px; }

/* ── The paycheck ──────────────────────────────────────────────────────── */
.cheque {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-radius: 18px;
  padding: 26px clamp(20px, 3vw, 32px);
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .9);
  width: 100%; max-width: 520px;
}
.cheque-head {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-bottom: 16px; border-bottom: 1px solid var(--line);
}
.cheque-head span { font-family: var(--mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }
.cheque-head b { display: block; font-weight: 600; font-size: .95rem; color: var(--ink); letter-spacing: -.01em; margin-top: 3px; }
.cheque-line {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  padding-block: 13px; border-bottom: 1px solid var(--line-soft);
}
.cheque-line dt { font-size: .93rem; color: var(--ink-dim); }
.cheque-line dt small { display: block; font-size: .76rem; color: var(--ink-faint); margin-top: 2px; }
.cheque-line dd { margin: 0; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: .95rem; white-space: nowrap; }
/* On a narrow screen a long label and its amount stop fitting on one line;
   let the amount drop underneath rather than push the card wider. */
@media (max-width: 560px) {
  .cheque-line { flex-wrap: wrap; gap: 4px 20px; }
  .cheque-line dd { margin-left: auto; }
}
.cheque-line dd.credit { color: var(--credit); }
.cheque-line dd.debit { color: var(--debit); }
.cheque-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  padding-top: 18px; margin-top: 4px; border-top: 1px solid var(--blue);
}
.cheque-total span { font-weight: 600; }
.cheque-total b { font-family: var(--mono); font-size: 1.7rem; font-weight: 600; letter-spacing: -.03em; }
.cheque-note { font-size: .74rem; color: var(--ink-faint); margin-top: 16px; }

/* ── Cards that link to the detail pages ───────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 18px; }
.card {
  display: block; background: var(--panel); border: 1px solid var(--line);
  border-radius: 18px; padding: 30px 28px 26px;
  transition: border-color .25s, transform .25s, background .25s;
}
.card:hover { border-color: var(--blue); transform: translateY(-4px); background: var(--panel-2); }
.card .eyebrow { display: block; margin-bottom: 14px; }
.card h3 { margin-bottom: 10px; }
.card p { font-size: .95rem; color: var(--ink-dim); }
.card .more { display: inline-block; margin-top: 18px; font-size: .9rem; font-weight: 600; color: var(--blue); }
.card:hover .more::after { transform: translateX(4px); }
.card .more::after { content: ' →'; display: inline-block; transition: transform .25s; }

/* ── Spec rows, for the detail pages ───────────────────────────────────── */
.spec { display: grid; }
.spec-row {
  display: grid; grid-template-columns: minmax(200px, 270px) 1fr; gap: clamp(18px, 4vw, 48px);
  padding-block: 28px; border-top: 1px solid var(--line-soft); align-items: start;
}
.spec-row dt { font-weight: 600; font-size: 1.05rem; letter-spacing: -.015em; }
.spec-row dd { margin: 0; color: var(--ink-dim); max-width: 62ch; }
@media (max-width: 720px) { .spec-row { grid-template-columns: 1fr; gap: 8px; } }

/* ── Figures ───────────────────────────────────────────────────────────── */
figure { margin: 0; }
figure img {
  width: 100%; height: auto; max-width: 100%; display: block;
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 40px 80px -50px rgba(0, 0, 0, 1);
}
figcaption { margin-top: 16px; font-size: .92rem; color: var(--ink-dim); max-width: 64ch; }
figcaption b { color: var(--ink); font-weight: 600; }
figcaption .demo {
  display: block; margin-top: 8px; font-family: var(--mono);
  font-size: .72rem; letter-spacing: .04em; color: var(--ink-faint);
}

/* ── Stat band ─────────────────────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 2px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: 16px; overflow: hidden; }
.stat { background: var(--void); padding: 30px 26px; }
.stat b { display: block; font-family: var(--mono); font-size: 1.5rem; font-weight: 500; letter-spacing: -.03em; margin-bottom: 8px; }
.stat span { font-size: .9rem; color: var(--ink-dim); }

/* ── Closing call ──────────────────────────────────────────────────────── */
.closer {
  border: 1px solid var(--line); border-radius: 24px;
  padding: clamp(36px, 6vw, 72px); background: var(--panel);
  position: relative; overflow: hidden;
}
.closer::before {
  content: ''; position: absolute; inset: auto 0 -60%; height: 340px;
  background: radial-gradient(70% 60% at 50% 100%, var(--blue-glow), transparent 70%);
  pointer-events: none;
}
.closer > * { position: relative; }

footer { border-top: 1px solid var(--line-soft); padding-block: 40px 56px; font-size: .88rem; color: var(--ink-faint); }
.foot { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: baseline; }
.foot a { color: var(--ink-dim); }
.foot a:hover { color: var(--blue); }
.foot nav { gap: 14px 20px; }

/* ── Motion ────────────────────────────────────────────────────────────── *
 * Everything above is the resting state and is fully visible. The rules
 * below only ever run where the browser supports scroll-driven animation AND
 * the reader hasn't asked for less motion — so this is decoration on top of a
 * page that already works, never the thing that makes it appear.
 */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    .reveal {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 26%;
    }
    @keyframes rise {
      from { opacity: 0; transform: translateY(34px); }
      to   { opacity: 1; transform: none; }
    }

    /* The headline settles rather than rises. */
    .hero h1, .hero .lede, .hero .cta-row {
      animation: settle .9s cubic-bezier(.2, .7, .2, 1) both;
    }
    .hero .lede { animation-delay: .1s; }
    .hero .cta-row { animation-delay: .18s; }
    @keyframes settle {
      from { opacity: 0; transform: translateY(20px); filter: blur(6px); }
      to   { opacity: 1; transform: none; filter: none; }
    }

    /* The hero cheque lifts away as you leave it. */
    .hero-art {
      animation: recede linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
    @keyframes recede {
      to { opacity: .15; transform: translateY(-40px) scale(.96); }
    }

    /* The extra mile: each card rises in turn, then plays its own argument —
       what any POS does, what this one does instead, and the hours that
       gives back — as it comes up the screen. */
    .mile { view-timeline: --mile block; }
    .mile, .mile .vs, .mile .vs.ours, .mile .saves b, .mile .saves span, .mile .more {
      animation-timeline: --mile; animation-fill-mode: both; animation-timing-function: linear;
    }
    .mile             { animation-name: card-in;  animation-range: entry 0% cover 24%; }
    .mile .vs         { animation-name: dim-in;   animation-range: cover 10% cover 24%; }
    .mile .vs.ours    { animation-name: slide-in; animation-range: cover 18% cover 32%; }
    .mile .saves b    { animation-name: pop;      animation-range: cover 26% cover 38%; }
    .mile .saves span { animation-name: dim-in;   animation-range: cover 30% cover 40%; }
    .mile .more       { animation-name: dim-in;   animation-range: cover 34% cover 42%; }
    /* Side by side, they take turns instead of arriving together. */
    @media (min-width: 960px) {
      .mile:nth-child(2)             { animation-range: entry 30% cover 30%; }
      .mile:nth-child(2) .vs         { animation-range: cover 18% cover 30%; }
      .mile:nth-child(2) .vs.ours    { animation-range: cover 26% cover 38%; }
      .mile:nth-child(2) .saves b    { animation-range: cover 34% cover 44%; }
      .mile:nth-child(2) .saves span { animation-range: cover 38% cover 46%; }
      .mile:nth-child(2) .more       { animation-range: cover 40% cover 48%; }
      .mile:nth-child(3)             { animation-range: entry 60% cover 36%; }
      .mile:nth-child(3) .vs         { animation-range: cover 26% cover 36%; }
      .mile:nth-child(3) .vs.ours    { animation-range: cover 34% cover 44%; }
      .mile:nth-child(3) .saves b    { animation-range: cover 42% cover 50%; }
      .mile:nth-child(3) .saves span { animation-range: cover 44% cover 52%; }
      .mile:nth-child(3) .more       { animation-range: cover 46% cover 54%; }
    }
    @keyframes card-in  { from { opacity: 0; transform: translateY(60px) scale(.94); } to { opacity: 1; transform: none; } }
    @keyframes dim-in   { from { opacity: 0; } to { opacity: 1; } }
    @keyframes slide-in { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
    @keyframes pop      { from { opacity: 0; transform: scale(.5); } 70% { transform: scale(1.12); } to { opacity: 1; transform: none; } }
    .mile .saves b { display: inline-block; transform-origin: left center; }

    /* A staggered set — cards, spec rows. */
    .stagger > * {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 2% cover 22%;
    }
  }
}

/* ── The pinned paycheck ───────────────────────────────────────────────── *
 * Without scroll-driven animation this is an ordinary section with the whole
 * cheque on it. With it, the section becomes tall, the cheque pins to the
 * middle of the screen, and its lines arrive one at a time as you scroll —
 * which is the argument the page is making, performed rather than described.
 */
.pin { padding-block: clamp(64px, 11vh, 132px); }
.pin-inner { display: grid; gap: clamp(32px, 6vw, 72px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .pin-inner { grid-template-columns: 1fr minmax(380px, 520px); } }
.pin-copy h2 { margin-bottom: 20px; }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .pin { height: 300vh; padding-block: 0; view-timeline-name: --pin; }
    .pin-inner { position: sticky; top: 0; min-height: 100vh; padding-block: 90px 40px; }

    .pin-line {
      animation: line-in linear both;
      animation-timeline: --pin;
    }
    @keyframes line-in {
      from { opacity: 0; transform: translateX(22px); }
      to   { opacity: 1; transform: none; }
    }
    /* Each line gets its own slice of the scroll. */
    .pin-line:nth-child(1) { animation-range: contain  0% contain  9%; }
    .pin-line:nth-child(2) { animation-range: contain 10% contain 22%; }
    .pin-line:nth-child(3) { animation-range: contain 23% contain 35%; }
    .pin-line:nth-child(4) { animation-range: contain 36% contain 48%; }
    .pin-line:nth-child(5) { animation-range: contain 49% contain 61%; }

    .pin-total {
      animation: total-in linear both;
      animation-timeline: --pin;
      animation-range: contain 63% contain 76%;
    }
    @keyframes total-in {
      from { opacity: 0; transform: translateY(14px); }
      to   { opacity: 1; transform: none; }
    }

    /* The copy beside the cheque is deliberately NOT animated. It explains
       what the animation is doing, so fading it in on scroll would hide the
       explanation from anyone who hasn't scrolled far enough to need it — and
       leave the section looking empty to anyone landing part-way down. */
  }
}

/* ── Legal pages ──────────────────────────────────────────────────────────
 * Terms and Privacy are read, not skimmed, so they drop the marketing scale
 * for a calmer reading size, with an "in short" box up top and numbered
 * sections that can be linked to one by one. */
.legal { padding-block: 40px 80px; }
.legal .summary {
  border: 1px solid var(--line); background: var(--panel); border-radius: 14px;
  padding: 22px 26px; margin-bottom: 36px;
}
.legal .summary h2 { font-size: 1.05rem; margin: 0 0 10px; letter-spacing: 0; }
.legal .summary ul { margin: 0; }
.legal .toc { margin-bottom: 8px; }
.legal .toc ol { columns: 2; column-gap: 64px; margin: 10px 0 0; padding-left: 1.3em; }
.legal .toc li { break-inside: avoid; }
.legal .toc a { color: var(--ink-dim); text-decoration: none; }
.legal .toc a:hover { color: var(--blue); }
.legal h2 {
  font-size: clamp(1.25rem, 2.2vw, 1.55rem); letter-spacing: -.015em;
  margin: 48px 0 12px; scroll-margin-top: 96px;
}
.legal h3 { font-size: 1.02rem; letter-spacing: 0; margin: 22px 0 8px; }
.legal p, .legal li { color: var(--ink-dim); font-size: 1rem; line-height: 1.68; }
.legal p + p, .legal ul + p, .legal p + ul { margin-top: 12px; }
.legal ul, .legal ol { padding-left: 1.3em; margin: 10px 0; }
.legal li + li { margin-top: 6px; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal a { color: var(--blue); }
.legal .caps { text-transform: uppercase; font-size: .93rem; letter-spacing: .01em; }
.legal .meta { font-family: var(--mono); font-size: .78rem; color: var(--ink-faint); margin-top: 18px; }
.legal table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: .95rem; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line-soft); color: var(--ink-dim); }
.legal th { color: var(--ink); font-weight: 600; font-size: .85rem; }
.legal td:first-child { color: var(--ink); white-space: nowrap; }
@media (max-width: 640px) {
  .legal .toc ol { columns: 1; }
  .legal td:first-child { white-space: normal; }
  .legal table, .legal thead, .legal tbody, .legal tr, .legal th, .legal td { display: block; }
  .legal thead { display: none; }
  .legal td { border-bottom: none; padding: 2px 0; }
  .legal tr { border-bottom: 1px solid var(--line-soft); padding: 10px 0; }
}

/* ── The extra mile, and what it saves ────────────────────────────────────
 * Three columns comparing what any register does with what this one does
 * next, then worked examples of the time that saves. The hours are figures,
 * so they get the mono face; time saved is the one figure shown in credit
 * green, because it is the point of the page. */
.miles { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; }
.mile {
  border: 1px solid var(--line); background: var(--panel); border-radius: 18px;
  padding: 28px 26px; display: flex; flex-direction: column;
}
.mile h3 { margin: 12px 0 14px; }
.mile .vs { font-size: .95rem; line-height: 1.55; color: var(--ink-dim); }
.mile .vs + .vs { margin-top: 10px; }
.mile .vs b { color: var(--ink-faint); font-weight: 600; }
.mile .vs.ours b { color: var(--blue); }
.mile .vs.ours { color: var(--ink); }
.mile .saves {
  margin-top: auto; padding-top: 22px; border-top: 1px solid var(--line-soft);
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.mile .saves b { font-family: var(--mono); font-size: 1.6rem; font-weight: 500; letter-spacing: -.03em; color: var(--credit); }
.mile .saves span { font-size: .82rem; color: var(--ink-faint); text-align: right; }
.mile .more { margin-top: 16px; font-size: .9rem; font-weight: 600; color: var(--blue); }
.mile .more::after { content: ' →'; }

.examples { display: grid; gap: 22px; }
.example {
  border: 1px solid var(--line); background: var(--panel); border-radius: 18px; padding: 26px 26px 22px;
}
.example .who { font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.example h3 { margin: 10px 0 6px; }
.example .setup { font-size: .95rem; color: var(--ink-dim); margin-bottom: 16px; }
.example table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.example th, .example td { text-align: left; padding: 9px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.example th { font-size: .72rem; font-family: var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; }
.example td { color: var(--ink-dim); padding-right: 14px; }
.example td.h, .example th.h { text-align: right; font-family: var(--mono); white-space: nowrap; color: var(--ink); padding-right: 0; padding-left: 14px; }
.example tr.sum td { border-bottom: none; padding-top: 14px; font-weight: 600; color: var(--ink); }
.example tr.sum td.h { color: var(--credit); font-size: 1.15rem; }
.example .also { margin-top: 14px; font-size: .9rem; color: var(--ink-dim); }
.example .also b { color: var(--ink); }

.total-saved {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2px;
  background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: 16px; overflow: hidden; margin-top: 22px;
}
.total-saved div { background: var(--void); padding: 24px 24px; }
.total-saved b { display: block; font-family: var(--mono); font-size: 1.7rem; font-weight: 500; letter-spacing: -.03em; margin-bottom: 6px; }
.total-saved b.credit { color: var(--credit); }
.total-saved span { font-size: .88rem; color: var(--ink-dim); }
.fineprint { font-size: .85rem; color: var(--ink-faint); margin-top: 16px; max-width: 70ch; line-height: 1.55; }

@media (max-width: 640px) {
  .example { padding: 20px 18px; }
  .example th.h, .example td.h { padding-left: 8px; }
}

/* ── A customer, worked through ───────────────────────────────────────────
 * Each job is drawn as a faint outline the length of the hours it used to
 * take, with a solid bar for the hours it takes now — a still picture, not a
 * scroll animation, which held the page in place for too long. */
.story { padding-block: clamp(64px, 11vh, 132px); border-top: 1px solid var(--line-soft); }
.story-inner { display: grid; gap: 24px; }
.story-head h2 em { font-style: normal; color: var(--credit); }
.story-head .lede { margin-top: 16px; }
.story-rows { display: grid; gap: 12px; }
.srow {
  display: grid; grid-template-columns: 1fr 11rem; gap: 18px; align-items: center;
  border: 1px solid var(--line); background: var(--panel); border-radius: 16px; padding: 16px 22px; color: inherit; text-decoration: none;
}
.srow:hover { border-color: var(--blue); }
.srow-label b { display: block; font-size: 1.05rem; margin-bottom: 4px; }
.srow-label span { font-size: .88rem; color: var(--ink-dim); line-height: 1.45; }
.srow-nums { font-family: var(--mono); white-space: nowrap; text-align: right; }
.srow-nums .was { color: var(--ink-faint); text-decoration: line-through; }
.srow-nums .arrow { color: var(--ink-faint); margin: 0 8px; }
.srow-nums .now { color: var(--ink); }
.srow-nums .saved { display: block; margin-top: 4px; color: var(--credit); font-weight: 500; font-size: 1.15rem; }
.story-total {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 2px;
  background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: 16px; overflow: hidden;
}
.story-total div { background: var(--void); padding: 16px 22px; }
.story-total span { display: block; font-size: .85rem; color: var(--ink-dim); margin-bottom: 6px; }
.story-total b { font-family: var(--mono); font-size: 1.6rem; font-weight: 500; letter-spacing: -.03em; }
.story-total b.was { color: var(--ink-faint); }
.story-total b.credit { color: var(--credit); }
.example.calc td { font-size: .88rem; }
.example.calc .sum-line { margin-top: 4px; font-family: var(--mono); font-size: .78rem; color: var(--ink-faint); }
.example.calc .sum-line b { color: var(--ink); font-weight: 500; white-space: nowrap; }
@media (max-width: 760px) {
  .srow { grid-template-columns: 1fr; gap: 12px; }
  .srow-nums { text-align: left; }
  .example.calc thead { display: none; }
  .example.calc tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
  .example.calc td { display: block; border: none; padding: 4px 0; text-align: left !important; }
}


/* On a phone the footer is the only way to the feature pages (the masthead
   hides them), so its links get finger-sized targets. */
@media (max-width: 860px) {
  footer nav { gap: 0 20px; }
  footer nav a { display: inline-block; padding-block: 11px; }
}


/* ── The free trial ──────────────────────────────────────────────────────── */
.trial-note { margin-top: 14px; font-size: .9rem; color: var(--ink-dim); }
.trial-note a { color: var(--blue); }
.trial-steps {
  list-style: none; padding: 0; margin: 8px 0 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px;
}
.trial-steps li {
  border: 1px solid var(--line); background: var(--panel); border-radius: 18px; padding: 24px 22px;
}
.trial-steps .n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; background: var(--blue-glow);
  color: var(--blue); font-family: var(--mono); font-weight: 600;
}
.trial-steps h3 { margin: 14px 0 8px; font-size: 1.08rem; }
.trial-steps p { color: var(--ink-dim); font-size: .94rem; line-height: 1.55; }
.trial-steps .opt-tag {
  font-family: var(--mono); font-size: .68rem; font-weight: 500; color: var(--ink-faint);
  border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; margin-left: 4px; vertical-align: 2px;
}
.trial-terms {
  margin-top: 22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2px;
  background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: 16px; overflow: hidden;
}
.trial-terms div { background: var(--void); padding: 18px 22px; }
.trial-terms b { display: block; font-family: var(--mono); font-size: 1.7rem; font-weight: 500; letter-spacing: -.03em; color: var(--credit); }
.trial-terms span { font-size: .88rem; color: var(--ink-dim); }

/* WhatsApp support: under the closing call to action, and in every footer. */
.support-note { margin-top: 22px; max-width: 46em; font-size: .95rem; color: var(--ink-dim); line-height: 1.55; }
.support-note a, .foot-support a { color: var(--blue); white-space: nowrap; }
.foot-support { margin-top: 6px; }

/* The app section: plain cards, not links. */
.app-features .mile p { color: var(--ink-dim); line-height: 1.6; margin: 0; }
.app-features .mile h3 { margin: 0 0 10px; }
.app-features .card:hover { transform: none; border-color: var(--line); background: var(--panel); }
.app-cta { align-items: center; margin-top: 26px; }
.app-note { font-size: .9rem; color: var(--ink-faint); }