/*
 * The public marketing site (home, features, pricing, about, contact) —
 * the other exception to Tailwind (see CLAUDE.md and payslip_document.css).
 * Ported from static-site/*.html, where this exact stylesheet was
 * duplicated byte-for-byte across all five pages. Kept as plain CSS here
 * so the marketing layout never depends on the app's Tailwind theme tokens.
 */
:root{
  --pine:#0B6B4E;
  --pine-dark:#07452F;
  --pine-deep:#062E20;
  --ink:#0D1F18;
  --slate:#54685F;
  --mist:#E7F0EB;
  --paper:#F7FAF8;
  --card:#FFFFFF;
  --line:#DCE7E1;
  --amber:#B97F14;
  --amber-bg:#FBF0D7;
  --green-chip:#DCF3E7;
  --green-chip-ink:#0B6B4E;
  --teal:#14B8A6;
  --cobalt:#2563EB;
  --spine:linear-gradient(180deg,#14B8A6 0%,#2563EB 100%);
  --radius:14px;
  --shadow:0 1px 2px rgba(13,31,24,.05),0 12px 32px -12px rgba(13,31,24,.14);
  --shadow-lg:0 2px 4px rgba(13,31,24,.06),0 28px 60px -20px rgba(13,31,24,.22);
  --font-display:"Bricolage Grotesque",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{font-family:var(--font-body);color:var(--ink);background:var(--paper);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}

/* ---------- type ---------- */
h1,h2,h3,.display{font-family:var(--font-display);line-height:1.08;letter-spacing:-.02em;font-weight:700}
h1{font-size:clamp(2.4rem,5.4vw,4rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}
h3{font-size:1.2rem;line-height:1.3}
.lede{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--slate);max-width:38em}
.eyebrow{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pine);display:inline-flex;align-items:center;gap:.6em;font-weight:500}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--spine);border-radius:2px}
.muted{color:var(--slate)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(247,250,248,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:800;font-size:1.25rem;letter-spacing:-.02em}
.logo small{font-family:var(--font-mono);font-weight:400;font-size:.62rem;color:var(--slate);letter-spacing:.12em;text-transform:uppercase;margin-top:6px}
.nav-links{display:flex;gap:22px;font-size:.92rem;font-weight:500;color:var(--slate);white-space:nowrap}
.nav-links a{padding:6px 2px;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink);border-color:var(--pine)}
.nav-cta{display:flex;gap:10px;align-items:center;white-space:nowrap}
.menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-family:var(--font-mono);font-size:.8rem;cursor:pointer}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:.95rem;border-radius:12px;padding:12px 22px;border:1px solid transparent;cursor:pointer;transition:transform .12s,box-shadow .12s,background .15s}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(20,184,166,.5);outline-offset:2px}
.btn-primary{background:var(--pine);color:#fff;box-shadow:0 8px 20px -8px rgba(11,107,78,.55)}
.btn-primary:hover{background:var(--pine-dark);transform:translateY(-1px)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--pine);color:var(--pine)}
.btn-light{background:#fff;color:var(--pine-deep)}
.btn-light:hover{transform:translateY(-1px)}
.btn-lg{padding:15px 28px;font-size:1.02rem}

/* ---------- hero ---------- */
.hero{position:relative;padding:76px 0 40px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1 .accent{background:linear-gradient(120deg,var(--teal),var(--cobalt));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lede{margin:22px 0 30px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-note{font-family:var(--font-mono);font-size:.75rem;color:var(--slate);margin-top:16px}
.hero-bg{position:absolute;inset:0;pointer-events:none;background:
 radial-gradient(560px 320px at 82% 8%,rgba(20,184,166,.12),transparent 65%),
 radial-gradient(520px 340px at 8% 90%,rgba(11,107,78,.08),transparent 60%)}

/* ---------- the spine (signature) ---------- */
.spined{position:relative}
.spined::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:4px;transform:translateX(-50%);background:var(--spine);border-radius:4px;opacity:.9}
.vertebra{position:relative;z-index:1;width:18px;height:18px;margin:0 auto;border-radius:50%;background:#fff;border:4px solid var(--teal);box-shadow:0 0 0 6px var(--paper)}
.spine-sec{position:relative;z-index:1;padding:64px 0}
.spine-date{position:relative;z-index:1;margin:0 auto;width:max-content;background:var(--pine);color:#fff;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;padding:8px 16px;border-radius:10px;box-shadow:var(--shadow)}
@media (max-width:900px){.spined::before{left:12px}.vertebra,.spine-date{margin-left:0}.vertebra{margin-left:4px}}

/* ---------- sections ---------- */
section{padding:72px 0}
.sec-head{max-width:640px;margin-bottom:44px}
.sec-head .lede{margin-top:14px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split.rev>.copy{order:2}
.split .copy h2{margin:10px 0 14px}
.feature-points{margin-top:22px;display:grid;gap:14px}
.feature-points li{display:flex;gap:12px;align-items:flex-start;font-size:.96rem}
.feature-points li strong{display:block;font-weight:600}
.feature-points li span.pt-ico{flex:none;width:26px;height:26px;border-radius:8px;background:var(--mist);color:var(--pine);display:grid;place-items:center;font-size:.8rem;margin-top:2px}
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}
.card h3{margin:14px 0 8px}
.card p{font-size:.93rem;color:var(--slate)}
.card .ico{width:42px;height:42px;border-radius:12px;background:var(--mist);color:var(--pine);display:grid;place-items:center}

/* ---------- product mockups ---------- */
.shot{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg);overflow:hidden}
.shot-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:linear-gradient(180deg,#FCFDFC,#F2F6F4);border-bottom:1px solid var(--line)}
.shot-bar i{width:10px;height:10px;border-radius:50%;background:#D8E3DD}
.shot-bar i:nth-child(1){background:#F0B4A8}.shot-bar i:nth-child(2){background:#F2D49B}.shot-bar i:nth-child(3){background:#A8D8BE}
.shot-bar span{font-family:var(--font-mono);font-size:.68rem;color:var(--slate);margin-left:8px}
.shot-app{background:var(--pine);color:#fff;font-size:.72rem;font-weight:600;display:flex;gap:16px;padding:9px 16px;align-items:center}
.shot-app b{font-family:var(--font-display);font-size:.8rem}
.shot-app em{font-style:normal;opacity:.75;font-weight:400}
.shot-body{padding:18px}
.mini-title{font-family:var(--font-display);font-weight:700;font-size:1rem;margin-bottom:12px;letter-spacing:-.01em}
.mini-table{width:100%;border-collapse:collapse;font-size:.76rem}
.mini-table th{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);text-align:left;padding:7px 10px;border-bottom:1px solid var(--line);font-weight:500}
.mini-table td{padding:9px 10px;border-bottom:1px solid #EEF4F0}
.mini-table tr:last-child td{border-bottom:0}
.mini-table .num{font-family:var(--font-mono);font-size:.72rem}
.chip{display:inline-block;font-size:.64rem;font-weight:600;padding:3px 9px;border-radius:99px}
.chip-green{background:var(--green-chip);color:var(--green-chip-ink)}
.chip-amber{background:var(--amber-bg);color:var(--amber)}
.chip-gray{background:#EDF1EF;color:var(--slate)}
.chip-red{background:#FBE3DE;color:#B4432C}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.stat{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fff}
.stat b{font-family:var(--font-display);font-size:1.15rem;display:block}
.stat span{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.09em;text-transform:uppercase;color:var(--slate)}
.stat.warn b{color:var(--amber)}
/* attendance ring */
.ring-wrap{display:grid;place-items:center;padding:8px 0 4px}
.ring{position:relative;width:150px;height:150px}
.ring svg{transform:rotate(-90deg)}
.ring-label{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.ring-label b{font-family:var(--font-mono);font-size:1.3rem}
.ring-label span{font-family:var(--font-mono);font-size:.55rem;letter-spacing:.1em;color:var(--slate);text-transform:uppercase}
/* timeline mock */
.tl{position:relative;padding-left:26px}
.tl::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:3px;background:var(--spine);border-radius:3px}
.tl-item{position:relative;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:12px;box-shadow:0 4px 14px -8px rgba(13,31,24,.14)}
.tl-item::before{content:"";position:absolute;left:-23px;top:16px;width:10px;height:10px;border-radius:50%;background:#fff;border:3px solid var(--teal)}
.tl-item:last-child{margin-bottom:0}
.tl-meta{display:flex;gap:8px;align-items:center;margin-bottom:6px;flex-wrap:wrap}
.tl-av{width:20px;height:20px;border-radius:50%;color:#fff;font-size:.6rem;font-weight:700;display:grid;place-items:center;font-family:var(--font-mono)}
.tl-item h4{font-size:.8rem;font-weight:600;margin-bottom:3px}
.tl-item p{font-size:.7rem;color:var(--slate)}
.tl-log{margin-top:8px;font-family:var(--font-mono);font-size:.62rem;color:var(--slate);background:#F4F8F6;border-radius:8px;padding:6px 9px}
/* payslip mock */
.slip{font-size:.74rem}
.slip-head{text-align:center;border-bottom:3px solid var(--pine);padding-bottom:10px;margin-bottom:12px}
.slip-head b{font-family:var(--font-display);color:var(--pine);font-size:1.05rem;letter-spacing:.04em}
.slip-head span{display:block;font-family:var(--font-mono);font-size:.6rem;color:var(--slate);margin-top:3px;letter-spacing:.08em}
.slip-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.slip-box{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.slip-box header{background:#F2F6F4;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.09em;text-transform:uppercase;padding:6px 10px;color:var(--slate)}
.slip-box div{display:flex;justify-content:space-between;padding:6px 10px;border-top:1px solid #EEF4F0}
.slip-net{background:var(--pine);color:#fff;border-radius:10px;text-align:center;padding:10px;font-family:var(--font-display);font-size:.95rem;letter-spacing:.02em}

/* ---------- pricing ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.tier{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.tier.hot{border:2px solid var(--pine);position:relative;box-shadow:var(--shadow-lg)}
.tier.hot::before{content:"Most teams start here";position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--pine);color:#fff;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;padding:5px 14px;border-radius:99px;white-space:nowrap}
.tier h3{font-size:1.35rem}
.tier .who{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);margin:6px 0 16px}
.tier .price{font-family:var(--font-display);font-size:1.5rem;font-weight:800;letter-spacing:-.02em;margin-bottom:4px}
.tier .price small{display:block;font-family:var(--font-mono);font-weight:400;font-size:.66rem;color:var(--slate);letter-spacing:.06em;margin-top:4px}
.tier ul{margin:20px 0 26px;display:grid;gap:10px;font-size:.9rem}
.tier ul li{display:flex;gap:10px}
.tier ul li::before{content:"✓";color:var(--pine);font-weight:700;flex:none}
.tier .btn{margin-top:auto}

/* ---------- forms ---------- */
.form-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:34px;box-shadow:var(--shadow-lg)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:grid;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:.85rem;font-weight:600}
.field input,.field select,.field textarea{font-family:var(--font-body);font-size:.95rem;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#FCFDFC;color:var(--ink);width:100%}
.field textarea{resize:vertical;min-height:110px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--teal)}
.form-note{font-size:.8rem;color:var(--slate);margin-top:14px}
.form-ok{display:none;background:var(--green-chip);color:var(--pine-deep);border:1px solid #BFE5D2;border-radius:12px;padding:16px 18px;font-size:.92rem;margin-top:18px}
.form-ok.show{display:block}
.form-errors{background:#FBE3DE;color:#8A2E1C;border:1px solid #F0B4A8;border-radius:12px;padding:16px 18px;font-size:.9rem;margin-bottom:18px}
.form-errors p{font-weight:600;margin-bottom:6px}
.form-errors ul{list-style:disc;padding-left:1.2em}
.form-errors li{font-size:.88rem}
.field-error{color:#B4432C;font-size:.78rem;margin-top:-2px}

/* ---------- misc blocks ---------- */
.band{background:var(--pine-deep);color:#fff;border-radius:24px;padding:64px 48px;position:relative;overflow:hidden}
.band::before{content:"";position:absolute;left:50%;top:-40px;bottom:-40px;width:4px;background:var(--spine);opacity:.5}
.band h2{color:#fff;position:relative}
.band .lede{color:#B9CFC6;position:relative}
.band .hero-actions{position:relative;margin-top:28px}
.quote{border-left:4px solid;border-image:var(--spine) 1;padding:6px 0 6px 24px;font-family:var(--font-display);font-size:clamp(1.2rem,2.4vw,1.7rem);font-weight:600;line-height:1.35;letter-spacing:-.01em;max-width:32em}
.faq{display:grid;gap:14px;max-width:760px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 24px}
.faq summary{font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::after{content:"+";font-family:var(--font-mono);color:var(--pine);font-size:1.2rem}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:12px;color:var(--slate);font-size:.94rem}
.logos-row{display:flex;gap:14px;flex-wrap:wrap}
.logos-row .chip{font-size:.72rem;padding:7px 14px}
.kpi-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:34px 0}
.kpi-strip div b{font-family:var(--font-display);font-size:2rem;display:block;letter-spacing:-.02em}
.kpi-strip div > span{font-size:.82rem;color:var(--slate)}
.steps{counter-reset:step;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.step{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;position:relative}
.step::before{counter-increment:step;content:counter(step,decimal-leading-zero);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;color:#fff;background:var(--pine);border-radius:8px;padding:4px 9px;position:absolute;top:-13px;left:22px}
.step h3{margin:8px 0 8px;font-size:1.05rem}
.step p{font-size:.9rem;color:var(--slate)}

/* ---------- footer ---------- */
footer{background:var(--pine-deep);color:#C7D9D1;margin-top:80px}
.foot-in{display:grid;grid-template-columns:1.4fr repeat(4,minmax(0,1fr));gap:36px;padding:56px 0 40px}
.foot-in .logo{color:#fff}
.foot-in p{font-size:.86rem;margin-top:12px;color:#9DB8AD;max-width:26em}
.foot-in h4{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:#7FA294;margin-bottom:16px;font-weight:500}
.foot-in ul{display:grid;gap:10px;font-size:.9rem}
.foot-in ul a:hover{color:#fff}
.foot-base{border-top:1px solid rgba(255,255,255,.12);padding:20px 0;display:flex;justify-content:space-between;gap:14px;font-size:.78rem;color:#7FA294;flex-wrap:wrap}

/* ---------- page hero (inner pages) ---------- */
.page-hero{padding:72px 0 30px}
.page-hero h1{font-size:clamp(2.1rem,4.4vw,3.2rem);margin-top:12px}
.page-hero .lede{margin-top:16px}

/* ---------- reveal ---------- */
/* Content is visible by default. Only the `js` class (set by an inline
   script) opts into the hidden-then-revealed state, so if scripts fail
   to load the page still renders completely. */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.in{opacity:1;transform:none}

/* ---------- currency (INR default, USD for non-India timezones) ---------- */
[data-currency]{display:none}
[data-currency="inr"]{display:revert}
.intl [data-currency="inr"]{display:none}
.intl [data-currency="usd"]{display:revert}

/* ---------- responsive ---------- */
/* The nav collapses BEFORE the rest of the layout does. Five links plus
   two call-to-action buttons stop fitting a good deal earlier than a
   two-column split does, and a wrapped nav bar looks broken in a way a
   stacked section does not. */
@media (max-width:1080px){
  .nav-links{display:none;position:absolute;top:68px;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);flex-direction:column;gap:0;padding:10px 24px 18px}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 0;border-bottom:1px solid var(--line)}
  .menu-btn{display:block}
  .nav-cta .btn-ghost{display:none}
}

@media (max-width:960px){
  .hero-grid,.split{grid-template-columns:1fr;gap:36px}
  .split.rev>.copy{order:0}
  .cards-3,.tiers,.steps{grid-template-columns:1fr}
  .tier.hot{order:-1}
  .kpi-strip{grid-template-columns:repeat(2,1fr)}
  .foot-in{grid-template-columns:1fr 1fr}
  .form-grid{grid-template-columns:1fr}
  .nav-links{display:none;position:absolute;top:68px;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);flex-direction:column;gap:0;padding:10px 24px 18px}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 0;border-bottom:1px solid var(--line)}
  .menu-btn{display:block}
  .nav-cta .btn-ghost{display:none}
  .band{padding:44px 26px}
  .stat-row{grid-template-columns:repeat(2,1fr)}
}

/* ---------- legal documents (privacy, terms) ---------- */
.legal{max-width:760px}
.legal-meta{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--slate);margin-top:18px}
.legal-toc{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 26px;margin-bottom:40px}
.legal-toc h2{font-size:.8rem;font-family:var(--font-mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--slate);margin-bottom:14px}
.legal-toc ol{list-style:none;counter-reset:toc;display:grid;gap:8px;
  grid-template-columns:repeat(2,minmax(0,1fr))}
.legal-toc li{counter-increment:toc;font-size:.9rem}
.legal-toc li::before{content:counter(toc) ".";font-family:var(--font-mono);
  color:var(--pine);margin-right:8px;font-size:.8rem}
.legal-toc a:hover{color:var(--pine)}

.legal section{margin-bottom:38px;scroll-margin-top:90px}
.legal section > h2{font-family:var(--font-display);font-size:1.35rem;letter-spacing:-.02em;
  margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.legal h3{font-size:1rem;margin:22px 0 8px}
.legal p{color:var(--slate);margin-bottom:14px}
.legal ul{list-style:disc;padding-left:22px;margin-bottom:16px;display:grid;gap:8px}
.legal ul li{color:var(--slate);font-size:.95rem}
.legal ul li strong{color:var(--ink)}
.legal a{color:var(--pine);font-weight:500;text-decoration:underline;text-underline-offset:2px}
.legal .callout{background:var(--mist);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 22px;margin-bottom:22px}
.legal .callout p{color:var(--ink);margin-bottom:0;font-size:.94rem}
.legal .todo{background:var(--amber-bg);border:1px dashed var(--amber);border-radius:var(--radius);
  padding:16px 20px;margin-bottom:28px}
.legal .todo p{color:var(--amber);margin-bottom:0;font-size:.88rem;font-weight:500}
.legal table{width:100%;border-collapse:collapse;margin-bottom:18px;font-size:.9rem}
.legal table th,.legal table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);
  vertical-align:top;color:var(--slate)}
.legal table th{color:var(--ink);font-weight:600;font-size:.82rem;
  font-family:var(--font-mono);letter-spacing:.04em;text-transform:uppercase}
.legal-scroll{overflow-x:auto}
/* Reopens the cookie banner from inside the policy text. A button, not a
   link, because it performs an action rather than navigating — styled to
   read as part of the sentence it sits in. */
.legal-inline-button{font:inherit;color:var(--pine);font-weight:500;background:none;border:0;
  padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.legal-inline-button:focus-visible{outline:3px solid rgba(20,184,166,.55);outline-offset:2px;border-radius:3px}

@media (max-width:640px){
  .legal-toc ol{grid-template-columns:1fr}
}

/* Two-plan pricing grid — .tiers defaults to three columns. */
.tiers-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.tiers-2{grid-template-columns:1fr}}

/* ---------------------------------------------------------------
   reCAPTCHA v3
   ---------------------------------------------------------------
   The floating badge is hidden because this app's CSP is nonce-based
   for style-src, so the <style> element reCAPTCHA injects to position
   it is blocked and the badge would otherwise land unstyled in the
   corner of the page. Google permits hiding it provided the
   attribution is shown instead — that is .recaptcha-notice, rendered
   by shared/_spam_protection. Do not remove one without the other.
   --------------------------------------------------------------- */
.grecaptcha-badge { visibility: hidden; }

.recaptcha-notice {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #7b8a94;
}

.recaptcha-notice a {
  color: inherit;
  text-decoration: underline;
}

/* ======================================================================
   REAL PRODUCT SCREENSHOTS

   The original pages carried hand-built HTML mockups of the product. They
   were faithful when written and drift the moment the app changes; these
   are exports of the running application, so they cannot.

   Every image is a fixed-ratio figure with explicit width and height so
   the page never reflows as they load — a feature page carries four of
   them, and cumulative layout shift on a marketing page is a ranking
   problem as much as a taste one.
   ====================================================================== */
.screen{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden;margin:0}
.screen img{width:100%;height:auto;display:block;background:#F7FAF8}
.screen figcaption{font-size:.82rem;color:var(--slate);padding:12px 16px;border-top:1px solid var(--line);background:linear-gradient(180deg,#FCFDFC,#F5F8F6)}
/* Long captures are cropped to their most useful region rather than
   squeezed to a ribbon. */
.screen.tall img{max-height:520px;object-fit:cover;object-position:top}
.screen.wide img{max-height:400px;object-fit:cover;object-position:top left}

.screen-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.screen-grid.one{grid-template-columns:1fr}

/* ---------- breadcrumbs ---------- */
.crumbs{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;color:var(--slate);display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.crumbs a:hover{color:var(--pine)}
.crumbs span[aria-hidden]{opacity:.5}

/* ---------- feature index ---------- */
.feat-group{margin-bottom:56px}
.feat-group > h2{margin-bottom:6px}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px}
.feat-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s,border-color .15s}
.feat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:#C6DBD0}
.feat-card .thumb{aspect-ratio:16/9;overflow:hidden;background:var(--mist);border-bottom:1px solid var(--line)}
.feat-card .thumb img{width:100%;height:100%;object-fit:cover;object-position:top left}
.feat-card .body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.feat-card h3{font-size:1.05rem;margin-bottom:6px}
.feat-card p{font-size:.9rem;color:var(--slate);flex:1}
.feat-card .more{margin-top:14px;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--pine);font-weight:500}

/* ---------- spec table ---------- */
.specs{width:100%;border-collapse:collapse;font-size:.92rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.specs th,.specs td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line);vertical-align:top}
.specs tr:last-child th,.specs tr:last-child td{border-bottom:0}
.specs th{width:34%;font-weight:600;color:var(--ink);background:#FBFDFC}
.specs td{color:var(--slate)}

/* ---------- problem callout ---------- */
.problem{background:var(--amber-bg);border:1px solid #EBD9A8;border-radius:var(--radius);padding:24px 28px;max-width:44em}
.problem b{display:block;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);margin-bottom:8px}
.problem p{color:#6B5411;font-size:.98rem}

/* ---------- related ---------- */
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.related a{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px;transition:border-color .15s,transform .15s}
.related a:hover{border-color:var(--pine);transform:translateY(-1px)}
.related b{display:block;font-family:var(--font-display);font-size:1rem;margin-bottom:4px}
.related span{font-size:.86rem;color:var(--slate)}

/* ---------- benefits ---------- */
.benefits{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.benefit{border-left:3px solid;border-image:var(--spine) 1;padding-left:20px}
.benefit h3{font-size:1.02rem;margin-bottom:6px}
.benefit p{font-size:.93rem;color:var(--slate)}

/* ---------- comparison table ---------- */
.compare-table{width:100%;border-collapse:collapse;font-size:.92rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.compare-table th,.compare-table td{padding:14px 18px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.compare-table thead th{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);background:#FBFDFC;font-weight:500}
.compare-table td:first-child{font-weight:600}
.compare-table .no{color:#9A5B4E}
.compare-table .yes{color:var(--pine)}
.compare-table tr:last-child td{border-bottom:0}

@media (max-width:900px){
  .feat-grid,.related,.benefits,.screen-grid{grid-template-columns:1fr}
  .screen.tall img,.screen.wide img{max-height:none;object-fit:contain}
}

/* ======================================================================
   FLOWS — the problem-first pages

   The site used to lead with a catalogue of seventeen features. These
   components exist to lead with the job instead: the tool stack a small
   business is currently paying for, the symptoms of running it that way,
   the chain of stages that replaces it, and — the one that carries the
   whole argument — what moves between stages without anybody re-typing it.
   ====================================================================== */

/* ---------- the stack swap: six logins on the left, one on the right --- */
.stack-swap{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:28px;align-items:center;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:30px;box-shadow:var(--shadow)}
.stack-side > h3{font-size:1rem;margin-bottom:4px}
.stack-side > p.stack-cap{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--slate);margin-bottom:16px}
.stack-old{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tool{border:1px dashed #C6D5CD;border-radius:11px;padding:11px 13px;background:#FBFCFB;
  font-size:.85rem;color:var(--slate);line-height:1.35}
.tool b{display:block;color:var(--ink);font-weight:600;font-size:.86rem}
.tool span{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.08em;
  text-transform:uppercase;color:#93A69D}
.stack-arrow{display:grid;place-items:center;color:var(--pine);flex:none}
.stack-arrow span{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--slate);margin-top:6px;white-space:nowrap}
.stack-new{border:2px solid var(--pine);border-radius:13px;padding:20px;
  background:linear-gradient(160deg,#F2F9F5,#FFFFFF)}
.stack-new b{font-family:var(--font-display);font-size:1.2rem;display:block;letter-spacing:-.02em}
.stack-new ul{margin-top:12px;display:grid;gap:7px;font-size:.85rem;color:var(--slate)}
.stack-new ul li{display:flex;gap:8px}
.stack-new ul li::before{content:"✓";color:var(--pine);font-weight:700;flex:none}
.stack-new .stack-price{margin-top:16px;font-family:var(--font-mono);font-size:.74rem;
  color:var(--pine);font-weight:500}
@media (max-width:860px){
  .stack-swap{grid-template-columns:1fr;padding:22px}
  .stack-arrow{transform:rotate(90deg);padding:6px 0}
  .stack-arrow span{display:none}
}

/* ---------- symptoms: "you have this problem if…" ---------- */
.symptoms{display:grid;gap:12px;max-width:56em}
.symptoms li{display:flex;gap:13px;align-items:flex-start;background:#fff;
  border:1px solid var(--line);border-left:3px solid #E4B85C;border-radius:12px;
  padding:15px 18px;font-size:.95rem;color:var(--ink);line-height:1.5}
.symptoms li::before{content:"!";flex:none;width:22px;height:22px;border-radius:7px;
  background:var(--amber-bg);color:var(--amber);display:grid;place-items:center;
  font-family:var(--font-mono);font-size:.74rem;font-weight:600;margin-top:1px}

/* ---------- the hand-off badge under every flow stage ---------- */
.carry{display:flex;gap:11px;align-items:flex-start;margin-top:20px;padding:13px 16px;
  background:var(--mist);border-radius:12px;font-size:.88rem;color:var(--pine-dark)}
.carry b{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--pine);flex:none;margin-top:3px}

/* ---------- flow cards on the index and the home page ---------- */
.flow-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.flow-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:26px;box-shadow:var(--shadow);
  transition:transform .15s,box-shadow .15s,border-color .15s}
.flow-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:#C6DBD0}
.flow-card .flow-arrows{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--pine);margin-bottom:12px}
.flow-card h3{font-size:1.12rem;margin-bottom:8px}
.flow-card p{font-size:.92rem;color:var(--slate);flex:1}
/* Also used outside a card, on the home page's condensed chains. */
.flow-steps{margin:16px 0 0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.flow-steps span{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.05em;
  background:var(--mist);color:var(--pine-dark);border-radius:99px;padding:4px 11px}
.flow-steps i{font-style:normal;color:var(--faint,#A9BAB2);font-size:.7rem}
.flow-card .more{margin-top:16px;font-family:var(--font-mono);font-size:.72rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--pine);font-weight:500}
@media (max-width:900px){.flow-grid{grid-template-columns:1fr}}

/* ---------- the chain strip: what replaces what ---------- */
.swap-table{width:100%;border-collapse:collapse;font-size:.93rem;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.swap-table th,.swap-table td{text-align:left;padding:14px 18px;
  border-bottom:1px solid var(--line);vertical-align:top}
.swap-table thead th{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--slate);background:#FBFDFC;font-weight:500}
.swap-table tbody td:first-child{color:var(--slate);width:38%}
.swap-table tbody td:last-child{color:var(--ink)}
.swap-table tr:last-child td{border-bottom:0}

/* ---------- big-number strip ("one login, not nine") ---------- */
.count-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.count{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.count b{font-family:var(--font-display);font-size:2.1rem;display:block;letter-spacing:-.03em;
  line-height:1.05}
/* Direct child only: `dual_currency` puts two <span data-currency> inside
   the <b>, and a descendant selector here would restyle the price itself. */
.count > span{font-size:.86rem;color:var(--slate);display:block;margin-top:6px}
@media (max-width:900px){.count-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- problem → solution pairs ---------- */
.pairs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.pair{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;box-shadow:var(--shadow)}
.pair .said{font-size:1.02rem;font-weight:600;line-height:1.4;margin-bottom:12px;
  padding-left:16px;border-left:3px solid #E4B85C}
.pair .then{font-size:.93rem;color:var(--slate);margin-bottom:14px}
.pair .fix{display:flex;gap:10px;align-items:flex-start;font-size:.93rem}
.pair .fix::before{content:"→";color:var(--pine);font-weight:700;flex:none}
.pair .fix a{color:var(--pine);font-weight:600;text-decoration:underline;text-underline-offset:2px}
@media (max-width:900px){.pairs{grid-template-columns:1fr}}