/* Remote Mirror LP v2.1 — everything outside the two motion sections (film, gestures). Loaded after v2.css. */
:root {
  --deep: #06081f;        /* teal-black for the comparison and footer */
  --line: #e3e5e8;
  --orange: #0b0f33;
}
.n-hero, .n-why, .n-day, .n-more, .n-vs, .n-safe, .n-price, .n-start, .n-faq, .n-end { word-break: auto-phrase; }
.n-wrap { max-width: 1180px; margin: 0 auto; padding: 0 6vw; }
.n-h2 { font-size: clamp(32px, 4.6vw, 64px); line-height: 1.16; font-weight: 800; letter-spacing: -0.015em; }
.n-sub { margin: 22px 0 0; max-width: 620px; font-size: 16px; line-height: 1.9; color: var(--sub); }
.n-fine { margin: 26px 0 0; font-size: 12px; line-height: 1.9; color: var(--sub); }
.n-fine a { color: inherit; }
.n-cta { display: flex; flex-wrap: wrap; gap: 12px; }
h3 { margin: 0; }

/* reveal (only when JS is running) */
.js-rv .rv { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); }
.js-rv .rv.is-in { opacity: 1; transform: none; }

/* ── 1. hero ───────────────────────────────────────────── */
.n-hero { position: relative; overflow: hidden; color: #fff; background: radial-gradient(90% 80% at 78% 30%, #5878ff 0%, var(--brand) 45%, #1a2f9e 100%); }
.n-hero-in { max-width: 1320px; margin: 0 auto; padding: clamp(40px, 7vh, 84px) 5vw clamp(56px, 9vh, 110px); min-height: min(calc(100vh - 56px), 860px); display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); align-items: center; gap: 3vw; }
.n-kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 26px; font-size: 15px; font-weight: 700; letter-spacing: .02em; }
.n-kicker img { width: 40px; height: 40px; border-radius: 10px; box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }
.n-hero h1 { white-space: nowrap; font-size: clamp(44px, 5.5vw, 92px); line-height: 1.06; font-weight: 900; letter-spacing: -0.03em; }
.n-lede { margin: 30px 0 34px; max-width: 480px; font-size: 16px; line-height: 2; opacity: .96; }
.n-trust { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 28px 0 0; padding: 0; list-style: none; font-size: 13px; font-weight: 600; }
.n-trust li { display: flex; align-items: center; gap: 8px; }
.n-trust li::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 8.3l2.4 2.4 5.2-5.4' fill='none' stroke='%233355e6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain; flex: none; }

.n-stage { position: relative; container-type: inline-size; }
.n-stage-in { position: relative; padding: 0 0 9% 0; }
.n-scr { position: absolute; inset: 0; overflow: hidden; background: #171235; }
.n-mac { position: relative; width: 82%; aspect-ratio: 16 / 10; box-sizing: content-box; border: 1.3cqw solid #16161c; border-bottom-width: 1.7cqw; border-radius: 1.8cqw 1.8cqw .5cqw .5cqw; background: #000; box-shadow: 0 4cqw 9cqw rgba(0, 30, 28, .45); }
.n-mac-base { width: 96%; margin-left: -4.5%; height: 1.4cqw; border-radius: 0 0 2cqw 2cqw; background: linear-gradient(#2a2a31, #111114); }
.n-mac-base::before { content: ""; display: block; width: 14%; height: 35%; margin: 0 auto; border-radius: 0 0 1cqw 1cqw; background: #0c0c0f; }
.n-ph { position: absolute; right: 0; bottom: 0; width: 30cqw; aspect-ratio: 720 / 1564; box-sizing: content-box; border: .72cqw solid #16161c; border-radius: 4.8cqw; overflow: hidden; background: #000; box-shadow: 0 3cqw 7cqw rgba(0, 20, 18, .55), 0 0 0 1px rgba(255, 255, 255, .08); }
.n-ph-island { position: absolute; z-index: 4; top: 1.6%; left: 50%; width: 31%; height: 3.4%; transform: translateX(-50%); background: #000; border-radius: 99px; }
.n-tap { position: absolute; z-index: 5; left: 50%; top: 88.2%; width: 13%; aspect-ratio: 1; margin: -6.5% 0 0 -6.5%; border-radius: 50%; border: 2px solid #fff; background: rgba(255, 255, 255, .4); opacity: 0; transform: scale(1.4); transition: opacity .25s, transform .25s; }
.n-tap.on { opacity: 1; transform: scale(.85); }
.n-cap { margin: 4.5cqw 0 0; display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.n-cap span { display: flex; align-items: center; gap: 8px; }
.n-cap b { background: #fff; color: var(--brand-d); border-radius: 99px; padding: 3px 10px; font-size: 11px; font-weight: 800; }
.n-cap i { font-style: normal; opacity: .8; }

/* ── 2. why ────────────────────────────────────────────── */
.n-why { padding: clamp(80px, 15vh, 160px) 0 clamp(60px, 10vh, 110px); background: #fff; }
.n-why-rows { list-style: none; margin: clamp(40px, 8vh, 80px) 0 0; padding: 0; border-top: 1px solid var(--line); }
.n-why-rows li { display: grid; grid-template-columns: 1fr 44px 1.15fr; align-items: center; gap: 0 28px; padding: clamp(22px, 3.4vh, 34px) 0; border-bottom: 1px solid var(--line); }
.n-why-rows li::before { content: "→"; grid-column: 2; grid-row: 1; width: 44px; height: 44px; border-radius: 50%; background: var(--orange); color: #fff; display: grid; place-items: center; font-size: 20px; font-weight: 800; }
.n-why .bf { grid-column: 1; grid-row: 1; margin: 0; font-size: clamp(19px, 2.1vw, 28px); line-height: 1.5; font-weight: 800; color: #6b6d76; }
.n-why .af { grid-column: 3; grid-row: 1; margin: 0; font-size: clamp(19px, 2.1vw, 28px); line-height: 1.5; font-weight: 800; color: var(--brand-d); }
.n-any { margin: clamp(30px, 6vh, 56px) 0 0; background: var(--brand); border-radius: 26px; padding: 30px 34px; font-size: 15px; line-height: 1.9; color: #fff; display: flex; gap: 10px 28px; align-items: baseline; flex-wrap: wrap; }
.n-any b { font-size: clamp(22px, 2.4vw, 32px); color: #fff; white-space: nowrap; }

/* ── 3. a day ──────────────────────────────────────────── */
.n-day { background: var(--paper); padding: clamp(80px, 14vh, 150px) 0 clamp(90px, 16vh, 170px); }
.n-day-grid { list-style: none; margin: clamp(40px, 8vh, 80px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 46px 22px; }
.n-day-grid li:nth-child(3n+2) { margin-top: 46px; }
.n-day-grid li:nth-child(3n) { margin-top: 92px; }
.n-day-grid figure { margin: 0 0 18px; border-radius: 18px; overflow: hidden; aspect-ratio: 3 / 2; background: #ddd; }
.n-day-grid img { width: 100%; height: 100%; object-fit: cover; }
.n-day-grid time { display: block; font-size: clamp(30px, 3.2vw, 44px); line-height: 1; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--brand); font-feature-settings: "tnum"; }
.n-day-grid b { display: block; margin-top: 12px; font-size: 17px; }
.n-day-grid span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.8; color: var(--sub); }

/* ── 7. more ───────────────────────────────────────────── */
.n-more { background: var(--paper); padding: clamp(80px, 14vh, 150px) 0; }
.n-bento { display: grid; grid-template-columns: 1.35fr 1fr; grid-template-rows: auto auto; gap: 18px; margin-top: clamp(36px, 7vh, 70px); }
.n-bento article { background: #fff; border-radius: 26px; padding: 30px; overflow: hidden; position: relative; }
.n-bento h3 { font-size: clamp(20px, 2vw, 26px); line-height: 1.35; font-weight: 800; }
.n-bento p { margin: 12px 0 0; font-size: 14px; line-height: 1.9; color: var(--sub); }
.b-voice { grid-row: span 2; padding: 0 !important; min-height: 520px; color: #fff; display: flex; align-items: flex-end; }
.b-voice img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.b-voice::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .78)); }
.b-voice div { position: relative; z-index: 1; padding: 34px; max-width: 520px; }
.b-voice h3 { font-size: clamp(26px, 3vw, 40px); }
.b-voice p { color: rgba(255, 255, 255, .92); }
.tiles { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; margin-bottom: 26px; max-width: 320px; }
.tiles i { aspect-ratio: 16 / 10; border-radius: 4px; background: #e9eaee; }
.tiles i.on { background: var(--orange); }
.langs { margin: 0 0 22px !important; font-size: 15px !important; line-height: 1.9 !important; font-weight: 700; color: var(--brand) !important; word-spacing: .5em; }

/* ── 8. versus ─────────────────────────────────────────── */
.n-vs { background: var(--deep); color: #fff; padding: clamp(90px, 16vh, 170px) 0; }
.n-vs .n-sub, .n-vs .n-fine { color: rgba(255, 255, 255, .7); }
.n-vs-table { margin-top: clamp(40px, 8vh, 76px); position: relative; }
.n-vs-table > div { display: grid; grid-template-columns: 15% 1fr 1fr 1.25fr; align-items: stretch; }
.n-vs-table > div > * { padding: 22px 22px; border-bottom: 1px solid rgba(255, 255, 255, .12); font-size: 15px; line-height: 1.7; display: flex; align-items: center; }
.n-vs-table > div > :nth-child(1) { padding-left: 0; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .62); }
.n-vs-table > div > :nth-child(2), .n-vs-table > div > :nth-child(3) { color: rgba(255, 255, 255, .66); }
.n-vs-table > div > :nth-child(4) { background: var(--brand); color: #fff; font-weight: 700; border-bottom-color: rgba(255, 255, 255, .22); gap: 12px; }
.n-vs-table > div:not(.hd) > :nth-child(4)::before { content: ""; width: 22px; height: 22px; flex: none; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 8.3l2.4 2.4 5.2-5.4' fill='none' stroke='%233355e6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain; }
.n-vs-table .hd > * { font-size: 13px !important; font-weight: 800 !important; padding-top: 18px; padding-bottom: 18px; }
.n-vs-table .hd > :nth-child(4) { border-radius: 20px 20px 0 0; font-size: 17px !important; color: #fff; }
.n-vs-table .hd img { width: 30px; height: 30px; border-radius: 8px; }
.n-vs-table > div:last-child > * { border-bottom: 0; }
.n-vs-table > div:last-child > :nth-child(4) { border-radius: 0 0 20px 20px; }

/* ── 9. modes (kept from v2, without the photo strip) ──── */
.modes { padding-top: 4vh; }
.mode span { max-width: 380px; margin-left: auto; margin-right: auto; line-height: 1.8; }
.mode-art .dv-mac { box-shadow: 0 9px 0 -2px #2b2b31, 0 9px 0 -2px #2b2b31, 0 30px 60px rgba(0, 0, 0, .28); }
.ft-in { max-width: 1180px; padding: 0; }
.ft { padding-left: 6vw; padding-right: 6vw; }
.ft-in { margin: 0 auto; }
.ft-copy a { margin-left: 4px; }

/* ── 10. privacy ───────────────────────────────────────── */
.n-safe { background: var(--brand); color: #fff; padding: clamp(90px, 15vh, 160px) 0 clamp(60px, 10vh, 110px); }
.n-safe-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 60px; margin-top: clamp(36px, 7vh, 70px); }
.n-safe-grid article { padding: 28px 0; border-top: 1px solid rgba(255, 255, 255, .28); }
.n-safe-grid h3 { font-size: 20px; font-weight: 800; }
.n-safe-grid p { margin: 10px 0 0; font-size: 14px; line-height: 1.9; color: rgba(255, 255, 255, .9); }
.n-safe .n-fine { color: rgba(255, 255, 255, .85); }

/* the data path: Mac ⇄ device directly; iCloud only holds how to find the Mac */
.n-path { margin-top: clamp(36px, 7vh, 70px); background: rgba(0, 0, 0, .14); border-radius: 26px; padding: 34px 5% 40px; }
.n-path svg { display: block; }
.pt-cloud { width: max-content; max-width: 100%; margin: 0 auto; text-align: center; position: relative; padding-bottom: 44px; }
.pt-cloud svg { width: 48px; margin: 0 auto 8px; }
.pt-cloud b { display: block; font-size: 15px; }
.pt-cloud span { display: block; font-size: 12px; opacity: .85; margin-top: 4px; }
.pt-cloud::before, .pt-cloud::after { content: ""; position: absolute; bottom: 0; height: 36px; width: min(30vw, 330px); border-top: 2px dashed rgba(255, 255, 255, .55); }
.pt-cloud::before { right: 50%; border-left: 2px dashed rgba(255, 255, 255, .55); border-radius: 14px 0 0 0; margin-right: 90px; width: min(22vw, 250px); }
.pt-cloud::after { left: 50%; border-right: 2px dashed rgba(255, 255, 255, .55); border-radius: 0 14px 0 0; margin-left: 90px; width: min(22vw, 250px); }
.pt-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; max-width: 860px; margin: 0 auto; }
.pt-node { text-align: center; width: 120px; }
.pt-node svg { width: 64px; margin: 0 auto 8px; }
.pt-node b { font-size: 14px; }
.pt-line { display: flex; align-items: center; gap: 14px; }
.pt-line i { flex: 1; height: 3px; background: #fff; border-radius: 3px; }
.pt-line span { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 15px; font-weight: 800; text-align: center; }
.pt-line span svg { width: 18px; }
.pt-line small { font-size: 12px; font-weight: 500; opacity: .9; }
.n-safe-grid { margin-top: 30px !important; }

/* ── 11. pricing ───────────────────────────────────────── */
.n-price { background: #fff; padding: clamp(90px, 15vh, 160px) 0 clamp(60px, 10vh, 110px); }
.n-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: clamp(36px, 7vh, 70px); align-items: stretch; }
.n-plans article { position: relative; background: var(--paper); border-radius: 26px; padding: 36px 32px 34px; }
.n-plans h3 { font-size: 16px; font-weight: 800; }
.n-plans .pr { margin: 18px 0 0; display: flex; align-items: baseline; gap: 8px; }
.n-plans em { font-style: normal; font-size: clamp(40px, 4.6vw, 62px); line-height: 1; font-weight: 800; letter-spacing: -0.03em; font-feature-settings: "tnum"; }
.n-plans .pr span { font-size: 15px; font-weight: 700; color: var(--sub); }
.n-plans .nt { margin: 14px 0 0; font-size: 13px; color: var(--sub); }
.n-plans .hl { background: var(--brand); color: #fff; box-shadow: 0 24px 50px rgba(51, 85, 230, .28); }
.n-plans .hl .pr span, .n-plans .hl .nt { color: rgba(255, 255, 255, .9); }
.n-plans .badge { position: absolute; top: -13px; left: 28px; background: var(--orange); color: #fff; font-size: 12px; font-weight: 800; padding: 6px 12px; border-radius: 99px; }
.n-price-cta { margin: 34px 0 0; display: flex; align-items: center; gap: 16px 26px; flex-wrap: wrap; }
.n-price-cta p { margin: 0; flex: 1 1 300px; font-size: 14px; line-height: 1.8; font-weight: 600; }
.pill-b { display: inline-flex; align-items: center; gap: 10px; border-radius: 99px; padding: 16px 30px; font-weight: 800; font-size: 16px; text-decoration: none; background: var(--orange); color: #fff; box-shadow: 0 10px 24px rgba(11, 15, 51, .3); }
.pill-b i { font-style: normal; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--orange); display: grid; place-items: center; font-size: 11px; }

/* ── 12. start ─────────────────────────────────────────── */
.n-start { background: var(--paper); padding: clamp(90px, 16vh, 170px) 0; }
.n-steps { list-style: none; counter-reset: st; margin: clamp(36px, 7vh, 70px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.n-steps li { counter-increment: st; background: #fff; border-radius: 26px; padding: 30px 30px 32px; }
.n-steps li::before { content: counter(st); display: block; font-size: 64px; line-height: 1; font-weight: 800; color: var(--brand); letter-spacing: -0.03em; margin-bottom: 22px; }
.n-steps h3 { font-size: 18px; line-height: 1.5; font-weight: 800; }
.n-steps p { margin: 10px 0 0; font-size: 14px; line-height: 1.9; color: var(--sub); }
.n-steps a { color: var(--brand-d); font-weight: 700; }
.n-dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 18px; }
.n-dl a { display: block; text-decoration: none; background: var(--ink); color: #fff; border-radius: 26px; padding: 28px 30px; transition: transform .2s; }
.n-dl a:first-child { background: var(--brand); }
.n-dl a:hover { transform: translateY(-3px); }
.n-dl b { display: block; font-size: 13px; opacity: .8; }
.n-dl span { display: block; margin-top: 8px; font-size: clamp(18px, 1.9vw, 24px); font-weight: 800; }
.n-dl small { display: block; margin-top: 10px; font-size: 12px; opacity: .85; }

/* ── 13. FAQ ───────────────────────────────────────────── */
.n-faq { background: #fff; padding: clamp(90px, 16vh, 170px) 0; }
.n-faq .n-h2 { font-size: clamp(30px, 3.4vw, 46px); white-space: nowrap; }
.n-faq .n-wrap { display: grid; grid-template-columns: .8fr 1.4fr; gap: 5vw; align-items: start; }
.n-qa details { border-top: 1px solid var(--line); }
.n-qa details:last-child { border-bottom: 1px solid var(--line); }
.n-qa summary { list-style: none; cursor: pointer; padding: 24px 44px 24px 0; position: relative; font-size: 17px; font-weight: 700; }
.n-qa summary::-webkit-details-marker { display: none; }
.n-qa summary::after { content: "＋"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); color: var(--brand); font-size: 20px; font-weight: 400; transition: transform .2s; }
.n-qa details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.n-qa p { margin: 0 0 26px; font-size: 15px; line-height: 1.95; color: var(--sub); max-width: 640px; }

/* ── 14. closing + footer ──────────────────────────────── */
.n-end { background: radial-gradient(80% 90% at 50% 0%, #5878ff 0%, var(--brand) 55%, #1a2f9e 100%); color: #fff; text-align: center; padding: clamp(100px, 20vh, 220px) 0; }
.n-end h2 { font-size: clamp(48px, 8vw, 120px); line-height: 1.08; font-weight: 900; letter-spacing: -0.03em; }
.n-end p { margin: 30px auto 36px; max-width: 560px; font-size: 16px; line-height: 1.9; }
.n-end .n-cta { justify-content: center; }
.ft { background: var(--deep); }
.ft-cards a { background: rgba(255, 255, 255, .08); }

:where(a, button, summary):focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

/* ── narrow screens ────────────────────────────────────── */
@media (max-width: 900px) {
  .n-hero-in { display: flex; flex-direction: column; align-items: stretch; min-height: 0; gap: 0; padding-top: 34px; }
  .n-hero-copy { display: contents; }
  .n-kicker { order: 1; margin-bottom: 16px; font-size: 13px; }
  .n-kicker img { width: 32px; height: 32px; }
  .n-hero h1 { order: 2; }
  .n-stage { order: 3; max-width: 620px; width: 100%; margin: 26px auto 0; }
  .n-lede { order: 4; margin: 26px 0 24px; font-size: 15px; line-height: 1.9; max-width: none; }
  .n-hero .n-cta { order: 5; }
  .n-trust { order: 6; margin-top: 20px; }
  .n-why-rows li { grid-template-columns: 1fr; gap: 12px; }
  .n-why-rows li::before { grid-column: 1; grid-row: 2; content: "↓"; width: 32px; height: 32px; font-size: 16px; }
  .n-why .bf { grid-row: 1; } .n-why .af { grid-column: 1; grid-row: 3; }
  .modes-lead { margin-left: 0 !important; }
  .n-plans, .n-steps { grid-template-columns: 1fr; }
  .n-day-grid { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin-left: -6vw; margin-right: -6vw; padding: 0 6vw 12px; scrollbar-width: none; }
  .n-day-grid::-webkit-scrollbar { display: none; }
  .n-day-grid li { flex: 0 0 74%; max-width: 320px; scroll-snap-align: center; }
  .n-day-grid li:nth-child(n) { margin-top: 0; }
  .n-bento { grid-template-columns: 1fr; }
  .b-voice { min-height: 420px; }
  .n-safe-grid, .n-dl { grid-template-columns: 1fr; }
  .pt-cloud::before, .pt-cloud::after { display: none; }
  .pt-cloud { padding-bottom: 26px; }
  .pt-row { gap: 8px; }
  .pt-node { width: 76px; }
  .pt-node svg { width: 48px; }
  .pt-line { gap: 6px; }
  .pt-line span { font-size: 13px; }
  .n-faq .n-wrap { grid-template-columns: 1fr; gap: 30px; }
  .n-vs-table > div { grid-template-columns: 1fr; padding: 18px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .n-vs-table .hd { display: none; }
  .n-vs-table > div > * { border-bottom: 0 !important; padding: 4px 0; }
  .n-vs-table > div > [data-l] { display: block; }
  .n-vs-table > div > [data-l]::before { content: attr(data-l) "："; font-size: 12px; opacity: .8; margin-right: 6px; }
  .n-vs-table > div > :nth-child(1) { font-size: 16px; color: #fff; }
  .n-vs-table > div > :nth-child(4) { margin-top: 8px; padding: 14px 16px; border-radius: 14px !important; }
  .n-plans .hl { order: -1; }
  .gh-nav { display: none; }
  .gh-cta { margin-left: auto; }
}
@media (max-width: 520px) {
  .n-cta a { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .js-rv .rv { opacity: 1; transform: none; transition: none; }
  .hdesk .hs, .hdesk .hs > * { transition: none; }
}
/* film on phones: keep the iPad clear of the caption below it */
@media (max-width: 820px) { .f-ipad { top: 36%; } }
/* QA round: keep the hero buttons on one row, avoid one-character last lines, tighten the start section */
@media (min-width: 901px) {
  .n-hero .n-cta { flex-wrap: nowrap; }
  .n-hero .n-cta a { white-space: nowrap; padding: 14px 22px; font-size: 15px; }
}
.modes, .ft, .gest-ttl, .gest-lead, .bub { word-break: auto-phrase; }
.n-start { padding-bottom: clamp(60px, 10vh, 110px); }
/* large displays: let the hero grow with the window */
@media (min-width: 1500px) { .n-hero-in { max-width: min(88vw, 1600px); min-height: min(calc(100vh - 56px), 1000px); } .n-lede { font-size: 17px; max-width: 540px; } }

/* ════ design round 2: bolder scenes, numerals, motion ════ */
:root { --num: "Barlow Condensed", "Helvetica Neue", Arial, sans-serif; }
.n-h2 { font-size: clamp(34px, 5vw, 76px); font-weight: 900; letter-spacing: -0.025em; line-height: 1.12; }
.n-faq .n-h2 { font-size: clamp(30px, 3.4vw, 46px); }
.n-day-grid time, .n-plans em, .n-steps li::before, .n-clock { font-family: var(--num); font-weight: 700; letter-spacing: 0; }
.n-plans em { font-size: clamp(58px, 6.4vw, 92px); }
.n-plans .pr { margin-top: 10px; }
.n-steps li::before { font-size: 104px; margin-bottom: 10px; }
.n-day-grid time { font-size: clamp(40px, 4vw, 60px); }

/* why: one big statement that fills in as you scroll, then before → after rows */
.n-why { padding-top: clamp(110px, 22vh, 240px); }
.n-big { font-size: clamp(36px, 6.8vw, 112px); line-height: 1.1; letter-spacing: -0.035em; }
.n-big em { font-style: normal; color: var(--brand); }
.n-why-rows { margin-top: clamp(60px, 12vh, 130px); }
.n-why .bf { text-decoration: line-through 3px transparent; transition: text-decoration-color .5s .3s, color .5s .3s; }
.js-rv .n-why-rows li.is-in .bf { text-decoration-color: var(--orange); color: #9a9ca6; }
.js-rv .n-why-rows li .af { opacity: 0; transform: translateX(-18px); transition: opacity .6s .6s, transform .6s .6s cubic-bezier(.2, .7, .2, 1); }
.js-rv .n-why-rows li.is-in .af { opacity: 1; transform: none; }
.js-rv .n-why-rows li::before { transform: scale(0) rotate(-90deg); transition: transform .5s .45s cubic-bezier(.3, 1.6, .5, 1); }
.js-rv .n-why-rows li.is-in::before { transform: none; }
.n-why .af { font-size: clamp(20px, 2.3vw, 31px); }

/* day: a horizontal timeline; the page's light follows the clock from morning to night */
.n-day { --bg: #eaeefb; --fg: #1c1c1e; --sub2: #5f5f66; --acc: var(--brand); background: var(--bg); color: var(--fg); transition: color .35s; }
.n-day .n-day-grid span { color: var(--sub2); transition: color .35s; }
.n-day .n-day-grid time, .n-clock { color: var(--acc); transition: color .35s; }
.n-day-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
.n-clock { margin: 0; display: none; font-size: clamp(96px, 15vw, 250px); line-height: .78; font-variant-numeric: tabular-nums; }
.n-clock i { font-style: normal; padding: 0 .03em; transform: translateY(-.07em); animation: n-blink 1s steps(2, jump-none) infinite; }
@keyframes n-blink { 50% { opacity: .25; } }
.n-day-bar { display: none; }
.n-day.is-h { padding: 0; }
.n-day.is-h .n-clock { display: flex; }
.n-day.is-h .n-day-pin { height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: clamp(18px, 3.6vh, 44px); overflow: hidden; padding-top: 56px; }
.n-day.is-h .n-day-grid { display: flex; align-items: flex-start; gap: 2.2vw; margin: 0; padding: 0 6vw; width: max-content; will-change: transform; }
.n-day.is-h .n-day-grid li { flex: none; width: clamp(280px, 27vw, 440px); margin-top: 0 !important; }
.n-day.is-h .n-day-grid li:nth-child(even) { padding-top: 4vh; }
.n-day.is-h .n-day-grid figure { aspect-ratio: 4 / 3; border-radius: 22px; margin-bottom: 14px; box-shadow: 0 24px 50px rgba(0, 0, 0, .16); }
.n-day.is-h .n-day-grid img { transform: scale(1.18) translateX(var(--px, 0)); }
.n-day.is-h .n-day-bar { display: block; margin: 0 6vw; height: 3px; border-radius: 3px; background: color-mix(in srgb, var(--fg) 14%, transparent); }
.n-day-bar i { display: block; height: 100%; border-radius: 3px; background: var(--acc); transform-origin: left; transform: scaleX(0); }
@media (max-height: 760px) { .n-day.is-h .n-day-grid li { width: clamp(240px, 23vw, 340px); } .n-day.is-h .n-h2 { font-size: clamp(30px, 3.6vw, 48px); } .n-day.is-h .n-clock { font-size: clamp(80px, 11vw, 150px); } }

/* more: living details */
.wave { display: flex; align-items: center; gap: 4px; height: 36px; margin: 0 0 18px !important; }
.wave i { width: 4px; height: 100%; border-radius: 4px; background: #fff; transform: scaleY(.25); animation: n-wave 1.05s ease-in-out infinite; }
@keyframes n-wave { 50% { transform: scaleY(1); } }
.wave i:nth-child(1){animation-delay:-0.00s}.wave i:nth-child(2){animation-delay:-0.40s}.wave i:nth-child(3){animation-delay:-0.80s}.wave i:nth-child(4){animation-delay:-0.20s}.wave i:nth-child(5){animation-delay:-0.60s}.wave i:nth-child(6){animation-delay:-1.00s}.wave i:nth-child(7){animation-delay:-0.40s}.wave i:nth-child(8){animation-delay:-0.80s}.wave i:nth-child(9){animation-delay:-1.20s}.wave i:nth-child(10){animation-delay:-0.60s}.wave i:nth-child(11){animation-delay:-1.00s}.wave i:nth-child(12){animation-delay:-0.40s}.wave i:nth-child(13){animation-delay:-0.80s}.wave i:nth-child(14){animation-delay:-1.20s}.wave i:nth-child(15){animation-delay:-0.60s}.wave i:nth-child(16){animation-delay:-1.00s}.wave i:nth-child(17){animation-delay:-1.40s}.wave i:nth-child(18){animation-delay:-0.80s}
.tiles i { transition: background .35s; }
.n-bento .langs { margin: 0 -30px 22px !important; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); word-spacing: 0; }
.n-bento .langs p { display: flex; gap: 26px; width: max-content; margin: 0 0 10px; font-size: 19px; line-height: 1.5; font-weight: 800; color: var(--brand); white-space: nowrap; animation: n-mq 30s linear infinite; }
.n-bento .langs p:nth-child(2) { animation-direction: reverse; color: #aebbe8; }
@keyframes n-mq { to { transform: translateX(-50%); } }

/* versus: our column stands forward */
@media (min-width: 901px) {
  .n-vs-table::before { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 32.69%; border-radius: 20px; box-shadow: 0 30px 90px rgba(90, 125, 255, .38), 0 0 0 1px rgba(255, 255, 255, .12); pointer-events: none; }
  .n-vs-table > div > :nth-child(4) { font-size: 16px; }
}

/* modes: signals that move */
.mode.cell .link { border-top: 0 !important; height: 3px; background: repeating-linear-gradient(90deg, var(--brand) 0 10px, transparent 10px 18px); animation: n-flow .7s linear infinite; }
@keyframes n-flow { to { background-position: 18px 0; } }
.mode-art .sig { isolation: isolate; }
.mode-art .sig::after { content: ""; position: absolute; inset: 0; border-radius: 99px; border: 2px solid var(--brand); opacity: 0; z-index: -1; animation: n-ping 2.4s ease-out infinite; }
@keyframes n-ping { 0% { opacity: .7; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.5, 1.9); } }

/* privacy: the encrypted stream runs between the two devices */
.pt-line i { position: relative; overflow: hidden; background: rgba(255, 255, 255, .55); }
.pt-line i::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 34%; background: linear-gradient(90deg, transparent, #fff 40%, var(--orange) 60%, transparent); animation: n-run 1.7s linear infinite; }
.pt-line i:last-child::after { animation-direction: reverse; }
@keyframes n-run { from { transform: translateX(-110%); } to { transform: translateX(310%); } }

/* closing: the Mac goes into the phone, the phone into the pocket */
.n-end { padding: 0; }
.n-end-pin { position: relative; min-height: 100vh; display: grid; place-items: center; overflow: hidden; padding: 14vh 6vw; }
.n-end-art { position: absolute; inset: 0; display: none; place-items: center; pointer-events: none; }
.n-end.is-anim .n-end-art { display: grid; }
.e-mac, .e-ph { grid-area: 1 / 1; background: #000; overflow: hidden; }
.e-mac { width: min(70vw, 1080px); aspect-ratio: 16 / 10; box-sizing: content-box; border: 12px solid #16161c; border-bottom-width: 16px; border-radius: 18px; box-shadow: 0 40px 90px rgba(0, 30, 28, .5); }
.e-ph { position: relative; height: min(60vh, 540px); aspect-ratio: 720 / 1564; box-sizing: content-box; border: 8px solid #16161c; border-radius: 42px; box-shadow: 0 30px 70px rgba(0, 20, 18, .55); opacity: 0; }
.e-mac img, .e-ph img { width: 100%; height: 100%; object-fit: cover; }
.e-ph i { position: absolute; z-index: 2; top: 1.6%; left: 50%; width: 31%; height: 3.4%; transform: translateX(-50%); background: #000; border-radius: 99px; }
.n-end-copy { position: relative; z-index: 2; }

@media (max-width: 900px) {
  .e-mac { width: 86vw; border-width: 7px; border-bottom-width: 10px; border-radius: 12px; }
  .e-ph { height: 52vh; border-width: 6px; border-radius: 34px; }
  .n-steps li::before { font-size: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .wave i, .n-bento .langs p, .mode.cell .link, .mode-art .sig::after, .pt-line i::after, .n-clock i { animation: none; }
}
.n-day-head .n-h2 { flex: none; white-space: nowrap; }

/* price: keep the unit on the price line */
.n-plans .pr { flex-wrap: nowrap; white-space: nowrap; }
.n-plans em { font-size: clamp(52px, 5.6vw, 84px); }
@media (min-width: 901px) { .n-plans .hl { transform: scale(1.04); z-index: 1; } }

/* modes: two bold panels — home in light, away in deep teal */
@media (min-width: 901px) {
  .modes-in { max-width: 1180px; }
  .modes-row { max-width: none; gap: 18px; margin-top: 7vh; text-align: left; }
  .mode { background: #fff; border-radius: 30px; padding: 34px 38px 40px; }
  .mode.cell { background: var(--deep); color: #fff; }
  .mode-art { height: 340px; margin-bottom: 30px; }
  .mode b { font-size: clamp(24px, 2.4vw, 34px); font-weight: 900; letter-spacing: -0.02em; }
  .mode span { max-width: none; margin: 12px 0 0; font-size: 14px; line-height: 1.9; }
  .mode.cell span { color: rgba(255, 255, 255, .78); }
  .mode-art .sig { top: 0; left: 0; transform: none; }
  .mode.cell .mode-art .sig { background: var(--brand); color: #fff; box-shadow: none; }
  .mode.cell .mode-art .sig::after { border-color: var(--brand-l); }
  .mode.cell .link { background-image: repeating-linear-gradient(90deg, #9db4ff 0 10px, transparent 10px 18px); bottom: 140px; }
  .mode.cell .mode-art .dv-mac { box-shadow: 0 9px 0 -2px #3a3a42, 0 30px 60px rgba(0, 0, 0, .5); }
}

/* ════ design review round 3 (Opus findings) ════ */
:root { --edge: max(6vw, calc((100vw - 1180px) / 2 + 6vw)); }
/* one left edge: hero and the day rail line up with every other section */
.n-hero-in { max-width: none; padding-left: var(--edge); padding-right: max(5vw, calc(var(--edge) - 6vw)); min-height: calc(100svh - 56px); }
@media (min-width: 1500px) { .n-hero-in { max-width: none; min-height: calc(100svh - 56px); } }
.n-day.is-h .n-day-grid { padding-left: var(--edge); padding-right: var(--edge); }
.n-day.is-h .n-day-bar { margin-left: var(--edge); margin-right: var(--edge); }
/* comparison */
.n-vs { padding-bottom: clamp(70px, 11vh, 120px); }
.n-vs-table .hd > * { font-size: 14px !important; }
.n-vs-table .hd > :nth-child(4) { font-size: 17px !important; }
.nw { white-space: nowrap; }
.n-fine { font-size: 13px; color: #5b6470; }
.n-vs .n-fine { color: rgba(255, 255, 255, .72); }
.n-safe .n-fine { color: rgba(255, 255, 255, .88); }
/* connection panels: same fills on every width */
.mode { background: #fff; border-radius: 26px; padding: 26px 24px 30px; text-align: left; }
.mode.cell { background: var(--deep); color: #fff; }
.mode b { font-size: clamp(22px, 2.4vw, 34px); font-weight: 900; letter-spacing: -0.02em; }
.mode span { max-width: none; margin: 10px 0 0; }
.mode.cell span { color: rgba(255, 255, 255, .78); }
.mode.cell .mode-art .sig { background: var(--brand); color: #fff; box-shadow: none; }
.mode.cell .link { background-image: repeating-linear-gradient(90deg, #9db4ff 0 10px, transparent 10px 18px); }
@media (min-width: 901px) { .mode { border-radius: 30px; padding: 34px 38px 40px; } .mode-art { height: 300px; } }
@media (max-width: 900px) { .modes-row { grid-template-columns: 1fr; gap: 14px; } .mode-art .sig { top: 0; left: 0; transform: none; } .mode-art { height: 230px; } }
/* pricing: readable units */
.n-plans .pr span { font-size: 18px; }
/* steps: a dark band between the two light sections */
.n-start { background: var(--deep); color: #fff; }
.n-steps li { background: rgba(255, 255, 255, .07); }
.n-steps li::before { color: #9db4ff; }
.n-steps p { color: rgba(255, 255, 255, .78); }
.n-steps a { color: #c3d0ff; }
.n-dl a { background: #fff; color: var(--ink); }
.n-dl a:first-child { background: var(--brand); color: #fff; }
.n-dl span::after { content: " →"; }
/* FAQ: the heading stays with you */
.n-faq-head { position: sticky; top: 96px; }
.n-faq-head p { margin: 18px 0 0; font-size: 14px; line-height: 1.9; color: var(--sub); }
.n-faq-head a { color: var(--brand-d); font-weight: 700; }
/* closing: the phone stays peeking out of a pocket */
.n-end.is-anim .n-end-pin { padding-bottom: 40vh; }
.n-end h2 { font-size: clamp(44px, 7vw, 104px); }
.e-pocket { grid-area: 1 / 1; align-self: end; position: relative; z-index: 3; width: min(560px, 82vw); height: 23vh; border-radius: 34px 34px 0 0; background: linear-gradient(#1f3bb8, #152885); box-shadow: 0 -18px 40px rgba(0, 30, 28, .35), inset 0 2px 0 rgba(255, 255, 255, .18); }
.e-pocket::before { content: ""; position: absolute; left: 22px; right: 22px; top: 16px; border-top: 2px dashed rgba(255, 255, 255, .42); }
.e-ph { z-index: 2; }
.e-mac { z-index: 1; }
.f-copy { word-break: auto-phrase; }
@media (max-width: 900px) {
  .n-day { padding-bottom: 48px; }
  .n-day-grid { margin-left: 0; margin-right: 0; padding: 0 6vw 12px; scroll-padding-inline: 6vw; }
  .n-day-grid li { scroll-snap-align: start; }
  .n-faq-head { position: static; }
  .n-end.is-anim .n-end-pin { padding-bottom: 36vh; }
  .e-pocket { height: 20vh; }
}

/* ════ header: a floating capsule — clear over the hero, glass once you scroll; shows where you are ════ */
html { scroll-padding-top: 90px; }
.gh { position: fixed; left: 50%; top: 14px; transform: translateX(-50%); z-index: 60; width: min(1180px, calc(100vw - 28px)); height: 58px; box-sizing: border-box; padding: 0 8px 0 18px; gap: 6px; border: 0; border-radius: 99px; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; color: #fff; transition: background .35s, box-shadow .35s, color .35s, transform .35s; overflow: hidden; }
.gh.is-solid { background: rgba(255, 255, 255, .86); backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px); color: var(--ink); box-shadow: 0 10px 34px rgba(0, 0, 0, .14), 0 0 0 1px rgba(0, 0, 0, .05); }
.gh-brand { font-size: 16px; letter-spacing: -0.01em; white-space: nowrap; }
.gh-brand img { width: 32px; height: 32px; border-radius: 9px; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }
.gh-nav { gap: 2px; margin-left: auto; margin-right: 8px; font-size: 14px; font-weight: 700; }
.gh-nav a { color: inherit; opacity: .82; padding: 9px 14px; border-radius: 99px; transition: background .2s, opacity .2s, color .2s; white-space: nowrap; }
.gh-nav a:hover { opacity: 1; background: rgba(255, 255, 255, .16); }
.gh.is-solid .gh-nav a:hover { background: rgba(0, 0, 0, .06); }
.gh-nav a.on { opacity: 1; background: rgba(255, 255, 255, .22); }
.gh.is-solid .gh-nav a.on { background: var(--ink); color: #fff; }
.gh-cta { display: inline-flex; align-items: center; height: 42px; padding: 0 20px; font-size: 14px; font-weight: 800; white-space: nowrap; background: #fff; color: var(--brand-d); transition: background .3s, color .3s, transform .2s; }
.gh-cta:hover { transform: translateY(-1px); }
.gh.is-solid .gh-cta { background: var(--orange); color: #fff; }
.gh-prog { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--orange); transform-origin: left; transform: scaleX(0); opacity: 0; transition: opacity .3s; }
.gh.is-solid .gh-prog { opacity: 1; }
.gh-menu { display: none; }
/* the header no longer takes space in the flow */
.n-hero-in { min-height: 100svh; padding-top: clamp(96px, 13vh, 130px); }
@media (min-width: 1500px) { .n-hero-in { min-height: 100svh; } }
.n-day.is-h .n-day-pin, .js-gest .gest { padding-top: 84px; }
@media (max-width: 900px) {
  .gh { top: 10px; width: calc(100vw - 20px); height: 54px; padding: 0 6px 0 12px; overflow: visible; }
  .gh-brand { font-size: 15px; margin-right: auto; }
  .gh-brand img { width: 30px; height: 30px; }
  .gh-cta { height: 40px; padding: 0 14px; font-size: 13px; margin-left: 0; }
  .gh-cta span { display: none; }
  .gh-prog { display: none; }
  .gh-menu { display: grid; place-content: center; gap: 6px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .18); color: inherit; cursor: pointer; }
  .gh.is-solid .gh-menu { background: rgba(0, 0, 0, .06); }
  .gh-menu i { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .25s; }
  .gh.is-open .gh-menu i:first-child { transform: translateY(4px) rotate(45deg); }
  .gh.is-open .gh-menu i:last-child { transform: translateY(-4px) rotate(-45deg); }
  .gh-nav { display: flex; position: absolute; left: 0; right: 0; top: 62px; flex-direction: column; gap: 0; margin: 0; padding: 10px; border-radius: 26px; background: rgba(255, 255, 255, .96); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); color: var(--ink); box-shadow: 0 20px 50px rgba(0, 0, 0, .2); font-size: 18px; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s, transform .25s, visibility .25s; }
  .gh.is-open .gh-nav { opacity: 1; visibility: visible; transform: none; }
  .gh-nav a { padding: 15px 18px; border-radius: 16px; opacity: 1; }
  .gh-nav a.on, .gh.is-solid .gh-nav a.on { background: var(--paper); color: var(--brand-d); }
  .gh.is-open { background: rgba(255, 255, 255, .96); color: var(--ink); }
  .gh.is-open .gh-menu { background: rgba(0, 0, 0, .06); }
  .gh.is-open .gh-cta { background: var(--orange); color: #fff; }
  .n-hero-in { padding-top: 84px; }
  .js-gest .gest { padding-top: 74px; }
}

/* modes: icons for "at home" and "out" — in the heading and on each panel */
.modes-head h2 .mh { display: flex; align-items: center; gap: .32em; }
.modes-head h2 br { display: none; }
.mh-i { flex: none; display: grid; place-items: center; width: 1.12em; height: 1.12em; border-radius: 32%; background: var(--brand); color: #fff; }
.mh-i.out { background: var(--orange); }
.mh-i .mi { width: 62%; height: 62%; }
.mode b { display: flex; align-items: center; gap: 12px; }
.m-i { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--brand); color: #fff; }
.mode.cell .m-i { background: var(--orange); }
.m-i .mi { width: 60%; height: 60%; }

/* hero: the copy column is as wide as its headline, so the headline can never run under the Mac */
@media (min-width: 901px) {
  .n-hero-in { grid-template-columns: minmax(0, max-content) minmax(0, 1fr); padding-right: 5vw; }
  .n-hero-copy { max-width: 100%; }
  .n-stage { max-width: 900px; justify-self: end; width: 100%; }
}
/* modes: the same laptop as the hero (dark frame on a base), not a flat panel */
.mode-art .m-mac { width: 58%; flex: none; }
.mode.cell .mode-art .m-mac { width: 46%; }
.mode-art .m-mac .dv-mac, .mode.cell .mode-art .m-mac .dv-mac { width: auto; border: 6px solid #16161c; border-bottom-width: 8px; border-radius: 9px 9px 3px 3px; box-shadow: 0 22px 44px rgba(0, 0, 0, .3); }
.m-base { display: block; width: 116%; margin-left: -8%; height: 7px; border-radius: 0 0 10px 10px; background: linear-gradient(#34343b, #17171b); position: relative; }
.m-base::before { content: ""; position: absolute; left: 50%; top: 0; width: 16%; height: 40%; transform: translateX(-50%); border-radius: 0 0 6px 6px; background: #0c0c0f; }

/* modes icons, second take: solid glyphs in the brand colours, no boxes — a house and a train */
.mh-i, .mh-i.out { width: .98em; height: .98em; border-radius: 0; background: none; color: var(--brand); }
.mh-i.out { color: var(--orange); }
.mh-i .mi { width: 100%; height: 100%; }
.modes-head h2 .mh { gap: .26em; }
.m-i, .mode.cell .m-i { width: 40px; height: 40px; border-radius: 0; background: none; color: var(--brand); }
.mode.cell .m-i { color: #c9d3f0; }
.m-i .mi { width: 100%; height: 100%; }
.mi { display: block; }

/* one centred 1180px column for everything (the header capsule, the hero and every section share its edges) */
:root { --edge: max(6vw, calc((100vw - 1180px) / 2)); }
.n-wrap { max-width: none; padding-left: var(--edge); padding-right: var(--edge); }
.modes-in { max-width: none; padding-left: var(--edge); padding-right: var(--edge); }
.ft { padding-left: var(--edge); padding-right: var(--edge); }
.ft-in { max-width: none; }
@media (min-width: 901px) {
  .n-hero-in { padding-left: var(--edge); padding-right: var(--edge); gap: clamp(28px, 3vw, 56px); }
  .n-stage { max-width: none; }
}
@media (max-width: 900px) { .n-hero-in { padding-left: var(--edge); padding-right: var(--edge); } }
.n-big { font-size: clamp(30px, min(5.9vw, 80px), 80px); }
@media (min-width: 700px) { .n-big em { white-space: nowrap; } }

/* voice card: the new photo is bright, so the caption sits on a deeper shade and the subject stays in view */
.b-voice img { object-position: 62% 30%; }
.b-voice::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 34%, rgba(8, 10, 36, .55) 62%, rgba(6, 8, 30, .9)); }
.b-voice h3, .b-voice p { text-shadow: 0 1px 12px rgba(0, 0, 0, .45); }

/* 10:15: show the right-hand side of the photo so the person walking away sits a little nearer the centre */
.n-day-grid li:nth-child(2) img { object-position: 100% 50%; }
.n-day.is-h .n-day-grid li:nth-child(2) img { transform: scale(1.08) translateX(calc(var(--px, 0%) - 3%)); }

/* step icons: solid glyphs, top right of each card, opposite the numeral */
.n-steps li { position: relative; }
.si { position: absolute; right: 26px; top: 30px; width: 64px; height: 64px; color: #9db4ff; }
.sub .si { color: var(--brand); }
@media (max-width: 900px) { .si { width: 52px; height: 52px; top: 26px; right: 22px; } }

/* modes "away" panel: Mac — dashed link — phone on one line, so the link really joins the two */
.mode.cell .mode-art { justify-content: center; align-items: center; gap: 0; padding: 44px 0 0; }
.mode.cell .mode-art .m-mac { width: 50%; }
.mode.cell .mode-art .dv-phone { width: 20%; flex: none; }
.mode.cell .link { position: static; flex: 1 1 auto; min-width: 24px; height: 3px; margin: 0 10px; left: auto; right: auto; bottom: auto; }

/* the live desktops are full-size until the script fits them to their screens: keep them hidden for that moment */
.hdesk, .gfit { visibility: hidden; }
.hdesk.is-fit, .gfit.is-fit { visibility: visible; }
/* (replaces the earlier fixed 36%) the iPad sits centred between the header and the caption */
@media (max-width: 820px) { .film .f-ipad { top: calc(var(--fhead) + var(--fzone) / 2); } }

/* day rail on phones and upright tablets: make it obvious that it swipes sideways */
.n-day-nav { display: none; }
@media (max-width: 900px) {
  .n-day-nav { display: flex; align-items: center; gap: 10px; margin: 18px var(--edge) 0; }
  .n-day-hint { margin: 0 auto 0 0; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; color: var(--brand-d); }
  .n-day-hint i { font-style: normal; display: inline-block; animation: n-swipe 1.4s ease-in-out infinite; }
  @keyframes n-swipe { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(8px); } }
  .n-day-count { margin: 0 6px 0 0; font: 700 20px/1 var(--num); color: var(--sub); }
  .n-day-count b { color: var(--brand); font-size: 26px; }
  .n-day-btn { width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--brand); color: #fff; font-size: 20px; font-weight: 800; cursor: pointer; transition: opacity .2s, transform .15s; }
  .n-day-btn:active { transform: scale(.94); }
  .n-day-btn:disabled { opacity: .28; }
  .n-day .n-day-bar { display: block; margin: 16px var(--edge) 0; height: 4px; border-radius: 4px; background: rgba(0, 0, 0, .1); }
  .n-day-grid { margin-top: 26px; }
  .n-day-grid li { flex-basis: 78%; }
  /* the next card always shows a clear slice at the right edge, fading out */
  .n-day-grid { -webkit-mask-image: linear-gradient(90deg, #000 86%, rgba(0, 0, 0, .25)); mask-image: linear-gradient(90deg, #000 86%, rgba(0, 0, 0, .25)); }
  .n-day-grid.at-end { -webkit-mask-image: none; mask-image: none; }
}
@media (prefers-reduced-motion: reduce) { .n-day-hint i { animation: none; } }

/* versus: who makes it — a creative studio, not a table row */
.n-maker { margin-top: clamp(48px, 9vh, 90px); padding-top: clamp(36px, 6vh, 56px); border-top: 1px solid rgba(255, 255, 255, .16); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px clamp(30px, 6vw, 90px); align-items: start; }
.n-maker-k { grid-column: 1 / -1; margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .12em; color: #9db4ff; }
.n-maker h3 { font-size: clamp(28px, 3.6vw, 50px); line-height: 1.18; font-weight: 900; letter-spacing: -0.02em; }
.n-maker-b p { margin: 0 0 14px; font-size: 15px; line-height: 2; color: rgba(255, 255, 255, .82); }
.n-maker-b a { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 15px; font-weight: 800; color: #fff; text-decoration: none; border-bottom: 2px solid #9db4ff; padding-bottom: 4px; }
.n-maker-b a i { font-style: normal; transition: transform .2s; }
.n-maker-b a:hover i { transform: translateX(4px); }
@media (max-width: 900px) { .n-maker { grid-template-columns: 1fr; } }

/* header: the logo sits exactly on the page's left edge line (same as the hero copy); the capsule reaches out
   18px beyond the column on both sides, and the menu gets more room */
.gh, .gh.is-solid { --gl: max(10px, calc(var(--edge) - 18px)); left: var(--gl); right: var(--gl); width: auto; transform: none; padding-left: calc(var(--edge) - var(--gl)); padding-right: 8px; }
.gh-nav { gap: 6px; margin-right: 14px; font-size: 15px; }
.gh-nav a { padding: 10px 16px; }
@media (max-width: 1100px) and (min-width: 901px) { .gh-nav { gap: 0; font-size: 14px; } .gh-nav a { padding: 9px 11px; } }
@media (max-width: 900px) { .gh, .gh.is-solid { padding-right: 6px; } }

/* blue variant: navy accent needs light partners on dark surfaces, and silver for the icon's frame */
.n-hero, .n-end, .s-hero { background: radial-gradient(90% 90% at 76% 22%, #4a6cff 0%, #2c49d6 42%, #0d1552 100%); }
.gh.is-solid .gh-cta, .pill-b, .gh.is-open .gh-cta { background: #3355e6; color: #fff; box-shadow: 0 10px 24px rgba(51, 85, 230, .32); }
.pill-b i { color: #3355e6; }
.gh-prog { background: #3355e6; }
.n-plans .badge { background: #06081f; }
.n-plans .hl { box-shadow: 0 24px 50px rgba(51, 85, 230, .3); }
.pt-line i::after { background: linear-gradient(90deg, transparent, #fff 40%, #c9d3f0 60%, transparent); }
.tiles i.on { background: #3355e6; }
.mh-i.out { color: #7d8bb8; }
.n-why .bf { text-decoration-thickness: 3px; }
.js-rv .n-why-rows li.is-in .bf { text-decoration-color: #7d8bb8; }
.n-why-rows li::before { background: #06081f; }
.n-vs, .ft, .n-start { background: #06081f; }
.n-vs-table > div > :nth-child(4) { background: #3355e6; }