/* ============================================================================
   Edmonton Foreclosure Help — Ryan McCann, MaxWell Polaris
   Design intent: "calm authority". This audience is frightened and has been
   marketed at by cash-buyer sites in alarm red. We do the opposite — a legal-
   brief palette (paper, ink, one restrained accent), a serif for headings so
   the statutory content reads as reference material, and CTAs that are always
   present but never shouting.
   Namespaced .fc so this can be pasted beside other site CSS without collisions.
   ========================================================================= */

/* ---------- self-hosted fonts ----------
   Served from /assets/fonts instead of Google Fonts: two fewer origins to
   connect to, which was costing ~2 s of mobile LCP on the live site. Both are
   variable fonts (Latin subset, OFL licence), so one file covers every weight.
   font-display:optional — if a font isn't ready almost immediately, that page
   view keeps the fallback instead of re-drawing text later (no layout shift,
   no late LCP). build.py preloads both files; keep those URLs identical to the
   ones below. If a font file ever changes, give it a new filename — .htaccess
   caches .woff2 for a year. */
@font-face{
  font-family:"Hanken Grotesk";font-style:normal;font-weight:400 700;
  font-display:optional;
  src:url("fonts/hanken-grotesk-latin-var.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
    U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Source Serif 4";font-style:normal;font-weight:500 600;
  font-display:optional;
  src:url("fonts/source-serif-4-latin-var.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
    U+FEFF,U+FFFD;
}

:root{
  color-scheme: light;

  --paper:#FFFFFF;
  --shell:#FBF9F5;        /* page ground, warm off-white */
  --tint:#F2F0EA;         /* band separation */
  --tint-deep:#E8E5DC;
  --ink:#14181C;          /* headings */
  --body:#3E464E;         /* running text */
  --muted:#5E666E;        /* secondary — ≥4.5:1 on every ground incl. --tint-deep (Lighthouse) */
  --line:#E2DFD6;         /* hairlines */
  --line-deep:#CFCABC;

  --accent:#12503F;       /* deep evergreen — trust, not alarm */
  --accent-deep:#0C3A2D;
  --accent-wash:#EAF1EE;
  --flag:#9A4A12;         /* deadline / caution copy. Warm, not red. */
  --flag-wash:#FBF1E8;

  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;

  --r-lg:20px; --r-md:14px; --r-sm:9px;
  --wide:1120px; --read:720px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;background:var(--shell);color:var(--body);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}

h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);line-height:1.15;
  letter-spacing:-.012em;margin:0 0 .5em;font-weight:600}
h1{font-size:clamp(2rem,1.35rem + 2.6vw,3.15rem);letter-spacing:-.022em}
h2{font-size:clamp(1.5rem,1.15rem + 1.5vw,2.15rem);margin-top:2.2em}
h3{font-size:clamp(1.16rem,1.05rem + .5vw,1.4rem);margin-top:1.9em}
h4{font-size:1.02rem;font-family:var(--sans);font-weight:700;margin-top:1.6em;
  letter-spacing:.005em}
p{margin:0 0 1.05em}
strong{color:var(--ink);font-weight:650}
hr{border:0;border-top:1px solid var(--line);margin:2.6rem 0}

.fc-wrap{max-width:var(--wide);margin:0 auto;padding-inline:clamp(18px,4.2vw,40px)}
.fc-read{max-width:var(--read)}
.fc-section{padding-block:clamp(44px,6vw,84px)}
.fc-section--tint{background:var(--tint)}
.fc-section--paper{background:var(--paper)}
.fc-skip{position:absolute;left:-9999px;background:var(--ink);color:#fff;
  padding:12px 18px;border-radius:0 0 var(--r-sm) 0;z-index:100}
.fc-skip:focus{left:0;top:0}

/* ---------- eyebrow ---------- */
.fc-eyebrow{font-size:.76rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin:0 0 .8rem}
.fc-lede{font-size:clamp(1.06rem,1rem + .4vw,1.24rem);color:var(--body);
  max-width:62ch;line-height:1.6}

/* ---------- header ---------- */
.fc-head{position:sticky;top:0;z-index:60;background:rgba(251,249,245,.94);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.fc-head-in{display:flex;align-items:center;gap:18px;min-height:70px}
.fc-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  color:var(--ink);flex:none;min-height:44px}
.fc-seal{width:32px;height:32px;flex:none;color:var(--accent)}
.fc-brandname{font-family:var(--serif);font-weight:600;font-size:1.06rem;
  line-height:1.05;letter-spacing:-.015em;display:block}
.fc-brandsub{font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);display:block;margin-top:2px}
.fc-nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.fc-nav a{text-decoration:none;color:var(--body);font-size:.93rem;font-weight:530;
  padding:9px 11px;border-radius:var(--r-sm);white-space:nowrap}
.fc-nav a:hover{background:var(--tint);color:var(--ink)}
.fc-nav a[aria-current="page"]{color:var(--accent);font-weight:650}
/* The CTA sits inside .fc-nav, whose link rules (class + element) outrank
   .fc-btn--go on specificity — so restate its colours at matching weight. */
.fc-nav a.fc-btn--go{color:#fff;background:var(--accent)}
.fc-nav a.fc-btn--go:hover{color:#fff;background:var(--accent-deep)}
.fc-navtoggle{display:none;margin-left:auto;background:var(--paper);
  border:1px solid var(--line-deep);border-radius:var(--r-sm);
  min-height:44px;padding:0 14px;font:inherit;font-size:.92rem;font-weight:600;
  color:var(--ink);cursor:pointer}
/* 1120px, not ~1000: the six links + CTA need ~1060px, so a 1024px laptop or
   iPad-landscape viewport overflowed sideways and clipped the CTA. Keep in
   sync with the matchMedia query in site.js. */
@media (max-width:1120px){
  .fc-navtoggle{display:inline-flex;align-items:center;gap:7px}
  .fc-nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;
    align-items:stretch;gap:0;background:var(--paper);
    border-bottom:1px solid var(--line);padding:8px clamp(18px,4.2vw,40px) 16px;
    box-shadow:0 18px 34px -22px rgba(20,24,28,.4)}
  .fc-nav[hidden]{display:none}
  .fc-nav a{padding:13px 4px;border-bottom:1px solid var(--line);font-size:1rem}
  .fc-nav a:last-child{border-bottom:0}
}

/* ---------- buttons ---------- */
.fc-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:50px;padding:13px 24px;border-radius:999px;border:1px solid transparent;
  font:inherit;font-weight:650;font-size:.98rem;text-decoration:none;cursor:pointer;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease}
.fc-btn:hover{transform:translateY(-1px)}
.fc-btn:active{transform:translateY(0)}
.fc-btn--go{background:var(--accent);color:#fff;
  box-shadow:0 10px 22px -14px rgba(18,80,63,.9)}
.fc-btn--go:hover{background:var(--accent-deep)}
.fc-btn--ghost{background:var(--paper);color:var(--ink);border-color:var(--line-deep)}
.fc-btn--ghost:hover{border-color:var(--ink)}
.fc-btn--quiet{background:transparent;color:var(--accent);padding-inline:6px;min-height:44px}
.fc-btn--quiet:hover{text-decoration:underline}
.fc-btnrow{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:1.6rem}
.fc-btnnote{font-size:.87rem;color:var(--muted);margin:.9rem 0 0}

/* ---------- hero ---------- */
.fc-hero{background:linear-gradient(180deg,var(--paper) 0%,var(--shell) 100%);
  border-bottom:1px solid var(--line);padding-block:clamp(44px,6.5vw,88px)}
.fc-hero-grid{display:grid;gap:clamp(30px,4vw,56px);grid-template-columns:1fr}
@media (min-width:930px){.fc-hero-grid{grid-template-columns:1.15fr .85fr;align-items:start}}
.fc-hero h1{margin-bottom:.55em}

/* ---------- cards ---------- */
.fc-card{background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-md);padding:clamp(20px,2.4vw,28px)}
.fc-card h3{margin-top:0}
.fc-card--raise{box-shadow:0 22px 40px -30px rgba(20,24,28,.55)}
.fc-grid{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:620px){.fc-grid--2,.fc-grid--3,.fc-grid--4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:940px){.fc-grid--3{grid-template-columns:repeat(3,1fr)}
  .fc-grid--4{grid-template-columns:repeat(4,1fr)}}

/* ---------- stat ---------- */
.fc-stat{background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-md);padding:22px}
.fc-stat-n{font-family:var(--serif);font-size:clamp(1.7rem,1.3rem + 1.4vw,2.3rem);
  color:var(--accent);font-weight:600;line-height:1;display:block;margin-bottom:.35rem}
.fc-stat-l{font-size:.94rem;color:var(--body);margin:0}
.fc-stat-src{font-size:.78rem;color:var(--muted);margin:.6rem 0 0}

/* ---------- statute quote ---------- */
.fc-statute{background:var(--accent-wash);border-left:4px solid var(--accent);
  border-radius:0 var(--r-md) var(--r-md) 0;padding:20px 22px;margin:1.8rem 0}
.fc-statute p{font-family:var(--serif);font-size:1.02rem;color:var(--ink);
  line-height:1.55;margin:0 0 .8em}
.fc-statute p:last-of-type{margin-bottom:0}
.fc-statute cite{display:block;margin-top:.9rem;font-style:normal;font-size:.83rem;
  letter-spacing:.05em;text-transform:uppercase;color:var(--accent-deep);font-weight:650}

/* ---------- TL;DR / short answer ----------
   Answer engines and skim-readers both want the conclusion before the argument.
   This block is the direct answer, 40-60 words, above everything else on the
   page. Marked up as a plain <p> pair so extraction is trivial. */
.fc-tldr{background:var(--paper);border:1px solid var(--line-deep);
  border-radius:var(--r-md);padding:20px 22px;margin:1.8rem 0 0;
  box-shadow:0 14px 28px -26px rgba(20,24,28,.5)}
.fc-tldr-t{font-size:.74rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin:0 0 .55em}
.fc-tldr p:not(.fc-tldr-t){font-family:var(--serif);font-size:1.08rem;
  line-height:1.55;color:var(--ink);margin:0 0 .7em}
.fc-tldr p:last-child{margin-bottom:0}

/* ---------- callout ---------- */
.fc-note{border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--paper);padding:18px 20px;margin:1.8rem 0}
.fc-note--flag{background:var(--flag-wash);border-color:#E7CFB6}
.fc-note--flag .fc-note-t{color:var(--flag)}
.fc-note-t{font-weight:700;color:var(--ink);margin:0 0 .45em;font-size:.97rem}
.fc-note p:last-child{margin-bottom:0}

/* ---------- stage timeline ---------- */
.fc-stages{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:0}
.fc-stage{position:relative;padding:0 0 30px 46px;border-left:2px solid var(--line-deep);
  margin-left:13px}
.fc-stage:last-child{border-left-color:transparent;padding-bottom:0}
.fc-stage-dot{position:absolute;left:-14px;top:1px;width:26px;height:26px;
  border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;
  font-size:.8rem;font-weight:700;font-family:var(--sans)}
.fc-stage h3{margin:0 0 .3em;font-size:1.14rem}
.fc-stage-when{font-size:.82rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin:0 0 .5em}
.fc-stage p{margin-bottom:.6em}
.fc-stage-do{background:var(--accent-wash);border-radius:var(--r-sm);padding:12px 15px;
  font-size:.94rem;margin-top:.9rem}
.fc-stage-do strong{color:var(--accent-deep)}

/* ---------- table ---------- */
.fc-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.8rem 0;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper)}
.fc-table{width:100%;border-collapse:collapse;font-size:.94rem;min-width:520px}
.fc-table caption{caption-side:top;text-align:left;padding:16px 16px 12px;
  font-family:var(--serif);font-size:1.02rem;font-weight:600;color:var(--ink);
  border-bottom:1px solid var(--line)}
.fc-table th,.fc-table td{text-align:left;padding:12px 16px;
  border-bottom:1px solid var(--line);vertical-align:top}
.fc-table thead th{background:var(--tint);color:var(--ink);font-weight:700;
  font-size:.8rem;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.fc-table tbody tr:last-child td{border-bottom:0}
.fc-table td.fc-num{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink);
  font-weight:600}
.fc-tcap{font-size:.83rem;color:var(--muted);margin:.7rem 0 0}

/* ---------- comparison ---------- */
.fc-vs{display:grid;gap:16px;grid-template-columns:1fr;margin:2rem 0}
@media (min-width:760px){.fc-vs{grid-template-columns:1fr 1fr}}
.fc-vs-col{border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--paper);padding:22px 24px}
.fc-vs-col--good{border-color:var(--accent);background:var(--accent-wash)}
.fc-vs-col h3{margin-top:0;font-size:1.1rem}
.fc-vs-col ul{margin:0;padding-left:0;list-style:none}
.fc-vs-col li{position:relative;padding-left:26px;margin-bottom:.7em;font-size:.96rem}
.fc-vs-col li::before{content:"";position:absolute;left:2px;top:.55em;width:9px;height:9px;
  border-radius:50%;background:var(--line-deep)}
.fc-vs-col--good li::before{background:var(--accent)}

/* ---------- FAQ ---------- */
.fc-faq{border-top:1px solid var(--line);margin-top:1.6rem}
.fc-faq details{border-bottom:1px solid var(--line)}
.fc-faq summary{cursor:pointer;list-style:none;padding:18px 40px 18px 0;position:relative;
  font-weight:650;color:var(--ink);font-size:1.02rem}
.fc-faq summary::-webkit-details-marker{display:none}
.fc-faq summary::after{content:"+";position:absolute;right:8px;top:15px;font-size:1.5rem;
  color:var(--accent);line-height:1;font-weight:400}
.fc-faq details[open] summary::after{content:"\2013"}
.fc-faq-a{padding:0 0 18px;max-width:66ch}
.fc-faq-a p:last-child{margin-bottom:0}

/* ---------- lists ---------- */
.fc-check{list-style:none;padding:0;margin:1.4rem 0}
.fc-check li{position:relative;padding-left:30px;margin-bottom:.75em}
.fc-check li::before{content:"";position:absolute;left:2px;top:.42em;width:14px;height:14px;
  border-radius:4px;background:var(--accent-wash);border:1.5px solid var(--accent)}
.fc-check li::after{content:"";position:absolute;left:6.5px;top:.63em;width:4px;height:8px;
  border:solid var(--accent);border-width:0 2px 2px 0;transform:rotate(42deg)}

/* ---------- CTA band ---------- */
.fc-cta{background:var(--accent);color:#EAF1EE;border-radius:var(--r-lg);
  padding:clamp(26px,4vw,48px)}
.fc-cta h2{color:#fff;margin-top:0}
.fc-cta p{color:#CDDFD8}
.fc-cta .fc-btn--go{background:#fff;color:var(--accent-deep)}
.fc-cta .fc-btn--go:hover{background:#E6F0EC}
.fc-cta .fc-btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.fc-cta .fc-btn--ghost:hover{border-color:#fff}
.fc-cta-grid{display:grid;gap:clamp(22px,3vw,40px);grid-template-columns:1fr}
@media (min-width:840px){.fc-cta-grid{grid-template-columns:1.05fr .95fr;align-items:center}}

/* ---------- form ---------- */
.fc-form{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  padding:clamp(20px,2.6vw,30px);color:var(--body)}
.fc-field{margin-bottom:16px}
.fc-field label{display:block;font-size:.88rem;font-weight:650;color:var(--ink);
  margin-bottom:6px}
.fc-field input,.fc-field select,.fc-field textarea{width:100%;font:inherit;font-size:1rem;
  padding:13px 14px;border:1px solid var(--line-deep);border-radius:var(--r-sm);
  background:var(--shell);color:var(--ink);min-height:50px}
.fc-field textarea{min-height:96px;resize:vertical}
.fc-field input:focus,.fc-field select:focus,.fc-field textarea:focus{
  border-color:var(--accent);background:var(--paper)}
.fc-field-hint{font-size:.82rem;color:var(--muted);margin:6px 0 0}
.fc-hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.fc-formnote{font-size:.83rem;color:var(--muted);margin:14px 0 0;line-height:1.5}
.fc-formmsg{margin:14px 0 0;padding:13px 15px;border-radius:var(--r-sm);font-size:.94rem;
  display:none}
.fc-formmsg[data-state="ok"]{display:block;background:var(--accent-wash);
  color:var(--accent-deep);border:1px solid var(--accent)}
.fc-formmsg[data-state="err"]{display:block;background:var(--flag-wash);color:var(--flag);
  border:1px solid #E7CFB6}
.fc-progress{display:flex;gap:6px;margin-bottom:20px}
.fc-progress span{height:4px;flex:1;border-radius:999px;background:var(--tint-deep)}
.fc-progress span[data-on]{background:var(--accent)}
.fc-step[hidden]{display:none}

/* ---------- footer ---------- */
.fc-foot{background:var(--ink);color:#A9B2BA;padding-block:clamp(40px,5vw,64px);
  font-size:.92rem;margin-top:0}
.fc-foot a{color:#D6DCE1;text-decoration:none}
.fc-foot a:hover{color:#fff;text-decoration:underline}
/* The global strong{color:var(--ink)} is near-black — invisible on this ground. */
.fc-foot strong{color:#fff}
/* Footer column titles are <h2 class="fc-hsmall"> (not h4) so heading levels
   never skip — Lighthouse heading-order. */
.fc-foot-legal a{text-decoration:underline;text-underline-offset:2px}
.fc-foot .fc-hsmall{color:#fff;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  margin:0 0 .9em;font-family:var(--sans)}
.fc-foot-grid{display:grid;gap:30px;grid-template-columns:1fr}
@media (min-width:700px){.fc-foot-grid{grid-template-columns:1.3fr 1fr 1fr}}
.fc-foot ul{list-style:none;margin:0;padding:0}
.fc-foot li{margin-bottom:.6em}
.fc-foot-legal{border-top:1px solid #2A3138;margin-top:34px;padding-top:22px;
  font-size:.8rem;color:#7C858D;line-height:1.6}
.fc-foot-legal p{margin:0 0 .8em}
.fc-foot .fc-seal{color:#fff}
.fc-foot .fc-brandname,.fc-foot .fc-brand{color:#fff}

/* ---------- sticky mobile call bar ---------- */
.fc-bar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  background:var(--paper);border-top:1px solid var(--line);padding:9px 14px;
  gap:9px;box-shadow:0 -10px 26px -20px rgba(20,24,28,.6)}
.fc-bar .fc-btn{flex:1;min-height:48px;padding-inline:12px;font-size:.94rem}
@media (max-width:720px){.fc-bar{display:flex}body{padding-bottom:70px}}

/* ---------- breadcrumb + meta ---------- */
.fc-crumb{font-size:.85rem;color:var(--muted);margin:0 0 1.2rem}
.fc-crumb a{color:var(--muted);text-decoration:none}
.fc-crumb a:hover{color:var(--accent);text-decoration:underline}
.fc-updated{font-size:.83rem;color:var(--muted);border-top:1px solid var(--line);
  padding-top:1.1rem;margin-top:2.6rem}

/* ---------- source list ---------- */
/* Heading-level fixes that keep the original look: the element is now an h2 so
   the outline never jumps a level, and these classes restore the old visual size. */
.fc-hsmall{font-family:var(--sans);font-size:1.02rem;font-weight:700;
  letter-spacing:.005em;margin:1.6em 0 .5em;line-height:1.3}
.fc-h3look{font-size:clamp(1.16rem,1.05rem + .5vw,1.4rem);margin:1.9em 0 .5em}
.fc-card .fc-h3look:first-child{margin-top:0}
.fc-sources{font-size:.87rem;color:var(--muted)}
.fc-sources ol{padding-left:1.2em;margin:.8rem 0 0}
.fc-sources li{margin-bottom:.55em}
.fc-sources a{color:var(--accent);word-break:break-word}

/* ---------- related ---------- */
.fc-related a{display:block;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-md);padding:18px 20px;text-decoration:none;color:var(--ink);
  height:100%}
.fc-related a:hover{border-color:var(--accent)}
.fc-related-t{font-family:var(--serif);font-weight:600;font-size:1.05rem;
  margin:0 0 .35em;display:block}
.fc-related-d{font-size:.9rem;color:var(--muted);margin:0}