@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:100 900;src:url('/fonts/inter-latin-wght-normal.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-display:swap;font-weight:100 900;src:url('/fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2')}


/* ==========================================================================
   KoalaFix site.css - THE single stylesheet for every page.
   Layout: tokens + editorial styles, then shared nav/footer chrome, then
   the home/product design system scoped under body.mod at the bottom.
   ========================================================================== */

/* ----- Tokens ----- */
:root{
  /* Ink (foregrounds) */
  --ink:#0B0D12; --ink-2:#14171F; --ink-3:#1E222D;

  /* Paper (cream backgrounds) */
  --paper:#F6F2E8; --paper-2:#EFEADE; --paper-3:#E6DFCE;

  /* Lines & muted */
  --line:#D8D0B9; --line-soft:#E4DDCA;
  --mute:#6B6A60; --mute-2:#8A897D;

  /* Accent (Australian orange - used sparingly) */
  --accent:#6D28D9; --accent-2:#5B21B6; --accent-soft:rgba(109,40,217,0.12);

  /* App indigo (primary CTA color) */
  --app:#6D28D9; --app-2:#5B21B6; --app-3:#A78BFA;
  --app-soft:rgba(109,40,217,0.12);
  --app-glow:rgba(109,40,217,0.30);
  --app-grad:linear-gradient(135deg,#6D28D9 0%,#A78BFA 100%);

  /* Home/product (.mod) accents */
  --indigo:#6D28D9; --indigo-deep:#5B21B6; --green:#1B9E55; --peach:#FFC9A8;

  /* App dark surface (mockup only) */
  --app-bg:#0F0F16; --app-bg2:#14141E; --app-bg3:#1A1A28; --app-bg4:#212136;
  --app-border:#222232; --app-border2:#2A2A40;
  --app-text:#E2E2EE; --app-text2:#9EA5C5; --app-text3:#6B7294;
  --app-green:#27AE60;

  /* Status */
  --good:#2E7D32; --warn:#B06A00; --bad:#B0241C;

  /* Type stacks - two families, no mono. */
  --serif:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --app-sans:"Segoe UI Variable","Segoe UI","Inter",-apple-system,system-ui,sans-serif;

  /* Layout */
  --maxw:1180px; --gutter:clamp(28px, 5vw, 56px);

  /* Section spacing - SINGLE SOURCE OF TRUTH for all .section rhythm.
     Edit these tokens (+ the mobile overrides in the max-width:820px block)
     to restandardise padding/margins for every section across every page.
     Page CSS must never set section padding directly - only use .section. */
  --section-y:40px;          /* .section top + bottom padding */
  --section-head-gap:48px;   /* column gap inside .section-head */
  --section-head-mb:48px;    /* space below .section-head, before its content */

  /* Radii - consolidated to 3 + pill */
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-pill:999px;

  /* Shadows */
  --shadow-1:0 1px 0 rgba(11,13,18,.06),0 1px 2px rgba(11,13,18,.04);
  --shadow-2:0 10px 30px rgba(11,13,18,.08),0 2px 6px rgba(11,13,18,.04);
  --shadow-3:0 24px 60px rgba(11,13,18,.18);
  --shell:0 30px 80px rgba(10,12,28,.45),0 4px 16px rgba(10,12,28,.18);

  /* Unified header/footer (match home page) */
  --lav:#C9B8F0;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}

/* ----- Reset ----- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
  font-feature-settings:"ss01","cv11";
}
img{display:block;max-width:100%;height:auto}
::selection{background:var(--ink);color:var(--lav)}
:focus-visible{outline:3px solid var(--app);outline-offset:3px;border-radius:4px}
a{color:inherit;text-decoration:none}
/* Long tokens (file paths, registry keys, URLs) must break instead of forcing
   the page wider than a phone. Inline code was overflowing help/policy pages. */
code{overflow-wrap:anywhere;word-break:break-word}
button{font:inherit;cursor:pointer;background:none;border:0}

/* ----- Utilities ----- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);position:relative;z-index:2}
.serif{font-family:var(--serif);font-weight:500;letter-spacing:-.015em}
.sans{font-family:var(--sans);font-style:normal;font-weight:700;letter-spacing:-.025em}

/* Heading defaults - Fraunces ROMAN by default. Italic is opt-in. */
h1,h2,h3,h4,h5,h6{font-family:var(--serif);font-weight:500;font-style:normal;letter-spacing:-.015em;overflow-wrap:break-word}

/* ----- Scroll reveal ----- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity 600ms cubic-bezier(.22,1,.36,1),transform 600ms cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}
.reveal-stagger > *{opacity:0;transform:translateY(16px);transition:opacity 550ms cubic-bezier(.22,1,.36,1),transform 550ms cubic-bezier(.22,1,.36,1)}
.reveal-stagger.in > *{opacity:1;transform:none}
.reveal-stagger.in > *:nth-child(1){transition-delay:0ms}
.reveal-stagger.in > *:nth-child(2){transition-delay:80ms}
.reveal-stagger.in > *:nth-child(3){transition-delay:160ms}
.reveal-stagger.in > *:nth-child(4){transition-delay:240ms}
.reveal-stagger.in > *:nth-child(5){transition-delay:320ms}
.reveal-stagger.in > *:nth-child(6){transition-delay:400ms}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.reveal-stagger > *{opacity:1!important;transform:none!important;transition:none!important}
}

/* ==========================================================================
   NAV + FOOTER chrome lives in chrome.css (shared with modern.css pages)
   ========================================================================== */

.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 18px;border-radius:var(--r-pill);font-size:14px;font-weight:600;
  border:1px solid transparent;
  transition:transform .2s cubic-bezier(.22,1,.36,1),background .2s ease,color .2s ease,box-shadow .2s ease;
}


.btn-ghost{border-color:var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.btn-app{background:var(--app-grad);color:#fff;box-shadow:0 6px 16px var(--app-glow)}
.btn-app:hover{transform:translateY(-1px);box-shadow:0 12px 28px var(--app-glow)}


/* ==========================================================================
   HERO (home + page mastheads share patterns)
   ========================================================================== */
.hero{padding:96px 0 56px;position:relative}
@media (max-width:820px){
  .hero{padding:48px 0 32px}
}


 /* second orb removed - calmer hero */
.hero .wrap{position:relative;z-index:2}

.hero .eyebrow,
.masthead .eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.14em;
  color:var(--mute);text-transform:uppercase;margin-bottom:24px;
}
.hero .eyebrow{padding:6px 14px;background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r-pill)}

.hero h1,
.masthead h1{
  /* Fraunces ROMAN by default - italic only on the .serif-italic span */
  font-family:var(--serif);font-style:normal;font-weight:400;
  font-size:clamp(44px,7vw,84px);line-height:1.02;letter-spacing:-.025em;
  margin:0 0 24px;max-width:18ch;
  font-optical-sizing:auto;
}
.hero h1 .sans,
.masthead h1 .sans{font-family:var(--sans);font-style:normal;font-weight:700;letter-spacing:-.03em}
.hero h1 .underline{background-image:linear-gradient(transparent 64%,rgba(109,40,217,.20) 64%);padding:0 4px}

.hero .lede,
.masthead .lede{font-size:19px;line-height:1.6;color:var(--ink-2);max-width:60ch;margin:0 0 32px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ==========================================================================
   SECTIONS

   Default rhythm - you should not need to think about this:
     .section                     → 80px top + bottom (52px on mobile).

   Two CSS rules make the default correct so authors don't reach for overrides:

     1. ".section + .section" collapses the SECOND section's top padding
        when two sections stack. Without this, defaults double (80 + 80 = 160px)
        between every pair of sections, which is too much and tempts inline
        style overrides.

     2. ".section-card-bridge" + ":has(+ .section-card-bridge)" handles the
        "card sitting between two major sections" case (e.g. the scorecard
        tease on the home page). One class on ONE section - the bridge section
        itself - gives the card 24px on both sides AND collapses the preceding
        section's bottom padding so the framing is symmetric.

   Variants and explicit overrides:
     .section.alt                 → same rhythm, alt-color background band.
     .section.section-card-bridge → 24px top + bottom (20px mobile). Wraps a
                                    bridge card; also collapses preceding
                                    section's padding-bottom. Use this for
                                    scorecard-tease, security-teaser, etc.
     .section.section-flush-top   → 0px top. Use only when the previous element
                                    is NOT a .section (e.g. first section after
                                    the sticky nav). For .section + .section
                                    the sibling rule already collapses top - no
                                    modifier needed.
     .section.section-flush-bottom→ 0px bottom. Symmetric. Rare.

   Never use inline style="padding-top:..." - if the default + bridge pattern
   don't fit your case, add a NEW named modifier here and use that instead.

   PAGE-SPECIFIC section classes (e.g. .mission-section, .next-steps,
   .faq-section, .scorecard-tease) should ALWAYS be paired with .section in
   the HTML so they participate in the sibling-collapse rhythm. Their CSS
   should only own *content* styling (borders, fonts, layout) - never
   padding. The padding is .section's job.

       <!-- GOOD -->
       <section class="section mission-section">...</section>

       <!-- BAD: doubles padding when adjacent to another .section -->
       <section class="mission-section">...</section>
   ========================================================================== */
.section{padding:var(--section-y) 0;position:relative}
.section.alt{background:var(--paper-2)}

/* Stacked-section collapse - keeps inter-section gap at one padding (80px),
   not doubled (160px). Modifiers below win on specificity. */
/* Every section uses symmetric --section-y top+bottom (content sits vertically
   centred). No sibling-collapse: gaps read as one even rhythm site-wide. */

/* Card-bridge pattern - symmetric framing around a card. The :has() rule
   collapses the previous section's bottom padding. Supported in all modern
   browsers (Chrome 105+, Safari 15.4+, Firefox 121+). */


/* Colored .alt bands get SYMMETRIC top+bottom padding (--band-y) so each band
   reads as a balanced block, and the plain sections touching a band are trimmed
   to --band-trim on that edge. Because band-trim + band-y = section-y, every gap
   between sections is identical whether or not a colour change happens there.
   One consistent model, site-wide - no per-section tweaks needed. */


/* Explicit-flush overrides - rare. Used when the previous element isn't a
   .section, so the sibling-collapse rule doesn't fire. */


/* First section after the nav has no section above it, so it doubles its top
   padding to keep the gap below the nav equal to a normal section gap. */
.nav + .section{padding-top:calc(var(--section-y) * 2)}
/* tint the last plain section before the footer */
.section:not(.alt) + .section:not(.alt):has(+ .footer){background:var(--paper-2)}

/* The section directly above the footer keeps normal, symmetric padding. Instead
   of extra spacing, it gets the alt tint so it reads as its own block against the
   footer. Only applied when it would otherwise match the section above it (a plain
   section following a plain section); where either side is already an .alt or
   .problem-band band, they contrast on their own. */


/* ==========================================================================
   LINK + BUTTON UTILITIES

   Brand-color inline links:
     .link-app        → color:var(--app), weight 500. The default inline brand
                        link in unscoped contexts (homepage prose, mastheads,
                        policy contact lines). Mirrors the scoped .page-body a
                        / .faq a / section.chunk a treatment.
     .link-app-bold   → same, weight 600. Use when the link is the action in a
                        callout-style sentence ("Email support", "Take the
                        scorecard"). Mirrors .dpa-callout a / .calendly-fallback a.
     .link-accent     → color:var(--accent-2), weight 600. Reserved for the
                        coral accent - currently only the about-us investor
                        contact line.

   Dark-background CTA:
     .btn-ghost.btn-ghost-inverse → swap the ghost button's ink border + text
                        for paper, for use on a dark band (e.g. .cta-band on
                        pricing). Distinct from .closer .btn-ghost, which uses
                        a softer translucent border for the brand "closer" feel.

   Never use inline style="color:var(--app)" / style="color:var(--accent-2)"
   on <a>, and never style="border-color:var(--paper);color:var(--paper)" on a
   button - add or reuse a class here instead so the palette stays grep-able.
   ========================================================================== */
.link-app{color:var(--app);font-weight:500}
.link-app-bold{color:var(--app);font-weight:600}
.link-accent{color:var(--accent-2);font-weight:600}

.section-head{display:grid;grid-template-columns:1fr 1.4fr;gap:var(--section-head-gap);margin-bottom:var(--section-head-mb);align-items:end}
.section-head h2{
  font-family:var(--serif);font-style:normal;font-weight:500;
  font-size:clamp(32px,4.6vw,48px);line-height:1.08;letter-spacing:-.02em;margin:0;
  font-optical-sizing:auto;
}
.section-head h2 .sans{font-family:var(--sans);font-style:normal;font-weight:700}
.section-head p{font-size:17px;line-height:1.55;color:var(--ink-2);margin:0;max-width:52ch}
@media (max-width:820px){
  /* Mobile section rhythm - just re-point the same tokens; rules below stay generic. */
  :root{
    --section-y:35px;
    --section-head-gap:14px;
    --section-head-mb:32px;
  }
  .section-head{grid-template-columns:1fr}
  .section-head p{font-size:15.5px}
}

/* ==========================================================================
   HOME - PROBLEM BAND
   ========================================================================== */


/* ==========================================================================
   HOME - STEPS (how it works)
   ========================================================================== */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:stepCount}
.step{
  background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r-md);padding:24px 22px;
  display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden;
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease;
}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
/* Step number - small label, not giant decorative italic */
.step::before{
  counter-increment:stepCount;content:counter(stepCount,decimal-leading-zero);
  position:absolute;top:18px;right:22px;
  font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.14em;
  color:var(--mute);line-height:1;
}
.step h3{margin:0;font-family:var(--sans);font-size:18px;font-weight:600;letter-spacing:-.01em}
.step p{margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.55}
@media (max-width:820px){
  .steps{grid-template-columns:1fr}
}

/* ==========================================================================
   HOME - INTEGRATIONS
   ========================================================================== */
.integrations{
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line-soft);border-radius:var(--r-lg);overflow:hidden;background:var(--paper);
}
.integrations .tile{
  padding:28px 22px;
  border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  display:flex;flex-direction:column;gap:10px;align-items:flex-start;
  background:transparent;transition:background .3s ease,transform .3s cubic-bezier(.22,1,.36,1);
  position:relative;
}
.integrations .tile:nth-child(4n){border-right:0}
.integrations .tile:nth-last-child(-n+4){border-bottom:0}
.integrations .tile:hover{background:rgba(109,40,217,.04);transform:translateY(-2px)}
/* Tile logo - Inter bold, not italic serif */
.integrations .tile .logo{
  width:36px;height:36px;border-radius:var(--r-sm);background:var(--ink);color:var(--paper);
  display:grid;place-items:center;
  font-family:var(--sans);font-weight:700;font-size:15px;letter-spacing:-.02em;
  transition:background .3s ease,color .3s ease,transform .3s cubic-bezier(.22,1,.36,1);
}
.integrations .tile:hover .logo{background:var(--app-grad);color:#fff;transform:rotate(-3deg) scale(1.06)}
.integrations .tile h4{margin:6px 0 0;font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:-.01em}
.integrations .tile p{margin:0;font-size:13px;color:var(--mute);line-height:1.45}
@media (max-width:820px){
  .integrations{grid-template-columns:repeat(2,1fr)}
  .integrations .tile:nth-child(4n){border-right:1px solid var(--line-soft)}
  .integrations .tile:nth-child(2n){border-right:0}
  .integrations .tile:nth-last-child(-n+4){border-bottom:1px solid var(--line-soft)}
  .integrations .tile:nth-last-child(-n+2){border-bottom:0}
}


/* ==========================================================================
   HOME - APP MOCKUP (dark surface - its own world)
   ========================================================================== */
/* .app-section padding removed - section now uses .section default rhythm */
.app-shell{
  background:var(--app-bg);color:var(--app-text);
  border-radius:var(--r-lg);padding:0;box-shadow:var(--shell);overflow:hidden;
  font-family:var(--app-sans);position:relative;
}
.app-shell::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(50% 60% at 0% 0%,rgba(109,40,217,.15),transparent 60%),radial-gradient(40% 40% at 100% 100%,rgba(120,167,255,.08),transparent 60%);
}
.app-titlebar{
  height:40px;display:flex;align-items:center;gap:14px;padding:0 16px;
  background:#111118;border-bottom:1px solid var(--app-border);position:relative;z-index:1;
}
.app-titlebar .traffic{display:flex;gap:6px}
.app-titlebar .traffic span{width:11px;height:11px;border-radius:50%;background:#444}
.app-titlebar .traffic span:nth-child(1){background:#FF5F57}
.app-titlebar .traffic span:nth-child(2){background:#FEBC2E}
.app-titlebar .traffic span:nth-child(3){background:#28C840}
.app-titlebar .title{font-size:12px;color:var(--app-text2);letter-spacing:.04em}
.app-titlebar .right{margin-left:auto;display:flex;align-items:center;gap:10px;font-family:var(--sans);font-size:10.5px;font-weight:500;color:var(--app-text3);letter-spacing:.08em}
.app-titlebar .right .live{color:var(--app-green);display:flex;align-items:center;gap:5px}
.app-titlebar .right .live .dot{width:6px;height:6px;border-radius:50%;background:var(--app-green);animation:pulseDot 2s ease-out infinite}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(39,174,96,.55)}70%{box-shadow:0 0 0 8px rgba(39,174,96,0)}100%{box-shadow:0 0 0 0 rgba(39,174,96,0)}}
.app-preview-frame{padding:0;overflow:hidden}
.app-preview-frame img{width:100%;height:auto;display:block}

/* ==========================================================================
   PRICING - PLANS
   ========================================================================== */
.pricing{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.plan{
  background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:40px 28px 32px;
  display:flex;flex-direction:column;gap:18px;position:relative;overflow:hidden;
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,border-color .3s ease;
}
.plan:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:var(--app)}
.plan.featured{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.plan.featured::before{
  content:"";position:absolute;inset:0;background:radial-gradient(50% 50% at 50% 0%,rgba(109,40,217,.3),transparent 60%);pointer-events:none;
}
.plan .plan-head{display:flex;align-items:center;justify-content:space-between;gap:10px;position:relative;z-index:1}
/* Plan name - Fraunces ROMAN, not italic */
.plan .name{font-family:var(--serif);font-style:normal;font-weight:500;font-size:28px;letter-spacing:-.015em}
.plan .bestfor{font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.04em;color:var(--mute);position:relative;z-index:1;margin-top:-8px}
.plan.featured .bestfor{color:#C9C7BD}
.plan .badge,
.plan.featured .badge{
  font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:4px 10px;border-radius:var(--r-pill);background:var(--app-grad);color:#fff;white-space:nowrap;
}
.plan .price{display:flex;align-items:baseline;gap:6px;position:relative;z-index:1}
/* Price amount - Fraunces ROMAN */
.plan .price .amount{font-family:var(--serif);font-style:normal;font-weight:500;font-size:56px;line-height:1;letter-spacing:-.025em}
.plan .price .per{font-family:var(--sans);font-size:12px;font-weight:500;color:var(--mute);letter-spacing:.04em}
.plan.featured .price .per{color:var(--mute-2)}
.plan .seats{font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.04em;color:var(--mute);position:relative;z-index:1}
.plan.featured .seats{color:#C9C7BD}
.plan .per-seat{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.04em;color:var(--mute-2);position:relative;z-index:1;margin-top:-8px}
.plan.featured .per-seat{color:#8A897D}


.plan ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;position:relative;z-index:1}
.plan li{font-size:14px;display:flex;gap:10px;align-items:flex-start;line-height:1.5}
.plan li::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--app-soft);border:1px solid var(--app);flex-shrink:0;margin-top:4px}
.plan.featured li::before{background:rgba(109,40,217,.25);border-color:var(--app-3)}
.plan .cta{margin-top:auto;position:relative;z-index:1;white-space:nowrap;padding-left:12px;padding-right:12px}
@media (max-width:1100px){
  .pricing{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .pricing{grid-template-columns:1fr}
}

/* Pricing fine print strip */


/* Pricing - comparison table */
.compare-wrap{
  overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line-soft);border-radius:var(--r-lg);overflow:hidden;background:var(--paper);
  box-shadow:var(--shadow-1);
}
.compare{width:100%;border-collapse:collapse;font-size:14.5px}
.compare thead th{
  padding:22px 20px;text-align:left;background:var(--paper-2);
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);
  border-bottom:1px solid var(--line-soft);
}
.compare thead th.col-plan{
  font-family:var(--serif);font-style:normal;font-weight:500;font-size:20px;letter-spacing:-.01em;
  color:var(--ink);text-transform:none;text-align:center;
}
.compare thead th.col-plan.featured{background:var(--ink);color:var(--paper)}
.compare tbody td{padding:16px 20px;border-top:1px solid var(--line-soft);vertical-align:top}
.compare tbody td.col-label{font-weight:500;color:var(--ink-2)}
.compare tbody td.col-val{text-align:center;color:var(--ink-2)}
.compare tbody td.col-val.featured{background:rgba(109,40,217,.04)}
.compare tbody td .check{
  display:inline-block;width:16px;height:16px;border-radius:50%;
  background:var(--app-soft);border:1px solid var(--app);vertical-align:middle;
}
.compare tbody td .dash{color:var(--mute-2);font-family:var(--sans)}
.compare tbody tr.group-head td{
  background:var(--paper-2);font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);padding:14px 20px;
}
/* Hint above the comparison table on tablet widths where it scrolls horizontally.
   On mobile the table reflows to a card list, so the hint is hidden there. */
.mobile-note{
  margin-top:14px;padding:0 4px;text-align:center;
  font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.06em;
  color:var(--mute);text-transform:uppercase;
}
@media (max-width:820px){
  .mobile-note{display:none}
}

@media (max-width:820px){
  .compare-wrap{overflow:visible;border:0;background:transparent;box-shadow:none;border-radius:0}
  .compare,.compare tbody,.compare tr,.compare td{display:block;width:100%}
  .compare thead{display:none}
  .compare tbody tr.group-head{margin:24px 0 8px;background:transparent}
  .compare tbody tr.group-head td{background:transparent;padding:0;border:0;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--app)}
  .compare tbody tr:not(.group-head){background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r-md);margin:10px 0;padding:14px 16px;box-shadow:var(--shadow-1)}
  .compare tbody tr:not(.group-head) td{border:0;padding:0}
  .compare tbody tr:not(.group-head) td.col-label{font-weight:600;color:var(--ink);font-size:14px;padding-bottom:10px;margin-bottom:8px;border-bottom:1px dashed var(--line-soft)}
  .compare tbody tr:not(.group-head) td.col-val{display:flex;justify-content:space-between;align-items:center;text-align:left;padding:5px 0;font-size:13.5px;background:transparent}
  .compare tbody tr:not(.group-head) td.col-val::before{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
  .compare tbody tr:not(.group-head) td.col-val:nth-of-type(2)::before{content:"Starter"}
  .compare tbody tr:not(.group-head) td.col-val:nth-of-type(3)::before{content:"Growth"}
  .compare tbody tr:not(.group-head) td.col-val:nth-of-type(4)::before{content:"Enterprise"}
  .compare tbody tr:not(.group-head) td.col-val.featured{font-weight:600;color:var(--ink)}
  .compare tbody tr:not(.group-head) td.col-val.featured::before{color:var(--app)}
}

/* ==========================================================================
   FAQ (pricing + thank-you)
   ========================================================================== */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.faq details{
  background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r-md);
  padding:18px 22px;transition:border-color .2s ease,box-shadow .2s ease;
}
.faq details[open]{border-color:var(--app);box-shadow:var(--shadow-1)}
.faq summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-family:var(--sans);font-weight:600;font-size:15.5px;letter-spacing:-.01em;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";font-family:var(--sans);font-weight:400;font-size:22px;line-height:1;color:var(--app);
  transition:transform .2s ease;
}
.faq details[open] summary::after{content:"\2013"}
.faq p{margin:14px 0 0;font-size:14.5px;color:var(--ink-2);line-height:1.65}
.faq a{color:var(--app);font-weight:500}
@media (max-width:820px){
  .faq{grid-template-columns:1fr}
}
/* .faq-section padding now governed by .section system. Border-top kept for visual rule. */
.faq-section{border-top:1px solid var(--line-soft)}
.faq-section h2{font-family:var(--serif);font-style:normal;font-weight:500;font-size:clamp(30px,4vw,42px);line-height:1.1;letter-spacing:-.02em;margin:0 0 36px;text-align:center}
.faq-section h2 .sans{font-family:var(--sans);font-style:normal;font-weight:700}
.faq-section .faq{max-width:1040px;margin:0 auto}

/* ==========================================================================
   CTA BAND (pricing)
   ========================================================================== */


/* ==========================================================================
   HOME - SCORECARD TEASE
   ========================================================================== */


/* ==========================================================================
   ABOUT-US
   ========================================================================== */
.hero-photo{padding:32px 0 0}
.hero-frame{position:relative;margin:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-3);isolation:isolate}
.hero-frame img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}
.hero-frame figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:36px 36px 32px;
  display:flex;flex-direction:column;gap:8px;color:#fff;
  background:linear-gradient(180deg, transparent 0%, rgba(11,13,18,.05) 30%, rgba(11,13,18,.75) 100%);
}
.hero-frame .cap-mono{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;opacity:.88}
/* Hero caption serif - Fraunces ROMAN, not italic */
.hero-frame .cap-serif{font-family:var(--serif);font-style:normal;font-weight:500;font-size:clamp(38px,6vw,76px);line-height:1.02;letter-spacing:-.025em}

.team-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:28px}
@media (max-width:820px){
  .team-grid{grid-template-columns:1fr}
}
.card{background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r-md);overflow:hidden;display:flex;flex-direction:column}
.card .portrait{aspect-ratio:4/5;overflow:hidden;background:var(--paper-2)}
.card .portrait img{width:100%;height:100%;object-fit:cover}
.card .body{padding:24px 24px 26px;display:flex;flex-direction:column;gap:8px}
/* Team name - Fraunces ROMAN, not italic */
.card .body h3{margin:0;font-family:var(--serif);font-style:normal;font-weight:500;font-size:28px;letter-spacing:-.02em;line-height:1.05}
.card .body .role{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2);margin-top:2px}
.card .body p{margin:6px 0 0;font-size:14.5px;line-height:1.6;color:var(--ink-2)}

/* .mission-section padding now governed by .section system. */
.mission{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:18px;text-align:left}
.mission-label{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2)}
/* Mission quote - Fraunces with italic on key span via .serif-italic */
.mission-quote{font-family:var(--serif);font-style:normal;font-weight:500;font-size:clamp(28px,4vw,46px);line-height:1.18;letter-spacing:-.02em;color:var(--ink);margin:0}

.facts{display:grid;grid-template-columns:repeat(4, 1fr);gap:24px}
@media (max-width:820px){
  .facts{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width:540px){
  .facts{grid-template-columns:1fr}
}
.fact .label{font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:600;margin-bottom:8px}
.fact .value{font-family:var(--serif);font-style:normal;font-weight:500;font-size:26px;letter-spacing:-.02em;line-height:1.2}
.fact .value .sans{font-family:var(--sans);font-style:normal;font-weight:700}
.fact .note{font-size:13.5px;color:var(--ink-2);line-height:1.5;margin-top:6px}

/* ==========================================================================
   POLICY / DOC PAGES - masthead + TOC + chunks (security, privacy, tos, dpa)
   ========================================================================== */
.masthead{padding:96px 0 40px}
.masthead.center{text-align:center}
.masthead.center .lede{margin-left:auto;margin-right:auto}
.masthead h1{max-width:18ch}
.masthead.center h1{max-width:none}
.masthead .contact{font-size:14px;line-height:1.6;color:var(--mute);max-width:62ch;margin:14px 0 0;font-family:var(--sans);letter-spacing:.02em}
.masthead .badge{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--good);text-transform:uppercase;
  background:rgba(46,125,50,.1);border:1px solid rgba(46,125,50,.25);
  padding:7px 14px;border-radius:var(--r-pill);margin-bottom:22px;
}
.masthead .badge::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--good)}

.sec-body{display:grid;grid-template-columns:220px 1fr;gap:64px;padding:48px 0 96px}
/* The content column is the 1fr grid child. Default min-width:auto lets a wide
   breakout child (.tiers) force the track to grow, which overflowed the page.
   min-width:0 caps the track at its fr share so breakouts can't blow out the grid. */
.sec-body>div{min-width:0}
@media (max-width:900px){
  .sec-body{grid-template-columns:1fr;gap:32px}
  .toc{display:none}
}
.toc{position:sticky;top:88px;align-self:start;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;max-height:calc(100vh - 100px);overflow-y:auto}
.toc a{display:block;padding:7px 0;color:var(--mute);border-left:2px solid transparent;padding-left:14px;margin-left:-14px;transition:color .2s ease,border-color .2s ease;line-height:1.35}
.toc a:hover,.toc a.active{color:var(--ink);border-color:var(--app)}

section.chunk{padding:var(--section-y) 0;border-top:1px solid var(--line-soft)}
section.chunk:first-child{padding-top:0;border-top:0}
section.chunk h2{font-family:var(--serif);font-style:normal;font-weight:500;font-size:clamp(26px,3.6vw,38px);line-height:1.15;letter-spacing:-.02em;margin:0 0 18px}
section.chunk h2 .sans{font-family:var(--sans);font-style:normal;font-weight:700}
section.chunk h3{font-family:var(--sans);font-weight:700;font-size:16px;letter-spacing:-.01em;margin:20px 0 8px;color:var(--ink)}
section.chunk p{font-size:15.5px;line-height:1.7;color:var(--ink-2);margin:0 0 14px;max-width:66ch}
section.chunk p strong{color:var(--ink);font-weight:600}
section.chunk ul{padding-left:22px;margin:8px 0 16px;max-width:66ch}
section.chunk ul li{font-size:15px;line-height:1.65;color:var(--ink-2);margin-bottom:6px}
section.chunk ul li strong{color:var(--ink);font-weight:600}
section.chunk a:not(.btn){color:var(--app);font-weight:500}
section.chunk a:hover{text-decoration:underline}
section.chunk code{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:13.5px;background:var(--paper-2);border:1px solid var(--line-soft);padding:2px 6px;border-radius:5px}

/* Security tier cards - break out of the content column into the TOC gutter so the
   three-column grid uses the full wrap width on desktop. position:relative + z-index
   keep the opaque cards above the sticky TOC, avoiding the earlier overlap. */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:20px 0 24px;max-width:none;margin-left:calc(-220px - 64px);width:calc(100% + 220px + 64px);position:relative;z-index:1}
@media (max-width:900px){
  .tiers{margin-left:0;width:100%}
}
@media (max-width:820px){
  .tiers{grid-template-columns:1fr}
}
.tier{
  background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r-md);padding:22px;
  display:flex;flex-direction:column;gap:10px;
  /* min-width:0 lets each 1fr column shrink to an equal share so a card with longer
     copy can't blow its track out and skew the three cards uneven. */
  min-width:0;overflow-wrap:break-word;
}
.tier .label{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.tier.blocked{border-top:3px solid var(--bad)}
.tier.blocked .label{color:var(--bad)}
.tier.confirm{border-top:3px solid var(--warn)}
.tier.confirm .label{color:var(--warn)}
.tier.safe{border-top:3px solid var(--good)}
.tier.safe .label{color:var(--good)}
.tier h3{margin:0;font-family:var(--serif);font-style:normal;font-weight:500;font-size:22px;letter-spacing:-.015em;line-height:1.1}
.tier .desc{font-size:14px;color:var(--ink-2);line-height:1.55;margin:0}
.tier ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.tier ul li{background:transparent;border:0;padding:0;font-size:13px;color:var(--ink-2);font-family:var(--sans);letter-spacing:.01em;line-height:1.5;display:flex;gap:8px;align-items:flex-start}
.tier ul li::before{content:"·";color:var(--mute);flex-shrink:0}

/* Security callout */
.callout{background:var(--ink);color:var(--paper);border-radius:var(--r-md);padding:28px;margin:24px 0;max-width:66ch}
.callout .label{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--app-3);margin-bottom:10px}
section.chunk .callout p{color:rgba(246,242,232,.9);margin:0}

/* DPA inline callout */
.dpa-callout{margin-top:20px;padding:18px 22px;background:var(--paper-2);border:1px solid var(--line-soft);border-left:3px solid var(--app);border-radius:var(--r-sm);font-size:15px;line-height:1.65;color:var(--ink-2);max-width:66ch}
.dpa-callout a{color:var(--app);font-weight:600}

/* Subprocessors table + changelog */
.page-body{padding:40px 0 96px;max-width:900px;margin:0 auto}
.sub-table{width:100%;border-collapse:collapse;margin:18px 0 40px;font-size:14.5px}
.sub-table th,.sub-table td{text-align:left;padding:14px 14px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.sub-table th{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);background:var(--paper-2);border-bottom:1px solid var(--line)}
.sub-table td:first-child{font-weight:600;color:var(--ink);white-space:nowrap}
.sub-table td{color:var(--ink-2);line-height:1.5}
@media (max-width:680px){
  .sub-table{font-size:13px}
  .sub-table th,.sub-table td{padding:10px 8px}
  .sub-table td:first-child{white-space:normal}
  .sub-table td{overflow-wrap:anywhere}
}
h2.section-heading{font-family:var(--serif);font-style:normal;font-weight:500;font-size:clamp(24px,3.2vw,32px);line-height:1.2;letter-spacing:-.02em;margin:48px 0 14px}
h2.section-heading .sans{font-family:var(--sans);font-style:normal;font-weight:700}
.page-body p{font-size:15.5px;line-height:1.7;color:var(--ink-2);margin:0 0 14px;max-width:66ch}
.page-body a{color:var(--app);font-weight:500}
.page-body a:hover{text-decoration:underline}
.changelog{list-style:none;padding:0;margin:0;max-width:66ch}
.changelog li{padding:14px 18px;border-left:2px solid var(--line-soft);margin-bottom:10px;background:var(--paper-2);border-radius:0 var(--r-sm) var(--r-sm) 0}
.changelog .date{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:4px}
.changelog .entry{font-size:15px;color:var(--ink-2);line-height:1.55}

/* ==========================================================================
   BOOK page
   ========================================================================== */
.booking-wrap{padding:32px 0 80px}
.booking-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:48px;align-items:start;max-width:1100px;margin:0 auto}
@media (max-width:900px){
  .booking-grid{grid-template-columns:1fr;gap:32px}
}
.calendly-card{background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r-md);box-shadow:var(--shadow-3);padding:10px;overflow:hidden;min-height:720px}
.calendly-inline-widget{min-width:320px;width:100%;height:700px;border-radius:var(--r-sm);overflow:hidden}
.calendly-fallback{text-align:center;padding:14px;font-size:14px;color:var(--mute)}
.calendly-fallback a{color:var(--app);font-weight:600}
.cover{padding:8px 0}
.cover .label{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2);margin-bottom:14px}
.cover h2{font-family:var(--sans);font-weight:700;font-size:24px;letter-spacing:-.02em;line-height:1.2;margin:0 0 24px;color:var(--ink)}
.cover-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:22px}
.cover-list li{padding-left:0}
.cover-list h3{font-family:var(--sans);font-weight:700;font-size:17px;letter-spacing:-.01em;color:var(--ink);margin:0 0 6px}
.cover-list p{font-size:15px;line-height:1.6;color:var(--ink-2);margin:0;max-width:52ch}
.aside-box{margin-top:36px;background:var(--paper-2);border:1px solid var(--line-soft);border-left:3px solid var(--app);border-radius:var(--r-sm);padding:18px 20px;font-size:14.5px;line-height:1.6;color:var(--ink-2);max-width:52ch}
.aside-box strong{color:var(--ink);font-weight:600}

/* ==========================================================================
   QUIZ page
   ========================================================================== */
.quiz-frame-wrap{padding:24px 0 96px}
.quiz-frame{background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r-md);box-shadow:var(--shadow-3);padding:8px;max-width:860px;margin:0 auto;overflow:hidden}
.quiz-frame iframe{display:block;width:100%;border:0;min-height:0;background:var(--paper);border-radius:var(--r-sm);transition:height .25s ease}
.quiz-fallback{text-align:center;padding:14px 24px 4px;font-size:14px;color:var(--mute)}
.quiz-fallback a{color:var(--app);font-weight:600}

/* ==========================================================================
   CHECK-INBOX + THANK-YOU
   ========================================================================== */
/* .next-steps padding now governed by .section system. */
.next-steps h2{font-family:var(--serif);font-style:normal;font-weight:500;font-size:clamp(30px,4vw,42px);line-height:1.12;letter-spacing:-.02em;margin:0 0 36px;text-align:center}
.next-steps h2 .sans{font-family:var(--sans);font-style:normal;font-weight:700}
.next-steps .steps{max-width:1040px;margin:0 auto;list-style:none;padding:0}
.next-steps .steps li{background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r-md);padding:28px 26px;display:flex;flex-direction:column;gap:12px}
.next-steps .steps li::before{display:none} /* override .step counter for list-based steps */
.next-steps .steps .num{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--app);position:static}
.next-steps .steps h3{margin:0;font-family:var(--sans);font-weight:700;font-size:20px;letter-spacing:-.015em;color:var(--ink)}
.next-steps .steps p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-2)}
.next-steps .steps p a{color:var(--app);font-weight:500}

/* Centered masthead with subtle orb (check-inbox / thank-you celebrate moments) */
.masthead.center.with-orb{position:relative;overflow:hidden;padding:96px 0 80px}
.masthead.center.with-orb::before{content:"";position:absolute;top:-180px;left:50%;transform:translateX(-50%);width:700px;height:340px;background:var(--app-soft);filter:blur(120px);pointer-events:none;border-radius:50%;opacity:.6}
.masthead.center.with-orb .inner{position:relative;z-index:1}
/* Larger celebration h1 */
.masthead.center.with-orb h1{font-size:clamp(60px,10vw,128px);line-height:.98;letter-spacing:-.035em;max-width:none}

/* ==========================================================================
   404
   ========================================================================== */
.hero-404{flex:1;display:flex;align-items:center;justify-content:center;padding:80px 0;position:relative;overflow:hidden}
.hero-404 .orb{position:absolute;pointer-events:none;border-radius:50%;filter:blur(100px);opacity:.25}
.hero-404 .orb.a{width:380px;height:380px;background:var(--app-soft);top:-80px;right:-120px}
.hero-404 .orb.b{display:none}
.hero-404 .inner{text-align:center;max-width:600px;position:relative;z-index:1}
.hero-404 .code{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.18em;color:var(--mute);text-transform:uppercase;margin-bottom:20px}
.hero-404 h1{font-family:var(--serif);font-style:normal;font-weight:500;font-size:clamp(72px,12vw,140px);line-height:1;letter-spacing:-.035em;margin:0 0 12px;color:var(--ink)}
.hero-404 h1 .sans{font-family:var(--sans);font-style:normal;font-weight:700;letter-spacing:-.04em}
.hero-404 p{font-size:19px;line-height:1.55;color:var(--ink-2);margin:0 auto 36px;max-width:50ch}
.hero-404 .actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}


/* sidebar */


/* main column */


/* greeting */


/* conversation */


@keyframes kfRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}


@keyframes kfBlink{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}

/* action / working / done / sign-off cards */


@keyframes kfSpin{to{transform:rotate(360deg)}}


/* automatic toast */


/* composer */


@keyframes kfCaret{50%{opacity:0}}


/* progress dots + caption (sit below the window on the cream page) */


@media (prefers-reduced-motion:reduce){
  .kfdemo-spin,.kfdemo-caret,.kfdemo-typing i,.app-titlebar .right .live .dot{animation:none!important}
}


/* ==========================================================================
   REDESIGN THEME LAYER (Route 1, 2026-07) - aligns every shared page with the
   amethyst / Inter / flat hard-bordered homepage. Appended last so it wins
   source order at equal specificity. Reversible: delete this block to revert.
   ========================================================================== */

/* Type - Inter everywhere, bold display weights (Fraunces retired) */
h1,h2,h3,h4,h5,h6,.serif{font-family:var(--sans);font-style:normal}
.hero h1,.masthead h1,.section-head h2,.faq-section h2,.next-steps h2,
.hero-404 h1,.cta-band h3,.scorecard-tease h3,section.chunk h2,h2.section-heading,
.plan .name,.plan .price .amount,.mission-quote,.hero-frame .cap-serif,
.compare thead th.col-plan,.card .body h3,.tier h3,.fact .value,
.masthead.center.with-orb h1{
  font-family:var(--sans);font-weight:800;letter-spacing:-.03em;font-style:normal;
}
.brand .wordmark em{font-family:var(--sans);font-style:normal;font-weight:800;color:var(--app)}

/* Paper dot-grid background (homepage texture) */
body{background-image:radial-gradient(rgba(11,13,18,.045) 1px,transparent 1px);background-size:26px 26px}

/* Nav - styled in chrome.css (shared with modern.css pages) */

/* Buttons - hard-bordered flat solids */
.btn-app,.btn-primary,.btn-ghost{border:2.5px solid var(--ink);border-radius:12px;font-weight:700}
.btn-app{background:var(--app);color:#fff;box-shadow:none}
.btn-app:hover{background:var(--app);color:#fff;transform:translateY(-1px);box-shadow:none;filter:brightness(.94)}


.btn-ghost{background:var(--paper);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
/* the one shadow kept - the nav CTA */
.nav .btn-app{background:var(--app);border:2.5px solid var(--ink);border-radius:12px;padding:10px 18px;box-shadow:0 4px 14px var(--app-glow)}
.nav .btn-app:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink);filter:none}

/* Major surfaces - hard 2px ink border, flat (no soft-shadow hovers) */
.plan,.card,.tier,.step,.faq details,.integrations,.compare-wrap,.fine-strip,
.scorecard-tease,.cta-band,.next-steps .steps li,.calendly-card,.quiz-frame,
.hero-frame,.callout{
  border:2px solid var(--ink);box-shadow:none;
}
.plan:hover,.step:hover,.card:hover{transform:translateY(-4px);box-shadow:none;border-color:var(--ink)}
.faq details[open]{border-color:var(--ink);box-shadow:none}
.plan.featured{border-color:var(--ink)}

/* Section head - short amethyst accent bar */
.section-head{position:relative;padding-top:30px}
.section-head::before{content:"";position:absolute;top:0;left:0;width:52px;height:5px;border-radius:3px;background:var(--app)}


/* ==========================================================================
   SHARED CHROME - nav + footer partials (partials/nav.html, footer.html).
   Self-contained --c-* tokens; do not restyle .nav/.footer elsewhere.
   ========================================================================== */
:root{
  --c-ink:#0B0D12;
  --c-paper:#F6F2E8;
  --c-paper-2:#EFEADE;
  --c-lav:#C9B8F0;
  --c-accent:#6D28D9; /* = --app (editorial) and --indigo (.mod) */
  --c-maxw:1180px;
  --c-gutter:clamp(28px, 5vw, 56px);
  --c-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --c-mono:'JetBrains Mono',ui-monospace,monospace;
  --c-shadow-sm:4px 4px 0 var(--c-ink);
}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:var(--c-paper);border-bottom:2.5px solid var(--c-ink)}
.nav-inner{display:flex;align-items:center;gap:32px;height:72px;padding:0 var(--c-gutter);max-width:var(--c-maxw);margin:0 auto}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--c-sans);font-weight:800;font-size:21px;letter-spacing:-.02em}
.logo img{width:40px;height:40px;border-radius:8px;object-fit:contain}
.logo .wordmark{font-size:21px}
.logo b{font-weight:800;color:var(--c-accent)}
.nav-links{display:flex;align-items:center;gap:8px;margin-left:auto;font-size:14.5px;font-weight:600;color:var(--c-ink)}
.nav-links a{padding:7px 12px;border:2px solid transparent;border-radius:9px;transition:border-color .12s ease,background .12s ease}
.nav-links a:hover{border-color:var(--c-ink);background:var(--c-lav)}
.nav-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--c-sans);font-weight:700;font-size:14px;padding:10px 18px;border:2.5px solid var(--c-ink);border-radius:12px;background:var(--c-accent);color:#fff;box-shadow:var(--c-shadow-sm);transition:transform .12s ease,box-shadow .12s ease;cursor:pointer;white-space:nowrap}
.nav-cta:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--c-ink)}
.nav-cta:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--c-ink)}
/* duplicate CTA that lives at the bottom of the mobile menu; hidden on desktop */
.nav-links .nav-cta-mobile{display:none}
.nav-toggle{display:none;width:44px;height:44px;background:var(--c-paper);border:2.5px solid var(--c-ink);border-radius:10px;cursor:pointer;padding:0;align-items:center;justify-content:center;flex-direction:column;gap:5px;flex-shrink:0}
.nav-toggle:hover{background:var(--c-paper-2)}
.nav-toggle span{display:block;width:22px;height:2.5px;background:var(--c-ink);border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.nav.nav-open .nav-toggle span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav.nav-open .nav-toggle span:nth-child(2){opacity:0}
.nav.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
@media (max-width:1020px){
  .nav-inner{gap:14px}
  .nav-toggle{display:flex;margin-left:auto}
  /* CTA moves from the top bar to the bottom of the menu */
  .nav-inner > .nav-cta{display:none}
  .nav-links{position:absolute;top:72px;left:0;right:0;margin:0;flex-direction:column;gap:4px;background:var(--c-paper);border-bottom:2.5px solid var(--c-ink);padding:12px 20px 18px;display:none;z-index:49}
  .nav.nav-open .nav-links{display:flex}
  .nav-links a{padding:12px 14px;font-size:16px;border:2px solid transparent}
  .nav-links .nav-cta-mobile{display:inline-flex;justify-content:center;margin-top:10px;padding:13px 18px;border:2.5px solid var(--c-ink);box-shadow:none}
  .nav-links .nav-cta-mobile:hover,.nav-links .nav-cta-mobile:active{transform:none;box-shadow:none;background:var(--c-accent);border-color:var(--c-ink)}
}

/* ---------- footer ---------- */
.footer{background:var(--c-ink);color:rgba(246,242,232,.7);padding:76px 0 48px;font-size:14.5px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px}
.foot-grid h5{font-family:var(--c-mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:rgba(246,242,232,.4);margin:0 0 16px;font-weight:500}
.foot-grid ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin:0;padding:0}
.foot-grid a:hover{color:var(--c-accent)}
.foot-blurb{max-width:34ch;line-height:1.7;margin:0}
.foot-legal{margin:14px 0 0;font-size:13px;color:rgba(246,242,232,.45);line-height:1.7}
.foot-bottom{margin-top:56px;padding-top:22px;border-top:1px solid rgba(246,242,232,.15);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-family:var(--c-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(246,242,232,.4)}
@media (max-width:1020px){
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .foot-grid{grid-template-columns:1fr}
}


/* ==========================================================================
   HOME + PRODUCT design system (body.mod pages only). Everything below
   is scoped under .mod so it can never leak into the editorial pages.
   ========================================================================== */
/*
   Keep the modern pages' legacy normalisation inside their own content.
   The header and footer are Worker-injected siblings of those elements; a
   blanket `.mod *` rule would run after the shared chrome styles and erase
   their padding and margins.
*/
body.mod > :is(header, section),
body.mod > :is(header, section) *{margin:0;padding:0}

/* ==========================================================================
   KoalaFix modern design system (home + product pages).
   Extracted from the index.html inline styles so it lives in one stylesheet.
   The rest of the site uses styles.css; both share a 1180px content width.
   ========================================================================== */
/* 1180px + --gutter match styles.css so every page shares one content column */

/* nav + footer chrome lives in chrome.css (shared with styles.css pages) */
.mod .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:15px;padding:13px 24px;border:2.5px solid var(--ink);border-radius:12px;background:var(--paper);transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;cursor:pointer}
.mod .btn:hover{filter:brightness(.96)}
.mod .btn:active{transform:translateY(1px)}
.mod .btn-indigo{background:var(--indigo);color:#fff}


/* ---------- hero (split kept - Josh loves it) ---------- */
.mod .hero{padding:84px 0 24px;display:grid;grid-template-columns:.92fr 1.08fr;gap:60px;align-items:center;position:relative}
.mod .hero-blob{position:absolute;top:-140px;left:-180px;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--lav),var(--peach));border:2.5px solid var(--ink);opacity:.45;z-index:-1}
.mod h1{font-family:var(--sans);font-weight:800;font-size:clamp(44px,5.2vw,74px);line-height:1.03;letter-spacing:-.03em;text-wrap:balance}
.mod h1 .box{display:inline-block;background:var(--indigo);color:#fff;border:2.5px solid var(--ink);padding:0 12px 2px;border-radius:12px}
.mod .hero-sub{margin-top:28px;font-size:20px;max-width:44ch;color:#3E3A33}
.mod .hero-sub strong{color:var(--ink);font-weight:700}
.mod .hero-ctas{margin-top:36px;display:flex;gap:16px;flex-wrap:wrap}
.mod .hero-ctas .btn-wide{width:100%}

/* ---------- app preview (straightened, no hover drift) ---------- */
.mod .app-side{position:relative}
.mod .appwin{background:#fff;border:2.5px solid var(--ink);border-radius:16px;overflow:hidden}
.mod .app-titlebar{background:#fff;color:var(--ink);display:flex;align-items:center;gap:9px;padding:10px 14px;font-size:13px;border-bottom:1px solid #ECE8DE}
.mod .tdots{display:flex;gap:6px}
.mod .tdots i{width:10px;height:10px;border-radius:50%;display:block}
.mod .tdots i:nth-child(1){background:#FF5F57}
.mod .tdots i:nth-child(2){background:#FEBC2E}
.mod .tdots i:nth-child(3){background:#28C840}
.mod .app-titlebar .t-logo{width:22px;height:22px;border-radius:6px}
.mod .app-titlebar .t-name{font-weight:800;font-size:14px}
.mod .app-titlebar .tb-group{margin-left:auto;display:flex;align-items:center;gap:8px}
.mod .tb-btn{font-size:11.5px;font-weight:600;border:1px solid #E4DFD3;border-radius:8px;padding:5px 10px;background:#fff;color:#3E3A33;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.mod .tb-btn.help{background:#EDEBFC;border-color:#DCD6F8;color:var(--indigo-deep)}
.mod .tb-bell{width:26px;height:26px;display:grid;place-items:center;color:#55504A}
.mod .tb-bell svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mod .winctl{display:flex;align-items:center;gap:13px;margin-left:8px;color:#55504A;font-size:14px}
.mod .app-frame{display:flex;min-height:430px;background:#FDFDFB}


.mod .app-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:34px 26px 20px;position:relative}
.mod .app-card{text-align:center;width:100%;max-width:560px}
.mod .app-card img.k{width:54px;height:54px;border-radius:14px;margin:0 auto 14px;background:#EDEBFC;padding:5px}
.mod .app-card h3{font-size:29px;font-weight:800;letter-spacing:-.015em}
.mod .app-card .hint{font-size:14px;color:#8A8374;margin-top:7px;line-height:1.5}
.mod .status-pill{display:inline-flex;align-items:center;gap:7px;margin:18px 0 20px;font-size:12px;font-weight:600;color:var(--green);background:rgba(27,158,85,.08);border-radius:100px;padding:6px 14px}
.mod .status-pill i{width:7px;height:7px;border-radius:50%;background:var(--green)}
.mod .chips{display:flex;flex-wrap:nowrap;gap:10px;justify-content:center}
.mod .chips-b{margin-top:10px}
.mod .chip{font-size:12.5px;font-weight:600;padding:9px 14px;border-radius:10px;cursor:default;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.mod .chip svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.mod .chip.solid{background:var(--indigo);color:#fff;box-shadow:0 3px 0 var(--indigo-deep)}
.mod .chip.line{background:#fff;border:1px solid #E4DFD3;color:#55504A;border-radius:100px}
.mod .toast{position:absolute;left:50%;transform:translateX(-50%);bottom:88px;width:min(400px,88%);background:#fff;border:1px solid #EEEAE0;border-radius:14px;box-shadow:0 18px 40px rgba(20,18,16,.14);padding:14px 16px;text-align:left;font-size:13px;opacity:0;transition:opacity .35s ease,transform .35s ease;pointer-events:none}
.mod .toast.show{opacity:1;transform:translateX(-50%) translateY(-6px)}
.mod .toast .row1{display:flex;align-items:center;gap:9px;font-weight:600}
.mod .toast .badge{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;background:rgba(109,40,217,.1);color:var(--indigo);border-radius:5px;padding:2.5px 8px;font-weight:500}
.mod .toast .row2{margin-top:7px;color:#55504A;display:flex;align-items:center;gap:8px}
.mod .toast .fixedtag{margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--green);border:1.5px solid var(--green);border-radius:6px;padding:2px 8px;font-weight:700}
.mod .ask{width:100%;max-width:620px;margin-top:auto;display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #E4DFD3;border-radius:16px;padding:13px 16px;font-size:13.5px;color:#8A8374;box-shadow:0 8px 22px rgba(20,18,16,.06)}
.mod .ask .ph{flex:1;text-align:left}
.mod .ask .cnt{font-size:11.5px;color:#B9B29F;font-family:var(--mono);white-space:nowrap}
.mod .ask .go{width:34px;height:34px;border-radius:50%;background:var(--indigo);display:grid;place-items:center;color:#fff;font-weight:700;font-size:15px;flex-shrink:0}
.mod .app-dots{display:flex;gap:7px;justify-content:center;margin-top:20px}
.mod .app-dots i{width:7px;height:7px;border-radius:100px;background:#D8D1BF;transition:all .3s ease}
.mod .app-dots i.on{background:var(--indigo);width:22px}


/* ---------- sections ---------- */
.mod section{padding:104px 0}
.mod section.wrap{padding:64px var(--gutter)}
.mod #how{padding-top:16px;padding-bottom:18px}
.mod h2{font-family:var(--sans);font-weight:800;font-size:clamp(32px,3.6vw,50px);line-height:1.06;letter-spacing:-.02em;text-wrap:balance}
.mod .sec-sub{color:#3E3A33;font-size:17px;max-width:58ch;margin-top:16px}
/* clean section head - short accent rule instead of the old FILE 0X tabs */
.mod .sec-head{position:relative;padding-top:28px}
.mod .sec-head::before{content:"";position:absolute;top:0;left:0;width:52px;height:5px;border-radius:3px;background:var(--indigo)}

/* demo video - no shadow (Josh: "it's just a video") */
.mod .demo-card{max-width:900px;margin:48px auto 0;background:#fff;border:2.5px solid var(--ink);border-radius:16px;overflow:hidden}
.mod .demo-titlebar{background:var(--ink);color:rgba(246,242,232,.85);display:flex;align-items:center;gap:10px;padding:11px 16px;font-size:12.5px;font-family:var(--mono)}
.mod .demo-titlebar .dur{margin-left:auto;letter-spacing:.12em;font-size:11px;color:var(--lav)}
.mod .demo-stage{position:relative;background:var(--ink)}
.mod .demo-stage video{display:block;width:100%;aspect-ratio:16/9;background:#0B0D12}
.mod .demo-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;cursor:pointer;border:0;background:rgba(11,13,18,.08);transition:background .15s ease;width:100%}
.mod .demo-overlay:hover{background:rgba(11,13,18,.16)}
.mod .demo-overlay .play{width:78px;height:78px;border-radius:50%;background:var(--indigo);border:2.5px solid var(--ink);display:grid;place-items:center;transition:transform .12s ease}
.mod .demo-overlay:hover .play{transform:scale(1.05)}
.mod .demo-overlay .play svg{width:30px;height:30px;fill:#fff;margin-left:5px}
.mod .demo-overlay .lbl{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;background:var(--paper);border:2px solid var(--ink);border-radius:100px;padding:8px 18px}
.mod .demo-overlay.hidden{display:none}

/* integrations - old-style clean tile grid (restored; now lives on /product) */
.mod .int-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.mod .int-tile{background:#fff;border:2.5px solid var(--ink);border-radius:14px;padding:26px 24px;transition:transform .15s ease,background .15s ease}
.mod .int-tile:hover{transform:translate(-2px,-2px);background:#FFFDF5}
.mod .int-tile .ilogo{width:52px;height:52px;display:grid;place-items:center;border:2px solid var(--ink);border-radius:12px;background:var(--paper);margin-bottom:16px}
.mod .int-tile .ilogo img{width:32px;height:32px}
.mod .int-tile h3{font-size:17px;font-weight:700;margin-bottom:8px}
.mod .int-tile p{font-size:14px;color:#3E3A33;line-height:1.55}
.mod .int-note{margin-top:32px;font-size:15px;display:flex;gap:10px;align-items:flex-start;color:#3E3A33}
.mod .int-note .ndot{width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0;margin-top:8px}
.mod .int-note a{font-weight:700;color:var(--indigo);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}

/* scorecard - checklist form */
.mod .form-panel{background:linear-gradient(120deg,var(--lav),var(--peach));border:2.5px solid var(--ink);border-radius:22px;padding:72px 64px;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;position:relative;overflow:hidden}
.mod .form-panel p{font-size:17px;color:rgba(11,13,18,.75);margin-top:18px;max-width:46ch}
.mod .form-panel .btn{margin-top:32px;font-size:16px}
.mod .btn-big{padding:18px 34px;font-size:18px !important;border-width:3px}
.mod .stamp-mark{position:absolute;top:24px;right:32px;font-family:var(--mono);font-weight:700;font-size:15px;letter-spacing:.14em;color:var(--indigo-deep);border:3px solid var(--indigo-deep);border-radius:10px;padding:7px 16px;opacity:.9;background:rgba(246,242,232,.6)}
.mod .stats{display:flex;flex-direction:column;gap:16px}
.mod .stat{background:var(--paper);border:2.5px solid var(--ink);border-radius:14px;padding:18px 22px}
.mod .stat .top{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.mod .stat .num{font-weight:800;font-size:30px;letter-spacing:-.02em;line-height:1}
.mod .stat .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#6B6558}
.mod .stat p{font-size:13.5px;color:#55504A;margin-top:8px;line-height:1.55}
.mod .stat.hot{background:var(--ink);color:var(--paper)}
.mod .stat.hot .num{color:var(--lav)}
.mod .stat.hot .lbl{color:rgba(246,242,232,.55)}
.mod .stat.hot p{color:rgba(246,242,232,.75)}

/* ---------- product page ---------- */
/* longhand top/bottom so the shared .wrap --gutter still applies horizontally */
.mod .prod-hero{padding-top:84px;padding-bottom:24px;position:relative}
.mod .prod-hero .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--indigo-deep);margin-bottom:18px}
.mod .prod-hero h1{max-width:20ch}
.mod .feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.mod .feat-card{background:#fff;border:2.5px solid var(--ink);border-radius:14px;padding:26px 24px;transition:transform .15s ease,background .15s ease}
.mod .feat-card:hover{transform:translate(-2px,-2px);background:#FFFDF5}
.mod .feat-card .fic{width:44px;height:44px;display:grid;place-items:center;border:2px solid var(--ink);border-radius:12px;background:var(--lav);margin-bottom:16px}
.mod .feat-card .fic svg{width:22px;height:22px;stroke:var(--ink);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mod .feat-card h3{font-size:17px;font-weight:700;margin-bottom:8px}
.mod .feat-card p{font-size:14px;color:#3E3A33;line-height:1.55}
.mod .prod-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px;counter-reset:step}
.mod .prod-step{background:var(--paper);border:2.5px solid var(--ink);border-radius:14px;padding:26px 24px;position:relative}
.mod .prod-step .snum{font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.14em;color:var(--indigo-deep);margin-bottom:12px;display:block}
.mod .prod-step h3{font-size:17px;font-weight:700;margin-bottom:8px}
.mod .prod-step p{font-size:14px;color:#3E3A33;line-height:1.55}
.mod .trust-band{margin-top:48px;background:var(--ink);color:var(--paper);border:2.5px solid var(--ink);border-radius:22px;padding:48px 56px;display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center}
.mod .trust-band h2{color:var(--paper)}
.mod .trust-band p{color:rgba(246,242,232,.75);margin-top:16px;font-size:16px}
.mod .trust-band ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.mod .trust-band li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:rgba(246,242,232,.85)}
.mod .trust-band li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0;margin-top:7px}
.mod .trust-band a{color:var(--lav);font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
@media (max-width:1020px){
  .mod .feat-grid,.mod .prod-steps{grid-template-columns:1fr 1fr}
  .mod .trust-band{grid-template-columns:1fr;padding:40px 32px;gap:28px}
}
@media (max-width:620px){
  .mod .feat-grid,.mod .prod-steps{grid-template-columns:1fr}
}

/* reveal - visible by default */
.mod .rv{opacity:1;transform:none}
@media (prefers-reduced-motion: no-preference){
  .mod .rv{opacity:0;transform:translateY(14px);transition:opacity .4s ease,transform .4s ease}
  .mod .rv.on{opacity:1;transform:none}
}
@media (max-width:1020px){
  .mod .hero{grid-template-columns:1fr;padding:64px 0 90px;gap:48px}
  .mod .int-grid{grid-template-columns:1fr 1fr}
  .mod .form-panel{grid-template-columns:1fr;padding:48px 32px}
  .mod .stamp-mark{top:18px;right:20px;font-size:12px}
}
@media (max-width:620px){
  /* gutter stays at the shared 28px clamp floor - no per-page override */
  .mod .hero-ctas .btn{width:100%}
  .mod .chips{flex-wrap:wrap}
  .mod .int-grid{grid-template-columns:1fr}
  .mod h1 .box{padding:0 8px 2px}
  /* Let the app-mockup shrink to the phone instead of forcing the page wider.
     Grid/flex children default to min-width:auto, so the nowrap titlebar was
     blowing the hero column out past the viewport (~29px sideways scroll). */
  .mod .app-side,.mod .app-main{min-width:0}
  .mod .app-titlebar .tb-btn{display:none}
}