/* Relayrix landing — page-specific layout. Tokens + shared components (.nav/.btn/.card/.footer)
   live in brand.css (load it first). Structure follows the approved "Variant B" mockup:
   hero + product screenshots, dark transform band, comparison table, priced card. */

:root{
  /* dark showcase band — landing-only, deliberately fixed in both schemes */
  --band:#0B0F17; --band-surface:#131826; --band-border:#232A3B;
  --band-text:#F5F7FA; --band-muted:#9AA3B2;
  --shot-shadow:0 18px 60px rgba(18,21,27,.22),0 3px 10px rgba(18,21,27,.10);
}
@media (prefers-color-scheme:dark){
  :root{--shot-shadow:0 20px 60px rgba(0,0,0,.55)}
}

html{scroll-behavior:smooth}
h1,h2,h3,h4{text-wrap:balance}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- section scaffolding ---- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(16px,4vw,24px)}
.sec{padding:clamp(48px,7vw,76px) 0}
.sec--tint{background:var(--color-primary-tint)}
@media (prefers-color-scheme:dark){.sec--tint{background:#0f1626}}
.sec__head{max-width:760px}
.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;
  color:var(--color-accent-text);margin:0 0 12px}
.h2{font-size:clamp(26px,3.4vw,38px);line-height:1.12;letter-spacing:-.02em;font-weight:800;margin:0}
.lead{font-size:18px;color:var(--color-text-muted);max-width:62ch;margin:14px 0 0}

/* ---- hero ---- */
.hero{padding:clamp(36px,5vw,52px) 0 24px;text-align:center;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-30% 0 auto 0;height:520px;pointer-events:none;
  background:radial-gradient(60% 70% at 50% 0%,rgba(43,87,217,.16),transparent 70%)}
@media (prefers-color-scheme:dark){
  .hero::before{background:radial-gradient(60% 70% at 50% 0%,rgba(110,147,245,.16),transparent 70%)}
}
.hero__inner{position:relative;max-width:860px;margin:0 auto}
.hero__title{font-size:clamp(34px,6vw,62px);line-height:1.03;letter-spacing:-.03em;font-weight:800;margin:0}
.hero__sub{font-size:19px;color:var(--color-text-muted);max-width:60ch;margin:20px auto 0}
.hero__cta{display:flex;gap:12px;justify-content:center;margin:28px 0 6px;flex-wrap:wrap}
.hero__trust{list-style:none;display:flex;gap:20px;justify-content:center;flex-wrap:wrap;
  margin:26px 0 22px;padding:0;font-size:13.5px;color:var(--color-text-muted)}
.hero__trust li{display:inline-flex;align-items:center;gap:7px}
.hero__trust svg{width:16px;height:16px;flex:none;stroke:var(--color-accent);fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* .shot below also sets margin:0 to reset the <figure> default — this needs the extra
   specificity to keep the hero screenshot's breathing room under the trust row. */
.shot.hero__shot{max-width:1040px;margin:clamp(28px,5vw,44px) auto 0}

/* ---- framed product screenshot ---- */
.shot{position:relative;background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shot-shadow);margin:0}
.shot img{width:100%;height:auto}
.shot--spaced{margin-top:36px}
.band .shot{background:var(--band-surface);border-color:var(--band-border);
  box-shadow:0 24px 70px rgba(0,0,0,.5)}
/* every shot except the hero opens full-size */
.shot:not(.hero__shot) img{cursor:zoom-in}
.shot:not(.hero__shot)::after{content:"⤢ Enlarge";position:absolute;top:10px;right:10px;
  font:600 11px/1 var(--font-sans);letter-spacing:.02em;background:rgba(6,9,15,.62);color:#fff;
  padding:5px 9px;border-radius:6px;opacity:0;transition:opacity .15s;pointer-events:none;z-index:1}
.shot:not(.hero__shot):hover::after,.shot:not(.hero__shot):focus-within::after{opacity:1}

/* lightbox */
.lb{position:fixed;inset:0;z-index:100;display:none;place-items:center;padding:32px;
  background:rgba(6,9,15,.88);cursor:zoom-out}
.lb.is-open{display:grid}
.lb__img{max-width:min(1400px,94vw);max-height:90vh;width:auto;height:auto;border-radius:12px;
  box-shadow:0 30px 90px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.10);cursor:default}
.lb__close{position:absolute;top:18px;right:22px;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.22);background:rgba(0,0,0,.45);color:#fff;font-size:24px;
  line-height:1;cursor:pointer;display:grid;place-items:center}
.lb__close:hover{background:rgba(0,0,0,.7)}

/* ---- feature cards ---- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
.card h3{font-size:16.5px;letter-spacing:-.01em;margin:0 0 8px}
.card p{margin:0;font-size:14.5px;color:var(--color-text-muted)}
.card--security{border-color:color-mix(in srgb,var(--color-accent) 40%,var(--color-border));
  background:linear-gradient(var(--color-surface),color-mix(in srgb,var(--color-accent) 6%,var(--color-surface)))}

/* ---- dark showcase band ---- */
.band{background:var(--band);color:var(--band-text)}
.band .eyebrow{color:var(--color-accent)}
.band .lead{color:var(--band-muted)}
.band__grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:44px;align-items:center}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.chip{font:12px/1 var(--font-mono);color:var(--band-text);border:1px solid var(--band-border);
  background:#0e1422;border-radius:999px;padding:7px 11px}

/* ---- two-column copy + screenshot ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.split--reverse .split__copy{order:2}
.beforeafter{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:12px}
.beforeafter li{background:var(--color-surface);border:1px solid var(--color-border);
  border-left:3px solid var(--color-primary);border-radius:var(--radius-sm);padding:13px 15px;
  font-size:14.5px;color:var(--color-text-muted)}
.beforeafter b{color:var(--color-text-strong)}

/* ---- tracking cards ---- */
.track{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:34px}
.track article{background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius);padding:20px}
.track h3{margin:0 0 6px;font-size:15.5px}
.track p{margin:0;font-size:14px;color:var(--color-text-muted)}

/* "read more" link under a section's cards (internal link into a use-case page) */
.sec__more{margin:22px 0 0;font-size:15px;font-weight:600}

/* ---- reviews ---- */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
.review{margin:0;background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius);padding:22px}
.review blockquote{margin:0;font-size:14.5px}
.review figcaption{margin-top:14px;font-size:13px;color:var(--color-text-muted);
  border-top:1px solid var(--color-border);padding-top:12px}

/* ---- ROI: screenshot + looping case-study carousel ---- */
.roi__shot{max-width:940px;margin:34px auto 0}
.cs-carousel{position:relative;max-width:940px;margin:44px auto 0}
.cs-viewport{overflow:hidden;border-radius:var(--radius)}
.cs-viewport:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px}
.cs-track{display:flex;transition:transform .45s ease}
.cs{flex:0 0 100%;margin:0;background:var(--color-background);border:1px solid var(--color-border);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(22px,4vw,36px);
  display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(20px,4vw,36px);align-items:center}
.cs__profile{margin:0 0 12px;font-size:12.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--color-accent-text)}
.cs__quote{margin:0;font-size:clamp(16.5px,1.6vw,18.5px);line-height:1.5;color:var(--color-text-strong)}
.cs__who{margin:14px 0 0;color:var(--color-text-muted);font-size:14px;font-weight:600}
.cs__metrics{display:grid;gap:11px}
.metric{display:flex;flex-direction:column;gap:2px;padding:14px 16px;
  border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface)}
.metric__num{font-size:clamp(22px,3vw,27px);font-weight:800;letter-spacing:-.02em;
  color:var(--color-primary);line-height:1.1;font-variant-numeric:tabular-nums}
.metric__label{font-size:13.5px;color:var(--color-text-muted)}
.cs-nav{position:absolute;top:calc(50% - 12px);transform:translateY(-50%);z-index:2;
  width:40px;height:40px;border-radius:50%;border:1px solid var(--color-border);
  background:var(--color-surface);color:var(--color-text-strong);box-shadow:var(--shadow);
  font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.cs-nav:hover{border-color:var(--color-primary);color:var(--color-primary)}
.cs-nav--prev{left:-8px}
.cs-nav--next{right:-8px}
.cs-dots{display:flex;justify-content:center;gap:8px;margin-top:20px}
.cs-dots button{width:9px;height:9px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid var(--color-border);background:var(--color-border);
  transition:background .15s,transform .15s}
.cs-dots button[aria-current="true"]{background:var(--color-primary);
  border-color:var(--color-primary);transform:scale(1.25)}

/* ---- comparison table ---- */
.cmp-wrap{margin-top:34px;overflow-x:auto;border-radius:var(--radius)}
/* Scroll cue. Hidden wherever the table fits (min-width is 660px, so 720px is the crossover
   allowing for the section's own padding) — a hint that shows when nothing is clipped is noise. */
.cmp-hint{display:none}
@media (max-width:720px){
  .cmp-hint{display:block;margin:26px 0 -18px;font-size:12.5px;font-weight:600;
    letter-spacing:.02em;color:var(--color-text-muted)}
}
.cmp{width:100%;border-collapse:separate;border-spacing:0;min-width:660px;font-size:14.5px}
.cmp th,.cmp td{padding:15px 18px;text-align:left;vertical-align:middle}
/* Several cells now wrap to two lines. Top-align the body so a short cell lines up with the
   FIRST line of a long one rather than floating against its middle. */
.cmp tbody th,.cmp tbody td{vertical-align:top}
.cmp thead th{font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--color-text-muted);
  border-bottom:1px solid var(--color-border);white-space:nowrap}
.cmp tbody th{font-weight:600;color:var(--color-text-strong);width:32%}
.cmp tbody td,.cmp tbody th{border-bottom:1px solid var(--color-border)}
.cmp tbody tr:last-child td,.cmp tbody tr:last-child th{border-bottom:0}
.cmp .col-r{background:color-mix(in srgb,var(--color-primary) 7%,var(--color-surface))}
.cmp thead .col-r{color:var(--color-primary);border-bottom:2px solid var(--color-primary)}
.cmp thead .col-r small{display:block;font-weight:600;font-size:11px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--color-accent-text);margin-top:2px}
.cmp tbody tr:first-child .col-r{border-top-left-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}
.cmp tbody tr:last-child .col-r{border-bottom-left-radius:var(--radius-sm);border-bottom-right-radius:var(--radius-sm)}
.yes{color:var(--color-success);font-weight:700}
.no{color:var(--color-text-muted)}
.part{color:var(--color-warning)}
.cmp .price-cell{font-weight:800;letter-spacing:-.01em}
/* Secondary figure under a price ("$100K+ at scale") — must NOT inherit the 800 weight above,
   or the two numbers compete and neither anchors. */
.cmp tbody .price-cell small{display:block;font-size:12.5px;font-weight:500;letter-spacing:0;
  color:var(--color-text-muted);margin-top:3px}

/* Proof-lines under the comparison table. The table states outcomes; these carry just enough
   detail to satisfy a technical reader without describing the implementation. */
.cmp-proof{margin-top:26px;display:grid;gap:14px;max-width:78ch}
.cmp-proof p{margin:0;font-size:14.5px;line-height:1.65;color:var(--color-text-muted)}
.cmp-proof strong{color:var(--color-text-strong);font-weight:700}
.cmp-cta{margin:22px 0 0}
.cmp-cta a{font-size:14.5px;font-weight:600;color:var(--color-primary);text-decoration:none}
.cmp-cta a:hover,.cmp-cta a:focus-visible{text-decoration:underline}

/* ---- pricing card ---- */
.price__card{max-width:520px;margin:0 auto;background:var(--color-surface);
  border:1px solid var(--color-border);border-radius:var(--radius);padding:34px;
  box-shadow:var(--shadow);text-align:left}
.price__card h2{font-size:22px;text-align:center;margin:0}
.price__amount{text-align:center;margin:14px 0 2px}
.price__amount .num{font-size:48px;font-weight:800;letter-spacing:-.02em;color:var(--color-text-strong)}
.price__amount .per{font-size:16px;color:var(--color-text-muted);font-weight:600}
.price__note{color:var(--color-text-muted);font-size:13.5px;margin:0 0 20px;text-align:center}
.price__list{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:10px}
.price__list li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px}
.price__list li::before{content:"✓";color:var(--color-success);font-weight:800;line-height:1.4}
.price__anchor{font-size:13px;color:var(--color-text-muted);text-align:center;margin:0 0 20px}
.price__cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.price__foot{font-size:13px;color:var(--color-text-muted);text-align:center;margin:18px 0 0}
.price__foot a{color:var(--color-primary);text-decoration:none;font-weight:600}
.price__foot a:hover,.price__foot a:focus-visible{text-decoration:underline}

/* ---- responsive ---- */
@media (max-width:820px){
  .grid,.reviews{grid-template-columns:1fr}
  .band__grid,.split,.track{grid-template-columns:1fr}
  .split--reverse .split__copy{order:0}
  .cs{grid-template-columns:1fr;padding:24px}
  .cs-nav--prev{left:0}
  .cs-nav--next{right:0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .cs-track{transition:none}
}