/* "What works today with Verified Call" (2026-10-25), right after the hero film. Frame and head
   follow the section system (layout.css): padding, centred two-tone head. The hero's bottom
   hairline is the top boundary, so this section draws the line below it (with its marks), where
   the journeys section starts. Tokens only, hairlines, no shadows. */
.today {
  position: relative;
  padding: var(--sec-pad-y) calc(var(--rail-w) + var(--sec-inset));
  border-bottom: var(--l-hair) solid var(--l-hair-color);
}
.today::before, .today::after {
  content: ''; position: absolute; bottom: -6px; width: 11px; height: 11px; pointer-events: none; z-index: 2;
  background:
    linear-gradient(var(--l-mark), var(--l-mark)) center / 1px 100% no-repeat,
    linear-gradient(var(--l-mark), var(--l-mark)) center / 100% 1px no-repeat;
}
.today::before { left: calc(var(--rail-w) - 6px); }
.today::after { left: calc(100% - var(--rail-w) - 5px); }

/* Five tiles, left to right. Rows that don't fill are centred: 5 across on desktops, 3 + 2 on
   tablets, 2 + 2 + 1 on large phones, one column on small phones. */
/* The tiles slide up into place as the section scrolls in (reveal.js). An anchor jump lands the
   top hairline under the header's own line, as .promise does. */
.today { --rv-rise: 48px; scroll-margin-top: -17px; }
.today .td-grid {
  --td-gap: var(--sp-16);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--td-gap);
  margin: var(--gap-head) 0 0;
  padding: 0;
  list-style: none;
}
.td-item {
  flex: 0 0 calc((100% - 4 * var(--td-gap)) / 5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  min-width: 0;
  padding: var(--sp-24) var(--sp-24) var(--sp-32);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
}
.td-ico { display: block; width: 48px; height: 48px; margin-bottom: var(--sp-16); }
.td-svg { display: block; width: 100%; height: 100%; }
.td-ink { fill: var(--ink); }
.td-grey { fill: var(--muted-2); }
.td-title { margin: 0; font-family: var(--font-body); font-size: var(--w-title); font-weight: var(--fw-title); line-height: 1.3; letter-spacing: -.01em; color: var(--ink); text-wrap: balance; min-height: calc(2em * 1.3); }   /* two lines for every title, so the notes start level */
.td-note { margin: 0; font-size: var(--w-body); line-height: 1.55; color: var(--muted); text-wrap: pretty; }

@media (max-width: 1099px) {
  .td-item { flex-basis: calc((100% - 2 * var(--td-gap)) / 3); }
}
@media (max-width: 759px) {
  .today { padding: var(--sp-96) calc(var(--rail-w) + var(--sp-8)) var(--sp-64); }
  .td-item { flex-basis: calc((100% - var(--td-gap)) / 2); padding: var(--sp-16) var(--sp-16) var(--sp-24); }
  .td-ico { width: 40px; height: 40px; margin-bottom: var(--sp-8); }
}
@media (max-width: 479px) {
  .td-grid { --td-gap: var(--sp-12); }
  .td-item { flex-basis: 100%; }
  .td-title { min-height: 0; }   /* one column: no row to line up with */
}

/* Big CTA under the tiles (2026-10-25): the DS web CTA size, primary and white glass secondary. */
.td-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-24); margin-top: var(--gap-head); }
.td-cta .button.cta-glass { min-height: 56px; padding: 0 32px; font-size: 16px; }
.td-cta .cta-watch-ico { width: 20px; height: 20px; margin-inline: -3px; }
@media (max-width: 479px) {
  .td-cta { flex-direction: column; align-items: stretch; gap: var(--sp-16); max-width: 360px; margin-inline: auto; }
}

/* Icon loops (2026-10-25): one small part of each icon moves, in whole steps like the rest of
   the pixel language. Sparkle twinkles, antenna blinks, play and speech arc pulse, the two
   faces trade tones. Off under reduced motion and when the page's animations are paused. */
.td-acc { animation: td-blink 2.6s step-end infinite; }
.td-item:nth-child(2) .td-acc { animation-delay: .5s; }
.td-item:nth-child(3) .td-acc { animation-delay: 1s; }
.td-item:nth-child(4) .td-acc { animation-delay: 1.5s; }
.td-item:nth-child(5) .td-acc { animation-delay: 2s; }
@keyframes td-blink { 0% { opacity: 1; } 55% { opacity: .15; } 70% { opacity: 1; } 80% { opacity: .15; } 90% { opacity: 1; } }
.td-svg--face-swap .td-ink { animation: td-swap-ink 3.2s step-end infinite .5s; }
.td-svg--face-swap .td-grey { animation: td-swap-grey 3.2s step-end infinite .5s; }
@keyframes td-swap-ink { 0% { fill: var(--ink); } 50% { fill: var(--muted-2); } }
@keyframes td-swap-grey { 0% { fill: var(--muted-2); } 50% { fill: var(--ink); } }
html[data-motion='paused'] .td-acc, html[data-motion='paused'] .td-svg--face-swap path { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .td-acc, .td-svg--face-swap path { animation: none; }
}

/* "Why Verified Call" (2026-10-27): the definition line, four proof tiles (the watch-for tile
   look, no icons) and a plain comparison table of approaches. */
.why { border-bottom: var(--l-hair) solid var(--l-hair-color); }
.why-def { max-width: 64ch; margin: var(--sp-24) auto 0; font-size: var(--w-lead); line-height: 1.6; text-align: center; color: var(--ink-2); text-wrap: pretty; }
.why-def strong { color: var(--ink); font-weight: 600; }
.why .td-item { flex-basis: calc((100% - 3 * var(--td-gap)) / 4); }
.why .td-note a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
/* Comparison table (2026-10-27 redesign): a card with the Verified Call column softly tinted,
   pixel ticks (signal green) and crosses (muted) instead of words, short notes where they add
   meaning. Screen readers hear Yes / No in every cell. Phones swipe sideways with the row
   names pinned. */
.why-table-wrap { margin-top: 0; overflow-x: auto; border: 1px solid var(--line); border-radius: 20px; background: var(--white); -webkit-overflow-scrolling: touch; }
.why-table { width: 100%; min-width: 680px; border-collapse: separate; border-spacing: 0; font-size: var(--w-body); }
.wt-title { margin: var(--sp-48) 0 var(--sp-16); font-size: var(--w-micro); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-align: center; color: var(--muted); }
.why-table th, .why-table td { padding: var(--sp-16) var(--sp-24); border-top: 1px solid var(--line); text-align: center; vertical-align: middle; }
.why-table thead th { border-top: 0; padding-top: var(--sp-16); padding-bottom: var(--sp-16); font-size: var(--w-meta); font-weight: 600; line-height: 1.35; color: var(--muted); }
.why-table tbody th { width: 34%; text-align: left; font-weight: 500; line-height: 1.4; color: var(--ink); }
.why-table th:first-child { position: sticky; left: 0; z-index: 1; background: var(--white); }
.why-table .wt-us { background: var(--tile-2); }
.why-table thead .wt-us { border-radius: 14px 14px 0 0; font-size: var(--w-body); color: var(--ink); white-space: nowrap; }
.why-table tbody tr:last-child .wt-us { border-radius: 0 0 14px 14px; }
.wt-badge { display: inline-block; width: 20px; height: 20px; margin: -3px 8px 0 0; vertical-align: middle; }
.wt-mark { --px-size: 18px; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; vertical-align: middle; }
.wt-yes { color: var(--signal); background: color-mix(in srgb, var(--signal) 13%, var(--white)); }
.wt-no { color: var(--muted-2); background: var(--tile); }
.wt-note { display: block; margin-top: 4px; font-size: var(--w-meta); line-height: 1.35; color: var(--muted); }
.wt-us .wt-note { color: var(--ink-2); }
.wt-text { font-size: var(--w-meta); color: var(--muted); }
/* Phones: no sideways swipe. Each feature becomes a small card with three labelled chips. */
@media (max-width: 639px) {
  .why-table-wrap { overflow: visible; border: 0; border-radius: 0; background: none; }
  .why-table, .why-table tbody { display: block; min-width: 0; }
  .why-table thead { display: none; }
  .why-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-8); margin-bottom: var(--sp-12); padding: var(--sp-16); border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
  .why-table tbody th { grid-column: 1 / -1; width: auto; padding: 0 0 var(--sp-4); border: 0; position: static; background: none; font-weight: 600; }
  .why-table td { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--sp-12) var(--sp-4); border: 0; border-radius: 12px; background: var(--tile-2); }
  .why-table td.wt-us { background: color-mix(in srgb, var(--signal) 8%, var(--white)); }
  .why-table tbody tr:last-child .wt-us { border-radius: 12px; }
  .why-table td::before { content: attr(data-col); font-size: var(--w-micro); font-weight: 600; letter-spacing: .02em; line-height: 1.25; text-align: center; color: var(--muted); }
  .why-table td.wt-us::before { color: var(--ink); }
  .wt-note { margin-top: 0; font-size: 12px; text-align: center; }
}
@media (max-width: 1099px) { .why .td-item { flex-basis: calc((100% - var(--td-gap)) / 2); } }
@media (max-width: 479px) { .why .td-item { flex-basis: 100%; } .why-table th, .why-table td { padding: var(--sp-12) var(--sp-16); } }
.why-ico { --px-size: 40px; display: block; width: 40px; height: 40px; margin-bottom: var(--sp-16); color: var(--ink); }
.why-more { margin: var(--sp-24) 0 0; text-align: center; font-size: var(--w-body); }
.why-more a { color: var(--ink); font-weight: 600; text-underline-offset: 4px; text-decoration-color: var(--line-strong); }