/* ============================================================
   DataSkip lander: editorial data-sheet aesthetic
   paper white / ink black / brand red #ee383c
   ============================================================ */

:root {
  --red: #ee383c;
  --red-dark: #c8262a;
  /* plan card prices and buttons, matching the app's plan page */
  --green: #047857;
  --green-dark: #065f46;
  /* the app's accent navy (deposit button), used for plan prices */
  --navy: #13294b;
  --ink: #16130f;
  --ink-soft: #57534c;
  --paper: #faf8f4;
  --paper-dim: #f1ede6;
  --line: #d9d3c8;
  --card: #f7f3eb; /* off-white surface for code blocks and cards */
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --sans: "Archivo", system-ui, sans-serif;
  /* paper grain for light surfaces, dot grid for the dark section */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
  --dots: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1.5px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* overflow-x also set here because Safari does not reliably propagate
   body's clip to the viewport, which allowed sideways panning on mobile */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
  font-family: var(--sans);
  background-color: var(--paper);
  background-image: var(--noise); /* paper grain; blueprint grid lines come from the main.js canvas */
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* card shadows and offsets must not cause sideways scroll on mobile */
  /* sticky footer: short pages (pricing, legal) push the footer to the
     bottom of the viewport instead of leaving dead space under it */
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}
/* width 100% matters: as a flex item with margin auto, main would otherwise
   shrink-to-fit its widest code line and overflow narrow viewports */
main { flex: 1 0 auto; width: 100%; }

/* grid FX canvas: blueprint grid, trace pulses, and scan sweep drawn by main.js */
.grid-fx {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

.accent { color: var(--red); }

.kicker {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 1rem;
}

h1, h2, h3 {
  font-stretch: 115%;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* == buttons == */
.btn {
  display: inline-block;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.75rem 1.4rem;
  border: 2px solid var(--ink);
  color: var(--ink);
  background: transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.btn--solid {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  box-shadow: 4px 4px 0 var(--ink);
}
.btn--solid:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--inverse {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--red);
}
.btn--inverse:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--red); }
.btn--lg { padding: 1rem 2rem; font-size: 0.9rem; }
.btn--xl { padding: 1.25rem 3rem; font-size: 1rem; }

/* == nav == */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 5vw;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--ink);
}
.nav__logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-stretch: 115%;
  font-weight: 900;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--ink);
}
.nav__logo-mark {
  display: block;
  width: 2.1rem;
  height: auto;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}
.nav__links a {
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}
.nav__links a:not(.btn):hover { color: var(--red); }
.nav__links .btn { padding: 0.55rem 1.1rem; box-shadow: 3px 3px 0 var(--ink); }
/* the generic .nav__links a ink color outranks .btn--solid, so restate white */
.nav__links .btn--solid { color: #fff; }
.nav__signin { opacity: 0.7; }
.nav__toggle, .nav__burger { display: none; }

/* == hero == */
/* vertical rhythm tracks viewport height so nav + hero + marquee stay
   above the fold with breathing room on any desktop screen */
.hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3rem;
  align-items: center;
  padding: clamp(2.5rem, 7svh, 6rem) 5vw clamp(1.75rem, 5svh, 5rem);
  max-width: 1340px;
  margin: 0 auto;
}
.hero h1 {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
}
.hero h1 em {
  font-style: normal;
  color: var(--red);
  position: relative;
}
.hero__sub {
  margin-top: 1.5rem;
  font-size: 1.1rem;
  color: var(--ink-soft);
  max-width: 34rem;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: clamp(1.5rem, 3.2svh, 2.25rem);
}
.hero__proof {
  display: flex;
  gap: 2.5rem;
  list-style: none;
  margin-top: clamp(1.75rem, 4svh, 3rem);
}
.hero__proof strong {
  display: block;
  font-stretch: 115%;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--red);
}
.hero__proof span {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* proof chips double as links on the 404 page */
.hero__proof a { text-decoration: none; color: inherit; }
.hero__proof a:hover strong { color: var(--red-dark); }

/* hero copy load-in */
.hero__copy > * { animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
.hero__copy > *:nth-child(2) { animation-delay: 0.08s; }
.hero__copy > *:nth-child(3) { animation-delay: 0.16s; }
.hero__copy > *:nth-child(4) { animation-delay: 0.24s; }
.hero__copy > *:nth-child(5) { animation-delay: 0.32s; }
@keyframes rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

/* == hero stage: isometric data platform, animated per storyboard == */
.hero__visual { position: relative; }
/* render close to the 600px viewBox so hairlines and small labels stay
   crisp; the slight left bleed borrows from the column gap. The svh term
   caps the stage on short screens: 280px covers nav, marquee, hero padding,
   and breathing room; 1.07 is the 600/560 viewBox aspect ratio */
.stage {
  display: block;
  width: min(106%, calc((100svh - 280px) * 1.07));
  max-width: none;
  height: auto;
  margin: -2% 0 0 -6%;
}
.stage text { font-family: var(--mono); }

/* entrance choreography, delays follow the storyboard timing overview */
.stage__shadow {
  fill: rgba(22, 19, 15, 0.08);
  transform-box: view-box;
  transform-origin: 320px 530px;
  animation: stage-shadow-in 0.6s ease-out backwards;
}
.stage__platform { animation: stage-rise 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) backwards; }
.stage__map {
  transform-box: view-box;
  transform-origin: 320px 390px;
  animation: stage-map-in 0.45s 0.35s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
}
.stage__map circle { fill: #e9c6c8; }
.stage__map circle.stage__dot-hot { fill: var(--red); }
.stage__pin { transform-box: view-box; animation: stage-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }
.stage__pin line { stroke: var(--red); stroke-width: 2; }
.stage__pin-head { fill: var(--red); stroke: #fff; stroke-width: 1.5; }
.stage__pin-top {
  transform-box: fill-box;
  transform-origin: center;
  animation: pin-pulse 3.6s ease-in-out infinite;
}
.stage__panel {
  animation:
    stage-slide 0.45s 0.8s cubic-bezier(0.2, 0.7, 0.3, 1) backwards,
    stage-float 7s 1.6s ease-in-out infinite alternate;
}
.stage__panel-title { font-size: 9px; font-weight: 700; letter-spacing: 0.16em; fill: #b3ac9f; }
.stage__legend { font-size: 7.5px; letter-spacing: 0.1em; fill: #b3ac9f; }
#panel-map circle { fill: var(--red); }
#panel-map circle.dot-avail { fill: #6b6459; }
.stage__stats {
  animation:
    stage-rise 0.45s 1s cubic-bezier(0.2, 0.7, 0.3, 1) backwards,
    stage-float 8.5s 1.9s ease-in-out infinite alternate;
}
.stage__label { font-size: 10.5px; letter-spacing: 0.1em; fill: var(--ink-soft); }
.stage__val { font-size: 16px; font-weight: 700; fill: var(--ink); }
.stage__rowline { stroke: #e8e2d8; stroke-width: 1.2; stroke-dasharray: 3 3; }
.stage__foot { font-size: 7.5px; letter-spacing: 0.12em; fill: #b3ac9f; }
.stage__blink { animation: stage-twinkle 1.4s ease-in-out infinite alternate; }
.stage__ring {
  transform-box: view-box;
  transform-origin: 80px 362px;
  animation: stage-pop 0.4s 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
/* 16px keeps "98.9%" inside the ring's 58px inner width */
.stage__pct { font-family: var(--sans); font-stretch: 115%; font-size: 16px; font-weight: 800; fill: var(--ink); }
.stage__ring-label { font-size: 8px; letter-spacing: 0.14em; fill: var(--ink-soft); }
.stage__dash {
  fill: none;
  stroke: #b8b0a2;
  stroke-width: 1.5;
  stroke-dasharray: 5 5;
  opacity: 0.85;
  animation: dash-drift 2.8s linear infinite;
}
/* connector lines grow out of their card edge (origin set inline); the
   arrowhead then ticks into place just as its line finishes */
.stage__dash--v,
.stage__dash--h {
  transform-box: view-box;
  animation:
    link-grow-v 0.4s cubic-bezier(0.2, 0.7, 0.3, 1) backwards,
    dash-drift 2.8s linear infinite;
}
.stage__dash--h { animation-name: link-grow-h, dash-drift; }
@keyframes link-grow-v { from { opacity: 0; transform: scaleY(0); } }
@keyframes link-grow-h { from { opacity: 0; transform: scaleX(0); } }
.stage__arrow { fill: #8f8678; }
.stage__tick { animation: tick-in-v 0.25s cubic-bezier(0.2, 0.7, 0.3, 1) backwards; }
.stage__tick--h { animation-name: tick-in-h; }
@keyframes tick-in-v { from { opacity: 0; transform: translateY(-6px); } }
@keyframes tick-in-h { from { opacity: 0; transform: translateX(-6px); } }

/* accents pop in one by one; the pop wrapper owns the entrance scale so it
   never fights the transform-based idle bob on the cube itself */
.stage__cube-pop {
  transform-box: fill-box;
  transform-origin: center;
  animation: stage-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
.stage__cube { animation: cube-bob 4.5s ease-in-out infinite alternate; }
.stage__plus {
  stroke: var(--red);
  stroke-width: 1.5;
  fill: none;
  transform-box: fill-box;
  transform-origin: center;
  animation:
    plus-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) backwards,
    stage-twinkle 4s ease-in-out infinite alternate;
}
/* lands exactly on stage-twinkle's from-value so the handoff is seamless */
@keyframes plus-in { from { opacity: 0; transform: scale(0) rotate(-90deg); } to { opacity: 0.3; } }

@keyframes stage-rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes stage-slide { from { opacity: 0; transform: translateX(-24px); } }
@keyframes stage-pop { from { opacity: 0; transform: scale(0); } }
@keyframes stage-shadow-in { from { opacity: 0; transform: scale(0.7); } }
@keyframes stage-fade { from { opacity: 0; } }
@keyframes stage-map-in { from { opacity: 0; transform: scale(0.8); } }
/* pins rest most of the cycle, then give one quick tick */
@keyframes pin-pulse { 0%, 70%, 94%, 100% { transform: scale(1); } 82% { transform: scale(1.16); } }
@keyframes stage-float { from { transform: translateY(0); } to { transform: translateY(-3.5px); } }
@keyframes stage-twinkle { from { opacity: 0.3; } to { opacity: 0.65; } }
@keyframes dash-drift { to { stroke-dashoffset: -20; } }
@keyframes cube-bob { from { transform: translateY(0); } to { transform: translateY(-4px); } }

/* == marquee == */
.marquee {
  overflow: hidden;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  /* navy with the same dot-grid texture as the dark dev strip */
  background-color: #1d3557;
  background-image: var(--noise), var(--dots);
  background-size: 180px 180px, 22px 22px;
  color: #fff;
  padding: 0.8rem 0;
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  width: max-content;
  animation: scroll 40s linear infinite;
}
.marquee__track span {
  font-stretch: 115%;
  font-weight: 800;
  font-size: 1.3rem;
  text-transform: uppercase;
  white-space: nowrap;
}
.marquee__track i { font-style: normal; font-size: 0.6rem; color: #ff6b6e; }
@keyframes scroll { to { transform: translateX(-50%); } }

/* == data buying == */
.databuy__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3.5rem;
  align-items: center;
}
.databuy__sub { color: var(--ink-soft); max-width: 34rem; }
/* stepped bars: price per hit falling as volume grows */
.pricescale {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 72px;
  max-width: 26rem;
  margin-top: 2rem;
}
.pricescale span {
  flex: 1;
  background-color: var(--ink);
  background-image: var(--noise);
}
.pricescale span:nth-child(1) { height: 100%; }
.pricescale span:nth-child(2) { height: 85%; }
.pricescale span:nth-child(3) { height: 72%; }
.pricescale span:nth-child(4) { height: 61%; }
.pricescale span:nth-child(5) { height: 52%; }
.pricescale span:nth-child(6) { height: 45%; background-color: var(--red); }
.pricescale__labels {
  display: flex;
  justify-content: space-between;
  max-width: 26rem;
  margin: 0.6rem 0 2rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.hitcard {
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--paper-dim);
  padding: 1.75rem 2rem;
}
.hitcard__title {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.9rem;
}
.hitcard ul { list-style: none; }
.hitcard li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px dashed var(--line);
}
.hitcard li:last-child { border-bottom: none; padding-bottom: 0; }
.hitcard strong { font-stretch: 115%; font-weight: 800; font-size: 0.95rem; white-space: nowrap; }
.hitcard span { font-family: var(--mono); font-size: 0.75rem; color: var(--ink-soft); text-align: right; }

/* == sections == */
section { padding: 5.5rem 5vw; max-width: 1280px; margin: 0 auto; }
.section-head { margin-bottom: 3rem; }
.section-head h1,
.section-head h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
/* contextual cross-links under lander sections */
.section-more { margin-top: 1.5rem; text-align: center; }

/* in-copy text links, sitewide: ink black with an underline so they stay
   visibly links (accessibility + clickability); color alone carries no SEO
   weight. Classless anchors only, so buttons and card links are untouched.
   The :not() lifts specificity above scoped rules like .legal a. */
main p a:not([class]),
main li a:not([class]),
main dd a:not([class]) {
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--ink) 45%, transparent);
  text-underline-offset: 3px;
}
main p a:not([class]):hover,
main li a:not([class]):hover,
main dd a:not([class]):hover {
  color: var(--red);
  text-decoration-color: var(--red);
}

/* scroll reveal, class toggled by main.js */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-in { opacity: 1; transform: none; }

/* == frost: slight blur on the grid lines behind bare text blocks. The
   blur sits on a rounded ::before layer and a pair of intersecting
   gradient masks feathers it out, so it eases into the crisp grid
   instead of stopping at a hard edge == */
.section-head:not(.section-head--invert),
.hero__copy,
.faq__cols > div,
.closer,
.legal,
.dev__hero,
.dev__section {
  position: relative;
}
.section-head:not(.section-head--invert)::before,
.hero__copy::before,
.faq__cols > div::before,
.closer::before,
.legal::before,
.dev__hero::before,
.dev__section::before {
  content: "";
  position: absolute;
  /* side bleed shrinks with the viewport so it never pokes past the
     page edge on mobile and causes sideways scroll */
  inset: -1.25rem clamp(-1.25rem, -2vw, -0.25rem);
  z-index: -1;
  border-radius: 3rem;
  pointer-events: none;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent),
    linear-gradient(to bottom, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent),
    linear-gradient(to bottom, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
  mask-composite: intersect;
}

/* == features == */
.features__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 2px solid var(--ink);
  border-left: 2px solid var(--ink);
}
.features__grid article {
  position: relative;
  padding: 1.75rem 1.5rem 2rem;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  background-color: #fff;
  background-image: var(--noise);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.features__grid article:hover {
  background-color: var(--paper-dim);
  box-shadow: inset 0 0 0 2px var(--red); /* selected-cell ring */
}
.features__grid article:hover .features__num { color: var(--red); }
.features__num {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--line);
  transition: color 0.2s ease;
}
.features__grid h3 { font-size: 1.05rem; margin: 0.9rem 0 0.6rem; }
.features__grid p { font-size: 0.9rem; color: var(--ink-soft); }

/* == value / pricing == */
.value {
  background-color: var(--ink);
  background-image: var(--dots);
  background-size: 26px 26px;
  color: var(--paper);
  max-width: none;
}
.value > * { max-width: 1152px; margin-left: auto; margin-right: auto; }
.section-head--invert { margin-bottom: 3.5rem; }
.section-head--invert h2 { color: #fff; }
.value__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: #3a352e;
  border: 2px solid #3a352e;
}
.value__stat {
  background-color: var(--ink);
  background-image: var(--dots);
  background-size: 26px 26px;
  padding: 2rem 1.75rem;
}
.value__stat strong {
  display: block;
  font-stretch: 115%;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--red);
  line-height: 1;
}
.value__stat p { margin-top: 1rem; color: #b3ac9f; font-size: 0.95rem; }
/* video left of the pricing stats inside the dark section */
.value__body {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 2rem;
  align-items: start;
}
.value__body .value__cols { grid-template-columns: 1fr; }
.value .reviews__video {
  width: 100%;
  margin: 0;
  border-color: #3a352e;
  box-shadow: 8px 8px 0 rgba(255, 255, 255, 0.08);
}
.value .reviews__cta { margin-top: 1.5rem; }
/* plan banner tucked under the video; tighter so it fits the column */
.value__media .plan {
  margin-top: 1.5rem;
  gap: 1.5rem;
  padding: 1.5rem 1.75rem;
}
.value__media .plan__price { font-size: 2.4rem; }
.value__media .plan__info { min-width: 12rem; }
.value__media .plan__info p { font-size: 0.88rem; }

/* membership plan banner */
.plan {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
  padding: 2rem 2.25rem;
  background: var(--red);
  border: 2px solid #fff;
  box-shadow: 8px 8px 0 rgba(255, 255, 255, 0.15);
}
.plan__price {
  font-stretch: 115%;
  font-weight: 800;
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}
.plan__price em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 500;
  opacity: 0.85;
}
.plan__info { flex: 1; min-width: 16rem; }
.plan__info h3 { color: #fff; font-size: 1.15rem; }
.plan__info p { margin-top: 0.4rem; color: #ffd9da; font-size: 0.95rem; }
/* volume pay-per-skip banner on the pricing page: dark twin of the
   membership card */
.plan--paygo {
  background-color: var(--ink);
  background-image: var(--dots);
  background-size: 26px 26px;
}
.plan--paygo .plan__price { color: var(--red); }
.plan--paygo .plan__info p { color: #b3ac9f; }
.plan + .plan { margin-top: 1.5rem; }

.value__cta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 3rem;
}
.value__cta p { font-family: var(--mono); font-size: 0.8rem; color: #b3ac9f; text-transform: uppercase; letter-spacing: 0.08em; }
.value__cta .value__nohits {
  font-weight: 700;
  color: #ff6b6e;
  letter-spacing: 0.12em;
}
.section-more--left { text-align: left; margin-top: 1rem; font-size: 0.85rem; }

/* data page: CTA with the rate sheet as a small footnote link below it */
.databuy__actions { margin-top: 1.75rem; }
.databuy__ratelink {
  display: inline-block;
  margin-top: 0.9rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent);
  text-underline-offset: 3px;
}
.databuy__ratelink:hover { color: var(--red); text-decoration-color: var(--red); }

/* == legacy blog articles (reuse the legal page typography) == */
.article h2, .article h3, .article h4 {
  font-size: 1.1rem;
  margin: 2.25rem 0 0.75rem;
}
.article img { max-width: 100%; height: auto; border: 2px solid var(--ink); }
.article li { color: var(--ink-soft); margin-bottom: 0.35rem; }
.article ol { margin: 0 0 1rem 1.25rem; color: var(--ink-soft); }
.article strong { color: var(--ink); }

/* == agent prompt banner (developers page): dark card, prompt hidden == */
.promptbox-section { padding-top: 0 !important; }
.promptbox {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 2.5rem;
  align-items: center;
  padding: 2.25rem 2.5rem;
  border: 2px solid var(--ink);
  background-color: var(--ink);
  background-image: var(--noise), var(--dots);
  background-size: 180px 180px, 22px 22px;
  box-shadow: 8px 8px 0 rgba(238, 56, 60, 0.35);
}
.promptbox h2 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.promptbox__sub { margin-top: 0.9rem; color: #b3ac9f; font-size: 0.95rem; max-width: 28rem; }
.promptbox__side { justify-self: end; text-align: center; }
.promptbox__agents {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  list-style: none;
  margin-bottom: 1.1rem;
}
.promptbox__agents li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #d8d2c6;
  border: 1px solid #3a352e;
  background: rgba(255, 255, 255, 0.04);
  padding: 0.45rem 0.7rem;
}
.promptbox__agents svg { width: 1rem; height: 1rem; color: var(--red); }
.promptbox__copy { cursor: pointer; }
.promptbox__hint {
  margin-top: 0.75rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b6459;
}
/* footnote row across the bottom of the box: spec and markdown pointers */
.promptbox__spec {
  grid-column: 1 / -1;
  margin-top: 0.25rem;
  padding-top: 1rem;
  border-top: 1px solid #3a352e;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: #8f877a;
}
/* the links carry a class so the sitewide `main p a:not([class])` ink rule
   leaves them alone on the dark box */
.promptbox__link {
  color: #d8d2c6;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.promptbox__link:hover { color: var(--red); }
#agent-prompt { display: none; }

@media (max-width: 860px) {
  .promptbox { grid-template-columns: 1fr; gap: 1.75rem; }
  .promptbox__side { justify-self: start; text-align: left; }
  .promptbox__agents { justify-content: flex-start; flex-wrap: wrap; }
}

/* == cookie banner == */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(8px);
  border-top: 2px solid var(--ink);
}
.cookie-banner__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  max-width: 1280px;
  margin: 0 auto;
  padding: 1rem 5vw;
}
.cookie-banner__text {
  flex: 1;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.cookie-banner__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  flex-shrink: 0;
}
.cookie-banner__actions .btn { padding: 0.6rem 1.1rem; font-size: 0.75rem; }
.cookie-banner__link {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink);
  padding: 0 0.35rem;
}
@media (max-width: 860px) {
  .cookie-banner__inner { flex-direction: column; align-items: flex-start; gap: 0.9rem; }
}
.value__cta a { color: inherit; text-decoration: underline; }
.value__cta a:hover { color: #fff; }

/* == reviews == */
.reviews__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.reviews__grid figure {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  background-image: var(--noise);
  border: 2px solid var(--ink);
  padding: 1.5rem;
  box-shadow: 5px 5px 0 var(--paper-dim);
}
.stars { color: var(--red); letter-spacing: 0.15em; font-size: 0.9rem; }
.reviews__grid blockquote {
  flex: 1;
  margin: 1rem 0 1.25rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.reviews__grid figcaption { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.avatar img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
/* "Posted on Google" card footer */
.rev-source { display: flex; align-items: center; gap: 0.6rem; }
.rev-source img { display: block; width: 1.6rem; height: 1.6rem; }
.rev-source em {
  display: block;
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--ink-soft);
}
.rev-source strong { display: block; font-size: 0.85rem; }
/* social proof video under the review cards: embedded player on desktop,
   the .reviews__cta link takes over on mobile (see 820px media query) */
.reviews__video {
  width: min(46rem, 100%);
  aspect-ratio: 16 / 9;
  margin: 2.5rem auto 0;
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--paper-dim);
  background: var(--ink);
}
.reviews__video iframe { display: block; width: 100%; height: 100%; border: 0; }
.dev .reviews__video { margin-top: 0; }
.reviews__cta {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
}
.reviews__cta p { font-family: var(--mono); font-size: 0.8rem; color: var(--ink-soft); }
.avatar {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}
.reviews__grid figcaption strong { display: block; font-size: 0.9rem; }
.reviews__grid figcaption em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-soft);
}

/* == faq == */
.faq__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}
.faq__group {
  font-size: 0.85rem;
  color: var(--red);
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 0.25rem;
}
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 1.5rem 1rem 0;
  font-weight: 700;
  font-size: 0.95rem;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-weight: 400;
  color: var(--red);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 0 1rem; font-size: 0.9rem; color: var(--ink-soft); }

/* == closer == */
.closer { text-align: center; padding-top: 3.5rem; padding-bottom: 6rem; }
.closer h2 { font-size: clamp(2.4rem, 6vw, 4.2rem); margin-bottom: 2.5rem; }
.closer__note {
  margin-top: 1.5rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* == legal pages == */
.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 4.5rem 5vw 6rem;
  min-height: 60vh;
}
.legal h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.legal__date {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
  margin: 1rem 0 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid var(--ink);
}
.legal h2 { font-size: 1.1rem; margin: 2.25rem 0 0.75rem; }
.legal p { color: var(--ink-soft); margin-bottom: 0.9rem; }
.legal ul { margin: 0 0 1rem 1.25rem; color: var(--ink-soft); }
.legal li { margin-bottom: 0.35rem; }
.legal a { color: var(--red); font-weight: 700; text-decoration: none; }
.legal a:hover { text-decoration: underline; }

/* == footer == */
.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.5rem 5vw;
  border-top: 2px solid var(--ink);
  background-color: #fff;
  background-image: var(--noise);
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-soft);
}
.footer nav { display: flex; gap: 1rem 1.5rem; flex-wrap: wrap; justify-content: center; }
.footer__links { display: flex; gap: 1rem 2.5rem; flex-wrap: wrap; justify-content: flex-end; }
.footer a { color: var(--ink); text-decoration: none; }
.footer a:hover { color: var(--red); }

/* == responsive == */
@media (max-width: 960px) {
  .databuy__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .value__body { grid-template-columns: 1fr; }
  .hero { grid-template-columns: 1fr; gap: 3.5rem; padding-top: 4rem; }
  .hero__visual { display: none; } /* stacked below the copy it adds no value, just scroll */
  .features__grid { grid-template-columns: repeat(2, 1fr); }
  .reviews__grid { grid-template-columns: repeat(2, 1fr); }
  .value__cols { grid-template-columns: 1fr; }
  .faq__cols { grid-template-columns: 1fr; gap: 2rem; }
}

/* burger nav below 820px: the full link bar gets cramped well before phones */
@media (max-width: 820px) {
  .reviews__video { display: none; }
  .reviews__cta { display: flex; }
  /* .pricing__grid mobile override lives at the end of the sheet: it must
     come after the pricing base rules or source order kills it */
  .nav__burger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 0.6rem;
  }
  .nav__burger span {
    width: 22px;
    height: 2px;
    background: var(--ink);
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .nav__links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background-color: var(--paper);
    background-image: var(--noise);
    border-bottom: 2px solid var(--ink);
  }
  .nav__links a { padding: 1rem 5vw; width: 100%; border-top: 1px solid var(--line); }
  .nav__links .btn { border: none; box-shadow: none; background: var(--red); color: #fff; }
  .nav__toggle:checked ~ .nav__links { display: flex; }
  .nav__toggle:checked ~ .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav__toggle:checked ~ .nav__burger span:nth-child(2) { opacity: 0; }
  .nav__toggle:checked ~ .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

@media (max-width: 640px) {
  .features__grid { grid-template-columns: 1fr; }
  .reviews__grid { grid-template-columns: 1fr; }
  section { padding: 4rem 5vw; }
  .hero { padding-top: 3rem; padding-bottom: 3.5rem; gap: 3rem; }
  .hero h1 { font-size: clamp(2.1rem, 10vw, 2.6rem); }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { text-align: center; }
  .hero__proof { gap: 1.5rem; flex-wrap: wrap; }
  .marquee__track span { font-size: 1.05rem; }
  .plan { flex-direction: column; align-items: stretch; gap: 1.5rem; padding: 1.75rem 1.25rem; }
  .plan__info { min-width: 0; }
  .plan .btn { text-align: center; }
  .value__stat { padding: 1.5rem 1.25rem; }
  .closer { padding-top: 4.5rem; padding-bottom: 4.5rem; }
  .closer .btn { width: 100%; max-width: 22rem; text-align: center; }
  .footer { justify-content: center; text-align: center; }
  .dev__hero { padding-top: 3.5rem; }
  .dev .closer { padding: 4rem 0; }
  .api-table { display: block; overflow-x: auto; } /* let wide tables scroll instead of squishing */
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .stage * { animation: none; } /* stage base styles are the final composed state */
  .hero__copy > * { animation: none; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* == developers strip (index) == */
.devstrip {
  background-color: var(--ink);
  background-image: var(--dots);
  background-size: 26px 26px;
  color: var(--paper);
  max-width: none;
}
.devstrip__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  max-width: 1152px;
  margin: 0 auto;
}
.devstrip h2 {
  font-size: clamp(1.9rem, 4vw, 3rem);
  color: #fff;
}
.devstrip__sub {
  margin: 1.25rem 0 2rem;
  color: #b3ac9f;
  font-size: 1.05rem;
  max-width: 30rem;
}
/* The sitewide in-copy link rule paints links ink black, which disappears on
   this dark section. The class selector makes this more specific than that
   rule, so it wins here only. */
main .devstrip__sub a:not([class]) {
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, 0.45);
}
main .devstrip__sub a:not([class]):hover {
  color: var(--red);
  text-decoration-color: var(--red);
}

/* terminal mock */
.term {
  border: 2px solid #3a352e;
  background-color: #0d0b09;
  background-image: var(--dots);
  background-size: 26px 26px;
  box-shadow: 8px 8px 0 rgba(238, 56, 60, 0.35);
}
.term__bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 1rem;
  border-bottom: 2px solid #3a352e;
}
.term__bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #3a352e;
}
.term__bar span:first-child { background: var(--red); }
.term__bar em {
  margin-left: auto;
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: #6b6459;
}
.term__body {
  margin: 0;
  padding: 1.25rem 1.4rem;
  font-family: var(--mono);
  font-size: 0.85rem;
  line-height: 1.75;
  color: #d8d2c6;
  overflow-x: auto;
}
.term__body b { color: var(--red); font-weight: 700; }
.term__body i { color: #7bdc9a; font-style: normal; font-weight: 700; }

/* == developers page == */
.dev {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 5vw;
}
.dev section { padding: 4rem 0 1rem; max-width: none; }
.dev__hero { padding-top: 5rem; }
.dev__hero h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
.dev__sub, .dev__lead {
  margin-top: 1.25rem;
  font-size: 1.05rem;
  color: var(--ink-soft);
  max-width: 42rem;
}
.dev__lead { margin: -1.5rem 0 1.75rem; }
ol.dev__sub, ol.dev__lead { /* numbered step lists (bulk API pipeline) */
  margin: 1rem 0 1.75rem;
  padding-left: 1.5rem;
  display: grid;
  gap: 0.6rem;
}
.dev__install {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 2.25rem 0 2.5rem;
}
.dev .hero__proof { margin-top: 0; padding-bottom: 1rem; }
.dev .section-head { margin-bottom: 2.5rem; }
.dev .closer { padding: 6rem 0; }

/* code blocks */
.code {
  margin: 0 0 1.5rem;
  padding: 1.4rem 1.6rem;
  background-color: #fff;
  background-image: var(--noise);
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--paper-dim);
  font-family: var(--mono);
  font-size: 0.85rem;
  line-height: 1.7;
  overflow-x: auto;
}
.code--inline {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0.9rem 1.6rem;
  font-size: 0.95rem;
  font-weight: 700;
}
.code b { color: var(--red); font-weight: 700; }

.endpoint {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--mono);
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  /* anywhere (not break-all) so the URL can break but "POST" never splits */
  overflow-wrap: anywhere;
}
.endpoint .tag { flex-shrink: 0; }

/* status table */
.api-table {
  width: 100%;
  border-collapse: collapse;
  background-color: #fff;
  background-image: var(--noise);
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--paper-dim);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}
.api-table th, .api-table td {
  text-align: left;
  padding: 0.8rem 1.2rem;
  border-bottom: 1px solid var(--line);
}
.api-table th {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background-color: var(--paper-dim);
  background-image: var(--noise);
}
.api-table td:first-child {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--red);
  white-space: nowrap;
}
.api-table tr:last-child td { border-bottom: none; }

@media (max-width: 960px) {
  .devstrip__inner { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* == textured card surfaces ==
   the paper grain alone is imperceptible on flat surfaces, so cards get an
   off-white base plus a faint graph-paper dot grid to read as material */
.code,
.api-table,
.features__grid article,
.reviews__grid figure,
.hitcard,
.pricecard,
.form,
.form__success {
  background-color: var(--card);
  background-image: var(--noise), radial-gradient(rgba(22, 19, 15, 0.065) 1px, transparent 1.4px);
  background-size: 180px 180px, 20px 20px;
}

/* == pricing page: one-screen rate summary == */
.pricing { max-width: 1080px; }
.pricing .dev__hero { padding-top: 2.5rem; padding-bottom: 0; }
.pricing .dev__hero .section-head { margin-bottom: 0; }
.pricing .dev__hero h1 { font-size: clamp(2rem, 3.5vw, 2.8rem); }
.pricing .dev__section { padding-top: 2rem; }
.pricing__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  align-items: stretch;
}
.pricecard {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--paper-dim);
  padding: 1.5rem 1.6rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pricecard::before {
  /* accent spine, matching the industry and feature cards */
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  height: 5px;
  background: var(--a, var(--ink));
}
.pricecard:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 color-mix(in srgb, var(--a, var(--ink)) 30%, var(--paper-dim));
}
.pricecard--featured { box-shadow: 6px 6px 0 color-mix(in srgb, var(--red) 35%, var(--paper-dim)); }
/* The featured plan (Premium) on /data is green, matching the app's plan page. */
#plans .pricecard--featured { box-shadow: 6px 6px 0 color-mix(in srgb, var(--green) 35%, var(--paper-dim)); }
.pricecard__flag {
  position: absolute;
  top: 1.1rem;
  right: 1.2rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--red);
  padding: 0.25rem 0.55rem;
}
.pricecard__icon {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  background: var(--a, var(--ink));
  color: #fff;
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--a, var(--ink)) 25%, var(--paper-dim));
  margin-bottom: 1rem;
}
.pricecard__icon svg { width: 1.4rem; height: 1.4rem; }
.pricecard__title {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.pricecard__price {
  margin-top: 0.75rem;
  font-stretch: 115%;
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--navy);
}
/* Post-launch price, struck through above the launch price. */
.pricecard__was {
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--mono);
  font-size: 0.95rem;
  font-weight: 500;
  font-stretch: 100%;
  color: var(--ink-soft);
}
/* "launch price" tag after "per month", in the price colour so it reads as the deal. */
.pricecard__launch {
  font-weight: 700;
  color: var(--navy);
}
.pricecard__price em {
  display: block;
  margin-top: 0.4rem;
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
/* One-line caveat under the perks on the data plan cards: plan records never
   cover Bulk Skip files or API lookups. Pushed to the bottom with the button. */
.pricecard__note {
  margin-top: auto;
  padding-top: 0.9rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: var(--ink-soft);
}
.pricecard__note + .pricecard__cta { margin-top: 0.75rem; }
/* Signup button pinned to the bottom so the three cards line up. Styled like
   the app's plan page buttons (solid green, rounded, soft shadow) rather than
   the lander's block buttons, so the plan cards look the same in both places. */
.pricecard__cta {
  display: block;
  margin-top: auto;
  padding: 0.75rem 1rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background: var(--green);
  border: 1px solid var(--green);
  border-radius: 0.6rem;
  box-shadow: 0 4px 12px rgba(4, 120, 87, 0.3), 0 1px 3px rgba(0, 0, 0, 0.12);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.pricecard__cta:hover {
  color: #fff;
  background: var(--green-dark);
  border-color: var(--green-dark);
  box-shadow: 0 6px 18px rgba(4, 120, 87, 0.38), 0 2px 4px rgba(0, 0, 0, 0.14);
}
.pricecard ul { margin-bottom: 1.4rem; list-style: none; margin-top: 1.1rem; padding-top: 0.25rem; border-top: 2px solid var(--ink); }
.pricecard li {
  padding: 0.5rem 0;
  border-bottom: 1px dashed var(--line);
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.pricecard li:last-child { border-bottom: none; padding-bottom: 0; }
.pricing__foot { margin: 1.5rem 0 4rem; font-family: var(--mono); font-size: 0.75rem; color: var(--ink-soft); }
/* /data: 25% less gap between the plan cards and the pay-as-you-go section. */
#plans { padding-bottom: 4.125rem; }
#plans .pricing__foot { margin-bottom: 3rem; }
#plans + .databuy { padding-top: 4.125rem; }
/* Room between the plans intro paragraphs and the cards. */
#plans > .pricing__grid { margin-top: 2.25rem; }

/* explanatory diagrams inside prose sections */
.contentfig { margin: 1.8rem 0 0; max-width: 48rem; }
.contentfig img {
  display: block;
  width: 100%;
  height: auto;
  border: 2px solid var(--ink);
  box-shadow: 8px 8px 0 var(--paper-dim);
}
.contentfig figcaption {
  margin-top: 0.9rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* industry hub cards that link to a deep page */
.ind-card h3 a { color: inherit; text-decoration: none; }
.ind-card h3 a:hover { color: var(--red); }

/* compare page prose sections */
.compare > h2 { margin: 3.2rem 0 0.9rem; font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.compare > .dev__sub { max-width: 48rem; }
.compare > .ratesheet { margin-top: 1.6rem; }
.compare .ratesheet td:nth-child(2) { white-space: normal; }

/* rate sheet table under the price cards */
.ratesheet { margin-top: 3rem; overflow-x: auto; }
.ratesheet table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 2px solid var(--ink);
  font-size: 0.85rem;
}
.ratesheet caption {
  caption-side: top;
  text-align: left;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-soft);
  padding-bottom: 0.6rem;
}
.ratesheet th,
.ratesheet td {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.ratesheet thead th {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 2px solid var(--ink);
}
.ratesheet tbody tr:last-child td { border-bottom: 0; }
.ratesheet td:nth-child(2) { font-family: var(--mono); font-weight: 700; color: var(--red); white-space: nowrap; }
.ratesheet td:nth-child(3) { white-space: nowrap; }

/* narrow screens: stack each service as a block instead of scrolling 4 columns */
@media (max-width: 700px) {
  .ratesheet { overflow-x: visible; }
  .ratesheet caption { display: block; width: 100%; }
  .ratesheet table { border: 0; }
  .ratesheet tbody { border: 2px solid var(--ink); background: #fff; }
  .ratesheet thead { display: none; }
  .ratesheet table,
  .ratesheet tbody,
  .ratesheet tr,
  .ratesheet td { display: block; width: 100%; }
  .ratesheet tr { padding: 0.9rem 1rem; border-bottom: 1px solid var(--line); }
  .ratesheet tbody tr:last-child { border-bottom: 0; }
  .ratesheet td { padding: 0; border-bottom: 0; }
  .ratesheet td:first-child { font-weight: 700; margin-bottom: 0.3rem; }
  .ratesheet td:nth-child(2),
  .ratesheet td:nth-child(3) { display: inline; width: auto; }
  .ratesheet td:nth-child(3) { font-family: var(--mono); color: var(--ink-soft); }
  .ratesheet td:nth-child(3)::before { content: " "; }
  .ratesheet td:nth-child(4) { margin-top: 0.35rem; font-size: 0.8rem; color: var(--ink-soft); }
}

/* worked example: copy beside a mono order receipt */
.example {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3rem;
  align-items: center;
  margin-top: 3rem;
}
.example__copy h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 0.9rem; }
.example__copy p:not(.kicker) { color: var(--ink-soft); margin-bottom: 1.5rem; max-width: 30rem; }
.receipt {
  position: relative;
  background-color: #fff;
  background-image: var(--noise);
  border: 2px solid var(--ink);
  box-shadow: 8px 8px 0 var(--paper-dim);
  padding: 1.5rem 1.6rem 2rem;
  font-family: var(--mono);
  transform: rotate(1.2deg);
}
.receipt__head {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--ink-soft);
  text-align: center;
  padding-bottom: 0.9rem;
  margin-bottom: 0.5rem;
  border-bottom: 2px dashed var(--line);
}
.receipt__row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.55rem 0;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink);
}
.receipt__row i {
  flex: 1;
  border-bottom: 2px dotted var(--line);
  transform: translateY(-3px);
}
.receipt__row--total {
  margin-top: 0.4rem;
  border-top: 2px dashed var(--line);
  padding-top: 0.9rem;
  font-weight: 700;
  font-size: 0.95rem;
}
.receipt__row--total span:last-child { color: var(--red); }
.receipt__row label { cursor: text; }
.receipt__input {
  width: 11ch;
  font: inherit;
  text-align: right;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 2px dashed var(--red);
  padding: 0 0.1rem;
  caret-color: var(--red);
}
.receipt__input:focus {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
.receipt__stamp {
  position: absolute;
  right: 1rem;
  bottom: -0.9rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
  background: var(--paper);
  border: 2px solid var(--red);
  padding: 0.35rem 0.7rem;
  transform: rotate(-6deg);
  box-shadow: 3px 3px 0 rgba(238, 56, 60, 0.2);
}

@media (max-width: 860px) {
  .example { grid-template-columns: 1fr; gap: 2rem; }
  .receipt { transform: none; max-width: 26rem; }
  /* 16px minimum so iOS does not zoom the page when the input gets focus */
  .receipt__input { font-size: 1rem; }
}
@media (max-width: 820px) {
  .pricing__grid { grid-template-columns: 1fr; }
  .pricecard { max-width: 30rem; }
}

/* on phones, code wraps instead of scrolling sideways: invisible mobile
   scrollbars make horizontally clipped code read as broken layout */
@media (max-width: 640px) {
  .code,
  .term__body {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 0.75rem;
  }
}

/* == contact page: compact hero, hours chip beside the heading, so the
   form lands above the fold == */
.contact .dev__hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  padding-top: 1.75rem;
  padding-bottom: 0;
}
.contact .dev__hero h1 { font-size: clamp(1.9rem, 3.4vw, 2.5rem); }
.contact .dev__hero .section-head { margin-bottom: 0; flex: 1 1 32rem; }
.contact .dev__hero .dev__sub { margin-top: 0.6rem; max-width: 44rem; }
.contact .hero__proof { padding-bottom: 0; margin-top: 0.5rem; }
.contact .dev__section { padding-top: 1.5rem; }
.contact .form { padding: 1.5rem; }
.contact .field { margin-bottom: 0.85rem; }
.contact .form__consent { margin: 0.25rem 0 1rem; }

/* == industries grid: accent-colored icon cards, one hue per trade == */
.ind-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.ind-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.6rem 1.5rem 1.5rem;
  border: 2px solid var(--ink);
  background-color: var(--card);
  background-image: var(--noise), radial-gradient(rgba(22, 19, 15, 0.065) 1px, transparent 1.4px);
  background-size: 180px 180px, 20px 20px;
  box-shadow: 5px 5px 0 var(--paper-dim);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ind-card::before {
  /* accent spine along the top edge */
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  height: 5px;
  background: var(--a);
}
.ind-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0 color-mix(in srgb, var(--a) 30%, var(--paper-dim));
}
.ind-card__num {
  position: absolute;
  top: 0.9rem;
  right: 1rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--a) 55%, var(--paper-dim));
}
.ind-card__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  background: var(--a);
  color: #fff;
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--a) 25%, var(--paper-dim));
  margin-bottom: 1.1rem;
}
.ind-card__icon svg { width: 1.6rem; height: 1.6rem; }
.ind-card h3 { font-size: 1.02rem; margin-bottom: 0.55rem; }
.ind-card p { font-size: 0.9rem; color: var(--ink-soft); flex: 1; }
/* tags are uniform navy signup links, independent of the card accent */
.ind-card__tag {
  --navy: #1d3557;
  margin-top: 1.1rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--navy);
  background: color-mix(in srgb, var(--navy) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--navy) 45%, transparent);
  padding: 0.3rem 0.65rem;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ind-card__tag:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

@media (max-width: 960px) {
  .ind-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .ind-grid { grid-template-columns: 1fr; }
}

/* == contact form == */
.form,
.form__success {
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--paper-dim);
  padding: 2rem;
}
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.field { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 1.25rem; }
.field label {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.field input,
.field select,
.field textarea {
  font-family: var(--mono);
  font-size: 0.9rem;
  padding: 0.75rem 0.9rem;
  border: 2px solid var(--ink);
  border-radius: 0;
  background: #fff;
  color: var(--ink);
  width: 100%;
}
.field textarea { resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 3px 3px 0 rgba(238, 56, 60, 0.25);
}
.form__consent {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin: 0.25rem 0 1.5rem;
  cursor: pointer;
}
.form__consent input {
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.15rem;
  accent-color: var(--red);
}
.form__actions { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.form__actions .btn:disabled { opacity: 0.6; cursor: wait; }
.form__status { font-family: var(--mono); font-size: 0.8rem; }
.form__status[data-kind="error"] { color: var(--red-dark); }
.form__success h2 { font-size: 1.8rem; margin-bottom: 0.75rem; }
.form__success p:not(.kicker) { color: var(--ink-soft); margin-bottom: 1.5rem; }

/* closer with two actions */
.closer__actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .form__row { grid-template-columns: 1fr; gap: 0; }
}

/* the hidden attribute must win over display rules like .endpoint's flex */
[hidden] { display: none !important; }

/* == syntax highlighting == */
.code .c-k { color: #c8262a; }
.code .c-s { color: #1d7a53; }
.code .c-c { color: #98917f; font-style: italic; }
.code .c-n { color: #b45309; }
.code .c-f { color: #1252a5; }

/* == tabbed code panel (developers page) == */
.codebox { margin-bottom: 1.5rem; box-shadow: 6px 6px 0 var(--paper-dim); }
.codebox .code { margin: 0; box-shadow: none; }
.codebox__bar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.75rem;
  background: var(--paper-dim);
  border: 2px solid var(--ink);
  border-bottom: none;
}
.codebox__title {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-left: 0.35rem;
}
.codebox__lang {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.45rem 0.6rem;
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}
.codebox .endpoint {
  margin: 0;
  padding: 0.85rem 1.6rem;
  border: 2px solid var(--ink);
  border-bottom: none;
  background-color: var(--card);
  font-size: 0.85rem;
}