/* =========================================================================
   Zerall — usezerall.com
   "Field Green": lime signal on deep forest, read on warm paper.

   Register: brand. Design carries the identity.
   Colour strategy: full palette, three deliberate roles.
     forest — dark teal-green. Identity surfaces: hero, footer, dark cards.
     lime   — chartreuse signal. Actions, icon discs, accent rules. Never text-on-lime
              below 4.5:1, so lime always pairs with forest ink.
     paper  — warm off-white. Every reading surface.
   Theme reasoning: a clearing-office manager checks this on a phone in a bright
   Lagos office at 9am, sun through the louvres. Bright ambient light wins, so
   reading happens on paper. Forest is reserved for the two identity moments
   (hero, footer) and the feature cards that need to stop the scroll.

   All colour in OKLCH. Every neutral tinted toward the forest hue (175).
   No pure black, no pure white. Self-hosted fonts, relative paths, zero JS
   outside the contact-form fallback.
   ========================================================================= */

/* ---- Fonts (self-hosted, latin subset, swap) --------------------------- */
@font-face { font-family:"Inter"; font-style:normal; font-weight:400;
  font-display:swap; src:url("../fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:500;
  font-display:swap; src:url("../fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:600;
  font-display:swap; src:url("../fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family:"JetBrains Mono"; font-style:normal; font-weight:500;
  font-display:swap; src:url("../fonts/jetbrains-mono-500.woff2") format("woff2"); }

/* ---- Tokens ------------------------------------------------------------ */
:root {
  /* signal */
  --lime:        oklch(0.885 0.185 119);
  --lime-bright: oklch(0.935 0.155 119);
  --lime-deep:   oklch(0.795 0.175 121);
  --lime-wash:   oklch(0.955 0.055 119);
  /* Lime is a surface colour, never a text colour on paper: at the chroma that
     makes it read as lime it can only reach ~1.7:1 there. --lime-ink is the
     text-safe member of the family, 5.6:1 on paper, still unmistakably green. */
  --lime-ink:    oklch(0.455 0.125 132);

  /* forest — identity surfaces */
  --forest:       oklch(0.255 0.034 175);
  --forest-deep:  oklch(0.198 0.030 175);
  --forest-soft:  oklch(0.315 0.033 175);
  --forest-line:  oklch(0.395 0.030 175);

  /* paper — reading surfaces */
  --paper:      oklch(0.968 0.007 96);
  --paper-lift: oklch(0.992 0.004 96);
  --sand:       oklch(0.912 0.011 96);
  --ink:        oklch(0.245 0.014 175);
  /* Tuned to clear 4.5:1 on the DARKEST light surface (--sand), not just paper. */
  --muted:      oklch(0.485 0.014 175);
  --border:     oklch(0.855 0.012 96);
  --row-hover:  oklch(0.938 0.010 96);

  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;

  /* Radius scale. Generous, consistent, never nested past one level. */
  --r-pill:999px; --r-xl:1.75rem; --r-lg:1.25rem; --r-md:.75rem; --r-sm:.5rem;

  /* Action accents */
  --teal-action:        oklch(0.38 0.12 175);
  --teal-action-hover:  oklch(0.30 0.14 175);
  --teal-action-wash:   oklch(0.95 0.04 175);

  /* Elevation shadows */
  --shadow-xs:   0 1px 3px oklch(0.198 0.030 175 / .06);
  --shadow-sm:   0 4px 14px oklch(0.198 0.030 175 / .08);
  --shadow-md:   0 10px 30px oklch(0.198 0.030 175 / .12);
  --shadow-lg:   0 20px 50px oklch(0.198 0.030 175 / .16);
  --shadow-glow: 0 0 25px oklch(0.885 0.185 119 / .38);

  /* Spacing rhythm deliberately uneven: tight inside, loose between. */
  --pad:clamp(1rem,4vw,3rem);
  --gap:clamp(4rem,9vw,8rem);
  --wrap:78rem;

  --ease:cubic-bezier(.22,1,.36,1);          /* ease-out-quint */
  --ease-soft:cubic-bezier(.16,1,.3,1);      /* ease-out-expo  */
  --ease-bounce:cubic-bezier(.34,1.56,.64,1);
}

/* ---- Reset ------------------------------------------------------------- */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; overflow-x:hidden; scroll-behavior:smooth; }
body {
  margin:0; font-family:var(--sans); font-weight:400; font-size:1rem;
  line-height:1.55; letter-spacing:-0.011em; color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img { max-width:100%; height:auto; display:block; }
a { color:inherit; }
/* Author `display` declarations outrank the UA sheet's [hidden] rule, so any
   component styled with display:grid/flex would ignore the attribute. Guard it
   once, globally: the contact form's fallback panel depends on it. */
[hidden] { display:none !important; }
hr { border:0; border-top:1px solid var(--border); margin:0; }

/* ---- Accessibility ----------------------------------------------------- */
.skip { position:absolute; left:-9999px; top:0; background:var(--lime);
  color:var(--forest-deep); font-weight:600; padding:.75rem 1rem; z-index:200;
  border-radius:0 0 var(--r-md) 0; }
.skip:focus { left:0; }
.vh { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---- Layout ------------------------------------------------------------ */
.wrap { width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.section { padding-block:var(--gap); }
.rule { border-top:1px solid var(--border); }

/* ---- Typography -------------------------------------------------------- */
h1,h2,h3,h4 { margin:0; font-weight:600; letter-spacing:-.055em; line-height:1; }
.d-lg { font-size:clamp(2.6rem,6vw,4.15rem); line-height:1.02; letter-spacing:-.06em; }
.d-md { font-size:clamp(1.9rem,4vw,2.7rem); line-height:1.08; letter-spacing:-.05em; }
.display { font-size:clamp(2.7rem,5.2vw,5rem); line-height:.94; letter-spacing:-.07em; }
.lead { font-size:clamp(1.05rem,2.2vw,1.18rem); line-height:1.62; color:var(--muted);
  max-width:60ch; }
p { margin:0 0 1rem; }
.muted { color:var(--muted); }
.prose { max-width:68ch; }
.prose p { margin:0 0 1.15rem; line-height:1.7; }
/* Emphasis on paper: dark text carrying a lime rule underneath. Lime as a
   text fill on paper cannot reach 3:1, so the colour moves to the underline
   where it is decoration and the contrast requirement does not apply. */
em { font-style:normal; color:var(--forest-deep);
  text-decoration:underline; text-decoration-color:var(--lime);
  text-decoration-thickness:.085em; text-underline-offset:.1em; }
/* On forest, lime can carry the emphasis as fill (12:1), so the underline
   becomes redundant weight. Drop it. */
.home-page .hero h1 em, .result-band em, .feature-main em, .site-foot em {
  color:var(--lime); text-decoration:none; }

/* ---- Mono metadata ----------------------------------------------------- */
/* Used for data labels site-wide (APP_01 // HUB · V1.0, TIER 01, field labels).
   Not a section label, so it stayed when those were removed. */
.meta { font-family:var(--mono); font-weight:500; font-size:11px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }

/* ---- Header: floating pill -------------------------------------------- */
.site-head { position:sticky; top:0; z-index:80; background:transparent;
  padding-block:.9rem .2rem; }
.site-head .wrap {
  max-width:74rem; display:flex; align-items:center; gap:.5rem 1rem;
  min-height:62px; padding:.5rem .55rem .5rem 1.35rem;
  background:oklch(0.198 0.030 175 / .93); color:var(--paper-lift);
  border:1px solid oklch(0.395 0.030 175 / .55);
  border-radius:var(--r-pill);
  box-shadow:0 14px 40px oklch(0.198 0.030 175 / .18);
}
.brand { display:inline-flex; align-items:center; gap:.5rem; text-decoration:none;
  color:var(--paper-lift); font-weight:600; font-size:1.22rem; letter-spacing:-.07em;
  text-transform:lowercase; line-height:1; }
.brand-logo { width:28px; height:28px; flex:0 0 28px; object-fit:contain; }

/* Nav sits centred in the pill, the way the reference does it. */
.nav { margin-inline:auto; display:flex; flex-wrap:wrap; align-items:center;
  gap:.1rem; font-size:.86rem; }
.nav a { display:inline-flex; align-items:center; min-height:40px; padding:0 .82rem;
  border-radius:var(--r-pill); text-decoration:none; color:oklch(0.968 0.007 96 / .74);
  transition:color .2s var(--ease), background-color .2s var(--ease); }
.nav a:hover { color:var(--paper-lift); background:oklch(0.395 0.030 175 / .45); }
.nav a[aria-current="page"] { color:var(--lime); font-weight:500;
  background:oklch(0.395 0.030 175 / .38); }
/* `.nav a` (class+type) outranks a bare `.nav-cta` class, so the CTA has to be
   qualified or it inherits the translucent nav link colour and lands at 1.2:1
   on the lime pill. */
.nav a.nav-cta { min-height:42px; margin-left:.35rem; padding:0 1.15rem;
  background:var(--lime); color:var(--forest-deep); font-weight:600;
  border-radius:var(--r-pill); text-decoration:none;
  display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap;
  transition:background-color .2s var(--ease), transform .2s var(--ease); }
.nav a.nav-cta:hover { background:var(--lime-bright); color:var(--forest-deep);
  transform:translateY(-1px); }

/* ---- Buttons ----------------------------------------------------------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:52px; padding:0 1.6rem; background:var(--lime); color:var(--forest-deep);
  font-family:var(--sans); font-weight:600; font-size:.96rem; text-decoration:none;
  border:0; border-radius:var(--r-pill); cursor:pointer;
  transition:background-color .22s var(--ease), transform .22s var(--ease),
             box-shadow .22s var(--ease); }
.btn:hover { background:var(--lime-bright); transform:translateY(-2px);
  box-shadow:0 10px 26px oklch(0.885 0.185 119 / .32); }
.btn.block { width:100%; }
.btn.ghost { background:transparent; color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--border); }
.btn.ghost:hover { background:var(--paper-lift); color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--forest); }
.btn.dark, .btn.dark-button { background:var(--forest-deep); color:var(--paper-lift); }
.btn.dark:hover, .btn.dark-button:hover { background:var(--forest);
  box-shadow:0 10px 26px oklch(0.198 0.030 175 / .28); }
.btn[disabled], .btn.is-disabled { background:var(--sand); color:var(--muted);
  cursor:not-allowed; pointer-events:none; box-shadow:none; transform:none; }
.btn .ico { width:18px; height:18px; }

.tlink { display:inline-flex; align-items:center; gap:.45rem; min-height:44px;
  font-weight:600; color:var(--ink); text-decoration:none; }
.tlink:hover { color:var(--lime-ink); }
.light-link { color:var(--paper-lift); }
.light-link:hover { color:var(--lime); }
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1.1rem; }

/* Circular arrow link. The disc is the affordance. */
.round-link { display:inline-flex; align-items:center; gap:.75rem; margin-top:1.5rem;
  font-weight:600; text-decoration:none; }
.round-link span { display:grid; place-items:center; width:38px; height:38px; flex:0 0 38px;
  border-radius:50%; background:var(--lime); color:var(--forest-deep); font-size:.9rem;
  transition:transform .24s var(--ease), background-color .24s var(--ease); }
.round-link:hover span { transform:translate(3px,-3px); background:var(--lime-bright); }
.dark-round span { background:var(--forest-deep); color:var(--lime); }
.dark-round:hover span { background:var(--forest); }

/* ---- HOME: hero -------------------------------------------------------- */
.home-page .hero {
  color:var(--paper-lift); text-align:left; overflow:hidden;
  padding:clamp(3rem,6vw,5rem) 0 0; margin-top:-4.6rem; padding-top:7.5rem;
  background:
    radial-gradient(120% 95% at 88% 12%, oklch(0.355 0.045 172) 0%, transparent 56%),
    radial-gradient(85% 70% at 6% 96%, oklch(0.295 0.038 178) 0%, transparent 60%),
    var(--forest-deep);
}
.hero-shell { min-height:clamp(500px,56vw,660px); display:grid;
  grid-template-columns:1.08fr .92fr; align-items:center; position:relative; }
.hero-copy { position:relative; z-index:2; padding-bottom:clamp(3rem,7vw,6rem); }

.home-page .hero h1 { margin:0; max-width:11ch;
  font-size:clamp(3rem,6.6vw,6.1rem); font-weight:600; line-height:.9; letter-spacing:-.075em; }
.home-page .hero h1 em { color:var(--lime); }
.home-page .hero .lead { color:oklch(0.968 0.007 96 / .72); max-width:46ch;
  margin:1.7rem 0 0; font-size:1.06rem; line-height:1.62; }
.home-page .hero .actions { justify-content:flex-start; margin-top:2.1rem; }

/* ---- Hero scene (CSS-drawn office vignette) ---------------------------- */
.hero-orbit { position:relative; width:min(100%,470px); height:470px;
  justify-self:end; align-self:end; }
.orbit-ring { position:absolute; border:1px solid oklch(0.968 0.007 96 / .14);
  border-radius:50%; }
.ring-one { width:470px; height:470px; right:-100px; bottom:-125px; }
.ring-two { width:315px; height:315px; right:2px; bottom:-45px;
  border-color:oklch(0.885 0.185 119 / .42); }

.hero-scene { position:absolute; right:0; bottom:0; z-index:1;
  width:320px; height:270px; overflow:hidden;
  border:1px solid oklch(0.968 0.007 96 / .34); border-radius:var(--r-lg);
  background:oklch(0.365 0.038 176); }
.scene-window { position:absolute; top:0; right:0; width:62%; height:48%; padding:.65rem;
  display:flex; align-items:flex-end; gap:6px;
  background:linear-gradient(135deg, oklch(0.475 0.048 172), oklch(0.275 0.036 178)); }
.scene-window i { width:19%; height:var(--h); background:oklch(0.198 0.030 175 / .58); }
.scene-window i:nth-child(1) { --h:23%; } .scene-window i:nth-child(2) { --h:47%; }
.scene-window i:nth-child(3) { --h:34%; } .scene-window i:nth-child(4) { --h:66%; }
.scene-desk { position:absolute; z-index:2; right:0; bottom:55px; width:80%; height:11px;
  background:var(--sand); transform:skewX(-18deg); }
.scene-desk span { position:absolute; width:34px; height:23px; background:var(--paper);
  border-radius:2px; transform:skewX(18deg); top:-19px; }
.scene-desk span:nth-child(1) { left:12%; }
.scene-desk span:nth-child(2) { left:42%; transform:skewX(18deg) rotate(-7deg); }
.scene-desk span:nth-child(3) { left:65%; width:25px; background:var(--lime); }
.scene-person { position:absolute; z-index:3; left:45px; bottom:51px; width:94px; height:116px;
  border-radius:48px 48px 18px 18px; background:oklch(0.225 0.028 176); }
.scene-person::before { content:""; position:absolute; top:-39px; left:28px;
  width:39px; height:45px; border-radius:50% 50% 44% 44%; background:oklch(0.545 0.062 48); }
.scene-person i { position:absolute; left:21px; top:27px; width:52px; height:50px;
  border-radius:50% 50% 8px 8px; background:var(--paper); }
.hero-scene p { position:absolute; z-index:5; left:15px; bottom:8px; margin:0;
  color:var(--paper-lift); font:500 8px var(--mono); letter-spacing:.09em; }
.hero-scene p b, .hero-scene p span { display:block; }
.hero-scene p span { margin-top:3px; color:var(--lime); }

/* The desk card: paper object on a forest field, lime offset instead of a blur. */
.hero-card { position:absolute; z-index:2; right:180px; bottom:172px; width:232px;
  min-height:212px; padding:1.25rem; border-radius:var(--r-xl);
  background:var(--paper-lift); color:var(--forest-deep); transform:rotate(-7deg);
  box-shadow:20px 25px 0 var(--lime); }
.hero-card-label { display:block; font:500 10px var(--mono); letter-spacing:.12em;
  color:var(--muted); }
.hero-card strong { display:block; margin-top:1.7rem; font-size:4.5rem; line-height:.88;
  letter-spacing:-.09em; font-weight:600; }
.hero-card > span:not(.hero-card-label) { font-size:.82rem; color:var(--muted); }
.hero-card-line { display:flex; gap:5px; margin-top:1.5rem; align-items:flex-end; height:22px; }
.hero-card-line i { width:15%; border-radius:3px 3px 0 0; background:var(--forest); height:50%; }
.hero-card-line i:nth-child(2) { height:100%; background:var(--lime-deep); }
.hero-card-line i:nth-child(3) { height:76%; }

.float-chip { position:absolute; z-index:3; font:500 10px var(--mono); letter-spacing:.07em;
  padding:.6rem .8rem; border-radius:var(--r-pill); }
.chip-a { background:var(--lime); color:var(--forest-deep); top:16px; right:34px; }
.chip-b { background:var(--paper-lift); color:var(--forest-deep); bottom:42px; left:0; }
.orbit-dot { position:absolute; width:12px; height:12px; border-radius:50%;
  background:var(--lime); left:24px; top:132px; }

/* ---- Trust strip: the lime band --------------------------------------- */
.trust-strip { background:var(--lime); color:var(--forest-deep); }
.trust-strip .wrap { min-height:104px; display:flex; align-items:center;
  justify-content:space-between; gap:1.5rem; padding-block:1.1rem; }
.trust-strip p { max-width:26ch; margin:0; font-size:.9rem; font-weight:600; line-height:1.3; }
.trust-stats { display:flex; gap:clamp(1.25rem,4vw,4.5rem);
  font:500 10px var(--mono); text-transform:uppercase; letter-spacing:.09em; }
.trust-stats span { display:grid; gap:.3rem; }
.trust-stats b { font:600 clamp(1.15rem,2vw,1.6rem) var(--sans); letter-spacing:-.06em; }

/* ---- Intro split ------------------------------------------------------- */
.intro-section { padding-block:clamp(5rem,11vw,9rem); }
.split-intro { display:grid; grid-template-columns:1.1fr .72fr;
  gap:clamp(3rem,9vw,9rem); align-items:end; }
.intro-body { padding-bottom:.4rem; }
.intro-body p { max-width:38ch; font-size:1.1rem; line-height:1.68; color:var(--muted); }

/* ---- Work grid: three cards, three different jobs --------------------- */
.work-grid { display:grid; grid-template-columns:1.35fr .65fr; gap:1.1rem;
  padding-bottom:clamp(5rem,10vw,8rem); }
.feature-main, .feature-side { border-radius:var(--r-xl); overflow:hidden;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease); }
.feature-main:hover, .feature-side:hover { transform:translateY(-5px); }
.feature-main:hover { box-shadow:0 22px 50px oklch(0.198 0.030 175 / .22); }

.feature-main { min-height:540px; padding:clamp(1.6rem,4vw,3rem);
  background:var(--forest-deep); color:var(--paper-lift);
  display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:1.25rem; }
.feature-main h2, .feature-side h2 { margin:1rem 0;
  font-size:clamp(2rem,4vw,3.5rem); line-height:.92; letter-spacing:-.07em; }
.feature-main mark { color:var(--lime); background:none; padding:0; }
.feature-link { display:inline-flex; align-items:center; gap:.5rem; margin-top:1.4rem;
  font-weight:600; text-decoration:none; }
.feature-link span { display:grid; place-items:center; width:26px; height:26px;
  border-radius:50%; background:var(--lime); color:var(--forest-deep); font-size:.75rem;
  transition:transform .22s var(--ease); }
.feature-link:hover span { transform:translateX(3px); }

.mini-dashboard { align-self:center; padding:1.1rem; border-radius:var(--r-lg);
  background:var(--paper); color:var(--forest-deep); transform:rotate(5deg);
  box-shadow:10px 14px 0 var(--lime); }
.dash-top { display:flex; gap:4px; align-items:center; padding-bottom:.8rem;
  border-bottom:1px solid var(--border); }
.dash-top i { width:6px; height:6px; border-radius:50%; background:var(--border); }
.dash-top span { margin-left:auto; font:600 9px var(--mono); }
.dash-number { margin:1.2rem 0; font-size:1.9rem; font-weight:600; letter-spacing:-.07em; }
.dash-number small { display:block; color:var(--muted); font:500 9px var(--mono);
  letter-spacing:0; }
.dash-bars { height:80px; display:flex; gap:7px; align-items:flex-end; }
.dash-bars i { width:12%; height:30%; background:var(--forest); border-radius:3px 3px 0 0; }
.dash-bars i:nth-child(2), .dash-bars i:nth-child(5) { height:83%; background:var(--lime-deep); }
.dash-bars i:nth-child(3) { height:58%; } .dash-bars i:nth-child(4) { height:45%; }
.dash-bars i:nth-child(6) { height:95%; } .dash-bars i:nth-child(7) { height:65%; }
.dash-list { margin-top:1rem; border-top:1px solid var(--border); padding-top:.55rem;
  display:grid; gap:.4rem; font:500 8px var(--mono); }
.dash-list span { display:flex; justify-content:space-between; }
.dash-list b { color:var(--forest); font-weight:500; }

.feature-side { min-height:262px; padding:1.6rem; display:flex; flex-direction:column; }
.feature-side.yellow { background:var(--lime); color:var(--forest-deep); }
.feature-side.soft { background:var(--sand); color:var(--forest-deep); }
/* Icon disc: forest on lime, lime on sand. Always the inverse of its field. */
.feature-side .side-icon { margin:1.6rem 0 auto; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; background:var(--forest-deep); color:var(--lime);
  transform:rotate(-30deg); font-size:1.05rem; }
.feature-side h2 { font-size:clamp(1.75rem,3vw,2.6rem); margin:.7rem 0; }
.feature-side .feature-link { margin-top:auto; }
.feature-side.yellow .feature-link span { background:var(--forest-deep); color:var(--lime); }
.message-lines { display:grid; gap:.4rem; margin:1.5rem 0 auto; }
.message-lines span { height:10px; border-radius:var(--r-pill);
  background:oklch(0.245 0.014 175 / .16); }
.message-lines span:nth-child(1) { width:75%; }
.message-lines span:nth-child(2) { width:58%; background:var(--forest); }
.message-lines span:nth-child(3) { width:87%; }

/* ---- Result band ------------------------------------------------------- */
.result-band { background:var(--forest); color:var(--paper-lift);
  padding-block:clamp(4.5rem,8vw,7.5rem); }
.result-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); }
.result-band h2 { margin:1rem 0 0; font-size:clamp(2.3rem,4.5vw,4.2rem);
  line-height:.92; letter-spacing:-.07em; }
/* Top rule, not a side stripe. */
.result-quote { border-top:1px solid oklch(0.885 0.185 119 / .5); padding-top:1.75rem; }
.quote-mark { color:var(--lime); font-size:3.4rem; line-height:.5; display:block; }
.result-quote p { margin:1.5rem 0 2rem; max-width:40ch; font-size:1.14rem; line-height:1.62;
  color:oklch(0.968 0.007 96 / .82); }
.result-signoff { color:var(--lime); font:500 10px var(--mono); letter-spacing:.12em; }

/* ---- Product rail: the stat row --------------------------------------- */
.people-section { padding-block:clamp(5rem,10vw,8rem); }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:2rem; }
.product-rail { display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(1rem,3vw,2.25rem); margin-top:3.5rem; }
/* Lime rule above each cell is the accent, replacing card chrome entirely. */
.product-rail a { min-height:150px; padding:1.15rem 0 0; display:flex; flex-direction:column;
  gap:.5rem; text-decoration:none; border-top:3px solid var(--lime);
  transition:border-color .24s var(--ease); }
.product-rail a:hover { border-top-color:var(--forest-deep); }
.product-rail b { font:500 10px var(--mono); letter-spacing:.12em; color:var(--muted); }
.product-rail span { margin-top:auto; font-size:clamp(1.6rem,2.6vw,2.1rem); font-weight:600;
  letter-spacing:-.06em; }
.product-rail i { font-size:.85rem; font-style:normal; color:var(--muted); }
.product-rail .coming { border-top-color:var(--border); color:var(--muted); }
.product-rail .coming:hover { border-top-color:var(--muted); }

/* ---- Closing CTA ------------------------------------------------------- */
.cta-section { background:var(--lime); color:var(--forest-deep);
  padding-block:clamp(4rem,8vw,7rem); }
.cta-wrap { display:grid; grid-template-columns:1.1fr .62fr; gap:clamp(2rem,6vw,4rem);
  align-items:end; }
.cta-section h2 { margin:1rem 0 0; font-size:clamp(2.6rem,5vw,4.6rem);
  line-height:.92; letter-spacing:-.07em; }
.cta-section h2 em { color:var(--forest-deep); text-decoration:underline;
  text-decoration-thickness:3px; text-underline-offset:6px; }
.cta-wrap > div:last-child p { max-width:33ch; line-height:1.62;
  color:oklch(0.245 0.014 175 / .8); }
.dark-button { margin-top:1.3rem; }

/* ---- Interior page head ----------------------------------------------- */
.pagehead { padding-top:clamp(4.5rem,9vw,7rem); padding-bottom:clamp(2rem,5vw,4rem); }
.pagehead .d-lg { max-width:18ch; }
.pagehead .lead { margin-top:1.2rem; }
.docmeta { display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem;
  font-family:var(--mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); }

/* ---- PRODUCTS ---------------------------------------------------------- */
.prodcard { border:0; border-radius:var(--r-xl); overflow:hidden; margin-top:1.25rem; }
.prodcard-bar { display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.85rem 1.4rem; background:var(--forest-deep); color:var(--lime);
  font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; }
.prodcard-bar .status { color:var(--forest-deep); background:var(--lime);
  padding:.28rem .7rem; border-radius:var(--r-pill); font-weight:500; }
.prodcard-bar .status.soon { color:var(--lime); background:transparent;
  border:1px solid oklch(0.885 0.185 119 / .5); }
.prodcard-grid { display:grid; grid-template-columns:1fr; }
.prodcard-body { padding:clamp(1.6rem,3vw,2.4rem); background:var(--paper-lift); }
.prodcard-body h2 { font-size:clamp(1.9rem,3.5vw,2.4rem); }
.prodcard-body .desc { color:var(--ink); margin:.85rem 0 1.35rem; max-width:46ch;
  font-size:1.05rem; line-height:1.6; }
.caps { list-style:none; margin:0 0 1.6rem; padding:0; }
.caps li { display:grid; grid-template-columns:1.5rem 1fr; gap:.5rem; align-items:baseline;
  font-family:var(--mono); font-size:12.5px; padding:.4rem 0; color:var(--ink); }
.caps .ck { color:var(--lime-ink); font-weight:600; }
.prodcard-media { border:0; background:var(--sand); min-height:290px;
  display:grid; place-items:center; padding:1.35rem; }
.shot-empty { font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); text-align:center;
  border:1px dashed oklch(0.755 0.014 96); border-radius:var(--r-md);
  padding:2.5rem 1.5rem; width:100%; }
.is-soon .prodcard-body h2, .is-soon .prodcard-body .desc { color:var(--muted); }
.kova-shots { width:100%; padding:clamp(.75rem,2vw,1.5rem);
  background:linear-gradient(145deg, oklch(0.225 0.032 176), oklch(0.375 0.040 168)); }
.kova-shots img { width:100%; border:3px solid var(--forest-deep); border-radius:var(--r-sm);
  box-shadow:0 12px 26px oklch(0.198 0.030 175 / .3); }
.senda-shots { width:100%; min-height:350px; display:flex; align-items:center;
  justify-content:center; gap:clamp(.5rem,2vw,1.25rem); padding:1.5rem .5rem;
  background:radial-gradient(circle at 50% 42%, oklch(0.375 0.040 168) 0, transparent 55%), var(--sand); }
.senda-shots img { width:min(43%,175px); border:4px solid var(--forest-deep);
  border-radius:var(--r-lg); box-shadow:0 16px 30px oklch(0.198 0.030 175 / .28); }
.senda-shots img:first-child { transform:translateY(-12px) rotate(-4deg); }
.senda-shots img:last-child { transform:translateY(12px) rotate(4deg); }

/* ---- PRICING ----------------------------------------------------------- */
.tiers { display:grid; grid-template-columns:1fr; gap:1.1rem; margin-top:2.5rem;
  border:0; background:none; }
.tier { padding:clamp(1.6rem,3vw,2.4rem); border:0; border-radius:var(--r-xl);
  background:var(--paper-lift); display:flex; flex-direction:column;
  transition:transform .26s var(--ease), box-shadow .26s var(--ease); }
.tier:hover { transform:translateY(-4px);
  box-shadow:0 18px 44px oklch(0.198 0.030 175 / .12); }
.tier-name { font-size:1.7rem; margin:.5rem 0 0; }
.tier.featured { background:var(--forest-deep); color:var(--paper-lift); }
.tier.featured .meta { color:var(--lime); }
.tier.featured .feats, .tier.featured .feats li { border-color:var(--forest-line); }
.tier.featured .feats .ck { color:var(--lime); }

.price { align-self:flex-start; display:inline-flex; align-items:baseline; gap:.15rem;
  background:var(--forest-deep); border-radius:var(--r-pill);
  padding:.6rem 1.1rem; margin:1.15rem 0 1.6rem; }
.price .amt { font-family:var(--mono); font-weight:500; font-size:1.5rem; color:var(--lime);
  letter-spacing:-.01em; }
.price .per { font-family:var(--mono); font-size:11px; color:oklch(0.968 0.007 96 / .7); }
.tier.featured .price { background:var(--forest-soft); }
.tier.featured .price .amt { color:var(--lime); }

.feats { list-style:none; margin:0 0 1.8rem; padding:0; border-top:1px solid var(--border); }
.feats li { display:grid; grid-template-columns:1.5rem 1fr; gap:.5rem; align-items:baseline;
  padding:.8rem 0; border-bottom:1px solid var(--border); font-size:.97rem; }
.feats .ck { color:var(--lime-ink); font-weight:600; }
.tier .btn { margin-top:auto; }
.ask { display:inline-block; margin-top:.8rem; font-size:.9rem; color:var(--muted);
  text-decoration:underline; text-underline-offset:3px; }
.ask:hover { color:var(--ink); }
.tier.featured .ask { color:oklch(0.968 0.007 96 / .75); }
.tier.featured .ask:hover { color:var(--paper-lift); }

/* ---- DOWNLOAD ---------------------------------------------------------- */
.dl-grid { display:grid; grid-template-columns:1fr; gap:1.1rem; margin-top:2rem; border:0; }
.dl-card { padding:clamp(1.6rem,3vw,2.1rem); border:0; border-radius:var(--r-xl);
  background:var(--paper-lift); display:flex; flex-direction:column; gap:1rem; }
.dl-card.is-soon { background:var(--sand); color:var(--muted); }
.dl-top { display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  flex-wrap:wrap; }
.dl-top h2 { font-size:1.7rem; }
.dl-top .meta { color:var(--muted); }
.dl-card .desc { color:var(--muted); margin:0; max-width:48ch; line-height:1.6; }
.note { border-top:1px solid var(--border); margin-top:auto; font-size:.95rem; }
.note summary { cursor:pointer; list-style:none; min-height:48px; display:flex;
  align-items:center; justify-content:space-between; font-family:var(--mono); font-size:10px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink); }
.note summary::-webkit-details-marker { display:none; }
.note summary::after { content:"\25BE"; color:var(--lime-ink); }
.note[open] summary::after { content:"\25B4"; }
.note .note-body { padding:.25rem 0 1rem; color:var(--muted); max-width:62ch; }
.note ol { margin:.5rem 0; padding-left:1.25rem; }
.note li { margin:.35rem 0; }

/* ---- ABOUT ------------------------------------------------------------- */
.story { display:grid; gap:2.6rem; }
.story section { border-top:1px solid var(--border); padding-top:1.6rem; }
.founders { display:grid; grid-template-columns:1fr; gap:1.1rem; margin-top:1.6rem; border:0; }
.founders li { list-style:none; padding:1.5rem 1.4rem; border:0; border-radius:var(--r-lg);
  background:var(--paper-lift); display:flex; align-items:center; gap:1rem; }
.founders .avatar { width:50px; height:50px; flex:0 0 50px; border:0; border-radius:50%;
  display:grid; place-items:center; background:var(--lime); color:var(--forest-deep);
  font-family:var(--mono); font-size:14px; font-weight:500; }
.founders .fn { font-size:1.28rem; line-height:1.12; }
.founders .fr { font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin-top:.3rem; }
.reg-line { margin-top:2rem; padding-top:1.3rem; border-top:1px solid var(--border);
  font-family:var(--mono); font-size:11px; letter-spacing:.07em; color:var(--muted);
  line-height:1.95; }

/* ---- CONTACT ----------------------------------------------------------- */
.comm { display:grid; grid-template-columns:1fr; gap:clamp(2rem,5vw,3.5rem);
  border-top:1px solid var(--border); padding-top:clamp(2rem,4vw,3rem); }
.cform { display:grid; gap:1.3rem; max-width:38rem; }
.field label { font-family:var(--mono); font-size:10px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted); display:block; margin-bottom:.45rem; }
.field input, .field select, .field textarea { width:100%; font:inherit; color:var(--ink);
  background:var(--paper-lift); border:1px solid var(--border); border-radius:var(--r-md);
  padding:.9rem 1.05rem; transition:border-color .2s var(--ease); }
.field textarea { min-height:150px; resize:vertical; font-family:var(--mono); font-size:13px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline:2px solid var(--lime-ink); outline-offset:1px; border-color:var(--lime-ink); }
/* Revealed after a mailto: submit, in case no email app opened.
   Full border plus a lime marker disc. No side stripe. */
.cfallback { border:1px solid oklch(0.885 0.075 119); border-radius:var(--r-lg);
  background:var(--lime-wash); padding:1.15rem 1.25rem; display:grid; gap:.9rem; }
.cfallback p { margin:0; font-size:.92rem; }
/* The marker is an absolutely-positioned disc, NOT a flex item: this paragraph
   mixes a <strong> with running text, and flex would lay those out as separate
   columns instead of one sentence. */
.cfallback p:first-child { position:relative; padding-left:1.35rem;
  color:var(--forest-deep); line-height:1.55; }
.cfallback p:first-child::before { content:""; position:absolute; left:0; top:.45em;
  width:9px; height:9px; border-radius:50%; background:var(--lime-ink); }
.cfallback p:first-child strong { font-weight:600; }
.cfallback-acts { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.25rem; }
.term-panel { display:grid; gap:1.85rem; align-content:start; }
.term-block { border-top:1px solid var(--border); padding-top:1.1rem; }
.term-block .meta { display:block; margin-bottom:.65rem; color:var(--lime-ink); }
.term-block .big { font-family:var(--mono); font-size:1.08rem; color:var(--ink); }

/* ---- LEGAL ------------------------------------------------------------- */
.legal-grid { display:grid; grid-template-columns:1fr; gap:2.5rem; }
.legal-index { align-self:start; }
.legal-index ol { list-style:none; margin:0; padding:0;
  border-left:1px solid var(--border); }
.legal-index a { display:block; padding:.45rem 1rem; font-family:var(--mono); font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted); text-decoration:none; }
.legal-index a:hover { color:var(--ink); box-shadow:inset 2px 0 0 var(--lime); }
.legal-body section { padding-block:clamp(1.85rem,3vw,2.6rem);
  border-top:1px solid var(--border); }
.legal-body section:first-child { border-top:0; padding-top:0; }
.legal-body h2 { display:flex; align-items:baseline; gap:.8rem; font-size:1.45rem;
  margin-bottom:1rem; letter-spacing:-.04em; }
.legal-body h2 .n { font-family:var(--mono); font-size:12px; font-weight:500;
  color:var(--forest-deep); background:var(--lime); border-radius:var(--r-pill);
  padding:.22rem .6rem; letter-spacing:.06em; }
.legal-body p, .legal-body li { color:var(--ink); }
.legal-body ul { padding-left:1.2rem; }
.legal-body li { margin:.45rem 0; }
.updated { font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.07em; }

/* ---- Footer ------------------------------------------------------------ */
.site-foot { background:var(--forest-deep); color:oklch(0.968 0.007 96 / .74);
  padding-block:clamp(3.5rem,7vw,5rem); }
.site-foot .wrap { display:grid; gap:2.25rem; }
.foot-top { display:grid; grid-template-columns:1fr; gap:2rem; padding-bottom:2.25rem;
  border-bottom:1px solid oklch(0.395 0.030 175 / .6); }
.foot-brand { font-size:2rem; font-weight:600; letter-spacing:-.08em;
  color:var(--paper-lift); text-decoration:none; }
.foot-brand span { color:var(--lime); }
.foot-lead { max-width:36ch; margin:.85rem 0 0; color:oklch(0.968 0.007 96 / .6); }
.foot-cols { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.foot-col h2 { font-family:var(--mono); font-size:10px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--lime); margin:0 0 1rem; font-weight:500;
  line-height:1.4; }
.foot-col a { display:block; color:oklch(0.968 0.007 96 / .76); padding:.32rem 0;
  text-decoration:none; }
.foot-col a:hover { color:var(--lime); }
.site-foot a { color:var(--paper-lift); }
.site-foot a:hover { color:var(--lime); }
.foot-co { font-family:var(--mono); font-size:10px; letter-spacing:.08em;
  color:oklch(0.968 0.007 96 / .62); line-height:1.9; }

/* ---- Sticky mobile WhatsApp bar --------------------------------------- */
.wa-bar { position:fixed; left:0; right:0; bottom:0; z-index:90; display:flex;
  align-items:center; justify-content:center; gap:.5rem; min-height:52px; padding:.5rem 1rem;
  background:var(--lime); color:var(--forest-deep); font-family:var(--sans); font-weight:600;
  text-decoration:none; border:0; }
.wa-bar:hover { background:var(--lime-bright); color:var(--forest-deep); }

/* ---- Mobile menu (no JS, native details) ------------------------------ */
.mobile-menu { display:none; }

/* ---- Motion ------------------------------------------------------------ */
/* Opacity and transform only. Never layout properties. */
@keyframes rise-in { from { opacity:0; transform:translateY(20px); }
  to { opacity:1; transform:translateY(0); } }
@keyframes card-float { 0%,100% { transform:rotate(-7deg) translateY(0); }
  50% { transform:rotate(-7deg) translateY(-9px); } }
@keyframes pulse-ring { 0%,100% { opacity:.4; } 50% { opacity:.85; } }
.home-page .hero-copy > * { animation:rise-in .7s var(--ease-soft) both; }
.home-page .hero-copy > :nth-child(2) { animation-delay:.07s; }
.home-page .hero-copy > :nth-child(3) { animation-delay:.14s; }
.home-page .hero-copy > :nth-child(4) { animation-delay:.21s; }
.hero-card { animation:card-float 5.5s ease-in-out .8s infinite; }
.ring-two { animation:pulse-ring 4s ease-in-out infinite; }

/* ---- Responsive: tablet and up ---------------------------------------- */
@media (min-width:48rem) {
  .wa-bar { display:none; }
  .prodcard-grid { grid-template-columns:1fr 1fr; }
  .prodcard-grid.rev .prodcard-media { order:-1; }
  .tiers { grid-template-columns:repeat(3,1fr); }
  .dl-grid { grid-template-columns:1fr 1fr; }
  .founders { grid-template-columns:repeat(3,1fr); }
  /* space-between pins each role label to the bottom of its card, so a name
     that wraps to two lines no longer pushes its role out of line. */
  .founders li { flex-direction:column; align-items:flex-start;
    justify-content:space-between; min-height:190px; }
  .comm { grid-template-columns:1.4fr 1fr; }
  .foot-top { grid-template-columns:1.4fr 1fr; }
}
@media (min-width:60rem) {
  .legal-grid { grid-template-columns:15rem 1fr; gap:3.5rem; }
  .legal-index { position:sticky; top:7rem; }
}

/* ---- Responsive: phone ------------------------------------------------- */
@media (max-width:47.99rem) {
  body { padding-bottom:52px; }

  .site-head { position:relative; z-index:100; padding-block:.6rem 0; }
  .site-head .wrap { min-height:56px; border-radius:var(--r-lg);
    padding:.5rem .6rem .5rem 1rem; flex-wrap:nowrap; justify-content:space-between; }
  .site-head .nav { display:none; }

  .mobile-menu { display:block; position:relative; }
  .mobile-menu summary { list-style:none; cursor:pointer; display:flex; align-items:center;
    gap:.55rem; min-height:40px; padding:0 .3rem 0 .7rem; color:var(--paper-lift);
    font-size:.8rem; font-weight:600; }
  .mobile-menu summary::-webkit-details-marker { display:none; }
  .menu-icon, .menu-icon::before, .menu-icon::after { display:block; width:17px; height:1.5px;
    background:var(--lime); transition:transform .2s var(--ease), opacity .2s var(--ease); }
  .menu-icon { position:relative; }
  .menu-icon::before, .menu-icon::after { content:""; position:absolute; left:0; }
  .menu-icon::before { top:-5px; } .menu-icon::after { top:5px; }
  .mobile-menu[open] .menu-icon { background:transparent; }
  .mobile-menu[open] .menu-icon::before { transform:translateY(5px) rotate(45deg); }
  .mobile-menu[open] .menu-icon::after { transform:translateY(-5px) rotate(-45deg); }
  /* Full-width drawer so the panel never chops the headline behind it. */
  .mobile-panel { position:absolute; top:calc(100% + .7rem); right:0;
    width:calc(100vw - 2rem); padding:.7rem; border-radius:var(--r-lg);
    background:var(--forest-deep); border:1px solid oklch(0.395 0.030 175 / .6);
    box-shadow:0 18px 44px oklch(0.198 0.030 175 / .35);
    animation:rise-in .22s var(--ease) both; }
  .mobile-panel a { display:flex; align-items:center; min-height:46px; padding:0 .8rem;
    border-radius:var(--r-md); color:oklch(0.968 0.007 96 / .8); text-decoration:none;
    font-size:.92rem; }
  .mobile-panel a[aria-current="page"] { color:var(--lime);
    background:oklch(0.395 0.030 175 / .4); }
  .mobile-panel .mobile-cta { justify-content:center; margin-top:.5rem;
    background:var(--lime); color:var(--forest-deep); font-weight:600; }

  .home-page .hero { margin-top:0; padding-top:2.5rem; }
  .hero-shell, .split-intro, .result-grid, .cta-wrap { grid-template-columns:1fr; }
  .hero-copy { padding-bottom:2rem; }
  .home-page .hero h1 { max-width:14ch; }
  .hero-orbit { width:330px; height:310px; justify-self:center; }
  .ring-one { width:380px; height:380px; right:-105px; bottom:-200px; }
  .ring-two { width:250px; height:250px; right:0; bottom:-85px; }
  .hero-scene { right:7px; bottom:3px; transform:scale(.78); transform-origin:bottom right; }
  .hero-card { right:46px; bottom:72px; transform:rotate(-6deg) scale(.82);
    transform-origin:bottom right; animation:none; }
  .chip-a { top:34px; right:8px; } .chip-b { bottom:34px; left:2px; }
  .orbit-dot { right:150px; top:16px; }

  .trust-strip .wrap { align-items:flex-start; flex-direction:column; gap:1rem; }
  .trust-stats { width:100%; justify-content:space-between; gap:.5rem; }
  .intro-section { padding-block:4.25rem; }
  .work-grid { grid-template-columns:1fr; padding-bottom:4.25rem; }
  .feature-main { min-height:500px; grid-template-columns:1fr; }
  .mini-dashboard { width:min(290px,80%); justify-self:end; }
  .feature-side { min-height:290px; }
  .result-band { padding-block:4.25rem; }
  .section-heading { align-items:flex-start; flex-direction:column; }
  .people-section { padding-block:4.25rem; }
  .product-rail { grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:2.5rem; }
  .product-rail a { min-height:120px; }
  .cta-section { padding-block:4.25rem; }
  .prodcard-media { min-height:230px; }
  .senda-shots { min-height:250px; padding:1rem .35rem; }
  .senda-shots img { width:min(43%,135px); border-width:3px; }
  .pagehead { padding-top:3.75rem; padding-bottom:2.25rem; }
  .pagehead .d-lg { max-width:14ch; }
  .pagehead .lead { font-size:1rem; }
  .section { padding-block:3.75rem; }
  .comm { gap:2.5rem; }
  .legal-grid { gap:2rem; }
  .foot-top { gap:2rem; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none !important; transition:none !important; }
}

/* ---- Focus: must read on paper, lime and forest ----------------------- */
:focus-visible { outline:2px solid var(--forest-deep); outline-offset:2px; }
.site-head :focus-visible, .site-foot :focus-visible,
.home-page .hero :focus-visible, .result-band :focus-visible,
.feature-main :focus-visible, .tier.featured :focus-visible,
.prodcard-bar :focus-visible { outline-color:var(--lime); }
.trust-strip :focus-visible, .cta-section :focus-visible,
.feature-side.yellow :focus-visible, .wa-bar:focus-visible {
  outline-color:var(--forest-deep); }

/* =========================================================================
   2026 REDESIGN — black + teal operational interface
   Inspired by the supplied redesign package's open, card-led composition.
   These overrides intentionally retain the public HTML's existing content,
   URLs and accessibility semantics, while replacing the visual system across
   every public page.
   ========================================================================= */
:root {
  --lime:#24d6c1; --lime-bright:#61f0dd; --lime-deep:#12b8a4;
  --lime-wash:#d9fbf6; --lime-ink:#08796d;
  --forest:#102421; --forest-deep:#071311; --forest-soft:#163a35;
  --forest-line:#2b625a; --paper:#f4f8f7; --paper-lift:#ffffff;
  --sand:#e3ecea; --ink:#091b18; --muted:#536966; --border:#d1dfdc;
  --row-hover:#edf6f4; --r-pill:999px; --r-xl:1.45rem; --r-lg:1rem;
  --r-md:.7rem; --r-sm:.45rem; --wrap:80rem;
}
body { background:var(--paper); color:var(--ink); }
h1,h2,h3,h4 { font-weight:600; letter-spacing:-.058em; }
.site-head { padding:1rem 0 .4rem; background:var(--paper); }
.site-head .wrap { max-width:calc(var(--wrap) - 2rem); min-height:68px;
  background:var(--forest-deep); border-color:var(--forest-line); box-shadow:none;
  border-radius:1rem; }
.nav { gap:.35rem; }
.nav a { font-size:.79rem; letter-spacing:.03em; text-transform:uppercase; }
.nav a[aria-current="page"] { background:transparent; color:var(--lime); }
.nav a.nav-cta { background:var(--lime); border-radius:.6rem; text-transform:none;
  letter-spacing:0; }
.btn { min-height:50px; border-radius:.65rem; background:var(--lime); color:var(--forest-deep);
  box-shadow:none; }
.btn:hover { background:var(--lime-bright); box-shadow:none; }
.btn.ghost { background:var(--paper-lift); border:1px solid var(--border); box-shadow:none; }
.pagehead { padding-top:clamp(4rem,8vw,7rem); padding-bottom:clamp(2.75rem,5vw,4.5rem); }
.pagehead .d-lg { max-width:16ch; font-size:clamp(3rem,6.4vw,5.5rem); }
.pagehead .lead { margin-top:1.4rem; max-width:56ch; }

/* The home becomes a single strong product stage followed by clean data-led modules. */
.home-page .hero { margin:0 auto; width:min(calc(100% - 2rem), calc(var(--wrap) - 2rem));
  padding:0; border-radius:1.45rem; background:linear-gradient(125deg,#061b19 4%,#0d4943 58%,#087e75 130%); }
.hero-shell { min-height:clamp(540px,58vw,660px); padding-top:5.5rem; }
.home-page .hero h1 { font-size:clamp(3.15rem,6.8vw,6.5rem); max-width:10.5ch; }
.home-page .hero h1 em { color:var(--lime); }
.home-page .hero .lead { font-size:1.08rem; }
.hero-card { border-radius:1rem; box-shadow:14px 14px 0 var(--lime); }
.hero-scene { border-radius:1rem; }
.trust-strip { margin-top:1.25rem; background:var(--paper-lift); border-block:1px solid var(--border); }
.trust-strip .wrap { min-height:96px; }
.trust-strip p { font-size:1rem; color:var(--ink); }
.trust-stats { color:var(--muted); }
.trust-stats b { color:var(--lime-ink); }
.intro-section { padding-block:clamp(5rem,10vw,9rem) 3.5rem; }
.work-grid { grid-template-columns:1.15fr .85fr; gap:1.25rem; }
.feature-main,.feature-side { border-radius:1rem; border:1px solid var(--border); }
.feature-main { min-height:500px; background:var(--forest-deep); }
.feature-main:hover,.feature-side:hover { transform:translateY(-3px); box-shadow:0 16px 32px rgb(7 19 17 / .12); }
.feature-side.yellow { background:var(--lime); }
.feature-side.soft { background:var(--paper-lift); }
.result-band { background:var(--forest-deep); }
.product-rail { border-top-color:var(--border); }
.product-rail a { border-color:var(--border); background:var(--paper-lift); padding:1.35rem; border-radius:.75rem; }
.cta-section { background:var(--lime); color:var(--forest-deep); }

/* Shared inner pages: unifying elevated content surfaces instead of isolated blocks. */
.prodcard,.tier,.dl-card,.founders li { border:1px solid var(--border); border-radius:1rem; box-shadow:0 9px 24px rgb(7 19 17 / .045); }
.prodcard { background:var(--paper-lift); overflow:hidden; }
.prodcard-bar { background:var(--forest-deep); color:var(--paper-lift); }
.prodcard-bar .status { color:var(--lime); }
.prodcard-media { background:var(--sand); }
.shot-empty { background:linear-gradient(135deg,#dff7f3,#bdebe4); color:var(--forest-deep); }
.tiers { gap:1rem; }
.tier { background:var(--paper-lift); }
.tier.featured { background:var(--forest-deep); color:var(--paper-lift); transform:translateY(-.65rem); }
.tier.featured .price,.tier.featured .tier-name,.tier.featured .feats,.tier.featured .ask { color:inherit; }
.tier.featured .meta { color:var(--lime); }
.tier.featured .feats li { border-color:var(--forest-line); }
.tier.featured .ask { opacity:.8; }
.dl-card { background:var(--paper-lift); }
.dl-card.is-soon { background:var(--sand); }
.story section,.term-block,.legal-body section { border-color:var(--border); }
.founders li { background:var(--paper-lift); }
.founders .avatar { background:var(--lime); }
.cform,.term-panel { background:var(--paper-lift); border:1px solid var(--border); border-radius:1rem; padding:clamp(1.25rem,3vw,2.25rem); }
.comm { border:0; align-items:start; }
.legal-index { background:var(--paper-lift); border:1px solid var(--border); border-radius:.9rem; padding:.75rem 0; }
.legal-index ol { border:0; }
.legal-body { background:var(--paper-lift); border:1px solid var(--border); border-radius:1rem; padding:clamp(1.3rem,3vw,2.5rem); }
.legal-body h2 .n { background:var(--lime); color:var(--forest-deep); }
.site-foot { background:var(--forest-deep); }

@media (max-width:47.99rem) {
  .site-head { padding-top:.65rem; }
  .site-head .wrap { width:calc(100% - 1rem); border-radius:.8rem; }
  .home-page .hero { width:calc(100% - 1rem); border-radius:.9rem; }
  .home-page .hero h1 { font-size:clamp(3rem,14vw,4.5rem); }
  .work-grid { grid-template-columns:1fr; }
  .tier.featured { transform:none; }
  .cform,.term-panel { padding:1.1rem; }
  .legal-body { padding:1.25rem; }
}

/* Enterprise product-marketing composition: clear hierarchy, generous white
   space, and dark data surfaces. This is deliberately a second structural
   layer, not a recolour of the previous site. */
.site-head{padding:0;background:var(--paper-lift);border-bottom:1px solid var(--border)}
.site-head .wrap{width:min(100%,var(--wrap));max-width:var(--wrap);min-height:74px;padding:.5rem var(--pad);border:0;border-radius:0;background:transparent;color:var(--ink)}
.brand{color:var(--ink);font-size:1.35rem;letter-spacing:-.08em}.brand-logo{filter:none}.nav a{color:var(--muted);text-transform:none;letter-spacing:0;font-size:.88rem}.nav a:hover,.nav a[aria-current="page"]{color:var(--ink);background:transparent}.nav a.nav-cta{min-height:44px;border-radius:999px;color:var(--forest-deep);box-shadow:inset 0 0 0 1px rgb(7 19 17 / .08)}
.home-page .hero{width:100%;border-radius:0;background:var(--forest-deep);position:relative;overflow:hidden}.home-page .hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 38%,rgb(36 214 193 / .34),transparent 0 26%),linear-gradient(120deg,transparent 55%,rgb(15 78 70 / .75));pointer-events:none}.hero-shell{min-height:670px;padding-top:4.8rem;grid-template-columns:minmax(0,1fr) minmax(360px,.9fr);gap:3rem}.hero-copy{align-self:start;padding-top:2.1rem}.home-page .hero h1{max-width:9.8ch;font-size:clamp(3.5rem,7.2vw,7.1rem);line-height:.91}.home-page .hero .lead{max-width:48ch;font-size:1.15rem}.home-page .hero .btn{background:var(--lime);border-radius:999px}.home-page .hero .light-link{min-height:50px;border:1px solid rgb(255 255 255 / .32);border-radius:999px;padding:0 1.4rem;color:#fff}.hero-orbit{width:100%;max-width:510px;height:510px;align-self:end}.hero-scene{width:375px;height:315px;right:12px;bottom:18px;border-radius:1.2rem;box-shadow:0 30px 70px rgb(0 0 0 / .35)}.hero-card{width:252px;right:210px;bottom:222px;border-radius:1.1rem;box-shadow:18px 18px 0 var(--lime)}.ring-one{width:560px;height:560px;right:-85px;bottom:-136px;border-color:rgb(255 255 255 / .12)}.ring-two{width:380px;height:380px;right:-12px;bottom:-50px}.trust-strip{margin:0;border:0;border-bottom:1px solid var(--border);background:var(--paper-lift)}.trust-strip .wrap{min-height:116px}.trust-strip p{font-size:1.12rem;max-width:31ch}.trust-stats{gap:3.6rem}.trust-stats span{min-width:100px}.trust-stats b{font-size:1.9rem;color:var(--ink)}
.intro-section{padding-top:8.5rem;padding-bottom:4.5rem}.split-intro{grid-template-columns:1.25fr .75fr;gap:6rem}.intro-body{border-left:1px solid var(--border);padding:0 0 0 2rem}.intro-body p{font-size:1.2rem}.round-link{margin-top:1.75rem}.work-grid{grid-template-columns:repeat(12,1fr);gap:1.25rem;padding-bottom:8rem}.feature-main{grid-column:span 7;min-height:580px;grid-template-columns:1fr;align-content:space-between;padding:2.75rem}.feature-main>div:first-child{max-width:27rem}.mini-dashboard{width:min(84%,410px);justify-self:end;margin:1rem 1.25rem 1.75rem 0;transform:rotate(2deg);box-shadow:16px 18px 0 var(--lime)}.feature-side{grid-column:span 5;min-height:280px;padding:2rem}.feature-side h2{font-size:clamp(2.4rem,4vw,4rem)}.feature-side.soft{grid-column:8/span 5}.result-band{padding-block:7.5rem}.result-grid{grid-template-columns:1fr 1.1fr;gap:6rem}.result-quote p{font-size:1.45rem;line-height:1.35}.people-section{padding-block:8rem}.section-heading{align-items:end}.product-rail{grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:3.5rem}.product-rail a{min-height:210px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:1.5rem;border:1px solid var(--border);border-radius:1rem;transition:transform .2s ease,box-shadow .2s ease}.product-rail a:hover{transform:translateY(-5px);box-shadow:0 14px 30px rgb(7 19 17 / .1)}.product-rail b{color:var(--lime-ink)}.product-rail span{font-size:1.9rem}.cta-section{padding-block:6.5rem}.cta-wrap{grid-template-columns:1.25fr .75fr;gap:5rem}.cta-wrap h2{font-size:clamp(3rem,5.5vw,5.5rem)}
.pagehead{max-width:var(--wrap);display:grid;grid-template-columns:1.1fr .9fr;gap:4rem;align-items:end;padding-top:7rem;padding-bottom:4.5rem}.pagehead .d-lg{max-width:12ch;margin:0}.pagehead .lead{margin:0 0 .4rem;justify-self:end;font-size:1.12rem}.prodcard{margin-bottom:2rem;border-radius:1.25rem}.prodcard-grid{min-height:470px}.prodcard-body{padding:clamp(2rem,4vw,4rem)}.prodcard-body h2{font-size:clamp(3rem,5vw,5rem)}.prodcard-media{padding:1.5rem}.prodcard-bar{padding:.9rem 1.5rem}.tiers{gap:1.5rem}.tier{padding:2.1rem;border-radius:1rem}.tier.featured{transform:translateY(-1rem)}.dl-grid{gap:1.25rem}.dl-card{min-height:340px;padding:2rem}.story{max-width:62rem;margin-inline:auto}.story .lead{font-size:1.45rem;line-height:1.5}.founders{grid-template-columns:repeat(3,1fr)}.founders li{min-height:210px}.comm{grid-template-columns:1.2fr .8fr;max-width:76rem;margin-inline:auto}.cform,.term-panel{box-shadow:0 14px 40px rgb(7 19 17 / .05)}.legal-grid{gap:4rem}.legal-body{box-shadow:0 14px 40px rgb(7 19 17 / .04)}
@media (max-width:59.99rem){.site-head .wrap{padding-inline:1rem}.nav{gap:0}.nav a{padding-inline:.5rem}.hero-shell{grid-template-columns:1fr;min-height:auto;padding-top:3rem}.hero-copy{padding-top:0}.hero-orbit{justify-self:center;height:420px}.work-grid{grid-template-columns:1fr}.feature-main,.feature-side,.feature-side.soft{grid-column:auto}.product-rail{grid-template-columns:repeat(2,1fr)}.pagehead{grid-template-columns:1fr;padding-top:4.5rem;gap:1.2rem}.pagehead .lead{justify-self:start}.founders{grid-template-columns:1fr}.comm{grid-template-columns:1fr}}
@media (max-width:47.99rem){.site-head .wrap{min-height:62px;width:100%;padding-inline:1rem}.brand{font-size:1.2rem}.mobile-menu summary{color:var(--ink)}.menu-icon,.menu-icon::before,.menu-icon::after{background:var(--ink)}.mobile-panel{right:.5rem;background:var(--forest-deep)}.home-page .hero{width:100%}.hero-shell{padding-top:2.75rem}.home-page .hero h1{font-size:clamp(3.25rem,15vw,4.75rem)}.hero-orbit{height:330px;width:330px}.hero-scene{width:320px;height:270px;right:0;bottom:0;transform:scale(.87);transform-origin:bottom right}.hero-card{right:65px;bottom:84px;transform:rotate(-5deg) scale(.82);transform-origin:bottom right}.trust-strip .wrap{padding-block:1.5rem}.trust-stats{gap:.75rem}.trust-stats b{font-size:1.35rem}.intro-section{padding-top:5rem}.intro-body{border-left:0;border-top:1px solid var(--border);padding:1.5rem 0 0}.feature-main{padding:1.6rem;min-height:495px}.feature-side{padding:1.6rem}.product-rail{gap:.75rem}.product-rail a{min-height:145px;padding:1rem}.product-rail span{font-size:1.45rem}.pagehead{padding:4rem 1rem 2.75rem}.prodcard-grid{min-height:0}.tier.featured{transform:none}.cta-wrap{grid-template-columns:1fr;gap:2rem}.result-grid{grid-template-columns:1fr;gap:2rem}}

/* Rich company and policy pages ------------------------------------------------ */
.eyebrow{margin:0 0 1rem;font:600 11px var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--lime-ink)}
.about-extra{padding:6rem 0;background:var(--forest-deep);color:var(--paper-lift)}
.about-extra .eyebrow,.about-principles .eyebrow{color:var(--lime)}
.about-extra-head{display:grid;grid-template-columns:1.1fr .65fr;gap:5rem;align-items:end}.about-extra h2,.about-principles h2{font-size:clamp(2.6rem,5vw,4.7rem);line-height:.96;max-width:13ch}.about-extra-head>p{font-size:1.1rem;line-height:1.65;color:rgb(255 255 255 / .72)}
.milestones{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;list-style:none;margin:4rem 0 0;padding:0}.milestones li{border-top:1px solid rgb(255 255 255 / .25);padding:1.1rem 0}.milestones span{font:600 11px var(--mono);color:var(--lime)}.milestones h3{margin:2.5rem 0 .75rem;font-size:1.35rem;letter-spacing:-.04em}.milestones p{color:rgb(255 255 255 / .68);font-size:.94rem;line-height:1.55}
.about-principles{padding:7rem 0;background:var(--paper-lift)}.principle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:3.5rem}.principle-grid article{min-height:250px;padding:1.8rem;border:1px solid var(--border);border-radius:1rem;background:var(--paper)}.principle-grid span{font:600 11px var(--mono);color:var(--lime-ink)}.principle-grid h3{margin:3rem 0 1rem;font-size:1.55rem;letter-spacing:-.05em}.principle-grid p{color:var(--muted);line-height:1.6}
.about-faq,.privacy-help,.terms-help{display:grid;grid-template-columns:.8fr 1.2fr;gap:5rem;border-top:1px solid var(--border);padding-top:3rem}.about-faq h2,.privacy-help h2,.terms-help h2{font-size:clamp(2.1rem,4vw,3.5rem);max-width:9ch}.about-faq details,.privacy-help details,.terms-help details{border-bottom:1px solid var(--border);padding:1.15rem 0}.about-faq summary,.privacy-help summary,.terms-help summary{list-style:none;cursor:pointer;font-weight:600;font-size:1.08rem;padding-right:2rem;position:relative}.about-faq summary::-webkit-details-marker,.privacy-help summary::-webkit-details-marker,.terms-help summary::-webkit-details-marker{display:none}.about-faq summary::after,.privacy-help summary::after,.terms-help summary::after{content:"+";position:absolute;right:0;color:var(--lime-ink);font-size:1.4rem;font-weight:400}.about-faq details[open] summary::after,.privacy-help details[open] summary::after,.terms-help details[open] summary::after{content:"−"}.about-faq details p,.privacy-help details p,.terms-help details p{max-width:58ch;margin:1rem 1.8rem .1rem 0;color:var(--muted);line-height:1.65}
.policy-summary,.terms-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:0 0 3rem;background:var(--border);border:1px solid var(--border);border-radius:1rem;overflow:hidden}.policy-summary>div,.terms-summary>div{padding:1.5rem;background:var(--paper-lift)}.policy-summary span,.terms-summary span{display:block;margin-bottom:1.1rem;font:600 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--lime-ink)}.policy-summary strong,.terms-summary strong{display:block;font-size:1.18rem;line-height:1.25;letter-spacing:-.03em}.policy-summary p{margin:.7rem 0 0;color:var(--muted);font-size:.9rem;line-height:1.55}.terms-summary{max-width:74ch;margin-inline:auto}.terms-summary a{color:inherit;text-decoration-color:var(--lime)}.privacy-help,.terms-help{margin-top:4rem;padding-top:4rem}.terms-help{max-width:74ch;margin-inline:auto}
@media(max-width:59.99rem){.about-extra-head,.about-faq,.privacy-help,.terms-help{grid-template-columns:1fr;gap:2rem}.milestones{grid-template-columns:1fr 1fr}.principle-grid{grid-template-columns:1fr}.policy-summary,.terms-summary{grid-template-columns:1fr}.policy-summary{gap:0}.policy-summary>div,.terms-summary>div{border-bottom:1px solid var(--border)}.policy-summary>div:last-child,.terms-summary>div:last-child{border-bottom:0}}
@media(max-width:47.99rem){.about-extra,.about-principles{padding:4.5rem 0}.milestones{grid-template-columns:1fr;margin-top:2.5rem}.milestones h3{margin-top:1.25rem}.principle-grid{margin-top:2.25rem}.about-faq,.privacy-help,.terms-help{padding-top:2.4rem;margin-top:2.5rem}}

/* =========================================================================
   UI Polish: Animations, Glass Header, Product Mockups, Pricing & WA FAB
   ========================================================================= */

/* ---- Keyframe animations ------------------------------------------------ */
@keyframes float-subtle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* ---- Frosted Sticky Header --------------------------------------------- */
.site-head {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0;
  background: oklch(0.992 0.004 96 / .88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}

.site-head .wrap {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: .45rem;
}

.brand {
  font-weight: 700;
  font-size: 1.32rem;
  letter-spacing: -.06em;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--ink);
  transition: opacity .2s var(--ease);
}

.brand:hover {
  opacity: .88;
}

.brand-logo {
  transition: transform .25s var(--ease-bounce);
}

.brand:hover .brand-logo {
  transform: rotate(-8deg) scale(1.05);
}

.nav {
  display: flex;
  align-items: center;
  gap: .25rem;
}

.nav a {
  padding: .5rem .85rem;
  font-size: .92rem;
  font-weight: 500;
  color: var(--muted);
  border-radius: var(--r-pill);
  text-decoration: none;
  transition: color .2s var(--ease), background-color .2s var(--ease);
}

.nav a:hover {
  color: var(--ink);
  background: oklch(0.245 0.014 175 / .06);
}

.nav a[aria-current="page"] {
  color: var(--forest-deep);
  font-weight: 600;
  background: oklch(0.245 0.014 175 / .08);
}

.nav a.nav-cta {
  margin-left: .5rem;
  padding: .55rem 1.25rem;
  background: var(--forest-deep);
  color: var(--paper-lift);
  font-weight: 600;
  font-size: .9rem;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  box-shadow: var(--shadow-sm);
  transition: background-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}

.nav a.nav-cta:hover {
  background: var(--forest);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  color: var(--lime);
}

/* Mobile menu details drawer */
.mobile-menu {
  display: none;
  position: relative;
}

.mobile-menu summary {
  list-style: none;
  cursor: pointer;
  padding: .45rem .85rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--paper-lift);
  font-weight: 600;
  font-size: .88rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  user-select: none;
}

.mobile-menu summary::-webkit-details-marker {
  display: none;
}

.mobile-menu[open] .mobile-panel {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 70px;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--forest-deep);
  padding: 1.5rem 1.25rem 3rem;
  gap: .5rem;
  z-index: 1000;
  overflow-y: auto;
  animation: float-subtle .2s var(--ease);
}

.mobile-panel a {
  padding: .9rem 1.1rem;
  color: var(--paper-lift);
  font-size: 1.15rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid oklch(0.395 0.030 175 / .4);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mobile-panel a[aria-current="page"] {
  color: var(--lime);
  font-weight: 600;
}

.mobile-panel a.mobile-cta {
  margin-top: 1.5rem;
  background: var(--lime);
  color: var(--forest-deep);
  border-radius: var(--r-pill);
  justify-content: center;
  font-weight: 600;
  border-bottom: 0;
}

/* ---- Hub ERP CSS Mockup ------------------------------------------------ */
.hub-mockup {
  width: 100%;
  background: var(--forest-deep);
  color: var(--paper-lift);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid oklch(0.395 0.030 175 / .6);
  font-family: var(--sans);
  text-align: left;
}

.hub-mockup-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  background: oklch(0.16 0.025 175);
  border-bottom: 1px solid oklch(0.395 0.030 175 / .5);
  font-family: var(--mono);
  font-size: 11px;
}

.hub-window-dots {
  display: flex;
  gap: 5px;
}

.hub-window-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: oklch(0.395 0.030 175);
}

.hub-window-dots span:nth-child(1) { background: #ff5f56; }
.hub-window-dots span:nth-child(2) { background: #ffbd2e; }
.hub-window-dots span:nth-child(3) { background: #27c93f; }

.hub-cntr-badge {
  color: var(--lime);
  font-weight: 600;
  letter-spacing: .08em;
}

.hub-rate-lock {
  color: var(--sand);
  font-size: 10px;
  background: oklch(0.315 0.033 175);
  padding: 2px 8px;
  border-radius: var(--r-pill);
}

.hub-mockup-body {
  padding: 1rem;
  background: oklch(0.22 0.028 175);
}

.hub-search-row {
  display: flex;
  gap: .5rem;
  margin-bottom: .85rem;
}

.hub-input-sim {
  flex: 1;
  background: oklch(0.16 0.025 175);
  border: 1px solid oklch(0.35 0.03 175);
  border-radius: var(--r-sm);
  padding: .45rem .75rem;
  font-size: 11px;
  font-family: var(--mono);
  color: oklch(0.968 0.007 96 / .65);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hub-table-shell {
  width: 100%;
  overflow-x: auto;
  background: oklch(0.18 0.026 175);
  border-radius: var(--r-sm);
  border: 1px solid oklch(0.32 0.03 175);
}

.hub-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.hub-table th {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: oklch(0.968 0.007 96 / .6);
  text-align: left;
  padding: .6rem .75rem;
  border-bottom: 1px solid oklch(0.32 0.03 175);
  background: oklch(0.15 0.024 175);
}

.hub-table td {
  padding: .65rem .75rem;
  border-bottom: 1px solid oklch(0.28 0.03 175 / .6);
  white-space: nowrap;
}

.hub-table tr:hover td {
  background: oklch(0.26 0.03 175 / .5);
}

.hub-client-name {
  font-weight: 600;
  color: #fff;
  display: block;
}

.hub-client-phone {
  font-family: var(--mono);
  font-size: 9.5px;
  color: oklch(0.968 0.007 96 / .55);
}

.hub-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.badge-paid {
  background: oklch(0.35 0.12 145 / .35);
  color: #55efc4;
  border: 1px solid #00b894;
}

.badge-ready {
  background: oklch(0.885 0.185 119 / .2);
  color: var(--lime);
  border: 1px solid var(--lime);
}

.badge-pending {
  background: oklch(0.7 0.15 70 / .2);
  color: #ffeaa7;
  border: 1px solid #fdcb6e;
}

.hub-mockup-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  background: oklch(0.15 0.024 175);
  border-top: 1px solid oklch(0.32 0.03 175);
  font-size: 11px;
}

.hub-foot-actions {
  display: flex;
  gap: .5rem;
}

.hub-btn-tag {
  font-family: var(--mono);
  font-size: 10px;
  padding: 3px 9px;
  border-radius: 4px;
  background: var(--lime);
  color: var(--forest-deep);
  font-weight: 600;
  text-decoration: none;
}

/* ---- Trace Container Portal CSS Mockup --------------------------------- */
.trace-mockup {
  width: 100%;
  background: var(--paper-lift);
  color: var(--ink);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
  font-family: var(--sans);
  text-align: left;
}

.trace-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1.15rem;
  background: var(--forest-deep);
  color: var(--paper-lift);
  font-family: var(--mono);
  font-size: 11px;
}

.trace-top span {
  color: var(--lime);
}

.trace-body {
  padding: 1.25rem;
}

.trace-search-bar {
  display: flex;
  gap: .5rem;
  margin-bottom: 1.15rem;
}

.trace-input {
  flex: 1;
  background: var(--sand);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: .5rem .85rem;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--forest-deep);
}

.trace-vessel-banner {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: .85rem 1rem;
  margin-bottom: 1.25rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
}

.trace-vessel-banner div span {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: .08em;
}

.trace-vessel-banner div strong {
  font-size: 13px;
  color: var(--ink);
}

/* 4-Step Stepper */
.trace-stepper {
  position: relative;
  margin: 1.5rem 0 1.25rem;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
}

.trace-stepper::before {
  content: "";
  position: absolute;
  top: 13px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: var(--border);
  z-index: 1;
}

.trace-step {
  position: relative;
  z-index: 2;
  text-align: center;
}

.trace-step-dot {
  width: 26px;
  height: 26px;
  margin: 0 auto .5rem;
  border-radius: 50%;
  background: var(--sand);
  border: 2px solid var(--border);
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
}

.trace-step.done .trace-step-dot {
  background: var(--forest-deep);
  border-color: var(--forest-deep);
  color: var(--lime);
}

.trace-step.active .trace-step-dot {
  background: var(--lime);
  border-color: var(--forest-deep);
  color: var(--forest-deep);
  box-shadow: 0 0 0 4px oklch(0.885 0.185 119 / .35);
}

.trace-step strong {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
}

.trace-step span {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--muted);
}

.trace-live-status {
  padding: .75rem 1rem;
  background: oklch(0.885 0.185 119 / .15);
  border: 1px solid var(--lime);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  font-weight: 500;
}

/* ---- Pricing Billing Switcher & Interactive Controls ------------------ */
.billing-toggle-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .65rem;
  margin: 2.5rem 0 1.75rem;
  text-align: center;
}

.billing-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--paper-lift);
  border: 1px solid var(--border);
  padding: 4px;
  border-radius: var(--r-pill);
  box-shadow: 0 4px 14px oklch(0.198 0.030 175 / .05);
}

.billing-toggle-btn {
  background: transparent;
  border: 0;
  padding: .55rem 1.35rem;
  border-radius: var(--r-pill);
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: all .2s var(--ease);
}

.billing-toggle-btn:hover {
  color: var(--ink);
}

.billing-toggle-btn.is-active {
  background: var(--forest-deep);
  color: var(--paper-lift);
  font-weight: 600;
  box-shadow: 0 2px 8px oklch(0.198 0.030 175 / .18);
}

.billing-badge {
  background: var(--lime);
  color: var(--forest-deep);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  letter-spacing: .04em;
  line-height: 1;
}

.billing-toggle-subtext {
  font-size: .88rem;
  color: var(--muted);
  margin: 0;
}

/* Tier Card Polish */
.tier {
  border: 1px solid var(--border);
}

.tier-tag {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lime-ink);
  display: block;
  margin-bottom: .25rem;
}

.tier-desc {
  font-size: .93rem;
  color: var(--muted);
  line-height: 1.45;
  margin: .35rem 0 .75rem;
  min-height: 2.8em;
}

.tier-price-box {
  margin: .5rem 0 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.tier-price-box .price {
  margin: 0;
}

.price-sub {
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.3;
}

.tier-desk-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--sand);
  border: 1px solid var(--border);
  padding: .35rem .75rem;
  border-radius: var(--r-sm);
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 1.25rem;
  width: fit-content;
}

.tier.featured {
  border: 2px solid var(--lime);
  box-shadow: 0 16px 44px oklch(0.885 0.185 119 / .2);
  position: relative;
}

.tier-popular-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--lime);
  color: var(--forest-deep);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .4rem 1.15rem;
  border-radius: var(--r-pill);
  white-space: nowrap;
  box-shadow: 0 4px 14px oklch(0.198 0.030 175 / .25);
}

.tier.featured .tier-tag {
  color: var(--lime);
}

.tier.featured .tier-desc {
  color: oklch(0.968 0.007 96 / .8);
}

.tier.featured .price-sub {
  color: oklch(0.968 0.007 96 / .75);
}

.tier.featured .tier-desk-badge {
  background: var(--forest-soft);
  border-color: var(--forest-line);
  color: var(--lime);
}

.tier.featured .btn {
  background: var(--lime);
  color: var(--forest-deep);
  font-weight: 700;
}

.tier.featured .btn:hover {
  background: var(--lime-bright);
  box-shadow: 0 10px 28px oklch(0.885 0.185 119 / .4);
}

/* Payment & Trust Strip */
.pricing-trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  margin: 3.5rem 0 2rem;
  padding: 2rem;
  background: var(--paper-lift);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xs);
}

.pricing-trust-item {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
}

.pricing-trust-icon {
  flex-shrink: 0;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  background: oklch(0.885 0.185 119 / .15);
  color: var(--forest-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}

.pricing-trust-item h3 {
  font-size: .95rem;
  margin: 0 0 .25rem;
  font-weight: 600;
  color: var(--forest-deep);
}

.pricing-trust-item p {
  font-size: .84rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.45;
}

/* Which Plan Fits Your Desk Guide */
.fit-guide-section {
  margin: 4.5rem 0 3rem;
}

.fit-guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-top: 1.75rem;
}

.fit-card {
  background: var(--sand);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}

.fit-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .65rem;
}

.fit-card-badge {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: var(--paper-lift);
  border: 1px solid var(--border);
  color: var(--forest-deep);
}

.fit-card h3 {
  font-size: 1.15rem;
  margin: 0 0 .4rem;
}

.fit-card p {
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.5;
  margin: 0 0 1rem;
}

.fit-card-rec {
  margin-top: auto;
  padding-top: .75rem;
  border-top: 1px dashed var(--border);
  font-size: .85rem;
  font-weight: 600;
  color: var(--forest-deep);
}

/* Pricing comparison matrix */
.matrix-section {
  margin-top: 4.5rem;
  border-top: 1px solid var(--border);
  padding-top: 3.5rem;
}

.matrix-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 2rem;
  background: var(--paper-lift);
  border: 1px solid var(--border);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}

.matrix-table th, .matrix-table td {
  padding: 1.05rem 1.2rem;
  border-bottom: 1px solid var(--border);
  text-align: center;
  font-size: .93rem;
}

.matrix-table th:first-child, .matrix-table td:first-child {
  text-align: left;
  font-weight: 500;
  width: 42%;
}

.matrix-table th {
  background: var(--sand);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.matrix-table td.col-featured {
  background: oklch(0.885 0.185 119 / .06);
  font-weight: 600;
}

.matrix-table .ck-icon {
  color: var(--lime-ink);
  font-weight: 700;
  font-size: 1.15rem;
}

.matrix-table .dash-icon {
  color: var(--muted);
  opacity: .4;
}

.matrix-category-row td {
  background: var(--sand);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--forest-deep);
  text-align: left;
  padding: .65rem 1.2rem;
  border-top: 1px solid var(--border);
}

/* Pricing FAQ Section */
.pricing-faq-section {
  margin-top: 5rem;
  border-top: 1px solid var(--border);
  padding-top: 3.5rem;
}

.faq-grid {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  margin-top: 2rem;
  max-width: 52rem;
  margin-inline: auto;
}

.faq-item {
  background: var(--paper-lift);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

.faq-item[open] {
  border-color: var(--forest-deep);
  box-shadow: var(--shadow-xs);
}

.faq-item summary {
  padding: 1.15rem 1.35rem;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--forest-deep);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary .faq-icon {
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--muted);
  transition: transform .2s var(--ease);
  line-height: 1;
}

.faq-item[open] summary .faq-icon {
  transform: rotate(45deg);
  color: var(--forest-deep);
}

.faq-item .faq-body {
  padding: 0 1.35rem 1.25rem;
  font-size: .94rem;
  color: var(--muted);
  line-height: 1.6;
}

.faq-item .faq-body p {
  margin: 0;
}

/* Pricing Bottom Callout */
.pricing-cta-card {
  margin: 4.5rem 0 2rem;
  background: var(--forest-deep);
  color: var(--paper-lift);
  border-radius: var(--r-xl);
  padding: clamp(2.2rem, 4vw, 3.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.25rem;
  box-shadow: 0 18px 48px oklch(0.198 0.030 175 / .2);
}

.pricing-cta-card h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  margin: 0;
  color: var(--paper-lift);
}

.pricing-cta-card p {
  max-width: 54ch;
  margin: 0;
  color: oklch(0.968 0.007 96 / .85);
  font-size: 1.05rem;
  line-height: 1.6;
}

.pricing-cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: .5rem;
}

/* ---- Floating WhatsApp Action Button (FAB) ----------------------------- */
.wa-fab {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .65rem 1.2rem .65rem .75rem;
  background: #25D366;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: .92rem;
  border-radius: var(--r-pill);
  box-shadow: 0 8px 24px rgba(37, 211, 102, .45);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), background-color .22s var(--ease);
}

.wa-fab:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 12px 30px rgba(37, 211, 102, .55);
  background: #20BA5A;
  color: #fff;
}

.wa-fab-icon {
  width: 24px;
  height: 24px;
  display: block;
  flex: 0 0 24px;
}

/* Hide old static bar if wa-fab is present */
.wa-bar {
  display: none !important;
}

/* Responsive tweaks */
@media (max-width: 47.99rem) {
  .mobile-menu {
    display: block;
  }
  .site-head .nav {
    display: none;
  }
  .wa-fab span {
    display: none;
  }
  .wa-fab {
    padding: .85rem;
    border-radius: 50%;
    right: 1rem;
    bottom: 1rem;
  }
  .matrix-table {
    display: block;
    overflow-x: auto;
  }
  .hub-mockup-body {
    padding: .5rem;
  }
  .trace-vessel-banner {
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
   Real Documentary & Mockup Photography Integration
   ========================================================================= */
.hero-scene-photo {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 410px;
  height: 340px;
  overflow: hidden;
  border: 1px solid oklch(0.968 0.007 96 / .3);
  border-radius: var(--r-xl);
  background: var(--forest-deep);
  box-shadow: 0 30px 75px rgba(0, 0, 0, .5);
}

.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.04) brightness(0.98);
  transition: transform .6s var(--ease);
}

.hero-scene-photo:hover .hero-img {
  transform: scale(1.03);
}

.hero-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, oklch(0.198 0.030 175 / .88) 0%, oklch(0.198 0.030 175 / .2) 45%, transparent 100%);
  pointer-events: none;
}

.hero-scene-photo p {
  position: absolute;
  z-index: 5;
  left: 18px;
  bottom: 16px;
  margin: 0;
  color: var(--paper-lift);
  font: 500 10px var(--mono);
  letter-spacing: .08em;
}

.hero-scene-photo p b {
  font-size: 11px;
  display: block;
}

.hero-scene-photo p span {
  margin-top: 4px;
  color: var(--lime);
  display: flex;
  align-items: center;
}

.result-port-photo {
  margin-top: 2rem;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid oklch(0.885 0.185 119 / .35);
  position: relative;
  box-shadow: var(--shadow-md);
  max-width: 520px;
}

.result-port-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--ease);
}

.result-port-photo:hover img {
  transform: scale(1.02);
}

.photo-caption {
  position: absolute;
  bottom: .75rem;
  left: .85rem;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  background: oklch(0.198 0.030 175 / .88);
  color: var(--lime);
  padding: 3px 9px;
  border-radius: 4px;
  backdrop-filter: blur(4px);
}

.prod-photo-card {
  width: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  background: var(--paper);
}

.prod-photo-card img {
  width: 100%;
  height: auto;
  max-height: 440px;
  object-fit: cover;
  display: block;
  transition: transform .4s var(--ease);
}

.prod-photo-card:hover img {
  transform: scale(1.02);
}

.prod-photo-overlay {
  position: absolute;
  bottom: .85rem;
  left: .85rem;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  background: oklch(0.198 0.030 175 / .92);
  color: #fff;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}

/* ---- Founders Team Photos -------------------------------------------- */
.founder-photo {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--paper);
  box-shadow: var(--shadow-sm);
  display: block;
  background: var(--sand);
}

@media (min-width: 60rem) {
  .founder-photo {
    width: 100%;
    height: 190px;
    flex: none;
    border-radius: var(--r-md);
    margin-bottom: .85rem;
  }
  .founders li {
    padding: 1.25rem;
    align-items: stretch;
    justify-content: flex-start;
  }
}

@media (max-width: 47.99rem) {
  .hero-photo-showcase {
    max-width: 100%;
    margin-top: 1rem;
  }
  .hero-photo-badge {
    font-size: 9.5px;
    padding: 5px 10px;
    top: .75rem;
    left: .75rem;
  }
  .hero-photo-stat {
    padding: .5rem .85rem;
    bottom: .75rem;
    right: .75rem;
  }
  .hero-photo-stat strong {
    font-size: 1.35rem;
  }
}

/* ---- Full Picture Hero Section --------------------------------------- */
.home-page .hero.hero-full-picture {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: clamp(540px, 62vw, 700px);
  display: flex;
  align-items: center;
  background: var(--forest-deep);
}

.hero-bg-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  display: block;
}

.hero-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    oklch(0.18 0.030 175 / .95) 0%,
    oklch(0.18 0.030 175 / .88) 42%,
    oklch(0.18 0.030 175 / .48) 75%,
    oklch(0.18 0.030 175 / .25) 100%
  ),
  linear-gradient(
    180deg,
    oklch(0.18 0.030 175 / .5) 0%,
    transparent 40%,
    oklch(0.18 0.030 175 / .65) 100%
  );
}

.hero-full-picture .hero-shell {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: 5rem;
  padding-bottom: 5rem;
  display: flex;
  align-items: center;
}

.hero-full-picture .hero-copy {
  max-width: 640px;
  padding-bottom: 0;
}

/* ---- Hub Feature Showcase (Homepage) --------------------------------- */
.feature-main-media {
  width: 100%;
  max-width: 480px;
  justify-self: end;
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
  border: 1px solid oklch(0.968 0.007 96 / .25);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
  background: var(--sand);
  margin-top: 1.25rem;
}

.feature-hub-img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  display: block;
  transition: transform .4s var(--ease);
}

.feature-main:hover .feature-hub-img {
  transform: scale(1.03);
}

@media (max-width: 59.99rem) {
  .hero-full-picture .hero-shell {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
  .feature-main-media {
    max-width: 100%;
  }
  .hero-bg-overlay {
    background: linear-gradient(
      180deg,
      oklch(0.18 0.030 175 / .92) 0%,
      oklch(0.18 0.030 175 / .82) 50%,
      oklch(0.18 0.030 175 / .65) 100%
    );
  }
}