/* WiseLife product site: extend the existing prototype, retaining its app styles. */
:root{--site-background:#f0f3f5;--site-panel:#f9fafb;--site-button-text:#fff;--site-nav-bg:rgba(240,243,245,.94);--site-header-height:64px}
html{scroll-behavior:smooth;scroll-padding-top:var(--site-header-height)}
.wiselife-site{background:var(--site-background)}
.site-skip{position:fixed;left:16px;top:-80px;z-index:20;background:var(--paper);padding:12px 20px;border-radius:12px}.site-skip:focus{top:12px}
.site-header{height:var(--site-header-height);position:sticky;top:0;z-index:10;background:var(--site-nav-bg);border-bottom:1px solid var(--line);backdrop-filter:blur(18px)}
.site-nav-wrap{height:100%;max-width:1360px;margin:auto;padding:0 40px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.site-header .wordmark{font-size:22px;letter-spacing:-.8px}.site-header .brand-mark{width:28px;height:28px;border-radius:9px}
.site-nav{display:flex;align-items:center;gap:32px;height:100%}.site-nav a{font-size:12px;color:var(--secondary);position:relative;display:flex;align-items:center;height:100%;white-space:nowrap}
.site-nav a::after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--accent);transform:scaleX(0);transition:transform .2s}
.site-nav a[aria-current],.site-nav a:hover{color:var(--ink)}.site-nav a[aria-current]::after{transform:scaleX(1)}
.site-nav-cta{font-size:12px;display:flex;align-items:center;gap:8px;color:var(--accent)}.site-nav-cta .icon{width:15px;height:15px}
.site-screen{min-height:calc(100dvh - var(--site-header-height));scroll-margin-top:0}
.site-container{width:min(1200px,100%);margin:auto;padding:64px 40px}
/* Keep the desktop device proportionate when the browser is short. */
.wiselife-site .design-stage{--demo-phone-width:clamp(330px,calc((100dvh - 112px) * 390 / 844),390px);display:grid;min-height:calc(100dvh - var(--site-header-height));grid-template-columns:270px var(--demo-phone-width) 180px;gap:64px;padding:24px 32px}
.wiselife-site .phone-shell{width:var(--demo-phone-width);height:calc(var(--demo-phone-width) * 844 / 390);min-height:0;flex-shrink:0;container-type:inline-size}
@container(max-width:340px){
  .wiselife-site .dynamic-island{width:104px}
  .wiselife-site .metric{padding-left:12px}
  .wiselife-site .metric:first-child{padding-left:0}
  .wiselife-site .metric-value{font-size:18px;white-space:nowrap}
}
.wiselife-site .design-kicker{margin:0 0 24px;font-size:10px}
.wiselife-site .design-note h1{font-size:46px;line-height:1.35;letter-spacing:-2px;margin-bottom:24px}
.wiselife-site .design-description{font-size:14px;line-height:2}
.site-hero-actions{display:flex;align-items:flex-start;flex-direction:column;gap:20px;margin-top:30px}
.site-button{display:inline-flex;align-items:center;justify-content:center;gap:20px;min-height:46px;padding:12px 20px;background:var(--accent);color:var(--site-button-text);font-size:13px;border-radius:24px;white-space:nowrap}
.site-button .icon{width:16px;height:16px}.site-button:hover{filter:brightness(.9)}
.site-text-link{display:inline-flex;align-items:center;gap:7px;color:var(--accent);font-size:13px;font-weight:500;padding:4px 0;line-height:1.5;text-underline-offset:5px}.site-text-link .icon{width:15px;height:15px}.site-text-link:hover{text-decoration:underline}
.wiselife-site .design-footer{margin-top:36px}.wiselife-site .design-index{padding:0}.wiselife-site .index-caption{margin-top:45px}
.companion-screen{display:flex;align-items:center;overflow:hidden;border-top:1px solid var(--line);background:var(--paper)}
.companion-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,6vw,78px);align-items:center}
.companion-copy{max-width:520px}.companion-eyebrow{color:var(--accent);font-size:11px;font-weight:550;letter-spacing:.04em;margin:0 0 20px}
.companion-copy h2{font-size:clamp(34px,4.2vw,56px);font-weight:570;line-height:1.22;letter-spacing:-1.8px;text-wrap:balance;margin:0 0 22px}
.companion-lead{font-size:15px;line-height:1.95;color:var(--ink);margin:0 0 14px}.companion-privacy{font-size:12px;line-height:1.9;color:var(--secondary);margin:0 0 22px}
.companion-model{display:grid;gap:7px;padding:17px 19px;background:var(--site-background);border:1px solid var(--line);border-radius:16px}
.companion-model-label{font-size:10px;color:var(--secondary)}.companion-model strong{font-size:17px;font-weight:580;letter-spacing:-.25px}.companion-model small{font-size:10px;line-height:1.7;color:var(--secondary)}
.companion-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:22px}.companion-actions .site-button{gap:12px}
.companion-status{font-size:10px;color:var(--secondary);border:1px solid var(--line);border-radius:15px;padding:6px 10px}
.companion-disclaimer{font-size:10px;line-height:1.7;color:var(--secondary);margin:14px 0 0}
.companion-visual{min-width:0;margin:0}.companion-visual-stage{position:relative;isolation:isolate;overflow:hidden;border-radius:26px;background:#101821;box-shadow:0 24px 64px rgba(18,29,40,.17)}
.companion-devices-image{display:block;width:100%;height:auto;aspect-ratio:1672/941;object-fit:cover}
.companion-visual figcaption{font-size:10px;line-height:1.6;color:var(--secondary);text-align:right;margin-top:10px}
.hardware-screen{border-top:1px solid var(--line);background:var(--paper)}
.site-section-heading{text-align:center;max-width:700px;margin:0 auto 40px}.site-section-heading h2{font-size:clamp(32px,3.4vw,48px);font-weight:550;line-height:1.3;letter-spacing:-1.8px;margin:0 0 16px;text-wrap:balance}
.site-section-heading p{font-size:14px;line-height:1.9;color:var(--secondary);margin:0;text-wrap:balance}
.hardware-grid{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:28px;align-items:stretch}
.hardware-card{display:flex;flex-direction:column;min-width:0;background:var(--site-background);border-radius:28px;overflow:hidden}
.hardware-image{height:300px;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.watch-image img{height:258px;width:auto;max-width:90%;object-fit:contain;filter:drop-shadow(0 20px 17px rgba(32,39,46,.13));transition:transform .5s}
.ring-image{background:#090c10}.ring-image img{width:100%;height:100%;object-fit:cover;object-position:center 53%;transition:transform .5s}
.hardware-card:hover .hardware-image img{transform:scale(1.025)}
.hardware-copy{flex:1;padding:25px 30px 28px}.hardware-title{display:flex;gap:14px;align-items:center;justify-content:space-between}.hardware-title h3{font-size:25px;letter-spacing:-.8px;font-weight:580;margin:0}
.hardware-status{font-size:10px;font-weight:500;color:var(--green);white-space:nowrap}.hardware-status.upcoming{color:var(--secondary)}
.hardware-description{min-height:58px;margin:15px 0 18px;font-size:13px;line-height:1.9;color:var(--secondary)}
.hardware-capabilities{display:flex;flex-wrap:wrap;gap:8px 16px;color:var(--ink);font-size:11px;line-height:1.8}
.hardware-capabilities span+span{border-left:1px solid var(--line);padding-left:16px}
.hardware-links{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px;flex-wrap:wrap}
.source-link{font-size:11px;color:var(--secondary);line-height:1.6;text-underline-offset:4px}.source-link:hover{text-decoration:underline}
.hardware-footnote{font-size:11px;line-height:1.9;color:var(--secondary);margin:22px 0 0;padding-top:17px;border-top:1px solid var(--line)}
.watch-compatibility{border-top:1px solid var(--line);margin-top:22px;padding-top:17px}
.compatible-models{font-size:12px;line-height:1.8;margin:0 0 6px;color:var(--ink)}
.compatibility-note{font-size:11px;color:var(--secondary)}
.ownership-screen{display:flex;align-items:center;border-top:1px solid var(--line)}
.ownership-heading{margin-bottom:48px}
.ownership-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.ownership-feature{padding:0 0 25px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;align-items:flex-start}
.ownership-feature>.icon{width:27px;height:27px;color:var(--accent);margin-bottom:22px}.ownership-feature h3{font-size:19px;font-weight:550;line-height:1.4;letter-spacing:-.5px;margin:0 0 14px}
.ownership-feature p{color:var(--secondary);font-size:12px;line-height:1.95;margin:0 0 20px}.feature-detail{font-size:10px;line-height:1.8;color:var(--secondary);margin-top:auto}
.data-choice{margin-top:32px;padding:26px 30px;background:var(--site-panel);border:1px solid var(--line);border-radius:24px}
.data-choice-top{display:flex;align-items:center;justify-content:space-between;gap:20px}.data-choice-top h3{font-size:16px;font-weight:550;margin:0}
.data-choice-toggle{display:flex;border:1px solid var(--line);padding:3px;border-radius:25px;flex-shrink:0;background:var(--site-background)}
.data-choice-toggle button{font-size:11px;padding:9px 15px;border-radius:20px;white-space:nowrap}.data-choice-toggle button[aria-pressed="true"]{background:var(--accent);color:var(--site-button-text)}
.data-route{display:flex;align-items:center;gap:20px;margin-top:25px;font-size:13px}.data-route .icon{width:17px;height:17px;color:var(--secondary)}.data-route strong{font-weight:550;color:var(--accent)}
.data-mode-panel{min-height:102px}.data-mode-panel p{font-size:11px;color:var(--secondary);line-height:1.9;margin:15px 0}.data-choice>.site-text-link{font-size:11px}
.site-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1200px;margin:auto;padding:30px 40px;border-top:1px solid var(--line)}.site-footer .wordmark{font-size:20px}.site-footer p{font-size:11px;color:var(--secondary);margin:0}
/* Native dialogs stay anchored to the phone while the surrounding site is locked. */
html:has(.wiselife-site #sheet[open]){overflow:hidden;scroll-behavior:auto}
html{scrollbar-gutter:stable}
.site-reveal{opacity:1;transform:none}
@media(prefers-reduced-motion:no-preference){.site-reveal.is-waiting{opacity:0;transform:translateY(16px)}.site-reveal{transition:opacity .55s,transform .55s}}
:root[data-appearance="dark"]{--site-background:#0b1116;--site-panel:#141d25;--site-button-text:#11171d;--site-nav-bg:rgba(11,17,22,.94)}
:root[data-appearance="dark"] .wiselife-site{background:var(--site-background)}
:root[data-appearance="dark"] .hardware-card{background:#1b232b}
:root[data-appearance="dark"] .site-header .brand-mark{color:#11171d}
@media(min-width:1450px){.wiselife-site .design-stage{gap:90px}}
@media(min-width:901px){.hardware-screen .site-container{padding-top:38px;padding-bottom:38px}.hardware-screen .site-section-heading{max-width:850px;margin-bottom:28px}.hardware-screen .site-section-heading h2{font-size:clamp(32px,3vw,42px)}.hardware-screen .site-section-heading br{display:none}.hardware-screen .hardware-image{height:clamp(200px,27dvh,280px)}.hardware-screen .watch-image img{height:85%}.hardware-screen .hardware-copy{padding:22px 26px}.hardware-screen .hardware-description{min-height:0;margin:12px 0}.hardware-screen .watch-compatibility,.hardware-screen .hardware-footnote{margin-top:17px;padding-top:12px}}
@media(max-width:1190px){.wiselife-site .design-stage{grid-template-columns:270px var(--demo-phone-width);gap:70px}.wiselife-site .design-index{display:none}.site-container{padding:54px 32px}.hardware-copy{padding:24px}.ownership-grid{gap:22px}.ownership-feature h3{font-size:17px}}
@media(max-width:900px){.wiselife-site .design-stage{grid-template-columns:minmax(220px,280px) var(--demo-phone-width);gap:32px;padding:24px}.wiselife-site .design-note{display:block}.wiselife-site .design-note h1{font-size:38px}.site-nav-wrap{padding:0 24px}.site-nav{gap:24px}.site-nav-cta{display:none}.ownership-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}.hardware-image{height:250px}.watch-image img{height:215px}.hardware-title{align-items:flex-start;flex-direction:column;gap:8px}.hardware-capabilities{gap:5px 10px}.hardware-capabilities span+span{padding-left:10px}.data-route{gap:14px}}
@media(max-width:740px){.wiselife-site .design-stage{display:flex;justify-content:center;padding:22px 16px}.wiselife-site .design-note{display:none}.site-container{padding:44px 24px}.companion-layout{grid-template-columns:1fr;gap:26px}.companion-copy{max-width:640px}.companion-copy h2{font-size:clamp(34px,8vw,44px)}.companion-visual-stage{border-radius:20px}.companion-visual figcaption{text-align:left}#macNav{display:none}.hardware-grid{grid-template-columns:1fr;gap:24px}.hardware-card{border-radius:24px;overflow:hidden}.hardware-image{height:310px}.watch-image img{height:260px}.hardware-title{flex-direction:row;align-items:center}.hardware-description{min-height:0}.site-section-heading h2{font-size:35px}.ownership-heading{margin-bottom:36px}.data-choice{padding:22px}.data-choice-top{align-items:flex-start;flex-direction:column;gap:18px}.data-mode-panel{min-height:128px}.data-route{flex-wrap:wrap;gap:10px;font-size:12px}.site-footer{padding:28px 24px;flex-wrap:wrap}.site-footer p{width:100%;order:3}}
@media(max-width:500px){:root{--site-header-height:58px}.site-nav-wrap{padding:0 16px;gap:14px}.site-header .wordmark{font-size:19px;gap:7px}.site-header .brand-mark{width:24px;height:24px;border-radius:8px}.site-header .brand-mark .icon{width:16px}.site-nav{gap:16px}.site-nav a{font-size:10px}.wiselife-site .design-stage{padding:0;min-height:calc(100dvh - var(--site-header-height))}.wiselife-site .phone-shell{width:100%;height:calc(100dvh - var(--site-header-height));min-height:560px;border:0;border-radius:0;padding:0;box-shadow:none;background:var(--paper)}.wiselife-site .phone-screen{border:0;border-radius:0}.wiselife-site .screen-scroll{overscroll-behavior-y:auto}.site-container{padding:40px 20px}.site-section-heading h2{font-size:31px;letter-spacing:-1px}.site-section-heading p{font-size:12px}.hardware-image{height:270px}.watch-image img{height:230px}.hardware-copy{padding:22px}.hardware-title h3{font-size:23px}.ownership-grid{gap:26px 20px}.ownership-feature>.icon{margin-bottom:17px}.ownership-feature h3{font-size:17px}.ownership-feature p{font-size:12px}.feature-detail{font-size:10px}.data-choice{margin-top:26px;padding:20px}.data-route{gap:8px;font-size:11px}.data-route .icon{width:13px;height:13px}.data-mode-panel{min-height:140px}}
@media(max-width:360px){.site-nav-wrap{padding:0 12px;gap:10px}.site-nav{gap:12px}.site-header .brand-mark{display:none}.ownership-grid{grid-template-columns:1fr}.data-route{display:grid;grid-template-columns:1fr 16px 1fr}.data-route strong{grid-column:1/-1}.data-route .icon:nth-of-type(2){display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.site-reveal,.site-reveal.is-waiting{opacity:1;transform:none;transition:none}}
