/* FocusPets website – one stylesheet for every page. */
:root {
  --bg: #fff8f1;
  --bg-2: #fbeee1;
  --card: #ffffff;
  --ink: #2b1d16;
  --ink-2: #6b584c;
  --line: rgba(43, 29, 22, .1);
  --accent: #f08a3c;
  --accent-text: #b9531a;
  --accent-big: #dd6a1e;
  --night: #16112b;
  --device: #15121c;
  --glass: rgba(18, 14, 36, .38);
  --glass-line: rgba(255, 255, 255, .2);
  --radius: 28px;
  --shadow: 0 1px 2px rgba(43, 29, 22, .05), 0 20px 44px -24px rgba(43, 29, 22, .3);
  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --gutter: clamp(20px, 5vw, 40px);
  --section: clamp(72px, 9vw, 120px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #120e1f;
    --bg-2: #1a1430;
    --card: #221b3b;
    --ink: #f8f0e8;
    --ink-2: #bdb1c9;
    --line: rgba(255, 255, 255, .1);
    --accent-text: #ffa860;
    --accent-big: #ffa45c;
    --device: #05040a;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 20px 44px -24px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.5 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.06; letter-spacing: -.025em; font-weight: 800; text-wrap: balance; }
h1 em, h2 em { font-style: normal; color: var(--accent-big); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
.px { image-rendering: pixelated; image-rendering: crisp-edges; }
.wrap { width: min(1160px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 12px; }
.skip:focus { top: 12px; }
.eyebrow { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 14px; }
.lede { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--ink-2); }

/* ---------- navigation ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
  transition: box-shadow .25s;
}
.nav.scrolled { box-shadow: 0 1px 0 var(--line); }
.nav .wrap { display: flex; align-items: center; gap: 16px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; text-decoration: none; letter-spacing: -.01em; }
.brand img { width: 32px; height: 32px; border-radius: 22.5%; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
.nav-links { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.nav-links a { white-space: nowrap; text-decoration: none; font-weight: 700; font-size: 15px; padding: 8px 12px; border-radius: 999px; color: var(--ink-2); }
.nav-links a:hover { color: var(--ink); background: rgba(127, 127, 127, .12); }
.nav-links .nav-cta { display: inline-flex; align-items: center; gap: 7px; margin-left: 8px; background: #000; color: #fff; padding: 9px 16px; }
.nav-links .nav-cta:hover { background: #000; color: #fff; opacity: .86; }
.nav-cta svg { width: 15px; height: 15px; }
@media (max-width: 760px) { .nav-links .hide-sm { display: none; } }

/* ---------- App Store badge ---------- */
.store {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  background: #000; color: #fff; text-decoration: none;
  height: 60px; padding: 0 22px 0 18px; border-radius: 14px; border: 1px solid #8a8a8a;
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .5);
  transition: transform .15s ease, box-shadow .2s;
}
.store:hover { transform: translateY(-2px); box-shadow: 0 18px 32px -14px rgba(0, 0, 0, .55); }
.store:active { transform: none; }
.store svg { width: 28px; height: 28px; flex: none; }
.store span { display: flex; flex-direction: column; line-height: 1.05; text-align: left; }
.store small { font-size: 12px; font-weight: 600; letter-spacing: .01em; }
.store b { font-size: 24px; font-weight: 700; letter-spacing: -.02em; font-family: -apple-system, system-ui, var(--font); }
.store.sm { height: 48px; padding: 0 16px 0 13px; border-radius: 11px; }
.store.sm svg { width: 22px; height: 22px; }
.store.sm b { font-size: 19px; }
.store.sm small { font-size: 10px; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 32px; }
.cta-note { font-size: 15px; font-weight: 600; color: var(--ink-2); line-height: 1.35; }
.cta-note b { color: var(--ink); }
.trust { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 28px; font-size: 15px; font-weight: 700; color: var(--ink-2); }
.trust li { display: inline-flex; align-items: center; gap: 7px; }
.trust svg { width: 17px; height: 17px; flex: none; }

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden;
  padding: calc(64px + clamp(28px, 4vw, 48px)) 0 clamp(56px, 6vw, 80px);
  background: radial-gradient(58% 68% at 80% 46%, color-mix(in srgb, var(--accent) 26%, transparent) 0%, transparent 70%), var(--bg);
}
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: clamp(32px, 6vw, 88px); }
.hero h1 { font-size: clamp(46px, 6.6vw, 84px); line-height: 1.0; }
.hero .lede { margin-top: 22px; max-width: 30ch; }
.hero-device { display: flex; flex-direction: column; align-items: center; }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero-copy { text-align: center; display: flex; flex-direction: column; align-items: center; }
  .hero .lede { margin-inline: auto; }
  .cta-row, .trust { justify-content: center; }
}

/* ---------- phones ---------- */
.phone {
  position: relative; width: clamp(272px, 21vw, 300px); aspect-ratio: 9 / 19.5; flex: none;
  border-radius: 52px; padding: 11px; background: var(--device);
  box-shadow: 0 0 0 1.5px #2c2836, 0 50px 90px -40px rgba(22, 17, 43, .6), 0 24px 40px -24px rgba(22, 17, 43, .35);
}
.phone-screen { position: relative; height: 100%; border-radius: 42px; overflow: hidden; isolation: isolate; color: #fff; background: var(--night) center / cover no-repeat; }
.island { position: absolute; z-index: 5; top: 11px; left: 50%; transform: translateX(-50%); width: 96px; height: 29px; border-radius: 999px; background: #000; }

/* the focus screen – the app's own layout */
.scene-layer { position: absolute; inset: 0; z-index: -1; }
.scene-layer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s ease; }
.scene-layer img.in { opacity: 1; }
.scene-layer::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 9, 26, .28), rgba(12, 9, 26, .12) 35%, rgba(12, 9, 26, .5)); }
.focus-screen { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 52px; text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
.fs-top { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0 14px; }
.fs-btn, .goal-pill { background: var(--glass); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.fs-btn { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; }
.fs-btn svg { width: 15px; height: 15px; }
.goal-pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px; border-radius: 999px; font-weight: 800; font-size: 14px; }
.goal-pill svg { width: 15px; height: 15px; }
.orb { position: relative; width: 172px; height: 172px; margin: 30px 0 16px; flex: none; }
.orb .ring { position: absolute; inset: 0; transform: rotate(-90deg); overflow: visible; }
.ring-track { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 5; }
.ring-fill { fill: none; stroke: #ffa45c; stroke-width: 5; stroke-linecap: round; transition: stroke-dasharray .6s linear; filter: drop-shadow(0 0 5px rgba(255, 164, 92, .55)); }
.orb .glow { position: absolute; inset: 15px; border-radius: 50%; background: radial-gradient(circle at 50% 42%, rgba(255, 236, 214, .5), rgba(255, 196, 150, .14) 64%, rgba(255, 196, 150, .05)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.orb .ground { position: absolute; left: 50%; bottom: 36px; width: 108px; transform: translateX(-50%); }
.orb .pet { position: absolute; left: 50%; bottom: 39px; width: 96px; transform: translateX(-50%); }
.pet.idle { animation: idle 7s steps(1) infinite; }
@keyframes idle { 0%, 88%, 100% { translate: 0 0; } 90%, 94% { translate: 0 -3px; } 92% { translate: 0 0; } }
.pet.cheer { animation: cheer .7s ease-out 2; }
@keyframes cheer { 30% { translate: 0 -12px; } 60% { translate: 0 0; } 80% { translate: 0 -4px; } }
.stage-project { font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.stage-status { font-size: 15px; font-weight: 600; opacity: .88; min-height: 22px; }
.clock { font-size: 56px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; margin: 8px 0 8px; }
.stage-goal { font-size: 13px; font-weight: 600; opacity: .82; min-height: 20px; padding: 0 16px; }
.controls { display: flex; gap: 24px; margin-top: auto; padding-bottom: 38px; }
.ctl {
  width: 66px; height: 66px; border-radius: 50%; border: 1px solid var(--glass-line); cursor: pointer;
  background: var(--glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-weight: 700; font-size: 12px; color: #fff; transition: transform .15s;
}
.ctl:hover { transform: scale(1.06); }
.ctl:active { transform: scale(.95); }
.ctl svg { width: 20px; height: 20px; }
.ctl-finish { background: rgba(240, 138, 60, .8); border-color: rgba(255, 214, 178, .45); }
.saved { display: none; flex-direction: column; align-items: center; gap: 12px; margin-top: auto; padding-bottom: 34px; }
.focus-screen.is-saved .controls { display: none; }
.focus-screen.is-saved .saved { display: flex; }
.app-button { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 800; font-size: 15px; color: #fff; padding: 13px 22px; border-radius: 999px; background: linear-gradient(180deg, #e29a5c, #c56e2f); box-shadow: 0 8px 20px -8px rgba(197, 110, 47, .8), inset 0 1px 0 rgba(255, 255, 255, .3); text-shadow: none; }
.app-button svg { width: 16px; height: 16px; }
.saved .again { background: none; border: 0; color: #fff; font-weight: 700; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; opacity: .9; }

/* scene picker */
.swatches { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 26px; max-width: 400px; }
.swatch { width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 0; cursor: pointer; background: var(--bg-2) center / cover no-repeat; box-shadow: 0 0 0 1px var(--line); transition: transform .15s, box-shadow .15s; }
.swatch:hover { transform: scale(1.12); }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.swatch-label { text-align: center; margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.swatch-label b { color: var(--ink); }
@media (max-width: 1100px) { .swatches { gap: 6px; } .swatch { width: 26px; height: 26px; } }

/* ---------- sections ---------- */
.section { padding-block: var(--section); }
.alt { background: var(--bg-2); }
.section-head { text-align: center; max-width: 660px; margin: 0 auto clamp(40px, 5vw, 64px); }
.section-head h2, .split h2 { font-size: clamp(34px, 4.6vw, 54px); }
.section-head .lede { margin-top: 16px; }

/* how it works */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.step { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 30px 30px 0; overflow: hidden; display: flex; flex-direction: column; }
.step-n { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-weight: 800; font-size: 15px; margin-bottom: 18px; }
.step h3 { font-size: 23px; letter-spacing: -.015em; }
.step p { margin: 8px 0 30px; color: var(--ink-2); }
.step .shot { margin: auto auto 0; width: 86%; height: 300px; border: 7px solid var(--device); border-bottom: 0; border-radius: 30px 30px 0 0; overflow: hidden; background: var(--device); }
.step .shot img { width: 100%; }
@media (max-width: 900px) {
  .steps { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; padding: 4px var(--gutter) 24px; margin-inline: calc(-1 * var(--gutter)); scrollbar-width: none; }
  .steps::-webkit-scrollbar { display: none; }
  .step { flex: 0 0 min(82%, 340px); scroll-snap-align: center; padding: 26px 24px 0; }
}

/* split rows */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 96px); align-items: center; }
.split .lede { margin-top: 18px; max-width: 34ch; }
.split .visual { display: flex; justify-content: center; }
.surface-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.surface-list li { font-size: 14px; font-weight: 700; padding: 8px 14px; border-radius: 999px; background: var(--card); box-shadow: var(--shadow); }
.ticks { display: grid; gap: 14px; margin-top: 30px; }
.ticks li { display: flex; gap: 12px; align-items: center; font-weight: 700; font-size: 17px; }
.ticks li::before { content: ""; width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5l2.6 2.5L12 5.5'/%3E%3C/svg%3E") center / 14px no-repeat; }
.device-shot { width: min(340px, 84vw); border: 8px solid var(--device); border-radius: 38px; overflow: hidden; background: var(--device); box-shadow: 0 50px 90px -40px rgba(22, 17, 43, .55); }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; text-align: center; }
  .split .lede { margin-inline: auto; }
  .surface-list { justify-content: center; }
  .ticks { width: fit-content; margin-inline: auto; text-align: left; }
  .split .visual { order: 2; }
}

/* lock screen phone */
.phone-screen.lock::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .15), transparent 40%, rgba(0, 0, 0, .35)); }
.ls-time { position: relative; z-index: 1; text-align: center; margin-top: 62px; }
.ls-time small { display: block; font-size: 15px; font-weight: 700; opacity: .9; }
.ls-time b { display: block; font-size: 74px; font-weight: 700; letter-spacing: -.03em; line-height: 1; font-family: -apple-system, system-ui, var(--font); }
.island.live { width: auto; min-width: 124px; display: flex; align-items: center; justify-content: space-between; gap: 34px; padding: 0 12px 0 7px; height: 32px; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; color: #ffb06e; }
.island.live img { width: 22px; height: 22px; }
.activity {
  position: absolute; z-index: 1; left: 10px; right: 10px; bottom: 44px;
  border-radius: 24px; padding: 14px; display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 2px 12px;
  background: rgba(20, 16, 34, .55); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, .12);
}
.activity img { width: 52px; height: 52px; grid-row: span 2; }
.activity .t { font-weight: 800; font-size: 15px; }
.activity .s { font-size: 12px; opacity: .78; font-weight: 600; }
.activity .c { grid-row: span 2; font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; color: #ffb06e; letter-spacing: -.02em; }
.activity .bar { grid-column: 1 / -1; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .18); overflow: hidden; margin-top: 10px; }
.bar i { display: block; height: 100%; width: 0; background: #ffa45c; border-radius: inherit; transition: width .6s linear; }

/* scenes gallery */
.scenes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.scene-card { position: relative; aspect-ratio: 4 / 5; border: 0; padding: 0; border-radius: 22px; overflow: hidden; cursor: pointer; background: var(--bg-2); box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s; }
.scene-card:hover { transform: translateY(-4px); }
.scene-card img { width: 100%; height: 100%; object-fit: cover; }
.scene-card span { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 8px; border-radius: 13px; background: rgba(16, 12, 30, .48); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; font-size: 13px; font-weight: 800; text-align: center; }
.scene-card[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--bg-2), 0 0 0 6px var(--accent); }
@media (max-width: 900px) {
  .scenes { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding: 6px var(--gutter) 22px; margin-inline: calc(-1 * var(--gutter)); scrollbar-width: none; }
  .scenes::-webkit-scrollbar { display: none; }
  .scene-card { flex: 0 0 min(44%, 200px); scroll-snap-align: center; }
}

/* companions */
.cast { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 700px; margin-inline: auto; }
.cast figure { margin: 0; width: 104px; background: var(--card); border-radius: 22px; padding: 14px 6px 12px; text-align: center; box-shadow: var(--shadow); }
.cast img { width: 64px; height: 64px; margin: 0 auto 6px; }
.cast figcaption { font-size: 12px; font-weight: 800; color: var(--ink-2); }
.cast .secret { background: linear-gradient(160deg, #2a2150, #16112b); }
.cast .secret img { filter: drop-shadow(0 0 8px rgba(190, 170, 255, .7)); }
.cast .secret figcaption { color: #cfc4ff; }
.collections { text-align: center; margin: 32px auto 0; max-width: 560px; color: var(--ink-2); font-weight: 700; font-size: 15px; }
@media (max-width: 480px) { .cast figure { width: calc(33.33% - 8px); } }

/* Mac teaser */
.mac-card { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px, 5vw, 64px); align-items: center; background: var(--card); border-radius: 36px; padding: clamp(28px, 5vw, 56px); box-shadow: var(--shadow); }
.mac-card h2 { font-size: clamp(32px, 4vw, 46px); }
.mac-card .lede { margin-top: 14px; }
.mac-card .appmark { width: 64px; height: 64px; margin-bottom: 20px; }
.mac-card .ticks { margin: 24px 0 30px; }
.mac-card .cta-row { margin-top: 0; }
.text-link { font-weight: 800; color: var(--accent-text); text-decoration: none; }
.text-link:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .mac-card { grid-template-columns: 1fr; text-align: center; } .mac-card .appmark { margin-inline: auto; } .mac-card .ticks { width: fit-content; margin-inline: auto; text-align: left; } .mac-card .cta-row { justify-content: center; } }

/* Mac desktop mock */
.desk { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; color: #fff; text-decoration: none; background: var(--night) center / cover no-repeat; box-shadow: 0 0 0 1px var(--line), 0 40px 80px -36px rgba(22, 17, 43, .55); }
.menubar { position: absolute; inset: 0 0 auto; height: 28px; display: flex; align-items: center; gap: 16px; padding: 0 12px; font-size: 12.5px; font-weight: 600; background: rgba(20, 16, 34, .4); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); font-family: -apple-system, system-ui, var(--font); }
.menubar .apple { width: 13px; height: 13px; }
.menubar b { font-weight: 800; }
.menubar .right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.menubar .mb-pet { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border-radius: 6px; background: rgba(255, 255, 255, .18); font-variant-numeric: tabular-nums; }
.menubar .mb-pet img { width: 16px; height: 16px; }
.notch {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 2;
  width: 170px; height: 28px; border-radius: 0 0 14px 14px; background: #000; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 8px;
  font-size: 13px; font-weight: 700; color: #ffb06e; font-variant-numeric: tabular-nums;
  transition: height .35s cubic-bezier(.3, 1.3, .5, 1), width .35s cubic-bezier(.3, 1.3, .5, 1), border-radius .35s;
}
.notch img { width: 20px; height: 20px; }
.notch .open { display: none; }
.notch.can-open:hover, .notch.can-open:focus-visible, .notch.peek { width: 290px; height: 92px; border-radius: 0 0 26px 26px; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 10px 14px; gap: 6px; }
.notch.can-open:hover .closed, .notch.can-open:focus-visible .closed, .notch.peek .closed { display: none; }
.notch.can-open:hover .open, .notch.can-open:focus-visible .open, .notch.peek .open { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 2px 10px; width: 100%; color: #fff; }
.notch .open img { width: 34px; height: 34px; grid-row: span 2; }
.notch .open .c { grid-row: span 2; font-size: 26px; color: #ffb06e; }
.notch .open small { font-size: 11px; opacity: .7; font-weight: 600; white-space: nowrap; }
.notch .open .bar { grid-column: 1 / -1; height: 5px; border-radius: 9px; background: rgba(255, 255, 255, .18); overflow: hidden; margin-top: 6px; }
.window-mock { position: absolute; left: 7%; top: 18%; width: 46%; height: 58%; border-radius: 12px; background: rgba(255, 255, 255, .86); box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .5); padding: 30px 16px 16px; }
.window-mock::before { content: ""; position: absolute; top: 11px; left: 12px; width: 44px; height: 10px; background: radial-gradient(circle at 5px 5px, #ff5f57 4.5px, transparent 5px), radial-gradient(circle at 21px 5px, #febc2e 4.5px, transparent 5px), radial-gradient(circle at 37px 5px, #28c840 4.5px, transparent 5px); }
.window-mock i { display: block; height: 8px; border-radius: 4px; background: rgba(43, 29, 22, .12); margin-bottom: 10px; }
.window-mock i:nth-child(1) { width: 60%; height: 12px; background: rgba(43, 29, 22, .22); }
.window-mock i:nth-child(3) { width: 85%; }
.window-mock i:nth-child(4) { width: 70%; }
.floater { position: absolute; right: 7%; bottom: 9%; width: 108px; text-align: center; touch-action: none; user-select: none; }
.floater.draggable { cursor: grab; }
.floater .fring { position: relative; display: block; width: 96px; height: 96px; margin: 0 auto; }
.floater svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.floater .fring img { position: absolute; left: 50%; top: 50%; width: 64px; transform: translate(-50%, -54%); filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .35)); }
.floater .t { display: inline-block; margin-top: 4px; padding: 2px 9px; border-radius: 99px; background: rgba(20, 16, 34, .55); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.desk-note { font-size: 14px; font-weight: 600; color: var(--ink-2); margin-top: 14px; text-align: center; }
@media (max-width: 560px) {
  .menubar .hide-xs, .window-mock { display: none; }
  .notch { width: 132px; }
  .floater { transform: scale(.8); transform-origin: 100% 100%; }
}

/* Mac page */
.mac-hero .hero-grid { grid-template-columns: .95fr 1.05fr; }
.mac-hero h1 { font-size: clamp(42px, 4.6vw, 64px); }
.mac-hero .hero-device { width: 100%; }
@media (max-width: 900px) { .mac-hero .hero-grid { grid-template-columns: 1fr; } }
.places { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.place { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.place .pv { height: 160px; position: relative; background: var(--night) center / cover no-repeat; display: flex; align-items: center; justify-content: center; }
.place .pv > * { position: relative; z-index: 1; }
.place .body { padding: 24px 28px 28px; }
.place h3 { font-size: 22px; margin-bottom: 6px; }
.place p { color: var(--ink-2); font-size: 16px; }
.pv-menubar { display: flex; align-items: center; gap: 12px; padding: 6px 12px; border-radius: 9px; background: rgba(20, 16, 34, .5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.pv-menubar span { display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, .18); padding: 2px 8px; border-radius: 6px; }
.pv-menubar img { width: 18px; height: 18px; }
.pv-island { display: flex; align-items: center; justify-content: space-between; gap: 46px; padding: 6px 14px 6px 8px; border-radius: 0 0 16px 16px; background: #000; color: #ffb06e; font-weight: 700; font-variant-numeric: tabular-nums; align-self: flex-start; }
.pv-island img { width: 24px; height: 24px; }
.pv-float { text-align: center; color: #fff; }
.pv-float img { width: 72px; margin: 0 auto; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .4)); }
.pv-float span { display: inline-block; margin-top: 4px; padding: 2px 9px; border-radius: 99px; background: rgba(20, 16, 34, .55); font-size: 12px; font-weight: 800; }
.sync { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 4vw, 40px); flex-wrap: wrap; }
.device { background: var(--card); border-radius: 22px; box-shadow: var(--shadow); padding: 18px 24px; display: flex; align-items: center; gap: 14px; min-width: 230px; }
.device img { width: 48px; height: 48px; }
.device b { display: block; font-size: 15px; }
.device span { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent-text); letter-spacing: -.02em; }
.sync-arrows { font-size: 28px; color: var(--accent-text); font-weight: 800; }
.keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 40px; }
.keys span { display: inline-flex; align-items: center; gap: 10px; background: var(--card); border-radius: 14px; padding: 8px 14px; box-shadow: var(--shadow); font-weight: 700; font-size: 14px; }
.keys kbd { font-family: -apple-system, system-ui, var(--font); font-size: 13px; font-weight: 700; background: var(--bg-2); border-radius: 7px; padding: 3px 8px; }
.calm { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.calm > div { background: var(--card); border-radius: 24px; padding: 24px; box-shadow: var(--shadow); }
.calm svg { width: 28px; height: 28px; color: var(--accent); margin-bottom: 14px; }
.calm h3 { font-size: 18px; margin-bottom: 6px; letter-spacing: -.01em; }
.calm p { font-size: 15px; color: var(--ink-2); }
@media (max-width: 900px) { .places { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } .calm { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .calm { grid-template-columns: 1fr; } }

/* FAQ */
.faq { max-width: 760px; margin-inline: auto; display: grid; gap: 10px; }
.faq details { background: var(--card); border-radius: 18px; box-shadow: var(--shadow); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 56px 20px 24px; font-weight: 800; font-size: 17px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: 600; color: var(--accent-text); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 24px 22px; color: var(--ink-2); }

/* closing banner */
.final { position: relative; isolation: isolate; color: #fff; text-align: center; overflow: hidden; background: var(--night); padding-block: clamp(88px, 11vw, 144px); }
.final .bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.final::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14, 10, 30, .5), rgba(14, 10, 30, .66)); }
.final h2 { font-size: clamp(36px, 5.4vw, 60px); text-shadow: 0 2px 20px rgba(0, 0, 0, .4); }
.final p { margin: 14px auto 0; max-width: 34ch; font-size: 19px; opacity: .92; }
.final .pet { width: 120px; margin: 0 auto 20px; }
.final .cta-row { justify-content: center; }

/* footer */
.footer { padding: 40px 0 48px; font-size: 15px; color: var(--ink-2); border-top: 1px solid var(--line); }
.footer .wrap { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; }
.footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer a { text-decoration: none; font-weight: 700; }
.footer a:hover { color: var(--ink); }
.footer .brand { color: var(--ink); font-size: 17px; }
.footer .brand img { width: 28px; height: 28px; }
@media (max-width: 900px) { .footer { padding-bottom: calc(108px + env(safe-area-inset-bottom)); } .footer .wrap { flex-direction: column; text-align: center; } .footer nav { justify-content: center; } }

/* sticky phone CTA */
.sticky-cta {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 40;
  display: none; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border-radius: 20px;
  background: color-mix(in srgb, var(--card) 90%, transparent); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: 0 12px 40px -10px rgba(22, 17, 43, .45), 0 0 0 1px var(--line);
  transform: translateY(140%); transition: transform .35s ease;
}
.sticky-cta.show { transform: none; }
.sticky-cta img { width: 44px; height: 44px; border-radius: 22.5%; }
.sticky-cta div { line-height: 1.2; }
.sticky-cta b { display: block; font-size: 16px; }
.sticky-cta small { font-size: 13px; color: var(--ink-2); font-weight: 600; }
.sticky-cta a { margin-left: auto; background: #000; color: #fff; text-decoration: none; font-weight: 800; padding: 11px 20px; border-radius: 14px; font-size: 15px; }
@media (max-width: 900px) { .sticky-cta { display: flex; } }

/* cookie notice */
.consent { position: fixed; z-index: 60; left: 16px; bottom: 16px; max-width: 360px; background: var(--card); color: var(--ink); border-radius: 18px; padding: 16px 18px; font-size: 14px; box-shadow: 0 16px 50px -12px rgba(22, 17, 43, .45), 0 0 0 1px var(--line); }
.consent p { color: var(--ink-2); }
.consent a { font-weight: 700; }
.consent div { display: flex; gap: 8px; margin-top: 12px; }
.consent button { flex: 1; border: 0; border-radius: 12px; padding: 10px; font-weight: 800; cursor: pointer; background: var(--bg-2); }
.consent button[data-c="granted"] { background: var(--ink); color: var(--bg); }
@media (max-width: 900px) { .consent { left: 12px; right: 12px; bottom: calc(88px + env(safe-area-inset-bottom)); max-width: none; } }

/* ---------- document pages (privacy, support, 404) ---------- */
.doc { padding: calc(64px + clamp(40px, 6vw, 72px)) 0 var(--section); }
.doc .wrap { max-width: 760px; }
.doc h1 { font-size: clamp(36px, 5vw, 52px); margin-bottom: 10px; }
.doc .updated { color: var(--ink-2); font-weight: 600; margin-bottom: 32px; }
.doc h2 { font-size: 26px; margin: 44px 0 12px; }
.doc h3 { font-size: 19px; margin: 28px 0 6px; letter-spacing: -.01em; }
.doc p, .doc li { color: var(--ink-2); }
.doc p + p { margin-top: 12px; }
.doc ul { padding-left: 22px; list-style: disc; margin-top: 10px; }
.doc li + li { margin-top: 6px; }
.doc a { color: var(--accent-text); font-weight: 700; }
.doc strong { color: var(--ink); }
.contact-card { background: var(--card); border-radius: 22px; padding: 26px 28px; box-shadow: var(--shadow); }
.contact-card h2 { margin-top: 0; }
.contact-card p + p { margin-top: 10px; }
.doc-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 56px; padding: 24px; border-radius: 22px; background: var(--bg-2); }
.doc-cta img { width: 56px; height: 56px; border-radius: 22.5%; }
.doc-cta div { flex: 1; min-width: 180px; }
.doc-cta b { display: block; font-size: 18px; color: var(--ink); }
.doc-cta span { color: var(--ink-2); font-size: 15px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}
@media (hover: none) { .swatch-label .hint { display: none; } }