/* The public website (docs/website.md). Loaded after /tokens.css, /product.css (claret), /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; Atlas'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:47.5rem}

/* ---------- 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:var(--sp-5);padding-top:0.875rem;padding-bottom:0.875rem}
.site-header .brand-sub{display:none}
.site-nav{display:flex;align-items:center;gap:var(--sp-7);font-size:0.875rem;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:0.625rem}
.site-actions .signin{font-size:0.875rem;font-weight:600;color:var(--text);padding:var(--sp-2) 0.375rem}
.menu-button{display:none;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;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:var(--sp-1) var(--sp-1);border-bottom:1px solid var(--line);font-size:var(--fs-lg);font-weight:600;color:var(--text)}

/* ---------- Footer ---------- */
.site-footer{margin-top:var(--sp-11);border-top:1px solid var(--line);background:var(--paper-2)}
.site-footer .wrap{padding-top:var(--sp-9);padding-bottom:2.5rem;display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,1fr));gap:2rem}
.footer-about p{margin-top:0.875rem;font-size:var(--fs-md);color:var(--muted);line-height:1.6;max-width:20rem}
.footer-col h2{font-family:var(--font-body);font-size:var(--fs-xs);letter-spacing:0.0875rem;text-transform:uppercase;font-weight:700;color:var(--label)}
.footer-col ul{list-style:none;margin:0.875rem 0 0;padding:0;display:flex;flex-direction:column;gap:0.625rem;font-size:0.875rem}
.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:var(--sp-5);display:flex;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;font-size:var(--fs-md);color:var(--muted)}

/* ---------- Sections ---------- */
.section{padding:var(--sp-11) var(--gutter) 0}
.section-tight{padding-top:var(--sp-10)}
.lead-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap}
.lead-head h2{font-size:var(--fs-h1);letter-spacing:-0.0625rem;line-height:1.1;margin-top:0.875rem;max-width:45rem}
.lead-head p{max-width:27.5rem;font-size:var(--fs-base);line-height:1.65;color:var(--muted)}
.page-hero{padding:4.5rem var(--gutter) var(--sp-2);max-width:78rem;margin:0 auto}
.page-hero h1{font-size:3.375rem;line-height:1.06;letter-spacing:-0.0875rem;margin-top:var(--sp-4);max-width:55rem}
.page-hero .lede{margin-top:var(--sp-5);max-width:45rem}
.eyebrow{color:var(--link)}
.dark .eyebrow{color:var(--sand)}

/* ---------- Landing hero ---------- */
.hero{padding:2.5rem var(--gutter) var(--sp-7)}
.hero-copy{display:flex;flex-direction:column;gap:var(--sp-4);max-width:62.5rem}
.hero-copy .pill{align-self:flex-start}
.hero h1{font-size:3.25rem;line-height:1.05;letter-spacing:-0.0875rem}
.hero .lede{max-width:55rem;font-size:1.125rem;line-height:1.55}
.hero-actions{display:flex;align-items:center;gap:0.875rem;flex-wrap:wrap;margin-top:var(--sp-1)}
.hero-proof{display:flex;gap:0.625rem 1.625rem;flex-wrap:wrap;font-size:var(--fs-md);color:var(--muted)}
.hero-proof span{display:inline-flex;align-items:center;gap:var(--sp-2)}
.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:2rem}

/* ---------- What you need: a compact strip ---------- */
.need{padding-top:var(--sp-10);padding-bottom:2.5rem;scroll-margin-top:5rem}
.need-strip{display:grid;grid-template-columns:minmax(0,9.375rem) minmax(0,1fr);gap:var(--sp-4) var(--sp-7);padding:1.375rem 1.625rem;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:0.1125rem;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:var(--sp-4) var(--sp-6)}
.need-list li{display:flex;flex-direction:column;gap:var(--sp-1);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:0.125rem;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:var(--sp-7) 1.625rem}
.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:2.375rem;letter-spacing:-0.0375rem;color:var(--ink);line-height:1.1}
.fact-band p{font-size:var(--fs-md);color:var(--muted);margin-top:0.375rem;line-height:1.5}

/* ---------- Problem ---------- */
.problem{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:3.5rem;align-items:start}
.problem h2{font-size:var(--fs-h1);letter-spacing:-0.0625rem;line-height:1.1;margin-top:0.875rem}
.problem-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)}
.problem-list li{padding:1.375rem;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:var(--sp-2);font-size:0.875rem;line-height:1.6;color:var(--muted)}

/* ---------- Steps ---------- */
.steps-list{list-style:none;margin:var(--sp-9) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.125rem;counter-reset:step}
.steps-list li{padding:var(--sp-6);border-radius:var(--r-lg);background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;gap:0.625rem;counter-increment:step}
.steps-list li::before{content:"0" counter(step);font-family:var(--font-display);font-size:1.375rem;color:var(--link)}
.steps-list h3{font-size:var(--fs-lg)}
.steps-list p{font-size:0.875rem;line-height:1.6;color:var(--muted)}
.feature{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:3.5rem;align-items:center;margin-top:5.5rem}
.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:var(--sp-4)}
.feature-copy .num{font-family:var(--font-display);font-size:1.5rem;color:var(--link)}
.feature-copy h2{font-size:2.375rem;letter-spacing:-0.0563rem;line-height:1.1}
.feature-copy p{color:var(--muted);line-height:1.7}
.feature-copy .check-list{margin-top:0.375rem}

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

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

/* ---------- Pricing ---------- */
.plan-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0.875rem;margin-top:2.5rem;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:57.5rem}
.plan .route{margin-top:-0.375rem;font-size:var(--fs-md);font-weight:600;line-height:1.45;color:var(--link)}
.pricing-col>*{max-width:57.5rem}
.try{display:flex;justify-content:space-between;align-items:center;gap:1.125rem 2rem;flex-wrap:wrap;margin-top:2.5rem;padding:var(--sp-6) var(--sp-7);border-radius:var(--r-lg);border:1px solid var(--line);border-left:var(--sp-1) solid var(--product);background:var(--paper-2)}
.try>div{flex:1 1 26.25rem}
.try h2{font-size:1.75rem;letter-spacing:-0.0312rem}
.try p{margin-top:var(--sp-2);color:var(--muted);line-height:1.6}
.routes{padding-top:3.5rem}
.routes-head h2{font-size:1.875rem;letter-spacing:-0.0375rem;line-height:1.15;margin-top:0.625rem}
.routes .plan-grid{margin-top:var(--sp-7)}
.msp-examples{margin-top:var(--sp-7);display:flex;flex-direction:column;gap:var(--sp-3)}
.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:var(--sp-3)}
.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:var(--sp-6) var(--sp-5);border-radius:var(--r-lg);border:1px solid var(--line);background:var(--card);display:flex;flex-direction:column;gap:0.875rem;min-width:0}
.plan.is-featured{border:0.125rem solid var(--product);box-shadow:var(--shadow-md)}
.plan .flag{position:absolute;top:-0.75rem;left:var(--sp-5);padding:var(--sp-1) 0.625rem;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:var(--fs-stat);line-height:1;color:var(--ink);letter-spacing:-0.05rem}
.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:0.875rem;line-height:1.55;color:var(--text)}
.plan .check-list{font-size:var(--fs-md);gap:0.5625rem;flex:1}
.plan .check-list svg{margin-top:0.125rem}
.plan .btn{width:100%;white-space:normal;text-align:center}
.soon{display:inline-block;margin-left:0.375rem;padding:1px 0.4375rem;border-radius:var(--r-xs);background:var(--review-bg);color:var(--review);font-size:var(--fs-xs);font-weight:700;letter-spacing:0.025rem;vertical-align:1px;white-space:nowrap}
.compare-table th:first-child,.compare-table td:first-child{min-width:12.5rem}
.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:1.125rem;font-size:var(--fs-md);color:var(--muted);max-width:51.25rem;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:var(--sp-6) 3.5rem;align-items:start}
.about h2{font-size:var(--fs-h1);letter-spacing:-0.0625rem;line-height:1.1}
.about-lead{margin-top:var(--sp-4);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:2rem;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:var(--sp-4);padding:var(--sp-5) 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:1.625rem;line-height:1;color:var(--link);flex-shrink:0}
.faq details[open] summary::after{content:"\2212"}
.faq details>div{padding:0 0 1.375rem;color:var(--muted);line-height:1.7;max-width:51.25rem;display:flex;flex-direction:column;gap:0.625rem}
.faq-group{margin-top:3.5rem}
.faq-group h2{font-size:1.75rem}

/* ---------- Closing call to action ---------- */
.closing{margin-top:var(--sp-11);padding:3.5rem;border-radius:var(--r-xl);display:flex;justify-content:space-between;align-items:center;gap:var(--sp-7);flex-wrap:wrap}
.closing h2{font-size:2.25rem;letter-spacing:-0.05rem;max-width:40rem}
.closing p{margin-top:0.625rem;max-width:35rem}
.closing .row{gap:var(--sp-3)}

/* ---------- Prose (legal, download, contact) ---------- */
.prose{max-width:47.5rem;margin-top:2.5rem;display:flex;flex-direction:column;gap:0.875rem;line-height:1.75}
.prose h2{font-size:1.625rem;margin-top:var(--sp-7)}
.prose h3{margin-top:var(--sp-3)}
.prose ul,.prose ol{margin:0;padding-left:1.375rem;display:flex;flex-direction:column;gap:0.375rem}
.prose pre{margin:0;padding:var(--sp-4) 1.125rem;border-radius:var(--r-md);border:1px solid var(--line);background:var(--card);overflow-x:auto;font-size:var(--fs-md);line-height:1.6}
.prose pre code{background:none;padding:0;font-size:inherit}
.page-hero .eyebrow a{color:inherit}
.draft{margin-top:var(--sp-6);padding:var(--sp-4) var(--sp-5);border-radius:var(--r-md);border:1px dashed var(--review);background:var(--review-bg);color:var(--review);font-weight:600;max-width:47.5rem}
.contact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4);margin-top:2.5rem}

/* ---------- Sign-up ---------- */
.signup{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,27.5rem);gap:var(--sp-10);align-items:start;padding:var(--sp-10) var(--gutter) 0}
.signup-form{padding:2rem;border-radius:var(--r-xl);border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow-md);display:flex;flex-direction:column;gap:1.375rem}
.signup-form form{display:flex;flex-direction:column;gap:1.125rem}
.signup-form h2{font-size:1.875rem}
.page-title{font-size:3rem;line-height:1.08;letter-spacing:-0.075rem}
.steps-plain{margin:0;padding-left:1.375rem;display:flex;flex-direction:column;gap:var(--sp-2);color:var(--muted);line-height:1.6}
.signup-form section{display:flex;flex-direction:column;gap:1.125rem}
.auth-links{display:flex;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;font-size:0.875rem;color:var(--muted)}

/* ---------- Responsive ---------- */
@media (max-width:73.75em){
  .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:67.5em){
  .site-nav{display:none}
  .menu-button{display:inline-flex}
  .site-menu.is-open{display:flex;flex-direction:column;gap:0.125rem;padding:var(--sp-2) var(--gutter) var(--sp-4);border-top:1px solid var(--line)}
  .site-menu a{padding:var(--sp-3) var(--sp-1);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:var(--sp-8) var(--gutter) var(--sp-7)}
  .hero h1{font-size:2.875rem}
  .problem,.promise,.signup,.about{grid-template-columns:minmax(0,1fr);gap:2rem}
  .promise{padding:2.5rem}
  .feature,.feature.flip{grid-template-columns:minmax(0,1fr);gap:var(--sp-7);margin-top:var(--sp-10)}
  .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:1.375rem var(--sp-5)}
  .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:4.5rem}
  .page-hero h1{font-size:var(--fs-h1)}
}
@media (max-width:45em){
  .site-actions .signin,.site-actions .theme-switch{display:none}
  .hero h1{font-size:var(--fs-stat);letter-spacing:-0.0625rem}
  .hero .lede,.page-hero .lede{font-size:1.0625rem}
  .page-hero{padding-top:2.75rem}
  .page-hero h1{font-size:var(--fs-h2);letter-spacing:-0.05rem}
  .lead-head h2,.problem h2,.promise h2,.about h2{font-size:2rem}
  .feature-copy h2{font-size:1.875rem}
  .hero-actions .btn{width:100%}
  .fact-band{grid-template-columns:minmax(0,1fr)}
  .fact-band div{padding:1.125rem 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:var(--sp-5)}
  .promise{padding:var(--sp-7) var(--sp-5);border-radius:var(--r-lg)}
  .closing{padding:var(--sp-7) var(--sp-5);border-radius:var(--r-lg);margin-top:var(--sp-10)}
  .closing h2{font-size:1.75rem}
  .closing .btn{width:100%}
  .site-footer .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .signup{padding-top:2.5rem}
  .signup-form{padding:1.375rem}
  .page-title{font-size:var(--fs-h2);letter-spacing:-0.05rem}
}
@media (max-width:26.25em){
  .site-header .brand-name{font-size:1.125rem}
  .site-actions .btn{padding:0.5625rem var(--sp-3)}
}

/* ---------- Atlas: 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:45em){
  .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:26.25em){
  .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)}
}
/* The ten sections of the document as a numbered list on the landing page and How it works. */
.toc-list{list-style:none;margin:var(--sp-9) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)}
.toc-list li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-1) var(--sp-4);padding:var(--sp-5) var(--sp-6);border-radius:var(--r-lg);border:thin solid var(--line);background:var(--card)}
.toc-list .no{grid-row:1 / span 3;font-family:var(--font-display);font-size:var(--fs-h2);line-height:1;color:var(--link)}
.toc-list h3{font-size:var(--fs-xl);color:var(--ink)}
.toc-list p{font-size:var(--fs-md);line-height:1.6;color:var(--muted)}
.toc-list .figure{font-size:var(--fs-sm);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--link)}
/* The change-log chips of the example document (added, changed, removed): state tokens, never the product color. */
.example-rows .is-added .left{background:var(--pass-bg);color:var(--pass)}
.example-rows .is-changed .left{background:var(--info-bg);color:var(--info)}
.example-rows .is-removed .left{background:var(--fail-bg);color:var(--fail)}
.example-rows .is-neutral .left{background:var(--paper-2);color:var(--muted)}
/* A figure of the example document, the portal engine's SVG as an image; it is drawn for print, so it sits on a light sheet in both schemes. */
.figure-frame{margin:0;padding:var(--sp-5);border-radius:var(--r-lg);border:thin solid var(--line);background:var(--card);overflow-x:auto}
.figure-frame img{display:block;box-sizing:border-box;width:100%;height:auto;padding:var(--sp-3);border-radius:var(--r-md);background:var(--on-dark-strong)}
.figure-frame figcaption{margin-top:var(--sp-3);font-size:var(--fs-md);color:var(--muted)}
/* A small table inside an example. */
.example .table-wrap{margin:0}
@media (max-width:45em){
  .toc-list{grid-template-columns:minmax(0,1fr)}
}