@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/geist-latin-wght-normal.woff2') format('woff2-variations');
}

:root {
  --page: #f6f5f0;
  --surface: #ffffff;
  --text: #0b0b0b;
  --muted: #6f6e69;
  --border: rgba(11, 11, 11, 0.1);
  --navy: #0b245c;
  --navy-strong: #071a45;
  --navy-weak: #e8ebf3;
  --cream: #f6f5f0;
  --dim: rgba(11, 11, 11, 0.16);
  --shadow: 0 1px 2px rgba(11, 36, 92, 0.05), 0 30px 60px -24px rgba(11, 36, 92, 0.35);
  --radius: 18px;
  --gutter: clamp(16px, 4vw, 40px);
  --wrap: 1200px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #0d0d0d;
    --surface: #1a1a19;
    --text: #f4f3ee;
    --muted: #9a9890;
    --border: rgba(255, 255, 255, 0.1);
    --navy: #4a6dc0;
    --navy-strong: #7f9be0;
    --navy-weak: #172036;
    --dim: rgba(244, 243, 238, 0.18);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; letter-spacing: -0.03em; line-height: 1.12; }
p { text-wrap: pretty; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 6px; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--navy); color: #fff; padding: 10px 14px; border-radius: 10px;
}
.skip:focus { top: 12px; }

/* Nav */
.nav {
  position: fixed; inset: 12px var(--gutter) auto; z-index: 50;
  display: flex; align-items: center; gap: 24px;
  max-width: var(--wrap); margin: 0 auto;
  padding: 10px 10px 10px 18px;
  background: color-mix(in srgb, var(--page) 78%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.brand { display: flex; align-items: baseline; gap: 4px; text-decoration: none; }
.brand-meet { font-weight: 300; letter-spacing: 0.08em; font-size: 15px; }
.brand img { height: 18px; width: auto; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand img { filter: invert(1) brightness(1.6); } }
.nav nav { display: flex; gap: 20px; margin-left: auto; font-size: 15px; }
.nav nav a { text-decoration: none; color: var(--muted); }
.nav nav a:hover { color: var(--text); }
@media (max-width: 640px) { .nav nav { display: none; } .nav .btn { margin-left: auto; } }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px; border-radius: 999px;
  background: var(--navy); color: #fff; font-weight: 600; text-decoration: none;
  transition: transform .3s cubic-bezier(.16,1,.3,1), background .2s;
}
.btn:hover { background: var(--navy-strong); transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-sm { min-height: 40px; padding: 0 18px; font-size: 15px; }
.btn-ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
.btn-ghost:hover { background: var(--surface); }
.btn-light { background: var(--cream); color: #0b245c; }
.btn-light:hover { background: #fff; }

.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy); }
.h2 { font-size: clamp(34px, 5.2vw, 64px); line-height: 1.04; font-weight: 650; }
.lede { font-size: clamp(18px, 1.6vw, 21px); color: var(--muted); max-width: 52ch; }

/* 1. Hero */
.hero {
  padding: clamp(120px, 18vh, 180px) var(--gutter) 0;
  text-align: center;
  display: grid; justify-items: center; gap: 22px;
}
.hero-title {
  font-size: clamp(44px, 9vw, 128px);
  line-height: 0.96; font-weight: 700; letter-spacing: -0.045em;
  max-width: 14ch;
}
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.hero-stage { width: 100%; max-width: var(--wrap); margin-top: clamp(32px, 6vh, 64px); perspective: 1400px; }
.hero-shot {
  margin: 0; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); border: 1px solid var(--border);
  transform-origin: 50% 0%;
  will-change: transform;
}

/* 2. Manifesto */
.manifesto { min-height: 100svh; display: grid; place-items: center; padding: 0 var(--gutter); }
.manifesto-inner { max-width: 1000px; display: grid; gap: 36px; }
.manifesto-text { font-size: clamp(28px, 4.2vw, 56px); line-height: 1.15; font-weight: 600; letter-spacing: -0.03em; }
.manifesto-text .word { opacity: 0.18; }
@media (prefers-reduced-motion: reduce) { .manifesto-text .word { opacity: 1; } }
.chain { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px 14px; font-size: clamp(18px, 2vw, 24px); font-weight: 600; }
.chain li { color: var(--muted); }
.chain li:nth-child(odd) { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border); }
.chain li.on { background: var(--navy); color: #fff; border-color: var(--navy); }

/* 4. Horizontal */
.hscroll-pin { height: 100svh; display: grid; align-content: center; gap: clamp(20px, 4vh, 40px); overflow: hidden; padding: 96px 0 24px; }
.hscroll-title { padding: 0 var(--gutter); max-width: 18ch; font-size: clamp(32px, 4.4vw, 56px); }
.track { display: flex; gap: 24px; padding: 0 var(--gutter); width: max-content; }
.panel {
  width: min(78vw, 720px); flex: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: clamp(22px, 3vw, 36px); display: grid; gap: 24px; align-content: space-between;
  min-height: min(52svh, 440px);
}
.panel-copy { display: grid; gap: 8px; }
.panel h3 { font-size: clamp(24px, 2.6vw, 34px); }
.panel p { color: var(--muted); max-width: 46ch; }
.panel-img { border-radius: 12px; border: 1px solid var(--border); }
.panel-big { font-size: clamp(80px, 14vw, 200px); line-height: .85; font-weight: 750; letter-spacing: -0.06em; color: var(--navy); }
.panel-big span { display: block; font-size: 18px; letter-spacing: 0; font-weight: 500; color: var(--muted); margin-top: 14px; }
.panel-dark { background: #0b245c; border-color: #0b245c; }
.panel-dark h3, .panel-dark .panel-big { color: #f6f5f0; }
.panel-dark p { color: rgba(246, 245, 240, .72); }

/* 5. Phone */
.phone {
  max-width: var(--wrap); margin: 0 auto; padding: clamp(80px, 14vh, 160px) var(--gutter);
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}
.phone-copy { display: grid; gap: 20px; }
.phone-copy p { color: var(--muted); font-size: 19px; max-width: 42ch; }
.phone-stage { position: relative; display: grid; place-items: center; }
.ring {
  position: absolute; width: min(460px, 90%); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, var(--navy-weak) 0%, transparent 70%);
}
.phone-img { position: relative; width: min(280px, 70%); border-radius: 36px; box-shadow: var(--shadow); }
@media (max-width: 820px) { .phone { grid-template-columns: 1fr; text-align: left; } }

/* 6. Trust */
.trust { max-width: var(--wrap); margin: 0 auto; padding: 40px var(--gutter) clamp(80px, 14vh, 160px); display: grid; gap: 40px; }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; display: grid; gap: 8px; align-content: start; }
.card h3 { font-size: 19px; letter-spacing: -0.01em; }
.card p { color: var(--muted); font-size: 16px; }
@media (max-width: 960px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .trust-grid { grid-template-columns: 1fr; } }

/* 7. Pricing */
.pricing { max-width: 900px; margin: 0 auto; padding: 40px var(--gutter) clamp(80px, 14vh, 160px); display: grid; gap: 20px; justify-items: center; text-align: center; }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%; margin-top: 24px; }
.plan { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; display: grid; gap: 10px; text-align: left; align-content: start; }
.plan p { color: var(--muted); }
.plan-best { box-shadow: inset 0 0 0 2px var(--navy); }
.price { font-size: 56px; font-weight: 700; letter-spacing: -0.04em; color: var(--text) !important; font-variant-numeric: tabular-nums; line-height: 1.1; }
.price small { font-size: 17px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
@media (max-width: 640px) { .plans { grid-template-columns: 1fr; } }

/* 8. Closing */
.closing {
  margin: 0 var(--gutter); border-radius: 28px;
  background: #0b245c; color: #f6f5f0;
  min-height: 80svh; padding: 80px var(--gutter);
  display: grid; place-content: center; justify-items: center; gap: 24px; text-align: center;
}
.closing-title { font-size: clamp(40px, 8vw, 112px); line-height: .98; font-weight: 700; letter-spacing: -0.045em; max-width: 14ch; }
.closing .lede { color: rgba(246, 245, 240, .75); }

.fine { color: var(--muted); font-size: 15px; }

.nav-quiet { text-decoration: none; color: var(--muted); font-size: 15px; }
.nav-quiet:hover { color: var(--text); }
@media (max-width: 640px) { .nav-signin { display: none; } .nav .nav-quiet { margin-left: auto; } .nav .btn { margin-left: 0; } }

/* Questions */
.questions { max-width: 900px; margin: 0 auto; padding: 0 var(--gutter) clamp(80px, 14vh, 160px); display: grid; gap: 28px; }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  list-style: none; cursor: pointer; padding: 22px 40px 22px 0; position: relative;
  font-size: 19px; font-weight: 600; letter-spacing: -0.01em; transition: color .2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: 4px; top: 50%; translate: 0 -50%;
  font-size: 26px; font-weight: 400; color: var(--navy); transition: rotate .3s cubic-bezier(.16,1,.3,1);
}
.faq summary:hover { color: var(--navy); }
.faq details[open] summary::after { rotate: 45deg; }
.faq details p { padding: 0 0 22px; color: var(--muted); max-width: 68ch; }

/* Footer */
.foot { max-width: var(--wrap); margin: clamp(60px, 10vh, 100px) auto 0; padding: 48px var(--gutter) 40px; font-size: 15px; color: var(--muted); border-top: 1px solid var(--border); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); gap: 32px; }
.foot-grid h2 { font-size: 13px; font-weight: 600; letter-spacing: 0; margin: 0 0 12px; color: var(--muted); }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot-grid a { text-decoration: none; color: var(--text); }
.foot-grid a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot-about p { margin-top: 14px; max-width: 40ch; }
.foot-legal { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 13px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
.foot-legal a { color: var(--text); }
.lab-note { margin-top: 24px; font-size: 12px; opacity: .7; }
@media (max-width: 720px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-about { grid-column: 1 / -1; } }

/* SplitText line masks */
.split-lines .line-mask, .split-words .line-mask { padding-bottom: 0.06em; }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

/* ---------- Full-site additions ---------- */

:root { --text-2: #52514e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --text-2: #c3c2b7; } }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.hero { padding-top: clamp(140px, 19vh, 190px); }
.hero .lede { max-width: 46ch; }
.manifesto-text em { font-style: normal; }
.nav nav a[aria-current="page"] { color: var(--text); }

/* Phone section: install steps, as on the live page */
.install { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.install-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; }
.install-os { display: flex; align-items: center; gap: 10px; font-size: 17px; letter-spacing: -0.01em; }
.install-os svg { color: var(--navy); flex: none; }
.install-item p { margin-top: 8px; color: var(--text-2); font-size: 15px; }
.install-item b, .install-note b { color: var(--text); font-weight: 600; }
.inline-ico { display: inline-block; vertical-align: -3px; margin-right: 3px; }
.phone-copy .install-note { display: flex; gap: 10px; align-items: flex-start; color: var(--muted); font-size: 15px; margin-top: 16px; }
.install-note svg { flex: none; margin-top: 2px; color: var(--navy); }
@media (max-width: 520px) { .install { grid-template-columns: 1fr; } }

/* Pricing: the live page's tags */
.plan-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.plan-save, .plan-tag { font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.plan-save { background: #e8f6e8; color: #006300; }
.plan-tag { background: var(--navy-weak); color: var(--navy); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .plan-save { background: #12301a; color: #8fd18f; } }
/* The launch price: a sash across the card's top right corner, like a pageant sash (until 1 March 2027). */
.plan { position: relative; overflow: hidden; }
.plan-sash {
  position: absolute; top: 52px; right: -64px; width: 260px; transform: rotate(45deg);
  padding: 7px 0; text-align: center; pointer-events: none;
  background: var(--navy); color: #f6f5f0 !important;
  border-block: 1px solid rgba(246, 245, 240, .35); background-clip: padding-box;
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; line-height: 1.2;
  box-shadow: 0 8px 16px -8px rgba(11, 36, 92, .55);
}
.plan .plan-top { justify-content: flex-start; } /* the tag beside its title: the sash has the corner */
.launch-note { max-width: 62ch; color: var(--muted); font-size: 15px; }
.launch-note strong { color: var(--text); }
.plans-foot { display: grid; gap: 12px; justify-items: center; margin-top: 12px; }
.plans-foot p { color: var(--muted); font-size: 15px; }

/* Footer: the page you are on */
.foot .foot-grid a[aria-current="page"] { color: var(--navy); font-weight: 600; }

/* Legal pages (privacy, terms) and 404: the live layout in the new look */
.legal { padding: clamp(120px, 16vh, 160px) 0 clamp(40px, 6vw, 80px); }
.legal-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: clamp(32px, 6vw, 88px); align-items: start; }
.legal-body { max-width: 70ch; min-width: 0; }
.legal-body h1 { font-size: clamp(36px, 5vw, 60px); line-height: 1.02; letter-spacing: -0.04em; }
.legal-meta { margin-top: 12px; color: var(--muted); font-size: 15px; }
.legal-intro { margin-top: 24px; font-size: 19px; color: var(--text); }
.legal-body section { margin-top: 44px; scroll-margin-top: 112px; }
.legal-body h2 { font-size: 22px; letter-spacing: -0.015em; }
.legal-body p, .legal-body li { color: var(--text-2); }
.legal-body p { margin-top: 12px; }
.legal-body ul, .legal-body ol { margin: 12px 0 0; padding-left: 1.2em; display: grid; gap: 10px; }
.legal-body strong { color: var(--text); font-weight: 600; }
.legal a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .legal a { color: var(--navy-strong); } }
.legal-toc { position: sticky; top: 110px; font-size: 14px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.legal-toc-title { font-weight: 600; color: var(--text); margin-bottom: 10px; }
.legal-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.legal-toc a { color: var(--text-2); text-decoration: none; }
.legal-toc a:hover { color: var(--navy); text-decoration: underline; }
.legal-toc-m { display: none; margin-top: 24px; padding: 14px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font-size: 15px; }
.legal-toc-m summary { font-weight: 600; cursor: pointer; }
.legal-toc-m ol { margin: 12px 0 2px; padding-left: 1.2em; display: grid; gap: 8px; }
.legal-toc-m a { color: var(--text-2); }
@media (max-width: 900px) {
  .legal-grid { grid-template-columns: minmax(0, 1fr); }
  .legal-toc { display: none; }
  .legal-toc-m { display: block; }
}
.legal-alt { margin-top: 48px; }

/* Nav on phones: the longer Portuguese button stays on one line */
.btn { white-space: nowrap; }
@media (max-width: 640px) {
  .nav { gap: 14px; padding-left: 16px; }
  .nav .btn-sm { padding: 0 14px; }
}

/* Logo: "meet" plus "NISA" in the logo's own lettering, as on the live site. A mask, so it takes the
   navy text colour. The build embeds the mask image so it works opened from disk. */
.brand { align-items: center; }
.brand-word { color: var(--navy); font-size: 21px; font-weight: 450; letter-spacing: -0.02em; white-space: nowrap; }
.brand-nisa {
  display: inline-block; height: 0.755em; width: calc(0.755em * 3.246); margin-left: 0.04em; vertical-align: -0.02em;
  background-color: currentColor;
  -webkit-mask: url('/assets/brand-nisa.svg') center / contain no-repeat;
  mask: url('/assets/brand-nisa.svg') center / contain no-repeat;
}

/* The full logo above the manifesto (meet / NISA / Numbers Into Smarter Actions), so the English reads
   as the name's meaning. A mask of the kit's vertical logo, so it takes the navy and follows dark mode. */
.lockup {
  width: clamp(240px, 22vw, 300px); aspect-ratio: 338.2 / 176.79; justify-self: start;
  background-color: var(--navy);
  -webkit-mask: url('/assets/brand-lockup.svg') left center / contain no-repeat;
  mask: url('/assets/brand-lockup.svg') left center / contain no-repeat;
}

/* 3. Steps: all three listed, the one you're on lit, and a screenshot for each */
.steps-pin {
  min-height: 100svh; max-width: var(--wrap); margin: 0 auto;
  padding: 110px var(--gutter) 40px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center;
}
.steps-copy { display: grid; gap: clamp(28px, 4vh, 44px); }
.step-wrap { position: relative; }
.step-rail { position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; background: var(--border); border-radius: 2px; overflow: hidden; }
.step-rail span { display: block; height: 100%; background: var(--navy); transform-origin: 50% 0; transform: scaleY(0); }
.step-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(14px, 2.4vh, 26px); }
.step { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; align-items: start; }
.step-n {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--page); border: 1.5px solid var(--border); color: var(--muted);
  font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums;
  transition: background .4s, color .4s, border-color .4s;
}
.step-text h3 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.1; padding-top: 6px; }
.step-text p { margin-top: 8px; color: var(--muted); max-width: 44ch; font-size: 17px; }
.step.is-active .step-n { background: var(--navy); border-color: var(--navy); color: #fff; }
/* Only once the script drives the section: other steps step back to the muted grey (still AA contrast),
   the current one reads in full colour. Without the script every step reads at full strength. */
.step-text h3, .step-text p { transition: color .4s; }
.steps--live .step:not(.is-active) .step-text h3 { color: var(--muted); }
.steps--live .step.is-active .step-text p { color: var(--text-2); }

.steps-stage { --stage-h: min(72svh, 660px); position: relative; height: var(--stage-h); }
.shot { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; }
.shot img { max-width: 100%; max-height: var(--stage-h); width: auto; height: auto; border-radius: 20px; border: 1px solid var(--border); box-shadow: var(--shadow); background: var(--surface); }
.shot-tall img { border-radius: 30px; }
.steps--live .shot { opacity: 0; transform: translateY(36px) scale(.95); transition: opacity .5s ease, transform .8s cubic-bezier(.16,1,.3,1); }
.steps--live .shot.is-active { opacity: 1; transform: none; }
.steps:not(.steps--live) .shot:not(:first-child) { display: none; }

@media (max-width: 820px) {
  .steps-pin { grid-template-columns: 1fr; padding-top: 92px; align-content: center; gap: 18px; }
  .steps-copy { gap: 16px; }
  .steps .h2 { font-size: 28px; }
  .steps-stage { order: -1; --stage-h: 30svh; }
  .step { grid-template-columns: 34px minmax(0, 1fr); gap: 12px; }
  .step-n { width: 34px; height: 34px; font-size: 12px; }
  .step-rail { left: 16px; top: 17px; bottom: 17px; }
  .step-text h3 { font-size: 20px; padding-top: 5px; }
  .step-text p { font-size: 15px; margin-top: 4px; }
  .step-list { gap: 12px; }
  /* Phones: only the current step keeps its sentence, so the section fits one screen. */
  /* Hidden visually only: screen readers don't scroll, so they still need every step's sentence. */
  .steps--live .step:not(.is-active) .step-text p { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
}
@media (prefers-reduced-motion: reduce) { .steps--live .shot, .step-text h3, .step-text p, .step-n { transition: none; } }

/* 3b. The Log step's animated form: the app's logging form (consultations.component + styles.scss),
   same sizes and colours, always in the app's light look so it reads as a picture of the app. */
/* Scaled from its top edge, then centred by the script: a form taller than the stage would
   otherwise stretch the grid row, and a centred scale would push it down. */
.shot-anim { overflow: visible; align-items: start; }
.fd {
  --fd-surface: #ffffff; --fd-surface-2: #f1f0ea; --fd-text: #0b0b0b; --fd-text-2: #52514e; --fd-muted: #898781;
  --fd-border: rgba(11, 11, 11, 0.1); --fd-primary: #0b245c;
  position: relative; width: 380px; flex: none;
  background: var(--fd-surface); color: var(--fd-text);
  border: 1px solid var(--fd-border); border-radius: 14px; box-shadow: var(--shadow);
  padding: 18px 20px; font-size: 15px; line-height: 1.4; text-align: left;
  transform-origin: 50% 0;
}
.fd-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.fd-label { font-size: 13px; font-weight: 600; color: var(--fd-text-2); }
.fd-muted { font-weight: 400; color: var(--fd-muted); }
.fd-input {
  position: relative; display: flex; align-items: center; gap: 6px; min-height: 43px;
  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: 10px; padding: 10px 12px;
  transition: border-color .2s, box-shadow .2s;
}
.fd-val { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-ph { color: var(--fd-muted); }
.fd-ico { flex: none; color: var(--fd-text-2); }
.fd-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fd-noshow {
  display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; margin-bottom: 14px;
  border: 1px solid var(--fd-border); border-radius: 10px;
}
.fd-ns { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fd-ns strong { font-size: 14px; }
.fd-ns span { font-size: 12px; color: var(--fd-muted); }
.fd-box { flex: none; width: 16px; height: 16px; margin-top: 2px; border: 1.5px solid #767676; border-radius: 3px; background: #fff; }
.fd-split { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; font-weight: 500; color: var(--fd-text-2); }
.fd-split .fd-box, .fd-vat .fd-box { margin-top: 0; }
.fd-preview { background: var(--fd-surface-2); border-radius: 10px; padding: 14px; margin-bottom: 14px; }
.fd-prev-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fd-prev { display: flex; flex-direction: column; gap: 2px; }
.fd-prev-label { font-size: 12px; color: var(--fd-muted); }
.fd-prev-val { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.fd-you { color: var(--fd-primary); }
.fd-foot { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.fd-hour { font-size: 13px; color: var(--fd-muted); }
.fd-vat { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fd-text-2); }
.fd-actions { display: flex; justify-content: flex-end; margin-top: 4px; }
.fd-btn { display: inline-flex; padding: 10px 16px; border-radius: 10px; background: var(--fd-primary); color: #fff; font-weight: 600; }
/* While the script drives it: the field being typed in gets the app's focus ring and a caret. */
/* Typed fields: the value hugs its text so the caret sits right after the last digit. */
.fd-field:is([data-k="dur"], [data-k="amount"]) .fd-val { flex: none; }
.fd-caret { display: none; width: 1.5px; height: 1.15em; margin-left: -4px; background: var(--fd-text); }
.fd-field.is-focus .fd-input { border-color: var(--fd-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fd-primary) 30%, transparent); }
.fd-field.is-focus .fd-caret { display: block; animation: fd-blink 1s steps(1) infinite; }
@keyframes fd-blink { 50% { opacity: 0; } }
.demo-pointer { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.demo.is-live .demo-pointer { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .fd-field.is-focus .fd-caret { animation: none; } }
/* SplitText splits these headings; the GSAP plugins skill warns text-wrap: balance can interfere. */
.hero-title, .split-words, .manifesto-text { text-wrap: wrap; }
/* Pause/play for the looping form (motion that runs past 5 s needs a way to stop it). Only shown
   while the script drives the section and the Log step is the one on screen. */
.fd-toggle {
  display: none; position: absolute; left: 50%; translate: -50% 0; bottom: -48px; z-index: 2;
  align-items: center; gap: 6px; min-height: 32px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-2);
  font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  transition: color .2s, border-color .2s;
}
.fd-toggle:hover { color: var(--text); border-color: var(--text-2); }
.steps--live .shot-anim.is-active ~ .fd-toggle { display: inline-flex; }
.fd-toggle .fd-i-play, .fd-toggle.is-paused .fd-i-pause { display: none; }
.fd-toggle.is-paused .fd-i-play { display: inline; }
/* Phones: the form is narrow in the stage, so its top corner is free and below would hit the heading. */
@media (max-width: 820px) {
  .fd-toggle { bottom: auto; top: 0; left: auto; right: 0; translate: none; width: 40px; min-height: 40px; padding: 0; justify-content: center; }
  /* Icon only: the label stays as the button's accessible name, just not drawn. */
  .fd-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* 3c. The Compare step's animated dashboard: the app's KPI cards and its "where your earnings come
   from" card (dashboard.component + styles.scss), in the app's light look like the form above. */
.dd {
  --fd-surface: #ffffff; --fd-surface-2: #f1f0ea; --fd-text: #0b0b0b; --fd-text-2: #52514e; --fd-muted: #898781;
  --fd-border: rgba(11, 11, 11, 0.1); --fd-primary: #0b245c;
  position: relative; width: 380px; flex: none; transform-origin: 50% 0;
  color: var(--fd-text); font-size: 15px; line-height: 1.4; text-align: left;
  display: grid; gap: 12px;
}
.dd-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dd-kpi {
  display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px;
  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: 14px; box-shadow: var(--shadow);
}
.dd-kpi-label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--fd-muted); }
.dd-kpi-val { font-size: 20px; font-weight: 750; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dd-hero { grid-column: 1 / -1; background: linear-gradient(135deg, #0b245c, #071a45); border-color: #0b245c; color: #fff; padding: 18px 20px; }
.dd-hero .dd-kpi-label { color: rgba(255, 255, 255, .78); }
.dd-hero .dd-kpi-val { font-size: 32px; }
.dd-kpi-foot { font-size: 13px; color: rgba(255, 255, 255, .78); }
.dd-card { background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: 14px; box-shadow: var(--shadow); padding: 18px 20px; }
.dd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dd-title { font-size: 16px; font-weight: 650; line-height: 1.25; max-width: 15ch; }
.dd-toggle { position: relative; display: inline-flex; flex: none; padding: 3px; border-radius: 999px; background: var(--fd-surface-2); }
.dd-pill { position: absolute; top: 3px; bottom: 3px; left: 3px; border-radius: 999px; background: var(--fd-primary); }
.dd-opt { position: relative; padding: 5px 12px; font-size: 13px; font-weight: 600; color: var(--fd-text-2); transition: color .25s; }
.dd-opt.is-on { color: #fff; }
.dd-donut { display: block; width: 200px; height: 200px; margin: 14px auto 10px; }
/* Both views live in the markup; the one not showing is hidden (the still version shows by place). */
.dd-seg[data-view="service"], .dd-list[data-view="service"] { display: none; }
.dd.is-service .dd-seg[data-view="place"], .dd.is-service .dd-list[data-view="place"] { display: none; }
.dd.is-service .dd-seg[data-view="service"] { display: inline; }
.dd.is-service .dd-list[data-view="service"] { display: grid; }
/* Room for the longer list either way, so the card keeps its size when the view switches. */
.dd-lists { min-height: calc(8 * 29px); }
.dd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.dd-list li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 36px; align-items: center; gap: 10px; font-size: 14px; }
.dd-sw { width: 12px; height: 12px; border-radius: 3px; }
.dd-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-amt { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.dd-pct { color: var(--fd-muted); font-variant-numeric: tabular-nums; text-align: right; }
/* Still: the chosen option carries its own pill. Animated: one pill slides between the options. */
.dd-opt.is-on { background: var(--fd-primary); border-radius: 999px; }
.dd-pill { display: none; }
.dd.is-live .dd-pill { display: block; }
.dd.is-live .dd-opt.is-on { background: none; }
/* The three small cards: labels get two lines' room so the figures line up across the row. */
.dd-kpi:not(.dd-hero) .dd-kpi-label { min-height: 2.8em; line-height: 1.4; }

/* 3d. The Decide step's animated highlights: the dashboard's highlight cards (dashboard.component
   .highlight / .hl-*), one column as on a phone, in the app's light look like the others. */
.hl {
  --fd-surface: #ffffff; --fd-text: #0b0b0b; --fd-text-2: #52514e; --fd-muted: #898781;
  --fd-border: rgba(11, 11, 11, 0.1); --fd-primary: #0b245c; --fd-primary-weak: #e8ebf3;
  position: relative; width: 380px; flex: none; transform-origin: 50% 0;
  display: grid; gap: 12px; color: var(--fd-text); font-size: 15px; line-height: 1.4; text-align: left;
}
.hl-card {
  position: relative; display: flex; align-items: center; gap: 14px; padding: 18px 20px;
  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: 14px; box-shadow: var(--shadow);
}
.hl-icon { width: 44px; height: 44px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--fd-primary-weak); color: var(--fd-primary); }
.hl-text { display: flex; flex-direction: column; min-width: 0; }
.hl-label { font-size: 12px; color: var(--fd-muted); }
.hl-name { font-size: 18px; font-weight: 700; }
.hl-detail { font-size: 13px; color: var(--fd-text-2); }
.hl-amt { font-variant-numeric: tabular-nums; }
/* The emphasis rings: drawn over the card's border, shown only while the script points them out. */
.hl-ring { position: absolute; inset: -1px; border-radius: 14px; pointer-events: none; opacity: 0; }
.hl-card[data-role="best"] .hl-ring { box-shadow: 0 0 0 2px var(--fd-primary), 0 0 0 6px color-mix(in srgb, var(--fd-primary) 18%, transparent); }
.hl-card[data-role="top"] .hl-ring { box-shadow: 0 0 0 2px color-mix(in srgb, var(--fd-primary) 45%, transparent); }

/* 5b. Phone section carousel: the install flows (Android, iPhone) on two phones, one in front and the
   other visible behind it. Shown only while the script drives it; otherwise the still screenshot. */
.pc, .pc-controls { display: none; }
.phone-stage.is-live .phone-img { display: none; }
.phone-stage.is-live .pc { display: block; }
.phone-stage.is-live .pc-controls { display: flex; }
.phone-stage.is-live { display: block; }
.pc { position: relative; width: 100%; height: min(76svh, 680px); }
.pc-slot { position: absolute; left: 50%; top: 0; transform-origin: 50% 0; cursor: pointer; }
.pc-slot.is-front { cursor: default; }
.pc-device { position: relative; background: #111; box-shadow: 0 2px 4px rgba(0,0,0,.2), 0 40px 80px -30px rgba(11,36,92,.55); }
.pc-device.android { padding: 10px; border-radius: 44px; }
.pc-device.ios { padding: 12px; border-radius: 56px; }
.pc-screen {
  position: relative; width: 390px; height: 844px; overflow: hidden; display: flex; flex-direction: column;
  background: #f6f5f0; color: #0b0b0b; font-size: 15px; line-height: 1.4; text-align: left;
}
.android .pc-screen { border-radius: 34px; }
.ios .pc-screen { border-radius: 44px; }
.ph-island { position: absolute; top: 11px; left: 50%; width: 118px; height: 34px; margin-left: -59px; border-radius: 20px; background: #000; z-index: 9; }
.ph-status { flex: none; height: 30px; padding: 0 22px; display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 600; background: #fff; z-index: 8; position: relative; transition: color .3s, background .3s; }
.ios .ph-status { height: 52px; padding: 0 34px; font-size: 15px; }
.ph-sys { display: inline-flex; gap: 5px; align-items: center; }
.ph-sys i { width: 15px; height: 10px; border-radius: 2px; background: currentColor; opacity: .75; }
.ph-sys b { width: 22px; height: 11px; border-radius: 3px; border: 1.5px solid currentColor; }
.pc-screen.on-home .ph-status { background: transparent; color: #fff; }

/* Chrome on Android: the address bar above the page. */
.cb { flex: none; height: 56px; display: flex; align-items: center; gap: 12px; padding: 0 14px; background: #fff; border-bottom: 1px solid rgba(0,0,0,.08); color: #444; }
.cb-url { flex: 1; display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 19px; background: #eef0f2; font-size: 15px; color: #222; }
.cb-tabs { width: 20px; height: 20px; border: 2px solid currentColor; border-radius: 4px; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.cb-menu { display: grid; gap: 3px; }
.cb-menu i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.pc-content { position: relative; flex: 1; overflow: hidden; }
.ps { position: absolute; inset: 0; }
.ps-dash img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* The app's own chrome (app.html / app.scss): top bar and the five-tab bottom bar. */
.pa-nav { position: absolute; left: 0; right: 0; bottom: 0; display: flex; padding: 6px 4px 10px; background: #fff; border-top: 1px solid rgba(11,11,11,.1); }
.pa-link { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; color: #898781; font-size: 11px; font-weight: 600; }
.pa-link.on { color: #0b245c; }
.pa-top { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #fff; border-bottom: 1px solid rgba(11,11,11,.1); position: relative; z-index: 2; }
.pa-top img { border-radius: 8px; }
.pa-word { font-size: 17px; }
.pa-user { margin-left: auto; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(11,11,11,.1); border-radius: 10px; color: #0b245c; }
.pa-out { padding: 8px 12px; border: 1px solid rgba(11,11,11,.1); border-radius: 10px; font-size: 14px; font-weight: 600; color: #52514e; }
.ps-acct { background: #f6f5f0; }
.pa-page { padding: 20px 16px 90px; }
.pa-page h3 { font-size: 22px; letter-spacing: -0.02em; }
.pa-page h4 { font-size: 17px; letter-spacing: -0.01em; }
.pa-sub { margin-top: 4px; color: #898781; font-size: 14px; }
.pa-page > .pa-sub { margin-bottom: 18px; }
.pa-card { background: #fff; border: 1px solid rgba(11,11,11,.1); border-radius: 14px; padding: 18px; margin-bottom: 12px; display: flex; flex-direction: column; }
.ps-bar { display: block; height: 10px; margin-top: 12px; border-radius: 5px; background: #ebeae4; }
.pa-lbl { display: block; width: 30%; height: 9px; margin-top: 14px; border-radius: 5px; background: #ebeae4; }
.pa-field { display: block; height: 40px; margin-top: 8px; border: 1px solid rgba(11,11,11,.1); border-radius: 10px; }
.pa-btn { align-self: flex-start; margin-top: 14px; padding: 10px 16px; border-radius: 10px; background: #0b245c; color: #fff; font-weight: 600; }

/* System sheets (browser and phone), drawn plainly: no brand styling, only words the site uses. */
.ps-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.4); opacity: 0; z-index: 3; }
.ps-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; }
.cs { background: #fff; border-radius: 26px 26px 0 0; padding: 26px 22px 30px; display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: start; }
.cs img { border-radius: 12px; }
.cs-text { display: flex; flex-direction: column; gap: 2px; }
.cs-text strong { font-size: 19px; font-weight: 600; margin-bottom: 6px; }
.cs-url { color: #666; font-size: 14px; }
.cs-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.cs-cancel, .cs-install { padding: 10px 20px; border-radius: 20px; font-weight: 600; font-size: 15px; }
.cs-cancel { color: #2457c5; }
.cs-install { background: #2457c5; color: #fff; }
.ss { background: #f2f2f7; border-radius: 16px 16px 0 0; padding: 16px 16px 34px; display: grid; gap: 14px; }
.ss-head { display: flex; align-items: center; gap: 12px; padding: 4px 4px 10px; border-bottom: 1px solid rgba(0,0,0,.1); }
.ss-head img { border-radius: 10px; }
.ss-head div { display: flex; flex-direction: column; }
.ss-head span { color: #8a8a8e; font-size: 13px; }
.ss-people { display: flex; gap: 18px; padding: 0 6px; }
.ss-people span { width: 58px; height: 58px; border-radius: 50%; background: #dcdce1; }
.ss-list { background: #fff; border-radius: 12px; overflow: hidden; }
.ss-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 50px; padding: 0 16px; border-bottom: 1px solid rgba(0,0,0,.08); font-size: 16px; }
.ss-row:last-child { border-bottom: 0; }
.ss-row .ps-bar { flex: 1; margin: 0; max-width: 180px; }
.ss-row i { width: 20px; height: 20px; border-radius: 5px; background: #dcdce1; }
.ss-add svg { color: #0b0b0b; flex: none; }
.ps-addhome { position: absolute; inset: 0; z-index: 5; background: #f2f2f7; padding-top: 52px; }
.ah-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; font-size: 16px; }
.ah-bar span { color: #2457c5; }
.ah-bar strong { font-size: 15px; text-align: center; }
.ah-add { font-weight: 700; }
.ah-card { margin: 10px 16px; padding: 14px; background: #fff; border-radius: 12px; display: flex; align-items: center; gap: 14px; }
.ah-card img { border-radius: 14px; }
.ah-card div { display: flex; flex-direction: column; flex: 1; }
.ah-name { padding-bottom: 8px; border-bottom: 1px solid rgba(0,0,0,.1); font-size: 16px; }
.ah-url { padding-top: 8px; color: #8a8a8e; font-size: 14px; }

/* Safari on iPhone: the address bar and toolbar below the page, with Share in the middle. */
.sb { flex: none; padding: 10px 16px 26px; background: rgba(247,247,247,.96); border-top: 1px solid rgba(0,0,0,.08); display: grid; gap: 10px; }
.sb-url { justify-self: stretch; text-align: center; padding: 10px; border-radius: 12px; background: #fff; font-size: 15px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.sb-tools { display: flex; justify-content: space-between; align-items: center; padding: 0 10px; }
.sb-tools i { width: 22px; height: 22px; border-radius: 5px; background: #d6d6db; }
.sb-share { color: #2457c5; display: grid; place-items: center; }

/* Home screens: plain app shapes, and meetNISA's real icon arriving. */
.ps-home { position: absolute; inset: 0; z-index: 6; padding: 70px 26px 0; background: linear-gradient(165deg, #2a4a8f 0%, #0b245c 55%, #1b1440 100%); }
.ios .ps-home { padding-top: 90px; }
.ph-grid { display: grid; grid-template-columns: repeat(4, 60px); justify-content: space-between; row-gap: 30px; }
.ph-app { position: relative; width: 60px; height: 60px; border-radius: 16px; background: rgba(255,255,255,.18); }
.android .ph-app { border-radius: 50%; }
.ph-ours { background: none; }
.ph-ours img { width: 60px; height: 60px; border-radius: 16px; box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.android .ph-ours img { border-radius: 50%; }
.ph-ours em { position: absolute; left: 50%; top: 66px; translate: -50% 0; font-style: normal; font-size: 12px; color: #fff; white-space: nowrap; }
.ph-dock { position: absolute; left: 18px; right: 18px; bottom: 26px; display: flex; justify-content: space-around; padding: 14px; border-radius: 30px; }
.ph-dock.ios { background: rgba(255,255,255,.18); }

/* The finger: a soft ring where the screen is touched. */
.tap { position: absolute; left: 0; top: 0; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(11,36,92,.28); border: 2px solid rgba(255,255,255,.9); opacity: 0; z-index: 10; pointer-events: none; }

/* Switch between the two phones (and pause), under the carousel. */
.pc-controls { justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 18px; position: relative; z-index: 2; }
.pc-tab, .pc-pause {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.pc-tab[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.pc-tab:hover:not([aria-pressed="true"]), .pc-pause:hover { color: var(--text); border-color: var(--text-2); }
.pc-pause .fd-i-play, .pc-pause.is-paused .fd-i-pause { display: none; }
.pc-pause.is-paused .fd-i-play { display: inline; }

/* The install cards beside it follow the carousel: the one being shown is outlined. */
.phone .install-item { transition: border-color .3s, box-shadow .3s; }
.phone.is-live .install-item { cursor: pointer; }
.phone .install-item.is-on { border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy); }
@media (max-width: 820px) { .pc { height: 66svh; } }

/* ================= Phones (up to 820px). Desktop is final: nothing below may apply above 820px. ===
   The only rule outside the media query lets the hero's <picture> add no box, so the image lays out
   exactly as a bare <img> (the <source> swaps in the phone screenshot below 820px). */
.hero-shot picture { display: contents; }

@media (max-width: 820px) {
  /* Hero: the app as it looks on a phone, in a phone-shaped frame, instead of the shrunk desktop. */
  .hero { padding-top: 120px; gap: 18px; }
  .hero-stage { margin-top: 24px; display: grid; justify-items: center; }
  .hero-shot { width: min(300px, 78vw); border-radius: 34px; border: 8px solid #111; box-shadow: var(--shadow); }

  /* Manifesto: no pinned screen; it takes the room its text needs. */
  .manifesto { min-height: 0; padding: 72px var(--gutter) 24px; }
  /* Logo and line centred, on one axis with the chain under them. */
  .lockup { justify-self: center; -webkit-mask-position: center; mask-position: center; }
  .manifesto-text { text-align: center; }

  /* The chain (Numbers → Insights → Strategy → Action) reads top to bottom, centred, arrows turned down. */
  .chain { flex-direction: column; align-items: center; gap: 4px; }
  .chain li[aria-hidden="true"] { rotate: 90deg; line-height: 1; }

  /* Steps: three stacked blocks, each with its picture under it (the script moves them there). */
  .steps--mobile .steps-pin { display: block; min-height: 0; padding: 72px var(--gutter) 24px; }
  .steps--mobile .steps-stage { display: none; }
  .steps--mobile .steps-copy { gap: 28px; }
  .steps--mobile .step-list { gap: 44px; }
  .steps.steps--mobile .step .step-text h3 { color: var(--text); }
  .steps.steps--mobile .step .step-text p { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; margin-top: 4px; color: var(--text-2); }
  .steps.steps--mobile .step .step-n { background: var(--navy); border-color: var(--navy); color: #fff; }
  .steps.steps--mobile .shot {
    position: relative; inset: auto; grid-column: 1 / -1; margin-top: 18px;
    opacity: 1; transform: none; transition: none; display: grid; justify-items: center; align-items: start;
  }
  /* Scaled from the top-left: the 380px picture then fills the column exactly, centred with it
     (a grid does not centre a box wider than its column, so a centred scale drifted right). */
  .steps.steps--mobile .shot { justify-items: start; }
  .steps.steps--mobile .shot .demo { transform-origin: 0 0; }
  /* Each picture's own pause button, centred under it, with its label. */
  .steps.steps--mobile .fd-toggle.is-clone {
    display: inline-flex; position: static; grid-column: 1 / -1; justify-self: center; translate: none;
    width: auto; min-height: 40px; padding: 0 14px; margin-top: 12px;
  }
  .steps.steps--mobile .fd-toggle.is-clone span { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }

  /* Nav: below desktop the section links don't fit beside EN, Sign in and the button (they wrapped and
     pushed the button out of the pill); they're in the footer too. EN goes right, then the rest. */
  .nav nav { display: none; }
  .nav > .nav-quiet:not(.nav-signin) { margin-left: auto; }
  /* One rhythm between sections. */
  .phone { padding-top: 72px; padding-bottom: 56px; gap: 32px; }
  .trust, .pricing, .questions { padding-bottom: 72px; }
}

/* Narrow phones (360px): logo and button a touch smaller so the button stays inside the nav pill. */
@media (max-width: 400px) {
  .nav { gap: 10px; padding-left: 14px; }
  .nav .brand-word { font-size: 19px; }
  .nav .btn-sm { padding: 0 12px; font-size: 14px; }
}
/* The smallest phones (320px): one step tighter still, for the longer Portuguese button. */
@media (max-width: 340px) {
  .nav { gap: 6px; padding-left: 12px; }
  .nav .brand-word { font-size: 16px; }
  .nav .btn-sm { padding: 0 9px; font-size: 13px; }
}

/* 4b. "Answers a spreadsheet won't give you": the four panels' live pictures, in the app's light look
   (the export one sits on the navy panel). Fluid widths: the panels are 78vw on phones. */
.pv { --fd-text: #0b0b0b; --fd-text-2: #52514e; --fd-muted: #898781; --fd-border: rgba(11,11,11,.1); --fd-primary: #0b245c; --fd-primary-weak: #e8ebf3; color: var(--fd-text); position: relative; }
.pv-card { background: #fff; border: 1px solid var(--fd-border); border-radius: 14px; box-shadow: var(--shadow); padding: clamp(14px, 2vw, 20px); }
.pv-title { font-size: 14px; font-weight: 650; letter-spacing: -0.01em; }
.pv-sub { margin-top: 2px; font-size: 12px; color: var(--fd-muted); }

/* €/hour by place */
.ph-rows { display: grid; gap: 12px; margin-top: 16px; }
.ph-row { display: grid; grid-template-columns: 62px minmax(0, 1fr) 46px; align-items: center; gap: 10px; }
.ph-lbl { font-size: 12px; color: var(--fd-text-2); text-align: right; white-space: nowrap; }
.ph-track { height: 26px; border-left: 1px solid #e1e0d9; display: flex; align-items: center; }
.ph-bar { display: block; height: 100%; border-radius: 0 6px 6px 0; transform-origin: 0 50%; }
.ph-val { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ph-axis { display: flex; justify-content: space-between; margin: 8px 56px 0 72px; font-size: 10px; color: var(--fd-muted); font-variant-numeric: tabular-nums; }

/* This year against last */
.yy-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.yy-switch { position: relative; display: inline-flex; padding: 3px; border-radius: 999px; background: #f1f0ea; }
.yy-pill { position: absolute; top: 3px; bottom: 3px; left: 3px; border-radius: 999px; background: var(--fd-primary); display: none; }
.yy-opt { position: relative; padding: 4px 10px; font-size: 12px; font-weight: 600; color: var(--fd-text-2); white-space: nowrap; transition: color .25s; }
.yy-opt.is-on { color: #fff; background: var(--fd-primary); border-radius: 999px; }
.pv.is-live .yy-pill { display: block; }
.pv.is-live .yy-opt.is-on { background: none; }
.yy-plot { position: relative; height: clamp(140px, 24vh, 210px); margin-top: 18px; }
.yy-grid { position: absolute; inset: 0 0 20px 0; display: flex; flex-direction: column; justify-content: space-between; }
.yy-grid span { position: relative; border-top: 1px solid #e1e0d9; }
.yy-grid em { position: absolute; left: 0; top: -15px; font-style: normal; font-size: 10px; color: var(--fd-muted); font-variant-numeric: tabular-nums; background: #fff; padding-right: 4px; }
.yy-cols { position: absolute; inset: 0; display: flex; justify-content: space-between; gap: 4px; padding-left: clamp(40px, 6vw, 56px); }
.yy-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.yy-pair { flex: 1; width: 100%; display: flex; justify-content: center; align-items: flex-end; gap: 2px; }
.yy-bar { display: block; width: min(12px, 40%); height: 100%; border-radius: 3px 3px 0 0; transform-origin: 50% 100%; }
.yy-bar.now { background: #2a78d6; }
.yy-bar.last { background: rgba(42, 120, 214, 0.32); }
.yy-col em { height: 16px; font-style: normal; font-size: 10px; color: var(--fd-muted); white-space: nowrap; }
.yy-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 11px; color: var(--fd-text-2); }
.yy-legend span { display: inline-flex; align-items: center; gap: 6px; }
.yy-legend i { width: 10px; height: 10px; border-radius: 2px; }
.yy-legend i.now { background: #2a78d6; } .yy-legend i.last { background: rgba(42, 120, 214, 0.32); }

/* No-shows: the KPI card and the highlight below it */
.pv-stack > div { display: grid; gap: 12px; }
.ns-kpi { background: #fff; border: 1px solid var(--fd-border); border-radius: 14px; box-shadow: var(--shadow); padding: clamp(16px, 2.2vw, 24px); display: flex; flex-direction: column; gap: 6px; }
.ns-label { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--fd-muted); }
.ns-val { font-size: clamp(44px, 6vw, 64px); font-weight: 750; letter-spacing: -0.03em; line-height: 1.05; color: #d03b3b; font-variant-numeric: tabular-nums; }
.ns-foot { font-size: 14px; color: var(--fd-muted); font-variant-numeric: tabular-nums; }
.ns-hl { background: #fff; border: 1px solid var(--fd-border); border-radius: 14px; box-shadow: var(--shadow); padding: 16px 18px; display: flex; align-items: center; gap: 14px; }

/* Export, on the navy panel: the app's button, the file filling with CSV lines, the file done */
.pv-export > div { display: grid; gap: 12px; justify-items: start; }
.ex-bar { width: 100%; display: flex; justify-content: flex-end; }
.ex-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px; border: 1px solid rgba(76, 175, 125, .6); color: #8fe0b4; font-size: 14px; font-weight: 600; background: rgba(255,255,255,.04); }
.ex-file { width: 100%; padding: 14px 16px; border-radius: 12px; background: #fff; color: #0b0b0b; display: grid; gap: 6px; overflow: hidden;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: clamp(11px, 1.2vw, 13px);
  -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
.ex-line { white-space: pre; min-height: 1.4em; }
.ex-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #217346; color: #fff; font-size: 13px; font-weight: 700; }
.panel-dark .pv-export { color: #fff; }

/* The panels' own pointer and pause button */
.pv .demo-pointer { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.pv.is-live .demo-pointer { opacity: 1; }
.hs-toggle {
  display: none; justify-self: center; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
}
.hscroll.is-live .hs-toggle { display: inline-flex; }
.hs-toggle:hover { color: var(--text); border-color: var(--text-2); }
.hs-toggle .fd-i-play, .hs-toggle.is-paused .fd-i-pause { display: none; }
.hs-toggle.is-paused .fd-i-play { display: inline; }
@media (max-width: 820px) {
  .ph-row { grid-template-columns: 54px minmax(0, 1fr) 40px; gap: 8px; }
  .ph-axis { margin: 8px 48px 0 62px; }
  .yy-opt { padding: 3px 7px; font-size: 11px; }
  .yy-bar { width: min(8px, 40%); }
}
/* The track is far wider than the screen; holding the column to the screen's width keeps the pause
   button centred on screen (the track still runs past the edge and slides as before). */
.hscroll.is-live .hscroll-pin { grid-template-columns: minmax(0, 100%); }
/* The pause button sits top-right of the section, level with the heading: always on screen and it
   takes no height from the panels. (The pin is fixed while it plays, so it anchors the button.) */
.hscroll.is-live .hscroll-pin { position: relative; }
.hscroll.is-live .hs-toggle { position: absolute; top: 108px; right: var(--gutter); z-index: 2; }
@media (max-width: 820px) {
  .hscroll.is-live .hs-toggle { top: 92px; width: 40px; padding: 0; justify-content: center; }
  .hs-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* Short desktop screens (e.g. 1280×720): this section tightens so heading, panels and all fit. */
@media (min-width: 821px) and (max-height: 800px) {
  .hscroll-pin { padding-top: 84px; gap: 18px; }
  .hscroll-title { max-width: 26ch; font-size: clamp(30px, 3.4vw, 46px); }
  .hscroll.is-live .hs-toggle { top: 92px; }
  .panel { min-height: 0; padding: 22px 26px; gap: 14px; }
  .panel h3 { font-size: clamp(22px, 2.2vw, 28px); }
  .yy-plot { height: 19vh; }
  .ph-rows { gap: 8px; margin-top: 10px; }
  .ph-track { height: 20px; }
  .ns-val { font-size: 46px; }
  .pv-stack > div, .pv-export > div { gap: 8px; }
}
/* Phones: seven axis ticks run together at this width; keep 0, 30 and 60. */
@media (max-width: 820px) { .ph-axis span:is(:nth-child(2), :nth-child(3), :nth-child(5), :nth-child(6)) { display: none; } }
/* Phones: the pause button centred under the panels, with its label (as under the steps); the room
   it took above the heading goes back, so heading, panels and button fit one screen. */
@media (max-width: 820px) {
  .hscroll-pin { padding-top: 84px; gap: 18px; }
  .hscroll.is-live .hs-toggle { position: static; justify-self: center; width: auto; padding: 0 16px; }
  .hs-toggle span { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
}
/* Short phones (about 780px tall): the Portuguese text runs longer, so this section tightens a little. */
@media (max-width: 820px) and (max-height: 800px) {
  .hscroll-pin { padding-top: 80px; gap: 14px; }
  .hscroll-title { font-size: 28px; }
  .panel { padding: 18px 20px; gap: 12px; }
  .panel h3 { font-size: 22px; }
  .panel p { font-size: 15px; }
  .yy-plot { height: 150px; }
}
/* Very short phones (iPhone SE, 667px tall, and smaller): no room under the panels, so the pause button
   goes back to a round icon at the top right, and the section tightens one more step. */
@media (max-width: 820px) and (max-height: 700px) {
  .hscroll-pin { padding-top: 78px; gap: 10px; }
  .hscroll-title { font-size: 25px; max-width: 14ch; }
  .hscroll.is-live .hs-toggle { position: absolute; top: 84px; right: var(--gutter); width: 40px; padding: 0; }
  .hs-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .panel { padding: 14px 16px; gap: 10px; }
  .panel h3 { font-size: 20px; }
  .panel p { font-size: 14px; line-height: 1.45; }
  .yy-plot { height: 118px; margin-top: 12px; }
  .ph-rows { gap: 6px; margin-top: 10px; }
  .ph-track { height: 18px; }
  .ns-kpi { padding: 12px 14px; }
  .ns-val { font-size: 36px; }
  .ns-hl { padding: 10px 12px; }
  .ex-file { padding: 10px 12px; gap: 4px; }
}
/* The hero picture: no permanent layer hint (it kept the screenshot rasterised soft once scaled). */
.hero-shot { will-change: auto; }

/* Per-element values from the pages (bar lengths, swatch colours): classes, as the CSP allows no inline styles. */
.w-95_77_ { width: 95.77%; }
.sw-_e0603a { background: #e0603a; }
.w-94_00_ { width: 94.00%; }
.sw-_8b5cf6 { background: #8b5cf6; }
.w-93_40_ { width: 93.40%; }
.sw-_2a78d6 { background: #2a78d6; }
.w-72_00_ { width: 72.00%; }
.sw-_1f9d76 { background: #1f9d76; }
.sy-scaleY_0_7613_ { transform: scaleY(0.7613); }
.sy-scaleY_0_6823_ { transform: scaleY(0.6823); }
.sy-scaleY_0_7740_ { transform: scaleY(0.7740); }
.sy-scaleY_0_6375_ { transform: scaleY(0.6375); }
.sy-scaleY_0_9538_ { transform: scaleY(0.9538); }
.sy-scaleY_0_7566_ { transform: scaleY(0.7566); }
.sy-scaleY_0_9403_ { transform: scaleY(0.9403); }
.sy-scaleY_0_8243_ { transform: scaleY(0.8243); }
.sy-scaleY_0_8465_ { transform: scaleY(0.8465); }
.sy-scaleY_0_7532_ { transform: scaleY(0.7532); }
.sy-scaleY_0_7393_ { transform: scaleY(0.7393); }
.sy-scaleY_0_8444_ { transform: scaleY(0.8444); }
.sy-scaleY_0_7765_ { transform: scaleY(0.7765); }
.sy-scaleY_0_7111_ { transform: scaleY(0.7111); }
.sy-scaleY_0_2396_ { transform: scaleY(0.2396); }
.sy-scaleY_0_1792_ { transform: scaleY(0.1792); }
.sy-scaleY_0_8091_ { transform: scaleY(0.8091); }
.sy-scaleY_0_8241_ { transform: scaleY(0.8241); }
.sy-scaleY_0_2388_ { transform: scaleY(0.2388); }
.sy-scaleY_0_2640_ { transform: scaleY(0.2640); }
.sw-_008300 { background: #008300; }
.sw-_e87ba4 { background: #e87ba4; }
.sw-_eda100 { background: #eda100; }
.sw-_1baf7a { background: #1baf7a; }
.sw-_eb6834 { background: #eb6834; }
.sw-_4a3aa7 { background: #4a3aa7; }
.sw-_9a9a9a { background: #9a9a9a; }
.w-70_ { width: 70%; }
.w-45_ { width: 45%; }
.w-40_ { width: 40%; }
.w-55_ { width: 55%; }