/* TDom home page. Every section fits one screen; phone shells size from the screen height. */
main > section { position: relative; padding: clamp(44px, 7svh, 96px) 0; }
.head { text-align: center; max-width: 760px; margin: 0 auto; padding: 0 24px; }
.kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; color: var(--mint); font-weight: 600; font-size: 14px; letter-spacing: -0.005em; }
.kicker img { width: 22px; height: 22px; border-radius: 22.5%; }
.head h2 { font-size: clamp(36px, min(5.4vw, 7svh), 64px); line-height: 1.03; font-weight: 700; }
.head p { color: var(--ink-2); font-size: clamp(17px, 1.7vw, 20px); max-width: 640px; margin: 18px auto 0; }
.head p b { color: var(--ink); font-weight: 600; }
.head .kicker { display: block; color: var(--mint); font-size: 14px; margin: 0 0 14px; }

/* Phone shell: a plain dark bezel around a real, uncropped screenshot. */
.phone {
  --r: calc(var(--ph) * .082);
  flex: none; height: var(--ph); aspect-ratio: 1320 / 2868; padding: calc(var(--ph) * .011);
  border-radius: var(--r); background: #1c1c1e; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), var(--shadow);
}
.phone img { width: 100%; height: 100%; object-fit: contain; border-radius: calc(var(--r) * .88); background: #000; }
.light .phone { background: #111; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 1px 2px rgba(10, 10, 10, .08), 0 18px 40px -26px rgba(10, 10, 10, .45); }
figure { margin: 0; }
figcaption { margin-top: 14px; text-align: center; font-size: 14px; color: var(--ink-3); }
figcaption b { display: block; color: var(--ink); font-weight: 600; font-size: 15px; }

/* Hero */
.hero { min-height: 100svh; padding: 76px 0 24px !important; display: flex; flex-direction: column; align-items: center; text-align: center; overflow: hidden; }
.hero .copy { padding: 0 24px; }
.hero h1 { font-size: clamp(44px, min(7.6vw, 8.2svh), 92px); line-height: .98; font-weight: 700; letter-spacing: -0.05em; }
.hero .lede { color: var(--ink-2); font-size: clamp(16px, min(1.75vw, 2.4svh), 21px); max-width: 660px; margin: clamp(12px, 2svh, 20px) auto 0; }
.hero .lede b { color: var(--ink); font-weight: 600; }
.hero .cta-row { margin-top: clamp(16px, 2.6svh, 26px); }
.hero .req { margin-top: 14px; }
.hero-phones { --ph: clamp(244px, calc(100svh - 552px), 600px); margin-top: auto; padding-top: clamp(18px, 3svh, 34px); display: flex; align-items: flex-end; justify-content: center; gap: clamp(16px, 3vw, 44px); }
.hero-phones .side { --ph: clamp(215px, calc((100svh - 552px) * .86), 520px); }

/* Layout showcase: the phone crossfades every few seconds; tabs pick a layout. */
.show { display: grid; grid-template-columns: auto minmax(0, 420px); justify-content: center; align-items: center; gap: clamp(32px, 6vw, 96px); margin-top: 48px; padding: 0 24px; }
.show .phone { --ph: clamp(240px, calc(100svh - 450px), 600px); position: relative; }
.show .phone img { position: absolute; inset: calc(var(--ph) * .011); width: calc(100% - var(--ph) * .022); height: calc(100% - var(--ph) * .022); opacity: 0; transition: opacity .6s var(--ease); }
.show .phone img.on { opacity: 1; }
.tabs { display: grid; gap: 10px; }
.tab { all: unset; box-sizing: border-box; cursor: pointer; display: block; padding: 20px 22px; border-radius: 18px; color: var(--ink-3); transition: background .3s, color .3s; }
.tab b { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: 20px; font-weight: 650; letter-spacing: -0.02em; }
.tab b .ico { color: var(--ink-3); }
.tab span { display: block; margin-top: 6px; font-size: 15.5px; line-height: 1.5; }
.tab[aria-selected="true"] { background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); }
.tab[aria-selected="true"] b, .tab[aria-selected="true"] b .ico { color: var(--ink); }
.tab[aria-selected="true"] b .ico { color: var(--mint); }
.tab:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }

/* Dynamic Island */
.pair { display: flex; justify-content: center; gap: clamp(24px, 5vw, 72px); margin-top: 44px; padding: 0 24px; }
.pair .phone { --ph: clamp(240px, calc(100svh - 535px), 580px); }

/* Light band: the mileage log. */
.light { background: var(--l-bg); color: var(--l-ink); }
.light .head p, .light .card p { color: var(--l-ink-2); }
.light .head p b { color: var(--l-ink); }
.light .kicker, .light .head .kicker { color: var(--mint-ink); }
.light figcaption { color: var(--l-ink-2); }
.light figcaption b { color: var(--l-ink); }

/* Phones beside a 2×2 set of cards. */
.split { display: flex; justify-content: center; align-items: center; gap: clamp(28px, 4vw, 56px); margin-top: 44px; padding: 0 24px; }
.split .phones { display: flex; gap: 22px; }
.split .phone { --ph: clamp(250px, calc(100svh - 475px), 540px); }
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 560px; }
.card { padding: 22px; border-radius: 18px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.card .ico { width: 24px; height: 24px; color: var(--mint); }
.card h3 { font-size: 18px; font-weight: 650; letter-spacing: -0.02em; margin: 12px 0 6px; }
.card p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.light .card { background: var(--l-card); box-shadow: var(--shadow); }
.light .card .ico { color: var(--mint-ink); }

/* Everything else: an even 4 × 2 grid of small tiles. */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: var(--max); margin: 48px auto 0; padding: 0 24px; }
.tile { padding: 22px; border-radius: 18px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.tile .ico { width: 26px; height: 26px; color: var(--mint); }
.tile h3 { font-size: 17px; font-weight: 650; letter-spacing: -0.02em; margin: 14px 0 6px; }
.tile p { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }

/* Privacy */
.promise { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: var(--max); margin: 48px auto 0; padding: 0 24px; }
.promise .card { text-align: center; }
.promise .card .ico { margin: 0 auto; width: 28px; height: 28px; }
.more-link { text-align: center; margin: 28px 0 0; }
.more-link a { color: var(--mint); text-decoration: none; font-weight: 600; font-size: 16px; }
.more-link a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* FAQ */
.faq-wrap { max-width: 760px; margin: 40px auto 0; padding: 0 24px; }

/* Closing call to action */
.final { text-align: center; padding: 120px 0 96px !important; }
.final img { width: 112px; height: 112px; margin: 0 auto 28px; border-radius: 22.5%; }
.final h2 { font-size: clamp(40px, 6vw, 72px); line-height: 1.02; font-weight: 700; }
.final .cta-row, .final .req { padding: 0 24px; }
.final .note { max-width: 620px; margin: 26px auto 0; padding: 0 24px; color: var(--ink-3); font-size: 14px; }

@media (max-width: 1100px) {
  .split .phones .phone + .phone, .split .phones figure + figure { display: none; }
}
@media (max-width: 700px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .promise { grid-template-columns: 1fr 1fr; }
  .show { grid-template-columns: 1fr; justify-items: center; gap: 28px; }
  .show .phone { --ph: clamp(240px, calc(100svh - 605px), 520px); }
  .tabs { grid-template-columns: repeat(3, 1fr); width: 100%; max-width: 680px; }
  .tab { padding: 14px 14px; text-align: center; }
  .tab b { justify-content: center; font-size: 17px; }
  .tab span { font-size: 14px; }
}
@media (max-width: 760px) {
  main > section { padding: clamp(40px, 6svh, 72px) 0; }
  .hero-phones .side { display: none; }
  .hero-phones { --ph: clamp(240px, calc(100svh - 505px), 460px); }
  .pair .phone { --ph: clamp(220px, calc(100svh - 535px), 460px); }
  .pair { gap: 14px; }
  .pair figcaption { font-size: 12.5px; }
  .pair figcaption b { font-size: 13.5px; }
  .split { flex-direction: column; gap: 18px; margin-top: 28px; padding: 0; }
  .split .phone { --ph: clamp(230px, calc(100svh - 565px), 420px); }
  /* Phones: the four cards become one swipe row under the screenshot. */
  .cards { display: flex; gap: 10px; max-width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 24px 6px; scroll-padding: 0 24px; scrollbar-width: none; }
  .cards::-webkit-scrollbar { display: none; }
  .card { flex: 0 0 72%; scroll-snap-align: start; padding: 14px 16px; border-radius: 14px; }
  .card .ico { width: 20px; height: 20px; }
  .card h3 { font-size: 15px; margin: 8px 0 3px; }
  .card p { font-size: 13px; line-height: 1.4; }
  .tiles, .promise { gap: 8px; margin-top: 30px; }
  .tile, .promise .card { padding: 12px 13px; border-radius: 14px; }
  .tile .ico { width: 20px; height: 20px; }
  .tile h3 { font-size: 14.5px; margin: 6px 0 2px; }
  .tile p, .promise .card p { font-size: 12.5px; line-height: 1.38; }
  .show .tab span { display: none; }
  .show { margin-top: 30px; }
  .faq-wrap { margin-top: 28px; }
  .faq summary { font-size: 15.5px; padding: 15px 36px 15px 0; }
  .faq details { padding: 0 18px; border-radius: 14px; }
  .faq details p { font-size: 15px; }
  .final { padding: 88px 0 72px !important; }
}

/* Short laptop screens: tighter text so each section still fits. */
@media (max-height: 780px) and (min-width: 761px) {
  .head p { font-size: 16px; margin-top: 12px; }
  .head .kicker { margin-bottom: 10px; }
  .tab { padding: 12px 18px; }
  .tab span { font-size: 14px; margin-top: 4px; }
  .card { padding: 15px 16px; }
  .card h3 { font-size: 16px; margin: 8px 0 4px; }
  .card p { font-size: 13.5px; line-height: 1.42; }
  .show, .split, .pair { margin-top: 30px; }
}