/* ==========================================================================
   KTdict — liquid glass
   Layers, from back to front: a slowly drifting aurora, then translucent
   panels that blur and saturate whatever passes behind them, each finished
   with a specular edge so it reads as a piece of glass rather than a card.
   ========================================================================== */

:root {
  color-scheme: light dark;

  --brand: #d1206f;
  --brand-bright: #f04a95;
  --violet: #7b3fe4;
  --cyan: #17b6d8;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter",
    "Helvetica Neue", "Segoe UI", Roboto, "PingFang SC", "PingFang TC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

  --page: #f2f0f6;
  --ink: #15121c;
  --ink-soft: #57516a;
  --ink-faint: #8b8499;

  --glass: rgba(255, 255, 255, 0.55);
  --glass-strong: rgba(255, 255, 255, 0.72);
  --glass-edge: rgba(255, 255, 255, 0.8);
  --pane: rgba(255, 255, 255, 0.66);
  --pane-edge: rgba(255, 255, 255, 0.9);
  --glass-hairline: rgba(21, 18, 28, 0.07);
  --specular: rgba(255, 255, 255, 0.85);
  --shadow-soft: 0 2px 6px rgba(38, 16, 62, 0.05);
  --shadow-lift: 0 24px 60px -18px rgba(45, 18, 72, 0.28);
  --shadow-deep: 0 40px 90px -30px rgba(45, 18, 72, 0.42);

  --bezel: #0d0d10;
  --bezel-edge: rgba(255, 255, 255, 0.22);

  --r-xl: 34px;
  --r-lg: 26px;
  --r-md: 18px;
  --r-sm: 12px;

  --shell: 1180px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --blur: 30px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #0a090d;
    --ink: #f3f1f7;
    --ink-soft: #a8a2b6;
    --ink-faint: #7b7589;

    --glass: rgba(255, 255, 255, 0.06);
    --glass-strong: rgba(255, 255, 255, 0.1);
    --glass-edge: rgba(255, 255, 255, 0.14);
    --pane: rgba(255, 255, 255, 0.055);
    --pane-edge: rgba(255, 255, 255, 0.11);
    --glass-hairline: rgba(255, 255, 255, 0.09);
    --specular: rgba(255, 255, 255, 0.32);
    --shadow-soft: 0 2px 6px rgba(0, 0, 0, 0.4);
    --shadow-lift: 0 24px 60px -18px rgba(0, 0, 0, 0.75);
    --shadow-deep: 0 40px 90px -30px rgba(0, 0, 0, 0.9);

    --bezel: #17161c;
    --bezel-edge: rgba(255, 255, 255, 0.14);
  }
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100svh;
  font-family: var(--font);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height: 1.55;
  color: var(--ink);
  background: var(--page);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg {
  max-width: 100%;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.06;
  letter-spacing: -0.028em;
  font-weight: 700;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.35rem, 1.4rem + 3.9vw, 4.35rem);
  letter-spacing: -0.038em;
}

h2 {
  font-size: clamp(1.85rem, 1.25rem + 2.4vw, 3.05rem);
  letter-spacing: -0.034em;
}

h3 {
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.85rem);
}

p {
  margin: 0;
}

:where(:lang(zh-Hans), :lang(zh-Hant)) :is(h1, h2, h3) {
  letter-spacing: -0.01em;
  line-height: 1.24;
}

.skip-link {
  position: fixed;
  top: 0.6rem;
  left: 50%;
  translate: -50% -160%;
  z-index: 100;
  padding: 0.7rem 1.2rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--page);
  font-weight: 600;
  transition: translate 0.2s ease;
}

.skip-link:focus-visible {
  translate: -50% 0;
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 6px;
}

/* --------------------------------------------------------------- background */

.aurora {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* Soft colour fields behind the glass. Painted once, as static radial
   gradients on a single fixed layer: blurred boxes and drift animations both
   look the same at this softness but keep the compositor working on every
   frame of every scroll, which is not a trade a landing page should make. */
.aurora-blob {
  position: absolute;
  inset: 0;
}

.aurora-blob.a {
  background: radial-gradient(
    46vw 42vw at 16% -6%,
    color-mix(in srgb, var(--brand-bright) 40%, transparent) 0%,
    transparent 66%
  );
}

.aurora-blob.b {
  background: radial-gradient(
    42vw 40vw at 88% -4%,
    color-mix(in srgb, var(--violet) 36%, transparent) 0%,
    transparent 66%
  );
}

.aurora-blob.c {
  background: radial-gradient(
    56vw 48vw at 60% 62%,
    color-mix(in srgb, var(--cyan) 24%, transparent) 0%,
    transparent 62%
  );
}

@media (prefers-color-scheme: dark) {
  .aurora-blob.a {
    background: radial-gradient(
      46vw 42vw at 16% -6%,
      color-mix(in srgb, var(--brand) 42%, transparent) 0%,
      transparent 66%
    );
  }

  .aurora-blob.b {
    background: radial-gradient(
      42vw 40vw at 88% -4%,
      color-mix(in srgb, var(--violet) 34%, transparent) 0%,
      transparent 66%
    );
  }

  .aurora-blob.c {
    background: radial-gradient(
      56vw 48vw at 60% 62%,
      color-mix(in srgb, var(--cyan) 16%, transparent) 0%,
      transparent 62%
    );
  }
}

/* -------------------------------------------------------------------- glass */

.glass {
  position: relative;
  isolation: isolate;
  border-radius: var(--r-lg);
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  backdrop-filter: blur(var(--blur)) saturate(190%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(190%);
  box-shadow: inset 0 1px 0 var(--specular), var(--shadow-soft), var(--shadow-lift);
}

.glass-strong {
  background: var(--glass-strong);
}

/* Content cards are frosted panes, not true glass: same material, no live
   backdrop blur. A page can hold dozens of them, and blurring behind each one
   costs more than it shows — real glass is reserved for floating chrome. */
.pane {
  position: relative;
  border-radius: var(--r-lg);
  background: var(--pane);
  border: 1px solid var(--pane-edge);
  box-shadow: inset 0 1px 0 var(--specular), var(--shadow-soft);
}

/* The refraction pass: a faint sheen pooled at the top-left, the way light
   collects on a curved edge. Kept behind content with a negative z-index. */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(
      120% 80% at 8% 0%,
      rgba(255, 255, 255, 0.5) 0%,
      transparent 55%
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 42%);
  opacity: 0.9;
  pointer-events: none;
}

@media (prefers-color-scheme: dark) {
  .glass::before {
    background: radial-gradient(
        120% 80% at 8% 0%,
        rgba(255, 255, 255, 0.14) 0%,
        transparent 55%
      ),
      linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 42%);
  }
}

/* ------------------------------------------------------------------ shell */

.site-header,
.section,
.hero,
.site-footer,
.page-hero,
.archive-list,
.reviews-archive-grid {
  width: min(var(--shell), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

.section {
  padding-block: clamp(3.5rem, 8vw, 7rem);
}

.eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
}

:where(:lang(zh-Hans), :lang(zh-Hant)) .eyebrow {
  letter-spacing: 0.06em;
}

.lead {
  color: var(--ink-soft);
  font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem);
  max-width: 62ch;
  text-wrap: pretty;
}

.section-head {
  display: grid;
  gap: 0.75rem;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.section-head.with-action {
  grid-template-columns: 1fr auto;
  align-items: end;
}

.section-head.with-action > div {
  display: grid;
  gap: 0.6rem;
}

.text-link {
  color: var(--brand);
  font-weight: 650;
  white-space: nowrap;
}

.text-link:hover {
  opacity: 0.75;
}

/* ------------------------------------------------------------------ buttons */

.btn {
  --btn-bg: var(--glass-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--ink);
  font: inherit;
  font-weight: 650;
  letter-spacing: -0.01em;
  cursor: pointer;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 1px 0 var(--specular), var(--shadow-soft);
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.24s ease, filter 0.24s ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 var(--specular), var(--shadow-lift);
}

.btn:active {
  transform: translateY(0) scale(0.985);
}

.btn-primary {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(140deg, var(--brand-bright), var(--brand) 55%, #a5185a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 14px 34px -10px rgba(209, 32, 111, 0.62);
}

.btn-primary:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 20px 46px -12px rgba(209, 32, 111, 0.7);
}

.btn-large {
  padding: 1.05rem 1.9rem;
  font-size: 1.06rem;
}

.btn-small {
  padding: 0.6rem 1.1rem;
  font-size: 0.92rem;
}

.btn-icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.9rem;
}

/* Apple's own badge artwork, in the page's language. Both the black and the
   white cut ship in the markup and the theme decides which one shows —
   recolouring a single cut with a filter is what the guidelines prohibit. */
.store-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.9rem;
}

.store-badge {
  display: inline-block;
  border-radius: 10px;
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), filter 0.24s ease;
}

.store-badge:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 10px 22px rgba(30, 12, 50, 0.28));
}

.store-badge:active {
  transform: translateY(0) scale(0.985);
}

.store-badge img {
  display: block;
  height: 52px;
  width: auto;
}

.store-badge .badge-white {
  display: none;
}

@media (prefers-color-scheme: dark) {
  .store-badge .badge-black {
    display: none;
  }

  .store-badge .badge-white {
    display: block;
  }

  .store-badge:hover {
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.6));
  }
}

.store-badges-hero .store-badge img {
  height: 58px;
}

.store-badge-header img {
  height: 34px;
}

.store-badges-sticky {
  margin-top: 0;
  justify-content: center;
}

.store-badges-sticky .store-badge img {
  height: 50px;
}

/* --------------------------------------------------------------- rating */

.hero-rating {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.4rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.hero-stars {
  color: #f5a524;
  letter-spacing: 0.1em;
  font-size: 1rem;
}

.hero-rating strong {
  color: var(--ink);
  font-weight: 700;
}

/* ------------------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0.85rem;
  z-index: 50;
  margin-top: 0.85rem;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0.6rem 0.55rem 1rem;
  border-radius: 999px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.03em;
}

.logo img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  box-shadow: var(--shadow-soft);
}

.site-nav {
  display: flex;
  gap: 0.35rem;
}

.site-nav a {
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  color: var(--ink-soft);
  font-weight: 550;
  font-size: 0.95rem;
  transition: background 0.2s ease, color 0.2s ease;
}

.site-nav a:hover {
  color: var(--ink);
  background: var(--glass-strong);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* --------------------------------------------------------------- language */

.lang-menu {
  position: relative;
}

.lang-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 550;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.lang-trigger:hover,
.lang-trigger[aria-expanded="true"] {
  color: var(--ink);
  background: var(--glass-strong);
}

.lang-list {
  position: absolute;
  top: calc(100% + 0.55rem);
  right: 0;
  z-index: 60;
  display: grid;
  gap: 0.1rem;
  min-width: 12rem;
  padding: 0.4rem;
  border-radius: var(--r-md);
}

.lang-list[hidden] {
  display: none;
}

.lang-option {
  padding: 0.55rem 0.8rem;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 550;
  color: var(--ink-soft);
  transition: background 0.15s ease, color 0.15s ease;
}

.lang-option:hover {
  background: var(--glass-strong);
  color: var(--ink);
}

.lang-option[aria-current="true"] {
  color: var(--brand);
  font-weight: 700;
}

/* --------------------------------------------------------------------- hero */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem);
}

.hero-copy .eyebrow {
  margin-bottom: 0.9rem;
}

.hero-copy .lead {
  margin-top: 1.2rem;
}

.hero-note {
  margin-top: 0.55rem;
  color: var(--ink-faint);
  font-size: 0.9rem;
}

.hero-visual {
  display: grid;
  place-items: center;
}

.trust-bar {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 1.15rem 1.6rem;
  list-style: none;
  color: var(--ink-soft);
  font-size: 0.94rem;
}

.trust-bar li {
  position: relative;
  padding-left: 1.4rem;
}

.trust-bar li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--brand-bright), var(--brand));
  box-shadow: 0 0 0 3px rgba(209, 32, 111, 0.14);
}

/* ------------------------------------------------------------ device frames */

.device {
  width: 100%;
  display: grid;
  place-items: center;
}

.frame {
  display: none;
  position: relative;
  width: 100%;
  filter: drop-shadow(0 30px 60px rgba(40, 14, 66, 0.28));
}

@media (prefers-color-scheme: dark) {
  .frame {
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.65));
  }
}

.frame-screen {
  overflow: hidden;
  background: #fff;
}

.frame img {
  display: block;
  width: 100%;
  height: auto;
}

/* Which frame is on screen is decided by data-device on <html>, set by an
   inline script before first paint. Hidden frames are display:none, so their
   lazy-loaded images are never fetched. */
html[data-device="iphone"] .frame-iphone,
html[data-device="ipad"] .frame-ipad,
html[data-device="mac"] .frame-mac {
  display: block;
}

/* Some panels have no Mac capture. A Mac visitor gets no image for those
   rather than another device's frame under a picker that says Mac; the copy
   takes the full width instead. */
html[data-device="mac"] .feature[data-no-mac] .feature-visual {
  display: none;
}

html[data-device="mac"] .feature[data-no-mac] {
  grid-template-columns: minmax(0, 1fr);
}

html[data-device="mac"] .feature[data-no-mac] .feature-copy p:last-child {
  max-width: 74ch;
}

.frame-iphone {
  max-width: 300px;
  padding: 11px;
  border-radius: 54px;
  background: linear-gradient(150deg, #3a3a44, var(--bezel) 26%, #000 74%, #2c2c34);
  box-shadow: inset 0 0 0 1.5px var(--bezel-edge),
    inset 0 1px 2px rgba(255, 255, 255, 0.35);
}

.frame-iphone .frame-screen {
  border-radius: 44px;
}

/* Dynamic Island */
.frame-iphone::after {
  content: "";
  position: absolute;
  top: 22px;
  left: 50%;
  translate: -50% 0;
  width: 31%;
  height: 26px;
  border-radius: 999px;
  background: #000;
  z-index: 2;
}

.frame-ipad {
  max-width: 500px;
  padding: 13px;
  border-radius: 34px;
  background: linear-gradient(150deg, #3a3a44, var(--bezel) 26%, #000 74%, #2c2c34);
  box-shadow: inset 0 0 0 1.5px var(--bezel-edge),
    inset 0 1px 2px rgba(255, 255, 255, 0.35);
}

.frame-ipad .frame-screen {
  border-radius: 22px;
}

/* The Mac captures already include the window chrome, so the frame is only a
   clip that trims the baked-in white corners, plus the window shadow. */
.frame-mac {
  max-width: 760px;
}

.frame-mac .frame-screen {
  border-radius: 14px;
  box-shadow: 0 0 0 1px var(--glass-hairline);
}

/* ------------------------------------------------------------ watch inset */

/* The app runs on Apple Watch too, and saying so in the trust bar is weaker
   than showing it. It sits against the corner of whichever device frame is
   on screen, small enough to read as a companion rather than a second claim
   on the visitor's attention. */
.hero-visual {
  position: relative;
}

.watch {
  position: absolute;
  left: 0;
  bottom: 4%;
  width: 27%;
  max-width: 132px;
  min-width: 84px;
  z-index: 2;
  pointer-events: none;
}

.watch-frame {
  position: relative;
  padding: 6.5%;
  border-radius: 30%/25%;
  background: linear-gradient(155deg, #4a4a52, #17171c 34%, #050507 78%, #33333b);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    0 18px 34px -10px rgba(35, 12, 58, 0.55);
}

@media (prefers-color-scheme: dark) {
  .watch-frame {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16),
      0 18px 34px -10px rgba(0, 0, 0, 0.8);
  }
}

/* Digital crown and side button. */
.watch-frame::after {
  content: "";
  position: absolute;
  right: -3.5%;
  top: 26%;
  width: 4.5%;
  height: 15%;
  border-radius: 999px;
  background: linear-gradient(180deg, #55555f, #24242b);
}

.watch-screen {
  overflow: hidden;
  border-radius: 24%/20%;
  background: #000;
}

.watch-screen img {
  display: block;
  width: 100%;
  height: auto;
}

/* Only alongside the phone. The watch app is a companion to the one in your
   pocket, and pairing it with an iPad or a Mac window suggests a relationship
   that isn't the one people actually have with it. */
html[data-device="ipad"] .watch,
html[data-device="mac"] .watch {
  display: none;
}

.hero-visual .frame-iphone {
  max-width: 330px;
}

.hero-visual .frame-ipad {
  max-width: 540px;
}

.hero-visual .frame-mac {
  max-width: 620px;
}

/* ------------------------------------------------------------ device picker */

.device-picker {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  justify-self: start;
  margin-top: 1rem;
  padding: 0.5rem 0.6rem 0.5rem 1.1rem;
  border-radius: 999px;
}

.device-picker-label {
  color: var(--ink-soft);
  font-size: 0.9rem;
  font-weight: 550;
}

.segmented {
  display: inline-flex;
  gap: 0.2rem;
  padding: 0.2rem;
  border-radius: 999px;
  background: var(--glass-hairline);
}

.segmented button {
  padding: 0.42rem 0.95rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
}

.segmented button:hover {
  color: var(--ink);
}

.segmented button[aria-checked="true"] {
  color: var(--ink);
  background: var(--glass-strong);
  border-color: var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--specular), var(--shadow-soft);
}

/* ----------------------------------------------------------------- features */

.feature-list {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5.5rem);
}

.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.75rem, 5vw, 4rem);
}

.feature.is-flipped .feature-copy {
  order: 2;
}

.feature-caption {
  color: var(--brand);
  font-weight: 650;
  font-size: 0.98rem;
  margin-bottom: 0.6rem;
}

.feature-copy h3 {
  margin-bottom: 0.85rem;
}

.feature-copy p:last-child {
  color: var(--ink-soft);
  max-width: 54ch;
  text-wrap: pretty;
}

/* ------------------------------------------------------------------ pricing */

.pricing-card {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  padding: clamp(1.75rem, 4vw, 3.25rem);
  border-radius: var(--r-xl);
}

.pricing-copy .eyebrow {
  margin-bottom: 0.7rem;
}

.pricing-copy .lead {
  margin-top: 1rem;
}

.pricing-list {
  display: grid;
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pricing-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.75rem;
  font-weight: 550;
}

.pricing-list svg {
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.12rem;
  padding: 0.22rem;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(140deg, var(--brand-bright), var(--brand));
  box-shadow: 0 6px 14px -6px rgba(209, 32, 111, 0.8);
}

/* ------------------------------------------------------------------ reviews */

.review-grid,
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}

.review,
.news-card {
  margin: 0;
  padding: 1.5rem;
  border-radius: var(--r-lg);
}

.review blockquote {
  margin: 0;
}

.review h3 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.review p,
.news-card p {
  color: var(--ink-soft);
}

.review figcaption {
  margin-top: 1rem;
  color: var(--ink-faint);
  font-size: 0.88rem;
  font-weight: 550;
}

/* Needs to outrank `.review p` / `.archive-review p`, which set the body ink. */
.review .rating,
.archive-review .rating,
p.rating {
  margin-bottom: 0.65rem;
  color: #f5a524;
  letter-spacing: 0.12em;
  font-size: 0.95rem;
}

.news-date {
  margin-bottom: 0.55rem;
  color: var(--brand);
  font-weight: 650;
  font-size: 0.88rem;
}

.news-card h3 {
  font-size: 1.12rem;
  margin-bottom: 0.5rem;
}

/* ---------------------------------------------------------------------- faq */

.faq-list {
  display: grid;
  gap: 0.75rem;
}

.faq-list details {
  padding: 0.35rem 1.4rem;
  border-radius: var(--r-md);
}

.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.05rem;
  font-weight: 650;
  font-size: 1.05rem;
  cursor: pointer;
  list-style: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  content: "";
  flex: none;
  width: 0.65rem;
  height: 0.65rem;
  border-right: 2px solid var(--ink-faint);
  border-bottom: 2px solid var(--ink-faint);
  rotate: 45deg;
  translate: 0 -0.2rem;
  transition: rotate 0.25s ease, translate 0.25s ease;
}

.faq-list details[open] summary::after {
  rotate: -135deg;
  translate: 0 0.15rem;
}

.faq-list details p {
  padding-bottom: 1.15rem;
  color: var(--ink-soft);
  max-width: 72ch;
}

/* ---------------------------------------------------------------- final cta */

.final-cta {
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
  border-radius: var(--r-xl);
  text-align: center;
}

.final-cta .lead {
  margin: 1rem auto 0;
}

.final-cta .store-badges {
  justify-content: center;
}

/* ------------------------------------------------------------------- footer */

.site-footer {
  padding-block: clamp(2.5rem, 5vw, 4rem) 6.5rem;
}

.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
  gap: 2rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--glass-hairline);
}

.footer-brand p {
  margin-top: 0.9rem;
  max-width: 34ch;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.footer-langs,
.footer-links {
  display: grid;
  align-content: start;
  gap: 0.5rem;
}

.footer-langs h2,
.footer-links h2 {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.3rem;
}

.footer-lang,
.footer-links a {
  color: var(--ink-soft);
  font-size: 0.95rem;
  width: fit-content;
}

.footer-lang:hover,
.footer-links a:hover {
  color: var(--ink);
}

.footer-lang[aria-current="true"] {
  color: var(--brand);
  font-weight: 650;
}

.footer-legal {
  margin-top: 2rem;
  color: var(--ink-faint);
  font-size: 0.88rem;
}

/* --------------------------------------------------------------- sticky cta */

.sticky-cta {
  position: fixed;
  left: 50%;
  bottom: max(0.9rem, env(safe-area-inset-bottom));
  translate: -50% 0;
  z-index: 45;
  display: none;
  width: min(26rem, calc(100vw - 1.6rem));
  opacity: 0;
  transform: translateY(140%);
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* A glass tray under the badge, so it reads as floating chrome rather than
   something pasted onto whatever screenshot happens to be behind it. */
.sticky-cta-inner {
  display: flex;
  justify-content: center;
  padding: 0.55rem;
  border-radius: 999px;
  background: var(--glass-strong);
  border: 1px solid var(--glass-edge);
  backdrop-filter: blur(24px) saturate(190%);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  box-shadow: inset 0 1px 0 var(--specular), var(--shadow-lift);
}

.sticky-cta.is-shown {
  opacity: 1;
  transform: translateY(0);
}

/* ------------------------------------------------------------- news archive */

.page-hero {
  padding-block: clamp(3rem, 7vw, 5rem) 1rem;
}

.page-hero .lead {
  margin-top: 1rem;
}

.archive-list {
  padding-block: 1rem clamp(3rem, 6vw, 5rem);
  display: grid;
  gap: 1.1rem;
}

.archive-entry {
  padding: clamp(1.4rem, 3vw, 2.25rem);
  border-radius: var(--r-lg);
  background: var(--pane);
  border: 1px solid var(--pane-edge);
  box-shadow: inset 0 1px 0 var(--specular), var(--shadow-soft);
}

.archive-entry h2 {
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem);
  margin-bottom: 0.6rem;
}

.archive-entry h3 {
  font-size: 1.15rem;
  margin-block: 1.4rem 0.5rem;
}

.archive-entry a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.archive-entry blockquote {
  margin: 1.1rem 0 0;
  padding-left: 1.1rem;
  border-left: 3px solid var(--brand);
}

.archive-entry blockquote p {
  color: var(--ink);
}

.archive-entry cite {
  display: block;
  margin-top: 0.5rem;
  color: var(--ink-faint);
  font-style: normal;
  font-weight: 600;
  font-size: 0.9rem;
}

/* A press quote stays in the language it was published in; this carries the
   translation, marked as one so it is not mistaken for the quote itself. */
.quote-translation {
  margin-top: 0.7rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.quote-translation span {
  color: var(--ink-faint);
  font-size: 0.85rem;
}

.archive-figure {
  margin-top: 1.3rem;
  text-align: center;
}

.archive-figure-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.archive-figure-row img {
  width: min(100%, 200px);
}

.archive-entry p,
.archive-entry li {
  color: var(--ink-soft);
}

.archive-entry p + p,
.archive-entry ul {
  margin-top: 0.9rem;
}

.archive-entry img {
  height: auto;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lift);
}

.archive-entry .newsdate {
  margin-bottom: 0.5rem;
  color: var(--brand);
  font-weight: 650;
  font-size: 0.88rem;
}

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  border-radius: var(--r-md);
  overflow: hidden;
}

.videoWrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.reviews-archive-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
  padding-block: 1rem clamp(3rem, 6vw, 5rem);
}

.archive-review {
  padding: 1.5rem;
  border-radius: var(--r-lg);
  background: var(--pane);
  border: 1px solid var(--pane-edge);
  box-shadow: inset 0 1px 0 var(--specular), var(--shadow-soft);
}

.archive-review h2 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.archive-review p {
  color: var(--ink-soft);
}

.archive-review cite {
  display: block;
  margin-top: 0.9rem;
  color: var(--ink-faint);
  font-size: 0.88rem;
  font-style: normal;
  font-weight: 550;
}

/* ------------------------------------------------------------------- reveal */

[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------- responsive */

@media (max-width: 1080px) {
  .hero {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .trust-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .site-nav {
    display: none;
  }

  .feature {
    grid-template-columns: 1fr;
  }

  .feature.is-flipped .feature-copy {
    order: 0;
  }

  .feature-visual {
    order: -1;
  }

  .pricing-card {
    grid-template-columns: 1fr;
  }

  .review-grid,
  .news-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  :root {
    --r-xl: 26px;
    --r-lg: 20px;
  }

  .header-inner {
    padding-left: 0.8rem;
  }

  .lang-trigger span {
    display: none;
  }

    .store-badge-header {
    display: none;
  }

  .section-head.with-action {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .review-grid,
  .news-grid,
  .reviews-archive-grid {
    grid-template-columns: 1fr;
  }

  .trust-bar {
    grid-template-columns: 1fr;
  }

  /* A phone-width column leaves no room beside the frame, so the watch drops
     to the corner and overlaps only the bezel rather than the screen. */
  .watch {
    width: 23%;
    min-width: 0;
    left: -1%;
    bottom: -4%;
  }

  .device-picker {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    padding: 0.9rem;
    border-radius: var(--r-md);
    text-align: center;
  }

  .segmented {
    justify-content: space-between;
  }

  .segmented button {
    flex: 1;
  }

  .sticky-cta {
    display: block;
  }

  .footer-inner {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* Browsers without backdrop-filter get opaque panels rather than washed-out ones. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass,
  .btn {
    background: color-mix(in srgb, var(--page) 88%, var(--ink) 4%);
  }

  .btn-primary {
    background: linear-gradient(140deg, var(--brand-bright), var(--brand) 55%, #a5185a);
  }
}

/* ------------------------------------------------------------------- legal */

.legal {
  padding-top: 0;
  display: grid;
  gap: 1rem;
}

.legal-section {
  padding: clamp(1.4rem, 3vw, 2.25rem);
  border-radius: var(--r-lg);
  background: var(--pane);
  border: 1px solid var(--pane-edge);
  box-shadow: inset 0 1px 0 var(--specular), var(--shadow-soft);
}

.legal-section h2 {
  font-size: clamp(1.2rem, 1rem + 0.9vw, 1.6rem);
  margin-bottom: 0.9rem;
}

.legal-section p {
  color: var(--ink-soft);
  max-width: 78ch;
}

.legal-section p + p {
  margin-top: 0.9rem;
}

.legal-note {
  margin-top: 0.8rem;
  color: var(--ink-faint);
  font-size: 0.92rem;
}

.notfound-links {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 60ch;
}

.notfound-links a {
  display: block;
  padding: 1rem 1.25rem;
  border-radius: var(--r-md);
  background: var(--pane);
  border: 1px solid var(--pane-edge);
  box-shadow: inset 0 1px 0 var(--specular), var(--shadow-soft);
  font-weight: 550;
  transition: transform 0.2s ease;
}

.notfound-links a:hover {
  transform: translateY(-2px);
}