/* OnProd site: the landing page, /pricing and the legal pages.
   Site additions: self-hosted fonts (no third-party requests), the page colour on <html> so overscroll matches the
   dark design, the "Site pages" section (pricing and legal pages) and the "Phones" section at the end. Everything
   between "Design styles" and "Site pages" is the approved design's CSS, unchanged. */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/inter-latin-wght-normal.woff2") format("woff2")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/geist-mono-latin-wght-normal.woff2") format("woff2")}
html{background:oklch(0.135 0.008 262);color-scheme:dark}

/* Design styles */
body{margin:0}
.t-light{--frame:oklch(0.975 0.003 255);--panel:oklch(1 0 0);--card:oklch(1 0 0);--fg:oklch(0.20 0.01 255);--mfg:oklch(0.50 0.012 255);--muted:oklch(0.967 0.003 255);--hover:oklch(0.957 0.004 255);--nav-on:oklch(0.93 0.005 255);--border:oklch(0.915 0.004 255);--hair:oklch(0.94 0.003 255);--input:oklch(0.895 0.005 255);--pri:oklch(0.53 0.16 252);--solid:oklch(0.53 0.16 252);--pri-s:oklch(0.965 0.018 245);--pri-soft:oklch(0.85 0.06 245);--ok:oklch(0.52 0.14 150);--warn:oklch(0.55 0.13 65);--bad:oklch(0.54 0.20 27);--ok-s:oklch(0.96 0.04 150);--warn-s:oklch(0.96 0.045 80);--bad-s:oklch(0.96 0.03 25);--stage:oklch(0.955 0.003 255);--dot:oklch(0.89 0.004 255);--sh1:0 1px 2px 0 oklch(0.2 0.01 255 / 0.05);--sh2:0 1px 3px 0 oklch(0.2 0.01 255 / 0.07),0 1px 2px -1px oklch(0.2 0.01 255 / 0.05);--sh3:0 24px 48px -16px oklch(0.25 0.03 255 / 0.18),0 2px 6px -2px oklch(0.2 0.01 255 / 0.08)}
.t-dark{--frame:oklch(0.155 0.004 255);--panel:oklch(0.185 0.005 255);--card:oklch(0.205 0.006 255);--fg:oklch(0.97 0.003 255);--mfg:oklch(0.70 0.01 255);--muted:oklch(0.25 0.007 255);--hover:oklch(0.255 0.008 255);--nav-on:oklch(0.23 0.007 255);--border:oklch(1 0 0 / 8%);--hair:oklch(1 0 0 / 5.5%);--input:oklch(1 0 0 / 11%);--pri:oklch(0.74 0.12 248);--solid:oklch(0.55 0.15 252);--pri-s:oklch(0.28 0.045 250);--pri-soft:oklch(0.43 0.08 250);--ok:oklch(0.76 0.16 150);--warn:oklch(0.80 0.14 75);--bad:oklch(0.72 0.18 25);--ok-s:oklch(0.28 0.05 150);--warn-s:oklch(0.28 0.05 75);--bad-s:oklch(0.28 0.06 25);--stage:oklch(0.16 0.004 255);--dot:oklch(0.31 0.006 255);--sh1:0 1px 2px 0 oklch(0 0 0 / 0.25);--sh2:0 1px 3px 0 oklch(0 0 0 / 0.35);--sh3:0 24px 48px -16px oklch(0 0 0 / 0.6),0 2px 6px -2px oklch(0 0 0 / 0.4)}
.t-light{--page:oklch(0.992 0.002 255);--surf:oklch(1 0 0);--surf2:oklch(0.982 0.003 255);--line:oklch(0.2 0.01 255 / 9%);--line2:oklch(0.2 0.01 255 / 14%);--glow:oklch(0.62 0.16 252 / 0.30);--glow2:oklch(0.72 0.12 248 / 0.24);--h-from:oklch(0.2 0.012 255);--h-to:oklch(0.44 0.02 255);--grid:oklch(0.25 0.02 255 / 6%);--pri2:oklch(0.62 0.13 228);--hl:oklch(1 0 0 / 0.9);--shot:0 40px 100px -30px oklch(0.4 0.12 252 / 0.32),0 0 0 1px oklch(0.2 0.01 255 / 3%)}
.t-dark{--page:oklch(0.135 0.008 262);--surf:oklch(0.168 0.008 262);--surf2:oklch(0.198 0.011 262);--line:oklch(1 0 0 / 7.5%);--line2:oklch(1 0 0 / 12%);--glow:oklch(0.55 0.18 254 / 0.55);--glow2:oklch(0.48 0.16 256 / 0.34);--h-from:oklch(0.99 0 0);--h-to:oklch(0.70 0.025 258);--grid:oklch(1 0 0 / 5%);--pri2:oklch(0.82 0.09 225);--hl:oklch(1 0 0 / 0.07);--shot:0 40px 140px -30px oklch(0.45 0.18 254 / 0.55),0 0 0 1px oklch(0 0 0 / 0.4)}
.app{font-family:"Inter",ui-sans-serif,system-ui,sans-serif;font-size:14px;line-height:20px;letter-spacing:-0.006em;font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased;background:var(--page);color:var(--fg)}
.mono{font-family:"Geist Mono",ui-monospace,monospace;font-size:12.5px;letter-spacing:0}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--mfg)}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{letter-spacing:-0.018em}
a{color:var(--pri);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{position:relative;width:100%;max-width:1200px;margin:0 auto;padding:0 32px;box-sizing:border-box}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;padding:0 13px;box-sizing:border-box;border-radius:8px;border:1px solid var(--line2);background:var(--surf2);color:var(--fg);font:inherit;font-size:13px;font-weight:520;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--hover);text-decoration:none}
.btn-pri{background:var(--solid);border-color:transparent;color:#fff;box-shadow:inset 0 1px 0 oklch(1 0 0 / 0.22),0 0 0 1px oklch(0.45 0.16 253),0 10px 30px -10px var(--glow)}
.btn-pri:hover{background:color-mix(in oklab,var(--solid) 88%,black)}
.btn-lg{height:44px;padding:0 20px;border-radius:10px;font-size:14.5px}
.btn:focus-visible,a:focus-visible,.faq-q:focus-visible,.icon-btn:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
.nav{display:flex;align-items:center;gap:4px;height:56px;padding:0 8px 0 14px;box-sizing:border-box;border:1px solid var(--line);border-radius:14px;background:color-mix(in oklab,var(--surf) 72%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 var(--hl)}
.navl{display:inline-flex;align-items:center;height:36px;padding:0 11px;border-radius:8px;color:var(--mfg);font-size:13.5px;font-weight:480}
.navl:hover{color:var(--fg);background:var(--hover);text-decoration:none}
.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;box-sizing:border-box;border-radius:7px;border:1px solid var(--border);background:var(--card);font-size:12px;font-weight:500;color:var(--fg);white-space:nowrap}
.pill{display:inline-flex;align-items:center;gap:10px;height:32px;padding:0 12px 0 4px;box-sizing:border-box;border-radius:999px;border:1px solid var(--line2);background:color-mix(in oklab,var(--surf) 75%,transparent);font-size:13px;font-weight:500;color:var(--fg);box-shadow:inset 0 1px 0 var(--hl)}
.pill:hover{text-decoration:none;border-color:color-mix(in oklab,var(--pri) 50%,transparent)}
.pill svg{color:var(--mfg)}
.ai{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;box-sizing:border-box;border-radius:999px;background:var(--pri-s);color:var(--pri);font-size:11.5px;font-weight:600;white-space:nowrap}
.st{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 7px;box-sizing:border-box;border-radius:6px;font-size:11.5px;font-weight:560;white-space:nowrap}
.dot{width:7px;height:7px;border-radius:50%;flex:none}
.card{background:var(--card);border:1px solid var(--border);border-radius:11px;box-shadow:var(--sh1)}
.arow{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;column-gap:12px;padding:11px 14px;border-top:1px solid var(--hair);color:var(--fg)}
.arow:hover{background:var(--hover);text-decoration:none}
.ico{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex:none}
.cite{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px;box-sizing:border-box;border-radius:7px;border:1px solid var(--border);background:var(--card);font-size:12px;font-weight:500;color:var(--fg);white-space:nowrap}
.cite:hover{border-color:var(--pri);text-decoration:none}
.cite svg{color:var(--pri)}
.ell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hero-bg{position:absolute;left:0;right:0;top:-160px;height:1000px;pointer-events:none;background:radial-gradient(48% 52% at 50% 0%,var(--glow2),transparent 72%)}
.grid-bg{position:absolute;left:0;right:0;top:0;height:860px;pointer-events:none;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:56px 56px;background-position:center top;-webkit-mask-image:radial-gradient(58% 70% at 50% 0%,#000 15%,transparent 75%);mask-image:radial-gradient(58% 70% at 50% 0%,#000 15%,transparent 75%)}
.hero-h1{font-size:76px;line-height:80px;font-weight:650;letter-spacing:-0.046em;text-wrap:balance}
.hero-sub{margin:-10px 0 0;font-size:28px;line-height:34px;font-weight:560;letter-spacing:-0.025em;color:var(--fg)}
.grad{background:linear-gradient(180deg,var(--h-from) 30%,var(--h-to) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.grad-pri{background:linear-gradient(90deg,var(--pri) 0%,var(--pri2) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.install{display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 6px 0 14px;box-sizing:border-box;border:1px solid var(--line2);border-radius:11px;background:color-mix(in oklab,var(--surf) 80%,transparent);max-width:100%}
.install .mono{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mfg)}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;width:30px;height:30px;border-radius:7px;border:0;background:transparent;color:var(--mfg);cursor:pointer}
.icon-btn:hover{background:var(--hover);color:var(--fg)}
.shot{position:relative}
.shot::before{content:"";position:absolute;left:10%;right:10%;top:-50px;height:62%;background:radial-gradient(closest-side,var(--glow),transparent);filter:blur(56px);pointer-events:none}
.frame{position:relative;border-radius:16px;border:1px solid var(--line2);background:var(--frame);box-shadow:var(--shot);overflow:hidden;text-align:left}
.frame::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--pri) 80%,white),transparent);opacity:.75;pointer-events:none}
.fade-b{-webkit-mask-image:linear-gradient(180deg,#000 74%,transparent 100%);mask-image:linear-gradient(180deg,#000 74%,transparent 100%)}
.wdot{width:10px;height:10px;border-radius:50%;background:var(--dot);flex:none}
.sn{display:flex;align-items:center;gap:9px;height:32px;padding:0 9px;border-radius:7px;color:var(--mfg);font-size:13px;font-weight:500}
.sn svg{flex:none}
.sn-on{background:var(--nav-on);color:var(--fg)}
.sec{position:relative;padding:136px 0 0}
.sec-head{display:flex;flex-direction:column;gap:16px;max-width:760px}
.sec-head.c{align-items:center;text-align:center;margin:0 auto}
.kicker{display:inline-flex;align-items:center;gap:10px;font-family:"Geist Mono",ui-monospace,monospace;font-size:12px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--mfg)}
.kicker b{font-weight:500;color:var(--pri)}
.kicker i{display:inline-block;width:22px;height:1px;background:var(--line2)}
.h2{font-size:50px;line-height:56px;font-weight:640;letter-spacing:-0.038em;text-wrap:balance}
.h3{font-size:30px;line-height:36px;font-weight:630;letter-spacing:-0.03em;text-wrap:balance}
.lead{font-size:17px;line-height:27px;color:var(--mfg);text-wrap:pretty}
.wm{font-size:17px;font-weight:620;letter-spacing:-0.03em;color:var(--mfg);opacity:.8}
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.bc{position:relative;display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,var(--surf2),var(--surf) 65%);overflow:hidden;box-shadow:inset 0 1px 0 var(--hl)}
.bc-vis{position:relative;flex:1;min-height:230px;display:flex;align-items:center;justify-content:center;padding:28px;box-sizing:border-box;background:radial-gradient(70% 90% at 50% 0%,color-mix(in oklab,var(--pri) 13%,transparent),transparent 72%)}
.bc-txt{display:flex;flex-direction:column;gap:8px;padding:0 24px 24px}
.bc-t{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:620;letter-spacing:-0.016em}
.bc-t svg{color:var(--pri);flex:none}
.bc-d{font-size:14px;line-height:22px;color:var(--mfg);text-wrap:pretty}
.mini{border:1px solid var(--border);border-radius:12px;background:var(--panel);box-shadow:var(--sh3)}
.skel{display:block;border-radius:4px;background:var(--muted)}
.field{display:block;height:30px;border-radius:7px;border:1px solid var(--input);background:var(--card)}
.pipe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.step{position:relative;display:flex;flex-direction:column;gap:10px;padding:22px;border:1px solid var(--line);border-radius:16px;background:var(--surf);box-shadow:inset 0 1px 0 var(--hl)}
.step:not(:last-child)::after{content:"";position:absolute;top:36px;right:-17px;width:17px;height:1px;background:linear-gradient(90deg,var(--line2),color-mix(in oklab,var(--pri) 60%,transparent))}
.step-n{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;font-family:"Geist Mono",ui-monospace,monospace;font-size:12px;color:var(--pri);background:color-mix(in oklab,var(--pri) 13%,transparent);border:1px solid color-mix(in oklab,var(--pri) 32%,transparent)}
.step h3{font-size:15.5px;font-weight:620;letter-spacing:-0.015em}
.step p{font-size:13.5px;line-height:21px;color:var(--mfg)}
.g-row{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-top:1px solid var(--line)}
.g-row:first-child{border-top:0;padding-top:0}
.g-ico{display:flex;align-items:center;justify-content:center;flex:none;width:34px;height:34px;border-radius:10px;border:1px solid var(--line2);background:var(--surf2);color:var(--pri)}
.g-row h3{font-size:15px;font-weight:600;letter-spacing:-0.012em}
.g-row p{font-size:14px;line-height:21px;color:var(--mfg)}
.tick{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:22px;color:var(--fg)}
.tick svg{flex:none;margin-top:3px;color:var(--pri)}
.inc{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,265px),1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.inc-c{display:flex;flex-direction:column;gap:14px;padding:26px 24px;background:var(--surf)}
.inc-h{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:620;letter-spacing:-0.014em}
.inc-h svg{color:var(--pri)}
.inc-li{display:flex;gap:10px;font-size:13.5px;line-height:20px;color:var(--mfg)}
.inc-li svg{flex:none;margin-top:2px;color:var(--pri)}
.editor{border-radius:16px;border:1px solid oklch(1 0 0 / 10%);background:oklch(0.165 0.01 262);box-shadow:var(--shot);overflow:hidden;color:oklch(0.9 0.01 255)}
.ed-bar{display:flex;align-items:center;gap:8px;height:42px;padding:0 14px;border-bottom:1px solid oklch(1 0 0 / 8%)}
.ed-dot{width:10px;height:10px;border-radius:50%;background:oklch(1 0 0 / 15%)}
.ed-tab{font-family:"Geist Mono",ui-monospace,monospace;font-size:12px;color:oklch(0.86 0.01 255);padding:4px 10px;border-radius:6px;background:oklch(1 0 0 / 7%)}
.ed-code{display:block;margin:0;padding:18px 20px 22px;font-family:"Geist Mono",ui-monospace,monospace;font-size:13px;line-height:23px;white-space:pre;overflow-x:auto}
.ln{display:inline-block;width:26px;color:oklch(0.48 0.01 255);user-select:none}
.tk-tag{color:oklch(0.76 0.12 248)}
.tk-attr{color:oklch(0.80 0.09 210)}
.tk-str{color:oklch(0.85 0.11 85)}
.tk-fn{color:oklch(0.92 0.01 255);font-weight:500}
.tk-com{color:oklch(0.58 0.012 255)}
.vstep{position:relative;display:flex;gap:18px;padding-bottom:30px}
.vstep:not(:last-child)::before{content:"";position:absolute;left:15px;top:36px;bottom:4px;width:1px;background:linear-gradient(180deg,color-mix(in oklab,var(--pri) 55%,transparent),var(--line))}
.vstep h3{font-size:17px;font-weight:620;letter-spacing:-0.018em}
.vstep p{font-size:14.5px;line-height:23px;color:var(--mfg)}
.ptile{display:flex;flex-direction:column;gap:12px;padding:24px;border:1px solid var(--line);border-radius:18px;background:var(--surf);box-shadow:inset 0 1px 0 var(--hl)}
.ptile h3{font-size:16px;font-weight:620;letter-spacing:-0.015em}
.ptile p{font-size:14px;line-height:22px;color:var(--mfg)}
.plan{position:relative;display:flex;flex-direction:column;gap:20px;padding:28px;border:1px solid var(--line);border-radius:20px;background:var(--surf);box-shadow:inset 0 1px 0 var(--hl)}
.plan-hot{border-color:color-mix(in oklab,var(--pri) 55%,transparent);background:radial-gradient(90% 55% at 50% 0%,color-mix(in oklab,var(--pri) 18%,transparent),transparent 70%),var(--surf);box-shadow:0 0 0 1px color-mix(in oklab,var(--pri) 28%,transparent),0 30px 90px -30px var(--glow)}
.price{display:flex;align-items:baseline;gap:6px}
.price b{font-size:44px;line-height:48px;font-weight:640;letter-spacing:-0.045em;font-variant-numeric:tabular-nums}
.faq{border-top:1px solid var(--line)}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:60px;padding:16px 0;border:0;background:transparent;font:inherit;font-size:16px;font-weight:560;letter-spacing:-0.012em;color:var(--fg);text-align:left;cursor:pointer}
.faq-q svg{flex:none;color:var(--mfg);transition:transform .2s ease}
.faq-q[aria-expanded=true] svg{transform:rotate(45deg);color:var(--pri)}
.faq-a{padding:0 44px 20px 0;font-size:14.5px;line-height:24px;color:var(--mfg);max-width:720px}
.cta{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:22px;padding:96px 32px;border-radius:28px;text-align:center;color:#fff;background:radial-gradient(90% 120% at 50% 0%,oklch(0.64 0.16 250) 0%,oklch(0.50 0.17 254) 45%,oklch(0.29 0.11 263) 100%);box-shadow:0 40px 120px -40px var(--glow)}
.cta::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(oklch(1 0 0 / 8%) 1px,transparent 1px),linear-gradient(90deg,oklch(1 0 0 / 8%) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(70% 80% at 50% 0%,#000,transparent 80%);mask-image:radial-gradient(70% 80% at 50% 0%,#000,transparent 80%)}
.cta>*{position:relative}
.btn-white{background:#fff;color:oklch(0.26 0.07 260);border-color:transparent;box-shadow:0 10px 30px -10px oklch(0 0 0 / 0.4)}
.btn-white:hover{background:oklch(0.95 0.01 255)}
.btn-line{background:oklch(1 0 0 / 10%);color:#fff;border-color:oklch(1 0 0 / 30%)}
.btn-line:hover{background:oklch(1 0 0 / 17%)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ctab{max-width:960px;width:100%;margin:0 auto;border:1px solid var(--line);border-radius:20px;background:var(--surf);overflow:hidden;box-shadow:inset 0 1px 0 var(--hl),0 30px 90px -50px var(--glow)}
.ct-row{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr);border-top:1px solid var(--line)}
.ct-row:first-child{border-top:0}
.ct-row>*{display:flex;flex-direction:column;justify-content:center;gap:3px;padding:16px 24px;font-size:15px;line-height:22px}
.ct-head>*{padding:22px 24px}
.ct-foot{border-top:0}
.ct-foot>*{padding:4px 24px 22px}
.ct-c{align-items:center;text-align:center}
.ct-hot{background:color-mix(in oklab,var(--pri) 9%,transparent);box-shadow:inset 1px 0 0 color-mix(in oklab,var(--pri) 28%,transparent)}
.ct-yes{display:inline-flex;color:var(--pri)}
.ct-no{font-size:18px;color:var(--mfg);opacity:.55}
.ct-note{font-size:12.5px;line-height:18px;color:var(--mfg)}
.p3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.p2{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px;align-items:stretch}
.radio{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:var(--card)}
.radio-on{border-color:var(--pri);box-shadow:0 0 0 1px var(--pri)}
.radio-dot{flex:none;width:16px;height:16px;margin-top:2px;border-radius:50%;border:1.5px solid var(--input);box-sizing:border-box}
.radio-on .radio-dot{border:5px solid var(--solid)}
.rt{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:12px;align-items:center;padding:12px 18px;border-top:1px solid var(--hair);font-size:13.5px}
.foot a{color:var(--mfg);font-size:13.5px}
.foot a:hover{color:var(--fg);text-decoration:none}
@media (max-width:1000px){.pipe{grid-template-columns:repeat(2,minmax(0,1fr))}.step::after{display:none}.shot-cols{grid-template-columns:minmax(0,1fr) !important}}
@media (max-width:900px){.bento,.p3,.p2{grid-template-columns:minmax(0,1fr)}.bento>*{grid-column:auto !important}}
@media (max-width:760px){.ct-row>*{padding:12px 10px;font-size:13px}.ct-row .ct-c .ct-note{display:none}.wrap{padding:0 16px}.hero-h1{font-size:44px !important;line-height:48px !important}.hero-sub{font-size:21px;line-height:27px;margin-top:-8px}.h2{font-size:34px;line-height:40px}.h3{font-size:24px;line-height:30px}.sec{padding-top:96px}.pipe{grid-template-columns:minmax(0,1fr)}.cta{padding:56px 20px}.hide-sm{display:none !important}.kpis{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}

/* Site pages: /pricing and the legal pages, in the design's tokens */
.page-top{padding-top:88px}
.bill{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--line2);border-radius:12px;background:var(--surf);box-shadow:inset 0 1px 0 var(--hl)}
.bill[hidden]{display:none}
.bill button{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border:0;border-radius:8px;background:transparent;color:var(--mfg);font:inherit;font-size:13.5px;font-weight:540;cursor:pointer}
.bill button:hover{color:var(--fg)}
.bill button[aria-pressed=true]{background:var(--surf2);color:var(--fg);box-shadow:inset 0 0 0 1px var(--line2)}
.bill button:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch}
.plans .plan{gap:18px;padding:24px}
.plans .per-year,.plans[data-interval=year] .per-month{display:none}
.plans[data-interval=year] .per-year{display:flex}
.plan-name{font-size:17px;font-weight:620}
.plan-note{font-size:12.5px;line-height:18px;color:var(--mfg);min-height:18px}
.plan-list{display:flex;flex-direction:column;gap:11px;padding-top:18px;border-top:1px solid var(--line)}
.plan-list .tick{font-size:14px;line-height:21px}
.cmp-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:20px;background:var(--surf);box-shadow:inset 0 1px 0 var(--hl)}
.cmp{width:100%;border-collapse:collapse;table-layout:fixed;font-size:14.5px;line-height:21px}
.cmp caption{padding:0;text-align:left}
.cmp th,.cmp td{padding:14px 16px;border-top:1px solid var(--line);text-align:center;vertical-align:middle;font-weight:500}
.cmp thead th{border-top:0;padding-top:20px;padding-bottom:16px;font-size:15px;font-weight:620}
.cmp th[scope=row]{text-align:left;font-weight:480;color:var(--fg)}
.cmp .hot{background:color-mix(in oklab,var(--pri) 9%,transparent)}
.cmp .grp th{text-align:left;padding-top:22px;font-family:"Geist Mono",ui-monospace,monospace;font-size:11.5px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--mfg)}
.cmp .yes{display:inline-flex;color:var(--pri)}
.cmp .no{color:var(--mfg);opacity:.55}
.cmp col.c-label{width:34%}
.legal{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:22px}
.legal-head{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.plans .price{flex-wrap:wrap}
.legal-nav{display:flex;flex-wrap:wrap;gap:2px}
.legal-nav a{display:inline-flex;align-items:center;height:32px;padding:0 10px;border-radius:8px;color:var(--mfg);font-size:13.5px}
.legal-nav a:hover{color:var(--fg);background:var(--hover);text-decoration:none}
.legal-nav a[aria-current=page]{color:var(--fg);background:var(--nav-on)}
.draft{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;border:1px solid color-mix(in oklab,var(--warn) 45%,transparent);border-radius:12px;background:var(--warn-s);font-size:14px;line-height:21px;color:var(--fg)}
.draft svg{flex:none;margin-top:2px;color:var(--warn)}
.draft strong{font-weight:620}
.prose{font-size:15.5px;line-height:26px;color:var(--mfg);text-wrap:pretty;overflow-wrap:break-word}
.prose h2{margin:44px 0 12px;font-size:22px;line-height:29px;font-weight:620;letter-spacing:-0.02em;color:var(--fg);scroll-margin-top:24px}
.prose h3{margin:26px 0 8px;font-size:16.5px;line-height:24px;font-weight:600;color:var(--fg)}
.prose p,.prose ul,.prose ol,.prose table{margin:0 0 14px}
.prose ul{list-style:disc;padding-left:22px}
.prose ol{list-style:decimal;padding-left:22px}
.prose li{margin:6px 0;padding-left:2px}
.prose li::marker{color:var(--pri)}
.prose strong{font-weight:600;color:var(--fg)}
.prose a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in oklab,var(--pri) 45%,transparent)}
.prose code{font-family:"Geist Mono",ui-monospace,monospace;font-size:13.5px;color:var(--fg)}
.prose table{width:100%;border-collapse:collapse;font-size:14.5px;line-height:22px}
.prose th,.prose td{padding:12px 14px 12px 0;border-top:1px solid var(--line);text-align:left;vertical-align:top}
.prose thead th{border-top:0;font-size:13px;font-weight:600;color:var(--fg)}
.prose tbody th{font-weight:600;color:var(--fg)}
.toc{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:var(--surf);font-size:14px;line-height:21px}
.toc ol{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:4px 20px;list-style:decimal;padding-left:20px;color:var(--mfg)}
@media (max-width:1100px){.plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.plans{grid-template-columns:minmax(0,1fr)}.page-top{padding-top:56px}.cmp{font-size:12.5px;line-height:17px}.cmp th,.cmp td{padding:10px 3px}.cmp thead th{font-size:12.5px}.cmp th[scope=row]{padding-left:12px}.cmp col.c-label{width:31%}.prose{font-size:15px;line-height:25px}.prose h2{font-size:20px;line-height:26px}.prose table.stack thead{display:none}.prose table.stack tr{display:block;padding:10px 0;border-top:1px solid var(--line)}.prose table.stack th,.prose table.stack td{display:block;padding:3px 0;border:0}.prose table.stack td[data-label]::before{content:attr(data-label);display:block;font-size:12px;font-weight:600;color:var(--fg)}}

/* Phones: a shorter landing page. In one column the design ran to about 29 screens, so below its 760 px breakpoint
   the page drops screenshots that repeat the text beside them (`hide-sm` in index.html), packs the tiles into rows,
   shows the Issues pictures on the first two cards only, puts the plans in a sideways row and closes the Everything
   included groups (main.js adds `inc-fold`). Section spacing and the footer shrink on every site page. */
@media (max-width:760px){
.sec{padding-top:64px !important}
.bento>.bc:nth-child(n+3)>.bc-vis{display:none}
.bento>.bc:nth-child(n+3)>.bc-txt{padding-top:22px}
.p3{gap:10px}
.ptile{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:14px;row-gap:4px;padding:18px}
.ptile .g-ico{grid-row:span 2}
.plan-row{grid-template-columns:none !important;grid-auto-flow:column;grid-auto-columns:min(84%,320px);gap:12px !important;margin:0 -16px;padding:0 16px 4px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 16px}
.plan-row>.plan{padding:24px;scroll-snap-align:start}
.foot{padding:56px 0 32px !important}
.foot-cols{column-gap:24px !important;padding-top:32px !important}
}
.inc-fold .inc-c{gap:0;padding:0}
.inc-fold .inc-c>.inc-h+*{padding:0 20px 20px}
.inc-fold .inc-c>[hidden]{display:none !important}
.inc-q{display:flex;align-items:center;gap:10px;width:100%;min-height:54px;padding:0 20px;border:0;background:transparent;font:inherit;color:inherit;text-align:left;cursor:pointer}
.inc-q::after{content:"";flex:none;width:7px;height:7px;margin:0 4px 4px auto;border-right:1.6px solid var(--mfg);border-bottom:1.6px solid var(--mfg);transform:rotate(45deg);transition:transform .2s ease}
.inc-q[aria-expanded=true]::after{margin-bottom:-2px;transform:rotate(-135deg)}
.inc-q:focus-visible{outline:2px solid var(--pri);outline-offset:-2px}