/* ---------- tokens: white + the logo's blue (2026-09-26, Paul: "should not be beige... primarily white/blue"; he picked
   concept B2 — the blue hero, the connected-hexagon background). The beige paper tokens became these. ---------- */
:root{
  --paper:#FFFFFF; --card:#FFFFFF; --ink:#0E1A33; --body:#3A4A64; --gray:#5A6A82;
  --line:#E2E8F2; --lineSoft:#EDF1F8;
  --blue:#1D5BD8; --blue2:#2F6FEB; --sky:#EEF4FF;
  --coral:#E8735A; --coral2:#F0836D;
  --gold:#C9A24B; --goldInk:#7A5A17; --goldTint:#FBF5E6;
  --g1:#F06292; --g2:#FFA14A; --g3:#38BDF8; --g4:#9C6BF0;
  --grad:linear-gradient(100deg,#2F6FEB,#1C95FC 55%,#38BDF8);
  --navy1:#0A2A6B; --navy2:#1745A6; --navy3:#2A66E0;
  --shadow:0 30px 70px -38px rgba(16,38,92,.42);
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.6;-webkit-text-size-adjust:100%}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--blue)}
:focus-visible{outline:3px solid var(--blue2);outline-offset:2px;border-radius:6px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;border-radius:0 0 10px 0;z-index:99}
.skip:focus{left:0}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
section{padding:76px 0}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--blue);font-weight:600}
.eyebrow::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--grad);flex:0 0 auto}
h2.sec{font-size:clamp(26px,3.4vw,36px);line-height:1.12;letter-spacing:-.015em;margin:12px 0 14px;max-width:24ch}
.lede{color:var(--body);font-size:16.5px;max-width:62ch}
.lede + .lede{margin-top:12px}
.lede b{color:var(--ink)}

/* ---------- buttons ---------- */
.btn{display:inline-block;background:linear-gradient(135deg,#2F6FEB,#1D5BD8);color:#fff;text-decoration:none;
  font-weight:700;font-size:15px;padding:13px 22px;border-radius:12px;
  box-shadow:0 14px 28px -14px rgba(47,111,235,.75);transition:transform .08s ease}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:#fff;color:var(--blue);border:1.5px solid #BCD0F6;box-shadow:none}
.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;box-shadow:none}

/* ---------- nav ---------- */
nav.top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  border-bottom:1px solid #E9EEF7}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:62px}
.wordmark{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.wordmark img{width:34px;height:34px;object-fit:contain}
.wordmark b{font-family:var(--mono);letter-spacing:.22em;font-size:14px}
.nav-links{display:flex;gap:22px;align-items:center}
.nav-links a{text-decoration:none;color:var(--gray);font-size:14px;font-weight:600}
.nav-links a:hover{color:var(--blue)}
.nav-links .btn{padding:9px 16px;font-size:13.5px;color:#fff}
@media(max-width:700px){.nav-links a:not(.btn){display:none}}

/* ---------- hero: the logo's blue, the OnPoint mark in white at 9% (Paul's pick B, 2026-09-26) ---------- */
.hero{padding:76px 0 60px;overflow:hidden;position:relative;isolation:isolate;
  background:radial-gradient(900px 500px at 88% 0%,rgba(56,189,248,.38),transparent 70%),linear-gradient(160deg,#0B3AA6 0%,#1D5BD8 52%,#2F7BF5 100%)}
.hero::after{content:"";position:absolute;z-index:-1;pointer-events:none;width:980px;aspect-ratio:734/594;right:-200px;top:-40px;
  -webkit-mask:url(assets/brand/op-mark-mono.svg) center/contain no-repeat;mask:url(assets/brand/op-mark-mono.svg) center/contain no-repeat;
  background:#fff;opacity:.09}
@media(max-width:760px){.hero::after{width:150vw;right:-55vw;top:120px}}
.hero .eyebrow{color:#D3E3FF}.hero .eyebrow::before{background:#fff}
.hero h1{color:#fff}.hero h1 .u{background-image:linear-gradient(90deg,#8FE0FF,#fff)}
.hero .sub{color:rgba(255,255,255,.9)}.hero .or{color:rgba(255,255,255,.75)}
.hero .btn.ghost{color:#fff;border-color:rgba(255,255,255,.75);background:rgba(255,255,255,.1)}
.hero .fine{color:rgba(255,255,255,.75)}
.hero .hero-list li{color:rgba(255,255,255,.92)}
.hero .hero-list li::before{border:2px solid rgba(255,255,255,.6);background:transparent}
/* the homepage: the blue holds the words, the product breaks out of it into the white page, and the page's pattern fades
   in under the product */
.hero.hero-split{background:linear-gradient(180deg,#fff 0,#fff calc(100% - 170px),rgba(255,255,255,0) 100%)}
.hero-split .hero-top{position:relative}
.hero-split .hero-top::before{content:"";position:absolute;z-index:-2;left:50%;width:100vw;margin-left:-50vw;top:-76px;bottom:-190px;
  background:radial-gradient(900px 500px at 88% 0%,rgba(56,189,248,.38),transparent 70%),linear-gradient(160deg,#0B3AA6 0%,#1D5BD8 52%,#2F7BF5 100%)}
@media(max-width:760px){.hero-split .hero-top::before{bottom:-150px}}
.browserframe{box-shadow:0 44px 90px -40px rgba(8,30,90,.6)}
/* the mobile headline breathes (Paul, 2026-09-26: "very cramped on the mobile page") */
@media(max-width:560px){
  .hero h1{line-height:1.17;letter-spacing:-.008em;margin-bottom:24px}
  .hero h1 .u{padding-bottom:4px;background-size:100% 4px}
  .hero h1 .h1b{display:block;margin-top:14px}
}
/* the page behind everything: a fine honeycomb of lines and nodes, a few lit in blue, lighter behind the reading column;
   it drifts a little as the page scrolls (still for reduced motion) */
body::before{content:"";position:fixed;left:0;right:0;top:-14vh;height:140vh;z-index:-1;pointer-events:none;
  background:url(assets/brand/pat-honeycomb.svg) 0 0/176.67px 204px repeat;opacity:.32;
  -webkit-mask-image:radial-gradient(58% 70% at 50% 50%,rgba(0,0,0,.3) 28%,#000 100%);mask-image:radial-gradient(58% 70% at 50% 50%,rgba(0,0,0,.3) 28%,#000 100%)}
@supports (animation-timeline:scroll()){@media (prefers-reduced-motion:no-preference){
  body::before{animation:bgdrift linear both;animation-timeline:scroll(root)}
  @keyframes bgdrift{from{transform:translateY(0)}to{transform:translateY(-12vh)}}}}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:52px;align-items:center}
h1{font-size:clamp(35px,4.6vw,52px);line-height:1.08;letter-spacing:-.02em;font-weight:800;margin:16px 0 18px;max-width:21ch}
h1 .u{background:var(--grad) left 100% / 100% 6px no-repeat;padding-bottom:8px}
.sub{font-size:18px;color:var(--body);max-width:46ch;margin-bottom:26px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
/* the standard black App Store badge (inline SVG so the CSP stays self-only) */
.fine{font-size:13px;color:var(--gray);margin-top:14px}
.hero-media{display:flex;justify-content:center}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:46px}}

/* ---------- device + media frames ---------- */
.phoneframe{background:#fff;border:1px solid var(--line);border-radius:38px;padding:10px;box-shadow:var(--shadow);
  width:min(400px,92%)}
.phoneframe>img,.phoneframe>video,.phoneframe picture img{border-radius:28px;width:100%}
.phoneframe.sm{width:min(330px,86%)}
.hero-list{list-style:none;margin:18px 0 6px;padding:0;display:grid;gap:9px}
.hero-list li{position:relative;padding-left:26px;color:var(--body);font-size:15.5px}
.hero-list li::before{content:"";position:absolute;left:0;top:5px;width:15px;height:15px;border-radius:50%;
  background:linear-gradient(135deg,#38BDF8,#1F538F)}
.hero-list li::after{content:"";position:absolute;left:4.5px;top:9px;width:6px;height:3.5px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.deskshot{margin:38px 0 0}
.deskshot img{width:100%;border-radius:18px;border:1px solid var(--line);box-shadow:var(--shadow)}
.deskshot figcaption{margin-top:12px;text-align:center;color:var(--gray);font-size:15px}
figure{margin:0}
figcaption{font-size:13px;color:var(--gray);margin-top:11px;line-height:1.5;text-align:center}
.shotcard{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.shotcard img{width:100%}
.ruler{width:220px;height:12px;margin:0 auto;border-bottom:2px solid var(--line);
  background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),var(--line) calc(10% - 1px) 10%)}

/* ---------- split layout ---------- */
.split{display:grid;grid-template-columns:1.02fr .98fr;gap:50px;align-items:center}
.split>.media{order:2;display:flex;justify-content:center}
.split.flip>.media{order:0}
@media(max-width:840px){
  .split{grid-template-columns:1fr;gap:30px}
  .split>.copy{order:0}
  .split>.media{order:1}
}

/* ---------- how it works ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:34px 0 8px}
.step{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 20px;position:relative}
.step::before{content:"";position:absolute;top:0;left:20px;right:auto;width:56px;height:3px;border-radius:0 0 3px 3px;background:var(--grad)}
.step .s-n{font-family:var(--mono);font-weight:700;color:var(--blue);font-size:15px}
.step h3{font-size:17px;margin:7px 0 7px;letter-spacing:-.01em}
.step p{font-size:14.5px;color:var(--body)}
.step p small{display:block;margin-top:8px;color:var(--gray);font-size:12.5px;line-height:1.5}
@media(max-width:760px){.steps{grid-template-columns:1fr}}
.media-duo{display:grid;grid-template-columns:1fr 1fr;gap:26px;justify-items:center;margin-top:36px}
@media(max-width:760px){.media-duo{grid-template-columns:1fr}}

/* ---------- polish ---------- */
.promise{border-left:4px solid transparent;border-image:var(--grad) 1;background:var(--card);
  padding:16px 18px;margin-top:16px;font-size:15.5px;color:var(--body);max-width:56ch}
.promise b{color:var(--ink)}

/* ---------- money ---------- */
.media-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;justify-items:center;align-items:start;margin-top:38px}
@media(max-width:860px){.media-trio{grid-template-columns:1fr;gap:30px}}

/* ---------- exports ---------- */
.exports-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center;margin-top:36px}
@media(max-width:840px){.exports-grid{grid-template-columns:1fr}}

/* ---------- themes ---------- */
/* seven tiles since 2026-09-25 (Studio in both shades): four across at a desk with the last row centred */
.themes3{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;margin-top:36px}
.themes3 figure{display:flex;flex-direction:column;align-items:center;flex:0 0 calc((100% - 54px)/4)}
@media(max-width:1020px){.themes3{gap:24px}.themes3 figure{flex-basis:calc((100% - 24px)/2)}}
@media(max-width:760px){.themes3{gap:30px}.themes3 figure{flex-basis:100%}}

/* ---------- privacy band ---------- */
.band{background:linear-gradient(140deg,var(--navy1) 0%,var(--navy2) 55%,var(--navy3) 100%);color:#fff;
  border-radius:26px;padding:52px 48px;position:relative;overflow:hidden}
.band::after{content:"0.1";position:absolute;right:-28px;bottom:-64px;font-family:var(--mono);font-weight:700;
  font-size:230px;line-height:1;color:rgba(255,255,255,.06);user-select:none;pointer-events:none}
.band-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;position:relative;z-index:1}
.band h2{font-size:clamp(25px,3.4vw,36px);letter-spacing:-.015em;margin:12px 0 14px;max-width:20ch;color:#fff}
.band p{color:#D5E4F5;max-width:58ch;font-size:16px}
.band p+p{margin-top:11px}
.band .eyebrow{color:#A8C8EA}
.band a{color:#fff}
.proofs{display:flex;gap:12px 24px;flex-wrap:wrap;margin-top:24px}
.proof{font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;color:#fff;border-left:3px solid var(--g3);padding-left:11px}
.band .phoneframe{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);box-shadow:0 30px 70px -30px rgba(0,0,0,.7)}
@media(max-width:840px){.band-grid{grid-template-columns:1fr}.band{padding:40px 26px}}

/* ---------- origin one-liner ---------- */
.origin{display:flex;gap:16px;align-items:flex-start;max-width:760px;margin:0 auto;
  background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 24px}
.origin .o-mark{flex:0 0 auto;width:42px;height:42px;border-radius:11px;background:var(--blue);color:#fff;
  font-family:var(--mono);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:15px}
.origin p{color:var(--body);font-size:15.5px}

/* ---------- pricing ---------- */
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;max-width:720px;margin:36px auto 0}
@media(max-width:700px){.plans{grid-template-columns:1fr}}
.plan{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:30px 26px;text-align:center;
  box-shadow:0 18px 44px -30px rgba(31,43,58,.4);position:relative}
.plan.best{border:2px solid transparent;background:linear-gradient(var(--card),var(--card)) padding-box,var(--grad) border-box}
.plan .tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;padding:4px 12px;border-radius:999px;text-transform:uppercase}
.plan h3{font-size:15px;letter-spacing:.02em;color:var(--gray);font-weight:600;text-transform:uppercase;font-family:var(--mono)}
.price{font-size:46px;font-weight:800;letter-spacing:-.03em;line-height:1.1;margin:10px 0 2px}
.price small{font-size:16px;color:var(--gray);font-weight:500}
.plan .per{color:var(--body);font-size:14px;margin-bottom:18px}
.plan .btn{width:100%}
.plan .soonnote{display:none;font-size:12.5px;color:var(--gray);margin-top:10px}
.plan .soonnote.show{display:block}
.inc{list-style:none;max-width:720px;margin:30px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:6px 34px;text-align:left}
@media(max-width:700px){.inc{grid-template-columns:1fr}}
.inc li{padding:6px 0 6px 28px;position:relative;font-size:15px;color:var(--body)}
.inc li::before{content:"";position:absolute;left:0;top:12px;width:14px;height:14px;border-radius:4px;background:var(--blue);
  clip-path:polygon(14% 44%,0 60%,40% 100%,100% 18%,84% 4%,40% 70%)}
.price-fine{text-align:center;margin-top:22px}

/* ---------- faq ---------- */
details{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:0 20px;margin-top:12px}
summary{cursor:pointer;font-weight:700;font-size:15.5px;padding:17px 0;list-style:none;display:flex;justify-content:space-between;gap:14px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--mono);color:var(--blue);font-weight:700;font-size:18px;flex:0 0 auto}
details[open] summary::after{content:"–"}
details p{padding:0 0 18px;color:var(--body);font-size:14.5px;max-width:72ch}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:34px 0 46px;margin-top:26px}
.foot{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center;color:var(--gray);font-size:13.5px}
.foot a{color:var(--gray);text-decoration:none;margin-left:18px}
.foot a:hover{color:var(--blue)}
.foot a:first-child{margin-left:0}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:no-preference){
  .hero-media .phoneframe{animation:rise .7s ease .08s both}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- OnPoint for Firms (added 2026-08-07, the 1.1-live section — Paul picked the navy band from two rendered variants) ---------- */
.firmband::after{content:"0001"}
.firmband-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
@media(max-width:840px){.firmband-grid{grid-template-columns:1fr}}
.firmeyebrow{color:#9CC7F5}
.firmband h2{font-size:34px;margin:6px 0 12px;line-height:1.15}
.firmband p{color:rgba(255,255,255,.88)}
.hero-list.onband li{color:rgba(255,255,255,.92)}
.hero-list.onband li::before{border:2px solid rgba(255,255,255,.55);background:transparent}
.hero-list.onband li::after{border-color:#fff}
.firmprice{margin:16px 0 6px;font-weight:700;color:#fff}
a.btn.btn-onband{background:#fff;color:#17335B}
.fine.finedark{color:rgba(255,255,255,.65)}
.firmshots{display:flex;gap:16px;justify-content:center}
.firmshots .phoneframe.sm{max-width:225px}
@media(max-width:840px){.firmshots .phoneframe.sm{max-width:44%}}

/* the firms feature tiles (2026-08-07, Paul's V1 pick: inside the band, all four tiles
   the SAME size — a uniform phone-shaped tile; the letter-format invoice fills it with a
   top crop so the letterhead and first line sections read) */
.firmmore{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px}
@media(max-width:840px){.firmmore{grid-template-columns:repeat(2,1fr);gap:12px}}
.firmmore figure{display:flex;flex-direction:column;margin:0}
.firmtile2{background:#fff;border-radius:16px;padding:6px;border:1px solid rgba(255,255,255,.25);overflow:hidden;aspect-ratio:860/1869}
.firmtile2 picture,.firmtile2 img{width:100%;height:100%}
.firmtile2 img{border-radius:11px;object-fit:cover;object-position:top}
.firmtile2.paper img{object-fit:contain;object-position:top}
.firmmore figcaption{margin-top:8px;text-align:center;font-size:13px;font-weight:600;color:rgba(255,255,255,.85)}

/* ===== v270 site revamp (2026-08-31, Paul: firms first, App Store first, demote privacy) ===== */
.hero-media .phoneframe>video{display:block;width:100%;height:auto;border-radius:inherit;background:#0f1a2b}
.cta-row .or{font-family:var(--sans);font-size:14px;color:var(--gray);align-self:center}
.reasons{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:26px}
.reason{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px 22px;box-shadow:0 16px 40px -30px rgba(31,43,58,.35)}
.reason .r-n{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:#1D4FC4;background:#EAF1FF;border-radius:999px;padding:3px 10px;margin-bottom:12px}
.reason h3{font-size:20px;line-height:1.25;margin:0 0 10px;color:var(--ink)}
.reason p{margin:0;color:var(--body);font-size:15.5px;line-height:1.55}
.reason p+p{margin-top:8px}
.reason a{color:var(--blue)}
.morelink{margin-top:18px;font-size:15px}
.morelink a{color:var(--blue);font-weight:600}
.landing .top .nav-links a:not(.btn){display:none}
.landing .hero{padding-top:34px}
.quiet-privacy{font-size:14px;color:var(--gray);margin:14px 0 0}
.quiet-privacy a{color:var(--gray)}
@media (max-width:880px){.reasons{grid-template-columns:1fr}}

/* ---------- desktop-first hero (2026-09-01, Paul: "most people would only think it's a phone app") ---------- */
.hero-top{max-width:880px;margin:0 auto;text-align:center}
.hero-top h1{margin:18px auto 22px;max-width:30ch;text-wrap:balance}
.hero-top h1 .h1b{display:block;text-wrap:balance}
.hero-top .sub{margin:0 auto 30px;max-width:58ch;line-height:1.55}
.hero-top .cta-row{justify-content:center;gap:14px}
.hero-top .cta-row .btn{height:48px;display:inline-flex;align-items:center;padding:0 24px;border-radius:10px;box-sizing:border-box}
.hero-top .fine{margin-top:18px}
@media(max-width:520px){.hero-top .eyebrow{display:block;text-align:center;line-height:1.7}.hero-top .eyebrow::before{display:none}}
.hero-stage{position:relative;margin:58px auto 0;max-width:1180px}
.browserframe{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.bf-bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 14px;background:#F4F7FC;border-bottom:1px solid var(--line)}
.bf-bar span{width:11px;height:11px;border-radius:50%;background:#d4d7dd}
.bf-bar em{font-style:normal;font-size:12.5px;color:var(--gray);margin-left:12px;background:#fff;border:1px solid var(--line);border-radius:7px;padding:3px 12px;flex:0 1 380px;text-align:center}
.browserframe picture img{display:block;width:100%;height:auto}
.hero-phone{position:absolute;left:-12px;bottom:-22px;width:min(206px,21%);padding:7px;border-radius:30px}
.hero-phone>video{border-radius:23px;display:block}
.stage-cap{text-align:center;color:var(--gray);font-size:14.5px;margin:40px auto 0;max-width:62ch}
@media (prefers-reduced-motion:no-preference){.hero-stage{animation:rise .7s ease .08s both}}
@media(max-width:760px){
  .hero-stage{margin-top:34px}
  .hero-phone{position:static;width:min(280px,78%);margin:22px auto 0;padding:9px;border-radius:34px}
  .hero-phone>video{border-radius:27px}
  .stage-cap{margin-top:22px}
}
/* the feature grid, right under the hero */
#everything{padding-top:54px}
.featgrid{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.featgrid li{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 18px 16px}
.featgrid b{display:block;font-size:16px;letter-spacing:-.01em;margin-bottom:6px}
.featgrid span{display:block;color:var(--body);font-size:14.5px;line-height:1.5}
@media(max-width:900px){.featgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.featgrid{grid-template-columns:1fr}}
/* the desk section */
.deskimg{margin:26px 0 0}
.deskimg picture img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.deskimg figcaption{color:var(--gray);font-size:14px;margin-top:12px}
.desk-duo{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start;margin-top:26px}
@media(max-width:860px){.desk-duo{grid-template-columns:1fr}}

/* ===== 2026-09-27 audit ===== */
/* the hero's "or" between the two buttons sits on the blue: the later .cta-row rule painted it the page's gray (1.9:1) */
.hero .cta-row .or{color:rgba(255,255,255,.8)}
/* a footer link never breaks inside itself ("Setup / guide") — the row wraps between links */
.foot a{white-space:nowrap;display:inline-block}

/* 2026-10-06 (Paul: "add a button ... Get it on Google Play ... make sure the Google Play button and App Store button look polished"):
   the two stores' OFFICIAL badges, unaltered (Apple's SVG; Google's PNG with only its transparent margin trimmed), shown at ONE
   visible height side by side — both stores ask for that when the badges sit together. The trademark line under the footer is
   the attribution both stores ask for. */
.badges{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:center}
.badge{display:inline-flex;line-height:0;border-radius:9px;transition:opacity .15s ease,transform .15s ease}
.badge img{height:52px;width:auto;display:block}
.badge:hover{opacity:.88}
.badge:active{transform:translateY(1px)}
.badge:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.hero .badge:focus-visible{outline-color:#fff}
.tm{font-size:11px;line-height:1.55;color:var(--gray);opacity:.85;margin:14px 0 0}

/* 2026-10-06, the browser badge (Paul: the "Use it in your browser" button "should look much more appealing ... That's our highest
   margin sales through the web"; then "the White, but with some sort of blue accent", "honeycomb, but it should be darker on the left
   side near the logo and fade as it goes further right", "a dark border similar to the google and apple buttons", "Mid navy"):
   a THIRD BADGE in the store badges' own height and corner, white, the app icon, two lines of words, a mid-navy (#1E3A8A) border, and
   the site's honeycomb strongest beside the logo, fading out under the words. Not .badge: that class zeroes line-height for images. */
.webbadge{height:52px;box-sizing:border-box;display:inline-flex;align-items:center;gap:9px;padding:0 12px 0 6px;border-radius:9px;
  position:relative;overflow:hidden;isolation:isolate;text-decoration:none;background:#fff;border:2px solid #1E3A8A;
  box-shadow:0 6px 18px rgba(4,20,70,.22);transition:transform .15s ease,box-shadow .15s ease}
.webbadge::before{content:"";position:absolute;inset:0;z-index:0;background:url(assets/brand/pat-honeycomb.svg) left -6px center/62px auto repeat;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.55) 38%,transparent 82%);mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.55) 38%,transparent 82%);
  opacity:.8}
.webbadge img{width:36px;height:36px;border-radius:8px;display:block;box-shadow:0 0 0 1px #E3E9F2;position:relative;z-index:1}
.webbadge .wb-t{display:flex;flex-direction:column;line-height:1;white-space:nowrap;position:relative;z-index:1}
.webbadge small{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:#5B6B85}
.webbadge b{font-size:19px;font-weight:650;letter-spacing:-.012em;margin-top:3px;color:#0B2A66}
.webbadge:hover{transform:translateY(-1px);box-shadow:0 9px 22px rgba(4,20,70,.28)}
.webbadge:active{transform:translateY(0)}
.webbadge:focus-visible{outline:2px solid #fff;outline-offset:3px}