/* ==========================================================================
   Precision Captions LLC
   ========================================================================== */

:root {
  --navy: #10243F;
  --navy-700: #1B3557;
  --navy-100: #E7ECF3;
  --teal: #00A6B8;
  --teal-dark: #00808E;
  --teal-50: #E6F6F8;
  --ink: #16202E;
  --body: #46566B;
  --muted: #7A8899;
  --line: #DDE3EB;
  --bg: #FFFFFF;
  --bg-alt: #F6F8FB;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 1px 2px rgba(16,36,63,.05), 0 12px 32px rgba(16,36,63,.07);
  --shadow-lg: 0 2px 4px rgba(16,36,63,.06), 0 24px 60px rgba(16,36,63,.11);
  --wrap: 1180px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

/* Nothing on this page is meant to scroll sideways. Belt-and-braces against a
   future wide child dragging the whole document with it on a phone. */
html, body { overflow-x: hidden; }

body {
  margin: 0;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--teal-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  color: var(--navy);
  line-height: 1.18;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
  font-weight: 600;
}
h1 { font-size: clamp(2.4rem, 5.6vw, 4rem); font-weight: 700; letter-spacing: -.03em; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.65rem); }
h3 { font-size: 1.22rem; }
p { margin: 0 0 1.1em; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.center { text-align: center; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--navy); color: #fff; padding: .8rem 1.2rem; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Type helpers ---------- */
.eyebrow {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--teal-dark);
  margin: 0 0 .9rem;
}
.section-lede {
  font-size: 1.12rem;
  color: var(--body);
  max-width: 62ch;
  margin: 0 auto 3rem;
}
.accent { color: var(--teal); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  background: var(--navy);
  color: #fff;
  padding: .95rem 1.7rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .97rem;
  letter-spacing: .01em;
  border: 2px solid var(--navy);
  cursor: pointer;
  transition: transform .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}
.btn:hover {
  background: var(--navy-700);
  border-color: var(--navy-700);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.btn-ghost { background: transparent; color: var(--navy); }
.btn-ghost:hover { background: var(--navy-100); border-color: var(--navy); color: var(--navy); }
.btn-accent { background: var(--teal); border-color: var(--teal); }
.btn-accent:hover { background: var(--teal-dark); border-color: var(--teal-dark); }
.btn-sm { padding: .6rem 1.15rem; font-size: .88rem; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding: .8rem 0;
}
.brand { display: flex; align-items: center; gap: .7rem; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 40px; height: 40px; object-fit: contain; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-text strong {
  font-size: 1.02rem; font-weight: 700; letter-spacing: .1em; color: var(--navy);
}
.brand-text em {
  font-style: normal; font-size: 1.02rem; font-weight: 600;
  letter-spacing: .1em; color: var(--teal);
}

.nav { display: flex; align-items: center; gap: 1.9rem; }
.nav a {
  color: var(--navy); font-weight: 500; font-size: .95rem;
}
.nav a:hover { color: var(--teal-dark); text-decoration: none; }
.nav a.btn { color: #fff; }

.nav-toggle {
  display: none;
  background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; padding: 10px;
}
.nav-toggle span {
  display: block; height: 2px; background: var(--navy);
  border-radius: 2px; margin: 5px 0; transition: transform .25s var(--ease), opacity .2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; isolation: isolate; color: #fff; }
.hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(105deg, rgba(16,36,63,.96) 0%, rgba(16,36,63,.88) 46%, rgba(16,36,63,.55) 100%);
}
.hero-inner { padding: clamp(5rem, 12vw, 9.5rem) 0 clamp(5rem, 11vw, 8.5rem); max-width: 780px; }
.hero .eyebrow { color: var(--teal); }
.hero h1 { color: #fff; margin-bottom: .55em; }
.lede {
  font-size: clamp(1.05rem, 1.7vw, 1.22rem);
  color: rgba(255,255,255,.9);
  max-width: 60ch;
  margin-bottom: 2.3rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; }
.hero .btn { background: var(--teal); border-color: var(--teal); }
.hero .btn:hover { background: var(--teal-dark); border-color: var(--teal-dark); }
.hero .btn-ghost { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; }
.hero .btn-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }

/* ==========================================================================
   Trust bar
   ========================================================================== */
.trustbar { background: var(--navy-700); color: #fff; }
.trust-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1rem; padding: 2.2rem 0;
}
.trust-item { text-align: center; padding: 0 .5rem; }
.trust-figure {
  display: block; font-size: 1.65rem; font-weight: 700;
  color: #fff; letter-spacing: -.02em; line-height: 1.2;
}
.trust-label {
  display: block; font-size: .84rem; color: rgba(255,255,255,.72);
  margin-top: .3rem; line-height: 1.45;
}

/* ==========================================================================
   Sections
   ========================================================================== */
.section { padding: clamp(4.5rem, 9vw, 7.5rem) 0; }
.section-alt { background: var(--bg-alt); border-block: 1px solid var(--line); }
.section-dark { background: var(--navy); color: rgba(255,255,255,.86); }
.section-dark h2 { color: #fff; }
.section-dark .eyebrow { color: var(--teal); }
.section-dark .section-lede { color: rgba(255,255,255,.78); }

/* ---------- Transcript comparison ---------- */
.transcript-demo {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem;
  margin-bottom: 1.4rem;
}
.td-col {
  border-radius: var(--radius-lg);
  padding: 1.9rem 1.8rem 1.6rem;
  border: 1px solid var(--line);
  background: #fff;
  min-width: 0; /* grid children default to min-content; without this the
                   monospace lines force the track wider than the viewport */
}
.td-human { border-color: var(--teal); box-shadow: var(--shadow); }
.td-asr { background: var(--bg-alt); }

.td-col h3 {
  display: flex; align-items: center; gap: .6rem;
  font-size: 1.02rem; margin-bottom: 1.5rem;
  padding-bottom: .9rem; border-bottom: 1px solid var(--line);
}
.td-asr h3 { color: var(--muted); }
.td-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--teal); flex: none;
}
.td-asr .td-dot { background: #C2CCD8; }

.td-row + .td-row { margin-top: 1.35rem; padding-top: 1.35rem; border-top: 1px dashed var(--line); }
.td-label {
  font-size: .72rem; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 .5rem;
}
.td-line {
  margin: 0;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: .93rem; line-height: 1.65; color: var(--navy);
  overflow-wrap: break-word;
}
.td-asr .td-line { color: var(--body); }
.td-spk { font-weight: 700; color: var(--teal-dark); }

.err {
  background: #FDE7E7;
  color: #A32020;
  border-bottom: 2px solid #E88;
  padding: .05em .22em;
  border-radius: 3px;
}

.td-note {
  font-size: .89rem; color: var(--muted);
  max-width: 78ch; margin: 0 auto 3.5rem; text-align: center;
}

/* ---------- Human vs AI compare ---------- */
.compare {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem;
  margin-bottom: 4rem;
}
.compare-col {
  border-radius: var(--radius-lg);
  padding: 2.2rem 2rem;
  border: 1px solid var(--line);
}
.compare-human {
  background: #fff;
  border-color: var(--teal);
  box-shadow: var(--shadow);
}
.compare-human h3 { color: var(--navy); }
.compare-ai { background: var(--bg-alt); }
.compare-ai h3 { color: var(--muted); }
.compare h3 {
  font-size: 1.12rem; padding-bottom: .9rem; margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--line);
}
.compare ul { list-style: none; margin: 0; padding: 0; }
.compare li {
  position: relative; padding-left: 1.9rem; margin-bottom: 1rem;
  font-size: .97rem; line-height: 1.6;
}
.compare li:last-child { margin-bottom: 0; }
.compare-human li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 1.05rem; height: .55rem;
  border-left: 2.5px solid var(--teal); border-bottom: 2.5px solid var(--teal);
  transform: rotate(-45deg);
}
.compare-ai { color: var(--muted); }
.compare-ai li::before {
  content: ""; position: absolute; left: .15rem; top: .62em;
  width: .85rem; height: 2.5px; background: #B9C3D0; border-radius: 2px;
}

/* ---------- Accuracy gauge ----------
   Every bar is the same unit (share of words correct) on the same scale, so the
   gap is readable at a glance rather than requiring the visitor to notice that
   one figure was an error rate pointing the opposite way. */
.gauge {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.8rem, 4vw, 3rem);
  margin-bottom: 3.5rem;
}
.gauge-title {
  font-size: 1.3rem; font-weight: 600; color: var(--navy);
  margin: 0 0 .4rem; letter-spacing: -.015em;
}
.gauge-sub { font-size: .95rem; color: var(--muted); margin: 0 0 2.4rem; max-width: 60ch; }

.bars { display: flex; flex-direction: column; gap: 1.7rem; }
.bar-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; margin-bottom: .55rem;
}
.bar-name { font-size: .97rem; font-weight: 500; color: var(--navy); }
.bar-name em { font-style: italic; color: var(--muted); }
.bar-val {
  font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em;
  color: var(--navy); flex: none;
}
.bar-track {
  height: 20px; border-radius: 999px;
  background: var(--navy-100); overflow: hidden;
}
.bar-fill { display: block; height: 100%; border-radius: 999px; }
.bar-note { font-size: .88rem; color: var(--muted); margin: .5rem 0 0; }

.is-good .bar-fill { background: var(--teal); }
.is-good .bar-val { color: var(--teal-dark); }
.is-mid .bar-fill { background: #E4A93C; }
.is-mid .bar-val { color: #B07A16; }
.is-poor .bar-fill { background: #E07B39; }
.is-poor .bar-val { color: #B4571B; }
.is-bad .bar-fill { background: #D64545; }
.is-bad .bar-val { color: #C22B2B; }
.is-bad .bar-name strong { color: #C22B2B; }
.is-bad .bar-note { color: #A32020; font-weight: 500; }

/* Each AI bar carries its own catch, right where the number is read. */
.bar-why {
  margin: .7rem 0 0; padding: .85rem 1rem;
  font-size: .89rem; line-height: 1.6; color: #6B2B2B;
  background: #FDF3F3; border-left: 3px solid #D64545;
  border-radius: 0 8px 8px 0;
}
.bar-why a { color: #A32020; text-decoration: underline; text-underline-offset: 2px; font-weight: 500; }
.why-tag {
  display: block; font-size: .7rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: #C22B2B; margin-bottom: .3rem;
}

/* ---------- Dialect breakdown ---------- */
.dialect {
  margin-top: 3rem; padding-top: 2.8rem;
  border-top: 2px solid var(--line);
}
.dialect-eyebrow {
  font-size: .74rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: #C22B2B; margin: 0 0 .7rem;
}
.dialect-title {
  font-size: clamp(1.35rem, 2.6vw, 1.8rem);
  margin-bottom: .8rem;
}
.dialect-lede { font-size: 1rem; max-width: 70ch; margin-bottom: 2.2rem; }

.dialect-table {
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
}
.dt-head, .dt-row {
  display: grid; grid-template-columns: 1.1fr 1.25fr 1.25fr;
}
.dt-head {
  background: var(--navy); color: #fff;
}
.dt-head span {
  padding: .9rem 1.1rem;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.dt-h { border-left: 1px solid rgba(255,255,255,.15); color: var(--teal); }
.dt-h-ai { color: #FF9E9E; }

.dt-row { border-top: 1px solid var(--line); }
.dt-row:nth-child(even) { background: var(--bg-alt); }
.dt-row span { padding: 1.05rem 1.1rem; font-size: .92rem; line-height: 1.6; }
.dt-when { font-weight: 600; color: var(--navy); }
.dt-human { border-left: 1px solid var(--line); color: var(--body); }
.dt-ai {
  border-left: 1px solid var(--line);
  color: #7C3A3A; background: rgba(214,69,69,.05);
}

.dialect-close {
  margin: 2rem 0 0; padding: 1.5rem 1.7rem;
  background: var(--teal-50); border-left: 4px solid var(--teal);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 1rem; color: var(--navy);
}

.gauge-sources {
  font-size: .8rem; line-height: 1.6; color: var(--muted);
  margin: 1.8rem 0 0; padding-top: 1.4rem; border-top: 1px solid var(--line);
}
.gauge-sources a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.gauge-sources a:hover { color: var(--teal-dark); }

/* ---------- Pull quote ---------- */
.pull {
  margin: 0; padding: 2.2rem 2.6rem;
  border-left: 4px solid var(--teal);
  background: var(--teal-50);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.55; color: var(--navy);
}
.pull cite {
  display: block; margin-top: 1rem;
  font-family: 'Poppins', sans-serif; font-style: normal;
  font-size: .84rem; color: var(--body);
}

/* ---------- Cards ---------- */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.8rem; }
.card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card-media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--navy-100); }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: 1.9rem 1.8rem 2rem; }
.card-body p { font-size: .97rem; margin-bottom: 0; }
.card-body h3 { margin-bottom: .6rem; }

.tags { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.2rem 0 0; padding: 0; }
.tags li {
  font-size: .8rem; font-weight: 500; color: var(--navy);
  background: var(--teal-50); border: 1px solid #CDEAEE;
  padding: .3rem .75rem; border-radius: 999px;
}

/* ---------- Feature grid ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.7rem; }
.feature {
  padding: 1.9rem 1.7rem;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: #fff;
  border-top: 3px solid var(--teal);
}
.feature p { font-size: .95rem; margin-bottom: 0; }

/* ---------- Steps ---------- */
.steps {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.7rem;
  counter-reset: step;
}
.steps li { position: relative; padding-top: .5rem; }
.step-num {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--navy); color: #fff;
  font-weight: 700; font-size: 1.1rem;
  margin-bottom: 1.1rem;
}
.steps h3 { font-size: 1.05rem; margin-bottom: .45rem; }
.steps p { font-size: .93rem; margin-bottom: 0; }

/* ---------- About ---------- */
.about-grid {
  display: grid; grid-template-columns: .9fr 1.1fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.about-media {
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.about-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.creds {
  list-style: none; padding: 0; margin: 1.8rem 0 0;
  display: flex; flex-wrap: wrap; gap: .6rem;
}
.creds li {
  font-size: .85rem; font-weight: 500; color: var(--navy);
  border: 1px solid var(--line); background: var(--bg-alt);
  padding: .45rem .95rem; border-radius: 999px;
}

/* ==========================================================================
   Contact form
   ========================================================================== */
.contact-inner { max-width: 860px; }
.contact-form {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem 1.4rem;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-lg);
  padding: clamp(1.8rem, 4vw, 2.8rem);
}
.field { display: flex; flex-direction: column; min-width: 0; }
.field-full { grid-column: 1 / -1; }
.field label {
  font-size: .86rem; font-weight: 500; color: rgba(255,255,255,.88);
  margin-bottom: .45rem;
}
.field .opt { color: rgba(255,255,255,.5); font-weight: 400; }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: .97rem;
  width: 100%; min-width: 0;
  color: #fff;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 10px;
  padding: .75rem .9rem;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.field textarea { resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,.42); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--teal);
  background: rgba(255,255,255,.1);
}
.field select option { color: var(--ink); }
/* Only flag a field after the visitor has actually interacted with it —
   :user-invalid stays quiet on untouched empty fields, unlike :invalid. */
.field input:user-invalid { border-color: #E88; }

/* Honeypot: present in the DOM for bots, invisible and unreachable for people.
   Positioned rather than display:none so naive bots still fill it in. */
.hp {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

.form-note {
  margin: .9rem 0 0; font-size: .9rem; color: var(--teal);
  min-height: 1.3em;
}
.form-note.error { color: #FFB4B4; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--navy); color: rgba(255,255,255,.68); }
.footer-inner {
  display: grid; grid-template-columns: 2fr 1fr 1fr;
  gap: 2.5rem; padding: 4rem 0 3rem;
}
.footer-logo {
  width: 230px; border-radius: 10px; margin-bottom: 1.2rem;
}
.footer-brand p { font-size: .93rem; max-width: 40ch; margin: 0; }
.footer-col h4 {
  color: #fff; font-size: .82rem; letter-spacing: .13em;
  text-transform: uppercase; margin-bottom: 1rem;
}
.footer-col h4.mt { margin-top: 1.8rem; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: .6rem; }
.footer-col a { color: rgba(255,255,255,.68); font-size: .93rem; }
.footer-col a:hover { color: var(--teal); text-decoration: none; }

.footer-legal {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 1.5rem 0 calc(1.5rem + env(safe-area-inset-bottom));
  font-size: .84rem;
}
.footer-legal p { margin: 0; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 960px) {
  .compare, .grid-3, .cards, .transcript-demo { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .about-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  /* Bars: on a narrow screen a long label wraps and leaves the percentage
     stranded in the top corner, so the two read as unrelated. Put the number
     first and let the label run full width beneath it. */
  .bars { gap: 2.2rem; }
  .bar-head {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: .1rem;
    margin-bottom: .7rem;
  }
  .bar-val { font-size: 1.85rem; line-height: 1.1; }
  .bar-name { font-size: 1rem; line-height: 1.4; }
  .bar-track { height: 22px; }
  .bar-note { font-size: .92rem; }
  .bar-why { font-size: .92rem; padding: .9rem 1rem; }

  /* Stack the dialect table into labelled cards — a 3-column grid is unreadable
     on a phone, and this section is the argument, so it has to survive. */
  .dt-head { display: none; }
  .dt-row {
    grid-template-columns: 1fr;
    padding: .4rem 0 1rem;
  }
  .dt-row:first-of-type { border-top: 0; }
  .dt-when {
    font-size: 1rem; padding-bottom: .5rem;
  }
  .dt-human, .dt-ai {
    border-left: 0; margin: 0 1.1rem .5rem; padding: .8rem 1rem;
    border-radius: 8px;
  }
  .dt-human { background: var(--teal-50); }
  .dt-ai { background: #FDF3F3; }
  .dt-human::before, .dt-ai::before {
    display: block; font-size: .68rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; margin-bottom: .3rem;
  }
  .dt-human::before { content: "Certified human"; color: var(--teal-dark); }
  .dt-ai::before { content: "AI"; color: #C22B2B; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .nav-toggle { display: block; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    padding: .5rem 1.25rem 1.25rem;
    display: none;
  }
  .nav.open { display: flex; }
  .nav a { padding: .85rem 0; border-bottom: 1px solid var(--line); }
  .nav a.btn {
    border-bottom: 0; margin-top: .9rem; text-align: center;
  }
  .trust-grid { grid-template-columns: repeat(2, 1fr); gap: 1.6rem 1rem; }
  .contact-form { grid-template-columns: 1fr; }
  .hero-actions .btn { flex: 1 1 auto; text-align: center; }
  .pull { padding: 1.6rem 1.5rem; }
}

@media (max-width: 460px) {
  .steps { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
}