/* ══════════════════════════════════════════════════════════════════════════
   FotoLama — commercial site
   Tokens are lifted from web/src/styles.css so the marketing site and the
   product are visibly the same company. Editorial neutral canvas: the accent
   is an ACCENT (CTAs, marks, active states) and never a large surface.

   Deliberate omission: no WebGL, no 3D, no scroll-jacking. The product sells
   restraint about bytes; a 4 MB marketing site would contradict the pitch.
   Weight: two fonts, ~20 KB of text per page, and (home only) 20 hero thumbs
   off the Unsplash CDN at 180px square with `crop=faces`. Nothing else on any
   page is an image — the QR block is still DOM.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* The page is a warm off-white and the CARDS are white, rather than the other
     way round — the move that makes samaro.ai/fotoowl.ai read as soft rather
     than clinical. Everything of substance sits on a raised paper surface. */
  --bg: #FAF7F2;
  --bg-2: #E9F5F2;
  --paper: #FFFFFF;
  --ink: #1B1A18;

  /* The teal is the brand, but the muted version of it made the whole page read
     as dull. This one is the same hue, much more saturated, and still 5.19:1
     against white — so button labels and small accent text stay legible. Check
     that ratio before touching it. */
  --accent: #0D7A72;
  --accent-deep: #095E58;
  --accent-soft: #6FCFC1;
  --accent-wash: #D6F2EC;
  --head: #0B4F4A;       /* headings, the way theirs are deep blue */
  --hero-tint: #EAF4F3;  /* the pale band the hero sits on */

  /* A warm counterweight. Teal alone reads cold and clinical; the coral is what
     the reference sites get from their rose and amber. Decorative only — it is
     never used for small text. */
  --pop: #F2704E;
  --pop-soft: #FBD9CD;
  --sun: #F6B93B;

  --linen: #FCF1E4;      /* warm cream — the panel surface */
  --taupe: #8A8078;
  --clay: #5D544C;
  --night: #16120F;
  --line: #E8E1D9;
  --line-soft: #EFE9E2;
  --gold: #B08A52;
  --gold-soft: rgba(176, 138, 82, 0.16);

  --shadow-sm: 0 1px 2px rgba(44,35,29,.06), 0 4px 12px rgba(44,35,29,.04);
  --shadow-md: 0 4px 16px rgba(44,35,29,.08), 0 12px 32px rgba(44,35,29,.06);
  --shadow-lg: 0 18px 50px rgba(44,35,29,.20);

  --r-card: 14px;
  --r-panel: 0px;                      /* sections are full-bleed bands again */
  --r-tile: 12px;
  --r-btn: 8px;                        /* modest, like the reference — not pills */
  --ease: cubic-bezier(.22, 1, .36, 1);

  --s1: 6px; --s2: 10px; --s3: 16px; --s4: 24px; --s5: 40px; --s6: 64px;

  /* Display face: a heavy grotesque with tight tracking, not an editorial
     serif. This is the single biggest thing that separates the reference sites
     from where this page started. Body stays Inter. Two families, both
     requested as variable weight RANGES — see the note by the <link>. */
  --display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --nav-h: 68px;
}

/* ── reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
/* No `scroll-behavior: smooth` here on purpose. Globally smooth scrolling also
   animates the browser's ON-LOAD hash jump, which runs against a layout that is
   still settling (webfonts, reveal transforms) and lands in an arbitrary spot —
   a shared /#pricing link would drop the visitor into a blank band. Load-time
   jumps stay instant; main.js applies smooth scrolling to in-page CLICKS only. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
/* Heavy and tight. Bricolage Grotesque only earns its keep at 700 with roughly
   -0.04em tracking — set it at 500 with normal tracking and it just reads as a
   slightly odd Inter. The optical-size axis is pinned high so large headings get
   the tighter display cut. */
/* Friendly, not tight. The reference site sets its headings at 700 with NORMAL
   tracking and roomy leading — the squeezed display look is a different school
   and reads as colder. Don't put negative tracking back on these. */
h1, h2, h3 {
  font-family: var(--display); font-weight: 700;
  letter-spacing: -.005em; line-height: 1.22; margin: 0;
  color: var(--head);
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.sr, .skip:not(:focus) {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip:focus {
  position: fixed; top: 12px; left: 12px; z-index: 200;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r-btn);
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.wrap { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.wrap--narrow { width: min(760px, calc(100% - 48px)); }

/* ── buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: var(--r-btn);
  font-size: 15px; font-weight: 500; letter-spacing: -.01em;
  border: 1px solid transparent; white-space: nowrap;
  transition: background .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease), transform .22s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--lg { padding: 15px 28px; font-size: 16px; }
.btn--full { width: 100%; }
.btn--solid { background: var(--accent); color: #fff; }
.btn--solid:hover { background: var(--accent-deep); }
.btn--ghost { border-color: var(--line); background: var(--paper); color: var(--ink); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn--quiet { color: var(--clay); }
.btn--quiet:hover { color: var(--accent); }
.btn--quiet::after { content: '→'; transition: transform .22s var(--ease); }
.btn--quiet:hover::after { transform: translateX(3px); }
.btn--invert { background: var(--linen); color: var(--ink); }
.btn--invert:hover { background: #fff; }
.btn--outline { border-color: rgba(255,255,255,.28); color: #fff; }
.btn--outline:hover { border-color: #fff; background: rgba(255,255,255,.06); }

/* ── nav ───────────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(246,245,243,.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.nav.is-stuck { border-bottom-color: var(--line); box-shadow: 0 1px 20px rgba(44,35,29,.04); }
.nav__in { height: var(--nav-h); display: flex; align-items: center; gap: var(--s4); }

.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand__mark { width: 28px; height: 28px; color: var(--accent); flex: none; }
.brand__word { font-family: var(--display); font-size: 21px; font-weight: 600; letter-spacing: -.025em; }

.nav__links { display: flex; gap: var(--s4); margin-left: auto; font-size: 15px; color: var(--clay); }
.nav__links a { position: relative; padding: 4px 0; transition: color .2s var(--ease); }
.nav__links a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--accent); transition: right .28s var(--ease);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { right: 0; }

.nav__cta { display: flex; align-items: center; gap: var(--s2); margin-left: var(--s4); }
.nav__burger { display: none; width: 40px; height: 40px; margin-left: auto; position: relative; }
.nav__burger span {
  position: absolute; left: 10px; right: 10px; height: 1.5px; background: var(--ink);
  transition: transform .28s var(--ease), opacity .2s var(--ease);
}
.nav__burger span:first-child { top: 16px; }
.nav__burger span:last-child { top: 23px; }
.nav__burger[aria-expanded='true'] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav__burger[aria-expanded='true'] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* `display:flex` would beat the UA's `[hidden]{display:none}`, which leaked the
   mobile menu onto desktop. Scope the layout to the not-hidden state instead. */
.mnav { display: none; }
.mnav:not([hidden]) {
  display: flex; flex-direction: column; gap: var(--s3);
  padding: var(--s4) 24px var(--s5);
  border-top: 1px solid var(--line); background: var(--bg);
}
.mnav a { font-size: 17px; color: var(--clay); }

/* ── shared section furniture ──────────────────────────────────────────── */
.sec { padding: clamp(72px, 11vw, 132px) 0; }
/* Tinted sections are INSET ROUNDED PANELS floating on the page, not full-bleed
   bands. That single change is most of what makes the reference sites feel soft:
   the page reads as a stack of cards rather than as stripes. */
.sec__head { max-width: 720px; margin-bottom: var(--s6); }
.sec__head h2 { font-size: clamp(32px, 4.6vw, 50px); margin-bottom: var(--s3); }
/* for-photographers still uses this block. The `em` rule used to be grouped
   with a `.sec--dark` selector and went out with it — this is the light-band
   version, and it is the teal phrase in "a proprietary photo compression and
   delivery engine". */
.sec__lede em { font-style: normal; color: var(--accent); font-weight: 600; }
.sec__lede { color: var(--clay); font-size: clamp(17px, 1.6vw, 19px); max-width: 62ch; }

/* A pill badge, not a rule-and-label. Both reference sites open with one and it
   does a real job: it names the category before the headline makes its claim. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px 6px 11px; margin-bottom: var(--s4);
  border: 1px solid transparent; border-radius: 999px;
  background: var(--accent-wash);
  font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-deep); line-height: 1.35;
}
.eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--accent);
}
.eyebrow--gold { color: #7A5A22; background: rgba(246,185,59,.24); }
.eyebrow--gold::before { background: var(--sun); }
/* The centred variants used to need a matching ::before rule to balance the
   trailing rule; a pill is symmetrical, so centring is just the parent's job. */
.eyebrow--mid::before { content: ''; }

/* ── hero ──────────────────────────────────────────────────────────────── */
/* The colour wash lives on the section's own background, not on a `z-index: -1`
   pseudo-element: backgrounds always paint behind content, whereas a negative-z
   pseudo silently disappears the moment any ancestor makes a stacking context.
   Three overlapping ellipses — teal, sun, coral — so the top of the page has
   some life in it instead of reading as flat cream. */
.hero {
  padding: clamp(56px, 8vw, 96px) 0 clamp(48px, 6vw, 80px);
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 52% 60% at 26% 26%, rgba(111,207,193,.52), transparent 64%),
    radial-gradient(ellipse 44% 52% at 76% 18%, rgba(246,185,59,.40), transparent 64%),
    radial-gradient(ellipse 46% 50% at 54% 58%, rgba(242,112,78,.22), transparent 66%);
  /* Confined to the top band. Left to fill the section it also washed over the
     audience cards further down, which need to read as white paper. */
  background-repeat: no-repeat;
  background-size: 100% 640px;
  background-position: center top;
}
.hero__in { display: block; text-align: center; }
.hero__copy { max-width: 900px; margin-inline: auto; }
.hero h1 { font-size: clamp(40px, 6.4vw, 76px); margin-bottom: var(--s4); }
/* Two-tone headline: the claim in ink, the promise in the accent. Not italic —
   a heavy grotesque italic reads as emphasis-by-slant, which is a serif idea. */
.hero h1 em { font-style: normal; color: var(--accent); }
.lede { font-size: clamp(17px, 1.8vw, 20px); color: var(--clay); max-width: 52ch; margin-bottom: var(--s5); }
.hero__copy .lede { margin-inline: auto; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; justify-content: center; }
.hero__note { margin-top: var(--s4); font-size: 13.5px; color: var(--taupe); }

/* ── the rotating occasion word ────────────────────────────────────────── */
/* Fades and lifts rather than sliding a whole line: the word sits inside an h1
   at 76px, and a slide at that size drags the eye off the sentence. */
/* `min-width` is set by main.js to the widest word so the line can't jump.
   That makes the element a box wider than most words, so it needs its own
   text-align — without it, "trips" hangs off to the left of a 540px box while
   "corporate events" fills it, and the headline looks broken. */
.rotator {
  display: inline-block; text-align: center; font-style: normal; color: var(--accent);
  transition: opacity .11s var(--ease), transform .11s var(--ease);
}
.rotator.is-out { opacity: 0; transform: translateY(-.14em); }

/* ── who it's for ──────────────────────────────────────────────────────── */
/* Four roles, four faces, four destinations — the block that answers "is this
   me?" before a visitor reads a word of body copy. Arch-topped portraits on a
   tinted ground, which is the shape the reference sites use for exactly this. */
.who__title {
  font-size: clamp(24px, 2.6vw, 30px); text-align: center;
  margin: clamp(48px, 6vw, 76px) 0 var(--s5);
}
.who { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }
.who__card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-card); overflow: hidden;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease),
              transform .25s var(--ease);
}
.who__card:hover { border-color: var(--accent-soft); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.who__card > a { display: block; height: 100%; padding: var(--s4) var(--s4) var(--s5); text-align: center; }

/* The arch. `--tint` is set per card in the markup so each role reads as its
   own colour without four extra classes. */
/* The tint has to be VISIBLE, and a photograph that fills the arch hides it —
   the reference sites get away with a solid ground because their portraits are
   cut-outs, which stock photography isn't. So the colour becomes a frame: the
   photo is inset inside the tinted arch and the ring shows all the way round. */
.who__art {
  display: block; width: 100%; max-width: 176px; margin: 0 auto var(--s3);
  aspect-ratio: 3 / 4; background: var(--tint, var(--bg-2));
  border-radius: 999px 999px 18px 18px; padding: 9px 9px 0;
}
.who__art img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  border-radius: 999px 999px 4px 4px;
}
.who__label {
  display: inline-block; margin-bottom: 8px; padding: 5px 14px;
  border-radius: 999px; background: var(--tint, var(--bg-2));
  font-family: var(--display); font-size: 15px; font-weight: 600;
  letter-spacing: -.02em; color: #14201E;
}
.who__line { display: block; font-size: 14px; color: var(--clay); line-height: 1.5; }

@media (max-width: 900px) { .who { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .who { grid-template-columns: 1fr; } .who__art { max-width: 140px; } }

/* phone mock — the face-match demo.
   The demo itself is untouched; only the stage it stands on changed. It sits in
   a warm rounded panel now instead of floating in the right-hand column. */
/* The stage is deliberately narrower than the text column. A 360px phone
   centred in a 1180px panel reads as a mistake; at ~700px it reads as a frame. */
.hero__demo {
  position: relative; display: flex; justify-content: center;
  max-width: 700px; margin: clamp(40px, 6vw, 72px) auto 0;
  padding: clamp(24px, 4vw, 48px) var(--s4);
  background: var(--linen); border-radius: var(--r-panel);
}
.phone { width: min(400px, 100%); }
.hero__stage-note {
  position: absolute; left: 50%; bottom: clamp(12px, 2vw, 20px); transform: translateX(-50%);
  font-size: 12px; color: var(--taupe); text-align: center; width: 90%;
}
.phone__glow {
  position: absolute; inset: 12% 6%; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(31,95,99,.13), transparent 70%);
  filter: blur(30px);
}
.phone {
  width: min(360px, 100%); background: var(--paper);
  border: 1px solid var(--line); border-radius: 30px;
  box-shadow: var(--shadow-md); padding: 14px; overflow: hidden;
}
.phone__bar { display: flex; align-items: center; gap: 8px; padding: 4px 6px 12px; }
.phone__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-soft); flex: none; }
.phone__label { font-size: 12.5px; color: var(--taupe); }
.phone__match {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-2); border-radius: var(--r-tile);
  padding: 10px 12px; margin-bottom: 12px; font-size: 13.5px;
}
.phone__id { min-width: 0; }
.phone__match strong { display: block; font-weight: 600; font-size: 14px; }
.phone__sub { color: var(--taupe); font-size: 12px; }
/* The avatar carries a background-image set by main.js — a tight face crop of a
   photograph that is also in the matched set, so the chip and the first matched
   tile are the same person. Before the selfie beat it is an empty outline. */
.phone__avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: var(--bg-2) center / cover no-repeat;
  border: 1px dashed var(--accent-soft);
  box-shadow: 0 0 0 2px #fff;
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease);
}
[data-state='matched'] .phone__avatar {
  border: 0; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--accent);
}
.phone__count {
  margin-left: auto; font-weight: 600; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
/* The caption is what makes the demo legible without motion: it names the beat
   in words. Screen readers get the same claim from the role="img" label. */
.phone__stage {
  margin-top: 12px; padding: 0 4px; min-height: 2.6em;
  font-size: 12px; line-height: 1.35; color: var(--taupe);
}
[data-state='matched'] .phone__stage { color: var(--accent); font-weight: 500; }

.grid-demo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; position: relative; }
/* Tiles hold a real, face-cropped photograph over a gradient fallback. Three
   beats, driven by classes from main.js:
     (default)     the whole album, full colour
     .is-scanning  a teal sweep passes down and a face bracket lands on each tile
     .is-filtered  everything dims and shrinks back EXCEPT .is-match
   The third beat is the demo: an album resolving down to one guest.

   --tb is a per-tile brightness set by main.js. It lives in a custom property
   rather than an inline `filter` because an inline filter would out-specify
   `.is-match` below and keep the matched tiles grey — which is what it did the
   first time this was built. */
.grid-demo .tile {
  aspect-ratio: 1; border-radius: 8px; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #DBD4CA, var(--line-soft));
  transition: box-shadow .5s var(--ease), transform .5s var(--ease), opacity .5s var(--ease);
}
.grid-demo .tile img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: brightness(var(--tb, 1));
  transition: opacity .55s var(--ease), filter .55s var(--ease);
}

/* beat 2 — reading faces */
.grid-demo .tile__face {
  position: absolute; inset: 24% 22%; border-radius: 3px;
  border: 1.5px solid var(--accent-soft);
  box-shadow: 0 0 0 1px rgba(255,255,255,.5) inset;
  opacity: 0; transform: scale(1.5);
  transition: opacity .28s var(--ease), transform .28s var(--ease);
}
.grid-demo.is-scanning .tile__face { opacity: 1; transform: scale(1); }
/* Stagger by column then row so the brackets appear to follow the sweep. */
.grid-demo.is-scanning .tile:nth-child(4n+1) .tile__face { transition-delay: 0ms }
.grid-demo.is-scanning .tile:nth-child(4n+2) .tile__face { transition-delay: 60ms }
.grid-demo.is-scanning .tile:nth-child(4n+3) .tile__face { transition-delay: 120ms }
.grid-demo.is-scanning .tile:nth-child(4n)   .tile__face { transition-delay: 180ms }
.grid-demo.is-scanning .tile:nth-child(n+5)  .tile__face { transition-delay: 240ms }
.grid-demo.is-scanning .tile:nth-child(n+9)  .tile__face { transition-delay: 420ms }
.grid-demo.is-scanning .tile:nth-child(n+13) .tile__face { transition-delay: 600ms }
.grid-demo.is-scanning .tile:nth-child(n+17) .tile__face { transition-delay: 780ms }

.grid-demo::after {
  content: ''; position: absolute; left: -2%; right: -2%; height: 32px;
  top: 0; border-radius: 50%; pointer-events: none; opacity: 0; z-index: 2;
  background: linear-gradient(to bottom, transparent, rgba(31,95,99,.22), transparent);
  box-shadow: 0 0 22px 6px rgba(158,198,196,.35);
}
.grid-demo.is-scanning::after { animation: sweep 1.9s var(--ease) 1; }
@keyframes sweep {
  0%   { opacity: 0; transform: translateY(-24px); }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(calc(100% + 24px)); }
}

/* beat 3 — one guest's set */
.grid-demo.is-filtered .tile { opacity: .28; transform: scale(.9); }
.grid-demo.is-filtered .tile img { filter: saturate(.18) brightness(calc(var(--tb, 1) * 1.06)); }
.grid-demo.is-filtered .tile.is-match { opacity: 1; transform: scale(1.03); z-index: 1; }
.grid-demo.is-filtered .tile.is-match img { filter: saturate(1.04) brightness(1); }
.grid-demo.is-filtered .tile.is-match {
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--accent);
}
/* A tick on each match, so the state reads as "kept", not merely "brighter". */
.grid-demo.is-filtered .tile.is-match::after {
  content: ''; position: absolute; right: 4px; bottom: 4px; width: 13px; height: 13px;
  border-radius: 50%; background: var(--accent) 50% 50% / 8px 8px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4L4.6 9 10 3.2' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  box-shadow: 0 0 0 1.5px var(--paper);
}
.grid-demo.is-filtered .tile__face { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .grid-demo::after, .grid-demo .tile, .grid-demo .tile img { animation: none; transition: none; }
}

/* claim band */
/* Bordered paper tiles rather than four columns under a rule — the same shape
   the reference sites use for their stat row, and it survives the switch to a
   warm page background, where a hairline rule all but disappears. */
.band {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3);
  margin-top: clamp(48px, 6vw, 84px);
}
.band li {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--s4); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-card);
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.band li:hover { border-color: var(--accent-soft); transform: translateY(-2px); }
/* One colour per tile so the row reads as a set rather than four grey boxes.
   Decorative only — the text under each stays --taupe at full contrast. */
.band li:nth-child(1) b { color: var(--accent); }
.band li:nth-child(2) b { color: #C2571F; }
.band li:nth-child(3) b { color: #1F6FA8; }
.band li:nth-child(4) b { color: #8A6A12; }
.band li::before {
  content: ''; display: block; width: 34px; height: 4px; border-radius: 999px;
  margin-bottom: var(--s3); background: currentColor; opacity: .9;
}
.band li:nth-child(1)::before { background: var(--accent); }
.band li:nth-child(2)::before { background: var(--pop); }
.band li:nth-child(3)::before { background: #9FCFE8; }
.band li:nth-child(4)::before { background: var(--sun); }
.band b { font-family: var(--display); font-size: clamp(24px, 2.8vw, 32px); font-weight: 700; letter-spacing: -.03em; color: var(--accent); }
.band span { font-size: 13.5px; color: var(--taupe); line-height: 1.45; }

/* ── occasion switcher + lived timeline ────────────────────────────────── */
/* Every panel is in the HTML, not built by JS, so the copy is indexable and a
   JS-disabled visitor gets all five stories (long, but readable) instead of an
   empty section. Hiding is scoped to .js — same reasoning as .reveal. */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s6); }
.chip {
  padding: 10px 18px; border-radius: 999px; font-size: 14.5px; font-weight: 500;
  border: 1px solid var(--line); background: var(--paper); color: var(--clay);
  transition: border-color .24s var(--ease), color .24s var(--ease),
              background .24s var(--ease), transform .24s var(--ease);
}
.chip:hover { border-color: var(--accent-soft); color: var(--ink); transform: translateY(-1px); }
.chip.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }

.story__title {
  font-size: clamp(24px, 3vw, 32px); margin-bottom: var(--s5);
  padding-bottom: var(--s3); border-bottom: 1px solid var(--line);
}
.js .story[hidden] { display: none; }

/* The spine: a hairline with a gold node per beat. Reads as a day passing. */
.beats { display: grid; gap: 0; position: relative; }
.beat {
  position: relative; padding: 0 0 var(--s5) clamp(28px, 4vw, 44px);
  border-left: 1px solid var(--line);
}
.beat:last-child { border-left-color: transparent; padding-bottom: 0; }
.beat::before {
  content: ''; position: absolute; left: -4.5px; top: 7px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 4px var(--bg);
}
.beat__when {
  display: block; font-family: var(--display); font-size: clamp(18px, 2.1vw, 22px);
  font-weight: 500; letter-spacing: -.02em; margin-bottom: 6px; color: var(--ink);
}
.beat__what { color: var(--clay); font-size: 16.5px; max-width: 62ch; }

/* ── tiers (dark) ──────────────────────────────────────────────────────── */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
/* These were written for a DARK band — white-at-3% fills, white-at-13% borders,
   body text at rgba(244,239,234,.66). When the section became a light one the
   card vanished and the text went to near-white on cream: the copy read as
   floating, indented and half-erased. Same shape as .k-feat now, so a card is a
   card wherever it sits. */
.tier {
  padding: var(--s5) var(--s4); border-radius: var(--r-card);
  border: 1px solid var(--line); background: var(--paper);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.tier:hover { border-color: var(--accent-soft); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.tier__k {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); font-weight: 700; margin-bottom: var(--s3);
}
.tier h3 { font-size: clamp(20px, 2.2vw, 25px); margin-bottom: 6px; }
.tier__size { font-size: 13.5px; color: var(--accent); margin-bottom: var(--s3); font-variant-numeric: tabular-nums; }
.tier p:last-child { color: var(--clay); font-size: 15.5px; }
.tier--hero { border-color: rgba(176,138,82,.5); background: rgba(246,185,59,.10); }
.tier--hero .tier__k, .tier--hero .tier__size { color: #8A6100; }
.engine__foot {
  margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--line);
  color: var(--clay); font-size: 16px; max-width: 76ch;
}

/* ── cards ─────────────────────────────────────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); }
.card {
  padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--paper);
  transition: border-color .28s var(--ease), box-shadow .28s var(--ease), transform .28s var(--ease);
}
.card:hover { border-color: var(--accent-soft); box-shadow: var(--shadow-sm); transform: translateY(-3px); }
.card h3 { font-size: 20px; margin-bottom: var(--s2); }
.card p { color: var(--clay); font-size: 15px; }

/* ── split (guests) ────────────────────────────────────────────────────── */
.split { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.split h2 { font-size: clamp(32px, 4.4vw, 46px); margin-bottom: var(--s5); }
.ticks { display: grid; gap: var(--s3); margin-bottom: var(--s5); }
.ticks li { position: relative; padding-left: 30px; color: var(--clay); font-size: 16px; }
.ticks b { color: var(--ink); font-weight: 600; }
.ticks li::before {
  content: ''; position: absolute; left: 0; top: 8px; width: 15px; height: 8px;
  border-left: 1.8px solid var(--accent); border-bottom: 1.8px solid var(--accent);
  transform: rotate(-45deg);
}

.qr {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: var(--s5) var(--s4); text-align: center; box-shadow: var(--shadow-md);
  max-width: 320px; margin-inline: auto;
}
.qr__code {
  width: 172px; height: 172px; margin: 0 auto var(--s4);
  display: grid; grid-template-columns: repeat(11, 1fr); gap: 2px;
}
.qr__code i { border-radius: 1.5px; background: var(--ink); }
.qr__code i.off { background: transparent; }
.qr__title { font-family: var(--display); font-size: 22px; margin-bottom: 2px; }
.qr__sub { font-size: 14px; color: var(--taupe); margin-bottom: var(--s4); }
.qr__brand { font-size: 10px; letter-spacing: .18em; color: var(--accent); font-weight: 600; }

/* ── pricing ───────────────────────────────────────────────────────────── */
/* `flex` + `width: fit-content` rather than `inline-flex`, so `margin-inline:
   auto` can centre it under the audience tabs. Left-aligned it read as a stray
   control rather than the second half of one decision. */
.toggle {
  display: flex; width: fit-content; margin-inline: auto;
  gap: 4px; padding: 4px; margin-bottom: var(--s5);
  background: var(--paper); border: 1px solid var(--line); border-radius: 999px;
}
.toggle__b {
  padding: 9px 20px; border-radius: 999px; font-size: 14.5px; color: var(--clay);
  display: inline-flex; align-items: center; gap: 8px;
  transition: background .24s var(--ease), color .24s var(--ease);
}
.toggle__b.is-on { background: var(--accent); color: #fff; }
.toggle__save {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: var(--gold-soft); color: var(--gold); font-weight: 600;
}
.toggle__b.is-on .toggle__save { background: rgba(255,255,255,.2); color: #fff; }

.plans { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s3); align-items: stretch; }
/* The flag row is reserved on EVERY card (padding-top) and the badge itself is
   positioned into it. Laying the flag out in flow instead pushed the featured
   card's price ~30px below its siblings — a row of prices that doesn't line up
   is the one thing a pricing table can't get away with. */
.plan {
  position: relative;
  display: flex; flex-direction: column; gap: var(--s2);
  padding: calc(var(--s4) + 20px) var(--s3) var(--s4); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-card);
  transition: border-color .28s var(--ease), box-shadow .28s var(--ease), transform .28s var(--ease);
}
.plan:hover { border-color: var(--accent-soft); box-shadow: var(--shadow-sm); transform: translateY(-3px); }
.plan--featured { border-color: var(--accent); box-shadow: var(--shadow-md); }
.plan__flag {
  position: absolute; top: var(--s4); left: var(--s3); right: var(--s3);
  font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--accent);
}
.plan h3 { font-size: 23px; }
/* Reserve THREE lines: the longest tagline (Pro) wraps to three, and anything
   less left its price sitting below the other four. Prices must share a
   baseline across the row or the table reads as broken. */
.plan__tag { font-size: 13px; color: var(--taupe); line-height: 1.45; min-height: 4.35em; }
.plan__price { display: flex; align-items: baseline; gap: 2px; margin-top: var(--s2); }
.plan__cur { font-size: 18px; color: var(--clay); }
.plan__price b {
  font-family: var(--display); font-size: 34px; font-weight: 500; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.plan__per { font-size: 13px; color: var(--taupe); margin-left: 3px; }
.plan__cap { font-size: 13px; color: var(--accent); font-weight: 500; padding-bottom: var(--s2); border-bottom: 1px solid var(--line-soft); }
.plan ul { display: grid; gap: 7px; font-size: 14px; color: var(--clay); margin-bottom: auto; padding-top: var(--s1); }
.plan li { position: relative; padding-left: 18px; }
.plan li::before { content: '·'; position: absolute; left: 5px; color: var(--accent); font-weight: 700; }
.plan .btn { margin-top: var(--s4); }

/* ── faq ───────────────────────────────────────────────────────────────── */
.faq { display: grid; gap: 0; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: var(--s4) 40px var(--s4) 0;
  font-family: var(--display); font-size: clamp(18px, 2vw, 21px); position: relative;
  transition: color .2s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq summary::after {
  content: ''; position: absolute; right: 6px; top: 50%; width: 11px; height: 11px;
  border-right: 1.6px solid var(--accent); border-bottom: 1.6px solid var(--accent);
  transform: translateY(-70%) rotate(45deg); transition: transform .3s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { padding: 0 40px var(--s4) 0; color: var(--clay); font-size: 16px; max-width: 68ch; }

/* ── cta ───────────────────────────────────────────────────────────────── */
/* The closing CTA is a panel too, so the page ends on a card rather than a
   full-bleed slab that runs into the footer. */

/* ── footer ────────────────────────────────────────────────────────────── */
.foot { background: var(--bg); padding: clamp(56px, 7vw, 88px) 0 var(--s5); border-top: 1px solid var(--line); }
.foot__in { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s5); }
.foot__brand p { color: var(--taupe); font-size: 14.5px; margin-top: var(--s3); }
.foot__col { display: flex; flex-direction: column; gap: var(--s2); }
.foot__col h2 { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin-bottom: 4px; }
.foot__col a { font-size: 14.5px; color: var(--taupe); transition: color .2s var(--ease); }
.foot__col a:hover { color: var(--accent); }
.foot__bar {
  display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap;
  margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--line);
  font-size: 13px; color: var(--taupe);
}

/* ── reveal-on-scroll ──────────────────────────────────────────────────── */
/* Scoped to .js on purpose. Without it, a JS-disabled browser (or a JS error
   before initReveal runs) would render the entire page at opacity 0 — the
   classic reveal-animation own-goal. The `js` class is set by an inline script
   in <head>, so there is no flash of unrevealed content. */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ── sub-page header ───────────────────────────────────────────────────── */
/* Every page except the home page opens with this instead of the hero: one h1,
   one lede, and a breadcrumb that matches the BreadcrumbList in the page's
   JSON-LD. Kept deliberately short — the point of splitting the site up was to
   stop stacking prose. */
.page { padding: clamp(48px, 7vw, 84px) 0 clamp(28px, 4vw, 44px); }
.page h1 { font-size: clamp(38px, 5.6vw, 66px); margin-bottom: var(--s4); }
/* Same two-tone rule as the hero — a heavy grotesque italic reads as slant,
   which is a serif idea, not this one. */
.page h1 em { font-style: normal; color: var(--accent); }
.page--mid { text-align: center; }
.page--mid .crumb { justify-content: center; }
.page--mid .lede--mid { margin-inline: auto; }
/* An inline-flex pill centres by its parent's text-align, not its own
   justify-content — the old rule here was written for the rule-and-label. */
.page--mid, .sec__head--mid { text-align: center; }
.sec__head--mid { margin-inline: auto; text-align: center; }
.sec__lede--mid { margin-inline: auto; }

.crumb { display: flex; gap: 8px; font-size: 13px; color: var(--taupe); margin-bottom: var(--s4); }
.crumb a { color: var(--clay); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
.crumb a:hover { color: var(--accent); }

.sec--top0 { padding-top: 0; }
.sec__more { margin-top: var(--s5); }
.sec__head--mid .sec__more { margin-top: var(--s5); }

/* The nav link for the page you are on. Set by main.js from the pathname, so
   the nav markup can stay byte-identical across all six pages. */
.nav__links a[aria-current='page'] { color: var(--ink); font-weight: 500; }
.nav__links a[aria-current='page']::after { right: 0; }
.mnav a[aria-current='page'] { color: var(--ink); }

/* ── numbered steps ────────────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); counter-reset: step; }
.steps--4 { grid-template-columns: repeat(4, 1fr); }
.step {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: var(--s4);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.step:hover { border-color: var(--accent-soft); box-shadow: var(--shadow-sm); transform: translateY(-3px); }
.step__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; margin-bottom: var(--s3);
  background: var(--accent); color: #fff; font-size: 14px; font-weight: 600;
  font-family: var(--sans);
}
.step:nth-child(2) .step__n { background: var(--pop); }
.step:nth-child(3) .step__n { background: #1F6FA8; }
.step:nth-child(4) .step__n { background: #B98407; }
.step h2, .step h3 { font-size: 21px; margin-bottom: var(--s2); }
.step p { color: var(--clay); font-size: 15px; }

/* ── pricing audience tabs ─────────────────────────────────────────────── */
/* Two questions in a row, in order of consequence: WHO are you (Personal /
   Professional), then HOW do you pay (annual / monthly). The audience tabs are
   deliberately bigger and squarer than the billing pill below them so the two
   switchers can't be mistaken for one control. */
.tabs {
  display: flex; justify-content: center; gap: var(--s2);
  margin-bottom: var(--s3); flex-wrap: wrap;
}
.tab {
  display: flex; flex-direction: column; gap: 3px; align-items: center;
  min-width: 210px; padding: 13px 26px;
  border: 1px solid var(--line); border-radius: var(--r-btn);
  background: var(--paper); color: var(--clay);
  font-family: var(--display); font-size: 19px; font-weight: 500; letter-spacing: -.01em;
  transition: border-color .22s var(--ease), color .22s var(--ease),
              box-shadow .22s var(--ease), transform .22s var(--ease);
}
.tab:hover { border-color: var(--accent-soft); color: var(--ink); transform: translateY(-1px); }
.tab.is-on {
  border-color: var(--accent); color: var(--accent);
  box-shadow: var(--shadow-sm), inset 0 -2px 0 var(--accent);
}
.tab__sub {
  font-family: var(--sans); font-size: 12px; font-weight: 400;
  letter-spacing: 0; color: var(--taupe);
}
.tab.is-on .tab__sub { color: var(--clay); }

/* Two or three cards instead of five, so they get room rather than stretching
   across the full grid. The plans grid keeps its five-column rule for the
   no-JS case, where every plan is shown. */
.js .plans[data-audience='personal'] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 660px; margin-inline: auto;
}
.js .plans[data-audience='professional'] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 940px; margin-inline: auto;
}
/* Scoped to .js for the same reason as .story[hidden]: without JS every plan
   must stay visible, and a bare `display: none` here would hide three of five
   from a crawler that doesn't run scripts. */
.js .plan[hidden] { display: none; }

/* ── pay-as-you-go top-up ──────────────────────────────────────────────── */
/* Sits under the five plans, not among them: it is an add-on to a plan, and
   putting it in the row would read as a sixth tier. */
.topup {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s5);
  align-items: center; margin-top: var(--s5);
  padding: var(--s5); border-radius: var(--r-card);
  background: var(--linen); border: 1px solid var(--line);
}
.topup h2 { font-size: clamp(24px, 2.6vw, 32px); margin-bottom: var(--s3); }
.topup p { color: var(--clay); font-size: 15.5px; max-width: 56ch; }
.topup b { color: var(--ink); font-weight: 600; }
.topup__price {
  text-align: center; padding: var(--s4) var(--s5);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-tile);
  box-shadow: var(--shadow-sm);
}
.topup__amt {
  font-family: var(--display); font-size: 46px; font-weight: 500; color: var(--accent);
  line-height: 1; margin-bottom: 6px;
}
.topup__amt .plan__cur { font-size: 24px; }
.topup__unit { font-size: 14px; font-weight: 500; color: var(--ink) !important; }
.topup__note { font-size: 12px; color: var(--taupe) !important; margin-top: 6px; max-width: 22ch; }

.cards--4 { grid-template-columns: repeat(4, 1fr); }
.card h2 { font-size: 20px; margin-bottom: var(--s2); }
.ticks a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .cards, .cards--4 { grid-template-columns: repeat(2, 1fr); }
  .plans { grid-template-columns: repeat(3, 1fr); }
  .steps--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .js .plans[data-audience='personal'],
  .js .plans[data-audience='professional'] { grid-template-columns: 1fr; max-width: 420px; }
  .tab { min-width: 0; flex: 1 1 160px; }
}
@media (max-width: 900px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: block; }
  .hero__in { grid-template-columns: 1fr; }
  .hero__demo { order: -1; max-width: 340px; margin-inline: auto; }
  .tiers { grid-template-columns: 1fr; gap: var(--s5); }
  .steps, .steps--4 { grid-template-columns: 1fr; gap: var(--s3); }
  .split { grid-template-columns: 1fr; }
  .band { grid-template-columns: repeat(2, 1fr); gap: var(--s4) var(--s3); }
  .foot__in { grid-template-columns: 1fr 1fr; gap: var(--s5) var(--s4); }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .wrap, .wrap--narrow { width: calc(100% - 32px); }
  .cards, .cards--4, .plans { grid-template-columns: 1fr; }
  .plan__tag { min-height: 0; }
  .topup { grid-template-columns: 1fr; gap: var(--s4); padding: var(--s4); text-align: center; }
  .topup p, .topup__note { margin-inline: auto; }
  .chips { gap: 8px; }
  .chip { font-size: 14px; padding: 8px 14px; }
}

/* Respect the OS. The product's first rule is Seamless — for some people that
   means no motion at all. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Landing layer — the market leader's page shape
   ══════════════════════════════════════════════════════════════════════════
   Mapped from the live competitor site on 2026-07-27 and rebuilt with our own
   copy, colours and photography. What is taken is the ARCHITECTURE: hero with
   copy left and a device on colour blobs right, then use-cases → three steps →
   a professionals split → four feature cards → "everywhere" → closing CTA,
   every section introduced by a small centred uppercase eyebrow above a large
   centred heading.

   Two things that look like details and are actually the whole style:
     · headings are 700 with NORMAL tracking and roomy leading, not the tight
       squeezed display setting — that is a different school and reads colder;
     · sections are full-bleed bands alternating white / pale tint, not inset
       rounded panels. Radii are modest (8-14px), not pills.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── hero ──────────────────────────────────────────────────────────────── */
.k-hero {
  background: var(--hero-tint);
  padding: clamp(48px, 7vw, 92px) 0 clamp(56px, 8vw, 104px);
  overflow: hidden;
}
.k-hero__in {
  display: grid; grid-template-columns: 1.02fr .98fr;
  gap: clamp(32px, 5vw, 64px); align-items: center;
}
.k-hero h1 {
  font-size: clamp(34px, 4.6vw, 54px); font-weight: 800;
  line-height: 1.18; color: var(--head);
}
.k-hero h1 em { font-style: normal; color: var(--accent); }
/* The short accent rule under the headline, straight from the reference. */
.k-rule {
  display: block; width: 78px; height: 4px; border-radius: 2px;
  background: var(--sun); margin: var(--s4) 0 var(--s4);
}
.k-lede { font-size: clamp(16px, 1.5vw, 18px); color: var(--clay); max-width: 46ch; }
.k-hero__actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.k-hero__note { margin-top: var(--s4); font-size: 13px; color: var(--taupe); }

/* Device on colour blobs. The blobs are pure CSS — the reference ships them as
   images, which is exactly the sort of weight this site refuses to carry. */
.k-hero__art { position: relative; display: flex; justify-content: center; }
.k-hero__art .phone { position: relative; z-index: 1; width: min(360px, 100%); }
.k-blob { position: absolute; border-radius: 50%; pointer-events: none; }
.k-blob--1 { width: 300px; height: 300px; background: var(--sun); opacity: .85; left: -6%; bottom: 4%; }
.k-blob--2 { width: 190px; height: 190px; background: var(--sun); opacity: .55; right: -2%; top: 6%; }
.k-blob--3 { width: 74px;  height: 74px;  background: var(--accent-soft); left: 2%; top: 26%; }
.k-blob--4 { width: 240px; height: 240px; background: var(--accent-soft); opacity: .45; right: 4%; bottom: -6%; }

/* NOTE: the `.sec--dark` / `.cta` rules that used to live here are gone. Every
   section is a light band now, and those rules set near-white text and 3%-white
   fills — reusing either class would have silently painted invisible copy on
   cream, which is exactly what happened to `.tier` before it was restyled.

/* ── section shell ─────────────────────────────────────────────────────── */
.k-sec { padding: clamp(56px, 8vw, 104px) 0; background: var(--paper); }
.k-sec--tint { background: var(--bg); }
.k-eyebrow {
  text-align: center; text-transform: uppercase; letter-spacing: .14em;
  font-size: 12px; font-weight: 700; color: var(--accent); margin-bottom: var(--s2);
}
.k-eyebrow--left { text-align: left; }
.k-title {
  text-align: center; font-size: clamp(26px, 3.4vw, 40px); font-weight: 700;
  max-width: 22ch; margin: 0 auto var(--s3);
}
.k-title--left { text-align: left; margin-inline: 0; max-width: 18ch; }
.k-sub {
  text-align: center; color: var(--clay); font-size: 17px;
  max-width: 60ch; margin: 0 auto var(--s6);
}
.k-sub--left { text-align: left; margin-inline: 0; margin-bottom: var(--s4); }
.k-more { text-align: center; margin-top: var(--s5); }
.k-split .k-more { text-align: left; }

/* ── three steps ───────────────────────────────────────────────────────── */
.k-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.k-step {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: var(--s5) var(--s4);
  text-align: center;
  transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.k-sec--tint .k-step { background: var(--paper); }
.k-step:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.k-step__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%; margin-bottom: var(--s3);
  background: var(--accent-wash); color: var(--accent);
  font-size: 19px; font-weight: 800;
}
.k-step h3 { font-size: 19px; margin-bottom: 8px; }
.k-step p { color: var(--clay); font-size: 15px; }

/* ── professionals split ───────────────────────────────────────────────── */
.k-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.k-split__art { position: relative; display: flex; justify-content: center; }
.k-split__art .qr { position: relative; z-index: 1; }
.k-ticks { display: grid; gap: 12px; margin-bottom: var(--s5); }
.k-ticks li { position: relative; padding-left: 30px; color: var(--clay); font-size: 15.5px; }
.k-ticks li::before {
  content: ''; position: absolute; left: 0; top: 5px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--accent-wash) 50% / 11px 11px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4L4.6 9 10 3.2' fill='none' stroke='%230D7A72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ── feature cards ─────────────────────────────────────────────────────── */
.k-feats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); }
.k-feat {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: var(--s5) var(--s4);
  transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.k-feat:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.k-feat__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: var(--r-tile); margin-bottom: var(--s3);
}
.k-feat__icon svg { width: 26px; height: 26px; }
.k-feat__icon--a { background: var(--accent-wash); color: var(--accent); }
.k-feat__icon--b { background: rgba(246,185,59,.22); color: #8A6100; }
.k-feat__icon--c { background: rgba(159,207,232,.28); color: #1F6FA8; }
.k-feat__icon--d { background: var(--pop-soft); color: #B2431F; }
.k-feat h3 { font-size: 18px; margin-bottom: 8px; }
.k-feat p { color: var(--clay); font-size: 14.5px; }

/* ── everywhere ────────────────────────────────────────────────────────── */
.k-where { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.k-where__card {
  border: 1px solid var(--line); border-radius: var(--r-card);
  padding: var(--s5) var(--s4); background: var(--paper); text-align: center;
}
.k-where__card h3 { font-size: 18px; margin-bottom: 8px; }
.k-where__card p { color: var(--clay); font-size: 15px; }

/* ── closing CTA ───────────────────────────────────────────────────────── */
.k-cta {
  background: var(--accent); color: #fff; text-align: center;
  padding: clamp(56px, 8vw, 96px) 0;
}
.k-cta__in { max-width: 660px; margin-inline: auto; }
.k-cta h2 { font-size: clamp(28px, 3.6vw, 42px); color: #fff; margin-bottom: var(--s3); }
.k-cta p { color: rgba(255,255,255,.82); font-size: 17px; margin-bottom: var(--s5); }
.k-cta__actions { display: flex; gap: var(--s3); justify-content: center; flex-wrap: wrap; }
.k-cta .btn--invert { background: #fff; color: var(--accent); }
.k-cta .btn--invert:hover { background: var(--linen); }

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .k-feats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .k-hero__in, .k-split { grid-template-columns: 1fr; }
  .k-hero__art { order: -1; }
  .k-steps, .k-where { grid-template-columns: 1fr; }
  .k-title, .k-title--left { max-width: none; }
}
@media (max-width: 560px) {
  .k-feats { grid-template-columns: 1fr; }
  .k-hero__actions .btn { width: 100%; }
  /* 40/24 of card padding on a 360px screen leaves the copy looking indented
     against the full-width paragraphs above it. */
  .tier, .k-feat, .k-step, .k-where__card, .step, .card { padding: var(--s4) var(--s3); }
}

/* ══════════════════════════════════════════════════════════════════════════
   For guests — the evening, as they live it
   ══════════════════════════════════════════════════════════════════════════
   This page used to headline "No app. No password." Those describe what a guest
   is SPARED, not what they get, and nobody arrives at a wedding hoping to avoid
   an install. It is now four moments of one evening, each with a real
   photograph of people, and the install detail is mentioned once in passing.
   ══════════════════════════════════════════════════════════════════════════ */

/* A photograph, not a device mock, in the hero's art slot. */
.k-hero__art--photo { align-items: center; }
.g-shot { margin: 0; border-radius: var(--r-card); overflow: hidden; background: var(--bg-2); }
.g-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.g-shot--lead {
  position: relative; z-index: 1; width: min(520px, 100%);
  aspect-ratio: 9 / 7; box-shadow: var(--shadow-md);
}

/* ── the four moments ──────────────────────────────────────────────────── */
/* Alternating sides, so the eye walks down the evening rather than scanning a
   grid. A grid would read as a feature list, which is the thing this page is
   deliberately not. */
.g-night { display: grid; gap: clamp(40px, 6vw, 72px); }
.g-moment {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px); align-items: center;
}
.g-moment:nth-child(even) .g-shot { order: 2; }
.g-moment .g-shot { aspect-ratio: 4 / 3; box-shadow: var(--shadow-sm); }
.g-moment__body { max-width: 46ch; }
.g-when {
  display: inline-block; margin-bottom: 10px; padding: 5px 12px;
  border-radius: 999px; background: var(--accent-wash); color: var(--accent-deep);
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
}
.g-moment h3 { font-size: clamp(20px, 2.2vw, 26px); margin-bottom: 10px; }
.g-moment p { color: var(--clay); font-size: 16px; }

@media (max-width: 820px) {
  .g-moment { grid-template-columns: 1fr; gap: var(--s4); }
  .g-moment:nth-child(even) .g-shot { order: 0; }
  .g-moment__body { max-width: none; }
}

/* ── WhatsApp, bottom-right ────────────────────────────────────────────────
   Both reference sites park a chat widget here. This is a plain link to a real
   thread — no third-party script, no cookie banner, no kilobytes — which is the
   only version of this that is consistent with the rest of the site. */
.wa {
  position: fixed; right: clamp(14px, 2.5vw, 26px); bottom: clamp(14px, 2.5vw, 26px);
  z-index: 120; width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #25D366; color: #fff;
  box-shadow: 0 6px 20px rgba(37,211,102,.38), 0 2px 6px rgba(0,0,0,.14);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.wa svg { width: 30px; height: 30px; fill: currentColor; }
.wa:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 10px 26px rgba(37,211,102,.46); }
.wa:active { transform: translateY(0) scale(1); }
@media (max-width: 560px) { .wa { width: 50px; height: 50px; } .wa svg { width: 27px; height: 27px; } }
@media (prefers-reduced-motion: reduce) { .wa { transition: none; } }