/* Layers3D marketing site — shared stylesheet.
   Rhythm: dark hero and dark close carry the brand; feature sections go light
   because a screenshot of a dark admin on a dark page loses all contrast.
   One accent (teal). Amber is semantic only. The layer-line is the one motif. */

:root{
  --bg:#0B1014; --bg2:#101820; --card:#141E27; --line:#22303B;
  --ink:#E9F1F6; --ink2:#B7C7D3; --muted:#7C90A0;
  --accent:#3FBFCF; --accent-deep:#0E6E78; --accent-ink:#04171A;
  --warm:#E8B15C;
  /* Semantic only, and deliberately not the teal accent: these carry the DFM
     verdicts, which mean pass / look at this / stop. */
  --ok:#4FBF8B; --warn:#E8B15C; --bad:#E4756A;
  --ok-l:#1F8A5B; --warn-l:#9A6512; --bad-l:#B23A3A;
  /* light sections */
  --paper:#F4F6F8; --paper2:#FFFFFF; --ink-l:#0F1B22; --ink2-l:#3D4F5C; --muted-l:#65778399;
  --muted-l:#66798A; --line-l:#D9E0E5; --accent-l:#0E6E78;
  --maxw:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:Archivo,ui-sans-serif,system-ui,sans-serif;margin:0;text-wrap:balance;letter-spacing:-.02em}
p{margin:0}
a{color:var(--accent);text-decoration:none}
img{max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
.num{font-variant-numeric:tabular-nums}

/* layer-line motif */
.layers{height:6px;background:repeating-linear-gradient(90deg,var(--accent) 0 2px,transparent 2px 7px);opacity:.5}

/* header */
header.site{position:sticky;top:0;z-index:20;background:rgba(11,16,20,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.site nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.brand{font-family:Archivo;font-weight:800;font-size:19px;letter-spacing:-.02em;color:var(--ink)}
.brand span{color:var(--accent)}
.navlinks{display:flex;gap:22px;align-items:center;font-size:14.5px}
.navlinks a{color:var(--ink2)}
.navlinks a:hover,.navlinks a[aria-current]{color:var(--ink)}
/* "Start free trial" was wrapping inside its own button on anything narrower
   than about 1050px — two short lines in the one control the whole page is
   pointing at, and on a phone it is what made the sticky bar 102px tall. */
.navlinks .btn{white-space:nowrap}

/* On a phone the bar has room for the logo, one link and the trial button, so
   the other eight moved into a dropdown. site.js adds .has-menu once it has
   built the panel — WITHOUT it the links stay in the bar and wrap onto a second
   line, so a page with no JavaScript still reaches every part of the site. */
.navtoggle{display:none}
.navmenu{display:none}
@media(max-width:980px){
  .navlinks{gap:12px 16px;flex-wrap:wrap;justify-content:flex-end}
  .has-menu .navlinks{flex-wrap:nowrap}
  .has-menu .navlinks a.hide-sm{display:none}
  .has-menu .navtoggle{display:inline-flex;align-items:center;gap:7px;background:none;border:1px solid var(--line);
    border-radius:8px;color:var(--ink);font:inherit;font-size:14px;padding:7px 12px;cursor:pointer}
  .has-menu .navtoggle:hover{border-color:var(--accent)}
  .navtoggle-bars{display:block;width:15px;height:9px;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor;position:relative}
  .navtoggle-bars::before{content:"";position:absolute;left:0;right:0;top:3px;border-top:1.5px solid currentColor}
  .has-menu .navmenu{display:block;position:absolute;left:0;right:0;top:100%;background:var(--bg);
    border-bottom:1px solid var(--line);box-shadow:0 18px 30px rgba(0,0,0,.45);padding:6px 0 12px;max-height:75vh;overflow-y:auto}
  .has-menu .navmenu[hidden]{display:none}
  .navmenu a{display:block;padding:13px 24px;color:var(--ink2);font-size:15.5px;border-bottom:1px solid var(--line)}
  .navmenu a:last-child{border-bottom:0}
  .navmenu a:hover,.navmenu a[aria-current]{color:var(--ink);background:rgba(255,255,255,.04)}
}
/* On a narrow phone the brand, one link, the word "Menu" and the trial button do
   not all fit on 375px — so the button keeps its bars and loses its label. The
   aria-label carries the name for anyone who cannot see it. */
@media(max-width:560px){
  .has-menu .navtoggle{padding:8px 11px}
  .has-menu .navtoggle span:last-child{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  /* "Apply for the beta" ran 22px off a 390px phone (the old "Start free trial"
     already did below 390), so the bar button reads "Apply". Hidden the same way
     as the Menu label, so a screen reader still hears the whole name. */
  .navlinks .btn .cta-more{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* buttons */
.btn{display:inline-block;font-weight:600;font-size:15px;padding:11px 20px;border-radius:8px;border:1px solid transparent;cursor:pointer;line-height:1.3;font-family:inherit}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--accent)}
.btn-sm{padding:8px 15px;font-size:14px}
.light .btn-primary{background:var(--accent-l);color:#fff}
.light .btn-ghost{border-color:#B9C4CC;color:var(--ink-l)}
.light .btn-ghost:hover{border-color:var(--accent-l)}

/* sections */
section{padding:84px 0;border-bottom:1px solid var(--line)}
section.light{background:var(--paper);color:var(--ink-l);border-bottom:1px solid var(--line-l)}
section.light + section.light{border-top:none}
section.paper2{background:var(--paper2)}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 14px}
.light .eyebrow{color:var(--accent-l)}
h2{font-size:clamp(26px,4vw,36px);font-weight:700;margin-bottom:12px;line-height:1.12}
.sub{color:var(--ink2);font-size:17.5px;max-width:64ch}
.light .sub{color:var(--ink2-l)}
.light a{color:var(--accent-l)}
.center{text-align:center}
.center .sub{margin:0 auto}
.small{font-size:13.5px;color:var(--muted)}
.light .small{color:var(--muted-l)}

/* hero */
.hero{padding:76px 0 66px;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(180deg,transparent 0 38px,rgba(63,191,207,.045) 38px 39px);pointer-events:none;mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 85%)}
.hero::after{content:"";position:absolute;inset:auto -10% -60% 40%;height:420px;background:radial-gradient(closest-side,rgba(63,191,207,.14),transparent);pointer-events:none}
/* Copy on top, the product full-width underneath: the screenshot is the pitch,
   so it gets the whole content width instead of a half column. */
.hero .wrap{position:relative;display:grid;grid-template-columns:1fr;gap:40px;align-items:start}
.hero h1{font-size:clamp(34px,5.4vw,58px);font-weight:800;line-height:1.04;max-width:18ch}
.hero .lede{font-size:18.5px;color:var(--ink2);max-width:60ch;margin-top:20px}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px;align-items:center}
.cta .note{font-size:13.5px;color:var(--muted);flex-basis:100%}

/* screenshot frame: thin rounded frame, 1px teal top edge, soft shadow.
   CSS, not baked into the PNG, so a screenshot can be swapped. */
.shot{position:relative;border-radius:12px;overflow:hidden;background:#0B1014;border:1px solid var(--line);border-top:2px solid var(--accent);box-shadow:0 18px 50px rgba(0,0,0,.45)}
.light .shot{border-color:var(--line-l);border-top-color:var(--accent-l);box-shadow:0 16px 44px rgba(15,27,34,.14);background:#fff}
.shot img{display:block;width:100%;height:auto}
.shot.crop{aspect-ratio:16/9}
.shot.crop img{height:100%;object-fit:cover;object-position:top left}
.shot .cap{position:absolute;left:12px;bottom:10px;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(11,16,20,.72);padding:4px 8px;border-radius:5px}
/* ── live part viewer ──────────────────────────────────────────────────────
   Everything here stays hidden until site-viewer.js has actually rendered a
   frame and set .pv-live: no JS, no WebGL or a failed fetch must leave an empty
   box where the screenshot was. Same frame language as .shot so the two are
   interchangeable in a .visual column. */
.pv:not(.pv-live){display:none}
/* 16/10 to match the screenshots it stands in for, so swapping one for the
   other does not jump the page. */
.pv-stage{aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:#0B1014;border:1px solid var(--line);
  border-top:2px solid var(--accent);box-shadow:0 18px 50px rgba(0,0,0,.45);
  /* Rotate on a horizontal drag; let a vertical swipe scroll the page it sits in. */
  touch-action:pan-y}
.light .pv-stage{border-color:var(--line-l);border-top-color:var(--accent-l);box-shadow:0 16px 44px rgba(15,27,34,.14)}
/* Viewer beside its verdicts, the same arrangement as the quoter's own analysis
   panel, collapsing at the same width the quoter collapses at. */
.pv-live{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:760px){.pv-live{grid-template-columns:minmax(0,1fr) 320px}
  .pv-facts,.pv-hint{grid-column:1/-1}}
.pv-dfm{border:1px solid var(--line);border-radius:12px;background:var(--card);overflow:hidden;align-self:start;max-height:none}
.light .pv-dfm{border-color:var(--line-l);background:var(--paper2)}
.pv-dfm-h{padding:11px 15px 9px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid var(--line)}
.light .pv-dfm-h{color:var(--muted-l);border-bottom-color:var(--line-l)}
.pv-chk{display:flex;gap:10px;padding:11px 15px;border-bottom:1px solid var(--line)}
.light .pv-chk{border-bottom-color:var(--line-l)}
.pv-chk:last-child{border-bottom:none}
.pv-chk-s{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:1px}
.pv-chk-n{font-size:12.5px;font-weight:700;margin-bottom:3px;color:var(--ink)}
.light .pv-chk-n{color:var(--ink-l)}
.pv-chk-d{font-size:11.5px;color:var(--muted);line-height:1.5}
.light .pv-chk-d{color:var(--muted-l)}
.pv-chk-bar{width:3px;border-radius:2px;flex-shrink:0;background:var(--muted)}
.pv-pass .pv-chk-s{color:var(--ok)} .pv-pass .pv-chk-bar{background:var(--ok)}
.pv-warn .pv-chk-s{color:var(--warn)} .pv-warn .pv-chk-bar{background:var(--warn)}
.pv-fail .pv-chk-s{color:var(--bad)} .pv-fail .pv-chk-bar{background:var(--bad)}
.pv-info .pv-chk-s{color:var(--accent)} .pv-info .pv-chk-bar{background:var(--accent)}
.light .pv-pass .pv-chk-s{color:var(--ok-l)} .light .pv-pass .pv-chk-bar{background:var(--ok-l)}
.light .pv-warn .pv-chk-s{color:var(--warn-l)} .light .pv-warn .pv-chk-bar{background:var(--warn-l)}
.light .pv-fail .pv-chk-s{color:var(--bad-l)} .light .pv-fail .pv-chk-bar{background:var(--bad-l)}
.light .pv-info .pv-chk-s{color:var(--accent-l)} .light .pv-info .pv-chk-bar{background:var(--accent-l)}
.pv-facts{display:flex;flex-wrap:wrap;gap:7px 16px;margin-top:11px;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:11.5px;letter-spacing:.04em;color:var(--muted);font-variant-numeric:tabular-nums}
.light .pv-facts{color:var(--muted-l)}
.pv-facts .pv-file{color:var(--accent)}
.light .pv-facts .pv-file{color:var(--accent-l)}
.pv-hint{margin-top:7px;font-size:12.5px;color:var(--muted)}
.light .pv-hint{color:var(--muted-l)}
.pv-live.pv-touched .pv-hint{visibility:hidden}

/* ── charts ────────────────────────────────────────────────────────────────
   Hand-drawn SVG, no library: these are four numbers and a straight line, and
   a charting bundle would be more bytes than the page. Every figure carries a
   caption saying where its numbers came from — a chart without a provenance
   line is decoration. */
.chart{margin:26px 0 0;border:1px solid var(--line-l);border-radius:12px;background:var(--paper2);padding:20px 22px 16px}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart figcaption{margin-top:14px;font-size:12.5px;color:var(--muted-l);line-height:1.6}
.chart .c-title{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-l);margin:0 0 16px}
.c-axis{stroke:var(--line-l);stroke-width:1}
.c-grid{stroke:var(--line-l);stroke-width:1;stroke-dasharray:3 4}
.c-lbl{font-family:"IBM Plex Sans",sans-serif;font-size:12px;fill:var(--ink2-l)}
.c-num{font-family:"IBM Plex Mono",monospace;font-size:12.5px;fill:var(--ink-l);font-weight:500}
.c-bar-was{fill:#C9D3DA}
.c-bar-now{fill:var(--accent-l)}
.c-line{fill:none;stroke:var(--accent-l);stroke-width:2}
.c-dot{fill:var(--accent-l)}
.c-dot-open{fill:var(--paper2);stroke:var(--accent-l);stroke-width:2}
.c-band{fill:var(--accent-l);opacity:.13}
.c-tick{stroke:var(--accent-l);stroke-width:2}

/* phone frame for the box-scan page */
.phone{width:min(390px,86vw);margin:0 auto;border-radius:34px;border:1px solid var(--line-l);background:#fff;box-shadow:0 22px 50px rgba(15,27,34,.18);padding:10px}
.phone .screen{border-radius:26px;overflow:hidden;aspect-ratio:390/844;background:#F7F8FB}
.phone .screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.phone.tall .screen{aspect-ratio:auto}
.phone.tall .screen img{height:auto;object-fit:unset}
.shot a.zl,.screen a.zl{display:block;height:100%;cursor:zoom-in;position:relative}
/* the "enlarge" affordance on every screenshot */
.shot a.zl::after{content:"Enlarge";position:absolute;right:10px;bottom:10px;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(11,16,20,.72);padding:5px 9px;border-radius:5px;opacity:.85;pointer-events:none}
.shot a.zl:hover::after{opacity:1}

/* click-to-enlarge, no JavaScript: the overlay is a :target. The close link
   points at "#!" (no such id) so closing does not scroll the page to the top. */
.zoom{display:none}
.zoom:target{display:flex;position:fixed;inset:0;z-index:100;background:rgba(11,16,20,.94);align-items:center;justify-content:center;padding:28px 24px 56px}
.zoom .zoom-bg{position:absolute;inset:0;cursor:zoom-out}
.zoom figure{position:relative;margin:0;max-width:min(96vw,1700px);max-height:100%;display:flex;flex-direction:column;align-items:center}
.zoom figure img{display:block;max-width:100%;max-height:calc(100vh - 120px);width:auto;height:auto;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.6);background:#fff}
.zoom figure img.tall{max-height:none;overflow:auto}
.zoom figcaption{margin-top:12px;color:var(--ink2);font-size:14px;text-align:center;max-width:80ch}
.zoom .close{position:absolute;top:14px;right:18px;z-index:2;color:#fff;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;background:rgba(255,255,255,.12);padding:8px 12px;border-radius:6px}
.zoom .close:hover{background:rgba(255,255,255,.22)}
/* very tall captures (full portal, full quoter) scroll inside the overlay */
.zoom.scroll{overflow:auto;align-items:flex-start}
.zoom.scroll figure img{max-height:none}
@media (prefers-reduced-motion:no-preference){.zoom:target figure{animation:zoomin .18s ease-out}}
@keyframes zoomin{from{transform:scale(.97);opacity:0}to{transform:none;opacity:1}}

/* tour page */
.tour-item{padding:64px 0;border-bottom:1px solid var(--line-l)}
.tour-item .head{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;flex-wrap:wrap;margin-bottom:22px}
.tour-item h2{font-size:clamp(22px,3vw,30px)}
.tour-item .head p{color:var(--ink2-l);max-width:62ch;margin-top:6px}
.tour-item .head a.more{font-weight:600;white-space:nowrap}
.tour-nav{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.tour-nav a{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.06em;padding:7px 12px;border:1px solid var(--line);border-radius:999px;color:var(--ink2)}
.tour-nav a:hover{border-color:var(--accent);color:var(--ink)}
.tall-frame{max-height:900px;overflow:auto;border-radius:12px}
.tall-frame::-webkit-scrollbar{width:10px}
.tall-frame::-webkit-scrollbar-thumb{background:#C5CED5;border-radius:5px}

/* customer stories */
.story{background:var(--paper2);border:1px solid var(--line-l);border-radius:14px;padding:32px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:32px}
.story h3{font-size:22px;font-weight:700}
.story .who{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-l);margin-bottom:10px}
.story p{color:var(--ink2-l);margin-top:10px}
.story .facts{display:grid;gap:14px;align-content:start}
.story .fact{border-left:2px solid var(--accent-l);padding-left:14px}
.story .fact b{display:block;font-family:Archivo;font-size:26px;letter-spacing:-.02em;color:var(--ink-l)}
.story .fact span{font-size:13.5px;color:var(--muted-l)}
@media(max-width:860px){.story{grid-template-columns:1fr}}
.quote-card{background:var(--paper2);border:1px solid var(--line-l);border-radius:14px;padding:28px}
.quote-card blockquote{margin:0;font-family:Archivo;font-size:22px;font-weight:600;line-height:1.35;color:var(--ink-l);letter-spacing:-.01em}
.quote-card .attrib{margin-top:16px;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.06em;color:var(--muted-l)}
.quote-card .attrib b{color:var(--ink-l);font-weight:500}

/* proof strip */
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.strip div{background:var(--bg2);padding:20px 22px}
.strip .n{font-family:Archivo;font-size:22px;font-weight:700;color:var(--accent);letter-spacing:-.02em;line-height:1.2;text-wrap:balance}
.strip .l{font-size:13.5px;color:var(--ink2);line-height:1.5;margin-top:8px}
.strip-cap{font-size:13px;color:var(--muted);margin-top:14px}

/* cards */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:36px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:24px}
.card h3{font-size:17.5px;font-weight:650;margin-bottom:8px}
.card p{color:var(--ink2);font-size:15px}
.card .k{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:10px}
.light .card{background:var(--paper2);border-color:var(--line-l)}
.light .card p{color:var(--ink2-l)}
.light .card .k{color:var(--accent-l)}
.card.link{display:block;color:inherit;transition:border-color .15s}
.card.link:hover{border-color:var(--accent-l)}
.card.link .more{display:block;margin-top:12px;font-weight:600;color:var(--accent-l);font-size:14.5px}

/* how it works */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.steps .step .no{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.14em;color:var(--accent-l);margin-bottom:10px}
.steps .step h3{font-size:19px;font-weight:700;margin-bottom:8px}
.steps .step p{color:var(--ink2-l);font-size:15px;margin-bottom:16px}
@media(max-width:860px){.steps{grid-template-columns:1fr}}

/* deep-dives: copy first, then the screenshot at the full content width.
   A half-column screenshot of a dense admin screen is unreadable; full width
   is the point of showing the product at all. */
.split{display:grid;grid-template-columns:1fr;gap:30px;align-items:start}
.split .visual{order:2}
.split .copy h2{font-size:clamp(24px,3.4vw,32px)}
.split .copy .body{color:var(--ink2-l);font-size:16px;margin-top:12px;max-width:64ch}

/* checkmark list (drawn in CSS, no emoji) */
.checks{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:10px}
@media(min-width:760px){.split .checks{grid-template-columns:1fr 1fr;column-gap:32px;max-width:1000px}}
.checks li{position:relative;padding-left:30px;font-size:15.5px;color:var(--ink-l)}
.checks li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;background:rgba(14,110,120,.12)}
.checks li::after{content:"";position:absolute;left:6px;top:6px;width:5px;height:9px;border:solid var(--accent-l);border-width:0 2px 2px 0;transform:rotate(45deg)}
.dark .checks li{color:var(--ink)}
.dark .checks li::before{background:rgba(63,191,207,.15)}
.dark .checks li::after{border-color:var(--accent)}

/* comparison table (Why page) */
.compare{width:100%;border-collapse:collapse;margin-top:34px;font-size:15px}
.compare th,.compare td{padding:14px 14px;border-bottom:1px solid var(--line-l);text-align:left;vertical-align:top}
.compare th{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-l);font-weight:500}
.compare td:first-child{font-weight:600;color:var(--ink-l);width:24%}
.compare td{color:var(--ink2-l)}
.compare td.yes{color:var(--ink-l)}
.compare td.yes::before{content:"";display:inline-block;width:5px;height:9px;border:solid var(--accent-l);border-width:0 2px 2px 0;transform:rotate(45deg);margin:0 12px 1px 3px}
.compare td.no{color:var(--muted-l)}
.table-wrap{overflow-x:auto}

/* pricing */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:34px}
.tier{background:var(--paper2);border:1px solid var(--line-l);border-radius:12px;padding:28px;display:flex;flex-direction:column;color:var(--ink-l)}
.tier.feature{border-color:var(--accent-l);position:relative}
.tier.feature::before{content:"Most shops";position:absolute;top:-11px;left:26px;background:var(--accent-l);color:#fff;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:5px;font-weight:600}
.tier h3{font-size:18px;font-weight:700}
.tier .price{font-family:Archivo;font-size:40px;font-weight:800;margin:12px 0 0;letter-spacing:-.03em}
.tier .price small{font-size:14px;font-weight:500;color:var(--muted-l);letter-spacing:0}
.tier .yr{font-size:13px;color:var(--muted-l);margin:2px 0 14px}
.tier .blurb{font-size:14.5px;color:var(--ink2-l);margin:0 0 16px;min-height:44px}
.tier ul{list-style:none;padding:0;margin:0 0 22px;font-size:14.5px;color:var(--ink2-l);flex:1}
.tier li{padding:5px 0 5px 22px;position:relative}
.tier li::before{content:"";position:absolute;left:0;top:12px;width:9px;height:2px;background:var(--accent-l)}
/* monthly / yearly toggle: pure CSS so the page says something with JS off */
.billing{display:inline-flex;border:1px solid var(--line-l);border-radius:999px;padding:4px;background:var(--paper2);margin-top:22px;gap:4px}
.billing input,input[name=bill]{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.billing label{padding:7px 16px;border-radius:999px;font-size:14px;font-weight:600;cursor:pointer;color:var(--ink2-l)}
#bill-yr:checked ~ .billing label[for=bill-yr],#bill-mo:checked ~ .billing label[for=bill-mo]{background:var(--accent-l);color:#fff}
#bill-yr:checked ~ .tiers .mo,#bill-mo:checked ~ .tiers .yrly{display:none}
.billing .save{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.06em;color:var(--accent-l);align-self:center;padding:0 10px 0 4px}
/* currency menu beside the toggle (site.js shows it; hidden with JS off) */
.ccy{display:inline-flex;align-items:center;gap:8px;margin:22px 0 0 14px;vertical-align:top;font-size:14px;flex-wrap:wrap}
.ccy[hidden]{display:none}
.ccy label{font-weight:600;color:var(--ink2-l)}
.ccy select{font:600 14px "IBM Plex Sans",sans-serif;padding:7px 12px;border:1px solid var(--line-l);border-radius:999px;background:var(--paper2);color:var(--ink-l);cursor:pointer}
.ccy-hint{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-l)}
.paper2 .ccy{margin:14px 0 0}
@media (max-width:640px){.ccy{margin:14px 0 0;display:flex}}

/* faq */
details{border-bottom:1px solid var(--line);padding:16px 0}
.light details{border-color:var(--line-l)}
summary{cursor:pointer;font-weight:600;font-size:16px;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";float:right;color:var(--accent);font-family:"IBM Plex Mono",monospace}
.light summary::after{color:var(--accent-l)}
details[open] summary::after{content:"−"}
details p{color:var(--ink2);margin:10px 0 0;font-size:15px;max-width:70ch}
.light details p{color:var(--ink2-l)}

/* page hero for inner pages */
.page-hero{padding:64px 0 54px;border-bottom:1px solid var(--line)}
.page-hero h1{font-size:clamp(30px,4.6vw,46px);font-weight:800;line-height:1.08;max-width:22ch}
.page-hero .lede{font-size:18px;color:var(--ink2);max-width:60ch;margin-top:16px}
.crumbs{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.06em;color:var(--muted);margin-bottom:18px}
.crumbs a{color:var(--muted)}

/* ROI calculator */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;margin-top:36px}
.calc .inputs{display:grid;gap:18px}
.calc label{display:block;font-size:14px;font-weight:600;color:var(--ink-l)}
.calc label span{display:block;font-weight:400;color:var(--muted-l);font-size:13px;margin-top:2px}
.calc input[type=range]{width:100%;margin-top:10px;accent-color:var(--accent-l)}
.calc .val{font-family:"IBM Plex Mono",monospace;font-size:14px;color:var(--accent-l);float:right}
.result{background:var(--paper2);border:1px solid var(--line-l);border-radius:12px;padding:28px}
.result .big{font-family:Archivo;font-size:clamp(34px,5vw,52px);font-weight:800;letter-spacing:-.03em;color:var(--ink-l);line-height:1}
.result .row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-l);font-size:15px;color:var(--ink2-l)}
.result .row b{color:var(--ink-l);font-family:"IBM Plex Mono",monospace;font-weight:500}
.result .row:last-of-type{border-bottom:none}
.assume{font-size:13px;color:var(--muted-l);margin-top:14px;line-height:1.55}
@media(max-width:860px){.calc{grid-template-columns:1fr}}

/* footer */
footer.site{padding:44px 0 60px;color:var(--muted);font-size:14px}
footer.site a{color:var(--ink2)}
.foot{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:flex-start}
.foot .cols{display:flex;gap:40px;flex-wrap:wrap}
.foot .col{display:grid;gap:8px;min-width:120px}
.foot .col b{color:var(--ink);font-weight:600;font-size:13px;letter-spacing:.04em}
.foot .legal{margin-top:26px;font-size:13px;color:var(--muted)}

/* legal / prose pages */
.prose{max-width:72ch;color:var(--ink2);font-size:16px}
.prose h2{font-size:22px;margin:38px 0 10px;color:var(--ink)}
.prose h3{font-size:17px;margin:24px 0 8px;color:var(--ink)}
.prose p{margin:0 0 14px}
.prose ul{padding-left:22px;margin:0 0 14px}
.prose li{margin:5px 0}
.prose table{width:100%;border-collapse:collapse;margin:6px 0 18px;font-size:15px}
.prose th,.prose td{padding:10px 12px 10px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.prose th{font:500 11.5px "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.prose td:first-child{font-weight:600;color:var(--ink)}
.notice{border:1px solid var(--warm);border-radius:10px;padding:14px 18px;color:var(--ink2);font-size:14.5px;background:rgba(232,177,92,.06)}

/* beta application (beta.html). No JavaScript: the browser checks the required
   answers and the server checks all of them, answering with this same page, every
   answer kept, when something needs fixing (src/lib/betaApplyPage.js). */
.apply-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:30px;align-items:start}
@media(min-width:920px){.apply-grid{grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:44px}
  .apply-aside{position:sticky;top:90px}}
.apply-aside h3{font-size:16px;font-weight:700;color:var(--ink-l);margin:0}
.apply-aside .checks{margin:10px 0 26px;gap:8px}
.apply-aside .checks li{font-size:14.5px;color:var(--ink2-l)}
.apply-steps{margin:10px 0 0;padding-left:20px;display:grid;gap:8px;font-size:14.5px;color:var(--ink2-l)}
.apply{background:var(--paper2);border:1px solid var(--line-l);border-radius:14px;padding:30px 30px 26px;color:var(--ink-l);min-width:0}
.apply h2{font-size:clamp(24px,3vw,30px);margin-bottom:4px}
.apply-intro{margin:0 0 22px}
.apply fieldset{border:0;margin:0;padding:0;min-width:0}
.apply .part{margin:0 0 8px;padding:20px 0 4px;border-top:1px solid var(--line-l)}
.apply .part-h{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-l);padding:0;margin:0 0 14px;float:left;width:100%}
.apply .part-h + *{clear:both}
.apply .q{margin:0 0 18px}
.apply .q > label,.apply .q > legend{display:block;font-weight:600;font-size:15px;line-height:1.45;color:var(--ink-l);margin:0 0 7px;padding:0}
.apply .hint{font-weight:400;font-size:13px;color:var(--muted-l)}
.apply input[type=text],.apply input[type=email],.apply input[type=tel],.apply textarea{display:block;width:100%;font:inherit;font-size:15.5px;
  color:var(--ink-l);background:#fff;border:1px solid #B9C4CC;border-radius:8px;padding:10px 12px;min-height:46px}
.apply textarea{min-height:112px;resize:vertical;line-height:1.5}
.apply input:focus,.apply textarea:focus{outline:2px solid var(--accent-l);outline-offset:1px;border-color:var(--accent-l)}
.apply [aria-invalid=true]{border-color:var(--bad-l)}
.apply .row2{display:grid;grid-template-columns:minmax(0,1fr);column-gap:18px}
@media(min-width:640px){.apply .row2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.apply .q-short{max-width:260px}
/* Each answer is a pill; the real radio or checkbox stays in the page (focus,
   screen readers, the browser's own "please pick one") and only its look moves
   to the pill. */
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{position:relative;display:inline-flex}
.opt input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.opt span{display:inline-flex;align-items:center;min-height:42px;padding:8px 15px;border:1px solid #B9C4CC;border-radius:999px;
  background:#fff;color:var(--ink2-l);font-size:14.5px;line-height:1.3;cursor:pointer;transition:border-color .12s,background .12s}
.opt:hover span{border-color:var(--accent-l)}
.opt input:checked + span{background:var(--accent-l);border-color:var(--accent-l);color:#fff}
.opt input:focus-visible + span{outline:2px solid var(--accent-l);outline-offset:2px}
.apply-send{margin-top:10px;min-height:48px;padding:12px 24px;font-size:16px}
.apply-fine{margin-top:14px}
/* The hidden question only a bot answers. Off-screen, not display:none, which
   some bots skip. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.form-error{border:1px solid var(--bad-l);background:#FDF1EF;color:#6E2020;border-radius:10px;padding:12px 16px;font-size:15px;line-height:1.5;margin:0 0 20px}
.form-error a{color:inherit;text-decoration:underline}
.page-hero .form-error{margin:24px 0 0;max-width:62ch;background:rgba(228,117,106,.12);color:var(--ink);border-color:var(--bad)}
@media(max-width:560px){.apply{padding:22px 16px 20px;border-radius:12px}}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.light :focus-visible{outline-color:var(--accent-l)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Price checker (/tools/what-should-i-charge, price-check.js) */
.pc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:36px;margin-top:12px;--lo:30%;--hi:70%}
@media(max-width:860px){.pc{grid-template-columns:1fr;gap:24px}}
.pc-in{display:grid;gap:18px;align-content:start}
.pc label{display:block;font-size:14px;font-weight:600;color:var(--ink-l)}
.pc .hint{display:block;font-weight:400;font-size:13px;color:var(--muted-l)}
.pc input[type=number],.pc input[type=email],.pc select{display:block;width:100%;margin-top:6px;font:inherit;font-size:15.5px;color:var(--ink-l);
  background:#fff;border:1px solid #B9C4CC;border-radius:8px;padding:10px 12px;min-height:46px}
.pc input:focus,.pc select:focus{outline:2px solid var(--accent-l);outline-offset:1px;border-color:var(--accent-l)}
.pc-tech{border:0;margin:0;padding:0;min-width:0}
.pc-tech legend{font-size:14px;font-weight:600;color:var(--ink-l);padding:0;margin:0 0 8px}
.pc-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:end}
.pc-drop{position:relative;display:flex!important;flex-direction:column;gap:4px;border:2px dashed #B9C4CC;border-radius:14px;padding:26px 20px;
  background:#fff;cursor:pointer;text-align:center;transition:border-color .12s,background .12s}
.pc-drop:hover,.pc-drop.over{border-color:var(--accent-l);background:#F0F8F9}
.pc-drop input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.pc-drop-t{font-size:16px;font-weight:400;color:var(--ink-l);word-break:break-word}
.pc-drop-s{font-size:13px;font-weight:400;color:var(--muted-l);font-family:"IBM Plex Mono",monospace}
.pc-units{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;border:1px solid var(--warn-l);background:#FFF7E8;
  border-radius:10px;padding:10px 14px;font-size:14px;color:#5A3A08}
.pc-units p{margin:0}
.pc-units-b{display:flex;gap:8px;flex-wrap:wrap}
.pc-units[hidden],.pc [hidden]{display:none!important}
.pc-out{background:var(--paper2);border:1px solid var(--line-l);border-radius:12px;padding:26px;min-width:0}
.pc-empty p{color:var(--muted-l);margin:10px 0 0}
.pc-pill{display:inline-block;margin:0;font:700 clamp(20px,3vw,26px) Archivo,sans-serif;letter-spacing:-.01em;border-radius:999px;padding:6px 18px;
  background:#E3F4EC;color:var(--ok-l)}
.pc-pill-idle{background:#EEF1F4;color:var(--muted-l)}
.pc-meta{font-size:13.5px;color:var(--muted-l);margin:10px 0 18px;font-family:"IBM Plex Mono",monospace}
.pc-mine{max-width:240px}
.pc-band{position:relative;height:64px;margin:18px 6px 10px}
.pc-track{position:absolute;left:0;right:0;top:26px;height:12px;border-radius:6px;
  background:linear-gradient(90deg,#F6D9B0 0,#F6D9B0 var(--lo),#CDEBDD var(--lo),#CDEBDD var(--hi),#D3E3F5 var(--hi),#D3E3F5 100%)}
.pc-mark{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap;font:500 12px "IBM Plex Mono",monospace;color:var(--muted-l)}
.pc-mark::after{content:"";display:block;width:2px;height:22px;margin:2px auto 0;background:#9AA9B4}
.pc-fair{top:12px}
.pc-fair::after{height:26px;width:3px;background:var(--ok-l)}
.pc-you{top:auto;bottom:-6px;color:var(--ink-l);font-weight:700}
.pc-you::after{display:none}
.pc-you::before{content:"";display:block;width:2px;height:30px;margin:0 auto 2px;background:var(--ink-l)}
.pc-zones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;font-size:13.5px;color:var(--ink2-l);margin-top:18px}
@media(max-width:560px){.pc-zones{grid-template-columns:1fr}.pc-row{grid-template-columns:1fr}.pc-out{padding:20px 16px}}
.pc-zones div{border-radius:10px;padding:10px 12px;border:2px solid transparent;line-height:1.45}
.pc-zones b{display:block;font-family:Archivo,sans-serif;color:var(--ink-l)}
.pc-zones .z1{background:#FBEBD3}.pc-zones .z2{background:#E3F4EC}.pc-zones .z3{background:#E4EEF9}
.pc-zones .z1.on{border-color:var(--warn-l)}.pc-zones .z2.on{border-color:var(--ok-l)}.pc-zones .z3.on{border-color:#2F6DB5}
.pc-verdict{font-size:16.5px;font-weight:600;color:var(--ink-l);margin:18px 0 0;line-height:1.5}
.pc-verdict.bad{color:var(--bad-l)}
.pc-why{margin-top:16px;border-top:1px solid var(--line-l);padding-top:12px}
.pc-why summary{cursor:pointer;font-weight:600;color:var(--accent-l);font-size:14.5px}
.pc-line{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--line-l);font-size:14px;color:var(--ink2-l)}
.pc-line b{font:500 14px "IBM Plex Mono",monospace;color:var(--ink-l)}
.pc-line.total{font-weight:700;color:var(--ink-l)}
.pc-gate{margin-top:20px;background:var(--paper);border-radius:10px;padding:16px}
.pc-gate > b{display:block;color:var(--ink-l);margin-bottom:10px}
.pc-gate-row{display:flex;gap:10px;flex-wrap:wrap}
.pc-gate-row input[type=email]{flex:1 1 200px;margin-top:0}
.pc-gate .small{margin:8px 0 0;min-height:1em}
.pc-err{margin:16px 0 0;border:1px solid var(--bad-l);background:#FDF1EF;color:#6E2020;border-radius:10px;padding:10px 14px;font-size:14.5px}

/* /try: the live quote page in a browser frame */
.try-frame{border:1px solid var(--line-l);border-radius:14px;overflow:hidden;background:#f5f6f8;box-shadow:0 18px 50px rgba(15,27,34,.16)}
.try-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#EEF2F4;border-bottom:1px solid var(--line-l);font:500 12px 'IBM Plex Mono',monospace;color:#5B6B74}
.try-bar i{width:10px;height:10px;border-radius:50%;background:#C9D2D7;display:inline-block}
.try-bar span{margin-left:10px;background:#fff;border:1px solid var(--line-l);border-radius:6px;padding:3px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.try-frame iframe{display:block;width:100%;border:0;height:760px;background:#f5f6f8}
.try-note{margin-top:16px;font-size:15px;color:var(--muted-l);max-width:70ch}
/* Homepage #quoting: the copy above the live quote page */
.try-copy{max-width:none;margin-bottom:28px}
.try-copy .body{max-width:75ch}
.try-checks{display:grid;grid-template-columns:1fr 1fr;gap:6px 28px}
@media (max-width:820px){.try-checks{display:none}}  /* on a phone, get to the quote page sooner */
/* shops on Layers3D: count-up stats + a logo strip that drifts left to right */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
section.usage{padding:40px 0 8px;border-bottom:none}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px;text-align:center}
.stats[hidden],.stats [hidden]{display:none}
.stat-n{font-family:Archivo,sans-serif;font-size:clamp(32px,4.4vw,48px);font-weight:800;color:var(--accent);letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums}
.stat-l{font-size:14px;color:var(--ink2);margin-top:6px}
@media (max-width:720px){.stats{row-gap:26px}}
.logos{margin-top:36px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.logos-track{display:flex;width:max-content;animation:logos-drift 32s linear infinite}
.logos:hover .logos-track{animation-play-state:paused}
.logos-set{display:flex;align-items:center;gap:22px;list-style:none;margin:0;padding:0 11px}
.logos-set li{display:flex;align-items:center;justify-content:center;height:84px;min-width:200px;padding:0 26px;background:#fff;border-radius:12px}
.logos-set .lg-sq{height:60px;width:auto}
.logos-set .lg-wide{height:40px;width:auto}
.logo-word{font-family:Archivo,sans-serif;font-weight:800;font-size:26px;letter-spacing:-.02em;color:#0F1B22}
/* Left to right: the track starts shifted one set left and slides back to 0. */
@keyframes logos-drift{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){
  .logos{-webkit-mask-image:none;mask-image:none}
  .logos-track{animation:none;width:auto}
  .logos-set{flex-wrap:wrap;justify-content:center;row-gap:14px}
  .logos-set[aria-hidden]{display:none}
}
/* yearly: what the discount is worth on each plan (site.js fills it) */
.tier .saving{display:inline-block;white-space:nowrap;align-self:flex-start;margin:-6px 0 14px;padding:4px 10px;border-radius:999px;background:rgba(14,110,120,.1);color:var(--accent-l);font-size:12.5px;font-weight:600}
.tier .saving:empty{display:none}
/* compare rows that have their own feature page */
.compare td:first-child a{color:var(--ink-l);text-decoration:underline;text-decoration-color:var(--line-l);text-underline-offset:3px}
.compare td:first-child a:hover{color:var(--accent-l);text-decoration-color:var(--accent-l)}
.logos-set .lg-shop{max-height:56px;max-width:180px;width:auto;height:auto}

/* Homepage demo video (hero). A poster that links to YouTube; site.js swaps in
   the player when it is pressed. */
.vid{position:relative;display:block;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:0 20px 50px rgba(0,0,0,.45);background:#000}
.vid img,.vid iframe{display:block;width:100%;height:100%;border:0;object-fit:cover}
.vid-play{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:rgba(11,16,20,.78);border:2px solid var(--accent);box-shadow:0 0 0 8px rgba(63,191,207,.18);transition:background .15s}
.vid-play::after{content:"";position:absolute;left:33px;top:25px;border-style:solid;border-width:17px 0 17px 27px;border-color:transparent transparent transparent var(--accent)}
.vid:hover .vid-play,.vid:focus-visible .vid-play{background:var(--accent)}
.vid:hover .vid-play::after,.vid:focus-visible .vid-play::after{border-left-color:var(--accent-ink)}
.vid-cap{margin-top:12px;font-size:14px;color:var(--muted)}
@media(max-width:560px){.vid-play{width:64px;height:64px;margin:-32px 0 0 -32px}.vid-play::after{left:25px;top:19px;border-width:13px 0 13px 20px}}

/* Integrations (homepage #integrations and /features/integrations). Vendor
   marks sit on a white tile, as vendors ask their marks be shown. */
.ix-logo{width:40px;height:40px;border-radius:10px;background:#fff;border:1px solid var(--line-l);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.ix-logo img{width:24px;height:24px;object-fit:contain}
.ix-logo.ix-mono{font-family:Archivo,sans-serif;font-weight:800;font-size:13px;color:var(--accent-l);background:#EAF4F5}
.ix-logo.ix-sm{width:34px;height:34px;border-radius:9px}
.ix-logo.ix-sm img{width:20px;height:20px}
.ix-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.ix-tabs[hidden]{display:none}
.ix-tab{font:inherit;font-size:14px;font-weight:600;padding:8px 14px;border-radius:999px;border:1px solid var(--line-l);background:var(--paper);color:var(--ink2-l);cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.ix-tab:hover{border-color:var(--accent-l)}
.ix-tab[aria-selected="true"]{background:var(--accent-l);border-color:var(--accent-l);color:#fff}
.ix-tab:focus-visible{outline:2px solid var(--accent-l);outline-offset:2px}
.ix-n{font-family:"IBM Plex Mono",monospace;font-size:11px;opacity:.7}
.ix-panel{margin-top:28px}
.ix-panel[hidden]{display:none}
.ix-tabbed .ix-panel{margin-top:20px}
.ix-ph{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-l);font-weight:500;margin-bottom:12px}
.ix-tabbed .ix-ph{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ix-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.ix-card{background:var(--paper);border:1px solid var(--line-l);border-top:3px solid var(--accent-l);border-radius:12px;padding:20px}
.ix-top{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.ix-top h4{font-family:inherit;font-size:16px;font-weight:600;letter-spacing:0;color:var(--ink-l)}
.ix-card p{font-size:14.5px;color:var(--ink-l);margin-bottom:10px}
.ix-card ul{margin:0;padding:0;list-style:none}
.ix-card li{font-size:13.5px;color:var(--ink2-l);padding-left:20px;position:relative;margin-top:4px}
.ix-card li::before{content:"✓";position:absolute;left:0;color:var(--accent-l);font-weight:700}
.ix-strip{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px;padding-top:24px;border-top:1px solid var(--line-l)}

/* Features page: "New this fall" + "Coming soon" cards */
.new-feats .grid{margin-top:28px}
@media(min-width:760px){.new-feats .soon-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.new-feats .card.wide{grid-column:1/-1}
.mf{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:18px;align-items:stretch;margin:22px 0 8px}
.mf-pane{margin:0;display:flex;flex-direction:column}
.mf-pane figcaption{font-size:13.5px;font-weight:600;color:var(--ink-l);margin:0 0 10px}
.mf-pane figcaption b{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--accent-l);color:#fff;font-size:12px;margin-right:6px}
.mf-win,.mf-card{flex:1;border:1px solid var(--line-l);border-radius:10px;background:var(--paper);overflow:hidden;box-shadow:0 6px 22px rgba(15,27,34,.07)}
.mf-bar{display:flex;align-items:center;gap:8px;padding:9px 14px;background:#0F6CBD;color:#fff;font-size:13px;font-weight:600}
.mf-bar img{background:#fff;border-radius:3px;padding:1px}
.mf-win{display:flex;flex-direction:column;background:#fff}
.mf-split{flex:1;display:grid;grid-template-columns:150px minmax(0,1fr)}
.mf-list{list-style:none;margin:0;padding:0;border-right:1px solid var(--line-l);background:#FAFBFC}
.mf-list li{padding:10px 12px;border-bottom:1px solid var(--line-l);font-size:12px;color:var(--muted-l);line-height:1.35}
.mf-list li b{display:block;font-size:12.5px;color:var(--ink-l);font-weight:600}
.mf-list li span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mf-list li.on{background:#E6F0FA;box-shadow:inset 3px 0 #0F6CBD}
.mf-mail{padding:16px 18px;background:#fff}
.mf-from{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.mf-from b{display:block;font-size:14.5px;color:var(--ink-l)}
.mf-from small{color:var(--muted-l);font-size:12.5px}
.mf-av{width:34px;height:34px;border-radius:50%;background:#C7E0F4;color:#0F4C81;display:grid;place-items:center;font-size:12.5px;font-weight:700;flex:none}
.mf-subj{font-weight:700;font-size:15px;color:var(--ink-l);margin-bottom:8px}
.light .card .mf-mail p{font-size:14px;color:var(--ink2-l);margin:0 0 14px}
.mf-file{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-l);border-radius:6px;padding:7px 11px;font-size:13px;font-weight:600;color:var(--ink-l);background:#fff}
.mf-file::before{content:"";width:10px;height:13px;border-radius:2px;background:#4C8DF6}
.mf-arrow{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--accent-l);font-size:12px;font-weight:600;text-align:center;width:96px}
.mf-arrow::after{content:"";width:46px;height:2px;background:var(--accent-l);box-shadow:none;position:relative;order:-1;margin-bottom:2px;-webkit-mask:none}
.mf-arrow::before{content:"\2192";font-size:26px;line-height:1;order:-2}
.mf-card{display:flex;flex-direction:column;background:#fff;border-left:4px solid #E3A008}
.mf-pic{background:#F4F5F7;display:grid;place-items:center;padding:8px}
.mf-pic img{width:120px;height:120px;object-fit:contain}
.mf-body{padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.mf-ref{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--muted-l)}
.mf-body > b{font-size:15px;color:var(--ink-l)}
.mf-chip{align-self:flex-start;padding:3px 10px;border-radius:999px;background:rgba(14,110,120,.1);color:var(--accent-l);font-size:12.5px;font-weight:700}
.mf-body dl{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;margin:8px 0 0;padding-top:10px;border-top:1px solid var(--line-l)}
.mf-body dt{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-l)}
.mf-body dd{margin:0;font-size:14px;font-weight:600;color:var(--ink-l)}
.mf-points{list-style:none;padding:0;margin:18px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.mf-points li{border-top:2px solid var(--accent-l);padding-top:10px;font-size:14px;color:var(--ink2-l)}
.mf-points b{display:block;color:var(--ink-l)}
.light .card p.mf-note{font-size:13.5px;margin-top:16px}
@media(max-width:760px){.mf{grid-template-columns:1fr}.mf-split{grid-template-columns:1fr}.mf-list{display:none}.mf-arrow{width:auto;flex-direction:row}.mf-arrow::before{content:"\2193"}.mf-arrow::after{display:none}}
.new-feats .soon-h{font-size:19px;font-weight:700;margin:44px 0 0;color:var(--ink-l)}
.soon{display:inline-block;margin:0 0 12px;padding:3px 10px;border-radius:999px;background:rgba(14,110,120,.1);color:var(--accent-l);font-size:12px;font-weight:600;white-space:nowrap}
.tier li .soon,.compare .soon{margin:0 0 0 6px;padding:1px 8px;font-size:11.5px;vertical-align:1px}
.compare tr.group td{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-l);font-weight:500;padding-top:26px}

/* Features page: Automations card (playbook canvas + quick rules) */
.autoflow > .soon{float:right;margin:0 0 8px 12px}
.af{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:22px;margin:22px 0 8px}
.af-pane{margin:0;display:flex;flex-direction:column}
.af-pane figcaption{font-size:13.5px;font-weight:600;color:var(--ink-l);margin:0 0 10px}
.af-pane figcaption b{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--accent-l);color:#fff;font-size:12px;margin-right:6px}
.af-canvas{flex:1;border:1px solid var(--line-l);border-radius:10px;padding:20px 16px;display:flex;flex-direction:column;align-items:center;box-shadow:0 6px 22px rgba(15,27,34,.07);background-color:#fff;background-image:radial-gradient(#D5DBE0 1px,transparent 1px);background-size:16px 16px}
.af-node{background:#fff;border:1px solid var(--line-l);border-left:4px solid var(--accent-l);border-radius:8px;padding:8px 12px;font-size:13.5px;font-weight:600;color:var(--ink-l);min-width:190px;max-width:240px;box-shadow:0 2px 8px rgba(15,27,34,.06);line-height:1.3}
.af-node small{display:block;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-l);font-weight:500;margin-bottom:2px}
.af-node.trig{border-left-color:#E3A008}
.af-node.wait{border-left-color:#8A94A0}
.af-node.mail{border-left-color:#0F6CBD}
.af-node.stop{border-left-color:#2F9E5B}
.af-line{width:2px;height:18px;background:#B8C2CB}
.af-fork{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%;margin-top:18px;padding-top:18px;border-top:2px solid #B8C2CB;position:relative}
.af-fork::before{content:"";position:absolute;left:50%;top:-20px;width:2px;height:18px;background:#B8C2CB}
.af-branch{display:flex;flex-direction:column;align-items:center}
.af-branch .af-node{min-width:0;width:100%}
.af-tag{font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:999px;margin-bottom:8px}
.af-tag.yes{background:rgba(47,158,91,.12);color:#23784A}
.af-tag.no{background:rgba(227,160,8,.15);color:#93670A}
.af-rules{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.af-rules li{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line-l);border-radius:10px;background:#fff;padding:11px 13px;font-size:13.5px;color:var(--ink2-l);line-height:1.4;box-shadow:0 2px 8px rgba(15,27,34,.05)}
.af-rules small{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-l);margin-right:6px}
.af-rules small + b,.af-rules div > small:nth-of-type(2){margin-left:6px}
.af-rules b{color:var(--accent-l)}
.af-on{flex:none;width:28px;height:16px;border-radius:999px;background:var(--accent-l);position:relative;margin-top:2px}
.af-on::after{content:"";position:absolute;right:2px;top:2px;width:12px;height:12px;border-radius:50%;background:#fff}
.af-queue{margin-top:14px;border:1px solid var(--line-l);border-radius:10px;background:#fff;overflow:hidden;box-shadow:0 6px 22px rgba(15,27,34,.07)}
.af-queue > small{display:block;padding:8px 13px;background:#F4F5F7;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-l)}
.af-draft{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:11px 13px;align-items:center}
.af-draft b{font-size:13.5px;color:var(--ink-l)}
.af-draft span{grid-column:1;font-size:13px;color:var(--muted-l)}
.af-draft em{grid-column:2;grid-row:1/3;font-style:normal;font-size:13px;font-weight:700;color:#fff;background:var(--accent-l);border-radius:6px;padding:6px 14px}
@media(max-width:760px){.af{grid-template-columns:1fr}.autoflow > .soon{float:none}.af-node{min-width:0}}

/* Homepage (body.home), 2026-10 redesign: light header and hero, the dark
   stats + logo band kept as it was, then the product pictures and tiles. */
body.home header.site{background:#fff;border-bottom-color:var(--line-l)}
body.home header.site .brand{color:var(--ink-l)}
body.home header.site .brand span{color:var(--accent-l)}
body.home .navlinks a{color:var(--ink2-l)}
body.home .navlinks a:hover{color:var(--ink-l)}
body.home .navlinks .btn-primary{color:var(--accent-ink)}
body.home .layers{display:none}
.hero-l{background:#fff;color:var(--ink-l);border-bottom:none;padding:64px 0 56px}
.hero-l::before,.hero-l::after{display:none}
.hero-l .wrap{grid-template-columns:1fr 1.1fr;gap:48px;align-items:center}
.hero-l h1{font-size:clamp(36px,4.5vw,58px);line-height:1.03;max-width:none;color:var(--ink-l)}
.hero-l h1 span{color:var(--accent-l)}
.hero-l .eyebrow{color:var(--accent-l)}
.hero-l .lede{color:var(--ink2-l);max-width:34em}
.hero-l .btn-primary{background:var(--accent);color:var(--accent-ink)}
.hero-l .btn-ghost{border-color:var(--line-l);color:var(--ink-l)}
.hero-pic{position:relative;padding-bottom:28px;min-width:0}
.hero-l .shot,.home-show .shot{border:1px solid var(--line-l);border-top:1px solid var(--line-l);border-radius:16px;background:#fff;box-shadow:0 30px 80px -24px rgba(4,23,26,.32)}
/* Hero email: drawn, not a screenshot, so it reads as the shop's own inbox
   (any mail app) instead of a product popup. Example names and numbers. */
.mail{background:#fff;border:1px solid #DADCE0;border-radius:14px;box-shadow:0 30px 80px -24px rgba(4,23,26,.30);font-family:Roboto,"Segoe UI",Arial,sans-serif;color:#202124;overflow:hidden;margin-right:56px}
.mail-bar{display:flex;align-items:center;gap:18px;padding:12px 22px;border-bottom:1px solid #EEF0F2;color:#5F6368;font-size:12.5px}
.mail-bar i{width:16px;height:16px;border:2px solid #9AA0A6;border-radius:3px;opacity:.75}
.mail-bar i:nth-child(2){border-radius:50%}
.mail-bar i:nth-child(3){border-width:2px 0;border-radius:0;height:12px}
.mail-sp{flex:1}
.mail-bar em{font-style:normal}
.mail-subj{display:flex;align-items:center;gap:10px;padding:20px 24px 6px 76px}
.mail-s{font-size:20px;line-height:1.3;font-weight:400;color:#1F1F1F}
.mail-tag{font-size:12px;background:#E8EAED;color:#444746;border-radius:4px;padding:2px 6px}
.mail-from{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:start;padding:12px 24px 0 24px;font-size:14px}
.mail-av{width:40px;height:40px;border-radius:50%;background:#1E7B6F;color:#fff;display:grid;place-items:center;font-weight:500;font-size:15px}
.mail-from b{font-weight:700}
.mail-from small{color:#5F6368;font-size:12.5px}
.mail-to{color:#5F6368;font-size:12.5px;margin-top:2px}
.mail-from time{color:#5F6368;font-size:12.5px;white-space:nowrap;padding-top:2px}
.mail-body{padding:16px 24px 4px 76px;font-size:14.5px;line-height:1.55}
.mail-body p+p{margin-top:12px}
.mail-att{margin:14px 24px 0 76px;padding:14px 0 22px;border-top:1px solid #EEF0F2}
.mail-att-h{font-size:13px;font-weight:500;color:#444746;margin-bottom:10px}
.mail-files{display:flex;gap:10px}
.mail-file{width:150px;flex:none;border:1px solid #DADCE0;border-radius:8px;overflow:hidden;background:#fff}
.mf-pic{height:96px;background:#F3F5F7;display:grid;place-items:center}
.mf-pic img{width:auto;height:96px}
.mf-photo{background:linear-gradient(160deg,#d9d4cc,#b7b0a5 55%,#8f887d)}
.mf-photo::after{content:"";width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#55575b,#1f2024 70%);box-shadow:0 6px 14px rgba(0,0,0,.35)}
.mf-n{display:flex;align-items:center;gap:7px;padding:8px 10px;font-size:12.5px;color:#3C4043;border-top:1px solid #EEF0F2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mf-ic{font-size:9px;font-weight:700;color:#fff;border-radius:3px;padding:2px 4px;letter-spacing:.02em}
.mf-ic.stl{background:#5F6368}.mf-ic.jpg{background:#D93025}
.quote-card{position:absolute;right:-8px;bottom:-34px;width:260px;background:#fff;border:1px solid var(--line-l);border-radius:14px;padding:16px 16px 14px;box-shadow:0 24px 50px -12px rgba(4,23,26,.35);color:var(--ink-l);font-size:14px}
.qc-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.qc-logo{width:26px;height:26px;border-radius:7px;background:#0F1B22;color:#fff;display:grid;place-items:center;font:800 11px Archivo,sans-serif}
.qc-top b{flex:1;font:700 16px Archivo,sans-serif}
.qc-ok{background:rgba(79,191,139,.16);color:#1d7a52;border-radius:99px;padding:2px 9px;font-weight:600;font-size:12px}
.qc-row{display:flex;justify-content:space-between;color:var(--ink2-l);padding:3px 0}
.qc-tot{border-top:1px solid var(--line-l);margin-top:8px;padding-top:10px;color:var(--ink-l)}
.qc-tot b{font:800 22px Archivo,sans-serif;letter-spacing:-.02em}
.qc-btn{margin-top:12px;background:var(--accent);color:var(--accent-ink);text-align:center;border-radius:9px;padding:9px;font-weight:600}
.hero-l .wrap+.wrap{display:block;margin-top:56px}
.hero-facts{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-l);border-bottom:1px solid var(--line-l)}
.hero-facts>div{padding:28px 26px;border-right:1px solid var(--line-l)}
.hero-facts>div:last-child{border-right:0}
.hero-facts .n{font:800 46px/1 Archivo,sans-serif;color:var(--accent-l);letter-spacing:-.03em}
.hero-facts h3{font-size:19px;margin-top:12px;color:var(--ink-l)}
.hero-facts p{color:var(--muted-l);margin-top:4px;line-height:1.5}
body.home section.usage{padding:44px 0 40px}
.home-show{background:#fff;padding-top:8px}
.tiles-h{font-size:clamp(28px,3.6vw,44px);margin-top:84px}
.tiles-h .eyebrow{display:block;margin-bottom:10px}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.light a.tile{display:flex;flex-direction:column;background:var(--paper);border-radius:20px;overflow:hidden;color:var(--ink-l);transition:transform .15s}
.light a.tile:hover{transform:translateY(-3px)}
.tile .t{padding:26px 26px 22px}
.tile h3{font-size:23px}
.tile p{color:var(--ink2-l);margin-top:6px;line-height:1.5}
.tile .pic{margin:auto 18px 0;height:470px;overflow:hidden;border-radius:12px 12px 0 0;box-shadow:0 0 0 1px var(--line-l);background:#fff}
.tile .pic img{display:block;width:100%;height:auto}
.home-video{max-width:900px;margin:72px auto 0}
.light .vid-cap{color:var(--muted-l);text-align:center}
@media (max-width:860px){
  .hero-l{padding:32px 0 40px}
  .hero-l .wrap{grid-template-columns:1fr;gap:32px}
  .hero-l .lede{font-size:17px}
  .mail{margin-right:0}
  .mail-subj,.mail-body{padding-left:24px}
  .mail-att{margin-left:24px}
  .mail-from time{display:none}
  .quote-card{position:relative;right:auto;bottom:auto;margin:-36px 12px 0 auto;width:250px}
  .hero-pic{padding-bottom:0}
  .hero-l .wrap+.wrap{margin-top:36px}
  .hero-facts{grid-template-columns:1fr}
  .hero-facts>div{border-right:0;border-bottom:1px solid var(--line-l);padding:22px 2px}
  .hero-facts>div:last-child{border-bottom:0}
  .hero-facts .n{font-size:36px}
  .home-show{padding-top:56px}
  .tiles-h{margin-top:56px}
  .tiles{grid-template-columns:1fr}
  .home-video{margin-top:48px}
}
body.home .has-menu .navmenu{background:#fff;border-bottom-color:var(--line-l);box-shadow:0 18px 30px rgba(15,27,34,.12)}
body.home .navmenu a{color:var(--ink2-l);border-bottom-color:var(--line-l)}
body.home .navmenu a:hover{color:var(--ink-l);background:var(--paper)}
body.home .navtoggle{color:var(--ink-l);border-color:var(--line-l)}
.hero-l .cta-link{color:var(--ink-l);font-weight:600;font-size:15px;padding:11px 6px}
.hero-l .cta-link:hover{color:var(--accent-l)}

/* homepage: live quoter and the shop-floor picture grid */
body.home #quoting{background:var(--paper)}
body.home #quoting .try-copy{max-width:720px;margin:0 auto 34px}
body.home #quoting h2{font-size:clamp(28px,3.6vw,44px)}
.home-floor{background:#fff}
.home-floor .sub{margin:12px auto 0}
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.light a.bt{display:flex;flex-direction:column;background:var(--paper);border-radius:20px;overflow:hidden;color:var(--ink-l);transition:transform .15s}
.light a.bt:hover{transform:translateY(-3px)}
.bt .pic{height:240px;overflow:hidden;margin:20px 20px 0;border-radius:12px;box-shadow:0 0 0 1px var(--line-l);background:#fff}
.bt .pic img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left}
.bt .t{padding:18px 22px 22px}
.bt h3{font-size:20px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.bt p{color:var(--ink2-l);margin-top:4px;line-height:1.5;font-size:15.5px}
.bt .pic img.zm,.tile .pic img.zm{width:170%;max-width:none;height:auto}
@media (max-width:860px){
  .bento{grid-template-columns:1fr}
}
.bt h3 .soon{margin:0}
body.home #quoting .try-note{text-align:center}
/* homepage: printer brand tiles */
.printer-brands{list-style:none;margin:34px auto 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:980px}
.printer-brands li{display:flex;align-items:center;justify-content:center;gap:12px;height:84px;background:#fff;border:1px solid var(--line-l);border-radius:14px;color:#0F1B22}
.printer-brands img{width:30px;height:30px}
.printer-brands span{font:700 21px Archivo,sans-serif;letter-spacing:-.01em}
.printer-brands .pb-prusa span{font:900 24px Archivo,sans-serif;letter-spacing:.06em}
.printer-brands .pb-formlabs span{font:600 25px "IBM Plex Sans",sans-serif;letter-spacing:-.03em}
.printer-brands .pb-eos span{font:800 28px Archivo,sans-serif;letter-spacing:.12em}
@media (max-width:720px){.printer-brands{grid-template-columns:repeat(2,1fr);gap:10px}.printer-brands li{height:68px}.printer-brands span{font-size:18px}}
.printer-brands .pb-wide img{width:150px;height:auto}
.tile .pic img.zm{width:auto;height:100%;max-width:none}
.home-show .wrap{max-width:1320px}
.pb-group{max-width:980px;margin:38px auto 0}
.pb-h{font-size:15px;font-family:"IBM Plex Mono",monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2-l);font-weight:500}
.pb-group .printer-brands{margin-top:14px}
.printer-brands.pb-live{grid-template-columns:minmax(0,232px);justify-content:center}
.pb-live li{border-color:var(--accent-l);box-shadow:0 0 0 1px var(--accent-l)}
.pb-note{color:var(--muted-l);font-size:14px;margin-top:12px}
.pb-group .printer-brands{display:flex;flex-wrap:wrap;justify-content:center}
.pb-group .printer-brands li{flex:0 0 calc(25% - 12px)}
.pb-group .printer-brands.pb-live li{flex-basis:232px}
@media (max-width:720px){.pb-group .printer-brands li{flex-basis:calc(50% - 5px)}}
/* Homepage: the stats + shop-logo band in light mode (his ask, 2026-10-08). */
body.home section.usage{background:var(--paper);color:var(--ink-l);border-top:1px solid var(--line-l);border-bottom:1px solid var(--line-l)}
body.home .usage .stat-n{color:var(--accent-l)}
body.home .usage .stat-l{color:var(--ink2-l)}
body.home .usage .logos-set li{border:1px solid var(--line-l)}
/* Homepage hero: the estimate the customer gets. */
.hero-l .est-shot{border-radius:16px}
/* Homepage "Starts in your inbox": copy beside the drawn email + quote card. */
body.home section.home-email{background:#fff}
.home-email .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.home-email h2{font-size:clamp(28px,3.4vw,42px)}
.home-email .sub{margin-top:14px}
.mail-pic{position:relative;padding-bottom:34px;min-width:0}
@media (max-width:860px){
  .home-email .wrap{grid-template-columns:1fr;gap:28px}
  .mail-pic{padding-bottom:0}
}
/* Features page "Follow one order" (2026-10): a numbered timeline down the
   middle, text and a real screen alternating sides. */
body.feat-a .fa-hero{background:#fff;color:var(--ink-l);padding:72px 0 24px;text-align:center}
.fa-hero .eyebrow{color:var(--accent-l)}
.fa-hero h1{font-size:clamp(34px,4.4vw,56px);line-height:1.04;max-width:16ch;margin:0 auto;color:var(--ink-l)}
.fa-hero .lede{color:var(--ink2-l);max-width:36em;margin:16px auto 0}
body.feat-a section.fa-steps{background:#fff;border-bottom:none;padding-top:24px}
.tl{list-style:none;margin:0 auto;padding:0;position:relative;max-width:1100px}
.tl::before{content:"";position:absolute;left:50%;top:40px;bottom:40px;width:2px;margin-left:-1px;background:var(--line-l)}
.st{display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:center;padding:44px 0;position:relative}
.st.r .st-tx{order:2}
.st-n{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:var(--accent-l);color:#fff;display:grid;place-items:center;font:700 16px Archivo,sans-serif;box-shadow:0 0 0 8px #fff}
.st-k{font:500 12px "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-l)}
.st h2{font-size:clamp(24px,2.6vw,30px);margin-top:8px;color:var(--ink-l)}
.st-tx>p{color:var(--ink2-l);margin-top:10px;line-height:1.6}
.st-f{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.st-f a{display:block;height:100%;border:1px solid var(--line-l);border-radius:12px;padding:11px 13px;color:var(--ink-l);background:#fff;transition:border-color .15s}
.st-f a:hover{border-color:var(--accent-l)}
.st-f b{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:14.5px}
.st-f b .soon{margin:0;font-size:11px}
.st-f span{display:block;color:var(--muted-l);font-size:13px;margin-top:2px;line-height:1.4}
.st-pic{height:360px;border:1px solid var(--line-l);border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 24px 60px -28px rgba(4,23,26,.35)}
.st-pic img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left}
body.feat-a section.fa-rest{background:var(--paper)}
.fa-rest h2{font-size:clamp(26px,3vw,36px)}
.fa-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:32px}
.light .fa-grid a{background:#fff;border:1px solid var(--line-l);border-radius:14px;padding:16px 18px;color:var(--ink-l);transition:border-color .15s}
.light .fa-grid a:hover{border-color:var(--accent-l)}
.fa-grid b{display:block}
.fa-grid span{display:block;color:var(--muted-l);font-size:14px;margin-top:3px;line-height:1.4}
body.feat-a section.fa-cta{background:#fff;border-bottom:none}
@media (max-width:860px){
  body.feat-a .fa-hero{padding:40px 0 8px}
  .tl::before{left:19px}
  .st{grid-template-columns:1fr;gap:20px;padding:28px 0 28px 56px}
  .st.r .st-tx{order:0}
  .st-n{left:0;top:30px;margin:0}
  .st-pic{height:260px}

  .fa-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:480px){.fa-grid{grid-template-columns:1fr}.st-f{gap:8px}.st-f a{padding:9px 11px}}

/* Homepage: "Not just a quoter" one-order strip under the hero */
body.home section.home-flow{background:#fff}
.home-flow .wrap{max-width:1240px}
.flow-hd{text-align:center;max-width:760px;margin:0 auto 44px}
.flow-hd h2{font-size:40px;line-height:1.12;margin:8px 0 12px}
.flow-hd p{color:var(--ink2-l);font-size:18px;margin:0}
.flow-fs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;list-style:none;margin:0;padding:0}
.flow-fs li{position:relative}
.flow-fs li:not(:last-child)::after{content:"";position:absolute;right:-15px;top:92px;width:12px;height:12px;border-top:2.5px solid var(--accent-l);border-right:2.5px solid var(--accent-l);transform:rotate(45deg)}
.flow-fs .im{height:196px;border-radius:12px;border:1px solid var(--line-l);background:var(--paper);overflow:hidden;box-shadow:0 8px 24px rgba(15,27,34,.08)}
.flow-fs .im img{width:100%;height:100%;object-fit:cover;object-position:top}
.flow-fs .im img.im-left{object-position:left top}
.flow-fs .k{display:inline-block;margin-top:16px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-l)}
.flow-fs b{display:block;font-size:19px;margin-top:6px;color:var(--ink-l)}
.flow-fs span:not(.k){display:block;color:var(--ink2-l);font-size:15px;line-height:1.45;margin-top:4px}
.flow-fs .who{display:inline-block;margin-top:10px;font-size:12.5px;font-style:normal;padding:3px 9px;border-radius:99px;background:#E6F2F3;color:var(--accent-l);font-weight:600}
.flow-fs .who.you{background:#FFF3DF;color:#8A5A0B}
.flow-more{text-align:center;margin:36px 0 0;font-size:17px}
@media(max-width:1000px){.flow-fs{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 18px}.flow-fs li::after{display:none}.flow-hd h2{font-size:30px}}
@media(max-width:560px){.flow-fs{grid-template-columns:1fr}.flow-fs .im{height:210px}}
.flow-fs .im .zl{display:block;height:100%;cursor:zoom-in}
.flow-fs .im{transition:transform .15s ease,box-shadow .15s ease}
.flow-fs .im:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(15,27,34,.14)}
.flow-fs .im{position:relative}
.flow-fs .im:hover::after{content:"Click to enlarge";position:absolute;left:10px;bottom:10px;font-size:12px;font-weight:600;color:#fff;background:rgba(15,27,34,.78);padding:4px 9px;border-radius:99px;pointer-events:none}

/* The inner pages (why, tour, customers, roi, pricing, faq, beta), 2026-10-09:
   they take body.home for the light header, and their dark page hero goes
   light to match the homepage. The closing call to action and the footer stay
   dark, as they are on the homepage. */
body.home .page-hero{background:#fff;color:var(--ink-l);border-bottom-color:var(--line-l)}
body.home .page-hero .lede{color:var(--ink2-l)}
body.home .page-hero .eyebrow{color:var(--accent-l)}
body.home .page-hero a:not(.btn){color:var(--accent-l)}
body.home .page-hero .btn-primary{background:var(--accent-l);color:#fff}
body.home .page-hero .btn-ghost{border-color:#B9C4CC;color:var(--ink-l)}
body.home .page-hero .btn-ghost:hover{border-color:var(--accent-l)}
body.home .page-hero .form-error{color:var(--ink-l)}
body.home .tour-nav a{border-color:var(--line-l);color:var(--ink2-l);background:#fff}
body.home .tour-nav a:hover{border-color:var(--accent-l);color:var(--ink-l)}

/* Homepage results (real counts from the owner's shop). */
body.home section.home-results{background:var(--paper);border-top:1px solid var(--line-l);border-bottom:1px solid var(--line-l)}
.home-results .res-hd{max-width:640px;margin:0 auto 32px;text-align:center}
.home-results .res-hd p:last-child{color:var(--ink2-l)}
.home-results .res-grid{list-style:none;margin:0 auto;padding:0;max-width:1040px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.home-results .res-grid li{background:#fff;border:1px solid var(--line-l);border-radius:14px;padding:26px 24px;display:flex;flex-direction:column;gap:8px}
.home-results .res-n{font-size:52px;line-height:1;font-weight:800;letter-spacing:-.02em;color:var(--accent-l)}
.home-results .res-l{font-weight:700;color:var(--ink-l);font-size:17px;line-height:1.35}
.home-results .res-s{color:var(--ink2-l);font-size:14.5px;line-height:1.5}
.home-results .res-note{text-align:center;color:var(--ink2-l);font-size:13px;margin:22px 0 0}
@media (max-width:820px){.home-results .res-grid{grid-template-columns:1fr;max-width:460px}.home-results .res-n{font-size:44px}}

/* Pricing: printer band under each plan name, and the Founding Shops offer. */
.tier .fit{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-l);margin-top:4px;font-weight:600}
.founding{display:flex;align-items:center;justify-content:space-between;gap:28px;background:#fff;border:2px solid var(--accent-l);border-radius:14px;padding:26px 30px;margin:0 0 34px;color:var(--ink-l)}
.founding h2{font-size:26px;margin:4px 0 8px}
.founding p{color:var(--ink2-l);margin:0;max-width:620px}
.founding .eyebrow{color:var(--accent-l);margin:0}
.founding .btn{flex:none}
@media (max-width:760px){.founding{flex-direction:column;align-items:flex-start;padding:22px}}
.founding-cta{display:flex;flex-direction:column;align-items:center;gap:8px;flex:none}
.founding .spots-left{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.04em;color:var(--accent-l);font-weight:600}
@media (max-width:760px){.founding-cta{align-items:flex-start}}

/* Home · after the yes: the board that moves itself, ending in printers
   (the auto-board block in site.js). Example data only. */
body.home section.home-auto{background:var(--paper);border-top:1px solid var(--line-l)}
.home-auto .wrap{max-width:1240px}
.home-auto .auto-hd{max-width:660px;margin:0 auto 30px;text-align:center}
.home-auto .auto-hd p:last-child{color:var(--ink2-l)}
.home-auto .soon{margin:0;vertical-align:middle}
.auto-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.25fr);gap:14px;align-items:stretch}
.auto-col{background:rgba(15,27,34,.035);border:1px solid var(--line-l);border-radius:14px;padding:12px;min-height:350px}
.auto-col h3{font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2-l);margin:2px 2px 12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.auto-col h3 em{font-style:normal;margin-left:auto;color:var(--muted-l)}
.auto-cards,.auto-printers{display:flex;flex-direction:column;gap:10px}
.auto-card,.auto-pr{background:#fff;border:1px solid var(--line-l);border-radius:12px;box-shadow:0 1px 2px rgba(15,27,34,.05),0 6px 18px rgba(15,27,34,.06)}
.auto-card{padding:10px 12px;color:var(--ink-l)}
.auto-card.new{animation:autoPop .5s ease}
@keyframes autoPop{from{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:none}}
.auto-id{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--muted-l)}
.auto-n{font-weight:600;font-size:14.5px;line-height:1.3;color:var(--ink-l)}
.auto-m{font-size:12.5px;color:var(--ink2-l)}
.auto-s{font-size:12px;font-weight:600;color:var(--accent-l);margin-top:6px}
.auto-s.wait{color:var(--muted-l)}
.auto-sw{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;border:1px solid rgba(0,0,0,.15)}
.auto-pr{display:grid;grid-template-columns:86px minmax(0,1fr);gap:10px;align-items:center;padding:10px 12px 10px 8px;transition:border-color .3s}
.auto-pr.fin{border-color:var(--ok-l)}
.auto-pr svg{width:86px;height:78px;display:block}
.auto-pr .frame{fill:#F4F6F8;stroke:#9AA9B4;stroke-width:2}
.auto-pr .rail{stroke:#9AA9B4;stroke-width:2}
.auto-pr .bed{fill:#3D4F5C}
.auto-pr .head{fill:#0F1B22;transition:transform .3s}
.auto-pr.on .head{animation:autoHead 1.1s ease-in-out infinite alternate}
@keyframes autoHead{from{transform:translateX(-13px)}to{transform:translateX(13px)}}
.auto-pr .part{transition:height .9s linear,y .9s linear}
.auto-pr .auto-pn{display:flex;justify-content:space-between;align-items:center;gap:6px;font-family:Archivo;font-weight:700;font-size:14px;color:var(--ink-l)}
.auto-pr .auto-st{font-family:"IBM Plex Sans",sans-serif;font-size:11px;font-weight:600;padding:1px 7px;border-radius:99px;background:rgba(14,110,120,.1);color:var(--accent-l);white-space:nowrap}
.auto-pr.fin .auto-st{background:rgba(31,138,91,.12);color:var(--ok-l)}
.auto-pr.idle .auto-st{background:rgba(15,27,34,.06);color:var(--muted-l)}
.auto-bar{height:5px;border-radius:99px;background:#E6ECEF;overflow:hidden;margin-top:6px}
.auto-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent-l),var(--accent));border-radius:99px;transition:width .9s linear}
.home-auto .auto-note{text-align:center;color:var(--ink2-l);font-size:13px;margin:20px 0 0}
@media (max-width:980px){.auto-board{grid-template-columns:repeat(2,minmax(0,1fr))}.auto-col{min-height:0}.auto-prs{grid-column:1/-1}.auto-prs .auto-printers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.auto-board{gap:10px}.auto-col{padding:10px}.auto-col:nth-child(3){grid-column:1/-1}.auto-prs .auto-printers{grid-template-columns:1fr}.auto-card .auto-id{display:none}.auto-col:not(.auto-prs) .auto-cards{min-height:64px}}
@media (prefers-reduced-motion:reduce){.auto-pr.on .head{animation:none}.auto-card.new{animation:none}.auto-pr .part,.auto-bar i{transition:none}}