/* Marketing site and docs. Loads after tokens.css and app.css (both copied from design/ by site/build.js).
   Layout idea: one 1120px column, left-aligned type, the product itself as the hero image. */

body { font-size: 16px; line-height: 1.6; }
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.narrow { max-width: 760px; }
main { display: block; }
.skip { position: absolute; left: -9999px; } .skip:focus { left: 12px; top: 12px; z-index: 200; background: var(--panel); padding: 8px 12px; border-radius: var(--r-sm); }

/* header */
.sitehead { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.sitehead .wrap { display: flex; align-items: center; gap: var(--s5); min-height: 60px; }
.sitehead .brand { padding: 0; color: var(--ink); text-decoration: none; }
.sitehead .brand b { font-size: 16px; }
.sitenav { display: flex; align-items: center; gap: var(--s1); flex: 1; }
.sitenav a { color: var(--mut); text-decoration: none; font-size: 14.5px; padding: 8px 12px; border-radius: var(--r-sm); }
.sitenav a:hover { color: var(--ink); background: var(--panel2); }
.sitenav a[aria-current="page"] { color: var(--ink); }
.headcta { display: flex; align-items: center; gap: var(--s2); }
.headcta .btn { min-height: 38px; }
.menu { display: none; }
@media (max-width: 859px) {
  .sitenav, .headcta .signin { display: none; }
  .sitehead .wrap { gap: var(--s2); }
  .sitehead .brand { flex: 1; }
  .menu { display: block; }
  .menu summary { list-style: none; width: var(--tap); height: var(--tap); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line2); border-radius: var(--r-md); color: var(--mut); cursor: pointer; }
  .menu summary::-webkit-details-marker { display: none; }
  .menu[open] summary { color: var(--accent-ink); border-color: var(--accent); }
  .menu nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--panel); border-bottom: 1px solid var(--line); padding: var(--s2) max(20px, env(safe-area-inset-right, 0px)) var(--s4) max(20px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; box-shadow: var(--shadow-pop); }
  .menu nav a { color: var(--ink); text-decoration: none; padding: 12px 4px; border-bottom: 1px solid var(--line); font-size: 16px; }
  .menu nav a:last-child { border-bottom: 0; }
}

/* type */
.eyebrow { font: 500 12px/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink); }
.display { font-size: clamp(34px, 5.4vw, 62px); line-height: 1.04; letter-spacing: -.03em; font-weight: 650; max-width: 17ch; }
.h2 { font-size: clamp(26px, 3.2vw, 38px); line-height: 1.12; letter-spacing: -.02em; font-weight: 650; max-width: 22ch; }
.h3 { font-size: 19px; font-weight: 650; letter-spacing: -.005em; }
.lead { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--mut); max-width: 60ch; }
.lead b, .prose b { color: var(--ink); font-weight: 600; }
.sec { padding-block: clamp(56px, 8vw, 104px); }
.sec + .sec { border-top: 1px solid var(--line); }
.sechead { display: flex; flex-direction: column; gap: var(--s4); margin-bottom: var(--s10); }
.cta-row { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; }
.btn.big { min-height: 50px; padding: 0 22px; font-size: 16px; }
.undercta { font: 12.5px var(--mono); color: var(--dim); }

/* hero */
.hero { padding-block: clamp(40px, 6vw, 80px) clamp(40px, 6vw, 72px); }
.hero .top { display: flex; flex-direction: column; gap: var(--s5); margin-bottom: clamp(32px, 5vw, 56px); }
.demo { border: 1px solid var(--line2); border-radius: var(--r-xl); overflow: hidden; background: var(--bg); box-shadow: var(--shadow-pop); }
.demo-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: var(--panel); border-bottom: 1px solid var(--line); font: 11.5px var(--mono); color: var(--dim); }
.demo-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line2); }
.demo-bar span { margin-left: 8px; }
.demo-app { display: grid; grid-template-columns: 236px minmax(0, 1fr); height: 470px; }
.demo-side { background: var(--panel); border-right: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; }
.demo-side .tree { padding-top: var(--s2); }
.demo-main { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-width: 0; }
.demo .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); overflow: hidden; }
.demo .read { font-size: 14.5px; line-height: 1.55; padding: 14px 18px; overflow: hidden; }
.demo .read .turn { margin-bottom: 12px; }
.demo .pane .head { min-height: 38px; }
.demo .term { font-size: 11.5px; }
.demo .usage-mini { margin-top: auto; border-top: 1px solid var(--line); padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 6px; font: 11px var(--mono); color: var(--dim); }
.demo .usage-mini .rowm { display: flex; gap: 8px; align-items: center; }
.demo .usage-mini .meter { flex: 1; }
.demo .inrow .msg { display: flex; align-items: center; color: var(--dim); font-size: 13.5px; }
@media (max-width: 859px) {
  .demo-app { grid-template-columns: minmax(0, 1fr); height: 430px; }
  .demo-side { display: none; }
  .demo .grid { grid-template-columns: minmax(0, 1fr); padding: 0; gap: 0; }
  .demo .grid .pane { display: none; border: 0; border-radius: 0; }
  .demo .grid .pane.target { display: flex; box-shadow: none; }
  .demo .sendto .chip:nth-child(n+4) { display: none; }
}

/* trust strip */
.strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); }
.strip > div { padding: var(--s5); display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; color: var(--mut); }
.strip > div + div { border-left: 1px solid var(--line); }
.strip b { color: var(--ink); font-size: 15px; display: flex; gap: 8px; align-items: center; }
.strip b svg { color: var(--good); }
@media (max-width: 859px) { .strip { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .strip > div:nth-child(3) { border-left: 0; } .strip > div:nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (max-width: 519px) { .strip { grid-template-columns: minmax(0, 1fr); } .strip > div + div { border-left: 0; border-top: 1px solid var(--line); } }

/* features */
.feats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s3); }
.feat { grid-column: span 2; display: flex; flex-direction: column; gap: var(--s3); padding: var(--s6); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); min-width: 0; }
.feat.w3 { grid-column: span 3; }
.feat p { color: var(--mut); font-size: 15.5px; }
.feat .vig { margin-top: auto; padding-top: var(--s3); }
.feat .tier { align-self: flex-start; }
@media (max-width: 859px) { .feats { grid-template-columns: minmax(0, 1fr); } .feat, .feat.w3 { grid-column: auto; } }
.askcard { border: 1px solid var(--warn-line); background: var(--warn-soft); border-radius: var(--r-md); padding: var(--s3) var(--s4); display: flex; flex-direction: column; gap: var(--s2); font-size: 14px; }
.askcard .from { font: 11px var(--mono); color: var(--warn); letter-spacing: .08em; text-transform: uppercase; }
.askcard .opts { display: flex; gap: var(--s2); flex-wrap: wrap; }
.askcard .opts span { border: 1px solid var(--line2); background: var(--panel); border-radius: var(--r-sm); padding: 6px 12px; font-weight: 600; font-size: 13px; }
.dm { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.dm .r { display: flex; align-items: center; gap: var(--s2); padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel2); }
.dm .r .q { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm .yn { font: 600 11px var(--mono); padding: 2px 7px; border-radius: var(--r-xs); border: 1px solid var(--line2); color: var(--dim); }
.dm .yn.on { background: var(--good-soft); border-color: var(--good-line); color: var(--good); }

/* steps (a real sequence) */
.how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); counter-reset: how; margin: 0; padding: 0; list-style: none; }
.how li { counter-increment: how; display: flex; flex-direction: column; gap: var(--s2); padding-top: var(--s4); border-top: 2px solid var(--line2); }
.how li::before { content: counter(how); font: 600 13px var(--mono); color: var(--accent-ink); }
.how p { color: var(--mut); font-size: 15.5px; }
@media (max-width: 859px) { .how { grid-template-columns: minmax(0, 1fr); gap: var(--s5); } }

/* two-column text + aside */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
@media (max-width: 859px) { .split { grid-template-columns: minmax(0, 1fr); } }
.cando { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
@media (max-width: 699px) { .cando { grid-template-columns: minmax(0, 1fr); } }
.cando .card { padding: var(--s5); display: flex; flex-direction: column; gap: var(--s3); }
.checks { font-size: 15px; }

/* pricing */
.plans.site .plan { padding: var(--s6); gap: var(--s4); }
.plans.site .plan ul { font-size: 15px; }
.plan .sub { color: var(--mut); font-size: 14.5px; min-height: 2.9em; }
.ivl { display: inline-flex; border: 1px solid var(--line2); border-radius: var(--r-sm); overflow: hidden; align-self: flex-start; }
.ivl label { font: 12px var(--mono); padding: 7px 12px; color: var(--mut); cursor: pointer; }
.ivl-r { position: absolute; opacity: 0; pointer-events: none; }
#ivl-y:checked ~ .ivl label[for="ivl-y"], #ivl-m:checked ~ .ivl label[for="ivl-m"] { background: var(--accent); color: var(--on-accent); font-weight: 600; }
#ivl-y:checked ~ .when-m, #ivl-m:checked ~ .when-y, #ivl-y:checked ~ * .when-m, #ivl-m:checked ~ * .when-y { display: none; }
#ivl-y:focus-visible ~ .ivl, #ivl-m:focus-visible ~ .ivl { outline: 2px solid var(--accent2); outline-offset: 2px; }
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); }
table.cmp { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14.5px; }
table.cmp th, table.cmp td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); }
table.cmp tr:last-child td { border-bottom: 0; }
table.cmp thead th { font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
table.cmp td:first-child { color: var(--mut); }
table.cmp td svg { color: var(--good); vertical-align: middle; }
table.cmp .no { color: var(--dim); }

/* faq */
.faq { display: flex; flex-direction: column; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 0; font-weight: 600; font-size: 17px; display: flex; gap: var(--s3); align-items: flex-start; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; margin-left: auto; font: 400 20px/1.2 var(--mono); color: var(--dim); flex: none; }
.faq details[open] summary::after { content: "\2212"; color: var(--accent-ink); }
.faq .a { padding: 0 0 20px; color: var(--mut); max-width: 68ch; display: flex; flex-direction: column; gap: var(--s3); }
.faq .a code, .prose code { font: .88em var(--mono); background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r-xs); padding: 1px 5px; overflow-wrap: anywhere; }

/* prose pages: security, docs */
.pagetop { padding-block: clamp(40px, 6vw, 72px) var(--s8); display: flex; flex-direction: column; gap: var(--s4); }
.pagetop .display { font-size: clamp(32px, 4.6vw, 52px); max-width: 20ch; }
.docgrid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: start; padding-bottom: var(--s24); }
.toc { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.toc .label { margin-bottom: var(--s2); }
.toc a { color: var(--mut); text-decoration: none; padding: 5px 10px; border-left: 2px solid var(--line); }
.toc a:hover { color: var(--ink); border-color: var(--accent); }
.toc a.other { border-left-color: transparent; padding-left: 0; }
@media (max-width: 859px) { .docgrid { grid-template-columns: minmax(0, 1fr); } .toc { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; } .toc .label { flex-basis: 100%; margin: 0; } .toc a { border: 1px solid var(--line2); border-radius: var(--r-pill); padding: 5px 12px; } .toc a.other { padding-left: 12px; border-color: var(--line2); } }
.prose { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; max-width: 760px; }
.prose h2 { font-size: 26px; letter-spacing: -.015em; font-weight: 650; margin-top: var(--s10); scroll-margin-top: 84px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 18px; font-weight: 650; margin-top: var(--s4); }
.prose p, .prose li { color: var(--mut); }
.prose ul, .prose ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.prose ul.checks { padding-left: 0; }
.prose .tablewrap table { min-width: 520px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--mut); }
.prose th { font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.prose td:first-child { color: var(--ink); white-space: nowrap; }
.prose tr:last-child td { border-bottom: 0; }
.prose .code { font-size: 13px; }
.note { border-left: 2px solid var(--accent); background: var(--accent-soft); padding: var(--s3) var(--s4); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: 15px; color: var(--mut); }
.note b { color: var(--ink); }

/* diagram */
.diagram { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); padding: var(--s4); }
.diagram svg { display: block; width: 100%; min-width: 760px; height: auto; font-family: var(--mono); }
.diagram .bx { fill: var(--panel2); stroke: var(--line2); }
.diagram .bx2 { fill: var(--bg); stroke: var(--line2); }
.diagram .acc { fill: var(--accent-soft); stroke: var(--accent); }
.diagram .t { fill: var(--ink); font-size: 13px; }
.diagram .tm { fill: var(--mut); font-size: 11.5px; }
.diagram .td { fill: var(--dim); font-size: 10.5px; letter-spacing: .12em; }
.diagram .ta { fill: var(--accent-ink); font-size: 11.5px; font-weight: 600; }
.diagram .ln { stroke: var(--accent); stroke-width: 2; fill: none; }
.diagram .ln2 { stroke: var(--mut); stroke-width: 1.5; fill: none; stroke-dasharray: 5 4; }
.diagram .ah { fill: var(--accent); } .diagram .ah2 { fill: var(--mut); }
.diagram .wall { stroke: var(--bad); stroke-width: 1.5; stroke-dasharray: 3 4; fill: none; }
.diagram .tb { fill: var(--bad); font-size: 10.5px; }
.cap { font-size: 13.5px; color: var(--dim); margin-top: var(--s2); }

/* final cta */
.final { display: flex; flex-direction: column; gap: var(--s5); align-items: flex-start; }

/* footer */
.sitefoot { border-top: 1px solid var(--line); background: var(--panel); padding-block: var(--s12) var(--s8); font-size: 14.5px; }
.footgrid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: var(--s8); }
.footgrid .brand { padding: 0; margin-bottom: var(--s2); }
.footgrid p { color: var(--dim); max-width: 34ch; }
.footgrid nav { display: flex; flex-direction: column; gap: 8px; }
.footgrid nav a { color: var(--mut); text-decoration: none; } .footgrid nav a:hover { color: var(--accent-ink); }
.legal { margin-top: var(--s10); padding-top: var(--s5); border-top: 1px solid var(--line); display: flex; gap: var(--s4); flex-wrap: wrap; color: var(--dim); font: 12.5px var(--mono); }
@media (max-width: 699px) { .footgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .footgrid > div:first-child { grid-column: 1 / -1; } }
.plan li.soon { color: var(--dim); } .plan li.soon svg { color: var(--dim); }

/* --- accounts board as the hero, and the plan ladder (multi-account positioning) --- */
.demo-board { padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
.demo .accts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.demo .acct { background: var(--panel); }
.demo .lmts { display: flex; flex-direction: column; gap: var(--s3); }
.demo .schips { flex-direction: row; }
.demo .schip { cursor: default; width: auto; min-height: 28px; padding: 0 8px; font-size: 12px; }
.demo .schip:hover { border-color: var(--line2); color: var(--ink); }
.demo .schip.moving:hover { border-color: var(--warn-line); color: var(--warn); }
.demo .schip.arriving:hover { border-color: var(--good-line); color: var(--good); }
.demo .schip .snm { flex: 0 1 auto; }
.demo .amline { display: flex; align-items: center; gap: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--line); font: var(--fs-xs) var(--mono); color: var(--dim); }
.demo .amline b { color: var(--mut); font-weight: 600; }
.demo .amline .switch { transform: scale(.72); transform-origin: left center; margin-right: -10px; pointer-events: none; }
.demo .moved .mv { grid-template-columns: 58px minmax(0, 1fr) auto; padding: var(--s3) var(--s4); }
.demo .mv time, .demo .mv .why { grid-column: auto; }
.demo .mv .why { grid-column: 2 / -1; }
/* Duo, 466 to 859: still two cards across, dense on purpose */
@media (max-width: 859px) {
  .demo-board { padding: var(--s3); gap: var(--s2); }
  .demo .accts { gap: var(--s2); }
  .demo .acct { padding: var(--s3); gap: var(--s2); }
  .demo .acct > header { flex-wrap: wrap; }
  .demo .acct .nm small { display: none; }
  .demo .lmt { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k p" "m m" "n n"; gap: 3px var(--s2); }
  .demo .lmt .note { font-size: 11px; }
  .demo .schip { min-height: 26px; font-size: 11.5px; padding: 0 7px; }
}
/* phone: one card across, the two that matter */
@media (max-width: 465px) {
  .demo .accts { grid-template-columns: minmax(0, 1fr); }
  .demo .acct:nth-child(n+3) { display: none; }
  .demo .acctsum span:nth-child(n+3) { display: none; }
}

/* small product pieces inside feature cards */
.vig .lmts { gap: var(--s2); }
.vig .moved { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel2); }
.vig .moved .mv { grid-template-columns: minmax(0, 1fr) auto; padding: var(--s3); }
.vig .mv .why { grid-column: 1 / -1; }
.vig .dest { cursor: default; background: var(--panel2); }
.feat.also { padding: var(--s5); }
.feat.also p { font-size: 15px; }
.feats.five .feat { grid-column: span 2; }
.feats.five .feat:nth-child(-n+2) { grid-column: span 3; }
@media (max-width: 859px) { .feats.five .feat, .feats.five .feat:nth-child(-n+2) { grid-column: auto; } }

/* plan ladder on the site: five rungs on the home page, a picker on the pricing page */
.ladder.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ladder .rung .sub { font: var(--fs-xs)/1.4 var(--mono); color: var(--dim); }
.ladder .rung .pips { min-height: 12px; flex-wrap: wrap; row-gap: 3px; }
@media (max-width: 899px) {
  .ladder.five { grid-template-columns: minmax(0, 1fr); }
  .ladder .rung .sub { display: none; }
}
.planline { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s4) var(--s8); align-items: center; margin-top: var(--s5); }
.planline p { color: var(--mut); font-size: 15.5px; max-width: 66ch; }
@media (max-width: 859px) { .planline { grid-template-columns: minmax(0, 1fr); } }

.pn-r { position: absolute; opacity: 0; pointer-events: none; }
.pickrow { display: flex; align-items: center; gap: var(--s3) var(--s5); flex-wrap: wrap; margin-bottom: var(--s4); }
.pickrow .q { font-weight: 600; font-size: 17px; }
#pn1:checked ~ .ladder label[for="pn1"], #pn2:checked ~ .ladder label[for="pn2"], #pn4:checked ~ .ladder label[for="pn4"], #pn8:checked ~ .ladder label[for="pn8"], #pn12:checked ~ .ladder label[for="pn12"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: var(--accent-soft); }
#pn1:focus-visible ~ .ladder label[for="pn1"], #pn2:focus-visible ~ .ladder label[for="pn2"], #pn4:focus-visible ~ .ladder label[for="pn4"], #pn8:focus-visible ~ .ladder label[for="pn8"], #pn12:focus-visible ~ .ladder label[for="pn12"] { outline: 2px solid var(--accent2); outline-offset: 2px; }
.pp { display: none; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s6) clamp(24px, 5vw, 64px); align-items: start; margin-top: var(--s3); padding: var(--s6); border: 1px solid var(--accent); border-radius: var(--r-lg); background: var(--panel); }
#pn1:checked ~ .pdetail .pp1, #pn2:checked ~ .pdetail .pp2, #pn4:checked ~ .pdetail .pp4, #pn8:checked ~ .pdetail .pp8, #pn12:checked ~ .pdetail .pp12 { display: grid; }
.pp .buy { display: flex; flex-direction: column; gap: var(--s3); align-items: flex-start; }
.pp h2 { font-size: 19px; font-weight: 650; display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.pp .price { font: 650 clamp(38px, 5vw, 52px)/1 var(--sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pp .price small { font: 500 13px var(--mono); color: var(--dim); letter-spacing: 0; }
.pp .sub { color: var(--mut); font-size: 15px; }
.pp ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 15px; color: var(--mut); }
.pp li { display: flex; gap: 9px; align-items: flex-start; }
.pp li svg { color: var(--good); margin-top: 3px; }
.pp li.soon, .pp li.soon svg { color: var(--dim); }
.pp li b { color: var(--ink); font-weight: 600; }
@media (max-width: 859px) { .pp { grid-template-columns: minmax(0, 1fr); padding: var(--s5); } .pp .buy .btn { width: 100%; } }
table.cmp.wide { min-width: 820px; }
table.cmp.wide th:not(:first-child), table.cmp.wide td:not(:first-child) { text-align: center; padding-inline: 10px; white-space: nowrap; }
#ivl-y:checked ~ .pickrow .ivl label[for="ivl-y"], #ivl-m:checked ~ .pickrow .ivl label[for="ivl-m"] { background: var(--accent); color: var(--on-accent); font-weight: 600; }
/* .note is a callout on the docs pages; inside a limit row it is the plain forecast line */
.lmt .note { background: none; border: 0; border-radius: 0; padding: 0; margin: 0; }
.demo .mv .how { justify-self: end; }
.vig .mv .how { display: none; }