/* Deliberately neutral surfaces. Keep the actual wordmark red in both themes. */
:root { --bg:#fafafa; --surface:#fff; --ink:#202020; --muted:#646464; --line:#e4e4e4; --soft:#f1f1f1; --red:#cc3523; --focus:#b92e1f; }
.brand .red { color:#cc3523; }
.button { background:#cc3523; }
.secondary-button { background:var(--surface); }
.hero { grid-template-columns:1fr 1.05fr; gap:32px; padding-top:50px; padding-bottom:65px; min-height:690px; }
.hero h1 { font-size:clamp(42px,4.9vw,68px); }
.hero-copy { position:relative; z-index:1; }
.hero-product { position:relative; min-width:0; margin:0; }
.hero-phones { min-height:560px; display:flex; align-items:center; justify-content:center; gap:16px; padding:18px 5px; }
.hero-phones img { width:calc(50% - 12px); height:auto; border:5px solid #333; border-radius:30px; box-shadow:0 22px 48px #0003; }
.hero-phones img:first-child { transform:translateY(-15px) rotate(-3deg); }
.hero-phones img:last-child { transform:translateY(24px) rotate(3deg); }
.hero-product figcaption { text-align:center; font-size:11px; color:var(--muted); margin-top:18px; }
.hero-preview-link { display:flex; gap:18px; flex-wrap:wrap; margin-top:20px; font-size:13px; }
.hero-preview-link a { min-height:44px; display:inline-flex; align-items:center; }
.showcase { border-top:1px solid var(--line); }
.showcase>.section-heading { max-width:760px; }
.showcase-row { display:grid; grid-template-columns:.9fr 1.2fr; gap:54px; align-items:center; padding:48px 0; border-top:1px solid var(--line); }
.showcase-row:nth-of-type(even) .showcase-copy { order:2; }
.showcase-row:nth-of-type(even) .showcase-pair { order:1; }
.showcase-copy h3 { font-size:clamp(30px,3vw,42px); margin-bottom:20px; }
.showcase-copy>p:not(.eyebrow) { color:var(--muted); font-size:17px; }
.showcase-list { list-style:none; padding:0; margin:26px 0 0; display:grid; gap:12px; font-size:14px; }
.showcase-list li { padding-left:17px; border-left:2px solid var(--red); }
.showcase-pair { display:grid; grid-template-columns:1fr 1fr; gap:22px; padding:30px; border-radius:28px; background:var(--soft); min-width:0; }
.showcase-pair figure { min-width:0; }
.showcase-pair a { display:block; border-radius:24px; transition:transform .2s ease; }
.showcase-pair a:hover { transform:translateY(-5px); }
.showcase-pair img { display:block; width:100%; height:auto; border:4px solid #353535; border-radius:24px; box-shadow:0 12px 28px #0002; }
.showcase-pair figcaption { margin-top:15px; display:grid; gap:4px; font-size:12px; line-height:1.5; }
.showcase-pair figcaption strong { font-size:13px; }
.showcase-pair figcaption span { color:var(--muted); }
.demo-note { color:var(--muted); font-size:12px; margin:10px 0 26px; }
.map-credit { color:var(--muted); font-size:11px; margin-top:18px; }
.comparison-wrap { border:1px solid var(--line); border-radius:24px; overflow:hidden; background:var(--surface); }
.comparison { border-collapse:collapse; width:100%; table-layout:fixed; }
.comparison caption { text-align:left; padding:22px 26px; font-size:16px; font-weight:650; border-bottom:1px solid var(--line); }
.comparison col:first-child { width:60%; }
.comparison col:not(:first-child) { width:20%; }
.comparison th,.comparison td { padding:17px 24px; border-bottom:1px solid var(--line); }
.comparison thead th { background:var(--soft); font-size:15px; text-align:center; }
.comparison th:first-child { text-align:left; }
.comparison tbody th { font-size:15px; font-weight:500; line-height:1.5; overflow-wrap:anywhere; }
.comparison td { text-align:center; vertical-align:middle; }
.comparison thead th:last-child { color:var(--red); }
.comparison td:last-child { background:#cc352306; }
.comparison tbody tr:last-child>* { border-bottom:0; }
.comparison .paid-row:first-of-type>* { border-top:2px solid var(--line); }
.included,.excluded { display:inline-flex; align-items:center; justify-content:center; width:27px; height:27px; font-size:22px; line-height:1; }
.included { color:var(--red); font-weight:650; }
.excluded { color:var(--muted); font-weight:400; }
.comparison-note { font-size:13px; color:var(--muted); margin-top:18px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.plan-footnotes { margin-top:16px; }
@media(prefers-color-scheme:dark) {
  :root { --bg:#161616; --surface:#202020; --ink:#f5f5f5; --muted:#b4b4b4; --line:#353535; --soft:#252525; --red:#ff6753; --focus:#ff6753; }
  .brand .red { color:#cc3523; }
  .languages nav a:hover,.languages nav [aria-current],.secondary-button:hover { background:#303030; }
  .hero-phones img,.showcase-pair img { border-color:#424242; }
  .comparison td:last-child { background:#cc352312; }
}
@media(max-width:1000px) {
  .hero { gap:24px; min-height:0; }
  .hero-phones { min-height:0; gap:10px; padding:20px 0; }
  .hero-phones img { border-width:4px; border-radius:24px; }
  .showcase-row { gap:28px; }
  .showcase-pair { padding:22px; gap:16px; }
}
@media(max-width:760px) {
  .hero { grid-template-columns:1fr; gap:30px; }
  .hero h1 { font-size:clamp(43px,9vw,66px); }
  .hero-copy { max-width:560px; }
  .hero-phones { max-width:470px; margin:0 auto; gap:14px; }
  .hero-phones img { width:calc(50% - 14px); }
  .showcase-row { grid-template-columns:1fr; gap:28px; padding:34px 0; }
  .showcase-row:nth-of-type(even) .showcase-copy,.showcase-row:nth-of-type(even) .showcase-pair { order:initial; }
  .showcase-copy { max-width:550px; }
  .showcase-pair { max-width:520px; width:100%; margin:auto; }
  .comparison th,.comparison td { padding:14px 13px; }
  .comparison tbody th { font-size:14px; }
  .comparison caption { padding:20px 16px; }
}
@media(max-width:600px) {
  .showcase-pair { grid-template-columns:repeat(2,minmax(225px,1fr)); overflow-x:auto; scroll-snap-type:x proximity; scroll-padding:22px; scrollbar-width:thin; scrollbar-color:var(--red) var(--soft); }
  .showcase-pair figure { scroll-snap-align:start; }
}
@media(max-width:400px) {
  .hero-phones { gap:10px; }
  .hero-phones img { width:calc(50% - 10px); border-radius:19px; border-width:3px; }
  .showcase-pair { padding:17px 13px; gap:13px; }
  .showcase-pair img { border-width:3px; border-radius:17px; }
  .comparison col:first-child { width:56%; }
  .comparison col:not(:first-child) { width:22%; }
  .comparison thead th { font-size:12px; }
  .comparison th,.comparison td { padding:13px 9px; }
}
@media(prefers-reduced-motion:reduce) {
  .hero-phones img:first-child,.hero-phones img:last-child,.showcase-pair a:hover { transform:none; }
}