/* GarageHub public site — shared stylesheet.
 * Design language mirrors the app's refresh.css: Inter, white surfaces, hairline
 * borders, almost no shadow, medium weights, generous whitespace.
 * No build step. The only external resource is Google Fonts (Inter), loaded
 * once by the <link> in each page's <head> (no @import here, so the font
 * request is not delayed behind this file). */

/* ------------------------------------------------------------------ */
/* 1. Tokens (same values as public/refresh.css)                        */
/* ------------------------------------------------------------------ */
:root{
  --bg:#ffffff;--surface:#ffffff;--surface-subtle:#f8fafc;
  --ink:#111827;--text:#1f2937;--secondary:#2f3a4a;--muted:#4b5563;
  --line:#e6e9ef;--line-strong:#d9dee6;
  --accent:#1a73e8;--accent-hover:#1664cc;--accent-soft:#eef4ff;--accent-border:#c7dbfa;
  --accent-text:#1664cc;--accent-text-hover:#1257b8;
  --green:#15803d;--green-soft:#ecfdf3;--green-border:#a7e3bf;
  --yellow:#9a6700;--yellow-soft:#fff8e6;--yellow-border:#f1dc9a;
  --red:#b91c1c;--red-soft:#fef2f2;--red-border:#f5b5b5;
  --purple:#5b3fb8;--purple-soft:#f3efff;--purple-border:#d4c6f5;
  --dark:#111827;--dark-2:#1f2937;--dark-3:#374151;
  --shadow:0 1px 2px rgba(16,24,40,.04);
  --shadow-card:0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.05);
  --shadow-pop:0 24px 64px rgba(16,24,40,.14);
  --radius:10px;--radius-sm:7px;--radius-lg:14px;
  --container:1160px;--gutter:24px;
  --header-h:64px;
  --section-y:96px;
  --font:Inter,"Segoe UI",Arial,sans-serif;
}

/* ------------------------------------------------------------------ */
/* 2. Reset                                                             */
/* ------------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{margin:0;min-width:320px;overflow-x:clip;font-family:var(--font);font-size:16px;line-height:1.6;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5,p,figure,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit}
table{border-collapse:collapse;border-spacing:0}
strong,b{font-weight:600}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
::selection{background:var(--accent-soft);color:var(--ink)}
[id]{scroll-margin-top:calc(var(--header-h) + 16px)}
#early-access{scroll-margin-top:80px}

/* ------------------------------------------------------------------ */
/* 3. Typography                                                        */
/* ------------------------------------------------------------------ */
h1,h2,h3,h4{font-family:var(--font);color:var(--ink);letter-spacing:-.02em;font-weight:600;line-height:1.2;text-wrap:balance}
h1{font-size:clamp(34px,4.6vw,56px);font-weight:650;letter-spacing:-.03em;line-height:1.08}
h2{font-size:clamp(26px,3vw,34px);letter-spacing:-.025em;line-height:1.15}
h3{font-size:18px;line-height:1.35}
h4{font-size:16px}
.h-hero{font-size:clamp(34px,4.6vw,56px);font-weight:650;letter-spacing:-.03em;line-height:1.08}
.h-display{font-size:clamp(30px,4vw,44px);font-weight:650;letter-spacing:-.03em;line-height:1.1}
p{line-height:1.6}
.lede{font-size:clamp(17px,1.4vw,20px);line-height:1.55;color:var(--secondary);max-width:62ch}
.muted{color:var(--muted)}
.small{font-size:13px}
.tiny{font-size:12px}
.eyebrow{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--muted);margin-bottom:14px}
.eyebrow.is-accent{color:var(--accent)}
.text-center{text-align:center}
.text-center .lede{margin-left:auto;margin-right:auto}
.prose{max-width:680px}
.prose p+p{margin-top:16px}
.prose a{font-weight:500}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.nowrap{white-space:nowrap}

/* Section heading block: eyebrow + h2 + optional lede */
.section-head{max-width:720px;margin-bottom:48px}
.section-head.is-center{margin-left:auto;margin-right:auto;text-align:center}
.section-head h2+p,.section-head h1+p{margin-top:16px}
.section-head .lede{color:var(--muted)}

/* ------------------------------------------------------------------ */
/* 4. Layout                                                            */
/* ------------------------------------------------------------------ */
.container{width:100%;max-width:calc(var(--container) + var(--gutter)*2);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.container-narrow{max-width:calc(760px + var(--gutter)*2)}
.container-mid{max-width:calc(920px + var(--gutter)*2)}
.section{padding:var(--section-y) 0}
.section-alt{background:var(--surface-subtle)}
.section-tight{padding:64px 0}
.section-flush-top{padding-top:0}
.section+.section:not(.section-alt):not(.band-wrap){border-top:1px solid var(--line)}
.stack>*+*{margin-top:16px}
.stack-lg>*+*{margin-top:24px}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.grid{display:grid;gap:24px}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;align-items:center}
.split.is-top{align-items:start}
.split-wide{grid-template-columns:minmax(0,45fr) minmax(0,55fr)}
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:32px}.mt-5{margin-top:48px}
.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}.mb-4{margin-bottom:32px}

/* ------------------------------------------------------------------ */
/* 5. Header                                                            */
/* ------------------------------------------------------------------ */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
/* Skip link: visually hidden until it receives keyboard focus. */
.skip-link{position:absolute;left:16px;top:-48px;z-index:60;padding:10px 14px;border-radius:var(--radius-sm);background:var(--accent);color:#fff;font-weight:600;text-decoration:none}
.skip-link:focus{top:12px;outline:2px solid #fff;outline-offset:2px}
.site-header-inner{height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;flex:none}
.brand:hover{text-decoration:none}
.brand-mark{display:grid;grid-template-columns:repeat(2,1fr);gap:3px;width:34px;height:34px;padding:7px;border-radius:9px;background:var(--accent-soft);flex:none}
.brand-mark span{display:block;border-radius:2.5px;background:var(--accent)}
.brand-name{font-size:19px;font-weight:700;letter-spacing:-.04em;color:var(--ink);line-height:1}
.site-nav{display:flex;align-items:center;gap:4px;margin-left:8px;flex:1}
.nav-link{position:relative;display:inline-flex;align-items:center;height:38px;padding:0 12px;border-radius:var(--radius-sm);font-size:14px;font-weight:500;color:var(--secondary);text-decoration:none;transition:color .15s,background .15s}
.nav-link:hover{color:var(--ink);background:var(--surface-subtle);text-decoration:none}
.nav-link.is-current,.nav-link[aria-current=page]{color:var(--accent);font-weight:600}
.nav-link.is-current::after,.nav-link[aria-current=page]::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;border-radius:2px 2px 0 0;background:var(--accent)}
.nav-actions{display:flex;align-items:center;gap:8px;flex:none}
.nav-signin{display:inline-flex;align-items:center;height:38px;padding:0 12px;font-size:14px;font-weight:500;color:var(--secondary);border-radius:var(--radius-sm)}
.nav-signin:hover{color:var(--ink);background:var(--surface-subtle);text-decoration:none}
.site-nav .nav-signin{display:none}
.nav-toggle{display:none;width:40px;height:40px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:0}
.nav-toggle span{display:block;width:18px;height:2px;border-radius:2px;background:currentColor;transition:transform .2s,opacity .2s}
.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-open .nav-toggle span:nth-child(2){opacity:0}
.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ------------------------------------------------------------------ */
/* 6. Footer                                                            */
/* ------------------------------------------------------------------ */
.site-footer{background:var(--surface-subtle);border-top:1px solid var(--line);padding:56px 0 32px;font-size:14px;color:var(--muted)}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:40px}
.footer-brand p{margin-top:16px;max-width:36ch;line-height:1.6}
.footer-heading{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--ink);margin-bottom:14px}
.footer-links{display:flex;flex-direction:column;gap:10px}
.footer-links a{color:var(--secondary);font-weight:500}
.footer-links a:hover{color:var(--accent)}
.footer-bottom{margin-top:48px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px}
.footer-note{max-width:62ch;line-height:1.55}

/* ------------------------------------------------------------------ */
/* 7. Buttons                                                           */
/* ------------------------------------------------------------------ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:9px 14px;border:1px solid transparent;border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);font-size:14px;font-weight:550;line-height:1.2;white-space:nowrap;text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .15s}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn svg{width:16px;height:16px;flex:none}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 1px 2px rgba(26,115,232,.2)}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff}
.btn-outline{background:var(--surface);color:var(--ink);border-color:var(--line-strong);box-shadow:var(--shadow)}
.btn-outline:hover{border-color:#b9c2cf;background:var(--surface-subtle)}
.btn-ghost{background:transparent;color:var(--secondary)}
.btn-ghost:hover{background:var(--surface-subtle);color:var(--ink)}
.btn-light{background:#fff;color:var(--ink);border-color:#fff}
.btn-light:hover{background:var(--accent-soft);border-color:var(--accent-soft)}
.btn-light-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.btn-light-outline:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.6)}
.btn-lg{min-height:48px;padding:13px 22px;font-size:16px;border-radius:9px}
.btn-block{width:100%}
.btn-group{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn-note{display:block;margin-top:14px;font-size:13px;color:var(--muted);line-height:1.5}
.link-arrow{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--accent)}
.link-arrow::after{content:"\2192";transition:transform .15s}
.link-arrow:hover::after{transform:translateX(3px)}

/* ------------------------------------------------------------------ */
/* 8. Hero                                                              */
/* ------------------------------------------------------------------ */
.hero{position:relative;padding:72px 0 88px;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:
  linear-gradient(to right,rgba(230,233,239,.55) 1px,transparent 1px) 0 0/48px 48px,
  linear-gradient(to bottom,rgba(230,233,239,.55) 1px,transparent 1px) 0 0/48px 48px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000 30%,transparent 100%);mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000 30%,transparent 100%)}
.hero::after{content:"";position:absolute;z-index:-1;top:-20%;right:-10%;width:60%;height:120%;background:radial-gradient(ellipse at center,rgba(238,244,255,.95) 0%,rgba(238,244,255,0) 70%);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:minmax(0,45fr) minmax(0,55fr);gap:56px;align-items:center}
.hero-copy h1{margin-top:0}
.hero-copy .lede{margin-top:20px}
.hero-copy .btn-group{margin-top:32px}
.hero-note{margin-top:16px;font-size:13px;color:var(--muted);line-height:1.5}
.hero-visual{position:relative;min-width:0}
.hero.is-center{text-align:center}
.hero.is-center .hero-copy{max-width:780px;margin:0 auto}
.hero.is-center .lede,.hero.is-center .btn-group{margin-left:auto;margin-right:auto;justify-content:center}
.hero.is-center .hero-visual{max-width:560px;margin:48px auto 0}
/* soft glow behind any device / illustration */
.glow{position:relative}
.glow::before{content:"";position:absolute;inset:-8% -10% -14%;z-index:-1;background:radial-gradient(ellipse at center,rgba(238,244,255,1) 0%,rgba(199,219,250,.45) 40%,rgba(238,244,255,0) 75%);filter:blur(6px);pointer-events:none}

/* ------------------------------------------------------------------ */
/* 9. Device frames (pure CSS)                                          */
/* ------------------------------------------------------------------ */
.device{position:relative;margin:0;width:100%}
.device img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.device-caption{margin-top:14px;font-size:12px;color:var(--muted);text-align:center;line-height:1.4}

/* Laptop: 16:10 screen in a thin dark bezel, base/hinge bar underneath */
.device-laptop .device-screen{position:relative;aspect-ratio:16/10;padding:1.6%;background:var(--dark-2);border-radius:14px 14px 4px 4px;box-shadow:inset 0 0 0 1px var(--dark-3),var(--shadow-pop)}
.device-laptop .device-screen::before{content:"";position:absolute;top:.8%;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--dark-3)}
.device-laptop .device-screen img{border-radius:6px 6px 2px 2px;background:#fff}
.device-laptop .device-base{position:relative;height:9px;margin:0 -6%;background:linear-gradient(to bottom,var(--line-strong),#c9d0da);border-radius:0 0 12px 12px;box-shadow:0 14px 30px -10px rgba(16,24,40,.25)}
.device-laptop .device-base::before{content:"";position:absolute;top:0;left:50%;width:14%;height:3px;margin-left:-7%;background:#b9c2cf;border-radius:0 0 4px 4px}
.device-laptop .device-base::after{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:#fff;opacity:.6}

/* Tablet: iPad-style rounded dark frame; landscape 4:3 by default */
.device-tablet .device-screen{position:relative;aspect-ratio:4/3;padding:2.6%;background:var(--dark-2);border-radius:28px;box-shadow:inset 0 0 0 1px var(--dark-3),inset 0 0 0 3px var(--dark),var(--shadow-pop)}
.device-tablet .device-screen::before{content:"";position:absolute;top:50%;left:1.2%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:var(--dark-3)}
.device-tablet .device-screen img{border-radius:10px;background:#fff}
.device-tablet.is-portrait .device-screen{aspect-ratio:3/4;padding:3.4%}
.device-tablet.is-portrait .device-screen::before{top:1.4%;left:50%;margin:0 0 0 -2.5px}
.device-tablet .device-base{display:none}
/* Smaller radii when the frame is narrow */
@media(max-width:480px){
  .device-tablet .device-screen{border-radius:18px}
  .device-laptop .device-screen{border-radius:10px 10px 3px 3px}
}

/* Hero stage: laptop with a tablet overlapping its lower-right corner */
.device-stage{position:relative;padding:0 8% 13% 0}
.device-stage>.device-laptop{position:relative;z-index:1}
.device-stage>.device-tablet{position:absolute;z-index:2;right:0;bottom:0;width:44%;margin:0}
.device-stage>.device-tablet .device-screen{box-shadow:inset 0 0 0 1px var(--dark-3),inset 0 0 0 3px var(--dark),0 20px 48px rgba(16,24,40,.22)}
.device-stage+.device-caption{margin-top:14px}
/* Two frames side by side */
.device-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 4%;align-items:start}

/* ------------------------------------------------------------------ */
/* 10. Cards, grids, icon tiles                                         */
/* ------------------------------------------------------------------ */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:28px}
.card-sm{padding:20px}
.card-lg{padding:36px}
.card h3{margin-bottom:8px}
.card p{color:var(--muted);font-size:15px}
.card-grid{display:grid;gap:20px}
.card-accent{border-color:var(--accent-border)}
.icon-tile{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--accent-soft);color:var(--accent);margin-bottom:18px;flex:none}
.icon-tile svg{width:20px;height:20px;stroke-width:1.75}
.icon-tile.is-green{background:var(--green-soft);color:var(--green)}
.icon-tile.is-yellow{background:var(--yellow-soft);color:var(--yellow)}
.icon-tile.is-red{background:var(--red-soft);color:var(--red)}
.icon-tile.is-gray{background:var(--surface-subtle);color:var(--secondary)}
.card-row{display:flex;gap:16px;align-items:flex-start}
.card-row .icon-tile{margin-bottom:0}

/* ------------------------------------------------------------------ */
/* 11. Feature tour rows (alternate image/text)                         */
/* ------------------------------------------------------------------ */
.tour{display:flex;flex-direction:column;gap:var(--section-y)}
.tour-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.tour-row.is-reversed .tour-media{order:-1}
.tour-row.is-wide-media{grid-template-columns:minmax(0,42fr) minmax(0,58fr)}
.tour-copy{min-width:0}
.tour-copy h2{margin-bottom:16px}
.tour-copy>p:not(.note){color:var(--secondary);font-size:17px;line-height:1.6}
.tour-copy .fact-list,.tour-copy .list-check,.tour-copy .list-dash{margin-top:24px}
.tour-copy .note{margin-top:24px}
.tour-media{min-width:0;position:relative}
.tour-media .illus{margin-top:24px}
.tour-aside{margin-top:28px;max-width:240px}

/* Fact lists */
.fact-list,.list-check,.list-dash{display:flex;flex-direction:column;gap:12px;font-size:15px;color:var(--secondary);line-height:1.55}
.fact-list li,.list-check li,.list-dash li{position:relative;padding-left:30px}
.fact-list li::before,.list-check li::before{content:"";position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;background:var(--green-soft) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.2 4.2L19 7.5'/></svg>") center/12px no-repeat}
.list-dash li::before{content:"";position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;background:var(--surface-subtle) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2.5' stroke-linecap='round'><path d='M6 12h12'/></svg>") center/12px no-repeat;border:1px solid var(--line)}
.list-plain{display:flex;flex-direction:column;gap:10px;font-size:15px;color:var(--secondary)}
.list-plain li{position:relative;padding-left:18px}
.list-plain li::before{content:"";position:absolute;left:0;top:10px;width:6px;height:6px;border-radius:50%;background:var(--accent-border)}
.list-tight{gap:8px}
.list-sm{font-size:14px}

/* Timeline (a day at the shop) */
.timeline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;position:relative}
.timeline::before{content:"";position:absolute;left:0;right:0;top:20px;height:1px;background:var(--line);z-index:0}
.timeline-item{position:relative;padding-top:52px}
.timeline-item::before{content:"";position:absolute;top:12px;left:0;width:17px;height:17px;border-radius:50%;background:var(--surface);border:2px solid var(--accent);box-shadow:0 0 0 4px #fff;z-index:1}
.timeline-time{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--accent);margin-bottom:8px}
.timeline-item h3{font-size:17px;margin-bottom:8px}
.timeline-item p{font-size:15px;color:var(--muted)}

/* Jump-link pills */
.jump-pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:13px;font-weight:500;color:var(--secondary);text-decoration:none;transition:border-color .15s,color .15s,background .15s}
.pill:hover{border-color:var(--accent-border);background:var(--accent-soft);color:var(--accent);text-decoration:none}

/* Illustrations */
.illus{width:100%;height:auto}
.illus-sm{max-width:240px}
.illus-md{max-width:380px}
.illus-lg{max-width:560px}
.banner-illus{display:block;width:100%;height:auto;max-height:220px;object-fit:cover;object-position:center bottom;margin:0 auto 32px}
.banner-illus.is-thin{max-height:180px}

/* ------------------------------------------------------------------ */
/* 12. Badges, chips, notes                                             */
/* ------------------------------------------------------------------ */
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;border:1px solid var(--line);background:var(--surface-subtle);color:var(--secondary);font-size:12px;font-weight:600;line-height:1.4;white-space:nowrap}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.8}
.badge-blue{background:var(--accent-soft);border-color:var(--accent-border);color:var(--accent-hover)}
.badge-green{background:var(--green-soft);border-color:var(--green-border);color:var(--green)}
.badge-yellow{background:var(--yellow-soft);border-color:var(--yellow-border);color:var(--yellow)}
.badge-red{background:var(--red-soft);border-color:var(--red-border);color:var(--red)}
.badge-purple{background:var(--purple-soft);border-color:var(--purple-border);color:var(--purple)}
.badge-gray{background:var(--surface-subtle);border-color:var(--line);color:var(--muted)}
.badge.no-dot::before{display:none}
.chip{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;background:var(--accent-soft);border:1px solid var(--accent-border);color:var(--accent-hover);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.chip-yellow{background:var(--yellow-soft);border-color:var(--yellow-border);color:var(--yellow)}
.chip-green{background:var(--green-soft);border-color:var(--green-border);color:var(--green)}
.chip-gray{background:var(--surface-subtle);border-color:var(--line);color:var(--muted)}
.status-chip{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px;border-radius:999px;background:var(--yellow-soft);border:1px solid var(--yellow-border);color:var(--yellow);font-size:12px;font-weight:600}
.status-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}

.note{padding:14px 16px;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface-subtle);font-size:14px;line-height:1.55;color:var(--secondary)}
.note strong{color:var(--ink)}
.note-blue{background:var(--accent-soft);border-color:var(--accent-border);color:#1e3a5f}
.note-yellow{background:var(--yellow-soft);border-color:var(--yellow-border);color:#5c3d00}
.note-green{background:var(--green-soft);border-color:var(--green-border);color:#14532d}
.note-muted{background:transparent;border-style:dashed;color:var(--muted)}

/* ------------------------------------------------------------------ */
/* 13. Does / doesn't columns                                           */
/* ------------------------------------------------------------------ */
.does-doesnt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.dd-col{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow)}
.dd-col h3{display:flex;align-items:center;gap:10px;margin-bottom:18px;font-size:16px}
.dd-col h3 .badge{font-size:11px}
.dd-col.is-does{border-top:3px solid var(--green)}
.dd-col.is-doesnt{border-top:3px solid var(--line-strong)}
.dd-closing{margin-top:24px;text-align:center;color:var(--muted);font-size:15px}

/* ------------------------------------------------------------------ */
/* 14. Pricing                                                          */
/* ------------------------------------------------------------------ */
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:stretch;max-width:920px;margin:0 auto}
.plan{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px;box-shadow:var(--shadow-card)}
.plan.is-featured{border-color:var(--accent-border);box-shadow:0 0 0 3px var(--accent-soft),var(--shadow-card)}
.plan-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.plan-name{font-size:20px;font-weight:650;letter-spacing:-.02em;color:var(--ink)}
.plan-chip{position:absolute;top:-12px;left:32px}
.plan-price{display:flex;align-items:baseline;gap:6px;margin:8px 0 6px;font-size:44px;font-weight:650;letter-spacing:-.04em;line-height:1;color:var(--ink)}
.plan-price small{font-size:15px;font-weight:500;letter-spacing:0;color:var(--muted)}
.plan-for{font-size:14px;font-weight:600;color:var(--secondary)}
.plan-desc{margin-top:14px;font-size:15px;color:var(--muted);line-height:1.55}
.plan-list-title{margin-top:24px;margin-bottom:12px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.plan-list{display:flex;flex-direction:column;gap:10px;font-size:14.5px;color:var(--secondary)}
.plan-list li{position:relative;padding-left:28px;line-height:1.5}
.plan-list li::before{content:"";position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:50%;background:var(--green-soft) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.2 4.2L19 7.5'/></svg>") center/11px no-repeat}
.plan-list.is-excluded li{color:var(--muted)}
.plan-list.is-excluded li::before{background:var(--surface-subtle) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2.5' stroke-linecap='round'><path d='M6 12h12'/></svg>") center/11px no-repeat;border:1px solid var(--line)}
.plan-cta{margin-top:auto;padding-top:28px}
.plan-cta .btn{width:100%}
.plan-footnote{max-width:920px;margin:20px auto 0;font-size:13px;color:var(--muted);text-align:center;line-height:1.5}
/* compact teaser variant (home page) */
.plans.is-compact .plan{padding:28px}
.plans.is-compact .plan-price{font-size:36px}

/* ------------------------------------------------------------------ */
/* 15. Comparison table / role matrix                                   */
/* ------------------------------------------------------------------ */
.compare-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow)}
.compare{width:100%;min-width:620px;font-size:14.5px;text-align:left}
.compare th,.compare td{padding:14px 20px;border-bottom:1px solid var(--line);vertical-align:top}
.compare thead th{background:var(--surface-subtle);font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--muted);position:sticky;top:0}
.compare thead th:first-child{border-top-left-radius:var(--radius-lg)}
.compare thead th:last-child{border-top-right-radius:var(--radius-lg)}
.compare tbody tr:last-child td{border-bottom:0}
.compare td:first-child,.compare tbody th{font-weight:500;color:var(--ink)}
.compare td{color:var(--secondary)}
.compare th:not(:first-child),.compare td:not(:first-child){width:27%}
.compare .is-pro{background:rgba(238,244,255,.45)}
.compare-group th,.compare-group td{background:var(--surface-subtle);padding:10px 20px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.compare tbody tr:hover:not(.compare-group) td{background:#fbfcfe}
.compare .plan-col-head{display:flex;flex-direction:column;gap:2px}
.compare .plan-col-head small{font-size:12px;letter-spacing:0;text-transform:none;font-weight:500;color:var(--muted)}
/* check and dash marks used in cells */
.ok,.no{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;vertical-align:middle}
.ok{background:var(--green-soft) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.2 4.2L19 7.5'/></svg>") center/12px no-repeat}
.no{background:var(--surface-subtle) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2.5' stroke-linecap='round'><path d='M6 12h12'/></svg>") center/12px no-repeat;border:1px solid var(--line)}
.ok+span,.no+span{margin-left:8px;vertical-align:middle}
.matrix td:not(:first-child),.matrix th:not(:first-child){text-align:center;width:auto}
.matrix .ok,.matrix .no{margin:0 auto}

/* ------------------------------------------------------------------ */
/* 16. FAQ                                                              */
/* ------------------------------------------------------------------ */
.faq{max-width:760px;margin:0 auto;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 4px;font-size:17px;font-weight:600;color:var(--ink);cursor:pointer;list-style:none;border-radius:6px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:22px;height:22px;border-radius:50%;background:var(--surface-subtle) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f3a4a' stroke-width='2.2' stroke-linecap='round'><path d='M12 6v12M6 12h12'/></svg>") center/12px no-repeat;border:1px solid var(--line);transition:transform .2s,background-color .2s}
.faq details[open] summary::after{transform:rotate(45deg);background-color:var(--accent-soft);border-color:var(--accent-border)}
.faq summary:hover{color:var(--accent)}
.faq-answer{padding:0 4px 22px;font-size:15.5px;color:var(--secondary);line-height:1.6;max-width:68ch}
.faq-answer p+p{margin-top:10px}

/* ------------------------------------------------------------------ */
/* 17. Callout bands                                                    */
/* ------------------------------------------------------------------ */
.band-wrap{padding:0 0 var(--section-y)}
.band{border-radius:var(--radius-lg);padding:64px 48px;text-align:center;background:var(--accent-soft);border:1px solid var(--accent-border)}
.band h2{margin-bottom:14px}
.band p{font-size:17px;max-width:60ch;margin:0 auto;color:var(--secondary)}
.band .btn-group{justify-content:center;margin-top:32px}
.band-dark{background:var(--dark);border-color:var(--dark);color:#fff;position:relative;overflow:hidden}
.band-dark::before{content:"";position:absolute;top:-40%;right:-10%;width:50%;height:160%;background:radial-gradient(ellipse at center,rgba(26,115,232,.28) 0%,rgba(26,115,232,0) 70%);pointer-events:none}
.band-dark>*{position:relative}
.band-dark h2{color:#fff}
.band-dark p{color:rgba(255,255,255,.78)}
.band-dark .eyebrow{color:rgba(255,255,255,.6)}
.band-dark a:not(.btn){color:#fff}
.band-soft{background:var(--surface-subtle);border-color:var(--line)}
.band-left{text-align:left}
.band-left p,.band-left .btn-group{margin-left:0;justify-content:flex-start}
/* Early-access card: white card with accent border and an illustration at right */
.early-access{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:40px;align-items:center;background:var(--surface);border:1px solid var(--accent-border);border-radius:var(--radius-lg);padding:40px;box-shadow:0 0 0 3px var(--accent-soft),var(--shadow-card)}
.early-access h2{margin-bottom:14px}
.early-access p{color:var(--secondary);font-size:16px}
.early-access p+p{margin-top:12px}
.early-access .illus{max-width:240px;margin:0 auto}

/* ------------------------------------------------------------------ */
/* 18. Mock UI cards (hand-built sample records, not screenshots)        */
/* ------------------------------------------------------------------ */
.mock-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-card);overflow:hidden;font-size:14px}
.mock-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);font-weight:600;color:var(--ink)}
.mock-head small{font-weight:500;color:var(--muted);font-size:12px}
.mock-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line);color:var(--secondary)}
.mock-row:last-child{border-bottom:0}
.mock-row strong{display:block;color:var(--ink);font-weight:600}
.mock-row small{display:block;font-size:12px;color:var(--muted);margin-top:3px}
.mock-row .badge{flex:none}
.mock-foot{padding:12px 18px;border-top:1px solid var(--line);background:var(--surface-subtle);font-size:12px;color:var(--muted)}
.mock-actions{display:flex;gap:10px;padding:14px 18px;border-top:1px solid var(--line)}
.mock-actions .btn{flex:1}
.mock-input{display:block;height:38px;margin:14px 18px 0;width:calc(100% - 36px);border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface);padding:0 12px;font-size:13px;color:var(--muted);line-height:36px}
/* grey bars stand in for amounts/text */
.mock-bar{display:inline-block;height:10px;width:64px;border-radius:5px;background:var(--line);vertical-align:middle}
.mock-bar.is-bold{height:12px;background:var(--line-strong)}
.mock-bar.is-sm{width:40px}
.mock-bar.is-lg{width:96px}
.mock-total{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-top:2px solid var(--line);font-weight:600;color:var(--ink)}
.mock-link{color:var(--accent);font-weight:600;font-size:12px}
.mock-caption{margin-top:12px;font-size:12px;color:var(--muted);text-align:center}

/* ------------------------------------------------------------------ */
/* 19. Status / about page helpers                                      */
/* ------------------------------------------------------------------ */
.status-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:36px;box-shadow:var(--shadow-card)}
.status-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:28px}
.status-cols h3{font-size:15px;margin-bottom:12px}
.status-cols p{font-size:14.5px;color:var(--secondary)}
.status-final{margin-top:28px;padding-top:20px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.fit-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}

/* ------------------------------------------------------------------ */
/* 20. Responsive                                                       */
/* ------------------------------------------------------------------ */
@media(max-width:1200px){
  :root{--section-y:88px}
  .tour-row{gap:48px}
  .hero-grid{gap:40px}
}
@media(max-width:900px){
  :root{--section-y:72px}
  .cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero{padding:56px 0 64px}
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero-visual{order:-1;max-width:640px;margin:0 auto;width:100%}
  .hero.is-center .hero-visual{order:0}
  .split,.split-wide,.tour-row,.tour-row.is-wide-media{grid-template-columns:1fr;gap:36px}
  .tour-row .tour-media{order:-1}
  .tour{gap:72px}
  .timeline{grid-template-columns:repeat(2,minmax(0,1fr))}
  .timeline::before{display:none}
  .timeline-item{padding-top:0;padding-left:28px}
  .timeline-item::before{top:4px;left:0;width:13px;height:13px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .footer-brand{grid-column:1/-1}
  .status-cols{grid-template-columns:1fr}
  .early-access{grid-template-columns:1fr}
  .early-access .illus{order:-1;max-width:200px}
  .band{padding:48px 32px}
  .plans{gap:20px}
}
@media(max-width:820px){
  .site-nav{position:absolute;top:var(--header-h);left:0;right:0;display:none;flex-direction:column;align-items:stretch;gap:2px;margin:0;padding:12px var(--gutter) 16px;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:0 12px 32px rgba(16,24,40,.08)}
  .nav-open .site-nav{display:flex}
  .nav-link{height:44px;padding:0 12px;font-size:15px}
  .nav-link.is-current::after,.nav-link[aria-current=page]::after{display:none}
  .nav-link.is-current,.nav-link[aria-current=page]{background:var(--accent-soft)}
  .nav-toggle{display:inline-flex}
  .nav-signin{display:none}
  .nav-open .site-nav .nav-signin{display:inline-flex;height:44px;font-size:15px;margin-top:6px;border-top:1px solid var(--line);border-radius:0;padding-top:6px}
  .site-header-inner{gap:12px}
}
@media(max-width:700px){
  :root{--section-y:64px;--gutter:20px}
  h1,.h-hero{font-size:34px}
  h2{font-size:26px}
  .section-head{margin-bottom:32px}
  .cols-2,.cols-3,.cols-4,.does-doesnt,.plans,.fit-cols,.device-pair{grid-template-columns:1fr}
  .timeline{grid-template-columns:1fr}
  .device-stage{padding:0}
  .device-stage>.device-tablet{display:none}
  .device-laptop .device-base{margin:0 -4%}
  .card{padding:22px}
  .plan{padding:26px}
  .plan-chip{left:26px}
  .plan-price{font-size:38px}
  .band{padding:40px 22px;border-radius:12px}
  .band p{font-size:16px}
  .compare th,.compare td{padding:12px 14px}
  .faq summary{font-size:16px;padding:16px 2px}
  .faq-answer{padding:0 2px 18px}
  .btn-group .btn{flex:1 1 auto}
  .tour-aside{max-width:200px}
  .early-access{padding:28px 22px}
  .status-card{padding:26px 22px}
}
@media(max-width:480px){
  :root{--gutter:16px}
  .brand-name{font-size:18px}
  .brand-mark{width:32px;height:32px;padding:6.5px}
  .nav-actions .btn{padding:9px 12px;font-size:13.5px}
  .hero{padding:40px 0 48px}
  .lede{font-size:16.5px}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column}
  .banner-illus{max-height:140px}
  .btn-lg{min-height:46px;padding:12px 18px;font-size:15px}
}

/* ------------------------------------------------------------------ */
/* 21. Motion, print                                                     */
/* ------------------------------------------------------------------ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}
@media print{
  .site-header,.site-footer,.nav-toggle,.band-dark,.btn{display:none!important}
  body{color:#000;background:#fff}
  .section{padding:24px 0}
  .device-laptop .device-screen,.device-tablet .device-screen{box-shadow:none;background:#ddd}
  a[href]::after{content:""}
}

/* ------------------------------------------------------------------ */
/* 22. Additive fixes from the pricing-page review                       */
/* ------------------------------------------------------------------ */
/* In-menu "Get early access" link (shared header). Hidden on wide screens like the
 * in-menu Sign in; shown in the open mobile menu without the Sign in separator. */
.nav-open .site-nav .nav-cta{border-top:0;margin-top:0;padding-top:0;color:var(--accent);font-weight:600}
/* At 320–360px the brand + CTA button + menu toggle overflow the header row and the
 * toggle is clipped; hide the button there (the CTA lives in the menu instead). */
@media(max-width:360px){
  .nav-actions .btn{display:none}
}
/* Two stacked plan footnotes sit closer together than one footnote sits under the cards. */
.plan-footnote+.plan-footnote{margin-top:8px}
/* Mobile-only hint above a horizontally scrolling comparison table. */
.compare-hint{display:none;margin-bottom:10px;text-align:center}
@media(max-width:660px){
  .compare-hint{display:block}
}

/* ------------------------------------------------------------------ */
/* 24. Additive fixes from the features-page review                      */
/* ------------------------------------------------------------------ */
/* (.glow isolation and the .chip/.badge-blue text contrast are covered by the
 * home-page block above.) */
/* The laptop hinge bar overshoots the frame by 6%; cap that at the page gutter so it
 * is not clipped at the viewport edge when the frame is full width (701–900px). */
.device-laptop .device-base{margin:0 max(-6%,calc(-1 * var(--gutter)))}
@media(max-width:700px){
  .device-laptop .device-base{margin:0 max(-4%,calc(-1 * var(--gutter)))}
}

/* ------------------------------------------------------------------ */
/* 23. Additive fixes from the home-page review                          */
/* ------------------------------------------------------------------ */
/* Accent blue as TEXT: #1a73e8 is about 4.35:1 on white and 3.98:1 on #eef4ff, under
 * WCAG AA for small text. --accent-text (#1664cc) is 5.6:1 on white and 5.1:1 on the
 * tint. --accent stays for borders, dots and fills. */
.eyebrow.is-accent,.timeline-time,.link-arrow,.plan-link,.badge-blue,.chip,.plan-chip,.flow-step b,.mock-link{color:var(--accent-text)}
.chip-yellow{color:var(--yellow)}.chip-green{color:var(--green)}.chip-gray{color:var(--muted)}
.btn-primary{background:var(--accent-text);border-color:var(--accent-text)}
.btn-primary:hover{background:var(--accent-text-hover);border-color:var(--accent-text-hover)}
/* The glow halo uses z-index:-1; without a stacking context it paints under a
 * .section-alt background and disappears. */
.glow{isolation:isolate}
/* Mock-UI card wrapped in a <figure> so its caption is its label. */
.mock-figure{margin:0}
/* Open mobile menu: the in-menu "Get early access" link is the CTA there, so hide
 * the header button while the menu is open to avoid two identical CTAs. */
@media(max-width:820px){
  .nav-open .nav-actions .btn{display:none}
}

/* ------------------------------------------------------------------ */
/* 24. Owner review (October 31, 2026): closer to the app               */
/*     Google palette, no light-grey copy, no tracked uppercase labels, */
/*     hairline surfaces without shadows, no hero grid or glow.         */
/* ------------------------------------------------------------------ */
:root{
  --text:#202124;--ink:#202124;--secondary:#3c4043;--muted:#3c4043;
  --surface-subtle:#f8f9fa;--line:#e8eaed;--line-strong:#dadce0;
  --accent:#1a73e8;--accent-hover:#1765cc;--accent-soft:#e8f0fe;--accent-border:#c6dafc;--accent-text:#1967d2;--accent-text-hover:#185abc;
  --green:#1e8e3e;--green-soft:#e6f4ea;--green-border:#a8dab5;
  --yellow:#b06000;--yellow-soft:#fef7e0;--yellow-border:#fde293;
  --red:#c5221f;--red-soft:#fce8e6;--red-border:#f6aea9;
  --purple:#7627bb;--purple-soft:#f3e8fd;--purple-border:#d7aefb;
  --dark:#202124;--dark-2:#202124;--dark-3:#3c4043;
  --shadow:none;--shadow-card:none;--shadow-pop:0 12px 32px rgba(60,64,67,.12);
}
body{color:var(--text)}
h1,h2,h3,h4,.h-hero,.h-display{letter-spacing:-.02em}
h1,.h-hero{letter-spacing:-.025em;font-weight:600}
.h-display{font-weight:600}
.plan-price{letter-spacing:-.02em;font-weight:600}
.brand-name{letter-spacing:-.02em}
.lede,.section-head .lede,.tour-copy>p:not(.note),.card p,.timeline-item p,.plan-desc,.faq-answer,.band p,.early-access p,.status-cols p,.fact-list,.list-check,.list-dash,.list-plain,.plan-list,.compare td,.footer-links a,.site-footer{color:var(--secondary)}
.hero-note,.btn-note,.device-caption,.mock-caption,.plan-footnote,.dd-closing,.plan-price small,.mock-row small,.mock-head small,.mock-foot,.compare .plan-col-head small{color:var(--secondary)}
.plan-list.is-excluded li{color:#5f6368}
/* Labels: sentence case in the accent, or quiet small caps with almost no tracking */
.eyebrow{text-transform:none;letter-spacing:0;font-size:13.5px;font-weight:600;color:var(--accent-text);margin-bottom:12px}
.footer-heading,.plan-list-title,.compare thead th,.compare-group th,.compare-group td,.compare .plan-col-head strong{letter-spacing:.03em;color:var(--secondary)}
.timeline-time{letter-spacing:0;color:var(--accent-text)}
/* Surfaces: hairline borders only */
.card,.plan,.status-card,.mock-card,.feature-link,.device-laptop,.device-tablet{box-shadow:none}
.card:hover,.feature-link:hover{box-shadow:none;border-color:var(--line-strong);transform:none}
.plan.is-featured{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.btn-primary{background:var(--accent);border-color:var(--accent);box-shadow:none}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn-outline{border-color:var(--line-strong)}
/* Quiet hero: no grid, no glow */
.hero::before,.hero::after,.glow::before,.band-dark::before{display:none}
.hero{background:var(--bg)}
/* The closing band is light like everything else */
.band-dark{background:var(--accent-soft);border:1px solid var(--accent-border);color:var(--ink)}
.band-dark h2{color:var(--ink)}
.band-dark p{color:var(--secondary)}
.band-dark .eyebrow{color:var(--accent-text)}
.band-dark a:not(.btn){color:var(--accent-text)}
.band-dark .btn-outline{background:var(--surface);color:var(--ink);border-color:var(--line-strong)}
.band-dark .btn-outline:hover{background:var(--surface-subtle)}
/* Chips, pills and badges: soft tints, no borders */
.chip,.pill,.badge{border-color:transparent}
.chip-gray,.badge-gray{color:var(--secondary)}
.pill{border-color:var(--line)}
.band-dark .btn-light{background:var(--accent);color:#fff;border-color:var(--accent)}
.band-dark .btn-light:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff}
.band-dark .btn-light-outline{background:var(--surface);color:var(--ink);border:1px solid var(--line-strong)}
.band-dark .btn-light-outline:hover{background:var(--surface-subtle);color:var(--ink)}

/* ------------------------------------------------------------------ */
/* 25. Owner review, second pass: true black headings and near-black    */
/*     copy, all four Google colours as accents, the app's own mark.    */
/* ------------------------------------------------------------------ */
:root{
  --ink:#000000;--text:#111111;--secondary:#1f1f1f;--muted:#2a2a2a;
  --g-blue:#4285f4;--g-red:#ea4335;--g-yellow:#fbbc05;--g-green:#34a853;
  --g-blue-soft:#e8f0fe;--g-red-soft:#fce8e6;--g-yellow-soft:#fef7e0;--g-green-soft:#e6f4ea;
  --g-blue-text:#1967d2;--g-red-text:#c5221f;--g-yellow-text:#b06000;--g-green-text:#188038;
  --green:#188038;--green-soft:#e6f4ea;--red:#c5221f;--yellow:#b06000;
}
h1,h2,h3,h4,.h-hero,.h-display,.plan-name,.plan-price,.brand-name,.footer-heading{color:#000}
body,.lede,.section-head .lede,.tour-copy>p:not(.note),.card p,.timeline-item p,.plan-desc,.faq-answer,.band p,.early-access p,.status-cols p,.fact-list,.list-check,.list-dash,.list-plain,.plan-list,.compare td,.site-footer,.hero-note,.btn-note,.device-caption,.mock-caption,.plan-footnote,.dd-closing,.plan-price small,.mock-row small,.mock-head small,.mock-foot,.compare .plan-col-head small,.plan-for,.footer-links a,.nav-link,.nav-signin{color:var(--secondary)}
.plan-list.is-excluded li{color:#3c4043}
/* The app's mark: light-blue tile, four Google-coloured squares */
.brand-mark{background:#edf4ff;border-radius:9px;padding:7px;gap:3px}
.brand-mark span{border-radius:2px;background:var(--g-blue)}
.brand-mark span:nth-child(2){background:var(--g-red)}
.brand-mark span:nth-child(3){background:var(--g-yellow)}
.brand-mark span:nth-child(4){background:var(--g-green)}
/* Icon tiles rotate through the four colours in reading order */
.icon-tile{background:var(--g-blue-soft);color:var(--g-blue-text)}
:nth-child(4n+2)>.icon-tile:not(.is-green):not(.is-yellow):not(.is-red):not(.is-gray){background:var(--g-red-soft);color:var(--g-red-text)}
:nth-child(4n+3)>.icon-tile:not(.is-green):not(.is-yellow):not(.is-red):not(.is-gray){background:var(--g-yellow-soft);color:var(--g-yellow-text)}
:nth-child(4n+4)>.icon-tile:not(.is-green):not(.is-yellow):not(.is-red):not(.is-gray){background:var(--g-green-soft);color:var(--g-green-text)}
.icon-tile.is-green{background:var(--g-green-soft);color:var(--g-green-text)}
.icon-tile.is-yellow{background:var(--g-yellow-soft);color:var(--g-yellow-text)}
.icon-tile.is-red{background:var(--g-red-soft);color:var(--g-red-text)}
/* Numbered flow steps and the day timeline cycle as well */
.flow-step:nth-child(4n+1) b,:nth-child(4n+1)>.flow-step b{background:var(--g-blue-soft);color:var(--g-blue-text)}
.flow-step:nth-child(4n+2) b,:nth-child(4n+2)>.flow-step b{background:var(--g-red-soft);color:var(--g-red-text)}
.flow-step:nth-child(4n+3) b,:nth-child(4n+3)>.flow-step b{background:var(--g-yellow-soft);color:var(--g-yellow-text)}
.flow-step:nth-child(4n+4) b,:nth-child(4n+4)>.flow-step b{background:var(--g-green-soft);color:var(--g-green-text)}
.timeline-item:nth-child(4n+1)::before{border-color:var(--g-blue)}.timeline-item:nth-child(4n+1) .timeline-time{color:var(--g-blue-text)}
.timeline-item:nth-child(4n+2)::before{border-color:var(--g-red)}.timeline-item:nth-child(4n+2) .timeline-time{color:var(--g-red-text)}
.timeline-item:nth-child(4n+3)::before{border-color:var(--g-yellow)}.timeline-item:nth-child(4n+3) .timeline-time{color:var(--g-yellow-text)}
.timeline-item:nth-child(4n+4)::before{border-color:var(--g-green)}.timeline-item:nth-child(4n+4) .timeline-time{color:var(--g-green-text)}
/* Section labels take turns too, so the page is not blue from top to bottom */
.section:nth-of-type(4n+1) .eyebrow{color:var(--g-blue-text)}
.section:nth-of-type(4n+2) .eyebrow{color:var(--g-red-text)}
.section:nth-of-type(4n+3) .eyebrow{color:var(--g-yellow-text)}
.section:nth-of-type(4n+4) .eyebrow{color:var(--g-green-text)}
.hero .eyebrow{color:var(--g-blue-text)}
/* Calls to action: the big ones are green, the header button stays blue */
.btn-primary.btn-lg,.plan-cta .btn-primary,.band-dark .btn-light{background:var(--g-green-text);border-color:var(--g-green-text);color:#fff}
.btn-primary.btn-lg:hover,.plan-cta .btn-primary:hover,.band-dark .btn-light:hover{background:#137333;border-color:#137333;color:#fff}
.plan.is-featured .plan-chip{background:var(--g-yellow-soft);color:var(--g-yellow-text);border-color:transparent}
.plan.is-featured{border-color:var(--g-green);box-shadow:0 0 0 1px var(--g-green) inset}
/* A thin four-colour rule above the footer, echoing the mark */
.site-footer{border-top:0;position:relative}
.site-footer::before{content:"";display:block;position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(to right,var(--g-blue) 0 25%,var(--g-red) 25% 50%,var(--g-yellow) 50% 75%,var(--g-green) 75%)}

/* ------------------------------------------------------------------ */
/* 26. Type scale from the Phantom dashboard (owner request): Inter at  */
/*     15px, headings at -0.035em and weight 650, 11px tracked labels,  */
/*     1.7 line-height. Colours untouched.                              */
/* ------------------------------------------------------------------ */
body{font-size:15px;line-height:1.6}
p{line-height:1.7}
h1,h2,h3,h4,.h-hero,.h-display,.plan-name,.plan-price{letter-spacing:-.035em;font-weight:650}
h1,.h-hero{font-size:clamp(32px,4.2vw,48px);line-height:1.1}
.h-display{font-size:clamp(28px,3.4vw,40px);line-height:1.12}
h2{font-size:clamp(24px,2.6vw,30px);line-height:1.2}
h3{font-size:17px;line-height:1.35}
h4{font-size:15px}
.lede{font-size:17px;line-height:1.7}
.tour-copy>p:not(.note),.band p,.early-access p{font-size:15px}
.card p,.timeline-item p,.plan-desc,.faq-answer,.fact-list,.list-check,.list-dash,.list-plain,.plan-list,.status-cols p,.compare td{font-size:14px}
.hero-note,.btn-note,.device-caption,.mock-caption,.plan-footnote,.dd-closing,.note{font-size:12.5px}
.eyebrow,.footer-heading,.plan-list-title,.compare thead th,.compare-group th,.compare-group td,.compare .plan-col-head strong{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.timeline-time{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.btn{font-size:13.5px;font-weight:550}
.btn-lg{font-size:15px;font-weight:550}
.nav-link,.nav-signin{font-size:13.5px;font-weight:550}
.brand-name{font-size:21px;font-weight:800;letter-spacing:-.055em}
.plan-name{font-size:19px}
.plan-price{font-size:40px}
.plan-price small{font-size:14px;font-weight:500;letter-spacing:0}
.flow-step{font-size:13px;font-weight:550}
.chip,.badge,.pill{font-weight:550}

/* ------------------------------------------------------------------ */
/* 27. Resources (blog): index, topic pages and articles                */
/*     Server-rendered by src/resources.js. Same tokens as the rest.    */
/* ------------------------------------------------------------------ */
.res-hero{padding:56px 0 40px}
.res-hero .hero-copy{max-width:760px;margin:0 auto}
.res-hero h1{margin-top:12px}
.res-hero .lede{margin-top:16px;margin-left:auto;margin-right:auto}
.res-featured-wrap{padding-top:0}
.res-featured{display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);gap:40px;align-items:center;border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px;background:var(--surface)}
.res-featured-media{display:block;border-radius:10px;overflow:hidden;background:var(--surface-subtle);aspect-ratio:1200/630}
.res-featured-media img,.res-card-media img{width:100%;height:100%;object-fit:cover;display:block}
.res-featured-body{padding:8px 20px 8px 0}
.res-featured-title{font-size:clamp(22px,2.4vw,30px);margin-top:14px}
.res-featured-title a,.res-card-title a{color:#000;text-decoration:none}
.res-featured-title a:hover,.res-card-title a:hover{color:var(--accent-text);text-decoration:none}
.res-featured .link-arrow{margin-top:18px}
.res-eyebrow{margin-bottom:0;margin-right:10px}
.res-card-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.res-chip.is-red{background:var(--g-red-soft);color:var(--g-red-text)}
.res-chip.is-blue{background:var(--g-blue-soft);color:var(--g-blue-text)}
.res-chip.is-green{background:var(--g-green-soft);color:var(--g-green-text)}
.res-card-excerpt{margin-top:10px;color:var(--secondary);font-size:14.5px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.res-featured .res-card-excerpt{font-size:15.5px;-webkit-line-clamp:4}
.res-meta{margin-top:14px;font-size:12.5px;color:var(--secondary)}
.res-browse{padding-top:64px}
.res-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:32px}
.res-filters{display:flex;gap:8px;flex-wrap:wrap}
.res-filters .pill{height:36px;padding:0 14px;font-size:13.5px}
.res-filters .pill.is-active{background:#000;border-color:#000;color:#fff}
.res-filters .pill-red:not(.is-active):hover{background:var(--g-red-soft);color:var(--g-red-text);border-color:transparent}
.res-filters .pill-blue:not(.is-active):hover{background:var(--g-blue-soft);color:var(--g-blue-text);border-color:transparent}
.res-filters .pill-green:not(.is-active):hover{background:var(--g-green-soft);color:var(--g-green-text);border-color:transparent}
.res-search{position:relative;flex:1 1 260px;max-width:360px}
.res-search svg{position:absolute;left:12px;top:50%;width:16px;height:16px;transform:translateY(-50%);color:var(--secondary);pointer-events:none}
.res-search input{width:100%;height:40px;padding:0 12px 0 36px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);font-size:14px}
.res-search input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.res-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.res-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface);transition:border-color .15s}
.res-card:hover{border-color:var(--line-strong)}
.res-card-media{display:block;aspect-ratio:1200/630;background:var(--surface-subtle);border-bottom:1px solid var(--line)}
.res-card-body{display:flex;flex-direction:column;flex:1;padding:18px 20px 20px}
.res-card-title{font-size:17px;line-height:1.35;margin-top:12px}
.res-card-body .res-meta{margin-top:auto;padding-top:14px}
.res-card.is-scheduled{border-style:dashed}
.res-empty{grid-column:1/-1;padding:40px;text-align:center;color:var(--secondary);border:1px dashed var(--line-strong);border-radius:var(--radius-lg)}
.res-pager{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:40px}
.res-pager-count{font-size:13.5px;color:var(--secondary)}
.res-band{padding-top:0}
/* Article */
.post-head{padding:40px 0 28px;text-align:left}
.post-crumbs{display:flex;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--secondary);margin-bottom:18px}
.post-crumbs a{color:var(--secondary);font-weight:500}
.post-crumbs a:hover{color:var(--accent-text)}
.post-crumbs [aria-current]{color:#000;font-weight:550}
.res-hero .post-crumbs{justify-content:center;margin-bottom:8px}
.post-head h1{margin-top:16px;font-size:clamp(30px,3.6vw,42px);line-height:1.12}
.post-head .lede{margin-top:16px;max-width:none}
.post-meta{margin-top:18px;font-size:13.5px;color:var(--secondary)}
.post-author{font-weight:550;color:#000}
.post-hero{margin:0 auto 36px}
.post-hero img{width:100%;border-radius:var(--radius-lg);border:1px solid var(--line);background:var(--surface-subtle)}
.post-cta{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;padding:22px 24px;border:1px solid var(--accent-border);background:var(--accent-soft);border-radius:var(--radius-lg);margin-bottom:24px}
.post-cta .brand-mark{width:40px;height:40px;padding:8px;background:#fff}
.post-cta p{font-size:14.5px;color:var(--secondary);line-height:1.6}
.post-cta .btn{margin-top:12px}
.post-toc{padding:22px 24px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface-subtle);margin-bottom:36px}
.post-toc-title{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--g-blue-text);margin-bottom:12px}
.post-toc ol{counter-reset:toc;display:flex;flex-direction:column;gap:8px}
.post-toc li{counter-increment:toc;display:flex;gap:12px;align-items:baseline;font-size:14.5px;line-height:1.5}
.post-toc li::before{content:counter(toc);flex:none;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#fff;border:1px solid var(--line-strong);font-size:11.5px;font-weight:600;color:#000;transform:translateY(-1px)}
.post-toc li:nth-child(4n+1)::before{background:var(--g-blue-soft);color:var(--g-blue-text);border-color:transparent}
.post-toc li:nth-child(4n+2)::before{background:var(--g-red-soft);color:var(--g-red-text);border-color:transparent}
.post-toc li:nth-child(4n+3)::before{background:var(--g-yellow-soft);color:var(--g-yellow-text);border-color:transparent}
.post-toc li:nth-child(4n+4)::before{background:var(--g-green-soft);color:var(--g-green-text);border-color:transparent}
.post-toc a{color:#000;font-weight:500}
.post-toc a:hover{color:var(--accent-text)}
.post-body{font-size:16.5px;line-height:1.75;color:var(--text)}
.post-body>*+*{margin-top:20px}
.post-body h2{font-size:clamp(22px,2.2vw,27px);margin-top:48px;padding-top:8px}
.post-body h3{font-size:19px;margin-top:32px}
.post-body h4{font-size:16.5px;margin-top:24px}
.post-body h2+*,.post-body h3+*,.post-body h4+*{margin-top:14px}
.post-body p{line-height:1.75}
.post-body a{font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--accent-border)}
.post-body a:hover{text-decoration-color:currentColor}
.post-body ul,.post-body ol{padding-left:24px;display:flex;flex-direction:column;gap:8px}
.post-body ul{list-style:disc}
.post-body ol{list-style:decimal}
.post-body li::marker{color:var(--secondary)}
.post-body li>ul,.post-body li>ol{margin-top:8px}
.post-body strong{font-weight:600;color:#000}
.post-body blockquote{margin:28px 0;padding:4px 0 4px 22px;border-left:3px solid var(--g-yellow);font-size:17.5px;color:#000;font-weight:500}
.post-body blockquote p+p{margin-top:8px}
.post-body blockquote cite{display:block;margin-top:8px;font-size:13.5px;font-style:normal;font-weight:500;color:var(--secondary)}
.post-body hr{border:0;border-top:1px solid var(--line);margin:40px 0}
.post-body figure{margin:32px 0}
.post-body figure img,.post-body figure svg{width:100%;height:auto;border-radius:var(--radius-lg);border:1px solid var(--line);background:var(--surface)}
.post-body figure.diagram svg,.post-body figure.diagram img{background:var(--surface-subtle);padding:12px}
.post-body figcaption{margin-top:10px;font-size:13px;color:var(--secondary);text-align:center;line-height:1.5}
.post-body .table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-lg)}
.post-body table{width:100%;font-size:14.5px}
.post-body table thead th{background:var(--surface-subtle);text-align:left;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--secondary);padding:12px 16px;border-bottom:1px solid var(--line)}
.post-body table td,.post-body table tbody th{padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left;color:var(--text)}
.post-body table tbody tr:last-child td,.post-body table tbody tr:last-child th{border-bottom:0}
.post-body table tbody th{font-weight:550;color:#000}
.post-body .callout{padding:20px 22px;border-radius:var(--radius-lg);border:1px solid var(--line);background:var(--surface-subtle);font-size:15.5px}
.post-body .callout>p+p{margin-top:10px}
.post-body .callout strong:first-child{display:block;margin-bottom:6px;color:#000}
.post-body .callout.is-blue{background:var(--g-blue-soft);border-color:transparent}
.post-body .callout.is-green{background:var(--g-green-soft);border-color:transparent}
.post-body .callout.is-yellow{background:var(--g-yellow-soft);border-color:transparent}
.post-body .callout.is-red{background:var(--g-red-soft);border-color:transparent}
.post-body .takeaways{padding:24px 26px;border-radius:var(--radius-lg);border:1px solid var(--g-green-border);background:var(--g-green-soft)}
.post-body .takeaways h2,.post-body .takeaways h3{margin-top:0;font-size:17px;color:var(--g-green-text)}
.post-body .takeaways ul{margin-top:12px;font-size:15px}
.post-body .steps{counter-reset:step;padding-left:0;list-style:none;gap:14px}
.post-body .steps>li{counter-increment:step;position:relative;padding-left:44px}
.post-body .steps>li::before{content:counter(step);position:absolute;left:0;top:1px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:600;background:var(--g-blue-soft);color:var(--g-blue-text)}
.post-body .steps>li:nth-child(4n+2)::before{background:var(--g-red-soft);color:var(--g-red-text)}
.post-body .steps>li:nth-child(4n+3)::before{background:var(--g-yellow-soft);color:var(--g-yellow-text)}
.post-body .steps>li:nth-child(4n+4)::before{background:var(--g-green-soft);color:var(--g-green-text)}
.post-body .steps>li strong:first-child{display:block;color:#000}
.post-body .stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;padding:0;list-style:none}
.post-body .stat-row li{padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.post-body .stat-row b{display:block;font-size:24px;font-weight:650;letter-spacing:-.035em;color:#000;line-height:1.1}
.post-body .stat-row span{display:block;margin-top:6px;font-size:13px;color:var(--secondary);line-height:1.4}
.post-faq,.post-sources{margin-top:48px}
.post-faq h2,.post-sources h2{font-size:clamp(22px,2.2vw,27px);margin-bottom:12px}
.post-faq .faq{max-width:none;margin:0}
.post-faq .faq summary{font-size:16px}
.post-sources ol{padding-left:22px;list-style:decimal;display:flex;flex-direction:column;gap:8px;font-size:14.5px;color:var(--secondary)}
.post-sources a{font-weight:500}
.post-source-note{color:var(--secondary)}
.post-foot{margin-top:40px;padding-top:24px;border-top:1px solid var(--line)}
.post-tags{display:flex;gap:8px;flex-wrap:wrap}
.post-tags .pill{height:28px;font-size:12.5px}
.post-disclaimer{margin-top:18px;font-size:12.5px;color:var(--secondary);line-height:1.55}
.post-related{margin-top:56px}
.post-page .res-band{padding-top:var(--section-y)}
@media(max-width:900px){
  .res-featured{grid-template-columns:1fr;gap:20px;padding:14px}
  .res-featured-body{padding:4px 8px 10px}
  .res-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .res-toolbar{flex-direction:column;align-items:stretch}
  .res-search{max-width:none}
}
@media(max-width:600px){
  .res-grid{grid-template-columns:1fr}
  .post-head{padding-top:28px}
  .post-cta{grid-template-columns:1fr}
  .post-body{font-size:16px}
  .post-toc,.post-cta{padding:18px}
  .res-pager .btn{flex:1}
}