/* ==========================================================================
   getforj.com — Phase 1 landing page. Sections only; base system in forj.css
   ========================================================================== */

/* ---------- product widgets ----------
   Each image is one idea at 1.3-2x in-app size. Rules: width:100%, height:auto, never
   cropped, never a fixed height. Below 768px the <picture> swaps to the 4:5 mobile file. */

.widget{ display:block; width:100%; max-width:760px; margin-inline:auto; }
.widget img{ display:block; width:100%; height:auto; }
/* the bay TV image is #101213, a shade off the dark band, so it gets a card edge */
.widget--dark img{ border:1px solid var(--dark-edge); border-radius:var(--radius); }
.widget-fig{ margin:clamp(40px, 5vw, 64px) 0 0; }   /* full content width: the dashboard text needs the size */
@media (min-width:768px){
  .widget-fig .widget{ max-width:none; }
}
.widget-fig figcaption{
  margin-top:8px;
  text-align:center;
  font:400 12px/1.4 var(--forj-font-data);
  letter-spacing:.04em;
  color:var(--ink-label);
}
@media (max-width:767px){
  .widget{ max-width:520px; }
}

/* ---------- 1. hero ---------- */

.hero{ padding-block:clamp(56px, 8vw, 112px) 0; }
.hero__grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:clamp(36px, 5vw, 56px);
  align-items:center;
}
.hero__widget{ margin-inline:0; }
@media (min-width:1080px){
  .hero__grid{
    grid-template-columns:minmax(0, .92fr) minmax(0, 1.08fr);
    gap:clamp(32px, 4vw, 64px);
  }
  .hero__widget{ max-width:none; }
  .hero h1{ font-size:clamp(44px, 4.5vw, 60px); }
}
.hero__kicker{
  max-width:34em;
  margin:24px 0 30px;
  font-size:clamp(17px, 1.6vw, 20px);
  line-height:1.55;
  color:var(--ink-body);
}
.hero__kicker a{
  margin-left:.35em;
  font-weight:500;
  color:var(--ink);
  white-space:nowrap;
  text-underline-offset:5px;
}
.hero h1{ max-width:12.5em; }
.hero .lede{ margin-top:30px; }
.hero__cta{ margin-top:40px; }

.stats{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:36px clamp(24px, 3vw, 44px);
  margin-top:clamp(56px, 7vw, 96px);
  padding-block:clamp(36px, 4vw, 48px) clamp(24px, 3vw, 40px);
  border-top:1px solid var(--paper-line);
}
.stat p{ font-size:15.5px; line-height:1.55; }
.stat .stat__k{
  margin-bottom:14px;
  font:300 clamp(30px, 3.2vw, 42px)/1 var(--forj-font-ui);
  letter-spacing:-.02em;
  color:var(--ink);
}
/* Official Trackman logo (media kit, unmodified). Kit rule: keep one "M-width" of clear space
   around it (about 20px at this size) and show the trademark line in the footer. The box is as
   tall as the other stat labels so the four columns still line up. */
.stat__logo{
  display:flex;
  align-items:center;
  min-height:clamp(30px, 3.2vw, 42px);
  margin-bottom:14px;
}
.stat__logo img{ width:min(100%, 200px); height:auto; }

/* ---------- 1.5 value: two vantage points + moat ---------- */

.vantage{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  border-block:1px solid var(--paper-line);
}
.vantage__col{ padding-block:clamp(32px, 4vw, 56px); }
.vantage__col:first-child{ padding-right:clamp(0px, 4vw, 56px); }
.vantage__col + .vantage__col{
  padding-left:clamp(24px, 4vw, 56px);
  border-left:1px solid var(--paper-line);
}
.vantage h3{
  margin:20px 0 26px;
  font-size:clamp(25px, 2.5vw, 33px);
  line-height:1.16;
}
.vantage li{ padding-block:10px; line-height:1.55; }
.vantage li::before{ top:calc(10px + .62em); }

.moat{
  margin-top:clamp(40px, 5vw, 64px);
  padding:clamp(32px, 5vw, 72px);
  background:var(--dark);
  border-radius:var(--radius);
  color:var(--on-dark-2);
}
.moat h3{
  margin-bottom:22px;
  font-size:clamp(28px, 3.4vw, 44px);
  line-height:1.1;
  color:var(--on-dark);
}
.moat p{ max-width:46em; font-size:clamp(17px, 1.5vw, 19px); }
.moat b{ color:var(--on-dark); }

/* ---------- 1.55 story + price: one flow (the problem, the turn, what it costs) ---------- */

.story{ padding-block:clamp(56px, 7vw, 96px); text-align:center; }
.story__lead{
  max-width:18em;
  margin-inline:auto;
  font-size:clamp(30px, 4.2vw, 54px);
  line-height:1.14;
  font-weight:300;
  letter-spacing:-.025em;
  color:var(--ink);
  text-wrap:balance;
}
.story__beats{ display:grid; gap:14px; max-width:34em; margin:clamp(24px, 3vw, 36px) auto 0; }
.story__beats p{ font-size:clamp(18px, 1.7vw, 22px); line-height:1.5; color:var(--ink-body); }
.story__beats b{ font-weight:500; }
.story__tail{
  margin-top:clamp(36px, 5vw, 56px);
  font:500 clamp(18px, 1.6vw, 20px)/1.4 var(--forj-font-ui);
  color:var(--ink);
}
/* the answer to "here's what that costs", directly under the line that asks it */
.pricecard{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:24px 40px;
  max-width:880px;
  margin:22px auto 0;
  padding:clamp(24px, 3vw, 36px) clamp(24px, 4vw, 48px);
  background:var(--dark);
  border-radius:var(--radius);
  text-align:left;
}
.pricecard__sub{ font-size:16px; color:var(--on-dark-2); }
.pricecard__amt{
  margin-top:6px;
  font:300 clamp(30px, 3.6vw, 46px)/1.1 var(--forj-font-ui);
  letter-spacing:-.02em;
  color:var(--on-dark);
}
.pricecard__btn{ background:var(--on-dark); color:var(--ink); }
.pricecard__btn:hover{ background:#fff; }

/* ---------- 1.6 pricing ---------- */

.price-card{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.25fr);
  gap:clamp(32px, 5vw, 80px);
  align-items:start;
  margin-top:clamp(36px, 4vw, 52px);
  padding:clamp(28px, 4vw, 60px);
  background:var(--dark-1);
  border:1px solid var(--dark-line);
  border-radius:var(--radius);
}
.price__amt{
  font:300 clamp(56px, 6.8vw, 92px)/1 var(--forj-font-ui);
  letter-spacing:-.035em;
  font-variant-numeric:lining-nums;
  color:var(--on-dark);
}
.price__per{ margin-top:14px; font-size:16px; color:var(--on-dark-2); }
.price__what{ margin-top:26px; font-size:17px; color:#C3C9CF; }
.price__cta{ margin-top:34px; }
.price__note{ margin-top:14px; font-size:13.5px; color:var(--on-dark-3); }

.incl .label{ margin-bottom:12px; }
.incl li{
  padding-block:13px;
  border-bottom:1px solid var(--dark-line);
  font-size:16px;
  line-height:1.5;
  color:#C3C9CF;
}
.incl li:last-child{ border-bottom:0; }
.incl li::before{ top:calc(13px + .6em); }

/* second group inside the same card: optional extras, hollow bullets */
.incl .incl__opt{ margin-top:clamp(28px, 3vw, 40px); }
.band--dark .incl .incl__opt-list li::before{
  background:transparent;
  box-shadow:inset 0 0 0 1.5px var(--slate);
}

.addon{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:20px 32px;
  margin-top:20px;
  padding:clamp(24px, 3vw, 32px) clamp(24px, 4vw, 60px);
  border:1px solid var(--dark-line);
  border-radius:var(--radius);
}
.addon h4{ margin-bottom:8px; font-size:22px; font-weight:400; }
.addon p{ max-width:36em; font-size:15.5px; }
.addon .link{ color:var(--on-dark); font-weight:500; white-space:nowrap; }

/* ---------- 2. journey ---------- */

.steps{ border-top:1px solid var(--paper-line); }
/* text on top (number | title | description), the shot full width below it */
.step{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:clamp(28px, 3.5vw, 44px);
  padding-block:clamp(36px, 5vw, 64px);
  border-bottom:1px solid var(--paper-line);
}
.step__copy{ display:grid; gap:18px; }
.step .widget{ margin-inline:0; }
@media (min-width:768px){
  .step .widget{ max-width:none; }
}
@media (min-width:1080px){
  .step__copy{
    grid-template-columns:clamp(72px, 9vw, 120px) minmax(220px, 320px) minmax(0, 1fr);
    gap:clamp(20px, 4vw, 52px);
    align-items:start;
  }
}
.step__n{
  font:400 clamp(44px, 5.5vw, 68px)/1 var(--forj-font-data);
  letter-spacing:-.045em;
  color:var(--ink);
}
.step__t h3{
  margin-bottom:14px;
  font:500 16px/1.35 var(--forj-font-ui);
  letter-spacing:.09em;
  text-transform:uppercase;
}
.badge{
  display:inline-block;
  padding:6px 14px;
  border:1px solid var(--slate);
  background:rgba(127,163,182,.14);
  border-radius:999px;
  font:500 12px/1.35 var(--forj-font-data);
  letter-spacing:.03em;
  color:var(--ink-2);
}
.step__d b{
  display:block;
  margin-bottom:10px;
  font:400 clamp(21px, 2vw, 26px)/1.28 var(--forj-font-ui);
  letter-spacing:-.01em;
}
.step__d p{ max-width:36em; }

/* ---------- 3. faldo ---------- */

.faldo{
  display:grid;
  grid-template-columns:minmax(200px, 320px) minmax(0, 1fr);
  gap:clamp(40px, 7vw, 112px);
  align-items:center;
}
/* Instagram reel tiles: the post's own cover image (self-hosted) linking out to the reel */
.reel{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:9 / 16;
  overflow:hidden;
  border-radius:var(--radius);
  background:var(--dark-1);
}
.faldo .reel{ max-height:560px; }
.reel img{ display:block; width:100%; height:100%; object-fit:cover; }
.reel__cta{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:56px 18px 16px;
  background:linear-gradient(to top, rgba(10,11,12,.9), rgba(10,11,12,0));
  font:500 11px/1.3 var(--forj-font-data);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--on-dark);
}
.reel:hover .reel__cta{ color:var(--ember-hover); }
.faldo .label{ margin-bottom:28px; }
.faldo blockquote{
  margin:0 0 40px;
  font-size:clamp(26px, 3.2vw, 42px);
  line-height:1.24;
  font-weight:300;
  letter-spacing:-.02em;
  color:var(--on-dark);
  text-wrap:balance;
}
.faldo__who b{ display:block; margin-bottom:6px; font-size:21px; font-weight:500; }
.faldo__who span{ font-size:16px; }

/* ---------- 5. the customer-screen story ---------- */
/* headline + live screen on top, then the story in three short columns (problem / fix / role) */

.command h2{ max-width:20em; }
.command__top{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:clamp(32px, 4vw, 48px);
  align-items:center;
}
.command .widget{ margin-inline:0; }
@media (min-width:1080px){
  .command__top{ grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:clamp(32px, 4.5vw, 72px); }
  .command .widget{ max-width:none; }
  .command h2{ font-size:clamp(30px, 3.4vw, 44px); }
}
.command__cols{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(28px, 3.5vw, 56px);
  margin-top:clamp(44px, 5.5vw, 72px);
}
.command__col{ padding-top:22px; border-top:1px solid var(--dark-edge); }
.command__col .label{ margin-bottom:16px; color:var(--slate); }
.command__stmt{
  margin-bottom:14px;
  font-size:clamp(20px, 1.8vw, 24px);
  line-height:1.3;
  font-weight:300;
  letter-spacing:-.01em;
  color:var(--on-dark);
}
.command__stmt--long{ margin-bottom:0; font-size:clamp(18px, 1.55vw, 21px); line-height:1.45; color:#D5DADF; }
.command__stmt b{ font-weight:500; }
.command__col p:not(.label):not(.command__stmt){ font-size:16.5px; line-height:1.65; color:#C3C9CF; }
@media (max-width:1079px){
  .command__cols{ grid-template-columns:1fr; }
}

/* ---------- 7. demo video ---------- */

.video{ text-align:center; }
.video .lede{ margin:24px auto 0; }
.video__frame{
  max-width:920px;
  margin:clamp(36px, 5vw, 60px) auto 0;
  overflow:hidden;
  background:#000;
  border:1px solid var(--dark-line);
  border-radius:var(--radius);
}
.video__frame video{ display:block; width:100%; aspect-ratio:16 / 9; background:#000; }
.video__frame p{ padding:24px; color:var(--on-dark-2); }   /* shown only if the browser can't play video */
.micro{ text-align:center; }
.micro p{
  font-size:clamp(22px, 2.6vw, 32px);
  line-height:1.3;
  font-weight:300;
  letter-spacing:-.015em;
  color:var(--on-dark);
}
.micro a{ font-weight:500; margin-left:.3em; }

/* ---------- 8. testimonial strip ---------- */

.strip{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:clamp(14px, 2vw, 24px);
}
.tile{ aspect-ratio:9 / 16; }
.tile--quote{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:20px;
  padding:clamp(20px, 2vw, 30px);
  background:var(--dark);
  border-radius:var(--radius);
  color:var(--on-dark-2);
}
.tile--quote p{
  font-size:clamp(16px, 1.45vw, 19px);
  line-height:1.5;
  font-weight:300;
  color:#E9ECEF;
}
.tile__who b{
  display:block;
  margin-bottom:6px;
  font:500 11px/1.3 var(--forj-font-data);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--on-dark);
}
.tile__photo{
  display:block;
  width:56px;
  height:56px;
  margin-bottom:14px;
  object-fit:cover;
  border-radius:var(--radius);
  background:var(--dark-2);
  box-shadow:0 0 0 1px var(--dark-edge);   /* dark photo on a dark tile needs an edge */
}
.tile__who span{ font-size:14px; color:var(--on-dark-3); }

/* ---------- 9. founders ---------- */

.founders{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(18px, 2.4vw, 32px);
}
.fcard{
  display:flex;
  flex-direction:column;
  padding:clamp(24px, 2.8vw, 38px);
  background:var(--paper-raised);
  border:1px solid var(--paper-line);
  border-radius:var(--radius);
}
.fcard__photo{
  display:block;
  width:120px;
  height:120px;
  margin-bottom:28px;
  object-fit:cover;
  border-radius:var(--radius);
  background:var(--ink-2);   /* shown while the photo loads */
}
.fcard h4{ margin:12px 0 16px; font-size:28px; font-weight:400; line-height:1.15; }
.fcard p:not(.label){ margin-bottom:26px; font-size:16px; line-height:1.68; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; }
.chip{
  padding:5px 12px;
  border:1px solid rgba(17,18,20,.24);
  border-radius:999px;
  font:400 12px/1.4 var(--forj-font-data);
  color:var(--ink-2);
}

/* ---------- 9.5 origin ---------- */

.origin h2{ margin-bottom:48px; }
.origin p{
  margin-bottom:28px;
  font-size:clamp(18px, 1.6vw, 20px);
  line-height:1.72;
}
.origin em{ font-style:normal; font-weight:500; color:var(--ink); }
.origin .lead-line,
.origin .close-line{
  font-size:clamp(24px, 2.6vw, 32px);
  line-height:1.36;
  font-weight:300;
  letter-spacing:-.015em;
  color:var(--ink);
}
.origin .close-line{ margin-top:12px; margin-bottom:0; }
.origin .btn{ margin-top:44px; }

/* ---------- 9.7 coming soon ---------- */

.soon__grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(18px, 2.4vw, 32px);
  margin-top:clamp(36px, 4vw, 52px);
}
.soon__card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:clamp(24px, 2.8vw, 38px);
  background:var(--paper-raised);
  border:1px solid var(--paper-line);
  border-radius:var(--radius);
}
.soon__card h4{ margin:16px 0 12px; font-size:24px; font-weight:400; line-height:1.2; }
.soon__card p:not(.label){ font-size:16px; }
.soon__link{ margin-top:auto; padding-top:20px; font-size:15.5px; font-weight:500; color:var(--ink); }

/* ---------- 10. final CTA ---------- */

.final h2{ max-width:14em; font-size:clamp(36px, 5vw, 66px); line-height:1.05; }
.final .lede{ margin-top:26px; }
.cta-cols{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(40px, 6vw, 96px);
  align-items:start;
  margin-top:clamp(44px, 5vw, 64px);
}
.cta-col h3{ margin:16px 0 14px; font-size:clamp(26px, 2.6vw, 34px); line-height:1.2; }
.cta-col .blurb{ max-width:30em; font-size:16.5px; }
.cta-col .btn{ margin-top:30px; }
.cta-col--ent{
  padding-left:clamp(32px, 5vw, 72px);
  border-left:1px solid var(--dark-line);
}
.cta-fine{ margin-top:20px; font-size:14.5px; color:var(--on-dark-3); }
.cta-fine a{ color:var(--on-dark-2); }

/* ---------- responsive ---------- */

@media (max-width:980px){
  .stats{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .strip{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .founders,
  .soon__grid{ grid-template-columns:1fr; }
}

@media (max-width:820px){
  .vantage{ grid-template-columns:1fr; }
  .vantage__col:first-child{ padding-right:0; }
  .vantage__col + .vantage__col{
    padding-left:0;
    border-left:0;
    border-top:1px solid var(--paper-line);
  }
  .price-card,
  .faldo,
  .cta-cols{ grid-template-columns:1fr; }
  .reel{ max-width:260px; }
  .cta-col--ent{
    padding-left:0;
    border-left:0;
    padding-top:40px;
    border-top:1px solid var(--dark-line);
  }
  .nav a:not(.btn){ display:none; }
}

@media (max-width:520px){
  .stats{ grid-template-columns:1fr; }
  .btn{ white-space:normal; text-align:center; padding-block:14px; }
  .strip{ gap:12px; }
}

/* ---------- Home: compact "how it works" (the full version is on /product/) ---------- */

.how__grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(28px, 3vw, 48px);
  padding-top:clamp(28px, 4vw, 44px);
  border-top:1px solid var(--paper-line);
}
.how__item{ display:grid; gap:14px; align-content:start; justify-items:start; }
.how__item h3{
  font:500 16px/1.35 var(--forj-font-ui);
  letter-spacing:.09em;
  text-transform:uppercase;
}
.how__item b{
  display:block;
  font:400 clamp(20px, 1.8vw, 24px)/1.3 var(--forj-font-ui);
  letter-spacing:-.01em;
}
.how__more{
  display:flex;
  flex-wrap:wrap;
  gap:12px 32px;
  margin-top:clamp(32px, 4vw, 48px);
  font-weight:500;
}
@media (max-width:820px){
  .how__grid{ grid-template-columns:1fr; }
}

/* ---------- FAQ (Product page) ---------- */

.faq{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(28px, 4vw, 52px) clamp(28px, 5vw, 72px);
}
.faq__item{ padding-top:22px; border-top:1px solid var(--paper-line); }
.faq h3{ margin-bottom:10px; font-size:clamp(19px, 1.7vw, 22px); font-weight:500; line-height:1.3; letter-spacing:-.005em; }
.faq p{ font-size:16.5px; max-width:34em; }
@media (max-width:760px){ .faq{ grid-template-columns:1fr; } }

/* ---------- multi-page chrome ---------- */

.nav a[aria-current="page"]{ color:var(--ink); }
.subnav{ display:none; }
@media (max-width:820px){
  html{ scroll-padding-top:112px; }
  /* the primary nav hides its text links here, so the page links get their own row */
  .subnav{ display:flex; gap:24px; padding-bottom:12px; overflow-x:auto; }
  @media (max-width:480px){ .subnav{ gap:18px; } }
  .subnav a{
    padding-block:6px;
    font:500 14px/1 var(--forj-font-ui);
    color:var(--ink-body);
    text-decoration:none;
    white-space:nowrap;
  }
  .subnav a[aria-current="page"]{
    color:var(--ink);
    text-decoration:underline;
    text-decoration-thickness:1px;
    text-underline-offset:7px;
  }
}

/* ---------- exec feedback round: tags, hero order, how-it-works screens, Marketplace steps ---------- */

/* Ember tag: the small audience / status labels. Ink on ember is 8.6:1 (ember text on paper would
   be ~2.2:1, which fails), so these are filled tags rather than orange type. Kept to three uses:
   the hero status line and the two audience labels, so ember still reads as rare. */
.tag-ember{
  display:inline-flex;
  align-items:center;
  width:fit-content;
  justify-self:start;
  padding:7px 12px;
  background:var(--ember);
  color:var(--ink);
  border-radius:2px;
  font:500 11px/1.3 var(--forj-font-data);
  letter-spacing:.2em;
  text-transform:uppercase;
}

/* Stacked hero (under 1080px): lead with status + headline, then the image, then the
   supporting copy, so the image is on the first screen of a phone. */
@media (max-width:1079px){
  .hero__grid{ gap:0; }
  .hero__copy{ display:contents; }
  .hero__copy > .tag-ember{ order:1; }
  .hero__copy > h1{ order:2; margin-top:22px; }
  .hero__widget{ order:3; margin-top:28px; }
  .hero__copy > .lede{ order:4; margin-top:28px; }
  .hero__copy > .hero__cta{ order:5; margin-top:28px; }
  .hero__copy > .hero__kicker{ order:6; margin:32px 0 0; }
}

/* Home "how it works": a product screen under each step */
.how__shot{ margin-inline:0; margin-top:6px; }

/* Product "customer sees their key numbers" copy runs to three paragraphs */

/* Marketplace explainer note under the Buy buttons */
.cta-fine--steps{ margin-top:14px; max-width:30em; }
.price__note a{ color:var(--on-dark-2); }

/* Product: Find FORJ on the Trackman Portal (inside the pricing band) */
.get{
  margin-top:clamp(48px, 6vw, 80px);
  padding-top:clamp(40px, 5vw, 64px);
  border-top:1px solid var(--dark-line);
}
.get__title{
  margin:18px 0 14px;
  font-size:clamp(28px, 3.2vw, 40px);
  line-height:1.1;
}
.get .lede{ max-width:38em; }
.get__steps{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(24px, 4vw, 56px);
  margin:clamp(32px, 4vw, 48px) 0 0;
  padding:0;
  list-style:none;
}
.get__step{ padding-top:22px; border-top:1px solid var(--dark-edge); }
.get__n{
  margin-bottom:14px;
  font:500 12px/1 var(--forj-font-data);
  letter-spacing:.2em;
  color:var(--slate);
}
.get__step h4{ margin-bottom:10px; font-size:clamp(20px, 1.9vw, 24px); font-weight:400; line-height:1.25; color:var(--on-dark); }
.get__step p:not(.get__n){ font-size:16px; }
.get__cta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px 24px;
  margin-top:clamp(32px, 4vw, 48px);
}
.get__url{ font:400 14px/1.4 var(--forj-font-data); letter-spacing:.04em; color:var(--on-dark-3); }
@media (max-width:820px){ .get__steps{ grid-template-columns:1fr; } }
@media (max-width:480px){ .get__cta .btn{ width:100%; white-space:normal; text-align:center; padding-block:14px; } }

/* ---------- Get to Green: real customer-screen captures (dark UI on a paper section) ---------- */

.tv img{
  border-radius:var(--radius);
  box-shadow:0 1px 2px rgba(17,18,20,.12), 0 16px 40px -16px rgba(17,18,20,.4);
}
.green-teaser__grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:clamp(32px, 4vw, 48px);
  align-items:center;
}
.green-teaser .lede{ margin-top:22px; }
.green-teaser .widget{ margin-inline:0; }
.green-teaser .how__more{ margin-top:28px; }
@media (min-width:1080px){
  .green-teaser__grid{ grid-template-columns:minmax(0, .85fr) minmax(0, 1.15fr); gap:clamp(32px, 4.5vw, 72px); }
  .green-teaser .widget{ max-width:none; }
}

.green__grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(36px, 4vw, 64px);
  padding-top:clamp(28px, 4vw, 48px);
  border-top:1px solid var(--paper-line);
}
.green__step{ display:grid; gap:14px; align-content:start; }
.green__step h3{
  font:500 16px/1.35 var(--forj-font-ui);
  letter-spacing:.09em;
  text-transform:uppercase;
}
.green__step p{ max-width:34em; }
.green__step .widget{ margin-inline:0; margin-top:10px; }
.green__final{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(36px, 4vw, 64px);
  align-items:start;
  margin-top:clamp(48px, 6vw, 80px);
  padding-top:clamp(28px, 4vw, 48px);
  border-top:1px solid var(--paper-line);
}
.green__shots{ display:grid; gap:20px; }
.green__shots .widget{ margin-inline:0; }

/* the four-step verdict ladder, in the customer screen's own words */
.ladder{ margin:14px 0 0; padding:0; list-style:none; border-top:1px solid var(--paper-line); }
.ladder li{
  display:grid;
  grid-template-columns:10px minmax(0, 1fr);
  column-gap:14px;
  row-gap:2px;
  padding-block:13px;
  border-bottom:1px solid var(--paper-line);
}
.ladder li::before{
  content:"";
  grid-row:1;
  width:10px;
  height:10px;
  margin-top:.5em;
  border:1.5px solid var(--ink-2);
}
.ladder li:last-child::before{ background:var(--ember); border-color:var(--ember); }
.ladder b{ grid-column:2; font-size:18px; font-weight:500; color:var(--ink); }
.ladder span{ grid-column:2; font-size:15.5px; }

@media (max-width:1079px){
  .green__grid,
  .green__final{ grid-template-columns:1fr; }
}
@media (min-width:768px) and (max-width:1079px){
  .green__shots .widget,
  .green__step .widget{ max-width:none; }
}

/* ---------- hero: the fitting-bay photo (the winner screen is on the TV in it) ---------- */

.hero__photo img{
  border-radius:var(--radius);
  box-shadow:0 1px 2px rgba(17,18,20,.12), 0 22px 48px -18px rgba(17,18,20,.45);
}

/* ---------- Locations: map, pins, location cards ---------- */

.map{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:clamp(16px, 2vw, 24px);
}
.map__defs{ position:absolute; width:0; height:0; overflow:hidden; }
.map__main,
.map__inset{
  margin:0;
  background:var(--paper-raised);
  border:1px solid var(--paper-line);
  border-radius:var(--radius);
}
.map__main{ display:flex; flex-direction:column; justify-content:center; padding:clamp(10px, 2vw, 28px); }
.map__insets{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(16px, 2vw, 24px); }
.map__inset{ padding:clamp(12px, 1.4vw, 18px); }
.map__inset .label{ margin-bottom:10px; }
.map__canvas{ position:relative; width:100%; overflow:hidden; }
.map__canvas > svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
/* state shapes (drawn once, reused by <use> in each map) */
#us-states path{
  fill:#EAE8E3;
  stroke:#F8F7F5;
  stroke-width:1;
  vector-effect:non-scaling-stroke;
}
#us-states path.is-live{ fill:rgba(127, 163, 182, .42); }

.pin{
  position:absolute;
  display:block;
  width:30px;
  height:30px;
  transform:translate(-50%, -50%);
  text-decoration:none;
  color:var(--ink);
}
.pin__dot{
  position:absolute;
  top:50%; left:50%;
  width:12px; height:12px;
  margin:-6px 0 0 -6px;
  border-radius:50%;
  background:var(--ink);
  box-shadow:0 0 0 3px rgba(248, 247, 245, .95);
  transition:background-color .16s ease, transform .16s ease;
}
.pin--inset .pin__dot{ width:14px; height:14px; margin:-7px 0 0 -7px; }
.pin--cluster .pin__dot{
  display:grid;
  place-items:center;
  width:26px; height:26px;
  margin:-13px 0 0 -13px;
  font:500 12px/1 var(--forj-font-data);
  color:var(--on-dark);
}
.pin__label{
  position:absolute;
  top:50%;
  left:calc(50% + 14px);
  transform:translateY(-50%);
  white-space:nowrap;
  font:500 11px/1 var(--forj-font-data);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink);
  text-shadow:0 0 3px #F8F7F5, 0 0 3px #F8F7F5, 0 0 6px #F8F7F5;
}
.pin[data-side="l"] .pin__label{ left:auto; right:calc(50% + 14px); }
.pin[data-side="t"] .pin__label{ top:auto; bottom:calc(50% + 12px); left:50%; right:auto; transform:translateX(-50%); }
.pin--cluster .pin__label{ left:calc(50% + 21px); }
.pin--cluster[data-side="l"] .pin__label{ left:auto; right:calc(50% + 21px); }
.pin:hover .pin__dot,
.pin:focus-visible .pin__dot{ background:var(--ember); transform:scale(1.15); }
.pin:focus-visible{ outline:none; }
.pin:focus-visible .pin__dot{ outline:2px solid var(--ink); outline-offset:3px; }

.locgroup{ margin-top:clamp(40px, 5vw, 64px); }
.locgroup__h{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px 16px;
  margin-bottom:20px;
  padding-top:22px;
  border-top:1px solid var(--paper-line);
  font-size:clamp(26px, 2.6vw, 34px);
  font-weight:300;
  line-height:1.15;
}
.locgroup__h span{
  font:500 11px/1 var(--forj-font-data);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-label);
}
.locgrid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(14px, 2vw, 24px); }
.loc{
  display:flex;
  flex-direction:column;
  padding:clamp(22px, 2.4vw, 30px);
  background:var(--paper-raised);
  border:1px solid var(--paper-line);
  border-radius:var(--radius);
}
.loc h3{ margin:12px 0 10px; font-size:26px; font-weight:400; line-height:1.15; }
.loc address{ font-style:normal; font-size:16px; line-height:1.55; }
.loc__phone{ margin-top:10px; font-size:15.5px; }
.loc__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px; margin-top:auto; padding-top:22px; }
.loc__actions .link{ font-size:15.5px; font-weight:500; }
.loc:target{ border-color:var(--ink); box-shadow:0 0 0 1px var(--ink); }
.locs__note{ max-width:44em; margin-top:clamp(40px, 5vw, 64px); font-size:15.5px; }

@media (min-width:1080px){
  .map{ grid-template-columns:minmax(0, 2.1fr) minmax(0, 1fr); align-items:stretch; }
  .map__insets{ grid-template-columns:1fr; align-content:space-between; }
}
@media (max-width:980px){
  .locgrid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:620px){
  .locgrid,
  .map__insets{ grid-template-columns:1fr; }
  /* the national map is only ~330px wide on a phone: smaller labels so they do not collide */
  .map__main .pin__label{ font-size:9px; letter-spacing:.03em; }
  .map__main .pin--cluster .pin__label{ left:calc(50% + 18px); }
  .map__main .pin--cluster[data-side="l"] .pin__label{ left:auto; right:calc(50% + 18px); }
}

/* ---------- Product: owner / fitter photo heading each audience column ---------- */
/* The audience tag sits on the photo (bottom-left), like the reel captions, so person and role
   read as one unit. Photos are cropped to 4:3 with object-fit so different source ratios match. */
.vantage__media{
  position:relative;
  margin:0 0 clamp(22px, 2.4vw, 30px);
  aspect-ratio:4 / 3;
  overflow:hidden;
  border-radius:var(--radius);
  background:var(--paper-raised);
}
.vantage__media img{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 16%; }
.vantage__media .tag-ember{
  position:absolute;
  left:clamp(12px, 1.4vw, 18px);
  bottom:clamp(12px, 1.4vw, 18px);
  box-shadow:0 2px 12px rgba(17, 18, 20, .28);
}
.vantage__media + h3{ margin-top:0; }