/* =========================================================
   TEKRIO — Design tokens
   Colors and type match the TEKRIO app: navy base, purple
   primary for buttons and links, sky blue as the accent on
   dark backgrounds, green reserved for verification marks.
   ========================================================= */
:root {
  --ink: #18243D;         /* deep navy — primary bg / text (app header) */
  --ink-2: #202A3E;
  --paper: #F5F7FC;       /* cool canvas — alternating sections only */
  --white: #FFFFFF;
  --teal: #0284C7;        /* brand primary — unified blue family, replaces purple */
  --teal-deep: #0369A1;
  --gold: #22D3EE;        /* accent on dark backgrounds (app sky) — brighter electric cyan */
  --gold-light: #FFF4DF;  /* amber tint for notes / pending */
  --verified: #166534;    /* reserved: verification marks */
  --verified-tint: #EAF7EF;
  --teal-tint: #E0F2FE;   /* selected choice background */
  --slate: #526079;       /* secondary text on light */
  --slate-on-dark: #ADB9D1;
  --line: #DCE2EE;        /* hairline on light */
  --line-dark: #2D3A55;   /* hairline on ink */
  --danger: #B42318;

  --font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, sans-serif;

  --radius-s: 3px;
  --radius-m: 6px;
  --container: 1600px;
  --gutter: clamp(20px, 4vw, 56px); /* side padding, scales with the screen */

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --shadow-sm: 0 1px 2px rgba(24,36,61,.06), 0 1px 1px rgba(24,36,61,.04);
  --shadow-md: 0 16px 32px -18px rgba(24,36,61,.24);
  --shadow-lg: 0 30px 60px -22px rgba(24,36,61,.35);
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px; /* jump-links land below the sticky header (~73px) */
}
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 0.5em;
  letter-spacing: -0.02em;
}
h1 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); font-weight: 800; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; color: var(--slate); max-width: 62ch; }
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
section { padding: 88px 0; }
@media (max-width: 720px) {
  section { padding: 56px 0; }
}

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}
.site-header :focus-visible, .hero :focus-visible, .section-ink :focus-visible,
.cta-band :focus-visible, .site-footer :focus-visible { outline-color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.96rem;
  padding: 13px 24px;
  border-radius: var(--radius-s);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 120ms var(--ease), background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 200ms ease;
  line-height: 1;
}
.btn:active { transform: translateY(1px); }
.btn-gold {
  background: var(--teal);
  color: var(--white);
  box-shadow: 0 10px 22px -12px rgba(2,132,199,.6);
}
.btn-gold:hover { background: var(--teal-deep); box-shadow: 0 14px 28px -12px rgba(3,105,161,.7); }
.btn-outline-light {
  border-color: rgba(245,247,252,0.55);
  color: var(--paper);
  background: transparent;
}
.btn-outline-light:hover { border-color: var(--paper); background: rgba(245,247,252,0.08); }
.btn-outline-dark {
  border-color: var(--ink);
  color: var(--ink);
  background: transparent;
}
.btn-outline-dark:hover { background: var(--ink); color: var(--paper); }
.btn-ghost {
  color: var(--teal);
  padding: 13px 4px;
  font-weight: 600;
}
.btn-block { width: 100%; justify-content: center; }
.btn[disabled] { opacity: 0.6; cursor: not-allowed; }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink);
  border-bottom: 1px solid var(--line-dark);
  transition: box-shadow 250ms ease;
}
.site-header.is-scrolled { box-shadow: 0 10px 28px -18px rgba(0,0,0,.5); }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--gutter);
  max-width: var(--container);
  margin: 0 auto;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--paper);
  flex-shrink: 0;
}
.brand-logo { width: 44px; height: 44px; flex-shrink: 0; transition: transform 200ms var(--ease); }
.brand:hover .brand-logo { transform: scale(1.06) rotate(-3deg); }
.brand-text {
  display: flex;
  flex-direction: column; /* tagline sits under the name */
  align-items: flex-start;
  gap: 3px;
}
.brand-mark {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--paper);
  line-height: 1;
}
.brand-tag {
  font-size: 0.68rem;
  color: var(--slate-on-dark);
  letter-spacing: 0.03em;
  line-height: 1.2;
  white-space: nowrap;
}
.main-nav {
  display: none;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* nav links and header links share one style */
/* every header link is the same fixed-height button, centred on one line */
.main-nav a, .login-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 11px;
  border-radius: var(--radius-m);
  text-decoration: none;
  color: var(--slate-on-dark);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 150ms ease, color 150ms ease;
}
.main-nav a:hover, .login-link:hover {
  color: var(--paper);
  background: rgba(245, 247, 252, 0.07);
}
.main-nav a.active, .login-link.active {
  color: var(--paper);
  background: rgba(245, 247, 252, 0.1);
  box-shadow: inset 0 -2px 0 var(--gold);
}
/* hover line: sweeps in from the left, leaves to the right */
.main-nav a, .login-link { position: relative; }
.main-nav a:not(.active)::after, .login-link:not(.active)::after {
  content: "";
  position: absolute;
  left: 11px; right: 11px; bottom: 7px;
  height: 1.5px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 260ms var(--ease);
}
.main-nav a:hover::after, .login-link:hover::after { transform: scaleX(1); transform-origin: left; }
/* same idea for text links (wraps cleanly across lines) */
.footer-grid a, .breadcrumb a, .audience-col .go, .contact-info-item .directions a {
  background: linear-gradient(currentColor, currentColor) left calc(100% - 1px) / 0 1px no-repeat;
  transition: background-size 260ms var(--ease), color 150ms ease;
}
.footer-grid a:hover, .breadcrumb a:hover, .audience-col .go:hover, .contact-info-item .directions a:hover { background-size: 100% 1px; }
@media (min-width: 1280px) {
  .main-nav { display: flex; }
}
.header-actions {
  display: none;
  align-items: center;
  gap: 4px;
  padding-left: 12px;
  border-left: 1px solid var(--line-dark);
}
@media (min-width: 1280px) {
  .header-actions { display: flex; }
}
.header-actions .btn { padding: 9px 16px; font-size: 0.88rem; }
.nav-toggle {
  display: inline-flex;
  background: none;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-s);
  padding: 8px 10px;
  color: var(--paper);
}
@media (min-width: 1280px) {
  .nav-toggle { display: none; }
}
.mobile-panel {
  display: none;
  flex-direction: column;
  background: var(--ink-2);
  border-top: 1px solid var(--line-dark);
  padding: 8px var(--gutter) 20px;
}
.mobile-panel.open { display: flex; }
.mobile-panel a {
  color: var(--paper);
  text-decoration: none;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-dark);
  font-size: 1rem;
}
.mobile-panel .mobile-cta { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
@media (min-width: 1280px) {
  .mobile-panel { display: none !important; }
}

/* ---------- hero ---------- */
.hero {
  background: var(--ink);
  color: var(--paper);
  position: relative;
  overflow: hidden;
  padding: 72px 0 0;
}
.hero-inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding-bottom: 64px;
}
@media (min-width: 960px) {
  .hero-inner { flex-direction: row; align-items: center; gap: 40px; }
  .hero-inner > * { flex: 1 1 0; min-width: 0; }
}

/* soft glow + wave transition into the section below, decorative only */
.hero::before {
  content: "";
  position: absolute;
  top: -220px; right: -180px;
  width: 640px; height: 640px;
  background: radial-gradient(circle, rgba(2,132,199,.38), transparent 70%);
  filter: blur(12px);
  pointer-events: none;
  animation: tekrioDrift 24s ease-in-out infinite alternate;
}
/* the glow wanders slowly behind the hero, too slow to pull the eye */
@keyframes tekrioDrift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-160px, 110px) scale(1.15); }
  100% { transform: translate(-60px, 200px) scale(.95); }
}
@media (prefers-reduced-motion: reduce) { .hero::before { animation: none; } }
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 48' preserveAspectRatio='none'%3E%3Cpath d='M0,24 C200,48 400,0 600,18 C800,36 1000,6 1200,24 L1200,48 L0,48 Z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  pointer-events: none;
}
.hero-inner, .hero > .container { position: relative; z-index: 1; }
.hero-net { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; pointer-events: none; }

/* ---------- homepage hero visual stage (decorative) ---------- */
.hero-stage { position: relative; min-height: 360px; display: flex; align-items: center; justify-content: center; }
.hero-stage-backcard {
  position: absolute;
  width: 220px; height: 290px;
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(255,255,255,.1), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  transform: rotate(-8deg) translate(-56px, 8px);
}
.device-card {
  position: relative;
  width: 264px;
  background: var(--white);
  color: var(--ink);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.06);
}
.dc-top { padding: 16px 17px 0; }
.dc-kicker { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); }
.dc-kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 3px rgba(34,197,94,.22); animation: tekrioPulse 1.7s ease-in-out infinite; }
@keyframes tekrioPulse { 50% { box-shadow: 0 0 0 6px rgba(34,197,94,.05); } }
.dc-title { font-size: 16px; font-weight: 800; margin-top: 3px; }
.dc-body { padding: 12px 17px 17px; display: flex; flex-direction: column; gap: 9px; }
.dc-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 12.5px; }
.dc-row b { font-weight: 700; }
/* buyer offers, stacked; main.js adds .is-animating and plays them in one by one */
.dc-offers { display: flex; flex-direction: column; gap: 7px; }
.dc-offer-item {
  display: flex; align-items: center; gap: 8px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  padding: 9px 12px; font-size: 12.5px; font-weight: 600;
  transition: opacity 380ms var(--ease), transform 480ms var(--ease), background-color 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}
.dc-tick {
  display: inline-block; vertical-align: middle;
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  background: var(--verified-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%23166534' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.dc-offer-item small { font-size: 9.5px; font-weight: 800; letter-spacing: .06em; color: var(--teal-deep); opacity: 0; transition: opacity 300ms ease; }
.dc-offer-item b { margin-left: auto; font-size: 13.5px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.dc-offer-item.is-best { border-color: var(--teal); background: var(--teal-tint); box-shadow: 0 0 0 1px var(--teal), 0 10px 20px -12px rgba(2,132,199,.55); }
.dc-offer-item.is-best small { opacity: 1; }
.dc-offer-item.is-best b { color: var(--teal-deep); }
.device-card.is-animating .dc-offer-item { opacity: 0; transform: translateY(16px) scale(.95); }
.device-card.is-animating .dc-offer-item.is-in { opacity: 1; transform: none; }
/* final beat: the other bids fold away and the best one fills the card.
   The list keeps its height so the card doesn't jump. */
.device-card.is-animating .dc-offers { justify-content: center; }
/* close to its real height (~36px), so folding starts right away */
.dc-offer-item { max-height: 40px; }
.device-card.is-animating .dc-offer-item.is-gone {
  max-height: 0; padding-block: 0; border-width: 0; margin-top: -7px;
  opacity: 0; transform: scale(.96);
  transition: opacity 260ms ease, transform 300ms ease, max-height 420ms var(--ease) 120ms, padding 420ms var(--ease) 120ms, margin 420ms var(--ease) 120ms, border-width 420ms var(--ease) 120ms;
}
.dc-offer-item.is-final { max-height: 90px; padding: 16px 14px; font-size: 13.5px; transition: padding 420ms var(--ease) 120ms, opacity 380ms var(--ease), transform 480ms var(--ease), background-color 300ms ease, box-shadow 300ms ease; }
.dc-offer-item.is-final { flex-wrap: wrap; row-gap: 8px; }
.dc-offer-item.is-final small { order: -1; flex-basis: 100%; font-size: 10px; }
.dc-offer-item.is-final small::before { content: "YOUR "; }
.dc-offer-item.is-final small::after { content: " OFFER"; }
.dc-offer-item.is-final b { font-size: 22px; }
.dc-btn { margin-top: 2px; background: var(--teal); color: var(--white); text-align: center; border-radius: 11px; padding: 12px; font-weight: 700; font-size: 13px; transition: box-shadow 400ms ease, transform 400ms var(--ease); }
.device-card.is-picked .dc-btn { box-shadow: 0 0 0 4px rgba(34,211,238,.35); transform: translateY(-1px); }
/* chips sit still now: the offer stack is the one moving story in the hero */
.hero-chip {
  position: absolute;
  display: flex; align-items: center; gap: 8px;
  background: var(--white); color: var(--ink);
  border-radius: 100px; padding: 9px 14px 9px 10px;
  font-size: .78rem; font-weight: 700;
  box-shadow: var(--shadow-md);
}
.hero-chip .ic { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hero-chip.c1 { top: 4%; right: -2%; z-index: 1; }
.hero-chip.c1 .ic { background: var(--verified-tint); color: var(--verified); }
.hero-chip.c2 { bottom: 14%; left: -4%; z-index: 1; }
.hero-chip.c2 .ic { background: #E9F7FE; color: #075985; }
.hero-chip.c4 { top: -2%; left: 4%; }
.hero-chip.c4 .ic { background: var(--teal-tint); color: var(--teal-deep); }
@media (max-width: 719px) {
  .hero-chip, .hero-stage-backcard { display: none; }
  .hero-stage { min-height: 0; margin-top: -12px; }
}
@media (prefers-reduced-motion: reduce) { .dc-kicker::before { animation: none; } }
.eyebrow-stamp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid rgba(74,222,128,0.45);
  color: var(--verified-tint);
  background: rgba(22,163,74,0.16);
  border-radius: 100px;
  padding: 6px 14px 6px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 22px;
}
.hero h1 { color: var(--white); }
.hero h1 .hero-accent {
  background: linear-gradient(100deg, var(--gold), #7DF3FF);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero .lede {
  font-size: 1.14rem;
  color: var(--slate-on-dark);
  max-width: 46ch;
  margin-bottom: 30px;
}
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 28px; }
/* the hero's main action: still at rest, a light runs round its border on hover/focus */
@property --btn-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.hero-ctas .btn-gold { position: relative; }
.hero-ctas .btn-gold::before {
  content: "";
  position: absolute;
  inset: -3px;
  padding: 2px;
  border-radius: 6px;
  background: conic-gradient(from var(--btn-angle), transparent 0 55%, var(--gold) 72%, #fff 78%, var(--gold) 84%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}
.hero-ctas .btn-gold:hover, .hero-ctas .btn-gold:focus-visible { box-shadow: 0 14px 30px -10px rgba(34,211,238,.55); }
.hero-ctas .btn-gold:hover::before, .hero-ctas .btn-gold:focus-visible::before { opacity: 1; animation: tekrioBtnSpin 2.2s linear infinite; }
@keyframes tekrioBtnSpin { to { --btn-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) { .hero-ctas .btn-gold:hover::before, .hero-ctas .btn-gold:focus-visible::before { animation: none; } }
.trust-line {
  font-size: 0.85rem;
  color: #98A9C3;
  border-top: 1px solid var(--line-dark);
  padding-top: 18px;
  max-width: 46ch;
}

/* ---------- sections ---------- */
.section-paper { background: var(--paper); }
.section-ink { background: var(--ink); color: var(--paper); }
.section-ink p { color: var(--slate-on-dark); }
.section-ink h2, .section-ink h3 { color: var(--white); }

.section-head { max-width: 700px; margin-bottom: 48px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.kicker {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--teal);
  display: block;
  margin-bottom: 10px;
}
.section-ink .kicker { color: var(--gold); }

/* Steps (real sequence -> numbered legitimately) */
.steps {
  display: grid;
  gap: 28px;
  counter-reset: step;
}
@media (min-width: 800px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
}
.step {
  position: relative;
  padding: 32px 24px 24px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms var(--ease);
}
.step:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--teal-tint); }
.step-num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--teal-deep);
  background: var(--teal-tint);
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  position: absolute;
  top: 16px;
  right: 16px;
  transition: background-color 220ms var(--ease), color 220ms var(--ease);
}
.step:hover .step-num { background: var(--teal); color: var(--white); }
.step h3 { margin-bottom: 10px; }
.step p { margin-bottom: 0; }
@media (min-width: 800px) {
  .steps.steps-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1100px) {
  .steps.steps-5 { grid-template-columns: repeat(5, 1fr); gap: 16px; }
  .steps-5 .step { padding: 28px 18px 20px; }
  .steps-5 .step h3 { font-size: 1.1rem; }
  .steps-5 .step p { font-size: 0.92rem; }
}

/* Timeline rail: main.js adds .has-rail and drives --progress (0 to 1)
   as the steps scroll through the screen, and marks each step it has
   reached. Runs across the top on wide screens and down the left side
   on phones; the 3-column tablet layout has no rail. */
.steps.has-rail { position: relative; }
.steps.has-rail::before, .steps.has-rail::after,
.steps.has-rail .step::before { content: none; }
.step.is-reached .step-num { background: var(--teal); color: var(--white); }
@media (min-width: 1100px) {
  .steps-5.has-rail { padding-top: 36px; }
  .steps-5.has-rail::before, .steps-5.has-rail::after {
    content: "";
    position: absolute; top: 10px; left: 0; right: 0;
    height: 3px; border-radius: 3px;
    background: var(--line);
  }
  .steps-5.has-rail::after {
    background: linear-gradient(90deg, var(--teal), var(--gold));
    transform-origin: left;
    transform: scaleX(var(--progress, 0));
  }
  .steps-5.has-rail .step::before { content: ""; top: -31px; left: 18px; }
}
@media (max-width: 799px) {
  .steps.has-rail { padding-left: 30px; }
  .steps.has-rail::before, .steps.has-rail::after {
    content: "";
    position: absolute; top: 0; bottom: 0; left: 9px;
    width: 3px; border-radius: 3px;
    background: var(--line);
  }
  .steps.has-rail::after {
    background: linear-gradient(180deg, var(--teal), var(--gold));
    transform-origin: top;
    transform: scaleY(var(--progress, 0));
  }
  .steps.has-rail .step::before { content: ""; top: 38px; left: -27px; }
}
.steps.has-rail .step::before {
  position: absolute;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--line);
  box-sizing: border-box;
  transition: border-color 250ms ease, background-color 250ms ease, box-shadow 250ms ease;
}
.steps.has-rail .step.is-reached::before { border-color: var(--teal); background: var(--teal); box-shadow: 0 0 0 4px var(--teal-tint); }

/* Three-audience columns */
.audience-grid {
  display: grid;
  gap: 18px;
}
@media (min-width: 860px) {
  .audience-grid { grid-template-columns: repeat(3, 1fr); }
}
.audience-col {
  position: relative;
  background: var(--ink-2);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-m);
  padding: 32px 28px;
  overflow: hidden;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
.audience-col::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--gold);
}
.audience-col:nth-child(2)::before { background: #F5B942; }
.audience-col:nth-child(3)::before { background: #34D399; }
.audience-col:hover { transform: translateY(-5px); box-shadow: 0 26px 48px -24px rgba(0,0,0,.5); border-color: rgba(34,211,238,.35); }
/* glow that follows the pointer (main.js sets --mx/--my, hover devices only) */
.audience-col::after, .card-grid .card::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgba(34,211,238,.13), transparent 60%);
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}
.card-grid .card { position: relative; }
.card-grid .card::after { background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(2,132,199,.09), transparent 60%); }
.audience-col:hover::after, .card-grid .card:hover::after { opacity: 1; }
.audience-col h3 {
  color: var(--white);
  font-size: 1.05rem;
  text-transform: none;
  border-bottom: 1px solid var(--line-dark);
  padding-bottom: 14px;
  margin-bottom: 18px;
}
.audience-col ul { list-style: none; margin: 0; padding: 0; }
.audience-col li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: #C3CDE0;
  font-size: 0.96rem;
  padding: 9px 0;
}
.audience-col li .mark {
  flex-shrink: 0;
  width: 18px; height: 18px; margin-top: 2px;
  font-size: 0;
  background: var(--gold);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.audience-col:nth-child(2) li .mark { background: #F5B942; }
.audience-col:nth-child(3) li .mark { background: #34D399; }
.audience-col .go {
  display: inline-block;
  margin-top: 18px;
  padding-block: 3px;
  color: var(--gold);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.9rem;
}

/* Why / trust marks */
.marks-grid {
  display: grid;
  gap: 20px;
}
@media (min-width: 700px) {
  .marks-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .marks-grid { grid-template-columns: repeat(4, 1fr); }
}
.mark-item {
  display: flex; flex-direction: column; gap: 16px; align-items: flex-start;
  padding: 26px 24px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms var(--ease);
}
.mark-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--teal-tint); }
.mark-badge {
  flex-shrink: 0;
  width: 50px; height: 50px;
  border-radius: 14px;
  background: var(--verified-tint);
  color: var(--verified);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.marks-grid .mark-item:nth-child(4n+2) .mark-badge { background: var(--teal-tint); color: var(--teal-deep); }
.marks-grid .mark-item:nth-child(4n+3) .mark-badge { background: #E9F7FE; color: #075985; }
.marks-grid .mark-item:nth-child(4n+4) .mark-badge { background: var(--gold-light); color: #92400E; }
.mark-item h3 { font-size: 1.08rem; margin-bottom: 8px; }
.mark-item p { font-size: 0.96rem; color: #46536B; margin-bottom: 0; }

/* Final CTA band */
.cta-band {
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-deep) 100%);
  color: var(--white);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 12% 18%, rgba(255,255,255,.12), transparent 42%),
              radial-gradient(circle at 88% 86%, rgba(255,255,255,.1), transparent 42%);
  pointer-events: none;
}
.cta-band .container { position: relative; }
.cta-band h2 { color: var(--white); }
.cta-band p { color: #E4D9F8; margin-left: auto; margin-right: auto; }
.cta-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 30px;
}
/* The band is purple, so its main button flips to white to stay the most visible action. */
.cta-band .btn-gold { background: var(--white); color: var(--teal); }
.cta-band .btn-gold:hover { background: #F0EAFE; color: var(--teal-deep); }
.cta-row .btn-outline-light { border-color: rgba(255,255,255,0.5); color: #fff; }
.cta-row .btn-outline-light:hover { background: rgba(255,255,255,0.12); border-color: #fff; }

/* ---------- footer ---------- */
.site-footer {
  background: var(--ink);
  color: var(--slate-on-dark);
  padding: 64px 0 28px;
}
.footer-grid {
  display: grid;
  gap: 36px;
  margin-bottom: 40px;
}
/* Tablets and small laptops: brand across the top, then three columns
   per row. Wide screens: everything on one row. */
@media (min-width: 600px) {
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-brand { grid-column: 1 / -1; max-width: 520px; }
}
@media (min-width: 1240px) {
  .footer-grid { grid-template-columns: 1.2fr repeat(3, 0.75fr) 0.95fr 1.4fr; }
  .footer-brand { grid-column: auto; }
}
.footer-brand .brand-mark { color: var(--paper); }
.site-footer p { color: var(--slate-on-dark); }
.site-footer .footer-tagline { color: var(--gold); font-size: 0.9rem; margin: 6px 0 14px; }
.footer-grid h2 {
  font-family: var(--font-body);
  color: var(--paper);
  font-size: 0.86rem;
  letter-spacing: 0.03em;
  margin: 0 0 14px;
  line-height: 1.4;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid address { font-style: normal; font-size: 0.92rem; line-height: 1.7; color: var(--slate-on-dark); }
.contact-info-item address { font-style: normal; color: var(--slate); }
.footer-grid li { margin-bottom: 10px; font-size: 0.92rem; color: var(--slate-on-dark); }
.footer-grid a { color: var(--slate-on-dark); text-decoration: none; font-size: 0.92rem; display: inline-block; padding-block: 3px; }
.footer-grid a:hover { color: var(--paper); }
.footer-bottom {
  border-top: 1px solid var(--line-dark);
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: #98A9C3;
}

/* ---------- inner page hero (non-home) ---------- */
.page-hero {
  background: var(--ink);
  color: var(--paper);
  padding: 64px 0 56px;
}
.page-hero h1 { color: var(--white); margin-bottom: 14px; }
.page-hero p { color: var(--slate-on-dark); max-width: 60ch; }
.breadcrumb {
  font-size: 0.82rem;
  color: #98A9C3;
  margin-bottom: 18px;
}
.breadcrumb a { color: #98A9C3; text-decoration: none; display: inline-block; padding-block: 3px; }
.breadcrumb a:hover { color: var(--paper); }

/* generic content blocks */
.prose h2 { margin-top: 2em; }
.prose > :first-child { margin-top: 0; }
.prose ul { padding-left: 1.2em; color: var(--slate); }
.prose li { margin-bottom: 0.5em; }
.two-col {
  display: grid;
  gap: 48px;
}
@media (min-width: 860px) {
  .two-col { grid-template-columns: 1fr 1fr; }
}
.two-col.reverse .col-media { order: 2; }
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 26px;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms var(--ease);
}
.card-grid .card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--teal-tint); }
.card-grid { display: grid; gap: 20px; }
@media (min-width: 760px) { .card-grid.cols-2 { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 760px) { .card-grid.cols-3 { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 760px) { .card-grid.cols-4 { grid-template-columns: repeat(4,1fr); } }
.pill {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 4px 12px;
  font-size: 0.78rem;
  color: var(--slate);
  margin: 0 6px 6px 0;
}
.stat {
  border-left: 3px solid var(--gold);
  padding-left: 16px;
}
.stat .num { font-family: var(--font-display); font-size: 2.4rem; display: block; color: var(--ink); }
.stat .label { color: var(--slate); font-size: 0.9rem; }

/* ---------- forms ---------- */
.form-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 32px;
  max-width: 560px;
  box-shadow: var(--shadow-sm);
}
.form-card h2 { margin-bottom: 6px; }
.form-card .form-sub { margin-bottom: 24px; }
.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-size: 0.86rem;
  font-weight: 600;
  margin-bottom: 6px;
}
.field .opt { color: var(--slate); font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-s);
  font-family: var(--font-body);
  font-size: 0.98rem;
  background: var(--white);
  color: var(--ink);
}
/* inputs and dropdowns share one height, and dropdowns drop the browser's
   own styling (which sizes them differently) for a matching custom arrow */
.field input:not([type="checkbox"]):not([type="radio"]), .field select { height: 48px; }
.field select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 40px;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23526079' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center / 12px no-repeat;
  cursor: pointer;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--teal);
  outline: none;
}
.field-error { color: var(--danger); font-size: 0.82rem; margin-top: 6px; display: none; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--danger); }
.field.invalid .field-error { display: block; }
.form-note { font-size: 0.82rem; color: var(--slate); margin-top: 14px; }
.form-status {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: var(--radius-s);
  font-size: 0.92rem;
  display: none;
}
.form-status.show { display: block; }
.form-status.ok { background: var(--verified-tint); color: var(--verified); }
.form-status.err { background: #FDEEEB; color: var(--danger); }

/* pending / disabled feature notice */
.pending-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #92400E;
  background: var(--gold-light);
  border-radius: 100px;
  padding: 4px 10px;
  margin-left: 8px;
  vertical-align: middle;
}

/* FAQ accordion */
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 20px 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  gap: 20px;
}
.faq-q .icon { font-size: 1.3rem; color: var(--teal); flex-shrink: 0; transition: transform 160ms ease; }
.faq-item.open .faq-q .icon { transform: rotate(45deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: max-height 220ms ease, visibility 0s linear 220ms;
}
.faq-item.open .faq-a { visibility: visible; transition: max-height 220ms ease, visibility 0s; }
.faq-a-inner { padding-bottom: 20px; color: var(--slate); max-width: 68ch; }
.faq-cat { margin-top: 40px; }
.faq-cat:first-child { margin-top: 0; }

/* contact page */
.contact-grid { display: grid; gap: 40px; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.contact-info-item { display: flex; gap: 14px; margin-bottom: 30px; }
.contact-info-item .ico {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border-radius: 12px;
  background: #F0EAFE;
  color: var(--teal);
}
.contact-info-item > div { padding-top: 9px; }
.contact-info-item > div > :last-child { margin-bottom: 0; }
.contact-info-item h3 { margin-bottom: 6px; }
.contact-info-item .directions { margin: 8px 0 0; }
.contact-info-item .directions a { color: var(--teal); font-weight: 600; text-decoration: none; }

/* ---------- sell your device journey ---------- */
.journey {
  list-style: none;
  margin: 0 auto 28px;
  padding: 0;
  max-width: 880px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: center;
  font-size: 0.88rem;
  color: var(--slate);
}
.journey { scroll-margin-top: 110px; }
.journey li { display: flex; align-items: center; gap: 8px; }
.journey-num {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 0.8rem;
  background: var(--white);
}
.journey li.is-active { color: var(--ink); font-weight: 600; }
.journey li.is-active .journey-num { background: var(--teal); border-color: var(--teal); color: var(--white); }
.journey li.is-done .journey-num { background: var(--verified); border-color: var(--verified); color: var(--white); }
.sell-card { margin: 0 auto; max-width: 620px; }
.sell-step { border: 0; margin: 0; padding: 0; min-width: 0; }
.sell-step legend { padding: 0; margin-bottom: 18px; }
.sell-step legend h2 { margin: 0; font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
.step-count {
  display: block;
  margin-bottom: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal);
}
.field-label { display: block; font-size: 0.86rem; font-weight: 600; margin-bottom: 6px; }
.field-pair { display: grid; gap: 0 16px; }
@media (min-width: 560px) { .field-pair { grid-template-columns: 1fr 1fr; } }
/* one of the pair hidden (e.g. RAM for iPhone): the other takes the full row */
.field-pair:has(> .field[hidden]) > .field { grid-column: 1 / -1; }
.choice-row { display: flex; flex-wrap: wrap; gap: 10px; }
.choice { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span {
  display: inline-block;
  padding: 11px 18px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-s);
  font-size: 0.95rem;
  background: var(--white);
}
.choice input:checked + span { border-color: var(--teal); background: var(--teal-tint); color: var(--teal-deep); font-weight: 600; }
.choice input:focus-visible + span { outline: 3px solid var(--teal); outline-offset: 2px; }
.field.invalid .choice span { border-color: var(--danger); }
.sell-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; }
.photo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 560px) { .photo-grid { grid-template-columns: repeat(3, 1fr); } }
.photo-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 1;
  padding: 10px;
  border: 1.5px dashed var(--line);
  border-radius: var(--radius-s);
  background: var(--white);
  cursor: pointer;
  overflow: hidden;
}
.photo-tile:hover { border-color: var(--teal); }
.photo-tile:focus-within { outline: 3px solid var(--teal); outline-offset: 2px; }
.photo-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-name, .photo-hint { position: relative; display: block; }
.photo-name { font-size: 0.9rem; font-weight: 600; color: var(--ink); }
.photo-req { font-size: 0.72rem; font-weight: 700; color: var(--teal); text-transform: uppercase; letter-spacing: 0.04em; }
.photo-hint { font-size: 0.78rem; color: var(--slate); }
.photo-slot.has-photo .photo-tile { border-style: solid; border-color: var(--verified); }
/* name/hint sit on a scrim over the preview so they stay readable */
.photo-slot.has-photo .photo-name,
.photo-slot.has-photo .photo-hint { color: var(--white); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); }
.photo-slot.has-photo .photo-req { color: var(--white); }
.photo-slot.has-photo .photo-tile::after {
  content: "";
  position: absolute;
  inset: 40% 0 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
}
.photo-slot.has-photo .photo-name, .photo-slot.has-photo .photo-hint { z-index: 1; }
.photo-slot.is-busy .photo-tile { opacity: 0.6; cursor: progress; }
.photo-slot.invalid .photo-tile { border-color: var(--danger); }
.photo-slot .field-error { margin-top: 4px; }
.photo-action {
  flex: 1 1 auto;
  min-height: 36px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
.photo-action:hover { border-color: var(--teal); color: var(--teal); }
.photo-action:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
/* phones: the sheet that opens when a photo tile is tapped */
.photo-sheet { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-end; background: rgba(15, 23, 42, 0.45); }
.photo-sheet[hidden] { display: none; }
.photo-sheet-panel {
  display: grid; gap: 8px; width: 100%;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  border-radius: 16px 16px 0 0; background: var(--white);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.15);
}
.photo-sheet-title { max-width: none; margin: 0 0 4px; text-align: center; font-weight: 600; color: var(--ink); }
.photo-sheet .photo-action { min-height: 48px; font-size: 1rem; }
.photo-sheet .photo-action.is-cancel { border-color: transparent; color: var(--slate); }
body.sheet-open { overflow: hidden; }
.photo-slot.invalid .field-error { display: block; }
.sell-done h2 { margin: 14px 0 10px; }
.next-list { padding-left: 1.2em; color: var(--slate); }
.next-list li { margin-bottom: 10px; }
.price-note {
  border-left: 3px solid #92400E;
  background: var(--gold-light);
  color: var(--ink);
  padding: 10px 14px;
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  font-size: 0.92rem;
}
.eyebrow-stamp.is-light { color: var(--verified); border-color: var(--verified); }
.offer-device { margin: 16px 0 4px; font-weight: 600; color: var(--ink); }
.offer-amount {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 6vw, 3rem);
  line-height: 1.1;
  color: var(--ink);
}
.offer-card .btn { margin-top: 8px; }
.offer-vendor {
  margin: 16px 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--paper);
}
.offer-vendor p { margin: 0 0 4px; }
.offer-vendor-name { font-weight: 700; color: var(--ink); }
.offer-box {
  margin: 16px 0;
  padding: 14px 16px;
  border-radius: var(--radius-s);
  background: var(--gold-light);
  border-left: 3px solid #92400E;
}
.offer-code-box { background: var(--verified-tint); border-left-color: var(--verified); text-align: center; }
.offer-code {
  margin: 6px 0;
  font-family: var(--font-display);
  font-size: 2.4rem;
  letter-spacing: 0.3em;
  color: var(--ink);
}
.offer-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.offer-more { margin-top: 20px; font-size: 0.92rem; }
.offer-more summary { cursor: pointer; color: var(--teal); font-weight: 600; }
.offer-more textarea { width: 100%; margin-top: 6px; }

/* utility */
[hidden] { display: none !important; }
.mt-0 { margin-top: 0; }
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap;
}
.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--teal); color: var(--white); padding: 10px 16px;
  z-index: 100; font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- scroll story (How It Works) ----------
   Apple-style: the phone stays pinned while the steps scroll past,
   and its screen changes to match the step in view. Driven by
   /js/how-it-works.js (sets .is-active, --enter and --progress). */
.story {
  --phone-h: min(620px, 76vh);
  --purple-soft: #F0EAFE;
  --sky-soft: #E9F7FE;
  background: var(--ink);
  color: var(--paper);
  padding-bottom: 40px;
}
.story .kicker { color: var(--gold); }
.story .section-head h2 { color: var(--white); }
.story .section-head p { color: var(--slate-on-dark); margin: 0 auto; }
.story-grid { display: grid; gap: 40px; }
.story-steps { list-style: none; margin: 0; padding: 0; }
.story-step { padding: 28px 0; max-width: 460px; }
.story-num {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.story-step h3 { color: var(--white); font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.story-step p { color: var(--slate-on-dark); font-size: 1.05rem; margin: 0; }
.story-step a { color: var(--gold); }

/* Only once the script runs: pin the phone and dim steps not in view. */
.story:not(.is-ready) .story-stage { display: none; }
.story.is-ready .story-step {
  min-height: 52vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0.28;
  transition: opacity 400ms ease;
}
.story.is-ready .story-step.is-active { opacity: 1; }
.story.is-ready .story-step:last-child { padding-bottom: 18vh; }

.story-stage {
  position: sticky;
  top: max(96px, calc(50vh - var(--phone-h) / 2));
  height: var(--phone-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.story-phone {
  position: relative;
  height: var(--phone-h);
  aspect-ratio: 300 / 620;
  border: 10px solid #0B1220;
  border-radius: 46px;
  background: var(--paper);
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 40px 90px -30px rgba(2,132,199,0.65);
  transform: perspective(1200px)
             translateY(calc((1 - var(--enter, 1)) * 90px))
             rotateX(calc((1 - var(--enter, 1)) * 16deg))
             scale(calc(0.86 + var(--enter, 1) * 0.14));
  opacity: calc(0.25 + var(--enter, 1) * 0.75);
  will-change: transform;
}
.story-notch {
  position: absolute;
  top: 2%; left: 50%;
  width: 26%; aspect-ratio: 3.6;   /* ~72x20 on desktop, scales down with the phone */
  transform: translateX(-50%);
  background: #0B1220;
  border-radius: 20px;
  z-index: 3;
}
.story-screens {
  position: absolute; top: 0; left: 0;
  width: calc(100% / var(--s, 1));
  height: 600px;
  transform: scale(var(--s, 1));
  transform-origin: top left;
}
.story-rail {
  position: absolute;
  left: -34px; top: 18%; bottom: 18%;
  width: 3px;
  background: var(--line-dark);
  border-radius: 3px;
  overflow: hidden;
}
.story-rail-fill {
  display: block;
  height: 100%;
  background: var(--gold);
  transform-origin: top;
  transform: scaleY(var(--progress, 0));
}
.story-dots { display: flex; gap: 8px; }
.story-dots i {
  width: 7px; height: 7px;
  border-radius: 7px;
  background: var(--line-dark);
  transition: width 300ms ease, background 300ms ease;
}
.story-dots i.is-active { width: 22px; background: var(--gold); }

/* The five mini screens, stacked; the active one slides into place. */
.story-screen {
  position: absolute;
  inset: 0;
  padding: 50px 18px 20px;
  display: flex;
  flex-direction: column;
  font-size: 13px;
  color: var(--ink);
  opacity: 0;
  transform: translateY(30px) scale(0.97);
  transition: opacity 500ms ease, transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.story-screen.is-past { transform: translateY(-30px) scale(0.97); }
.story-screen.is-active { opacity: 1; transform: none; }
.story-screen .ss-body > *,
.story-screen .ss-btn {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 400ms ease, transform 500ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.story-screen.is-active .ss-body > *,
.story-screen.is-active .ss-btn { opacity: 1; transform: none; }
.story-screen.is-active .ss-body > :nth-child(1) { transition-delay: 120ms; }
.story-screen.is-active .ss-body > :nth-child(2) { transition-delay: 200ms; }
.story-screen.is-active .ss-body > :nth-child(3) { transition-delay: 280ms; }
.story-screen.is-active .ss-body > :nth-child(4) { transition-delay: 360ms; }
.story-screen.is-active .ss-body > :nth-child(5) { transition-delay: 440ms; }
.story-screen.is-active .ss-body > :nth-child(6) { transition-delay: 520ms; }
.story-screen.is-active .ss-body > :nth-child(7) { transition-delay: 600ms; }
.story-screen.is-active .ss-btn { transition-delay: 620ms; }

.ss-top { margin-bottom: 16px; }
.ss-top strong { display: block; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.ss-kicker { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); }
.ss-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700; color: var(--verified);
}
.ss-live::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: #22C55E; box-shadow: 0 0 0 4px rgba(34,197,94,0.2);
  animation: ss-pulse 1.6s ease-in-out infinite;
}
@keyframes ss-pulse { 50% { box-shadow: 0 0 0 7px rgba(34,197,94,0.05); } }
.ss-body { display: flex; flex-direction: column; gap: 9px; flex: 1; min-height: 0; }
.ss-label { font-size: 11px; font-weight: 700; color: var(--slate); margin-top: 4px; }
.ss-choices { display: flex; gap: 8px; }
.ss-choice {
  flex: 1; text-align: center; padding: 10px 0;
  background: var(--white); border: 1px solid var(--line); border-radius: 11px; font-weight: 600;
}
.ss-choice.is-on { border-color: var(--teal); background: var(--purple-soft); color: var(--teal); }
.ss-input {
  background: var(--white); border: 1px solid var(--teal); border-radius: 11px;
  padding: 10px 12px; font-weight: 500;
}
.ss-caret {
  display: inline-block; width: 1.5px; height: 14px; margin-left: 2px;
  background: var(--teal); vertical-align: -2px;
  animation: ss-blink 1s steps(1) infinite;
}
@keyframes ss-blink { 50% { opacity: 0; } }
.ss-device, .ss-row, .ss-offer, .ss-timer {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px;
}
.ss-device { justify-content: flex-start; margin-top: 6px; }
.ss-device strong, .ss-offer strong { display: block; font-size: 13px; }
.ss-device small, .ss-offer small { color: var(--slate); font-size: 11px; }
.ss-thumb {
  width: 34px; height: 46px; border-radius: 9px; flex: none;
  background: linear-gradient(145deg, #E6EFF8, #D2DCEC);
}
.ss-row span { color: var(--slate); }
.ss-row b { font-weight: 700; }
.ss-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.ss-tags span {
  background: var(--purple-soft); color: var(--teal);
  border-radius: 20px; padding: 5px 10px; font-size: 11px; font-weight: 700;
}
.ss-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ss-photos i {
  aspect-ratio: 1; border-radius: 9px;
  background: linear-gradient(145deg, #E1E8F4, #CBD5E6);
}
.ss-note { text-align: center; font-size: 11px; font-weight: 600; color: var(--verified); }
.ss-timer { background: var(--sky-soft); border-color: #D5EDF9; color: #075985; }
.ss-timer b { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ss-offer b { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ss-offer.is-best { border: 2px solid var(--teal); background: var(--purple-soft); }
.ss-offer.is-best small { color: var(--teal); font-weight: 700; }
.ss-btn {
  margin-top: auto;
  background: var(--teal); color: var(--white);
  border-radius: 12px; padding: 13px; text-align: center; font-weight: 700;
}
.ss-done { align-items: center; justify-content: center; text-align: center; gap: 8px; }
.ss-check {
  width: 68px; height: 68px; border-radius: 22px;
  display: grid; place-items: center;
  background: var(--verified-tint); color: var(--verified);
  margin-bottom: 6px;
}
.ss-done small { color: var(--slate); font-size: 12px; }
.ss-paid { font-size: 32px; font-weight: 800; letter-spacing: -0.03em; }
.ss-steps { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; text-align: left; }
.ss-steps span { display: flex; align-items: center; gap: 9px; font-weight: 600; }
.ss-steps i { width: 9px; height: 9px; border-radius: 50%; background: var(--verified); flex: none; }

@media (min-width: 900px) {
  .story-grid { grid-template-columns: minmax(0, 460px) auto; justify-content: center; gap: clamp(60px, 9vw, 160px); align-items: start; }
  .story-stage { padding-left: 34px; }
}
/* Phones and tablets: pin a smaller phone under the header; the steps
   scroll up beneath it and fade out behind its dark backdrop. */
@media (max-width: 899px) {
  .story { --phone-h: min(430px, 50vh); }
  .story-stage {
    order: -1;
    top: 73px;
    height: auto;
    padding: 12px 0 14px;
    background: var(--ink);
    z-index: 2;
  }
  .story-stage::after {
    content: "";
    position: absolute; left: 0; right: 0; top: 100%;
    height: 24px;
    background: linear-gradient(var(--ink), rgba(24,36,61,0));
  }
  .story-rail { display: none; }
  .story-phone { border-width: 8px; border-radius: 36px; }
  .story-screen { transform-origin: top; }
  .story.is-ready .story-step { min-height: 50vh; justify-content: flex-start; padding-top: 40px; }
  .story.is-ready .story-step:last-child { padding-bottom: 30vh; }
}

/* ---------- scroll-reveal (progressive enhancement, added by main.js) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px) scale(.98);
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }
/* children start hidden unconditionally, so toggling the parent's
   is-visible class on and off replays the pop-in every time it
   scrolls into view, not just once on first load */
.reveal-group > * {
  opacity: 0;
  transform: translateY(24px) scale(.98);
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}
.reveal-group.is-visible > * { opacity: 1; transform: none; }
.reveal-group.is-visible > *:nth-child(2) { transition-delay: 60ms; }
.reveal-group.is-visible > *:nth-child(3) { transition-delay: 120ms; }
.reveal-group.is-visible > *:nth-child(4) { transition-delay: 180ms; }
.reveal-group.is-visible > *:nth-child(5) { transition-delay: 240ms; }
/* section headings rise out of a mask just after their block fades in */
.section-head.reveal h2 {
  clip-path: inset(-0.2em 0 100% 0);
  transform: translateY(0.45em);
  transition: clip-path 650ms var(--ease) 90ms, transform 650ms var(--ease) 90ms;
}
.section-head.reveal.is-visible h2 { clip-path: inset(-0.2em 0 -0.2em 0); transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-group > * { opacity: 1; transform: none; }
  .section-head.reveal h2 { clip-path: none; transform: none; }
}

/* ---------- brand strip (home) ---------- */
.brand-strip { padding: 28px 0; border-bottom: 1px solid var(--line); }
.brand-strip-inner { display: flex; align-items: center; gap: 28px; }
.brand-strip-label {
  flex-shrink: 0;
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--teal);
}
.marquee { flex: 1; min-width: 0; overflow: hidden; }
.marquee-track {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.marquee-track li {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-right: 28px;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #8A97AE;
  white-space: nowrap;
  transition: color 160ms ease;
}
.marquee-track li::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--line); }
.marquee-track li:hover { color: var(--ink); }
/* main.js doubles the list and adds .is-running: one copy slides out as
   the identical copy slides in, so the loop has no visible seam */
.marquee.is-running {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee.is-running .marquee-track { flex-wrap: nowrap; width: max-content; animation: tekrioMarquee 38s linear infinite; }
.marquee.is-running:hover .marquee-track { animation-play-state: paused; }
@keyframes tekrioMarquee { to { transform: translateX(-50%); } }
@media (max-width: 720px) {
  .brand-strip-inner { flex-direction: column; align-items: stretch; gap: 12px; }
  .brand-strip-label { text-align: center; }
}

/* ---------- scroll-lit statement (home) ---------- */
.statement-section { padding: 120px 0; background: var(--white); }
.scroll-statement {
  max-width: 24ch;
  margin: 0 auto;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.6vw, 3.6rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.035em;
  color: var(--ink);
}
/* main.js wraps each word; --lit runs 0 to 1 per word as the page scrolls */
.scroll-statement .sw { color: color-mix(in srgb, var(--ink) calc(var(--lit, 0) * 100%), #CBD3E1); }
@media (max-width: 720px) { .statement-section { padding: 72px 0; } }

/* ---------- back-to-top (injected by main.js) ---------- */
.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 250ms ease, transform 250ms ease, background-color 160ms ease;
  z-index: 60;
}
.back-to-top.show { opacity: 1; pointer-events: auto; transform: none; }
.back-to-top:hover { background: var(--teal-deep); }

/* ---------- inner page heroes: same glow and wave as Home, plus a card ---------- */
.page-hero { position: relative; overflow: hidden; padding-bottom: 88px; }
.page-hero::before {
  content: "";
  position: absolute;
  top: -260px; right: -200px;
  width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(2,132,199,.34), transparent 70%);
  filter: blur(12px);
  pointer-events: none;
  animation: tekrioDrift 24s ease-in-out infinite alternate;
}
.page-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 48' preserveAspectRatio='none'%3E%3Cpath d='M0,24 C200,48 400,0 600,18 C800,36 1000,6 1200,24 L1200,48 L0,48 Z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  pointer-events: none;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero-visual { display: none; }
@media (min-width: 960px) {
  .page-hero.has-visual { padding-top: 48px; }
  .page-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; align-items: center; }
  .page-hero-visual {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    min-height: 320px;
  }
  .page-hero-visual .hero-stage-backcard { width: 200px; height: 250px; }
}
@media (prefers-reduced-motion: reduce) { .page-hero::before { animation: none; } }

/* About: the three sides of the marketplace, joined by one line */
.sides { position: relative; display: flex; flex-direction: column; gap: 16px; width: 290px; }
.sides::before {
  content: "";
  position: absolute; left: 25px; top: 28px; bottom: 28px;
  width: 2px;
  background: linear-gradient(var(--gold), #F5B942, #34D399);
}
.side {
  position: relative;
  display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center;
  background: var(--white); color: var(--ink);
  border-radius: 16px; padding: 14px 18px;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.06);
}
.side:nth-child(2) { transform: translateX(28px); }
.side-dot { grid-row: span 2; width: 16px; height: 16px; border-radius: 50%; border: 4px solid var(--gold); background: var(--white); }
.side-dot.c2 { border-color: #F5B942; }
.side-dot.c3 { border-color: #34D399; }
.side b { font-size: 15px; font-weight: 800; }
.side small { color: var(--slate); font-size: 12.5px; }

/* ---------- TEKRIO vs a local shop (home) ---------- */
.compare-section { background: var(--paper); }
.compare-wrap { max-width: 940px; margin: 0 auto; }
.compare { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.98rem; }
.compare th, .compare td { padding: 18px 20px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); }
.compare thead th { font-size: 0.82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--slate); border-bottom: 0; }
.compare thead td { border-bottom: 0; }
.compare tbody th { width: 20%; font-weight: 700; color: var(--ink); }
.compare tbody tr:last-child th, .compare tbody tr:last-child .cmp-shop { border-bottom: 0; }
.cmp-shop { color: var(--slate); }
.cmp-tekrio { background: var(--white); color: var(--ink); font-weight: 600; border-left: 2px solid var(--teal); border-right: 2px solid var(--teal); }
.compare thead th.cmp-tekrio-head { background: var(--teal); color: var(--white); border-radius: 14px 14px 0 0; }
.compare tbody tr:last-child .cmp-tekrio { border-bottom: 2px solid var(--teal); border-radius: 0 0 14px 14px; }
.cmp-ic {
  display: inline-grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  margin-right: 10px; vertical-align: middle;
  background: #FDEEEB; color: var(--danger);
}
.cmp-tekrio .cmp-ic { background: var(--verified-tint); color: var(--verified); }
@media (max-width: 640px) {
  .compare, .compare thead, .compare tbody { display: block; }
  .compare thead tr, .compare tbody tr { display: grid; grid-template-columns: 1fr 1fr; }
  .compare thead td { display: none; }
  .compare tbody th { grid-column: 1 / -1; width: auto; padding: 16px 4px 6px; border-bottom: 0; }
  .compare th, .compare td { padding: 12px; font-size: 0.9rem; }
  .cmp-ic { width: 20px; height: 20px; margin: 0 0 6px; display: grid; }
  .compare tbody tr:last-child .cmp-shop { border-bottom: 0; }
}

/* ---------- footer: logo + social ---------- */
.footer-grid .footer-logo { display: inline-flex; align-items: center; gap: 10px; padding: 0; background: none; }
.footer-logo img { width: 36px; height: 36px; }
.social-links { display: flex; gap: 10px; list-style: none; margin: 18px 0 0; padding: 0; }
.footer-grid .social-links li { margin: 0; }
.footer-grid .social-links a {
  display: grid; place-items: center;
  width: 40px; height: 40px; padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line-dark);
  color: var(--paper);
  background: none;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms var(--ease);
}
.footer-grid .social-links a:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); transform: translateY(-2px); }

/* ---------- sticky "sell" bar on phones (injected by main.js) ---------- */
.mobile-sell-bar {
  position: fixed;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 55;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 10px 10px 16px;
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--line-dark);
  border-radius: 14px;
  box-shadow: 0 18px 40px -16px rgba(0,0,0,.55);
  font-size: 0.9rem; font-weight: 600;
  transform: translateY(140%);
  transition: transform 320ms var(--ease);
}
.mobile-sell-bar.is-shown { transform: none; }
.mobile-sell-bar .btn { padding: 11px 16px; flex-shrink: 0; }
@media (min-width: 720px) { .mobile-sell-bar { display: none; } }
@media (max-width: 719px) { body.has-sell-bar .back-to-top { bottom: 84px; } }

/* ---------- page transitions (browsers without support just load normally) ---------- */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-old(root) { animation: tekrioPageOut 160ms ease both; }
::view-transition-new(root) { animation: tekrioPageIn 280ms var(--ease) both; }
@keyframes tekrioPageOut { to { opacity: 0; } }
@keyframes tekrioPageIn { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}