/* EV Delay – about.html, on top of pages.css. Matches the v2 app surfaces (style.css): page one step below the
   cards, big confident headline, cards with hairline + soft shadow. No external requests. */
:root { --page: #f4f4f1; --surface-2: #ecebe6; --sh-1: 0 1px 1px rgba(20, 20, 15, .03), 0 2px 8px -2px rgba(20, 20, 15, .06); --hl: inset 0 0 0 0 transparent;
  --ease: cubic-bezier(.2, .8, .2, 1); --ease-enter: cubic-bezier(.22, 1, .36, 1); }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) { --page: #0b0b0a; --surface-2: #262624; --sh-1: 0 1px 2px rgba(0, 0, 0, .5); --hl: inset 0 1px 0 rgba(255, 255, 255, .045); } }
:root[data-theme="dark"] { --page: #0b0b0a; --surface-2: #262624; --sh-1: 0 1px 2px rgba(0, 0, 0, .5); --hl: inset 0 1px 0 rgba(255, 255, 255, .045); }
@media (min-width: 1100px) { :root { --wrap: 1200px; --pad: 32px; } }

.about .site { border-bottom: 1px solid var(--grid); }
.about .site-bar { height: 60px; }
.about .brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; letter-spacing: -0.025em; }
.about .brand > span { color: var(--ink); font-weight: 700; }
.about .brand #brand-dom { color: var(--ink-3); font-weight: 500; }
.about .brand-mark { width: 26px; height: 26px; color: var(--ink); flex: none; }
.about .site-tools { gap: 12px; }
.to-data { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 999px; font-size: var(--fs-s); font-weight: 560; text-decoration: none; color: var(--ink-2); transition: background-color .12s var(--ease), color .12s var(--ease); }
.to-data:hover { background: var(--wash); color: var(--ink); }
@media (max-width: 719px), (pointer: coarse) { .to-data, .about .seg a { min-height: 44px; } }

.about main { padding-bottom: 72px; }
.ab-hero { padding: 48px 0 8px; max-width: 900px; }
.ab-eyebrow { font-size: 12px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 14px; }
.ab-hero h1 { font-size: clamp(36px, 8.4vw, 64px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.02; text-wrap: balance; }
.ab-lead { font-size: clamp(17px, 2.2vw, 20px); line-height: 1.5; color: var(--ink-2); margin-top: 20px; max-width: 700px; text-wrap: pretty; }
@media (min-width: 900px) { .ab-hero { padding-top: 80px; } }

.ab-sec { padding-top: 56px; }
@media (min-width: 720px) { .ab-sec { padding-top: 80px; } }
.ab-sec > h2 { font-size: clamp(23px, 3.4vw, 30px); font-weight: 700; letter-spacing: -0.028em; line-height: 1.15; margin-bottom: 20px; }
.ab-sec p { line-height: 1.65; }
.ab-cols { display: grid; gap: 16px; max-width: 1100px; color: var(--ink-2); }
@media (min-width: 900px) { .ab-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }
.ab-cols p:first-child { color: var(--ink); }

.ab-list { display: grid; gap: 0; max-width: 820px; }
.ab-list li { padding: 14px 0 14px 28px; border-top: 1px solid var(--grid); position: relative; color: var(--ink-2); }
.ab-list li:first-child { border-top: 0; }
.ab-list li::before { content: ""; position: absolute; left: 4px; top: 22px; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.ab-list b { color: var(--ink); font-weight: 650; }

.ab-cards { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); counter-reset: p; }
@media (min-width: 720px) { .ab-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .ab-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ab-cards li { counter-increment: p; background: var(--surface); border: 1px solid var(--ring); border-radius: 18px; padding: 22px 22px 24px; box-shadow: var(--sh-1), var(--hl); }
.ab-cards li::before { content: counter(p, decimal-leading-zero); display: block; font-size: 13px; font-weight: 650; color: var(--ink-3); font-variant-numeric: tabular-nums; margin-bottom: 18px; }
.ab-cards h3, .ab-steps h3, .ab-road h3 { font-size: 17px; font-weight: 650; letter-spacing: -0.012em; line-height: 1.3; margin: 0 0 6px; }
.ab-cards p, .ab-steps p, .ab-road p { color: var(--ink-2); font-size: var(--fs-m); line-height: 1.6; margin: 0; }

.ab-steps { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); }
.ab-steps li { position: relative; padding: 0 0 28px 52px; }
.ab-steps li::after { content: ""; position: absolute; left: 17px; top: 40px; bottom: 4px; width: 2px; background: var(--grid); border-radius: 1px; }
.ab-steps li:last-child::after { display: none; }
.ab-step-n { position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--surface); font-weight: 700; font-size: 15px; }
.ab-steps h3 { padding-top: 6px; }
@media (min-width: 900px) {
  .ab-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .ab-steps li { padding: 56px 0 0; }
  .ab-steps li::after { left: 48px; right: -24px; top: 17px; bottom: auto; width: auto; height: 2px; }
}
.ab-note { margin-top: 20px; font-size: var(--fs-s); color: var(--ink-3); max-width: 760px; }

.ab-road { display: grid; gap: 0; background: var(--surface); border: 1px solid var(--ring); border-radius: 18px; box-shadow: var(--sh-1), var(--hl); padding: 4px 22px; max-width: 980px; }
.ab-road li { display: grid; gap: 10px; padding: 20px 0; border-top: 1px solid var(--grid); }
.ab-road li:first-child { border-top: 0; }
@media (min-width: 720px) { .ab-road li { grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: start; } }
.ab-status { justify-self: start; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--surface-2); color: var(--ink-2); }
.ab-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.ab-status.soon::before { box-shadow: inset 0 0 0 1.5px var(--warning); }

.ab-who p { max-width: 720px; color: var(--ink-2); }
.ab-cta { margin-top: 24px; }
.ab-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 12px; background: var(--ink); color: var(--surface); text-decoration: none; font-weight: 600; font-size: 15px; transition: transform .12s var(--ease), background-color .12s var(--ease); }
.ab-btn::after { content: "→"; transition: transform .15s var(--ease); }
.ab-btn:hover { background: color-mix(in srgb, var(--ink) 86%, var(--surface)); }
@media (hover: hover) and (pointer: fine) { .ab-btn:hover { transform: translateY(-1px); } .ab-btn:hover::after { transform: translateX(3px); } }
.ab-btn:active { transform: translateY(1px) scale(.985); }

/* one entrance on load: the headline, then the lead */
@keyframes ab-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.ab-hero .ab-eyebrow { animation: ab-rise .52s var(--ease-enter) both; }
.ab-hero h1 { animation: ab-rise .7s var(--ease-enter) .05s both; }
.ab-hero .ab-lead { animation: ab-rise .52s var(--ease-enter) .2s both; }
@media (prefers-reduced-motion: reduce) { .ab-hero *, .ab-btn, .ab-btn::after, .to-data { animation: none !important; transition: none !important; } }