/*
Theme Name: HST in Canada
Theme URI: https://hstincanada.com/
Description: GeneratePress child theme, Order Form direction (design/drafts ?theme=order). Presentation only; site logic is in mu-plugins/hst-site.php.
Template: generatepress
Version: 0.1.0
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: hstincanada
License: GPL-2.0-or-later
*/

/* Libre Franklin, variable 100–900, latin; served from the theme (OFL, assets/fonts/LICENSE) */
@font-face{font-family:"Libre Franklin";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("assets/fonts/libre-franklin-latin-wght-normal.woff2") format("woff2");
  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:"Libre Franklin";font-style:italic;font-weight:100 900;font-display:swap;
  src:url("assets/fonts/libre-franklin-latin-wght-italic.woff2") format("woff2");
  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}

/* ==========================================================================
   Tokens. Colours live in Customizer → Colors → Global (GeneratePress prints them on :root
   and adds them to the editor palette): --contrast ink, --contrast-2 ink secondary, --contrast-3 rule,
   --base tint, --base-2 page, --base-3 surface, --accent brick, --accent-2 brick hover,
   --forest, --forest-2 muted on forest, --link, --ok, --urgent.
   Everything that is not a colour is here.
   ========================================================================== */
:root{
  --hst-font:"Libre Franklin",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --hst-h1:clamp(48px,6.2vw,88px);
  --hst-h1-article:clamp(38px,4.6vw,64px);
  --hst-h1-landing:clamp(40px,4.6vw,64px);  /* smaller than home: the shortlist must stay above the fold */
  --hst-h2:clamp(32px,3.6vw,48px);
  --hst-h2-article:32px;
  --hst-track-display:-.03em;  /* h1 48–88px: tighter and the word spaces close up */
  --hst-track:-.02em;          /* h2 28–48px */
  --hst-track-title:-.01em;    /* h3, h4, card titles 17–26px: more and the letters touch */
  --hst-after-h2:16px;         /* heading → its first line, wherever text stacks under it */
  --hst-label:700 12px/1.3 var(--hst-font);
  --hst-meta:500 14px/1.45 var(--hst-font);
  --hst-form:2px solid var(--contrast);       /* forms, cards */
  --hst-control:1.5px solid var(--contrast);  /* inputs */
  --hst-rule:1px solid var(--contrast-3);     /* table rows */
  --hst-rule-head:3px solid var(--contrast);  /* form and list heads */
  --hst-rule-total:3px double var(--contrast);/* totals */
  --hst-max:1280px;
  --hst-gutter:clamp(16px,4.4vw,64px);
  --hst-gutter:round(clamp(16px,4.4vw,64px),1px); /* whole pixels keep 1–3px rules crisp */
  --hst-band-pad:clamp(56px,8vw,104px);
}

/* ---------- base ---------- */
html{scroll-padding-top:24px}
body{-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{letter-spacing:var(--hst-track-title);text-wrap:balance}
h2{letter-spacing:var(--hst-track)}
h1{font-size:var(--hst-h1);line-height:.95;letter-spacing:var(--hst-track-display)}
h2{font-size:var(--hst-h2);line-height:1.05}
h3{font-size:24px;line-height:1.15}
a{text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
::selection{background:var(--forest);color:var(--base-3)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.site-header :focus-visible,.hst-hero :focus-visible,.hst-band--forest :focus-visible,.site-footer :focus-visible{outline-color:var(--base-3)}
.hst-hero .hst-card :focus-visible,.hst-hero .hstc :focus-visible{outline-color:var(--accent)}
code{font-size:.92em;background:var(--base);padding:.1em .35em;border-radius:0}
.num,td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.hst-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- header (GP markup) ---------- */
.site-header .inside-header{max-width:var(--hst-max);padding:0 var(--hst-gutter);min-height:72px;align-items:center}
.main-title{font-size:24px;font-weight:900;line-height:1;letter-spacing:-.01em;margin:0}
.main-title a{text-decoration:none}
.hst-mark-in{font-weight:500;color:var(--forest-2)}
.main-navigation .main-nav ul li a{font-size:15px;font-weight:500;line-height:72px;padding:0 clamp(7px,1vw,14px);text-decoration:none}
.main-navigation .main-nav ul li.current-menu-item>a{font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}
.main-navigation .menu-toggle{font-size:15px;font-weight:600;border:1px solid color-mix(in srgb,var(--base-3) 15%,transparent);padding:0 14px;line-height:40px}
@media (min-width:1101px){
  .main-navigation .main-nav>ul>li:last-child>a{padding-right:0}  /* last item's text on the content's right edge */
}
@media (max-width:1100px){
  .main-navigation .main-nav ul li a{line-height:48px;padding:0 var(--hst-gutter)}
}

/* ---------- buttons: core Buttons block and calculator CTAs share one look ---------- */
.wp-block-button__link,.hst-btn{display:inline-flex;align-items:center;gap:.5em;font:700 16px/1 var(--hst-font);padding:14px 20px;border-radius:0;border:2px solid transparent;text-decoration:none;background:var(--accent);color:var(--base-3);transition:background-color .15s,transform .15s ease-out}
.wp-block-button__link:hover,.hst-btn:hover{background:var(--accent-2);color:var(--base-3)}
.wp-block-button__link:active{transform:translateY(1px)}
.wp-block-button__link::after,.hst-arrow::after{content:"";width:.95em;height:.95em;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M3 10h13M11 5l5 5-5 5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M3 10h13M11 5l5 5-5 5'/%3E%3C/svg%3E") center/contain no-repeat}
.hst-arrow::after{display:inline-block;margin-left:.35em;vertical-align:-.12em}
.wp-block-button.is-style-outline .wp-block-button__link{background:transparent;color:var(--contrast);border-color:var(--contrast)}
.wp-block-button.is-style-outline .wp-block-button__link:hover{background:var(--contrast);color:var(--base-3)}
.wp-block-buttons{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}

/* ---------- pages built from patterns: full-width bands ---------- */
/* classic themes wrap Group children in an inner container; let the theme's grids see the blocks */
.wp-block-group[class*="hst-"]>.wp-block-group__inner-container{display:contents}
.hst-band .wp-block-group__inner-container,.single .entry-content .wp-block-group__inner-container{padding:0}
.hst-has-hero .site.grid-container{max-width:none}
.hst-has-hero .site-content,.hst-has-hero .inside-article{padding:0}
.hst-has-hero .entry-content{margin:0}
.hst-has-hero .site-main{margin:0}
.entry-content>.hst-band{margin:0}
.hst-band{padding:var(--hst-band-pad) 0;background:var(--base-3)}
.hst-band--tint{background:var(--base)}
.hst-band{--hst-bg:var(--base-3)}.hst-band--tint{--hst-bg:var(--base)}  /* what sticky cells and scroll shadows paint with */
.hst-band--forest,.hst-hero{background:var(--forest);color:var(--base-3)}
.hst-wrap{max-width:var(--hst-max);margin:0 auto;padding:0 var(--hst-gutter)}
.hst-band p:last-child,.hst-band ul:last-child,.hst-band ol:last-child{margin-bottom:0}
.hst-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:clamp(32px,5vw,72px);align-items:start}
.hst-two-col{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:start}
.hst-sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 64px;align-items:end;margin-bottom:32px}
.hst-sec-head p{color:var(--contrast-2);max-width:52ch;margin:0}
.hst-band h2{margin:0}
.hst-two-col>h2,.hst-sec-head>h2{margin:0}
.hst-prose{max-width:60ch}  /* ≈75 characters in Libre Franklin */
.hst-prose p{margin:0 0 14px}
/* heading → first line: one gap; side-by-side grids (heading left, content right) keep their own alignment */
.entry-content h2{margin-bottom:0}
.entry-content h2+*{margin-top:var(--hst-after-h2)}
:is(.hst-two-col,.hst-sec-head,.hst-wn-grid)>.wp-block-group__inner-container>h2+*{margin-top:0}

/* hero */
.hst-hero{padding:clamp(32px,6vw,72px) 0 clamp(40px,6vw,80px)}
.hst-hero h1{color:var(--base-3);margin:0}
.hst-hero .hst-split{grid-template-columns:minmax(0,1fr) minmax(0,640px)}
.hst-yr{color:var(--forest-2)}
.hst-lead{margin:22px 0 0;font-size:clamp(18px,1.6vw,21px);line-height:1.45;color:var(--forest-2);max-width:36ch}
.hst-hero a{color:var(--base-3)}
.hst-hero .hst-ticks{margin-top:22px}
.hst-came-from{font-size:15px;margin:0 0 18px}
.hst-hero--landing h1{font-size:var(--hst-h1-landing)}
.hst-hero--landing{padding-top:clamp(24px,3.4vw,48px)}
.hst-fresh{margin:20px 0 0;font:var(--hst-meta);color:var(--forest-2);display:flex;flex-wrap:wrap;align-items:center;gap:.4em}
.hst-dot{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 2px var(--forest-2)}

/* landing shortlist: the first partner CTA sits in the hero, above the fold at 1440×900 and 390×844 */
.hst-card.hst-shortlist{padding:14px 20px 12px}
.hst-hero--landing .hst-split{grid-template-columns:minmax(0,1fr) minmax(0,520px);row-gap:0}  /* text left, the shortlist form right: same grammar as the calculator page */
.hst-hero--landing .hst-hero-copy{display:contents}
@media (min-width:901px){
  /* "Back to" runs above both columns so the form's top lines up with the H1 */
  .hst-hero--landing .hst-came-from{grid-column:1/-1}
  .hst-hero--landing h1{grid-column:1;grid-row:2}
  .hst-hero--landing .hst-lead{grid-column:1;grid-row:3}
  .hst-hero--landing .hst-ticks{grid-column:1;grid-row:4}
  .hst-hero--landing .hst-shortlist{grid-column:2;grid-row:2/span 3;align-self:start}
  .hst-hero--landing .hst-shortlist-lines li{padding:12px 8px 12px 0}
}
@media (max-width:900px){
  /* phones: H1, lead, the form with the first CTA, then the criteria */
  .hst-hero--landing .hst-split{row-gap:20px}
  .hst-hero--landing .hst-came-from,.hst-hero--landing h1,.hst-hero--landing .hst-lead{margin-top:0;margin-bottom:0}
  .hst-hero--landing .hst-ticks{order:2;margin-top:0}
}
.hst-shortlist-hd{display:flex;justify-content:space-between;gap:12px;margin:0;padding-bottom:8px;border-bottom:var(--hst-rule-head);font:800 13px/1.3 var(--hst-font);text-transform:uppercase;letter-spacing:.08em}
.hst-hero .hst-card a:not(.hst-btn){color:var(--link)}
.hst-shortlist-hd a{text-transform:none;letter-spacing:0;font-weight:600}
.hst-shortlist-lines{list-style:none;margin:0;padding:0;counter-reset:line}
.hst-shortlist-lines li{counter-increment:line;display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:6px 12px;padding:8px 8px 8px 0;margin:0;border-bottom:var(--hst-rule)}
.hst-shortlist-lines li::before{content:counter(line,upper-alpha);font-weight:800;color:var(--accent);padding-left:8px}
.hst-shortlist-lines span{font-size:14px;line-height:1.35;color:var(--contrast-2)}
.hst-shortlist-lines b{display:block;font-size:16px;color:var(--contrast)}
.hst-shortlist-lines a{font-weight:700;font-size:14px;white-space:nowrap}
.hst-shortlist-lines .hst-btn{padding:10px 14px;font-size:14px}
.hst-shortlist .hst-disclosure{margin:8px 0 0;font-size:12px;line-height:1.4}
@media (max-width:480px){
  .hst-shortlist-lines li{grid-template-columns:28px minmax(0,1fr)}
  .hst-shortlist-lines li>a{grid-column:2;justify-self:start}
}

/* ---------- calculator module: theme tokens into its --hstc-* hooks ---------- */
.hstc{--hstc-ink:var(--contrast);--hstc-ink-2:var(--contrast-2);--hstc-line:var(--contrast-3);--hstc-surface:var(--base-3);
  --hstc-brick:var(--accent);--hstc-brick-2:var(--accent-2);--hstc-tint:var(--base);--hstc-ok:var(--ok);--hstc-now:var(--urgent);--hstc-font:var(--hst-font)}
.hst-hero .hstc{color:var(--contrast)}
.hst-hero .hstc a{color:var(--link)}
/* GP's p/ul margins outrank the module's :where() reset; zero them at element specificity so every .hstc-* rule still wins */
:where(.hstc) :is(p,ul,ol,fieldset){margin:0}
.hst-calc{min-height:0}
.hst-hero .hst-calc{min-height:520px}
.hst-split>.hst-calc .hstc{max-width:none}
.hst-calc-fallback .hstc-note{margin-top:14px;font-size:14px;color:var(--contrast-2)}

/* ---------- ticks, short lead, source line ---------- */
.hst-ticks{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:8px}
.hst-ticks li{padding-left:28px;position:relative;margin:0}
.hst-ticks li::before{content:"";position:absolute;left:2px;top:.45em;width:14px;height:8px;border:solid currentColor;border-width:0 0 2.5px 2.5px;transform:rotate(-45deg)}
.hst-answer{margin:18px 0 0;font-size:clamp(18px,1.6vw,21px);line-height:1.5}
.hst-src{margin:20px 0 0;font-size:14px;color:var(--contrast-2)}
.hst-note{margin:16px 0 0;font-size:15px;color:var(--contrast-2)}

/* ---------- What next: catalogue entries No. 01–04 ---------- */
.hst-what-next{padding:clamp(28px,4vw,44px) 0}
.hst-wn-grid{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:24px;align-items:start}
.hst-wn-grid>h2{margin:0}
.hst-wn-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:var(--hst-rule-head)}
.hst-wn-list li{margin:0}
.hst-wn-list a{display:block;height:100%;padding:16px 18px 18px;color:var(--contrast-2);text-decoration:none;font-size:14px;line-height:1.45;border-left:var(--hst-rule);transition:opacity .2s,background-color .2s}
.hst-wn-list li:first-child a{border-left:0;background:var(--base)}
.hst-wn-list strong{display:block;font-size:17px;line-height:1.3;color:var(--contrast);margin-bottom:4px}
.hst-wn-list:hover a,.hst-wn-list:focus-within a{opacity:.55}
.hst-wn-list a:hover,.hst-wn-list a:focus-visible{opacity:1;background:var(--base-3)}
.hst-wn-list li:first-child a:hover{background:var(--base)}
/* calculator pages: What next sits in the hero under the freshness line, 2×2 on forest */
.hst-hero .hst-wn{margin-top:24px;max-width:640px}
.hst-hero .hst-wn-list a{padding:10px 14px 11px}
.hst-hero .hst-wn-list strong{font-size:16px;margin:0 0 2px}
@media (min-width:769px) and (max-height:1000px){
  .hst-hero .hst-wn-list span{display:none}  /* at 1440×900 the four-line H1 leaves room for the labels only */
}
.hst-hero .hst-wn-hd{font:800 13px/1.3 var(--hst-font);text-transform:uppercase;letter-spacing:.08em;color:var(--forest-2);margin:0 0 10px}
.hst-hero .hst-wn-list{grid-template-columns:repeat(2,minmax(0,1fr));border-top:2px solid var(--base-3)}
.hst-hero .hst-wn-list a{color:var(--forest-2);border-left:1px solid color-mix(in srgb,var(--base-3) 25%,transparent)}
.hst-hero .hst-wn-list li:nth-child(odd) a{border-left:0}
.hst-hero .hst-wn-list li:nth-child(n+3) a{border-top:1px solid color-mix(in srgb,var(--base-3) 25%,transparent)}
.hst-hero .hst-wn-list strong{color:var(--base-3)}
.hst-hero .hst-wn-list li:first-child a{background:color-mix(in srgb,var(--base-3) 10%,transparent)}
.hst-hero .hst-wn-list a:hover,.hst-hero .hst-wn-list a:focus-visible,.hst-hero .hst-wn-list li:first-child a:hover{background:color-mix(in srgb,var(--base-3) 16%,transparent)}
@media (max-width:768px){
  .hst-hero .hst-wn{order:3;margin-top:8px}  /* phones: after the calculator, which keeps the first CTA above the fold */
}

/* ---------- tables ---------- */
.hst-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.entry-content table,.hst-band table{width:100%;border-collapse:separate;border-spacing:0;font-size:16px;border:0;margin:0}  /* separate: the 3px double head rule stays two crisp lines at DPR 1 */
.entry-content th,.entry-content td{text-align:left;padding:11px 12px;border:0;border-bottom:var(--hst-rule);vertical-align:top}
.entry-content thead th{font:var(--hst-label);text-transform:uppercase;letter-spacing:.06em;color:var(--contrast-2);border-bottom:var(--hst-rule-total)}
.entry-content tbody th{font-weight:600}
.entry-content th.num,.entry-content td.num{text-align:right}
.hst-rates td.tot{font-weight:700}
.hst-rates .on-amt,.hst-rates th[data-on-amt]{background:var(--base);font-weight:700}  /* the re-priced column is "your line": tint, not brick */
.hst-chg{display:inline-block;margin-left:10px;font:var(--hst-label);letter-spacing:.04em;padding:2px 6px;border:1px solid var(--contrast-2);color:var(--urgent);white-space:nowrap}

/* ---------- path: catalogue sections 01–06 ---------- */
.hst-stages{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:var(--hst-rule-head);counter-reset:st}
.hst-stages li{counter-increment:st;padding:16px 16px 0 0;margin:0;font-size:15px;display:grid;align-content:start;gap:6px}
.hst-stages li+li{padding-left:16px;border-left:var(--hst-rule)}
.hst-stages li::before{content:counter(st);font:800 15px/1 var(--hst-font);color:var(--accent)}
.hst-stages strong{font-size:17px;margin-bottom:4px}
.hst-stages a{display:block}

/* ---------- FAQ (core Details blocks inside .hst-faq) ---------- */
.hst-faq{border-top:var(--hst-rule-head)}
.hst-faq>*{margin:0}
.hst-faq .wp-block-details{border-bottom:var(--hst-rule);padding:4px 0;margin:0}
.hst-faq summary{cursor:pointer;list-style:none;padding:14px 32px 14px 0;font-weight:700;font-size:18px;position:relative}
.hst-faq summary::-webkit-details-marker{display:none}
.hst-faq summary::after{content:"";position:absolute;right:6px;top:22px;width:10px;height:10px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .2s}
.hst-faq details[open] summary::after{transform:rotate(-135deg);top:26px}
.hst-faq details p{padding:0 0 16px;margin:0;max-width:66ch;color:var(--contrast-2)}

/* ---------- rate and rule changes ---------- */
.hst-log{list-style:none;padding:0;margin:0}
.hst-log li{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:12px 0;border-bottom:var(--hst-rule);margin:0}
.hst-log strong{font-size:14px;font-weight:500;color:var(--contrast-2);font-variant-numeric:tabular-nums}

/* ---------- order-form card (Quick fit, landing shortlist) ---------- */
.hst-card{background:var(--base-3);color:var(--contrast);border:var(--hst-form);padding:clamp(20px,2.2vw,30px)}

/* ---------- article: header across, TOC left, text 720px ---------- */
.single .site-content{padding-left:0;padding-right:0}
.single .inside-article{display:grid;grid-template-columns:minmax(0,240px) minmax(0,720px);column-gap:clamp(32px,5vw,72px);align-items:start;padding-inline:var(--hst-gutter)}
.single .entry-header{grid-column:1/-1;margin-bottom:clamp(24px,3vw,40px)}
.single .entry-content{grid-column:2;margin-top:0}
.single .entry-title{font-size:var(--hst-h1-article);line-height:.98;max-width:20ch;margin:0}
.single .entry-meta{margin-top:16px;font:var(--hst-meta);color:var(--contrast-2)}
.single .entry-meta>span:not(:last-child)::after{content:"·";margin-left:.35em}
.single .entry-meta .posted-on{display:inline}
.single .entry-meta>span{white-space:nowrap}
.hst-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;padding:0;font-size:14px;color:var(--contrast-2)}
.hst-crumbs li{margin:0}
.hst-crumbs li:not(:last-child)::after{content:"/";margin-left:8px}
.hst-toc{grid-column:1;grid-row:2;position:sticky;top:20px;font-size:15px}
.hst-toc summary{list-style:none;cursor:pointer;font:var(--hst-label);font-size:14px;color:var(--contrast-2);margin-bottom:10px}
.hst-toc summary::-webkit-details-marker{display:none}
.hst-toc ol{padding-left:1.3em;margin:0;display:grid;gap:6px}
.hst-toc li{margin:0}
.hst-toc a{color:var(--contrast);text-decoration:none}
.hst-toc a:hover{text-decoration:underline}
.single .entry-content>*+*{margin-top:44px}
.single .entry-content>h2+*,.single .entry-content>h3+*{margin-top:var(--hst-after-h2)}
.single .entry-content h2{font-size:var(--hst-h2-article);margin-bottom:0}
.single .entry-content p:not(.hstc p){max-width:60ch;margin-bottom:0}
.single .entry-content p:not(.hstc p)+p{margin-top:14px}
sup a{text-decoration:none;font-weight:700;padding:0 2px}

/* Short answer: the article's first screen as an order form — head rule, lettered lines, the HST line tinted, double rule to close */
.hst-short{background:var(--base-3);border:var(--hst-form);padding:18px 24px 22px}
.single .entry-content .hst-short h2,.hst-short h2{font:800 14px/18px var(--hst-font);text-transform:uppercase;letter-spacing:.08em;margin:0;padding-bottom:10px;border-bottom:var(--hst-rule-head)}
.single .entry-content .hst-short h2+p{margin-top:12px}
.hst-short p{font-size:19px;line-height:1.5}
.hst-short-lines{list-style:none;margin:12px 0 0;padding:0;counter-reset:line;border-top:var(--hst-rule);border-bottom:var(--hst-rule-total)}
.hst-short-lines li{counter-increment:line;display:grid;grid-template-columns:34px minmax(0,8.5em) minmax(0,1fr);gap:2px 16px;align-items:baseline;margin:0;padding:11px 12px 11px 0;line-height:1.45}
.hst-short-lines li+li{border-top:var(--hst-rule)}
.hst-short-lines li::before{content:counter(line,upper-alpha);padding-left:10px;font-weight:800;color:var(--accent)}
.hst-short-lines strong{font-variant-numeric:tabular-nums;white-space:nowrap}
.hst-short-lines .is-tax{background:var(--base);font-weight:600}
.single .entry-content .hst-short p.hst-short-next{max-width:none;margin-top:14px;padding-top:12px;border-top:var(--hst-rule);font-size:15px;line-height:1.5}
.hst-applies td:first-child{font-weight:600;width:42%}
.hst-next-step{border:var(--hst-form);background:var(--base-3);padding:24px}
.hst-next-step h3{margin:0 0 8px;font-weight:900}
.hst-next-step .wp-block-buttons{margin-top:16px}
.hst-fine{font-size:13px;color:var(--contrast-2)}
.hst-features tbody th .hst-fine{display:block;margin-top:4px;font-weight:400;line-height:1.4;max-width:34ch}  /* the row's why-it-matters line sits under its name */
.single .entry-content .hst-next-step p.hst-fine{margin-top:14px}
.hst-sources ol{padding-left:1.3em;margin:var(--hst-after-h2) 0 0;display:grid;gap:8px;font-size:15px}
.hst-sources li{margin:0}
.hst-disclaimer{font-size:14px;color:var(--contrast-2)}
.single .entry-content .hst-sources .hst-disclaimer{margin-top:18px}
.single .entry-content .hst-calc .hstc{max-width:none}
.hst-related{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;border-top:var(--hst-rule-head)}
.hst-related li{margin:0;padding:12px 0;border-bottom:var(--hst-rule)}
/* What next inside an article: same entries, two per row in the text column */
.single .hst-what-next{padding:0;background:none}
.single .hst-wn-grid{grid-template-columns:minmax(0,1fr);row-gap:var(--hst-after-h2)}
.single .hst-wn-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.single .hst-wn-list li:first-child a{background:none}
.hst-next-step .hst-shortlist-lines{margin-top:16px;border-top:var(--hst-rule-head)}
.hst-next-step .hst-shortlist-lines li:first-child{background:none}
.single .hst-wn-list li:nth-child(3) a{border-left:0}
.single .hst-wn-list li:nth-child(n+3) a{border-top:var(--hst-rule)}

/* ---------- landing ---------- */
.hst-paths th[scope=row]{width:16%;color:var(--contrast-2);font-weight:600}
.hst-paths td{width:28%}
.hst-paths thead th:nth-child(3){color:var(--contrast)}
.hst-fit fieldset{border:0;padding:0;margin:0 0 18px;display:grid;grid-auto-flow:column;grid-auto-columns:1fr}
.hst-fit legend{font-weight:700;margin-bottom:8px;padding:0}
.hst-fit label{position:relative;cursor:pointer;margin:0;display:flex}
.hst-fit input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.hst-fit label span{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;padding:11px 10px;font-weight:700;font-size:15px;border:var(--hst-control);background:var(--base-3);color:var(--contrast);transition:background-color .15s,color .15s}
.hst-fit label+label span{border-left-width:0}
.hst-fit input:checked+span{background:var(--contrast);color:var(--base-3)}
.hst-fit input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}
.hst-fit-out{font-size:18px;margin:6px 0 0;min-height:1.6em}
.hst-offer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.hst-offer-grid>p:empty{display:none}
.hst-offer{background:var(--base-3);border:var(--hst-form);padding:24px;display:flex;flex-direction:column;gap:10px;position:relative;margin:0}
.hst-offer>*,.hst-offer>.wp-block-group__inner-container>*{margin:0}
.hst-offer h3{font-size:26px;line-height:1.05;font-weight:900}
.hst-offer .hst-fit-line{color:var(--contrast-2)}
.hst-offer .hst-dl{font-size:15px}
.hst-offer .hst-dl strong{display:block;font:var(--hst-label);font-size:13px;color:var(--contrast-2);margin-top:6px}
.hst-offer .wp-block-buttons{margin-top:auto;padding-top:10px}  /* every card's button on the grid's bottom line */
.hst-offer.is-fit{outline:3px solid var(--accent);outline-offset:-3px}
.hst-offer.is-fit::before{content:"Closest fit";position:absolute;top:-12px;left:20px;background:var(--accent);color:var(--base-3);font:var(--hst-label);font-size:13px;padding:4px 8px}
.hst-final .hst-wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:center}
.hst-final h2{color:var(--base-3)}
.hst-final p{color:var(--forest-2)}
.hst-final a:not(.wp-block-button__link){color:var(--base-3)}
.wp-block-button.hst-on-dark .wp-block-button__link{color:var(--base-3);border-color:var(--base-3)}
.wp-block-button.hst-on-dark .wp-block-button__link:hover{background:var(--base-3);color:var(--forest)}

/* ---------- footer (GP widgets + bar) ---------- */
.site-footer .footer-widgets-container,.site-footer .inside-site-info{max-width:var(--hst-max);padding-left:var(--hst-gutter);padding-right:var(--hst-gutter)}
.site-footer .footer-widgets-container{padding-top:56px;padding-bottom:40px}
.footer-widgets .inside-footer-widgets{gap:32px}
.footer-widgets .footer-widget-1{flex:2}
.footer-widgets .widget{font-size:15px;margin:0}
.footer-widgets .widget-title,.footer-widgets h2{font:var(--hst-label);font-size:14px;margin:0 0 10px}
.footer-widgets ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.footer-widgets li{margin:0}
.footer-widgets a{text-decoration:none}
.footer-widgets a:hover{text-decoration:underline}
.footer-widgets .hst-foot-mark{font-size:24px;font-weight:900;letter-spacing:-.01em;color:var(--base-3);margin:0}
.footer-widgets p{max-width:38ch}
.footer-widgets .hst-fine{color:var(--forest-2)}
.site-footer{background:var(--forest);border-top:1px solid color-mix(in srgb,var(--base-3) 15%,transparent)}  /* same hairline as the copyright bar: a forest final band no longer runs into the footer */
.site-info{font-size:14px;border-top:1px solid color-mix(in srgb,var(--base-3) 15%,transparent)}
.site-info .inside-site-info{padding-top:18px;padding-bottom:72px;justify-content:flex-start;text-align:left}
.site-footer .site-info .copyright-bar{margin:0}  /* GP centres it with margin:auto at (0,3,0) */

/* ---------- footer privacy note and readable archive excerpts ---------- */
.hst-cookie-info{padding-bottom:24px;font-size:14px;color:var(--forest-2)}
.archive .entry-summary{max-width:65ch}
.hst-fit-out>span{display:block;margin-top:12px}
.hst-scroll-hint{display:none}
.hst-table-scroll:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* ---------- responsive (GP breakpoints: ≤768 mobile, ≤1024 tablet) ---------- */
@media (max-width:1100px){
  .hst-stages{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:24px}
  .hst-stages li:nth-child(4){padding-left:0;border-left:0}
}
@media (max-width:900px){
  .hst-split,.hst-hero .hst-split,.hst-two-col,.hst-sec-head,.hst-wn-grid,.hst-final .hst-wrap{grid-template-columns:minmax(0,1fr)}
  .hst-wn-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hst-wn-list li:nth-child(3) a{border-left:0}
  .hst-wn-list li:nth-child(n+3) a{border-top:var(--hst-rule)}
  .hst-offer-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .single .inside-article{grid-template-columns:minmax(0,1fr)}
  .single .entry-content{grid-column:1}
  .hst-toc{grid-row:auto;position:static;border:var(--hst-form);padding:12px 14px;margin-bottom:28px}
  .hst-toc summary{margin:0;position:relative;padding-right:28px}
  .hst-toc summary::after{content:"";position:absolute;right:4px;top:2px;width:9px;height:9px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg)}
  .hst-toc[open] summary::after{transform:rotate(-135deg);top:7px}
  .hst-toc[open] ol{margin-top:10px}
  .hst-hero .hst-calc{min-height:0}
}
@media (max-width:768px){
  :root{--hst-h2:30px}
  .single .entry-content h2{font-size:28px}
  .single .entry-header{margin-bottom:16px}
  .hst-toc{margin-bottom:16px}
  .hst-short{padding:14px 16px 16px}
  .hst-short p{font-size:17px}
  .hst-short-lines li{display:block;position:relative;padding:8px 8px 8px 30px;font-size:15px;line-height:1.4}  /* the text is an anonymous grid item, so phones drop the grid */
  .hst-short-lines li::before{position:absolute;left:8px;padding:0}
  .hst-hero{padding-top:24px}
  .hst-split:has(.hst-calc) .hst-hero-copy{display:contents}
  .hst-split:has(.hst-calc){row-gap:20px}
  .hst-split:has(.hst-calc) h1{font-size:36px;line-height:1}
  .hst-split:has(.hst-calc) .hst-lead,.hst-split:has(.hst-calc) .hst-fresh{order:2;margin-top:0}
  .hst-crumbs ol{margin-bottom:12px}
  .hst-crumbs li[aria-current]{display:none}  /* the H1 right below already names the page; keeps the first CTA above the fold */
  .hst-wn-list,.single .hst-wn-list{grid-template-columns:minmax(0,1fr)}
  .hst-wn-list a,.single .hst-wn-list a{border-left:0;border-top:var(--hst-rule)}
  .hst-wn-list li:first-child a{border-top:0}
  .hst-stages{grid-template-columns:minmax(0,1fr)}
  .hst-stages li+li{padding-left:0;border-left:0;border-top:var(--hst-rule);padding-top:14px}
  .hst-log li{grid-template-columns:1fr;gap:2px}
  .hst-related{grid-template-columns:minmax(0,1fr)}
  .hst-fit label span{padding:10px 6px;font-size:14px;line-height:1.25}  /* answers stay in one row; long ones wrap inside their segment */
  .entry-content .hst-rates th,.entry-content .hst-rates td{padding:10px 8px}
  .entry-content .hst-rates th:first-child,.entry-content .hst-rates td:first-child{padding-left:0}
  .hst-chg{display:block;width:max-content;max-width:100%;margin:4px 0 0;white-space:normal}
  .hst-paths.hst-stack th[scope=row],.hst-paths.hst-stack td{width:auto}
  .entry-content .hst-stack td.num{display:flex;justify-content:space-between;gap:12px;text-align:left}
  .hst-stack td.num[data-label]::before{display:inline}
  .hst-stack thead{display:none}
  .hst-stack,.hst-stack tbody,.hst-stack tr,.hst-stack th,.hst-stack td{display:block;width:auto}
  .entry-content .hst-stack tr{border-bottom:var(--hst-rule-head);padding:8px 0}
  .entry-content .hst-stack th,.entry-content .hst-stack td{border:0;padding:4px 0}
  .hst-stack td[data-label]::before{content:attr(data-label);display:block;font:var(--hst-label);font-size:13px;color:var(--contrast-2)}
  /* comparison: stays a 4-column table; scrolls sideways under a pinned feature column, edge shadow says there's more */
  .hst-table-scroll:has(.hst-features){background:linear-gradient(to left,var(--hst-bg),transparent) right/32px 100% local no-repeat,linear-gradient(to left,rgb(14 20 17/.16),transparent) right/14px 100% scroll no-repeat}
  .hst-scroll-hint{display:block;font-size:14px;color:var(--contrast-2);margin:0 0 10px}
  .hst-req{min-width:620px;font-size:15px}
  .entry-content .hst-req th,.entry-content .hst-req td{padding:10px}
  .hst-req th:first-child{position:sticky;left:0;z-index:1;width:150px;min-width:150px;background:var(--base-3)}
  .hst-features{min-width:600px;font-size:15px}
  .entry-content .hst-features th,.entry-content .hst-features td{padding:10px 10px}
  .hst-features th:first-child{position:sticky;left:0;z-index:1;width:9.5em;padding-left:0;background:var(--hst-bg)}
  .hst-features tbody th .hst-fine{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

@media(max-width:600px){
  .hst-rates{min-width:760px}
  .hst-rates th:first-child{position:sticky;left:0;background:var(--base-3);z-index:1;min-width:140px}
}