.product-page { background: #f7f9fc; }
.product-header { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:25px; border-bottom:1px solid var(--line); }
.product-header nav { display:flex; gap:24px; align-items:center; font-size:13px; font-weight:600; }
.product-header nav a[aria-current] { color:var(--blue); }
.product-header .brand { font-size:26px; }
.product-hero { padding:85px 0 0; text-align:center; }
.product-kicker { display:inline-flex; align-items:center; gap:9px; font:600 11px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--green); }
.product-kicker::before { content:""; width:7px; height:7px; background:#059d83; border-radius:50%; }
.product-hero h1 { font-size:clamp(44px,5.5vw,76px); font-weight:650; line-height:1.06; margin:23px auto 24px; max-width:1000px; }
.product-hero h1 span { color:#667690; }
.product-hero .lead { font-size:18px; max-width:670px; margin:auto; line-height:1.65; }
.product-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:28px; }
.product-actions .button { min-height:46px; }
.product-outline { background:white; color:var(--ink); border:1px solid var(--line); }
.product-intro-note { margin:18px auto 0; font-size:12px; }
.product-stage { margin-top:50px; padding:24px 24px 0; background:linear-gradient(130deg,#e8f0fc,#e5f4ee); border:1px solid #d9e3ef; border-radius:24px 24px 0 0; overflow:hidden; }
.product-window { margin:0; border:1px solid #d5dfeb; border-radius:11px 11px 0 0; background:white; box-shadow:0 15px 45px #18385512; }
.product-window-bar { display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid var(--line); padding:12px 17px; font:11px var(--mono); color:var(--muted); }
.product-dots { letter-spacing:5px; color:#bdc9d5; }
.product-shot { display:block; position:relative; }
.product-shot img { display:block; width:100%; height:auto; }
.product-shot::after { content:attr(data-enlarge); position:absolute; bottom:16px; right:16px; border:1px solid #d5dfeb; background:#fffffff0; color:#152039; padding:8px 13px; font-size:11px; border-radius:30px; opacity:0; transition:opacity .15s; }
.product-shot:hover::after,.product-shot:focus-visible::after { opacity:1; }
.product-caption { font-size:12px; line-height:1.6; margin-top:14px; color:var(--muted); }
.product-jump { display:flex; justify-content:center; gap:48px; padding:24px 16px; border-bottom:1px solid var(--line); font-size:14px; font-weight:600; }
.product-jump span { color:#8a98ab; font:11px var(--mono); padding-right:8px; }
.product-section { padding-top:100px; scroll-margin-top:30px; }
.product-section-heading { display:grid; grid-template-columns:1.1fr 1fr; gap:60px; align-items:end; margin-bottom:30px; }
.product-section-heading h2 { margin-top:15px; font-size:clamp(32px,3.4vw,46px); }
.product-section-heading p { max-width:540px; font-size:16px; }
.product-label { color:var(--blue); font:600 11px var(--mono); letter-spacing:.13em; }
.product-gallery { border:1px solid var(--line); background:#fff; border-radius:16px; overflow:hidden; }
.product-gallery figure { margin:0; }
.product-gallery figcaption { padding:17px 23px; border-top:1px solid var(--line); font-size:13px; color:var(--muted); }
.product-gallery-toolbar { display:flex; align-items:flex-start; background:#edf2f8; border-bottom:1px solid var(--line); }
.product-gallery-stage { display:grid; overflow:hidden; }
.product-gallery-stage > figure { grid-area:1 / 1; min-width:0; align-self:start; }
/* Inert, aria-hidden panels reserve the tallest caption to prevent layout jumps. */
.product-gallery-stage > figure[hidden] { display:block; visibility:hidden; pointer-events:none; }
.product-gallery-stage .is-leaving { pointer-events:none; }
.product-gallery-controls { flex:1; min-width:0; display:flex; align-items:center; gap:6px; padding:12px; background:#edf2f8; flex-wrap:wrap; }
.product-gallery-controls[hidden] { display:none; }
.product-gallery-controls button { border:0; border-radius:7px; padding:10px 18px; color:var(--muted); background:transparent; font-size:13px; }
.product-gallery-controls button[aria-selected="true"] { background:#fff; color:var(--ink); box-shadow:0 2px 5px #1520390b; }
.product-gallery-controls button { position:relative; transition:background-color .25s,color .25s,box-shadow .25s; }
.product-gallery-controls button:focus-visible,.product-gallery-playback:focus-visible { outline:2px solid #26775b; outline-offset:3px; }
.product-gallery-controls [data-gallery-highlight] { color:#26775b; }
.product-gallery-controls [data-gallery-highlight][aria-selected="true"] { color:#246d58; background:#f4fbf8; box-shadow:inset 0 -2px #71b5a0,0 2px 5px #1520390b; }
.product-gallery-controls .is-emphasized { animation:permission-hint 2.4s ease-out 1; }
@keyframes permission-hint { 0%,100% {box-shadow:0 0 0 0 #26775b00;} 35% {box-shadow:0 0 0 3px #26775b14;background-color:#f4fbf8;} }
.product-gallery-playback { flex:none; display:grid; place-items:center; width:36px; height:36px; margin:14px 12px 12px 0; border:1px solid #d6dfea; border-radius:7px; background:transparent; color:var(--muted); }
.product-gallery-playback:hover { background:#fff; }
.product-gallery-playback::before { content:""; box-sizing:border-box; width:9px; height:11px; border-inline:3px solid currentColor; }
.product-gallery-playback[data-paused="true"]::before { width:0; height:0; border:6px solid transparent; border-left:9px solid currentColor; border-right:0; margin-left:2px; }
.product-features { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; padding:28px 0 0; }
.product-features article { border-top:1px solid var(--line); padding-top:18px; }
.product-features h3 { font-size:17px; letter-spacing:-.02em; line-height:1.35; margin-bottom:9px; }
.product-features p { font-size:14px; line-height:1.65; }
.product-mobile { display:grid; grid-template-columns:1fr 1.15fr; gap:65px; align-items:center; padding:55px; border-radius:22px; background:#e9f1f2; }
.product-mobile h2 { font-size:clamp(32px,3.5vw,46px); margin:18px 0 22px; }
.product-mobile p { font-size:16px; }
.product-mobile ul { padding:0; list-style:none; margin:24px 0; }
.product-mobile li { padding:15px 0; border-top:1px solid #cbdcde; font-size:14px; }
.product-mobile li strong { display:block; margin-bottom:3px; font-size:15px; }
.product-phone-pair { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
.product-phone-pair figure { margin:0; min-width:0; }
.product-phone-pair figure:last-child { margin-top:70px; }
.product-phone-pair a { border:5px solid #1b2e38; border-radius:26px; overflow:hidden; box-shadow:0 18px 30px #12303d24; background:#10171e; }
.product-phone-pair figcaption { text-align:center; margin-top:12px; font-size:11px; color:#415963; }
.product-cta { margin-top:90px; padding:50px; background:#162d38; color:white; border-radius:20px; display:flex; justify-content:space-between; align-items:center; gap:35px; }
.product-cta h2 { font-size:32px; margin-bottom:12px; }
.product-cta p { color:#b8cbd1; max-width:620px; font-size:15px; }
.product-cta .button { white-space:nowrap; background:#fff; color:#172e39; }
.product-footnote { margin:25px 0 0; font-size:12px; line-height:1.7; max-width:920px; }
.product-footer { display:flex; gap:24px; align-items:center; justify-content:space-between; padding-block:35px; margin-top:55px; border-top:1px solid var(--line); font-size:12px; color:var(--muted); }
.product-footer div { display:flex; gap:20px; }
.product-footer button { background:none; border:0; color:inherit; padding:0; font-size:inherit; }
.product-zoom { width:min(96vw,1600px); max-width:none; max-height:95dvh; padding:0; border:1px solid #d5dfeb; border-radius:12px; background:#f7f9fc; }
.product-zoom::backdrop { background:#0b172dd9; }
.product-zoom header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:10px 18px; position:sticky; top:0; background:#fff; border-bottom:1px solid var(--line); z-index:1; }
.product-zoom button { padding:8px 14px; border:1px solid var(--line); border-radius:5px; background:#fff; }
.product-zoom img { display:block; width:auto; max-width:100%; max-height:calc(90dvh - 60px); margin:auto; object-fit:contain; }
.product-zoom figcaption { padding:12px 18px; font-size:12px; }
.product-zoom figure { margin:0; }
.product-entry-link { display:inline-flex; gap:12px; align-items:center; margin-top:22px; color:var(--blue); font-weight:600; font-size:14px; }
@media(max-width:1000px) { .product-header nav {gap:15px;} .product-header .product-login {display:none;} .product-mobile {padding:35px;gap:35px;} .product-phone-pair {gap:12px;} }
@media(max-width:760px) { .product-page .container {width:calc(100% - 36px);} .product-header {padding-block:20px;} .product-header nav {gap:12px;} .product-header nav .product-home {display:none;} .product-hero {padding-top:48px;} .product-hero h1 {font-size:43px;} .product-hero .lead {font-size:16px;} .product-stage {padding:10px 10px 0;margin-top:32px;border-radius:12px 12px 0 0;} .product-window-bar {padding:9px 11px;font-size:9px;} .product-window-bar .product-dots {display:none;} .product-jump {gap:20px;padding:20px 0;font-size:12px;} .product-jump span {display:none;} .product-section {padding-top:60px;} .product-section-heading {grid-template-columns:1fr;gap:18px;} .product-features {grid-template-columns:1fr;gap:22px;} .product-mobile {grid-template-columns:1fr;padding:26px 20px;gap:25px;} .product-phone-pair {max-width:440px;gap:18px;margin:auto;} .product-phone-pair figure:last-child {margin-top:35px;} .product-gallery-controls button {padding:8px 10px;font-size:12px;} .product-gallery figcaption {padding:14px;font-size:12px;} .product-cta {flex-direction:column;align-items:start;padding:30px 24px;margin-top:60px;} .product-cta h2 {font-size:29px;} .product-footer {flex-wrap:wrap;gap:16px;margin-top:35px;} .product-shot::after {opacity:1;bottom:8px;right:8px;font-size:9px;padding:5px 9px;} }
@media(prefers-reduced-motion:reduce) { .product-page {scroll-behavior:auto;} .product-shot::after,.product-gallery-controls button {transition:none;} .product-gallery-controls .is-emphasized {animation:none;} }