/* The Merchant Statement Analyzer's pages (app/views_analyzer.py): what the home page
   (frontend/standalone.html) and the guides share, then the guides' own, then the effective rate
   calculator's. The home page's own
   styles and the analyzer's colors are frontend/src/standalone/theme.css. */
/* Geist and Geist Mono (SIL Open Font License, fonts/LICENSE-geist*.txt), served from here so no
   font request leaves the page. */
@font-face{font-family:"Geist";font-style:normal;font-display:swap;font-weight:100 900;src:url("../fonts/geist-latin-wght-normal.a147f99cd533.woff2") format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist";font-style:normal;font-display:swap;font-weight:100 900;src:url("../fonts/geist-latin-ext-wght-normal.4841e590e2a9.woff2") format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Geist Mono";font-style:normal;font-display:swap;font-weight:100 900;src:url("../fonts/geist-mono-latin-wght-normal.a15f9d568fb0.woff2") format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist Mono";font-style:normal;font-display:swap;font-weight:100 900;src:url("../fonts/geist-mono-latin-ext-wght-normal.693cf932fe6b.woff2") format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* shared */
/* =========================================================
   0. Tokens: navy, green, white and black. The page is white;
   --n50 is kept for inset panels.
   ========================================================= */
:root{
  color-scheme:light;
  --navy:#0F2A4A;
  --navy-deep:#0A1D33;
  --green:#3F8F4E;
  --green-hover:#357A42;
  --green-ink:#2B6436;
  --green-light:#9FD3A8;
  --green-tint:#E6F2E8;
  --white:#FFFFFF;
  --black:#111111;
  --paper:#FBFBF8;
  --paper-edge:#E6E8E3;
  --n50:#F5F7FA;
  --n100:#E4E9F0;
  --n200:#C9D3DF;
  --slate:#5B6B80;
  --slate-ink:#3E4C60;
  /* The network fees' color in bars and dots: apart from the navy, still dark on white. */
  --network:#7D8DA3;
  --on-navy:#C5D2E0;
  --on-navy-muted:#93A6BC;
  --rail-dark:rgba(255,255,255,0.09);
  --rail:#E4E9F0;
  --col:1200px;
  --gutter:40px;
  --font:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --shadow-card:0 1px 1px rgba(10,29,51,0.04),0 2px 6px rgba(10,29,51,0.05),0 12px 32px rgba(10,29,51,0.07);
  --shadow-float:0 1px 2px rgba(10,29,51,0.10),0 8px 20px rgba(10,29,51,0.12),0 32px 72px rgba(10,29,51,0.22);
  --shadow-paper:0 0 0 1px rgba(10,29,51,0.05),0 2px 3px rgba(10,29,51,0.10),0 14px 30px rgba(10,29,51,0.18),0 44px 90px rgba(10,29,51,0.32);
  --ease:cubic-bezier(.16,1,.3,1);
}

/* =========================================================
   1. Base
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--white);
  color:var(--navy);
  font-family:var(--font);
  font-size:17px;
  line-height:1.55;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:var(--green-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--green-hover)}
button{font:inherit}
svg{display:block}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-64px;z-index:50;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:8px;background:var(--green);color:var(--black);font-weight:600;text-decoration:none}
.skip:focus{top:16px}
.col{position:relative;max-width:var(--col);margin:0 auto;padding:0 var(--gutter)}
/* The two column rails: the one structural line the pages draw. */
.rails{position:absolute;inset:0;z-index:0;pointer-events:none;max-width:var(--col);margin:0 auto;border-left:1px solid var(--rail);border-right:1px solid var(--rail)}
.navy .rails{border-color:var(--rail-dark)}
main{position:relative}
main > .col{z-index:1}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-0.01em}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 22px;border-radius:8px;border:1px solid transparent;
  font-weight:600;font-size:16px;line-height:1;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:box-shadow .15s ease,background-color .15s ease,border-color .15s ease,color .15s ease;
}
.btn svg{flex:none}
.btn-green{background:var(--green);color:var(--black);border-color:var(--green)}
.btn-green:hover{color:var(--black);background:#46994F;box-shadow:0 6px 18px rgba(63,143,78,0.32)}
.btn-ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,0.3)}
.btn-ghost:hover{color:var(--white);border-color:rgba(255,255,255,0.75)}
.btn-line{background:var(--white);color:var(--navy);border-color:var(--n200)}
.btn-line:hover{color:var(--green-ink);border-color:var(--green)}
.btn-sm{min-height:44px;padding:0 16px;font-size:14px}

/* =========================================================
   2. The navy strip and the header (the brand lives on navy on
   every page)
   ========================================================= */
.navy{position:relative;background:var(--navy);color:var(--white)}
.navy > .col{z-index:1}
.top{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;min-width:0;color:var(--white);text-decoration:none;font-weight:600;font-size:15px;letter-spacing:-0.01em}
.brand:hover{color:var(--white)}
.brand span{white-space:nowrap}
/* The site's mark (frontend/public/favicon.svg); on navy its square gets a hairline so it keeps its edge. */
.mark{width:22px;height:22px;flex:none;border-radius:5px}
.navy .mark{box-shadow:0 0 0 1px rgba(255,255,255,0.22)}
.nav{display:flex;align-items:center;gap:6px;flex:none}
.nav-link{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;color:var(--white);text-decoration:none;font-weight:500;font-size:15px;border-radius:8px}
.nav-link:hover,.nav-link[aria-current]{color:var(--green-light)}
/* The calculator's link says "Rate calculator", and "Calculator" on a phone, where the header drops
   the button and the brand, Guides and Calculator share 320 px. */
.nav-link .nav-short{display:none}

/* =========================================================
   3. Footer
   ========================================================= */
/* Flat on the page, under one rule: the closing navy band (home) or the article is the last
   heavy element, not a second dark slab. */
.foot{
  margin:56px 0 0;color:var(--slate-ink);border-top:1px solid var(--n100);
  padding:32px 0 24px;display:grid;grid-template-columns:1fr 1fr;gap:20px 64px;font-size:14.5px;line-height:1.6;
}
.foot a{color:var(--navy)}
.foot a:hover{color:var(--green-ink)}
.foot .fb{display:flex;align-items:center;gap:10px;color:var(--navy);font-weight:600;margin-bottom:8px}
.foot .fb .mark{width:20px;height:20px}
.foot .links{display:flex;flex-wrap:wrap;gap:2px 18px}
.foot .links a{display:inline-flex;align-items:center;min-height:44px}
.foot .note{grid-column:1 / -1;padding-top:14px;border-top:1px solid var(--n100);font-size:13px;color:var(--slate)}

/* =========================================================
   4. Shared responsive
   ========================================================= */
@media (max-width:1240px){
  .rails{display:none}
}
@media (max-width:1024px){
  .foot{grid-template-columns:1fr}
}
@media (max-width:900px){
  :root{--gutter:24px}
  .foot{padding:28px 0 20px}
}
@media (max-width:640px){
  :root{--gutter:16px}
  .top{height:56px}
  .brand{font-size:14px}
  .mark{width:20px;height:20px}
  .nav-link{padding:0 8px}
  .nav-link .nav-long{display:none}
  .nav-link .nav-short{display:inline}
  .top .btn{display:none}
  /* With Guides and Calculator beside it, the name wraps to two lines rather than run under them. */
  .brand span{white-space:normal;line-height:1.2}
  .foot{margin-top:40px;padding:24px 0 16px}
}
@media (max-width:360px){
  .brand{font-size:13px;gap:8px}
  .nav{gap:2px}
  .nav-link{font-size:14px;padding:0 5px}
}


/* guide */
/* =========================================================
   5. Page head on white: the title is the page's own, not a banner
   ========================================================= */
.head{position:relative;z-index:1;padding:clamp(28px,4svh,44px) 0 clamp(24px,3svh,36px);border-bottom:1px solid var(--n100)}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-bottom:22px;font-size:14px;color:var(--slate)}
.crumbs li{display:inline-flex;align-items:center;gap:8px}
.crumbs a{display:inline-flex;align-items:center;min-height:32px;color:var(--slate);text-decoration:none}
.crumbs a:hover{color:var(--green-ink)}
.crumbs .sep{color:var(--n200)}
.crumbs [aria-current="page"]{color:var(--navy);font-weight:500}
.head h1{font-size:clamp(32px,3.9vw,52px);line-height:1.04;letter-spacing:-0.035em;font-weight:560;max-width:22ch;text-wrap:balance}
.head .standfirst{margin-top:18px;font-size:clamp(17px,1.35vw,20px);line-height:1.5;color:var(--slate-ink);max-width:58ch}
.head .meta{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px;color:var(--slate)}
.head .meta span{display:inline-flex;align-items:center;gap:8px}
.head .meta span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--green)}

/* =========================================================
   6. Reading grid: the article, and a sticky aside with the
   contents and the one call to action
   ========================================================= */
.grid{
  position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 280px;grid-template-areas:"main aside";
  gap:clamp(40px,6vw,88px);align-items:start;padding-top:clamp(32px,4svh,48px);
}
.reading{grid-area:main;min-width:0}
.aside{grid-area:aside;position:sticky;top:24px;display:flex;flex-direction:column;gap:20px}
.toc{border-top:1px solid var(--navy);padding-top:12px}
.toc .toc-h{font-size:14px;font-weight:600;margin-bottom:6px;list-style:none;cursor:default}
.toc .toc-h::-webkit-details-marker{display:none}
.toc ol{display:flex;flex-direction:column}
.toc a{display:flex;align-items:center;min-height:36px;padding:4px 0 4px 14px;border-left:1px solid var(--n200);color:var(--slate);text-decoration:none;font-size:14px;line-height:1.35}
.toc a:hover{color:var(--navy);border-left-color:var(--navy)}
.toc a.is-active{color:var(--green-ink);border-left:2px solid var(--green);padding-left:13px;font-weight:500}
.aside-cta{border:1px solid var(--n100);border-radius:12px;background:var(--n50);padding:18px 20px}
.aside-cta p{font-size:14px;line-height:1.5;color:var(--slate-ink);margin-bottom:12px}
.aside-cta .btn{width:100%}

/* =========================================================
   7. Article body: styled by element only. The Markdown renderer
   (app/guides.py) adds only the table wrapper (.msa-table), a
   figures column (.n), a closing total row (.total) and <b> on a
   formula's operators.
   ========================================================= */
.body{max-width:68ch;font-size:17.5px;line-height:1.65;color:var(--navy)}
.body > p:first-child{font-size:20px;line-height:1.5}
.body h2{font-size:27px;line-height:1.15;letter-spacing:-0.025em;font-weight:560;margin:48px 0 14px;padding-top:20px;border-top:1px solid var(--n100);scroll-margin-top:24px}
.body h3{font-size:19px;line-height:1.3;letter-spacing:-0.015em;font-weight:600;margin:28px 0 8px;scroll-margin-top:24px}
.body h4{font-size:17px;font-weight:600;margin:24px 0 6px}
.body p{margin:0 0 18px}
.body ul,.body ol{margin:0 0 20px;padding-left:24px}
.body ul{list-style:disc}
.body ol{list-style:decimal}
.body li{margin-bottom:8px;padding-left:4px}
.body li::marker{color:var(--green-ink);font-weight:500}
.body a{color:var(--green-ink);overflow-wrap:anywhere}
.body strong{color:var(--navy);font-weight:600}
.body em{font-style:italic}
.body code{font-family:var(--mono);font-size:0.9em;background:var(--n100);padding:2px 5px;border-radius:4px}
.body pre{margin:0 0 20px;padding:16px 18px;background:var(--n100);border-radius:10px;overflow-x:auto;font-family:var(--mono);font-size:14px;line-height:1.5}
.body pre code{background:none;padding:0}
/* The formula slab (the effective-rate guide's "Effective rate = total fees ÷ total card sales ×
   100"): one navy block, the formula in mono, its operators green. */
.body blockquote{margin:22px 0 26px;padding:clamp(20px,2.4vw,28px) clamp(20px,2.6vw,32px);border-radius:12px;background:var(--navy);color:var(--white)}
.body blockquote p{margin:0;font-family:var(--mono);font-size:clamp(17px,1.5vw,20px);line-height:1.4;font-weight:500;letter-spacing:-0.01em;color:var(--white);overflow-wrap:anywhere}
.body blockquote p b{color:var(--green-light);font-weight:500}
.body blockquote p + p{margin-top:8px;font-family:var(--font);font-size:14px;font-weight:400;letter-spacing:0;color:var(--on-navy)}
.body blockquote strong,.body blockquote a{color:var(--green-light)}
.body hr{border:0;border-top:1px solid var(--n100);margin:40px 0}
.body img{max-width:100%;height:auto}
.body address{margin:0 0 18px;font-style:normal}
.msa-table{margin:20px 0 26px;overflow-x:auto;border:1px solid var(--n100);border-radius:10px;background:var(--white);box-shadow:var(--shadow-card);-webkit-overflow-scrolling:touch}
.msa-table table{width:100%;min-width:420px;border-collapse:collapse;font-size:15px;line-height:1.4}
.msa-table th,.msa-table td{padding:10px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--n100)}
.msa-table th{font-size:13.5px;font-weight:600;color:var(--navy);background:var(--n50)}
.msa-table td + td,.msa-table th + th{border-left:1px solid var(--n100)}
.msa-table tr:last-child td{border-bottom:0}
.msa-table .n{text-align:right;font-family:var(--mono);font-size:14px;white-space:nowrap}
.msa-table th.n{font-family:var(--font);font-size:13.5px}
.msa-table tr.total td{font-weight:600;background:var(--n50)}

/* =========================================================
   8. The closing call to action, related guides
   ========================================================= */
.guide-cta{margin-top:56px;border-radius:14px;background:var(--navy);color:var(--white);padding:32px 36px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 40px;align-items:center}
.guide-cta h2{font-size:28px;line-height:1.1;letter-spacing:-0.03em;font-weight:560;color:var(--white)}
.guide-cta p{margin-top:8px;font-size:15.5px;line-height:1.5;color:var(--on-navy);max-width:48ch}
.related{margin-top:56px}
.related .rh{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:18px}
.related h2{font-size:26px;line-height:1.15;letter-spacing:-0.025em;font-weight:560}
.related ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.related a{display:flex;flex-direction:column;gap:8px;height:100%;padding:18px 20px;border:1px solid var(--n100);border-radius:12px;background:var(--white);box-shadow:var(--shadow-card);color:var(--navy);text-decoration:none}
.related a:hover{border-color:var(--green)}
.related .t{font-size:16.5px;font-weight:600;line-height:1.3;letter-spacing:-0.01em}
.related a:hover .t{color:var(--green-ink)}
.related .d{font-size:14px;line-height:1.5;color:var(--slate)}
.related .go{margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:500;color:var(--green-ink)}

/* =========================================================
   9. Guides index (/guides): each card paints its own white, so a
   short card never shows a grey block under it.
   ========================================================= */
#guides-index{position:relative;z-index:1}
.gi-group{margin-top:40px}
.gi-group h2{padding-bottom:8px;margin-bottom:16px;border-bottom:1px solid var(--navy);font-size:15px;font-weight:600;line-height:1.3;color:var(--navy)}
.gi-list{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
.gi-list li{display:flex;background:var(--white)}
.gi-list li:last-child:nth-child(odd){grid-column:1 / -1} /* an odd last guide takes the row, not half of it */
.gi-list a{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 20px;gap:16px;padding:20px 22px;border:1px solid var(--n100);border-radius:12px;background:var(--white);box-shadow:var(--shadow-card);color:var(--navy);text-decoration:none;min-height:44px}
.gi-list a:hover{border-color:var(--green)}
.gi-list .t{display:block;font-size:17.5px;font-weight:600;line-height:1.3;letter-spacing:-0.015em}
.gi-list a:hover .t{color:var(--green-ink)}
.gi-list .d{display:block;margin-top:6px;font-size:14.5px;line-height:1.5;color:var(--slate)}
.gi-list .arrow{color:var(--n200);align-self:start;margin-top:5px}
.gi-list a:hover .arrow{color:var(--green)}

/* =========================================================
   10. Guide responsive: on a tablet or phone the contents come
   first, in two columns while they fit.
   ========================================================= */
@media (max-width:1024px){
  /* The aside's two parts become grid items of their own: the contents first, the call to action
     after the article (the engine's own upload copy sits there on the home page too). */
  .grid{grid-template-columns:minmax(0,1fr);grid-template-areas:none;gap:32px}
  .reading{grid-area:auto;order:0}
  .aside{display:contents}
  .toc{order:-1}
  .aside-cta{order:1;margin-top:-8px}
  .toc ol{display:block;columns:2;column-gap:20px}
  .toc li{break-inside:avoid}
  .related ul{grid-template-columns:1fr}
  .gi-list{grid-template-columns:1fr}
  .guide-cta{grid-template-columns:1fr}
}
@media (max-width:640px){
  .head{padding:24px 0}
  .crumbs{margin-bottom:16px;font-size:13px}
  /* A phone shows the way back only: the page's own title is the h1 right under it. */
  .crumbs li:first-child,.crumbs li:nth-child(3){display:none}
  .crumbs li:nth-child(2) .sep{display:none}
  /* The contents fold shut on a phone (static/js/analyzer-guide.js); the label is the control. */
  .toc{border-top:0;padding-top:0}
  .toc .toc-h{cursor:pointer;display:flex;align-items:center;justify-content:space-between;min-height:44px;margin:0}
  .toc .toc-h::after{content:"";width:8px;height:8px;border-right:1.5px solid var(--navy);border-bottom:1.5px solid var(--navy);transform:rotate(45deg);margin-right:4px;transition:transform .2s}
  .toc-fold[open] .toc-h::after{transform:rotate(-135deg)}
  .toc-fold[open] .toc-h{margin-bottom:6px}
  .aside{grid-template-columns:1fr}
  .toc ol{columns:1}
  .body{font-size:16.5px}
  .body > p:first-child{font-size:18.5px}
  .body h2{font-size:24px;margin-top:40px}
  .guide-cta{padding:24px 20px}
  .guide-cta h2{font-size:25px}
  .guide-cta .btn{width:100%}
  .related .rh{flex-wrap:wrap}
  .gi-list a{padding:18px 16px}
}


/* calculator */
/* =========================================================
   11. Effective rate calculator (/effective-rate-calculator,
   templates/analyzer/calculator.html): the form on white, the
   result on navy like the formula slab, then the guide grid.
   ========================================================= */
.calc{
  --error:#B42318;--error-tint:#FEF3F2;
  position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);
  gap:24px;align-items:stretch;padding-top:clamp(28px,4svh,44px);
}
.calc-form{display:flex;flex-direction:column;gap:22px;padding:clamp(22px,2.6vw,32px);border:1px solid var(--n100);border-radius:14px;background:var(--white);box-shadow:var(--shadow-card)}
.calc-field{display:flex;flex-direction:column;gap:6px}
.calc-field label{font-size:16px;font-weight:600;line-height:1.3;color:var(--navy)}
.calc-optional{font-weight:400;color:var(--slate)}
.calc-hint{font-size:14px;line-height:1.45;color:var(--slate)}
.calc-error{font-size:14px;line-height:1.45;font-weight:500;color:var(--error)}
.calc-error[hidden]{display:none}
.calc-money{position:relative}
.calc-unit{position:absolute;left:16px;top:calc(50% + 2px);transform:translateY(-50%);font-family:var(--mono);font-size:18px;color:var(--slate);pointer-events:none}
.calc-field input{
  width:100%;min-height:52px;margin-top:4px;padding:0 16px;border:1px solid var(--n200);border-radius:8px;background:var(--white);
  color:var(--navy);font-family:var(--mono);font-size:18px;letter-spacing:-0.01em;font-variant-numeric:tabular-nums;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.calc-money input{padding-left:34px}
.calc-field input::placeholder{color:#8593A6}
.calc-field input:hover{border-color:var(--slate)}
.calc-field input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(63,143,78,0.22)}
.calc-field.has-error input{border-color:var(--error);background:var(--error-tint)}
.calc-field.has-error input:focus{box-shadow:0 0 0 3px rgba(180,35,24,0.18)}
.calc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:2px}
.calc-clear{display:inline-flex;align-items:center;min-height:44px;font-size:15px;color:var(--slate-ink)}
.calc-alert{padding:14px 16px;border:1px solid var(--error);border-left-width:4px;border-radius:8px;background:var(--error-tint);color:var(--navy);font-size:15px;line-height:1.45}
.calc-alert[hidden]{display:none}
.calc-alert p{font-weight:600}
.calc-alert ul{margin-top:6px;display:flex;flex-direction:column;gap:4px}
.calc-alert a{color:var(--error)}
.calc-out{position:relative;display:flex;flex-direction:column;border-radius:14px;background:var(--navy);color:var(--white);padding:clamp(24px,2.8vw,36px);overflow:hidden;isolation:isolate}
.calc-out [hidden]{display:none}
.calc-k{font-size:14px;font-weight:500;color:var(--on-navy)}
.calc-placeholder{margin-top:14px;font-size:19px;line-height:1.4;color:var(--white);max-width:22ch}
.calc-formula{margin-top:28px;padding-top:18px;border-top:1px solid rgba(255,255,255,0.12);font-family:var(--mono);font-size:15px;line-height:1.5;color:var(--on-navy)}
.calc-formula b{color:var(--green-light);font-weight:500}
.calc-rate{margin-top:6px;font-size:clamp(52px,6vw,76px);line-height:1;font-weight:560;letter-spacing:-0.04em;font-variant-numeric:tabular-nums;color:var(--green-light);overflow-wrap:anywhere}
.calc-sentence{margin-top:12px;font-size:16px;line-height:1.5;color:var(--white)}
.calc-figures{margin:20px 0 0;border-top:1px solid rgba(255,255,255,0.12)}
.calc-figures > div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,0.12)}
.calc-figures dt{font-size:14.5px;color:var(--on-navy)}
.calc-figures dd{margin:0;font-size:15.5px;color:var(--white);text-align:right;overflow-wrap:anywhere}
.calc-note{margin-top:18px;padding:12px 14px;border-radius:8px;background:rgba(255,255,255,0.08);border-left:3px solid var(--green-light);font-size:14px;line-height:1.5;color:var(--white)}
.body .calc-guides{columns:2;column-gap:28px}
.body .calc-guides li{break-inside:avoid}

@media (max-width:900px){
  .calc{grid-template-columns:minmax(0,1fr)}
  /* A result the server worked out (a submit without JavaScript, a shared link) comes first. */
  .calc.has-result .calc-out{order:-1}
}
.calc{scroll-margin-top:12px}
@media (max-width:640px){
  .calc-form{padding:20px 16px}
  .calc-out{padding:22px 18px}
  .calc-actions .btn{flex:1}
  .body .calc-guides{columns:1}
}


/* sample report */
/* =========================================================
   12. Sample report (/sample-report, templates/analyzer/sample.html):
   the sample band under the header, then the report in the
   analyzer's frame, as the visitor's own will look.
   ========================================================= */
.sample-band{background:var(--paper);border-bottom:1px solid var(--paper-edge)}
.sample-band-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;padding-top:14px;padding-bottom:14px}
.sample-band p{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:15px;line-height:1.45}
.sample-tag{display:inline-flex;align-items:center;padding:4px 9px;border-radius:4px;background:var(--navy);color:var(--green-light);font-family:var(--mono);font-size:12px;font-weight:600;line-height:1.2}
.btn .arrow,.glink .arrow{flex:none}
.sample-head{border-bottom:0;padding-bottom:clamp(20px,3svh,28px)}
.sample-title{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 24px}
.sample-title .standfirst{margin-top:10px}
.sample-frame{position:relative;z-index:1;background:var(--n50);border:1px solid var(--n100);border-radius:14px;box-shadow:var(--shadow-float);overflow:clip}
.sample-frame .frame-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;padding:0 20px;border-bottom:1px solid var(--n100);background:var(--white)}
.sample-frame .fb{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:14px;color:var(--navy);min-width:0}
.sample-frame .fb .mark{width:20px;height:20px;box-shadow:none}
.sample-frame-note{font-family:var(--mono);font-size:13px;color:var(--slate);text-align:right}
.sample-body{display:flex;flex-direction:column;gap:24px;padding:40px 72px 48px}

/* The report itself, on paper. */
.sample-doc{position:relative;display:flex;flex-direction:column;gap:28px;padding:40px 48px 36px;border-radius:10px;background:var(--white);box-shadow:0 0 0 1px rgba(10,29,51,0.05),0 2px 3px rgba(10,29,51,0.10),0 14px 30px rgba(10,29,51,0.18)}
.sample-doc-tag{position:absolute;top:18px;right:18px}
.sample-doc-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:16px;padding:0 90px 18px 0;border-bottom:1px solid var(--navy)}
.sample-doc-brand{display:flex;align-items:center;gap:12px}
.sample-doc-brand .mark{width:30px;height:30px;border-radius:7px}
.sample-doc-brand h2{font-size:22px;font-weight:600;letter-spacing:-0.02em;line-height:1.1}
.sample-doc-brand p,.sample-doc-who{font-size:14px;color:var(--slate)}
.sample-doc-who{text-align:right}
.sample-doc-who b{display:block;color:var(--navy);font-size:15px}
.sample-lede{font-size:15px;color:var(--slate-ink)}
.sample-sec{display:flex;flex-direction:column;gap:14px}
.sample-sec h3{font-size:17px;font-weight:600;letter-spacing:-0.01em}
.sample-sec-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px}
.sample-sec-head p,.sample-muted{font-size:14px;color:var(--slate)}
.num,.sample-figs dd,.sample-groups em,.sample-lines td:last-child,.sample-count > span:first-child{font-family:var(--mono);font-variant-numeric:tabular-nums}
.sample-figs{display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:20px;margin:0;padding:18px 0;border-top:1px solid var(--n100);border-bottom:1px solid var(--n100)}
.sample-figs dt{font-size:14px;color:var(--slate)}
.sample-figs dd{margin:6px 0 0;font-size:30px;font-weight:500;letter-spacing:-0.03em;line-height:1}
.sample-figs .rate{padding-left:20px;border-left:1px solid var(--n100)}
.sample-figs .rate dd{font-size:40px;font-weight:560;color:var(--green-ink)}
.sample-figs .rate dd span{display:block;margin-top:6px;font-family:var(--font);font-size:13px;font-weight:400;letter-spacing:0;line-height:1.4;color:var(--slate)}
.sample-bar{display:flex;gap:4px;height:14px;border-radius:4px;overflow:hidden}
.sample-bar i{display:block;min-width:4px}
.sample-bar [data-kind="interchange"],.sample-groups [data-kind="interchange"] > i,.sample-lines [data-kind="interchange"] i{background:var(--navy)}
.sample-bar [data-kind="network"],.sample-groups [data-kind="network"] > i,.sample-lines [data-kind="network"] i{background:var(--network)}
.sample-bar [data-kind="markup"],.sample-groups [data-kind="markup"] > i,.sample-lines [data-kind="markup"] i{background:var(--green)}
.w-631{flex:631 1 0}.w-49{flex:49 1 0}.w-321{flex:321 1 0}.w-51{flex:51 1 0}.w-39{flex:39 1 0}.w-6{flex:6 1 0}.w-4{flex:4 1 0}
.sample-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:16px}
.sample-groups li{display:grid;grid-template-columns:12px minmax(0,1fr);gap:4px 10px;align-items:center}
.sample-groups li > i{width:12px;height:12px;border-radius:3px}
.sample-groups b{font-size:15px}
.sample-groups span,.sample-groups em{grid-column:2}
.sample-groups span{font-size:13px;color:var(--slate)}
.sample-groups em{font-style:normal;font-size:15px}
.sample-count{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;font-size:14px}
.sample-count > span:first-child{font-size:13px;color:var(--slate)}
.sample-flagged{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.sample-flagged .flag-ico{width:16px;height:16px}
.sample-lines{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--n100);border-radius:12px;overflow:hidden;background:var(--white);font-size:15px}
.sample-lines th,.sample-lines td{padding:12px 16px;border-bottom:1px solid var(--n100);text-align:left;vertical-align:middle}
.sample-lines thead th{padding-top:10px;padding-bottom:10px;border-bottom-color:var(--navy);font-size:13px;font-weight:500;color:var(--slate)}
.sample-lines th[scope="row"]{font-weight:500}
.sample-lines td.what{font-size:14px;color:var(--slate-ink)}
.sample-lines td:last-child,.sample-lines thead th:last-child{width:120px;text-align:right;white-space:nowrap}
.sample-lines .group th,.sample-lines .group td{padding-top:9px;padding-bottom:9px;background:var(--n50);font-size:14px;font-weight:600}
.sample-lines .group i{display:inline-block;width:10px;height:10px;margin-right:8px;border-radius:3px;vertical-align:-1px}
.sample-lines tfoot th,.sample-lines tfoot td{border-bottom:0;background:var(--n50);font-weight:600}
/* The highlighter on a line worth questioning, on every line of a name that wraps. */
.pen{margin:0 -4px;padding:0 4px;border-radius:3px;background:linear-gradient(transparent 12%,rgba(159,211,168,.55) 12%,rgba(159,211,168,.55) 88%,transparent 88%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.flag{display:inline-flex;align-items:center;gap:5px;margin-left:10px;padding:2px 8px;border:1px solid var(--navy);border-radius:999px;background:var(--white);font-size:12px;font-weight:600;white-space:nowrap;vertical-align:1px}
.sample-notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:14px;margin-top:6px}
.sample-note{display:flex;flex-direction:column;gap:6px;padding:16px 18px;border:1px solid var(--navy);border-radius:12px}
.sample-note p{font-size:14px;line-height:1.5;color:var(--slate-ink)}
.sample-note .sample-note-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:15px;color:var(--navy)}
.glink{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;min-height:44px;font-size:14px;font-weight:600}
.sample-mix-bar{gap:3px;height:12px}
.sample-mix-bar i:nth-child(1){background:var(--navy)}
.sample-mix-bar i:nth-child(2){background:#5E7190}
.sample-mix-bar i:nth-child(3){background:#9AAAC0}
.sample-mix-bar i:nth-child(4){background:var(--n200)}
.sample-mix{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px}
.sample-checked{display:flex;align-items:center;gap:8px;font-size:14.5px;color:var(--slate-ink)}
.sample-checked svg{flex:none;color:var(--green-ink)}
.sample-doc-foot{padding-top:16px;border-top:1px solid var(--n100);font-size:13px;color:var(--slate)}
.sample-custom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;padding:20px 24px;border:1.5px dashed #B9DCC0;border-radius:14px;background:var(--green-tint)}
.sample-custom > div{display:flex;flex-direction:column;gap:4px;max-width:60ch}
.sample-custom h2{font-size:20px;font-weight:600;letter-spacing:-0.01em}
.sample-custom h2 b{color:var(--green-ink)}
.sample-custom p{font-size:15px;line-height:1.5}
.sample-custom .btn-line{border:1.5px solid var(--navy)}
.sample-end{display:flex;justify-content:center;padding-top:8px}
@media (max-width:900px){
  .sample-body{padding:28px 20px}
  .sample-doc{padding:28px 24px 24px}
  .sample-figs{grid-template-columns:minmax(0,1fr)}
  .sample-figs .rate{padding-left:0;border-left:0}
  .sample-lines .what{display:none}
}
@media (max-width:640px){
  .sample-band p{font-size:14px}
  .sample-band .btn{width:100%}
  .sample-title .btn{width:100%}
  .sample-frame{border-radius:12px}
  .sample-frame .frame-bar{padding:0 14px}
  .sample-frame-note{display:none}
  .sample-body{padding:16px 12px 24px;gap:18px}
  .sample-doc{padding:22px 16px 20px;gap:22px}
  .sample-doc-head{padding-right:64px}
  .sample-doc-who{text-align:left}
  .sample-figs dd{font-size:26px}
  .sample-figs .rate dd{font-size:34px}
  .sample-lines{font-size:14px}
  .sample-lines th,.sample-lines td{padding:10px 10px}
  .sample-lines td:last-child,.sample-lines thead th:last-child{width:auto}
  .flag{display:flex;width:max-content;margin:6px 0 0}
  .sample-custom{padding:18px 16px}
  .sample-custom .btn,.sample-end .btn{width:100%;white-space:normal;text-align:center}
}

/* The 404 (templates/404.html): the three ways on, under its heading. */
.nf-ways{display:flex;flex-wrap:wrap;gap:12px;padding:32px 0 64px}
@media (max-width:640px){
  .nf-ways{flex-direction:column;padding:24px 0 48px}
  .nf-ways .btn{width:100%}
}