/* Kit marketing site, src/css/site.css. Ported 1:1 from design-v1/shared/site.css (approved mockups).
   Rules: never rename tokens; page lanes add their own CSS in src/css/pages/<lane>.css (front matter `styles`), not here.
   Component changes go through NOTES-lane-X.md (QA reconciles). */
/* Self-hosted Inter (variable) from @fontsource-variable/inter, copied to /fonts/ by the build. */
@font-face{font-family:"Inter Variable";font-style:normal;font-display:swap;font-weight:100 900;src:url(/fonts/inter-latin-wght-normal.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter Variable";font-style:normal;font-display:swap;font-weight:100 900;src:url(/fonts/inter-latin-ext-wght-normal.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  --n0:#fff;--n50:#faf9f7;--n100:#f3f3f1;--n200:#e8e7e4;--n300:#d4d3cf;--n400:#a5a4a1;--n500:#8f8e8a;--n600:#5b5a56;--n700:#3a3935;--n900:#100f0c;
  --a5:rgba(16,15,12,.05);--a7:rgba(16,15,12,.07);--a9:rgba(16,15,12,.09);--a16:rgba(16,15,12,.16);
  --bg:var(--n50);--surface:var(--n0);--ink:var(--n900);--ink-2:#64635e;--muted:#6b6a66;
  --line:var(--a7);--line-strong:var(--a16);--hover:var(--a5);
  --accent:#0f766e;--accent-700:#0f766e;--accent-800:#0b5d57;--accent-soft:#e7f3f1;--accent-ink:#0b5d57;--on-accent:#fff;
  --success:#187501;--warning:#8a5a00;--warning-soft:#fdf3dc;--info:#1d4ed8;--info-soft:#e8eefc;
  --r-md:6px;--r-lg:8px;--r-xl:12px;--r-2xl:16px;--r-3xl:24px;
  --shadow-md:0 4px 6px -1px rgba(0,0,0,.10),0 2px 4px -2px rgba(0,0,0,.10);
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,.10),0 4px 6px -4px rgba(0,0,0,.10);
  --shadow-xl:0 25px 50px -12px rgba(0,0,0,.18);
  --shadow-float:0 10px 30px rgba(16,15,12,.08);
  --ring:0 0 0 2px var(--surface),0 0 0 4px var(--accent);
  --motion:150ms cubic-bezier(.4,0,.2,1);--motion-slow:200ms ease-out;
  --edge:clamp(20px,4vw,32px);--max:1200px;
  /* marketing-only */
  --bold:#34b98b;--bold-tint:rgba(52,185,139,.12);--navy:#122d46;
  --block:112px;--block-sm:64px;
  /* per-app accents (brief §5) */
  --app-pos:#0f766e;--app-crm:#db2777;--app-hotel:#b45309;--app-restaurant:#9f1239;--app-gym:#d97706;
  --app-laundry:#0e7490;--app-projects:#2563eb;--app-accounting:#047857;--app-hr:#0d9488;--app-mfg:#f97316;
  --app-assets:#4f46e5;--app-support:#7c3aed;--app-pay:#4d7c0f;--app-hospital:#15803d;--app-ai:#122d46;--app-tv:#334155;
}
[data-app=pos]{--acc:var(--app-pos)}[data-app=crm]{--acc:var(--app-crm)}[data-app=hotel]{--acc:var(--app-hotel)}
[data-app=restaurant]{--acc:var(--app-restaurant)}[data-app=gym]{--acc:var(--app-gym)}[data-app=laundry]{--acc:var(--app-laundry)}
[data-app=projects]{--acc:var(--app-projects)}[data-app=accounting]{--acc:var(--app-accounting)}[data-app=hr]{--acc:var(--app-hr)}
[data-app=mfg]{--acc:var(--app-mfg)}[data-app=assets]{--acc:var(--app-assets)}[data-app=support]{--acc:var(--app-support)}
[data-app=pay]{--acc:var(--app-pay)}[data-app=hospital]{--acc:var(--app-hospital)}[data-app=ai]{--acc:var(--app-ai)}[data-app=tv]{--acc:var(--app-tv)}
[data-app]{--acc-tint:color-mix(in srgb,var(--acc) 10%,#fff);--acc-tint-2:color-mix(in srgb,var(--acc) 18%,#fff)}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Inter Variable",Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:17px;line-height:1.55;color:var(--ink);background:var(--bg);font-feature-settings:"cv11","ss01","tnum"}
h1,h2,h3,h4,p,figure{margin:0}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul{margin:0;padding:0;list-style:none}
img,video{display:block;max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--edge)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-lg)}
.num{font-variant-numeric:tabular-nums}
.skip{position:absolute;left:8px;top:-40px;background:var(--ink);color:#fff;padding:8px 12px;border-radius:var(--r-lg);z-index:99}
.skip:focus{top:8px}

/* Type scale (brief §5) */
.display{font-size:clamp(48px,6.2vw,88px);line-height:1.02;letter-spacing:-.03em;font-weight:600}
h2.t2,.t2{font-size:clamp(32px,3.3vw,44px);line-height:1.12;letter-spacing:-.025em;font-weight:600}
.t3{font-size:clamp(22px,2vw,28px);line-height:1.2;letter-spacing:-.02em;font-weight:600}
.card-title{font-size:22px;line-height:1.27;font-weight:600;letter-spacing:-.015em}
.lead{font-size:clamp(17px,1.3vw,20px);line-height:1.5;color:var(--ink-2)}
.small{font-size:14px;line-height:1.45;color:var(--muted)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink);font-size:12.5px;font-weight:600;letter-spacing:.02em}
.eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.kicker{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--acc,var(--accent-ink));margin-bottom:14px}
.sec-head{max-width:720px;margin-bottom:48px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head .lead{margin-top:16px}
.sec-head .t2+.lead{max-width:640px}
.sec-head.center .lead{margin-left:auto;margin-right:auto}
section.block{padding:var(--block) 0}
section.block.tight{padding-top:calc(var(--block) * .6)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;border-radius:var(--r-lg);font-size:14px;font-weight:600;line-height:1;white-space:nowrap;transition:background var(--motion),border-color var(--motion),color var(--motion),transform var(--motion)}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-800)}
.btn-secondary{background:var(--surface);border:1px solid var(--line-strong);color:var(--ink)}
.btn-secondary:hover{background:var(--hover)}
.btn-ghost{color:var(--accent-ink)}
.btn-ghost:hover{background:var(--accent-soft)}
.btn-lg{height:48px;padding:0 24px;font-size:16px}
.btn-block{width:100%}
.btn svg{width:16px;height:16px}
.cta-pair{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.cta-note{margin-top:14px;font-size:13.5px;color:var(--muted)}
.more{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--acc,var(--accent-ink));font-size:15px}
.more:hover{text-decoration:underline;text-underline-offset:3px}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.badge-inc{background:var(--accent-soft);color:var(--accent-ink)}
.badge-soon{background:var(--warning-soft);color:var(--warning)}
.badge-free{background:var(--n100);color:var(--ink-2)}
.badge-tx{background:var(--info-soft);color:var(--info)}
.badge-bonus{background:#047857;color:#fff}
.badge-bonus svg{width:12px;height:12px}

/* Cards and media */
.card{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-2xl);overflow:hidden}
.card.tint{background:var(--acc-tint,var(--accent-soft));border-color:transparent}
.shot{border-radius:var(--r-2xl);border:1px solid var(--line-strong);overflow:hidden;background:#fff;box-shadow:var(--shadow-float)}
.shot img,.shot video{width:100%;height:100%;object-fit:cover;object-position:top left}
.checks{display:grid;gap:10px}
.checks li{display:flex;gap:10px;font-size:15px;line-height:1.45;color:var(--ink-2)}
.checks svg{flex:none;width:18px;height:18px;color:var(--acc,var(--accent));margin-top:2px}
.checks b{color:var(--ink);font-weight:600}

/* Header + mega menu */
.hdr{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.hdr-row{height:64px;display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:19px;letter-spacing:-.02em;color:var(--ink)}
.brand-mark{width:30px;height:30px;border-radius:9px;background:var(--navy);display:grid;place-items:center;color:#fff;position:relative;overflow:hidden}
.brand-mark svg{width:18px;height:18px}
.nav-wrap{display:flex;flex:1;min-width:0;height:64px}
.nav{display:flex;gap:2px;flex:1;height:64px}
.nav>li{position:static;display:flex;align-items:center}
.nav a,.nav button{display:inline-flex;align-items:center;gap:5px;height:38px;padding:0 13px;border-radius:var(--r-lg);font-size:15px;font-weight:500;color:var(--ink-2)}
.nav a:hover,.nav button:hover,.nav>li.open>button{background:var(--hover);color:var(--ink)}
.nav a[aria-current]{color:var(--ink);background:var(--a5)}
.nav button svg{width:14px;height:14px;opacity:.6;transition:transform var(--motion)}
.nav>li.open>button svg{transform:rotate(180deg)}
.hdr-actions{display:flex;gap:8px;align-items:center}
.hdr-actions .btn{height:38px}
.hdr-phone{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:var(--ink-2);padding:0 10px}
.hdr-phone svg{width:15px;height:15px;color:var(--accent)}
.menu-toggle{display:none;width:40px;height:40px;border-radius:var(--r-lg);border:1px solid var(--line-strong);place-items:center}
.menu-toggle svg{width:20px;height:20px}
.mega{display:none;position:absolute;left:0;right:0;top:64px;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(16,15,12,.25)}
.nav>li.open .mega{display:block}
.mega-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) 300px;gap:32px;padding:28px 0 28px}
.mega h4{font-size:13.5px;font-weight:600;color:var(--accent-ink);margin-bottom:10px;letter-spacing:.01em}
.mega li a{height:40px;display:flex;align-items:center;gap:10px;font-size:15px;color:var(--ink);border-radius:var(--r-lg);padding:0 8px;margin:0 -8px}
.mega li a:hover{background:var(--hover)}
.mega li a .badge{margin-left:auto}
.mega li a.overview{color:var(--accent-ink);font-weight:600;font-size:14px}
.mega .dot{width:8px;height:8px;border-radius:50%;background:var(--acc,var(--accent));flex:none}
.mega-feature{background:var(--n50);border:1px solid var(--line-strong);border-radius:var(--r-2xl);overflow:hidden;display:flex;flex-direction:column}
.mega-feature .pic{aspect-ratio:300/170;overflow:hidden;background:var(--n900)}
.mega-feature .pic img{width:100%;height:100%;object-fit:cover;object-position:right bottom}
.mega-feature .body{padding:16px 18px 18px}
.mega-feature .body h5{margin:0 0 4px;font-size:16px;font-weight:600}
.mega-feature .body p{font-size:13.5px;color:var(--ink-2);margin-bottom:10px}
.mega-util{background:var(--n50);border-top:1px solid var(--line)}
.mega-util .wrap{display:flex;gap:28px;height:48px;align-items:center;font-size:14px}
.mega-util a{color:var(--ink-2);font-weight:500}
.mega-util a:hover{color:var(--ink)}
.mega-util a.ext::after{content:" ↗"}
.mega-grid.two{grid-template-columns:1fr 1fr 360px}
.mega .devs{display:grid;gap:8px}
.mega .devs a{height:auto;padding:10px 8px;align-items:flex-start}
.mega .devs .glyph{width:36px;height:36px;border-radius:10px;background:var(--n100);display:grid;place-items:center;flex:none}
.mega .devs .glyph svg{width:18px;height:18px}
.mega .devs small{display:block;font-size:12.5px;color:var(--muted);font-weight:400}
.mega .devs b{font-weight:600;display:block;line-height:1.2}
/* Mobile sheet */
.sheet{display:none}
@media (max-width:980px){
  .nav,.hdr-phone{display:none}
  .menu-toggle{display:grid}
  .hdr-actions .login{display:none}
  .sheet{display:none;position:fixed;inset:64px 0 0;background:var(--surface);z-index:50;overflow:auto;padding:8px var(--edge) 96px}
  .sheet.open{display:block}
  .sheet details{border-bottom:1px solid var(--line-strong)}
  .sheet summary{list-style:none;display:flex;justify-content:space-between;align-items:center;height:56px;font-size:17px;font-weight:600;cursor:pointer}
  .sheet summary::-webkit-details-marker{display:none}
  .sheet .sheet-list{padding:0 0 12px;display:grid;gap:2px}
  .sheet .sheet-list a{display:flex;align-items:center;gap:10px;height:44px;font-size:16px;color:var(--ink-2)}
  .sheet .sheet-row{display:flex;align-items:center;height:56px;font-size:17px;font-weight:600;border-bottom:1px solid var(--line-strong)}
  .sheet-cta{position:fixed;left:0;right:0;bottom:0;padding:12px var(--edge) 20px;background:var(--surface);border-top:1px solid var(--line);display:none;gap:10px}
  .sheet.open~.sheet-cta{display:flex}
}

/* Footer */
.ftr{background:var(--surface);border-top:1px solid var(--line);padding:64px 0 28px;font-size:14px;color:var(--ink-2)}
.ftr-grid{display:grid;grid-template-columns:1.6fr repeat(5,1fr);gap:32px}
.ftr h4{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:12px}
.ftr li{margin-bottom:9px}
.ftr a:hover{color:var(--ink)}
.ftr .about{font-size:13.5px;line-height:1.6;max-width:300px;margin-top:12px}
.ftr .family{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font-size:13px;font-weight:600;color:var(--ink)}
.ftr .family span{display:inline-flex;align-items:center;gap:6px}
.ftr .family i{width:8px;height:8px;border-radius:2px;background:var(--acc,var(--accent))}
.ftr-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:20px;padding-top:20px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.ftr-bottom ul{display:flex;gap:16px;flex-wrap:wrap}
.ftr-bottom li{margin:0}
.store-badges{display:flex;gap:10px;flex-wrap:wrap}
.store{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 12px 0 10px;border-radius:8px;background:var(--n900);color:#fff;border:1px solid #2a2a2e;line-height:1.05}
.store svg{width:20px;height:20px;flex:none}
.store small{display:block;font-size:9px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;opacity:.85}
.store b{display:block;font-size:14px;font-weight:600;letter-spacing:-.01em}

/* Dark CTA band */
.cta-box{background:var(--n900);color:#fff;border-radius:var(--r-3xl);padding:72px 40px;text-align:center;position:relative;overflow:hidden}
.cta-box::before{content:"";position:absolute;inset:auto -20% -60% -20%;height:70%;background:radial-gradient(ellipse at center,rgba(15,118,110,.55),transparent 60%)}
.cta-box>*{position:relative}
.cta-box h2{font-size:clamp(30px,3.6vw,46px);letter-spacing:-.025em;font-weight:600;line-height:1.1}
.cta-box p{margin:14px auto 32px;max-width:560px;color:rgba(255,255,255,.72);font-size:17px}
.cta-box .btn-primary{background:#fff;color:var(--n900)}
.cta-box .btn-primary:hover{background:var(--n100)}
.cta-box .btn-secondary{background:transparent;border-color:rgba(255,255,255,.3);color:#fff}
.cta-box .btn-secondary:hover{background:rgba(255,255,255,.08)}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.cta-fine{margin-top:16px;font-size:12.5px;color:rgba(255,255,255,.55)}

/* FAQ */
.faq{max-width:760px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line-strong)}
.faq details:first-child{border-top:1px solid var(--line-strong)}
.faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 4px;font-size:17px;font-weight:600;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{flex:none;width:18px;height:18px;color:var(--muted);transition:transform var(--motion)}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq .ans{padding:0 4px 20px;color:var(--ink-2);font-size:15.5px;line-height:1.6;max-width:680px}
.faq .ans a{color:var(--accent-ink);font-weight:600}

/* Currency toggle (pricing) */
.toggle{display:inline-flex;align-items:center;padding:4px;border-radius:999px;background:var(--surface);border:1px solid var(--line-strong);gap:4px}
.toggle button{height:36px;padding:0 16px;border-radius:999px;font-size:14px;font-weight:600;color:var(--ink-2);display:inline-flex;align-items:center;gap:8px;transition:background var(--motion),color var(--motion)}
.toggle button[aria-pressed="true"]{background:var(--ink);color:#fff}

/* Lazy YouTube (youtube-nocookie, poster click) */
.yt{position:relative;aspect-ratio:16/9;border-radius:var(--r-2xl);overflow:hidden;background:var(--n900);cursor:pointer;border:1px solid var(--line-strong)}
.yt img{width:100%;height:100%;object-fit:cover;opacity:.92}
.yt .play{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:var(--shadow-xl)}
.yt .play svg{width:26px;height:26px;margin-left:4px;color:var(--ink)}
.yt .cap{position:absolute;left:16px;right:16px;bottom:14px;color:#fff;font-size:14px;font-weight:600;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}video[autoplay]{display:none}}

@media (max-width:980px){
  :root{--block:64px}
  .ftr-grid{grid-template-columns:1fr 1fr}
  .mega-grid{grid-template-columns:1fr}
}
/* ---- page extensions below (add, do not edit above) ---- */

/* --- app-landing (T4) additions, shared by /apps/* pages (additive; added by app-kit-business) --- */
.badge-lg{height:52px;padding:0 18px;border-radius:10px}.badge-lg b{font-size:17px}.badge-lg svg{width:24px;height:24px}
.standin{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;background:#fff;border:1px dashed var(--line-strong);font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.02em}
.standin i{width:6px;height:6px;border-radius:50%;background:var(--warning)}

/* --- module page (T2) additions, shared by /products/* pages (additive; added by module-crm). Set --mod on <body> for the module accent. --- */
body[data-mod]{--mod-soft:color-mix(in srgb,var(--mod,var(--accent)) 10%,#fff);--mod-ink:color-mix(in srgb,var(--mod,var(--accent)) 70%,#000)}
.mega.open{display:block}
.pill{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;vertical-align:2px}
.pill-bonus{background:var(--warning-soft);color:var(--warning)}
.pill-mod{background:var(--mod-soft,var(--accent-soft));color:var(--mod-ink,var(--accent-ink))}
.check{display:grid;gap:12px}
.check li{display:flex;gap:12px;align-items:flex-start;font-size:17px;line-height:26px}
.check svg{flex:none;width:22px;height:22px;margin-top:2px;color:var(--mod,var(--accent))}
.check-teal svg{color:var(--accent)}
.band-dark{background:var(--n900);color:var(--n50)}
.band-dark .lead{color:rgba(255,255,255,.72)}
.btn-dark{background:#fff;color:var(--n900)}.btn-dark:hover{background:var(--n100)}
.btn-outline-light{border:1px solid rgba(255,255,255,.32);color:#fff}.btn-outline-light:hover{background:rgba(255,255,255,.08)}
/* CSS device frames (same geometry as assets/frames/frames.css, fluid) */
.laptop{width:100%;max-width:1280px;--bezel:#15161a;--bezel-2:#2a2b31;--bezel-edge:#3a3b40;--metal-2:#b4b4b9}
.laptop .lid{background:var(--bezel);border-radius:1.7% 1.7% .8% .8%/2.4% 2.4% 1.2% 1.2%;padding:1.25% 1.25% 1.4%;position:relative;box-shadow:0 1px 2px rgba(0,0,0,.18),0 40px 80px -28px rgba(16,15,12,.45)}
.laptop .lid::before{content:"";position:absolute;top:.5%;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--bezel-2);box-shadow:inset 0 0 0 1.5px #0b0b0d}
.laptop .screen{aspect-ratio:16/10;border-radius:6px;overflow:hidden;background:#fff;position:relative}
.laptop .screen img,.laptop .screen video{width:100%;height:100%;object-fit:cover;object-position:top left}
.laptop .hinge{height:6px;margin:0 2.2%;background:linear-gradient(var(--bezel-edge),#1c1d21)}
.laptop .base{height:14px;background:linear-gradient(#e5e5e8,#c9c9ce 70%,#a9a9af);border-radius:0 0 16px 16px;position:relative;margin:0 -1.9%}
.laptop .base::after{content:"";position:absolute;left:50%;top:0;width:22%;height:40%;margin-left:-11%;background:var(--metal-2);border-radius:0 0 6px 6px}
.laptop .floor{height:24px;margin:0 1.6%;background:radial-gradient(50% 100% at 50% 0%,rgba(16,15,12,.28),transparent 70%)}
.frame-cap{margin-top:14px;text-align:center;font-size:14px;color:var(--muted)}

/* --- products-hub additions (additive; added by products-hub). Bonus badge for plans, till/TV frames, muted loop card, yt duration tag --- */
.bonus{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;background:var(--warning-soft);color:var(--warning);font-size:12px;font-weight:700;letter-spacing:.03em;white-space:nowrap}
.bonus svg{width:12px;height:12px}
.till{width:100%;position:relative}
.till .monitor{background:#15161a;border-radius:14px;padding:1.5% 1.5% 3.6%;position:relative;box-shadow:0 1px 2px rgba(0,0,0,.18),0 40px 80px -28px rgba(16,15,12,.45)}
.till .monitor::after{content:"";position:absolute;left:50%;bottom:1.3%;width:5%;height:6px;margin-left:-2.5%;border-radius:3px;background:#2a2b31}
.till .screen{aspect-ratio:16/9;border-radius:5px;overflow:hidden;background:#fff}
.till .screen img{width:100%;height:100%;object-fit:cover;object-position:top left}
.till .neck{width:10%;height:48px;margin:0 auto;background:linear-gradient(90deg,#9a9a9f,#d9d9dc 50%,#9a9a9f)}
.till .foot{width:36%;height:16px;margin:0 auto;border-radius:0 0 12px 12px;background:linear-gradient(#e5e5e8,#b4b4b9)}
.tv{width:100%}
.tv .panel{background:#0b0b0d;border-radius:12px;padding:.8%;box-shadow:0 1px 2px rgba(0,0,0,.2),0 50px 90px -30px rgba(16,15,12,.5)}
.tv .screen{aspect-ratio:16/9;border-radius:5px;overflow:hidden;background:#000}
.tv .screen img{width:100%;height:100%;object-fit:cover}
.tv .neck{width:6%;height:34px;margin:0 auto;background:linear-gradient(90deg,#2a2b31,#4a4b52 50%,#2a2b31)}
.tv .foot{width:36%;height:12px;margin:0 auto;border-radius:0 0 8px 8px;background:linear-gradient(#3a3b40,#1c1d21)}
.loop{position:relative;border-radius:var(--r-2xl);overflow:hidden;border:1px solid var(--line-strong);background:#fff;box-shadow:0 10px 30px rgba(16,15,12,.08)}
.loop video{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left}
.loop .tag{position:absolute;left:12px;top:12px;height:24px;padding:0 8px;border-radius:6px;background:rgba(16,15,12,.78);color:#fff;font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:6px;z-index:1}
.loop .tag i{width:6px;height:6px;border-radius:50%;background:#34b98b}
.yt .dur{position:absolute;right:12px;bottom:12px;height:24px;padding:0 8px;border-radius:6px;background:rgba(16,15,12,.78);color:#fff;font-size:12px;font-weight:600;display:inline-flex;align-items:center}

/* "Guide video coming" poster tile: striped placeholder, no video id (home device card, products-hub guides) */
.coming{position:relative;cursor:default}
.yt.coming,.dev .st.coming{background:repeating-linear-gradient(135deg,#ecebe7 0 12px,#e3e1dc 12px 24px)}
.yt.coming img{opacity:.55;filter:saturate(.5)}
.coming .coming-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px;background:#fff;border:1px dashed var(--line-strong);font-size:13px;font-weight:600;color:var(--ink-2);white-space:nowrap;box-shadow:var(--shadow-lg);z-index:1}
.coming .coming-label svg{width:14px;height:14px;color:var(--muted)}
.dev .st.coming .coming-label{top:auto;bottom:14px;transform:translateX(-50%)}

/* ===== Header: mega menu refinements from the approved home mockup (page-level there, shared here) ===== */
.hdr{overflow:visible}
.nav>li>button{color:var(--ink-2)}
.nav>li.open>button{color:var(--ink);background:var(--hover)}
.mega{z-index:40}
.mega-grid{grid-template-columns:repeat(3,minmax(0,1fr)) 300px;gap:32px;padding:28px 0}
.mega-grid.industries{grid-template-columns:1.2fr 1fr 320px}
.mega-grid.apps{grid-template-columns:repeat(3,minmax(0,1fr)) 300px}
.mega h4{font-size:14px;font-weight:600;color:var(--accent-ink);margin-bottom:10px}
.mega li a{height:40px;display:flex;align-items:center;gap:10px;font-size:16px;color:var(--ink-2);border-radius:var(--r-lg);padding:0 8px;margin:0 -8px}
.mega li a:hover{background:var(--hover);color:var(--ink)}
.mega li a[aria-current]{color:var(--ink);font-weight:600}
.mega li a .dot{width:10px;height:10px;border-radius:3px;background:var(--dot,var(--accent));flex:none}
.mega li a .badge,.mega li a .bonus{margin-left:auto}
.mega li.more a{color:var(--accent-ink);font-weight:600;font-size:14px}
.mega-feat{background:var(--n50);border:1px solid var(--line-strong);border-radius:var(--r-2xl);padding:14px;display:flex;flex-direction:column;gap:10px}
.mega-feat:hover{box-shadow:var(--shadow-lg)}
.mega-feat img,.mega-feat picture{width:100%;aspect-ratio:300/170;object-fit:cover;object-position:top left;border-radius:var(--r-xl);border:1px solid var(--line);overflow:hidden}
.mega-feat picture img{width:100%;height:100%;object-fit:cover;object-position:top left;border:0;border-radius:0}
.mega-feat b{font-size:16px}.mega-feat p{font-size:14px;line-height:20px;color:var(--ink-2)}
.mega-feat .photo{aspect-ratio:320/200}
.mega-util .wrap{font-weight:500;color:var(--ink-2)}
.mega .devs a .glyph{color:var(--acc,var(--accent))}
.mega .list-plain li a{height:44px}
.mega .store-badges{margin-top:14px}
/* Phone sheet: the same panel as a full-screen sheet (site.js toggles .open, locks scroll, traps focus) */
@media (max-width:980px){
  .sheet .sheet-list a .dot{width:10px;height:10px;border-radius:3px;background:var(--dot,var(--accent));flex:none}
  .sheet .sheet-list a .badge,.sheet .sheet-list a .bonus{margin-left:auto}
  .sheet .sheet-head{display:flex;justify-content:space-between;align-items:center;height:48px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .sheet .sheet-close{width:44px;height:44px;border-radius:var(--r-lg);border:1px solid var(--line-strong);display:grid;place-items:center}
  .sheet .sheet-close svg{width:18px;height:18px}
  .sheet .store-badges{margin:16px 0}
  body.menu-open{overflow:hidden}
}
@media (min-width:981px){.sheet,.sheet-cta{display:none!important}}

/* ===== Device frames (shared by the laptop / phone / till / tv shortcodes) ===== */
.device{margin:0;position:relative}
.device .shot-img,.device picture{display:block;width:100%;height:100%}
.device picture img{width:100%;height:100%;object-fit:cover;object-position:top left}
.frame-cap{margin-top:14px;text-align:center;font-size:14px;color:var(--muted)}

/* Phone: iPhone-style, Dynamic Island, safe areas. Screen 393x852 (46.13%).
   Status zone 54/852 = 6.338%; island 126x37 at top 11 => 32.06% x 4.343%, top 1.291%;
   home-indicator zone 34/852 = 3.99%, bar 139x5 => 35.37% x .587%. The screenshot sits ONLY in the middle 764/852 and is
   never cropped (object-fit: contain); 390x844 captures are a little narrower than the zone, so the frame paints the
   screen background in the capture's own edge colour (--scr-bg, sampled at build by the phone shortcode). */
.device-phone{width:300px;max-width:100%;--scr-bg:#fff;--scr-ink:#100f0c}
.device-phone.is-dark{--scr-bg:#0b0b0d;--scr-ink:#fff}
.device-phone .phone-body{background:#111114;border-radius:13.33%/6.15%;padding:3.33%;box-shadow:0 1px 2px rgba(0,0,0,.2),0 36px 70px -24px rgba(16,15,12,.5);position:relative}
.device-phone .phone-body::before{content:"";position:absolute;inset:3px;border-radius:inherit;border:2px solid #3a3b40;pointer-events:none;z-index:3}
.device-phone .scr{position:relative;aspect-ratio:393/852;border-radius:10.3%/4.75%;overflow:hidden;background:var(--scr-bg);color:var(--scr-ink);display:flex;flex-direction:column}
.device-phone .statusbar{position:relative;flex:none;height:6.338%;display:flex;align-items:center;justify-content:space-between;padding:0 7.6%;font-size:5.1cqi;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.device-phone .scr{container-type:inline-size}
.device-phone .statusbar .time{font-size:5.6cqi;line-height:1;margin-top:.2em}
.device-phone .statusbar .island{position:absolute;left:50%;top:20.37%;width:32.06%;height:68.5%;margin-left:-16.03%;background:#0b0b0d;border-radius:999px;z-index:4}
.device-phone .statusbar .status-icons{display:inline-flex;align-items:center;gap:1.5cqi;margin-top:.15em}
.device-phone .statusbar svg{display:block;height:3cqi;width:auto}
.device-phone .statusbar .sig{width:5cqi}.device-phone .statusbar .wifi{width:4.4cqi}.device-phone .statusbar .batt{width:7cqi}
.device-phone .shot{flex:1 1 auto;min-height:0;position:relative;overflow:hidden;background:var(--scr-bg)}
.device-phone .shot picture,.device-phone .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:top center}
.device-phone .home-zone{flex:none;height:3.99%;display:grid;place-items:center;background:var(--scr-bg);position:relative;z-index:2}
.device-phone .home-zone .home-bar{width:35.37%;height:14.7%;min-height:3px;border-radius:999px;background:var(--scr-ink);opacity:.9}
.device-phone .btn-side{position:absolute;width:1.1%;background:#2c2c31;border-radius:2px;right:-1.1%}
.device-phone .btn-side.power{top:22%;height:12%}
.device-phone .btn-side.v1{left:-1.1%;right:auto;top:18%;height:4%}.device-phone .btn-side.v2{left:-1.1%;right:auto;top:24%;height:8%}.device-phone .btn-side.v3{left:-1.1%;right:auto;top:34%;height:8%}
.device-phone.sm{width:240px}.device-phone.lg{width:360px}

/* Store badge variants */
.store-soon{background:var(--n700);border-color:#4a4b52;opacity:.92;cursor:default}
.store-lg{height:52px;padding:0 18px 0 14px;border-radius:10px}.store-lg b{font-size:17px}.store-lg svg{width:24px;height:24px}
.ai-line{font-size:15px;color:var(--ink-2)}
/* Loop: fluid ratio + pause control (component markup in components/loop.njk) */
.loop video{aspect-ratio:var(--ratio,16/10)}
.loop .vctl{position:absolute;right:12px;bottom:12px;height:32px;padding:0 10px 0 8px;border-radius:8px;background:rgba(16,15,12,.78);color:#fff;font-size:12.5px;font-weight:600;display:inline-flex;align-items:center;gap:6px;z-index:1}
.loop .vctl svg{width:14px;height:14px}
.loop .vctl:hover{background:rgba(16,15,12,.92)}
/* Breadcrumb (all non-home pages) */
.crumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:13.5px;color:var(--muted);padding:18px 0 0}
.crumbs a{color:var(--ink-2)}.crumbs a:hover{color:var(--ink)}.crumbs li+li::before{content:"/";margin-right:6px;color:var(--n300)}
/* Fixes found in the first QA pass (2026-10-01) */
.mega-feat picture{display:block}
.mega li.more{display:block}
.sheet .sheet-close svg{transform:rotate(45deg)}
@media (max-width:980px){
  /* backdrop-filter on .hdr would make it the containing block of the fixed sheet; drop it on phones */
  .hdr{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff}
}
.mega-feat picture{aspect-ratio:auto;border:0;border-radius:0;overflow:visible}
.mega-feat picture img{position:static;width:100%;height:auto;aspect-ratio:300/170;object-fit:cover;object-position:top left;border-radius:var(--r-xl);border:1px solid var(--line)}
.mega-feat picture img.photo{aspect-ratio:320/200;object-position:center}
.mega-feat picture img.widget{object-position:right bottom}
/* QA reconciliation (2026-10-01): requests from NOTES-lane-A/B/C/D */
ol{margin:0;padding:0;list-style:none}
.crumbs{list-style:none;padding-left:0}
.more svg,a.arrow svg{width:14px;height:14px;flex:none}
.sheet-list a svg{width:14px;height:14px;flex:none}
/* Contrast (axe, 2026-10-01): per-app accents (amber, pink, orange) are too light for 15 px text on the page background;
   text that follows the accent uses a darkened ink instead. Swatches, dots and icons keep the raw accent. */
[data-app]{--acc-ink:color-mix(in srgb,var(--acc) 70%,#000)}
.more,.kicker{color:var(--acc-ink,var(--accent-ink))}
.ftr h3{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:12px}
/* The Bonus pill keeps its own colours wherever it is nested (dark bands restyle descendant spans; specificity 0,3,0 on purpose) */
.bonus.bonus.bonus{display:inline-flex;margin-top:0;font-size:12px;color:var(--warning);background:var(--warning-soft)}
/* Proof strip (2026-10-01, live check): the inline <div class="proof"><span>..<b>..</b></span> strip under the hero is shared by the
   module (T2), app (T4) and industry (T5) templates; one rule here so the stats never render as a run-on sentence. */
[data-template=module] .proof,[data-template=app] .proof,[data-template=industry] .proof{display:flex;flex-wrap:wrap;gap:12px 32px;align-items:center;padding:28px 0;border-top:1px solid var(--line);font-size:14px;color:var(--ink-2)}
[data-template=module] .proof b,[data-template=app] .proof b,[data-template=industry] .proof b{color:var(--ink);font-weight:600}
@media (max-width:820px){[data-template=module] .proof,[data-template=app] .proof,[data-template=industry] .proof{gap:8px 20px;padding:20px 0}}