/* Batteries page styles. Loaded after main.css; every class is prefixed with "bt-" so nothing here
   touches Bulma or the other pages. The product visuals are drawn in HTML from the app's own
   measurements (BatteryView_iOS16, the menu rows, the widget), so they stay sharp and can animate. */

.bt {
  /* Brand green, from the app icon's tile. */
  --bt-green: #1DB954;
  --bt-green-ink: #0B7A36;
  --bt-green-soft: #E4F8EA;
  --bt-text: #1D1D1F;
  --bt-muted: #5F6368;
  --bt-line: rgba(0, 0, 0, 0.08);
  --bt-light: #F5F6F7;
  --bt-card: #FFFFFF;
  --bt-radius: 20px;
  --bt-max: 1120px;
  --bt-gutter: clamp(16px, 4vw, 40px);
  /* The app's colors: widget rings, the low-battery red, and the system's label grays. */
  --bt-ring-high: #66CC66;
  --bt-ring-low: #D8604D;
  --bt-red: #FF3B30;
  --bt-label: rgba(0, 0, 0, 0.85);
  --bt-label-2: rgba(0, 0, 0, 0.5);
  --bt-sys-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;

  color: var(--bt-text);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.bt *,
.bt *::before,
.bt *::after {
  box-sizing: border-box;
}

.bt a {
  color: var(--bt-green-ink);
}

.bt a:hover {
  color: var(--bt-text);
}

.bt :focus-visible {
  outline: 3px solid var(--bt-green);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- Layout and type ---------- */

.bt-wrap {
  width: 100%;
  max-width: var(--bt-max);
  margin: 0 auto;
  padding-left: var(--bt-gutter);
  padding-right: var(--bt-gutter);
}

.bt-section {
  padding-top: clamp(64px, 8vw, 112px);
  padding-bottom: clamp(64px, 8vw, 112px);
}

.bt-section--light {
  background: var(--bt-light);
}

/* Two white sections in a row read as one, so the second doesn't add its own top padding. */
.bt-section:not(.bt-section--light) + .bt-section:not(.bt-section--light) {
  padding-top: 0;
}

.bt-section-head {
  max-width: 680px;
  margin: 0 auto clamp(36px, 5vw, 56px);
  text-align: center;
}

.bt-h1,
.bt-h2,
.bt-h3 {
  margin: 0;
  color: inherit;
  font-weight: 700;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.bt-h1 {
  font-size: clamp(2.4rem, 5.2vw, 3.75rem);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.035em;
}

.bt-h2 {
  font-size: clamp(1.9rem, 3.8vw, 2.75rem);
  line-height: 1.1;
}

.bt-h3 {
  font-size: 1.1875rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.bt-lead {
  margin: 18px 0 0;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.55;
  color: var(--bt-muted);
  text-wrap: pretty;
}

.bt-body {
  margin: 12px 0 0;
  color: var(--bt-muted);
  text-wrap: pretty;
}

.bt strong {
  color: inherit;
  font-weight: 600;
}

/* ---------- Buttons ---------- */

.bt-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
}

.bt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 24px;
  border-radius: 999px;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.bt-btn svg {
  width: 19px;
  height: 19px;
  flex: none;
}

.bt .bt-btn--primary,
.bt .bt-btn--primary:hover {
  color: #FFFFFF;
  background: #007AFF;
  box-shadow: 0 8px 20px -10px rgba(0, 90, 200, 0.6);
}

.bt .bt-btn--primary:hover {
  transform: translateY(-1px);
  background: #0A70EB;
  box-shadow: 0 12px 24px -10px rgba(0, 90, 200, 0.7);
}

.bt .bt-btn--secondary,
.bt .bt-btn--secondary:hover {
  color: var(--bt-text);
  background: #FFFFFF;
  box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.14);
}

.bt .bt-btn--secondary:hover {
  box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.32);
}

.bt-btn-light {
  font-weight: 400;
  color: var(--bt-muted);
}

.bt-setapp {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
}

.bt-setapp .setapp-button {
  margin: 0;
}

.bt-fineprint {
  margin: 16px 0 0;
  font-size: 0.875rem;
  color: var(--bt-muted);
}

/* ---------- Hero ---------- */

.bt-hero {
  padding-top: clamp(32px, 5vw, 64px);
  padding-bottom: clamp(56px, 7vw, 96px);
  background: #FFFFFF;
  text-align: center;
  overflow: hidden;
}

.bt-hero-copy {
  max-width: 720px;
  margin: 0 auto;
}

.bt-app-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  font-size: 1.0625rem;
  font-weight: 600;
  text-decoration: none;
}

.bt .bt-app-badge,
.bt .bt-app-badge:hover {
  color: var(--bt-text);
}

.bt-app-badge img {
  width: 64px;
  height: 64px;
  margin: -6px;
  filter: drop-shadow(0 6px 12px rgba(16, 140, 60, 0.25));
}

.bt-app-badge span {
  /* Back to a word space after "Batteries"; the 12px gap is for the icon. */
  margin-left: -7px;
  font-weight: 500;
  color: var(--bt-muted);
}

.bt-hero .bt-lead {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.bt-hero-visual {
  margin-top: clamp(40px, 6vw, 64px);
}

/* ---------- Scaled stages ----------
   Product visuals are laid out at a fixed size in points, like the app, and scaled to fit by JS
   (see data-bt-scale). Without JS they render at full size and are clipped. */

.bt-scaler {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.bt-scaler-inner {
  position: absolute;
  top: 0;
  left: 50%;
  transform-origin: top center;
  transform: translateX(-50%) scale(var(--bt-scale, 1));
}

/* ---------- The Mac screen ---------- */

/* The MacBook Pro is Apple's own product bezel (14-inch, Space Black, from Apple Design Resources),
   cropped and left otherwise unaltered; the live desktop sits behind its transparent display.
   Sizes are in points: the display is 960×630.5, and the frame image is drawn around it. */
.bt-mac {
  position: relative;
  width: 1163.2px;
  height: 712.7px;
}

.bt-mac::after {
  /* Contact shadow under the base. */
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: -14px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(40, 30, 20, 0.32), rgba(40, 30, 20, 0));
  z-index: -1;
}

.bt-mac-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  pointer-events: none;
}

.bt-mac .bt-screen {
  /* One point of bleed under the bezel on every side, so no page shows through its antialiased edge. */
  position: absolute;
  left: 100.6px;
  top: 13.6px;
  width: 962px;
  height: 632.5px;
}

.bt-screen {
  position: relative;
  overflow: hidden;
  font-family: var(--bt-sys-font);
  font-size: 13px;
  line-height: 16px;
  letter-spacing: -0.005em;
  color: var(--bt-label);
  text-align: left;
  user-select: none;
  -webkit-user-select: none;
}

/* A lighter take on the macOS Golden Gate wallpaper: folded sheets in champagne, gold and slate. */
.bt-wallpaper {
  position: absolute;
  inset: 0;
  background: #E9DCC8 url(../assets/batteries/wallpaper.svg) center / cover no-repeat;
}

/* Menu bar: transparent like macOS 26, with dark text over the light top of the wallpaper. */
.bt-menubar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  z-index: 3;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
}

.bt-menubar-left,
.bt-menubar-right {
  display: flex;
  align-items: center;
  gap: 2px;
}

.bt-mb-item {
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  transition: background-color 0.12s ease;
}

.bt-mb-app {
  font-weight: 700;
}

.bt-mb-item.is-active {
  background: rgba(0, 0, 0, 0.12);
}

.bt-mb-item > .bt-g {
  width: 16px;
  height: 16px;
}

.bt-mb-clock {
  padding-left: 6px;
  font-variant-numeric: tabular-nums;
}

/* ---------- Glyphs: SF Symbols exported from the app, recolored with a mask ---------- */

.bt-g {
  display: inline-block;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--g) center / contain no-repeat;
  mask: var(--g) center / contain no-repeat;
}

.bt-g--iphone { --g: url(../assets/batteries/glyphs/iphone.png); }
.bt-g--ipad { --g: url(../assets/batteries/glyphs/ipad.png); }
.bt-g--watch { --g: url(../assets/batteries/glyphs/applewatch.png); }
.bt-g--airpods-pro { --g: url(../assets/batteries/glyphs/airpods-pro.png); }
.bt-g--airpods-max { --g: url(../assets/batteries/glyphs/airpods-max.png); }
.bt-g--airpods { --g: url(../assets/batteries/glyphs/airpods.png); }
.bt-g--mouse { --g: url(../assets/batteries/glyphs/magicmouse.png); }
.bt-g--keyboard { --g: url(../assets/batteries/glyphs/keyboard.png); }
.bt-g--beats { --g: url(../assets/batteries/glyphs/beats-headphones.png); }
.bt-g--bolt { --g: url(../assets/batteries/glyphs/bolt-fill.png); }
.bt-g--battery-25 { --g: url(../assets/batteries/glyphs/battery-25.png); }
.bt-g--wifi { --g: url(../assets/batteries/glyphs/wifi.png); }
.bt-g--cc { --g: url(../assets/batteries/glyphs/switch-2.png); }
.bt-g--search { --g: url(../assets/batteries/glyphs/magnifyingglass.png); }

/* ---------- Battery glyph: BatteryView_iOS16 ----------
   A 27×14 body with a 4pt corner, a half-circle tip, the level filled from the left and the
   percentage drawn inside. Set the level with --p (0–100). */

.bt-batt {
  --tint: rgba(0, 0, 0, 1);
  --body: rgba(0, 0, 0, 0.4);
  --fill: var(--tint);
  --num: #FFFFFF;
  --num-opacity: 1;
  display: inline-flex;
  align-items: center;
  flex: none;
  font-family: var(--bt-sys-font);
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.bt-batt-body {
  position: relative;
  width: 27px;
  height: 14px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--body);
}

.bt-batt-body::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--p, 50) * 1%);
  background: var(--fill);
  transition: width 0.35s ease, background-color 0.35s ease;
}

.bt-batt-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  color: var(--num);
  opacity: var(--num-opacity);
  letter-spacing: -0.02em;
}

.bt-batt-num .bt-g--bolt {
  display: none;
  width: 9px;
  height: 9px;
}

.bt-batt-tip {
  width: 3px;
  height: 4px;
  margin-left: 1px;
  border-radius: 0 3px 3px 0;
  background: var(--body);
}

.bt-batt.is-full .bt-batt-tip {
  background: var(--fill);
}

/* Menu rows and widget rows use the secondary label color, with subtler digits. */
.bt-batt--row {
  --tint: rgba(0, 0, 0, 0.42);
  --body: rgba(0, 0, 0, 0.16);
  --num-opacity: 0.75;
}

.bt-batt.is-low {
  --fill: var(--bt-red);
  --num-opacity: 1;
}

.bt-batt.is-charging {
  --body: var(--tint);
}

.bt-batt.is-charging .bt-batt-body::before {
  display: none;
}

.bt-batt.is-charging .bt-batt-num .bt-g--bolt {
  display: inline-block;
}

/* Like the app's minimumScaleFactor: the digits shrink to make room for the bolt. */
.bt-batt.is-charging .bt-batt-num {
  font-size: 8.5px;
}

.bt-batt.is-charging .bt-batt-num .bt-g--bolt {
  width: 8px;
  height: 8px;
}

/* ---------- The Batteries menu ---------- */

.bt-menu {
  position: absolute;
  top: 34px;
  width: 300px;
  padding: 5px 0;
  border-radius: 13px;
  z-index: 4;
  background: rgba(244, 246, 245, 0.78);
  -webkit-backdrop-filter: blur(28px) saturate(1.8);
  backdrop-filter: blur(28px) saturate(1.8);
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.18),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.7),
    0 18px 50px -10px rgba(0, 0, 0, 0.35),
    0 4px 12px rgba(0, 0, 0, 0.08);
  transform-origin: top center;
}

.bt-menu-sep {
  height: 1px;
  margin: 5px 16px;
  background: rgba(0, 0, 0, 0.1);
}

.bt-menu-battery {
  padding: 8px 16px 4px;
}

.bt-menu-battery-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.bt-menu-battery-top strong {
  font-weight: 600;
}

.bt-menu-battery-top span,
.bt-menu-callout {
  color: var(--bt-label-2);
}

.bt-menu-callout {
  font-size: 12px;
  line-height: 15px;
}

.bt-menu-row {
  display: flex;
  align-items: center;
  height: 20px;
  padding: 0 16px;
  white-space: nowrap;
}

/* A device row: the icon in a 20pt column, the name, and the battery glyph in a 38pt column. */
.bt-menu-device {
  color: var(--bt-label-2);
}

.bt-menu-device > .bt-g {
  width: 20px;
  height: 16px;
  margin-right: 4px;
  -webkit-mask-position: left center;
  mask-position: left center;
}

.bt-menu-device-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bt-menu-device .bt-batt {
  width: 38px;
  justify-content: flex-end;
}

.bt-menu-header {
  font-size: 12px;
  font-weight: 700;
  color: var(--bt-label-2);
}

.bt-menu-secondary {
  color: var(--bt-label-2);
}

.bt-menu-action {
  position: relative;
  color: var(--bt-label);
}

.bt-menu-lpm {
  height: 30px;
  gap: 8px;
}

.bt-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.12);
  color: var(--bt-label-2);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.bt-toggle .bt-g {
  width: 17px;
  height: 9px;
}

.bt-toggle.is-on {
  background: #007AFF;
  color: #FFFFFF;
}

/* ---------- Notification banner ---------- */

.bt-notif {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 344px;
  padding: 12px 14px 12px 10px;
  border-radius: 20px;
  background: rgba(246, 247, 247, 0.8);
  -webkit-backdrop-filter: blur(30px) saturate(1.8);
  backdrop-filter: blur(30px) saturate(1.8);
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.12),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.7),
    0 12px 36px -8px rgba(0, 0, 0, 0.28);
  font-family: var(--bt-sys-font);
  font-size: 13px;
  line-height: 16px;
  color: var(--bt-label);
  text-align: left;
}

.bt-notif img {
  width: 36px;
  height: 36px;
  flex: none;
}

.bt-notif-text {
  flex: 1;
  min-width: 0;
}

.bt-notif-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.bt-notif-top strong {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bt-notif-top span {
  flex: none;
  font-size: 12px;
  color: var(--bt-label-2);
}

.bt-notif-sub {
  margin: 1px 0 0;
}

/* ---------- Widgets: BatteriesWidget ---------- */

.bt-widget {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background: #FFFFFF;
  font-family: var(--bt-sys-font);
  color: rgba(0, 0, 0, 0.88);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.08), 0 10px 30px -12px rgba(0, 0, 0, 0.3);
  text-align: left;
}

.bt-widget--small {
  width: 170px;
  height: 170px;
}

.bt-widget--medium {
  width: 360px;
  height: 170px;
}

.bt-widget--large {
  width: 360px;
  height: 376px;
}

/* ProgressRing: a 0.125× line, a 30% gray track, the device icon at 0.4× in the middle. */
.bt-ring {
  --c: var(--bt-ring-high);
  position: relative;
  width: var(--size);
  height: var(--size);
  flex: none;
}

.bt-ring.is-low {
  --c: var(--bt-ring-low);
}

.bt-ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.bt-ring-track {
  fill: none;
  stroke: rgba(0, 0, 0, 0.3);
}

.bt-ring-level {
  fill: none;
  stroke: var(--c);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.35s ease, stroke 0.35s ease;
}

.bt-ring > .bt-g:not(.bt-ring-bolt) {
  position: absolute;
  top: 30%;
  left: 30%;
  width: 40%;
  height: 40%;
  color: rgba(0, 0, 0, 0.88);
}

.bt-ring-bolt {
  position: absolute;
  top: calc(var(--size) * -0.0625);
  left: 50%;
  width: calc(var(--size) * 0.19);
  height: calc(var(--size) * 0.25);
  transform: translateX(-50%);
  color: #FFFFFF;
  /* A dark edge and a soft shadow keep the white bolt visible over the green ring. The shadow is
     on this wrapper because the glyph's mask would clip it. */
  filter: drop-shadow(0 0 0.6px rgba(0, 0, 0, 0.55)) drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.35));
  display: none;
}

.bt-ring-bolt .bt-g {
  display: block;
  width: 100%;
  height: 100%;
}

.bt-ring.is-charging .bt-ring-bolt {
  display: block;
}

.bt-widget-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 16px;
  height: 100%;
  place-items: center;
}

.bt-widget-row {
  display: flex;
  height: 100%;
  align-items: center;
}

.bt-widget-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.bt-widget-pct {
  font-size: 17px;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
}

.bt-widget-pct.is-empty {
  visibility: hidden;
}

.bt-widget-list {
  display: flex;
  flex-direction: column;
  padding: 4px 0;
}

.bt-widget-cell {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 61px;
  padding: 0 16px;
  font-size: 13px;
}

.bt-widget-cell + .bt-widget-cell::before {
  content: "";
  position: absolute;
  top: 0;
  left: 44px;
  right: 0;
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
}

.bt-widget-cell > .bt-g {
  width: 20px;
  height: 22px;
}

.bt-widget-cell > span:not(.bt-batt) {
  flex: 1;
}

.bt-widget-single {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 16px;
}

.bt-widget-single .bt-widget-pct {
  font-size: 36px;
  line-height: 40px;
}

/* ---------- Hero stage layout ---------- */

.bt-stage {
  max-width: 1080px;
  margin: 0 auto;
}

.bt-stage .bt-scaler-inner {
  width: 1164px;
  height: 732px;
}

/* With the camera housing, the menu bar is as tall as on a MacBook Pro. */
.bt-stage .bt-menubar {
  height: 37px;
  padding: 0 12px;
}

.bt-stage .bt-menu {
  top: 41px;
  right: 124px;
}

.bt-stage .bt-desk-widget {
  position: absolute;
  left: 32px;
  top: 62px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.bt-desk-smalls {
  display: flex;
  gap: 18px;
}

.bt-stage .bt-stage-notif {
  position: absolute;
  top: 46px;
  right: 10px;
  z-index: 5;
}

/* Narrow screens crop to the top right of the MacBook: the menu bar, the menu and the notification. */
.bt-stage.is-narrow .bt-scaler-inner {
  /* Starts just right of the camera housing, and fades out to the left and bottom. */
  width: 520px;
  height: 540px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent), linear-gradient(90deg, transparent, #000 10%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, #000 80%, transparent), linear-gradient(90deg, transparent, #000 10%);
  mask-composite: intersect;
}

.bt-stage.is-narrow .bt-mac {
  position: absolute;
  top: 0;
  right: 0;
}

.bt-stage.is-narrow .bt-mac::after {
  display: none;
}

.bt-pointer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 22px;
  height: 22px;
  pointer-events: none;
  transition: transform 0.9s cubic-bezier(0.45, 0, 0.2, 1), opacity 0.3s ease;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.35));
}

.bt-pointer svg {
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 0.12s ease;
}

.bt-pointer.is-clicking svg {
  transform: scale(0.85);
}

/* Animated states. The resting state, without JS or with reduced motion, shows the menu open. */
.bt-anim .bt-menu {
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}

.bt-anim.is-menu-open .bt-menu {
  opacity: 1;
  transform: none;
}

.bt-stage-notif {
  opacity: 0;
  transform: translateX(380px);
}

.bt-anim .bt-stage-notif {
  transition: transform 0.55s cubic-bezier(0.2, 0.9, 0.25, 1), opacity 0.4s ease;
}

.bt-anim.is-notif .bt-stage-notif {
  opacity: 1;
  transform: none;
}

.bt-stage:not(.bt-anim) .bt-pointer {
  opacity: 0;
}

/* ---------- Feature rows ---------- */

.bt-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.bt-feature + .bt-feature {
  margin-top: clamp(72px, 9vw, 120px);
}

.bt-feature-copy {
  max-width: 460px;
}

.bt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--bt-green-ink);
}

.bt-eyebrow .bt-g {
  width: 18px;
  height: 18px;
}

.bt-checks {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.bt-checks li {
  position: relative;
  margin-top: 10px;
  padding-left: 28px;
  color: var(--bt-text);
}

.bt-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.2l2.6 2.6L13 6.4' fill='none' stroke='%230B7A36' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat,
    var(--bt-green-soft);
}

.bt-panel {
  border-radius: var(--bt-radius);
  overflow: hidden;
  background: #E9DCC8 url(../assets/batteries/wallpaper.svg) center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.bt-panel .bt-scaler-inner {
  padding: 40px;
}

/* Chrome clips the shadow of a backdrop-filtered menu to its parent's box, so the menu's screen
   reaches under the panel's padding (the negative margin keeps the layout the same) and the panel's
   own rounded edge is the only edge you see. */
.bt-panel .bt-screen {
  overflow: visible;
}

.bt-screen--menu {
  margin: -40px;
  padding: 48px 80px;
}

/* A feature whose visual is too wide for a column gets the full width, with the copy above it. */
.bt-feature--wide {
  grid-template-columns: minmax(0, 1fr) !important;
}

.bt-feature--wide .bt-feature-copy {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.bt-feature--wide .bt-checks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 28px;
}

.bt-feature--wide .bt-checks li {
  text-align: left;
}

.bt-widgets {
  display: grid;
  grid-template-columns: 360px 360px;
  gap: 20px;
}

@media (max-width: 759px) {
  .bt-widgets {
    grid-template-columns: 360px;
  }
}

.bt-widgets-side {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.bt-widgets-smalls {
  display: flex;
  gap: 20px;
}

.bt-notif-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 404px;
}

.bt-notif-stack .bt-notif:nth-child(2) {
  opacity: 0.92;
}

/* The app's "Send Low Battery Notification at:" slider. */
.bt-pref {
  width: 404px;
  margin-top: 22px;
  padding: 16px 18px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 10px 30px -14px rgba(0, 0, 0, 0.3);
  font-family: var(--bt-sys-font);
  font-size: 13px;
  line-height: 16px;
  color: var(--bt-label);
}

.bt-pref-track {
  position: relative;
  height: 4px;
  margin: 18px 10px 0;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.12);
}

.bt-pref-track::before {
  content: "";
  position: absolute;
  inset: 0 25% 0 0;
  border-radius: 2px;
  background: #007AFF;
}

.bt-pref-knob {
  position: absolute;
  top: 50%;
  left: 75%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.25);
}

.bt-pref-ticks {
  display: flex;
  justify-content: space-between;
  margin: 10px 0 0;
  font-size: 11px;
  color: var(--bt-label-2);
}

.bt-pref-ticks span {
  width: 20px;
  text-align: center;
}

@media (min-width: 960px) {
  .bt-feature {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .bt-feature--flip .bt-feature-copy {
    order: 2;
  }

  .bt-feature--flip {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}

/* ---------- Devices ---------- */

.bt-devices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bt-device {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 12px 20px;
  border-radius: 16px;
  background: var(--bt-card);
  box-shadow: inset 0 0 0 1px var(--bt-line);
  text-align: center;
  font-weight: 600;
  line-height: 1.3;
}

.bt-device .bt-g {
  width: 40px;
  height: 40px;
  color: var(--bt-text);
}

.bt-device small {
  display: block;
  margin-top: 2px;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--bt-muted);
}

/* ---------- Press and reviews ---------- */

.bt-videos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

@media (min-width: 760px) {
  .bt-videos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.bt-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #000000;
  box-shadow: 0 12px 30px -18px rgba(0, 0, 0, 0.5);
}

.bt-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.bt-ph {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

.bt-quotes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-top: clamp(56px, 7vw, 88px);
}

@media (min-width: 760px) {
  .bt-quotes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.bt-quote {
  margin: 0;
  padding: clamp(24px, 3vw, 32px);
  border-radius: var(--bt-radius);
  background: var(--bt-card);
  box-shadow: inset 0 0 0 1px var(--bt-line);
}

.bt-quote p {
  margin: 0;
  font-size: clamp(1.125rem, 1.8vw, 1.3125rem);
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.bt-quote footer {
  margin-top: 16px;
  color: var(--bt-muted);
}

/* ---------- Details ---------- */

.bt-details {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

@media (min-width: 760px) {
  .bt-details {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.bt-detail {
  padding: 24px;
  border-radius: var(--bt-radius);
  background: var(--bt-card);
  box-shadow: inset 0 0 0 1px var(--bt-line);
}

.bt-detail p,
.bt-detail ol {
  margin: 8px 0 0;
  color: var(--bt-muted);
}

.bt-detail ol {
  padding-left: 1.2em;
  list-style: decimal;
}

.bt-detail li + li {
  margin-top: 4px;
}

/* ---------- Final call to action ---------- */

.bt-cta {
  text-align: center;
}

.bt-cta img {
  width: 96px;
  height: 96px;
  margin: 0 auto 18px;
  display: block;
  filter: drop-shadow(0 8px 16px rgba(16, 140, 60, 0.25));
}

@media (prefers-reduced-motion: reduce) {
  .bt *,
  .bt *::before,
  .bt *::after {
    transition: none !important;
  }
}