/* The public website (docs/website.md). Loaded after /tokens.css, /product.css (plum), /theme-switch.css and /portal.css: the tokens,
   both schemes and the family's components (buttons, pills, check lists, tables, forms) come from those, as Snapshot's site takes them
   from its theme.css. This file adds the site's layout: the first part is copied from Snapshot's frontend/site/site.css (the reference,
   design-system/reference/documents/site-snapshot.css) with its few fixed colors replaced by the shared tokens; Remind's own rules
   follow at the end and use tokens only. No hex value and no color function anywhere in this file (tests/test_site.py). */

/* ---------- Base overrides for the site ---------- */
body{background:var(--paper)}
a{color:var(--link)}
a:hover{color:var(--link-hover)}
em{color:var(--link)}
.dark{background:var(--band);color:var(--on-dark-strong)}
.dark a{color:var(--on-dark-strong)}
.dark em{color:var(--sand)}
.btn-primary,.btn-primary:hover:not(:disabled){color:var(--on-accent)}
.btn-on-dark,.btn-on-dark:hover:not(:disabled){color:var(--on-light)}
.btn-secondary:hover:not(:disabled){border-color:var(--text);color:var(--text)}
code{background:var(--tint)}
main{display:block}
.prose-width{max-width:760px}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:14px;padding-bottom:14px}
.site-header .brand-sub{display:none}
.site-nav{display:flex;align-items:center;gap:28px;font-size:14px;font-weight:500}
.site-nav a{color:var(--text)}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--link)}
.site-nav a[aria-current="page"]{font-weight:700}
.site-actions{display:flex;align-items:center;gap:10px}
.site-actions .signin{font-size:14px;font-weight:600;color:var(--text);padding:8px 6px}
.menu-button{display:none;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--r);border:1px solid var(--line-2);background:var(--card);color:var(--text)}
.site-menu{display:none}
.site-menu .theme-row{padding:4px 4px;border-bottom:1px solid var(--line);font-size:var(--fs-lg);font-weight:600;color:var(--text)}

/* ---------- Footer ---------- */
.site-footer{margin-top:96px;border-top:1px solid var(--line);background:var(--paper-2)}
.site-footer .wrap{padding-top:48px;padding-bottom:40px;display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,1fr));gap:32px}
.footer-about p{margin-top:14px;font-size:var(--fs-md);color:var(--muted);line-height:1.6;max-width:320px}
.footer-col h2{font-family:var(--font-body);font-size:var(--fs-xs);letter-spacing:1.4px;text-transform:uppercase;font-weight:700;color:var(--label)}
.footer-col ul{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:14px}
.footer-col a{color:var(--text)}
.footer-col a:hover{color:var(--link)}
.footer-products{grid-column:1/-1;margin:0;font-size:var(--fs-md);color:var(--muted);line-height:1.6}
.footer-products strong{color:var(--text);font-weight:600}
.footer-products a{color:var(--text);font-weight:600}
.footer-products a:hover{color:var(--link)}
.footer-base{grid-column:1/-1;border-top:1px solid var(--line);padding-top:20px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:var(--fs-md);color:var(--muted)}

/* ---------- Sections ---------- */
.section{padding:96px var(--gutter) 0}
.section-tight{padding-top:64px}
.lead-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.lead-head h2{font-size:var(--fs-h1);letter-spacing:-1px;line-height:1.1;margin-top:14px;max-width:720px}
.lead-head p{max-width:440px;font-size:var(--fs-base);line-height:1.65;color:var(--muted)}
.page-hero{padding:72px var(--gutter) 8px;max-width:1248px;margin:0 auto}
.page-hero h1{font-size:54px;line-height:1.06;letter-spacing:-1.4px;margin-top:16px;max-width:880px}
.page-hero .lede{margin-top:20px;max-width:720px}
.eyebrow{color:var(--link)}
.dark .eyebrow{color:var(--sand)}

/* ---------- Landing hero ---------- */
.hero{padding:40px var(--gutter) 28px}
.hero-copy{display:flex;flex-direction:column;gap:16px;max-width:1000px}
.hero-copy .pill{align-self:flex-start}
.hero h1{font-size:52px;line-height:1.05;letter-spacing:-1.4px}
.hero .lede{max-width:880px;font-size:18px;line-height:1.55}
.hero-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:4px}
.hero-proof{display:flex;gap:10px 26px;flex-wrap:wrap;font-size:var(--fs-md);color:var(--muted)}
.hero-proof span{display:inline-flex;align-items:center;gap:8px}
.hero-proof svg{color:var(--link)}
.hero-need{font-size:var(--fs-md);color:var(--muted)}
.hero-need a{font-weight:600}
.hero-show{padding-top:32px}

/* ---------- What you need: a compact strip ---------- */
.need{padding-top:64px;padding-bottom:40px;scroll-margin-top:80px}
.need-strip{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:16px 28px;padding:22px 26px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--card)}
.need-title{font-family:var(--font-body);font-size:var(--fs-sm);letter-spacing:1.8px;font-weight:700;text-transform:uppercase;line-height:1.5;color:var(--link)}
.need-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 24px}
.need-list li{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-md);line-height:1.5}
.need-list strong{font-size:var(--fs-base);color:var(--text)}
.need-list span{color:var(--muted)}
.need-list a{margin-top:2px;font-weight:600}

/* ---------- Fact band ---------- */
.fact-band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.fact-band div{padding:28px 26px}
.fact-band div:first-child{padding-left:0}
.fact-band div+div{border-left:1px solid var(--line)}
.fact-band strong{display:block;font-family:var(--font-display);font-weight:400;font-size:38px;letter-spacing:-.6px;color:var(--ink);line-height:1.1}
.fact-band p{font-size:var(--fs-md);color:var(--muted);margin-top:6px;line-height:1.5}

/* ---------- Problem ---------- */
.problem{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:56px;align-items:start}
.problem h2{font-size:var(--fs-h1);letter-spacing:-1px;line-height:1.1;margin-top:14px}
.problem-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.problem-list li{padding:22px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--card)}
.problem-list strong{display:block;font-size:var(--fs-lg);color:var(--text)}
.problem-list span{display:block;margin-top:8px;font-size:14px;line-height:1.6;color:var(--muted)}

/* ---------- Steps ---------- */
.steps-list{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;counter-reset:step}
.steps-list li{padding:24px;border-radius:var(--r-lg);background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;gap:10px;counter-increment:step}
.steps-list li::before{content:"0" counter(step);font-family:var(--font-display);font-size:22px;color:var(--link)}
.steps-list h3{font-size:var(--fs-lg)}
.steps-list p{font-size:14px;line-height:1.6;color:var(--muted)}
.feature{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;align-items:center;margin-top:88px}
.feature.flip{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.feature.flip .feature-copy{order:2}
.feature-copy{display:flex;flex-direction:column;gap:16px}
.feature-copy .num{font-family:var(--font-display);font-size:24px;color:var(--link)}
.feature-copy h2{font-size:38px;letter-spacing:-.9px;line-height:1.1}
.feature-copy p{color:var(--muted);line-height:1.7}
.feature-copy .check-list{margin-top:6px}

/* ---------- Coverage cards ---------- */
.center-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:48px}
.center-card{padding:22px;border-radius:var(--r-lg);background:var(--card);border:1px solid var(--line);border-top:3px solid var(--product);display:flex;flex-direction:column;gap:12px}
.center-card h3{font-size:var(--fs-lg)}

/* ---------- Security ---------- */
.promise{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:64px;padding:64px;border-radius:var(--r-xl);margin-top:96px}
.promise h2{font-size:var(--fs-h1);letter-spacing:-1px;line-height:1.1}
.promise .check-list{font-size:var(--fs-base);gap:16px}
.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:40px}
.card-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.info-card{padding:24px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--card);display:flex;flex-direction:column;gap:10px}
.info-card h3{font-size:var(--fs-lg)}
.info-card p{font-size:14px;line-height:1.65;color:var(--muted)}
.never{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 32px}
.never li{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--line);font-size:var(--fs-base);line-height:1.55}
.never svg{margin-top:3px;color:var(--fail)}

/* ---------- Pricing ---------- */
.plan-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:40px;align-items:stretch}
.plan-grid.summary{grid-template-columns:repeat(5,minmax(0,1fr))}
.plan-grid.two,.plan-grid.two.summary{grid-template-columns:repeat(2,minmax(0,1fr));max-width:920px}
.plan .route{margin-top:-6px;font-size:var(--fs-md);font-weight:600;line-height:1.45;color:var(--link)}
.pricing-col>*{max-width:920px}
.try{display:flex;justify-content:space-between;align-items:center;gap:18px 32px;flex-wrap:wrap;margin-top:40px;padding:24px 28px;border-radius:var(--r-lg);border:1px solid var(--line);border-left:4px solid var(--product);background:var(--paper-2)}
.try>div{flex:1 1 420px}
.try h2{font-size:28px;letter-spacing:-.5px}
.try p{margin-top:8px;color:var(--muted);line-height:1.6}
.routes{padding-top:56px}
.routes-head h2{font-size:30px;letter-spacing:-.6px;line-height:1.15;margin-top:10px}
.routes .plan-grid{margin-top:28px}
.msp-examples{margin-top:28px;display:flex;flex-direction:column;gap:12px}
.msp-examples h3{font-size:var(--fs-lg)}
.msp-examples .table th[scope="row"]{font-size:var(--fs-base);letter-spacing:0;text-transform:none;font-weight:600;color:var(--text);background:var(--card)}
.msp-examples .table tbody th{padding:12px}
.msp-examples .table tbody tr:last-child th{border-bottom:0}
.msp-examples .table .total{font-weight:700;color:var(--ink)}
.msp-examples p{font-size:var(--fs-md);color:var(--muted);line-height:1.6}
.plan{position:relative;padding:24px 20px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--card);display:flex;flex-direction:column;gap:14px;min-width:0}
.plan.is-featured{border:2px solid var(--product);box-shadow:var(--shadow-md)}
.plan .flag{position:absolute;top:-12px;left:20px;padding:4px 10px;border-radius:var(--r-pill);background:var(--accent);color:var(--on-accent);font-size:var(--fs-xs);letter-spacing:1px;font-weight:700;text-transform:uppercase}
.plan h3{font-size:var(--fs-lg)}
.plan .price{font-family:var(--font-display);font-size:40px;line-height:1;color:var(--ink);letter-spacing:-.8px}
.plan .price .per{font-family:var(--font-body);font-size:var(--fs-base);font-weight:600;letter-spacing:0;color:var(--muted);white-space:nowrap}
.plan .unit{font-size:var(--fs-md);color:var(--muted);line-height:1.45;min-height:2.9em}
.plan .pitch{font-size:14px;line-height:1.55;color:var(--text)}
.plan .check-list{font-size:var(--fs-md);gap:9px;flex:1}
.plan .check-list svg{margin-top:2px}
.plan .btn{width:100%;white-space:normal;text-align:center}
.soon{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:var(--r-xs);background:var(--review-bg);color:var(--review);font-size:var(--fs-xs);font-weight:700;letter-spacing:.4px;vertical-align:1px;white-space:nowrap}
.compare-table th:first-child,.compare-table td:first-child{min-width:200px}
.compare-table td{text-align:center}
.compare-table td:first-child{text-align:left;font-weight:600;color:var(--text)}
.compare-table th{text-align:center}
.compare-table th:first-child{text-align:left}
.compare-table thead th{vertical-align:top}
.compare-table .plan-billed{font-size:var(--fs-sm);font-weight:500;letter-spacing:0;text-transform:none;line-height:1.6}
.compare-table .yes{color:var(--pass);font-weight:700}
.compare-table .no{color:var(--muted)}
.table{color:var(--text)}
.table th{background:var(--paper-2)}
.table-wrap{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card)}
.price-note{margin-top:18px;font-size:var(--fs-md);color:var(--muted);max-width:820px;line-height:1.6}

/* ---------- About GlacierPoint (the company's shared text, on the landing page) ---------- */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:24px 56px;align-items:start}
.about h2{font-size:var(--fs-h1);letter-spacing:-1px;line-height:1.1}
.about-lead{margin-top:16px;font-size:var(--fs-xl);line-height:1.5;color:var(--text)}
.about-text{font-size:var(--fs-lg);line-height:1.7;color:var(--muted)}

/* ---------- FAQ ---------- */
.faq{margin-top:32px;border-top:1px solid var(--line)}
.faq details{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:20px 0;font-size:var(--fs-lg);font-weight:600;color:var(--text)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-display);font-size:26px;line-height:1;color:var(--link);flex-shrink:0}
.faq details[open] summary::after{content:"\2212"}
.faq details>div{padding:0 0 22px;color:var(--muted);line-height:1.7;max-width:820px;display:flex;flex-direction:column;gap:10px}
.faq-group{margin-top:56px}
.faq-group h2{font-size:28px}

/* ---------- Closing call to action ---------- */
.closing{margin-top:96px;padding:56px;border-radius:var(--r-xl);display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}
.closing h2{font-size:36px;letter-spacing:-.8px;max-width:640px}
.closing p{margin-top:10px;max-width:560px}
.closing .row{gap:12px}

/* ---------- Prose (legal, download, contact) ---------- */
.prose{max-width:760px;margin-top:40px;display:flex;flex-direction:column;gap:14px;line-height:1.75}
.prose h2{font-size:26px;margin-top:28px}
.prose h3{margin-top:12px}
.prose ul,.prose ol{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:6px}
.prose pre{margin:0;padding:16px 18px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--card);overflow-x:auto;font-size:13px;line-height:1.6}
.prose pre code{background:none;padding:0;font-size:inherit}
.page-hero .eyebrow a{color:inherit}
.draft{margin-top:24px;padding:16px 20px;border-radius:var(--r-md);border:1px dashed var(--review);background:var(--review-bg);color:var(--review);font-weight:600;max-width:760px}
.contact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:40px}

/* ---------- Sign-up ---------- */
.signup{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:64px;align-items:start;padding:64px var(--gutter) 0}
.signup-form{padding:32px;border-radius:var(--r-xl);border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow-md);display:flex;flex-direction:column;gap:22px}
.signup-form form{display:flex;flex-direction:column;gap:18px}
.signup-form h2{font-size:30px}
.page-title{font-size:48px;line-height:1.08;letter-spacing:-1.2px}
.steps-plain{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px;color:var(--muted);line-height:1.6}
.signup-form section{display:flex;flex-direction:column;gap:18px}
.auth-links{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:14px;color:var(--muted)}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .need-strip{grid-template-columns:minmax(0,1fr)}
  .need-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plan-grid,.plan-grid.summary{grid-template-columns:repeat(3,minmax(0,1fr))}
  .steps-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1080px){
  .site-nav{display:none}
  .menu-button{display:inline-flex}
  .site-menu.is-open{display:flex;flex-direction:column;gap:2px;padding:8px var(--gutter) 16px;border-top:1px solid var(--line)}
  .site-menu a{padding:12px 4px;font-size:var(--fs-lg);font-weight:600;color:var(--text);border-bottom:1px solid var(--line)}
  .site-menu a[aria-current="page"]{color:var(--link)}
  .hero{padding:36px var(--gutter) 28px}
  .hero h1{font-size:46px}
  .problem,.promise,.signup,.about{grid-template-columns:minmax(0,1fr);gap:32px}
  .promise{padding:40px}
  .feature,.feature.flip{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:64px}
  .feature.flip .feature-copy{order:0}
  .center-grid,.card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fact-band{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fact-band div{padding:22px 20px}
  .fact-band div:nth-child(3){border-left:0;padding-left:0}
  .fact-band div:nth-child(n+3){border-top:1px solid var(--line)}
  .site-footer .wrap{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer-about{grid-column:1/-1}
  .section{padding-top:72px}
  .page-hero h1{font-size:44px}
}
@media (max-width:720px){
  .site-actions .signin,.site-actions .theme-switch{display:none}
  .hero h1{font-size:40px;letter-spacing:-1px}
  .hero .lede,.page-hero .lede{font-size:17px}
  .page-hero{padding-top:44px}
  .page-hero h1{font-size:34px;letter-spacing:-.8px}
  .lead-head h2,.problem h2,.promise h2,.about h2{font-size:32px}
  .feature-copy h2{font-size:30px}
  .hero-actions .btn{width:100%}
  .fact-band{grid-template-columns:minmax(0,1fr)}
  .fact-band div{padding:18px 0;border-left:0!important}
  .fact-band div+div{border-top:1px solid var(--line)}
  .problem-list,.steps-list,.center-grid,.card-grid,.card-grid.two,.never,.contact-grid{grid-template-columns:minmax(0,1fr)}
  .plan-grid,.plan-grid.summary,.plan-grid.two,.plan-grid.two.summary,.need-list{grid-template-columns:minmax(0,1fr)}
  .try{padding:20px}
  .promise{padding:28px 20px;border-radius:14px}
  .closing{padding:28px 20px;border-radius:14px;margin-top:64px}
  .closing h2{font-size:28px}
  .closing .btn{width:100%}
  .site-footer .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .signup{padding-top:40px}
  .signup-form{padding:22px}
  .page-title{font-size:34px;letter-spacing:-.8px}
}
@media (max-width:420px){
  .site-header .brand-name{font-size:18px}
  .site-actions .btn{padding:9px 12px}
}

/* ---------- Remind: the site's own rules (tokens only: no hex, no color function, no px) ---------- */
/* The mark in the header at 32 px (design-system docs/reports.md, "Website"). */
.site-header .brand-mark{width:calc(var(--sp-4) * 2);height:calc(var(--sp-4) * 2)}
/* The eight sections on the landing page and How it works: the title, the plain "why" and the impact line. */
.section-card .why{font-size:var(--fs-md);line-height:1.6;color:var(--muted)}
.section-card .impact{margin-top:auto;padding-top:var(--sp-3);border-top:thin solid var(--line);font-size:var(--fs-md);color:var(--text)}
.section-card .impact strong{color:var(--ink)}
/* The example of the first page after a run and of a warning mail: real HTML, marked "Example", never a control. */
.example{display:flex;flex-direction:column;gap:var(--sp-4);padding:var(--sp-7);border-radius:var(--r-xl);border:thin solid var(--line);background:var(--card);box-shadow:var(--shadow-md);min-width:0}
.example-top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-1) var(--sp-4);flex-wrap:wrap}
.example-tag{font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.example-eyebrow{font-size:var(--fs-sm);letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--link)}
.example-title{font-family:var(--font-display);font-size:var(--fs-h3);line-height:1.25;color:var(--ink)}
.example-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-2)}
.example-rows li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-1) var(--sp-4);align-items:center;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);border:thin solid var(--line);background:var(--paper-2)}
.example-rows .name{font-weight:600;color:var(--text);overflow-wrap:anywhere}
.example-rows .where{grid-column:1;font-size:var(--fs-sm);color:var(--muted);overflow-wrap:anywhere}
.example-rows .left{grid-row:1 / span 2;grid-column:2;padding:var(--sp-1) var(--sp-3);border-radius:var(--r-pill);font-size:var(--fs-sm);font-weight:700;white-space:nowrap}
.example-rows .is-expired .left{background:var(--fail-bg);color:var(--fail)}
.example-rows .is-soon .left{background:var(--review-bg);color:var(--review)}
.example-note{font-size:var(--fs-md);color:var(--muted)}
.example-mail{gap:var(--sp-3)}
.example-mail dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-1) var(--sp-3);font-size:var(--fs-md)}
.example-mail dt{color:var(--muted)}
.example-mail dd{margin:0;color:var(--text);overflow-wrap:anywhere}
.example-mail p{font-size:var(--fs-md);line-height:1.6;color:var(--text)}
/* Two sample reports side by side on /sample-report. */
.sample-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4);margin-top:var(--sp-9)}
.sample-grid .btn{align-self:flex-start}
/* The cross-link paragraph of the family's products. */
.family p a{font-weight:600}
.family .lead-head p{max-width:none;flex:1 1 calc(var(--sp-11) * 4)}
/* Three plan cards (One-time, Watch, MSP) on the landing page. */
.plan-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.h3-like{font-family:var(--font-body);font-size:var(--fs-lg);font-weight:600;margin-top:var(--sp-3)}
@media (max-width:720px){
  .plan-grid.three{grid-template-columns:minmax(0,1fr)}
  .sample-grid{grid-template-columns:minmax(0,1fr)}
  .example{padding:var(--sp-5) var(--sp-4)}
}
/* The example right under the hero needs no extra space above it. */
.hero-show .feature{margin-top:0}
/* On a phone the wordmark stays on one line beside the call to action and the menu button. */
.site-header .brand-name{white-space:nowrap}
/* The comparison table keeps readable columns on a phone and scrolls inside its frame, never the page. */
.table-wrap{overflow-x:auto}
.compare-table{min-width:calc(var(--sp-11) * 7)}
@media (max-width:420px){
  .site-header .wrap{gap:var(--sp-2)}
  .site-header .brand{gap:var(--sp-2)}
  .site-header .brand-name{font-size:var(--fs-lg)}
  .site-actions{gap:var(--sp-2)}
}