:root {
  --nav-height: 54px;
  --scroll-progress-height: 3px;
  --ink: #111318;
  --muted: #626a75;
  --line: rgba(18, 26, 36, .13);
  --cyan: #10cce3;
  --blue: #0d66df;
  --deep: #082b59;
  --paper: #f7f8f8;
  --glass: rgba(255, 255, 255, .78);
  --shadow: 0 24px 70px rgba(14, 35, 54, .18), 0 3px 12px rgba(14, 35, 54, .13);
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-height) + var(--scroll-progress-height) + 12px);
}
body {
  margin: 0;
  padding-top: calc(var(--nav-height) + var(--scroll-progress-height));
  color: var(--ink);
  background: var(--paper);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.system-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: 54px;
  padding: 0 28px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  background: rgba(247, 248, 248, .94);
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.brand-mini { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 650; width: max-content; }
.brand-mini img { width: 25px; height: 25px; }
.system-bar nav { display: flex; gap: 30px; font-size: 13px; color: #5f6873; }
.system-bar nav a:hover { color: #000; }
.system-actions { justify-self: end; display: flex; align-items: center; gap: 16px; }
.system-status { display: flex; gap: 14px; align-items: center; color: #6d747d; font-size: 13px; }
.nav-cta {
  padding: 7px 18px 8px;
  border: 1px solid #2a6db4;
  border-radius: 11px;
  font-size: 12.5px;
  font-weight: 650;
  color: #0b3f77;
  background: linear-gradient(#ffffff 0%, #e8f3fd 45%, #c9e2f6 50%, #eaf5ff 100%);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(10, 45, 80, .25), 0 6px 14px rgba(13, 104, 180, .14);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.nav-cta:hover { transform: translateY(-1px); filter: saturate(1.12); box-shadow: inset 0 1px 0 #fff, 0 2px 3px rgba(10,45,80,.28), 0 10px 20px rgba(13,104,180,.18); }
.nav-cta:active { transform: translateY(1px); filter: brightness(.95); }

/* Keyboard accessibility */
.skip-link {
  position: absolute;
  left: 12px;
  top: -48px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 10px;
  color: #fff;
  background: #0b3f77;
  font-size: 13px;
  font-weight: 650;
  transition: top .18s ease;
}
.skip-link:focus-visible { top: calc(var(--nav-height) + var(--scroll-progress-height) + 10px); }
a:focus-visible, button:focus-visible, summary:focus-visible, details:focus-visible {
  outline: 3px solid rgba(14, 130, 200, .65);
  outline-offset: 3px;
  border-radius: 6px;
}

.desktop-canvas {
  position: relative;
  min-height: 1040px;
  overflow: hidden;
  padding: 120px 24px 100px;
  background-color: #f8f9f9;
  background-image: radial-gradient(circle, rgba(26, 52, 76, .12) 1px, transparent 1.2px);
  background-size: 28px 28px;
  border-bottom: 1px solid var(--line);
}
.desktop-canvas::before {
  content: "";
  position: absolute;
  width: 900px;
  height: 620px;
  left: 50%;
  top: 170px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(18, 203, 228, .13), rgba(66, 124, 215, .05) 42%, transparent 70%);
  pointer-events: none;
}
.hero-center { position: relative; z-index: 3; width: min(760px, 92vw); margin: 0 auto; text-align: center; }
.app-icon { width: 116px; height: 116px; object-fit: contain; filter: drop-shadow(0 16px 20px rgba(0, 47, 79, .25)); }
.eyebrow { margin: 5px 0 10px; color: #4e5864; font-size: 14px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(56px, 8vw, 98px); letter-spacing: -.072em; line-height: .98; font-weight: 760; }
.hero-copy { max-width: 660px; margin: 24px auto 28px; font-size: clamp(18px, 2vw, 23px); line-height: 1.45; letter-spacing: -.02em; color: #434b55; }
.hero-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.aqua-button {
  min-width: 224px;
  min-height: 60px;
  padding: 8px 22px 9px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid #66717c;
  border-radius: 18px;
  color: #0c1117;
  background: linear-gradient(#fff 0%, #fbfdff 43%, #dce5ed 49%, #fff 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(255,255,255,.7), 0 2px 3px rgba(0,0,0,.24), 0 15px 24px rgba(34, 55, 70, .12);
  text-shadow: 0 1px 0 #fff;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.aqua-button.primary {
  border-color: #166cbb;
  background: linear-gradient(#eefeff 0%, #d7fbff 39%, #62d9f1 48%, #c5f6ff 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 2px rgba(61, 153, 225, .22), 0 2px 3px rgba(0,35,70,.32), 0 15px 28px rgba(13, 104, 180, .18);
}
.aqua-button:hover { transform: translateY(-2px); filter: saturate(1.15); box-shadow: inset 0 1px 0 #fff, 0 4px 5px rgba(0,35,70,.26), 0 20px 35px rgba(13, 104, 180, .18); }
.aqua-button:active { transform: translateY(1px); filter: brightness(.96); }
.button-icon { width: 30px; height: 30px; display: grid; place-items: center; font-size: 21px; }
.aqua-button > span:last-child { display: flex; flex-direction: column; text-align: left; line-height: 1.1; }
.aqua-button b { font-size: 16px; }
.aqua-button small { margin-top: 4px; color: #59636d; font-size: 10px; font-weight: 550; }
.compatibility-pill { width: max-content; max-width: 100%; margin: 20px auto 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; color: #59636b; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: #20c779; box-shadow: 0 0 0 4px rgba(32,199,121,.15); flex: 0 0 auto; }

.desktop-item { position: absolute; z-index: 2; }
.float-a { left: 6%; top: 138px; transform: rotate(-2deg); }
.float-b { right: 5%; top: 120px; transform: rotate(1.8deg); }
.float-c { left: 3.5%; top: 430px; transform: rotate(2deg); }
.float-d { right: 3.5%; top: 470px; transform: rotate(-2deg); }
.float-e { left: 10%; top: 690px; transform: rotate(-3deg); }
.float-f { right: 9%; top: 710px; transform: rotate(2.5deg); }
.temperature-widget, .fan-chip, .mode-card, .finder-note {
  background: rgba(255,255,255,.93);
  border: 1px solid rgba(0,0,0,.18);
  box-shadow: 0 12px 28px rgba(27, 45, 58, .14), inset 0 1px 0 white;
}
.temperature-widget { width: 180px; border-radius: 18px; padding: 15px 17px; }
.widget-title { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #69717a; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; }
.status-dot.cool { background: #18c8e0; box-shadow: 0 0 0 3px rgba(24,200,224,.13); }
.temperature-widget strong { display: block; margin-top: 7px; font-size: 39px; letter-spacing: -.06em; }
.temperature-widget > span { color: #22a16c; font-size: 11px; }
.tiny-window, .mac-window { overflow: hidden; border: 1px solid rgba(21, 29, 37, .38); border-radius: 12px; background: rgba(249,251,252,.92); box-shadow: var(--shadow); }
.curve-widget { width: 250px; }
.window-bar { height: 29px; display: flex; align-items: center; justify-content: center; position: relative; padding: 0 12px; background: linear-gradient(#f7f8fa, #d8dce0); border-bottom: 1px solid #b5bbc0; color: #535b64; font-size: 11px; font-weight: 600; text-shadow: 0 1px white; }
.window-bar.large { height: 39px; font-size: 12px; }
.lights, .lights::before, .lights::after { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 1px rgba(0,0,0,.17); }
.lights { left: 12px; }
.lights::before, .lights::after { content: ""; top: 0; }
.lights::before { left: 15px; background: #febc2e; }
.lights::after { left: 30px; background: #28c840; }
.curve-widget svg { display: block; margin: 14px 18px 0; }
.grid { stroke: #d9e0e5; stroke-width: 1; }
.curve-fill { fill: url(#curveFill); }
.curve-line { fill: none; stroke: #079db4; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.curve-labels { display: flex; justify-content: space-between; padding: 4px 20px 12px; font-size: 9px; color: #747d86; }
.fan-chip { min-width: 175px; border-radius: 16px; padding: 12px 16px; display: flex; align-items: center; gap: 11px; }
.fan-chip span:last-child, .mode-card div { display: flex; flex-direction: column; }
.fan-chip b, .mode-card b { font-size: 12px; }
.fan-chip small, .mode-card small { margin-top: 2px; font-size: 10px; color: #6f7780; }
.fan-glyph { display: grid; place-items: center; color: #0f88c7; font-size: 25px; animation: fan-spin 8s linear infinite; }
@keyframes fan-spin { to { transform: rotate(360deg); } }
.mode-card { border-radius: 14px; padding: 12px 16px; display: flex; gap: 10px; align-items: center; }
.mode-led { width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #dfffff, #10bddd 45%, #087aaa); box-shadow: 0 0 12px rgba(11,192,221,.6); }
.finder-note { padding: 12px 16px; border-radius: 5px; font-family: "Courier New", monospace; display: flex; flex-direction: column; }
.finder-note span { color: #159d69; font-size: 10px; text-transform: uppercase; }
.finder-note strong { font-size: 15px; }

.fan-glyph.big { font-size: 46px; color: #149bbb; }
.scroll-cue { position: absolute; z-index: 3; bottom: 25px; left: 50%; transform: translateX(-50%); color: #868d95; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.scroll-cue span { display: block; margin-top: 4px; color: #26313a; font-size: 18px; text-align: center; }

.section { padding: 120px max(28px, calc((100vw - 1180px) / 2)); }
.section-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 36px; font-size: 11px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: #69727c; }
.section-kicker span { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #aab3bb; border-radius: 50%; color: #1d2c38; }
.section-kicker.light { color: rgba(255,255,255,.65); }
.section-kicker.light span { color: white; border-color: rgba(255,255,255,.35); }
.section-heading { display: grid; grid-template-columns: 1.6fr .7fr; gap: 80px; align-items: end; margin-bottom: 65px; }
.section-heading.narrow { grid-template-columns: 1.2fr .7fr; }
.section h2 { margin: 0; font-size: clamp(42px, 5vw, 69px); line-height: 1.02; letter-spacing: -.055em; }
.section h2 em { color: #148ba2; font-style: normal; }
.section-heading > p { margin: 0 0 4px; color: #646d76; font-size: 17px; line-height: 1.55; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature-card { position: relative; min-height: 430px; padding: 28px; overflow: hidden; border: 1px solid rgba(12,28,42,.18); border-radius: 24px; box-shadow: inset 0 1px rgba(255,255,255,.65), 0 20px 45px rgba(29,48,64,.12); }
.feature-card.cyan { background: linear-gradient(150deg, #e9feff, #aeeff4); }
.feature-card.blue { color: white; background: linear-gradient(150deg, #174c9f, #062c67); }
.feature-card.silver { background: linear-gradient(150deg, #f8fafb, #dce3e8); }
.feature-number { position: absolute; right: 22px; top: 20px; font: 12px "Courier New", monospace; opacity: .55; }
.feature-art { height: 225px; display: grid; place-items: center; }
.feature-card h3 { margin: 10px 0 8px; font-size: 26px; letter-spacing: -.035em; }
.feature-card p { margin: 0; max-width: 320px; line-height: 1.5; color: rgba(29,39,48,.68); }
.feature-card.blue p { color: rgba(255,255,255,.68); }
.gauge-art { position: relative; }
.gauge-art::before { content: ""; position: absolute; width: 170px; height: 170px; border-radius: 50%; background: conic-gradient(#059eb7 0 50%, rgba(255,255,255,.45) 50%); box-shadow: inset 0 0 0 16px rgba(255,255,255,.45), 0 20px 25px rgba(1,96,113,.15); transform: rotate(45deg); }
.gauge-art::after { content: ""; position: absolute; width: 120px; height: 120px; border-radius: 50%; background: #d8fafd; }
.gauge-art span { z-index: 2; font-size: 42px; font-weight: 720; letter-spacing: -.06em; }
.fan-art { grid-template-columns: 1fr 1fr; font-size: 100px; color: #5eeaff; text-shadow: 0 0 32px rgba(48,230,255,.3); }
.fan-art span:first-child { animation: fan-spin 10s linear infinite; }
.fan-art span:last-child { animation: fan-spin 8s linear infinite reverse; }
.switch-art { display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.switch-art i { position: relative; width: 180px; height: 38px; border: 1px solid #9ca8b1; border-radius: 20px; background: linear-gradient(#a9b4bb, #eef3f5); box-shadow: inset 0 2px 5px rgba(0,0,0,.13), 0 1px white; }
.switch-art i::after { content: ""; position: absolute; top: 3px; left: 4px; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(#fff, #d6dde2); border: 1px solid #a1abb3; box-shadow: 0 2px 4px rgba(0,0,0,.2); }
.switch-art i:nth-child(2) { background: linear-gradient(#0d8fe1, #32d5e5); }
.switch-art i:nth-child(2)::after, .switch-art i:nth-child(3)::after { left: 144px; }

.control-story { padding-top: 40px; background: #edf0f2; }
.story-window { max-width: 1120px; margin: 0 auto; }
.story-content { min-height: 540px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; padding: 70px; color: white; background: radial-gradient(circle at 15% 10%, #1a6790, transparent 42%), linear-gradient(145deg, #0d315e, #061b3c); }
.story-copy { align-self: center; }
.story-copy h2 { font-size: clamp(40px, 4.5vw, 62px); }
.story-copy p { max-width: 440px; color: rgba(255,255,255,.64); line-height: 1.55; font-size: 17px; }
.preset-stack { align-self: center; display: flex; flex-direction: column; gap: 12px; }
.preset-stack > div { display: grid; grid-template-columns: 54px 1fr auto; gap: 16px; align-items: center; padding: 16px 18px; border: 1px solid rgba(255,255,255,.18); border-radius: 15px; background: rgba(255,255,255,.08); backdrop-filter: blur(12px); }
.preset-stack > div.selected { color: #062b43; background: linear-gradient(135deg, #e6ffff, #7de8ef); border-color: white; box-shadow: 0 12px 35px rgba(12,210,231,.18); }
.preset-stack span:nth-child(2) { display: flex; flex-direction: column; }
.preset-stack small { margin-top: 3px; color: inherit; opacity: .65; }
.preset-stack i { font: 11px "Courier New", monospace; opacity: .55; }
.preset-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 13px; font-weight: 750; background: rgba(255,255,255,.12); }
.selected .preset-icon { background: rgba(255,255,255,.55); }

.safety { background: #f9faf9; }
.safety-note { margin: 23px 0 0; text-align: center; color: #6c757d; font-size: 13px; }

.compatibility { padding-top: 50px; background: linear-gradient(#f9faf9, #e9eef0); }
.compat-window { max-width: 1040px; margin: 0 auto; }
.compat-body { display: grid; grid-template-columns: 240px 1fr; gap: 55px; align-items: center; padding: 55px 65px; background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(226,238,243,.92)); }
.compat-icon { display: grid; place-items: center; min-height: 220px; border-radius: 22px; background: radial-gradient(circle, #fff 0 24%, #c6f4f7 25%, #e6eef1 60%); border: 1px solid #c3cdd3; box-shadow: inset 0 1px white; }
.compat-icon img { width: 160px; filter: drop-shadow(0 18px 22px rgba(16,54,73,.22)); }
.verified-badge { display: inline-block; padding: 5px 9px; border-radius: 6px; background: #d9f7e9; color: #15845a; font-size: 10px; font-weight: 750; letter-spacing: .06em; }
.compat-copy h2 { margin: 15px 0 12px; font-size: 48px; }
.compat-copy > p { color: #59636b; line-height: 1.55; }
.spec-row { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; padding: 18px; margin: 20px 0; border-radius: 12px; background: rgba(255,255,255,.65); border: 1px solid #cbd4d9; font-size: 13px; }
.spec-row span { color: #7a838a; }
.compat-warning { padding-left: 13px; border-left: 3px solid #f2a52a; font-size: 13px; }

.buy { padding-top: 100px; padding-bottom: 100px; background: #061a36; }
.buy-card { max-width: 760px; margin: 0 auto; padding: 65px; text-align: center; color: white; border: 1px solid rgba(255,255,255,.28); border-radius: 28px; background: radial-gradient(circle at 50% 15%, rgba(31,202,222,.2), transparent 40%), linear-gradient(145deg, #103867, #071d3d); box-shadow: inset 0 1px rgba(255,255,255,.18), 0 30px 70px rgba(0,0,0,.25); }
.buy-card .section-kicker { justify-content: center; }
.buy-icon { width: 110px; filter: drop-shadow(0 18px 18px rgba(0,0,0,.3)); }
.buy-card h2 { margin-top: 10px; }
.buy-card > p { color: rgba(255,255,255,.66); font-size: 17px; }
.price { margin: 25px 0; display: flex; justify-content: center; align-items: flex-start; }
.price sup { margin-top: 8px; font-size: 21px; }
.price strong { font-size: 68px; line-height: 1; letter-spacing: -.07em; }
.price span { align-self: flex-end; margin: 0 0 8px 8px; color: rgba(255,255,255,.55); font-size: 12px; }
.buy-button { min-width: 280px; }
.purchase-note { display: block; margin-top: 18px; color: rgba(255,255,255,.46); }

.faq { background: #f8f9f9; }
.faq-list { max-width: 900px; margin: 0 auto; border-top: 1px solid #cbd2d7; }
.faq-list details { border-bottom: 1px solid #cbd2d7; }
.faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 25px 5px; font-size: 19px; font-weight: 650; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { transition: transform .2s ease; font-size: 24px; font-weight: 400; }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list details p { margin: -8px 70px 26px 5px; color: #656e77; line-height: 1.6; }

footer { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 50px; padding: 75px max(28px, calc((100vw - 1180px) / 2)) 40px; color: rgba(255,255,255,.62); background: #09111d; font-size: 13px; }
.footer-brand { display: flex; align-items: center; gap: 12px; color: white; }
.footer-brand img { width: 48px; }
.footer-brand span { display: flex; flex-direction: column; }
.footer-brand small { margin-top: 4px; color: rgba(255,255,255,.45); }
footer > div:not(.footer-brand) { display: flex; flex-direction: column; gap: 9px; }
footer > div > b { margin-bottom: 4px; color: white; }
footer a:hover { color: white; }
footer > p { grid-column: 1 / -1; margin: 30px 0 0; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); font-size: 11px; }

@media (max-width: 1020px) {
  /* Top band only: both widgets scaled down and parked inside the clear
     padding zone — never pushed off-canvas, never clipped. */
  .float-a, .float-b { opacity: .85; transform: scale(.83); }
  .float-a { left: 2.5%; top: 24px; }
  .float-b { right: 2.5%; top: 12px; }
  .float-c, .float-d, .float-e, .float-f { display: none; }
  .section-heading { grid-template-columns: 1fr; gap: 24px; }
  .feature-card { min-height: 380px; }
  .feature-art { height: 190px; }
  .story-content { padding: 50px; gap: 35px; }
}

@media (max-width: 760px) {
  .system-bar { grid-template-columns: 1fr auto; padding: 0 16px; }
  .system-bar nav { display: none; }
  .system-status span:not(#clock) { display: none; }
  /* Mobile hero: the canvas becomes a wrapping flex flow. Every desktop
     float returns as a real in-flow card in a strip between the headline
     and the preview window — nothing absolute, nothing clipped. */
  .desktop-canvas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    column-gap: 10px;
    row-gap: 12px;
    min-height: 0;
    padding-top: 90px;
  }
  .hero-center { order: 1; flex: 0 0 100%; }
  .gauge-card { order: 3; width: min(400px, 92vw); }
  .desktop-item {
    order: 2;
    position: static;
    transform: none;
    opacity: 1;
    max-width: 100%;
  }
  /* Keep the mobile story focused: the live meter already communicates both
     values, so the two decorative desktop preview cards are redundant here. */
  .desktop-item.temperature-widget,
  .desktop-item.curve-widget { display: none; }
  .desktop-item.temperature-widget { width: 158px; }
  .desktop-item.curve-widget { width: 216px; }
  .desktop-item.fan-chip { min-width: 0; width: 154px; }
  .desktop-item.finder-note { padding: 10px 14px; }
  /* Let the preview grid shrink instead of blowing out at narrow widths */
  .buy-button { min-width: 0; }
  .scroll-cue {
    position: static;
    order: 4;
    left: auto;
    display: flex;
    flex: 0 0 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 24px;
    text-align: center;
    transform: none;
  }
  /* Mobile Safari can expose the rectangular compositing layer created by a
     CSS drop-shadow around transparent WebP pixels. The icon already contains
     its own soft glow, so removing the filter avoids the visible square edge. */
  .app-icon { width: 92px; height: 92px; filter: none; }
  h1 { font-size: clamp(52px, 15vw, 72px); }
  .hero-copy { font-size: 18px; }
  .hero-actions { align-items: stretch; flex-direction: column; max-width: 300px; margin: 0 auto; }
  .aqua-button { width: 100%; }
  .compatibility-pill { line-height: 1.35; }
  .fan-glyph.big { font-size: 32px; }
  .section { padding: 85px 20px; }
  .section h2 { font-size: 43px; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: 380px; }
  .story-content { grid-template-columns: 1fr; padding: 38px 24px; }
  .story-copy h2 { font-size: 42px; }
  .compat-body { grid-template-columns: 1fr; gap: 28px; padding: 30px 20px; }
  .compat-icon { min-height: 180px; }
  .compat-icon img { width: 130px; }
  .compat-copy h2 { font-size: 40px; }
  .buy-card { padding: 45px 20px; }
  .faq-list summary { font-size: 17px; }
  .faq-list details p { margin-right: 20px; }
  footer { grid-template-columns: 1fr 1fr; gap: 35px; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ===== Production layer: sections added for the FanTuner page ===== */

/* How it works */
.how-it-works { background: #f9faf9; }
.steps-rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  counter-reset: step;
}
.steps-rail li {
  position: relative;
  padding: 26px 22px 24px;
  border: 1px solid rgba(12,28,42,.16);
  border-radius: 20px;
  background: linear-gradient(160deg, #ffffff, #e8f0f2);
  box-shadow: inset 0 1px #fff, 0 14px 32px rgba(29,48,64,.1);
}
.step-number {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  background: linear-gradient(#1ccfe0, #0a7cbd);
  box-shadow: inset 0 1px rgba(255,255,255,.6), 0 4px 10px rgba(7,89,150,.3);
}
.steps-rail b { display: block; margin-bottom: 7px; font-size: 16px; letter-spacing: -.01em; }
.steps-rail p { margin: 0; color: #55606a; font-size: 13.5px; line-height: 1.55; }

/* Safety grid */
.safety-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.safety-card {
  padding: 28px;
  border: 1px solid rgba(12,28,42,.16);
  border-radius: 20px;
  background: linear-gradient(160deg, #ffffff, #eaf2f3);
  box-shadow: inset 0 1px #fff, 0 14px 32px rgba(29,48,64,.09);
}
.safety-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  background: linear-gradient(#1ccfe0, #0a7cbd);
  box-shadow: inset 0 1px rgba(255,255,255,.6), 0 4px 10px rgba(7,89,150,.3);
}
.safety-card h3 { margin: 0 0 8px; font-size: 19px; letter-spacing: -.02em; }
.safety-card p { margin: 0; color: #55606a; font-size: 14px; line-height: 1.6; }

/* Compatibility extras */
.model-help { margin: 6px 0 18px; }
.model-help summary {
  cursor: pointer;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  font-weight: 650;
  color: #0e6392;
}
.model-help summary span { transition: transform .2s ease; }
.model-help[open] summary span { transform: rotate(45deg); }
.model-help p { margin: 10px 0 0; max-width: 560px; color: #59636b; font-size: 13px; line-height: 1.6; }
.model-help code {
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid #c6cfd5;
  background: rgba(255,255,255,.8);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
}

/* Buy: disabled/demo state and configured state */
.buy-button:disabled {
  cursor: not-allowed;
  filter: grayscale(.55) brightness(.97);
  opacity: .75;
  transform: none;
}
.buy-button:disabled:hover { transform: none; filter: grayscale(.55) brightness(.97); }
.price[hidden] { display: none; }
.purchase-note { color: rgba(255,255,255,.55); }

/* Footer placeholders */
.placeholder-link { color: rgba(255,255,255,.38); cursor: default; }
.copyright { grid-column: 1 / -1; margin-top: 4px; font-size: 11px; color: rgba(255,255,255,.4); }

/* Responsive additions */
@media (max-width: 1020px) {
  .steps-rail { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .system-bar { grid-template-columns: 1fr auto; padding: 0 16px; }
  .system-bar nav { display: none; }
  .system-status span:not(#clock) { display: none; }
  .steps-rail { grid-template-columns: 1fr; }
  .safety-grid { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  .system-actions { gap: 10px; }
  .nav-cta { padding: 7px 13px 8px; }
  .buy-card h2 { font-size: 38px; }
  .buy-button { width: 100%; }
}

/* Conflict notice: dark-card variant of the subtle warning callout */
.purchase-important {
  display: block;
  margin-top: 12px;
  padding-left: 12px;
  border-left: 3px solid rgba(242, 165, 42, .85);
  color: rgba(255,255,255,.75);
  text-align: left;
}
.buy-card .purchase-important { max-width: 520px; margin-left: auto; margin-right: auto; }

/* ===== Animated hero field ===== */

/* Static fallback: shown whenever the canvas scene is absent (no JS, or
   prefers-reduced-motion — the renderer removes itself in that case). */
.desktop-canvas {
  background-image:
    radial-gradient(circle, rgba(26, 52, 76, .12) 1px, transparent 1.2px),
    url("assets/hero-field.png");
  background-size: 28px 28px, cover;
  background-position: center top, center bottom;
  background-repeat: repeat, no-repeat;
}
#hero-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.desktop-canvas .hero-center { position: relative; }
@media (max-width: 760px) {
}
@media (prefers-reduced-motion: reduce) {
  /* Canvas removes itself via hero-scene.js; the static fallback stays. */
}

/* "Why Macs run hot" explainer callout */
.why-callout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
  margin-top: 18px;
  padding: 24px 26px;
  border: 1px solid rgba(12,28,42,.16);
  border-radius: 20px;
  background: linear-gradient(160deg, #ffffff, #eaf2f0);
  box-shadow: inset 0 1px #fff, 0 14px 32px rgba(29,48,64,.08);
}
.why-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #fff;
  font-weight: 750;
  font-style: normal;
  background: linear-gradient(#1ccfe0, #0a7cbd);
  box-shadow: inset 0 1px rgba(255,255,255,.6), 0 4px 10px rgba(7,89,150,.3);
}
.why-callout h3 { margin: 2px 0 7px; font-size: 19px; letter-spacing: -.02em; }
.why-callout p { margin: 0; max-width: 76ch; color: #55606a; font-size: 14px; line-height: 1.65; }
.why-callout a { color: #0c6f9e; font-weight: 650; text-decoration: none; }
.why-callout a:hover { text-decoration: underline; }
@media (max-width: 760px) {
  .why-callout { grid-template-columns: 1fr; gap: 12px; padding: 20px; }
}

/* Seamless fade from the hero field into the next section (works over the
   canvas scene and the static fallback alike). */
.desktop-canvas { border-bottom: 0; }
.desktop-canvas::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 150px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(247,248,248,0), var(--paper));
}

/* Fan gauge centerpiece */
.gauge-card {
  position: relative;
  z-index: 4;
  width: min(400px, 92vw);
  margin: 56px auto 0;
  padding: 22px 22px 14px;
  border: 1px solid rgba(21, 29, 37, .3);
  border-radius: 24px;
  background: rgba(249, 251, 252, .95);
  box-shadow: 0 24px 70px rgba(14, 35, 54, .18), 0 3px 12px rgba(14, 35, 54, .1), inset 0 1px #fff;
  text-align: center;
}
.gauge-stage { position: relative; width: min(340px, 100%); margin: 2px auto 0; }
#fan-gauge { position: relative; z-index: 1; display: block; width: 100%; height: auto; margin: 0 auto; }
.gauge-fallback { position: absolute; z-index: 0; left: 50%; top: 0; transform: translateX(-50%); width: 100%; height: auto; }
.gauge-rpm-dial {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 34px;
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  justify-content: center;
  column-gap: 5px;
  min-width: 128px;
  padding: 7px 13px 8px;
  border: 1px solid rgba(43, 76, 99, .16);
  border-radius: 13px;
  background: rgba(247, 251, 253, .86);
  box-shadow: 0 5px 16px rgba(32, 64, 84, .12), inset 0 1px rgba(255,255,255,.9);
  backdrop-filter: blur(7px);
  transform: translateX(-50%);
  color: #30495c;
  pointer-events: none;
}
.gauge-rpm-dial span { grid-column: 1 / -1; margin-bottom: 1px; color: #7b8790; font-size: 8px; font-weight: 760; letter-spacing: .12em; text-transform: uppercase; }
.gauge-rpm-dial strong { font-size: 22px; font-weight: 780; line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.gauge-rpm-dial small { color: #687681; font-size: 9px; font-weight: 750; letter-spacing: .04em; }
.gauge-readout { margin-top: -4px; }
@media (max-width: 760px) {
  .gauge-card { width: min(400px, 100%); max-width: 100%; margin-top: 40px; padding: 16px 14px 10px; }
}

/* Thermal gauge readout + zone-tinted card accents */
.gauge-card {
  border-color: color-mix(in srgb, var(--zone-color, rgba(21,29,37,.3)) 40%, transparent);
  box-shadow:
    0 24px 70px rgba(14, 35, 54, .16),
    0 3px 12px rgba(14, 35, 54, .1),
    0 0 34px var(--zone-glow, transparent),
    inset 0 1px #fff;
  transition: border-color .6s ease, box-shadow .6s ease;
}
.gauge-temperature { display: flex; align-items: flex-start; justify-content: center; line-height: 1; }
.gauge-temp {
  font-size: 44px;
  font-weight: 770;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
  color: var(--zone-color, #111318);
  transition: color .6s ease;
}
.gauge-unit { margin: 5px 0 0 4px; color: #68747e; font-size: 13px; font-weight: 720; letter-spacing: -.02em; }
.gauge-meta { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 5px; color: #7b858e; font-size: 10.5px; letter-spacing: .01em; }
.gauge-live { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; border-radius: 999px; background: rgba(43, 163, 105, .09); color: #32825d; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .055em; }
.gauge-live b { width: 5px; height: 5px; border-radius: 50%; background: #34b56b; box-shadow: 0 0 0 3px rgba(52,181,107,.12); }

/* Preset demo: chips, caption, and the mock cursor */
.preset-demo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 0;
}
.demo-chip {
  position: relative;
  overflow: hidden;
  padding: 7px 15px;
  border: 1px solid rgba(12, 28, 42, .18);
  border-radius: 12px;
  background: linear-gradient(#ffffff, #e9eef2);
  box-shadow: inset 0 1px #fff, 0 1px 2px rgba(20, 40, 60, .12);
  font-size: 12.5px;
  font-weight: 650;
  color: #3c454d;
  cursor: pointer;
  transition: transform .15s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.demo-chip:hover { transform: translateY(-1px); }
.demo-chip.demo-hover {
  transform: translateY(-2px);
  border-color: rgba(14, 130, 200, .55);
  background: linear-gradient(#f8fdff, #d9ecfb);
  box-shadow: inset 0 1px #fff, 0 5px 12px rgba(14, 130, 200, .18);
}
.demo-chip.demo-pressed {
  transform: translateY(1px) scale(.97);
  box-shadow: inset 0 2px 4px rgba(13, 64, 99, .2), 0 1px 2px rgba(20, 40, 60, .08);
}
.demo-chip::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(28, 153, 218, .22);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.2);
  pointer-events: none;
}
.demo-chip.demo-ripple::after { animation: demo-ripple .58s ease-out; }
@keyframes demo-ripple {
  0% { opacity: .65; transform: translate(-50%, -50%) scale(.25); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(8); }
}
.demo-chip.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(#2fa7e5, #0780cb);
  text-shadow: 0 -1px rgba(0,0,0,.2);
  box-shadow: inset 0 1px rgba(255,255,255,.3), 0 3px 8px rgba(7, 117, 180, .3);
}
.preset-caption {
  margin: 10px 0 0;
  min-height: 2.6em;
  font-size: 12px;
  line-height: 1.3;
  color: #6c757d;
  transition: opacity .25s ease;
}
.mock-cursor {
  --cursor-x: 0px;
  --cursor-y: 0px;
  --cursor-scale: 1;
  position: absolute;
  z-index: 6;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(10, 40, 70, .35));
  opacity: .95;
  transform: translate3d(var(--cursor-x), var(--cursor-y), 0) scale(var(--cursor-scale));
  transform-origin: 3px 2px;
  will-change: transform, opacity;
  transition: opacity .35s ease, filter .16s ease;
}
.mock-cursor.paused { opacity: 0; filter: drop-shadow(0 1px 2px rgba(10, 40, 70, 0)); }
.mock-cursor.press { --cursor-scale: .78; filter: drop-shadow(0 1px 1px rgba(10, 40, 70, .25)); }
@media (prefers-reduced-motion: reduce) {
  .mock-cursor { display: none; }
  .demo-chip.demo-ripple::after { animation: none; }
}

/* Preset chips: hover tint and per-chip "?" info affordance */
.demo-chip:hover {
  background: linear-gradient(#f4fbff, #dcebfa);
  border-color: rgba(14, 130, 200, .45);
}
.chip-wrap { position: relative; display: inline-flex; }
.chip-info {
  position: absolute;
  right: -7px;
  top: -7px;
  z-index: 7;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(12, 28, 42, .22);
  background: #fff;
  box-shadow: 0 1px 3px rgba(10, 25, 40, .25);
  color: #40607a;
  font-size: 10px;
  font-weight: 750;
  line-height: 1;
  cursor: help;
}
.chip-tip {
  position: absolute;
  bottom: 135%;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: min(215px, 70vw);
  padding: 9px 11px;
  border-radius: 10px;
  background: rgba(18, 30, 42, .94);
  color: #eef4f8;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  box-shadow: 0 8px 24px rgba(10, 25, 40, .3);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.chip-info:hover .chip-tip,
.chip-info:focus .chip-tip,
.chip-info:focus-within .chip-tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .chip-tip { transition: none; }
  .demo-chip, .demo-chip:hover { transition: none; }
}

/* Keep tooltips inside the viewport on narrow screens: chips 3 and 4 anchor
   to the right, everything else stays centered on its icon. */
.chip-tip { width: min(215px, 62vw); }
.chip-wrap:nth-child(3) .chip-tip,
.chip-wrap:nth-child(4) .chip-tip { left: auto; right: -6px; transform: translateY(4px); }
.chip-wrap:nth-child(3) .chip-info:hover .chip-tip,
.chip-wrap:nth-child(3) .chip-info:focus .chip-tip,
.chip-wrap:nth-child(3) .chip-info:focus-within .chip-tip,
.chip-wrap:nth-child(4) .chip-info:hover .chip-tip,
.chip-wrap:nth-child(4) .chip-info:focus .chip-tip,
.chip-wrap:nth-child(4) .chip-info:focus-within .chip-tip { transform: translateY(0); }

/* Scroll progress bar: fixed directly beneath the fixed navigation. */
.scroll-progress {
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  height: var(--scroll-progress-height);
  z-index: 90;
  background: rgba(12, 28, 42, .06);
  pointer-events: none;
}
.scroll-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #12b8d8, #0a7cbd);
  transform: translate3d(0, 0, 0) scaleX(0);
  transform-origin: left center;
  backface-visibility: hidden;
  will-change: transform;
}

/* Back-to-top floating button */
.to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 80;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(12, 28, 42, .2);
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: #0b3f77;
  font-size: 19px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(14, 35, 54, .18), inset 0 1px #fff;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.to-top.visible.is-scrolling {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition-duration: .12s;
}
.to-top:hover { background: #fff; }
@media (prefers-reduced-motion: reduce) {
  .to-top,
  .to-top.visible.is-scrolling { transition: none; }
}
@media (max-width: 760px) {
  .to-top { right: 16px; bottom: 16px; width: 42px; height: 42px; }
}