/* siteforge renderer 1.7.0 — generated, do not edit */
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/schibsted-grotesk-latin-var.woff2) format("woff2")}
:root{--bg:#faf7ef;--surface:#edf5fb;--card-bg:#edf5fb;--card-tint-bg:#d6dfd3;--card-dark-bg:#262d34;--card-accent-bg:#396f97;--text:#111921;--muted:#58626c;--border:#ccd4dc;--primary:#1278b4;--on-primary:#f9fcff;--accent:#1277b2;--footer-bg:#111921;--footer-text:#faf7ef;--on-accent:#ffffff;--hero-bg:#faf7ef;--hero-text:#111921;--band-tint-bg:#e9f3e5;--band-tint-text:#111921;--band-dark-bg:#111921;--band-dark-text:#faf7ef;--band-accent-bg:#2a6a99;--band-accent-text:#f8fcff;--focus:#111921;--font-body:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-heading:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--fs-body:16px;--fs-small:13px;--fs-h1:clamp(28px, calc(28px + (100vw - 390px) * 0.0219), 51px);--fs-display:clamp(42px, calc(42px + (100vw - 390px) * 0.0324), 76px);--fs-h2:clamp(30px, calc(30px + (100vw - 390px) * 0.0181), 49px);--fs-h3:clamp(16px, calc(16px + (100vw - 390px) * 0.0038), 20px);--fs-h4:17px;--fw-body:400;--fw-heading:700;--fw-strong:700;--lh-body:1.55;--lh-heading:1.04;--tracking:-0.050em;--space:4px;--space-section:96px;--space-section-top:64px;--space-stack:16px;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-pill:999px;--maxw:1360px;--gutter:24px;--font-body:"Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-heading:"Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:var(--fs-body);font-weight:var(--fw-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,picture,svg,video{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:var(--fw-heading);line-height:var(--lh-heading);letter-spacing:var(--tracking);margin:0;text-wrap:balance}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
h4{font-size:var(--fs-h4)}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0}
a{color:inherit;text-decoration-color:color-mix(in srgb,var(--accent) 55%,transparent);text-underline-offset:.18em;text-decoration-thickness:.06em}
a:hover{text-decoration-color:var(--accent)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:2px}
.site-footer :focus-visible{outline-color:var(--on-primary)}
:target{scroll-margin-top:calc(var(--space)*20)}
strong,b{font-weight:var(--fw-strong)}
small{font-size:var(--fs-small)}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(16px,4vw,var(--gutter))}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:var(--space);top:calc(-1 * var(--space) * 20);z-index:100;background:var(--primary);color:var(--on-primary);padding:calc(var(--space)*2) calc(var(--space)*3);border-radius:var(--radius-sm);text-decoration:none;font-weight:var(--fw-strong)}
.skip-link:focus{top:var(--space)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

.block{container-type:inline-size;padding-block:clamp(calc(var(--space-section-top) * .6),4.5vw,var(--space-section-top)) clamp(calc(var(--space-section) * .6),8vw,var(--space-section))}
/* A band the original wrapped once, rebuilt from several blocks: the outer
   blocks own its two edges and the middle of the band carries no gap of its
   own. */
.block--edge-first{padding-bottom:0}
.block--edge-last{padding-top:0}
.block--edge-mid{padding-block:0}
/* A band is one <section>; the blocks that share it are parts, not sections. */
.block__part{padding-block:0}
.block__part.hero{padding-block:0}
/* A part drawn on its own ground inside a band: the band owns the height and the
   edges, the part owns the paint (an article's blue CTA inside its cream body).
   The band has no horizontal padding, so the part's background is full-bleed. */
.block__part--painted{padding-block:clamp(calc(var(--space-section) * .55),5vw,calc(var(--space-section) * .9))}
/* Inside a painted band the hero takes the band's ground and ink; on its own it
   keeps the hero band the theme measured. */
.block--tone-tint .block__part.hero,.block--tone-dark .block__part.hero,.block--tone-accent .block__part.hero{background:transparent}
/* Two white sections can share one gap; a painted band owns its own edges. */
.block:not([class*="block--tone-"]) + .block:not([class*="block--tone-"]){padding-top:0}
.block__head{display:flex;flex-direction:column;gap:calc(var(--space)*2);max-width:62ch;margin-bottom:calc(var(--space-stack) * 1.5)}
.block__intro{color:var(--muted);font-size:calc(var(--fs-body) * 1.05)}
.eyebrow{margin:0;font-size:var(--fs-small);font-weight:var(--fw-strong);color:var(--accent)}
.prose{display:flex;flex-direction:column;gap:var(--space-stack);max-width:68ch}
.prose > * + *{margin-top:0}
.prose h2,.prose h3,.prose h4{margin-top:calc(var(--space)*2)}
.prose ul,.prose ol{padding-left:1.2em}
.prose li + li{margin-top:calc(var(--space)*.75)}
.actions{display:flex;flex-wrap:wrap;gap:calc(var(--space)*2);list-style:none;padding:0;margin-top:calc(var(--space)*2)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:calc(var(--space)*.75);min-height:44px;padding:calc(var(--space)*2.25) calc(var(--space)*3.5);border-radius:var(--radius-pill);border:1px solid transparent;background:var(--primary);color:var(--on-primary);font-weight:var(--fw-strong);font-size:var(--fs-small);letter-spacing:.01em;text-decoration:none;transition:transform .15s ease,filter .15s ease}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--text);border-color:var(--border)}
.btn--ghost:hover{border-color:var(--text);filter:none}
.btn--link{background:none;color:var(--text);padding-inline:0;text-decoration:underline}
/* A sentence rendered as an action: a link, not a pill. */
.link{color:var(--text);font-weight:var(--fw-strong);text-decoration:underline;text-underline-offset:.2em}

.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.site-header__inner{display:flex;align-items:center;gap:calc(var(--space)*3);min-height:calc(var(--space)*16)}
.brand{display:inline-flex;align-items:center;gap:calc(var(--space)*1.5);flex:0 1 auto;min-width:0;max-width:100%;font-family:var(--font-heading);font-weight:var(--fw-heading);font-size:calc(var(--fs-body) * 1.15);letter-spacing:var(--tracking);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand img{height:calc(var(--space)*8);width:auto}
.site-nav{min-width:0;flex:1 1 auto;display:flex;justify-content:flex-end}
.site-nav__list{display:flex;align-items:center;gap:calc(var(--space)*3.5);list-style:none;padding:0;margin:0}
.site-nav__link{font-size:var(--fs-small);font-weight:var(--fw-strong);text-decoration:none;color:var(--muted);white-space:nowrap}
.site-nav__link:hover{color:var(--text)}
.site-nav__item{position:relative}
.site-nav__sub{display:none;position:absolute;top:100%;left:calc(var(--space)*-2);min-width:15rem;padding:calc(var(--space)*2);margin:0;list-style:none;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:0 12px 32px rgb(0 0 0 / .12)}
.site-nav__sub li + li{margin-top:calc(var(--space)*1.25)}
.site-nav__item:hover > .site-nav__sub,.site-nav__item:focus-within > .site-nav__sub{display:block}
/* A nav the source kept inside its content: a breadcrumb, an "On this page" map,
   a set of related guides. It is a landmark, so it is drawn as one — a compact
   strip, not a band of its own weight. */
.block--nav{padding-block:calc(var(--space)*2)}
.block-nav{display:flex;flex-wrap:wrap;align-items:baseline;gap:calc(var(--space)*1.5) calc(var(--space)*3)}
.block-nav__intro{margin:0;font-size:var(--fs-small);font-weight:var(--fw-strong);color:var(--muted)}
.block-nav__list{display:flex;flex-wrap:wrap;align-items:baseline;gap:calc(var(--space)*1.5);list-style:none;padding:0;margin:0;font-size:var(--fs-small)}
.block-nav__list a{text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent) 45%,transparent)}
.block-nav__list a:hover{border-bottom-color:var(--accent)}
.block-nav__sub,.block-nav__actions{display:flex;flex-wrap:wrap;gap:calc(var(--space)*2);list-style:none;padding:0;margin:0;font-size:var(--fs-small)}
.block--crumbs .block-nav__list li + li::before{content:"/";margin-inline:calc(var(--space)*1.5);color:var(--muted)}
.block--crumbs .block-nav__list [aria-current]{color:var(--muted)}
.site-header__actions{display:flex;align-items:center;gap:calc(var(--space)*2);flex:0 0 auto}
.site-header__actions .btn{min-height:40px;padding:calc(var(--space)*1.75) calc(var(--space)*3)}
@media (max-width:900px){
  .site-header__inner{flex-wrap:wrap;gap:calc(var(--space)*2)}
  .brand{order:1}
  .site-header__actions{order:2;margin-left:auto}
  .site-nav{order:3;flex:1 0 100%;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;margin-left:calc(var(--space)*-0.5);-webkit-mask-image:linear-gradient(to right,#000 92%,transparent);mask-image:linear-gradient(to right,#000 92%,transparent)}
  .site-nav::-webkit-scrollbar{display:none}
  .site-nav__list{gap:calc(var(--space)*3);padding-block:calc(var(--space)*.5)}
  .site-nav__sub{position:static;display:block;min-width:0;padding:0 0 0 calc(var(--space)*2);margin-top:calc(var(--space)*.5);background:none;border:0;box-shadow:none}
  .site-nav__sub a{font-size:var(--fs-small);color:var(--muted);text-decoration:none}
}
@media (max-width:560px){
  .site-header__inner{min-height:calc(var(--space)*14)}
  .brand{font-size:var(--fs-small)}
  .site-header__actions .btn{padding:calc(var(--space)*1.5) calc(var(--space)*2.5)}
}
.site-footer{background:var(--footer-bg);color:var(--footer-text);padding-block:calc(var(--space-section) * .5);display:flex;flex-direction:column}
.site-footer a{color:inherit;text-decoration-color:color-mix(in srgb,var(--footer-text) 40%,transparent)}
.site-footer a:hover{text-decoration-color:var(--footer-text)}
/* The footer's measured height is a floor on the whole band, so the small print
   stays at the bottom edge the source put it at and the surplus air collects above
   its rule — not under it, where 100-odd empty pixels on a dark ground read as a
   mistake rather than as the end of the footer. */
.site-footer__inner{flex:1;display:grid;grid-template-rows:auto 1fr auto;gap:calc(var(--space-section) * .45)}
/* The source footer's own rhythm: a strip of claims, then the link grid, then the
   small print under a rule. The strip is a row — several badges, one line on
   desktop — and drawing its words as a paragraph cost the page 147px on every
   page of the site (one 40-word sentence at 14px over seven lines). */
.site-footer__badges{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:calc(var(--space)*6);margin:0 0 calc(var(--space)*2);padding:calc(var(--space)*4);list-style:none;border-radius:var(--radius-sm);background:color-mix(in srgb,var(--footer-text) 6%,transparent);font-size:var(--fs-small)}
.site-footer__badges li{display:flex;align-items:center;gap:calc(var(--space)*.5)}
.site-footer__badges li + li::before{content:"";width:1px;height:1rem;margin-inline-end:calc(var(--space)*1.5);background:color-mix(in srgb,var(--footer-text) 22%,transparent)}
/* The brand and its blurb share the footer's first row, as the source draws
   them; the link columns start at the wrap's left edge underneath. Packing the
   columns narrow (the source's are ~260px on a 1328px wrap) keeps them where the
   original puts them instead of spreading three short lists across the page. */
.site-footer__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:calc(var(--space)*3)}
.site-footer__head .brand{color:var(--footer-text);font-family:var(--font-heading);font-size:calc(var(--fs-h3) * 1.15);font-weight:var(--fw-heading);letter-spacing:var(--tracking);text-decoration:none}
.site-footer__top{display:grid;gap:calc(var(--space)*4);grid-template-columns:repeat(3,minmax(0,16rem));justify-content:start}
.site-footer__statement-wrap{max-width:34ch}
/* Where the source draws a claims strip the brand is the grid's first cell, and
   the grid is the source's own: seven equal columns with the brand across two.
   The breakpoints are the band class's own (1024 / 640), because the measured
   heights switch there and the grid has to wrap the way the source wrapped it. */
.site-footer__brand{display:grid;align-content:start;gap:calc(var(--space)*1.5)}
.site-footer__brand .brand{color:var(--footer-text);font-family:var(--font-heading);font-size:calc(var(--fs-h3) * 1.15);font-weight:var(--fw-heading);letter-spacing:var(--tracking);text-decoration:none}
.site-footer__badges ~ .site-footer__top{grid-template-columns:repeat(7,minmax(0,1fr));justify-content:stretch}
.site-footer__badges ~ .site-footer__top .site-footer__brand{grid-column:span 2}
@media (max-width:1023px){.site-footer__badges ~ .site-footer__top{grid-template-columns:repeat(2,minmax(0,1fr))}.site-footer__badges ~ .site-footer__top .site-footer__brand{grid-column:auto}}
@media (max-width:639px){.site-footer__badges ~ .site-footer__top{grid-template-columns:1fr}}
/* Footer ink is the token, not a transparency of it. The deriver pins the footer
   text colour at exactly 4.50:1 against the footer ground (ensureContrast), which
   is the pair the theme table checks — so painting 78% of it put axe at 3.26:1 on
   the first theme whose footer had no headroom. Hierarchy here comes from size,
   weight and the rule above, which cost nothing in contrast. */
.site-footer__statement{max-width:32ch;color:var(--footer-text);font-size:var(--fs-small)}
/* A statement inside the brand cell is the cell's own copy: it wraps to the cell,
   not to the 32ch measure the mast shape uses. */
.site-footer__brand .site-footer__statement{max-width:none}
.site-footer__col h3,.site-footer__col h4{margin:0 0 calc(var(--space)*2);font-size:var(--fs-small);font-weight:var(--fw-strong);letter-spacing:0;text-transform:none;color:var(--footer-text)}
.site-footer__col ul{list-style:none;padding:0;margin:0;display:grid;gap:calc(var(--space)*1.25)}
.site-footer__col a{font-size:var(--fs-small);text-decoration:none}
.site-footer__bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:calc(var(--space)*2);padding-top:calc(var(--space)*6);border-top:1px solid color-mix(in srgb,var(--footer-text) 18%,transparent);font-size:var(--fs-small);color:var(--footer-text)}
.site-footer__social{display:flex;flex-wrap:wrap;gap:calc(var(--space)*2);list-style:none;padding:0;margin:0}
@media (max-width:900px){.site-footer__top{grid-template-columns:repeat(2,minmax(0,1fr))}.site-footer__head{justify-content:flex-start}}
@media (max-width:560px){.site-footer__top{grid-template-columns:1fr}}

.hero{position:relative;background:var(--hero-bg);color:var(--hero-text);padding-block:clamp(32px,5vw,var(--space-section-top)) clamp(20px,4vw,calc(var(--space-section) * .5))}
.hero__inner{display:grid;gap:calc(var(--space-section) * .6);align-items:center}
/* Display type is the entry page's: an inner page's h1 is the size the site uses
   for headings, and blowing it up pushes the hero's action past the fold. */
.hero h1{font-size:var(--fs-display)}
.hero--h1 h1{font-size:var(--fs-h1)}
.hero :focus-visible{outline-color:var(--hero-text)}
.hero .btn{background:var(--accent);color:var(--on-accent)}
.hero .btn--ghost{background:transparent;color:var(--hero-text);border-color:color-mix(in srgb,var(--hero-text) 38%,transparent)}
.hero--center{text-align:center}
.hero--center .hero__copy{align-items:center;margin-inline:auto}
.hero--center .actions{justify-content:center}
.hero--center .hero__body{margin-inline:auto}
.hero__copy{display:flex;flex-direction:column;gap:var(--space-stack);max-width:60ch}
.hero__body{color:color-mix(in srgb,var(--hero-text) 78%,transparent);font-size:calc(var(--fs-body) * 1.1);display:flex;flex-direction:column;gap:var(--space-stack);max-width:56ch}
.hero__tags{display:flex;flex-wrap:wrap;gap:calc(var(--space)*1);margin:calc(var(--space)*.5) 0 0}
.hero__tag{margin:0;padding:calc(var(--space)*1) calc(var(--space)*2.25);border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--surface);color:var(--muted);font-size:var(--fs-small)}
.hero__media img{max-width:100%;height:auto;margin-inline:auto}
.hero__media{margin:0;border-radius:var(--radius-lg);overflow:hidden;background:var(--surface);border:1px solid var(--border)}
.hero__media figcaption{padding:calc(var(--space)*2) calc(var(--space)*3);font-size:var(--fs-small);color:var(--muted)}
@media (min-width:960px){.hero__inner--split{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.hero__actions{margin-top:calc(var(--space)*1)}

/* A card run is a grid, not a run of prose: the source's measured column count
   when the browser saw one, otherwise one column per card up to four. Below 1024
   the run is two-up; below 561 it stacks. */
.cards{display:grid;gap:calc(var(--space)*6);grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));list-style:none;padding:0;margin:0;align-items:stretch}
/* A card is a panel, and the panel belongs to the band it sits in: --card-bg is
   the page's surface at base and a mix of the band's ground and ink inside a
   painted band, repaired in paint.ts so the band's own ink stays readable on it. */
.card{display:flex;flex-direction:column;gap:calc(var(--space)*2);min-width:0;padding:calc(var(--space)*6) calc(var(--space)*5);background:var(--card-bg);border:1px solid var(--card-border,var(--border));border-radius:var(--radius-md)}
.card > *{min-width:0;overflow-wrap:break-word}
.card__media{margin:0;border-radius:var(--radius-sm);overflow:hidden}
.card__media img{width:100%;aspect-ratio:16/10;object-fit:cover}
/* An icon-sized image is a slot in the card's head, not a picture: a badge beside
   the label, at the icon's own aspect. */
.card__icon{display:inline-flex;align-items:center;justify-content:center;width:calc(var(--space)*11);height:calc(var(--space)*11);border-radius:var(--radius-sm);background:color-mix(in srgb,currentColor 10%,transparent)}
.card__icon img{width:calc(var(--space)*6);height:auto}
/* The source sets card titles at its h3 size (brring: 20/23) over 14/22 copy;
   using the h4 scale made every card ~15% shorter and its title lighter. */
.card h3,.card h4{font-size:var(--fs-h3);line-height:1.15}
.card h3 a,.card h4 a{text-decoration:none}
.card h3 a:hover,.card h4 a:hover{text-decoration:underline}
.card__text{color:var(--muted);font-size:calc(var(--fs-body) - 2px);line-height:1.55}
.card__text a{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.card__label{margin:0;font-size:var(--fs-small);font-weight:var(--fw-strong);color:var(--muted)}
/* A short line the source drew above a plan's copy ("Most popular"): a tag, not a
   sentence of the plan. It paints --text, not the accent: an accent at 4.4:1 on
   a pale plan panel is the kind of near-miss the card contract exists to catch.
   It is *not* upper-cased or tracked: the gate treats tracked caps the customer's
   own page does not carry as a tell we invented, and this stylesheet was the
   thing inventing it on every plan card. */
.card__tag{margin:0;font-size:calc(var(--fs-small)*.92);font-weight:var(--fw-strong);color:var(--text)}
.card__price{margin:0;font-family:var(--font-heading);font-size:calc(var(--fs-h3) * 1.35);font-weight:var(--fw-heading);line-height:var(--lh-heading);letter-spacing:var(--tracking);color:var(--text);font-variant-numeric:tabular-nums}
.card__price .card__interval{font-size:calc(var(--fs-body)*.8);font-weight:var(--fw-body);letter-spacing:0;color:var(--muted)}
.card__stat{display:flex;flex-direction:column;gap:calc(var(--space)*.5);margin:0}
.card__stat-num{font-family:var(--font-heading);font-size:var(--fs-h3);font-weight:var(--fw-heading);line-height:var(--lh-heading);letter-spacing:var(--tracking);color:var(--text)}
.card__stat-label{color:var(--muted);font-size:var(--fs-small)}
.card__link{margin-top:auto;font-size:var(--fs-small);font-weight:var(--fw-strong);text-decoration:none}
.card__list{list-style:none;margin:0;padding:0;display:grid;gap:calc(var(--space)*.75);align-content:start}
.card__list li{position:relative;padding-left:calc(var(--space)*3);font-size:calc(var(--fs-body) - 2px);color:var(--muted)}
.card__list li::before{content:"";position:absolute;left:0;top:.55em;width:.45em;height:.45em;border-radius:50%;background:currentColor;opacity:.6}
/* A 01–04 step badge: the numeral in its own chip, the timestamp and status beside
   it, so a card that is one step of four still says which step it is. */
.card__label--step{display:flex;flex-wrap:wrap;align-items:baseline;gap:calc(var(--space)*.5) calc(var(--space)*1.5)}
.card__label--step .card__num{display:inline-flex;align-items:center;justify-content:center;min-width:2.1em;padding:calc(var(--space)*.5) calc(var(--space)*1.25);border-radius:var(--radius-pill);background:color-mix(in srgb,currentColor 10%,transparent);font-family:var(--font-heading);font-size:calc(var(--fs-small)*1.15);line-height:1.2;font-weight:var(--fw-heading);letter-spacing:var(--tracking);color:var(--text)}
.card__label--step .card__meta{font-size:var(--fs-small);color:var(--muted);font-variant-numeric:tabular-nums}
.card__label--step .card__state{font-size:calc(var(--fs-small) * .95);color:var(--muted)}
/* A run the browser measured as a stack: one full-width row per item, in the
   source's own shape — the measured lead column (a step's numeral and timestamp),
   then the heading and the copy. It is a card panel each, and it is never
   re-flowed into columns.
   The row is full-bleed because that is what the source drew: brring's four steps
   are four tinted bands that reach the viewport edge, with their copy on the page's
   content edge. A card inside the wrap cannot do that with its own box, so the row
   breaks out by the wrap's inset and puts the same inset back as padding — one
   expression twice, which is why the copy still lines up with the heading above the
   run. 100cqw is the band's own width (.block is an inline-size container), so
   the bleed stops at the page edge instead of at 100vw's scrollbar-inclusive one.
   The vertical padding is the source's own row rhythm: its step rows measure
   130–185px (mean 151 at 1440, 155 at 768) and the copy alone does not fill that. */
.cards--stack{grid-template-columns:minmax(0,1fr);gap:0}
.cards--stack .card{display:grid;grid-template-columns:minmax(0,calc(var(--row-lead,360px))) minmax(0,1fr);gap:calc(var(--space)*1.5) calc(var(--space)*4);align-items:start;padding:calc(var(--space)*4);border:0;border-radius:0;background:transparent}
/* A row the source tinted is a *band*, and it is drawn as one: edge to edge, with
   the source's own row rhythm (its step rows measure 130–185px, mean 151 at 1440).
   An untinted row is copy inside the page's band, not a band of its own, so it keeps
   the wrap's inset and the tighter rhythm — giving it the band treatment moved four
   of risk's comparison pages by up to 8pp, because their rows are compact. */
.cards--stack .card--wash{margin-inline:calc((100cqw - 100%) / -2);padding-block:calc(var(--space)*10);padding-inline:calc((100cqw - 100%) / 2)}
.cards--stack .card__label{grid-row:1 / span 3;margin:0;font-size:calc(var(--fs-body) * 1.05);color:var(--text)}
.cards--stack .card > :not(.card__label){grid-column:2}
/* The lead column of a measured step row: the numeral over its timestamp, at the
   source's own scale (brring draws the numeral at ~40px in a 250px column). */
.cards--stack .card__label--step{display:flex;flex-direction:column;gap:calc(var(--space)*.5);align-items:flex-start}
.cards--stack .card__label--step .card__num{min-width:0;padding:0;background:none;font-size:calc(var(--fs-h2) * .85);line-height:1}
/* A row's own ground. The hue is measured in the browser (one tint for all four
   paints a page the source never had); the saturation and lightness are ours, and
   the lightness is lifted until the theme's ink clears the floor (paint.ts), so a
   measured hue can never paint an unreadable card. The stack selector is spelled
   out because the stack shape (a lead column, then the copy) sets a transparent
   ground, and a bare .card--wash loses that fight on specificity: the four
   measured tints were dropped and every row painted the band. */
.card--wash,.cards--stack .card--wash{background:hsl(var(--row-hue,210) 46% var(--row-wash-l,94%))}
.card--wash-dark{background:var(--band-dark-bg);color:var(--band-dark-text);--text:var(--band-dark-text);--muted:color-mix(in srgb,var(--band-dark-text) 88%,var(--band-dark-bg))}
.card--wash-accent{background:var(--band-accent-bg);color:var(--band-accent-text);--text:var(--band-accent-text);--muted:color-mix(in srgb,var(--band-accent-text) 88%,var(--band-accent-bg))}
/* On a dark or accent band the measured pale wash would sit under the band's light
   ink — the same illegibility inverted. There the row takes the band's own panel;
   a tint band keeps the measured hue, because its ink is dark and the hue is the
   source's own. */
.block--tone-dark .card--wash,.block--tone-accent .card--wash{background:var(--card-bg);color:var(--band-fg)}
.cards--cols-1{grid-template-columns:minmax(0,1fr)}
.cards--cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards--cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards--cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cards--cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.cards--cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}
/* Tablet: a column count wider than two would leave 3 cards in a 4-up run hanging
   on a row of their own, and 1440-wide type in a 240px column. */
@media (max-width:1023px){
  .cards--cols-3,.cards--cols-4,.cards--cols-5,.cards--cols-6{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .cards,.cards--cols-2,.cards--cols-3,.cards--cols-4,.cards--cols-5,.cards--cols-6{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:1023px){.cards--stack .card{grid-template-columns:minmax(0,calc(var(--row-lead,360px) * .75)) minmax(0,1fr)}}
@media (max-width:600px){.cards--stack .card{grid-template-columns:minmax(0,1fr);padding-block:calc(var(--space)*6)}.cards--stack .card > :not(.card__label){grid-column:1}}
/* A plan grid: one column per plan, and the name, the price, the feature list and
   the CTA each start on the same line in every column, so a shopper reads across
   instead of down. Subgrid does the alignment where the browser has it; without
   it the plans are still equal-height panels with the CTA pinned to the foot. */
.cards--plans{align-items:stretch;row-gap:calc(var(--space)*2)}
.cards--plans .card__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:calc(var(--space)*1) calc(var(--space)*2)}
.cards--plans .card__label{font-size:calc(var(--fs-body)*1.05);letter-spacing:0;color:var(--text)}
.cards--plans .card__price{margin-top:calc(var(--space)*.5)}
@supports (grid-template-rows:subgrid){
  .cards--plans .card{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:calc(var(--space)*2)}
  .cards--plans .card__head{grid-row:1;align-self:end}
  .cards--plans .card__price{grid-row:2;align-self:start}
  .cards--plans .card__text{grid-row:3}
  .cards--plans .card__list{grid-row:4}
  .cards--plans .card__link{grid-row:5;align-self:end}
}
/* A plan run the source stacked is a row per plan. The plan's own regions still
   run down that row, in one column: keeping the stack's measured lead column
   would put the plan's name, price and list inside it, and the subgrid's five
   tracks would place every region in that one narrow cell. */
.cards--plans.cards--stack .card{grid-template-columns:minmax(0,1fr)}
.cards--plans.cards--stack .card > *{grid-column:1}
.card__link::after{content:" \2192"}

.gallery{display:grid;gap:calc(var(--space)*2);grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));list-style:none;padding:0;margin:0}
.gallery figure{margin:0;display:flex;flex-direction:column;gap:calc(var(--space)*1.5)}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-sm);background:var(--surface);border:1px solid var(--border)}
.gallery figcaption{font-size:var(--fs-small);color:var(--muted)}

.figure{margin:0;display:flex;flex-direction:column;gap:calc(var(--space)*2)}
.figure img{max-width:100%;height:auto;margin-inline:auto;border-radius:var(--radius-md);background:var(--surface);border:1px solid var(--border)}
.figure figcaption{font-size:var(--fs-small);color:var(--muted)}
/* A licence that requires a credit gets one on every page the image appears on:
   under the picture it belongs to, in muted ink the theme table already checks
   against each ground, and never smaller than the caption beside it. */
.credit{margin:0;font-size:var(--fs-small);line-height:1.45;color:var(--muted);max-width:64ch}
.credit a{color:inherit;text-decoration:underline;text-underline-offset:.15em}
.credit a:hover{color:var(--accent)}
.credit__sep{opacity:.75}
.figure figcaption .credit,.gallery figcaption .credit,.hero__media .credit{display:block;margin-top:calc(var(--space)*.5)}
.card > .credit{font-size:calc(var(--fs-small) * .95)}
/* The band retargets --muted, so a card's credit stays legible on a painted band
   without a second colour. The hero has its own ink tokens. */
.hero__media .credit{color:var(--hero-text)}
.brand__media{margin:0;display:flex;align-items:center;gap:calc(var(--space)*1.5);min-width:0}
.brand__media .credit{white-space:normal;font-size:calc(var(--fs-small) * .8)}

.list{display:flex;flex-direction:column;gap:calc(var(--space)*1.5);padding-left:1.25em;margin:0}
.list li::marker{color:var(--accent)}
.list a{text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.list--compact{display:flex;flex-wrap:wrap;gap:calc(var(--space)*1.5);padding-left:0;list-style:none}
.list--compact li{margin:0}
.list--compact li > a,.list--compact li > span{display:inline-block;padding:calc(var(--space)*1.25) calc(var(--space)*2.5);border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--surface);color:var(--text);font-size:var(--fs-small);text-decoration:none}
.list--compact li > a:hover{border-color:var(--accent);color:var(--accent)}

.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface)}
.table-wrap table{width:100%;min-width:36rem;border-collapse:collapse;font-size:var(--fs-small)}
.table-wrap caption{caption-side:top;text-align:left;padding:calc(var(--space)*2.5) calc(var(--space)*3);color:var(--muted);font-size:var(--fs-small);border-bottom:1px solid var(--border)}
.table-wrap th,.table-wrap td{padding:calc(var(--space)*2) calc(var(--space)*3);text-align:left;vertical-align:top;border-bottom:1px solid var(--border)}
/* The header row is a shade of the surface it sits on. It must be a shade of the
   band's ground: --bg stays the page colour inside a painted band, so mixing
   against it turned a dark band's header into a mid-slate and dropped white ink to
   4.4:1 — 30 pages of serious axe findings on one rule. */
.table-wrap thead th{font-size:var(--fs-small);letter-spacing:.02em;background:color-mix(in srgb,var(--surface) 70%,var(--band-bg,var(--bg)));font-weight:var(--fw-strong)}
.table-wrap tbody tr:last-child th,.table-wrap tbody tr:last-child td{border-bottom:0}
.table-wrap tbody th{font-weight:var(--fw-strong)}

.faq{display:flex;flex-direction:column;gap:calc(var(--space)*1.5);max-width:72ch}
.faq details{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:0}
.faq summary{display:flex;align-items:flex-start;justify-content:space-between;gap:calc(var(--space)*2);padding:calc(var(--space)*3) calc(var(--space)*3.5);cursor:pointer;font-family:var(--font-heading);font-weight:var(--fw-heading);font-size:calc(var(--fs-body) * 1.05);line-height:1.35;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:0 0 auto;font-size:1.35em;line-height:1;color:var(--accent)}
.faq details[open] summary::after{content:"\2212"}
.faq summary:hover{color:var(--accent)}
.faq__answer{padding:0 calc(var(--space)*3.5) calc(var(--space)*3.5);color:var(--muted);max-width:66ch}

.cta{background:color-mix(in srgb,var(--surface) 60%,var(--bg));border:1px solid var(--border);border-radius:var(--radius-lg);padding:clamp(calc(var(--space)*4),5vw,calc(var(--space)*7));display:flex;flex-direction:column;gap:calc(var(--space)*2);align-items:flex-start}
.cta h2,.cta h3{max-width:22ch}
.cta__text{color:var(--muted);max-width:56ch}

.contact{display:grid;gap:calc(var(--space-section) * .5);grid-template-columns:minmax(0,1fr)}
@media (min-width:860px){.contact--split{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
/* A synthesised enquiry form is an addition, not a migration: keep it to one
   compact row of fields so a page the customer never had a form on does not grow
   a screen-sized block at the bottom. */
.contact--compact .form{gap:calc(var(--space)*2);align-items:end}
@media (min-width:760px){
  .contact--compact .form{grid-template-columns:repeat(3,minmax(0,1fr))}
  .contact--compact .field:has(textarea),.contact--compact .field--submit,.contact--compact .form__note,.contact--compact .cf-turnstile{grid-column:1/-1}
  .contact--compact .field--submit{justify-self:start;margin-top:calc(var(--space)*1)}
}
.contact--compact .field textarea{min-height:calc(var(--space)*12)}
.contact__details{display:grid;gap:calc(var(--space)*2);margin:0}
.contact__details dt{font-size:var(--fs-small);color:var(--muted)}
.contact__details dd{margin:0;font-size:calc(var(--fs-body) * 1.05)}
.contact__details a{text-decoration:none}
.contact__details a:hover{text-decoration:underline}
.form{display:grid;gap:calc(var(--space)*2.5);padding:clamp(calc(var(--space)*3),4vw,calc(var(--space)*5));background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md)}
.field{display:grid;gap:calc(var(--space)*1)}
.field label{font-size:var(--fs-small);font-weight:var(--fw-strong)}
.field .req{color:var(--accent)}
.field input,.field select,.field textarea{width:100%;min-height:44px;padding:calc(var(--space)*1.75) calc(var(--space)*2);font:inherit;font-size:var(--fs-body);color:var(--text);background:var(--bg);border:1px solid var(--muted);border-radius:var(--radius-sm)}
.field textarea{min-height:calc(var(--space)*24);resize:vertical}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--muted)}
.form .btn{justify-self:start}
/* The honeypot is for bots, not people: off-screen and one pixel, never display:none
   (a bot that checks for hidden-by-display fields is a bot that skips them). */
.field--hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.form__note{font-size:var(--fs-small);color:var(--muted)}

/* Painted section bands. The page's own colour rhythm is a brand signal: a
   landing page built from a dark testimonial, a pale panel and a saturated CTA
   strip is not the same site as white prose. Each band retargets the ink tokens
   so cards, lists and muted copy inside it stay legible on the new ground. */
.block--tone-tint{--band-bg:var(--band-tint-bg);--band-fg:var(--band-tint-text);--card-bg:var(--card-tint-bg)}
.block--tone-dark{--band-bg:var(--band-dark-bg);--band-fg:var(--band-dark-text);--card-bg:var(--card-dark-bg)}
.block--tone-accent{--band-bg:var(--band-accent-bg);--band-fg:var(--band-accent-text);--card-bg:var(--card-accent-bg)}
.block--tone-tint,.block--tone-dark,.block--tone-accent{background:var(--band-bg);color:var(--band-fg);--text:var(--band-fg);--muted:color-mix(in srgb,var(--band-fg) 90%,var(--band-bg));--border:color-mix(in srgb,var(--band-fg) 26%,transparent);--surface:color-mix(in srgb,var(--band-fg) 9%,var(--band-bg));--card-border:color-mix(in srgb,var(--band-fg) 20%,transparent);--accent:var(--band-fg);--on-accent:var(--band-bg);--hero-text:var(--band-fg);--hero-bg:transparent}
/* A wash card inside a dark band: the measured pale wash would sit under the
   band's light ink, which is the same illegibility inverted. There the row takes
   a panel mixed from the band's own ground instead of its hue (the rule lives
   with the card in BLOCKS). A tint band keeps the measured hue: its ink is dark,
   so the pale row already reads, and the hue is the source's own. */
/* A hero inside a painted band keeps the band's ink: its own measured text
   colour belongs to the band the source painted it on. */
.block--tone-tint.hero,.block--tone-dark.hero,.block--tone-accent.hero{--hero-bg:var(--band-bg)}
.block--tone-tint :focus-visible,.block--tone-dark :focus-visible,.block--tone-accent :focus-visible{outline-color:var(--band-fg)}
/* Cards keep their own panel on a painted band (--card-bg above), so the band's
   repaired ink is what a card paints: the panel is derived from the band, never
   transparent, and its pair is in the contrast table. Only a stacked *row* is
   borderless, because a row is a line of the band itself. */
.block--tone-tint .cta,.block--tone-dark .cta,.block--tone-accent .cta{background:transparent;border-color:color-mix(in srgb,var(--band-fg) 26%,transparent)}
.block--tone-tint .btn--ghost,.block--tone-dark .btn--ghost,.block--tone-accent .btn--ghost{color:var(--band-fg);border-color:color-mix(in srgb,var(--band-fg) 40%,transparent)}

@media (min-width:1024px){.band--h765-1030-1168{min-height:765px}}
@media (min-width:640px) and (max-width:1023px){.band--h765-1030-1168{min-height:1030px}}
@media (max-width:639px){.band--h765-1030-1168{min-height:1168px}}
@media (min-width:1024px){.band--h761-711-905{min-height:761px}}
@media (min-width:640px) and (max-width:1023px){.band--h761-711-905{min-height:711px}}
@media (max-width:639px){.band--h761-711-905{min-height:905px}}
@media (min-width:1024px){.band--h807-888-1320{min-height:807px}}
@media (min-width:640px) and (max-width:1023px){.band--h807-888-1320{min-height:888px}}
@media (max-width:639px){.band--h807-888-1320{min-height:1320px}}
@media (min-width:1024px){.band--h979-928-1240{min-height:979px}}
@media (min-width:640px) and (max-width:1023px){.band--h979-928-1240{min-height:928px}}
@media (max-width:639px){.band--h979-928-1240{min-height:1240px}}
@media (min-width:1024px){.band--h828-1064-1272{min-height:828px}}
@media (min-width:640px) and (max-width:1023px){.band--h828-1064-1272{min-height:1064px}}
@media (max-width:639px){.band--h828-1064-1272{min-height:1272px}}
@media (min-width:1024px){.band--h559-791-737{min-height:559px}}
@media (min-width:640px) and (max-width:1023px){.band--h559-791-737{min-height:791px}}
@media (max-width:639px){.band--h559-791-737{min-height:737px}}
@media (min-width:1024px){.band--h1262-2424-2600{min-height:1262px}}
@media (min-width:640px) and (max-width:1023px){.band--h1262-2424-2600{min-height:2424px}}
@media (max-width:639px){.band--h1262-2424-2600{min-height:2600px}}
@media (min-width:1024px){.band--h583-689-667{min-height:583px}}
@media (min-width:640px) and (max-width:1023px){.band--h583-689-667{min-height:689px}}
@media (max-width:639px){.band--h583-689-667{min-height:667px}}
@media (min-width:1024px){.band--h677-580-562{min-height:677px}}
@media (min-width:640px) and (max-width:1023px){.band--h677-580-562{min-height:580px}}
@media (max-width:639px){.band--h677-580-562{min-height:562px}}
@media (min-width:1024px){.band--h4660-4595-6261{min-height:4660px}}
@media (min-width:640px) and (max-width:1023px){.band--h4660-4595-6261{min-height:4595px}}
@media (max-width:639px){.band--h4660-4595-6261{min-height:6261px}}
@media (min-width:1024px){.band--h3930-4045-5150{min-height:3930px}}
@media (min-width:640px) and (max-width:1023px){.band--h3930-4045-5150{min-height:4045px}}
@media (max-width:639px){.band--h3930-4045-5150{min-height:5150px}}
@media (min-width:1024px){.band--h4635-4446-6607{min-height:4635px}}
@media (min-width:640px) and (max-width:1023px){.band--h4635-4446-6607{min-height:4446px}}
@media (max-width:639px){.band--h4635-4446-6607{min-height:6607px}}
@media (min-width:1024px){.band--h1294-1245-1423{min-height:1294px}}
@media (min-width:640px) and (max-width:1023px){.band--h1294-1245-1423{min-height:1245px}}
@media (max-width:639px){.band--h1294-1245-1423{min-height:1423px}}
@media (min-width:1024px){.band--h3112-2958-4279{min-height:3112px}}
@media (min-width:640px) and (max-width:1023px){.band--h3112-2958-4279{min-height:2958px}}
@media (max-width:639px){.band--h3112-2958-4279{min-height:4279px}}
@media (min-width:1024px){.band--h2820-2712-4131{min-height:2820px}}
@media (min-width:640px) and (max-width:1023px){.band--h2820-2712-4131{min-height:2712px}}
@media (max-width:639px){.band--h2820-2712-4131{min-height:4131px}}
@media (min-width:1024px){.band--h3435-3428-4632{min-height:3435px}}
@media (min-width:640px) and (max-width:1023px){.band--h3435-3428-4632{min-height:3428px}}
@media (max-width:639px){.band--h3435-3428-4632{min-height:4632px}}
@media (min-width:1024px){.band--h3439-3375-4499{min-height:3439px}}
@media (min-width:640px) and (max-width:1023px){.band--h3439-3375-4499{min-height:3375px}}
@media (max-width:639px){.band--h3439-3375-4499{min-height:4499px}}
@media (min-width:1024px){.band--h3145-3049-3954{min-height:3145px}}
@media (min-width:640px) and (max-width:1023px){.band--h3145-3049-3954{min-height:3049px}}
@media (max-width:639px){.band--h3145-3049-3954{min-height:3954px}}
@media (min-width:1024px){.band--h3027-2887-3719{min-height:3027px}}
@media (min-width:640px) and (max-width:1023px){.band--h3027-2887-3719{min-height:2887px}}
@media (max-width:639px){.band--h3027-2887-3719{min-height:3719px}}
@media (min-width:1024px){.band--h7621-7709-12344{min-height:7621px}}
@media (min-width:640px) and (max-width:1023px){.band--h7621-7709-12344{min-height:7709px}}
@media (max-width:639px){.band--h7621-7709-12344{min-height:12344px}}
@media (min-width:1024px){.band--h2881-2755-3440{min-height:2881px}}
@media (min-width:640px) and (max-width:1023px){.band--h2881-2755-3440{min-height:2755px}}
@media (max-width:639px){.band--h2881-2755-3440{min-height:3440px}}
@media (min-width:1024px){.band--h2670-2561-3217{min-height:2670px}}
@media (min-width:640px) and (max-width:1023px){.band--h2670-2561-3217{min-height:2561px}}
@media (max-width:639px){.band--h2670-2561-3217{min-height:3217px}}
@media (min-width:1024px){.band--h3211-3086-4054{min-height:3211px}}
@media (min-width:640px) and (max-width:1023px){.band--h3211-3086-4054{min-height:3086px}}
@media (max-width:639px){.band--h3211-3086-4054{min-height:4054px}}
@media (min-width:1024px){.band--h3219-3102-3994{min-height:3219px}}
@media (min-width:640px) and (max-width:1023px){.band--h3219-3102-3994{min-height:3102px}}
@media (max-width:639px){.band--h3219-3102-3994{min-height:3994px}}
@media (min-width:1024px){.band--h3792-3664-4967{min-height:3792px}}
@media (min-width:640px) and (max-width:1023px){.band--h3792-3664-4967{min-height:3664px}}
@media (max-width:639px){.band--h3792-3664-4967{min-height:4967px}}
@media (min-width:1024px){.band--h3670-3571-4813{min-height:3670px}}
@media (min-width:640px) and (max-width:1023px){.band--h3670-3571-4813{min-height:3571px}}
@media (max-width:639px){.band--h3670-3571-4813{min-height:4813px}}
@media (min-width:1024px){.band--h3680-3509-4482{min-height:3680px}}
@media (min-width:640px) and (max-width:1023px){.band--h3680-3509-4482{min-height:3509px}}
@media (max-width:639px){.band--h3680-3509-4482{min-height:4482px}}
@media (min-width:1024px){.band--h4200-4082-5724{min-height:4200px}}
@media (min-width:640px) and (max-width:1023px){.band--h4200-4082-5724{min-height:4082px}}
@media (max-width:639px){.band--h4200-4082-5724{min-height:5724px}}
@media (min-width:1024px){.band--h3325-3473-4391{min-height:3325px}}
@media (min-width:640px) and (max-width:1023px){.band--h3325-3473-4391{min-height:3473px}}
@media (max-width:639px){.band--h3325-3473-4391{min-height:4391px}}
@media (min-width:1024px){.band--h1351-1313-1673{min-height:1351px}}
@media (min-width:640px) and (max-width:1023px){.band--h1351-1313-1673{min-height:1313px}}
@media (max-width:639px){.band--h1351-1313-1673{min-height:1673px}}
@media (min-width:1024px){.band--h1049-1011-1247{min-height:1049px}}
@media (min-width:640px) and (max-width:1023px){.band--h1049-1011-1247{min-height:1011px}}
@media (max-width:639px){.band--h1049-1011-1247{min-height:1247px}}