/* ═══════════════════════════════════════════════════════════════════
 RoofMap marketing pages — the shared design system.

 Lifted verbatim out of landing.html, which is where it grew. It lives in
 its own file now because there are nine public pages rather than one, and
 nine copies of a stylesheet is nine places for a colour to drift.

 The same reasoning that kept it inline still applies to weight: this is
 a few KB of hand-written CSS with no framework behind it, because the app
 is a 2.9 MB single file and that is exactly the wrong thing to hand a
 stranger. One cached stylesheet across nine pages beats one copy each.

 Page-specific rules stay in the page. Anything two pages need lives here.
 ═══════════════════════════════════════════════════════════════════ */
*,*::before,*::after{ box-sizing:border-box }
:root{
  --ink:#0a1628; --ink-2:#1c2b3f; --body:#3d4d61; --muted:#6b7c91;
  --accent:#0099cc; --accent-2:#00b4d8; --accent-deep:#00719a;
  --paper:#ffffff; --paper-2:#f4f7fa; --line:#dde5ee;
  --max:1180px;
}
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--paper); color:var(--body);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.6; overflow-x:hidden;
}
h1,h2,h3{ color:var(--ink); margin:0; line-height:1.12; letter-spacing:-.022em; font-weight:800 }
h1{ font-size:clamp(34px,5.6vw,62px) }
h2{ font-size:clamp(27px,3.6vw,40px) }
h3{ font-size:19px; letter-spacing:-.01em }
p{ margin:0 }
a{ color:inherit }
img{ max-width:100%; display:block }
.wrap{ max-width:var(--max); margin:0 auto; padding:0 24px }
.eyebrow{
  font-size:11.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); margin-bottom:14px;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 28px; border-radius:11px; font-size:16px; font-weight:700;
  font-family:inherit; text-decoration:none; cursor:pointer; border:none;
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:hover{ transform:translateY(-1px) }
.btn-primary{ background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; box-shadow:0 8px 26px rgba(0,153,204,.36) }
.btn-primary:hover{ filter:brightness(1.06); box-shadow:0 12px 32px rgba(0,153,204,.44) }
.btn-ghost{ background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.34) }
.btn-ghost:hover{ background:rgba(255,255,255,.16) }
.btn-dark{ background:var(--ink); color:#fff }

/* ── header ── */
header{ position:absolute; top:0; left:0; right:0; z-index:20; padding:20px 0 }
.nav{ display:flex; align-items:center; gap:30px }
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; flex-shrink:0 }
/* 44/24, not 38/20: the lockup was only 1.33x the nav links beside it, which
   is thin for the one element that says whose product this is. Not larger —
   52/28 overflows the header horizontally at 320px wide, which is a real
   Android width; sitebars.mjs measures that so the next nudge upward has to
   prove itself on a small phone. The footer re-uses .brand and stays small
   through its own inline width/font-size, which win over this. */
.brand img{ width:44px; height:44px }
.brand span{ font-size:24px; font-weight:800; color:#fff; letter-spacing:-.02em }
.nav-links{ display:flex; gap:26px; margin-left:auto; align-items:center }
.nav-links a{ color:rgba(255,255,255,.84); text-decoration:none; font-size:15px; font-weight:600 }
.nav-links a:hover{ color:#fff }
.nav-cta{ padding:10px 20px; border-radius:9px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3) }
@media (max-width:860px){ .nav-links a:not(.nav-cta){ display:none } }

/* ── hero ── */
.hero{ position:relative; color:#fff; padding:150px 0 96px; overflow:hidden }
.hero-bg{ position:absolute; inset:0; z-index:0 }
.hero-bg img{ width:100%; height:100%; object-fit:cover }
.hero-bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(10,22,40,.95) 0%, rgba(10,22,40,.88) 42%, rgba(10,22,40,.55) 100%);
}
.hero-inner{ position:relative; z-index:1; max-width:730px }
.hero h1{ color:#fff }
.hero h1 em{ font-style:normal; color:#54c8ee }
.hero-sub{ font-size:clamp(17px,2vw,20px); color:rgba(255,255,255,.82); margin-top:22px; max-width:610px }
/* The category, in words, for a stranger and for anything summarising the page. */
.hero-cat{ font-size:15.5px; font-weight:700; color:#54c8ee; margin:14px 0 0; letter-spacing:.01em }
.feat-link{ display:inline-block; margin-top:10px; font-size:14px; font-weight:700; color:var(--accent-deep); text-decoration:none }
.feat-link:hover{ text-decoration:underline }
.demo-words{ margin-top:22px; border:1px solid var(--line); border-radius:12px; background:var(--paper) }
.demo-words summary{ padding:12px 16px; font-weight:700; cursor:pointer; color:var(--ink) }
.demo-words-in{ padding:4px 18px 18px; font-size:15.5px; line-height:1.6 }
.demo-words-in p{ margin:0 0 12px }
.demo-words-in dl{ display:grid; grid-template-columns:max-content 1fr; gap:8px 18px; margin:16px 0 0; font-size:15px }
.demo-words-in dt{ font-weight:700; color:var(--ink) }
.demo-words-in dd{ margin:0; color:var(--muted) }
@media (max-width:640px){ .demo-words-in dl{ grid-template-columns:1fr; gap:2px 0 } .demo-words-in dd{ margin-bottom:8px } }
.hero-cta{ display:flex; gap:13px; flex-wrap:wrap; margin-top:34px }
.hero-note{ font-size:14px; color:rgba(255,255,255,.6); margin-top:16px }
.hero-strip{
  position:relative; z-index:1; margin-top:64px; padding-top:26px;
  border-top:1px solid rgba(255,255,255,.16);
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
}
.hero-strip div{ font-size:14.5px; color:rgba(255,255,255,.74); line-height:1.45 }
.hero-strip strong{ display:block; color:#fff; font-size:15.5px; font-weight:700; margin-bottom:3px }
@media (max-width:760px){ .hero-strip{ grid-template-columns:1fr 1fr; gap:18px } }

/* ── sections ── */
section{ padding:88px 0 }
.sec-head{ max-width:660px; margin-bottom:52px }
.sec-head p{ font-size:18px; margin-top:16px }
.tint{ background:var(--paper-2) }
/* The slogan as a flow — arrows earn their place here because this section
   IS the four steps. Desktop only: on the phone the hero eyebrow already
   carries the slogan, and vertical space is the scarcer thing. */
.howflow{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin-top:18px;
  font-weight:800; font-size:17px; letter-spacing:.01em; color:var(--ink,#0a1628) }
.howflow .arr{ color:#0099cc }
@media (max-width:700px){ .howflow{ display:none } }

/* ── steps ── */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; counter-reset:s }
.step{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:26px 22px; position:relative }
.step::before{
  counter-increment:s; content:'0' counter(s);
  display:block; font-size:13px; font-weight:800; letter-spacing:.1em;
  color:var(--accent); margin-bottom:13px;
}
.step h3{ margin-bottom:8px }
.step p{ font-size:15px; line-height:1.55 }
@media (max-width:900px){ .steps{ grid-template-columns:1fr 1fr } }
@media (max-width:520px){ .steps{ grid-template-columns:1fr } }

/* ── features ── */
.feats{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px }
.feat{ padding:0 }
.feat .ic{
  width:44px; height:44px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,rgba(0,153,204,.14),rgba(0,180,216,.1));
  border:1px solid rgba(0,153,204,.24); margin-bottom:15px; font-size:21px;
}
.feat h3{ margin-bottom:7px }
.feat p{ font-size:15.5px; line-height:1.6 }
@media (max-width:900px){ .feats{ grid-template-columns:1fr 1fr } }
@media (max-width:560px){ .feats{ grid-template-columns:1fr } }

/* ── split ── */
.split{ display:grid; grid-template-columns:1.05fr 1fr; gap:56px; align-items:center }
.split img{ border-radius:16px; box-shadow:0 24px 60px rgba(10,22,40,.2) }
.split ul{ margin:22px 0 0; padding:0; list-style:none; display:grid; gap:13px }
.split li{ display:flex; gap:11px; font-size:16px; align-items:flex-start }
.split li::before{ content:'✓'; color:var(--accent); font-weight:800; flex-shrink:0 }
@media (max-width:880px){ .split{ grid-template-columns:1fr; gap:34px } }

/* ── pricing ── */
.price-card{
  background:var(--ink); color:#fff; border-radius:20px; padding:46px 44px;
  display:grid; grid-template-columns:1.15fr 1fr; gap:46px; align-items:center;
}
.price-card h2{ color:#fff }
.price-card ul{ margin:22px 0 0; padding:0; list-style:none; display:grid; gap:11px }
.price-card li{ display:flex; gap:11px; font-size:16px; color:rgba(255,255,255,.86); align-items:flex-start }
.price-card li::before{ content:'✓'; color:#54c8ee; font-weight:800; flex-shrink:0 }
.price-box{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius:14px; padding:28px; text-align:center }
.price-box .lead{ font-size:15px; color:rgba(255,255,255,.7) }
.price-box .big{ font-size:30px; font-weight:800; color:#fff; margin:8px 0 4px; letter-spacing:-.02em; line-height:1.2 }
.price-box .fine{ font-size:13.5px; color:rgba(255,255,255,.6); margin-top:14px; line-height:1.5 }
@media (max-width:880px){ .price-card{ grid-template-columns:1fr; padding:34px 26px; gap:30px } }

/* ── onsite ── */
.onsite{ background:var(--ink); color:#fff; overflow:hidden }
.onsite h2{ color:#fff }
.onsite-grid{ display:grid; grid-template-columns:1fr 420px; gap:60px; align-items:center }
.onsite p{ color:rgba(255,255,255,.8) }
.onsite ul{ margin:26px 0 0; padding:0; list-style:none; display:grid; gap:15px }
.onsite li{ display:flex; gap:13px; align-items:flex-start; font-size:16px; color:rgba(255,255,255,.86) }
.onsite li b{ color:#fff; font-weight:700 }
.onsite li .d{ width:7px; height:7px; border-radius:50%; background:#54c8ee; flex-shrink:0; margin-top:9px }
.phone{
  justify-self:center; width:100%; max-width:330px; border-radius:34px; padding:11px;
  background:#0d1a2e; border:1px solid rgba(255,255,255,.16);
  box-shadow:0 34px 80px rgba(0,0,0,.5); position:relative;
}
.phone img{ border-radius:24px; display:block; width:100%; height:520px; object-fit:cover; object-position:top center }
@media (max-width:900px){ .onsite-grid{ grid-template-columns:1fr; gap:38px } }

/* ── tiers ── */
.tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch }
.tier{
  background:#fff; border:1.5px solid var(--line); border-radius:16px; padding:30px 26px;
  display:flex; flex-direction:column;
}
.tier.pick{ border-color:var(--accent); box-shadow:0 16px 44px rgba(0,153,204,.16); position:relative }
.tier .tag{
  position:absolute; top:-12px; left:26px; background:var(--accent); color:#fff;
  font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  padding:5px 12px; border-radius:20px;
}
.tier h3{ font-size:20px; margin-bottom:5px }
.tier .who{ font-size:14.5px; color:var(--muted); min-height:42px }
.tier .amt{ font-size:38px; font-weight:800; color:var(--ink); letter-spacing:-.03em; margin:14px 0 2px; line-height:1 }
.tier .per{ font-size:13.5px; color:var(--muted) }
/* The founding rate on the card itself, with the standard rate beside it —
   both numbers where the eye lands, not one here and one further down. */
.tier .amt .was{ font-size:17px; font-weight:600; color:var(--muted); text-decoration:line-through; margin-left:8px; letter-spacing:0 }
.tier .then{ font-size:13px; color:var(--muted); margin-top:4px }
.tier .then strong{ color:var(--ink) }
/* The product, in motion, straight under the opening — one real job. */
.demo{ padding:56px 0 8px }
.demo .demo-grid{ display:grid; grid-template-columns:1.45fr 1fr; gap:28px; align-items:start }
/* 4:3 — the screen recording's own shape. A 16:9 box letterboxed it with
   black bars down both sides, which on a phone is most of the picture. */
.demo .video{ position:relative; padding-top:75%; border-radius:16px; overflow:hidden; background:#0a1628; box-shadow:0 18px 50px rgba(10,22,40,.22) }
.demo .video iframe,
.demo .video video{ position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:contain; background:#0a1628 }
.demo ol{ margin:0; padding:0; list-style:none; display:grid; gap:12px; counter-reset:d }
.demo li{ display:flex; gap:12px; align-items:flex-start; font-size:15.5px; line-height:1.45 }
.demo li::before{ counter-increment:d; content:counter(d); flex:0 0 28px; height:28px; border-radius:50%; background:var(--accent); color:#fff; font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; margin-top:1px }
.demo li strong{ display:block }
@media (max-width:900px){
  .demo{ padding:30px 0 0 }
  .demo .demo-grid{ grid-template-columns:1fr; gap:16px }
  .demo h2{ font-size:22px }
  .demo ol{ gap:7px }
  .demo li{ font-size:14px }
  .demo li::before{ flex-basis:22px; height:22px; font-size:11px }
  /* The four steps as headlines only on a phone — the video is the detail. */
  .demo li strong{ display:inline }
  .demo li div > span{ display:none }
  .demo .demo-cta{ display:none }   /* the trial button is one scroll away either side */
  .tier .then{ font-size:12px; margin-top:2px }
}
.tier ul{ margin:22px 0 26px; padding:0; list-style:none; display:grid; gap:10px; flex:1 }
.tier li{ display:flex; gap:10px; font-size:15px; align-items:flex-start; line-height:1.45 }
.tier li::before{ content:'✓'; color:var(--accent); font-weight:800; flex-shrink:0 }
.tier li.off{ color:var(--muted) }
.tier li.off::before{ content:'—'; color:var(--line) }
.tier .btn{ width:100% }
.tier-note{ text-align:center; font-size:14.5px; color:var(--muted); margin-top:26px }
.tier-note + .tier-note{ margin-top:8px; font-size:13.5px }
/* The price anchor. Sits in the section head and does one job: put the
   cost of the alternative next to the cost of this, so the number below
   is read as a saving rather than as a price. */
.sec-head p.anchor{
  margin-top:18px; padding:16px 20px; font-size:16px; line-height:1.55;
  background:var(--paper); border:1px solid var(--line); border-left:4px solid var(--accent);
  border-radius:0 12px 12px 0; color:var(--ink-2);
}
.sec-head p.anchor strong{ color:var(--ink); font-weight:800; white-space:nowrap }
@media (max-width:900px){ .tiers{ grid-template-columns:1fr; gap:26px } .tier .who{ min-height:0 } }

/* ── signup ── */
.signup{ background:var(--paper-2); border-top:1px solid var(--line) }
.signup-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start }
.form-card{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:34px; box-shadow:0 18px 48px rgba(10,22,40,.08) }
.field{ margin-bottom:15px }
.field label{ display:block; font-size:13.5px; font-weight:700; color:var(--ink); margin-bottom:6px }
.field input{
  width:100%; padding:13px 14px; border:1.5px solid var(--line); border-radius:10px;
  font-size:16px; font-family:inherit; color:var(--ink); background:#fff;
}
.field input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,153,204,.14) }
.two{ display:grid; grid-template-columns:1fr 1fr; gap:13px }
/* Stacked, the grid gap adds to each field's own margin and the space
   between "Your name" and "Email" comes out wider than every other gap.
   One column means the fields' margins should do the spacing alone. */
@media (max-width:520px){ .two{ grid-template-columns:1fr; gap:0 } }
.form-card .btn{ width:100%; margin-top:8px }
.form-msg{ font-size:14px; margin-top:14px; line-height:1.5; display:none }
.form-fine{ font-size:13px; color:var(--muted); margin-top:14px; text-align:center; line-height:1.5 }
.form-fine a{ color:var(--accent); font-weight:600 }
@media (max-width:880px){ .signup-grid{ grid-template-columns:1fr; gap:34px } }

/* ── footer ── */
footer{ background:var(--ink); color:rgba(255,255,255,.62); padding:44px 0; font-size:14.5px }
.foot{ display:flex; gap:20px; align-items:center; flex-wrap:wrap }
.foot a{ color:rgba(255,255,255,.82); text-decoration:none }
.foot a:hover{ color:#fff }
.foot .sp{ margin-left:auto }
@media (max-width:640px){ .foot .sp{ margin-left:0 } }

/* ═══════════════════════════════════════════════════════════════════
   Added for the pages beyond the home page.
   ═══════════════════════════════════════════════════════════════════ */

/* ── header on a light page ──────────────────────────────────────
   The home page's header sits over a dark photo, so its brand and links
   are white. Every other page starts on paper, so the same markup needs
   ink-coloured type and a rule under it. */
header.solid{ position:static; background:#fff; border-bottom:1px solid var(--line); padding:16px 0 }
header.solid .brand span{ color:var(--ink) }
header.solid .nav-links a{ color:var(--body) }
header.solid .nav-links a:hover{ color:var(--ink) }
/* .nav-cta is a translucent white pill designed to sit on the hero photo.
   On a white header that is a white button on white — invisible. Give it the
   solid treatment instead. */
/* Qualified with a.nav-cta rather than .nav-cta: `header.solid .nav-links a`
   above is (0,2,2) and would otherwise win the colour, leaving muted text on
   a dark pill. */
header.solid .nav-links a.nav-cta{ background:var(--ink); border-color:var(--ink); color:#fff; font-weight:700 }
header.solid .nav-links a.nav-cta:hover{ background:var(--accent-deep); border-color:var(--accent-deep); color:#fff }

/* ── page masthead ───────────────────────────────────────────────── */
.masthead{ padding:60px 0 20px }
.masthead h1{ font-size:clamp(30px,4.4vw,50px); max-width:19ch }
.masthead .stand{ margin-top:18px; font-size:19px; line-height:1.55; color:var(--body); max-width:62ch }

/* Breadcrumbs. Small, quiet, and matching the BreadcrumbList markup so a
   search result shows the same trail the page does. */
.crumbs{ font-size:13.5px; color:var(--muted); margin-bottom:20px }
.crumbs a{ color:var(--muted); text-decoration:none }
.crumbs a:hover{ color:var(--accent) }
.crumbs span{ margin:0 7px; opacity:.55 }

/* ── the answer block ────────────────────────────────────────────────
   The first thing on a guide, and the paragraph an answer engine lifts.
   It is styled to look like a direct answer rather than an intro, because
   that is what it is: the question settled in the first forty words, with
   the detail underneath for anyone who wants it. */
.answer{
  margin:26px 0 34px; padding:22px 26px; font-size:18px; line-height:1.62;
  background:var(--paper-2); border:1px solid var(--line); border-left:4px solid var(--accent);
  border-radius:0 14px 14px 0; color:var(--ink-2);
}
.answer strong{ color:var(--ink); font-weight:800 }

/* ── long-form prose ─────────────────────────────────────────────── */
.prose{ max-width:74ch; font-size:17px; line-height:1.72 }
.prose > * + *{ margin-top:19px }
.prose h2{ font-size:clamp(23px,2.8vw,31px); margin-top:46px }
.prose h3{ font-size:19.5px; margin-top:34px }
.prose ul,.prose ol{ padding-left:22px; display:grid; gap:9px }
.prose li{ line-height:1.62 }
.prose strong{ color:var(--ink); font-weight:700 }
.prose a{ color:var(--accent-deep); font-weight:600 }
.prose code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.92em;
  background:var(--paper-2); border:1px solid var(--line); border-radius:5px; padding:1px 5px; color:var(--ink);
}
.prose .lede{ font-size:19px; color:var(--ink-2) }
/* An index page is a set of cards, not a column of prose. The measure still
   applies to the sentences; it should not apply to the grid. */
.prose-wide{ max-width:none }
.prose-wide > p,.prose-wide > h2,.prose-wide > h3,.prose-wide > ul,.prose-wide > ol{ max-width:74ch }

/* ── tables ──────────────────────────────────────────────────────────
   Answer engines extract a table cleanly and paraphrase prose badly, so
   anything that is genuinely tabular is a table here, not a list. Wrapped
   in .tscroll so a wide one scrolls itself rather than the page. */
.tscroll{ overflow-x:auto; -webkit-overflow-scrolling:touch }
table.data{
  width:100%; border-collapse:collapse; font-size:15.5px; margin:6px 0;
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
}
table.data th,table.data td{ padding:11px 15px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top }
table.data thead th{ background:var(--ink); color:#fff; font-weight:700; font-size:14px; letter-spacing:.01em }
table.data tbody tr:nth-child(even){ background:var(--paper-2) }
table.data tbody tr:last-child td{ border-bottom:none }
table.data td strong{ color:var(--ink) }

/* ── FAQ ─────────────────────────────────────────────────────────────
   Plain headings and paragraphs, not a JavaScript accordion: content that
   only exists after a click is content a crawler never sees. */
.faq{ display:grid; gap:2px; margin-top:14px }
.faq details{ border:1px solid var(--line); border-radius:12px; background:#fff; padding:0; margin-bottom:10px }
.faq summary{
  cursor:pointer; padding:16px 20px; font-weight:700; color:var(--ink); font-size:16.5px;
  list-style:none; display:flex; align-items:center; gap:10px;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:'+'; margin-left:auto; color:var(--accent); font-size:21px; font-weight:700; line-height:1 }
.faq details[open] summary::after{ content:'−' }
.faq .a{ padding:0 20px 18px; font-size:16px; line-height:1.68; color:var(--body) }
.faq .a p + p{ margin-top:13px }

/* ── author / freshness ─────────────────────────────────────────────
   Who wrote it and when it was last true. Both are in the structured data
   as well, and they have to agree. */
/* The founder, on the About page: a face, a name, and the story in his words. */
.founder{ display:grid; grid-template-columns:260px 1fr; gap:26px; align-items:start; margin:8px 0 34px }
.founder img{ width:100%; aspect-ratio:1; object-fit:cover; object-position:50% 20%; border-radius:14px; background:#fff; box-shadow:0 12px 34px rgba(10,22,40,.16) }
.founder p{ margin:0 0 12px }
.founder .founder-note{ font-size:14.5px; color:var(--muted) }
@media (max-width:700px){ .founder{ grid-template-columns:1fr } .founder img{ max-width:320px; aspect-ratio:1 } }
/* Who checked a guide — a named roofer, not a company. */
.byline-sm{ font-size:14px; color:var(--muted); margin:10px 0 0 }
/* Case-study figures: the real thing, bordered, with a line under each. */
.cs-fig{ margin:22px 0 26px }
.cs-fig img{ width:100%; height:auto; border:1px solid var(--line); border-radius:12px; background:#fff }
.cs-fig figcaption{ font-size:14px; color:var(--muted); margin-top:8px; line-height:1.5 }
.byline-sm a{ font-weight:700 }
.byline{
  display:flex; align-items:center; gap:13px; margin:30px 0 0;
  padding-top:20px; border-top:1px solid var(--line); font-size:14.5px; color:var(--muted);
}
.byline img{ width:44px; height:44px; border-radius:50%; object-fit:cover; flex-shrink:0 }
.byline b{ color:var(--ink); font-weight:700; display:block; font-size:15px }

/* ── call to action strip ───────────────────────────────────────── */
.cta-strip{ background:var(--ink); color:#fff; border-radius:18px; padding:40px 42px; margin:52px 0 0 }
.cta-strip h2{ color:#fff; font-size:clamp(24px,3vw,33px) }
.cta-strip p{ color:rgba(255,255,255,.76); margin-top:12px; font-size:17px; line-height:1.6; max-width:56ch }
.cta-strip .btn{ margin-top:24px }
@media (max-width:640px){ .cta-strip{ padding:30px 24px } }

/* ── next / related ─────────────────────────────────────────────── */
.next-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin-top:22px }
.next-card{
  display:block; text-decoration:none; background:#fff; border:1px solid var(--line);
  border-radius:14px; padding:22px; transition:border-color .12s ease, transform .12s ease;
}
.next-card:hover{ border-color:var(--accent); transform:translateY(-2px) }
.next-card b{ display:block; color:var(--ink); font-size:16.5px; font-weight:700; margin-bottom:6px }
.next-card span{ font-size:14.5px; color:var(--muted); line-height:1.5 }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important }
  .btn:hover,.next-card:hover{ transform:none }
}

/* A heading that is there for the document outline rather than the design.
   Not display:none — that hides it from screen readers too, which is the
   opposite of the point. */
.sr-only-head{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ── calculators ─────────────────────────────────────────────────────
   The interactive half of a tool page. Everything it computes is also
   written out longhand in the prose beside it, so the page still answers
   the question with scripting off — which is the only state a crawler or
   an answer engine ever sees it in. */
.calc{
  background:var(--paper-2); border:1px solid var(--line); border-radius:16px;
  padding:26px 26px 22px; margin:6px 0 8px;
}
.calc-in{ display:grid; grid-template-columns:1fr auto 1fr; gap:16px; align-items:end }
.calc-in.wide{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px 18px; align-items:end }
.calc-or{ font-size:14px; color:var(--muted); padding-bottom:13px; text-align:center }
.calc .field{ margin-bottom:0 }
.calc .field input{ background:#fff }
.calc-out{
  margin-top:22px; background:#fff; border:1px solid var(--line); border-radius:12px;
  overflow:hidden;
}
.calc-row{
  display:flex; gap:16px; align-items:baseline; justify-content:space-between;
  padding:11px 16px; border-bottom:1px solid var(--line); font-size:15.5px;
}
.calc-row:last-child{ border-bottom:none }
.calc-row span{ color:var(--body) }
.calc-row b{ color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap }
.calc-row.hi{ background:var(--paper-2) }
.calc-row.hi b{ font-size:18px; color:var(--accent-deep) }
.calc-f{
  display:inline-block; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px; color:var(--muted); background:var(--paper-2);
  border-radius:5px; padding:1px 6px; margin-left:6px; white-space:nowrap;
}
.calc-row.hi .calc-f{ background:#fff }
.calc-note{ font-size:14px; color:var(--muted); line-height:1.55; margin-top:14px }
@media (max-width:560px){
  .calc{ padding:20px 18px 18px }
  .calc-in{ grid-template-columns:1fr }
  .calc-or{ padding:0; text-align:left }
  .calc-row{ flex-direction:column; gap:2px }
}

/* Enterprise capture strip under the pricing tiers — 15+ seats / multi-branch / POA */
.enterprise-strip{display:flex;align-items:center;justify-content:space-between;gap:20px;
  flex-wrap:wrap;background:var(--card,#fff);border:1px solid var(--line,#dbe2e8);
  border-radius:12px;padding:18px 22px;margin:22px 0 10px}
.enterprise-strip p{margin:4px 0 0;max-width:60ch}