:root{
  --orange:#ff3300;--orange-deep:#d92b00;--orange-dark:#2a0c04;--ink:#15141a;--muted:#5b5b66;
  --bg:#fff;--bg-soft:#fff3ef;--accent:#1f6fd6;--line:#f6dcd4;--dark:#1b0803;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font:16px/1.55 "Segoe UI",system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--bg)}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--orange);color:#fff;font-weight:600;padding:12px 24px;border-radius:8px;transition:.15s;border:2px solid var(--orange)}
.btn:hover{background:var(--orange-deep);border-color:var(--orange-deep)}
.btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn.ghost:hover{background:rgba(255,255,255,.12)}
.btn.ghost-p{background:transparent;color:var(--orange);border-color:var(--orange)}
.btn.ghost-p:hover{background:var(--orange);color:#fff}
.btn.lg{padding:15px 30px;font-size:16px}

/* ===== HEADER with mega-menu ===== */
header.nav{position:sticky;top:0;z-index:100;background:var(--orange-dark);color:#fff}
.nav .inner{display:flex;align-items:center;gap:30px;height:66px;max-width:1160px;margin:0 auto;padding:0 24px}
.nav .logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:19px}
.nav .logo img{height:40px;width:auto}
.nav .logo span{color:var(--accent)}
.nav .menu{display:flex;gap:4px;list-style:none;height:100%}
.nav .menu>li{position:relative;display:flex;align-items:center}
.nav .menu>li>a{display:flex;align-items:center;gap:6px;padding:0 16px;height:100%;color:#f3e4d6;font-weight:500;cursor:pointer}
.nav .menu>li>a:hover{color:#fff}
.nav .menu>li>a .chev{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;transition:.15s}
.nav .menu>li:hover>a .chev{transform:rotate(180deg)}
.panel{position:absolute;top:100%;left:0;background:#fff;color:var(--ink);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.22);padding:14px;min-width:270px;opacity:0;visibility:hidden;transform:translateY(6px);transition:.15s;z-index:10}
.nav .menu>li:hover .panel{opacity:1;visibility:visible;transform:translateY(0)}
.panel a.item{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:8px;color:var(--ink);font-size:14.5px}
.panel a.item:hover{background:var(--bg-soft)}
.panel a.item .ic{width:20px;height:20px;flex:none;stroke:var(--orange);fill:none;stroke-width:1.7}
.panel .sep{height:1px;background:var(--line);margin:8px 6px}
.panel .foot{padding:8px 6px 4px}
.nav .spacer{flex:1}
.nav .dl{display:flex;align-items:center;gap:14px}
.nav-toggle{display:none;background:none;border:0;color:#fff;font-size:24px;cursor:pointer}

/* ===== HERO (intro) ===== */
.intro{background:linear-gradient(165deg,var(--orange) 0%,var(--orange-deep) 55%,var(--orange-dark) 100%);color:#fff;padding:72px 0 88px;position:relative;overflow:hidden}
.intro .inner{max-width:1160px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;position:relative;z-index:2}
.intro h1{font-size:54px;line-height:1.08;letter-spacing:-1px;margin-bottom:20px}
.intro p.sub{font-size:20px;line-height:1.5;color:#f3e4d6;margin-bottom:30px;max-width:520px}
.intro .btns{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.intro .privacy-link{display:block;margin-top:16px;color:#dcc3ad;font-size:13px}
.intro-art{display:flex;justify-content:center}
.intro-art img{width:100%;max-width:430px;filter:drop-shadow(0 24px 60px rgba(0,0,0,.4))}

/* ===== CARD ROW (pictogram cards) ===== */
.cardrow{padding:70px 0;background:var(--bg)}
.cardrow .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.pcard{background:var(--bg-soft);border-radius:16px;padding:30px 24px;text-align:center}
.pcard .pic{width:88px;height:88px;margin:0 auto 18px;border-radius:50%;background:linear-gradient(135deg,var(--orange),var(--orange-deep));display:flex;align-items:center;justify-content:center}
.pcard .pic svg{width:42px;height:42px;stroke:#fff;fill:none;stroke-width:1.6}
.pcard .eyebrow{color:var(--orange);font-weight:700;text-transform:uppercase;letter-spacing:1px;font-size:12px;margin-bottom:8px}
.pcard h3{font-size:20px;margin-bottom:10px}
.pcard p{color:var(--muted);font-size:14.5px}

/* ===== SHOWCASE (alternating big rows) ===== */
.showcase{padding:80px 0}
.showcase.soft{background:var(--bg-soft)}
.showcase .row{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;max-width:1100px;margin:0 auto}
.showcase .row.rev .txt{order:2}
.showcase h2{font-size:36px;letter-spacing:-.5px;margin-bottom:16px}
.showcase p{color:var(--muted);font-size:17px;margin-bottom:20px}
.showcase .art{background:linear-gradient(160deg,#fbeee2,#f4dcc6);border-radius:22px;padding:50px;display:flex;justify-content:center}
.showcase .art img{max-width:220px}

/* ===== BANNER (dark CTA) ===== */
.banner{background:linear-gradient(135deg,var(--orange),var(--orange-dark));color:#fff;padding:72px 0;text-align:center}
.banner h2{font-size:38px;letter-spacing:-.5px;margin-bottom:14px}
.banner p{opacity:.9;font-size:18px;margin-bottom:28px;max-width:600px;margin-left:auto;margin-right:auto}
.banner .btn{background:#fff;color:var(--orange);border-color:#fff}
.banner .btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ===== FOOTER (multi-column) ===== */
footer.site{background:var(--dark);color:#bfa58f;padding:56px 0 28px}
footer.site .cols{display:grid;grid-template-columns:repeat(5,1fr);gap:28px;margin-bottom:40px}
footer.site h4{color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.6px;margin-bottom:14px}
footer.site ul{list-style:none}
footer.site ul li{margin-bottom:10px}
footer.site ul a{color:#bfa58f;font-size:14px}
footer.site ul a:hover{color:#fff;text-decoration:underline}
footer.site .brandcol .logo{display:flex;align-items:center;gap:9px;color:#fff;font-weight:700;font-size:18px;margin-bottom:12px}
footer.site .brandcol .logo img{height:30px;width:auto}
footer.site .brandcol .logo span{color:var(--accent)}
footer.site .brandcol p{font-size:13.5px;color:#a08670;max-width:230px}
footer.site .langbar{display:flex;align-items:center;gap:10px;margin:20px 0}
footer.site select{background:#3a2a1e;color:#fff;border:1px solid #55402f;border-radius:8px;padding:8px 12px;font-size:14px}
footer.site .legal{border-top:1px solid #3f2d20;padding-top:22px;display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center}
footer.site .legal a{color:#a08670;font-size:13px}
footer.site .legal a:hover{color:#fff}
footer.site .legal .copy{color:#86705d;font-size:13px;width:100%;margin-top:12px}

/* ===== content pages ===== */
.page-hero{background:linear-gradient(160deg,var(--orange),var(--orange-deep));color:#fff;padding:64px 0}
.page-hero h1{font-size:44px;letter-spacing:-.5px}
.page-hero p{color:#f3e4d6;font-size:18px;margin-top:10px;max-width:640px}
.prose{max-width:800px;margin:0 auto;padding:56px 24px}
.prose h2{font-size:26px;margin:32px 0 12px;color:var(--ink)}
.prose h3{font-size:19px;margin:22px 0 8px}
.prose p{color:#3d3630;margin-bottom:14px}
.prose ul{margin:0 0 16px 22px;color:#3d3630}
.prose li{margin-bottom:8px}
.prose .updated{color:var(--muted);font-size:14px;margin-bottom:28px}
.faq{max-width:820px;margin:0 auto}
.faq details{border:1px solid var(--line);border-radius:12px;margin-bottom:12px}
.faq summary{padding:18px 22px;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--orange);font-size:22px}
.faq details[open] summary::after{content:"\2013"}
.faq .a{padding:0 22px 20px;color:var(--muted)}

/* The phone menu's own row - the Download button - which the desktop
   header shows beside the menu instead. Never drawn on a desktop. */
.nav .menu>li.m-actions{display:none}

/* ===== SCROLL EFFECTS (added — no existing rules changed) =====
   .reveal      fade + slide up, once, when the element enters view
   .scroll-grow scales gently as the image passes through the
                center of the viewport (paired with a slight parallax)
*/
/* CONTENT IS VISIBLE BY DEFAULT. The hidden state is opt-in, applied only
   once the script that can undo it is actually running: it puts .js-anim on
   <html> as its very first act. Written the other way round, .reveal alone
   held everything at opacity:0 and the script lived on the home page only —
   so on hambrowser.com four pages once served their full text and
   screenshots completely invisibly. A page must never be
   blank because a script did not run. */
.js-anim .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.js-anim .reveal.is-visible{opacity:1;transform:translateY(0)}

.scroll-grow{will-change:transform}

@media (prefers-reduced-motion: reduce){
  .js-anim .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .scroll-grow{transform:none!important}
}

/* ===== FEATURE PAGES: real screenshots, numbers ===== */
.shot{border-radius:14px;box-shadow:0 18px 50px rgba(60,30,10,.28);border:1px solid rgba(60,30,10,.08);display:block;width:100%;height:auto;background:#111}
.showcase .art.shotwrap{background:none;padding:0;display:block}
.showcase .art.shotwrap img{max-width:100%}
.showcase.wide .row{grid-template-columns:1fr;gap:28px;max-width:1160px}
.showcase.wide .txt{max-width:760px}
.showcase .eyebrow{color:var(--orange);font-weight:700;text-transform:uppercase;letter-spacing:1px;font-size:12px;margin-bottom:10px}
.showcase.dark{background:var(--orange-dark);color:#fff}
.showcase.dark h2{color:#fff}.showcase.dark p{color:#e8d6c4}.showcase.dark .eyebrow{color:var(--accent)}
.showcase.dark .btn.ghost-p{color:#fff;border-color:rgba(255,255,255,.6)}.showcase.dark .btn.ghost-p:hover{background:#fff;color:var(--orange)}
.showcase .facts{display:flex;flex-wrap:wrap;gap:8px 18px;margin:-6px 0 22px;padding:0;list-style:none}
.showcase .facts li{font-size:14px;color:var(--muted);padding-left:16px;position:relative}
.showcase .facts li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.showcase.dark .facts li{color:#dcc3ad}
.intro-art .shot{max-width:none;filter:none;transform:rotate(-2deg) translateY(10px);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.intro-art img.shot{width:100%;max-width:560px}
.numbers{background:var(--bg-soft);padding:56px 0}
.numbers .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:1100px;margin:0 auto}
.numbers .n{background:#fff;border-radius:14px;padding:22px 18px;text-align:center;border:1px solid var(--line)}
.numbers .n b{display:block;font-size:34px;letter-spacing:-1px;color:var(--orange);line-height:1.1}
.numbers .n span{display:block;color:var(--muted);font-size:13.5px;margin-top:6px}
.rules{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.rules .r{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 24px}
.rules .r .k{display:inline-block;background:var(--orange);color:#fff;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;border-radius:6px;padding:4px 9px;margin-bottom:10px}
.rules .r h3{font-size:19px;margin-bottom:6px}.rules .r p{color:var(--muted);font-size:15px}
.rules .r em{color:var(--ink);font-style:normal;font-weight:600}
.scoretable{width:100%;max-width:820px;margin:0 auto;border-collapse:collapse;font-size:15px}
.scoretable th,.scoretable td{padding:10px 14px;border-bottom:1px solid var(--line);text-align:left}
.scoretable th{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.scoretable td.v{font-weight:700;color:var(--orange);white-space:nowrap}
.badges{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:1100px;margin:0 auto}
.badges .b{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;gap:12px;align-items:flex-start}
.badges .b .ic{font-size:26px;line-height:1}
.badges .b b{display:block;font-size:15px}.badges .b span{color:var(--muted);font-size:13px}
.ranks{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:1000px;margin:0 auto}
.ranks span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:14px}
.ranks span b{color:var(--orange)}
.sect{padding:70px 0}.sect.soft{background:var(--bg-soft)}
.sect h2.center{text-align:center;font-size:34px;letter-spacing:-.5px;margin-bottom:10px}
.sect p.center{text-align:center;color:var(--muted);font-size:17px;max-width:720px;margin:0 auto 34px}
.cardrow .pcard .pic.emoji{font-size:38px;background:linear-gradient(135deg,#fbeee2,#f4dcc6)}

/* ===== HELP CENTRE: sticky contents beside the instructions ===== */
.helplayout{display:grid;grid-template-columns:250px 1fr;gap:48px;max-width:1160px;margin:0 auto;padding:52px 24px}
.helptoc{position:sticky;top:88px;align-self:start;max-height:calc(100vh - 120px);overflow:auto}
.helptoc h4{font-size:12px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);margin:18px 0 8px}
.helptoc h4:first-child{margin-top:0}
.helptoc a{display:block;padding:5px 10px;border-radius:7px;font-size:14px;color:var(--muted);line-height:1.35}
.helptoc a:hover{background:var(--bg-soft);color:var(--orange)}
.helpbody{min-width:0;max-width:760px}
.helpbody h2{font-size:27px;letter-spacing:-.4px;margin:0 0 14px}
/* The id is on the SECTION, so the offset has to be too: the header is
   sticky and 66px tall, and without this a deep link puts the heading
   underneath it. Measured — the section landed at viewport top 0. */
.helpbody section{padding:30px 0;border-bottom:1px solid var(--line);scroll-margin-top:86px}
.helpbody section:first-child{padding-top:0}
.helpbody section:last-child{border-bottom:0}
.helpbody p{color:#3d3630;margin-bottom:13px}
.helpbody ul,.helpbody ol{margin:0 0 15px 22px;color:#3d3630}
.helpbody li{margin-bottom:8px}
.helpbody h3{font-size:17px;margin:22px 0 8px}
.helpbody code,.prose code{background:var(--bg-soft);border:1px solid var(--line);border-radius:5px;padding:1px 6px;font-size:13.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.helpbody kbd{background:#fff;border:1px solid #decfbf;border-bottom-width:2px;border-radius:6px;padding:2px 7px;font-size:13px;font-family:inherit;white-space:nowrap}
.helpbody .note{background:var(--bg-soft);border-left:3px solid var(--orange);border-radius:0 10px 10px 0;padding:14px 18px;margin:16px 0}
.helpbody .note p:last-child{margin-bottom:0}
.helpbody .lead{font-size:17px;color:var(--muted)}

/* ===== TYPOGRAPHY: no word left standing on its own =====
   Twenty-three headings and paragraphs across the site ended with a single
   word alone on the last line - "Email for radio | amateurs." - because
   nothing here ever told the browser to avoid it.

   balance evens the lines of a heading, which is what short blocks want;
   pretty leaves body text alone except for the last line, where it pulls a
   word down rather than stranding one. Both are ignored by browsers that do
   not know them, so nothing is risked by asking. */
h1, h2, h3, h4, .lead, .sub, .legend b { text-wrap: balance; }
p, li, .prose p, .prose li, .pcard p, .a { text-wrap: pretty; }

/* The phone and tablet rules come LAST on purpose: a media query adds no
   specificity, so a rule written earlier in the file loses to a desktop rule
   of the same selector written later. Placed here, nothing below can undo
   them. */
/* ===== PHONES AND TABLETS (under 920px) =====
   Everything in this block and the two after it applies only below the
   desktop breakpoint; nothing here can reach a desktop screen. */
@media(max-width:920px){
  /* No double-tap zoom: a tap is a tap, pinch-zoom still works. This is what
     made the page "jiggle" - a double tap anywhere zoomed in and out again. */
  html{overflow-x:clip;-webkit-text-size-adjust:100%}
  body{touch-action:manipulation}
  /* the page does not scroll behind the open menu */
  html.nav-locked,html.nav-locked body{overflow:hidden}

  /* --- header: burger, full-height drawer, one group open at a time --- */
  .nav .inner{padding:0 20px;gap:16px}
  .nav .menu,.nav .dl{display:none}
  .nav-toggle{display:block;width:44px;height:44px;line-height:44px;text-align:center;margin-right:-10px;border-radius:8px}
  .nav-toggle[aria-expanded="true"]{background:rgba(255,255,255,.1)}
  .nav .menu.mobile-open{display:flex;flex-direction:column;position:fixed;top:66px;left:0;right:0;bottom:0;height:auto;gap:0;
    overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--orange-dark);padding:4px 0 28px;
    border-top:1px solid rgba(255,255,255,.1)}
  .nav .menu.mobile-open>li{display:block;position:static}
  .nav .menu.mobile-open>li>a{display:flex;align-items:center;justify-content:space-between;height:auto;padding:16px 24px;
    font-size:17px;color:#fff;border-bottom:1px solid rgba(255,255,255,.08);-webkit-tap-highlight-color:transparent}
  .nav .menu.mobile-open>li>a .chev{border-left-width:5px;border-right-width:5px;border-top-width:6px}
  .nav .menu.mobile-open>li:hover>a .chev{transform:none}
  .nav .menu.mobile-open>li.open>a .chev{transform:rotate(180deg)}
  .nav .menu.mobile-open>li.open>a{background:rgba(255,255,255,.06)}
  .nav .menu.mobile-open .panel{display:none;position:static;opacity:1;visibility:visible;transform:none;transition:none;
    box-shadow:none;border-radius:0;min-width:0;background:var(--orange-deep);padding:6px 12px 12px;color:#fff}
  .nav .menu.mobile-open>li.open .panel{display:block}
  .nav .menu.mobile-open .panel a.item{color:#fff;padding:13px 14px;font-size:15.5px}
  .nav .menu.mobile-open .panel a.item:hover{background:rgba(255,255,255,.08)}
  .nav .menu.mobile-open .panel a.item .ic{stroke:var(--accent)}
  .nav .menu.mobile-open .panel .sep{background:rgba(255,255,255,.12)}
  .nav .menu.mobile-open .panel .foot .btn.ghost-p{color:#fff;border-color:rgba(255,255,255,.55)}
  .nav .menu.mobile-open>li.m-actions{display:flex;flex-direction:column;gap:10px;padding:20px 24px 8px}
  .nav .menu.mobile-open>li.m-actions .btn{justify-content:center;width:100%}

  /* --- the pages --- */
  .wrap{padding:0 20px}
  .btn.lg{padding:13px 22px;font-size:15px}
  .intro{padding:32px 0 44px}
  .intro .inner{grid-template-columns:1fr;gap:20px;padding:0 20px}
  .intro h1{font-size:34px;letter-spacing:-.5px;margin-bottom:14px}
  .intro p.sub{font-size:17px;margin-bottom:22px}
  .intro-art{order:-1}
  .intro-art img{max-width:240px}
  .intro-art .shot{transform:none}
  .intro-art img.shot{max-width:100%}
  .cardrow{padding:44px 0}
  /* !important on purpose: the feature and download pages set their column
     count in an inline style, which no stylesheet rule can otherwise beat.
     Three columns at 375px laid the page out 580px wide, and the phone
     zoomed out to fit it - that was the whole "not mobile friendly". */
  .cardrow .grid{grid-template-columns:1fr 1fr!important;gap:14px}
  .pcard{padding:24px 18px;border-radius:14px}
  .pcard .pic{width:72px;height:72px;margin-bottom:14px}
  .pcard .pic svg{width:34px;height:34px}
  .pcard h3{font-size:18px}
  .showcase{padding:48px 0}
  .showcase .row{grid-template-columns:1fr;gap:26px}
  .showcase .row.rev .txt{order:0}
  .showcase h2{font-size:28px;margin-bottom:12px}
  .showcase p{font-size:16px}
  .showcase .art{padding:28px}
  .showcase.wide .row{gap:22px}
  .banner{padding:48px 0}
  .banner h2{font-size:28px}
  .banner p{font-size:16px;margin-bottom:22px}
  footer.site{padding:40px 0 24px}
  footer.site .cols{grid-template-columns:1fr 1fr;gap:24px 20px;margin-bottom:28px}
  footer.site .brandcol{grid-column:1/-1}
  footer.site .brandcol p{max-width:none}
  .page-hero{padding:40px 0}
  .page-hero h1{font-size:32px}
  .page-hero p{font-size:16.5px}
  .prose{padding:36px 20px}
  .prose h2{font-size:22px;margin:26px 0 10px}
  .numbers{padding:40px 0}
  .numbers .grid{grid-template-columns:1fr 1fr;gap:12px}
  .numbers .n{padding:18px 12px}
  .numbers .n b{font-size:28px}
  .rules{grid-template-columns:1fr}
  .rules .r{padding:18px 20px}
  .scoretable{font-size:14px}
  .scoretable th,.scoretable td{padding:9px 10px}
  .badges{grid-template-columns:1fr}
  .badges .b{padding:12px 14px}
  .ranks span{font-size:13px;padding:7px 12px}
  .sect{padding:48px 0}
  .sect h2.center{font-size:28px}
  .sect p.center{font-size:16px;margin-bottom:26px}
  .faq summary{padding:15px 16px;font-size:15px;gap:12px}
  .faq .a{padding:0 16px 16px;font-size:15px}
  .helplayout{grid-template-columns:1fr;gap:22px;padding:28px 20px}
  .helptoc{position:static;max-height:none;border-bottom:1px solid var(--line);padding-bottom:16px}
  .helptoc a{display:inline-block;padding:6px 9px}
  .helpbody h2{font-size:23px}
}

/* ===== PHONES (under 600px): one column everywhere ===== */
@media(max-width:600px){
  .cardrow .grid{grid-template-columns:1fr!important}
  .intro h1{font-size:30px}
  .intro .btns{flex-direction:column;align-items:stretch}
  .intro .btns .btn{justify-content:center}
  .intro-art img{max-width:200px}
  .banner .btn{width:100%;justify-content:center}
  .page-hero h1{font-size:28px}
  .showcase h2{font-size:25px}
  .showcase .art{padding:20px}
  .sect h2.center,.banner h2{font-size:25px}
  .numbers .n b{font-size:26px}
  .faq summary{font-size:14.5px}
}

/* ===== SMALL PHONES (under 380px) ===== */
@media(max-width:380px){
  .nav .logo img{height:34px}
  .intro h1{font-size:27px}
  .page-hero h1{font-size:26px}
  .wrap,.prose,.helplayout,.intro .inner{padding-left:16px;padding-right:16px}
  .numbers .grid,footer.site .cols{grid-template-columns:1fr}
}