/* ==========================================================================
   MARGARET DIGITAL — design system
   Charcoal + copper. One accent colour, hairline structure, 8pt spacing,
   three type roles (display / sans / mono). Every value below is a token —
   nothing in the components hardcodes a colour or a size.
   ========================================================================== */

:root{
  /* ---- colour ---- */
  --bg:#0E0F12;
  --bg-deep:#08090B;
  --surface:#16181D;
  --surface-2:#1E2129;
  --ink:#F2EFE9;
  --ink-2:#A8A49B;
  --ink-3:#7C786F;
  --accent:#E08B4C;
  --accent-soft:#F3B681;
  --accent-deep:#A85F28;
  --accent-wash:rgba(224,139,76,.10);
  --accent-line:rgba(224,139,76,.34);
  --positive:#79C494;
  --line:rgba(242,239,233,.09);
  --line-2:rgba(242,239,233,.17);
  --on-accent:#17110A;
  --shade:rgba(0,0,0,.45);

  /* ---- type ---- */
  --f-display:'Playfair Display',Georgia,serif;
  --f-sans:'Manrope',system-ui,-apple-system,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,monospace;

  --fs-hero:clamp(2.45rem,5.4vw,4rem);
  --fs-h1:clamp(2rem,4.2vw,2.95rem);
  --fs-h2:clamp(1.6rem,2.9vw,2.25rem);
  --fs-h3:1.1rem;
  --fs-lead:clamp(1.02rem,1.35vw,1.14rem);
  --fs-body:1rem;
  --fs-sm:.925rem;
  --fs-xs:.82rem;
  --fs-label:.715rem;

  /* ---- space (8pt) ---- */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
  --section-y:clamp(60px,8.5vw,108px);

  /* ---- geometry ---- */
  --maxw:1160px;
  --gutter:clamp(20px,4vw,32px);
  --r-xs:4px; --r-sm:8px; --r:12px; --r-lg:18px; --r-pill:999px;

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset & base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{overflow-x:hidden;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
html,body{margin:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-sans);
  font-size:var(--fs-body);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4{margin:0;line-height:1.16;text-wrap:balance;letter-spacing:-.015em;}
h1,h2{font-family:var(--f-display);font-weight:600;}
h3,h4{font-family:var(--f-sans);font-weight:700;letter-spacing:-.005em;}
p{margin:0;}
::selection{background:var(--accent);color:var(--on-accent);}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-xs);}

/* ---------- layout primitives ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);}
.section{padding-block:var(--section-y);border-top:1px solid var(--line);}
.section--flush{border-top:none;}
.section--tight{padding-block:clamp(44px,6vw,72px);}

/* section heading block — identical structure on every section */
.section-head{max-width:62ch;margin-bottom:clamp(32px,4.5vw,56px);}
.section-head.is-centred{margin-inline:auto;text-align:center;}
.section-head h2{font-size:var(--fs-h2);}
.section-head .lead{color:var(--ink-2);font-size:var(--fs-lead);margin-top:var(--s-4);}

/* small uppercase mono label — the one "kicker" style on the whole site */
.label{
  font-family:var(--f-mono);font-weight:500;font-size:var(--fs-label);
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  display:flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-4);
}
.label::before{content:'';width:18px;height:1px;background:var(--accent);flex:none;}
.section-head.is-centred .label{justify-content:center;}
.label.is-muted{color:var(--ink-3);}
.label.is-muted::before{background:var(--ink-3);}

.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums;}
.muted{color:var(--ink-2);}
.accent{color:var(--accent);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  font-family:var(--f-sans);font-weight:600;font-size:var(--fs-sm);line-height:1;
  padding:14px 22px;border-radius:var(--r-sm);border:1px solid transparent;
  background:var(--accent);color:var(--on-accent);
  text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background .18s var(--ease),transform .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}
.btn:hover{background:var(--accent-soft);transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-2);}
.btn--ghost:hover{background:transparent;border-color:var(--accent);color:var(--accent);}
.btn--sm{padding:10px 16px;font-size:var(--fs-xs);}
.btn--wide{width:100%;}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s-3);}
.btn-row.is-centred{justify-content:center;}
.btn-note{color:var(--ink-3);font-size:var(--fs-xs);margin-top:var(--s-3);}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.site-header .nav{
  max-width:var(--maxw);margin-inline:auto;padding:var(--s-4) var(--gutter);
  display:flex;align-items:center;gap:var(--s-6);
}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex:none;}
.brand svg{flex:none;}
.brand-name{
  font-family:var(--f-sans);font-weight:700;font-size:.82rem;
  letter-spacing:.17em;text-transform:uppercase;line-height:1;
}
.brand-name span{color:var(--ink-3);font-weight:500;}
.navlinks{display:flex;gap:var(--s-6);margin-left:auto;font-size:var(--fs-sm);}
.navlinks a{
  color:var(--ink-2);text-decoration:none;position:relative;padding-block:4px;
  transition:color .16s var(--ease);
}
.navlinks a:hover{color:var(--ink);}
.navlinks a.is-active{color:var(--ink);}
.navlinks a::after{
  content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease);
}
.navlinks a:hover::after,.navlinks a.is-active::after{transform:scaleX(1);}
.nav-cta{flex:none;}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--bg-deep);}
.hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden;}
/* 18% taller than its frame so the parallax shift never uncovers an edge */
.hero-media img{width:100%;height:118%;object-fit:cover;object-position:50% 55%;filter:saturate(.62) contrast(1.06);will-change:transform;}
.hero::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(14,15,18,.72) 0%,rgba(14,15,18,.80) 46%,var(--bg) 100%),
    radial-gradient(120% 80% at 82% 18%,var(--accent-wash),transparent 62%);
}
.hero-inner{
  max-width:var(--maxw);margin-inline:auto;padding:clamp(88px,13vw,148px) var(--gutter) clamp(48px,7vw,72px);
}
.hero h1{font-size:var(--fs-hero);max-width:17ch;}
.hero h1 em{font-style:normal;color:var(--accent);}
.hero .lead{max-width:56ch;color:var(--ink-2);font-size:var(--fs-lead);margin-top:var(--s-5);}
.hero .btn-row{margin-top:var(--s-7);}

/* hero proof row — mono figures on a shared baseline */
.hero-proof{
  margin:clamp(40px,6vw,64px) 0 0;padding-top:var(--s-5);border-top:1px solid var(--line-2);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5);
}
.hero-proof > div{min-width:0;}
.hero-proof dt{font-family:var(--f-mono);font-size:1.05rem;color:var(--accent);letter-spacing:-.01em;}
.hero-proof dd{margin:var(--s-2) 0 0;color:var(--ink-2);font-size:var(--fs-xs);line-height:1.5;}

/* ---------- trust strip ---------- */
.trustbar{border-block:1px solid var(--line);background:var(--bg-deep);}
.trustbar ul{
  max-width:var(--maxw);margin-inline:auto;padding:var(--s-4) var(--gutter);
  list-style:none;display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-6);
  font-family:var(--f-mono);font-size:var(--fs-xs);color:var(--ink-3);
}
.trustbar li{display:flex;align-items:center;gap:var(--s-2);}
.trustbar li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none;}

/* ---------- panels & cards ---------- */
.panel{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(24px,3.2vw,36px);
}
.panel--raised{background:linear-gradient(180deg,var(--surface-2),var(--surface));}

.grid{display:grid;gap:var(--s-4);align-items:stretch;}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr));}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid--split{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(24px,4vw,48px);}

/* the card: a flex column so headings align at the top and footers align
   at the bottom regardless of how much copy each one holds */
.card{
  display:flex;flex-direction:column;min-width:0;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(22px,2.6vw,30px);
  transition:border-color .25s var(--ease),transform .25s var(--ease),background .25s var(--ease);
}
.card:hover{border-color:var(--line-2);transform:translateY(-3px);background:var(--surface-2);}
.card__icon{
  width:42px;height:42px;border-radius:var(--r-sm);flex:none;
  display:grid;place-items:center;
  background:var(--accent-wash);border:1px solid var(--accent-line);color:var(--accent);
  margin-bottom:var(--s-5);
  transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.card:hover .card__icon{background:rgba(224,139,76,.2);border-color:var(--accent);transform:scale(1.06);}
.card__icon svg{width:20px;height:20px;}
.card h3{font-size:var(--fs-h3);}
.card__desc{color:var(--ink-2);font-size:var(--fs-sm);margin-top:var(--s-3);}
.card__foot{margin-top:auto;padding-top:var(--s-5);}
.card__foot .ticks{border-top:1px solid var(--line);padding-top:var(--s-4);}
.card--featured{
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border-color:var(--accent-line);position:relative;
}
.card__flag{
  position:absolute;top:0;right:clamp(22px,2.6vw,30px);transform:translateY(-50%);
  font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;
  background:var(--accent);color:var(--on-accent);padding:5px 10px;border-radius:var(--r-xs);
}

/* cards in a group share row heights, so icons, titles, copy and the divider
   above the tick list all sit on the same baseline — not just the bottom edge */
@supports (grid-template-rows:subgrid){
  .grid--aligned{grid-template-rows:auto auto auto 1fr;}
  .grid--aligned > .card{grid-row:span 4;display:grid;grid-template-rows:subgrid;}
  .grid--aligned > .card > .card__foot{margin-top:0;}
}

/* tick list — one bullet style everywhere */
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3);}
.ticks li{position:relative;padding-left:24px;color:var(--ink-2);font-size:var(--fs-sm);line-height:1.55;}
.ticks li strong{color:var(--ink);font-weight:600;}
.ticks li::before{
  content:'';position:absolute;left:2px;top:.42em;width:9px;height:5px;
  border-left:1.6px solid var(--accent);border-bottom:1.6px solid var(--accent);
  transform:rotate(-45deg);
}
/* the "what we don't promise" list is not a checklist — flip the mark to a dash */
.ticks--negative li::before{
  border:none;background:var(--ink-3);width:11px;height:1.5px;
  transform:none;top:.78em;left:0;
}

/* ---------- loss calculator (price anchoring) ---------- */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:clamp(24px,3.5vw,44px);}
.calc-controls{display:grid;gap:var(--s-5);align-content:start;}
.calc-field > span{
  display:block;font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--s-3);
}
.segmented{display:flex;flex-wrap:wrap;gap:var(--s-2);}
.segmented button{
  font:inherit;font-size:var(--fs-xs);font-weight:500;color:var(--ink-2);
  background:transparent;border:1px solid var(--line-2);border-radius:var(--r-pill);
  padding:9px 16px;cursor:pointer;
  transition:border-color .16s var(--ease),color .16s var(--ease),background .16s var(--ease);
}
.segmented button:hover{color:var(--ink);border-color:var(--ink-3);}
.segmented button[aria-pressed="true"]{
  background:var(--accent-wash);border-color:var(--accent);color:var(--accent-soft);
}
.calc-slider{display:flex;align-items:center;gap:var(--s-4);}
.calc-slider input[type="range"]{flex:1;accent-color:var(--accent);height:4px;cursor:pointer;padding:0;background:transparent;border:none;}
.calc-slider output{
  font-family:var(--f-mono);font-size:var(--fs-sm);color:var(--ink);
  min-width:6ch;text-align:right;font-variant-numeric:tabular-nums;
}
.calc-out{
  background:var(--bg-deep);border:1px solid var(--accent-line);border-radius:var(--r);
  padding:clamp(22px,2.8vw,30px);display:flex;flex-direction:column;gap:var(--s-3);
}
.calc-out .label{margin-bottom:0;}
.calc-out .figure{
  font-family:var(--f-mono);font-weight:600;font-size:clamp(1.9rem,3.6vw,2.7rem);
  color:var(--accent);line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.calc-out .figure-unit{display:block;font-size:var(--fs-xs);color:var(--ink-3);letter-spacing:.06em;margin-top:var(--s-2);font-weight:500;font-family:var(--f-sans);}
.calc-out .verdict{color:var(--ink-2);font-size:var(--fs-sm);padding-top:var(--s-4);border-top:1px solid var(--line);margin-top:auto;}
.calc-out .verdict strong{color:var(--ink);font-weight:600;}
.calc-disclaimer{color:var(--ink-3);font-size:var(--fs-xs);margin-top:var(--s-5);}

/* ---------- numbered problem rows ---------- */
.rows{display:grid;}
.row-item{
  display:grid;grid-template-columns:44px minmax(0,1fr) minmax(0,1.25fr);
  gap:var(--s-5);align-items:start;
  padding-block:clamp(20px,2.6vw,28px);border-top:1px solid var(--line);
}
.row-item:first-child{border-top:none;padding-top:0;}
.row-item__n{font-family:var(--f-mono);font-size:var(--fs-xs);color:var(--accent);padding-top:.25em;}
.row-item h3{font-size:1.02rem;}
.row-item p{color:var(--ink-2);font-size:var(--fs-sm);}

/* ---------- comparison table ---------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.compare{width:100%;min-width:660px;border-collapse:collapse;}
.compare th,.compare td{
  text-align:left;vertical-align:top;padding:var(--s-4) var(--s-5);
  border-bottom:1px solid var(--line);font-size:var(--fs-sm);
}
.compare thead th{
  font-family:var(--f-mono);font-weight:500;font-size:var(--fs-label);letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);padding-bottom:var(--s-3);
}
.compare tbody th{font-weight:600;color:var(--ink);width:24%;}
.compare td{color:var(--ink-2);}
.compare .col-us{background:var(--accent-wash);color:var(--ink);}
.compare thead .col-us{color:var(--accent);}
.compare tbody th,.compare tbody td{transition:background .2s var(--ease);}
.compare tbody tr:hover th,.compare tbody tr:hover td{background:rgba(242,239,233,.04);}
.compare tbody tr:hover .col-us{background:rgba(224,139,76,.17);}
.compare tbody tr:last-child th,.compare tbody tr:last-child td{border-bottom:none;}

/* ---------- process steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-5);}
.step{position:relative;padding-top:var(--s-5);border-top:1px solid var(--line-2);min-width:0;}
.step::after{content:'';position:absolute;top:-3px;left:0;width:6px;height:6px;border-radius:50%;background:var(--accent);}
.step .n{
  display:block;font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.16em;
  color:var(--accent);margin-bottom:var(--s-3);
}
.step h3{font-size:1rem;}
.step p{color:var(--ink-2);font-size:var(--fs-sm);margin-top:var(--s-3);}
.step .when{display:block;font-family:var(--f-mono);font-size:var(--fs-xs);color:var(--ink-3);margin-top:var(--s-3);}

/* ---------- niche photo cards ---------- */
.niches{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s-3);}
.niche{
  position:relative;display:block;overflow:hidden;border-radius:var(--r);
  aspect-ratio:3/4;text-decoration:none;border:1px solid var(--line);
}
.niche img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.55) contrast(1.08) brightness(.82);
  transition:transform .6s var(--ease),filter .4s var(--ease);
}
.niche:hover img{transform:scale(1.05);filter:saturate(.8) contrast(1.05) brightness(.9);}
.niche::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,9,11,.05) 35%,rgba(8,9,11,.92) 100%);
}
.niche__label{
  position:absolute;left:var(--s-4);right:var(--s-4);bottom:var(--s-4);z-index:1;
  transition:transform .45s var(--ease);
}
.niche:hover .niche__label{transform:translateY(-5px);}
.niche__label p{transition:color .3s var(--ease);}
.niche:hover .niche__label p{color:var(--accent-soft);}
.niche__label h3{font-size:.98rem;color:var(--ink);}
.niche__label p{font-size:var(--fs-xs);color:var(--ink-2);margin-top:3px;}

/* ---------- case spec sheet ---------- */
.spec{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s-5);}
.spec-row{display:flex;justify-content:space-between;gap:var(--s-4);padding-block:var(--s-3);border-bottom:1px solid var(--line);font-size:var(--fs-xs);}
.spec-row:last-child{border-bottom:none;padding-bottom:0;}
.spec-row:first-child{padding-top:0;}
.spec-row .k{color:var(--ink-3);white-space:nowrap;}
.spec-row .v{font-family:var(--f-mono);text-align:right;color:var(--ink);}
.pullquote{
  border-left:2px solid var(--accent);padding:var(--s-2) 0 var(--s-2) var(--s-5);
  color:var(--ink-2);font-size:var(--fs-sm);margin-top:var(--s-5);
}

/* ---------- guarantee / honesty ---------- */
.promise{display:grid;gap:var(--s-5);}
.promise-item{display:flex;gap:var(--s-4);align-items:flex-start;}
.promise-item svg{width:20px;height:20px;flex:none;color:var(--accent);margin-top:3px;}
.promise-item h3{font-size:.98rem;}
.promise-item p{color:var(--ink-2);font-size:var(--fs-sm);margin-top:var(--s-1);}
.honest{border-left:1px solid var(--line-2);padding-left:clamp(20px,3vw,32px);}

/* ---------- pricing tiers ---------- */
/* same idea as .grid--aligned, but a tier has five rows: name, audience,
   price, feature list, button — and the price has to land on one line */
@supports (grid-template-rows:subgrid){
  .grid--tiers{grid-template-rows:auto auto auto 1fr auto;}
  .grid--tiers > .tier{grid-row:span 5;display:grid;grid-template-rows:subgrid;}
  .grid--tiers > .tier > .tier-cta{margin-top:0;}
}
.tier{display:flex;flex-direction:column;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,2.8vw,32px);}
.tier--featured{background:linear-gradient(180deg,var(--surface-2),var(--surface));border-color:var(--accent-line);position:relative;}
.tier h3{font-size:1.15rem;}
.tier .tier-for{color:var(--ink-3);font-size:var(--fs-xs);margin-top:var(--s-2);}
.tier .tier-price{font-family:var(--f-mono);font-size:1.5rem;color:var(--ink);margin-top:var(--s-5);line-height:1.2;}
.tier .tier-price small{display:block;font-family:var(--f-sans);font-size:var(--fs-xs);color:var(--ink-3);margin-top:var(--s-2);letter-spacing:0;}
.tier .ticks{margin-top:var(--s-5);}
.tier .tier-cta{margin-top:auto;padding-top:var(--s-6);}

/* ---------- FAQ ---------- */
.faq{max-width:76ch;}
.faq-item{border-top:1px solid var(--line);}
.faq-item:last-child{border-bottom:1px solid var(--line);}
.faq-item summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;
  gap:var(--s-5);padding-block:var(--s-5);font-weight:600;font-size:var(--fs-body);
  transition:color .16s var(--ease);
}
.faq-item summary:hover{color:var(--accent);}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:'';flex:none;width:10px;height:10px;
  border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .22s var(--ease);
}
.faq-item[open] summary::after{transform:rotate(225deg) translate(-2px,-2px);}
.faq-item .answer{color:var(--ink-2);font-size:var(--fs-sm);padding-bottom:var(--s-5);max-width:70ch;}
.faq-item .answer a{color:var(--accent);}

/* ---------- closing CTA ---------- */
.cta{
  position:relative;overflow:hidden;text-align:center;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:clamp(40px,6vw,72px) clamp(24px,5vw,64px);
}
.cta::before{
  content:'';position:absolute;inset:-40% 25% auto;height:340px;pointer-events:none;
  background:radial-gradient(closest-side,var(--accent-wash),transparent);
}
.cta > *{position:relative;}
.cta h2{font-size:var(--fs-h2);max-width:22ch;margin-inline:auto;}
.cta p{color:var(--ink-2);margin-top:var(--s-4);max-width:54ch;margin-inline:auto;}
.cta .btn-row{margin-top:var(--s-6);}
.scarcity{
  display:inline-flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-5);
  font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);border:1px solid var(--accent-line);border-radius:var(--r-pill);padding:7px 14px;
}
.scarcity .pulse{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 2.4s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.25;}}
@media (prefers-reduced-motion:reduce){.scarcity .pulse{animation:none;}}

/* ---------- forms ---------- */
form{display:grid;gap:var(--s-4);}
.field > label{display:block;font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--s-2);}
input,select,textarea{
  width:100%;background:var(--bg-deep);color:var(--ink);
  border:1px solid var(--line-2);border-radius:var(--r-sm);
  padding:12px 14px;font-family:var(--f-sans);font-size:var(--fs-sm);
  transition:border-color .16s var(--ease);
}
input::placeholder,textarea::placeholder{color:var(--ink-3);}
input:hover,select:hover,textarea:hover{border-color:var(--ink-3);}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);}
textarea{resize:vertical;min-height:96px;}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px;}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4);}
.consent{display:flex;align-items:flex-start;gap:var(--s-3);font-size:var(--fs-xs);color:var(--ink-2);line-height:1.5;}
.consent input{width:auto;flex:none;margin-top:3px;accent-color:var(--accent);}
.consent a{color:var(--accent);}
.form-note{font-size:var(--fs-xs);color:var(--ink-3);}
.form-note:not(:empty){padding:var(--s-3) var(--s-4);border:1px solid var(--accent-line);border-radius:var(--r-sm);background:var(--accent-wash);color:var(--ink-2);}

/* ---------- blog ---------- */
.blog-list{display:grid;}
.post-link{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-3) var(--s-6);
  align-items:baseline;padding-block:var(--s-6);border-top:1px solid var(--line);
  text-decoration:none;
}
.post-link:first-child{border-top:none;}
.post-link:last-child{border-bottom:1px solid var(--line);}
.post-link .topic{font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);white-space:nowrap;}
.post-link h3{font-family:var(--f-display);font-weight:600;font-size:1.25rem;transition:color .16s var(--ease);}
.post-link:hover h3{color:var(--accent);}
.post-link p{grid-column:2;color:var(--ink-2);font-size:var(--fs-sm);}
@media (max-width:640px){.post-link{grid-template-columns:minmax(0,1fr);}.post-link p{grid-column:1;}}

article.post{max-width:68ch;}
article.post h1{font-size:var(--fs-h1);font-family:var(--f-display);font-weight:600;}
article.post .meta{font-family:var(--f-mono);font-size:var(--fs-xs);color:var(--ink-3);margin-top:var(--s-4);}
article.post h2{font-size:1.4rem;margin-top:var(--s-8);}
article.post p{color:var(--ink-2);margin-top:var(--s-4);font-size:1.02rem;line-height:1.78;}

/* ---------- inner page heading ---------- */
.page-head{padding-block:clamp(56px,8vw,104px) clamp(28px,4vw,44px);}
.page-head h1{font-size:var(--fs-h1);max-width:22ch;}
.page-head .lead{color:var(--ink-2);font-size:var(--fs-lead);margin-top:var(--s-5);max-width:62ch;}
/* the heading block already carries the top spacing — don't double it */
.page-head + .section{border-top:none;padding-top:0;}

/* ---------- legal / long-form document ---------- */
.doc{max-width:78ch;}
.doc h2{font-family:var(--f-sans);font-weight:700;font-size:1.08rem;margin-top:var(--s-8);display:flex;gap:var(--s-3);}
.doc h2 .n{font-family:var(--f-mono);font-weight:500;color:var(--accent);flex:none;}
.doc p,.doc li{color:var(--ink-2);font-size:var(--fs-sm);}
.doc p{margin-top:var(--s-4);}
.doc ul{margin:var(--s-4) 0 0;padding-left:var(--s-5);display:grid;gap:var(--s-2);}
.doc a{color:var(--accent);}
.req-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s-5);margin-top:var(--s-5);}
.req-card dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-3) var(--s-5);margin:0;}
.req-card dt{color:var(--ink-3);font-size:var(--fs-xs);}
.req-card dd{margin:0;font-family:var(--f-mono);font-size:var(--fs-xs);color:var(--ink);}
@media (max-width:560px){.req-card dl{grid-template-columns:minmax(0,1fr);gap:2px;}.req-card dd{margin-bottom:var(--s-3);}}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);background:var(--bg-deep);margin-top:var(--section-y);}
.site-footer .inner{
  max-width:var(--maxw);margin-inline:auto;padding:clamp(40px,5vw,64px) var(--gutter) clamp(28px,3vw,40px);
  display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,48px);
}
.site-footer .about{color:var(--ink-2);font-size:var(--fs-sm);margin-top:var(--s-4);max-width:36ch;}
.site-footer h4{font-family:var(--f-mono);font-weight:500;font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--s-4);}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3);font-size:var(--fs-sm);}
.site-footer a{color:var(--ink-2);text-decoration:none;transition:color .16s var(--ease);}
.site-footer a:hover{color:var(--accent);}
.site-footer .legal{
  max-width:var(--maxw);margin-inline:auto;padding:var(--s-5) var(--gutter) var(--s-7);
  border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-6);
  font-size:var(--fs-xs);color:var(--ink-3);
}

/* ---------- sticky mobile CTA ---------- */
.sticky-cta{display:none;}
@media (max-width:760px){
  .sticky-cta{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;
    padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
    background:color-mix(in srgb,var(--bg) 92%,transparent);
    backdrop-filter:blur(14px);border-top:1px solid var(--line-2);
  }
  .sticky-cta .btn{width:100%;}
  body{padding-bottom:76px;}
}

/* ==========================================================================
   Motion
   Short, consistent, once. Everything here is additive: with motion disabled
   or JS absent the page looks the same, just static.
   ========================================================================== */

@keyframes rise{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}}
@keyframes heroZoom{from{opacity:0;transform:scale(1.05);}to{opacity:1;transform:none;}}

/* hero entrance — pure CSS, so a missing script can never leave it blank */
@media (prefers-reduced-motion:no-preference){
  .hero-media{animation:heroZoom 1.7s var(--ease) both;}
  .hero .label{animation:rise .75s var(--ease) .15s both;}
  .hero h1{animation:rise .75s var(--ease) .27s both;}
  .hero .lead{animation:rise .75s var(--ease) .39s both;}
  .hero .btn-row{animation:rise .75s var(--ease) .5s both;}
  .hero .hero-proof{animation:rise .75s var(--ease) .6s both;}
  .trustbar li{animation:rise .6s var(--ease) both;animation-delay:calc(.62s + var(--i,0) * .05s);}
  .trustbar li:nth-child(2){--i:1;} .trustbar li:nth-child(3){--i:2;}
  .trustbar li:nth-child(4){--i:3;} .trustbar li:nth-child(5){--i:4;}
  .trustbar li:nth-child(6){--i:5;}
}

/* reveal on scroll — the attribute is added by motion.js, and only to
   elements that are still below the fold, so nothing on screen can flash */
[data-reveal]{opacity:0;transform:translateY(20px);will-change:opacity,transform;}
[data-reveal].is-in{
  opacity:1;transform:none;will-change:auto;
  transition:opacity .6s var(--ease),transform .6s var(--ease);
  transition-delay:var(--reveal-delay,0ms);
}

/* accordion: animate the row height instead of jumping open */
.faq-item .answer-wrap{
  display:grid;grid-template-rows:1fr;
  transition:grid-template-rows .34s var(--ease),opacity .28s var(--ease);
}
.faq-item .answer-wrap > .answer{min-height:0;overflow:hidden;}
.faq-item .answer-wrap.is-collapsing{grid-template-rows:0fr;opacity:0;}

/* header settles onto the page once you scroll */
.site-header{transition:background .3s var(--ease),box-shadow .3s var(--ease);}
.site-header.is-scrolled{
  background:color-mix(in srgb,var(--bg) 94%,transparent);
  box-shadow:0 14px 34px -26px #000;
}

/* remaining component motion */
.tier{transition:border-color .25s var(--ease),transform .25s var(--ease);}
.tier:hover{border-color:var(--line-2);transform:translateY(-3px);}
.tier--featured:hover{border-color:var(--accent);}
.promise-item svg{transition:transform .3s var(--ease);}
.promise-item:hover svg{transform:translateX(3px);}
.post-link{transition:padding-left .3s var(--ease);}
.post-link:hover{padding-left:var(--s-3);}
.spec-row .v{transition:color .2s var(--ease);}
.spec-row:hover .v{color:var(--accent);}
.site-footer a,.faq-item .answer a,.doc a{transition:color .18s var(--ease);}

@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;}
  .niche img,.niche:hover img,.card:hover,.tier:hover,.post-link:hover{transform:none;}
  .faq-item .answer-wrap{transition:none;}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;}
}

/* ---------- responsive ---------- */
/* four cards only stay on one band while they are one row; below that the
   subgrid alignment has nothing to align against, so fall back to flex */
@media (max-width:1100px){
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .grid--4.grid--aligned{grid-template-rows:none;}
  .grid--4.grid--aligned > .card{grid-row:auto;display:flex;}
  .grid--4.grid--aligned > .card > .card__foot{margin-top:auto;}
}
@media (max-width:1040px){
  .niches{grid-template-columns:repeat(3,minmax(0,1fr));}
  .niches a:nth-child(4),.niches a:nth-child(5){aspect-ratio:16/10;}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--s-6);}
}
@media (max-width:900px){
  /* nav links drop to their own scrollable row instead of disappearing —
     the CTA stays on the brand line */
  .site-header .nav{flex-wrap:wrap;gap:var(--s-3) var(--s-4);}
  .navlinks{
    order:3;width:100%;margin-left:0;gap:var(--s-5);
    font-size:var(--fs-xs);overflow-x:auto;scrollbar-width:none;
  }
  .navlinks::-webkit-scrollbar{display:none;}
  .navlinks a{white-space:nowrap;}
  .nav-cta{margin-left:auto;}
  /* narrow screens put more copy over the brighter part of the photo */
  .hero::before{background:linear-gradient(180deg,rgba(14,15,18,.80) 0%,rgba(14,15,18,.88) 50%,var(--bg) 100%);}
  .grid--3,.grid--4,.grid--2,.grid--split{grid-template-columns:minmax(0,1fr);}
  .grid--aligned{grid-template-rows:none;}
  .grid--aligned > .card{grid-row:auto;display:flex;}
  .grid--aligned > .card > .card__foot{margin-top:auto;}
  .grid--tiers{grid-template-rows:none;}
  .grid--tiers > .tier{grid-row:auto;display:flex;}
  .grid--tiers > .tier > .tier-cta{margin-top:auto;}
  .calc{grid-template-columns:minmax(0,1fr);}
  .hero-proof{grid-template-columns:minmax(0,1fr);gap:var(--s-4);}
  .row-item{grid-template-columns:28px minmax(0,1fr);gap:var(--s-3) var(--s-4);}
  .row-item p{grid-column:2;}
  .site-footer .inner{grid-template-columns:minmax(0,1fr);}
  .honest{border-left:none;border-top:1px solid var(--line-2);padding-left:0;padding-top:var(--s-6);}
}
@media (max-width:620px){
  .brand svg{width:20px;height:20px;}
  .brand-name{font-size:.72rem;letter-spacing:.12em;}
  .nav-cta{font-size:var(--fs-xs);padding:11px 14px;}
  .field-row{grid-template-columns:minmax(0,1fr);}
  .niches{grid-template-columns:repeat(2,minmax(0,1fr));}
  .niches a:nth-child(5){grid-column:1/-1;aspect-ratio:16/9;}
  .steps{grid-template-columns:minmax(0,1fr);}
}