@import url('/assets/fonts/fonts.css');

:root {
  color-scheme: dark;
  --ink: #101316;
  --surface: #1c1f24;
  --raised: #24272c;
  --text: #f2f3f5;
  --muted: #a0a7b1;
  --line: #ffffff1c;
  --green: #71b89c;
  --red: #b86c65;
  --s-2: 2px; --s-4: 4px; --s-8: 8px; --s-12: 12px;
  --s-16: 16px; --s-24: 24px; --s-32: 32px; --s-40: 40px;
  --s-48: 48px; --s-64: 64px; --s-80: 80px; --s-96: 96px;
  --motion: cubic-bezier(.22, 1, .36, 1);
  font-family: Manrope, system-ui, sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; background: var(--ink); color: var(--text); font-size: 16px; line-height: 24px; }
button, select { font: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-underline-offset: 4px; }
button { cursor: pointer; }
button, select, summary { touch-action: manipulation; }
img { display: block; max-width: 100%; height: auto; }
figure, h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 500; text-wrap: balance; }
p, li { text-wrap: pretty; }
ul, ol { margin: 0; }
svg { display: block; flex-shrink: 0; }
[hidden] { display: none !important; }
::selection { background: var(--text); color: var(--ink); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }
.shell { width: calc(100% - var(--s-96)); max-width: 1184px; margin-inline: auto; }
.skip { position: fixed; z-index: 40; top: var(--s-16); left: var(--s-16); padding: 12px 16px; color: var(--ink); background: var(--text); border-radius: 8px; transform: translateY(-180%); }
.skip:focus { transform: translateY(0); }

/* Plain navigation aligned to the same edges as the content. */
.site-header { position: relative; z-index: 30; width: calc(100% - var(--s-96)); max-width: 1184px; margin-inline: auto; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s-32); min-height: 96px; }
.brand { display: inline-flex; align-items: center; gap: var(--s-12); min-height: 44px; color: var(--text); font-size: 14px; font-weight: 600; letter-spacing: .24em; text-decoration: none; }
.brand-mark { width: 18px; height: 24px; display: inline-flex; gap: 4px; }
.brand-mark::before, .brand-mark::after { content: ''; width: 7px; height: 24px; border-radius: 2px; background: currentColor; }
.nav-links, .nav-end { display: flex; align-items: center; gap: var(--s-32); }
.nav-links { margin-left: auto; }
.nav-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font-size: 14px; text-decoration: none; transition: color 300ms var(--motion); }
.nav-links a:active, .brand:active, .footer-links a:active { opacity: .6; }
.nav-links a:hover, .nav-links a[aria-current] { color: var(--text); }
.language { display: inline-flex; align-items: center; gap: var(--s-4); }
.language svg { width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.language select { width: 96px; min-height: 44px; padding: 8px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font-size: 14px; cursor: pointer; transition: background 300ms var(--motion); }
.language select:hover { background: #ffffff08; }
.language option { background: var(--surface); color: var(--text); }
.menu-toggle { display: none; width: 44px; height: 44px; padding: 8px; border: 0; border-radius: 8px; background: none; color: var(--text); }
.menu-toggle:hover { background: #ffffff08; }
.menu-toggle:active { transform: scale(.98); }
.menu-toggle span { display: block; width: 24px; height: 1px; margin: 6px auto; background: currentColor; transition: transform 500ms var(--motion); }
.menu-toggle[aria-expanded=true] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-toggle[aria-expanded=true] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.mobile-menu { position: fixed; z-index: 20; inset: 0; padding: 128px 24px 48px; background: var(--ink); }
.mobile-menu nav { display: flex; flex-direction: column; gap: var(--s-24); }
.mobile-menu a { display: flex; align-items: center; min-height: 48px; font-size: 30px; line-height: 36px; text-decoration: none; animation: menu-in 280ms var(--motion) both; }
.mobile-menu a:nth-child(2) { animation-delay: 60ms; }
.mobile-menu a:nth-child(3) { animation-delay: 120ms; }
body:has(.mobile-menu:not([hidden])) .site-header { position: sticky; top: 0; background: var(--ink); }
@keyframes menu-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--s-64); padding-top: var(--s-32); padding-bottom: var(--s-80); }
.hero-copy { padding-bottom: var(--s-40); }
.hero h1 { max-width: 560px; font-size: 96px; line-height: 1; font-weight: 500; letter-spacing: -.055em; }
.hero h1 span { display: block; }
.hero-body { max-width: 400px; margin-top: var(--s-32); color: var(--muted); font-size: 18px; line-height: 28px; }
.hero-free { margin-top: var(--s-16); font-size: 16px; line-height: 24px; }
.store-coming { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-8); margin-top: var(--s-40); }
.store-coming img { width: 156px; height: auto; }
.store-coming p { color: var(--muted); font-size: 12px; line-height: 16px; }
.device-pair { display: flex; align-items: flex-end; justify-content: flex-end; gap: var(--s-24); }
.pair-phone { width: 288px; }
.pair-watch { width: 144px; margin-bottom: var(--s-24); }

.section-title { max-width: 560px; font-size: 36px; line-height: 40px; letter-spacing: -.035em; }
.section-body { max-width: 440px; color: var(--muted); font-size: 18px; line-height: 28px; }
.how-section { padding-block: var(--s-64); }
.how-layout { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--s-64); }
.demo-stage { display: flex; align-items: center; justify-content: center; background: var(--surface); border-radius: 24px; padding: 48px 24px 24px; }
.steps { display: grid; gap: var(--s-32); padding: 0; margin-top: var(--s-32); list-style: none; }
.steps li { display: grid; grid-template-columns: 16px 1fr; gap: var(--s-16); }
.step-number { color: var(--muted); font-size: 14px; line-height: 28px; font-variant-numeric: tabular-nums; }
.steps h3 { margin-bottom: var(--s-8); font-size: 20px; line-height: 28px; letter-spacing: -.02em; }
.steps p { max-width: 400px; color: var(--muted); font-size: 16px; line-height: 24px; }
/* The website demo follows FocusSlider.swift: 112×256, 88×72 carriage,
   320ms critically damped settling, 180ms face fade and 350ms LED fade. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.demo { --u: 1px; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.demo-title { position: relative; display: grid; place-items: center; width: 100%; min-height: 32px; margin-bottom: 24px; font-size: 20px; line-height: 28px; letter-spacing: -.025em; }
.demo-title > span { grid-area: 1/1; opacity: 1; transition: opacity 180ms ease-in-out; }
.demo-title .status-on { opacity: 0; }
[data-demo-root].is-on .status-off { opacity: 0; }
[data-demo-root].is-on .status-on { opacity: 1; }
.focus-track { --u: 1px; position: relative; display: block; flex: none; width: calc(112 * var(--u)); height: calc(256 * var(--u)); padding: 0; border: 0; border-radius: calc(36 * var(--u)); background: var(--surface); color: var(--text); touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; outline-offset: 8px; }
.focus-track.is-dragging { cursor: grabbing; }
.focus-track::before, .focus-track::after { content: ''; position: absolute; inset: calc(-1 * var(--u)); border: calc(1.25 * var(--u)) solid #ef796fb3; border-radius: inherit; box-shadow: 0 0 calc(14 * var(--u)) #ef796f2e, 0 0 calc(4 * var(--u)) #ef796f6b; pointer-events: none; transition: opacity 350ms ease-in-out; }
.focus-track::after { border-color: #78d4acb3; box-shadow: 0 0 calc(14 * var(--u)) #78d4ac2e, 0 0 calc(4 * var(--u)) #78d4ac6b; opacity: 0; }
.focus-track.on::before { opacity: 0; }
.focus-track.on::after { opacity: 1; }
.switch-hit { position: absolute; inset: -12px; border-radius: inherit; }
.hold-zone { position: absolute; inset: calc(12 * var(--u)) calc(12 * var(--u)) auto; height: calc(72 * var(--u)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(4 * var(--u)); pointer-events: none; color: var(--muted); transition: opacity 180ms ease-in-out; }
.hold-zone svg, .end-zone svg { width: calc(17 * var(--u)); height: calc(17 * var(--u)); }
.hold-label { font-size: calc(11 * var(--u)); line-height: calc(13 * var(--u)); font-weight: 500; }
.end-zone { position: absolute; left: 0; right: 0; bottom: calc(12 * var(--u)); height: calc(48 * var(--u)); display: grid; place-items: center; opacity: 0; color: var(--muted); pointer-events: none; transition: opacity 180ms ease-in-out; }
.end-zone svg { transform: rotate(180deg); }
.focus-track.holding .hold-zone, .focus-track.on .hold-zone { opacity: 0; }
.focus-track.on .end-zone { opacity: 1; }
.focus-thumb { position: absolute; left: calc(12 * var(--u)); bottom: calc(12 * var(--u)); width: calc(88 * var(--u)); height: calc(72 * var(--u)); display: grid; place-items: center; border: calc(1 * var(--u)) solid transparent; border-radius: calc(24 * var(--u)); background: var(--text); color: var(--ink); pointer-events: none; will-change: transform; transition: background 180ms ease-in-out, color 180ms ease-in-out, border-color 180ms ease-in-out; }
.focus-thumb svg { grid-area: 1/1; width: calc(24 * var(--u)); height: calc(24 * var(--u)); transition: opacity 180ms ease-in-out; }
.focus-thumb .wave-icon { opacity: 0; }
.focus-track.holding .focus-thumb, .focus-track.on .focus-thumb { background: #2a2c31; color: var(--text); border-color: #f2f3f51a; }
.focus-track.holding .focus-thumb svg, .focus-track.on .focus-thumb svg:not(.wave-icon) { opacity: 0; }
.focus-track.on .focus-thumb .wave-icon { opacity: 1; }
.hold-readout { position: absolute; z-index: 2; top: calc(12 * var(--u)); left: calc(12 * var(--u)); width: calc(88 * var(--u)); height: calc(72 * var(--u)); display: grid; place-items: center; opacity: 0; pointer-events: none; }
.focus-track.holding .hold-readout { opacity: 1; }
.hold-readout svg { grid-area: 1/1; width: calc(40 * var(--u)); height: calc(40 * var(--u)); fill: none; stroke-width: 2; transform: rotate(-90deg); }
.hold-ring-track { stroke: #f2f3f526; }
.hold-ring-fill { stroke: var(--text); stroke-linecap: round; stroke-dasharray: 113.0973355; stroke-dashoffset: 113.0973355; }
.hold-readout > span { grid-area: 1/1; font-family: ui-monospace, SFMono-Regular, monospace; font-size: calc(12 * var(--u)); line-height: calc(20 * var(--u)); font-variant-numeric: tabular-nums; }
.demo-actions { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; min-height: 64px; margin-top: 16px; width: 100%; }
.demo-hint { color: var(--muted); font-size: 14px; line-height: 20px; }
.preview-note { margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 16px; }
.demo-reset { min-height: 44px; padding: 8px 0; border: 0; border-radius: 8px; background: none; color: var(--text); font-size: 14px; line-height: 20px; white-space: nowrap; text-decoration: underline; text-underline-offset: 4px; transition: opacity 180ms ease-in-out; }
.demo-reset:hover { opacity: .75; }
.demo-reset:active { opacity: .5; }
.hero-phone { position: relative; flex: none; aspect-ratio: 960/1959; container-type: inline-size; }
.hero-phone .phone-source { width: 100%; pointer-events: none; user-select: none; -webkit-user-select: none; }
.phone-live { position: absolute; inset: 0; display: none; pointer-events: none; font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --u: calc(100cqw / 490); }
.js .hero-phone[data-demo-ready] .phone-live { display: block; }
.phone-patch { position: absolute; left: 9.5%; right: 9.5%; top: 23%; bottom: 17%; background: #111316; }
.phone-live .demo-title { position: absolute; left: 10%; right: 10%; top: 26.7333%; width: 80%; height: calc(28 * var(--u)); min-height: 0; margin: 0; font-size: calc(20 * var(--u)); line-height: calc(24 * var(--u)); letter-spacing: calc(-.5 * var(--u)); text-align: center; }
.phone-live .focus-track { --u: calc(100cqw / 490); position: absolute; left: 38.5714%; top: 32.0667%; pointer-events: auto; }
.phone-live .phone-readout { position: absolute; left: 10%; right: 10%; top: 60.1%; display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--u)); opacity: 0; transition: opacity 180ms ease-in-out; }
.phone-live [data-demo-timer] { font-size: calc(22 * var(--u)); line-height: calc(26 * var(--u)); font-variant-numeric: tabular-nums; }
.phone-live [data-demo-until] { color: var(--muted); font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); }
.hero-phone.is-on .phone-readout { opacity: 1; }
.hero-demo-caption { display: grid; grid-template-columns: 1fr auto; grid-template-rows: 60px 16px; align-items: center; gap: 4px 16px; min-height: 80px; margin-top: 16px; text-align: left; }
.hero-demo-caption .preview-note { grid-column: 1/-1; margin: 0; }

.keys-section { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: var(--s-64); padding-block: var(--s-64); }
.key-heading .section-body { margin-top: var(--s-24); max-width: 360px; }
.key-spread { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: start; gap: var(--s-24); }
.key-art { display: flex; align-items: center; justify-content: center; height: 160px; }
.airtag-art { width: 96px; }
.nfc-art { width: 112px; }
.qr-art { width: 112px; }
.key-object figcaption { margin-top: var(--s-16); text-align: center; }
.key-object h3 { font-size: 16px; line-height: 24px; }
.key-object p { margin-top: var(--s-8); color: var(--muted); font-size: 12px; line-height: 16px; }

.feature-section { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--s-64); padding-block: var(--s-64); }
.feature-content { grid-column: 2; grid-row: 1; }
.feature-tabs { display: flex; flex-wrap: wrap; gap: var(--s-8); margin-bottom: var(--s-32); }
.feature-tabs button { min-height: 44px; padding: 8px 12px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; font-size: 14px; line-height: 20px; white-space: nowrap; transition: color 300ms var(--motion), background 300ms var(--motion); }
.feature-tabs button:hover { color: var(--text); }
.feature-tabs button:active { opacity: .6; }
.feature-tabs button[aria-selected=true] { color: var(--text); background: var(--raised); }
.feature-copy { min-height: 224px; }
.feature-copy h2 { max-width: 480px; font-size: 36px; line-height: 40px; letter-spacing: -.035em; }
.feature-copy p { max-width: 400px; margin-top: var(--s-24); color: var(--muted); font-size: 18px; line-height: 28px; }
.feature-visual { grid-column: 1; grid-row: 1; }
.feature-device { display: flex; justify-content: center; }
.feature-device .device { width: 280px; }
.feature-panels [role=tabpanel].enter { animation: panel-in 300ms var(--motion) both; }
@keyframes panel-in { from { opacity: .4; } to { opacity: 1; } }

.project-note { display: grid; grid-template-columns: 1.2fr .8fr; align-items: start; gap: var(--s-96); padding-block: var(--s-64); }
.project-note h2 { margin-bottom: var(--s-16); max-width: 520px; font-size: 24px; line-height: 32px; letter-spacing: -.02em; }
.project-note p { max-width: 600px; color: var(--muted); font-size: 16px; line-height: 24px; }
.project-facts .text-link { margin-top: var(--s-16); }
.text-link { display: inline-flex; align-items: center; gap: var(--s-12); min-height: 44px; font-size: 14px; line-height: 20px; text-decoration: none; transition: opacity 300ms var(--motion); }
.text-link svg { width: 20px; height: 20px; transition: transform 500ms var(--motion); }
.text-link:hover svg { transform: translate(2px,-2px); }
.text-link:active { opacity: .6; }
.faq-section { padding-top: var(--s-64); padding-bottom: var(--s-80); }
.faq-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--s-32); margin-bottom: var(--s-32); }
.faq-heading h2 { font-size: 30px; line-height: 36px; letter-spacing: -.025em; }
.answer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 64px; }
.answer-grid article { max-width: 520px; }
.answer-grid h3 { margin-bottom: var(--s-8); font-size: 18px; line-height: 28px; letter-spacing: -.02em; }
.answer-grid p { color: var(--muted); font-size: 16px; line-height: 24px; }
.sign-off { padding-bottom: var(--s-48); font-size: 24px; line-height: 32px; letter-spacing: -.02em; }
.footer { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-64); padding-top: var(--s-24); padding-bottom: var(--s-40); }
.footer .brand { margin-bottom: var(--s-12); }
.footer p { max-width: 400px; color: var(--muted); font-size: 12px; line-height: 16px; }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 24px; color: var(--muted); font-size: 12px; line-height: 16px; }
.footer-links a { display: flex; align-items: center; min-height: 44px; text-decoration: none; transition: color 300ms var(--motion); }
.footer-links a:hover { color: var(--text); }
/* Support and privacy are the same type and spacing system. */
.legal-page { padding-top: var(--s-64); padding-bottom: var(--s-80); }
.page-heading { max-width: 800px; margin-bottom: var(--s-32); font-size: 60px; line-height: 1; letter-spacing: -.04em; }
.legal-intro { max-width: 760px; color: var(--muted); font-size: 20px; line-height: 28px; }
.legal-sections { display: grid; gap: var(--s-40); max-width: 760px; margin-top: var(--s-64); }
.legal-sections h2 { margin-bottom: var(--s-16); font-size: 24px; line-height: 32px; letter-spacing: -.02em; }
.legal-sections p { color: var(--muted); font-size: 16px; line-height: 24px; }
.legal-sections p + p { margin-top: var(--s-16); }
.trademark-credit { font-size: 12px !important; line-height: 16px !important; }
.back-link { display: inline-flex; align-items: center; gap: var(--s-8); min-height: 44px; margin-bottom: var(--s-32); color: var(--muted); font-size: 14px; text-decoration: none; }
.back-link svg { width: 16px; height: 16px; }
.faq-list { max-width: 800px; margin-top: var(--s-48); }
.faq-list details { padding-block: var(--s-8); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-24); min-height: 64px; padding-block: var(--s-16); font-size: 20px; line-height: 28px; font-weight: 500; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary svg { width: 20px; height: 20px; color: var(--muted); transition: transform 500ms var(--motion); }
.faq-list details[open] summary svg { transform: rotate(45deg); }
.faq-answer { padding-block: 8px 24px; color: var(--muted); font-size: 16px; line-height: 24px; }
.faq-answer p + p { margin-top: var(--s-16); }
.button { display: inline-flex; align-items: center; gap: var(--s-12); min-height: 48px; margin-top: var(--s-24); padding: 8px 12px; border-radius: 8px; background: var(--text); color: var(--ink); font-size: 16px; font-weight: 600; text-decoration: none; transition: transform 500ms var(--motion), opacity 300ms var(--motion); }
.button:hover { opacity: .85; }
.button:active { transform: scale(.98); }

@media (min-width:1101px) {
  html[lang=fr] .hero h1, html[lang=es] .hero h1, html[lang=it] .hero h1 { font-size: 72px; }
}
@media (max-width:1100px) {
  .hero { gap: var(--s-32); }
  .hero h1 { font-size: 72px; }
  .pair-phone { width: 240px; }
  .pair-watch { width: 128px; }
  .how-layout { gap: var(--s-48); }
  .keys-section { grid-template-columns: .85fr 1.15fr; gap: var(--s-32); }
  .feature-section { gap: var(--s-48); }
  .project-note { gap: var(--s-64); }
}
@media (max-width:820px) {
  .shell { width: calc(100% - var(--s-48)); }
  .site-header { width: calc(100% - var(--s-48)); }
  .nav { min-height: 80px; gap: var(--s-16); }
  .nav-links { display: none; }
  .nav-end { gap: var(--s-4); }
  .language select { width: 96px; }
  .menu-toggle { display: block; }
  .hero { grid-template-columns: 1fr; gap: var(--s-32); padding-top: var(--s-24); padding-bottom: var(--s-48); }
  .hero-copy { padding-bottom: 0; }
  .hero h1 { font-size: 72px; }
  .hero-body { max-width: 480px; margin-top: var(--s-24); }
  .store-coming { margin-top: var(--s-24); }
  .device-pair { justify-content: center; }
  .pair-phone { width: 240px; }
  .pair-watch { width: 136px; }
  .how-section { padding-block: var(--s-48); }
  .how-layout { gap: var(--s-32); }
  .demo-stage { padding: 32px 16px 24px; }
  .section-title { font-size: 30px; line-height: 36px; }
  .steps { gap: var(--s-24); }
  .steps h3 { font-size: 18px; line-height: 28px; }
  .keys-section { grid-template-columns: 1fr; gap: var(--s-32); padding-block: var(--s-48); }
  .key-heading .section-body { max-width: 480px; margin-top: var(--s-16); }
  .key-spread { gap: var(--s-32); }
  .key-object figcaption { max-width: 200px; margin-inline: auto; }
  .feature-section { padding-block: var(--s-48); gap: var(--s-32); }
  .feature-tabs button { padding: 8px; }
  .feature-copy h2 { font-size: 30px; line-height: 36px; }
  .feature-copy p { font-size: 16px; line-height: 24px; }
  .feature-device .device { width: 240px; }
  .project-note { gap: var(--s-40); padding-block: var(--s-48); }
  .project-note h2 { font-size: 20px; line-height: 28px; }
  .answer-grid { gap: 32px; }
  .footer { flex-direction: column; align-items: flex-start; gap: var(--s-24); }
  .footer-links { justify-content: flex-start; }
  .legal-page { padding-top: var(--s-48); }
}
@media (max-width:600px) {
  .nav { min-height: 72px; }
  .hero { padding-top: var(--s-16); }
  .hero h1 { font-size: 60px; }
  html[lang=fr] .hero h1, html[lang=es] .hero h1, html[lang=it] .hero h1, html[lang=pt-PT] .hero h1 { font-size: 48px; }
  .hero-body { margin-top: var(--s-24); font-size: 16px; line-height: 24px; }
  .hero-free { margin-top: var(--s-12); font-size: 14px; line-height: 20px; }
  .store-coming { gap: var(--s-8); margin-top: var(--s-24); }
  .store-coming img { width: 144px; }
  .device-pair { justify-content: flex-start; gap: var(--s-16); }
  .pair-phone { width: 192px; }
  .pair-watch { width: 104px; margin-bottom: var(--s-16); }
  .how-layout { grid-template-columns: 1fr; gap: var(--s-32); }
  .how-copy { grid-row: 1; }
  .how-copy .section-title { font-size: 30px; line-height: 36px; }
  .demo-stage { padding: 32px 24px 16px; }
  .demo-title { font-size: 20px; line-height: 28px; min-height: 28px; }
  .key-spread { grid-template-columns: 1fr 1fr; gap: var(--s-24); }
  .key-object-2 { grid-column: 1/-1; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--s-24); }
  .key-object-2 figcaption { margin: 0; text-align: left; }
  .key-art { height: 144px; }
  .airtag-art { width: 96px; }
  .nfc-art { width: 112px; }
  .qr-art { width: 112px; }
  .key-object h3 { font-size: 18px; line-height: 28px; }
  .key-object p { font-size: 14px; line-height: 20px; }
  .feature-section { grid-template-columns: 1fr; gap: var(--s-32); }
  .feature-content { grid-column: 1; grid-row: 1; }
  .feature-visual { grid-column: 1; grid-row: 2; }
  .feature-tabs { gap: var(--s-4); margin-bottom: var(--s-24); }
  .feature-tabs button { padding: 8px 12px; }
  .feature-copy { min-height: 160px; }
  .feature-copy h2 { font-size: 24px; line-height: 32px; }
  .feature-copy p { margin-top: var(--s-16); }
  .feature-device { justify-content: flex-start; }
  .feature-device .device { width: 224px; }
  .project-note { grid-template-columns: 1fr; gap: var(--s-32); }
  .faq-section { padding-top: var(--s-32); padding-bottom: var(--s-48); }
  .faq-heading { align-items: flex-start; gap: var(--s-16); margin-bottom: var(--s-24); }
  .faq-heading h2 { font-size: 24px; line-height: 32px; }
  .answer-grid { grid-template-columns: 1fr; gap: var(--s-24); }
  .sign-off { padding-bottom: var(--s-32); font-size: 20px; line-height: 28px; }
  .footer { gap: var(--s-16); }
  .footer-links { gap: 4px 16px; }
  .page-heading { font-size: 36px; line-height: 40px; }
  .legal-intro { font-size: 18px; line-height: 28px; }
  .legal-sections { margin-top: var(--s-40); gap: var(--s-32); }
  .faq-list { margin-top: var(--s-32); }
  .faq-list summary { font-size: 18px; line-height: 28px; }
}
@media (max-width:374px) {
  .shell, .site-header { width: calc(100% - var(--s-32)); }
  .hero h1 { font-size: 48px; }
  .pair-phone { width: 192px; }
  .pair-watch { width: 96px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; }
}

.support-email { margin-top: 24px; font-size: 18px; line-height: 28px; }