@import url('/tokens.css?v=c283b93b');

/* =====================================================================
   RetainSpace - Homepage styles (home.css)
   Tokens + fonts come from the shared /tokens.css (imported above).
   This file holds the homepage's component + layout styles only.
   ===================================================================== */

/* ---------- Reset / base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  margin: 0;
  background: var(--paper-white);
  color: var(--midnight-ink);
  font-family: var(--font-geist);
  font-weight: var(--weight-body);
  font-size: 16px;
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Whisper of film grain over the content to break the flatness. Sits above
   content (z<=3) but below the sticky nav (z=50) so the glass nav stays crisp.
   Non-interactive; dialed low enough to read as texture, not noise. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}

img { max-width: 100%; display: block; }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--deep-cobalt); }
/* inline links in body copy are distinguishable by more than color */
p a:not(.btn) { text-decoration: underline; text-underline-offset: 2px; }

h1, h2, h3, h4 { margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--deep-cobalt);
  outline-offset: 3px;
  border-radius: var(--r-inner);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---------- Type scale ---------- */
.t-caption { font-size: 10px; line-height: 1.4; letter-spacing: 0.06em; text-transform: uppercase; }
.t-body    { font-size: 14px; line-height: 1.35; }
.t-body-lg { font-size: 16px; line-height: 1.5; }
.t-subheading { font-size: 18px; line-height: 1.4; }

.display, .heading, .heading-lg, .heading-sm {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--ink-soft);
}
.heading-sm { font-size: 20px; line-height: 1.25; }
.heading    { font-size: clamp(26px, 3.4vw, 32px); line-height: 1.2; letter-spacing: -0.02em; }
.heading-lg { font-size: clamp(34px, 5vw, 48px); line-height: 1.17; }
.display    { font-size: clamp(44px, 8vw, 72px); line-height: 1.11; }

/* ---------- Layout primitives ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(24px, 5vw, 40px);
}

.section { padding-block: clamp(80px, 10vw, 140px); }
.section--tight { padding-block: clamp(52px, 6vw, 80px); }

/* One uniform white canvas between the dark hero and dark footer. The old
   panel/canvas tonal alternation is retired (see the white-canvas card rule
   further down); cards keep figure/ground from border + shadow, not a tint. */
.section--panel { background: transparent; }

.section-head { max-width: 880px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head .eyebrow { margin-bottom: 14px; }
.section-head p.lead {
  margin-top: 18px;
  color: var(--stone);
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.5;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--stone);
}
.eyebrow .ti { color: var(--stone); font-size: 16px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-geist);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
  line-height: 1;
  padding: 13px 28px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--pressed-charcoal);
  color: #fff;
  border-color: var(--pressed-charcoal);
}
.btn-primary:hover { background: #0e1219; color: #fff; box-shadow: var(--shadow-sm); }

.btn-ghost {
  background: transparent;
  color: var(--midnight-ink);
  border-color: var(--hairline-strong);
}
.btn-ghost:hover { border-color: var(--stone); color: var(--midnight-ink); background: var(--paper-white); }

/* On dark / gradient surfaces */
.btn-light {
  background: #fff;
  color: var(--pressed-charcoal);
  border-color: #fff;
}
.btn-light:hover { background: #f3f8ff; color: var(--pressed-charcoal); }

.btn-on-dark {
  background: transparent;
  color: #fff;
  border-color: var(--border-on-dark);
}
.btn-on-dark:hover { border-color: rgba(255,255,255,.5); color: #fff; }

.btn-lg { padding: 15px 32px; font-size: 16px; }
.btn-sm { padding: 9px 16px; font-size: 14px; }
.btn-full { width: 100%; }

/* ---------- Navigation ---------- */
/* floating capsule: a soft pill detached from the top edge, not a bar */
.nav {
  position: sticky;
  top: 14px;
  z-index: 50;
  padding-inline: clamp(12px, 4vw, 24px);
  margin-top: 14px;
}
.nav-inner {
  max-width: 1060px;
  margin-inline: auto;
  padding: 11px 14px 11px 24px;
  display: flex;
  align-items: center;
  gap: 28px;
  background: rgba(250, 253, 255, 0.78);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-lg);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--midnight-ink);
}
.brand:hover { color: var(--midnight-ink); }
.brand-mark {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: var(--r-inner);
  background: var(--pressed-charcoal);
  color: #fff;
  font-size: 17px;
}
.brand-mark .ti { line-height: 1; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
  margin-inline: auto;
}
.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--stone);
  letter-spacing: -0.01em;
}
.nav-links a:hover { color: var(--midnight-ink); }

.nav-actions { display: flex; align-items: center; gap: 16px; }
.nav-login {
  font-size: 14px;
  font-weight: 500;
  color: var(--midnight-ink);
}
.nav-login:hover { color: var(--midnight-ink); text-decoration: underline; text-underline-offset: 3px; }

.nav-menu-btn {
  display: none;
  align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline-strong);
  background: var(--paper-white);
  color: var(--midnight-ink);
  font-size: 20px;
  cursor: pointer;
}

.mobile-nav {
  display: none;
  padding: 8px clamp(20px, 5vw, 40px) 20px;
}
.mobile-nav.open { display: block; }
.mobile-nav-card {
  background: var(--paper-white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 14px;
  box-shadow: var(--shadow-lg);
  max-width: var(--maxw);
  margin-inline: auto;
}
.mobile-nav-card a {
  display: block;
  padding: 12px 14px;
  border-radius: var(--r-inner);
  font-size: 16px;
  font-weight: 500;
  color: var(--midnight-ink);
}
.mobile-nav-card a:hover { background: var(--sky-wash); }
.mobile-nav-card .btn { margin-top: 8px; }

/* ---------- Pills / badges ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  background: var(--paper-white);
  border: 1px solid var(--hairline);
  color: var(--stone);
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cornflower); }
.pill--on-dark {
  background: rgba(255,255,255,.12);
  border-color: var(--border-on-dark);
  color: rgba(255,255,255,.92);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge .ti { font-size: 12px; }
.badge-pending  { background: #fff2eb; color: #b54708; border-color: #ffd8c2; }
.badge-success  { background: var(--sprout); color: var(--success); border-color: var(--success-border); }
.badge-info     { background: var(--morning-tint); color: #0057b8; border-color: #a9d4ff; }
.badge-new      { background: var(--lilac-mist); color: #6b34c0; border-color: #ddc6f7; }
.badge-neutral  { background: var(--cloud-veil); color: var(--stone); border-color: var(--hairline); }

/* ---------- Hero ---------- */
.hero {
  padding-top: clamp(56px, 8vw, 100px);
  padding-bottom: clamp(64px, 9vw, 112px);
  position: relative;
  overflow: hidden; /* contain the off-screen window bleed + accent blob */
  /* Dark introduction: the hero is the one dark chapter at the top, bookended
     by the dark footer at the bottom. Everything between is white. */
  background: var(--ink-soft);
  color: #fff;
}

/* asymmetric split: copy pinned left (~5/12), product window on the right (~7/12) */
.hero .container { position: relative; z-index: 1; }
/* centered, top-down: headline stack on top, product mockup large below */
.hero-grid {
  display: block;
  text-align: center;
}

/* one intentional soft wash, centered to lift the product mockup below */
.hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  left: 50%; top: 46%;
  transform: translateX(-50%);
  width: min(1180px, 116%);
  height: 760px;
  /* cobalt glow lifting the product mockup off the dark canvas */
  background: radial-gradient(56% 54% at 50% 40%, rgba(79,157,255,.28), transparent 70%);
}
.hero::after { content: none; }

.hero-head { max-width: 880px; margin: 0 auto; }
.hero h1 {
  margin-top: 22px;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 0.99;
  font-size: clamp(38px, 6.6vw, 70px);
  color: #fff;
}
.hero h1 .line-1 { display: block; font-weight: 500; font-size: 0.76em; letter-spacing: -0.03em; }
.hero h1 .line-2 { display: block; margin-top: 0.06em; }
/* confidence through type: the headline is one solid white, accent stays cobalt */
.hero h1 .accent { color: #fff; }
.hero-sub {
  margin: 28px auto 0;
  max-width: 580px;
  font-size: clamp(16px, 2.1vw, 18px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}
.hero-cta { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.hero-note { margin-top: 16px; font-size: 13px; color: rgba(255, 255, 255, 0.5); }

/* hero product stage - window bleeds off the right edge of the viewport */
.hero-stage {
  position: relative;
  max-width: 1080px;
  margin: clamp(44px, 6vw, 76px) auto 0;
}

/* floating mini cards over the hero window */
.float-card {
  position: absolute;
  z-index: 3;
  background: var(--paper-white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lg);
  padding: 14px 16px;
}
.float-approval { top: -30px; left: clamp(-34px, -1.5vw, 4px); width: 270px; }
.float-metric   { top: 96px; right: clamp(-34px, -1.5vw, 4px); left: auto; bottom: auto; width: 240px; }

.float-title { font-size: 13px; font-weight: 600; color: var(--midnight-ink); }
.float-sub   { font-size: 12px; color: var(--stone); margin-top: 2px; }
.float-actions { display: flex; gap: 8px; margin-top: 12px; }
.float-actions .btn { flex: 1; padding: 8px 10px; font-size: 12px; }

/* ---------- App window (mockup frame) ---------- */
.window {
  background: var(--paper-white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  position: relative;
  z-index: 1;
  transition: transform .35s ease, box-shadow .35s ease;
}
/* feature-band mockups settle slightly on hover (same restraint as the tilt) */
.band-visual .window:hover { transform: translateY(-4px); box-shadow: rgba(4,69,144,0.16) 0 36px 70px -18px; }
.window--hero {
  box-shadow: rgba(4,69,144,0.12) 0px 30px 60px -12px;
  /* show the top of the product and let the rest fall out of view */
  max-height: clamp(400px, 56vh, 560px);
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
}

/* framing variant so the four feature bands don't read as identical frames:
   one window is subtly tilted, reading as a window into a larger product */
.window--tilt { transform: rotate(-1.4deg); transition: transform .3s ease; }
.window--tilt:hover { transform: rotate(0deg) translateY(-4px); }
@media (max-width: 880px) {
  .window--tilt { transform: none; }
}

.window-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--hairline);
  background: var(--cloud-veil);
}
.window-bar .traffic { display: flex; gap: 6px; }
.window-bar .traffic span { width: 11px; height: 11px; border-radius: 50%; background: #d6dae1; }
.window-url {
  margin-left: 10px;
  font-size: 12px;
  color: var(--stone);
  background: var(--paper-white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  padding: 4px 14px;
}

.window-body { display: grid; grid-template-columns: 200px 1fr; }

/* app sidebar */
.app-side {
  border-right: 1px solid var(--hairline);
  padding: 18px 14px;
  background: var(--paper-white);
}
.app-side .ws-name {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--midnight-ink);
  padding: 6px 10px 14px;
}
.app-side .ws-name .mk {
  width: 22px; height: 22px; border-radius: 9999px;
  background: var(--cornflower); color: #fff;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px;
  border-radius: var(--r-inner);
  font-size: 13px; font-weight: 500;
  color: var(--stone);
}
.nav-item .ti { font-size: 16px; color: var(--stone); }
.nav-item.active { background: var(--sky-wash); color: var(--midnight-ink); }
.nav-item.active .ti { color: var(--midnight-ink); }

/* app main */
.app-main { padding: 20px; background: var(--paper-white); }
.app-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 16px;
}
.app-header .h {
  font-family: var(--font-display);
  font-weight: 600; font-size: 18px; line-height: 1.2; letter-spacing: -0.02em;
  color: var(--midnight-ink);
}
/* text-indent: optical nudge so the sub's flat "H" stem lines up under the
   bold round "G" of the greeting (the glyph boxes are pixel-aligned; the round
   cap just reads as if the line below is tabbed in). */
.app-header .sub { font-size: 12px; line-height: 1.4; color: var(--stone); margin-top: 3px; text-indent: -1px; }
.app-header .badge { flex: none; margin-top: 1px; }

/* stat tiles */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.stat-tile {
  background: var(--paper-white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-img);
  padding: 14px;
}
.stat-tile .l { font-size: 11px; color: var(--stone); font-weight: 500; }
.stat-tile .v {
  font-family: var(--font-display);
  font-weight: 600; font-size: 24px; letter-spacing: -0.02em;
  color: var(--midnight-ink); margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.stat-tile .chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 600; color: var(--success); margin-top: 6px;
}

/* list rows */
.list-card {
  margin-top: 16px;
  background: var(--paper-white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-img);
  overflow: hidden;
}
.list-card .lc-head {
  padding: 12px 16px;
  font-size: 12px; font-weight: 600; color: var(--stone);
  border-bottom: 1px solid var(--hairline);
  display: flex; justify-content: space-between; align-items: center;
}
.list-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--hairline);
}
.list-row:last-child { border-bottom: 0; }
.list-row .lr-main { display: flex; align-items: center; gap: 11px; min-width: 0; }
.list-row .lr-ico {
  width: 32px; height: 32px; flex: none;
  border-radius: var(--r-inner);
  display: grid; place-items: center;
  background: var(--sky-wash);
  color: var(--stone);
  font-size: 16px;
}
.list-row .lr-t { font-size: 13px; font-weight: 500; color: var(--midnight-ink); }
.list-row .lr-s { font-size: 11px; color: var(--stone); margin-top: 1px; }

/* service-area card (portal) */
.svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.svc-card {
  background: var(--paper-white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-img);
  padding: 14px;
}
.svc-card .svc-top { display: flex; align-items: center; justify-content: space-between; }
.svc-card .svc-ico {
  width: 30px; height: 30px; border-radius: var(--r-inner);
  display: grid; place-items: center; font-size: 16px; color: #fff;
}
.svc-card .svc-name { font-size: 13px; font-weight: 600; color: var(--midnight-ink); margin-top: 10px; }
.svc-card .svc-meta { font-size: 11px; color: var(--stone); margin-top: 3px; }
.svc-bar { height: 6px; border-radius: var(--r-pill); background: var(--cloud-veil); margin-top: 12px; overflow: hidden; }
.svc-bar > span { display: block; height: 100%; border-radius: var(--r-pill); background: var(--cornflower); }

/* ---------- Benefits (bento) ---------- */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 48px;
}
/* one deliberately larger tile breaks the equal-grid uniformity */
.benefit.bento-lg {
  grid-column: span 2;
  grid-row: span 1;
}
.benefit {
  border-radius: var(--r-card);
  border: 1px solid var(--hairline);
  background: var(--paper-white);
  box-shadow: var(--shadow-sm);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
}
.benefit.bento-lg .b-ico { width: 56px; height: 56px; font-size: 28px; }
.benefit.bento-lg h3 { font-size: clamp(22px, 2.6vw, 28px); }
.benefit.bento-lg p { font-size: 15px; max-width: 46ch; }
/* one consistent card surface; colour lives only in the icon tiles */
.benefit.tint-morning,
.benefit.tint-lilac,
.benefit.tint-sprout,
.benefit.tint-sky { background: var(--paper-white); }
.benefit .b-ico {
  width: 46px; height: 46px;
  border-radius: var(--r-img);
  display: grid; place-items: center;
  font-size: 23px; color: #fff;
  margin-bottom: 18px;
}
.benefit .b-ico.ico-corn { background: var(--cornflower); }
.benefit .b-ico.ico-ame  { background: var(--amethyst); }
.benefit .b-ico.ico-tang { background: var(--tangerine); }
.benefit .b-ico.ico-mus  { background: var(--mustard); }
.benefit h3 {
  font-family: var(--font-display);
  font-weight: 600; font-size: 19px; letter-spacing: -0.02em;
  color: var(--midnight-ink);
}
.benefit p { margin-top: 10px; font-size: 14px; line-height: 1.45; color: var(--midnight-ink); opacity: .82; }

/* ---------- How it works (staggered numbered timeline) ---------- */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 56px;
  align-items: start;
  position: relative;
}
.step {
  background: var(--paper-white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 44px 24px 24px;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}
/* stagger: lift odd steps, drop even steps for an editorial offset */
.step:nth-child(odd)  { transform: translateY(-10px); }
.step:nth-child(even) { transform: translateY(18px); }
.step-num {
  position: absolute;
  top: -17px; left: 24px;
  width: 34px; height: 34px;
  border-radius: var(--r-pill);
  background: var(--pressed-charcoal);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600; font-size: 15px;
  display: grid; place-items: center;
  box-shadow: 0 0 0 6px var(--sky-wash);
}
.step h3 {
  font-family: var(--font-display);
  font-weight: 600; font-size: 17px; letter-spacing: -0.02em;
  color: var(--midnight-ink);
}
.step p { margin-top: 8px; font-size: 13px; line-height: 1.45; color: var(--stone); }

/* mini mockup inside a step */
.mini {
  margin-top: 18px;
  background: var(--paper-white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-img);
  padding: 12px;
}
.mini-row {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 0;
}
.mini-row + .mini-row { border-top: 1px solid var(--hairline); }
.mini-ico {
  width: 26px; height: 26px; flex: none;
  border-radius: var(--r-inner); display: grid; place-items: center;
  background: var(--sky-wash); color: var(--stone); font-size: 14px;
}
.mini-line { flex: 1; min-width: 0; }
.mini-line .ml-t { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--midnight-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-line .ml-s { display: block; font-size: 10.5px; color: var(--stone); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-avatar {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 600;
}

/* ---------- Feature showcase (alternating bands) ---------- */
#features { position: relative; }
#features .container { position: relative; z-index: 1; }
.band {
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
}
.band + .band { margin-top: clamp(64px, 9vw, 110px); }
.band.reverse .band-copy { order: 2; }
.band.reverse .band-visual { order: 1; }

.band-copy { max-width: 460px; }
.band-copy .feature-ico {
  width: 48px; height: 48px;
  border-radius: var(--r-img);
  display: grid; place-items: center; font-size: 23px; color: #fff;
  margin-bottom: 18px;
}
.band-copy h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 3.6vw, 34px);
  line-height: 1.12; letter-spacing: -0.02em;
  color: var(--midnight-ink);
}
.band-copy p { margin-top: 16px; font-size: 16px; line-height: 1.5; color: var(--stone); }
.band-list { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.band-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--midnight-ink); }
.band-list .ti { color: var(--stone); font-size: 18px; flex: none; margin-top: 1px; }

/* ===== Tabbed feature showcase ===== */
.feature-tabs {
  display: flex;
  justify-content: center;
  gap: clamp(10px, 3vw, 44px);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: clamp(40px, 6vw, 64px);
}
.ftab {
  position: relative;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 0 2px 18px;
  background: none; border: none; cursor: pointer;
  font-family: inherit;
  font-size: 15px; font-weight: 500; letter-spacing: -0.01em;
  color: var(--stone); white-space: nowrap;
  transition: color .18s ease;
}
.ftab i { font-size: 19px; }
.ftab:hover { color: var(--midnight-ink); }
.ftab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: center;
  transition: transform .22s ease;
}
.ftab.is-active { color: var(--midnight-ink); }
.ftab.is-active::after { transform: scaleX(1); }
.ftab:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 5px; }

/* Deck: every panel shares one grid cell, so the deck is always as tall as the
   tallest panel. Inactive panels stay in layout (visibility, not display) so
   switching tabs never shifts the page. */
.tab-deck { display: grid; }
.tab-deck > .tab-panel {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
  opacity: 0; visibility: hidden;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  pointer-events: none;
}
.tab-deck > .tab-panel.is-active {
  opacity: 1; visibility: visible;
  transform: none;
  pointer-events: auto;
}
.tab-panel .band-copy { max-width: 460px; }

/* ===== Unified feature explorer: the tabs live INSIDE one cohesive surface ===== */
.feature-explorer {
  max-width: 1080px; margin-inline: auto;
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  background: var(--paper-white);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.feature-explorer .feature-tabs {
  margin: 0;
  justify-content: center;
  gap: clamp(4px, 1.2vw, 12px);
  padding: 9px clamp(10px, 2vw, 18px);
  border-bottom: 1px solid var(--hairline);
  background: var(--sky-wash);
}
.feature-explorer .ftab { padding: 9px 15px; border-radius: 10px; }
.feature-explorer .ftab::after { display: none; }   /* the active state is a pill, not an underline */
.feature-explorer .ftab.is-active {
  background: var(--paper-white);
  box-shadow: 0 1px 2px rgba(16,24,40,.06);
  color: var(--midnight-ink);
}
.feature-explorer .tab-deck { padding: clamp(28px, 4vw, 56px); }

/* "From the founder" teaser (homepage card linking to /about) */
.founder-note {
  display: flex; align-items: center; gap: clamp(18px, 3vw, 28px);
  max-width: 760px; margin-inline: auto;
  padding: clamp(22px, 3vw, 30px) clamp(24px, 3.5vw, 36px);
  background: var(--paper-white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card, 18px);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.founder-note:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent-tint, #d7e6ff);
}
.founder-note .fn-avatar {
  width: 60px; height: 60px; flex: none; border-radius: 9999px;
  background: var(--accent); color: #fff; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: .02em;
}
.founder-note .fn-eyebrow {
  display: block; font-size: 13px; font-weight: 500; color: var(--fog); margin-bottom: 8px;
}
.founder-note .fn-quote {
  display: block; font-size: clamp(15px, 1.7vw, 17px); line-height: 1.5;
  color: var(--midnight-ink);
}
.founder-note .fn-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  font-size: 14px; font-weight: 600; color: var(--accent);
}
.founder-note .fn-link i { font-size: 16px; transition: transform .2s ease; }
.founder-note:hover .fn-link i { transform: translateX(3px); }
@media (max-width: 600px) {
  .founder-note { flex-direction: column; align-items: flex-start; }
}

/* brand asset folder grid mockup */
.folder-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.folder {
  background: var(--paper-white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-img);
  padding: 16px;
}
.folder .f-ico {
  width: 38px; height: 38px; border-radius: var(--r-img);
  display: grid; place-items: center; font-size: 19px; color: #fff;
  margin-bottom: 14px;
}
.folder .f-name { font-size: 13px; font-weight: 600; color: var(--midnight-ink); }
.folder .f-count { font-size: 11px; color: var(--stone); margin-top: 2px; }

/* analytics / social metric mockup */
.metric-card {
  background: var(--paper-white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-img);
  padding: 16px;
}
.metric-card .mc-top { display: flex; align-items: center; gap: 10px; }
.metric-card .mc-ico {
  width: 34px; height: 34px; border-radius: var(--r-inner);
  display: grid; place-items: center; font-size: 17px; color: #fff;
}
.metric-card .mc-platform { font-size: 13px; font-weight: 600; color: var(--midnight-ink); }
.metric-card .mc-handle { font-size: 11px; color: var(--stone); }
.metric-card .mc-value {
  font-family: var(--font-display);
  font-weight: 600; font-size: 30px; letter-spacing: -0.02em;
  color: var(--midnight-ink); margin-top: 14px;
}
.metric-card .mc-delta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; color: var(--success); margin-top: 4px;
}
.metric-card .mc-delta .muted { color: var(--stone); font-weight: 500; }

/* tiny bar chart */
.spark { display: flex; align-items: flex-end; gap: 6px; height: 64px; margin-top: 16px; }
.spark span { flex: 1; border-radius: 8px 8px 0 0; background: var(--grad-sky); border: 1px solid #bfe2ff; border-bottom: 0; }
.spark span.hi { background: var(--cornflower); border-color: transparent; }

/* request card mockup */
.req-card {
  background: var(--paper-white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-img);
  padding: 16px;
}
.req-card .rc-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.req-card .rc-type {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; color: var(--stone);
}
.req-card .rc-title { font-size: 15px; font-weight: 600; color: var(--midnight-ink); margin-top: 12px; }
.req-card .rc-desc { font-size: 13px; color: var(--stone); margin-top: 6px; line-height: 1.45; }
.req-card .rc-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hairline);
}
.req-card .rc-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--stone); }

/* approval mockup (showcase) */
.approval {
  background: var(--paper-white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-img);
  padding: 16px;
}
.approval .ap-row { display: flex; align-items: center; gap: 12px; }
.approval .ap-thumb {
  width: 56px; height: 44px; flex: none; border-radius: var(--r-img);
  display: grid; place-items: center; font-size: 20px;
}
.approval .ap-title { font-size: 14px; font-weight: 600; color: var(--midnight-ink); }
.approval .ap-sub { font-size: 12px; color: var(--stone); margin-top: 2px; }
.approval .ap-actions { display: flex; gap: 8px; margin-top: 14px; }
.approval .ap-actions .btn { flex: 1; padding: 9px; font-size: 13px; }

.placeholder-tag {
  margin-top: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--fog);
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--r-pill);
  padding: 5px 12px;
}
/* compact variant that sits in a window's chrome bar (right-aligned) */
.placeholder-tag--bar {
  margin: 0 0 0 auto;
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  background: var(--paper-white);
}
.placeholder-tag--bar .ti { font-size: 12px; }
@media (max-width: 640px) {
  .placeholder-tag--bar { display: none; }
}

/* ---------- Security (dark band) ---------- */
/* light section, consistent with the rest of the page (no dark panel) */
.security-band {
  position: relative;
}
.security-band::after { content: none; }
.security-band .eyebrow,
.security-band .eyebrow .ti { color: var(--stone); }
.security-band h2 { color: var(--ink-soft); margin-top: 14px; }
.security-band .lead { color: var(--stone); }
.sec-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 44px;
}
.sec-item {
  background: var(--paper-white);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-sm);
  border-radius: var(--r-card);
  padding: 22px;
}
.sec-item .s-ico {
  width: 40px; height: 40px; border-radius: var(--r-img);
  display: grid; place-items: center; font-size: 20px;
  background: var(--sky-wash);
  border: 1px solid var(--hairline);
  margin-bottom: 14px;
}
.sec-item .s-ico .ti { color: var(--cornflower); }
.sec-item h3 { font-size: 15px; font-weight: 600; color: var(--midnight-ink); letter-spacing: -0.01em; }
.sec-item p { margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--stone); }

/* ---------- Pricing ---------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 48px;
  align-items: stretch;
}
@media (max-width: 1080px) {
  .pricing-grid { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin-inline: auto; }
}
.plan {
  background: var(--paper-white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
}
.plan-name {
  font-family: var(--font-display);
  font-weight: 600; font-size: 18px; letter-spacing: -0.02em;
  color: var(--midnight-ink);
}
.plan-for { font-size: 13px; color: var(--stone); margin-top: 6px; min-height: 38px; }
.plan-price { display: flex; align-items: baseline; gap: 4px; margin-top: 18px; }
.plan-price .amt {
  font-family: var(--font-display);
  font-weight: 600; font-size: 44px; letter-spacing: -0.02em;
  color: var(--midnight-ink); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.plan-price .per { font-size: 14px; color: var(--stone); }
.plan-year { font-size: 12.5px; color: var(--fog); margin-top: 4px; }
.plan-line { font-size: 14px; line-height: 1.45; color: var(--stone); margin-top: 14px; min-height: 60px; }
.plan .btn { margin-top: 18px; }
.plan-list { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.plan-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--midnight-ink); }
.plan-list .ti { color: var(--stone); font-size: 18px; flex: none; margin-top: 1px; }

/* featured plan - same paper card, distinguished by emphasis not fill */
.plan.featured {
  border: 1.5px solid var(--pressed-charcoal);
  box-shadow: var(--shadow-lg);
  position: relative;
  transform: translateY(-8px);
}
.plan.featured .plan-list .ti { color: var(--pressed-charcoal); }
.plan-badge {
  position: absolute;
  top: -13px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--pressed-charcoal);
  border: 1px solid var(--pressed-charcoal);
  color: #fff;
  font-size: 11px; font-weight: 600;
  padding: 5px 12px; border-radius: var(--r-pill);
  white-space: nowrap;
}

.pricing-note { margin-top: 28px; text-align: center; font-size: 13px; color: var(--stone); }

/* ── FAQ ── */
.faq-list { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: var(--paper-white); border: 1px solid var(--hairline); border-radius: var(--r-img); padding: 4px 20px; transition: border-color .2s ease; }
.faq-item:hover { border-color: var(--hairline-strong); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 600; font-size: 15px; color: var(--ink-soft); padding: 16px 0; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 20px; font-weight: 400; color: var(--fog-decor); line-height: 1; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: var(--stone); }

/* ---------- Final CTA ---------- */
.cta-band {
  border-radius: var(--r-card);
  background: var(--paper-white);
  border: 1px solid var(--hairline);
  color: var(--midnight-ink);
  padding: clamp(60px, 7vw, 88px);
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
/* soft single-accent mesh: two cobalt glows (kept on-brand; no second hue) */
.cta-band::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(42% 60% at 16% 8%, rgba(79,157,255,.16), transparent 60%),
    radial-gradient(46% 66% at 86% 96%, rgba(10,108,255,.12), transparent 62%);
  pointer-events: none;
  z-index: 0;
}
.cta-band > .cta-eyebrow,
.cta-band > h2,
.cta-band > p,
.cta-band > .cta-actions { position: relative; z-index: 2; }
.cta-eyebrow {
  justify-content: center;
  margin-bottom: 16px;
  background: var(--paper-white);
  border: 1px solid var(--hairline);
  padding: 6px 14px; border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
}
.cta-band h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 4.4vw, 44px);
  line-height: 1.08; letter-spacing: -0.02em;
  color: var(--ink-soft);
  max-width: 820px; margin-inline: auto;
}
.cta-band p { margin: 16px auto 0; max-width: 540px; color: var(--stone); font-size: 16px; }
.cta-actions { margin-top: 30px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* bookend floating product chips (echo the hero) */
.cta-float {
  position: absolute; z-index: 1;
  display: flex; align-items: center; gap: 10px;
  background: var(--paper-white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-img);
  box-shadow: var(--shadow-lg);
  padding: 11px 14px 11px 11px;
}
.cta-float .cf-ico {
  width: 30px; height: 30px; flex: none;
  border-radius: var(--r-inner);
  display: grid; place-items: center; font-size: 16px;
  background: var(--sky-wash);
}
.cta-float .cf-t { font-size: 12.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--midnight-ink); }
.cta-float .cf-s { font-size: 11px; color: var(--stone); margin-top: 1px; }
.cta-float--a { left: clamp(20px, 5vw, 56px); bottom: clamp(28px, 5vw, 52px); transform: rotate(-2deg); }
.cta-float--b { right: clamp(20px, 5vw, 56px); top: clamp(28px, 5vw, 52px); transform: rotate(2deg); }
.cta-float--c { left: clamp(20px, 5vw, 56px); top: clamp(28px, 5vw, 52px); transform: rotate(2deg); }
.cta-float--d { right: clamp(20px, 5vw, 56px); bottom: clamp(28px, 5vw, 52px); transform: rotate(-2deg); }
.cta-float--e { left: clamp(20px, 5vw, 56px); top: 50%; transform: translateY(-50%) rotate(-2deg); }
.cta-float--f { right: clamp(20px, 5vw, 56px); top: 50%; transform: translateY(-50%) rotate(2deg); }
@media (max-width: 980px) { .cta-float { display: none; } }

/* ---------- Footer ---------- */
.footer {
  padding: clamp(56px, 8vw, 88px) 0 36px; overflow: hidden;
  background: var(--ink-soft); color: #fff;
}
.footer-grid {
  display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
}
.footer-brand { max-width: 320px; }
.footer-brand .brand { font-size: 18px; color: #fff; }
.footer-tagline { margin-top: 14px; font-size: 14px; line-height: 1.55; color: rgba(255,255,255,0.6); }
.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
.footer-col h4 { font-size: 13px; font-weight: 600; color: #fff; margin: 0 0 3px; }
.footer-col a,
.footer-col .footer-cc {
  font-size: 14px; color: rgba(255,255,255,0.62); background: none; border: 0; padding: 0;
  font: inherit; font-size: 14px; cursor: pointer; text-align: left;
}
.footer-col a:hover, .footer-col .footer-cc:hover { color: #fff; }
.footer-bar { margin-top: clamp(36px, 5vw, 56px); padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.12); }
.footer-copy { font-size: 13px; color: rgba(255,255,255,0.45); }
/* oversized, near-invisible wordmark as a quiet brand flourish */
.footer-mark {
  margin: 18px 0 -0.18em; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(64px, 17vw, 220px); line-height: 0.9; letter-spacing: -0.045em;
  color: #fff; opacity: 0.05; user-select: none;
  white-space: nowrap; pointer-events: none;
}
@media (max-width: 820px) {
  .footer-grid { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .footer-brand { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 460px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ===================================================================
   Responsive
   =================================================================== */
@media (max-width: 1024px) {
  .benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .benefit.bento-lg { grid-column: span 2; }
  .steps-grid { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .step:nth-child(odd), .step:nth-child(even) { transform: none; }
  .sec-grid { grid-template-columns: repeat(2, 1fr); }
  .float-approval { left: -10px; width: 250px; }
  .float-metric { right: -6px; }
}

@media (max-width: 880px) {
  .nav-links { display: none; }
  .nav-actions .nav-login,
  .nav-actions .btn { display: none; }
  .nav-menu-btn { display: inline-flex; }
  .nav-actions { margin-left: auto; }

  .band,
  .band.reverse .band-copy,
  .band.reverse .band-visual { grid-template-columns: 1fr; }
  .band { grid-template-columns: 1fr; }
  .band.reverse .band-copy { order: 1; }
  .band.reverse .band-visual { order: 2; }
  .band-copy { max-width: none; }

  /* Tabbed showcase stacks: copy above visual */
  .tab-deck > .tab-panel { grid-template-columns: 1fr; }
  .tab-deck > .tab-panel .band-copy { order: 1; }
  .tab-deck > .tab-panel .band-visual { order: 2; }
  .tab-panel .band-copy { max-width: none; }

  /* Tabs become wrapping pills: every tab stays visible without a swipe */
  .feature-tabs {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    border-bottom: none;
    margin-bottom: 32px;
  }
  .ftab {
    flex: 0 0 auto;
    padding: 8px 14px;
    border: 1px solid var(--hairline);
    border-radius: 9999px;
    font-size: 13.5px;
    background: var(--paper-white);
  }
  .ftab i { font-size: 17px; }
  .ftab::after { display: none; }
  .ftab.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }
  .ftab.is-active i { color: #fff !important; }

  .pricing-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .plan.featured { order: -1; }
  .plan-for, .plan-line { min-height: 0; }

  .hero-head { max-width: none; }
  /* product window first, the two supporting cards stack cleanly below it */
  .hero-stage { margin-top: 40px; display: flex; flex-direction: column; gap: 14px; }
  .window--hero { max-height: none; -webkit-mask-image: none; mask-image: none; order: -1; }
  .float-card { position: static; width: 100% !important; margin: 0; }
  .float-metric { display: none; }
}

@media (max-width: 640px) {
  .benefits-grid { grid-template-columns: 1fr; }
  .benefit.bento-lg { grid-column: span 1; }
  .steps-grid { grid-template-columns: 1fr; }
  .sec-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-grid { grid-template-columns: 1fr; }
  .folder-grid { grid-template-columns: repeat(2, 1fr); }
  .window-body { grid-template-columns: 1fr; }
  .app-side { display: none; }
  .hero-cta .btn, .cta-actions .btn { flex: 1; }
  .window-url { display: none; }
}

/* ---------- Scroll reveal (subtle, curated section entrances) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1);
  will-change: opacity, transform;
}
.reveal.in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
}

/* Micro-interactions: a whisper, not a lift. Static content cards settle into
   focus on hover via a faint border + shadow only (no transform), since they
   are not clickable. Clickable elements keep their own button transitions. */
.benefit, .step, .sec-item, .plan { transition: border-color .2s ease, box-shadow .2s ease; }
.benefit:hover, .step:hover, .sec-item:hover, .plan:not(.featured):hover {
  border-color: var(--hairline-strong);
  box-shadow: rgba(4,69,144,0.10) 0 12px 26px -6px;
}
@media (prefers-reduced-motion: reduce) {
  .window, .window--tilt { transition: none; }
  .band-visual .window:hover, .window--tilt:hover { transform: none; }
  .founder-note:hover, .plan:not(.featured):hover { transform: none; }
  .tab-deck > .tab-panel { transition: opacity .12s ease, visibility .12s ease; transform: none; }
  .tab-deck > .tab-panel.is-active { transform: none; }
  .ftab::after { transition: none; }
}


/* =====================================================================
   Premium design pass (promoted from the v2 iteration). Restraint: one
   accent, monochrome icons, calmer canvas, tighter radii, Geist type.
   ===================================================================== */
/* ---------------------------------------------------------------------
   1. Retune the palette + radius tokens. Because home.css is built on
   these tokens, redefining them here cascades the new system everywhere
   at once - one calm canvas, one ink, crisp hairlines, tighter radii.
   --------------------------------------------------------------------- */
:root {
  --accent:        #0a6cff;             /* the single accent */
  --accent-tint:   #eaf1ff;             /* icon-tile surface */

  --sky-wash:      #f6f8fb;             /* calmer canvas (was a saturated blue) */
  --paper-white:   #ffffff;
  --cloud-veil:    #f1f4f8;
  --midnight-ink:  #0b0f17;
  --ink-soft:      #0b0f17;
  --stone:         #586173;             /* refined muted text */
  --fog:           #7a8496;
  --fog-decor:     #aab2c0;

  --hairline:        rgba(15, 22, 38, 0.09);
  --hairline-strong: rgba(15, 22, 38, 0.16);
  --shadow-sm:  0 1px 2px rgba(16,24,40,.05);
  --shadow-lg:  0 1px 2px rgba(16,24,40,.04), 0 16px 40px -16px rgba(16,24,40,.16);

  --r-card:  18px;                      /* was 32 - far less bubbly */
  --r-img:   12px;
  --r-inner: 10px;
  --maxw:    1200px;                    /* wider, more confident content column */

  /* Cleaner type: unify the whole page on Geist (drop Schibsted for headings).
     One neutral grotesque reads more premium and cohesive, like Dock/Devin. */
  --font-display: var(--font-geist);
}

body { letter-spacing: var(--tracking-body); }

/* ---------------------------------------------------------------------
   2. Typography - tighter tracking, cleaner hierarchy.
   --------------------------------------------------------------------- */
.display, .heading, .heading-lg, .heading-sm, .hero h1 {
  color: var(--ink-soft);
  letter-spacing: -0.028em;
  text-wrap: balance;
}
/* Sub-headlines / lead paragraphs: avoid a lone orphan word on the last line. */
.lead, .hero-sub, .section-head p { text-wrap: pretty; }
.heading-lg { font-size: clamp(30px, 4.2vw, 44px); line-height: 1.12; }
.heading    { font-size: clamp(24px, 3vw, 30px); }
.section-head p.lead { color: var(--stone); font-size: clamp(16px, 1.5vw, 18px); line-height: 1.55; }

/* Eyebrow: the structural cue Dock & Devin both lean on. */
.eyebrow {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--fog);
  gap: 8px;
}
.eyebrow .ti { color: var(--accent); font-size: 14px; }

/* ---------------------------------------------------------------------
   3. One accent. Links + the pill dot only; headline stays mono ink.
   --------------------------------------------------------------------- */
a { color: var(--accent); }
a:hover { color: #0857d6; }
.pill .dot { background: var(--accent); }
.pill { color: var(--stone); font-weight: 600; }

/* ---------------------------------------------------------------------
   4. Controls - refined, consistent radii. Primary = near-black (premium),
   accent reserved for icons/links. Pill kept only for true tags/badges.
   --------------------------------------------------------------------- */
.btn { border-radius: 12px; font-weight: var(--weight-label); padding: 12px 22px; }
.btn-lg { padding: 14px 26px; }
.btn-sm { padding: 9px 15px; border-radius: 10px; }
.btn-primary { background: var(--ink-soft); border-color: var(--ink-soft); }
.btn-primary:hover { background: #000; box-shadow: var(--shadow-sm); }
.btn-ghost { border-color: var(--hairline-strong); color: var(--midnight-ink); }
.btn-ghost:hover { border-color: var(--stone); background: var(--paper-white); }

/* ---------------------------------------------------------------------
   5. Navigation - calmer glass, tighter, single-ink mark.
   --------------------------------------------------------------------- */
.nav-inner {
  background: rgba(255, 255, 255, 0.80);
  border-color: var(--hairline);
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px -16px rgba(16,24,40,.18);
  padding: 10px 12px 10px 22px;
}
.brand-mark { border-radius: 8px; background: var(--ink-soft); }
.nav-links a { color: var(--stone); font-weight: 500; }
.nav-links a:hover { color: var(--midnight-ink); }

/* ---------------------------------------------------------------------
   6. THE big move - one calm, monochrome icon system.
   Every icon tile becomes a neutral accent-tint square with a single
   accent glyph, replacing the 4-colour rainbow that read as template-y.
   !important is needed only to beat the per-icon inline colours in markup.
   --------------------------------------------------------------------- */
.benefit .b-ico,
.benefit .b-ico.ico-corn, .benefit .b-ico.ico-ame,
.benefit .b-ico.ico-tang, .benefit .b-ico.ico-mus,
.feature-ico, .mc-ico, .folder .f-ico, .svc-card .svc-ico {
  background: var(--accent-tint) !important;
  color: var(--accent) !important;
  border: 1px solid rgba(10,108,255,0.12);
  border-radius: 11px;
  box-shadow: none;
}
.benefit .b-ico { width: 42px; height: 42px; font-size: 20px; margin-bottom: 16px; }
.feature-ico { width: 44px; height: 44px; font-size: 22px; }

/* Security tiles: mono on a quiet surface (these read as infrastructure). */
.sec-item .s-ico {
  background: var(--cloud-veil) !important;
  color: var(--ink-soft) !important;
  border: 1px solid var(--hairline);
}

/* In-mockup row/list glyphs that used inline colour → quiet mono. */
.lr-ico, .mini-ico, .cf-ico, .rc-type .ti, .ap-thumb {
  color: var(--stone) !important;
}
.mini-ico { background: var(--cloud-veil) !important; }
.ap-thumb { background: var(--accent-tint) !important; color: var(--accent) !important; }
.mini-avatar { background: var(--ink-soft) !important; }   /* mono initials, not coloured */

/* ---------------------------------------------------------------------
   7. Cards - unified: hairline + tight radius + calm shadow.
   --------------------------------------------------------------------- */
.benefit, .step, .sec-item, .mini, .plan, .window, .mobile-nav-card {
  border-radius: var(--r-card);
  border-color: var(--hairline);
}
.benefit, .step, .sec-item {
  background: var(--paper-white);
  box-shadow: var(--shadow-sm);
}
.benefit:hover, .step:hover, .sec-item:hover, .plan:not(.featured):hover {
  border-color: var(--hairline-strong);
  box-shadow: var(--shadow-lg);
}
/* The page is uniformly white now (dark hero + dark footer bookend it), so the
   panel/canvas alternation is gone: every section is white and cards earn their
   figure/ground from a defined border + soft shadow, not a background tint. */
.section--panel { background: transparent; }
.benefit, .step, .sec-item, .plan:not(.featured), .faq-item {
  border-color: var(--hairline-strong);
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 10px 26px -16px rgba(16,24,40,.14);
}
.benefit h3, .step h3 { font-weight: 600; letter-spacing: -0.02em; }
.benefit p { opacity: 1; color: var(--stone); }

/* ---------------------------------------------------------------------
   8. Clean alignment - drop the gimmicks that read as "unintentional".
   --------------------------------------------------------------------- */
.step:nth-child(odd), .step:nth-child(even) { transform: none; }   /* no stagger */
.window--tilt { transform: none; }                                  /* no tilt */
.benefit.bento-lg { grid-column: span 1; }                          /* equal grid */
.step-num { background: var(--ink-soft); border-radius: 9px; box-shadow: 0 0 0 6px var(--paper-white); }

/* ---------------------------------------------------------------------
   9. Screenshots read as real product - drop the "illustrative" tags,
   refine the window chrome, calmer shadow, no decorative blob.
   --------------------------------------------------------------------- */
.placeholder-tag { display: none !important; }
.window { box-shadow: var(--shadow-lg); overflow: hidden; }
.window-bar { background: #fbfcfe; border-bottom: 1px solid var(--hairline); }
.window-bar .traffic span { background: #dde3ec; }
.window-url { color: var(--fog); }
.hero::before { opacity: 0.7; }

/* Subtle lift only; no big AI-style hover jumps. */
.band-visual .window:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

/* ---------------------------------------------------------------------
   10. Pricing + CTA - calmer, consistent with the card system.
   --------------------------------------------------------------------- */
.plan { border-radius: 18px; }
.plan.featured { border-color: var(--ink-soft); box-shadow: var(--shadow-lg); }
.plan-year { color: var(--fog); }
.cta-band { border-radius: 24px; border: 1px solid var(--hairline); background: var(--paper-white); }
.cta-eyebrow { background: var(--paper-white); border-color: var(--hairline); }
.cta-float { border-radius: 12px; border-color: var(--hairline); box-shadow: var(--shadow-lg); }

/* ---------------------------------------------------------------------
   11. FAQ - quieter borders, consistent radius.
   --------------------------------------------------------------------- */
.faq-item { border-radius: 12px; border-color: var(--hairline); }
.faq-item:hover { border-color: var(--hairline-strong); }
.faq-item summary { color: var(--ink-soft); }

/* ---------------------------------------------------------------------
   12. Full-width nav bar (replaces the floating capsule) - Dock-style:
   a flat bar flush to the top, hairline underline, content centered.
   --------------------------------------------------------------------- */
.nav {
  position: sticky; top: 14px; margin-top: 14px; padding-inline: clamp(12px, 4vw, 24px);
  background: none; border-bottom: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.nav-inner {
  max-width: 1080px;
  border: 1px solid var(--hairline); border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px);
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 14px 32px -16px rgba(16,24,40,.20);
  padding: 10px 12px 10px 22px;
}

/* ---------------------------------------------------------------------
   13. Hero - cleaner, wider, one headline size (Dock-style). Both lines
   share the same large size + weight instead of the small/large split.
   --------------------------------------------------------------------- */
/* Pull the dark hero up under the floating nav so the dark introduction runs
   clean from the very top; the glass pill floats over it. The pull (78px) =
   nav margin-top (14) + nav height (64); padding restores the headline spacing. */
.hero { margin-top: -78px; padding-top: calc(78px + clamp(40px, 6vw, 72px)); }
.hero .container { max-width: 1160px; }
.hero-head { max-width: 1000px; }
.hero h1 {
  font-size: clamp(40px, 6.6vw, 78px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.02;
  color: #fff;   /* dark hero: headline is white (overrides the shared ink rule) */
}
.hero h1 .line-1,
.hero h1 .line-2 { font-size: 1em; font-weight: 600; letter-spacing: -0.035em; }
.hero h1 .line-1 { margin-bottom: 0; }
.hero-sub { max-width: 620px; font-size: clamp(17px, 1.8vw, 19px); }

/* Dark background fades to white behind the lower portion of the product shot,
   so the mockup appears to emerge into the white body rather than sitting on
   unbroken dark all the way to the section edge. */
.hero::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 52%;
  background: linear-gradient(to bottom, transparent 0%, #ffffff 82%);
  pointer-events: none;
  z-index: 0;
}
/* The hero gradient handles the dark-to-white transition; the mask on the
   window is no longer needed and is removed so the product sits cleanly
   against the whitening background. */
.window--hero { -webkit-mask-image: none; mask-image: none; }

/* ---------------------------------------------------------------------
   14. Final CTA - its own white-background SECTION, not a card. Drop the
   off-brand colour blobs and the card chrome; let it sit on a clean white
   panel (the section carries the background via .section--panel in markup).
   --------------------------------------------------------------------- */
.cta-band::before { display: none !important; }
.cta-band {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

/* ---------------------------------------------------------------------
   15. FAQ - give the title room (was squished), align the column width
   closer to the rest of the page.
   --------------------------------------------------------------------- */
#faq .section-head { margin-bottom: 30px; }
#faq .heading-lg { line-height: 1.18; }

/* ---------------------------------------------------------------------
   16. Light-section rhythm: now the body is one uniform white surface,
   give every section the SAME vertical padding and separate them with a
   faint full-width hairline. The divider uses `.section + .section`, so it
   never lands on the dark hero seam (the hero isn't a `.section`) and never
   under the dark footer (the footer isn't either) - only between light
   sections, exactly like the manifesto band used to do on its own.
   --------------------------------------------------------------------- */
.section, .section--tight, #faq.section--tight { padding-block: clamp(76px, 8vw, 116px); }
.section + .section { border-top: 1px solid var(--hairline); }

/* ── Pricing: billing toggle, ghosted features, enterprise ──── */
.billing-toggle {
  display: flex; width: max-content; margin: 36px auto 0;
  gap: 4px; padding: 4px;
  background: var(--cloud-veil);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
}
.bt-opt {
  display: inline-flex; align-items: center; gap: 8px;
  border: 0; background: transparent; cursor: pointer;
  font-size: 14px; font-weight: 500; color: var(--stone);
  padding: 9px 18px; border-radius: var(--r-pill);
  transition: background .15s ease, color .15s ease;
}
.bt-opt:hover { color: var(--midnight-ink); }
.bt-opt.is-active { background: var(--midnight-ink); color: #fff; }
.bt-save {
  font-size: 11px; font-weight: 600;
  background: var(--success-soft); color: var(--success);
  padding: 2px 8px; border-radius: var(--r-pill);
}
.bt-opt.is-active .bt-save { background: rgba(255,255,255,0.16); color: #aef3cf; }

/* Feature rows: available / ghosted / inherited / highlighted */
.plan-list li.ok .ti { color: var(--pressed-charcoal); }
.plan-list li.no { opacity: 0.5; }
.plan-list li.no .ti { color: var(--fog); }
.plan-list li.inherit {
  font-weight: 600; color: var(--midnight-ink);
  padding-bottom: 13px; margin-bottom: 1px;
  border-bottom: 1px solid var(--hairline);
}
.plan-list li.inherit .ti { color: var(--midnight-ink); }
.plan-list li.hl { font-weight: 600; }
.plan-list li.hl .ti { color: var(--success); }

/* Enterprise strip */
.enterprise {
  margin-top: 28px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  background: var(--paper-white); border: 1px solid var(--hairline);
  border-radius: var(--r-card); padding: 24px 28px;
}
.enterprise .ent-text h3 {
  font-family: var(--font-display); font-weight: 600; font-size: 17px;
  letter-spacing: -0.02em; color: var(--midnight-ink); margin: 0;
}
.enterprise .ent-text p { font-size: 14px; color: var(--stone); margin: 6px 0 0; max-width: 580px; line-height: 1.5; }
.enterprise .btn { flex: none; }
@media (max-width: 560px) {
  .enterprise { flex-direction: column; align-items: flex-start; }
  .enterprise .btn { width: 100%; }
}

/* =====================================================================
   Typographic rhythm - consolidated single source (tracking, line-height,
   display weight). Mirrors the tracking, line-height and weight tokens in
   tokens.css. Appended last so it is the authoritative layer over the
   scattered legacy heading rules above. NOTE: style.css (app) and the auth
   pages still set their own heading type and should adopt these same tokens
   in a follow-up, so the system stays one coherent whole.
   ===================================================================== */
/* Display headlines: hero + closing CTA. (Their homepage font-size stays an
   inline clamp in index.html; only rhythm + weight are centralised here.) */
.hero h1,
.cta-band h2 {
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-display);
}
/* Section titles. */
.heading-lg {
  font-size: clamp(36px, 4.8vw, 62px);
  font-weight: var(--weight-heading);
  letter-spacing: var(--tracking-h2);
  line-height: var(--lh-h2);
}
#faq .heading-lg { line-height: var(--lh-h2); }
/* Subheads + card titles. */
.band-copy h3,
.benefit h3,
.step h3,
.sec-item h3 { letter-spacing: var(--tracking-h3); }
/* Body + lead paragraphs (>= 16px). */
.section-head p.lead,
.hero-sub,
.band-copy p { line-height: var(--lh-body); }
/* Sub-copy + captions (13-14px). */
.benefit p,
.step p,
.sec-item p,
.plan-line { line-height: var(--lh-tight); }

/* Brand logo image (header + footer). The mark carries its own rounded tile. */
.brand-mark-img { width: 30px; height: 30px; display: block; }

/* =====================================================================
   FAQ grid, feature shorthand grid, and pricing refresh.
   Layout/clarity cues taken from modern SaaS pricing pages, rebuilt in
   the RetainSpace system (cobalt accent, Geist, light canvas).
   ===================================================================== */

/* ---- FAQ: three-column grid of static Q&A ---- */
.faq-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 44px) clamp(30px, 4vw, 56px);
  margin-top: clamp(40px, 6vw, 60px);
}
.faq-q h3 {
  font-size: 17px; font-weight: 600; line-height: 1.3;
  letter-spacing: var(--tracking-h3); color: var(--midnight-ink);
}
.faq-q p { margin-top: 10px; font-size: 14.5px; line-height: var(--lh-body); color: var(--stone); }
.faq-q p a, .section-head .lead a { color: var(--accent); font-weight: 500; }
@media (max-width: 920px) { .faq-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .faq-grid { grid-template-columns: 1fr; gap: 28px; } }

/* ---- Feature shorthand grid (under the tabbed showcase) ---- */
.fmini-head { text-align: center; margin-top: clamp(56px, 8vw, 88px); }
.fmini-head h3 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(20px, 2.6vw, 26px); letter-spacing: -0.015em;
  color: var(--midnight-ink);
}
.fmini-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3.5vw, 40px) clamp(28px, 3.5vw, 48px);
  max-width: 1040px; margin: clamp(32px, 4vw, 44px) auto 0;
}
.fmini { display: flex; gap: 15px; align-items: flex-start; }
.fmini-ico {
  width: 42px; height: 42px; flex: none; border-radius: var(--r-inner);
  display: grid; place-items: center; font-size: 21px;
  background: var(--accent-tint, #eaf1ff); color: var(--accent);
}
.fmini h3 { font-size: 15px; font-weight: 600; letter-spacing: var(--tracking-h3); color: var(--midnight-ink); }
.fmini p { margin-top: 6px; font-size: 14px; line-height: var(--lh-tight); color: var(--stone); }
@media (max-width: 860px) { .fmini-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .fmini-grid { grid-template-columns: 1fr; } }

/* ---- Pricing: plan icon header, no descriptor ---- */
.plan-head { display: flex; align-items: center; gap: 11px; }
.plan-ico {
  width: 34px; height: 34px; flex: none; border-radius: var(--r-inner);
  display: grid; place-items: center; font-size: 19px;
  background: var(--accent-tint, #eaf1ff); color: var(--accent);
}
.plan .plan-price { margin-top: 20px; }
.plan-sub { font-size: 12.5px; color: var(--fog); margin-top: 6px; }

/* Included rows: a green circle check. Excluded: a muted ghost. */
.plan-list li.ok .ti-check {
  width: 18px; height: 18px; font-size: 12px; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--success-soft); color: var(--success);
}
.plan-list li.ok.hl .ti-check { background: var(--success-border); }
.plan-list li .ti-gift { color: var(--accent); }
.plan-list li.no { opacity: 1; color: var(--fog); }
.plan-list li.no .ti-ghost-2 { color: var(--fog); background: transparent; font-size: 18px; }

/* Featured plan: a dark card that lifts off the row (the premium tier). */
.plan.featured {
  background: var(--midnight-ink);
  border: 1px solid var(--midnight-ink);
  box-shadow: 0 30px 64px -26px rgba(11, 15, 23, 0.5);
  transform: translateY(-8px);
}
.plan.featured .plan-name,
.plan.featured .plan-price .amt,
.plan.featured .plan-list li.hl { color: #fff; }
.plan.featured .plan-ico { background: rgba(255, 255, 255, 0.12); color: #fff; }
.plan.featured .plan-price .per,
.plan.featured .plan-sub { color: rgba(255, 255, 255, 0.6); }
.plan.featured .plan-list li { color: rgba(255, 255, 255, 0.88); }
.plan.featured .plan-list li.inherit {
  color: #fff; border-bottom-color: rgba(255, 255, 255, 0.16);
}
.plan.featured .plan-list li.inherit .ti,
.plan.featured .plan-list li .ti-gift { color: #fff; }
.plan.featured .plan-list li.ok .ti-check { background: var(--success-soft); color: var(--success); }
.plan.featured .btn-primary { background: #fff; color: var(--midnight-ink); }
.plan.featured .btn-primary:hover { background: var(--cloud-veil); }

/* "Popular" badge in the accent, centred over the featured card. */
.plan-badge {
  background: var(--accent); border-color: var(--accent); color: #fff;
}

/* ===== Legal pages (privacy / cookies / terms) ===== */
.legal-wrap { max-width: 760px; margin-inline: auto; }
.legal-eyebrow {
  font-size: 14px; font-weight: 500; color: var(--fog); margin-bottom: 12px;
}
.legal h1 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(30px, 4.6vw, 44px); line-height: 1.1;
  letter-spacing: -0.02em; color: var(--midnight-ink); text-wrap: balance;
}
.legal-meta { margin-top: 14px; font-size: 14px; color: var(--fog); }
.legal-draft {
  margin-top: 22px; padding: 13px 16px; border-radius: 12px;
  border: 1px solid var(--status-warn-bd); background: var(--status-warn-bg);
  color: var(--status-warn-fg); font-size: 13.5px; line-height: 1.5;
}
.legal h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(20px, 2.6vw, 26px); letter-spacing: -0.015em;
  color: var(--midnight-ink); margin-top: clamp(34px, 5vw, 52px);
}
.legal h3 { font-size: 16px; font-weight: 600; color: var(--midnight-ink); margin-top: 24px; }
.legal p  { margin-top: 14px; font-size: 16px; line-height: 1.62; color: var(--stone); text-wrap: pretty; }
.legal ul { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.legal li { position: relative; padding-left: 20px; font-size: 16px; line-height: 1.55; color: var(--stone); }
.legal li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.legal a { color: var(--accent); text-decoration: underline; }
.legal strong { color: var(--midnight-ink); font-weight: 600; }
.legal-table { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 14px; }
.legal-table th, .legal-table td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--hairline); vertical-align: top; color: var(--stone); }
.legal-table th { color: var(--midnight-ink); font-weight: 600; }
/* "Cookie settings" reopener in the footer, styled to match the footer links. */
.footer-links button.footer-cc {
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  font: inherit; color: inherit; text-decoration: none;
}
.footer-links button.footer-cc:hover { color: var(--midnight-ink); }