/* ═══════════════════════════════════════════════════════════════════════
   lessly.app — the family's visual language, in Lessly's colour.

   Everything below the token block is palette-agnostic: the field, the four
   squares, the kicker, the cards. Changing Lessly's colour means changing
   the values in :root — exactly how srnplus.co.nz works.

   Fixed across the family: the dotted field · the four squares (yellow, red,
   teal, purple — Zeaney AI's maker mark, order never changes) · Inter for UI ·
   JetBrains Mono for figures and micro-labels · white cards, radius 14.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── LESSLY PALETTE — Ink & Chartreuse, locked 14 Sep 2026 ───────── */
  --brand:     #24242f;
  --brand-ink: #16161d;
  --field-a:   #24242f;
  --field-b:   #1a1a23;
  --field-c:   #111117;
  --glow:      #3f3f5c;
  --sec:       #d8ff3e;   /* a FILL, with dark ink on it — never text on white */
  --sec-deep:  #c2e82b;
  --sec-ink:   #1c2405;
  --sec-soft:  #f7ffe0;
  --sec-note:  #5c6b00;   /* the secondary darkened until it reads as text */

  /* ── Neutrals + type: identical to SRN Plus ──────────────────────────── */
  --ink: #1a1a2e; --sub: #4a5568; --muted: #94a3b8;
  --bg: #eef0f4; --white: #fff; --line: #e4e7ee; --line-strong: #d2d7e0;
  --bg-deep: #e4e7ee;   /* the second light tone, for alternating bands */

  --sq-yellow: linear-gradient(135deg, #ffe45c, #ffc61a);
  --sq-red:    linear-gradient(135deg, #ff6f6a, #e8433c);
  --sq-teal:   linear-gradient(135deg, #4bd9bc, #17b394);
  --sq-purple: linear-gradient(135deg, #b79bff, #8b5cf6);

  --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --display: Inter, -apple-system, BlinkMacSystemFont, sans-serif;  /* the family pair: Inter + JetBrains Mono */
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --maxw: 1080px; --radius: 14px;
  --spring: cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* Market switch — NZ is the default; AU swaps prices, bands and GST wording.
   !important because these hide elements that carry their own display rule
   (a .tier li is display:flex, which would otherwise win on specificity). */
html:not([data-c="au"]) .au { display: none !important; }
html[data-c="au"] .nz { display: none !important; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg);
       line-height: 1.6; font-size: 17px; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, .display { font-family: var(--display); }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.mono { font-family: var(--mono); }

/* ── The field ─────────────────────────────────────────────────────────── */
.field { color: var(--white); background-color: var(--field-a);
  background-image:
    radial-gradient(rgba(255,255,255,0.09) 1px, transparent 1px),
    radial-gradient(ellipse 70% 120% at 78% 4%, var(--glow) 0%, transparent 62%),
    linear-gradient(135deg, var(--field-a) 0%, var(--field-b) 52%, var(--field-c) 100%);
  background-size: 22px 22px, 100% 100%, 100% 100%; }
.field-flat { color: var(--white); background-color: var(--field-c);
  background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
    linear-gradient(135deg, var(--field-b), var(--field-c));
  background-size: 22px 22px, 100% 100%; }
.field-light { background-color: var(--bg-deep);
  background-image: radial-gradient(rgba(26,26,46,0.085) 1px, transparent 1px);
  background-size: 22px 22px; }

/* ── The four squares — Zeaney AI's maker mark. Never recoloured. ──────── */
.squares { display: flex; gap: 5px; }
.squares i { width: var(--sq, 20px); height: var(--sq, 20px);
  border-radius: calc(var(--sq, 20px) * 0.22); display: block; }
.squares i:nth-child(1) { background: var(--sq-yellow); }
.squares i:nth-child(2) { background: var(--sq-red); }
.squares i:nth-child(3) { background: var(--sq-teal); }
.squares i:nth-child(4) { background: var(--sq-purple); }
@media (prefers-reduced-motion: no-preference) {
  .squares i { animation: pop 0.5s var(--spring) both, float 5.4s ease-in-out infinite 0.6s; }
  .squares i:nth-child(2) { animation-delay: 0.09s, 0.7s; }
  .squares i:nth-child(3) { animation-delay: 0.18s, 0.8s; }
  .squares i:nth-child(4) { animation-delay: 0.27s, 0.9s; }
  @keyframes pop { from { opacity: 0; transform: scale(0.5) rotate(-14deg); } to { opacity: 1; transform: none; } }
  @keyframes float { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(3px); } }
}

.kicker { font-family: var(--mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--sec); margin: 0 0 12px; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 700;
  font-size: 16px; padding: 14px 26px; border-radius: 999px; border: 0; cursor: pointer;
  transition: transform 0.18s var(--spring); text-decoration: none !important; }
.btn:hover { transform: translateY(-2px); }
.btn-sec { background: var(--sec); color: var(--sec-ink); box-shadow: 0 4px 16px rgba(0,0,0,0.14); }
.btn-brand { background: var(--brand); color: #fff; }
.btn-ghost { background: rgba(255,255,255,0.12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3); }
.btn-line { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn-sm { font-size: 14.5px; padding: 10px 20px; }

/* ── Nav ───────────────────────────────────────────────────────────────── */
.nav-bar { position: sticky; top: 0; z-index: 40; backdrop-filter: blur(10px); }
.nav-inner { display: flex; align-items: center; gap: 22px; height: 68px;
  border-bottom: 1px solid rgba(255,255,255,0.12); }
.brandmark { display: flex; align-items: center; gap: 11px; }
/* The wordmark is JetBrains Mono mixed case — the same setting as the app icon
   and the favicon, so the tab, the header and the phone all agree. Mono runs
   wider than Inter at a given size, hence 19px rather than 21px: it is matched
   on VISUAL width, not on the number. */
.brandmark .name { font-family: var(--mono); font-weight: 700; font-size: 19px;
  letter-spacing: 0; color: #fff; }
.nav-links { display: flex; gap: 20px; margin-left: auto; }
.nav-links a { color: rgba(255,255,255,0.78); font-size: 15px; font-weight: 500; }
.nav-links a:hover { color: #fff; text-decoration: none; }
.mkt { display: inline-flex; border-radius: 999px; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.26); }
.mkt button { border: 0; background: none; color: rgba(255,255,255,0.72); cursor: pointer;
  font: inherit; font-family: var(--mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.09em; padding: 7px 12px; }
.mkt button[aria-pressed="true"] { background: var(--sec); color: var(--sec-ink); }

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero { padding: 0 0 88px; }
.hero-grid { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 44px;
  align-items: center; padding-top: 64px; }
.hero h1 { font-size: clamp(34px, 5.2vw, 54px); font-weight: 800; line-height: 1.05;
  letter-spacing: -0.045em; margin: 0 0 20px; text-wrap: balance; }
.hero h1 .accent { color: var(--sec); }
.hero p.lede { font-size: 19px; color: rgba(255,255,255,0.8); margin: 0 0 30px; max-width: 46ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-note { font-family: var(--mono); font-size: 12px; letter-spacing: 0.07em;
  text-transform: uppercase; color: rgba(255,255,255,0.58); margin: 24px 0 0; }

.phone { width: 264px; margin: 0 auto; background: #fbfbfa; border-radius: 30px;
  border: 8px solid rgba(0,0,0,0.4); border-bottom: 0;
  box-shadow: 0 24px 60px rgba(0,0,0,0.36); overflow: hidden; padding-bottom: 14px; }
.phone-top { padding: 18px 18px 22px; color: #fff; background-color: var(--field-a);
  background-image: radial-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
    linear-gradient(135deg, var(--field-a), var(--field-c));
  background-size: 16px 16px, 100% 100%; }
.phone-top .k { font-family: var(--mono); font-size: 9px; letter-spacing: 0.2em; color: var(--sec); }
.phone-top .n { font-family: var(--display); font-size: 23px; font-weight: 800;
  letter-spacing: -0.035em; margin-top: 5px; }
.phone-top .d { font-size: 11px; color: rgba(255,255,255,0.68); margin-top: 2px; }
.phone-body { padding: 13px; display: grid; gap: 9px; }
.pcard { background: #fff; border-radius: 12px; padding: 12px 13px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.pcard .t { font-size: 13px; font-weight: 700; color: #1b1b20; }
.pcard .d { font-size: 11px; color: #7b7a82; margin-top: 2px; }
.ppill { display: inline-block; margin-top: 8px; font-family: var(--mono); font-size: 9px;
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 9px;
  border-radius: 999px; background: var(--sec); color: var(--sec-ink); }
.pbtn { text-align: center; font-size: 12.5px; font-weight: 700; padding: 11px;
  border-radius: 12px; background: var(--brand); color: #fff; }

/* ── Offer band ────────────────────────────────────────────────────────── */
.offer { margin-top: -46px; position: relative; z-index: 2; }
.offer-card { background: var(--white); border-radius: 20px;
  box-shadow: 0 18px 50px rgba(20,20,30,0.13); display: grid;
  grid-template-columns: auto 1fr; gap: 34px; align-items: center; padding: 34px 38px; }
.offer-figure { text-align: center; padding-right: 34px; border-right: 1px solid var(--line); }
.offer-big { font-family: var(--mono); font-weight: 700; font-size: 74px; line-height: 1;
  letter-spacing: -0.05em; color: var(--ink); }
.offer-small { font-family: var(--mono); font-weight: 700; font-size: 14px;
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink);
  background: var(--sec); border-radius: 999px; padding: 5px 12px;
  display: inline-block; margin-top: 12px; }
.offer h2 { font-size: 25px; font-weight: 800; letter-spacing: -0.03em; margin: 0 0 8px; }
.offer p { margin: 0 0 14px; color: var(--sub); font-size: 16px; }
.offer ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.offer li { font-size: 14.5px; color: var(--sub); display: flex; align-items: center; gap: 7px; }
.offer li::before { content: ""; width: 7px; height: 7px; border-radius: 2px;
  background: var(--sec-deep); flex: 0 0 7px; }

/* ── Section furniture ─────────────────────────────────────────────────── */
section { padding: 82px 0; }
.section-title { font-size: clamp(26px, 3.8vw, 37px); font-weight: 800; letter-spacing: -0.04em;
  line-height: 1.13; margin: 0 0 14px; text-wrap: balance; }
.section-title + .section-sub { margin-top: 18px; }
.section-title::after { content: ""; display: block; width: 34px; height: 3px;
  border-radius: 2px; background: var(--sec-deep); margin: 16px 0 0; }
.field .section-title::after, .field-flat .section-title::after { background: var(--sec); }

.section-sub { font-size: 17.5px; color: var(--sub); max-width: 60ch; margin: 0 0 36px; }
.field .section-sub, .field-flat .section-sub { color: rgba(255,255,255,0.76); }
.eyebrow { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--sub); margin: 0 0 12px; }
.field .eyebrow { color: var(--sec); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--cardmin, 238px), 1fr)); gap: 16px; }
.card { background: var(--white); border-radius: var(--radius); padding: 26px 24px;
  box-shadow: 0 1px 2px rgba(20,20,30,0.06), 0 0 0 1px rgba(20,20,30,0.04); }
.card h3 { font-size: 17.5px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 7px; }
.card p { margin: 0; font-size: 15px; color: var(--sub); }
.card .dot { width: 38px; height: 38px; border-radius: 11px; background: var(--sec);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.card .dot span { width: 13px; height: 13px; border-radius: 4px; background: var(--sec-ink); }
.field .card { background: rgba(255,255,255,0.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); }
.field .card h3 { color: #fff; }
.field .card p { color: rgba(255,255,255,0.72); }
.field .card .dot { background: rgba(255,255,255,0.1); }
.field .card .dot span { background: var(--sec); }

/* ── Steps ─────────────────────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(216px, 1fr)); gap: 16px; }
.step { background: var(--white); border-radius: var(--radius); padding: 26px 24px;
  box-shadow: 0 1px 3px rgba(20,20,30,0.07); }
.step .n { font-family: var(--mono); font-weight: 700; font-size: 13px; color: var(--ink);
  letter-spacing: 0.08em; }
.step h3 { font-size: 17.5px; font-weight: 700; letter-spacing: -0.02em; margin: 9px 0 7px; }
.step p { margin: 0; font-size: 15px; color: var(--sub); }

/* ── Pricing ───────────────────────────────────────────────────────────── */
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 14px; }
.tier { background: var(--white); border-radius: var(--radius); padding: 26px 22px 24px;
  border-top: 4px solid var(--sec);
  box-shadow: 0 1px 3px rgba(20,20,30,0.07); display: flex; flex-direction: column; position: relative; }
.tier.popular { box-shadow: 0 0 0 2px var(--sec-deep), 0 8px 26px rgba(20,20,30,0.1);
  border-top-color: var(--sec-deep); }
.tier .flag { position: absolute; top: -10px; left: 22px; background: var(--sec);
  color: var(--sec-ink); font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.tier .nm { font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink); }
.tier .band { font-size: 13.5px; color: var(--muted); margin-top: 4px; }
.tier .amt { font-family: var(--mono); font-weight: 700; font-size: 38px; letter-spacing: -0.04em;
  margin: 14px 0 0; line-height: 1; }
.tier .amt small { font-family: var(--font); font-size: 14px; font-weight: 600; color: var(--muted);
  letter-spacing: 0; }
.tier .who { font-size: 14.5px; color: var(--sub); margin: 12px 0 14px; }
.tier ul { margin: 0 0 18px; padding: 0; list-style: none; }
.tier li { font-size: 14.5px; color: var(--sub); display: flex; gap: 9px; padding: 5px 0;
  align-items: flex-start; }
.tier li::before { content: ""; width: 8px; height: 8px; border-radius: 2px;
  background: var(--sec-deep); flex: 0 0 8px; margin-top: 7px; }
.tier .cta { margin-top: auto; }
.price-note { margin-top: 22px; background: var(--sec-soft); border-radius: var(--radius);
  padding: 18px 22px; font-size: 15.5px; color: var(--sub); }
.price-note b { color: var(--ink); }

/* ── Quotes ────────────────────────────────────────────────────────────── */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.quote { background: rgba(255,255,255,0.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
  border-radius: var(--radius); padding: 24px 22px; }
.quote p { margin: 0 0 14px; font-size: 16px; color: #fff; }
.quote .who { font-size: 13.5px; color: rgba(255,255,255,0.62); }

/* ── Team ──────────────────────────────────────────────────────────────── */
/* Big portrait cards. Three partners, so a three-up grid fills exactly; the
   minmax floor drops it to two and then one without leaving a lone card. */
.team { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.person { background: var(--white); border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 1px 3px rgba(20,20,30,0.07); display: flex; flex-direction: column; }
.portrait { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;
  background: var(--bg-deep); }
.person-body { padding: 20px 22px 24px; }
.mono-tile { width: 52px; height: 52px; border-radius: 14px; background: var(--sec);
  color: var(--sec-ink); font-family: var(--display); font-weight: 800; font-size: 19px;
  display: flex; align-items: center; justify-content: center; letter-spacing: -0.02em;
  margin-bottom: 14px; }
.person h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 3px;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.person .q { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--sec-note); text-transform: uppercase; font-weight: 500; }
/* The chartreuse rule under the role is the same device as the section titles,
   at a smaller scale, so the card reads as part of the same family. */
.person .r { font-size: 14px; color: var(--muted); padding-bottom: 12px;
  border-bottom: 2px solid var(--sec); display: inline-block; margin: 0 0 14px; }
.person p { margin: 0 0 10px; font-size: 14.5px; color: var(--sub); }
.person p:last-child { margin-bottom: 0; }

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.faq details { background: var(--white); border-radius: var(--radius); margin-bottom: 10px;
  box-shadow: 0 1px 3px rgba(20,20,30,0.07); }
.faq summary { cursor: pointer; list-style: none; padding: 19px 22px; font-weight: 700;
  font-size: 16.5px; display: flex; justify-content: space-between; gap: 16px; letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); color: var(--ink); font-size: 19px; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq .a { padding: 0 22px 20px; color: var(--sub); font-size: 16px; }
.faq .a p { margin: 0 0 10px; } .faq .a p:last-child { margin-bottom: 0; }

/* ── Doors ─────────────────────────────────────────────────────────────── */
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.door { border-radius: 18px; padding: 34px 32px; }
.door.primary { background: var(--sec); color: var(--sec-ink); }
.door.secondary { background: var(--white); box-shadow: inset 0 0 0 1px var(--line-strong); }
.door h3 { font-size: 23px; font-weight: 800; letter-spacing: -0.03em; margin: 0 0 8px; }
/* ⚠ Scoped to UNCLASSED paragraphs, and so are `.founders-copy p` and
   `.split-copy p` for the same reason. `.door p` is (0,1,1) and
   `.door-note` only (0,1,0), so the element selector was winning: the caption
   lost its 16px top margin, gained a stray 20px below it, and rendered at
   body size instead of 11.5px. Narrowing the generic rule ends the fight
   rather than escalating specificity, which would only move it. */
.door p:not([class]) { margin: 0 0 20px; font-size: 16px; }
.door.primary p { color: rgba(28,36,5,0.78); }
.door.secondary p { color: var(--sub); }
.door-note { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.07em;
  text-transform: uppercase; margin: 16px 0 0; }
.door.primary .door-note { color: rgba(28,36,5,0.6); }
.door.secondary .door-note { color: var(--muted); }

/* ── Trust strip ───────────────────────────────────────────────────────── */
.trust { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 34px; padding: 26px 0; }
.trust .t { font-family: var(--mono); font-size: 12px; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--muted); }
.trust .v { font-size: 15.5px; font-weight: 600; }

/* ── Footer ────────────────────────────────────────────────────────────── */
footer { padding: 52px 0 40px; }
.foot-top { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; justify-content: space-between; }
.foot-links { display: flex; flex-wrap: wrap; gap: 20px; }
.foot-links a { color: rgba(255,255,255,0.72); font-size: 15px; }
.foot-base { margin-top: 30px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.13);
  font-size: 14px; color: rgba(255,255,255,0.55); display: flex; flex-wrap: wrap;
  gap: 10px 22px; justify-content: space-between; }


/* ── Mobile nav ────────────────────────────────────────────────────────── */
.burger { display: none; width: 40px; height: 40px; border: 0; background: none;
  cursor: pointer; padding: 10px 8px; margin-left: -4px; flex-direction: column;
  justify-content: space-between; }
.burger span { display: block; height: 2px; border-radius: 2px; background: #fff; }
.menu { position: fixed; inset: 0; z-index: 60; background: rgba(10,10,14,0.72);
  backdrop-filter: blur(6px); padding: 78px 16px 16px; }
.menu-panel { background: var(--white); border-radius: 18px; padding: 12px 8px;
  display: flex; flex-direction: column; max-width: 560px; margin: 0 auto;
  box-shadow: 0 24px 60px rgba(0,0,0,0.34); }
.menu-panel a:not(.btn) { font-size: 19px; font-weight: 600; color: var(--ink);
  padding: 15px 18px; border-radius: 12px; }
.menu-panel a:not(.btn):hover { background: var(--bg); text-decoration: none; }
.menu-panel .btn { justify-content: center; margin: 6px 10px 4px; }
.menu-panel .btn:first-of-type { margin-top: 12px; }
.menu-panel .btn:last-child { margin-bottom: 10px; }
.nav-links a.on { color: #fff; }

/* ── Inner-page hero ───────────────────────────────────────────────────── */
.page-hero { padding-bottom: 72px; }
.page-hero-inner { padding-top: 58px; max-width: 800px; }
.page-hero h1 { font-size: clamp(32px, 5vw, 50px); font-weight: 800; line-height: 1.06;
  letter-spacing: -0.045em; margin: 0 0 18px; text-wrap: balance; }
.page-hero .lede { font-size: 19px; color: rgba(255,255,255,0.8); margin: 0; max-width: 56ch; }

/* ── Founders block ────────────────────────────────────────────────────── */
.founders { display: grid; grid-template-columns: 0.78fr 1fr; gap: 44px; align-items: center; }
.founders-photo { margin: 0; }
.founders-photo img { width: 100%; height: auto; border-radius: 18px;
  box-shadow: 0 18px 46px rgba(20,20,30,0.18); }
.founders-copy p:not([class]) { font-size: 16.5px; color: var(--sub); margin: 0 0 13px; }
.founders-copy .sig { font-weight: 700; color: var(--ink); font-size: 16px; margin-top: 20px; }
.founders-copy .sig span { font-weight: 500; color: var(--muted); font-size: 14.5px; }

/* ── Wide photo band ──────────────────────────────────────────────────── */
.media { margin: 34px 0 0; }
.media img { width: 100%; height: auto; border-radius: 18px; display: block;
  box-shadow: 0 14px 40px rgba(20,20,30,0.16); }
.media figcaption { margin-top: 12px; font-size: 14.5px; color: var(--muted); }
.field .media figcaption, .field-flat .media figcaption { color: rgba(255,255,255,0.6); }

/* ── Two-column split (copy + phone) ───────────────────────────────────── */
.split { display: grid; grid-template-columns: 1fr 0.62fr; gap: 48px; align-items: center; }
.split-copy p:not([class]) { font-size: 16.5px; color: var(--sub); margin: 0 0 13px; }
.split .phone { box-shadow: 0 18px 46px rgba(20,20,30,0.22); }

/* ── Link card + "more" link ───────────────────────────────────────────── */
.linkcard { display: block; color: inherit; }
.linkcard:hover { text-decoration: none; box-shadow: 0 6px 22px rgba(20,20,30,0.12); }
.linkcard .go { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 700;
  color: var(--ink); box-shadow: inset 0 -0.5em 0 var(--sec); }
.more { margin: 26px 0 0; }
.more a { font-weight: 700; font-size: 16px; color: var(--ink);
  box-shadow: inset 0 -0.55em 0 var(--sec); padding: 0 2px; }
.more a:hover { text-decoration: none; box-shadow: inset 0 -1.1em 0 var(--sec); }

/* ── Contact ───────────────────────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 40px; align-items: start; }
.enquiry { background: var(--white); border-radius: var(--radius); padding: 26px 24px;
  box-shadow: 0 1px 3px rgba(20,20,30,0.07); display: grid; gap: 14px; }
.enquiry label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink); }
.enquiry .opt { font-weight: 500; color: var(--muted); }
.enquiry input, .enquiry select, .enquiry textarea {
  font: inherit; font-size: 16px; font-weight: 400; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line-strong); border-radius: 10px; padding: 11px 13px; width: 100%; }
.enquiry input:focus, .enquiry select:focus, .enquiry textarea:focus {
  outline: 2px solid var(--sec-deep); outline-offset: 1px; border-color: transparent; }
.enquiry .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.enquiry .hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.enquiry button { justify-content: center; margin-top: 4px; }
.formnote { margin: 0; font-size: 13.5px; color: var(--muted); text-align: center; }
.contact-side { display: grid; gap: 12px; }
.side-card { background: var(--white); border-radius: var(--radius); padding: 20px 22px;
  box-shadow: 0 1px 3px rgba(20,20,30,0.07); }
.side-card.quiet { background: var(--sec-soft); box-shadow: none; }
.side-card h3 { font-size: 16.5px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 6px; }
.side-card p { margin: 0 0 12px; font-size: 14.5px; color: var(--sub); }
.side-card p:last-child { margin-bottom: 0; }
.side-card .big { font-size: 16px; font-weight: 700; }

@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .offer-card { grid-template-columns: 1fr; gap: 22px; padding: 28px 24px; }
  .offer-figure { padding-right: 0; padding-bottom: 20px; border-right: 0; border-bottom: 1px solid var(--line); }
  .doors { grid-template-columns: 1fr; }
  .nav-links, .nav-cta, .mkt { display: none; }
  .burger { display: flex; margin-left: auto; }
  .founders, .split, .contact-grid { grid-template-columns: 1fr; gap: 30px; }
  .founders-photo { max-width: 420px; }
  section { padding: 62px 0; }
}
@media (max-width: 560px) {
  .enquiry .row2 { grid-template-columns: 1fr; }
  .door { padding: 26px 22px; }
  .door h3 { font-size: 20px; }
  .door p:not([class]) { font-size: 15.5px; margin-bottom: 18px; }
}
@media (max-width: 460px) {
  body { font-size: 16px; }
  .offer-big { font-size: 58px; }
  .phone { width: 100%; max-width: 264px; }
}

/* ── Statement section: a hero-weight block for one idea ───────────────── */
.statement { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
.pill-kicker { display: inline-block; font-family: var(--mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--sec-ink); background: var(--sec);
  border-radius: 999px; padding: 6px 14px; margin: 0 0 20px; }
.statement-title { font-size: clamp(32px, 4.6vw, 50px); font-weight: 800; line-height: 1.04;
  letter-spacing: -0.045em; margin: 0 0 18px; text-wrap: balance; }
.statement-title .accent { color: var(--sec); }
.statement-lede { font-size: 19px; color: #fff; margin: 0 0 14px; max-width: 40ch; }
.statement-body { font-size: 16.5px; color: rgba(255,255,255,0.72); margin: 0 0 26px; max-width: 46ch; }

.panel { background: rgba(255,255,255,0.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.13);
  border-radius: 18px; padding: 30px 30px 26px; }
.panel h3 { font-size: 21px; font-weight: 800; letter-spacing: -0.03em; margin: 0 0 18px; color: #fff; }
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li { position: relative; padding: 9px 0 9px 32px; font-size: 16px; color: rgba(255,255,255,0.86); }
.ticks li::before { content: "\2713"; position: absolute; left: 0; top: 8px; width: 20px; height: 20px;
  border-radius: 6px; background: var(--sec); color: var(--sec-ink); font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; }
.panel-note { margin: 20px 0 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.14);
  font-size: 15px; color: rgba(255,255,255,0.68); }
.panel-note b { color: #fff; }
.panel-link { margin: 12px 0 0; font-size: 15px; font-weight: 700; }
.panel-link a { color: var(--sec); }

/* ── Comparison table ──────────────────────────────────────────────────── */
.vs { margin-top: 34px; border-radius: 18px; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.13); }
.vs-head, .vs-row { display: grid; grid-template-columns: 0.8fr 1.1fr 1.1fr; gap: 20px;
  padding: 16px 24px; align-items: center; }
.vs-head { background: rgba(255,255,255,0.06); font-family: var(--mono); font-size: 12px;
  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.52); }
.vs-head .us { color: var(--sec); }
.vs-row { border-top: 1px solid rgba(255,255,255,0.1); font-size: 16px; }
.vs-row .k { font-weight: 700; color: #fff; }
.vs-row .old { color: rgba(255,255,255,0.5); }
.vs-row .new { color: #fff; font-weight: 600; }
.vs-row i { font-style: normal; display: inline-block; width: 20px; margin-right: 10px;
  font-size: 13px; }
.vs-row .old i { color: rgba(255,255,255,0.34); }
.vs-row .new i { color: var(--sec); }

@media (max-width: 880px) {
  .statement { grid-template-columns: 1fr; gap: 32px; }
  .vs-head { display: none; }
  .vs-row { grid-template-columns: 1fr; gap: 8px; padding: 18px 20px; }
  .vs-row .k { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em;
    text-transform: uppercase; color: rgba(255,255,255,0.52); }
}

/* ── Savings calculator ─────────────────────────────────────────────────── */
/* Input on the left, the answer on the right as a dark slab — the figure is
   the point of the section, so it gets the contrast the rest of the band
   deliberately does not have. */
.calc { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 20px; align-items: stretch; }
.calc-in { background: var(--white); border-radius: var(--radius); padding: 26px 26px 24px;
  box-shadow: 0 1px 3px rgba(20,20,30,0.07); }
.calc-label { display: block; font-size: 14px; font-weight: 600; color: var(--ink);
  margin: 0 0 8px; }
.calc-in .calc-label + * { margin-bottom: 22px; }
.calc-field { display: flex; align-items: center; gap: 0; border: 1.5px solid var(--line-strong);
  border-radius: 12px; background: var(--bg); padding: 4px 4px 4px 14px; flex-wrap: wrap; }
.calc-field:focus-within { border-color: var(--sec-deep); }
.calc-field .cur { font-family: var(--mono); font-size: 17px; color: var(--muted); }
.calc-field input { flex: 1 1 90px; min-width: 90px; border: 0; background: none; outline: none;
  font-family: var(--mono); font-size: 21px; font-weight: 700; color: var(--ink);
  padding: 8px 6px; -moz-appearance: textfield; }
.calc-field input::-webkit-outer-spin-button,
.calc-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.seg { display: flex; gap: 3px; background: var(--white); border-radius: 9px; padding: 3px; }
.seg button { border: 0; background: none; cursor: pointer; font: inherit; font-size: 12.5px;
  font-weight: 600; color: var(--muted); padding: 7px 11px; border-radius: 7px; }
.seg button[aria-pressed="true"] { background: var(--sec); color: var(--sec-ink); }
.calc-in select { width: 100%; border: 1.5px solid var(--line-strong); border-radius: 12px;
  background: var(--bg); padding: 13px 14px; font: inherit; font-size: 15px; color: var(--ink);
  appearance: none; }
.calc-note { font-size: 13.5px; color: var(--muted); margin: 0; }
.calc-note a { color: var(--ink); font-weight: 600; }

.calc-out { background: var(--brand); background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 22px 22px; border-radius: var(--radius); padding: 28px 26px 24px;
  color: #fff; display: flex; flex-direction: column; }
.calc-head { font-family: var(--mono); font-size: var(--fs-mini, 11px); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--sec); margin: 0 0 6px; }
.calc-big { font-size: clamp(38px, 6vw, 54px); line-height: 1; font-weight: 800;
  letter-spacing: -0.045em; margin: 0; font-variant-numeric: tabular-nums; }
.calc-cap { font-size: 14.5px; color: rgba(255,255,255,0.72); margin: 8px 0 20px; }
.calc-rows { margin: 0 0 20px; display: grid; gap: 0; }
.calc-rows > div { display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; padding: 11px 0; border-top: 1px solid rgba(255,255,255,0.13); }
.calc-rows dt { font-size: 14px; color: rgba(255,255,255,0.7); margin: 0; }
.calc-rows dd { margin: 0; font-family: var(--mono); font-size: 15px; font-weight: 700;
  text-align: right; font-variant-numeric: tabular-nums; }
.calc-rows .hl dt { color: #fff; font-weight: 600; }
.calc-rows .hl dd { color: var(--sec); font-size: 16px; }
.calc-out .btn { margin-top: auto; }
.calc-fine { font-size: 12.5px; color: rgba(255,255,255,0.55); margin: 12px 0 0; }

/* ── Switching: numbered mini-steps inside the statement panel ───────────── */
.steps-mini { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 14px; }
.steps-mini li { display: flex; gap: 12px; align-items: flex-start; }
.steps-mini li > span { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 8px;
  background: var(--sec); color: var(--sec-ink); font-family: var(--mono); font-size: 12px;
  font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
/* These live inside .panel, which is a DARK slab — the light-theme ink and
   sub tokens would render this dark-on-dark and all but disappear. */
.steps-mini div { font-size: 14px; color: rgba(255,255,255,0.68); line-height: 1.5; }
.steps-mini strong { display: block; color: #fff; font-size: 14.5px; margin-bottom: 3px;
  font-weight: 700; }

/* ── Who it's for ───────────────────────────────────────────────────────── */
/* Two columns that differ by MARKER, not by colour alone — a red/green pair
   says nothing to a colour-blind reader, and nothing at all in a screenshot. */
.fit { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.fit-col { background: var(--white); border-radius: var(--radius); padding: 24px 26px;
  box-shadow: 0 1px 3px rgba(20,20,30,0.07); }
.fit-col h3 { font-size: 17px; margin: 0 0 4px; letter-spacing: -0.02em; }
.fit-col h3::after { content: ""; display: block; width: 28px; height: 3px; border-radius: 2px;
  margin: 12px 0 0; }
.fit-col.yes h3::after { background: var(--sec); }
.fit-col.no h3::after { background: var(--line-strong); }
.fit-col ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 11px; }
.fit-col li { position: relative; padding-left: 26px; font-size: 14.5px; color: var(--sub); }
.fit-col li::before { position: absolute; left: 0; top: -1px; font-weight: 700; }
.fit-col.yes li::before { content: "\2713"; color: var(--sec-note); }
.fit-col.no li::before { content: "\2014"; color: var(--muted); }
.fit-note { margin: 20px 0 0; font-size: 14px; color: var(--muted); max-width: 62ch; }
.fit-note a { color: var(--ink); font-weight: 600; }

/* ── Proof band ─────────────────────────────────────────────────────────── */
.proof-band { padding-block: 44px; }
.proof { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.proof > div { display: grid; gap: 6px; align-content: start; }
.proof .n { font-size: 34px; font-weight: 800; letter-spacing: -0.045em; color: var(--ink);
  line-height: 1; font-variant-numeric: tabular-nums; }
.proof .l { font-size: 14px; color: var(--sub); max-width: 34ch; }
.proof-note { margin: 22px 0 0; font-size: 13.5px; color: var(--muted); }
.proof-note a { color: var(--ink); font-weight: 600; }

/* ── Sticky CTA (narrow screens only) ───────────────────────────────────── */
.sticky-cta { display: none; }
@media (max-width: 760px) {
  .sticky-cta { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 30;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: var(--brand); color: #fff; border-radius: 14px; padding: 11px 12px 11px 16px;
    box-shadow: 0 10px 30px rgba(10,10,20,0.32); }
  .sticky-cta[hidden] { display: none; }
  .sticky-cta strong { display: block; font-size: 14px; }
  .sticky-cta span { font-size: 12px; color: rgba(255,255,255,0.62); }
}

@media (max-width: 880px) {
  .calc { grid-template-columns: 1fr; }
  .calc-out { order: -1; }
}
.calc-incl { list-style: none; margin: 20px 0 0; padding: 18px 0 0; display: grid; gap: 9px;
  border-top: 1px solid var(--line); }
.calc-incl li { position: relative; padding-left: 24px; font-size: 14px; color: var(--sub); }
.calc-incl li::before { content: "\2713"; position: absolute; left: 0; top: -1px;
  color: var(--sec-note); font-weight: 700; }

/* ── Ask Zeaney — the chat widget ───────────────────────────────────────── */
/* Ported from srnplus.co.nz and re-dressed in Ink & Chartreuse. The mark is
   Zeaney AI's, so it keeps the dotted field and the yellow Z that every
   product in the family carries — the panel around it is Lessly's. */
.zn-root { position: fixed; right: 18px; bottom: 18px; z-index: 40; display: flex;
  flex-direction: column; align-items: flex-end; gap: 12px; }
.zn-fab { display: inline-flex; align-items: center; gap: 10px; background: var(--brand);
  color: #fff; border: 1px solid rgba(255,255,255,0.14); border-radius: 999px;
  padding: 11px 18px 11px 13px; cursor: pointer; font: inherit; font-weight: 700;
  font-size: 15px; line-height: 1; box-shadow: 0 14px 34px -14px rgba(10,10,20,0.6);
  opacity: 0; transform: scale(0.78);
  transition: transform .22s cubic-bezier(.2,.9,.3,1.2), box-shadow .22s ease, opacity .3s ease; }
.zn-ready .zn-fab { opacity: 1; transform: scale(1); }
.zn-fab:hover { transform: translateY(-2px) scale(1.02); }
.zn-fab:active { transform: scale(0.96); }
.zn-mark { position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; font-size: 30px; border-radius: 50%; flex: none; overflow: visible;
  background-color: #1a1a23;
  background-image: radial-gradient(rgba(255,255,255,.26) .6px, transparent .9px),
    linear-gradient(135deg, #24242f, #111117);
  background-size: 6px 6px, 100% 100%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.zn-z { font-weight: 800; font-size: 74%; line-height: 1; color: var(--sec); display: block; }
.zn-head-mark .zn-mark { width: 42px; height: 42px; font-size: 42px; border-radius: 13px; }

/* ⚠ padding:0 IS LOAD-BEARING. The panel is a <section>, and the page's own
   `section { padding: 82px 0 }` (62px on phones) was landing on it — 124px of
   dead band above the header and below the composer, and the reason the
   message list never grew to fill the panel: flex:1 distributes what is left
   INSIDE the padding box, so there was nothing to distribute. A generic
   element selector reaching into a component is exactly the collision to
   watch for; the widget resets what it does not want to inherit. */
.zn-panel { padding: 0;
  width: min(400px, calc(100vw - 36px)); height: min(600px, calc(100vh - 110px));
  background: var(--bg); color: var(--ink); border-radius: 22px; overflow: hidden;
  box-shadow: 0 30px 70px -24px rgba(10,10,20,0.55), 0 0 0 1px var(--line);
  display: flex; flex-direction: column; transform-origin: bottom right;
  animation: zn-in .36s cubic-bezier(.2,.9,.3,1.2) both; }
.zn-panel[hidden] { display: none; }
@keyframes zn-in { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
/* THE HEADER IS THE FIELD, not a white bar. A flat white band under a dark
   site read as a different product bolted on, and a name plus a disclaimer
   left most of its width empty. Same three stops, glow and dot grid as the
   hero, so opening the chat feels like part of the page. The yellow rule
   along the bottom is the brand's, and it doubles as the divider. */
.zn-head { position: relative; display: flex; align-items: center; gap: 12px;
  padding: 16px 14px 15px 16px; color: #fff;
  background-color: var(--field-a);
  background-image:
    radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1px),
    radial-gradient(ellipse 80% 140% at 82% 0%, var(--glow) 0%, transparent 60%),
    linear-gradient(135deg, var(--field-a) 0%, var(--field-b) 55%, var(--field-c) 100%);
  background-size: 14px 14px, 100% 100%, 100% 100%; }
.zn-head::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--sec) 0%, var(--sec) 34px, rgba(255,255,255,0.14) 34px); }
.zn-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.zn-head-text strong { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; color: #fff; }
/* Presence, then the disclaimer — in that order, because "is anyone there"
   is the question a visitor actually has when they open a chat. */
.zn-status { display: flex; flex-wrap: wrap; align-items: center; gap: 0 7px; margin-top: 3px; }
.zn-status b { font-size: 12.5px; font-weight: 600; color: var(--sec); font-style: normal; }
.zn-status em { flex: 1 0 100%; font-size: 11.5px; font-style: normal;
  color: rgba(255,255,255,0.52); margin-top: 2px; }
.zn-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sec); flex: none;
  box-shadow: 0 0 0 0 rgba(216,255,62,.55); animation: zn-pulse 2.4s ease-out infinite; }
@keyframes zn-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(216,255,62,.5); }
  70%  { box-shadow: 0 0 0 7px rgba(216,255,62,0); }
  100% { box-shadow: 0 0 0 0 rgba(216,255,62,0); }
}
/* The mark sits on the field now, so it needs its own edge to separate —
   a chartreuse hairline rather than a heavier tile. */
.zn-head-mark .zn-mark { box-shadow: inset 0 0 0 1.5px rgba(216,255,62,.55); }
.zn-close { width: 32px; height: 32px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.8);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; flex: none; align-self: flex-start;
  transition: transform .18s ease, background .15s ease, color .15s ease; }
.zn-close:hover { background: rgba(255,255,255,0.18); color: #fff; transform: rotate(90deg); }
.zn-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.zn-welcome h3 { margin: 4px 0 8px; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.zn-welcome p { margin: 0 0 14px; color: var(--sub); font-size: 14.5px; line-height: 1.5; }
.zn-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.zn-chip { border: 0; background: var(--sec-soft); color: var(--sec-ink); font: inherit;
  font-weight: 600; font-size: 14px; border-radius: 999px; padding: 9px 14px; cursor: pointer;
  transition: transform .18s ease, background .15s ease; }
.zn-chip:hover { background: var(--sec); transform: translateY(-1px); }
.zn-bubble { max-width: 88%; border-radius: 18px; padding: 10px 14px; font-size: 15px;
  line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; }
.zn-mine { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: 6px; }
.zn-theirs { align-self: flex-start; background: var(--white); border: 1px solid var(--line);
  border-bottom-left-radius: 6px; }
.zn-thinking { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13.5px; }
/* The thinking indicator IS the maker mark: four keys pressed in turn, left
   to right, each springing back before the next goes down. The stagger is one
   quarter of the cycle per key, so the wave reads as one hand moving rather
   than four things blinking. Colours come from .squares — never restated. */
/* 11px, not 9: the gradient runs corner to corner, so a smaller tile shows
   mostly its light end and reads paler than the same colour does in the
   footer mark. The values are identical — only the area differs. */
.zn-keys { --sq: 11px; gap: 4px; align-items: flex-end; }
.zn-keys i { transform-origin: 50% 100%; animation: zn-key 1.15s cubic-bezier(.3,.1,.3,1) infinite; }
.zn-keys i:nth-child(1) { animation-delay: 0s; }
.zn-keys i:nth-child(2) { animation-delay: .1s; }
.zn-keys i:nth-child(3) { animation-delay: .2s; }
.zn-keys i:nth-child(4) { animation-delay: .3s; }
/* Motion only — the squares stay at full strength throughout. Fading them
   between presses made the mark look washed out; a key that is not being
   played is still a key, not a dimmer one. */
@keyframes zn-key {
  0%, 55%, 100% { transform: translateY(0) scaleY(1); }
  18%           { transform: translateY(-5px) scaleY(1.18); }
  34%           { transform: translateY(1px) scaleY(.88); }
}
.zn-handoff { align-self: flex-start; font-weight: 700; font-size: 14px; color: var(--ink); margin-top: 4px; }
.zn-error { margin: 0; color: #c2352a; font-size: 13.5px; font-weight: 500; }
.zn-foot { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px 12px;
  background: var(--white); border-top: 1px solid var(--line); }
.zn-input { flex: 1; resize: none; min-height: 44px; max-height: 120px; border: 1px solid var(--line);
  border-radius: 22px; padding: 11px 16px; font: inherit; font-size: 15px; line-height: 1.4;
  color: var(--ink); background: var(--bg); outline: none; }
.zn-input:focus { border-color: var(--sec-deep); box-shadow: 0 0 0 3px rgba(216,255,62,.35); }
.zn-send { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--sec);
  color: var(--sec-ink); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; flex: none; transition: transform .18s ease, background .15s ease; }
.zn-send:hover { background: var(--sec-deep); transform: translateY(-1px); }
.zn-send:active { transform: scale(.94); }
/* The sticky claim bar and the chat pill both want the bottom-right corner;
   the bar wins there and the pill sits above it on a phone (handled in the
   phone block below, so the open panel can still go full-bleed).  */
/* ── Phone: the chat takes the whole screen ───────────────────────────────
   A floating card on a phone is the wrong shape for a conversation. It leaves
   the page visible and scrollable behind it, so a thumb aimed at the message
   list drags the site instead — that is the "shaky" feeling. Full-bleed and
   pinned, the way Intercom and every messaging app do it.

   ⚠ 100dvh, NOT 100vh. On mobile Safari and Chrome, 100vh is the tallest the
   viewport ever gets, so with the URL bar showing the composer sits BELOW the
   fold; and the bar hiding and showing as you scroll makes a vh-sized panel
   resize under your hands. dvh tracks the visible viewport, which is the
   other half of holding still. vh stays first as the fallback. */
@media (max-width: 760px) {
  .zn-root { right: 0; bottom: 0; left: 0; align-items: stretch; gap: 0; }
  .zn-root:not(.zn-open) { right: 12px; bottom: 84px; left: auto; align-items: flex-end; }
  .zn-open .zn-panel {
    position: fixed; inset: 0; width: 100%; max-width: none;
    height: 100vh; height: 100dvh; border-radius: 0;
    box-shadow: none; animation: zn-up .28s cubic-bezier(.2,.9,.3,1.1) both; }
  @keyframes zn-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  /* The header carries the close button, so the pill would only cover the
     conversation it opened. */
  .zn-open .zn-fab { display: none; }
  /* Safe areas: the notch above, the home indicator below. */
  .zn-open .zn-head { padding-top: calc(16px + env(safe-area-inset-top)); }
  .zn-open .zn-foot { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .zn-open .zn-body { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .zn-fab { font-size: 14px; padding: 10px 16px 10px 12px; }
}
/* The page itself must not scroll under the open chat — without this the
   list bounces the body once it hits its end. */
body.zn-locked { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .zn-fab, .zn-ready .zn-fab { opacity: 1; transform: none; }
  .zn-panel, .zn-chip, .zn-bubble { animation: none; }
  /* No travel, and no fade either — the keys rest at full colour and the
     "Zeaney is thinking…" wording carries the message on its own. */
  .zn-keys i { animation: none; }
}

/* ── App store badges ───────────────────────────────────────────────────── */
/* Apple's and Google's own artwork, inline so the page never waits on a
   third-party image. Both are fixed-proportion lockups: never restyle the
   glyphs or retype the wording, only the box they sit in. */
.stores { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.store-badge { display: inline-flex; border-radius: 9px; overflow: hidden; line-height: 0;
  transition: transform .18s ease, opacity .15s ease; }
.store-badge:hover { transform: translateY(-2px); }
.store-badge:focus-visible { outline: 3px solid var(--sec); outline-offset: 3px; }
/* Apple's SVG is the button edge to edge; Google's PNG wraps its button in
   padding worth a third of the image height (measured: 168px of button in a
   250px file). Matching the FILES on height makes Google's button look small,
   so the heights below are set to make the BUTTONS match at 46px, and the
   negative inline margin absorbs Google's side padding so the gap reads even.
   Do not "tidy" these to the same number. */
.store-badge img { display: block; width: auto; }
.badge-apple { height: 46px; }
.badge-google { height: 68px; }
.badge-google-link { margin-inline: -10px; }
.stores-sm .badge-apple { height: 38px; }
.stores-sm .badge-google { height: 56px; }
@media (max-width: 480px) {
  .badge-apple { height: 42px; }
  .badge-google { height: 62px; }
}

/* The "Get the app" block that closes the app section on Home. */
.app-get { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 18px 28px; margin-top: 26px; padding: 22px 26px; background: var(--white);
  border-radius: var(--radius); box-shadow: 0 1px 3px rgba(20,20,30,0.07); }
.app-get h3 { margin: 0 0 4px; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.app-get p { margin: 0; font-size: 14.5px; color: var(--sub); max-width: 46ch; }

/* Footer row — its own line above the copyright, ahead of the fine print. */
.foot-get { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
  padding: 20px 0 4px; }
.foot-get-label { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(255,255,255,0.55); }

/* ── The maker's signature ──────────────────────────────────────────────── */
/* The last line on every page. Set apart from the legal lines above it
   because it is a different kind of statement — who made this, and where.
   The heart takes the coral from the four squares rather than introducing a
   fifth colour. */
/* ⚠ The footer wrap is a flex container on at least one of these sites, so
   without a full basis the signature sizes to its own text and both it and
   its rule sit in a half-width column. */
.maker { display: flex; align-items: center; justify-content: center; gap: 6px;
  flex-wrap: wrap; width: 100%; flex: 1 0 100%; margin: 18px 0 0; padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 13px; color: rgba(255,255,255,0.5); text-align: center; }
.maker-heart { color: #ff6f6a; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Room for the fixed overlays ────────────────────────────────────────── */
/* The Ask Zeaney pill — and on phones the claim bar above it — are fixed over
   the bottom-right corner. The document therefore has to END above that whole
   stack, or the last line of the footer sits underneath them. Measured, not
   guessed: pill 54px + its 18px offset on wide screens; on phones the bar
   (70px) and the pill stacked above it (52px) plus their offsets. */
:root { --overlay-stack: 88px; }
/* ⚠ AFTER the base, not in the earlier media block: both are :root, so equal
   specificity and source order decides. Declared earlier it loses, and the
   signature ends up back under the pill. On phones the claim bar AND the pill
   stack above it, which is why this is nearly double. */
@media (max-width: 760px) { :root { --overlay-stack: 150px; } }
body { padding-bottom: var(--overlay-stack); }

/* ── Legal pages (privacy, terms) ──────────────────────────────────────────
   Long-form documents: a narrow measure, generous spacing, and section
   numbers that stay legible. The .nz/.au spans inside carry the market-
   specific clauses and are switched by the site-wide market toggle. */
.legal { max-width: 46rem; }
.legal > p { font-size: 16px; line-height: 1.72; color: var(--sub); margin: 0 0 18px; }
.legal-h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--ink); margin: 40px 0 14px; }
.legal-h2:first-child { margin-top: 0; }
.legal-h3 { font-size: 15px; font-weight: 700; color: var(--ink); margin: 26px 0 10px; }
.legal-list { margin: 0 0 18px; padding-left: 20px; }
.legal-list li { font-size: 16px; line-height: 1.72; color: var(--sub); margin: 0 0 8px; }

/* ── Blog ─────────────────────────────────────────────────────────────────
   Recovered from the old site, which stored posts as typed blocks rather
   than flat prose. The types are what give the posts their rhythm, so each
   keeps its own voice instead of collapsing into paragraphs. */
.post { max-width: 44rem; }
.post > p { font-size: 17px; line-height: 1.75; color: var(--sub); margin: 0 0 20px; }
.post-meta { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em;
  color: var(--muted); margin: 0 0 30px; }
.post-h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink);
  margin: 44px 0 16px; }
.post-h3 { font-size: 18px; font-weight: 700; color: var(--ink); margin: 32px 0 12px; }
.post-list { margin: 0 0 20px; padding-left: 22px; }
.post-list li { font-size: 17px; line-height: 1.7; color: var(--sub); margin: 0 0 8px; }

/* the beats */
.post-punch { font-size: 21px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--ink); line-height: 1.45; margin: 0 0 22px; }
.post-highlight { font-size: 18px; font-weight: 600; color: var(--ink); line-height: 1.6;
  border-left: 3px solid var(--sec-deep); padding-left: 16px; margin: 0 0 22px; }
.post-emphasis { font-size: 17px; font-style: italic; color: var(--ink); margin: 0 0 20px; }
.post-quote { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink);
  line-height: 1.5; margin: 30px 0; padding: 0 0 0 20px; border-left: 3px solid var(--brand); }
.post-story { background: var(--bg-deep); border-radius: 14px; padding: 20px 22px; margin: 0 0 24px; }
.post-story p:last-child { margin-bottom: 0; }

.post-note { border-radius: 14px; padding: 18px 20px; margin: 0 0 24px; }
.post-note p:last-child { margin-bottom: 0; }
.post-note p, .post-note li { font-size: 16px; line-height: 1.68; color: var(--sub); margin: 0 0 10px; }
.post-note-label { display: block; font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 8px; }
.post-key      { background: var(--sec-soft); }
.post-key      .post-note-label { color: var(--sec-ink); }
.post-founder  { background: var(--bg-deep); }
.post-founder  .post-note-label { color: var(--brand); }
.post-mistake  { background: #fff4f2; }
.post-mistake  .post-note-label { color: #b3402f; }
.post-final    { background: var(--brand); }
.post-final    .post-note-label { color: var(--sec); }
.post-final p, .post-final li { color: rgba(255,255,255,0.86); }

.post-nav { display: flex; flex-wrap: wrap; gap: 14px; margin: 44px 0 0;
  padding-top: 26px; border-top: 1px solid rgba(26,26,46,0.1); }
.post-nav-link { flex: 1 1 15rem; font-size: 15px; font-weight: 600; color: var(--ink);
  text-decoration: none; line-height: 1.4; }
.post-nav-link span { display: block; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0 0 5px; }
.post-nav-link:hover { color: var(--brand); }

.post-cta { margin: 44px 0 0; padding: 26px; border-radius: 16px; background: var(--brand);
  color: #fff; }
.post-cta h3 { font-size: 21px; font-weight: 800; letter-spacing: -0.025em; margin: 0 0 8px; color: #fff; }
.post-cta p { color: rgba(255,255,255,0.78); margin: 0 0 18px; font-size: 16px; }
.post-card-meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }