/* ============================================================
   RENTLA DESIGN SYSTEM  ·  tokens, base, primitives, chrome
   Values mirror rentla.in so this page is visually identical
   to the rest of the site. Nothing here is CSR-specific —
   CSR sections live in csr.css.
   ============================================================ */

/* ---------- Fonts: the same self-hosted variable faces ---------- */
@font-face{font-family:'Outfit';  src:url(../fonts/outfit.woff2)  format('woff2'); font-weight:100 900; font-style:normal; font-display:swap}
@font-face{font-family:'Manrope'; src:url(../fonts/manrope.woff2) format('woff2'); font-weight:200 800; font-style:normal; font-display:swap}

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --navy-50:#F5F6F9;  --navy-100:#E8EAF1; --navy-200:#CBD0DF; --navy-300:#A3ABC3;
  --navy-400:#6E7899; --navy-500:#4A5578; --navy-600:#333E63; --navy-700:#232E52;
  --navy-800:#1A2447; --navy-900:#141C3F; --navy-950:#0B1029;

  --amber-50:#FEF7E9;  --amber-100:#FDECC8; --amber-200:#FBDA94; --amber-300:#F8C868;
  --amber-400:#F5B745; --amber-500:#E9A22A; --amber-600:#C9861A; --amber-700:#A66A12;

  --n-0:#FFFFFF; --n-50:#FAFAFA; --n-100:#F2F2F2; --n-200:#E2E2E2;
  --n-300:#CFCFCF; --n-400:#A8A8A8; --n-500:#808080; --n-600:#5E5E5E;
  --n-700:#444444; --n-800:#2B2B2B;

  --t-head:#141C3F; --t-body:#3A4256; --t-muted:#5C6478;
  --t-inv:#FFFFFF;  --t-inv-muted:#A3ABC3; --t-on-amber:#141C3F;

  --s-page:#FAF9F7; --s-tint:#F4F2ED; --s-warm:#EFEBE3;
  --s-panel:#F2F2F2; --s-inv:#141C3F; --s-inv-deep:#0B1029;

  --f-display:'Outfit',system-ui,sans-serif;
  --f-body:'Manrope',system-ui,sans-serif;
  --f-mono:ui-monospace,'SF Mono',SFMono-Regular,'Roboto Mono',Menlo,monospace;

  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-8:32px; --sp-10:40px;--sp-12:48px;--sp-16:64px;--sp-20:80px;--sp-24:96px;
  --sp-32:128px; --sp-40:160px;

  --r-chip:4px; --r-btn:8px; --r-card:12px; --r-media:16px; --r-pill:999px;

  --e1:0 1px 2px rgba(20,28,63,.06), 0 1px 3px rgba(20,28,63,.10);
  --e2:0 8px 24px rgba(20,28,63,.12);

  --d-fast:120ms; --d-base:180ms; --d-slow:240ms; --d-slower:320ms;
  --ease-std:cubic-bezier(.2,0,0,1);
  --ease-out:cubic-bezier(.25,.46,.45,.94);
  --ease-over:cubic-bezier(.34,1.26,.64,1);
  --ease-spring:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  --c-page:1320px; --c-content:1200px; --c-prose:720px; --c-narrow:560px;
}

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--s-page); color:var(--t-body);
  font-family:var(--f-body); font-size:16px; line-height:1.65;
  font-weight:400; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--f-display); color:var(--t-head); margin:0; text-wrap:balance}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
a{color:inherit; text-decoration:none}
img,svg{display:block; max-width:100%}
:focus-visible{outline:2px solid var(--navy-900); outline-offset:3px; border-radius:2px}
.inv :focus-visible{outline-color:var(--amber-400)}

.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--navy-900);
  color:#fff; padding:12px 20px; border-radius:0 0 var(--r-btn) 0; font-weight:600}
.skip:focus{left:0}

.vh{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}

/* The header is sticky, so an un-offset jump parks the target underneath it. */
#quote,#main,:target{scroll-margin-top:calc(var(--hdr-h, 5rem) + var(--sp-4))}

/* ---------- Type scale ---------- */
.t-display{font-size:clamp(2.25rem,1.4rem + 3.6vw,4rem); line-height:1.02; letter-spacing:-.03em; font-weight:700}
.t-h1{font-size:clamp(2rem,1.35rem + 2.8vw,3.25rem); line-height:1.06; letter-spacing:-.025em; font-weight:700}
.t-h2{font-size:clamp(1.625rem,1.2rem + 1.8vw,2.375rem); line-height:1.14; letter-spacing:-.02em; font-weight:600}
.t-h3{font-size:clamp(1.125rem,1.05rem + .4vw,1.375rem); line-height:1.25; letter-spacing:-.01em; font-weight:600}
.t-state{font-family:var(--f-display); font-weight:800;
  font-size:clamp(1.75rem,1.25rem + 2.1vw,2.625rem); line-height:1.04; letter-spacing:-.03em}
.t-lead{font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem); line-height:1.6; color:var(--t-body)}
.t-sm{font-size:.875rem; line-height:1.55}
.t-cap{font-size:.8125rem; line-height:1.4; color:var(--t-muted)}
.inv .t-lead,.inv .t-cap{color:var(--t-inv-muted)}

/* ---------- Mono: the data voice ---------- */
.mono{font-family:var(--f-mono); font-variant-numeric:tabular-nums;
  font-size:.75rem; letter-spacing:.04em; text-transform:uppercase}
.stat-num{font-family:var(--f-mono); font-variant-numeric:tabular-nums;
  font-size:clamp(2rem,1.4rem + 2.2vw,3rem); font-weight:600; line-height:1;
  letter-spacing:-.02em; color:var(--t-head)}
.inv .stat-num{color:var(--amber-400)}

/* ---------- Layout primitives ---------- */
.wrap{width:100%; max-width:var(--c-content); margin-inline:auto; padding-inline:var(--sp-4)}
.prose{max-width:var(--c-prose)}
.sec{padding-block:var(--sp-16)}
.sec-tint{background:var(--s-tint)}
.stack{display:flex; flex-direction:column}
.g-2{gap:var(--sp-2)} .g-3{gap:var(--sp-3)} .g-4{gap:var(--sp-4)} .g-5{gap:var(--sp-5)}
.g-6{gap:var(--sp-6)} .g-8{gap:var(--sp-8)} .g-10{gap:var(--sp-10)} .g-12{gap:var(--sp-12)}

/* ---------- The slash: the logo's amber bar, systematised ---------- */
.slash{display:block; width:28px; height:7px; background:var(--amber-400);
  transform:skewX(-20deg); flex:none}
.slash-sm{width:16px; height:5px}

.eyebrow{display:inline-flex; align-items:center; gap:var(--sp-3); color:var(--t-muted)}
.inv .eyebrow{color:var(--amber-400)}

/* ---------- Blueprint grid: 24px minor, 96px major ---------- */
.bp{
  background-image:
    linear-gradient(rgba(20,28,63,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(20,28,63,.045) 1px,transparent 1px),
    linear-gradient(rgba(20,28,63,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(20,28,63,.055) 1px,transparent 1px);
  background-size:24px 24px,24px 24px,96px 96px,96px 96px;
}
.inv.bp,.bp.inv{
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
}

/* ---------- Inverse (navy) sections ---------- */
.inv{background:var(--s-inv); color:var(--t-inv-muted)}
.inv h1,.inv h2,.inv h3,.inv h4{color:var(--t-inv)}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  font-family:var(--f-body); font-weight:600; font-size:.9375rem; min-height:48px;
  padding:var(--sp-2) var(--sp-6); border-radius:var(--r-btn); border:1px solid transparent;
  cursor:pointer; text-align:center;
  transition:background var(--d-fast) var(--ease-std),
    border-color var(--d-fast) var(--ease-std), color var(--d-fast) var(--ease-std),
    transform 80ms var(--ease-over)}
.btn:active{transform:scale(.98)}
.btn-data{font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.06em;
  text-transform:uppercase; opacity:.65; font-weight:500}

.btn-primary{background:var(--amber-400); color:var(--t-on-amber)}
.btn-primary:hover{background:var(--amber-500)}
.btn-primary:active{background:var(--amber-600)}

.btn-secondary{background:var(--navy-900); color:#fff}
.btn-secondary:hover{background:var(--navy-800)}

.btn-ghost{background:transparent; color:var(--navy-900); border-color:var(--navy-200)}
.btn-ghost:hover{border-color:var(--navy-400); background:var(--navy-50)}
.inv .btn-ghost{color:#fff; border-color:rgba(255,255,255,.28)}
.inv .btn-ghost:hover{border-color:rgba(255,255,255,.6); background:rgba(255,255,255,.06)}
.btn-icon{width:48px; padding:0; flex:none}

/* ============================================================
   HEADER
   ============================================================ */
.hdr{position:sticky; top:0; z-index:100; background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--n-200);
  transition:box-shadow var(--d-base) var(--ease-std), border-color var(--d-base) var(--ease-std)}
.hdr.scrolled{box-shadow:var(--e1); border-color:var(--navy-200)}
/* Two children — mark on the left, the nav (calculator icon + quote action)
   on the right — so the row is simply spaced apart. */
.hdr .wrap{display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-4); min-height:76px; transition:min-height var(--d-base) var(--ease-std)}
.hdr.scrolled .wrap{min-height:62px}

.hdr-nav{display:flex; align-items:center; gap:var(--sp-3)}
.hdr-calc{width:48px; min-height:48px; padding:0}
.hdr-calc svg{transition:transform var(--d-slow) var(--ease-over)}
.hdr-calc:hover svg{transform:rotate(-8deg) scale(1.06)}

.logo{display:inline-flex; align-items:center; flex:none}
.logo img{height:34px; width:auto; transition:height var(--d-base) var(--ease-std)}
.hdr.scrolled .logo img{height:28px}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative; background:var(--s-page); border-bottom:1px solid var(--n-200);
  padding-block:var(--sp-16); overflow:hidden}
.hero::before{content:""; position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(rgba(20,28,63,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(20,28,63,.045) 1px,transparent 1px),
    linear-gradient(rgba(20,28,63,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(20,28,63,.055) 1px,transparent 1px);
  background-size:24px 24px,24px 24px,96px 96px,96px 96px;
  -webkit-mask-image:radial-gradient(120% 90% at 15% 0%,#000 20%,transparent 78%);
  mask-image:radial-gradient(120% 90% at 15% 0%,#000 20%,transparent 78%)}
.hero .wrap{position:relative; z-index:1}
.hero-grid{display:grid; grid-template-columns:1fr; gap:var(--sp-10); align-items:center}
.hero.hero-page{padding-block:2.4rem 3.4rem}
.hero.hero-page .hero-copy{max-width:44rem}

/* ---------- Hero photograph ----------
   min-width:0, because a grid track defaults to min-content and a photo would
   otherwise refuse to shrink below its intrinsic width and push the copy
   column narrow. aspect-ratio matches the file's own 25:18 so the reserved
   box is the right shape at every width, not just once the image lands. */
.hero-media{position:relative; margin:0; min-width:0; isolation:isolate}
.hero-media img{width:100%; height:auto; aspect-ratio:25/18; object-fit:cover;
  border-radius:var(--r-media); box-shadow:var(--e2); background:var(--s-tint)}
/* The mark, not a border: a skewed amber bar behind the lower-left corner,
   the same gesture as the logo and the section eyebrows. */
.hero-media::before{content:""; position:absolute; z-index:-1;
  left:calc(var(--sp-5) * -1); bottom:calc(var(--sp-5) * -1);
  width:42%; height:52%; background:var(--amber-400); opacity:.22;
  border-radius:var(--r-media); transform:skewX(-8deg)}
.hero-media-tag{position:absolute; left:var(--sp-4); bottom:var(--sp-4);
  display:inline-flex; align-items:center; gap:var(--sp-2);
  padding:8px 14px 8px 10px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.92); color:var(--t-head); font-weight:600;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:var(--e1); max-width:calc(100% - var(--sp-8))}

.chip{display:inline-flex; align-items:center; gap:var(--sp-2); align-self:start;
  border:1px solid var(--navy-200); background:#fff; border-radius:var(--r-pill);
  padding:6px 14px 6px 10px; color:var(--t-muted); max-width:100%}
.chip .dot{width:6px; height:6px; border-radius:50%; background:var(--amber-500); flex:none}

.hero h1 em{font-style:normal; position:relative; white-space:nowrap}
.hero h1 em::after{content:""; position:absolute; left:0; right:0; bottom:.06em; height:.14em;
  background:var(--amber-400); transform:skewX(-20deg); z-index:-1}
.hero-cta{display:flex; flex-wrap:wrap; gap:var(--sp-3)}
.qualifier{display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4); color:var(--t-muted)}
.qualifier span{display:flex; align-items:center; gap:var(--sp-2)}
.qualifier span::before{content:""; width:5px; height:5px; background:var(--navy-300);
  transform:skewX(-20deg); flex:none}

/* ============================================================
   TRUST BAR
   ============================================================ */
.trust{border-bottom:1px solid var(--n-200); background:var(--s-tint)}
.trust ul{display:grid; grid-template-columns:1fr; gap:var(--sp-5) var(--sp-4);
  padding-block:var(--sp-6)}
.trust li{display:flex; align-items:flex-start; gap:var(--sp-3); font-size:.9375rem;
  font-weight:500; color:var(--t-body)}
.trust .slash{margin-top:9px}
.trust b{font-family:var(--f-mono); font-weight:600; color:var(--navy-900);
  font-variant-numeric:tabular-nums}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.sec-hd{display:flex; flex-direction:column; gap:var(--sp-4); max-width:var(--c-prose)}
.sec-hd .rule{display:flex; align-items:center; gap:var(--sp-3); width:100%}
.sec-hd .rule i{flex:1; height:1px; background:var(--n-200)}

/* ============================================================
   WHY  ·  feature → outcome
   ============================================================ */
.why{display:grid; grid-template-columns:1fr; gap:0; border-top:1px solid var(--n-200)}
.why li{display:grid; grid-template-columns:auto 1fr; gap:var(--sp-4);
  padding-block:var(--sp-6); border-bottom:1px solid var(--n-200); align-items:start}
.why .slash{margin-top:10px}
.why strong{display:block; font-family:var(--f-display); font-weight:600; font-size:1.0625rem;
  color:var(--t-head); margin-bottom:var(--sp-1)}
.why span{font-size:.9375rem; color:var(--t-muted)}
.inv .why{border-top-color:rgba(255,255,255,.14)}
.inv .why li{border-bottom-color:rgba(255,255,255,.14)}
.inv .why strong{color:#fff}
.inv .why span{color:var(--t-inv-muted)}

/* ============================================================
   PAIRS  ·  two-column feature list
   ============================================================ */
.pairs{display:grid; gap:1.5rem 2.5rem;
  grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr))}
.pairs li{display:grid; gap:.3rem; align-content:start}
.pairs b{color:var(--t-head); font-size:1.02rem; font-family:var(--f-display); font-weight:600}
.pairs span{color:var(--t-body); font-size:.94rem; line-height:1.55}
.inv .pairs b{color:#fff}
.inv .pairs span{color:var(--t-inv-muted)}

/* ============================================================
   CARDS
   ============================================================ */
.cards{display:grid; grid-template-columns:1fr; gap:var(--sp-4)}
.card{display:flex; flex-direction:column; gap:var(--sp-3); padding:var(--sp-6);
  background:#fff; border:1px solid var(--n-200); border-radius:var(--r-card);
  transition:border-color var(--d-fast) var(--ease-std),
    transform var(--d-fast) var(--ease-std), box-shadow var(--d-fast) var(--ease-std)}
.card:hover{border-color:var(--navy-400); transform:translateY(-2px); box-shadow:var(--e1)}
.card-ico{width:40px; height:40px; border-radius:var(--r-btn); background:var(--n-100);
  display:flex; align-items:center; justify-content:center; color:var(--navy-900); flex:none}
.card:hover .card-ico{background:var(--amber-100)}
.card p{font-size:.9375rem; color:var(--t-muted); line-height:1.55}

/* ============================================================
   FINAL CTA
   ============================================================ */
.final{padding-block:var(--sp-20); position:relative; overflow:hidden}
.final .wrap{position:relative; z-index:1}
.final-grid{display:grid; grid-template-columns:1fr; gap:var(--sp-10); align-items:center}

/* ============================================================
   FOOTER
   ============================================================ */
.ftr{background:var(--s-inv-deep); color:var(--navy-300); padding-block:var(--sp-16) var(--sp-8)}
.ftr-grid{display:grid; grid-template-columns:1fr; gap:var(--sp-10)}
.ftr h2.ftr-h,.ftr h4{font-size:.75rem; font-family:var(--f-mono); letter-spacing:.08em;
  text-transform:uppercase; color:var(--amber-400); font-weight:500; margin-bottom:var(--sp-4)}
.ftr ul{display:flex; flex-direction:column; gap:var(--sp-3)}
.ftr a{font-size:.9375rem; transition:color var(--d-fast) var(--ease-std)}
.ftr a:hover{color:#fff}
.ftr a[aria-current="page"]{color:#fff; font-weight:600}
.ftr .logo img{height:54px}
.ftr address{font-style:normal; font-size:.9375rem; line-height:1.7}
/* Three columns, and the brand is the widest. On tablets it takes the full
   row and the two contact blocks sit side by side under it, rather than the
   mark being squeezed into a third of the width. */
@media (min-width:700px){
  .ftr-grid{grid-template-columns:1fr 1fr; gap:var(--sp-10) var(--sp-8)}
  .ftr-brand{grid-column:1 / -1}
}
.ftr-btm{margin-top:var(--sp-12); padding-top:var(--sp-6);
  border-top:1px solid rgba(255,255,255,.1); display:flex; flex-wrap:wrap;
  gap:var(--sp-4); justify-content:space-between; align-items:center}

/* ============================================================
   STICKY MOBILE CTA
   ============================================================ */
.sticky{position:fixed; left:0; right:0; bottom:0; z-index:90; background:#fff;
  border-top:1px solid var(--n-200); box-shadow:var(--e2); padding:var(--sp-3) var(--sp-4);
  display:none; gap:var(--sp-3); transform:translateY(110%);
  transition:transform var(--d-slow) var(--ease-std)}
.sticky.up{transform:translateY(0)}
.sticky .btn{flex:1; min-height:46px; padding-inline:var(--sp-3)}

/* ============================================================
   FLOATING CONTACT ACTIONS
   ============================================================ */
.fab{
  position:fixed; bottom:var(--sp-6); z-index:75;
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; padding:0;
  border-radius:var(--r-pill); overflow:hidden; isolation:isolate;
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);
  backdrop-filter:blur(14px) saturate(1.5);
  border:1px solid var(--navy-200); color:var(--t-head);
  box-shadow:0 1px 2px rgba(20,28,63,.06),
             0 12px 30px -12px rgba(20,28,63,.34),
             inset 0 1px 0 rgba(255,255,255,.85);
  transition:bottom var(--d-slow) var(--ease-std),
             transform var(--d-base) var(--ease-over),
             box-shadow var(--d-base) var(--ease-std),
             border-color var(--d-base) var(--ease-std);
  animation:fab-in var(--d-slower) var(--ease-over) backwards}
.fab-call{left:var(--sp-6); animation-delay:.35s}
.fab-wa{right:var(--sp-6); animation-delay:.45s}
.fab svg{flex:none; position:relative; z-index:2;
  transition:transform var(--d-slow) var(--ease-over)}
.fab-call svg{color:var(--navy-900)}
.fab-wa svg{color:#128C7E}
.fab::before{
  content:""; position:absolute; z-index:1; inset:0 -30%;
  background:var(--amber-400); transform:skewX(-20deg) scaleX(0); transform-origin:left;
  transition:transform var(--d-slow) var(--ease-std)}
.fab:hover::before,.fab:focus-visible::before{transform:skewX(-20deg) scaleX(1)}
.fab:hover{transform:translateY(-2px); border-color:var(--amber-500)}
.fab:hover svg{transform:scale(1.08)}
.fab:hover .fab-wa svg,.fab-wa:hover svg{color:var(--navy-900)}
@keyframes fab-in{from{opacity:0; transform:translateY(14px) scale(.9)}to{opacity:1; transform:none}}

/* ============================================================
   REVEAL / MOTION  ·  enhancement, never a precondition
   ============================================================ */
.rv-ready .rv{opacity:0; transform:translateY(18px); will-change:opacity,transform;
  transition:opacity .7s var(--ease-soft), transform .7s var(--ease-spring);
  transition-delay:calc(var(--i,0) * 70ms)}
.rv-ready .rv.in{opacity:1; transform:none}

.ribbon{position:relative; isolation:isolate; overflow:hidden}
.ribbon::before{content:""; position:absolute; inset:-30% -10% auto -10%; height:150%; z-index:-1;
  background:
    radial-gradient(38% 44% at 18% 32%, rgba(245,183,69,.20), transparent 68%),
    radial-gradient(34% 40% at 78% 26%, rgba(35,46,82,.16), transparent 70%),
    radial-gradient(30% 36% at 52% 76%, rgba(245,183,69,.12), transparent 72%);
  animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{0%{transform:translateX(-2%)}100%{transform:translateX(2%)}}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width:600px){
  .wrap{padding-inline:var(--sp-6)}
  .trust ul{grid-template-columns:1fr 1fr}
  .cards{grid-template-columns:1fr 1fr}
}
/* Stacked, the photo runs the full content width, and at tablet sizes that is
   a 600px-tall hero image before the reader reaches anything else. Capped so
   it stays a supporting element until it has its own column. */
@media (max-width:999.98px){
  .hero-media{max-width:32rem}
}
/* Under 600px the page gutter is 16px, so the accent's 20px overhang lands
   4px off-screen and .hero's overflow:hidden shears it — a cut edge rather
   than an offset shape. Pulled in to sit inside the gutter. */
@media (max-width:599.98px){
  .hero-media::before{left:calc(var(--sp-2) * -1); bottom:calc(var(--sp-2) * -1)}
}
@media (min-width:1000px){
  .wrap{padding-inline:var(--sp-8)}
  .sec{padding-block:var(--sp-24)}
  .hero{padding-block:var(--sp-20) var(--sp-24)}
  .hero.hero-page{padding-block:3rem 4.5rem}
  /* Copy leads, photograph carries the right. Roughly even, because the
     display heading needs room to break into three lines and the photo is
     the page's evidence rather than decoration. */
  .hero-grid{grid-template-columns:1.05fr .95fr; gap:var(--sp-16)}
  .trust ul{grid-template-columns:repeat(4,1fr)}
  .cards{grid-template-columns:repeat(3,1fr)}
  .why{grid-template-columns:1fr 1fr; column-gap:var(--sp-12)}
  /* Three-up for a list that holds three. At two columns the last item sits
     alone on a second row and its bottom border stops halfway across, which
     reads as a broken rule rather than a deliberate row. */
  .why-3{grid-template-columns:repeat(3,1fr); column-gap:var(--sp-10)}
  .final-grid{grid-template-columns:1.15fr .85fr; gap:var(--sp-16)}
  .ftr-grid{grid-template-columns:1.4fr 1fr 1fr}
  .ftr-brand{grid-column:auto}
}

/* The reference site's `.rails` hairlines are deliberately not carried over.
   They are drawn at the content container's own edges, which only reads as a
   frame when the content inside is narrower than the container — prose-width
   sections on rentla.in. Every block on this page is full content width, so
   the lines landed exactly on the left and right edge of the heading, the
   cycle track, the cards and the commitments list, cutting through all of
   them. There is no offset that fixes this without pushing the lines into the
   page gutter, so the decoration is dropped rather than patched. */

/* ---------- Touch widths ---------- */
@media (max-width:999.98px){
  /* backdrop-filter costs more than it shows at rgba(255,255,255,.92). */
  .hdr{backdrop-filter:none; -webkit-backdrop-filter:none}
  .sticky{display:flex}
  body{padding-bottom:76px}
  .fab{bottom:calc(76px + var(--sp-4))}

  /* Mark on the left, the calculator icon on the right. The quote CTA is dropped
     here rather than moved: the same action is already on screen twice below
     this width — the hero button, and the sticky bar that rides the bottom
     of the viewport. */
  .hdr .btn-primary{display:none}

  /* The logo is a link home, so it is a tap target like any other. The mark
     itself is 28-34px tall; the target around it is padded out to 44px
     without moving the artwork (the flex box centres it). */
  .hdr .logo{min-height:44px}
}

/* ---------- Narrow phones ---------- */
@media (max-width:480px){
  .hdr .logo img{height:28px}
  .hdr.scrolled .logo img{height:25px}
}

/* ---------- Tap targets & small text on touch ---------- */
@media (hover:none){
  .mono{font-size:.8125rem}
  .t-cap{font-size:.875rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important}
  .rv-ready .rv{opacity:1; transform:none}
}