/* =====================================================================================
   ActionRefinance.com: home page only. Loads after site.css. Built by Thunderbird Agency.
   Owner: home page builder. Shared tokens, type and components live in site.css.
   ===================================================================================== */

/* ---------- Hero: the title card crosses into the board ---------- */
.home-hero{ position:relative; isolation:isolate; padding-block:var(--s-6) var(--s-8); }
@media (min-width:1024px){ .home-hero{ padding-block:var(--s-7) var(--s-9); } }

.hero-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-6); }
.hero-copy{ position:relative; z-index:2; min-width:0; }
.hero-presents{ margin:0 0 var(--s-4); font-size:var(--t-small); font-weight:600; color:var(--ink-2); font-variation-settings:"wdth" 100; }
.hero-presents b{ color:var(--ink); }

.home-hero .title-card{ font-size:clamp(84px, 1.2rem + 12.6vw, 196px); margin-bottom:var(--s-5); }
.home-hero .title-card .tc-sub{ margin-top:.45em; max-width:22ch; }
.hero-lede{ margin:0 0 var(--s-5); }
.hero-actions{ margin-bottom:var(--s-5); }
.hero-copy .caveat{ max-width:46ch; }

.hero-figure{ margin:0; min-width:0; position:relative; z-index:1; }
.hero-figure .scene{ border-color:var(--rule-strong); }
.hero-figure .scene-caption{ display:flex; gap:var(--s-3); justify-content:space-between; align-items:baseline; flex-wrap:wrap; }
.scene-state{ font-weight:600; color:var(--ink-2); }

@media (min-width:1024px){
  .hero-grid{ grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:24px; align-items:start; }
  .hero-copy{ grid-column:1 / span 6; grid-row:1; padding-top:var(--s-5); }
  .hero-figure{ grid-column:6 / -1; grid-row:1; margin-top:var(--s-8); }
  /* the stencil runs over the board's left edge; the reading copy stays clear of it (5 of 6 columns) */
  .hero-copy>.hero-presents,.hero-copy>.lede,.hero-copy>.caveat,.hero-copy>.hero-actions{ max-width:82%; }
}
@media (min-width:1280px){ .hero-figure .scene{ aspect-ratio:16/11; } }

/* ---------- Poster: the board drawn at the charged state ---------- */
.scene-poster{ pointer-events:none; }
.pp-wall{ fill:var(--paper-2); }
.pp-frame{ fill:var(--ink); opacity:.82; }
.pp-board{ fill:var(--paper); }
.pp-gridline{ fill:none; stroke:var(--rule); stroke-width:1; }
.pp-card{ fill:var(--card); }
.pp-card-shadow{ fill:var(--pin-shadow); }
.pp-card-rule{ stroke:var(--signal); stroke-width:2.5; }
.pp-card-line{ stroke:var(--blueprint); stroke-opacity:.22; stroke-width:1.5; }
.pp-card-text{ fill:var(--ink); font-family:var(--f-text); font-weight:700; font-size:25px; font-variation-settings:"wdth" 100; }
.pp-pin{ fill:var(--signal); }
.pp-pin-hi{ fill:#fff; opacity:.45; }
.pp-pin-shadow{ fill:var(--pin-shadow); }
.pp-string{ fill:none; stroke:var(--signal); stroke-width:3; stroke-linecap:round; }
.pp-bench{ fill:var(--ink); opacity:.13; }
.pp-edge{ stroke:var(--ink); stroke-opacity:.35; stroke-width:2; }
.pp-sheet{ fill:var(--blueprint); }
.pp-bpline{ fill:none; stroke:#fff; stroke-opacity:.16; stroke-width:1.2; }
.pp-sheet-border{ fill:none; stroke:#fff; stroke-opacity:.5; stroke-width:2; }
.pp-house-shadow{ fill:var(--ink); opacity:.22; }
.pp-wall-front{ fill:var(--card); opacity:.42; }
.pp-wall-side{ fill:var(--card); opacity:.62; }
.pp-roof{ fill:var(--card); opacity:.78; }
.pp-line{ fill:none; stroke:var(--ink); stroke-width:3; stroke-linejoin:miter; }
.pp-line-thin{ fill:none; stroke:var(--ink); stroke-width:1.6; stroke-opacity:.6; }
.pp-ring{ fill:var(--charge); }
.pp-ring-edge{ fill:none; stroke:var(--ink); stroke-opacity:.35; stroke-width:1; }
.pp-core-glow{ fill:var(--charge); opacity:.5; }
.pp-ink{ fill:var(--ink); }
.pp-bulb{ fill:var(--charge); }
.pp-halo-0{ stop-color:var(--charge); stop-opacity:.7; }
.pp-halo-1{ stop-color:var(--charge); stop-opacity:0; }
.pp-pencil{ stroke:var(--primer); stroke-width:11; stroke-linecap:butt; }
.pp-pencil-tip{ fill:var(--ink); opacity:.7; }
.pp-square{ fill:none; stroke:var(--blueprint); stroke-width:9; }

/* ---------- Letter strip ---------- */
.letter{ padding-block:var(--s-7); background:var(--paper-2); border-block:1px solid var(--rule); scroll-margin-top:calc(var(--header-h) + 8px); }
.letter .slate{ align-items:end; }
.letter h2{ margin-bottom:var(--s-3); }
.letter p{ margin-bottom:0; }
.letter-form{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--s-3) var(--s-4); margin-top:var(--s-5); }
.letter-form .field{ flex:1 1 320px; min-width:0; max-width:460px; }
.code-row{ display:flex; align-items:stretch; min-width:0; background:var(--card); border:2px solid var(--rule-strong); border-radius:2px; }
.code-row:hover{ border-color:var(--ink); }
.code-row:focus-within{ border-color:var(--ink); }
.code-prefix{ display:flex; align-items:center; padding:0 2px 0 12px; font-weight:600; font-size:15px; font-variation-settings:"wdth" 84; color:var(--ink-2); white-space:nowrap; }
.field .code-row input.code-input{ flex:1 1 auto; width:auto; min-width:0; border:0; background:transparent; box-shadow:none; padding:10px 10px 10px 2px; font-size:24px !important; letter-spacing:.12em; }
.field .code-row input.code-input:focus-visible{ outline:3px solid var(--signal-ink); outline-offset:3px; }
.letter-form .btn{ flex:none; }
.letter-note{ margin-top:var(--s-4) !important; }
@media (min-width:480px){ .code-prefix{ font-size:16px; padding-left:14px; } .field .code-row input.code-input{ font-size:28px !important; letter-spacing:.16em; } }

/* ---------- Act 1: the board of missions ---------- */
.missions-head{ margin-bottom:var(--s-6); }
.mission-board{ padding:var(--s-7) var(--s-4) var(--s-6); }
@media (min-width:768px){ .mission-board{ padding:var(--s-7) var(--s-6); } }
.mission-grid{ list-style:none; margin:0; padding:0; max-width:none; display:grid; gap:var(--s-6) var(--s-5); grid-template-columns:minmax(0,1fr); }
.mission-grid>li{ margin:0; }
@media (min-width:640px){ .mission-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1200px){ .mission-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.mission{ height:100%; display:flex; flex-direction:column; }
.mission h3{ font-size:clamp(21px, 1.1rem + .4vw, 24px); }
.mission p{ font-size:16.5px; }
.mission .caveat{ margin:0 0 var(--s-4); }
.mission-go{ margin-top:auto; padding-top:var(--s-2); font-weight:700; }
.mission-go a{ color:var(--ink); text-decoration-color:var(--signal); text-decoration-thickness:2px; }
.mission-go a:hover{ text-decoration-thickness:3px; }
.missions-foot{ margin-top:var(--s-5); }

/* ---------- Act 2: the example core ---------- */
.core-figure{ margin:var(--s-6) 0 0; max-width:720px; }
.core-bar{ display:flex; height:64px; border:2px solid var(--ink); background:var(--card); overflow:hidden; }
.core-bar>span{ display:block; height:100%; flex:none; }
.core-bar .cb-owe{ background:var(--primer); }
.core-bar .cb-use{ background:var(--charge); box-shadow:inset 0 0 22px var(--charge-glow); border-left:2px solid var(--ink); }
.core-bar .cb-heloc{ background:repeating-linear-gradient(45deg, var(--blueprint) 0 3px, transparent 3px 8px); border-left:2px solid var(--ink); }
.core-bar .cb-stay{ flex:1 1 auto; border-left:2px solid var(--ink); }
.core-scale{ display:flex; justify-content:space-between; margin-top:6px; font-size:var(--t-small); font-variation-settings:"wdth" 88; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.core-legend{ list-style:none; padding:0; margin:var(--s-4) 0 0; display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-5); max-width:none; }
.core-legend li{ margin:0; display:flex; align-items:center; gap:8px; font-size:var(--t-small); font-weight:600; }
.core-legend i{ width:16px; height:16px; border:1px solid var(--ink); flex:none; }
.core-legend .lg-owe{ background:var(--primer); }
.core-legend .lg-use{ background:var(--charge); }
.core-legend .lg-heloc{ background:repeating-linear-gradient(45deg, var(--blueprint) 0 2px, transparent 2px 5px); }
.core-legend .lg-stay{ background:var(--card); }
.example-tag{ font-weight:700; margin-bottom:var(--s-4) !important; }
.readouts{ display:grid; gap:var(--s-5); grid-template-columns:minmax(0,1fr); margin-top:var(--s-6); max-width:720px; }
@media (min-width:560px){ .readouts{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.readout-item{ border-top:2px solid var(--ink); padding-top:var(--s-3); }
.readout-item p{ margin:0; }
.readout-item .ri-label{ font-weight:700; font-size:16px; margin-bottom:var(--s-2); }
.readout-item .readout-sm{ color:var(--ink); }

/* ---------- Act 3: the two-line diagram ---------- */
.lines-figure{ margin:var(--s-6) 0 var(--s-6); max-width:760px; }
.lines-figure svg{ width:100%; height:auto; overflow:visible; }
.ln-first{ fill:none; stroke:var(--ink); stroke-width:4; }
.ln-heloc{ fill:none; stroke:var(--blueprint); stroke-width:4; stroke-linejoin:round; }
.ln-axis{ stroke:var(--rule-strong); stroke-width:1; stroke-dasharray:4 6; }
.ln-label{ fill:var(--ink); font-family:var(--f-text); font-size:17px; font-weight:700; }
.ln-label-2{ fill:var(--ink-2); font-family:var(--f-text); font-size:15px; font-weight:600; }
.ln-blue{ fill:var(--blueprint); }
.ln-knot{ fill:var(--paper); stroke:var(--ink); stroke-width:3; }
.lines-figure figcaption{ font-size:var(--t-small); color:var(--ink-2); margin-top:var(--s-2); }

/* ---------- Act 4: roll-call teaser ---------- */
.home-roll{ margin-top:var(--s-6); }
.home-roll .roll-frame{ aspect-ratio:4/3; }
.home-roll .roll-frame svg{ position:absolute; inset:0; }
.home-roll .roll-name{ bottom:0; }
.home-roll .roll-note{ margin:var(--s-3) 0 0; font-size:var(--t-small); color:var(--ink-2); font-variation-settings:"wdth" 92; }
.rf-ink{ fill:none; stroke:var(--ink); stroke-width:3; stroke-linecap:square; }
.rf-thin{ fill:none; stroke:var(--ink); stroke-width:1.6; stroke-opacity:.55; }
.rf-signal{ fill:none; stroke:var(--signal); stroke-width:3; }
.rf-signal-fill{ fill:var(--signal); }
.rf-blue{ fill:none; stroke:var(--blueprint); stroke-width:3; }
.rf-grid{ fill:none; stroke:var(--rule); }
.rf-lamp{ fill:var(--charge); opacity:.32; }
.rf-paper{ fill:var(--card); }
.crew-more{ margin-top:var(--s-5); }

/* ---------- Closing call block ---------- */
.call-block{ border-top:2px solid var(--ink); padding-top:var(--s-6); }
.call-block .readout{ display:inline-block; color:var(--ink); text-decoration:none; margin:var(--s-2) 0 var(--s-4); }
.call-block .readout:hover{ text-decoration:underline; text-decoration-thickness:.05em; }
.call-block .cluster{ margin-top:var(--s-2); }

/* ---------- small-screen guards ---------- */
@media (max-width:479px){
  .hero-actions .btn{ width:100%; }
  .letter-form .btn{ width:100%; }
}
ul.home-roll{ list-style:none; padding:0; max-width:none; }
ul.home-roll>li{ margin:0; }

/* poster in the dark theme: a deeper sheet and a thinner front wall so the core reads */
:root[data-theme="dark"] .pp-sheet{ fill:#1F4470; }
:root[data-theme="dark"] .pp-wall-front{ opacity:.16; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .pp-sheet{ fill:#1F4470; }
  :root:not([data-theme="light"]) .pp-wall-front{ opacity:.16; }
}

/* the two-line sketch scales down on phones: keep the three main labels, drop the small ones */
@media (max-width:599px){
  .ln-label{ font-size:30px; }
  .ln-label-2{ display:none; }
  .ln-first,.ln-heloc{ stroke-width:6; }
}