/* Concept 1 · Homevia design family (2026-11-10)
   Measured from homevia.framer.website at 1440px:
   white page (#FFF), ink #222 with 70% / 60% / 40% tints, 4% ink fills for quiet surfaces, black footer,
   1080px content column, 60px section padding, Neue Montreal Medium headings 40-48px at -2% tracking,
   Inter Display numerals, dark buttons with a 10px radius, white pill buttons on dark, 40px pill labels,
   frosted info panels (white 70%, 17px blur, 16px radius) on 349x464 cards, text-roll button hovers.
   Neue Montreal is a paid face, so headings use Inter Tight (closest free grotesk) and numerals Inter.
   Owner's choice: sans headings with SoCredit's italic serif kept for accent words. */
:root{
  --pearl:#FFFFFF; --pearl-2:#F6F5F3; --pearl-3:#EDEBE7; --white:#FFFFFF;
  --charcoal:#222222; --charcoal-2:#2B2B2B; --charcoal-3:#111111;
  --graphite:#5F5F5F; --stone:#8E8E8E; --silver:#CFCFCF;
  --ink:#222222; --ink-2:#5F5F5F; --ink-3:#8E8E8E; --ink-ghost:rgba(34,34,34,.4);
  --fill:#F6F6F6; --fill-2:#EEEEEE;
  --hair:rgba(34,34,34,.08); --hair-2:rgba(34,34,34,.16);
  --black:#000000; --taupe:#A39587; --warm-1:#F4F1ED; --warm-2:#E9E4DD;
  --sans:"Inter Tight","Inter",system-ui,sans-serif; --text:"Inter",system-ui,sans-serif; --serif:"Instrument Serif",Georgia,serif;
  --display:var(--sans); --body:var(--text);
  --max:1140px; --gutter:clamp(1rem,4vw,1.875rem);
  --sec-y:clamp(3.5rem,7vw,6.25rem);
  --r-card:1.25rem; --r-btn:.625rem; --r-panel:1rem; --r-pill:2.5rem;
  --btn-h:3rem; --blur-panel:17px; --blur-reveal:6px;
  --shadow:0 1px 2px rgba(34,34,34,.04),0 12px 30px -18px rgba(34,34,34,.18);
  --shadow-card-hover:0 1.5rem 2.75rem -1.75rem rgba(60,48,36,.45);
  --d-roll:420ms; --ease-roll:cubic-bezier(.65,0,.35,1);
  --metal:linear-gradient(100deg,#8E8E8E 0%,#D6D6D6 32%,#9A9A9A 55%,#E2E2E2 72%,#8A8A8A 100%);
  --metal-ink:linear-gradient(100deg,#3A3A3A 0%,#8A8A8A 35%,#4A4A4A 58%,#9C9C9C 76%,#3A3A3A 100%);
}
html,body{background:var(--pearl)}
body{font:400 1rem/1.5 var(--text);letter-spacing:-.01em;color:var(--ink)}

/* ---------- Type ---------- */
.d{font-family:var(--sans);font-weight:500;letter-spacing:-.02em;line-height:1.1}
.d em{font-family:var(--serif);font-weight:400;font-style:italic;letter-spacing:0;font-size:1.08em}
h2.d{font-size:clamp(2rem,3.4vw,3rem)}
.lede{font-size:1rem;line-height:1.5;color:var(--ink-2);letter-spacing:-.01em}
.fine{color:var(--ink-3)}
.label{font:500 .8125rem var(--text);letter-spacing:0;text-transform:none;color:var(--ink-2)}
.mark{font-family:var(--serif);font-weight:400;letter-spacing:-.01em}
.pill{display:inline-flex;align-items:center;gap:.5rem;justify-self:start;padding:.55rem .85rem;border-radius:var(--r-pill);box-shadow:inset 0 0 0 var(--line) var(--hair-2);font:500 .875rem/1 var(--text);color:var(--ink-2);background:var(--white)}
.pill::before{content:"";width:.375rem;height:.375rem;border-radius:50%;background:var(--taupe)}

/* ---------- Sections ---------- */
.pad{padding-block:var(--sec-y)}
.tone{background:var(--pearl)}
.sec-head{gap:.9rem;margin-bottom:clamp(1.75rem,3.5vw,2.75rem)}
.sec-head.center{justify-items:center;text-align:center}
.sec-head.center .lede{max-width:46ch;margin-inline:auto}
@media (min-width:980px){
  .sec-head.split{grid-template-columns:1fr 1fr;grid-template-areas:"pill pill" "h lede";align-items:end;column-gap:4rem}
  .sec-head.split .pill{grid-area:pill}.sec-head.split h2{grid-area:h}.sec-head.split .lede{grid-area:lede;justify-self:end;max-width:34ch}
}
.hero + section{box-shadow:none}

/* ---------- Buttons: Homevia proportions + text-roll hover ---------- */
.btn{min-height:var(--btn-h);padding:0 1.5rem;border-radius:var(--r-btn);font:500 .9375rem/1 var(--text);letter-spacing:-.01em;text-transform:none;gap:.6rem}
.btn::before{display:none}
.btn .roll{display:inline-block;overflow:hidden;height:1.2em;line-height:1.2em;vertical-align:middle}
.btn .roll>span{display:block;transition:transform var(--d-roll) var(--ease-roll);text-shadow:0 1.2em 0 currentColor}
@media (hover:hover) and (pointer:fine){.btn:hover .roll>span{transform:translateY(-1.2em)}}
.btn-silver{background:var(--charcoal);background-image:none;background-color:var(--charcoal);color:var(--white);box-shadow:none}
.btn-silver::after{display:none}
.btn-silver:hover{background-color:var(--black)}
.btn-ghost,.btn-line{color:var(--ink);box-shadow:inset 0 0 0 var(--line) var(--hair-2);background:transparent}
.btn-dark{background:var(--charcoal);color:var(--white)}
/* On dark/photo surfaces: Homevia's white pill */
.hero.hv .btn-silver,.final .btn-silver,.foot .btn-silver{background-color:var(--white);color:var(--ink);border-radius:var(--r-pill)}
.hero.hv .btn-ghost,.final .btn-ghost{color:var(--white);box-shadow:inset 0 0 0 var(--line) rgba(255,255,255,.35);border-radius:var(--r-pill)}

/* ---------- Header ---------- */
.past-hero .hdr,.no-hero .hdr{background:rgba(255,255,255,.88);color:var(--ink);border-color:var(--hair)}
.burger{font:500 .8125rem var(--text);letter-spacing:0;text-transform:none}
.mark{font-size:1.85rem}

/* ---------- Benefits + Services tiles: quiet 4% fills, no borders ---------- */
.checklist li,.issues li{background:var(--fill);border:0;box-shadow:none;border-radius:var(--r-panel);font-weight:500}
.checklist .ck,.issues .ck{color:var(--ink)}
.expect .story::before{background:var(--hair-2)}
@media (hover:hover) and (pointer:fine){
  .issues li:hover{background:var(--fill-2);border-color:transparent;box-shadow:none;transform:translateY(calc(-1 * var(--lift) / 2))}
  .issues li:hover .ck circle{fill:var(--charcoal);stroke:var(--charcoal)}
}

/* ---------- Get Approved: warm neutral studio instead of black ---------- */
.phones-sec{background:var(--pearl)}
.stage{background:radial-gradient(70% 60% at 62% 18%,var(--white) 0%,transparent 70%),linear-gradient(180deg,var(--warm-1) 0%,var(--warm-2) 100%);box-shadow:none;border-radius:var(--r-card)}
.stage::before{background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(163,149,135,.12) 100%)}
.stage::after{opacity:.12;mix-blend-mode:multiply}
.iphone.up{box-shadow:inset 0 0 0 var(--line) rgba(255,255,255,.16),1.4rem 1.6rem 2.6rem -1.2rem rgba(60,48,36,.45);-webkit-box-reflect:below .35rem linear-gradient(transparent 88%,rgba(255,255,255,.18))}
.iphone.flat{box-shadow:inset 0 0 0 var(--line) rgba(255,255,255,.18),0 2rem 2.2rem -.6rem rgba(60,48,36,.5)}
.floor-shadow{background:radial-gradient(50% 50% at 50% 50%,rgba(60,48,36,.45) 0%,transparent 100%)}
.iphone:focus-visible{outline-color:var(--ink)}

/* ---------- Pricing: Homevia's 349x464 cards with a frosted base panel (no imagery) ---------- */
#pricing{background:var(--pearl);color:var(--ink)}
#pricing .lede,#pricing .fine{color:var(--ink-2)}
#pricing .btn-line{color:var(--ink);box-shadow:inset 0 0 0 var(--line) var(--hair-2)}
#pricing .price{background:linear-gradient(160deg,var(--warm-1) 0%,var(--pearl-3) 100%);border:0;border-radius:var(--r-card);box-shadow:none;padding:1.25rem;gap:1rem;color:var(--ink)}
#pricing .price h3{font-family:var(--sans);font-weight:500;font-size:1.375rem;letter-spacing:-.02em;line-height:1.2;color:var(--ink)}
#pricing .flash{background:var(--white);color:var(--ink);box-shadow:none;font:500 .75rem/1 var(--text);letter-spacing:0;text-transform:none;padding:.45rem .7rem;border-radius:var(--r-pill)}
#pricing .desc,#pricing .incl li{color:var(--ink-2)}
#pricing .incl{border-top-color:var(--hair)}
#pricing .incl .ck,#pricing .eta .ck{color:var(--ink)}
#pricing .eta{color:var(--ink)}
#pricing .price-foot{background:rgba(255,255,255,.7);border:0;border-radius:var(--r-panel);-webkit-backdrop-filter:blur(var(--blur-panel));backdrop-filter:blur(var(--blur-panel));padding:.9rem .9rem .9rem 1.1rem}
#pricing .amt s{color:var(--ink-3);text-decoration-color:var(--ink-3);font:400 .9375rem var(--text)}
#pricing .amt b{font-family:var(--text);font-weight:500;font-size:2rem;letter-spacing:-.03em;line-height:1;color:var(--ink)}
#pricing .price .btn{background:var(--charcoal);background-image:none;color:var(--white);box-shadow:none;border-radius:var(--r-btn)}
@media (hover:hover) and (pointer:fine){
  #pricing .prices>.price.is-in:hover{transform:translateY(calc(-1 * var(--lift)));box-shadow:var(--shadow-card-hover);border-color:transparent}
  #pricing .price:hover .price-foot{background:rgba(255,255,255,.86)}
}
@media (min-width:1180px){#pricing .prices>.price:nth-child(-n+3){min-height:29rem}#pricing .prices>.price.simple{min-height:14rem}}
@media (max-width:759px){
  #pricing .ptabs button{background:var(--white);color:var(--ink);border-color:var(--hair-2);font:500 .875rem var(--text);letter-spacing:0}
  #pricing .ptabs button[aria-current]{background:var(--charcoal);color:var(--white);border-color:var(--charcoal)}
  #pricing .rail-m>.price{box-shadow:none}
  #pricing .amt b{font-size:1.75rem}
}

/* ---------- Pricing page: same card system ----------
   (copied from the homepage pricing rules; scoped under .no-hero main)
   ---------- Pricing: Homevia's 349x464 cards with a frosted base panel (no imagery) ---------- */
#pricing{background:var(--pearl);color:var(--ink)}
.no-hero main .lede,.no-hero main .fine{color:var(--ink-2)}
.no-hero main .btn-line{color:var(--ink);box-shadow:inset 0 0 0 var(--line) var(--hair-2)}
.no-hero main .price{background:linear-gradient(160deg,var(--warm-1) 0%,var(--pearl-3) 100%);border:0;border-radius:var(--r-card);box-shadow:none;padding:1.25rem;gap:1rem;color:var(--ink)}
.no-hero main .price h3{font-family:var(--sans);font-weight:500;font-size:1.375rem;letter-spacing:-.02em;line-height:1.2;color:var(--ink)}
.no-hero main .flash{background:var(--white);color:var(--ink);box-shadow:none;font:500 .75rem/1 var(--text);letter-spacing:0;text-transform:none;padding:.45rem .7rem;border-radius:var(--r-pill)}
.no-hero main .desc,.no-hero main .incl li{color:var(--ink-2)}
.no-hero main .incl{border-top-color:var(--hair)}
.no-hero main .incl .ck,.no-hero main .eta .ck{color:var(--ink)}
.no-hero main .eta{color:var(--ink)}
.no-hero main .price-foot{background:rgba(255,255,255,.7);border:0;border-radius:var(--r-panel);-webkit-backdrop-filter:blur(var(--blur-panel));backdrop-filter:blur(var(--blur-panel));padding:.9rem .9rem .9rem 1.1rem}
.no-hero main .amt s{color:var(--ink-3);text-decoration-color:var(--ink-3);font:400 .9375rem var(--text)}
.no-hero main .amt b{font-family:var(--text);font-weight:500;font-size:2rem;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.no-hero main .price .btn{background:var(--charcoal);background-image:none;color:var(--white);box-shadow:none;border-radius:var(--r-btn)}
@media (hover:hover) and (pointer:fine){
  .no-hero main .prices>.price.is-in:hover{transform:translateY(calc(-1 * var(--lift)));box-shadow:var(--shadow-card-hover);border-color:transparent}
  .no-hero main .price:hover .price-foot{background:rgba(255,255,255,.86)}
}
@media (min-width:1180px){.no-hero main .prices>.price:nth-child(-n+3){min-height:29rem}.no-hero main .prices>.price.simple{min-height:14rem}}
@media (max-width:759px){
  .no-hero main .ptabs button{background:var(--white);color:var(--ink);border-color:var(--hair-2);font:500 .875rem var(--text);letter-spacing:0}
  .no-hero main .ptabs button[aria-current]{background:var(--charcoal);color:var(--white);border-color:var(--charcoal)}
  .no-hero main .rail-m>.price{box-shadow:none}
  .no-hero main .amt b{font-size:1.75rem}
}

/* ---------- Get Started: Homevia "Crafting Spaces" editorial: labelled rows left, detail right ---------- */
.craft-sec{background:var(--pearl)}
.craft{display:grid;gap:1.25rem}
.craft-list{list-style:none;margin:0;padding:0;display:grid;gap:.25rem}
.craft-row{width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1.25rem;border:0;border-radius:var(--r-card);background:transparent;cursor:pointer;text-align:left;font:500 clamp(1.5rem,2.8vw,2.5rem)/1.1 var(--sans);letter-spacing:-.02em;color:var(--ink-ghost);transition:background-color var(--d-hover) ease,color var(--d-hover) ease}
.craft-row .n{font:400 1rem/1 var(--text);letter-spacing:0;padding-top:.35em;color:inherit}
.craft-row[aria-selected="true"]{background:var(--fill);color:var(--ink)}
@media (hover:hover) and (pointer:fine){.craft-row:hover{color:var(--ink)}}
.craft-row:focus-visible{outline:var(--focus-w) solid var(--ink);outline-offset:var(--focus-off)}
.craft-mob{display:none}
.craft-panel{display:grid;align-content:start;gap:1.25rem}
.craft-pane{display:grid;gap:.75rem;padding:clamp(1.5rem,3vw,2.25rem);border-radius:var(--r-card);background:linear-gradient(160deg,var(--warm-1) 0%,var(--pearl-3) 100%);min-height:clamp(16rem,26vw,22rem);align-content:end}
.craft-pane .big{font:500 clamp(5rem,10vw,8.5rem)/.85 var(--text);letter-spacing:-.05em;color:var(--white);margin-bottom:auto}
.craft-pane h3{font:500 1.25rem/1.3 var(--sans);letter-spacing:-.02em}
.craft-pane p{color:var(--ink-2);max-width:40ch}
.js-motion .craft-pane:not([hidden]){animation:sc-pane var(--d-sweep) var(--ease-out)}
@keyframes sc-pane{from{opacity:0;transform:translateY(.75rem)}to{opacity:1;transform:none}}
@media (min-width:980px){.craft{grid-template-columns:1.05fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}}
@media (max-width:979px){
  .craft-panel .craft-pane{display:none}
  .craft-row{font-size:1.375rem;padding:1rem 1rem .35rem;color:var(--ink);pointer-events:none}
  .craft-row[aria-selected="true"]{background:transparent}
  .craft-list>li{background:var(--fill);border-radius:var(--r-card);padding-bottom:1rem}
  .craft-mob{display:block;margin:0 1rem;color:var(--ink-2);font-size:.9375rem}
  .craft-list{gap:.6rem}
}
#how.pad{padding-block:var(--sec-y)}
#how .steps-foot{margin-top:0}

/* ---------- Final CTA keeps its photograph; Homevia-style dark photo band ---------- */
.final .lede{color:rgba(255,255,255,.8)}
.final-note{color:rgba(255,255,255,.6)}

/* ---------- Footer: Homevia black, Inter type ---------- */
.foot.foot-dark{background:var(--black)}
.foot-nav{font:500 .9375rem var(--text)}
.foot-contact,.foot-dark .legal,.foot-dark .copy-line{font-family:var(--text);color:rgba(255,255,255,.6)}

/* ---------- Hero ---------- */
.hero.hv h1{font-family:var(--sans);font-weight:500;letter-spacing:-.035em;line-height:1.02}
@media (min-width:1100px){.hero.hv h1{font-size:min(5rem,5.05vw)}}
.hero.hv .second{font-family:var(--serif);font-style:italic;font-weight:400;color:rgba(255,255,255,.82)}
.hero.hv .second b{font-family:var(--serif);font-style:italic;color:var(--white)}
.hero.hv .sub{color:rgba(255,255,255,.78);font-family:var(--text)}
/* Wordmark: Homevia's oversized sans, pushed back to a near-watermark */
.hv-word{font-family:var(--sans);font-weight:500;letter-spacing:-.05em;font-size:min(21vw,25rem);line-height:.86}
:root{--hv-word-a:.09; --hv-word-b:.03; --hv-word-line:.1}
@media (max-width:759px){
  /* Video on top, copy in its own light band directly below */
  .hero.hv{display:block;min-height:0;background:var(--pearl);color:var(--ink);padding:calc(var(--hdr-h) + 58svh) 0 calc(var(--curtain) + 2rem)}
  .hv-media,.hv-shade{top:0;bottom:auto;height:calc(var(--hdr-h) + 58svh)}
  .hv-shade{background:linear-gradient(180deg,rgba(10,11,12,.5) 0%,rgba(10,11,12,.05) 35%,rgba(10,11,12,.25) 100%)}
  .hv-word{font-size:21.5vw;top:calc(var(--hdr-h) + 1rem)}
  .hv-note{top:calc(var(--hdr-h) + 58svh - 2.25rem);bottom:auto}
  .hero.hv .hero-copy{padding-top:1.75rem}
  .hero.hv h1{color:var(--ink);font-size:clamp(2.25rem,10.4vw,3rem)}
  .hero.hv h1 .metal,.hero.hv h1 .metal .wi{background:var(--metal-ink);-webkit-background-clip:text;background-clip:text}
  .hero.hv .second{color:var(--ink-2)}
  .hero.hv .second b{color:var(--ink)}
  .hero.hv .sub{color:var(--ink-2)}
  .hero.hv .btn-silver{background-color:var(--charcoal);color:var(--white);border-radius:var(--r-btn)}
  .hero + section{border-radius:0;margin-top:0}
}

/* ---------- Reveals: Homevia-style soft rise with a light blur ---------- */
.js-motion:not(.rm) [data-reveal]:not(.is-in):not(.stage):not(.push):not(.craft){filter:blur(var(--blur-reveal))}
.js-motion [data-reveal]{transition:opacity var(--d-reveal) var(--ease-out),transform var(--d-reveal) var(--ease-out),filter var(--d-reveal) var(--ease-out)}

/* ---------- Sub-pages share the system ---------- */
.page-hero h1{font-family:var(--sans);font-weight:500;letter-spacing:-.03em;line-height:1.05;font-size:clamp(2.4rem,5vw,4rem)}
.block h2,.block h3{font-family:var(--sans);font-weight:500;letter-spacing:-.02em}
.block .n{font-family:var(--text);font-style:normal}
.faq details{background:var(--fill);border:0;border-radius:var(--r-panel)}
.field input,.field textarea{background:var(--white);border-color:var(--hair-2);border-radius:var(--r-btn)}
.nav a{font-family:var(--sans);font-weight:500;letter-spacing:-.02em}
.drawer{background:var(--white)}
.drawer-foot a{font-family:var(--sans)}

@media (prefers-reduced-motion:reduce){.btn .roll>span{transition:none}.js-motion .craft-pane:not([hidden]){animation:none}}

/* Fixes after first render */
.craft-pane[hidden]{display:none}
.sec-head.center .pill{justify-self:center}
@media (min-width:1180px){#pricing .prices>.price:nth-child(-n+3){min-height:0}}
:root{--sec-y:clamp(3rem,6vw,5rem)}
@media (max-width:759px){:root{--hv-zoom:1}.hero.hv .hero-copy{padding-top:1.5rem}}

/* Pricing page layout parity with the homepage cards */
.no-hero main .price-body{display:grid;gap:.75rem;flex:1;align-content:start}
.no-hero main .price-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:auto}
.no-hero main .amt{margin:0;flex-wrap:wrap;row-gap:0}
.no-hero main .price .btn{width:auto;margin:0;flex:none}
@media (min-width:1180px){
  .no-hero main .prices>.price.simple{display:flex;align-items:stretch}
  .no-hero main .prices>.price.simple .price-head,.no-hero main .prices>.price.simple .price-body>*,.no-hero main .prices>.price.simple .price-foot>*{grid-area:auto}
}
@media (min-width:1180px){.no-hero main .prices>.price:nth-child(-n+3){min-height:0}}

/* Regular sections are light in the Homevia family; only the hero video, photo CTA and footer stay dark */
.dark{background:var(--pearl-2);color:var(--ink)}
.dark .lede,.dark .fine,.dark .label{color:var(--ink-2)}

/* ===== Final fixes (2026-11-10) ===== */
/* Warm ivory family (owner's #F7F5F0 base) */
:root{
  --pearl:#F7F5F0; --pearl-2:#EFECE5; --pearl-3:#E6E1D8; --white:#FFFFFF;
  --fill:#EFECE6; --fill-2:#E7E3DB; --warm-1:#EFEBE4; --warm-2:#E4DED4;
  --hair:rgba(34,34,34,.09); --hair-2:rgba(34,34,34,.16);
}
.past-hero .hdr,.no-hero .hdr{background:rgba(247,245,240,.9)}
.drawer{background:var(--pearl)}

/* Hero video: real first frame painted behind the footage (loading/error fallback + loop crossfade target) */
.hv-media{background:var(--hv-ink) url("assets/socredit/hero-start-frame.jpg") center/cover no-repeat}
.hv-video{transition:opacity .45s ease}/* ds-allow-hardcode: matches the JS loop-fade window */
.hv-media:not(.hv-loop-fade) .hv-video{transition:none}
.hv-media.hv-loop-fade .hv-video{opacity:0}
.hv-media.hv-failed .hv-video{display:none}
.hv-media{filter:none}
.hv-media.hv-failed,.hv-media.hv-loop-fade{background-blend-mode:normal}

/* Hero headline: smaller, Homevia-like; second line in the serif accent */
.hero.hv h1.hv-title{font-size:clamp(2.2rem,3.9vw,3.75rem);line-height:1.06;letter-spacing:-.03em}
.hero.hv h1.hv-title em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0;font-size:1.06em;color:var(--white)}
.hero.hv .ctas{margin-top:1.5rem}

@media (max-width:759px){
  /* Header / video (true 16:9, nothing forced to full height) / headline + CTA / next section */
  .hero.hv{display:block;min-height:0;padding:var(--hdr-h) 0 2.25rem;background:var(--pearl)}
  .hv-media{position:relative;inset:auto;top:auto;bottom:auto;width:100%;height:auto;aspect-ratio:16/9;overflow:hidden;transform:none}
  .hv-video{width:100%;height:100%;object-fit:contain;object-position:center;transform:scale(1.08);transform-origin:0 0}/* slight crop hides the Kling watermark */
  .hv-shade{top:var(--hdr-h);bottom:auto;height:calc(100vw * 9 / 16);background:linear-gradient(180deg,rgba(10,11,12,.35) 0%,rgba(10,11,12,0) 45%)}
  .hv-word{top:calc(var(--hdr-h) + 2.5vw);font-size:19vw}
  .hv-note{top:calc(var(--hdr-h) + 100vw * 9 / 16 - 2rem);bottom:auto}
  .hero.hv .hero-copy{padding-top:1.5rem}
  .hero.hv h1.hv-title{font-size:clamp(1.75rem,7.4vw,2.2rem);line-height:1.1;color:var(--ink)}
  .hero.hv h1.hv-title em{color:var(--ink)}
  .hero.hv .ctas{margin-top:1.1rem}
}

/* Get Approved: heading above, phones straight on the ivory background */
.phones-grid{grid-template-columns:1fr!important;gap:clamp(.75rem,2vw,1.5rem)}
.phones-copy{max-width:none}
.stage{background:none!important;box-shadow:none;border-radius:0;overflow:visible;aspect-ratio:16/7.4;max-width:68rem;width:100%;margin-inline:auto}
.stage::before,.stage::after{display:none}
.slot-up{right:27%;bottom:6%;width:22%}
.slot-flat{left:25%;bottom:4%;width:22%}
.phones-sec{overflow:hidden}
@media (max-width:759px){.stage{aspect-ratio:1/1.12;margin-inline:0}.slot-up{right:5%;bottom:3%;width:52%}.slot-flat{left:5%;bottom:2%;width:42%}}

/* Get Started: numbered labels on the left, refined dividers, compact */
.craft-list{gap:0;border-top:var(--line) solid var(--hair-2)}
.craft-list>li{border-bottom:var(--line) solid var(--hair-2)}
.craft-row{justify-content:flex-start;gap:1.25rem;padding:1.1rem .25rem;border-radius:0;font-size:clamp(1.4rem,2.3vw,2rem)}
.craft-row .n{order:-1;min-width:2.25rem;padding-top:.45em;font-size:.875rem;color:var(--ink-3)}
.craft-row[aria-selected="true"]{background:transparent;color:var(--ink)}
.craft-row[aria-selected="true"] .n{color:var(--ink)}
@media (max-width:979px){
  .craft-list>li{background:transparent;border-radius:0;padding-bottom:1rem}
  .craft-row{padding:1rem 0 .3rem;font-size:1.25rem}
  .craft-mob{margin:0 0 0 3.5rem}
}

/* Pricing timeline qualifier, inside the card */
.eta-q{margin:-.4rem 0 0 1.55rem;font-size:.75rem;color:var(--ink-3)}

/* Footer: CyberAgent-style centred black footer */
.foot.foot-dark{background:var(--black);border-radius:0;margin-top:0;padding-block:clamp(3.5rem,7vw,5rem) 1.75rem}
.foot-dark .wrap{gap:1.4rem}
.foot-dark .mark{font-size:clamp(3rem,6vw,4.5rem);color:var(--white)}
.foot-nav{gap:.5rem 2rem;color:var(--white)}
.foot-nav a{color:var(--white)}
.foot-contact{color:rgba(255,255,255,.7)}
.foot-contact a{color:var(--white)}
.foot-social{background:var(--white);color:var(--black);box-shadow:none}
.foot-base{flex-direction:column;justify-content:center;border-top:0;margin-top:1rem;padding-top:0;gap:.5rem}
.foot-dark .copy-line{font-size:.75rem;color:rgba(255,255,255,.6)}
.foot-dark .legal{font-size:.75rem;justify-content:center}
.foot-dark .legal a{color:rgba(255,255,255,.6)}

/* ===== Owner round (2026-11-10 late): smaller hero type, CyberAgent-style footer ===== */
.hero.hv h1.hv-title{font-size:clamp(1.85rem,2.75vw,2.7rem);line-height:1.1;letter-spacing:-.025em}
.hero.hv .ctas{margin-top:1.25rem}
@media (max-width:759px){.hero.hv h1.hv-title{font-size:clamp(1.45rem,6.1vw,1.8rem)}}

/* Footer: CyberAgent composition: black, big rounded logo, bold rounded links, white circle icon, bold copyright */
.foot.foot-dark{padding-block:clamp(5rem,11vw,9rem) clamp(4rem,8vw,6.5rem)}
.foot-dark .wrap{gap:0}
.foot-dark .mark{font-size:clamp(3rem,6vw,4.5rem);line-height:1;color:var(--white)}
.foot-nav{margin-top:clamp(1.75rem,3.5vw,2.75rem);gap:.6rem clamp(1.5rem,2.6vw,2.4rem);}
.foot-nav a{color:var(--white)}
.foot-contact{margin-top:1.1rem;color:rgba(255,255,255,.7)}
.foot-social{margin-top:clamp(2rem,4vw,3rem);width:3.75rem;height:3.75rem;background:var(--white);color:var(--black)}
.foot-social svg{width:1.6rem;height:1.6rem}
.foot-base{margin-top:clamp(3rem,6vw,5rem);gap:.6rem}
.foot-dark .copy-line{font-size:.75rem;color:rgba(255,255,255,.6)}
.foot-dark .legal{font-size:.75rem}
.foot-dark .legal a{color:rgba(255,255,255,.6)}
@media (max-width:759px){
  .foot.foot-dark{padding-block:4rem 3.5rem}
  .foot-nav{gap:.75rem 1.4rem}
}

/* ===== Ivory Signature footer (replaces the black footer) ===== */
.foot.foot-ivory{background:var(--pearl);color:var(--ink);border-radius:0;margin-top:0;border-top:var(--line) solid var(--hair);padding-block:clamp(2.25rem,5vw,4rem) 1.25rem;text-align:left}
.foot-ivory .wrap{display:grid;grid-template-columns:1fr;gap:1.6rem}
.fi-top{display:flex;align-items:center;gap:1.25rem}
.foot-ivory .mark{font-family:var(--serif);font-size:clamp(2.4rem,9vw,3rem);line-height:1;color:var(--ink);flex:none}
.fi-rule{flex:1;height:var(--line);background:var(--ink);opacity:.7}
.fi-tag{margin:.75rem 0 0;max-width:34ch;font:400 1rem/1.5 var(--text);color:var(--ink-2)}
.fi-nav{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,auto);grid-auto-flow:column;gap:.75rem 1.5rem;padding-left:1rem;font:500 1.0625rem/1.3 var(--text)}
.fi-nav a{color:var(--ink);text-decoration:none;justify-self:start}
.fi-contact{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem;font:500 .9375rem/1.3 var(--text)}
.fi-item{display:inline-flex;align-items:center;gap:.55rem;color:var(--ink);text-decoration:none}
.fi-item svg{width:1.1rem;height:1.1rem;flex:none}
.fi-sep{width:var(--line);height:2rem;background:var(--hair-2)}
.fi-ig{display:inline-grid;place-items:center;color:var(--ink);margin-left:auto}
.fi-ig svg{width:1.9rem;height:1.9rem}
.fi-base{display:flex;align-items:center;gap:1.25rem;padding-top:1.25rem;border-top:var(--line) solid var(--hair-2)}
.foot-ivory .copy-line{margin:0;font:400 .8125rem var(--text);color:var(--ink)}
.foot-ivory .legal{display:flex;gap:1.25rem;margin:0 0 0 auto;padding:0;border:0;font:400 .8125rem var(--text)}
.foot-ivory .legal a{color:var(--ink);text-decoration:none}
.foot-ivory .fi-base .fi-sep{height:1.75rem}
@media (max-width:400px){.fi-contact{gap:.6rem 1rem}.fi-base{gap:.75rem}.foot-ivory .copy-line,.foot-ivory .legal{font-size:.75rem}.foot-ivory .legal{gap:.9rem}}
@media (min-width:900px){
  .foot.foot-ivory{padding-block:clamp(3.5rem,5vw,4.5rem) 1.5rem}
  .foot-ivory .wrap{grid-template-columns:1.25fr 1fr .9fr;column-gap:clamp(2.5rem,5vw,5rem);row-gap:2.5rem;align-items:start}
  .fi-brand{grid-column:1}
  .fi-nav{grid-column:2;padding-left:0;padding-top:.35rem}
  .fi-contact{grid-column:3;flex-direction:column;align-items:flex-start;gap:.9rem;padding-top:.35rem}
  .fi-contact .fi-sep{display:none}
  .fi-ig{margin-left:0;margin-top:.35rem}
  .foot-ivory .mark{font-size:3.25rem}
  .fi-base{grid-column:1 / -1}
}
/* Footer nav split 3 + 4 like the reference; contact + base rows stay on one line on phones */
.fi-nav{grid-auto-flow:row;grid-template-rows:none}
.fi-nav a:nth-child(-n+3){grid-column:1}
.fi-nav a:nth-child(n+4){grid-column:2}
.fi-nav a:nth-child(1),.fi-nav a:nth-child(4){grid-row:1}
.fi-nav a:nth-child(2),.fi-nav a:nth-child(5){grid-row:2}
.fi-nav a:nth-child(3),.fi-nav a:nth-child(6){grid-row:3}
.fi-nav a:nth-child(7){grid-row:4}
@media (max-width:899px){
  .fi-contact{flex-wrap:nowrap;gap:1rem}
  .fi-base{flex-wrap:nowrap}
  .foot-ivory .legal{flex-wrap:nowrap;white-space:nowrap;flex:none}
}
@media (max-width:400px){.fi-contact{gap:.75rem;font-size:.875rem}.fi-item{gap:.4rem}.fi-ig svg{width:1.7rem;height:1.7rem}}

/* ===== Contact page (Get in Touch) ===== */
.ct-sec{padding-top:calc(var(--hdr-h) + clamp(2rem,5vw,4rem))}
.ct-grid{display:grid;gap:1.5rem;grid-template-areas:"intro" "form" "details"}
.ct-intro{grid-area:intro}.ct-card{grid-area:form}.ct-details{grid-area:details}
.ct-label{display:inline-block;padding:.35rem .8rem;border-radius:var(--r-pill);box-shadow:inset 0 0 0 var(--line) var(--ink);font:500 .75rem/1 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.ct-title{margin-top:.9rem;font-family:var(--serif);font-weight:400;font-size:clamp(2.75rem,6.2vw,4.75rem);line-height:1;letter-spacing:-.01em;color:var(--ink)}
.ct-lede{margin-top:.9rem;max-width:30ch;font-size:clamp(1rem,1.3vw,1.125rem);line-height:1.55;color:var(--ink-2)}
.ct-details{list-style:none;margin:0;padding:0;display:grid;gap:.9rem;font:500 1rem/1.3 var(--text)}
.ct-details li{display:flex;align-items:center;gap:.75rem;color:var(--ink)}
.ct-details svg{width:1.25rem;height:1.25rem;flex:none}
.ct-details a{color:var(--ink);text-decoration:none}
@media (hover:hover) and (pointer:fine){.ct-details a:hover{text-decoration:underline;text-underline-offset:.2em}}
.ct-card{display:grid;gap:1rem;padding:clamp(1.1rem,3vw,1.75rem);background:#FCFBF8;border:var(--line) solid var(--hair-2);border-radius:var(--r-card);box-shadow:0 1px 2px rgba(34,34,34,.04),0 1.5rem 3rem -1.75rem rgba(60,48,36,.35)}/* ds-allow-hardcode: off-white card surface from the reference */
.ct-row{display:grid;gap:1rem}
.ct-field{display:grid;gap:.4rem}
.ct-field label{font:500 .875rem/1.2 var(--text);color:var(--ink)}
.ct-field label small{font-weight:400;color:var(--ink-3)}
.ct-field .req{color:var(--ink)}
.ct-field input,.ct-field textarea,.ct-select select{width:100%;min-height:var(--btn-h);padding:.75rem .9rem;font:400 1rem/1.3 var(--text);color:var(--ink);background:var(--pearl);border:var(--line) solid var(--hair-2);border-radius:var(--r-btn);transition:border-color var(--d-hover) ease,box-shadow var(--d-hover) ease,background-color var(--d-hover) ease;-webkit-appearance:none;appearance:none}
.ct-field textarea{min-height:7.5rem;resize:vertical}
.ct-field input::placeholder,.ct-field textarea::placeholder{color:var(--ink-3)}
.ct-field input:focus,.ct-field textarea:focus,.ct-select select:focus{outline:none;border-color:var(--ink);background:var(--white);box-shadow:0 0 0 3px rgba(34,34,34,.08)}/* ds-allow-hardcode: focus halo */
.ct-select{position:relative}
.ct-select select{padding-right:2.5rem;cursor:pointer}
.ct-select svg{position:absolute;right:.9rem;top:50%;width:1rem;height:1rem;transform:translateY(-50%);pointer-events:none;color:var(--ink)}
.ct-field .err{display:none;font-size:.8125rem;color:var(--err)}
.ct-field.bad .err{display:block}
.ct-field.bad input,.ct-field.bad textarea{border-color:var(--err)}
.ct-hp{position:absolute;width:var(--line);height:var(--line);overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ct-note{margin:0;font-size:.75rem;color:var(--ink-3)}
.ct-submit{position:relative;width:100%;min-height:3.25rem;border-radius:var(--r-pill);background:var(--charcoal);color:var(--white);font:500 .875rem/1 var(--text);letter-spacing:.12em;text-transform:uppercase;gap:.75rem;transition:background-color var(--d-hover) ease,transform var(--d-press) var(--ease-out)}
.ct-submit .arr{transition:transform var(--d-sweep) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.ct-submit:hover{background:var(--black)}.ct-submit:hover .arr{transform:translateX(var(--arrow-nudge))}}
.ct-submit:active{transform:scale(.99)}
.ct-submit:disabled{cursor:progress;opacity:.85}
.ct-spin{display:none;width:1rem;height:1rem;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:var(--white);animation:ct-spin .7s linear infinite}/* ds-allow-hardcode: spinner ring */
.sending .ct-spin{display:inline-block}.sending .ct-submit .arr{display:none}
@keyframes ct-spin{to{transform:rotate(1turn)}}
.ct-status{display:none;margin:0;padding:.8rem 1rem;border-radius:var(--r-btn);font-size:.9375rem}
.ct-status.show{display:block}
.ct-status.ok{background:var(--fill);color:var(--ink)}
.ct-status.fail{background:var(--fill);color:var(--err)}
@media (min-width:640px){.ct-row{grid-template-columns:1fr 1fr}}
@media (min-width:980px){
  .ct-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-areas:"intro form" "details form";grid-template-rows:auto 1fr;column-gap:clamp(3rem,6vw,6rem);row-gap:2rem;align-items:start}
  .ct-intro{padding-top:3rem}
  .ct-details{align-self:start}
}
@media (max-width:979px){.ct-sec{padding-bottom:2.5rem}.ct-details{margin-top:.25rem}}
@media (prefers-reduced-motion:reduce){.ct-spin{animation-duration:2s}}

/* Fix: upright phone was cut off in narrower desktop windows; hero copy sits lower on desktop */
.phones-sec{overflow:visible;overflow-x:clip}
.stage{aspect-ratio:16/9}
.slot-up{bottom:5%}
@media (min-width:760px) and (max-width:1179px){.stage{max-width:none;aspect-ratio:16/10}.slot-up{right:24%;width:25%}.slot-flat{left:20%;width:25%}}
@media (min-width:760px){.hero.hv{padding-bottom:calc(var(--curtain) + 1.25rem)}}
.stage{aspect-ratio:16/8.3}
.slot-up{bottom:12%}
.slot-flat{bottom:9%}
@media (min-width:760px) and (max-width:1179px){.stage{aspect-ratio:16/9.4}}
@media (max-width:759px){.slot-up{bottom:3%}.slot-flat{bottom:2%}}
@media (max-width:759px){.stage{aspect-ratio:1/1.12}}
/* The reveal animation leaves clip-path:inset(0) on revealed elements, which was cutting off the phones that extend past the stage */
.js-motion .stage[data-reveal],.js-motion .stage[data-reveal].is-in{clip-path:none}

/* Couples add-on inside the Full Credit Repair card (owner request 2026-11-10) */
.price-addon{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.7rem .75rem .7rem 1.1rem;border-radius:var(--r-panel);background:rgba(255,255,255,.5);border:var(--line) solid var(--hair)}
.pa-info{display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap}
.pa-name{font:500 .9375rem/1.2 var(--sans);letter-spacing:-.01em;color:var(--ink)}
.price .amt.amt-sm{margin:0;gap:.45rem}
.price .amt.amt-sm s{font-size:.8125rem}
.price .amt.amt-sm b{font-family:var(--text);font-weight:500;font-size:1.25rem;letter-spacing:-.02em;color:var(--ink)}
.price .btn.btn-sm{min-height:2.5rem;padding:0 1rem;font-size:.8125rem;gap:.45rem;width:auto;flex:none;margin:0}
.price .btn.btn-sm .arr{width:.85rem;height:.85rem}
/* Four cards now: Full + Single Bureau on top, ChexSystems + EWS below */
@media (min-width:1180px){.prices>.price,.prices>.price:nth-child(-n+3),.prices>.price:nth-child(n+4){grid-column:span 3}}
#pricing .price .amt.amt-sm b,.no-hero main .price .amt.amt-sm b{font-size:1.25rem;letter-spacing:-.02em}
#pricing .price .amt.amt-sm s,.no-hero main .price .amt.amt-sm s{font-size:.8125rem}
.price .amt.amt-sm{flex-wrap:nowrap}
#pricing .price .btn.btn-sm,.no-hero main .price .btn.btn-sm{min-height:2.5rem;padding:0 1rem;font-size:.8125rem}

/* Loop-stutter fix: the fallback frame behind the video must match the footage exactly (same crop, zoom and dimming),
   otherwise each loop's crossfade reveals a frame that is larger/brighter and the hero visibly jumps. */
.hv-video{filter:none!important}
.hv-media{filter:brightness(.74) saturate(.8)!important;background-size:cover;background-position:30% 40%}
@media (max-width:759px){
  .hv-media{background-size:108% auto;background-position:0 0}
}
/* Couples row: price and Buy Now share one line, centred on each other */
.price-addon{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"name amt btn";align-items:center;column-gap:.9rem}
.pa-info{display:contents}
.pa-name{grid-area:name}
.price-addon .amt.amt-sm{grid-area:amt;align-items:center;line-height:1}
.price-addon .btn.btn-sm{grid-area:btn}
@media (max-width:759px){
  .price-addon{grid-template-columns:1fr auto;grid-template-areas:"name name" "amt btn";row-gap:.35rem}
}
/* Hero now plays once and holds: the still behind the video is the FINAL frame (same crop, zoom and dimming) */
.hv-media{background-image:url("assets/socredit/hero-end-frame.jpg")}
.hv-media.hv-failed{background-image:url("assets/socredit/hero-start-frame.jpg")}

/* Priority Processing order bump (sits directly above the price + Buy Now panel) */
.bump{display:grid;gap:.45rem;padding:.8rem .9rem;border-radius:var(--r-panel);background:rgba(255,255,255,.55);border:var(--line) dashed var(--hair-2)}
.bump-top{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;flex-wrap:wrap}
.bump-title{font:600 .875rem/1.25 var(--sans);letter-spacing:-.01em;color:var(--ink)}
.bump-fee{font:600 .8125rem/1 var(--text);color:var(--ink);white-space:nowrap}
.bump-copy{margin:0;font-size:.8125rem;line-height:1.45;color:var(--ink-2)}
.bump-copy b{color:var(--ink);font-weight:600}
.bump-check{display:flex;align-items:center;gap:.6rem;min-height:2.75rem;cursor:pointer;font:500 .875rem/1.3 var(--text);color:var(--ink)}
.bump-check input{position:absolute;opacity:0;width:1px;height:1px}
.bump-check .box{flex:none;width:1.25rem;height:1.25rem;border-radius:.35rem;border:1.5px solid var(--ink);background:var(--white);display:grid;place-items:center;transition:background-color var(--d-hover) ease}/* ds-allow-hardcode: checkbox stroke */
.bump-check .box::after{content:"";width:.6rem;height:.35rem;border-left:2px solid var(--white);border-bottom:2px solid var(--white);transform:rotate(-45deg) translate(1px,-1px);opacity:0}/* ds-allow-hardcode: tick glyph */
.bump-check input:checked + .box{background:var(--charcoal)}
.bump-check input:checked + .box::after{opacity:1}
.bump-check input:focus-visible + .box{outline:var(--focus-w) solid var(--ink);outline-offset:var(--focus-off)}
.price.has-bump .bump{border-style:solid;border-color:var(--ink);background:var(--white)}
@media (max-width:759px){.bump{padding:.7rem .8rem}.bump-copy{font-size:.78rem}}
.bump-check{position:relative}
.bump-check input{left:0;top:0}