:root {
  --ink:#17201d;
  --paper:#f5f0e7;
  --line:rgba(23,32,29,.16);
  --muted:#58645d;
  --accent:#f28061;
  --soft:#f9c6a6;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Avenir Next","SF Pro Display",system-ui,sans-serif; }
body.theme-tahoo { --accent:#619d94; --soft:#9fded3; }
body.theme-galleri { --accent:#8faee1; --soft:#b7cdf5; }
a { color:inherit; text-decoration:none; }
.wrap { width:min(1180px,calc(100% - 40px)); margin:auto; }
.site-header { position:relative; z-index:2; }
.site-nav { min-height:82px; display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid var(--line); }
.wordmark { font-size:1.25rem; font-weight:700; letter-spacing:-.06em; }
.wordmark i { display:inline-block; width:.46em; height:.46em; margin-left:.08em; border-radius:50%; background:var(--accent); }
.site-nav nav { display:flex; align-items:center; gap:22px; font-size:.9rem; }
.site-nav nav a:not(.nav-pill):hover { text-decoration:underline; text-underline-offset:4px; }
.nav-pill,.button { display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:0 14px; border:1px solid var(--ink); border-radius:999px; font:500 .7rem ui-monospace,"SFMono-Regular",monospace; text-transform:uppercase; letter-spacing:.05em; transition:transform .2s ease,background .2s ease; }
.nav-pill:hover,.button:not([aria-disabled="true"]):hover { background:var(--accent); transform:rotate(-1.5deg); }
.button[aria-disabled="true"] { opacity:.5; cursor:not-allowed; }
.page-hero { min-height:calc(100dvh - 82px); display:grid; grid-template-columns:minmax(0,1fr) minmax(330px,.82fr); align-items:center; gap:9%; padding:78px 0 96px; }
.eyebrow,.label { display:block; margin:0 0 20px; font:500 .72rem ui-monospace,"SFMono-Regular",monospace; text-transform:uppercase; letter-spacing:.09em; }
.eyebrow::before { content:""; display:inline-block; width:9px; height:9px; margin-right:9px; border-radius:50%; background:var(--accent); }
h1,h2,h3,p { margin-top:0; }
h1 { max-width:680px; margin-bottom:26px; font-size:clamp(3.4rem,7vw,6.6rem); line-height:.9; letter-spacing:-.077em; font-weight:600; }
h1 em { color:var(--accent); font-style:normal; }
.lede { max-width:570px; margin-bottom:30px; font-size:clamp(1.1rem,2vw,1.45rem); line-height:1.38; letter-spacing:-.025em; }
.hero-actions,.store-links { display:flex; flex-wrap:wrap; gap:10px; }
.visual { position:relative; display:grid; min-height:560px; place-items:center; overflow:hidden; border:1px solid var(--ink); background:var(--soft); border-radius:44% 56% 51% 49%; }
.visual::before { content:""; position:absolute; width:120%; aspect-ratio:1; top:-58%; right:-38%; border:1px dashed rgba(23,32,29,.34); border-radius:50%; animation:turn 26s linear infinite; }
.visual::after { content:""; position:absolute; width:48%; aspect-ratio:1; bottom:-18%; left:-13%; border:1px solid var(--ink); border-radius:42% 58% 48% 52%; transform:rotate(-22deg); }
.visual-caption { position:absolute; z-index:2; right:22px; bottom:18px; padding:6px 8px; border:1px solid rgba(23,32,29,.34); background:rgba(245,240,231,.75); font:500 .61rem ui-monospace,"SFMono-Regular",monospace; text-transform:uppercase; letter-spacing:.05em; }
.device { position:relative; z-index:1; width:min(69%,350px); aspect-ratio:.52; padding:10px; border:1px solid var(--ink); border-radius:35px; background:#f5f0e7; transform:rotate(7deg); box-shadow:12px 14px 0 rgba(23,32,29,.11); }
.device::before { content:""; position:absolute; z-index:2; top:15px; left:50%; width:32%; height:14px; border-radius:99px; background:var(--ink); transform:translateX(-50%); }
.screen { position:relative; height:100%; overflow:hidden; padding:35px 18px 20px; border:1px solid rgba(23,32,29,.35); border-radius:27px; background:var(--paper); }
.screen-kicker { display:block; color:var(--muted); font:500 .58rem ui-monospace,"SFMono-Regular",monospace; text-transform:uppercase; letter-spacing:.08em; }
.screen-title { display:block; margin-top:8px; font-size:1.35rem; letter-spacing:-.06em; font-weight:650; }
.sample-tag { position:absolute; z-index:3; top:16px; right:16px; padding:5px 7px; border:1px solid rgba(23,32,29,.3); background:rgba(245,240,231,.84); font:500 .56rem ui-monospace,"SFMono-Regular",monospace; text-transform:uppercase; letter-spacing:.05em; }
.focus-ring { position:absolute; top:52%; left:50%; display:grid; width:58%; aspect-ratio:1; place-items:center; border:10px solid var(--accent); border-left-color:rgba(23,32,29,.14); border-radius:50%; transform:translate(-50%,-40%) rotate(-25deg); }
.focus-ring span { font-size:2.55rem; letter-spacing:-.08em; font-weight:650; }
.focus-ring small { margin-top:-14px; font-size:.66rem; }
.tahoo-screen { background:#f6fbf9; }
.tahoo-path { display:grid; gap:10px; margin-top:38px; }
.tahoo-path span { display:block; padding:13px; border:1px solid var(--ink); border-radius:16px 4px 16px 4px; background:#9fded3; font-size:.72rem; font-weight:600; }
.tahoo-path span:nth-child(2) { margin-left:22px; background:#f5f0e7; }
.tahoo-path span:nth-child(3) { margin-left:8px; background:#d8f06b; }
.galleri-screen { background:#f8f5f2; }
.gallery-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:8px; margin-top:30px; }
.gallery-grid span { min-height:92px; padding:10px; border:1px solid var(--ink); background:#f9c6a6; font-size:.58rem; font-weight:600; }
.gallery-grid span:nth-child(2) { background:#b7cdf5; border-radius:50% 50% 12px 12px; }
.gallery-grid span:nth-child(3) { grid-column:1 / -1; min-height:150px; background:#e6b9d5; border-radius:20px 6px 20px 6px; }
.clock-face span { font-size:1rem; letter-spacing:-.04em; }
.sample-note { max-width:760px; margin:0 auto 0 0; padding:15px 17px; border-left:3px solid var(--accent); background:rgba(23,32,29,.055); font-size:.9rem; line-height:1.45; }
.content-section { padding:120px 0; border-top:1px solid var(--line); }
.content-heading { display:grid; grid-template-columns:1fr 2fr; gap:10%; align-items:start; margin-bottom:72px; }
.content-heading h2 { max-width:680px; margin:0; font-size:clamp(2.35rem,4.6vw,4.6rem); line-height:.95; letter-spacing:-.065em; }
.content-heading p { max-width:590px; margin:5px 0 0; font-size:1.17rem; line-height:1.47; }
.feature-list { margin:0; padding:0; list-style:none; border-top:1px solid var(--ink); }
.feature-list li { display:grid; grid-template-columns:92px minmax(0,1fr); gap:24px; padding:27px 0; border-bottom:1px solid var(--ink); }
.feature-list b { font:500 .72rem ui-monospace,"SFMono-Regular",monospace; text-transform:uppercase; letter-spacing:.08em; }
.feature-list p { max-width:720px; margin:0; font-size:1.14rem; line-height:1.45; }
.store-section { background:var(--ink); color:var(--paper); }
.store-grid { display:grid; grid-template-columns:1fr .95fr; gap:12%; align-items:end; }
.store-grid h2 { max-width:650px; margin:0; font-size:clamp(2.45rem,4.5vw,4.6rem); line-height:.95; letter-spacing:-.065em; }
.store-grid p { max-width:510px; margin:0 0 22px; font-size:1.15rem; line-height:1.45; }
.store-section .button { border-color:var(--paper); color:var(--paper); }
.store-section .button[aria-disabled="true"] { background:transparent; }
.next-link { display:flex; align-items:center; justify-content:space-between; margin-top:18px; padding-top:18px; border-top:1px solid rgba(245,240,231,.38); font-weight:600; }
.next-link:hover { color:#d8f06b; }
.about-hero { grid-template-columns:minmax(0,1.12fr) minmax(290px,.7fr); }
.portrait { position:relative; display:grid; width:min(78%,360px); aspect-ratio:1; place-items:center; overflow:hidden; border:1px solid var(--ink); border-radius:48% 52% 59% 41%; background:#f28061; color:var(--ink); font-size:clamp(5rem,11vw,9rem); letter-spacing:-.12em; font-weight:650; transform:rotate(-5deg); }
.portrait::before { content:""; position:absolute; width:72%; aspect-ratio:1; border:1px dashed var(--ink); border-radius:50%; }
.portrait span { position:relative; z-index:1; }
.about-facts { display:grid; grid-template-columns:1fr 1fr; gap:0; margin:72px 0 0; border-top:1px solid var(--ink); }
.about-facts div { min-height:142px; padding:20px 0; border-bottom:1px solid var(--ink); }
.about-facts div:nth-child(odd) { padding-right:28px; border-right:1px solid var(--ink); }
.about-facts div:nth-child(even) { padding-left:28px; }
.about-facts dt { margin-bottom:8px; font:500 .68rem ui-monospace,"SFMono-Regular",monospace; text-transform:uppercase; letter-spacing:.08em; }
.about-facts dd { margin:0; font-size:1.08rem; line-height:1.35; }
.principle { max-width:760px; margin:0 0 0 auto; font-size:clamp(1.55rem,3.25vw,3rem); line-height:1.08; letter-spacing:-.055em; }
.profile-disclaimer { margin-top:22px; color:var(--muted); font-size:.76rem; line-height:1.4; }
.site-footer { padding:28px 0 35px; font:400 .7rem ui-monospace,"SFMono-Regular",monospace; text-transform:uppercase; letter-spacing:.04em; }
.site-footer .wrap { display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; }
.site-footer a:hover { text-decoration:underline; text-underline-offset:4px; }
@keyframes turn { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; scroll-behavior:auto!important; } }
@media (max-width:720px) {
  .wrap { width:min(100% - 32px,1180px); }
  .site-nav { min-height:72px; }
  .site-nav nav a:not(.nav-pill) { display:none; }
  .page-hero,.about-hero,.store-grid { grid-template-columns:1fr; gap:44px; min-height:0; padding:56px 0 76px; }
  h1 { font-size:clamp(3rem,13vw,4.7rem); }
  .visual { min-height:480px; width:min(100%,480px); justify-self:center; }
  .content-section { padding:78px 0; }
  .content-heading { grid-template-columns:1fr; gap:24px; margin-bottom:48px; }
  .content-heading p { margin-top:0; }
  .feature-list li { grid-template-columns:64px minmax(0,1fr); gap:15px; }
  .about-facts { margin-top:50px; }
}
@media (max-width:430px) {
  .site-nav nav { gap:10px; }
  .nav-pill { padding:0 11px; font-size:.64rem; }
  h1 { font-size:clamp(2.85rem,14vw,3.75rem); }
  .visual { min-height:420px; }
  .device { width:73%; border-radius:29px; }
  .screen { border-radius:22px; }
  .store-links .button { width:100%; }
  .about-facts { grid-template-columns:1fr; }
  .about-facts div:nth-child(odd),.about-facts div:nth-child(even) { padding:18px 0; border-right:0; }
}