/* Jack Gladden site styles. Single source of truth for every page (index, landing pages, FAQ, legal).
   Edit here; build_pages.py links this file from every page. */
  /* The web fonts, served from fonts/ (latin subset, from Google Fonts by research/fonts/fetch_fonts.py; SIL Open Font License,
     texts in fonts/). Geist is one variable file for weights 300 to 600. build_pages.py preloads all three files. */
  @font-face{font-family:"Geist";font-style:normal;font-weight:300 600;font-display:swap;src:url("fonts/Geist-normal-300-600.woff2") format("woff2")}
  @font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/InstrumentSerif-normal-400.woff2") format("woff2")}
  @font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/InstrumentSerif-italic-400.woff2") format("woff2")}
  /* Fallback faces sized to match the web fonts, so text keeps its line breaks when Geist and Instrument Serif arrive
     (no layout shift on a first, uncached visit). Ratios measured in Chrome against the loaded fonts, 2026-10-12:
     size-adjust = web font width / fallback width (over the site's own text: 182 taglines and headings for the serif, 496 paragraphs for Geist); ascent and descent = web font metrics / size-adjust. */
  @font-face{font-family:"Instrument Serif Fallback";src:local("Times New Roman"),local("TimesNewRomanPSMT");size-adjust:83.21%;ascent-override:119%;descent-override:37.3%;line-gap-override:0%}
  @font-face{font-family:"Instrument Serif Fallback";font-style:italic;src:local("Times New Roman Italic"),local("TimesNewRomanPS-ItalicMT");size-adjust:88.01%;ascent-override:112.5%;descent-override:35.2%;line-gap-override:0%}
  @font-face{font-family:"Geist Fallback";font-weight:100 400;src:local("Arial"),local("ArialMT");size-adjust:102.12%;ascent-override:98.9%;descent-override:28.4%;line-gap-override:0%}
  @font-face{font-family:"Geist Fallback";font-weight:500;src:local("Arial"),local("ArialMT");size-adjust:104.43%;ascent-override:96.7%;descent-override:27.8%;line-gap-override:0%}
  @font-face{font-family:"Geist Fallback";font-weight:600 900;src:local("Arial Bold"),local("Arial-BoldMT");size-adjust:99.44%;ascent-override:101.6%;descent-override:29.2%;line-gap-override:0%}
  :root{
    --serif:"Instrument Serif", "Instrument Serif Fallback", Georgia, "Times New Roman", serif;
    --sans:"Geist", "Geist Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  }
  /* Sapphire palette (chosen 2026-10-10) */
  html,html[data-theme="sapphire"]{
    --ivory:#f5f7fa; --paper:#ffffff; --ink:#0d1a2b; --ink-2:#4a5567; --line:#e1e6ee;
    --brand:#3c64c8; --sage:var(--brand); --sage-deep:var(--brand); --accent:var(--brand); --a1:#d6e2f5; --a2:#e4e1f4; --a3:#dcecf1; --glow:rgba(60,100,200,.38);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--ivory);transition:background 1s;color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
  a{color:inherit}
  .show-sm{display:none} @media (max-width:600px){.hide-sm{display:none}.show-sm{display:inline}}
  .skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;border-radius:8px;z-index:100}
  .skip:focus{left:8px}
  :focus-visible{outline:2px solid var(--sage-deep);outline-offset:3px;border-radius:6px}
  .wrap{max-width:1180px;margin:0 auto;padding:0 28px}

  /* living background: slow drifting light + grain */
  /* no blur filter or multiply blend: the radial gradients are already soft, and both forced a full-screen redraw every frame */
  .aura{position:fixed;inset:-20vmax;z-index:-2;pointer-events:none;opacity:.75}
  .aura i{position:absolute;border-radius:50%;will-change:transform;transition:background 1s}
  .aura i:nth-child(1){width:55vmax;height:55vmax;left:5%;top:0;background:radial-gradient(circle,var(--a1) 0,transparent 65%);animation:drift1 38s ease-in-out infinite alternate}
  .aura i:nth-child(2){width:50vmax;height:50vmax;right:0;top:15%;background:radial-gradient(circle,var(--a2) 0,transparent 65%);animation:drift2 46s ease-in-out infinite alternate}
  .aura i:nth-child(3){width:40vmax;height:40vmax;left:35%;bottom:0;background:radial-gradient(circle,var(--a3) 0,transparent 65%);animation:drift3 52s ease-in-out infinite alternate}
  @keyframes drift1{to{transform:translate(12vmax,8vmax) scale(1.15)}}
  @keyframes drift2{to{transform:translate(-14vmax,10vmax) scale(.9)}}
  @keyframes drift3{to{transform:translate(-6vmax,-12vmax) scale(1.2)}}
  .grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

  header{position:sticky;top:0;z-index:10;backdrop-filter:saturate(140%) blur(14px);background:color-mix(in srgb,var(--ivory) 72%,transparent);border-bottom:1px solid transparent;transition:border-color .3s}
  header.scrolled{border-color:var(--line)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:72px}
  .brand{font-family:var(--serif);font-size:22px;letter-spacing:.2px;text-decoration:none}
  .brand small{display:block;font:500 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-top:4px}
  .nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0;font-size:15px}
  .nav ul a{text-decoration:none;color:var(--ink-2)} .nav ul a:hover{color:var(--ink)}
  .brandrow{display:flex;align-items:center;gap:8px}
  .brand-sub{display:block;font:500 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-top:6px}
  .li-head{display:inline-flex;align-items:center;color:var(--ink-2);opacity:.55;padding:4px;margin-top:2px;transition:opacity .25s,color .25s}
  .li-head:hover,.li-head:focus-visible{opacity:1;color:var(--brand)}
  .hright{display:flex;align-items:center;gap:22px}
  .hcontact{display:flex;flex-direction:column;align-items:flex-end;gap:3px;font-size:13.5px;line-height:1.25}
  .hcontact a{text-decoration:none;color:var(--ink-2)} .hcontact a:hover{color:var(--brand)}
  .hcontact a:first-child{color:var(--ink);font-weight:600;font-size:14.5px}
  @media (max-width:1100px){.hcontact{display:none}}
  .btn{display:inline-flex;align-items:center;gap:10px;border-radius:999px;padding:13px 22px;font:500 15px/1 var(--sans);text-decoration:none;border:1px solid var(--ink);transition:transform .25s, background .25s, color .25s}
  .btn.solid{background:var(--ink);color:var(--paper)} .btn.solid:hover{background:var(--sage-deep);border-color:var(--sage-deep)}
  .hero-cta.hero-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:540px}
  .hero-cta.hero-grid .btn{flex:none;width:100%;justify-content:center;height:52px;padding:0 18px;font-weight:500;font-size:15px;white-space:nowrap}
  .hero-grid .btn svg{color:currentColor;flex:none}
  @media (max-width:420px){.hero-cta.hero-grid{grid-template-columns:1fr}}
  .hero-contact{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
  .btn.quiet{border-color:var(--line);background:color-mix(in srgb,var(--paper) 70%,transparent);color:var(--ink);font-weight:500;padding:11px 18px}
  .btn.quiet svg{color:var(--brand)}
  .btn.quiet:hover{border-color:var(--brand);color:var(--brand)}
  .btn.solid.apply{background:var(--brand);border-color:var(--brand);color:#fff}
  .btn.solid.apply:hover{background:var(--ink);border-color:var(--ink);color:#fff}
  .btn.ghost:hover{background:var(--ink);color:var(--paper)}
  .btn:active{transform:scale(.97)}

  .hero{padding:64px 0 72px;display:grid;grid-template-columns:1fr 1fr;column-gap:64px;row-gap:0;align-items:start}
  .hero-head{grid-column:1/-1}
  .hero .portrait{aspect-ratio:5/4}
  .hero .portrait img{object-position:50% 30%}
  .eyebrow{font:600 12px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--sage)}
  h1{font-family:var(--serif);font-weight:400;font-size:clamp(44px,6.2vw,89px);line-height:1;letter-spacing:-.02em;margin:18px 0 44px}
  .h1-u{text-decoration:underline;text-decoration-color:var(--brand);text-decoration-thickness:.04em;text-underline-offset:.3em;text-decoration-skip-ink:none}
  .h1-cont{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(34px,3.9vw,56px);line-height:1.02;letter-spacing:-.015em;color:var(--sage-deep);margin:0 0 30px;text-wrap:balance}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  h1 em{display:block}
  h1 em{font-style:italic;color:var(--sage-deep)}
  .tagline{font:500 clamp(19px,1.6vw,23px)/1.45 var(--sans);color:var(--ink);margin:0 0 14px;letter-spacing:-.005em}
  .em-spec{color:var(--accent);font-weight:700;font-style:italic}
  .em-close{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:.28em;text-decoration-skip-ink:auto}
  .lede{font-size:20px;color:var(--ink-2);max-width:560px;margin:0 0 36px}
  .hero-cta{display:flex;gap:14px;flex-wrap:wrap}
  .portrait{aspect-ratio:4/5;border-radius:28px;overflow:hidden;position:relative;background:linear-gradient(160deg,var(--a1),var(--sage));box-shadow:0 40px 80px -40px rgba(13,26,43,.45)}
  .portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
  .portrait::after{content:"";position:absolute;inset:0 0 auto 0;height:90px;background:linear-gradient(180deg,rgba(13,26,43,.45),transparent)}
  .portrait .badge{z-index:1;position:absolute;top:18px;left:18px;right:18px;display:flex;justify-content:space-between;font:500 12px var(--sans);color:#fff;letter-spacing:.06em}

  .trust{display:flex;flex-wrap:wrap;gap:12px 36px;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:14px;color:var(--ink-2)}
  .trust b{color:var(--ink);font-weight:600}

  section{padding:110px 0}
  h2{font-family:var(--serif);font-weight:400;font-size:clamp(34px,4vw,56px);line-height:1.08;letter-spacing:-.015em;margin:14px 0 18px}
  #situations h2{max-width:none}
  .sub.full{max-width:none}
  .sub{color:var(--ink-2);max-width:620px;font-size:18px}

  /* scenario matcher */
  .matcher{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;margin-top:50px}
  .choices{display:flex;flex-direction:column;gap:6px}
  .choice{all:unset;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-radius:16px;font-size:17px;color:var(--ink-2);transition:background .3s,color .3s}
  .choice:hover{background:rgba(255,255,255,.55);color:var(--ink)}
  .choice[aria-pressed="true"]{background:var(--paper);color:var(--ink);box-shadow:0 1px 0 var(--line),0 18px 40px -26px rgba(13,26,43,.3)}
  .choice span{font-family:var(--serif);font-size:15px;color:var(--accent)}
  .choice:focus-visible{outline:2px solid var(--sage-deep)}
  .answer{background:var(--paper);border:1px solid var(--line);border-radius:28px;padding:44px;position:relative;overflow:hidden;min-height:420px}
  .answer::before{content:"";position:absolute;width:340px;height:340px;right:-120px;top:-120px;border-radius:50%;background:radial-gradient(circle,var(--a1),transparent 70%);animation:breathe 9s ease-in-out infinite}
  @keyframes breathe{50%{transform:scale(1.18);opacity:.7}}
  .answer h3{font-family:var(--serif);font-weight:400;font-size:32px;line-height:1.15;margin:12px 0 14px;position:relative}
  .answer p{color:var(--ink-2);position:relative}
  .answer ul{position:relative;padding:0;list-style:none;margin:26px 0 30px;display:grid;gap:10px}
  .answer li{display:flex;gap:12px;align-items:baseline}
  .answer li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--sage);transform:translateY(-2px)}
  .fade{animation:fade .6s cubic-bezier(.2,.7,.2,1)}
  @keyframes fade{from{opacity:0;transform:translateY(10px)}}

  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:50px}
  .step{padding:34px;border-radius:24px;background:rgba(255,255,255,.5);border:1px solid var(--line)}
  .step b{font-family:var(--serif);font-weight:400;font-size:46px;color:var(--accent);display:block;line-height:1}
  .step h4{font-family:var(--serif);font-weight:400;font-size:24px;margin:18px 0 8px}
  .step p{color:var(--ink-2);margin:0}

  .also{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
  .also span{padding:9px 16px;border-radius:999px;border:1px solid var(--line);font-size:14px;color:var(--ink-2);background:rgba(255,255,255,.4)}

  .quote{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.6vw,38px);line-height:1.25;max-width:900px;margin:0}
  .about .quote{text-wrap:balance}
  .about-body{text-wrap:pretty;margin:22px 0 0;color:var(--ink-2);font-size:17px;line-height:1.65;max-width:560px}
  .quote-by{margin-top:22px;color:var(--ink-2);font-size:15px}
  .about{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
  .about figure{margin:0;aspect-ratio:16/10;border-radius:28px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(13,26,43,.45)}
  .about figure img{width:100%;height:100%;object-fit:cover;object-position:45% 40%;display:block}
  @media (max-width:900px){.about{grid-template-columns:1fr}}
  .about{align-items:stretch}
  .about .quote{margin:0;align-self:start}
  .about figure{aspect-ratio:auto;height:auto;position:relative}
  .about figure img{position:absolute;inset:0}
  .about-more{margin-top:48px;padding-top:32px;border-top:1px solid var(--line)}
  .about-more .quote-by{margin-top:0;color:var(--ink);font-weight:500}
  .about-more .about-body{max-width:none;font-size:19px;margin:12px 0 0}
  @media (max-width:900px){.about figure{aspect-ratio:16/10}}


  .cta{background:var(--ink);color:var(--paper);border-radius:36px;padding:80px 60px;display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:center;position:relative;overflow:hidden}
  .cta::after{content:"";position:absolute;width:600px;height:600px;right:-200px;bottom:-300px;background:radial-gradient(circle,var(--glow),transparent 65%);animation:breathe 12s ease-in-out infinite}
  .cta h2{color:var(--paper)} .cta p{color:color-mix(in srgb,var(--paper) 72%,var(--ink))}
  .cta .btn{border-color:var(--paper);position:relative;z-index:1} .cta .btn.solid{background:var(--paper);color:var(--ink)}

  footer{padding:60px 0 50px;font-size:13px;color:var(--ink-2)}
  .legal{position:relative;padding-top:26px;display:grid;gap:10px}
  .legal::before{content:"";position:absolute;top:0;left:28px;right:28px;height:1px;background:var(--line)}
  .ehl{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--ink)}
  .ehl svg{width:22px;height:22px}

  .reveal{opacity:0;transform:translateY(24px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1;transform:none}

  @media (max-width:900px){
    .hero,.matcher,.cta{grid-template-columns:minmax(0,1fr)} .steps{grid-template-columns:1fr} .nav ul{display:none}
    .hero{padding-top:70px} .portrait{max-width:380px} .cta{padding:50px 30px} .answer{padding:30px}
  }
  @media (max-width:600px){
    .brand small,.brand-sub{display:none} .nav{height:64px}
    header .btn.solid{padding:10px 16px;font-size:14px;white-space:nowrap}
    .lede{font-size:18px;line-height:1.55} .hero{padding-top:44px;gap:40px}
    .hero-cta .btn{flex:1 1 auto;justify-content:center}
    section{padding:72px 0}
  }
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
    .reveal{opacity:1;transform:none}
  }
  /* hero: photo spans exactly the height of the left column (top = italic line, bottom = last button row) */
  @media (min-width:901px){
    .hero{align-items:stretch}
    .hero-copy{display:flex;flex-direction:column}
    .hero-copy > :last-child{margin-bottom:0}
    .hero-copy .hero-grid{margin-top:auto}
    .hero .portrait{aspect-ratio:auto;height:100%;min-height:400px}
  }
  .loan-group{font:600 12px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);margin:48px 0 16px}
  .loan-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  .loan{position:relative;display:flex;flex-direction:column;gap:6px;padding:20px 22px 22px;border-radius:18px;background:color-mix(in srgb,var(--paper) 75%,transparent);border:1px solid var(--line);text-decoration:none;transition:border-color .25s,transform .25s,box-shadow .25s}
  .loan:hover,.loan:focus-visible{border-color:var(--brand);transform:translateY(-2px);box-shadow:0 18px 36px -24px rgba(13,26,43,.35)}
  .loan-n{font-family:var(--serif);font-size:23px;line-height:1.1;color:var(--ink);padding-right:22px}
  .loan-d{font-size:14px;line-height:1.5;color:var(--ink-2)}
  .loan-go{position:absolute;top:20px;right:20px;color:var(--brand);transition:transform .25s}
  .loan:hover .loan-go{transform:translateX(3px)}
  @media (max-width:1100px){.loan-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
  @media (max-width:900px){.loan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media (max-width:560px){.loan-grid{grid-template-columns:1fr}}
  /* deep navy header (Chris, 2026-10-10) */
  header{background:rgba(13,26,43,.96);border-bottom:1px solid rgba(255,255,255,.06)}
  header.scrolled{border-color:rgba(255,255,255,.08)}
  header .brand{color:#fff}
  header .brand-sub{color:rgba(255,255,255,.62)}
  header .li-head{color:#fff;opacity:.55}
  header .li-head:hover,header .li-head:focus-visible{opacity:1;color:#fff}
  header .nav ul a{color:rgba(255,255,255,.82)}
  header .nav ul a:hover{color:#fff}
  header .hcontact a{color:rgba(255,255,255,.7)}
  header .hcontact a:first-child{color:#fff}
  header .hcontact a:hover{color:#fff}
  header .btn.solid.apply{background:#fff;border-color:#fff;color:var(--ink)}
  header .btn.solid.apply:hover{background:var(--brand);border-color:var(--brand);color:#fff}
  header :focus-visible{outline-color:#fff}
  /* header text all bright white (Chris, 2026-10-10) */
  header .brand,header .brand-sub,header .nav ul a,header .hcontact a,header .hcontact a:first-child{color:#fff}
  header .li-head{color:#fff;opacity:1}
  header .nav ul a:hover,header .hcontact a:hover,header .li-head:hover{color:#fff;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
  /* no white flash on top overscroll: stop the rubber-band bounce; navy theme for mobile browser chrome */
  html,body{overscroll-behavior-y:none}
  .steps.steps-5{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
  .steps-5 .step{padding:26px 24px}
  .steps-5 .step b{font-size:40px}
  .steps-5 .step h4{font-size:21px;line-height:1.15;margin:16px 0 8px;text-wrap:balance}
  .steps-5 .step p{text-wrap:pretty}
  .steps-5 .step p{font-size:15px;line-height:1.55}
  @media (max-width:1100px){.steps.steps-5{grid-template-columns:1fr}.steps-5 .step{display:grid;grid-template-columns:64px 1fr;column-gap:16px}.steps-5 .step b{grid-row:span 2}.steps-5 .step h4{margin-top:4px}}
  .partners-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
  @media (min-width:901px){.partners-grid > div:first-child{position:sticky;top:130px}}
  .partner-cta{display:flex;align-items:center;gap:22px;margin-top:32px;flex-wrap:wrap}
  .partner-call{color:var(--ink-2);text-decoration:none;font-size:15px}
  .partner-call:hover{color:var(--brand)}
  .plist h3{font:600 12px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--brand);margin:6px 0 4px}
  .plist h3 + ul{margin-bottom:36px}
  .plist ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
  .plist li{font-family:var(--serif);font-size:26px;line-height:1.2;color:var(--ink);padding:14px 0;border-bottom:1px solid var(--line)}
  @media (max-width:900px){.partners-grid{grid-template-columns:1fr;gap:40px}.plist li{font-size:22px}}
  .li-inline{display:inline-flex;vertical-align:-2px;margin-left:10px;color:inherit;opacity:.85;transition:opacity .2s,color .2s}
  .li-inline:hover,.li-inline:focus-visible{opacity:1;color:var(--brand)}
  .li-inline svg{width:15px;height:15px}
  .about-title-row{display:flex;align-items:center;gap:20px;margin:14px 0 44px}
  .about-title-row h2{margin:0}
  .li-big{display:inline-flex;color:var(--brand);transition:color .2s,transform .2s}
  .li-big svg{width:40px;height:40px}
  .li-big:hover,.li-big:focus-visible{color:var(--ink);transform:translateY(-1px)}
  .cta.cta-final{grid-template-columns:1.35fr .65fr;gap:60px;padding:72px 68px}
  .cta-eyebrow{color:#9db4ec}
  .cta-final h2{margin:14px 0 16px;text-wrap:balance}
  .cta-final p{font-size:19px;margin:0 0 32px}
  .cta-btns{display:grid;grid-template-columns:repeat(2,minmax(0,220px));gap:12px;position:relative;z-index:1}
  .cta-btns .btn{justify-content:center;height:52px;font-weight:500}
  .cta .btn.cta-apply{background:#fff;color:var(--ink);border-color:#fff}
  .cta .btn.cta-apply:hover{background:var(--brand);border-color:var(--brand);color:#fff}
  .cta .btn.cta-consult{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
  .cta .btn.cta-consult:hover{border-color:#fff;background:rgba(255,255,255,.08)}
  .cta-contact{display:flex;gap:12px;align-items:center;margin-top:20px;font-size:15px;color:rgba(255,255,255,.6);position:relative;z-index:1}
  .cta-contact a{color:#fff;text-decoration:none} .cta-contact a:hover{text-decoration:underline;text-underline-offset:4px}
  .cta-person{margin:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;position:relative;z-index:1}
  .cta-person img{width:200px;height:200px;border-radius:50%;object-fit:cover;object-position:50% 30%;box-shadow:0 0 0 6px rgba(255,255,255,.08),0 30px 60px -30px rgba(0,0,0,.6)}
  .cta-person figcaption{display:grid;gap:4px;color:rgba(255,255,255,.7);font-size:14px}
  .cta-person b{color:#fff;font-family:var(--serif);font-weight:400;font-size:24px}
  @media (max-width:900px){.cta.cta-final{grid-template-columns:minmax(0,1fr);padding:48px 28px}.cta-person{order:-1}.cta-btns{grid-template-columns:repeat(2,minmax(0,1fr))}.cta-contact{flex-wrap:wrap;row-gap:4px}}
  /* too narrow for phone and email on one line: stack them, without the separator dot */
  @media (max-width:440px){.cta-contact{flex-direction:column;align-items:flex-start;gap:6px}.cta-contact>span[aria-hidden]{display:none}}

  /* ===== visual rhythm pass (WI#570598): hero wash, alternating bands, dark Solutions, gradient details, navy footer ===== */
  body{overflow-x:clip}
  main{position:relative}

  section.band{position:relative;isolation:isolate}
  section.band::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);z-index:-1}
  section.band-tint::before{background:linear-gradient(180deg,rgba(214,226,245,.55),rgba(228,225,244,.45));border-top:1px solid rgba(60,100,200,.08);border-bottom:1px solid rgba(60,100,200,.08)}
  section.band-dark::before{background:radial-gradient(900px 520px at 88% 0%,rgba(60,100,200,.42),transparent 70%),radial-gradient(700px 480px at 0% 100%,rgba(120,110,220,.22),transparent 70%),var(--ink)}
  section.band-dark{color:#fff}
  section.band-dark .eyebrow{color:#9db4ec}
  section.band-dark h2{color:#fff}
  section.band-dark .sub{color:rgba(255,255,255,.74)}
  section.band-dark .choice{color:rgba(255,255,255,.72)}
  section.band-dark .choice:hover{background:rgba(255,255,255,.06);color:#fff}
  section.band-dark .choice[aria-pressed="true"]{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
  section.band-dark .choice span{color:#9db4ec}
  section.band-dark .choice:focus-visible{outline-color:#fff}
  section.band-dark .answer,section.band-dark .answer h3,section.band-dark .answer li{color:var(--ink)}
  section.band-dark .answer p{color:var(--ink-2)}
  section.band-dark .answer .eyebrow{color:var(--brand)}
  section.band-dark .answer{border-color:rgba(255,255,255,.1);box-shadow:0 40px 80px -40px rgba(0,0,0,.6)}

  /* gradient underlines */
  .h1-u{text-decoration:none;background:linear-gradient(90deg,var(--brand),#8fb0f2) no-repeat 0 100%/100% .04em;padding-bottom:.08em;display:inline-block;line-height:.88}
  .em-close{text-decoration:none;background:linear-gradient(90deg,var(--brand),#8fb0f2) no-repeat 0 100%/100% 2px;padding-bottom:3px}

  section.band-tint .loan,section.band-tint .step{background:var(--paper)}
  /* gradient edge on card hover */
  .loan:hover,.loan:focus-visible{border-color:transparent;background:linear-gradient(var(--paper),var(--paper)) padding-box,linear-gradient(135deg,var(--brand),#a9b8f0 55%,#c9d7f4) border-box}

  /* navy footer bookends the navy header */
  footer{background:var(--ink);color:rgba(255,255,255,.66);margin-top:40px;padding-top:56px}
  footer .legal::before{background:rgba(255,255,255,.12)}
  footer .ehl{color:#fff}
  footer a{color:#fff;text-decoration:none}
  footer a:hover{text-decoration:underline;text-underline-offset:4px}
  footer .legal{padding-top:0}
  footer .legal::before{display:none}

  /* LinkedIn in closing box */
  .li-cta{color:#fff;opacity:.8;margin-left:12px;vertical-align:1px}
  .li-cta:hover{color:#fff;opacity:1}
  .li-cta svg{width:20px;height:20px}
  /* silk-like luster on the navy header */
  header{background:linear-gradient(105deg,#0b1626 0%,#132440 38%,#1b2f4f 70%,#253c62 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 -1px 0 rgba(0,0,0,.25)}
  header .nav{position:relative;z-index:1}
  header::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 55%)}
  /* 1. slow silk sheen drifting across the navbar */
  /* moved with transform (GPU) rather than background-position, which repainted the bar every frame; overflow-x:clip keeps the dropdowns visible */
  header{overflow-x:clip}
  header::before{content:"";position:absolute;top:0;bottom:0;left:-160%;width:260%;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(150,180,240,.10) 48%,rgba(255,255,255,.06) 52%,transparent 65%);will-change:transform;animation:silk 22s ease-in-out infinite alternate}
  @keyframes silk{to{transform:translateX(61.538%)}}
  /* 2. Solutions band: glows slowly drift and swell */
  section.band-dark::before{background:var(--ink)}
  section.band-dark::after{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);z-index:-1;pointer-events:none;background:radial-gradient(900px 520px at 88% 0%,rgba(60,100,200,.42),transparent 70%),radial-gradient(700px 480px at 0% 100%,rgba(120,110,220,.22),transparent 70%);animation:glowdrift 26s ease-in-out infinite alternate}
  section.band-dark{overflow:visible}
  section.band-dark .wander{position:absolute;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);z-index:-1;pointer-events:none;overflow:hidden}
  section.band-dark .wander::before{content:"";position:absolute;width:620px;height:620px;border-radius:50%;left:55%;top:10%;background:radial-gradient(circle,rgba(90,130,230,.20),transparent 62%);filter:blur(10px);animation:wander 48s ease-in-out infinite}
  @keyframes wander{0%{transform:translate(0,0) scale(1)}25%{transform:translate(-22vw,18vh) scale(1.12)}50%{transform:translate(-8vw,42vh) scale(.95)}75%{transform:translate(12vw,22vh) scale(1.08)}100%{transform:translate(0,0) scale(1)}}
  @media (prefers-reduced-motion:reduce){section.band-dark .wander::before{animation:none}}
  @keyframes glowdrift{0%{transform:translate3d(0,0,0) scale(1);opacity:.85}50%{opacity:1}100%{transform:translate3d(-3%,4%,0) scale(1.08);opacity:.9}}
  /* 3. hero photo: very slow push-in */
  .hero .portrait img{transform-origin:50% 30%;animation:pushin 20s ease-in-out infinite alternate;will-change:transform}
  @keyframes pushin{to{transform:scale(1.035)}}

  /* ===== more life (WI#570598) ===== */
  /* 1. hero entrance, once on load */
  @keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  @keyframes drawline{from{background-size:0% .04em}to{background-size:100% .04em}}
  .hero-head .eyebrow{animation:rise .8s cubic-bezier(.2,.7,.2,1) .05s backwards}
  .hero h1{animation:rise 1s cubic-bezier(.2,.7,.2,1) .15s backwards}
  .hero .h1-u{animation:drawline 1.1s cubic-bezier(.65,0,.2,1) .7s backwards}
  .hero .h1-cont{animation:rise .9s cubic-bezier(.2,.7,.2,1) .45s backwards}
  .hero .tagline{animation:rise .9s cubic-bezier(.2,.7,.2,1) .6s backwards}
  .hero .lede{animation:rise .9s cubic-bezier(.2,.7,.2,1) .72s backwards}
  .hero .hero-grid{animation:rise .9s cubic-bezier(.2,.7,.2,1) .86s backwards}
  .hero .portrait{animation:rise 1.1s cubic-bezier(.2,.7,.2,1) .3s backwards}
  /* 3. staggered loan card reveal (animation with backwards fill so hover transforms still work afterwards) */
  .stag:not(.in){opacity:0}
  .stag.in{animation:rise .75s cubic-bezier(.2,.7,.2,1) var(--d,0ms) backwards}
  /* 4. connecting line in the solution picker */
  .matcher{position:relative}
  .link{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}
  .link path{fill:none;stroke:url(#none);stroke:#8fb0f2;stroke-width:1.5;stroke-linecap:round;opacity:.85}
  .link circle{fill:#8fb0f2}
  .link.draw path{animation:dash .6s cubic-bezier(.65,0,.2,1) forwards}
  .link.draw #linkB{animation:pop .25s ease-out .5s backwards}
  @keyframes dash{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
  @keyframes pop{from{transform:scale(0);opacity:0}}
  .link #linkB{transform-box:fill-box;transform-origin:center}
  @media (max-width:900px){.link{display:none}}
  @media (prefers-reduced-motion:reduce){.stag:not(.in){opacity:1}}

  /* ===== unified navy family + hover polish (WI#570598) ===== */
  /* same base as the navbar (dark left -> light right) and the same sapphire light source on the right */
  section.band-dark::before{background:linear-gradient(105deg,#0b1626 0%,#132440 40%,#1b2f4f 72%,#22385c 100%)}
  section.band-dark::after{background:radial-gradient(900px 560px at 92% 4%,rgba(60,100,200,.40),transparent 70%),radial-gradient(760px 520px at 100% 100%,rgba(60,100,200,.20),transparent 70%)}
  .cta.cta-final{background:linear-gradient(105deg,#0b1626 0%,#132440 40%,#1b2f4f 72%,#253c62 100%)}

  /* header links: underline draws in */
  header .nav ul a{background:linear-gradient(#fff,#fff) no-repeat 0 100%/0 1px;padding-bottom:4px;transition:background-size .35s cubic-bezier(.2,.7,.2,1)}
  header .nav ul a:hover,header .nav ul a:focus-visible{text-decoration:none;background-size:100% 1px}
  /* icons nudge */
  .btn svg{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  a[href^="tel"].btn:hover svg{transform:rotate(-14deg)}
  a[href^="mailto"].btn:hover svg{transform:translateY(-2px)}
  /* light sweep across Apply Now */
  .btn.apply,.btn.cta-apply{position:relative;overflow:hidden;isolation:isolate}
  .btn.apply::after,.btn.cta-apply::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.38) 50%,transparent 70%);transform:translateX(-120%);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
  .btn.apply:hover::after,.btn.cta-apply:hover::after{transform:translateX(120%)}
  /* solution numbers slide + brighten */
  .choice span{transition:transform .35s cubic-bezier(.2,.7,.2,1),color .35s}
  .choice:hover span,.choice[aria-pressed="true"] span{transform:translateX(-4px)}
  section.band-dark .choice:hover span,section.band-dark .choice[aria-pressed="true"] span{color:#fff}
  /* steps lift */
  .steps-5 .step.reveal.in{transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s,border-color .4s}
  .steps-5 .step:hover{transform:translateY(-4px);border-color:rgba(60,100,200,.28);box-shadow:0 22px 44px -28px rgba(13,26,43,.35)}
  .steps-5 .step b{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
  .steps-5 .step:hover b{transform:translateX(3px)}
  /* partner rows slide with a sapphire dash */
  .plist li{position:relative;transition:padding-left .4s cubic-bezier(.2,.7,.2,1),color .3s}
  .plist li::before{content:"";position:absolute;left:0;top:50%;width:0;height:1.5px;background:var(--brand);transition:width .4s cubic-bezier(.2,.7,.2,1)}
  .plist li:hover{padding-left:30px}
  .plist li:hover::before{width:18px}
  /* photos: slow subtle zoom */
  .about figure img{transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
  .about figure:hover img{transform:scale(1.035)}
  .cta-person img{transition:transform .9s cubic-bezier(.2,.7,.2,1),box-shadow .9s}
  .cta-person:hover img{transform:scale(1.04);box-shadow:0 0 0 6px rgba(143,176,242,.25),0 30px 60px -30px rgba(0,0,0,.6)}
  @media (prefers-reduced-motion:reduce){.btn.apply::after,.btn.cta-apply::after{display:none}}
  /* light that follows the cursor, contained to the 10-item solutions menu */
  #choices{position:relative}
  #choices::before{content:"";position:absolute;inset:-240px;pointer-events:none;z-index:0;opacity:0;transition:opacity .6s;background:radial-gradient(440px circle at 50% calc(240px + var(--cy,50%)),rgba(110,150,240,.20),transparent 68%)}
  #choices:hover::before{opacity:1}
  #choices .choice{position:relative;z-index:1}
  @media (prefers-reduced-motion:reduce),(hover:none){#choices::before{display:none}}

  /* ===== shared header dropdowns + footer (generated by build_pages.py) ===== */
  header .menu{display:flex;gap:30px;list-style:none;margin:0;padding:0;font-size:15px}
  header .has-dd{position:relative}
  header .dd-top{display:inline-flex;align-items:center;gap:6px}
  header .caret{transition:transform .25s;opacity:.8}
  header .has-dd:hover .caret,header .has-dd:focus-within .caret,header .has-dd.open .caret{transform:rotate(180deg)}
  header .dd{position:absolute;top:calc(100% + 14px);left:-22px;min-width:330px;padding:16px;border-radius:18px;
    background:linear-gradient(160deg,rgba(27,47,79,.98),rgba(11,22,38,.98));border:1px solid rgba(255,255,255,.1);
    box-shadow:0 30px 60px -20px rgba(0,0,0,.55);opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .22s,transform .22s,visibility 0s .22s;z-index:30}
  header .dd::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
  header .has-dd:hover .dd,header .has-dd:focus-within .dd,header .has-dd.open .dd{opacity:1;visibility:visible;transform:none;transition:opacity .22s,transform .22s}
  header .dd ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
  header .dd a{display:block;padding:9px 12px;border-radius:10px;color:rgba(255,255,255,.86);font-size:14.5px;line-height:1.35;background:none!important;white-space:nowrap}
  header .dd a:hover,header .dd a:focus-visible{background:rgba(255,255,255,.08)!important;color:#fff;text-decoration:none}
  header .dd-wide{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;min-width:620px}
  header .dd-h{margin:4px 12px 8px;font:600 11px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#9db4ec}
  header .menu > li > a[aria-current="page"]{background-size:100% 1px}
  /* footer */
  footer .legal{display:grid;gap:12px}
  footer .legal b{color:#fff;font-weight:600}
  footer .legal-links{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:6px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12)}
  footer .legal-links a{display:inline-flex;align-items:center;gap:7px}
  footer .copy{font-size:12.5px;opacity:.75}
  @media (max-width:1100px){header .dd-wide{min-width:520px}}
  /* document pages (FAQ, legal) */
  .doc{max-width:916px;padding:70px 28px 110px}  /* .wrap's side padding kept (content stays 860px wide); without it document pages ran edge to edge on phones */
  .doc h1{font-family:var(--serif);font-weight:400;font-size:clamp(42px,5vw,66px);line-height:1.04;margin:14px 0 18px;letter-spacing:-.015em}
  .doc .updated{color:var(--ink-2);font-size:14px;margin:0 0 40px}
  .doc h2{font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.15;margin:46px 0 12px}
  .doc h3{font-size:17px;font-weight:600;margin:26px 0 6px}
  .doc p,.doc li{color:var(--ink-2);font-size:16.5px;line-height:1.7}
  .doc ul{padding-left:20px}
  .doc a{color:var(--brand)}
  .doc table{width:100%;border-collapse:collapse;margin:14px 0;font-size:15px}
  .doc th,.doc td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);color:var(--ink-2)}
  .doc th{color:var(--ink);font-weight:600}
  .doc .callout{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:18px 22px;margin:22px 0}
  .doc .todo{border-color:#e9c46a;background:#fffaf0}
  .doc section{padding:0}
  .faq-group h2{margin-top:56px}
  .faq-group details{border-bottom:1px solid var(--line)}
  .faq-group summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;padding:20px 2px;font-size:18px;font-weight:500;color:var(--ink)}
  .faq-group summary::-webkit-details-marker{display:none}
  .faq-group summary::after{content:"+";font-family:var(--serif);font-size:28px;line-height:.8;color:var(--brand);transition:transform .3s}
  .faq-group details[open] summary::after{transform:rotate(45deg)}
  .faq-group details p{margin:0 2px 22px}
  .faq-jump{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 10px}
  .faq-jump a{padding:9px 16px;border-radius:999px;border:1px solid var(--line);text-decoration:none;font-size:14px;color:var(--ink);background:var(--paper)}
  .faq-jump a:hover{border-color:var(--brand);color:var(--brand)}
  .sitemap-list{columns:2;column-gap:40px}
  .sitemap-list li{break-inside:avoid}

/* ===== landing page template (lp-*.html, generated by build_pages.py from landing_pages.json) ===== */
.crumbs{font-size:13px;color:var(--ink-2);padding-top:34px}
.crumbs a{text-decoration:none;color:var(--ink-2)} .crumbs a:hover{color:var(--brand);text-decoration:underline}
.lp-hero{display:grid;grid-template-columns:1.25fr .75fr;gap:64px;align-items:start;padding:40px 0 64px}
.lp-hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(42px,5.2vw,76px);line-height:1.02;letter-spacing:-.015em;margin:16px 0 22px;text-wrap:balance}
.lp-hero h1 em{display:block;font-style:italic;color:var(--brand)}
.lp-hero .lede{max-width:none;margin:0 0 22px}
.lp-first{display:flex;gap:16px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:20px 22px;margin:0 0 28px}
.lp-first b{font-family:var(--serif);font-weight:400;font-size:30px;line-height:1;color:var(--brand)}
.lp-first p{margin:0;color:var(--ink-2)} .lp-first strong{color:var(--ink)}
.lp-hero .hero-cta.hero-grid{max-width:560px}
.lp-start{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:24px;padding:30px;box-shadow:0 30px 60px -36px rgba(13,26,43,.35);margin-top:34px}
.lp-start h2{font-family:var(--serif);font-weight:400;font-size:26px;margin:0 0 14px}
.lp-start ul{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:12px}
.lp-start li{display:flex;gap:12px;color:var(--ink-2);font-size:15.5px;line-height:1.5}
.lp-start li::before{content:"";flex:none;width:7px;height:7px;margin-top:8px;border-radius:50%;background:var(--brand)}
.lp-start .who{display:flex;gap:12px;align-items:center;padding-top:18px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.lp-start .who img{width:84px;height:84px;border-radius:50%;object-fit:cover;object-position:50% 25%;box-shadow:0 0 0 4px rgba(60,100,200,.10)}
.lp-start .who{gap:16px}
.lp-start .who b{font-size:16px}
.lp-start .who b{display:block;color:var(--ink);font-weight:600}
.lp-issues{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:44px}
.lp-issue{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:26px}
.lp-issue h3{font-family:var(--serif);font-weight:400;font-size:25px;line-height:1.1;margin:0 0 8px;color:var(--ink)}
.lp-issue p{margin:0;color:var(--ink-2);font-size:15px}
.lp-uses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px;margin-top:40px;border-top:1px solid rgba(255,255,255,.14)}
.lp-use{padding:26px 4px;border-bottom:1px solid rgba(255,255,255,.14);display:flex;gap:18px}
.lp-use b{font-family:var(--serif);font-weight:400;font-size:24px;min-width:36px;color:#9db4ec}
.lp-use h3{margin:0 0 4px;font-size:18px;font-weight:600;color:#fff}
.lp-use p{margin:0;color:rgba(255,255,255,.72);font-size:15px}
.lp-regions{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}
.lp-region{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:30px}
.lp-region h3{font-family:var(--serif);font-weight:400;font-size:30px;margin:0 0 10px}
.lp-region p{color:var(--ink-2);margin:0 0 16px;font-size:15px}
.chips{display:flex;flex-wrap:wrap;gap:8px} .chips span{padding:7px 13px;border-radius:999px;border:1px solid var(--line);font-size:13px;color:var(--ink-2)}
.lp-faq{margin-top:34px;border-top:1px solid var(--line);max-width:920px}
.lp-faq details{border-bottom:1px solid var(--line)}
.lp-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;padding:20px 2px;font-size:18px;font-weight:500;color:var(--ink)}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary::after{content:"+";font-family:var(--serif);font-size:28px;line-height:.8;color:var(--brand);transition:transform .3s}
.lp-faq details[open] summary::after{transform:rotate(45deg)}
.lp-faq details p{margin:0 2px 22px;color:var(--ink-2);max-width:780px}
.lp-related{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.lp-related a{display:inline-flex;align-items:center;gap:9px;padding:5px 16px 5px 5px;border-radius:999px;border:1px solid var(--line);text-decoration:none;font-size:14px;color:var(--ink);background:var(--paper);transition:border-color .25s,color .25s}
.lp-related img{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:none}
.lp-related a:hover{border-color:var(--brand);color:var(--brand)}
@media (max-width:900px){.lp-hero,.lp-regions{grid-template-columns:1fr;gap:28px}.lp-issues{grid-template-columns:1fr}.lp-uses{grid-template-columns:1fr}.lp-start{margin-top:0}}

/* picker answer card: landing-page link + review button */
.answer-cta{display:flex;flex-wrap:wrap;gap:12px}

/* ===== landing template refinements (review pass) ===== */
/* static info cards: no lift, so they don't read as links */
.lp-issue,.lp-issue:hover{transform:none;box-shadow:none;transition:none}
/* traditional-first note: a quiet accent mark instead of an orphan "01" */
.lp-first-ic{flex:none;width:4px;align-self:stretch;border-radius:4px;background:linear-gradient(180deg,var(--brand),#8fb0f2)}
/* uses: check icon instead of sequence numbers */
.lp-use-ic{flex:none;color:#9db4ec;margin-top:2px}
/* hero visual: a soft breathing sapphire halo behind the checklist card */
.lp-hero > div:first-child{position:relative;z-index:1}
/* the wider glow sits on its own layer and only its opacity breathes (an animated box-shadow repainted every frame) */
.lp-start{box-shadow:0 30px 60px -36px rgba(13,26,43,.35),0 0 90px 10px rgba(60,100,200,.12)}
.lp-start::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;box-shadow:0 0 140px 34px rgba(110,150,240,.20);opacity:0;will-change:opacity;animation:halo 14s ease-in-out infinite alternate}
@keyframes halo{to{opacity:1}}
/* mid-page prompt */
.lp-mid-in{margin-top:28px}
.lp-mid-in{display:flex;align-items:center;justify-content:space-between;gap:28px;background:var(--paper);border:1px solid var(--line);
  border-left:4px solid var(--brand);border-radius:20px;padding:24px 30px;box-shadow:0 24px 50px -36px rgba(13,26,43,.35)}
.lp-mid-in h2{font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.1;margin:0 0 4px}
.lp-mid-in p{margin:0;color:var(--ink-2)}
.lp-mid-in .btn{flex:none;white-space:nowrap}
/* scenarios */
.lp-cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:36px}
.lp-case{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:26px}
.lp-case-k{margin:0 0 8px;font:600 11px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--brand)}
.lp-case h3{font-family:var(--serif);font-weight:400;font-size:24px;margin:0 0 8px}
.lp-case-todo{border-style:dashed;border-color:#d9b44a;background:#fffaf0;max-width:920px}
.lp-case-todo .lp-case-k{color:#9a6b00}
.lp-case-todo p{margin:0;color:var(--ink-2)}
/* regions: compact strip instead of two big cards */
.lp-regions{grid-template-columns:1fr 1fr;gap:0;margin-top:28px;border-top:1px solid var(--line)}
.lp-region{background:none;border:0;border-radius:0;padding:22px 30px 22px 0;border-bottom:1px solid var(--line)}
.lp-region + .lp-region{padding-left:30px;border-left:1px solid var(--line)}
.lp-region h3{font-size:24px;margin:0 0 6px}
.lp-region p{margin:0 0 12px}
@media (max-width:900px){.lp-mid-in{flex-direction:column;align-items:flex-start}.lp-cases{grid-template-columns:1fr}
  .lp-region + .lp-region{padding-left:0;border-left:0}}
@media (prefers-reduced-motion:reduce){.lp-start::after{animation:none}}

/* ===== tile photos (loan option cards + solution answer card) ===== */
.loan{padding:0;overflow:hidden}
.loan-img{order:-1;display:block;width:100%;height:auto;flex:none;aspect-ratio:16/9;object-fit:cover;filter:saturate(.82) contrast(1.02);transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .6s}
.loan::after{content:"";position:absolute;left:0;right:0;top:0;aspect-ratio:16/9;pointer-events:none;
  background:linear-gradient(180deg,rgba(13,26,43,.08) 0%,rgba(30,58,138,.18) 60%,rgba(255,255,255,.0) 100%),linear-gradient(105deg,rgba(60,100,200,.16),transparent 60%);mix-blend-mode:multiply}
.loan .loan-go{z-index:2;top:14px;right:14px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--brand);box-shadow:0 6px 16px -8px rgba(13,26,43,.5)}
.loan:hover .loan-go{transform:translateX(0) scale(1.08)}
.loan:hover .loan-img,.loan:focus-visible .loan-img{transform:scale(1.05);filter:saturate(1) contrast(1.02)}
.loan .loan-n{padding:18px 22px 0}
.loan .loan-d{padding:0 22px 22px}
.answer-img{display:block;height:auto;width:calc(100% + 88px);max-width:none;margin:-44px -44px 26px;aspect-ratio:21/9;object-fit:cover;filter:saturate(.85)}
@media (max-width:900px){.answer-img{width:calc(100% + 60px);margin:-30px -30px 22px}}
/* landing table (e.g. waiting periods) */
.lp-table-wrap{margin-top:28px;background:var(--paper);border:1px solid var(--line);border-radius:20px;overflow-x:auto}
.lp-table{width:100%;border-collapse:collapse;font-size:15px}
.lp-table th,.lp-table td{text-align:left;vertical-align:top;padding:14px 18px;border-bottom:1px solid var(--line);color:var(--ink-2);line-height:1.5}
.lp-table th{color:var(--ink);font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.lp-table tr:last-child td{border-bottom:0}
.lp-table td:first-child{color:var(--ink);font-weight:600}
/* small-screen menu (the desktop menu hides below 900px) */
.mnav-btn{display:none;align-items:center;gap:8px;margin-left:10px;padding:9px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:transparent;color:#fff;font:500 14px var(--sans);cursor:pointer}
.mnav-btn:hover{background:rgba(255,255,255,.08)}
.mnav-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.mnav-ic{display:grid;gap:3px;width:16px}
.mnav-ic i{display:block;height:1.6px;border-radius:2px;background:currentColor;transition:transform .25s,opacity .25s}
.mnav-btn[aria-expanded="true"] .mnav-ic i:nth-child(1){transform:translateY(4.6px) rotate(45deg)}
.mnav-btn[aria-expanded="true"] .mnav-ic i:nth-child(2){opacity:0}
.mnav-btn[aria-expanded="true"] .mnav-ic i:nth-child(3){transform:translateY(-4.6px) rotate(-45deg)}
.mnav{position:absolute;left:0;right:0;top:100%;z-index:20;background:linear-gradient(180deg,#132440,#0d1a2b);border-top:1px solid rgba(255,255,255,.08);box-shadow:0 30px 60px -20px rgba(0,0,0,.45);max-height:calc(100vh - 64px);overflow-y:auto;overscroll-behavior:contain}
.mnav[hidden]{display:none}
.mnav .wrap{padding-top:10px;padding-bottom:26px}
.mnav details{border-bottom:1px solid rgba(255,255,255,.1)}
.mnav summary{list-style:none;cursor:pointer;padding:16px 0;color:#fff;font:500 17px var(--sans);display:flex;justify-content:space-between;align-items:center}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary::after{content:"";width:8px;height:8px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform .25s}
.mnav details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.mnav .dd-h{margin:4px 0 6px;color:#9db4ec;font:600 11px var(--sans);letter-spacing:.16em;text-transform:uppercase}
.mnav ul{list-style:none;margin:0 0 14px;padding:0}
.mnav details li a{display:block;padding:8px 0;color:rgba(255,255,255,.82);text-decoration:none;font-size:15.5px}
.mnav .mnav-top li a{display:block;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.1);color:#fff;text-decoration:none;font:500 17px var(--sans)}
.mnav a:hover,.mnav a:focus-visible{color:#fff;text-decoration:underline}
.mnav-contact{display:grid;gap:10px;margin-top:20px}
.mnav-contact a{color:#fff;text-decoration:none;font-size:16px}
@media (max-width:900px){.mnav-btn{display:inline-flex}}
@media (max-width:420px){.mnav-label{display:none}.mnav-btn{padding:9px 11px}}
@media (prefers-reduced-motion:reduce){.mnav-ic i,.mnav summary::after{transition:none}}
@media (max-width:900px){header nav[aria-label="Primary"]{display:none}}
/* landing hero: title block across the top, then the hero photo and text (left) beside the checklist card (right) */
.lp-hero{display:block;padding:40px 0 64px}
.lp-head{max-width:900px;margin-bottom:26px}
.lp-hero h1{margin:14px 0 14px}
.lp-tagline{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.5vw,36px);line-height:1.15;letter-spacing:-.01em;color:var(--ink);margin:0;text-wrap:balance}
.lp-tagline em{font-style:italic;color:var(--brand)}
.lp-body{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:start}
.lp-photo{margin:0 0 30px;aspect-ratio:16/9;border-radius:28px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(13,26,43,.45);background:linear-gradient(160deg,var(--a1),var(--sage))}
.lp-photo img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.9);transform-origin:50% 40%;animation:pushin 20s ease-in-out infinite alternate;will-change:transform}
.lp-body .lp-start{margin-top:0}
@media (max-width:900px){.lp-body{grid-template-columns:1fr;gap:28px}.lp-head{margin-bottom:24px}.lp-photo{margin-bottom:24px}}
@media (prefers-reduced-motion:reduce){.lp-photo img{animation:none}}
/* contact actions under the checklist card: Apply Now + Consultation as equal buttons, phone + email as a compact link row */
.lp-side .hero-cta.hero-grid{margin-top:18px;max-width:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
.lp-side .hero-cta.hero-grid .btn:nth-child(n+3){border:0;background:none;box-shadow:none;height:auto;padding:4px 0;gap:6px;justify-content:center;font-size:14px;color:var(--ink-2)}
.lp-side .hero-cta.hero-grid .btn:nth-child(n+3):hover{color:var(--brand);background:none;transform:none}
@media (max-width:420px){.lp-side .hero-cta.hero-grid{grid-template-columns:1fr}}
/* phone numbers never break across lines */
.nw{white-space:nowrap}
/* landing pages: one vertical rhythm between sections, whatever their length.
   Each colored band keeps 96px inside, top and bottom; two white sections in a row share a single 96px gap
   (the first drops its bottom padding); the trust strip and the footer get the same 96px. 64px on small screens. */
.lp{--gap:96px}
@media (max-width:900px){.lp{--gap:64px}}
.lp .wrap > section{padding:var(--gap) 0}
.lp .wrap > section.lp-hero{padding:40px 0 64px}
.lp .wrap > section:not(.band):has(+ section:not(.band)){padding-bottom:0}
.lp .trust:has(+ section.band){margin-bottom:var(--gap)}
.lp .wrap > #contact{padding-bottom:calc(var(--gap) - 40px)}
/* What to expect: a journey timeline, drawn once when it first scrolls into view as one line that splits into each
   step's ring and rejoins (the homepage script plays it in order: ring 01, segment, ring 02, segment ... ring 05, at one
   speed). A node lights when the line reaches it (.hit); step 05 fills when its ring closes (.ringed). Each segment runs
   from one ring's far point to the next ring's near point, over a pale track, so the line never crosses a node.
   Horizontal on wide screens, vertical below 1100px. */
.journey{--node:56px;--g:28px;position:relative;list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--g)}
.jstep{position:relative;z-index:1;padding:0}
/* the steps fade in without rising, so every segment meets the next ring exactly while the line draws */
.journey .jstep.reveal{transform:none}
/* the ring's near and far points sit 3px outside the node (radius 31 of a 64 box, 5px outside the node's padding box) */
.jseg{position:absolute;z-index:0;top:calc(var(--node) / 2 - 1px);left:calc(var(--node) + 3px);width:calc(100% + var(--g) - var(--node) - 6px);height:2px;background:var(--line);border-radius:2px;pointer-events:none}
.jseg i{display:block;width:100%;height:100%;border-radius:inherit;background:var(--brand);transform:scaleX(0);transform-origin:left center}
.jnode{position:relative;z-index:1;display:grid;place-items:center;width:var(--node);height:var(--node);border-radius:50%;background:var(--paper);border:1px solid var(--line);color:#9aa8bf;box-shadow:0 10px 24px -16px rgba(13,26,43,.35);transition:color .5s,border-color .5s,box-shadow .5s}
.jstep.hit .jnode{color:var(--brand);border-color:rgba(60,100,200,.45);box-shadow:0 14px 30px -16px rgba(60,100,200,.55)}
.jdone .jnode{transition-property:color,border-color,box-shadow,background}
.jstep.ringed.jdone .jnode{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 16px 34px -14px rgba(60,100,200,.75)}
/* the ring: two half circles from the point where the line meets the node (its left; the top when vertical), one each
   way round, drawn by their dash offset (the homepage script animates it) so they meet on the far side */
.jring{position:absolute;inset:-5px;width:calc(100% + 10px);height:calc(100% + 10px);overflow:visible;pointer-events:none;transform:rotate(var(--jr,0deg))}
.jring path{fill:none;stroke:var(--brand);stroke-width:2;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1}
.jnum{display:block;margin:22px 0 6px;font:600 11px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--brand)}
.jstep h3{font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.15;margin:0 0 8px;text-wrap:balance}
.jstep p{margin:0;color:var(--ink-2);font-size:15px;line-height:1.55;text-wrap:pretty}
@media (max-width:1100px){
  .journey{grid-template-columns:1fr;gap:30px}
  /* vertical: each segment runs from the bottom of one ring to the top of the next (30px row gap below the step) */
  .jseg{left:calc(var(--node) / 2 - 1px);top:calc(var(--node) + 3px);bottom:-27px;width:2px;height:auto}
  .jseg i{transform:scaleY(0);transform-origin:center top}
  .jstep{display:grid;grid-template-columns:var(--node) 1fr;column-gap:20px}
  .jnode{grid-row:span 3}
  .jring{--jr:90deg}
  .jnum{margin:6px 0 4px}
}
@media (prefers-reduced-motion:reduce){.jnode{transition:none}}
/* Solutions, driven by scrolling (classes and --sp are set by the homepage script; nothing here runs on its own).
   Entrance once: options slide in one by one, the answer card rises and its photo wipes in from the top.
   While scrolling: the photo shifts a little slower than the page and the background glow drifts with progress. */
#situations.sol-anim .choice{transition:background .3s,color .3s,opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:0s,0s,calc(var(--k,0) * 55ms),calc(var(--k,0) * 55ms)}
#situations.sol-anim:not(.sol-in) .choice{opacity:0;transform:translateX(-16px)}
#situations.sol-anim .answer{transition:opacity .8s cubic-bezier(.2,.7,.2,1) .25s,transform .8s cubic-bezier(.2,.7,.2,1) .25s}
#situations.sol-anim:not(.sol-in) .answer{opacity:0;transform:translateY(28px)}
#situations.sol-anim .answer-img{clip-path:inset(0);transition:clip-path 1s cubic-bezier(.65,0,.25,1) .45s}
#situations.sol-anim:not(.sol-in) .answer-img{clip-path:inset(0 0 100% 0)}
#situations.sol-anim .answer-img{transform:translateY(calc((var(--sp,.5) - .5) * -40px)) scale(1.12);transform-origin:50% 50%}
#situations.sol-anim .wander{transform:translateY(calc((var(--sp,.5) - .5) * 160px))}
/* footer links are underlined so they are not told apart by colour alone (WCAG 1.4.1) */
footer .legal span a{text-decoration:underline;text-underline-offset:2px}
/* ===== long-form guide template (guide_pages.json; one page while the design is dialed in) =====
   Below the landing hero: the article on the left, and a sticky rail on the right with the table of contents
   (the section being read is marked) and one contact card. On small screens the rail becomes a collapsible
   table of contents at the top and a call / consultation bar fixed to the bottom of the screen. */
.lp-guide .g-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:64px;align-items:start;padding:var(--gap) 0}
.g-article{max-width:740px;min-width:0}
.g-article > * + *{margin-top:0}
.g-byline{display:flex;gap:14px;align-items:center;margin:0 0 34px;padding-bottom:22px;border-bottom:1px solid var(--line);font-size:14px;line-height:1.5;color:var(--ink-2)}
.g-byline img{width:48px;height:48px;border-radius:50%;object-fit:cover;object-position:50% 25%;flex:none}
.g-byline b{color:var(--ink);font-weight:600}
.g-quick{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:20px;padding:26px 30px;margin:0 0 8px}
.g-quick h2{font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.1;margin:0 0 16px}
.g-quick dl{margin:0;display:grid;gap:12px}
.g-quick dl > div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px}
.g-quick dt{font-weight:600;color:var(--ink);font-size:15px}
.g-quick dd{margin:0;color:var(--ink-2);font-size:15.5px;line-height:1.55}
.g-sec{padding:64px 0 0;scroll-margin-top:96px}
.g-sec h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.2vw,40px);line-height:1.08;letter-spacing:-.01em;margin:0 0 20px;text-wrap:balance}
.g-sec h3{font-size:18px;font-weight:600;margin:0 0 6px;color:var(--ink)}
.g-sec p{margin:0 0 18px;color:var(--ink-2);line-height:1.7}
.g-sec p em{color:var(--ink)}
.g-sec p a,.g-fit a{color:var(--brand);text-underline-offset:2px}
.g-list-lead{font-weight:600;color:var(--ink) !important;margin-bottom:10px !important}
.g-list{margin:0 0 18px;padding-left:20px;display:grid;gap:10px;color:var(--ink-2);line-height:1.65}
.g-list strong{color:var(--ink)}
.g-formula{margin:8px 0 26px;padding:24px 28px;border-radius:20px;background:linear-gradient(135deg,var(--a1),var(--a2))}
.g-formula .g-formula-eq{font-family:var(--serif);font-size:clamp(22px,2.4vw,30px);line-height:1.2;color:var(--ink);margin:0 0 8px}
.g-formula p{margin:0;font-size:15px}
.g-sec .lp-table-wrap{margin:8px 0 26px}
.g-table tbody th{text-align:left;vertical-align:top;padding:14px 18px;border-bottom:1px solid var(--line);color:var(--ink);font-weight:600;font-size:15px;letter-spacing:0;text-transform:none}
.g-table tr:last-child th{border-bottom:0}
.g-calc{margin:8px 0 26px;padding:26px 28px;border:1px solid var(--line);border-radius:22px;background:var(--paper);box-shadow:0 24px 50px -40px rgba(13,26,43,.35)}
.g-calc h3{font-family:var(--serif);font-weight:400;font-size:26px;margin:0 0 4px}
.g-calc .g-calc-sub{margin:0 0 18px;font-size:14px}
.g-calc-grid{display:grid}
.g-calc label{display:grid;gap:6px;font-size:13.5px;font-weight:600;color:var(--ink)}
.g-calc-in{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:12px;padding:0 12px;background:var(--ivory);color:var(--ink-2);font-weight:400}
.g-calc-in:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(60,100,200,.15)}
.g-calc input{width:100%;border:0;background:none;padding:11px 0;font:400 16px var(--sans);color:var(--ink);outline:none}
.g-calc-out{display:flex;gap:18px;align-items:center;margin-top:20px;padding:16px 18px;border-radius:16px;background:var(--ivory)}
.g-calc-num{flex:none;white-space:nowrap;font-family:var(--serif);font-size:44px;line-height:1;min-width:84px;color:var(--ink)}
.g-calc-msg{color:var(--ink-2);font-size:15px;line-height:1.5}
.g-calc[data-band="strong"] .g-calc-num{color:#1f7a4d}
.g-calc[data-band="ok"] .g-calc-num{color:var(--brand)}
.g-calc[data-band="low"] .g-calc-num{color:#a35a00}
.g-calc .g-calc-note{margin:12px 0 0;font-size:13px}
.g-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:8px 0 26px;padding:22px 26px;border-radius:20px;background:var(--ink);color:#fff}
.g-cta h3{font-family:var(--serif);font-weight:400;font-size:24px;margin:0 0 4px;color:#fff}
.g-cta p{margin:0 !important;color:rgba(255,255,255,.78) !important;font-size:15px}
.g-cta .btn{flex:none;white-space:nowrap}
.g-fit{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.g-fit > div{border:1px solid var(--line);border-radius:20px;padding:24px;background:var(--paper)}
.g-fit h3{font-family:var(--serif);font-weight:400;font-size:24px;margin:0 0 12px}
.g-fit ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.g-fit li{display:flex;flex-direction:column;gap:2px;padding-left:22px;position:relative}
.g-fit li::before{content:"";position:absolute;left:0;top:7px;width:9px;height:9px;border-radius:50%}
.g-fit-yes li::before{background:#2f9e6a}
.g-fit-no li::before{background:#c9862b}
.g-fit-no strong{color:var(--ink);font-weight:600}
.g-uses{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 32px;border-top:1px solid var(--line)}
.g-uses li{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
.g-uses .lp-use-ic{color:var(--brand)}
.g-uses p{margin:0;font-size:15px;line-height:1.55}
.g-steps{list-style:none;margin:0;padding:0;counter-reset:gs;display:grid;gap:4px}
.g-steps li{counter-increment:gs;position:relative;padding:4px 0 18px 58px}
.g-steps li::before{content:counter(gs,decimal-leading-zero);position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:var(--paper);border:1px solid var(--line);font:600 13px var(--sans);color:var(--brand)}
.g-steps li:not(:last-child)::after{content:"";position:absolute;left:20px;top:44px;bottom:2px;width:1px;background:var(--line)}
.g-steps p{margin:0 !important;font-size:15.5px}
.g-sec .lp-faq{margin-top:8px}
.g-todo{margin-top:8px;margin-bottom:26px}
.g-article > .g-todo{margin-top:64px}
.g-related{margin-top:56px}
.g-related-h{margin:0 0 12px;font:600 12px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--brand)}
.g-related .lp-related{margin-top:0}
/* rail */
.g-rail{position:sticky;top:96px;display:grid;gap:18px}
.g-toc-h{margin:0 0 10px;font:600 12px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.g-toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.g-toc a{display:block;padding:7px 0 7px 16px;margin-left:-1px;border-left:2px solid transparent;font-size:14.5px;line-height:1.35;color:var(--ink-2);text-decoration:none;transition:color .2s,border-color .2s}
.g-toc a:hover{color:var(--ink)}
.g-toc a[aria-current]{color:var(--brand);border-left-color:var(--brand);font-weight:600}
.g-rail-cta{border:1px solid var(--line);border-radius:20px;background:var(--paper);padding:20px;display:grid;gap:12px;box-shadow:0 24px 50px -40px rgba(13,26,43,.35)}
.g-rail-cta p{margin:0;font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.g-rail-cta b{display:block;color:var(--ink);font-size:15.5px;margin-bottom:2px}
.g-rail-cta .btn{justify-content:center;height:46px}
.g-rail-tel{text-align:center;font-size:14px;color:var(--ink-2);text-decoration:none;white-space:nowrap}
.g-rail-tel:hover{color:var(--brand)}
.g-toc-m{display:none}
/* mobile bar */
.g-bar{display:none}
@media (max-width:1100px){
  .lp-guide .g-layout{grid-template-columns:1fr;gap:0}
  .g-rail{display:none}
  .g-toc-m{display:block;margin:0 0 26px;border:1px solid var(--line);border-radius:16px;background:var(--paper);padding:0 18px}
  .g-toc-m summary{cursor:pointer;list-style:none;padding:14px 0;font-weight:600;font-size:15px;display:flex;justify-content:space-between}
  .g-toc-m summary::-webkit-details-marker{display:none}
  .g-toc-m summary::after{content:"+";font-family:var(--serif);font-size:24px;line-height:.8;color:var(--brand)}
  .g-toc-m[open] summary::after{content:"\2212"}
  .g-toc-m ol{border-left:0;padding-bottom:10px}
  .g-toc-m a{padding-left:0;border-left:0}
  .g-article{max-width:none}
}
@media (max-width:900px){
  .has-g-bar{padding-bottom:64px}
  .g-bar{display:grid;grid-template-columns:1fr 1.6fr;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(13,26,43,.96);box-shadow:0 -12px 30px -18px rgba(0,0,0,.5)}
  .g-bar a{display:grid;place-items:center;height:44px;border-radius:999px;font:500 15px var(--sans);text-decoration:none;color:#fff;border:1px solid rgba(255,255,255,.4)}
  .g-bar .g-bar-main{background:var(--brand);border-color:var(--brand)}
  .g-quick dl > div{grid-template-columns:1fr;gap:2px}
  .g-fit,.g-uses{grid-template-columns:1fr}
  .g-cta{flex-direction:column;align-items:flex-start}
  .g-sec{padding:48px 0 0}
}
/* guide refinements: even 64px between sections (the last block in a section drops its bottom margin),
   five calculator inputs on one row where they fit, and the result row of a worked-example table emphasised */
.g-sec > :last-child{margin-bottom:0}
.g-table tbody tr:last-child th,.g-table tbody tr:last-child td{background:color-mix(in srgb,var(--a1) 45%,transparent);color:var(--ink);font-weight:600}
.g-table.g-table-plain tbody tr:last-child th,.g-table.g-table-plain tbody tr:last-child td{background:none;font-weight:inherit}
/* mobile contact bar: solid, and only once the hero's own buttons have scrolled away (js adds .g-bar-on) */
@media (max-width:900px){
  .g-bar{background:#0d1a2b;transform:translateY(110%);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  .g-bar.g-bar-on{transform:none}
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){.g-bar{transition:none}}
/* guide components added for density: ratio meter, label rows, option cards */
.g-tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:4px 0 26px;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--paper)}
.g-tier{padding:18px 18px 16px;border-top:5px solid}
.g-tier + .g-tier{border-left:1px solid var(--line)}
.g-tier-0{border-top-color:#2f9e6a} .g-tier-1{border-top-color:var(--brand)} .g-tier-2{border-top-color:#c9862b}
.g-tier b{display:block;font-family:var(--serif);font-weight:400;font-size:28px;line-height:1;color:var(--ink)}
.g-tier span{display:block;margin:6px 0 6px;font:600 12px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.g-tier p{margin:0 !important;font-size:14.5px;line-height:1.5}
.g-dl-h{margin:4px 0 10px !important}
.g-dl{margin:0 0 26px;border-top:1px solid var(--line)}
.g-dl > div{display:grid;grid-template-columns:170px minmax(0,1fr);gap:18px;padding:13px 0;border-bottom:1px solid var(--line)}
.g-dl dt{font-weight:600;color:var(--ink);font-size:15px}
.g-dl dd{margin:0;color:var(--ink-2);font-size:15.5px;line-height:1.55}
.g-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:4px 0 22px}
.g-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;padding:20px 20px 16px;background:var(--paper)}
.g-card h3{font-family:var(--serif);font-weight:400;font-size:23px;margin:0 0 6px}
.g-card p{margin:0 0 12px !important;font-size:15px;line-height:1.55}
.g-card .g-card-best{margin:auto 0 0 !important;padding-top:10px;border-top:1px solid var(--line);font-size:14px;color:var(--ink)}
.g-card-best span{display:block;font:600 11px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--brand);margin-bottom:2px}
@media (max-width:900px){
  .g-tiers{grid-template-columns:1fr}.g-tier + .g-tier{border-left:0;border-top-width:5px}
  .g-dl > div{grid-template-columns:1fr;gap:2px}
  .g-cards{grid-template-columns:1fr}
}
/* guide tables on phones: tighter cells so three columns fit without wrapping every header */
@media (max-width:600px){
  .g-table{font-size:14px}
  .g-table th,.g-table td{padding:11px 12px}
  .g-table thead th{font-size:11px;letter-spacing:.04em}
}
/* wide guide tables (4+ columns) stack on phones: each row becomes a block, each cell shows its column name */
@media (max-width:600px){
  .g-table-stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .g-table-stack,.g-table-stack tbody,.g-table-stack tr,.g-table-stack th,.g-table-stack td{display:block;width:auto}
  .g-table-stack tr{padding:14px 16px;border-bottom:1px solid var(--line)}
  .g-table-stack tr:last-child{border-bottom:0}
  .g-table-stack tbody th{padding:0 0 8px;border:0;font-size:15px}
  .g-table-stack td{display:grid;grid-template-columns:42% 1fr;gap:10px;padding:5px 0;border:0}
  .g-table-stack td::before{content:attr(data-label);font-size:12.5px;font-weight:600;color:var(--ink);letter-spacing:.02em}
}
.g-table.g-table-plain tbody tr:last-child th{font-weight:600}
/* Guide block rhythm: every boxed block sits 24px from its neighbours (margins collapse, so text-to-box, box-to-text and box-to-box all read the same); a heading sits tight on the list or rows it introduces. */
.g-sec .lp-table-wrap,.g-formula,.g-calc,.g-cta,.g-fit,.g-steps,.g-tiers,.g-dl,.g-cards,.g-sec .g-todo{margin-top:24px;margin-bottom:24px}
.g-sec h2 + *,.g-dl-h + .g-dl,.g-list-lead + .g-list{margin-top:0}
.g-sec .lp-faq{margin-top:0}
.g-related,.g-article > .g-todo{margin-top:64px}
@media (max-width:900px){.g-related,.g-article > .g-todo{margin-top:48px}}
.g-sec > :last-child{margin-bottom:0}
.g-sec h2 + .lp-table-wrap,.g-sec h2 + .g-todo{margin-top:0}
.g-quick{margin-bottom:0}

/* Calculators (calculators.json / calculators.js): choice buttons, dropdowns, hints, the result breakdown, and the calculator pages */
.g-calc-in span[aria-hidden]{flex:none}
.g-calc-hint{font-size:12.5px;font-weight:400;color:var(--ink-2);line-height:1.4}
.g-calc label:has(> .g-calc-sel){grid-column:1/-1}
.g-calc-sel{width:100%;border:1px solid var(--line);border-radius:12px;padding:11px 12px;background:var(--ivory);font:400 16px var(--sans);color:var(--ink)}
.g-calc-sel:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(60,100,200,.15)}
.g-calc-choice{grid-column:1/-1;border:0;margin:0;padding:0;display:grid;gap:6px;min-width:0}
.g-calc-choice legend{padding:0;margin-bottom:6px;font-size:13.5px;font-weight:600;color:var(--ink)}
.g-calc-choice > div{display:flex;flex-wrap:wrap;gap:8px}
.g-calc-opt{display:inline-flex !important;position:relative;font-weight:400 !important}
.g-calc-opt input{position:absolute;opacity:0;width:1px;height:1px}
.g-calc-opt span{display:inline-block;padding:9px 16px;border:1px solid var(--line);border-radius:999px;background:var(--ivory);color:var(--ink);font-size:14.5px;cursor:pointer}
.g-calc-opt input:checked + span{background:var(--brand);border-color:var(--brand);color:#fff}
.g-calc-opt input:focus-visible + span{outline:2px solid var(--brand);outline-offset:2px}
.g-calc-rows{margin:12px 0 0;display:grid;gap:0;border-top:1px solid var(--line)}
.g-calc-rows[hidden]{display:none}
.g-calc-rows div{display:flex;justify-content:space-between;gap:16px;padding:9px 2px;border-bottom:1px solid var(--line);font-size:14.5px}
.g-calc-rows dt{color:var(--ink-2)}
.g-calc-rows dd{margin:0;color:var(--ink);font-weight:600;text-align:right}
.g-calc-note a{color:var(--brand);white-space:nowrap}
.doc .g-calc{margin:28px 0 8px}
.doc .g-calc h2{font-size:26px;margin:0 0 4px}
.doc .g-calc label,.doc .g-calc legend{font-size:13.5px}
.doc .g-calc-sub,.doc .g-calc-note{font-size:14px}
.doc .g-calc-msg{font-size:15px}
.doc .g-formula,.doc .g-cta{margin:20px 0}
.doc .lp-faq{margin-top:12px}
.calc-lede{font-size:19px !important;line-height:1.55 !important;color:var(--ink) !important;max-width:720px}
.calc-list{list-style:none;padding:0 !important;margin:14px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.calc-list a{display:grid;gap:6px;align-content:start;height:100%;padding:18px 20px;border:1px solid var(--line);border-radius:18px;background:var(--paper);text-decoration:none;transition:border-color .2s,transform .2s}
.calc-list a:hover{border-color:var(--brand);transform:translateY(-2px)}
.calc-list b{color:var(--ink);font-size:17px;font-weight:600}
.calc-list span{color:var(--ink-2);font-size:14.5px;line-height:1.5}
.calc-back{margin-top:28px}
@media (max-width:600px){.g-calc{padding:20px 18px}.g-calc-num{font-size:36px;min-width:0}.g-calc-out{flex-direction:column;align-items:flex-start;gap:8px}}
/* six top-level menu items (Calculators added): labels never wrap, and the gap tightens before the menu collapses at 900px */
header .menu > li > a{white-space:nowrap}
@media (max-width:1040px){header .menu{gap:20px}}
@media (max-width:980px){header .menu{gap:14px;font-size:14.5px}}

/* Glossary, document checklists (printable) */
.gl-az{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0 6px}
.gl-az a{display:inline-grid;place-items:center;min-width:38px;height:38px;border:1px solid var(--line);border-radius:10px;background:var(--paper);text-decoration:none;font-weight:600}
.gl-az a:hover{border-color:var(--brand)}
:is(.doc,.tool-body) .gl{margin:6px 0 0;border-top:1px solid var(--line)}
:is(.doc,.tool-body) .gl div{padding:14px 2px;border-bottom:1px solid var(--line);scroll-margin-top:96px}
:is(.doc,.tool-body) .gl dt{font-weight:600;color:var(--ink);font-size:16.5px;margin-bottom:4px}
:is(.doc,.tool-body) .gl dd{margin:0;color:var(--ink-2);font-size:16px;line-height:1.65}
:is(.doc,.tool-body) .gl div:target{background:var(--paper);border-radius:10px;padding-left:12px}
:is(.doc,.tool-body) h2[id^="letter-"]{scroll-margin-top:96px}
.ck-toc ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0 !important;margin:14px 0 0}
.ck-toc li{margin:0}
.ck-toc a{display:inline-block;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--paper);text-decoration:none;font-size:14.5px}
:is(.doc,.tool-body) section[id]{scroll-margin-top:96px}
:is(.doc,.tool-body) .ck{list-style:none;padding:0 !important;margin:8px 0 0}
:is(.doc,.tool-body) .ck li{margin:0;border-bottom:1px solid var(--line)}
.ck label{display:flex;gap:12px;align-items:flex-start;padding:12px 2px;cursor:pointer}
.ck input{flex:none;width:20px;height:20px;margin:3px 0 0;accent-color:var(--brand)}
.ck input:checked + span{color:var(--ink-2);text-decoration:line-through;text-decoration-color:rgba(0,0,0,.35)}
.ck-guide{margin:10px 0 0;font-size:15px}
@media print{
  header,footer,.aura,.grain,.skip,.ck-print,.ck-toc,.g-cta,.g-bar,.calc-back{display:none !important}
  body{background:#fff}.doc{padding:0;max-width:none}.doc h1{font-size:30px}.doc h2{font-size:20px;margin-top:22px;break-after:avoid}
  :is(.doc,.tool-body) .ck li{break-inside:avoid}.ck input{appearance:none;-webkit-appearance:none;border:1.5px solid #333;border-radius:3px}
}
/* calculators, second pass: field groups, subtotal rows, a results table, and copy / print */
.g-calc-sec{grid-column:1/-1;margin:8px 0 -4px;padding-top:12px;border-top:1px solid var(--line);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.g-calc-grid > .g-calc-sec:first-child{margin-top:0;padding-top:0;border-top:0}
.g-calc-rows div.part dt{padding-left:16px;position:relative}
.g-calc-rows div.part dt::before{content:"+";position:absolute;left:2px;color:var(--ink-2)}
.g-calc-rows div.part dd{font-weight:400}
.g-calc-rows div.total{border-top:2px solid var(--ink);margin-top:-1px}
.g-calc-rows div.total dt{color:var(--ink);font-weight:600}
.g-calc-rows div.result{background:color-mix(in srgb,var(--a1) 45%,transparent)}
.g-calc-rows div.result dt{color:var(--ink);font-weight:600}
.g-calc-tbl{margin-top:18px}
.g-calc-tbl[hidden]{display:none}
.g-calc-tcap,.g-calc-tbl summary{margin:0 0 8px;font-size:14.5px;font-weight:600;color:var(--ink)}
.g-calc-tbl summary{cursor:pointer;padding:10px 0}
.g-calc-tbl .lp-table-wrap{margin:0}
.g-calc-tbl .g-table{font-size:14.5px}
.g-calc-tnote{margin:8px 0 0;font-size:13px;color:var(--ink-2)}
/* fields shown only when they apply, fields locked by a choice, and fields typed as dollars, a percentage, or by month or year */
.g-calc [hidden]{display:none !important}
.g-calc input[readonly]{color:var(--ink-2)}
.g-calc-in:has(input[readonly]){background:transparent;border-style:dashed}
.g-calc-f{display:grid;gap:6px;min-width:0;font-size:13.5px;font-weight:600;color:var(--ink)}
/* two columns: each field is a row, its label and box on the left and its hint on the right (one column on a phone).
   Rows: an empty flexible row, the label, the box, the "= ..." line, another empty flexible row. The hint spans them all
   and is centred, and when the hint is the taller side the two flexible rows share the extra height, so the label and
   box stay together and centred too. */
.g-calc-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:32px;row-gap:20px}
.g-calc-grid > label,.g-calc-grid > .g-calc-f,.g-calc-grid > .g-calc-choice{grid-column:1/-1;display:grid;grid-template-columns:subgrid;
  grid-template-rows:1fr auto auto auto 1fr;column-gap:normal;row-gap:0;align-content:normal}
/* a fieldset's content box cannot join a subgrid, so it gets the same two columns directly; a floated legend is an
   ordinary grid item, so the group title can take the label row */
.g-calc-grid > .g-calc-choice{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:32px}
.g-calc-grid > .g-calc-choice > legend{float:left;margin:0}
.g-calc-grid > * > .g-calc-l,.g-calc-grid > * > .g-calc-fh,.g-calc-grid > .g-calc-choice > legend{grid-column:1;grid-row:2}
.g-calc-grid > * > .g-calc-in,.g-calc-grid > * > select,.g-calc-grid > .g-calc-choice > div{grid-column:1;grid-row:3;margin-top:6px}
.g-calc-grid > * > .g-calc-eq{grid-column:1;grid-row:4;margin-top:6px}
.g-calc-grid > * > .g-calc-hint{grid-column:2;grid-row:1 / -1;align-self:center;padding-left:14px;border-left:2px solid var(--line)}
.g-calc-fh{display:grid;gap:6px}
.g-calc-sec,.g-calc-sechint{grid-column:1/-1}
@media (max-width:600px){
  .g-calc-grid{grid-template-columns:minmax(0,1fr)}
  .g-calc-grid > label,.g-calc-grid > .g-calc-f,.g-calc-grid > .g-calc-choice{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .g-calc-grid > * > *,.g-calc-grid > .g-calc-choice > legend,.g-calc-grid > .g-calc-choice > div{grid-row:auto !important}
  .g-calc-grid > * > .g-calc-hint{grid-column:1;align-self:start;margin-top:6px;padding-left:0;border-left:0}
}
}
.g-calc-sw{display:flex;flex-wrap:wrap;gap:4px}
.g-calc-sw button{min-height:26px;padding:3px 10px;border:1px solid var(--line);border-radius:999px;background:var(--ivory);color:var(--ink-2);font:500 12.5px var(--sans);cursor:pointer}
.g-calc-sw button[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.g-calc-sw button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.g-calc-eq{font-size:12.5px;font-weight:400;color:var(--ink-2);line-height:1.4}
.g-calc-eq:empty{display:none}
.g-calc-sechint{grid-column:1/-1;margin:-6px 0 0}
.g-calc-act{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.g-calc-act[hidden]{display:none}
.g-calc-act button{padding:8px 16px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);font:500 14px var(--sans);cursor:pointer}
.g-calc-act button:hover{border-color:var(--brand)}
.g-calc-act button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.g-calc-status{font-size:13.5px;color:var(--ink-2)}
/* guide tables: lines that add up to a subtotal are indented under it, and the subtotal is ruled off */
.g-table tr.g-part th{padding-left:34px;font-weight:400;color:var(--ink-2);position:relative}
.g-table tr.g-part th::before{content:"+";position:absolute;left:18px}
.g-table tr.g-subtotal th,.g-table tr.g-subtotal td{border-top:2px solid var(--ink);font-weight:600;color:var(--ink)}
@media (max-width:600px){.g-table tr.g-part th{padding-left:28px}.g-table tr.g-part th::before{left:12px}}
@media print{
  body.print-calc *{visibility:hidden}
  body.print-calc form.printing,body.print-calc form.printing *{visibility:visible}
  body.print-calc form.printing{position:absolute;left:0;top:0;width:100%;box-shadow:none;border:0}
  body.print-calc .g-calc-act{display:none !important}
  body.print-calc .g-calc-tbl details > *{display:block}
}
/* rate ranges always carry the standard label (rates.json) */
.g-rates-label{display:inline-block;margin:6px 0 4px;padding:8px 14px;border-radius:12px;background:var(--a1);color:var(--ink);font-size:14.5px;font-weight:600}
.g-rates-note{font-size:13.5px;color:var(--ink-2)}
/* Tools menu: four columns (three of calculators, one of tools), centred under its menu item so it stays on screen; "all" link across the bottom */
header .dd-tools{grid-template-columns:repeat(4,max-content);gap:6px 14px;min-width:0;left:50%;transform:translate(-50%,-6px)}
header .has-dd:hover .dd-tools,header .has-dd:focus-within .dd-tools,header .has-dd.open .dd-tools{transform:translateX(-50%)}
header .dd-tools .dd-h + ul + .dd-h{margin-top:14px}
header .dd-all{grid-column:1/-1;margin:6px 0 0;padding-top:10px;border-top:1px solid rgba(255,255,255,.12)}
header .dd-all a{display:inline-block;color:#fff;font-weight:500}
@media (max-width:1100px){header .dd-tools{grid-template-columns:repeat(2,max-content);min-width:0;max-height:calc(100vh - 110px);overflow-y:auto}}
header .menu > li > a[aria-current]{background-size:100% 1px}
.mnav details .dd-h + ul + .dd-h{margin-top:10px}
/* hub: "start here" chips and the one-line result on each card */
.calc-start{margin:22px 0 8px}
.calc-start-h{margin:0 0 10px !important;font-size:12px !important;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.calc-start ul{list-style:none;padding:0 !important;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.calc-start li{margin:0 !important}
.calc-start a{display:inline-block;padding:9px 16px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);font-size:14.5px;text-decoration:none}
.calc-start a:hover{border-color:var(--brand)}
.calc-list .calc-get{color:var(--brand);font-weight:600;font-size:14px}
/* calculator and tool pages (tool_page in build_pages.py): the guide layout with a tool hero, a sticky rail and the full contact card */
.lp-tool .tool-hero{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:64px;align-items:center;padding:30px 0 0}
.tool-head h1{margin:14px 0 16px}
.tool-head .lede{font-size:19px;line-height:1.6;color:var(--ink);max-width:620px;margin:0 0 26px}
.tool-hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.tool-hero-cta .btn{height:48px}
.tool-photo{margin:0;aspect-ratio:1/1;border-radius:28px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(13,26,43,.45);background:linear-gradient(160deg,var(--a1),var(--sage))}
.tool-photo img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
.lp-tool .g-layout{padding-top:56px}
.tool-body > h2,.tool-body > section > h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.2vw,40px);line-height:1.08;letter-spacing:-.01em;margin:64px 0 20px;text-wrap:balance;scroll-margin-top:96px}
.tool-body > :first-child,.tool-body > section:first-child > h2{margin-top:0}
.tool-body > p,.tool-body > ul > li,.tool-body > section > p{color:var(--ink-2);font-size:16.5px;line-height:1.7}
.tool-body > p{margin:0 0 18px}
.tool-body > ul:not([class]){margin:0 0 18px;padding-left:20px;display:grid;gap:10px}
.tool-body .g-calc{margin:0 0 8px;scroll-margin-top:96px}
.tool-body .g-calc h2{font-family:var(--serif);font-weight:400;font-size:28px;margin:0 0 4px}
.tool-body .lp-faq{margin-top:12px}
.tool-body .calc-guides{margin:0 0 18px}
@media (max-width:900px){.lp-tool .tool-hero{grid-template-columns:1fr;gap:22px;padding-top:18px}.tool-photo{aspect-ratio:21/9;border-radius:22px}.lp-tool .g-layout{padding-top:36px}.tool-body > h2,.tool-body > section > h2{margin-top:48px}}
/* the tool hero stacks where the rail goes away (1100px), so the photo never sits over a column that is not there */
@media (max-width:1100px){.lp-tool .tool-hero{grid-template-columns:1fr;gap:22px}.tool-photo{aspect-ratio:21/9;border-radius:22px}}
.lp .wrap > section.tool-hero{padding:30px 0 0}
@media (max-width:900px){.lp .wrap > section.tool-hero{padding-top:18px}}
/* hub tiles: the photo runs edge to edge across the top of each card */
.calc-list a{overflow:hidden}
.calc-img{display:block;margin:-18px -20px 10px;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(160deg,var(--a1),var(--a2))}
.calc-img img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.9);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.calc-list a:hover .calc-img img{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){.calc-img img{transition:none}.calc-list a:hover .calc-img img{transform:none}}
/* the checklists page lists its sections in the rail on wide screens, so its own list shows only where the rail is hidden */
@media (min-width:1101px){.tool-body .ck-toc{display:none}}
@media print{.tool-photo,.tool-hero-cta,.g-rail,#contact,.crumbs{display:none !important}.lp-tool .g-layout{display:block;padding:0}.lp .wrap > section.tool-hero{padding:0}}
/* a group with fewer cards keeps the same card width instead of stretching one card across the row */
.calc-list{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
@media (max-width:600px){.tool-hero-cta{display:grid;grid-template-columns:1.4fr 1fr}.tool-hero-cta .btn{justify-content:center}}
/* sections inside a tool page's article (the checklists) are plain blocks, not page bands */
.tool-body section{padding:0}
/* header phone and email: each a 24px-tall tap target (WCAG 2.2 target size) */
.hcontact a{display:block;min-height:24px;line-height:24px}
/* the closing contact card after a document page (FAQ): same width and spacing as on the homepage */
.doc-after > #contact{padding:0 0 96px}
@media (max-width:900px){.doc-after > #contact{padding-bottom:64px}}
.doc:has(+ .doc-after){padding-bottom:64px}
@media (max-width:900px){.doc:has(+ .doc-after){padding-bottom:48px}}
/* the FAQ runs the full content width, matching its closing card */
.doc.doc-wide{max-width:1180px}
/* tool pages, second layout: title across the top; photo, intro and buttons open the main column (as on the landing pages) */
.lp-tool .tool-hero{display:block;padding:30px 0 0}
.lp .wrap > section.tool-hero{padding:30px 0 0}
.tool-head{max-width:900px}
.tool-head h1{margin:14px 0 0}
.tool-body > .tool-photo{margin:0 0 28px;aspect-ratio:21/9}  /* a banner, so the calculator stays close to the top */
.tool-body > .tool-lede{font-size:19px;line-height:1.6;color:var(--ink);margin:0 0 24px}
.tool-body > .tool-hero-cta{margin:0 0 56px}
.lp-tool .g-layout{padding-top:36px}
/* the rail's call to action opens with Jack, at the landing pages' size (.lp-start .who) */
.g-rail-cta .who{display:flex;gap:16px;align-items:center;padding-bottom:14px;border-bottom:1px solid var(--line);font-size:13px;line-height:1.4;color:var(--ink-2)}
.g-rail-cta .who img{width:84px;height:84px;border-radius:50%;object-fit:cover;object-position:50% 25%;flex:none;box-shadow:0 0 0 4px rgba(60,100,200,.10)}
.g-rail-cta .who b{display:block;color:var(--ink);font-size:16px;font-weight:600;margin:0}
@media (max-width:1100px){.tool-body > .tool-photo{aspect-ratio:21/9;border-radius:22px}}
@media (max-width:900px){.tool-body > .tool-hero-cta{margin-bottom:40px}.lp-tool .g-layout{padding-top:24px}}
/* headings never run wider than the column under them, so the title's edge lines up with the photo's.
   Landing pages: the photo column is 1.25fr of (width - 56px gap) out of 2fr. Tool pages: the article column (740px with the rail). */
@media (min-width:901px){.lp-head{max-width:calc((100% - 56px) * 1.25 / 2)}}
.tool-head{max-width:740px}
@media (max-width:1100px){.tool-head{max-width:none}}
.tool-body > .tool-lede{margin-bottom:48px}
@media (max-width:900px){.tool-body > .tool-lede{margin-bottom:36px}}
/* partners page and homepage partners section */
.partner-actions{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0 0 !important}
.partner-actions .btn{height:48px}
.partner-more{display:inline-block;margin-top:14px;color:var(--brand);font-weight:500;text-decoration:none;width:100%}
.partner-more:hover{text-decoration:underline}
/* the intro under a tool page's photo runs the photo's full width */
.tool-body > .tool-lede{max-width:none}
/* text never stops short of its column when the blocks around it run full width */
.lp-faq details p{max-width:none}
.g-article .lp-faq,.g-article .lp-case-todo{max-width:none}
.doc .calc-lede{max-width:none}
#loans > .wrap > .sub,#loans .sub{max-width:none}
/* once the homepage stacks into one column, intros run the full column like the blocks around them */
@media (max-width:900px){main .lede,main .sub{max-width:none}}
/* homepage partner list: each name opens its partner page */
.plist li a{color:inherit;text-decoration:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.plist li a::after{content:"\2192";font-family:var(--sans);font-size:18px;color:var(--brand);opacity:0;transform:translateX(-6px);transition:opacity .2s,transform .2s}
.plist li a:hover,.plist li a:focus-visible{color:var(--brand)}
.plist li a:hover::after,.plist li a:focus-visible::after{opacity:1;transform:none}
@media (hover:none){.plist li a::after{opacity:.6;transform:none}}
/* For partners menu: three columns, centred under its item like Tools */
header .dd-partners{grid-template-columns:repeat(3,max-content);gap:6px 14px;min-width:0;left:50%;transform:translate(-50%,-6px)}
header .has-dd:hover .dd-partners,header .has-dd:focus-within .dd-partners,header .has-dd.open .dd-partners{transform:translateX(-50%)}
@media (max-width:1180px){header .dd-partners{grid-template-columns:repeat(2,max-content);max-height:calc(100vh - 110px);overflow-y:auto}}
/* Tools menu: four columns (three of calculators, one of tools), two below 1100px */
header .dd-tools{grid-template-columns:repeat(4,max-content)}
@media (max-width:1300px){header .dd-tools{grid-template-columns:repeat(4,max-content);max-height:calc(100vh - 110px);overflow-y:auto}}
@media (max-width:1100px){header .dd-tools{grid-template-columns:repeat(2,max-content)}}
/* hub: text cards (no photo) */
.calc-list-text a{padding:18px 20px}
/* compact cards: a small square photo or a state badge beside the name, for long lists of programs and states */
.calc-list.calc-list-mini{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.calc-list-mini a{grid-template-columns:56px minmax(0,1fr);align-items:center;gap:14px;padding:10px 16px 10px 10px;border-radius:16px}
.calc-list-mini .mini-img,.calc-list-mini .mini-badge{width:56px;height:56px;border-radius:12px;overflow:hidden}
.calc-list-mini .mini-img img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
.calc-list-mini .mini-badge{display:grid;place-items:center;background:linear-gradient(160deg,var(--a1),var(--a2));color:var(--ink);font:400 24px/1 var(--serif);letter-spacing:.02em}
.calc-list-mini .mini-t{display:grid;gap:2px}
.calc-list-mini b{font-size:15.5px}
.calc-list-mini .mini-t span{font-size:13.5px;line-height:1.4}
/* four states: two to a row, so none sits alone */
.calc-list.calc-list-pairs{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
/* the same with a larger photo and a three-line summary (comparisons and guides on the guides hub) */
.calc-list.calc-list-thumb{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.calc-list-thumb a{grid-template-columns:88px minmax(0,1fr);align-items:start;gap:16px;padding:12px 18px 12px 12px}
.calc-list-thumb .mini-img{width:88px;height:88px;border-radius:14px}
.calc-list-thumb .mini-t{gap:4px;padding-top:2px}
.calc-list-thumb .mini-t span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.calc-list-mini a:hover .mini-img img{transform:scale(1.05)}
.calc-list-mini .mini-img img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){.calc-list-mini .mini-img img{transition:none}.calc-list-mini a:hover .mini-img img{transform:none}}
/* homepage tools strip: a line icon on each card */
.res-cards .res-ico{display:grid;place-items:center;width:46px;height:46px;margin-bottom:6px;border-radius:14px;background:color-mix(in srgb,var(--brand) 10%,var(--paper));color:var(--brand)}
.res-cards a:hover .res-ico{background:var(--brand);color:#fff}
/* Guides menu: two columns, opening leftward from the last menu item so it stays on screen */
header .dd-guides{grid-template-columns:repeat(2,max-content);gap:6px 14px;min-width:0;left:auto;right:-22px}
@media (max-width:1100px){header .dd-guides{grid-template-columns:repeat(2,max-content);max-height:calc(100vh - 110px);overflow-y:auto}}

/* homepage tools strip: the four state hubs under the cards */
#resources .res-states-h{margin:30px 0 0;font:600 12px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
#resources .res-states{margin-top:12px}
/* "Where is the home?": state and county side by side */
.g-calc-place .g-calc-sel{flex:1 1 140px;width:auto;min-width:0}
.g-calc-place .g-calc-sel:disabled{opacity:.55}
/* a visible credit for the few photos whose license asks for one (build_pages.py PHOTO_CREDIT) */
.tool-photo{position:relative}
.tool-photo .photo-credit{position:absolute;right:12px;bottom:10px;padding:3px 9px;border-radius:999px;background:rgba(13,26,43,.62);color:#fff;font-size:11.5px;line-height:1.4}
.tool-photo .photo-credit a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.calc-list .calc-credit{font-size:11.5px;color:var(--ink-2)}
.g-calc-place .g-calc-home{flex:1 1 100%;display:flex !important;align-items:center;gap:8px;font-weight:400;font-size:14px;color:var(--ink)}
.g-calc-place .g-calc-home[hidden]{display:none !important}
.g-calc-place .g-calc-home input{width:18px;height:18px;margin:0;accent-color:var(--brand)}
/* option cards in the guides: a line icon above the name (build_pages.py CARD_ICON) */
.g-card .card-ico{display:grid;place-items:center;width:42px;height:42px;margin-bottom:12px;border-radius:12px;background:color-mix(in srgb,var(--brand) 10%,var(--paper));color:var(--brand)}
#resources .res-anywhere{margin:16px 0 0;font-size:15px;color:var(--ink-2);max-width:62ch}
#resources .res-anywhere a{color:var(--accent);text-underline-offset:3px}
/* Mortgage News Daily's free rate widget on mortgage-rates.html (its inside can't be styled, only the frame): the large
   table, scaled up 1.2x, where the text column is 740px or wider; the compact one (MND rows only) below that */
.mnd-box{display:block;container-type:inline-size}
.mnd-wide{display:none;width:720px;height:270px;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:#fff}
.mnd-large{display:block;width:600px;height:225px;border:0;transform:scale(1.2);transform-origin:0 0}
.mnd-small{display:block;width:320px;max-width:100%;height:150px;border:1px solid var(--line);border-radius:10px;background:#fff}
@container (min-width:620px){.mnd-wide{display:block;width:600px;height:225px}.mnd-large{transform:none}.mnd-small{display:none}}
@container (min-width:740px){.mnd-wide{width:720px;height:270px}.mnd-large{transform:scale(1.2)}}
/* Regulation Z representative examples (site_regz.py): in the text column, after the page's content */
.regz-example{margin:32px 0 0;font-size:15px}
.regz-example p{margin:0 0 10px}.regz-example p:last-child{margin:0}
.regz-wrap{margin-top:-48px;margin-bottom:56px}.regz-wrap .regz-example{margin:0}