/* Tokens come from the app's SITE_SKIN: the dark theme IS Midnight, the same
   values the app paints with, so the site and the app read as one surface. */
:root{--glow:radial-gradient(ellipse 130% 78% at 50% 100%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.35) 48%, rgba(246,246,244,0) 82%), linear-gradient(to top, #ececea 0%, #f3f3f1 54%, #f6f6f4 100%);--bg:#f6f6f4;--fg:#141414;--dim:#5c5c58;--faint:#6f6f6a;--line:rgba(0,0,0,.08);--card:rgba(255,255,255,0.64);--card-line:rgba(0,0,0,0.16);--btn:#141414;--btn-fg:#f5f6f3;--ghost:rgba(0,0,0,0.22);--accent:#e54c24;
  --tag-solid-bg:rgba(22,163,74,.13);--tag-solid:#15803d;--tag-est-bg:rgba(217,119,6,.14);--tag-est:#b45309;--tag-rough-bg:rgba(220,38,38,.12);--tag-rough:#b91c1c}
html.dark{--glow:radial-gradient(ellipse 130% 78% at 50% 100%, rgba(34,45,60,0.22) 0%, rgba(20,26,35,0.10) 46%, rgba(12,17,23,0) 80%), linear-gradient(to top, #121821 0%, #0e131a 52%, #0c1117 100%);--bg:#0c1117;--fg:#e8eaed;--dim:#99a3b1;--faint:#748294;--line:rgb(38,45,57);--card:rgba(16,22,29,0.66);--card-line:rgb(38,45,57);--btn:#f4f4f5;--btn-fg:#0e131a;--ghost:rgb(38,45,57);
  --tag-solid:#6ee7a0;--tag-est:#fbbf24;--tag-rough:#fca5a5}
/* the app's glass edge, both themes, flipped by the class on html */

html:not(.dark) .lpg { position: relative; z-index: 0; border-width: 0 !important; }
html:not(.dark) .lpg::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -2; pointer-events: none;
  background: rgba(255,255,255,0.64); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); }
html:not(.dark) .lpg::after { content: ""; position: absolute; inset: -64px; border: 64px solid transparent; padding: 1px; pointer-events: none; z-index: -1;
  border-radius: calc(var(--lp-r, 8px) + 64px); background: transparent;
  backdrop-filter: brightness(0.86) saturate(1.1) blur(28px); -webkit-backdrop-filter: brightness(0.86) saturate(1.1) blur(28px);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) padding-box; -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) padding-box; mask-composite: exclude; }
html:not(.dark) .lpg-nav { position: sticky; top: 0; z-index: 40; }
html:not(.dark) .lpg-nav::before { background: rgba(255,255,255,0.80); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); border-radius: 0; }
html:not(.dark) .lpg-nav::after { inset: 0 0 -64px; border-width: 0 0 64px; border-radius: 0; padding: 0 0 1px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) padding-box; -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) padding-box; mask-composite: exclude; }
html:not(.dark) .lpg-thin::before { background: rgba(255,255,255,0.46); }
html:not(.dark) .lpg-scroll .lpg::after { inset: 0; border: 0; }


html.dark .lpg { position: relative; z-index: 0; border-width: 0 !important; }
html.dark .lpg::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -2; pointer-events: none;
  background: rgba(16,22,29,0.66); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); }
html.dark .lpg::after { content: ""; position: absolute; inset: -64px; border: 64px solid transparent; padding: 1px; pointer-events: none; z-index: -1;
  border-radius: calc(var(--lp-r, 8px) + 64px); background: transparent;
  backdrop-filter: brightness(2.9) saturate(0.8) blur(28px); -webkit-backdrop-filter: brightness(2.9) saturate(0.8) blur(28px);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) padding-box; -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) padding-box; mask-composite: exclude; }
html.dark .lpg-nav { position: sticky; top: 0; z-index: 40; }
html.dark .lpg-nav::before { background: rgba(16,22,29,0.80); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); border-radius: 0; }
html.dark .lpg-nav::after { inset: 0 0 -64px; border-width: 0 0 64px; border-radius: 0; padding: 0 0 1px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) padding-box; -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) padding-box; mask-composite: exclude; }
html.dark .lpg-thin::before { background: rgba(11,15,22,0.5); }
html.dark .lpg-scroll .lpg::after { inset: 0; border: 0; }

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* the landing page's rising glow (BvLanding backgroundImage), fixed so it does not scroll away */
html{background:var(--bg);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-height:100vh;background:var(--bg);background-image:var(--glow);background-attachment:fixed;color:var(--fg);font-family:'Bai Jamjuree',ui-sans-serif,system-ui,sans-serif;letter-spacing:.015em;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit}
.col{width:min(1264px,calc(100vw - 48px));margin:0 auto}
.prose{max-width:820px}
/* nav */
nav{position:sticky;top:0;z-index:40;background:transparent}
.nav-in{display:flex;align-items:center;gap:28px;padding:14px 24px;border-left:1px solid var(--line);border-right:1px solid var(--line)}
.lockup{display:inline-block;white-space:nowrap;text-decoration:none;font-size:22px;line-height:1.1}
/* BrandLogo, verbatim from the app: one piece of artwork, scaled until its
   cap height equals the 0.70em Space Grotesk used to set, and dropped by the
   part that hangs below the wordmark's baseline. At the same font-size the cap
   line, baseline and left edge land exactly where the old text + mark did. */
.lockup img{display:block;height:1.2985em;width:auto;vertical-align:calc(-0.3138em - 1px)}
.lockup .mk-dark{display:none}
html.dark .lockup .mk-light{display:none}
html.dark .lockup .mk-dark{display:block}
.nav-links{display:flex;gap:22px;margin-left:8px;font-size:13px;font-weight:600;color:var(--dim)}
.nav-links a{text-decoration:none}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--fg)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:10px;font-family:inherit;letter-spacing:inherit;font-weight:600;font-size:14px;padding:9px 20px;border:1px solid transparent;cursor:pointer;text-decoration:none;background:var(--btn);color:var(--btn-fg);transition:opacity 120ms ease,transform 120ms ease}
.btn:hover{opacity:.88}.btn:active{transform:translateY(1px)}
.btn-nav{padding:8px 16px;font-size:13px}
/* v1062: the header opens the app, as on the landing page: the flat accent */
.btn-nav,.lmenu-open{background:#d4431d;color:#fff;border-color:transparent}
/* v1062: the glass cards' glow layer reaches 64px past them; on a phone that widened the page by 40px. Clipped at the page's own edge (clip keeps the sticky headers working) */
main{overflow-x:clip}
/* v1063: the header as on the Bikes and Compare pages (site/seo/src/glass.css): pill buttons and a glass theme button */
html .btn-nav,html .lmenu-open{border-radius:999px}
html .theme-toggle,html .lmenu-theme{border:0;border-radius:999px;color:var(--fg);background:rgba(255,255,255,.42);backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px) saturate(1.3);box-shadow:inset 1px 1.4px 0 0 rgba(255,255,255,.9),inset -.7px -1px 0 0 rgba(255,255,255,.5),inset 0 0 0 .5px rgba(0,0,0,.1),inset 0 0 14px 0 rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.05);transition:background-color .16s ease,box-shadow .16s ease}
html.dark .theme-toggle,html.dark .lmenu-theme{background:rgba(255,255,255,.045);box-shadow:inset 1px 1.4px 0 0 rgba(255,255,255,.24),inset -.7px -1px 0 0 rgba(255,255,255,.09),inset 0 0 14px 0 rgba(255,255,255,.04)}
html .theme-toggle:hover,html .lmenu-theme:hover{background:rgba(255,255,255,.72)}html.dark .theme-toggle:hover,html.dark .lmenu-theme:hover{background:rgba(255,255,255,.09)}
html .lmenu-theme.lpg::before,html .lmenu-theme.lpg::after{display:none}
html .lmenu a.lmenu-open{padding:9px 18px;color:#fff}
.btn-ghost{background:transparent;color:var(--fg);border-color:var(--ghost);font-size:12.5px;padding:6px 12px;--lp-r:10px;transition:background 120ms ease}
.btn-ghost:hover{opacity:1;background:rgba(0,0,0,0.05)}html.dark .btn-ghost:hover{background:rgba(255,255,255,0.06)}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:1px solid var(--ghost);border-radius:10px;background:transparent;color:var(--fg);cursor:pointer;font-family:inherit}
.theme-toggle svg{width:15px;height:15px}
.nav-login{color:var(--dim);padding:8px 6px;font-size:13px;font-weight:600;text-decoration:none}
.nav-login:hover{color:var(--fg)}
.mcta{display:none}
.menu-btn{display:none;width:40px;height:40px;align-items:center;justify-content:center;border:none;border-radius:10px;background:transparent;color:var(--fg);flex:none;margin-right:-10px;margin-left:-6px;cursor:pointer;padding:0}
.lmenu{width:100%;margin:0 auto;padding:10px 18px 18px;display:flex;flex-direction:column;gap:4px}
.lmenu[hidden]{display:none}
.lmenu.in{animation:bvMenuIn 200ms ease-out both}
.lmenu.out{animation:bvMenuOut 180ms ease-in both}
.lmenu a{font-size:13px;padding:10px 0;color:var(--dim);text-decoration:none}
.lmenu a[aria-current]{color:var(--fg);font-weight:600}
.lmenu-row{display:flex;align-items:center;gap:10px;margin-top:8px}
.lmenu-theme{--lp-r:13px;border:1px solid var(--ghost);border-radius:13px;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;padding:0;color:var(--fg);background:transparent;flex:none;cursor:pointer}
.lmenu-theme svg{width:16px;height:16px}
.lmenu-open{padding:9px 18px;font-size:13px}
@keyframes bvMenuIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@keyframes bvMenuOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-8px)}}
@media(min-width:960px){.lmenu{display:none !important}}
/* v1058: six header links need about 960px; below that the phone menu takes over */
@media(min-width:768px) and (max-width:959px){.nav-links,.nav-right{display:none}.menu-btn{display:inline-flex}.mcta{display:inline-block}.mcta.btn-nav{margin-left:auto}}
/* the landing's column rails, behind the content and through the footer */
.railwrap{position:relative}
.rails{position:absolute;top:0;bottom:0;left:0;right:0;margin:0 auto;width:min(1264px,calc(100vw - 48px));border-left:1px solid var(--line);border-right:1px solid var(--line);pointer-events:none;z-index:2}
main>.col{padding-left:40px;padding-right:40px}
/* the landing's scroll veil: fades out as the foot of the page arrives */
#veil{position:fixed;left:0;right:0;bottom:0;height:min(38vh,340px);z-index:39;pointer-events:none;opacity:1;transition:opacity 120ms linear;background:linear-gradient(to bottom, rgba(246,246,244,0) 0%, rgba(246,246,244,0.6) 55%, rgba(246,246,244,0.95) 100%)}
html.dark #veil{background:linear-gradient(to bottom, rgba(12,17,23,0) 0%, rgba(12,17,23,0.55) 55%, rgba(12,17,23,0.92) 100%)}
.icon-moon{display:none}
html.dark .icon-sun{display:none}
html.dark .icon-moon{display:block}
/* page */
main{padding:56px 0 40px}
h1{font-size:clamp(30px,3.8vw,44px);font-weight:600;letter-spacing:-.4px;line-height:1.1;margin-bottom:12px}
.lede{color:var(--dim);font-size:16.5px;line-height:1.6;margin-bottom:34px;max-width:760px}
.updated{color:var(--faint);font-size:12.5px;margin-bottom:10px}
h2{font-size:21px;font-weight:600;letter-spacing:0;margin:38px 0 10px;scroll-margin-top:84px}
h3{font-size:15.5px;font-weight:600;margin:20px 0 6px}
p{margin-bottom:12px;font-size:15px;color:var(--fg)}
ul,ol{margin:0 0 14px 20px;font-size:15px}
li{margin-bottom:7px}
strong{font-weight:600}
.box{border-radius:8px;background:transparent;padding:16px 18px;margin:20px 0;font-size:14.5px}
.box p:last-child{margin-bottom:0}
.toc{border-radius:16px;--lp-r:16px;background:transparent;padding:18px 20px;margin-bottom:34px}
.toc ol{margin:0 0 0 18px;font-size:13.5px;columns:2;column-gap:26px}
.toc a{color:var(--dim);text-decoration:none}
.toc a:hover{color:var(--fg)}
/* how it works */
.tag{display:inline-block;padding:2px 8px;border-radius:4px;font-size:11.5px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;vertical-align:2px}
.tag-solid{background:var(--tag-solid-bg);color:var(--tag-solid)}
.tag-estimate{background:var(--tag-est-bg);color:var(--tag-est)}
.tag-rough{background:var(--tag-rough-bg);color:var(--tag-rough)}
.section{padding-top:34px;margin-top:34px;border-top:1px solid var(--line)}
.section:first-of-type{padding-top:0;margin-top:0;border-top:none}
.section h2{display:flex;align-items:center;gap:10px;margin-top:0}
.section .lead{font-size:15.5px;font-weight:500;line-height:1.65;margin-bottom:10px}
.gaps{margin-top:16px;padding:16px 20px;border-radius:16px;--lp-r:16px;background:transparent}
.gaps .k{font-size:12px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.gaps ul{margin:0 0 0 18px;font-size:14.5px}
.gaps li{margin-bottom:5px}
/* pricing: v1062, the app's Membership screen (core/plans.js), on the page */
.pl-top{display:flex;align-items:flex-end;justify-content:space-between;gap:18px 28px;flex-wrap:wrap;margin-bottom:26px}
.pl-top h1{margin-bottom:8px}
.pl-top .lede{margin-bottom:0}
.pl-bill{position:relative;display:inline-flex;align-items:center;padding:3px;border-radius:999px;border:1px solid var(--ghost);font-size:13px;flex:none;isolation:isolate}
.pl-bill button{position:relative;z-index:1;border:0;background:transparent;color:var(--fg);font:inherit;font-weight:600;letter-spacing:inherit;padding:6px 14px;border-radius:999px;cursor:pointer;transition:color 160ms ease 60ms}
.pl-bill button span{font-weight:400;opacity:.85}
.pl-bill button[aria-checked="true"]{color:var(--btn-fg)}
.pl-bill i{position:absolute;z-index:0;top:3px;bottom:3px;left:3px;width:0;border-radius:999px;background:var(--btn);box-shadow:inset 1px 1px 0 0 rgba(255,255,255,.16),0 1px 3px rgba(0,0,0,.18);pointer-events:none}
.pl-groups{display:flex;gap:20px;align-items:stretch}
.pl-grp{display:flex;flex-direction:column;min-width:0}
.pl-grp.ind{flex:3 1 0}.pl-grp.biz{flex:1 1 0;min-width:250px}
.pl-gl{font-size:15px;font-weight:600;margin-bottom:12px}
.pl-div{width:1px;align-self:stretch;margin-top:34px;background:var(--line)}
.pl-cards{display:flex;gap:20px;align-items:stretch;flex:1}
.pl-card{position:relative;z-index:0;flex:1 1 0;min-width:0;display:flex;flex-direction:column;padding:22px 18px 18px;border-radius:16px;background:rgba(255,255,255,.62);backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);box-shadow:0 0 0 .5px rgba(0,0,0,.1),0 10px 30px -18px rgba(0,0,0,.18)}
html.dark .pl-card{background:rgba(16,22,29,.5);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.06),0 18px 40px -24px rgba(0,0,0,.6)}
.pl-rim{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;padding:1px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  background:linear-gradient(115deg,rgba(255,255,255,.75) 0%,rgba(255,255,255,.42) 30%,rgba(255,255,255,.1) 50%,rgba(255,255,255,.42) 70%,rgba(255,255,255,.75) 100%)}
html.dark .pl-rim{background:linear-gradient(115deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,.105) 30%,rgba(255,255,255,.015) 50%,rgba(255,255,255,.105) 70%,rgba(255,255,255,.2) 100%)}
.pl-card.pro .pl-rim{background:linear-gradient(118deg,rgba(255,146,60,.98) 0%,rgba(229,76,36,.62) 24%,rgba(229,76,36,.16) 50%,rgba(229,76,36,.66) 76%,rgba(255,170,90,1) 100%)}
.pl-card.max .pl-rim{background:linear-gradient(118deg,rgba(147,197,253,.98) 0%,rgba(59,130,246,.62) 24%,rgba(59,130,246,.16) 50%,rgba(59,130,246,.66) 76%,rgba(165,205,255,1) 100%)}
.pl-card.team .pl-rim{background:linear-gradient(118deg,rgba(134,239,172,.98) 0%,rgba(22,163,74,.62) 24%,rgba(22,163,74,.16) 50%,rgba(22,163,74,.66) 76%,rgba(160,240,190,1) 100%)}
.pl-card.pro{box-shadow:0 0 22px -6px rgba(229,76,36,.34),0 18px 46px -26px rgba(229,76,36,.55)}
.pl-card.max{box-shadow:0 0 22px -6px rgba(59,130,246,.34),0 18px 46px -26px rgba(59,130,246,.55)}
.pl-card.team{box-shadow:0 0 22px -6px rgba(22,163,74,.34),0 18px 46px -26px rgba(22,163,74,.55)}
.pl-badge{position:absolute;top:-11px;left:16px;z-index:3;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.04em;line-height:1.45;text-transform:uppercase;color:#1a0d05;background:linear-gradient(100deg,#ffb26b 0%,#ff9a45 45%,#e54c24 100%);box-shadow:0 4px 12px -4px rgba(229,76,36,.6)}
.pl-name{font-weight:600;font-size:15px}
.pl-price{margin:6px 0 10px;line-height:1.2;white-space:nowrap}
.pl-amt{font-weight:600;font-size:30px;display:inline-flex;align-items:flex-start}
.pl-sym{position:relative;display:inline-block;margin-right:1px}
.pl-code{position:absolute;left:1px;top:100%;margin-top:-7px;font-size:12px;font-weight:600;letter-spacing:.04em}
.pl-per{font-size:13px;color:var(--faint)}
.pl-blurb{font-size:13px;line-height:1.5;color:var(--dim);margin:8px 0 14px;min-height:38px}
.pl-seats{margin-bottom:12px}
.pl-seats label{display:block;font-size:12px;color:var(--dim);margin-bottom:4px}
.pl-seats select{font:inherit;font-size:13px;letter-spacing:inherit;width:120px;padding:5px 8px;border-radius:8px;border:1px solid var(--ghost);background:transparent;color:var(--fg)}
html.dark .pl-seats select option{background:#10161d}
.pl-total{margin-top:6px;font-size:13px}.pl-total span{color:var(--dim)}
.pl-feats{list-style:none;margin:0;flex:1;font-size:13px}
.pl-feats li{display:flex;gap:8px;line-height:1.55;margin-bottom:8px;color:var(--dim)}
.pl-feats li::before{content:"\2713";flex:none;color:var(--fg);opacity:.5}
.pl-card.pro .pl-feats li::before{opacity:1}
.pl-cta{display:block;margin-top:16px;padding:10px 0;border-radius:10px;text-align:center;font-size:13px;font-weight:600;text-decoration:none;background:var(--btn);color:var(--btn-fg);border:1px solid transparent;transition:opacity 120ms ease}
.pl-cta:hover{opacity:.88}
.pl-cta.ghost{background:transparent;color:var(--fg);border-color:var(--ghost)}
.pl-cta.ghost:hover{opacity:1;background:rgba(0,0,0,.04)}html.dark .pl-cta.ghost:hover{background:rgba(255,255,255,.05)}
.pl-dots{display:none}
/* the comparison: tier-coloured headings, a tinted band down each paid column */
.pl-cmp{margin-top:40px}
.pl-cmp .pl-head{position:sticky;top:var(--pl-navh,62px);z-index:3;display:grid;grid-template-columns:minmax(180px,1fr) repeat(4,118px);align-items:center;padding:10px 0 8px;border-bottom:1px solid var(--line);background:rgba(246,246,244,.95);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3)}
html.dark .pl-cmp .pl-head{background:rgba(12,17,23,.95)}
.pl-cmp h2{margin:0;font-size:19px}
.pl-th{text-align:center;padding:5px 0 4px;background:transparent;border:0;font:inherit;letter-spacing:inherit;color:inherit}
.pl-th b{display:block;font-weight:600;font-size:15px}
.pl-th small{display:block;font-size:12px;color:var(--faint);margin-top:1px}
.pl-th.pro b{color:#e54c24}.pl-th.max b{color:#3b82f6}.pl-th.team b{color:#16a34a}
.pl-rows{position:relative}
.pl-band{position:absolute;top:6px;bottom:6px;width:110px;border-radius:12px;pointer-events:none}
.pl-band.pro{right:240px;background:#e54c241a}.pl-band.max{right:122px;background:#3b82f61a}.pl-band.team{right:4px;background:#16a34a1a}
.pl-sec{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--faint);padding:16px 0 5px;border-bottom:1px solid var(--line);margin-bottom:2px}
.pl-row{display:grid;grid-template-columns:minmax(180px,1fr) repeat(4,118px);align-items:stretch;min-height:40px;border-bottom:1px solid var(--line)}
html.dark .pl-row{border-bottom-color:rgba(255,255,255,.06)}
.pl-row > div{display:flex;align-items:center;justify-content:center;text-align:center;font-size:13px;padding:9px 4px;font-weight:500}
.pl-row > div:first-child{justify-content:flex-start;text-align:left;padding:9px 8px 9px 2px;font-weight:400}
.pl-row .no{color:var(--faint);opacity:.55}
.pl-row svg{display:block}
.pl-note{color:var(--faint);font-size:12px;line-height:1.55;margin-top:18px;max-width:820px}
@media (max-width:1000px){.pl-groups{flex-direction:column}.pl-div{display:none}.pl-grp.biz{min-width:0}.pl-grp.biz .pl-card{flex:0 1 calc((100% - 40px) / 3);min-width:250px}}
/* phone: one plan to a page in a snapping rail, the table one column, following it */
@media (max-width:767px){
  .pl-top{align-items:flex-start}
  .pl-gl,.pl-div{display:none}
  .pl-rail{display:flex;flex-direction:row;align-items:stretch;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -16px;padding:16px 16px 28px}
  .pl-rail::-webkit-scrollbar{display:none}
  .pl-grp,.pl-cards{display:contents}
  .pl-card,.pl-grp.biz .pl-card{flex:0 0 100%;min-width:0;scroll-snap-align:center}
  .pl-dots{display:flex;justify-content:center;gap:7px;margin-top:-10px}
  .pl-dots button{width:22px;height:4px;border-radius:999px;border:0;padding:0;cursor:pointer;background:var(--ghost);transition:width 200ms ease,background-color 200ms ease}
  .pl-dots button[aria-current="true"]{width:30px;background:#e54c24}
  .pl-cmp .pl-head,.pl-row{grid-template-columns:minmax(0,1fr) repeat(4,0)}
  .pl-cmp .pl-head{grid-template-columns:minmax(0,1fr);row-gap:8px;margin:0 -16px;padding:10px 16px 9px}
  .pl-ths{display:flex;gap:6px}
  .pl-th{flex:1;border:1px solid var(--ghost);border-radius:10px;padding:5px 0;cursor:pointer}
  .pl-th[aria-pressed="true"]{border-color:var(--fg)}
  .pl-th small{font-size:11px}
  .pl-row{grid-template-columns:minmax(0,1fr) 108px}
  .pl-row > div[data-c]{display:none}
  .pl-band{display:none}
  .pl-cmp[data-only="free"] .pl-row > div[data-c="free"],.pl-cmp[data-only="pro"] .pl-row > div[data-c="pro"],.pl-cmp[data-only="max"] .pl-row > div[data-c="max"],.pl-cmp[data-only="team"] .pl-row > div[data-c="team"]{display:flex}
  .pl-cmp[data-only="pro"] .pl-band.pro,.pl-cmp[data-only="max"] .pl-band.max,.pl-cmp[data-only="team"] .pl-band.team{display:block;right:4px;width:100px}
}
@media (min-width:768px){.pl-ths{display:contents}}
@media (prefers-reduced-motion:reduce){.pl-bill i{transition:none !important}}
/* questions (v1000: moved here from the landing) */
.faq{margin-top:44px}
.faq h2{margin-bottom:14px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 2px;font-size:15px;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--dim);border-bottom:2px solid var(--dim);transform:rotate(45deg) translateY(-3px);flex:none;transition:transform .18s ease}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-1px)}
.faq details p{color:var(--dim);font-size:15px;line-height:1.65;padding:0 2px 6px}
/* about */
.about{display:flex;gap:22px;align-items:flex-start}
.avatar{width:96px;height:96px;border-radius:50%;flex:none;border:1px solid var(--ghost);background:var(--card);display:flex;align-items:center;justify-content:center;color:var(--faint)}
.sig{padding-top:14px;margin-top:6px;border-top:1px solid var(--line)}
.sig .n{font-weight:600}
.sig .r{color:var(--faint);font-size:12.5px}
/* footer */
footer{border-top:1px solid var(--line);margin-top:40px}
.foot-grid{display:flex;flex-wrap:wrap;gap:28px 56px;align-items:flex-start;padding:40px 40px 18px}
.foot-brand{flex:1 1 220px;min-width:200px}
.foot-brand .lockup{font-size:20px}
.foot-brand p{margin-top:8px;font-size:13px;line-height:1.55;color:var(--dim);max-width:300px}
.foot-social{display:flex;gap:14px;margin-top:16px}
.foot-social a{display:inline-flex;align-items:center;justify-content:center;color:var(--dim);transition:color .12s ease}
.foot-social a:hover{color:var(--fg)}
.foot-col{flex:0 0 auto;min-width:130px}
.foot-col .k{font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--faint);margin-bottom:10px}
.foot-col a{display:block;font-size:13px;line-height:1.5;padding:3px 0;color:var(--dim);text-decoration:none}
.foot-col a:hover{color:var(--fg)}
.foot-bar{border-top:1px solid var(--line);padding:14px 40px 22px;font-size:12px;color:var(--faint);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
@media(max-width:767px){.nav-links,.nav-right{display:none}.menu-btn{display:inline-flex}.mcta{display:inline-block}
  .toc ol{columns:1}.about{flex-direction:column}
  nav .col{width:100%}.nav-in{gap:8px;padding:10px 14px;border-left:0;border-right:0}
  .mcta.btn-nav{margin-left:auto;padding:8px 14px;white-space:nowrap}
  .menu-btn{width:30px;margin-right:-5px}
  .btn,.btn-ghost{border-radius:13px}
  .rails{display:none}main>.col{padding-left:0;padding-right:0}
  .foot-grid{padding:40px 0 18px}.foot-bar{padding:14px 0 22px}
  .matrix{font-size:12px}.matrix th,.matrix td{padding:7px 6px}}

html .toc.lpg::before,html .gaps.lpg::before,html .hx-drv .lpg::before{box-shadow:inset 1px 1.4px 0 0 rgba(255,255,255,.9),inset -.7px -1px 0 0 rgba(255,255,255,.5),inset 0 0 0 .5px rgba(0,0,0,.08),inset 0 0 18px 0 rgba(255,255,255,.22),0 10px 28px -16px rgba(0,0,0,.18)}
html.dark .toc.lpg::before,html.dark .gaps.lpg::before,html.dark .hx-drv .lpg::before{box-shadow:inset 1px 1.4px 0 0 rgba(255,255,255,.2),inset -.7px -1px 0 0 rgba(255,255,255,.07),inset 0 0 0 .5px rgba(255,255,255,.06),inset 0 0 18px 0 rgba(255,255,255,.03),0 18px 40px -24px rgba(0,0,0,.6)}

/* v1067: How it works, the rider model demo */
.hx{--hx-acc:#d4431d;margin:22px 0 26px}
/* wider than the prose column, centred on it (the column is centred in the page) */
@media(min-width:768px){.hx{--hx-w:calc(min(1264px,100vw - 48px) - 80px);width:var(--hx-w);margin-left:calc(50% - var(--hx-w) / 2)}}
.hx-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:12px;margin-top:16px}
@media(max-width:860px){.hx-stage{grid-template-columns:minmax(0,1fr)}}
.hx-vp{position:relative;min-width:0;height:500px;border-radius:16px;overflow:hidden;background:#e9eaea;box-shadow:0 10px 28px -14px rgba(0,0,0,.22),0 2px 6px -2px rgba(0,0,0,.08)}
html.dark .hx-vp{background:#0e141b;box-shadow:0 18px 40px -22px rgba(0,0,0,.7)}
/* the app's liquid glass rim, as a layer over the 3D view (the view fills the box): the shared
   light's crescent top left, its echo bottom right, a hairline and a soft inner glow */
.hx-vp::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:6;
  box-shadow:inset 1px 1.4px 0 0 rgba(255,255,255,.95),inset -.7px -1px 0 0 rgba(255,255,255,.55),inset 0 0 0 .5px rgba(0,0,0,.12),inset 0 0 0 1.5px rgba(255,255,255,.35),inset 0 0 18px 0 rgba(255,255,255,.3)}
html.dark .hx-vp::after{box-shadow:inset 1px 1.4px 0 0 rgba(255,255,255,.26),inset -.7px -1px 0 0 rgba(255,255,255,.1),inset 0 0 0 .5px rgba(255,255,255,.09),inset 0 0 0 1.5px rgba(255,255,255,.03),inset 0 0 18px 0 rgba(255,255,255,.04)}
/* the standing view is a picture: the wheel and a finger scroll the page over it */
#hxStand{pointer-events:none}
.hx-zoom{position:absolute;right:12px;bottom:12px;z-index:7;display:flex;gap:6px}
.hx-zoom button{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:999px;color:var(--fg);cursor:pointer;font:inherit;
  background:rgba(255,255,255,.42);backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px) saturate(1.3);
  box-shadow:inset 1px 1.4px 0 0 rgba(255,255,255,.9),inset -.7px -1px 0 0 rgba(255,255,255,.5),inset 0 0 0 .5px rgba(0,0,0,.1),inset 0 0 14px 0 rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.05);transition:background-color .16s ease}
.hx-zoom button:hover{background:rgba(255,255,255,.72)}
html.dark .hx-zoom button{background:rgba(255,255,255,.045);box-shadow:inset 1px 1.4px 0 0 rgba(255,255,255,.24),inset -.7px -1px 0 0 rgba(255,255,255,.09),inset 0 0 14px 0 rgba(255,255,255,.04)}
html.dark .hx-zoom button:hover{background:rgba(255,255,255,.09)}
.hx-zoom svg{width:15px;height:15px}
.hx-hint{position:absolute;left:14px;bottom:14px;z-index:7;font-size:11.5px;color:var(--faint);pointer-events:none}
@media(hover:none){.hx-hint{display:none}}
@media(max-width:860px){.hx-vp{height:420px}}
.hx-3d{position:absolute;inset:0}
.hx-3d .bikecfg{height:100% !important}
.hx-cap{position:absolute;left:14px;top:12px;z-index:7;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--dim);pointer-events:none}
.hx-cap i{width:8px;height:8px;border-radius:50%;background:var(--hx-acc)}
.hx-load{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--faint);transition:opacity .4s ease}
.hx-ctl{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:12px}
@media(max-width:1000px){.hx-ctl{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){.hx-ctl{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hx-sl{min-width:0;padding:12px 14px 13px;border-radius:14px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.hx-sl .r{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.hx-sl .n{font-size:13px;font-weight:600}
.hx-sl .v{font-size:13px;font-variant-numeric:tabular-nums;color:var(--dim);white-space:nowrap}
/* the app's own sliders (src/core/appcss.js, v850): a flat channel, the run up to the thumb in a
   darker grey, a small upright bar for the thumb; the fill edge sits at the thumb's centre (--bv-p) */
.hx-sl{--sl-track:7px;--sl-thumb:7px;--sl-thumb-h:17px;--sl-h:18px;--sl-r:2px;--sl-kr:2px;--sl-bg:rgba(0,0,0,0.1);--sl-fill:#8c8c8c;--sl-knob:#262626}
html.dark .hx-sl{--sl-bg:rgba(255,255,255,0.11);--sl-fill:rgba(255,255,255,0.42);--sl-knob:#e8e8ea}
@media(max-width:767px){.hx-sl{--sl-track:10px;--sl-thumb:11px;--sl-thumb-h:28px;--sl-h:34px;--sl-r:5px;--sl-kr:4px}}
.hx-sl input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:var(--sl-h);margin:8px 0 0;padding:0;background:transparent;cursor:pointer}
.hx-sl input[type=range]:focus{outline:none}
.hx-sl input[type=range]:focus-visible{outline:2px solid var(--fg);outline-offset:3px;border-radius:4px}
.hx-sl input[type=range]::-webkit-slider-runnable-track{height:var(--sl-track);border-radius:var(--sl-r);border:none;box-shadow:none;
  background:linear-gradient(to right,var(--sl-fill) 0,var(--sl-fill) calc(var(--sl-thumb) / 2 + (100% - var(--sl-thumb)) * var(--bv-p,0)),var(--sl-bg) calc(var(--sl-thumb) / 2 + (100% - var(--sl-thumb)) * var(--bv-p,0)))}
.hx-sl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:var(--sl-thumb);height:var(--sl-thumb-h);border-radius:var(--sl-kr);background:var(--sl-knob);border:none;box-shadow:none;margin-top:calc((var(--sl-track) - var(--sl-thumb-h)) / 2)}
.hx-sl input[type=range]::-moz-range-track{height:var(--sl-track);border-radius:var(--sl-r);border:none;background:var(--sl-bg)}
.hx-sl input[type=range]::-moz-range-progress{height:var(--sl-track);border-radius:var(--sl-r);background:var(--sl-fill)}
.hx-sl input[type=range]::-moz-range-thumb{width:var(--sl-thumb);height:var(--sl-thumb-h);border-radius:var(--sl-kr);background:var(--sl-knob);border:none;box-shadow:none}
.hx-sl .s{margin-top:3px;font-size:11.5px;line-height:1.4;color:var(--faint)}
.hx-sl .lim{color:var(--hx-acc)}
.hx-row{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;margin-top:10px}
.hx-key{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--dim)}
.hx-key span{display:inline-flex;align-items:center;gap:6px}
.hx-key i{width:9px;height:9px;border-radius:50%;background:var(--hx-acc)}
.hx-key i.b{width:14px;height:2px;border-radius:0;background:var(--fg)}
.hx-reset{font:inherit;letter-spacing:inherit;font-size:12.5px;font-weight:600;padding:7px 14px;border-radius:999px;border:1px solid var(--ghost);background:transparent;color:var(--fg);cursor:pointer}
.hx-reset:hover{background:rgba(0,0,0,.05)}html.dark .hx-reset:hover{background:rgba(255,255,255,.06)}
.hx-drv{list-style:none;margin:22px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media(max-width:1000px){.hx-drv{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.hx-drv{grid-template-columns:minmax(0,1fr)}}
/* glass panels, as the contents and gaps boxes (PANEL_CSS in site/prerender.jsx) */
.hx-drv li{min-width:0;margin:0;padding:16px 16px 14px;border-radius:16px;--lp-r:16px;background:transparent}
.hx-drv .k{font-size:12px;font-weight:700;color:var(--hx-acc);font-variant-numeric:tabular-nums}
.hx-drv h3{margin:4px 0 0;font-size:15.5px}
.hx-drv p{margin:6px 0 0;font-size:13.5px;line-height:1.55;color:var(--dim)}
.hx-foot{margin-top:0;font-size:14px;color:var(--dim)}
.hx-foot b{color:var(--fg);font-weight:600}

/* v1067: How it works, the seat tube demo (shares .hx, .hx-vp, .hx-cap, .hx-zoom with the rider demo) */
.hx-st .hx-vp{height:580px}
@media(max-width:860px){.hx-st .hx-vp{height:380px}}
.hx-st-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:12px;margin-top:12px;align-items:start}
@media(max-width:860px){.hx-st-row{grid-template-columns:minmax(0,1fr)}}
.hx-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
/* the app's seat tube cards: the drawing is the card, the name sits on it at the bottom */
.hx-card{position:relative;aspect-ratio:118/97;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 8px 9px;border:0;border-radius:14px;overflow:hidden;cursor:pointer;color:var(--fg);font:inherit;letter-spacing:inherit;
  background:#e9eaea;
  box-shadow:inset 1px 1.4px 0 0 rgba(255,255,255,.9),inset -.7px -1px 0 0 rgba(255,255,255,.5),inset 0 0 0 .5px rgba(0,0,0,.08),0 6px 16px -10px rgba(0,0,0,.22);transition:background-color .2s ease,box-shadow .2s ease,transform .16s ease}
html.dark .hx-card{background:#0e141b;box-shadow:inset 1px 1.4px 0 0 rgba(255,255,255,.22),inset -.7px -1px 0 0 rgba(255,255,255,.08),inset 0 0 0 .5px rgba(255,255,255,.06),0 6px 16px -10px rgba(0,0,0,.6)}
/* the same fill as the viewport above (.hx-vp), so the cards read as pieces of it */
.hx-card:hover{background:#efefef}html.dark .hx-card:hover{background:#121922}
.hx-card:active{transform:scale(.985)}
.hx-card[aria-pressed="true"]{background:#e9eaea;box-shadow:inset 1px 1.4px 0 0 rgba(255,255,255,.9),inset 0 0 0 1.5px var(--hx-acc),0 8px 20px -10px rgba(0,0,0,.28)}
html.dark .hx-card[aria-pressed="true"]{background:#0e141b;box-shadow:inset 1px 1.4px 0 0 rgba(255,255,255,.22),inset 0 0 0 1.5px var(--hx-acc),0 8px 20px -10px rgba(0,0,0,.7)}
.hx-card svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;color:var(--fg);opacity:.86;transition:opacity .2s ease,color .2s ease}
.hx-card[aria-pressed="true"] svg{color:var(--hx-acc);opacity:1}.hx-card:hover svg{opacity:1}
.hx-card span{position:relative;font-size:12.5px;font-weight:600;line-height:1.2;text-align:center}
.hx-card .s{display:none}
@media(max-width:560px){.hx-card span.l{display:none}.hx-card .s{display:inline}.hx-card span{font-size:11.5px}}
.hx-side{display:flex;flex-direction:column;gap:10px;min-width:0}
.hx-desc{min-width:0;padding:14px 16px;border-radius:14px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.hx-desc h3{margin:0;font-size:15px}
.hx-desc p{margin:6px 0 0;font-size:13.5px;line-height:1.55;color:var(--dim)}
.hx-key2{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;font-size:12px;color:var(--dim)}