/* The header's two store icons are Font Awesome Free 6 'apple' and 'google-play' (CC BY 4.0, https://fontawesome.com/license/free). Attribution lives here because HTML comments are stripped from the shipped pages. */
/* Greenline Home Loans — site stylesheet. The design system it implements is
 * written up in DESIGN.md (tokens, type, components); new pages reuse it.
 *
 * 1. BASE      the design's own base: tokens, type scale, reset, focus, the
 *              unresolved-fact chip. Replaces the old WordPress theme's globals
 *              (21 Oct 2026); the 11 redesigned pages render exactly as before.
 * 2. UI        shared components (ui-*): buttons, eyebrow, section head, icon
 *              badge, card, plus/minus badge, CTA panel. The shell and the
 *              calculator layer are built from them; so is every new page. They
 *              come before the sections that use them, so those can adjust them.
 * 3. SHELL     header, mega menu, mobile menu, footer.
 * 4. SHARED    "gl-" page rules that were byte-identical on 2+ redesigned pages
 *              (generated by _build/tools/port_bodies.py), plus the button
 *              properties those pages' .btn links were drawn with.
 * 5. STICKY    the call bar used on / and /the-finance-process/.
 * 6. CALCULATORS  the 28 calculator pages (.gl-calc) and the /calculators/ hub
 *              (.gl-calcs), rendered from _build/calculators.json.
 * 7. PRODUCTS  the legacy loan-product pages and hubs (.gl-prod), from
 *              _build/legacy/products.json; also /faqs/, careers and reviews.
 * 8. COMPANY   the hand-written company and legal pages (.gl-co).
 * 9. NEWS      the blog, /news/ and its posts (.gl-news), from _build/blog/.
 *
 * Class names: shell = site-*, calculators = calc-/calcs-, components = ui-*,
 * tokens = --gl-*. Never add an unprefixed class here: the redesigned pages
 * already use generic names (.btn, .card, .chev, .cols, .wrap) in their bodies.
 *
 * Bump ASSET_V in _build/render.py whenever this file changes (see _headers).
 */

/* ===================================================================== 1. BASE */
/* Tokens. ONE palette, the homepage's forest and lime (decided 21 Oct 2026: every
   page uses it; check.py fails on the retired ink-and-mint colours). Each
   redesigned page also carries the same values as its own --forest/--lime/...
   tokens, scoped to its root. */
:root{
  --gl-ink:#0C1611;--gl-forest:#0B3D2E;--gl-forest-2:#114C39;--gl-forest-3:#0A3225;
  --gl-lime:#8DE04B;--gl-lime-soft:#B8EE86;--gl-lime-tint:#EAF6DF;
  --gl-paper:#F4F7F1;--gl-white:#fff;--gl-muted:#5C6E64;--gl-line:#E2E9DF;--gl-line-2:#CFE0C6;
  --gl-on-dark:#CFE0D3;--gl-on-dark-2:#B8C8BD;--gl-on-dark-3:#8FA897;--gl-line-dark:rgba(255,255,255,.1);
  --gl-hero-h1:clamp(2.3rem,5.4vw,3.85rem);--gl-hero-h1-lh:1.12;--gl-hero-h1-max:18ch;--gl-hero-sub:.4em;--gl-hero-lead:1.16rem;--gl-hero-lead-max:52ch;--gl-hero-note:.8rem;  /* hero type scale: one scale on every page (DESIGN.md \"Hero\") */
  --gl-shadow:0 18px 50px -22px rgba(11,61,46,.35);
  --gl-shadow-lift:0 18px 40px rgba(11,61,46,.1);
  --gl-radius-s:12px;--gl-radius:16px;--gl-radius-l:22px;--gl-pill:999px;
  --gl-wrap:1180px;--gl-gutter:24px;
  --gl-font:Montserrat,sans-serif;
  --gl-focus:#0B3D2E;
}
@media (max-width:640px){:root{--gl-gutter:18px}}

/* Type scale. 1rem is 20px on screens wider than 768px and 16px at 768px and
   below, at the browser's default text size: the 11 redesigned pages were drawn
   at that scale and every rem in them depends on it. It is set in %, so a
   reader's own text-size setting scales the whole site. */
html{font-size:125%;-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
@media (max-width:768px){html{font-size:100%}}
body{margin:0;background:var(--gl-white);color:var(--gl-ink);font-family:var(--gl-font);font-size:1rem;font-weight:400;line-height:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}

/* Reset. Components set their own spacing; lists are unstyled unless a
   component opts in to markers (e.g. .calc-list). */
*,::before,::after{box-sizing:border-box}
h1,h2,h3,h4,h5,h6{margin:0;font-size:inherit;font-weight:600;line-height:1.25}
p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{list-style:none;padding:0}
b,strong{font-weight:700}          /* the heaviest weight loaded */
small{font-size:80%}
table{border-collapse:collapse;border-spacing:0}
td,th{padding:0}
img{display:block;max-width:100%;height:auto;vertical-align:middle}
svg{vertical-align:middle}
summary{cursor:pointer}
a{color:inherit;text-decoration:none;transition-property:color,opacity;transition-duration:.4s}
a[href^="tel:"]{white-space:nowrap}
button{font:inherit;color:inherit}

/* Focus: one visible ring everywhere, for keyboard users only. */
:focus-visible{outline:2px solid var(--gl-focus);outline-offset:2px}
.site-header :focus-visible,.site-footer :focus-visible,.mob-menu :focus-visible{outline-color:currentColor}

.ui-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ui-skip{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--gl-forest);color:var(--gl-white);padding:12px 20px;border-radius:0 0 var(--gl-radius-s) 0;font-size:16px;font-weight:600}
.ui-skip:focus{left:0}

/* An unresolved fact: visible on purpose, so it cannot ship unnoticed.
   check.py fails on any such placeholder, inside .todo or not (the user's rule, 23 Oct 2026). */
.todo{display:inline-block;background:#ffe9a8;color:#5b4500;border:1px dashed #b88a00;border-radius:4px;font:600 11px/1.35 var(--gl-font);letter-spacing:0;text-transform:none;padding:1px 6px;white-space:nowrap;vertical-align:middle}

/* ====================================================================== 2. UI */
/* Shared components, taken from the 11 redesigned pages (DESIGN.md says which
   page each comes from). Prefixed ui- so they never meet the pages' own names. */
.ui-wrap{width:100%;max-width:calc(var(--gl-wrap) + 2 * var(--gl-gutter));margin:0 auto;padding:0 var(--gl-gutter)}
.ui-ico{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ui-wrap-wide{max-width:calc(1360px + 2 * var(--gl-gutter))}
.ui-nowrap{white-space:nowrap}

/* buttons: pills, 700 weight, lift on hover (/, /the-finance-process/) */
.ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 26px;border:1.5px solid transparent;border-radius:var(--gl-pill);font-family:inherit;font-size:.9rem;font-weight:700;line-height:1.2;text-align:center;white-space:nowrap;cursor:pointer;transition:transform .15s ease,box-shadow .2s ease,background-color .2s ease,border-color .2s ease,color .2s ease}
.ui-btn .ui-ico{font-size:1.1em}
.ui-btn-primary{background:var(--gl-lime);color:var(--gl-forest-3)}
.ui-btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 26px -10px rgba(141,224,75,.7)}
.ui-btn-dark{background:var(--gl-forest);color:var(--gl-white)}
.ui-btn-dark:hover{transform:translateY(-2px);box-shadow:var(--gl-shadow)}
.ui-btn-ghost{background:transparent;color:var(--gl-white);border-color:rgba(255,255,255,.4)}
.ui-btn-ghost:hover{border-color:var(--gl-lime);color:var(--gl-lime)}
.ui-btn-line{background:transparent;color:var(--gl-forest);border-color:var(--gl-line-2)}
.ui-btn-line:hover{border-color:var(--gl-forest)}
@media (max-width:768px){.ui-btn{font-size:1rem}}

/* eyebrow: uppercase label with a lead-in rule */
.ui-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gl-forest)}
.ui-eyebrow::before{content:"";width:26px;height:2px;background:currentColor}
.ui-eyebrow-dark{color:var(--gl-lime-soft)}

/* section head: H2 + lead */
.ui-head h2{font-size:clamp(2rem,3.7vw,2.8rem);font-weight:600;line-height:1.08;letter-spacing:-.01em;color:var(--gl-ink)}
.ui-head .ui-eyebrow+h2{margin-top:16px}
.ui-head-center{max-width:40em;margin:0 auto;text-align:center}

/* icon badge: a rounded square holding a stroke icon */
.ui-badge{display:grid;place-items:center;flex:none;width:50px;height:50px;border-radius:13px;font-size:24px}
.ui-badge-tint{background:var(--gl-lime-tint);color:var(--gl-forest)}
.ui-badge-dark{background:var(--gl-forest);color:var(--gl-lime)}
.site-mega-intro .ui-badge-dark{background:rgba(141,224,75,.14)}

/* card: white, hairline border, lifts when it is a link */
.ui-card{display:flex;flex-direction:column;background:var(--gl-white);border:1px solid var(--gl-line);border-radius:18px;padding:28px 26px;transition:transform .18s ease,box-shadow .2s ease,border-color .2s ease}
a.ui-card:hover{transform:translateY(-5px);box-shadow:var(--gl-shadow);border-color:var(--gl-line-2)}
.ui-more{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:20px;font-weight:700;color:var(--gl-forest)}
.ui-more .ui-ico{transition:transform .18s ease}
a:hover .ui-more .ui-ico,.ui-more:hover .ui-ico{transform:translateX(4px)}

/* plus/minus disclosure badge (the FAQs on / and /self-employed-low-doc/) */
.ui-pm{position:relative;display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--gl-lime-tint);color:var(--gl-forest);transition:transform .2s ease,background-color .2s ease,color .2s ease}
.ui-pm::before,.ui-pm::after{content:"";position:absolute;width:12px;height:2px;border-radius:1px;background:currentColor}
.ui-pm::after{transform:rotate(90deg)}
[aria-expanded="true"]>.ui-pm,.is-open .ui-pm{transform:rotate(45deg);background:var(--gl-forest);color:var(--gl-white)}

/* call-to-action panel: forest gradient with a lime glow (/home-loans/, /smsf-loans/) */
.ui-cta{position:relative;overflow:hidden;padding:64px 56px;border-radius:28px;text-align:center;color:var(--gl-white);background:linear-gradient(135deg,var(--gl-forest-2),var(--gl-forest-3))}
.ui-cta::after{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 50% -10%,rgba(141,224,75,.28),transparent 70%);pointer-events:none}
.ui-cta>*{position:relative;z-index:1}
.ui-cta h2{font-size:clamp(1.9rem,3.6vw,2.7rem);font-weight:600;line-height:1.08;letter-spacing:-.01em;color:var(--gl-white)}
.ui-cta p{max-width:52ch;margin:18px auto 30px;font-size:1.1rem;line-height:1.6;color:var(--gl-on-dark)}
.ui-cta-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
@media (max-width:640px){.ui-cta{padding:46px 24px;border-radius:22px}}

/* =================================================================== 3. SHELL */
/* Header, mega menu, mobile menu and footer, drawn in the design's language
   (DESIGN.md): forest/lime, pill buttons, rounded cards, 24-grid stroke icons.
   Sizes are rem, so they follow the type scale; the header sticks to the top
   and html's scroll-padding keeps #fragment targets clear of it. */
:root{--site-h:76px}
@media (max-width:1260px){:root{--site-h:68px}}
html{scroll-padding-top:calc(var(--site-h) + 12px)}

/* ---- utility bar: the banking app, company links, accounts */
.site-bar{background:var(--gl-forest-3);color:var(--gl-on-dark);font-size:.675rem;font-weight:500;border-bottom:1px solid var(--gl-line-dark)}
.site-bar-in{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:38px}
.site-app{display:flex;align-items:center;gap:12px}
.site-app-link{font-weight:600;color:var(--gl-white)}
.site-app-link:hover,.site-util a:hover{color:var(--gl-lime)}
.site-app-store{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.08);color:var(--gl-white);transition-property:background-color,color;transition-duration:.2s}
.site-app-store:hover{background:var(--gl-lime);color:var(--gl-forest-3)}
.site-app-store svg{width:auto;height:13px;fill:currentColor}
.site-util-list{display:flex;align-items:center;gap:22px}
.site-util .ui-ico{font-size:1.15em;margin-right:6px;vertical-align:-.2em;color:var(--gl-lime)}
.site-util-acct{padding-left:22px;border-left:1px solid var(--gl-line-dark)}
.site-broker{display:inline-flex;align-items:center;flex-wrap:wrap;gap:0 6px}
.site-broker .ui-ico{margin-right:0}
.site-broker .todo{font-size:10px;padding:0 5px}

/* ---- header bar: logo, loan menus, call and contact */
.site-header{position:sticky;top:0;z-index:900;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--gl-line);box-shadow:0 1px 0 rgba(11,61,46,.04)}
.site-header-in{position:relative;display:flex;align-items:center;gap:24px;height:var(--site-h)}
.site-logo{flex:none;display:block}
.site-logo img{height:46px;width:auto}
.site-nav{position:relative;flex:none;align-self:stretch;display:flex;align-items:center;margin-right:auto}
.site-nav-list{display:flex;align-items:center;gap:2px}
.site-nav-item{display:flex;align-items:center}
.site-nav-link{display:block;padding:10px 2px 10px 9px;font-size:.72rem;font-weight:600;color:var(--gl-ink);white-space:nowrap;border-radius:var(--gl-pill)}
.site-nav-item:not(:has(.site-nav-toggle)) .site-nav-link{padding-right:9px}
.site-nav-link:hover,.site-nav-item.is-open .site-nav-link{color:var(--gl-forest)}
.site-nav-toggle{display:grid;place-items:center;width:24px;height:24px;padding:0;margin:0 2px 0 0;border:0;border-radius:50%;background:transparent;color:var(--gl-muted);cursor:pointer;font-size:16px;transition:background-color .2s,color .2s}
.site-nav-toggle .ui-ico{transition:transform .2s ease}
.site-nav-toggle:hover,.site-nav-item.is-open .site-nav-toggle{background:var(--gl-lime-tint);color:var(--gl-forest)}
.site-nav-toggle[aria-expanded="true"] .ui-ico{transform:rotate(180deg)}
/* the current section: a lime underline under its menu link */
.site-nav-link[aria-current]{box-shadow:inset 0 -2px 0 var(--gl-lime);border-radius:0}

/* mega menu: a floating card under the loan menus */
.site-mega{position:absolute;left:-12px;width:min(900px,calc(100vw - 2 * var(--gl-gutter)));top:calc(100% - 6px);display:grid;grid-template-columns:300px 1fr;gap:10px;padding:10px;background:var(--gl-white);border:1px solid var(--gl-line);border-radius:var(--gl-radius-l);box-shadow:0 34px 70px -28px rgba(11,61,46,.45);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s ease,transform .2s ease,visibility 0s .2s}
.site-nav-item.is-open .site-mega{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .2s ease}
.site-mega-intro{display:flex;flex-direction:column;align-items:flex-start;padding:26px 26px 24px;border-radius:var(--gl-radius);color:var(--gl-on-dark-2);background:radial-gradient(420px 220px at 100% 0,rgba(141,224,75,.18),transparent 65%),linear-gradient(150deg,var(--gl-forest-2),var(--gl-forest-3))}
.site-mega-intro .ui-badge{margin-bottom:18px}
.site-mega-title{font-size:1.05rem;font-weight:600;line-height:1.15;letter-spacing:-.01em;color:var(--gl-white)}
.site-mega-title a:hover{color:var(--gl-lime)}
.site-mega-text{margin-top:8px;font-size:.72rem;line-height:1.55}
.site-mega-more{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:18px;font-size:.7rem;font-weight:700;color:var(--gl-lime)}
.site-mega-more .ui-ico{transition:transform .18s ease}
.site-mega-more:hover .ui-ico{transform:translateX(4px)}
.site-mega-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:4px 10px;padding:14px 12px}
.site-mega-links a{position:relative;display:block;padding:12px 34px 12px 14px;line-height:1.35;border-radius:var(--gl-radius-s);font-size:.72rem;font-weight:600;color:var(--gl-ink);transition-property:background-color,color;transition-duration:.15s}
.site-mega-links a::after{content:"→" / "";position:absolute;right:14px;top:50%;margin-top:-.7em;color:var(--gl-forest);opacity:0;transform:translateX(-4px);transition:opacity .15s,transform .15s}
.site-mega-links a:hover{background:var(--gl-paper);color:var(--gl-forest)}
.site-mega-links a:hover::after{opacity:1;transform:none}

.site-actions{display:flex;align-items:center;gap:12px;flex:none}
.site-call{display:flex;align-items:center;gap:10px;color:var(--gl-ink)}
.site-call .ui-badge{width:38px;height:38px;border-radius:50%;font-size:17px}
.site-call-txt{display:flex;flex-direction:column;font-size:.8rem;font-weight:700;line-height:1.15}
.site-call-cap{font-size:.55rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gl-muted)}
.site-call:hover .ui-badge{background:var(--gl-lime);color:var(--gl-forest-3)}
.site-contact{font-size:.75rem;padding:11px 20px}
/* the phone: number and caption on wide screens; a round icon button between
   the desktop and mobile layouts (the number stays in its accessible name) */
@media (max-width:1599px){.site-call-cap{display:none}}
@media (min-width:1261px) and (max-width:1365px),(max-width:600px){.site-call-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}

.site-burger{display:none;align-items:center;gap:10px;height:42px;padding:0 16px 0 14px;border:0;border-radius:var(--gl-pill);background:var(--gl-forest);color:var(--gl-white);font-size:15px;font-weight:600;cursor:pointer}
.site-burger-bars{display:grid;gap:4px;width:18px}
.site-burger-bars b{display:block;height:2px;border-radius:2px;background:var(--gl-lime)}
.site-burger-bars b:nth-child(2){width:70%}
.site-burger:hover{background:var(--gl-forest-2)}

@media (max-width:1260px){
  .site-nav,.site-util{display:none}
  .site-bar-in{justify-content:center;min-height:34px}
  .site-header-in{gap:16px}
  .site-actions{margin-left:auto;gap:10px}
  .site-burger{display:inline-flex}
}
@media (max-width:768px){
  .site-bar{font-size:.8125rem}
  .site-logo img{height:40px}
  .site-call-txt{font-size:.9375rem}
  .site-call-cap{font-size:.6875rem}
  .site-contact{font-size:.875rem;padding:10px 18px}
}
@media (max-width:600px){
  .site-contact{display:none}
  .site-call .ui-badge{width:42px;height:42px}
}
@media (max-width:360px){.site-logo img{height:34px}.site-burger-txt{display:none}.site-burger{padding:0 13px}}

/* ---- mobile menu: a drawer from the right (a modal <dialog>: focus stays in
   it, Escape closes it, the page behind is inert) */
.mob-menu{position:fixed;inset:0 0 0 auto;width:min(420px,100%);max-width:100%;height:100%;max-height:none;margin:0;padding:0;border:0;background:var(--gl-white);color:var(--gl-ink);font-size:16px;overflow-y:auto;overscroll-behavior:contain;box-shadow:-30px 0 80px -30px rgba(11,61,46,.5)}
.mob-menu[open]{display:flex;flex-direction:column;animation:mob-in .32s cubic-bezier(.22,1,.36,1)}
.mob-menu::backdrop{background:rgba(10,50,37,.55);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
@keyframes mob-in{from{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.mob-menu[open]{animation:none}}
.mob-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 14px 12px 22px;min-height:68px;background:var(--gl-white);border-bottom:1px solid var(--gl-line)}
.mob-head .site-logo img{height:38px}
.mob-close{display:grid;place-items:center;width:42px;height:42px;padding:0;border:0;border-radius:50%;background:var(--gl-paper);color:var(--gl-ink);font-size:20px;cursor:pointer}
.mob-close:hover{background:var(--gl-lime-tint);color:var(--gl-forest)}
.mob-nav{padding:8px 0 10px}
.mob-row{display:flex;align-items:center;border-bottom:1px solid var(--gl-line)}
.mob-row>a{flex:1;padding:15px 22px;font-weight:600;color:var(--gl-ink)}
.mob-row>a:hover{color:var(--gl-forest)}
.mob-toggle{display:grid;place-items:center;width:58px;align-self:stretch;padding:0;border:0;background:transparent;cursor:pointer}
.mob-sub{padding:6px 0 10px;background:var(--gl-paper);border-bottom:1px solid var(--gl-line)}
.mob-sub a{display:block;padding:10px 22px 10px 34px;font-size:.9375rem;font-weight:500;color:var(--gl-muted)}
.mob-sub a:hover{color:var(--gl-forest)}
.mob-acct{display:grid;gap:4px;padding:16px 22px 4px}
.mob-acct a,.mob-acct .site-broker{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:.9375rem;font-weight:600;color:var(--gl-forest)}
.mob-acct .ui-ico{font-size:20px;color:var(--gl-forest)}
.mob-foot{margin-top:auto;padding:18px 22px 26px}
.mob-foot .ui-btn{width:100%}

/* ---- footer */
.site-footer{position:relative;overflow:hidden;background:var(--gl-forest-3);color:var(--gl-on-dark-2);font-size:.75rem;line-height:1.6}
.site-footer::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 420px at 88% -20%,rgba(141,224,75,.12),transparent 62%);pointer-events:none}
.site-footer>.ui-wrap{position:relative}
.site-foot-top{display:grid;grid-template-columns:1.35fr 1fr .8fr 1.25fr;gap:44px;padding:68px 0 52px}
.site-foot-logo img{height:52px;width:auto}
.site-foot-line{margin-top:20px;max-width:26em;color:var(--gl-on-dark)}
.site-foot-line a{color:var(--gl-white);font-weight:600;text-decoration:underline;text-decoration-color:rgba(141,224,75,.6);text-underline-offset:3px}
.site-foot-line a:hover{color:var(--gl-lime)}
.site-foot-hd{margin-bottom:16px;font-size:.65rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gl-lime-soft)}
.site-foot-links{display:grid;gap:10px}
.site-foot-links a{color:var(--gl-on-dark)}
.site-foot-links a:hover,.site-foot-acct a:hover,.site-legal-links a:hover{color:var(--gl-lime)}
.site-foot-btns{display:flex;flex-wrap:wrap;gap:10px}
.site-foot-btns .ui-btn{font-size:.75rem;padding:11px 20px}
.site-foot-acct{display:grid;gap:10px;margin-top:22px}
.site-foot-acct a,.site-foot-acct .site-broker{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--gl-white)}
.site-foot-acct .ui-ico{font-size:1.15em;color:var(--gl-lime)}
.site-foot-legal{display:flex;flex-wrap:wrap;align-items:center;gap:6px 28px;padding:22px 0 30px;border-top:1px solid var(--gl-line-dark);font-size:.65rem;color:var(--gl-on-dark-3)}
.site-fine{flex-basis:100%;margin:0 0 10px;font-size:.72rem;line-height:1.65;color:var(--gl-on-dark-3)}
.site-fine a{color:var(--gl-on-dark-2);text-decoration:underline;text-underline-offset:2px}
.site-legal-links{display:flex;flex-wrap:wrap;gap:6px 22px;margin-left:auto}
.site-legal-links a{color:var(--gl-on-dark-2)}
@media (max-width:1100px){
  .site-foot-top{grid-template-columns:1fr 1fr;gap:40px 32px}
}
@media (max-width:768px){
  .site-footer{font-size:.9375rem}
  .site-foot-top{padding:52px 0 40px}
  .site-foot-hd{font-size:.75rem}
  .site-foot-btns .ui-btn{font-size:.9375rem}
  .site-foot-legal{font-size:.8125rem}
  .site-fine{font-size:.8125rem}
  .site-legal-links{margin-left:0}
}
@media (max-width:560px){
  .site-foot-top{grid-template-columns:1fr 1fr;gap:34px 20px}
  .site-foot-brand,.site-foot-contact{grid-column:1 / -1}
}

/* ================================================================== 4. SHARED */
/* ==== BEGIN SHARED gl- RULES (generated by _build/tools/port_bodies.py) ==== */
/* 59 rules that were byte-identical on 2+ pages, each written once and scoped
   to the pages that use it. Every ported page's root is class="gl gl-<page>"; ".gl" = all ten. */
:is(.gl-home,.gl-process){--forest:#0B3D2E;--forest-2:#114C39;--forest-3:#0a3225; --lime:#8DE04B;--lime-soft:#B8EE86; --paper:#F4F7F1;--ink:#0C1611;--muted:#5C6E64;--line:#E2E9DF;--white:#fff; --shadow:0 18px 50px -22px rgba(11,61,46,.35)}
:is(.gl-home,.gl-lowdoc,.gl-process) *{box-sizing:border-box;margin:0;padding:0}
:is(.gl-home,.gl-lowdoc,.gl-process) a{color:inherit;text-decoration:none}
:is(.gl-home,.gl-process) .wrap{max-width:1180px;margin:0 auto;padding:0 24px}
:is(.gl-home,.gl-process) .eyebrow{font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--forest);display:inline-flex;align-items:center;gap:9px}
:is(.gl-home,.gl-lowdoc,.gl-process) .eyebrow.on-dark{color:var(--lime-soft)}
:is(.gl-home,.gl-lowdoc,.gl-process,.gl-hloans,.gl-mentor,.gl-eq,.gl-syd) .eyebrow::before,.glh-eyebrow::before,.glr-eyebrow::before,.glc-eyebrow::before{content:"";width:26px;height:2px;background:currentColor;display:inline-block}
:is(.gl-home,.gl-process) .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:.98rem;padding:14px 26px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;transition:transform .15s ease,box-shadow .2s ease,background .2s ease}
:is(.gl-home,.gl-process) .btn-primary{background:var(--lime);color:var(--forest-3)}
:is(.gl-home,.gl-lowdoc,.gl-process) .btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 26px -10px rgba(141,224,75,.7)}
:is(.gl-home,.gl-process) .btn-ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.4)}
:is(.gl-home,.gl-lowdoc,.gl-process) .btn-ghost:hover{border-color:var(--lime);color:var(--lime)}
:is(.gl-home,.gl-process) .btn-dark{background:var(--forest);color:var(--white)}
:is(.gl-home,.gl-lowdoc,.gl-process) .btn-dark:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
:is(.gl-home,.gl-process) section{padding:88px 0}
:is(.gl-home,.gl-process) .hero::after{content:"";position:absolute;inset:0;background:radial-gradient(900px 520px at 82% -10%,rgba(141,224,75,.18),transparent 60%);pointer-events:none}
:is(.gl-home,.gl-lowdoc,.gl-process) .hero h1 em{font-style:italic;color:var(--lime)}
:is(.gl-home,.gl-lowdoc,.gl-process) .hero-note svg{flex:none}
:is(.gl-home,.gl-process) .sec-head.center .eyebrow{justify-content:center}
:is(.gl-home,.gl-lowdoc) .lenders img:hover{filter:grayscale(0);opacity:1}
:is(.gl-home,.gl-lowdoc) summary::-webkit-details-marker{display:none}
:is(.gl-home,.gl-lowdoc) details[open] summary .pm{background:var(--forest);color:var(--white);transform:rotate(45deg)}
:is(.gl-home,.gl-lowdoc) details p{padding:0 4px 22px;color:var(--muted);font-size:1rem}
@media(max-width:640px){
  :is(.gl-home,.gl-process) .hero-copy{padding-left:20px;padding-right:20px}
}
:is(.gl-home,.gl-process) .intro-band.gl-rev .intro-photo{order:-1}
@media(max-width:960px){
  :is(.gl-home,.gl-process) .intro-band.gl-rev .intro-photo{order:0}
}
:is(.gl-eq,.gl-hloans,.gl-mentor,.gl-syd) *{margin:0;padding:0;box-sizing:border-box}
:is(.gl-eq,.gl-hloans,.gl-syd){color:var(--muted);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;font-family:inherit}
:is(.gl-eq,.gl-hloans,.gl-mentor,.gl-syd) .wrap{max-width:1160px;margin:0 auto;padding:0 28px}
:is(.gl-hloans,.gl-mentor) .btn-primary{background:var(--lime);color:var(--ink);box-shadow:0 8px 24px rgba(141,224,75,.28)}
:is(.gl-hloans,.gl-mentor) .btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(141,224,75,.4)}
:is(.gl-eq,.gl-hloans,.gl-mentor,.gl-syd) .btn-ghost:hover{border-color:var(--lime);color:#fff}
:is(.gl-eq,.gl-hloans,.gl-syd) .hero .wrap{position:relative}
:is(.gl-hloans,.gl-mentor) .hero .eyebrow{color:var(--lime);margin-bottom:22px}
:is(.gl-eq,.gl-hloans,.gl-syd) .hero h1 .accent{font-style:italic;color:var(--lime)}
:is(.gl-hloans,.gl-mentor) section.block{padding:90px 0}
:is(.gl-hloans,.gl-mentor) .sec-head .eyebrow{color:var(--forest);margin-bottom:16px}
:is(.gl-hloans,.gl-mentor) details.faq summary::-webkit-details-marker{display:none}
:is(.gl-hloans,.gl-mentor) details.faq summary .chev{flex:none;width:26px;height:26px;border-radius:50%;background:var(--paper);display:grid;place-items:center;color:var(--forest);transition:transform .25s;font-weight:700}
:is(.gl-hloans,.gl-mentor) details.faq[open] summary .chev{transform:rotate(45deg);background:var(--lime)}
@media(max-width:860px){
  :is(.gl-hloans,.gl-mentor) .step h3{grid-column:2;grid-row:1}
  :is(.gl-hloans,.gl-mentor) .step p{grid-column:2;grid-row:2}
}
:is(.gl-smsfc,.gl-smsfh){--forest:#0B3D2E; --forest-2:#114C39; --forest-3:#0a3225; --lime:#8DE04B; --lime-soft:#B8EE86; --paper:#F4F7F1; --ink:#0C1611; --muted:#5C6E64; --line:#E2E9DF; --white:#fff; --warn:#C8543B; font-family:inherit; color:var(--muted); line-height:1.65; box-sizing:border-box}
:is(.gl-smsfc,.gl-smsfh) *{box-sizing:border-box; margin:0; padding:0}
:is(.gl-smsfc,.gl-smsfh,.gl-smsfr) img{max-width:100%; display:block}
:is(.gl-smsfc,.gl-smsfh,.gl-smsfr) h1,:is(.gl-smsfc,.gl-smsfh,.gl-smsfr) h2,:is(.gl-smsfc,.gl-smsfh,.gl-smsfr) h3{color:var(--ink); line-height:1.12; letter-spacing:-.01em}
:is(.gl-smsfc,.gl-smsfh,.gl-smsfr) a{color:inherit; text-decoration:none}
@media (prefers-reduced-motion: reduce){
  :is(.gl-smsfc,.gl-smsfh,.gl-smsfr) *{transition:none !important}
}
@media(prefers-reduced-motion:reduce){
  :is(.gl-eq,.gl-process,.gl-syd) *{transition:none!important}
}
:is(.gl-mentor,.gl-syd) .trust .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;align-items:center}
:is(.gl-eq,.gl-syd){--forest:#0B3D2E; --forest-2:#114C39; --forest-3:#0a3225; --lime:#8DE04B; --lime-soft:#B8EE86; --paper:#F4F7F1; --ink:#0C1611; --muted:#5C6E64; --line:#E2E9DF; --white:#fff; --warn:#C8543B}
:is(.gl-eq,.gl-syd) .eyebrow{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--forest);display:inline-flex;align-items:center;gap:9px}
:is(.gl-eq,.gl-syd) .btn{display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:.96rem;padding:.95em 1.7em;border-radius:999px;cursor:pointer;border:none;transition:transform .18s ease,box-shadow .2s ease,background .2s ease}
:is(.gl-eq,.gl-syd) .btn-primary{background:var(--forest);color:#fff;box-shadow:0 8px 24px rgba(11,61,46,.28)}
:is(.gl-eq,.gl-syd) .btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(11,61,46,.4)}
:is(.gl-eq,.gl-hloans,.gl-mentor,.gl-syd) .btn-dark:hover{transform:translateY(-2px);background:var(--forest-2)}
:is(.gl-mentor,.gl-syd) .vcard:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(11,61,46,.1);border-color:var(--lime)}
:is(.gl-eq,.gl-syd) .btn-ghost{background:transparent;color:#EAF4EC;border:1px solid rgba(255,255,255,.4)}
:is(.gl-eq,.gl-syd) .btn-dark{background:var(--forest);color:#fff}
/* ==== END SHARED gl- RULES ==== */

/* The pill buttons of the seven pages whose markup uses .btn were drawn with
   Title Case labels on a 1rem line box, centred, positioned: properties the old
   theme's global .btn supplied underneath the pages' own .btn rules. The pages
   are the reference, so those properties are kept here, for those pages only,
   at the old rule's specificity (one class), so every page rule still wins.
   New buttons are .ui-btn (section 6). */
:where(.gl-home,.gl-process,.gl-lowdoc,.gl-hloans,.gl-mentor,.gl-eq,.gl-syd) .btn{position:relative;text-align:center;vertical-align:middle;line-height:1rem;text-transform:capitalize}

/* ================================================================== 5. STICKY */
.glhl-scta{position:fixed;left:0;right:0;bottom:0;z-index:99990;background:linear-gradient(90deg,#0a3225,#114C39);color:#fff;border-top:1px solid rgba(141,224,75,.28);box-shadow:0 -12px 34px -14px rgba(0,0,0,.55);transform:translateY(130%);opacity:0;pointer-events:none;transition:transform .55s cubic-bezier(.22,1,.36,1),opacity .45s ease;font-family:inherit;-webkit-font-smoothing:antialiased}
.glhl-scta.glhl-show{transform:translateY(0);opacity:1;pointer-events:auto}
.glhl-scta *{box-sizing:border-box;margin:0;padding:0}
.glhl-scta__in{max-width:1180px;margin:0 auto;padding:11px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.glhl-scta__msg{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.glhl-scta__msg b{font-size:1.02rem;font-weight:700;color:#fff}
.glhl-scta__msg span{font-size:.82rem;color:#B8C8BD}
.glhl-scta__actions{display:flex;align-items:center;gap:10px;flex:none}
.glhl-scta a{text-decoration:none;font-weight:700;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .15s ease,background .2s ease,border-color .2s ease,color .2s ease}
.glhl-scta__call{color:#EAF4EC;border:1.5px solid rgba(255,255,255,.35);padding:10px 18px;font-size:.95rem}
.glhl-scta__call:hover{border-color:#8DE04B;color:#8DE04B}
.glhl-scta__call svg{flex:none}
.glhl-scta__cta{background:#8DE04B;color:#0a3225;padding:12px 22px;font-size:.98rem}
.glhl-scta__cta:hover{transform:translateY(-1px)}
@media(max-width:640px){
  .glhl-scta__in{padding:9px 12px;gap:9px}
  .glhl-scta__msg{display:none}
  .glhl-scta__actions{width:100%;gap:8px}
  .glhl-scta__call,.glhl-scta__cta{flex:1;padding:13px 10px;font-size:.96rem}
}
@media(prefers-reduced-motion:reduce){
  .glhl-scta{transition:opacity .3s ease;transform:none}
  .glhl-scta.glhl-show{transform:none}
}

/* ============================================================= 6. CALCULATORS */
/* The 28 calculator pages (.gl-calc) and the hub (.gl-calcs), in the design's
   language: a dark hero with the breadcrumb and H1, then a white card lifted
   over it holding the intro and the Vision Abacus calculator.
   The iframe is width:100% and its height is fixed per calculator (from the old
   theme, in calculators.json), so the frame is kept at least as wide as it was
   at every screen width: 992px wide on desktop, the screen less 20px at 768px
   and below. A narrower frame would make the calculator taller than its box. */
.gl-calc,.gl-calcs{background:var(--gl-white);color:var(--gl-ink);line-height:1.6;overflow:hidden}
.gl-calc a:not(.ui-btn),.gl-calcs a:not(.ui-btn){color:inherit}

/* ---- hero */
.calc-hero{position:relative;background:var(--gl-forest-3);color:var(--gl-on-dark);padding:52px 0 140px}
.calc-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 480px at 85% -20%,rgba(141,224,75,.2),transparent 62%),radial-gradient(700px 400px at 0% 120%,rgba(17,76,57,.9),transparent 70%);pointer-events:none}
.calc-hero-in{position:relative}
.calc-crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;font-size:.7rem;font-weight:600;letter-spacing:.02em;color:var(--gl-on-dark-3)}
.calc-crumbs li+li::before{content:"/";margin:0 10px;color:rgba(255,255,255,.28)}
.calc-crumbs a{color:var(--gl-on-dark)}
.calc-crumbs a:hover{color:var(--gl-lime)}
.calc-crumbs [aria-current]{color:var(--gl-lime-soft)}
.calc-hero h1{margin-top:22px;max-width:var(--gl-hero-h1-max);font-size:var(--gl-hero-h1);font-weight:600;line-height:var(--gl-hero-h1-lh);letter-spacing:-.01em;color:var(--gl-white)}
.calc-h1-sub{display:block;margin-top:14px;font-size:var(--gl-hero-sub);font-weight:500;line-height:1.35;letter-spacing:0;color:var(--gl-on-dark)}

/* ---- the calculator card */
.calc-main{background:var(--gl-paper);padding-bottom:88px}
.calc-main>.ui-wrap{--gl-gutter:16px}
.calc-card{position:relative;z-index:1;max-width:1040px;margin:-100px auto 0;padding:46px 0 44px;background:var(--gl-white);border-radius:24px;box-shadow:0 0 0 1px var(--gl-line),var(--gl-shadow)}
.calc-intro{max-width:800px;margin:0 auto;padding:0 32px;text-align:center}
.calc-intro h2{font-size:clamp(1.55rem,2.6vw,2.1rem);font-weight:600;line-height:1.12;letter-spacing:-.01em;color:var(--gl-ink)}
.calc-txt{margin-top:16px;font-size:.95rem;color:var(--gl-muted)}
.calc-txt p+p{margin-top:12px}
.calc-tool{margin-top:36px;padding:36px max(0px,calc((100% - 992px) / 2)) 0;border-top:1px solid var(--gl-line)}
.calc-tool iframe{display:block;margin:0 auto}

/* in-copy links: forest, underlined (lime fails as text on white) */
.calc-txt a,.calc-guide a,.calc-faq a{color:var(--gl-forest);font-weight:600;text-decoration:underline;text-decoration-color:rgba(11,61,46,.35);text-underline-offset:3px}
.calc-txt a:hover,.calc-guide a:hover,.calc-faq a:hover{color:var(--gl-forest);text-decoration-color:currentColor}

/* ---- SEO-briefed pages: the guide below the calculator, then the FAQ
   (markup from seo.py: sections_html, faq_html) */
.calc-guide{padding:88px 0}
.calc-guide-col{max-width:calc(800px + 2 * var(--gl-gutter))}
.calc-guide-sec+.calc-guide-sec{margin-top:60px}
.calc-guide h2,.calc-faq h2{font-size:clamp(1.55rem,2.6vw,2.1rem);font-weight:600;line-height:1.12;letter-spacing:-.01em;color:var(--gl-ink);margin-bottom:20px}
.calc-guide h2::before,.calc-faq h2::before{content:"";display:block;width:36px;height:3px;margin-bottom:18px;border-radius:2px;background:var(--gl-lime)}
.calc-guide-txt{font-size:.95rem;line-height:1.7;color:var(--gl-muted)}
.calc-guide-txt>*+*{margin-top:16px}
.calc-list{padding-left:1.3em}
ul.calc-list{list-style:disc}
ol.calc-list{list-style:decimal}
.calc-list li{padding-left:.3em}
.calc-list li::marker{color:var(--gl-forest);font-weight:700}
.calc-list li+li{margin-top:8px}
.calc-formula{padding:18px 22px;border:1px solid var(--gl-line);border-left:4px solid var(--gl-lime);border-radius:14px;background:var(--gl-paper);font-size:1.02rem;font-weight:600;color:var(--gl-ink)}
.calc-note{font-size:.8rem;color:var(--gl-muted)}
.calc-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--gl-line);border-radius:16px;background:var(--gl-white);box-shadow:0 12px 34px rgba(11,61,46,.05)}
.calc-table{width:100%;font-size:.85rem;text-align:left}
.calc-table caption{padding:14px 18px;text-align:left;font-weight:700;color:var(--gl-ink);background:var(--gl-paper);border-bottom:1px solid var(--gl-line)}
.calc-table th,.calc-table td{padding:12px 18px;border-bottom:1px solid var(--gl-line)}
.calc-table thead th{background:var(--gl-forest);color:var(--gl-white);font-weight:600;border-bottom:0}
.calc-table tbody th{font-weight:600;color:var(--gl-ink)}
.calc-table tbody tr:last-child>*{border-bottom:0}

.calc-faq{padding:88px 0;background:var(--gl-paper)}
.calc-faq-list{display:grid;gap:14px}
.calc-faq-item{padding:24px 26px;background:var(--gl-white);border:1px solid var(--gl-line);border-radius:16px}
.calc-faq-item h3{display:flex;gap:12px;align-items:baseline;font-size:1.02rem;font-weight:600;line-height:1.3;color:var(--gl-ink)}
.calc-faq-item h3::before{content:"Q" / "";flex:none;font-size:.9rem;font-weight:700;color:var(--gl-forest)}
.calc-faq-item [data-faq="a"]{margin-top:8px;padding-left:24px;font-size:.92rem;color:var(--gl-muted)}
.calc-disclaimer{margin-top:30px;font-size:.72rem;line-height:1.6;color:var(--gl-muted)}

/* ---- call to action (every calculator page and the hub) */
.calc-cta{padding:88px 0;background:var(--gl-white)}

/* ---- hub: the index of every calculator, on a card lifted over the hero */
.calcs-hero{padding-bottom:150px}
.calcs-index{position:relative;z-index:1;margin-top:-110px}
.calcs-index-card{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 36px;padding:38px 40px;background:var(--gl-white);border-radius:24px;box-shadow:0 0 0 1px var(--gl-line),var(--gl-shadow)}
.calcs-index-col{display:flex;gap:16px;align-items:flex-start}
.calcs-index-col .ui-badge{width:44px;height:44px;border-radius:12px;font-size:22px}
.calcs-index-list{min-width:0;font-size:.72rem}
.calcs-index-list li:first-child{margin-bottom:10px;font-size:.88rem;font-weight:700;line-height:1.3}
.calcs-index-list li:first-child a{display:inline-flex;align-items:center;gap:8px;color:var(--gl-ink)}
.calcs-index-list li:first-child a:hover{color:var(--gl-forest)}
.calcs-index-list li:first-child .ui-ico{font-size:.9em;color:var(--gl-forest)}
.calcs-index-list li+li{margin-top:7px}
.calcs-index-list li+li a{font-weight:500;color:var(--gl-muted)}
.calcs-index-list li+li a:hover{color:var(--gl-forest);text-decoration:underline;text-underline-offset:3px}

/* ---- hub: intro and the three general calculators */
.calcs-intro{padding:88px 0}
.calcs-intro .calc-txt{font-size:1.05rem;color:var(--gl-muted)}
.calcs-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:48px}
.calcs-card h3{margin:20px 0 8px;font-size:1.25rem;font-weight:600;line-height:1.15;letter-spacing:-.01em;color:var(--gl-ink)}
.calcs-card p{font-size:.88rem;color:var(--gl-muted)}
.calcs-go{display:grid;place-items:center;align-self:flex-start;width:38px;height:38px;margin-top:auto;border-radius:50%;background:var(--gl-lime-tint);color:var(--gl-forest);font-size:18px;transition:background-color .2s,color .2s,transform .18s}
.calcs-card .calcs-go{margin-top:22px}
a:hover>.calcs-go{background:var(--gl-lime);color:var(--gl-forest-3);transform:translateX(3px)}

/* ---- hub: one disclosure card per category. site.js opens and closes them
   (300ms slide) and opens the one a #fragment names: the six old category URLs
   301 to /calculators/#<category>. */
.calcs-groups{padding:88px 0;background:var(--gl-paper)}
.calcs-groups>.ui-wrap{display:grid;gap:16px}
.calcs-group{background:var(--gl-white);border-radius:20px;box-shadow:0 0 0 1px var(--gl-line);transition:box-shadow .2s}
.calcs-group.is-open,.calcs-group:hover{box-shadow:0 0 0 1px var(--gl-line-2),var(--gl-shadow-lift)}
.calcs-acc-head{display:grid;grid-template-columns:auto 1fr auto;gap:4px 20px;align-items:center;padding:26px 28px;cursor:pointer}
.calcs-acc-head .ui-badge{grid-row:1 / span 2}
.calcs-acc-head h3{font-size:1.15rem;font-weight:600;line-height:1.2;color:var(--gl-ink)}
.calcs-acc-head button{padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.calcs-acc-head button:hover{color:var(--gl-forest)}
.calcs-acc-txt{grid-column:2;font-size:.8rem;line-height:1.55;color:var(--gl-muted)}
.calcs-acc-head .ui-pm{grid-column:3;grid-row:1 / span 2;width:34px;height:34px}
.calcs-acc-list{display:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:4px 28px 28px}
.calcs-group.is-open .calcs-acc-list{display:grid}
.calcs-item{display:flex;flex-direction:column;padding:20px 22px;background:var(--gl-paper);border:1px solid var(--gl-line);border-radius:14px;transition:border-color .2s,background-color .2s,transform .18s}
.calcs-item:hover{background:var(--gl-white);border-color:var(--gl-lime);transform:translateY(-2px)}
.calcs-item h4{font-size:.85rem;font-weight:600;line-height:1.3;color:var(--gl-ink)}
.calcs-item p{margin-top:6px;font-size:.72rem;line-height:1.55;color:var(--gl-muted)}
.calcs-item .calcs-go{width:32px;height:32px;margin-top:14px;font-size:16px;background:var(--gl-white)}

@media (max-width:1100px){
  .calcs-index-card{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:992px){
  .calcs-cards{grid-template-columns:1fr;max-width:640px;margin-left:auto;margin-right:auto}
  .calcs-acc-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:768px){
  .calc-hero{padding:40px 0 112px}
  .calcs-hero{padding-bottom:128px}
  .calc-crumbs ol{font-size:.8125rem}
  .calc-main>.ui-wrap{--gl-gutter:10px}
  .calc-card{margin-top:-80px;padding:32px 0 26px;border-radius:18px}
  .calc-intro{padding:0 18px}
  .calc-tool{margin-top:26px;padding-top:26px}
  .calc-main,.calc-guide,.calc-faq,.calc-cta,.calcs-intro,.calcs-groups{padding-bottom:60px}
  .calc-guide,.calc-faq,.calc-cta,.calcs-intro,.calcs-groups{padding-top:60px}
  .calc-guide-txt,.calc-txt{font-size:1rem}
  .calc-faq-item{padding:20px}
  .calc-faq-item [data-faq="a"]{padding-left:0;font-size:.95rem}
  .calcs-index{margin-top:-96px}
  .calcs-index-card{gap:26px 24px;padding:28px 24px}
  .calcs-index-list{font-size:.875rem}
  .calcs-index-list li:first-child{font-size:1rem}
  .calcs-acc-txt{font-size:.875rem}
  .calcs-item h4{font-size:.9375rem}
  .calcs-item p{font-size:.8125rem}
}
@media (max-width:640px){
  .calcs-index-card{grid-template-columns:1fr}
  .calcs-acc-head{grid-template-columns:1fr auto;padding:22px 20px}
  .calcs-acc-head .ui-badge{display:none}
  .calcs-acc-head h3,.calcs-acc-txt{grid-column:1}
  .calcs-acc-head .ui-pm{grid-column:2}
  .calcs-acc-list{grid-template-columns:1fr;padding:0 20px 22px}
}

/* ================================================================ 7. PRODUCTS */
/* The legacy loan-product pages and their hubs (.gl-prod), rendered from
   _build/legacy/products.json through _build/templates/product.html (legacy.py),
   in the design's language (DESIGN.md): a dark hero with breadcrumb and lime glow,
   the trust strip, "why Greenline" in two columns, the rates band where a page
   showed [two_rates], feature cards on paper, a briefed page's guide and FAQ
   (seo.py's markup with the prod- prefix), related products on the dark band,
   then the CTA panel and the fine print. */
.gl-prod{background:var(--gl-white);color:var(--gl-ink);line-height:1.6;overflow:hidden;overflow:clip}   /* clip, not hidden: the sticky FAQ heads need a scrollport that is the window */
.gl-prod :where(h1,h2,h3){color:var(--gl-ink);font-weight:600;line-height:1.1;letter-spacing:-.01em}

/* ---- hero */
.prod-hero{position:relative;background:var(--gl-forest-3);color:#D6E3D8;padding:52px 0 92px}
.prod-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 480px at 85% -20%,rgba(141,224,75,.2),transparent 62%),radial-gradient(700px 400px at 0% 120%,rgba(17,76,57,.9),transparent 70%);pointer-events:none}
.prod-hero-in{position:relative}
.prod-crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;margin-bottom:30px;font-size:.7rem;font-weight:600;letter-spacing:.02em;color:var(--gl-on-dark-3)}
.prod-crumbs li+li::before{content:"/";margin:0 10px;color:rgba(255,255,255,.28)}
.prod-crumbs a{color:var(--gl-on-dark)}
.prod-crumbs a:hover{color:var(--gl-lime)}
.prod-crumbs [aria-current]{color:var(--gl-lime-soft)}
.prod-hero h1{max-width:var(--gl-hero-h1-max);margin:18px 0 20px;font-size:var(--gl-hero-h1);color:var(--gl-white);line-height:var(--gl-hero-h1-lh)}
.prod-h1-sub{display:block;margin-top:14px;font-size:var(--gl-hero-sub);font-weight:500;line-height:1.35;letter-spacing:0;color:var(--gl-on-dark)}
.prod-lead{max-width:var(--gl-hero-lead-max);font-size:var(--gl-hero-lead);color:var(--gl-on-dark-2)}
.prod-hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin:30px 0 24px}
.prod-note{font-size:var(--gl-hero-note);letter-spacing:.02em;color:var(--gl-on-dark-3)}

/* ---- trust strip: the four facts the homepage and /home-loans/ state */
.prod-trust{background:var(--gl-forest);color:var(--gl-white)}
.prod-trust-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 28px;padding-top:22px;padding-bottom:22px}
.prod-trust-item{display:flex;align-items:center;gap:12px;font-size:.8rem}
.prod-trust-item .ui-ico{font-size:22px;color:var(--gl-lime)}
.prod-trust-item b{display:block;font-size:.95rem;font-weight:700;line-height:1.2}
.prod-trust-item span{display:block;color:var(--gl-on-dark-2);line-height:1.3}

/* ---- sections */
.prod-why,.prod-features,.prod-children,.prod-related,.prod-cta,.prod-guide,.prod-faq,.prod-rates{padding:88px 0}
.prod-head{max-width:720px;margin-bottom:44px}
.prod-head p{margin-top:18px;font-size:1.1rem;color:var(--gl-muted)}
.prod-why-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px 64px;align-items:start}
.prod-why-grid .prod-head{margin-bottom:0}
.prod-why-copy{font-size:1.02rem;line-height:1.7;color:var(--gl-muted)}
.prod-why-copy p+p{margin-top:16px}
.prod-why-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* ---- the rates band: the [two_rates] figures from _build/legacy/rates.json */
.prod-rates{background:var(--gl-forest-3);color:var(--gl-on-dark)}
.prod-rates .prod-head h2{color:var(--gl-white)}
.prod-rate-row{display:flex;flex-wrap:wrap;gap:20px}
.prod-rate{flex:1 1 260px;max-width:460px;padding:30px 32px;border:1px solid var(--gl-line-dark);border-radius:20px;background:var(--gl-forest-2)}
.prod-rate-n{display:block;font-size:clamp(2.4rem,5vw,3.6rem);font-weight:600;line-height:1;letter-spacing:-.02em;color:var(--gl-lime)}
.prod-rate-n small{margin-left:6px;font-size:.3em;font-weight:600;letter-spacing:0;color:var(--gl-lime-soft)}
.prod-rate-l{display:block;margin-top:12px;font-size:.9rem;font-weight:600;color:var(--gl-white)}
.prod-rate-note{max-width:820px;margin-top:26px;font-size:.76rem;line-height:1.6;color:var(--gl-on-dark-3)}
.gl-prod .todo{white-space:normal}

/* ---- feature cards and a hub's child cards, on paper */
.prod-features,.prod-children{background:var(--gl-paper)}
.prod-grid{display:grid;gap:20px}
.prod-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.prod-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.prod-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.prod-fcard h3,.prod-ccard h3{margin:20px 0 10px;font-size:1.15rem}
.prod-fcard p,.prod-ccard p{font-size:.94rem;color:var(--gl-muted)}
.prod-fcard p a,.prod-why-copy p a,.prod-rate-note a{color:var(--gl-forest);font-weight:600;text-decoration:underline;text-decoration-color:rgba(11,61,46,.35);text-underline-offset:3px}
.prod-rate-note a{color:var(--gl-lime-soft);text-decoration-color:rgba(184,238,134,.5)}

/* ---- briefed pages: the guide (prose column), then the FAQ (static Q/A cards);
   the markup is seo.py's (sections_html, faq_html) with the prod- prefix */
.prod-guide{background:var(--gl-white)}
.prod-guide-col{max-width:calc(800px + 2 * var(--gl-gutter))}
.prod-guide-sec+.prod-guide-sec{margin-top:60px}
.prod-guide h2,.prod-faq h2{font-size:clamp(1.55rem,2.6vw,2.1rem);font-weight:600;line-height:1.12;letter-spacing:-.01em;color:var(--gl-ink);margin-bottom:20px}
.prod-guide h2::before,.prod-faq h2::before{content:"";display:block;width:36px;height:3px;margin-bottom:18px;border-radius:2px;background:var(--gl-lime)}
.prod-guide-txt{font-size:.95rem;line-height:1.7;color:var(--gl-muted)}
.prod-guide-txt>*+*{margin-top:16px}
.prod-guide a,.prod-faq a{color:var(--gl-forest);font-weight:600;text-decoration:underline;text-decoration-color:rgba(11,61,46,.35);text-underline-offset:3px}
.prod-guide a:hover,.prod-faq a:hover{text-decoration-color:currentColor}
.prod-list{padding-left:1.3em}
ul.prod-list{list-style:disc}
ol.prod-list{list-style:decimal}
.prod-list li{padding-left:.3em}
.prod-list li::marker{color:var(--gl-forest);font-weight:700}
.prod-list li+li{margin-top:8px}
.prod-formula{padding:18px 22px;border:1px solid var(--gl-line);border-left:4px solid var(--gl-lime);border-radius:14px;background:var(--gl-paper);font-size:1.02rem;font-weight:600;color:var(--gl-ink)}
.prod-guide-note{font-size:.8rem;color:var(--gl-muted)}
.prod-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--gl-line);border-radius:16px;background:var(--gl-white);box-shadow:0 12px 34px rgba(11,61,46,.05)}
.prod-table{width:100%;font-size:.85rem;text-align:left}
.prod-table caption{padding:14px 18px;text-align:left;font-weight:700;color:var(--gl-ink);background:var(--gl-paper);border-bottom:1px solid var(--gl-line)}
.prod-table th,.prod-table td{padding:12px 18px;border-bottom:1px solid var(--gl-line)}
.prod-table thead th{background:var(--gl-forest);color:var(--gl-white);font-weight:600;border-bottom:0}
.prod-table tbody th{font-weight:600;color:var(--gl-ink)}
.prod-table tbody tr:last-child>*{border-bottom:0}
.prod-faq{background:var(--gl-paper)}
.prod-faq-list{display:grid;gap:14px}
.prod-faq-item{padding:24px 26px;background:var(--gl-white);border:1px solid var(--gl-line);border-radius:16px}
.prod-faq-item h3{display:flex;gap:12px;align-items:baseline;font-size:1.02rem;font-weight:600;line-height:1.3;color:var(--gl-ink)}
.prod-faq-item h3::before{content:"Q" / "";flex:none;font-size:.9rem;font-weight:700;color:var(--gl-forest)}
.prod-faq-item [data-faq="a"]{margin-top:8px;padding-left:24px;font-size:.92rem;color:var(--gl-muted)}

/* ---- a page's own prose sections (static copy) sit on paper so they read apart
   from the feature cards; the grant-by-state block (the First Home Owner Grant page) */
.prod-guide-page{background:var(--gl-paper)}
.prod-guide-page .prod-guide-sec h3{margin:26px 0 8px;font-size:1.08rem;color:var(--gl-ink)}
.prod-guide-page .prod-guide-sec h3:first-child{margin-top:0}
.prod-grid-1{grid-template-columns:minmax(0,1fr);max-width:720px}
.prod-states{padding:88px 0;background:var(--gl-white)}
.prod-state h3{font-size:1.2rem}
.prod-state-value{margin:10px 0 4px;font-size:1.5rem;font-weight:600;line-height:1.15;letter-spacing:-.01em;color:var(--gl-forest)}
.prod-state-note{font-size:.84rem;color:var(--gl-muted)}
.prod-state h4{margin:18px 0 6px;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gl-forest)}
.prod-state .prod-list{font-size:.9rem;color:var(--gl-muted)}
.prod-state .prod-list li+li{margin-top:6px}
.prod-state .ui-more{font-size:.9rem}
.prod-states-note{max-width:820px;margin-top:28px;font-size:.78rem;line-height:1.6;color:var(--gl-muted)}

/* ---- related products: the dark services band (/mortgage-broker/) */
.prod-related{background:var(--gl-forest-3)}
.prod-related .prod-head h2{color:var(--gl-white)}
.prod-related .prod-head p{color:var(--gl-on-dark-2)}
.prod-scard{display:flex;flex-direction:column;padding:26px 24px;border:1px solid var(--gl-line-dark);border-radius:16px;background:var(--gl-forest-2);transition:transform .2s ease,border-color .2s ease}
.prod-scard:hover{transform:translateY(-3px);border-color:var(--gl-lime)}
.prod-scard h3{margin-bottom:8px;font-size:1.1rem;color:var(--gl-white)}
.prod-scard p{font-size:.9rem;color:var(--gl-on-dark-2)}
.prod-scard .ui-more{padding-top:14px;font-size:.85rem;color:var(--gl-lime)}

/* ---- call to action and the fine print */
.prod-cta{background:var(--gl-white)}
.prod-cta .ui-cta .ui-eyebrow{margin-bottom:18px}
.prod-fine{max-width:820px;margin:34px auto 0;text-align:center;font-size:.74rem;line-height:1.6;color:var(--gl-muted)}

@media (max-width:1100px){
  .prod-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .prod-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prod-why-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .prod-trust-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:768px){
  .prod-hero{padding:40px 0 64px}
  .prod-crumbs ol{font-size:.8125rem;margin-bottom:24px}
  .prod-why,.prod-features,.prod-children,.prod-related,.prod-cta,.prod-guide,.prod-faq,.prod-rates,.prod-states{padding:60px 0}
  .prod-head{margin-bottom:32px}
  .prod-guide-txt,.prod-why-copy{font-size:1rem}
  .prod-faq-item{padding:20px}
  .prod-faq-item [data-faq="a"]{padding-left:0;font-size:.95rem}
  .prod-rate{padding:24px}
}
@media (max-width:640px){
  .prod-grid-2,.prod-grid-3,.prod-grid-4{grid-template-columns:minmax(0,1fr)}
  .prod-trust-row{gap:14px 18px}
  .prod-trust-item{font-size:.78rem}
}
@media (max-width:480px){
  .prod-trust-row{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .gl-prod *{transition:none!important}
}

/* ---- /faqs/, /about-us/careers/ and /about-us/client-reviews/ (legacy.py, the
   same hero, heads and CTA as the product pages) */
.prod-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.prod-pill{display:inline-flex;align-items:center;padding:9px 16px;border:1px solid rgba(255,255,255,.3);border-radius:var(--gl-pill);font-size:.8rem;font-weight:600;color:var(--gl-on-dark);transition:border-color .2s,color .2s,background-color .2s}
.prod-pill:hover{border-color:var(--gl-lime);color:var(--gl-lime)}
.prod-faqgroup{padding:72px 0;background:var(--gl-white);scroll-margin-top:110px}
.prod-faqgroup-alt{background:var(--gl-paper)}
.prod-faqgroup-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:32px 64px;align-items:start}
.prod-faqgroup-head{position:sticky;top:110px}
.prod-faqgroup-head h2{margin-top:18px;font-size:clamp(1.55rem,2.6vw,2.1rem)}
.prod-faqgroup-head p{margin-top:12px;font-size:1rem;color:var(--gl-muted)}
.prod-qa{border-bottom:1px solid var(--gl-line)}
.prod-qa:first-child{border-top:1px solid var(--gl-line)}
.prod-qa summary{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 4px;font-size:1.04rem;font-weight:600;line-height:1.35;color:var(--gl-ink);list-style:none}
.prod-qa summary::-webkit-details-marker{display:none}
.prod-qa summary:hover{color:var(--gl-forest)}
.prod-qa[open]>summary .ui-pm{transform:rotate(45deg);background:var(--gl-forest);color:var(--gl-white)}
.prod-qa-a{padding:0 4px 22px;font-size:.98rem;line-height:1.7;color:var(--gl-muted)}
.prod-qa-a a{color:var(--gl-forest);font-weight:600;text-decoration:underline;text-decoration-color:rgba(11,61,46,.35);text-underline-offset:3px}
.prod-jobs{padding:88px 0;background:var(--gl-paper)}
.prod-joblist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.prod-job{scroll-margin-top:110px}
.prod-job-type{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gl-forest)}
.prod-job h3{margin:10px 0 12px;font-size:1.3rem}
.prod-job p{font-size:.95rem;color:var(--gl-muted)}
.prod-job p+p{margin-top:12px}
.prod-apply{padding:88px 0;background:var(--gl-white);scroll-margin-top:110px}
.prod-apply-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px 64px;align-items:start}
.prod-apply-grid .prod-head{margin-bottom:0}
.prod-form{display:grid;gap:18px;padding:32px;border:1px solid var(--gl-line);border-radius:22px;background:var(--gl-white);box-shadow:var(--gl-shadow-lift)}
.prod-field{display:grid;gap:8px}
.prod-field-head{display:flex;align-items:baseline;gap:6px}
.prod-field label{font-size:.82rem;font-weight:700;color:var(--gl-ink)}
.prod-req{margin-left:0;font-size:.7rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--gl-muted)}
.prod-field input,.prod-field select,.prod-field textarea{width:100%;padding:12px 14px;border:1px solid var(--gl-line-2);border-radius:12px;background:var(--gl-white);font:inherit;font-size:.95rem;color:var(--gl-ink)}
.prod-field input:focus,.prod-field select:focus,.prod-field textarea:focus{outline:2px solid var(--gl-forest);outline-offset:1px;border-color:var(--gl-forest)}
.prod-field input[type="file"]{padding:10px;font-size:.85rem}
.prod-field select{min-width:0;max-width:100%}
.prod-field-check{display:flex;gap:12px;align-items:flex-start;font-size:.9rem;color:var(--gl-muted)}
.prod-field-check input{width:18px;height:18px;margin-top:3px;flex:none;accent-color:var(--gl-forest)}
.prod-form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.prod-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.prod-form-status{display:none;font-size:.9rem;font-weight:600;color:var(--gl-forest)}
.prod-form-status:not(:empty){display:block}
.prod-form .ui-btn{justify-self:start}
.prod-form-fine{font-size:.74rem;line-height:1.6;color:var(--gl-muted)}
.prod-form-fine a{color:var(--gl-forest);text-decoration:underline}
.prod-form-todo{margin-top:14px}
.prod-platforms{background:var(--gl-forest);padding:22px 0}
.prod-platform-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 40px}
.prod-platform{display:inline-flex;align-items:center;gap:12px;color:var(--gl-on-dark);font-size:.82rem;font-weight:600}
.prod-platform img{height:26px;width:auto}
.prod-platform:hover{color:var(--gl-lime)}
.prod-reviews{padding:88px 0;background:var(--gl-paper)}
.prod-rgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.prod-review{gap:14px}
.prod-review[hidden]{display:none}
.prod-rstars{display:flex;gap:2px;color:var(--gl-forest)}
.prod-rstars svg{width:16px;height:16px;fill:currentColor}
.prod-rtext{font-size:.92rem;line-height:1.65;color:var(--gl-muted)}
.prod-rtext p+p{margin-top:10px}
.prod-review footer{margin-top:auto;padding-top:14px;border-top:1px solid var(--gl-line);font-size:.82rem;color:var(--gl-muted)}
.prod-review footer b{display:block;font-size:.95rem;color:var(--gl-ink)}
.prod-rmore{margin-top:34px;text-align:center}
@media (max-width:900px){
  .prod-faqgroup-grid,.prod-apply-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .prod-faqgroup-head{position:static}
  .prod-rgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:768px){
  .prod-faqgroup,.prod-jobs,.prod-apply,.prod-reviews{padding:60px 0}
  .prod-form{padding:22px}
  .prod-form-row{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .prod-joblist,.prod-rgrid{grid-template-columns:minmax(0,1fr)}
}

/* ================================================================= 8. COMPANY */
/* The hand-written company and legal pages (_build/content/, root .gl-co): they share
   the product pages' hero, heads, trust strip, prose column, forms and CTA (.prod-*,
   section 7) and add their own layouts here: the photo hero, split panels, the team,
   the awards, the partner logos, the banking app, the contact page and the legal
   documents. */
.co-hero-photo::before{display:none}
.co-hero-photo .co-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.co-hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(9,44,33,.94) 0%,rgba(9,44,33,.86) 45%,rgba(10,50,37,.42) 100%);pointer-events:none}
.co-hero-photo .prod-hero-in,.co-hero-photo .calc-hero-in{z-index:1}   /* the photo-hero modifier works on any dark hero: products, hubs, company pages, calculators */
.co-section{padding:88px 0}
.co-paper{background:var(--gl-paper)}
.co-dark{background:var(--gl-forest-3)}
.co-dark .prod-head h2{color:var(--gl-white)}
.co-dark .prod-head p{color:var(--gl-on-dark-2)}
.co-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 64px;align-items:center}
.co-split-copy{font-size:1.02rem;line-height:1.7;color:var(--gl-muted)}
.co-split-copy p+p{margin-top:16px}
.co-split-copy .prod-head{margin-bottom:22px}
.co-split-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.co-photo{width:100%;height:auto;border-radius:22px;box-shadow:var(--gl-shadow)}
.co-logo{display:block;max-width:280px;height:auto;margin-bottom:26px}
.co-logo-card{display:grid;place-items:center;padding:40px;background:var(--gl-white);border:1px solid var(--gl-line);border-radius:22px}
.co-logo-card img{max-width:320px;width:100%;height:auto}
.co-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:44px}
.co-stat{padding:24px 26px;border:1px solid var(--gl-line);border-radius:18px;background:var(--gl-white)}
.co-stat b{display:block;font-size:1.7rem;font-weight:600;line-height:1.1;letter-spacing:-.01em;color:var(--gl-forest)}
.co-stat span{display:block;margin-top:6px;font-size:.85rem;color:var(--gl-muted)}
.co-quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.co-quote{gap:14px}
.co-quote .prod-rstars{color:var(--gl-forest)}
.co-quote blockquote{font-size:.95rem;line-height:1.65;color:var(--gl-muted)}
.co-quote footer{margin-top:auto;padding-top:14px;border-top:1px solid var(--gl-line);font-size:.9rem;font-weight:700;color:var(--gl-ink)}
.co-platforms{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:34px}
.co-platforms a{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:14px;background:var(--gl-forest);font-size:.82rem;font-weight:700;color:var(--gl-white)}
.co-platforms a.ui-more{padding:0;background:none;color:var(--gl-forest)}
.co-platforms img{height:26px;width:auto}
.co-team{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.co-member img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:top;border-radius:18px}
.co-member h3{margin:18px 0 4px;font-size:1.2rem}
.co-role{display:block;font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gl-forest)}
.co-member p{margin-top:10px;font-size:.92rem;line-height:1.65;color:var(--gl-muted)}
.co-member p+p{margin-top:8px}
.co-awards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.co-award{display:grid;grid-template-columns:120px minmax(0,1fr);gap:22px;align-items:start}
.co-award img{width:120px;height:auto}
.co-award h3{margin-bottom:8px;font-size:1.15rem}
.co-award p{font-size:.92rem;line-height:1.65;color:var(--gl-muted)}
.co-award p+p{margin-top:8px}
.co-award-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:30px}
.co-award-row img{height:92px;width:auto}
.co-logos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.co-logos li{display:grid;place-items:center;min-height:92px;padding:14px;background:var(--gl-white);border:1px solid var(--gl-line);border-radius:14px}
.co-logos img{max-height:60px;max-width:100%;width:auto;height:auto}
.co-feats{display:grid;gap:18px;margin-top:30px}
.co-feat{display:flex;align-items:center;gap:16px;font-size:1rem;font-weight:600;color:var(--gl-ink)}
.co-badges{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:30px}
.co-badges img{height:48px;width:auto}
.co-screens{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;align-items:start}
.co-screens img{width:100%;height:auto;border-radius:18px;box-shadow:var(--gl-shadow)}
.co-contact{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px 48px;align-items:start}
.co-details{gap:22px}
.co-detail{display:flex;gap:14px;align-items:flex-start}
.co-detail .ui-badge{width:44px;height:44px;border-radius:12px;font-size:20px}
.co-detail b{display:block;margin-bottom:3px;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gl-forest)}
.co-detail a,.co-detail span{font-size:.98rem;line-height:1.5;color:var(--gl-ink)}
.co-detail a:hover{color:var(--gl-forest);text-decoration:underline}
.co-social{display:flex;gap:10px;margin-top:4px}
.co-social a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--gl-lime-tint);color:var(--gl-forest);font-size:18px;transition:background-color .2s,color .2s}
.co-social a:hover{background:var(--gl-forest);color:var(--gl-white)}
.co-map{margin-top:40px;overflow:hidden;border:1px solid var(--gl-line);border-radius:22px}
.co-map iframe{display:block;width:100%;height:400px;border:0}
.co-doc .prod-guide-sec h4{margin:22px 0 8px;font-size:1rem;font-weight:700;color:var(--gl-ink)}
.co-doc .prod-guide-sec h4:first-child{margin-top:0}
.co-doc-meta{margin-bottom:34px;padding:16px 20px;border-left:4px solid var(--gl-lime);border-radius:0 14px 14px 0;background:var(--gl-white);font-size:.9rem;color:var(--gl-muted)}
.co-doclist{display:grid;gap:10px}
.co-doclist a{display:flex;align-items:center;gap:14px;padding:14px 18px;border:1px solid var(--gl-line);border-radius:14px;background:var(--gl-white);font-size:.95rem;font-weight:600;color:var(--gl-ink);transition:border-color .2s,transform .18s}
.co-doclist a:hover{border-color:var(--gl-lime);transform:translateY(-2px)}
.co-doclist .ui-ico{font-size:20px;color:var(--gl-forest)}
.co-doclist small{margin-left:auto;font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gl-muted)}
.co-archive{margin-top:40px}
.co-archive summary{display:inline-flex;align-items:center;gap:12px;font-size:1.1rem;font-weight:600;color:var(--gl-ink);list-style:none;cursor:pointer}
.co-archive summary::-webkit-details-marker{display:none}
.co-archive[open] summary .ui-pm{transform:rotate(45deg);background:var(--gl-forest);color:var(--gl-white)}
.co-archive .co-doclist{margin-top:20px}
.co-thanks{padding:120px 0;text-align:center}
.co-thanks .prod-hero-cta{justify-content:center}
.co-closed{display:inline-flex;align-items:center;gap:10px;margin-bottom:20px;padding:8px 14px;border-radius:var(--gl-pill);background:rgba(255,255,255,.12);font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gl-lime-soft)}
@media (max-width:1100px){
  .co-logos{grid-template-columns:repeat(4,minmax(0,1fr))}
  .co-screens{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .co-split,.co-contact{grid-template-columns:minmax(0,1fr);gap:28px}
  .co-stats,.co-quotes,.co-team{grid-template-columns:repeat(2,minmax(0,1fr))}
  .co-awards{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:768px){
  .co-section{padding:60px 0}
  .co-thanks{padding:80px 0}
  .co-map iframe{height:300px}
}
@media (max-width:640px){
  .co-stats,.co-quotes,.co-team,.co-screens{grid-template-columns:minmax(0,1fr)}
  .co-logos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .co-award{grid-template-columns:minmax(0,1fr)}
  .co-award img{width:100px}
}

/* ==================================================================== 9. NEWS */
/* The blog (.gl-news): /news/ and its posts, rendered by _build/blog.py from
   _build/blog/. They share the product template's hero, breadcrumb, section heads,
   FAQ and CTA (.prod-*, §7) and add: the topic filter pills in the hero, the post
   cards (DESIGN.md's photo card: a 16:9 photo, a monospace line on it, the topic's
   icon badge on the photo's edge), a post's meta line, the lede photograph lifted
   over the hero's edge, the reading column, the editor's note, the "where to next"
   cards and the related articles. */
.news-hero-post h1{max-width:var(--gl-hero-h1-max);margin-bottom:22px;font-size:var(--gl-hero-h1);line-height:var(--gl-hero-h1-lh)}   /* the hero type scale (DESIGN.md "Hero"): the tokens, never a size of its own */
.news-hero-post{padding-bottom:132px;--gl-hero-h1:clamp(1.9rem,3.4vw,2.6rem);--gl-hero-sub:.5em;--gl-hero-h1-max:30ch}   /* article titles are long sentences: the post hero redefines the scale tokens (DESIGN.md "Hero"); font-size still comes from var(--gl-hero-h1) */
.news-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;font-size:.8rem;font-weight:600;letter-spacing:.01em;color:var(--gl-on-dark-2)}
.news-meta time{color:var(--gl-lime-soft)}
.news-meta-sep{margin:0 9px;color:var(--gl-on-dark-3)}

/* ---- the topic filter (buttons: JavaScript hides the other cards; without it
   every card shows and the pills do nothing) */
.news-filter{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.news-pill{display:inline-flex;align-items:center;padding:9px 16px;border:1px solid rgba(255,255,255,.3);border-radius:var(--gl-pill);background:transparent;font-size:.8rem;font-weight:600;color:var(--gl-on-dark);cursor:pointer;transition:border-color .2s,color .2s,background-color .2s}
.news-pill:hover{border-color:var(--gl-lime);color:var(--gl-lime)}
.news-pill[aria-pressed="true"]{background:var(--gl-lime);border-color:var(--gl-lime);color:var(--gl-forest-3)}

/* ---- the index list */
.news-list{padding:88px 0;background:var(--gl-paper)}
.news-list-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px;margin-bottom:40px}
.news-list-head .prod-head{margin-bottom:0}
.news-count{flex:none;padding-bottom:6px;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gl-forest)}
.news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.news-grid [hidden]{display:none}

/* ---- the post card */
.news-card{position:relative;display:flex;flex-direction:column;overflow:hidden;background:var(--gl-white);border:1px solid var(--gl-line);border-radius:18px;transition:transform .18s ease,box-shadow .2s ease,border-color .2s ease}
.news-card:hover{transform:translateY(-5px);box-shadow:var(--gl-shadow);border-color:var(--gl-line-2)}
.news-card:focus-within{border-color:var(--gl-forest)}
.news-card-img{position:relative;overflow:hidden;aspect-ratio:16/9;background:var(--gl-forest-3)}
.news-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.news-card:hover .news-card-img img{transform:scale(1.03)}
.news-card-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,50,37,.06) 38%,rgba(10,50,37,.8));pointer-events:none}
.news-card-cap{position:absolute;left:20px;right:92px;bottom:14px;z-index:1;font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-size:.62rem;font-weight:500;line-height:1.45;letter-spacing:.14em;text-transform:uppercase;color:#EAF4EC}
.news-card-body{display:flex;flex-direction:column;flex:1 1 auto;padding:0 26px 28px}
.news-card-body .ui-badge{position:relative;z-index:2;margin:-27px 0 14px auto;box-shadow:0 0 0 4px var(--gl-white)}
.news-card-topic{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gl-forest)}
.news-card h3,.news-card h2{margin:8px 0 10px;font-size:1.12rem;line-height:1.3}
.news-card h3 a,.news-card h2 a{color:var(--gl-ink)}
.news-card h3 a::after,.news-card h2 a::after{content:"";position:absolute;inset:0;z-index:1}   /* the whole card is the link */
.news-card:hover h3 a,.news-card:hover h2 a{color:var(--gl-forest)}
.news-card-body>p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font-size:.92rem;line-height:1.6;color:var(--gl-muted)}
.news-card .ui-more{font-size:.9rem}
.news-card:hover .ui-more .ui-ico{transform:translateX(4px)}

/* ---- a post: the lede lifted over the hero, the reading column */
.news-lede{position:relative;z-index:1;max-width:1000px;margin:-92px auto 0;overflow:hidden;border-radius:22px;background:var(--gl-forest-2);box-shadow:var(--gl-shadow)}
.news-lede img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.news-body{padding:64px 0 88px;background:var(--gl-white)}
.news-col{max-width:calc(760px + 2 * var(--gl-gutter))}
.news-prose{font-size:1.02rem;line-height:1.72;color:var(--gl-muted)}
.news-prose>*+*{margin-top:18px}
.news-prose h2{margin-top:46px;font-size:clamp(1.45rem,2.4vw,1.9rem);line-height:1.15;color:var(--gl-ink)}
.news-prose h2::before{content:"";display:block;width:36px;height:3px;margin-bottom:16px;border-radius:2px;background:var(--gl-lime)}
.news-prose h3{margin-top:32px;font-size:1.18rem;line-height:1.25;color:var(--gl-ink)}
.news-prose h4{margin-top:24px;font-size:1.02rem;color:var(--gl-ink)}
.news-prose h2+h3{margin-top:22px}
.news-prose strong{color:var(--gl-ink)}
.news-prose a{color:var(--gl-forest);font-weight:600;text-decoration:underline;text-decoration-color:rgba(11,61,46,.35);text-underline-offset:3px}
.news-prose a:hover{text-decoration-color:currentColor}
.news-prose ul,.news-prose ol{padding-left:1.35em}
.news-prose ul{list-style:disc}
.news-prose ol{list-style:decimal}
.news-prose li{padding-left:.25em}
.news-prose li+li{margin-top:8px}
.news-prose li::marker{color:var(--gl-forest);font-weight:700}
.news-prose blockquote{padding:18px 24px;border-left:4px solid var(--gl-lime);border-radius:0 14px 14px 0;background:var(--gl-paper);color:var(--gl-ink)}
.news-fig{margin:30px 0}
.news-fig img{width:100%;height:auto;border-radius:18px}
.news-fig figcaption{margin-top:10px;font-size:.78rem;font-weight:600;letter-spacing:.02em;color:var(--gl-muted)}
.news-note{margin-bottom:34px;padding:22px 26px;border:1px solid var(--gl-line);border-left:4px solid var(--gl-lime);border-radius:0 16px 16px 0;background:var(--gl-paper);font-size:.92rem;line-height:1.65;color:var(--gl-muted)}
.news-note-hd{margin-bottom:6px;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gl-forest)}
.news-note a{color:var(--gl-forest);font-weight:600;text-decoration:underline;text-decoration-color:rgba(11,61,46,.35);text-underline-offset:3px}
.gl-news .todo{white-space:normal}

/* ---- where to next, related articles */
.news-next{padding:88px 0;background:var(--gl-paper)}
.news-next-card{position:relative}
.news-next-card:hover{transform:translateY(-5px);box-shadow:var(--gl-shadow);border-color:var(--gl-line-2)}
.news-next-card:focus-within{border-color:var(--gl-forest)}
.news-next-card h3{margin:20px 0 10px;font-size:1.12rem}
.news-next-card h3 a{color:var(--gl-ink)}
.news-next-card h3 a::after{content:"";position:absolute;inset:0}   /* the whole card is the link */
.news-next-card:hover h3 a{color:var(--gl-forest)}
.news-next-card:hover .ui-more .ui-ico{transform:translateX(4px)}
.news-next-card p{font-size:.92rem;color:var(--gl-muted)}
.news-related{padding:88px 0;background:var(--gl-white)}
.news-related .news-card{background:var(--gl-paper)}
.news-related .news-card-body .ui-badge{box-shadow:0 0 0 4px var(--gl-paper)}

@media (max-width:900px){
  .news-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:768px){
  .news-hero-post{padding-bottom:104px}
  .news-lede{margin-top:-64px;border-radius:18px}
  .news-list,.news-body,.news-next,.news-related{padding:60px 0}
  .news-body{padding-top:44px}
  .news-prose{font-size:1rem}
  .news-card-cap{font-size:.75rem}
  .news-card-body>p{font-size:.95rem}
  .news-meta{font-size:.875rem}
  .news-list-head{margin-bottom:28px}
}
@media (max-width:640px){
  .news-grid{grid-template-columns:minmax(0,1fr)}
  .news-prose h2{margin-top:36px}
  .news-note{padding:18px 20px}
}