/* ============================================================
   FIREPLACE PORTAL — public homepage (index.html)
   ------------------------------------------------------------
   Editorial, dark-and-ivory, carried by photography and a serif
   display face. One page: dark header, full-bleed photo hero,
   terms strip, statement, the portal (dark band, live mockup),
   capability, what you fit, process, close, footer.

   TYPE
     display     serif (system stack: Iowan Old Style → Palatino
                 → Georgia), weight 400, tight leading. The serif
                 carries the register; nothing else is decorated.
     UI + body   Satoshi (self-hosted variable), 16px / 1.6 / 400.
                 Buttons and nav sit at .88rem / 500.

   PALETTE
     Warm near-black (--coal) and warm off-white (--paper).
     Ember orange survives only as the flame, small accents and
     the mockup's status hues — never as a field of colour.

   THE MOCKUP SCALES BY FONT-SIZE, NOT BY TRANSFORM
   Every measurement inside `.mock` is in `em` off one size that
   tracks its CONTAINER (cqi), not the viewport. Do not introduce
   px inside .mock. Its light UI is deliberate: the point of the
   dark band is a lit screen glowing on near-black.
   ============================================================ */

@font-face{
  font-family:'Satoshi'; font-style:normal; font-weight:300 900; font-display:swap;
  src:url('../assets/fonts/Satoshi-Variable.woff2') format('woff2');
}

:root{
  --paper:#FAFAF9; --paper-2:#F4F2EE; --paper-3:#E9E6E0;
  --ink:#16130F; --ink-2:#403B34; --mut:#6E6860; --mut-2:#989187;
  --line:#E6E2DB; --line-2:#D3CDC4;

  --coal:#100E0C; --coal-2:#181512;
  --coal-line:rgba(250,250,249,.16);
  --coal-mut:rgba(250,250,249,.62);
  --coal-mut-2:rgba(250,250,249,.44);

  --ember:#E8590C; --ember-2:#C94A08; --ember-bg:#FCEEE4;

  --s-ind-bg:#EEEDFD;  --s-ind:#4F46B8;
  --s-amber-bg:#FEF3DC;--s-amber:#9A6A15;
  --s-green-bg:#E7F6EC;--s-green:#248A3D;

  --serif:'Iowan Old Style','Palatino Linotype',Palatino,'Book Antiqua',Georgia,'Times New Roman',serif;
  --sans:'Satoshi',-apple-system,'Helvetica Neue',Arial,sans-serif;

  --max:1280px;
  --gutter:clamp(20px,4vw,64px);
  --r:2px; --r-pill:980px;
  --shadow-card:0 2px 12px rgba(16,14,12,.05);
  --shadow-pop:0 32px 90px -30px rgba(16,14,12,.55);
  --ease:cubic-bezier(.28,.11,.32,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ background:var(--paper); scroll-behavior:smooth; }
body{
  font-family:var(--sans); font-size:16px; line-height:1.6; font-weight:400;
  color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
[hidden]{ display:none !important; }
h1,h2,h3,h4{ margin:0; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
/* height:auto is load-bearing. The width/height HTML attributes
   (there for CLS) map to presentational hints, and the height hint
   overrides any aspect-ratio we set — which leaves a row of images
   at four different heights. */
img{ display:block; max-width:100%; height:auto; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; }
ul{ list-style:none; margin:0; padding:0; }
figure{ margin:0; }
::selection{ background:var(--ink); color:var(--paper); }
.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; }
:focus-visible{ outline:2px solid var(--ember); outline-offset:3px; }

.wrap{ width:100%; max-width:var(--max); margin:0 auto; padding-inline:var(--gutter); }
.num{ font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1; }

/* ---------- type scale ---------- */
.display-1,.display-2,.display-3{
  font-family:var(--serif); font-weight:400; letter-spacing:-.015em;
  line-height:1.06; color:var(--ink); text-wrap:balance;
}
.display-1{ font-size:clamp(2.9rem,6.4vw,4.9rem); }
.display-2{ font-size:clamp(2rem,3.5vw,2.9rem); line-height:1.1; }
.display-3{ font-size:clamp(1.4rem,2vw,1.75rem); line-height:1.2; }
.display-4{ font-family:var(--serif); font-weight:400; letter-spacing:-.005em; font-size:1.35rem; line-height:1.28; color:var(--ink); }
.lead{ font-size:clamp(1rem,1.2vw,1.14rem); line-height:1.6; color:var(--ink-2); max-width:52ch; font-weight:400; }
.eyebrow{ font-size:.72rem; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:var(--mut-2); display:block; }

/* ---------- buttons — squared, quiet ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-size:.88rem; font-weight:500; letter-spacing:.01em;
  padding:13px 24px; border-radius:var(--r);
  background:var(--ink); color:var(--paper); border:1px solid var(--ink); cursor:pointer;
  transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), opacity .25s var(--ease);
}
.btn:hover{ background:var(--coal-2); border-color:var(--coal-2); }
.btn-outline{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn-outline:hover{ background:transparent; border-color:var(--ink); }
.btn svg{ width:15px; height:15px; flex:none; }

/* ============================================================
   HEADER — dark, sticky, hairline
   ============================================================ */
.site-head{
  position:sticky; top:0; z-index:60;
  background:rgba(16,14,12,.82); color:var(--paper);
  backdrop-filter:saturate(160%) blur(18px); -webkit-backdrop-filter:saturate(160%) blur(18px);
  border-bottom:1px solid var(--coal-line);
}
.head-in{ display:flex; align-items:center; gap:30px; height:64px; }
.wordmark{ display:flex; align-items:center; gap:8px; font-weight:500; letter-spacing:-.01em; font-size:1.02rem; line-height:1; color:var(--paper); white-space:nowrap; }
.wordmark svg{ width:15px; height:15px; color:var(--ember); flex:none; }
.wordmark .dot{ color:var(--ember); }
.head-nav{ display:flex; align-items:center; gap:28px; margin-left:auto; }
.head-nav a{ font-size:.86rem; font-weight:400; color:var(--coal-mut); transition:color .25s var(--ease); }
.head-nav a:hover{ color:var(--paper); }
.head-cta{ display:flex; align-items:center; gap:18px; }
.head-cta .signin{ font-size:.86rem; font-weight:400; color:var(--coal-mut); transition:color .25s var(--ease); }
.head-cta .signin:hover{ color:var(--paper); }
.site-head .btn{ padding:9px 18px; font-size:.84rem; background:var(--paper); color:var(--ink); border-color:var(--paper); }
.site-head .btn:hover{ background:#fff; border-color:#fff; }

.resume-bar{ background:var(--coal-2); color:var(--paper); font-size:.8rem; position:relative; z-index:70; border-bottom:1px solid var(--coal-line); }
.resume-bar .wrap{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding-block:8px; }
.resume-bar b{ font-weight:500; }
.resume-bar .spacer{ flex:1; }
.resume-bar a{ background:var(--paper); color:var(--ink); border-radius:var(--r); padding:5px 13px; font-weight:500; font-size:.78rem; }

/* ============================================================
   HERO — full-bleed photograph, serif headline, terms strip
   ============================================================ */
.hero{
  position:relative; color:var(--paper); background:var(--coal);
  display:flex; flex-direction:column; justify-content:flex-end;
  min-height:min(92vh,860px); overflow:hidden;
}
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg picture{ display:block; width:100%; height:100%; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:center 40%; }
/* The photograph has to survive the scrim: dark enough for ivory
   type everywhere the copy sits, still legibly a fireplace. */
.hero-bg::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(16,14,12,.62) 0%, rgba(16,14,12,.28) 42%, rgba(16,14,12,.78) 100%),
    linear-gradient(90deg, rgba(16,14,12,.55) 0%, rgba(16,14,12,.12) 60%);
}
.hero-in{ position:relative; z-index:1; padding-block:clamp(90px,12vw,150px) clamp(56px,7vw,96px); }
.hero .display-1{ color:var(--paper); max-width:14ch; }
.hero .lead{ color:rgba(250,250,249,.85); margin-top:22px; max-width:44ch; }
.cta-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:34px; }
.hero .btn{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.hero .btn:hover{ background:#fff; border-color:#fff; }
.hero .btn-outline{ background:transparent; color:var(--paper); border-color:rgba(250,250,249,.38); }
.hero .btn-outline:hover{ border-color:var(--paper); }
.hero-note{ margin-top:20px; font-size:.8rem; color:var(--coal-mut-2); }

/* the terms — four facts of the arrangement, set like a logo bar */
.hero-strip{ position:relative; z-index:1; border-top:1px solid var(--coal-line); background:rgba(16,14,12,.45); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.terms-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.terms-grid div{ padding:22px 26px 24px 0; border-right:1px solid var(--coal-line); }
.terms-grid div:last-child{ border-right:0; }
.terms-grid div:not(:first-child){ padding-left:26px; }
.terms-grid b{ display:block; font-size:.95rem; font-weight:500; color:var(--paper); }
.terms-grid span{ display:block; margin-top:4px; font-size:.82rem; color:var(--coal-mut-2); }

/* ============================================================
   STATEMENT — one large line, nothing else
   ============================================================ */
.statement{ background:var(--paper); padding:clamp(72px,10vw,140px) 0; }
.statement p{
  font-size:clamp(1.45rem,2.6vw,2.05rem); line-height:1.4; font-weight:500;
  letter-spacing:-.01em; color:var(--ink); max-width:26em; text-wrap:balance;
}
.statement p a{ color:var(--mut); transition:color .25s var(--ease); }
.statement p a:hover{ color:var(--ink); }

/* ============================================================
   SECTIONS
   ============================================================ */
.sec{ padding:clamp(64px,8vw,110px) 0; border-top:1px solid var(--line); background:var(--paper); }
.sec-head{ max-width:52ch; }
.sec-head .display-2{ margin-top:16px; }

/* the dark band that holds the portal */
.sec-dark{ background:var(--coal); border-top:0; color:var(--paper); }
.sec-dark .eyebrow{ color:var(--coal-mut-2); }
.sec-dark .display-2{ color:var(--paper); }
.sec-dark .sec-sub{ margin-top:14px; font-size:.95rem; color:var(--coal-mut); max-width:52ch; }
.mock-frame{ margin-top:clamp(40px,5vw,64px); container-type:inline-size; }

/* ============================================================
   THE PORTAL MOCKUP — a lit screen on near-black
   ============================================================ */
.mock{
  font-size:clamp(7px,.86vw,11.6px);        /* fallback */
  font-size:clamp(7px,1.06cqi,11.6px);      /* tracks the container */
  position:relative; text-align:left;
  border-radius:.5em; overflow:hidden;
  background:var(--paper); border:1px solid rgba(250,250,249,.12);
  box-shadow:0 60px 160px -40px rgba(0,0,0,.85);
  color:var(--ink);
}
.mock-top{
  display:flex; align-items:center; gap:.55em; padding:.85em 1.1em;
  border-bottom:1px solid var(--line);
  background:rgba(250,250,249,.8);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.mock-dot{ width:.68em; height:.68em; border-radius:50%; background:var(--paper-3); flex:none; }
.mock-ttl{ margin-left:.5em; font-size:.86em; font-weight:500; color:var(--mut); }
.mock-live{
  margin-left:auto; display:flex; align-items:center; gap:.45em;
  font-size:.78em; font-weight:500; color:var(--s-green);
  background:var(--s-green-bg); border-radius:var(--r-pill); padding:.25em .8em;
}
.mock-live i{ width:.5em; height:.5em; border-radius:50%; background:currentColor; animation:fmLive 2s ease-in-out infinite; }
@keyframes fmLive{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }

.mock-body{ display:grid; grid-template-columns:13em minmax(0,1fr); }
.mock-rail{ border-right:1px solid var(--line); padding:.9em .7em; display:grid; gap:.15em; align-content:start; background:rgba(244,242,238,.55); }
.mock-nav{ display:flex; align-items:center; gap:.5em; font-size:.86em; font-weight:500; color:var(--mut); padding:.6em .7em; border-radius:.3em; }
.mock-nav.on{ background:var(--ink); color:var(--paper); }
.mock-nav b{ margin-left:auto; font-size:.82em; font-weight:600; color:var(--ember); background:var(--ember-bg); border-radius:var(--r-pill); padding:0 .5em; min-width:1.6em; text-align:center; }
.mock-nav.on b{ background:rgba(255,255,255,.16); color:var(--paper); }

.mock-main{ padding:1em; display:grid; grid-template-columns:minmax(0,1fr); gap:.85em; align-content:start; min-width:0; }
.mock-kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:.65em; }
.mock-kpi{ border:1px solid var(--line); border-radius:.35em; padding:.8em .85em; background:var(--paper); }
.mock-kpi span{ display:block; font-size:.76em; font-weight:500; color:var(--mut-2); }
.mock-kpi b{ display:block; font-size:1.55em; font-weight:600; letter-spacing:-.02em; margin-top:.15em; color:var(--ink); }
.mock-kpi.k-ember{ background:var(--ember-bg); border-color:transparent; }
.mock-kpi.k-ember b{ color:var(--ember-2); }
.mock-kpi.k-ind{ background:var(--s-ind-bg); border-color:transparent; }
.mock-kpi.k-ind b{ color:var(--s-ind); }
.mock-kpi.k-green{ background:var(--s-green-bg); border-color:transparent; }
.mock-kpi.k-green b{ color:var(--s-green); }
.mock-kpi b.bump{ animation:fmBump .7s var(--ease); }
@keyframes fmBump{ 0%{ transform:scale(1); } 34%{ transform:scale(1.13); } 100%{ transform:scale(1); } }

.board{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.6em; }
.col{ background:var(--paper-2); border:1px solid var(--line); border-radius:.35em; padding:.65em .5em; min-height:14em; }
.col-h{ display:flex; align-items:center; gap:.4em; margin-bottom:.65em; padding:0 .25em; }
.col-h i{ width:.5em; height:.5em; border-radius:50%; background:var(--hue,var(--mut-2)); flex:none; }
.col-h span{ font-size:.78em; font-weight:600; color:var(--ink-2); }
.col-h b{ margin-left:auto; font-size:.78em; font-weight:600; color:var(--mut); }
.col[data-col="new"]{ --hue:var(--ember); }
.col[data-col="sched"]{ --hue:var(--s-ind); }
.col[data-col="site"]{ --hue:var(--s-amber); }
.col[data-col="done"]{ --hue:var(--s-green); }

.lane{ display:grid; gap:.45em; align-content:start; }
.kcard{ background:var(--paper); border:1px solid var(--line); border-radius:.3em; padding:.55em .6em; box-shadow:var(--shadow-card); will-change:transform; }
.kcard .kt{ font-size:.8em; font-weight:500; line-height:1.3; color:var(--ink); }
.kcard .km{ display:flex; align-items:center; gap:.4em; margin-top:.3em; font-size:.76em; color:var(--mut); }
.kcard .kdot{ width:.42em; height:.42em; border-radius:50%; background:var(--hue,var(--mut-2)); flex:none; }
/* flash on landing — never animate transform here, the FLIP owns it */
.kcard.moved{ animation:fmLand .7s var(--ease); }
@keyframes fmLand{
  0%{ border-color:var(--hue,var(--ember)); box-shadow:0 0 0 3px color-mix(in srgb, var(--hue,var(--ember)) 14%, transparent); }
  100%{ border-color:var(--line); box-shadow:var(--shadow-card); }
}

.toast{
  position:absolute; right:1.1em; bottom:1.1em; z-index:5;
  display:flex; align-items:center; gap:.75em;
  background:rgba(255,255,255,.86); color:var(--ink);
  border:1px solid var(--line); border-radius:.4em;
  padding:.7em .9em; box-shadow:0 24px 60px -24px rgba(0,0,0,.4);
  backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px);
  transform:translateY(1.2em); opacity:0; pointer-events:none;
  transition:transform .5s var(--ease), opacity .35s var(--ease);
}
.toast.in{ transform:none; opacity:1; }
.toast .tico{ width:1.9em; height:1.9em; border-radius:.3em; flex:none; display:grid; place-items:center; background:var(--ember-bg); color:var(--ember-2); }
.toast .tico svg{ width:1em; height:1em; }
.toast .tt{ display:block; font-size:.88em; font-weight:600; letter-spacing:-.01em; }
.toast .tm{ display:block; font-size:.79em; color:var(--mut); margin-top:.1em; }
.toast .tpay{ margin-left:.7em; font-size:1em; font-weight:600; color:var(--ember-2); }

/* ============================================================
   CAPABILITY — a picture each, one line each
   ============================================================ */
.cap{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,34px); margin-top:clamp(40px,5vw,56px); }
.cap-item figure{ border-radius:var(--r); overflow:hidden; background:var(--paper-2); aspect-ratio:4/3; }
.cap-item img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.cap-item:hover img{ transform:scale(1.025); }
.cap-item h3{ margin:22px 0 8px; }
.cap-item p{ font-size:.94rem; color:var(--mut); line-height:1.55; max-width:34ch; }

/* ============================================================
   WHAT YOU FIT — an image row, captions only
   ============================================================ */
.kit{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.6vw,22px); margin-top:clamp(40px,5vw,56px); }
/* Three of the four sources are product shots on white, so they
   letterbox inside a 4:3 crop no matter what. Read as product
   cards on purpose — white field, hairline edge — rather than as
   photographs that failed to bleed. */
.kit figure img{
  width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--r); background:#fff; border:1px solid var(--line);
}
.kit figcaption{ margin-top:12px; font-size:.83rem; color:var(--mut); }
.kit figcaption b{ display:block; color:var(--ink); font-weight:500; font-size:.9rem; }

/* ============================================================
   PROCESS — four steps, one line each
   ============================================================ */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px 22px; margin-top:clamp(40px,5vw,56px); }
.step{ border-top:1px solid var(--line-2); padding-top:20px; }
.step .n{ display:block; font-family:var(--serif); font-size:.95rem; color:var(--mut-2); font-variant-numeric:tabular-nums; }
.step h3{ margin:14px 0 8px; font-size:1.25rem; }
.step p{ font-size:.92rem; color:var(--mut); line-height:1.5; }

/* ============================================================
   CLOSE — the dark photograph band
   ============================================================ */
.close{ position:relative; color:var(--paper); padding:clamp(72px,9vw,130px) 0; overflow:hidden; background:var(--coal); }
.close-bg{ position:absolute; inset:0; z-index:0; }
.close-bg picture{ display:block; width:100%; height:100%; }
.close-bg img{ width:100%; height:100%; object-fit:cover; }
/* dark enough behind the copy on the left, clearly a fire feature
   on the right — the photo has to survive the scrim */
.close-bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(16,14,12,.97) 0%, rgba(16,14,12,.88) 38%, rgba(16,14,12,.42) 100%);
}
.close .wrap{ position:relative; z-index:1; }
.close .eyebrow{ color:var(--coal-mut-2); }
.close .display-2{ color:var(--paper); margin-top:16px; }
.close .lead{ color:var(--coal-mut); margin-top:18px; max-width:42ch; }
.close .cta-row{ margin-top:34px; }
.close .btn{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.close .btn:hover{ background:#fff; border-color:#fff; }
.close .btn-outline{ background:transparent; color:var(--paper); border-color:rgba(250,250,249,.38); }
.close .btn-outline:hover{ border-color:var(--paper); }
.req{ display:grid; grid-template-columns:repeat(4,1fr); margin-top:clamp(48px,6vw,72px); border-top:1px solid var(--coal-line); }
.req div{ padding:24px 22px 0 0; border-right:1px solid var(--coal-line); }
.req div:last-child{ border-right:0; }
.req div:not(:first-child){ padding-left:22px; }
.req b{ display:block; font-size:.92rem; font-weight:500; }
.req span{ display:block; margin-top:5px; font-size:.83rem; color:var(--coal-mut-2); line-height:1.45; }

/* ============================================================
   FOOTER — dark, quiet
   ============================================================ */
.site-foot{ background:var(--coal); color:var(--coal-mut); border-top:1px solid var(--coal-line); padding:40px 0 48px; font-size:.85rem; }
.site-foot .wordmark{ color:var(--paper); }
.foot-in{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.foot-links{ display:flex; gap:24px; margin-left:auto; flex-wrap:wrap; }
.foot-links a{ font-weight:400; color:var(--coal-mut); transition:color .25s var(--ease); }
.foot-links a:hover{ color:var(--paper); }
.foot-fine{ margin-top:22px; font-size:.8rem; color:var(--coal-mut-2); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .cap{ grid-template-columns:1fr; gap:34px; }
  .cap-item figure{ aspect-ratio:16/9; }
  .kit{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .terms-grid{ grid-template-columns:repeat(2,1fr); }
  .terms-grid div{ padding:20px 22px 20px 0; }
  .terms-grid div:not(:first-child){ padding-left:0; }
  .terms-grid div:nth-child(even){ padding-left:22px; }
  .terms-grid div:nth-child(2n){ border-right:0; }
  .terms-grid div:nth-child(-n+2){ border-bottom:1px solid var(--coal-line); }
  .req{ grid-template-columns:repeat(2,1fr); }
  .req div:nth-child(2n){ border-right:0; }
  .req div:nth-child(-n+2){ padding-bottom:24px; border-bottom:1px solid var(--coal-line); }
  .close-bg::after{ background:linear-gradient(180deg, rgba(16,14,12,.92) 0%, rgba(16,14,12,.82) 100%); }
}
@media (max-width:720px){
  .head-nav{ display:none; }
  .head-cta{ margin-left:auto; }
  .head-in{ height:58px; }
  .btn{ padding:12px 20px; }
  .hero{ min-height:78vh; }

  /* the rail goes — the nav is not the point — and the base size
     goes UP so the numbers and column headers stay readable. The
     four columns fit because the rail's width is now theirs. */
  .mock{ font-size:10.6px; }
  .mock-body{ grid-template-columns:minmax(0,1fr); }
  .mock-rail{ display:none; }
  .mock-main{ padding:.85em; gap:.7em; }
  .board{ gap:.42em; }
  .col{ min-height:12.5em; padding:.55em .38em; }
  .col-h{ margin-bottom:.5em; gap:.3em; }
  .kcard{ padding:.5em; }
  .toast{ right:.75em; bottom:.75em; left:.75em; }

  .steps{ grid-template-columns:1fr; }
  .terms-grid{ grid-template-columns:1fr; }
  .terms-grid div{ border-right:0 !important; border-bottom:1px solid var(--coal-line); padding:16px 0 !important; }
  .terms-grid div:last-child{ border-bottom:0; }
  .req{ grid-template-columns:1fr; }
  .req div{ border-right:0; border-bottom:0 !important; padding:18px 0 0 !important; }
  .foot-links{ margin-left:0; width:100%; }
}
@media (max-width:400px){
  .mock{ font-size:9.6px; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .toast{ transform:none; opacity:1; }
}