/* Settli — styles for index.html (extracted from inline <style>) */
:root {
    --shadow: 0,0,0;
    --accent: #007AFF;
    --accent-deep: #0040A0;
    --bg: #ffffff;
    --bg-alt: #f5f5f7;
    --bg-deep: #000000;
    --ink: #1d1d1f;
    --ink-muted: #6e6e73;
    --ink-light: #86868b;
    --card-icon-bg: #ffffff;
    --nav-bg: rgba(255,255,255,0.72);
    --hairline: rgba(0,0,0,0.08);
    --btn-ghost-stroke: rgba(0,0,0,0.12);
    --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  [data-theme="dark"],
  [data-theme="auto"] {
    /* Will be overridden by light vars when system is light, see media query */
  }
  [data-theme="dark"] {
    --shadow: 150,150,150;
    --bg: #000000;
    --bg-alt: #161618;
    --ink: #f5f5f7;
    --ink-muted: #a1a1a6;
    --ink-light: #86868b;
    --card-icon-bg: #2a2a2c;
    --nav-bg: rgba(0,0,0,0.72);
    --hairline: rgba(255,255,255,0.10);
    --btn-ghost-stroke: rgba(255,255,255,0.18);
  }
  @media (prefers-color-scheme: dark) {
    [data-theme="auto"] {
      --shadow: 150,150,150;
      --bg: #000000;
      --bg-alt: #161618;
      --ink: #f5f5f7;
      --ink-muted: #a1a1a6;
      --ink-light: #86868b;
      --card-icon-bg: #2a2a2c;
      --nav-bg: rgba(0,0,0,0.72);
      --hairline: rgba(255,255,255,0.10);
      --btn-ghost-stroke: rgba(255,255,255,0.18);
    }
    [data-theme="auto"] .device-tile svg rect[fill="#e8e8ed"] { fill: #2a2a2c; }
  }

  /* Grey shadows (dark mode) apply only over the dark page background.
     Over COLORED visual backgrounds, reset --shadow to black so inner
     elements keep a normal black shadow (inherited by descendants). */
  .daily-widgets .daily-vis,
  .daily-lockscreen .daily-vis,
  .daily-notif .daily-vis,
  .daily-spotlight .daily-vis,
  .daily-continuity .daily-vis,
  .daily-shortcuts-siri .daily-vis,
  .daily-peekpop .daily-vis,
  .daily-undo .daily-vis,
  .daily-imgplay .daily-vis,
  .daily-multitask .daily-vis,
  .feature-privacy .feature-vis,
  .feature-currency .feature-vis,
  .feature-csv .feature-vis {
    --shadow: 0,0,0;
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }
  body {
    font-family: var(--font);
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    transition: background-color .3s ease, color .3s ease;
  }
  ::selection { background: var(--accent); color: #fff; }
  img { display: block; max-width: 100%; }

  /* ── Nav ───────────────────────────────────────────────── */
  .nav {
    position: sticky; top: 0; z-index: 100;
    height: 48px;
    background: var(--nav-bg);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 0.5px solid var(--hairline);
    transition: background-color .3s ease;
  }
  .nav-inner {
    max-width: 1080px; margin: 0 auto; height: 100%;
    padding: 0 22px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 18px;
    font-size: 14px; letter-spacing: -0.01em;
  }
  .nav-logo {
    font-weight: 600; font-size: 19px; letter-spacing: -0.025em;
    display: flex; align-items: center; gap: 8px;
    color: var(--ink); text-decoration: none;
  }
  .nav-logo-mark {
    width: 28px; height: 28px; border-radius: 7px;
    background-image: url('../logo/logo-light.svg');
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
  }
  [data-theme="dark"] .nav-logo-mark {
    background-image: url('../logo/logo-dark.svg');
  }
  @media (prefers-color-scheme: dark) {
    [data-theme="auto"] .nav-logo-mark {
      background-image: url('../logo/logo-dark.svg');
    }
  }
  .nav-tools { display: flex; align-items: center; gap: 6px; }

  /* Language picker (popover) */
  .lang-picker { position: relative; }
  .lang-trigger {
    background: transparent; border: none; cursor: pointer;
    color: var(--ink); opacity: 0.7;
    height: 32px; padding: 0 8px;
    border-radius: 8px;
    display: inline-flex; align-items: center; gap: 6px;
    font-family: inherit; font-size: 12px; font-weight: 600;
    letter-spacing: 0.02em;
    transition: opacity .15s ease, background-color .15s ease;
  }
  .lang-trigger:hover { opacity: 1; background: var(--hairline); }
  .lang-trigger .flag { width: 18px; height: 13px; border-radius: 2px; display: block; flex-shrink: 0; }
  .lang-trigger .caret {
    width: 6px; height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-1px,-1px);
    opacity: 0.6;
  }
  .lang-menu {
    position: absolute; top: calc(100% + 6px); right: 0;
    z-index: 1000;
    background: #ffffff;
    border: 0.5px solid var(--hairline);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 18px 36px rgba(var(--shadow),0.18), 0 4px 10px rgba(var(--shadow),0.08);
    display: none;
    min-width: 200px;
    isolation: isolate;
  }
  [data-theme="dark"] .lang-menu {
    background: #1c1c1e;
    box-shadow: 0 18px 36px rgba(var(--shadow),0.5), 0 4px 10px rgba(var(--shadow),0.3);
  }
  @media (prefers-color-scheme: dark) {
    [data-theme="auto"] .lang-menu {
      background: #1c1c1e;
      box-shadow: 0 18px 36px rgba(var(--shadow),0.5), 0 4px 10px rgba(var(--shadow),0.3);
    }
  }
  .lang-picker.is-open .lang-menu { display: block; }
  .lang-option {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 9px 12px;
    border-radius: 8px;
    background: transparent; border: none; cursor: pointer;
    text-align: left;
    font-family: inherit; font-size: 14px; font-weight: 500;
    color: var(--ink); letter-spacing: -0.005em;
    transition: background-color .12s ease;
    white-space: nowrap;
  }
  .lang-option + .lang-option { margin-top: 1px; }
  .lang-option:hover { background: var(--bg-alt); }
  .lang-option .flag { width: 22px; height: 16px; border-radius: 2px; display: block; flex-shrink: 0; }
  .lang-option > span:nth-child(2) {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis;
  }
  .lang-option.is-active { color: var(--accent); }
  .lang-option .check {
    margin-left: auto;
    width: 14px; height: 14px;
    opacity: 0;
    color: var(--accent);
    flex-shrink: 0;
  }
  .lang-option.is-active .check { opacity: 1; }
  .nav-btn {
    background: transparent; border: none; cursor: pointer;
    color: var(--ink); opacity: 0.7;
    width: 32px; height: 32px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: opacity .15s ease, background-color .15s ease;
    font-family: inherit; font-size: 12px; font-weight: 600;
    letter-spacing: 0.02em;
  }
  .nav-btn:hover { opacity: 1; background: var(--hairline); }
  .nav-cta {
    color: var(--accent); font-weight: 500; text-decoration: none;
    white-space: nowrap; margin-left: 6px;
  }
  /* Nav App Store badge (small variant) — chained selector to win over .appstore-badge img */
  .nav-appstore { line-height: 0; padding: 0; display: inline-flex; align-items: center; }
  .nav-appstore.appstore-badge img { height: 22px; width: auto; border-radius: 5px; }
  /* (legacy empty media query removed) */

  /* ── Scroll rail (right-edge section indicator) ─────── */
  .scroll-rail {
    position: fixed;
    top: 50%; right: 22px;
    transform: translateY(-50%);
    z-index: 90;
    display: flex; flex-direction: column;
    gap: 14px;
    padding: 14px 10px;
    border-radius: 999px;
    background: var(--nav-bg);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border: 0.5px solid var(--hairline);
  }
  .rail-dot {
    position: relative;
    display: flex; align-items: center;
    background: transparent; border: none; padding: 0;
    cursor: pointer;
    width: 8px; height: 8px;
    color: var(--ink);
    -webkit-tap-highlight-color: transparent;
  }
  .rail-dot::before {
    content: "";
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--ink-light);
    opacity: 0.45;
    transition: opacity .2s ease, background-color .2s ease, transform .2s ease;
  }
  .rail-dot:hover::before { opacity: 0.85; transform: scale(1.25); }
  .rail-dot.is-active::before {
    opacity: 1;
    background: var(--accent);
    transform: scale(1.4);
  }
  .rail-dot .rail-label {
    position: absolute; right: calc(100% + 12px);
    top: 50%; transform: translateY(-50%) translateX(8px);
    white-space: nowrap;
    background: var(--ink);
    color: var(--bg);
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 12px; font-weight: 500;
    letter-spacing: -0.005em;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
  }
  .rail-dot:hover .rail-label,
  .rail-dot:focus-visible .rail-label {
    opacity: 0.95;
    transform: translateY(-50%) translateX(0);
  }
  @media (max-width: 900px) {
    .scroll-rail { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .rail-dot::before { transition: none; }
  }

  /* ── Sections common ───────────────────────────────────── */
  section { padding: 0 22px; }
  .wrap { max-width: 980px; margin: 0 auto; }
  .wrap-wide { max-width: 1180px; margin: 0 auto; }

  h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.035em; }
  h1 { font-size: clamp(56px, 8.5vw, 112px); line-height: 1.02; letter-spacing: -0.045em; }
  h2 { font-size: clamp(40px, 5.6vw, 76px); line-height: 1.05; letter-spacing: -0.04em; }
  h3 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; letter-spacing: -0.03em; }
  .eyebrow {
    font-size: 19px; font-weight: 600; color: var(--accent);
    letter-spacing: -0.01em; margin-bottom: 10px;
  }
  .lede {
    font-size: clamp(20px, 1.8vw, 24px); line-height: 1.35;
    color: var(--ink-muted); letter-spacing: -0.015em;
    font-weight: 400;
  }

  /* ── Hero ──────────────────────────────────────────────── */
  .hero {
    padding-top: 32px; padding-bottom: 36px;
    text-align: center;
    position: relative;
    overflow: visible;
  }
  .hero h1, .hero-sub, .hero-meta {
    position: relative;
    text-shadow:
      0 0 12px var(--bg, #fff),
      0 0 24px var(--bg, #fff),
      0 0 36px var(--bg, #fff);
  }
  [data-theme="dark"] .hero h1,
  [data-theme="dark"] .hero-sub,
  [data-theme="dark"] .hero-meta {
    text-shadow:
      0 0 12px #000,
      0 0 24px #000,
      0 0 36px #000;
  }
  @media (prefers-color-scheme: dark) {
    [data-theme="auto"] .hero h1,
    [data-theme="auto"] .hero-sub,
    [data-theme="auto"] .hero-meta {
      text-shadow:
        0 0 12px #000,
        0 0 24px #000,
        0 0 36px #000;
    }
  }
  .hero h1 .accent {
    background: linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    text-shadow: none;
  }
  .hero-sub {
    margin: 22px auto 0; max-width: 720px;
    font-size: clamp(22px, 2vw, 28px); line-height: 1.3;
    color: var(--ink); letter-spacing: -0.02em; font-weight: 400;
    text-wrap: balance;
  }
  .hero-meta {
    margin-top: 26px;
    display: inline-flex; align-items: center; gap: 12px;
    flex-wrap: wrap; justify-content: center;
    font-size: 17px; color: var(--ink-muted); letter-spacing: -0.01em;
  }
  .hero-meta a { color: var(--accent); text-decoration: none; font-weight: 500; }
  .hero-meta a:hover { text-decoration: underline; }
  .hero-meta .sep { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.4; }
  .hero-cta {
    margin-top: 24px;
    display: flex; justify-content: center;
  }

  /* ── Hero floating UI fragments ────────────────────────── */
  .hero-orbits {
    position: absolute;
    inset: 60px 0 -340px 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    /* Soft "no-go zones": center column (text) and bottom band (iPhone) so
       fragments never end up behind text or clipped abruptly at the seam. */
    --safe-half: min(260px, 32vw);
    --safe-fade: 50px;
    -webkit-mask-image:
      linear-gradient(
        90deg,
        black 0,
        black calc(50% - var(--safe-half)),
        transparent calc(50% - var(--safe-half) + var(--safe-fade)),
        transparent calc(50% + var(--safe-half) - var(--safe-fade)),
        black calc(50% + var(--safe-half)),
        black 100%
      ),
      linear-gradient(180deg, black 0%, black 88%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(
        90deg,
        black 0,
        black calc(50% - var(--safe-half)),
        transparent calc(50% - var(--safe-half) + var(--safe-fade)),
        transparent calc(50% + var(--safe-half) - var(--safe-fade)),
        black calc(50% + var(--safe-half)),
        black 100%
      ),
      linear-gradient(180deg, black 0%, black 88%, transparent 100%);
    mask-composite: intersect;
  }
  .hero .wrap { position: relative; z-index: 2; }

  .frag {
    position: absolute;
    background: #fff;
    border-radius: 16px;
    padding: 12px 14px;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.7) inset,
      0 0 0 0.5px rgba(var(--shadow),0.04),
      0 16px 36px rgba(var(--shadow),0.10),
      0 4px 10px rgba(var(--shadow),0.05);
    display: flex; align-items: center; gap: 10px;
    font-feature-settings: "tnum";
    letter-spacing: -0.01em;
    color: var(--ink);
    text-align: left;
    will-change: transform, opacity;
    opacity: 0;
    animation:
      frag-in 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) var(--enter-delay, 0s) both,
      frag-bob var(--bob-dur, 7s) ease-in-out infinite alternate;
    animation-delay: var(--enter-delay, 0s), calc(var(--enter-delay, 0s) + 0.7s + var(--bob-delay, 0s));
  }
  @keyframes frag-in {
    0%   { opacity: 0; transform: translate3d(0, 24px, 0) scale(0.85); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  }
  [data-theme="dark"] .frag {
    background: #1c1c1e; color: #f5f5f7;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.06) inset,
      0 0 0 0.5px rgba(255,255,255,0.06),
      0 16px 36px rgba(var(--shadow),0.45),
      0 4px 10px rgba(var(--shadow),0.30);
  }
  @media (prefers-color-scheme: dark) {
    [data-theme="auto"] .frag {
      background: #1c1c1e; color: #f5f5f7;
      box-shadow:
        0 1px 0 rgba(255,255,255,0.06) inset,
        0 0 0 0.5px rgba(255,255,255,0.06),
        0 16px 36px rgba(var(--shadow),0.45),
        0 4px 10px rgba(var(--shadow),0.30);
    }
  }
  @keyframes frag-bob {
    0%   { transform: translate3d(0, calc(var(--parallax, 0) * 1px), 0) translate3d(0, -6px, 0) rotate(var(--rot-a, -1deg)); }
    100% { transform: translate3d(0, calc(var(--parallax, 0) * 1px), 0) translate3d(0, 6px,  0) rotate(var(--rot-b, 1deg)); }
  }

  /* Avatar circle inside a person row */
  .frag .av {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    color: #fff;
  }
  .frag .meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .frag .name { font-size: 13px; font-weight: 600; line-height: 1.1; white-space: nowrap; }
  .frag .sub  { font-size: 11px; color: var(--ink-light); line-height: 1.1; white-space: nowrap; }
  .frag .amt {
    margin-left: 6px;
    font-size: 14px; font-weight: 600; white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .frag .amt.pos { color: #248A3D; }
  .frag .amt.neg { color: #c93535; }
  [data-theme="dark"] .frag .amt.pos { color: #34C759; }
  [data-theme="dark"] .frag .amt.neg { color: #FF453A; }
  @media (prefers-color-scheme: dark) {
    [data-theme="auto"] .frag .amt.pos { color: #34C759; }
    [data-theme="auto"] .frag .amt.neg { color: #FF453A; }
  }

  /* Big balance chip */
  .frag.balance {
    padding: 14px 18px;
    flex-direction: column; align-items: flex-start; gap: 2px;
    border-radius: 18px;
  }
  .frag.balance .label {
    font-size: 11px; font-weight: 500; color: var(--ink-light);
    text-transform: uppercase; letter-spacing: 0.04em;
  }
  .frag.balance .big {
    font-size: 28px; font-weight: 700; letter-spacing: -0.025em;
    line-height: 1; font-variant-numeric: tabular-nums;
  }
  .frag.balance .big.pos { color: #248A3D; }
  .frag.balance .big.neg { color: #c93535; }
  [data-theme="dark"] .frag.balance .big.pos { color: #34C759; }
  [data-theme="dark"] .frag.balance .big.neg { color: #FF453A; }
  @media (prefers-color-scheme: dark) {
    [data-theme="auto"] .frag.balance .big.pos { color: #34C759; }
    [data-theme="auto"] .frag.balance .big.neg { color: #FF453A; }
  }

  /* Settle / action pill */
  .frag.action {
    padding: 10px 16px;
    background: linear-gradient(180deg, #34C759, #248A3D);
    color: #fff;
    font-size: 14px; font-weight: 600;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.25) inset,
      0 12px 28px rgba(36,138,61,0.25),
      0 4px 8px rgba(36,138,61,0.18);
    border-radius: 980px;
  }
  [data-theme="dark"] .frag.action,
  [data-theme="auto"] .frag.action { background: linear-gradient(180deg, #34C759, #248A3D); }

  /* Per-fragment placement + bob speed/delay */
  .frag.f1 { top: 6%;  right: 8%;  --bob-dur: 6.5s; --bob-delay: -0.4s; --rot-a: -2deg; --rot-b: 1deg; --enter-delay: 0.10s; }
  .frag.f2 { top: 2%;  left: 8%;   --bob-dur: 6.5s; --bob-delay: -1.1s; --rot-a: 1deg;  --rot-b: -2deg; --enter-delay: 0.20s; }
  .frag.f3 { top: 40%; left: 8%;   --bob-dur: 6.5s; --bob-delay: -2.0s; --rot-a: -1deg; --rot-b: 2deg; --enter-delay: 0.40s; }
  .frag.f4 { top: 72%; right: 14%; --bob-dur: 6.5s; --bob-delay: -0.8s; --rot-a: 2deg;  --rot-b: -1deg; --enter-delay: 0.70s; }
  .frag.f5 { top: 28%; right: 8%;  --bob-dur: 6.5s; --bob-delay: -1.5s; --rot-a: 2deg;  --rot-b: -2deg; --enter-delay: 0.50s; }
  .frag.f6 { top: 56%; right: 8%;  --bob-dur: 6.5s; --bob-delay: -0.3s; --rot-a: -1deg; --rot-b: 2deg; --enter-delay: 0.55s; }
  .frag.f7 { top: 56%; left: 8%;   --bob-dur: 6.5s; --bob-delay: -2.4s; --rot-a: 1deg;  --rot-b: -2deg; --enter-delay: 0.60s; }
  .frag.f8 { top: 56%; left: 14%;  --bob-dur: 6.5s; --bob-delay: -0.9s; --rot-a: -2deg; --rot-b: 1deg; --enter-delay: 0.65s; }

  @media (max-width: 1100px) {
    .frag.f2, .frag.f6 { display: none; }
  }
  @media (max-width: 820px) {
    /* Hide all floating fragments on mobile — not enough horizontal room */
    .hero-orbits { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .frag {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
    }
  }

  /* Fade out the floating fragments as the user scrolls past the hero */
  @supports (animation-timeline: view()) {
    .hero-orbits {
      animation: hero-orbits-fade linear both;
      animation-timeline: view();
      animation-range: cover 50% exit 100%;
    }
    @keyframes hero-orbits-fade {
      0%   { opacity: 1; }
      100% { opacity: 0; }
    }
  }

  /* ===========================================================================
     Device frame system
     Each device (iPhone, iPad, Mac, Watch) is composed of:
       - a frame container (.iphone, .ipad, .mac, .watch-carousel, *-mini)
       - .cslide (or *-screen): raw screenshot positioned at the bezel hole
       - .*-bezel: device frame PNG overlaid on top (transparent screen area)
     Screen hole positions are stored in CSS variables (--hole-*) per device,
     so the same shared selectors work for both the large carousel and the
     small mini-tile in the « Un compte, tous vos écrans » row.
     =========================================================================== */

  /* Screen-clip wrapper: positions itself at the bezel hole (via --hole-*)
     and clips any overflowing screen content with overflow: hidden.
     Per-device border-radius rounds the corners to match the device display. */
  .iphone .screen-clip,
  .ipad .screen-clip,
  .mac .screen-clip,
  .watch-carousel .screen-clip,
  .daily-watch .watch-frame .screen-clip,
  .device-tile .iphone-mini .screen-clip,
  .device-tile .ipad-mini .screen-clip,
  .device-tile .mac-mini .screen-clip,
  .device-tile .watch-mini .screen-clip {
    position: absolute;
    top: var(--hole-top);
    left: var(--hole-left);
    width: var(--hole-width);
    height: var(--hole-height);
    overflow: hidden;
    z-index: 1;
  }
  /* Rounded screen corners, where the device display has noticeable curvature */
  .iphone .screen-clip,
  .device-tile .iphone-mini .screen-clip { border-radius: 5%; }
  .watch-carousel .screen-clip,
  .daily-watch .watch-frame .screen-clip,
  .device-tile .watch-mini .screen-clip { border-radius: 10%; }

  /* Bezel overlay (shared) */
  .iphone .iphone-bezel,
  .ipad .ipad-bezel,
  .mac .mac-bezel,
  .watch-carousel .watch-bezel,
  .daily-watch .watch-frame .watch-bezel,
  .device-tile .iphone-mini-bezel,
  .device-tile .ipad-mini-bezel,
  .device-tile .mac-mini-bezel,
  .device-tile .watch-mini-bezel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    filter: none;
  }

  /* Screen hole positions, per device */
  .iphone, .device-tile .iphone-mini {
    --hole-top: 2.20%;
    --hole-left: 5.10%;
    --hole-width: 89.80%;
    --hole-height: 95.60%;
  }
  .ipad, .device-tile .ipad-mini {
    --hole-top: 5.13%;
    --hole-left: 4.13%;
    --hole-width: 91.73%;
    --hole-height: 89.74%;
  }
  .mac, .device-tile .mac-mini {
    --hole-top: 11.34%;
    --hole-left: 10.83%;
    --hole-width: 78.34%;
    --hole-height: 77.32%;
  }
  .watch-carousel, .device-tile .watch-mini, .daily-watch .watch-frame {
    --hole-top: 23.23%;
    --hole-left: 14.83%;
    --hole-width: 70.33%;
    --hole-height: 53.54%;
  }

  /* ── iPhone showcase (inline in hero) ──────────────────── */
  .hero-showcase {
    margin-top: 36px;
    display: flex; justify-content: center;
    position: relative;
    z-index: 1;
  }
  .iphone {
    width: 100%;
    max-width: 260px;
    aspect-ratio: 1470 / 3000;
    position: relative;
    isolation: isolate;
  }
  /* Static shadow layer: a solid phone silhouette (screen-hole fill + bezel copy)
     that NEVER animates, so its drop-shadow is never re-rasterised by the
     crossfading captures (the cause of the flicker). The bezel copy gives the
     exact outline (no white-zone corners); the fill makes the silhouette solid
     so the shadow is full, not a hollow ring. Sits behind the live screens. */
  .iphone .device-shadow {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    filter: drop-shadow(0 20px 34px rgba(var(--shadow),0.30)) drop-shadow(0 6px 12px rgba(var(--shadow),0.16));
    /* Own compositor layer so the crossfading screens never force this filtered
       layer to re-rasterise (the residual flicker source on larger devices). */
    will-change: transform;
    transform: translateZ(0);
  }
  .iphone .device-shadow .ds-fill {
    position: absolute;
    inset: 2.2% 5.1% 4.4% 5.1%;
    border-radius: 12% / 6%;
    background: #000;
  }
  .iphone .device-shadow .ds-bezel {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
  }
  .iphone.in-view {
    transform: translateY(0) scale(1) rotateX(0);
    opacity: 1;
  }
  .iphone img {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
    transition: opacity .25s ease;
  }
  @media (max-width: 520px) {
    .iphone { max-width: 220px; }
  }
  /* Scroll-driven animation removed — iPhone is now inline in hero */
  @media (prefers-reduced-motion: reduce) {
    .iphone, .ipad, .watch {
      animation: none !important;
      transform: none !important;
      opacity: 1 !important;
      transition: none !important;
    }
  }

  /* Scroll-driven section fade-in removed — sections are visible immediately. */

  /* ── Feature panel (big card) ──────────────────────────── */
  .panel {
    background: var(--bg-alt);
    border-radius: 28px;
    padding: clamp(48px, 7vw, 96px) clamp(28px, 5vw, 80px);
    margin: 14px 0;
    text-align: center;
    transition: background-color .3s ease;
  }
  .panel.dark { background: #000; color: #f5f5f7; }
  .panel.dark .lede, .panel.dark .panel-body { color: #a1a1a6; }
  .panel.dark .eyebrow { color: #5AC8FA; }
  .panel-body {
    max-width: 720px; margin: 28px auto 0;
    font-size: clamp(19px, 1.7vw, 23px); line-height: 1.4;
    color: var(--ink-muted); letter-spacing: -0.015em;
    text-wrap: pretty;
  }

  /* ── Two-up grid ───────────────────────────────────────── */
  .row-2 {
    display: grid; gap: 14px;
    grid-template-columns: 5fr 4fr;
    margin: 14px 0;
  }
  @media (max-width: 900px) { .row-2 { grid-template-columns: 1fr; } }
  .tile {
    background: transparent;
    border-radius: 28px;
    padding: clamp(36px, 4vw, 56px) clamp(28px, 4vw, 56px) clamp(36px, 4vw, 56px);
    min-height: 600px;
    display: flex; flex-direction: column;
    overflow: visible;
    position: relative;
    transition: background-color .3s ease;
  }
  .tile.dark { background: transparent; color: inherit; }
  .tile.dark .lede { color: var(--ink-muted); }
  .tile.dark .eyebrow { color: var(--accent); }
  .tile h3 { margin-top: 4px; }
  .tile-vis {
    margin-top: 32px; flex: 1;
    display: flex; align-items: center; justify-content: center;
    min-height: 280px;
  }

  .ipad {
    width: 100%; max-width: 560px;
    aspect-ratio: 3000 / 2300;
    position: relative;
    isolation: isolate;
  }

  .watch-wrap {
    display: flex; justify-content: center; align-items: center;
    width: 100%;
  }
  .watch-carousel {
    position: relative;
    aspect-ratio: 600 / 960;
    width: 100%;
    max-width: 220px;
    flex-shrink: 0;
  }
  .watch-carousel .watch-bezel {
    width: 100%;
    height: 100%;
  }
  /* Static shadow layer (same technique as the iPhone): a solid watch+band
     silhouette (screen-hole fill + bezel copy) that never animates, so the
     crossfade can't make its drop-shadow flicker, and it traces the real
     irregular watch outline (no rectangular halo). */
  .watch-carousel .device-shadow {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    filter: drop-shadow(0 17px 28px rgba(var(--shadow),0.32)) drop-shadow(0 5px 9px rgba(var(--shadow),0.16));
    will-change: transform;
    transform: translateZ(0);
  }
  .watch-carousel .device-shadow .ds-fill {
    position: absolute;
    top: var(--hole-top); left: var(--hole-left);
    width: var(--hole-width); height: var(--hole-height);
    border-radius: 16%;
    background: #000;
  }
  .watch-carousel .device-shadow .ds-bezel {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
  }
  .watch-carousel .cslide {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 1;
    z-index: 1;
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
  }
  /* Dip-free crossfade (see iPhone) — keeps the screen opaque so the shadow
     layer's black fill never bleeds through during transitions. */
  .watch-carousel .cslide.cslide-prev { z-index: 2; }
  .watch-carousel .cslide.is-active {
    z-index: 3;
    pointer-events: auto;
    animation: iphoneCfade .6s ease;
  }
  .watch {
    width: 180px;
    aspect-ratio: 600 / 940;
    position: relative;
    filter: drop-shadow(0 30px 50px rgba(var(--shadow),0.45)) drop-shadow(0 8px 16px rgba(var(--shadow),0.20));
    isolation: isolate;
  }
  .watch img { width: 100%; height: 100%; object-fit: contain; }

  /* ── Mac (full-width) ─────────────────────────── */
  .mac-section {
    margin: 14px 0;
    border-radius: 28px;
    padding: clamp(60px, 7vw, 100px) clamp(56px, 6vw, 96px) clamp(76px, 7vw, 108px);
    text-align: center;
    background: var(--bg-alt);
    transition: background-color .3s ease;
    overflow: hidden;
  }
  .mac-section h2 { max-width: 18ch; margin: 0 auto; }
  .mac-section .panel-body { margin-top: 22px; }
  .mac-wrap {
    margin-top: clamp(40px, 5vw, 64px);
    display: flex; flex-direction: column; align-items: center; gap: 24px;
  }
  .mac {
    width: 100%; max-width: 880px;
    aspect-ratio: 3860 / 2540;
    position: relative;
    isolation: isolate;
  }
  /* Mac uses a frame + screen composition: raw screenshots inset at the
     screen hole (11.34% top, 10.83% left, 78.34% × 77.32%), bezel on top. */
  /* Carousel slides — shared structure for every framed device (iPhone / iPad /
     Mac). Dip-free crossfade: the incoming slide (is-active, z3) fades in OVER
     the outgoing one (cslide-prev, z2), which stays opaque, so the static
     shadow layer behind never bleeds through mid-transition. */
  .iphone .cslide,
  .ipad .cslide,
  .mac .cslide {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 1;
    z-index: 1;
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
  }
  .iphone .cslide.cslide-prev,
  .ipad .cslide.cslide-prev,
  .mac .cslide.cslide-prev { z-index: 2; }
  .iphone .cslide.is-active,
  .ipad .cslide.is-active,
  .mac .cslide.is-active {
    z-index: 3;
    pointer-events: auto;
    animation: iphoneCfade .6s ease;
  }
  .mac .mac-bezel {
    width: 100%; height: 100%;
  }
  .mac .device-shadow {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    /* Smaller than the raw container shadow so the blur fits inside .mac-section
       (which is overflow:hidden for its rounded panel + floating cards) and is
       not clipped at the panel edge. */
    filter: drop-shadow(0 36px 62px rgba(var(--shadow),0.22)) drop-shadow(0 11px 22px rgba(var(--shadow),0.12));
    will-change: transform;
    transform: translateZ(0);
  }
  .mac .device-shadow .ds-fill {
    position: absolute;
    top: 11.34%; left: 10.83%;
    width: 78.34%; height: 77.32%;
    background: #000;
  }
  .mac .device-shadow .ds-bezel {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
  }

  /* ── visionOS section ─────────────────────────────────── */
  .vision-section {
    background: var(--bg-alt);
    border-radius: 28px;
    padding: clamp(48px, 6vw, 80px) clamp(28px, 5vw, 64px) 0;
    margin: 14px 0;
    text-align: center;
    overflow: hidden;
    transition: background-color .3s ease;
  }
  .vision-section h2 { max-width: 14ch; margin: 0 auto; }
  .vision-section .panel-body { max-width: 640px; margin: 22px auto 0; }
  .vision-shot {
    margin-top: clamp(40px, 5vw, 64px);
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 560px;
    border-radius: 22px 22px 0 0;
    overflow: hidden;
    position: relative;
    box-shadow: 0 -8px 24px rgba(var(--shadow),0.06);
  }
  .vision-shot img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  /* visionOS carousel: reuse the shared engine inside the 16:9 shot frame.
     Block layout keeps the shot full-width (overrides .device-carousel flex);
     dots overlay the bottom of the shot. Dip-free crossfade like the devices. */
  .vision-carousel { display: block; gap: 0; }
  .vision-shot .cslide {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 1;
    z-index: 1;
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
  }
  .vision-shot .cslide.cslide-prev { z-index: 2; }
  .vision-shot .cslide.is-active {
    z-index: 3;
    pointer-events: auto;
    animation: iphoneCfade .6s ease;
  }
  .vision-shot .cdots {
    position: absolute;
    left: 0; right: 0; bottom: 18px;
    z-index: 4;
    padding: 0;
  }
  /* White dots for contrast over the photographic visionOS environment. */
  .vision-shot .cdot {
    background: rgba(255,255,255,0.55);
    box-shadow: 0 1px 3px rgba(var(--shadow),0.35);
  }
  .vision-shot .cdot:hover { background: rgba(255,255,255,0.85); }
  .vision-shot .cdot.is-active { background: #fff; }

  /* ── Carousels (iPhone / iPad / Watch) ─────────────────── */
  .device-carousel {
    display: flex; flex-direction: column; align-items: center;
    gap: 22px;
    width: 100%;
  }
  .iphone, .ipad, .watch { position: relative; }
  /* iPad / Watch use framed PNGs that fill their container completely */
  .watch  .cslide {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity .6s ease;
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
  }
  .watch  .cslide.is-active {
    opacity: 1;
    pointer-events: auto;
  }
  /* iPad uses a frame + screen composition: raw screenshots inset at the
     screen hole (5.13% top, 4.13% left, 91.73% × 89.74%), bezel on top. */
  .ipad .ipad-bezel {
    width: 100%; height: 100%;
  }
  .ipad .device-shadow {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    filter: drop-shadow(0 26px 44px rgba(var(--shadow),0.26)) drop-shadow(0 8px 16px rgba(var(--shadow),0.14));
    will-change: transform;
    transform: translateZ(0);
  }
  .ipad .device-shadow .ds-fill {
    position: absolute;
    top: var(--hole-top); left: var(--hole-left);
    width: var(--hole-width); height: var(--hole-height);
    border-radius: 3%;
    background: #000;
  }
  .ipad .device-shadow .ds-bezel {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
  }
  /* iPhone uses a frame + screen composition: raw screenshots are inset
     at the screen hole (2.20% top, 5.10% left, 89.80% × 95.60%),
     the bezel PNG sits on top via .iphone-bezel. */
  @keyframes iphoneCfade { from { opacity: 0; } to { opacity: 1; } }
  .iphone .iphone-bezel {
    width: 100%; height: 100%;
  }
  .cdots {
    display: flex; gap: 8px;
    justify-content: center; align-items: center;
    padding: 4px 0;
  }
  .cdot {
    appearance: none; border: none; cursor: pointer;
    width: 7px; height: 7px; border-radius: 50%;
    background: rgba(0,0,0,0.22);
    padding: 0; margin: 0;
    transition: background-color .25s ease, transform .25s ease, width .25s ease;
  }
  [data-theme="dark"] .cdot { background: rgba(255,255,255,0.28); }
  @media (prefers-color-scheme: dark) {
    [data-theme="auto"] .cdot { background: rgba(255,255,255,0.28); }
  }
  .cdot:hover { background: rgba(0,0,0,0.45); }
  [data-theme="dark"] .cdot:hover { background: rgba(255,255,255,0.55); }
  .cdot.is-active {
    background: var(--accent);
    width: 22px;
    border-radius: 4px;
  }

  /* ── Devices icon row ──────────────────────────────────── */
  .devices-row {
    display: flex; align-items: flex-end; justify-content: center;
    gap: clamp(18px, 3vw, 48px);
    margin-top: 56px;
    flex-wrap: wrap;
  }
  .device-tile {
    display: flex; flex-direction: column; align-items: center;
  }
  .device-tile .device-img {
    display: block;
    height: auto; /* let width (CSS) drive size; keep aspect ratio from width/height attrs */
    filter: drop-shadow(0 15px 26px rgba(var(--shadow),0.30)) drop-shadow(0 4px 9px rgba(var(--shadow),0.16));
    transition: transform .3s ease;
  }
  .device-tile[data-device="iphone"] .device-img { width: 100px; }
  /* iPhone tile uses a frame + screen composition like the carousel */
  .device-tile .iphone-mini {
    position: relative;
    width: 100px;
    aspect-ratio: 1470 / 3000;
  }
  .device-tile .iphone-mini .iphone-mini-screen {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
  }
  .device-tile .iphone-mini .iphone-mini-bezel {
    width: 100%; height: 100%;
  }
  .device-tile[data-device="ipad"]   .device-img { width: 220px; }
  /* iPad tile uses a frame + screen composition */
  .device-tile .ipad-mini {
    position: relative;
    width: 220px;
    aspect-ratio: 3000 / 2300;
  }
  .device-tile .ipad-mini .ipad-mini-screen {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
  }
  .device-tile .ipad-mini .ipad-mini-bezel {
    width: 100%; height: 100%;
  }
  .device-tile[data-device="mac"]    .device-img { width: 260px; }
  /* Mac tile uses a frame + screen composition */
  .device-tile .mac-mini {
    position: relative;
    width: 260px;
    aspect-ratio: 3860 / 2540;
  }
  .device-tile .mac-mini .mac-mini-screen {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
  }
  .device-tile .mac-mini .mac-mini-bezel {
    width: 100%; height: 100%;
  }
  .device-tile[data-device="watch"] .device-img { width: 92px; }
  /* Watch tile uses a frame + screen composition like the carousel */
  .device-tile.device-tile-watch {
    align-self: stretch;
    justify-content: flex-end;
  }
  .device-tile .watch-mini {
    position: relative;
    width: 92px;
    aspect-ratio: 600 / 960;
    margin-bottom: 0;
  }
  .device-tile .watch-mini .watch-mini-screen {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
  }
  .device-tile .watch-mini .watch-mini-bezel {
    width: 100%; height: 100%;
  }

  /* Unified static-shadow layer for the mini device tiles — same mechanism as
     the carousels (solid ds-fill at the screen hole + bezel copy, drop-shadow on
     a promoted static layer). These tiles are static (no crossfade) so there is
     no flicker to fix, but it keeps one consistent shadow system site-wide. */
  .device-tile .iphone-mini .device-shadow,
  .device-tile .ipad-mini .device-shadow,
  .device-tile .mac-mini .device-shadow,
  .device-tile .watch-mini .device-shadow {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    will-change: transform;
    transform: translateZ(0);
  }
  /* Shadow calibrated per device size (≈7.5% offset / 13% blur of the frame
     width) so each mini reads with the same visual weight as the carousels —
     a tight blur on these small frames keeps the shadow defined, not a faint
     over-spread smudge. */
  .device-tile .iphone-mini .device-shadow {
    filter: drop-shadow(0 8px 13px rgba(var(--shadow),0.30)) drop-shadow(0 2px 4px rgba(var(--shadow),0.16));
  }
  .device-tile .ipad-mini .device-shadow {
    filter: drop-shadow(0 17px 28px rgba(var(--shadow),0.30)) drop-shadow(0 5px 9px rgba(var(--shadow),0.16));
  }
  .device-tile .mac-mini .device-shadow {
    filter: drop-shadow(0 20px 33px rgba(var(--shadow),0.24)) drop-shadow(0 6px 11px rgba(var(--shadow),0.12));
  }
  .device-tile .watch-mini .device-shadow {
    filter: drop-shadow(0 7px 12px rgba(var(--shadow),0.32)) drop-shadow(0 2px 4px rgba(var(--shadow),0.16));
  }
  .device-tile .iphone-mini .device-shadow .ds-fill,
  .device-tile .ipad-mini .device-shadow .ds-fill,
  .device-tile .mac-mini .device-shadow .ds-fill,
  .device-tile .watch-mini .device-shadow .ds-fill {
    position: absolute;
    top: var(--hole-top); left: var(--hole-left);
    width: var(--hole-width); height: var(--hole-height);
    background: #000;
  }
  /* Round the fill to match each screen's corner radius (a touch more) so its
     square corners never poke out behind the rounded screen capture. */
  .device-tile .iphone-mini .device-shadow .ds-fill { border-radius: 12% / 6%; }
  .device-tile .ipad-mini .device-shadow .ds-fill { border-radius: 3%; }
  .device-tile .mac-mini .device-shadow .ds-fill { border-radius: 1%; }
  .device-tile .watch-mini .device-shadow .ds-fill { border-radius: 16%; }
  .device-tile .iphone-mini .device-shadow .ds-bezel,
  .device-tile .ipad-mini .device-shadow .ds-bezel,
  .device-tile .mac-mini .device-shadow .ds-bezel,
  .device-tile .watch-mini .device-shadow .ds-bezel {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
  }
  .device-tile[data-device="vision"] .device-img { width: 200px; }

  /* On narrow viewports, shrink all device tiles together by ~30% so they
     stay on one row instead of wrapping. Adjust the multiplier in the media
     query to control how aggressive the shrink is. */
  @media (max-width: 720px) {
    .device-tile[data-device="iphone"] .device-img,
    .device-tile .iphone-mini { width: 70px; }
    .device-tile[data-device="ipad"]   .device-img,
    .device-tile .ipad-mini { width: 150px; }
    .device-tile[data-device="mac"]    .device-img,
    .device-tile .mac-mini { width: 180px; }
    .device-tile[data-device="watch"] .device-img,
    .device-tile .watch-mini { width: 65px; }
    .device-tile[data-device="vision"] .device-img { width: 140px; }
  }
  @media (max-width: 520px) {
    .device-tile[data-device="iphone"] .device-img,
    .device-tile .iphone-mini { width: 52px; }
    .device-tile[data-device="ipad"]   .device-img,
    .device-tile .ipad-mini { width: 110px; }
    .device-tile[data-device="mac"]    .device-img,
    .device-tile .mac-mini { width: 130px; }
    .device-tile[data-device="watch"] .device-img,
    .device-tile .watch-mini { width: 50px; }
    .device-tile[data-device="vision"] .device-img { width: 105px; }
  }
  .device-label {
    margin-top: 18px;
    font-size: 13px; color: var(--ink-light); letter-spacing: 0.005em;
    font-weight: 500;
  }

  /* ── Daily features (bento) ────────────────────────────── */
  .daily-intro {
    text-align: center;
    margin: clamp(40px, 6vw, 72px) 0 clamp(28px, 4vw, 48px);
    padding: 0 clamp(20px, 4vw, 60px);
  }
  .daily-intro h2 { max-width: 22ch; margin: 0 auto; }
  .daily-intro .panel-body { margin: 22px auto 0; max-width: 640px; }
  .daily-grid {
    display: grid; gap: 14px;
    grid-template-columns: repeat(3, 1fr);
    margin: 14px 0;
  }
  @media (max-width: 900px) { .daily-grid { grid-template-columns: 1fr; } }
  .daily-card {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    display: flex; flex-direction: column;
    min-height: 480px;
    background: var(--bg-alt);
    transition: background-color .3s ease;
    isolation: isolate;
  }
  .daily-vis {
    height: 260px;
    position: relative;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    padding: 28px;
  }
  .daily-vis img {
    max-width: 100%; max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 12px 28px rgba(var(--shadow),0.18));
  }
  .daily-body {
    padding: 28px 32px 32px;
    flex: 1;
    display: flex; flex-direction: column;
  }
  .daily-body h3 {
    font-size: 24px; letter-spacing: -0.025em; margin: 0 0 8px;
    font-weight: 600; line-height: 1.2;
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
  }
  .daily-new {
    flex-shrink: 0;
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.02em; line-height: 1;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
    padding: 4px 9px; border-radius: 999px;
    white-space: nowrap;
    transform: translateY(0.5px);
    text-decoration: none; cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
  }
  a.daily-new:hover {
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  }
  a.daily-new:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .daily-body p {
    margin: 0; font-size: 16px; line-height: 1.45;
    color: var(--ink-muted); letter-spacing: -0.01em;
    flex: 1;
  }
  .daily-tag {
    margin-top: 20px;
    font-size: 12px; color: var(--ink-light);
    letter-spacing: 0.04em; text-transform: uppercase;
    font-weight: 500;
  }
  /* Small print under a card's description (e.g. compatibility note) */
  .daily-compat {
    display: block;
    margin-top: 12px;
    font-size: 12.5px; line-height: 1.4;
    color: var(--ink-light); letter-spacing: -0.005em;
  }

  /* Card variants, each has a wallpaper-matching gradient and image sizing */
  .daily-imgplay .daily-vis {
    background: linear-gradient(135deg, #F0E4FA 0%, #D7C2EF 100%);
    padding: 22px;
  }
  .daily-imgplay .daily-vis img {
    border-radius: 12px;
    max-width: 100%; max-height: 100%;
    filter: drop-shadow(0 14px 28px rgba(var(--shadow),0.22)) drop-shadow(0 4px 9px rgba(var(--shadow),0.14));
  }
  /* Multitasking: iPad screenshot composed inside the iPad bezel */
  .daily-multitask .daily-vis {
    background: linear-gradient(135deg, #DCE3EC 0%, #A9B8CC 100%);
    padding: 20px;
  }
  .daily-multitask .mt-ipad {
    position: relative;
    width: min(280px, 100%);
    aspect-ratio: 3000 / 2300;
    filter: drop-shadow(0 16px 30px rgba(var(--shadow),0.26)) drop-shadow(0 5px 10px rgba(var(--shadow),0.14));
  }
  .daily-multitask .mt-screen {
    position: absolute;
    top: 5.13%; left: 4.13%; width: 91.73%; height: 89.74%;
    overflow: hidden; border-radius: 3%;
  }
  .daily-multitask .mt-screen img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .daily-multitask .mt-bezel { position: absolute; inset: 0; width: 100%; height: 100%; }
  .daily-widgets .daily-vis {
    background: linear-gradient(135deg, #A6D8FF 0%, #4FA5DD 100%);
    padding: 22px;
    gap: 14px;
  }
  .daily-widgets .daily-vis img {
    width: auto; max-width: 48%; height: auto; max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 9px 15px rgba(40,80,140,0.28)) drop-shadow(0 3px 6px rgba(40,80,140,0.14));
  }

  /* Lock Screen: raw capture composed in a real iPhone bezel, then shown
     through a WINDOW that reveals only the bottom slice of the phone (from just
     above the balance widget down to the home bar). The window fits the card
     width (so the rounded bottom corners always show), is vertically centred,
     and carries the drop-shadow so it hugs the rounded bottom. Mirror logic of
     Spotlight, but cropped tighter so the widget is the topmost content. */
  .daily-lockscreen .daily-vis {
    background: linear-gradient(160deg, #7FB7CE 0%, #4267AE 52%, #28427C 100%);
    padding: 0;
    display: flex; align-items: flex-start; justify-content: center;
  }
  .daily-lockscreen .ls-window {
    position: relative;
    width: calc(100% - 34px);
    max-width: 300px;
    /* slice aspect = phone-width(0.49) : visible-slice-height(0.318) */
    aspect-ratio: 1.541;
    overflow: hidden;
    border-bottom-left-radius: 12%;
    border-bottom-right-radius: 12%;
    filter: drop-shadow(0 16px 26px rgba(var(--shadow),0.32)) drop-shadow(0 5px 10px rgba(var(--shadow),0.18));
  }
  .daily-lockscreen .ls-phone {
    position: absolute;
    left: 0; bottom: 0;
    width: 100%;
    aspect-ratio: 1470 / 3000;
  }
  .daily-lockscreen .ls-screen-clip {
    position: absolute;
    top: 2.20%; left: 5.10%;
    width: 89.80%; height: 95.60%;
    overflow: hidden;
    border-radius: 13% / 6%;
  }
  .daily-lockscreen .ls-screen {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    max-width: none; max-height: none;
    object-fit: cover;
    filter: none;
  }
  .daily-lockscreen .ls-bezel {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    max-width: none; max-height: none;
    filter: none;
  }

  .daily-watch .daily-vis {
    background: linear-gradient(180deg, #3A3A3C 0%, #0E0E10 100%);
    padding: 18px;
    gap: 13px;
    background-size: cover;
  }
  .daily-watch .daily-vis img {
    max-height: 100%; width: auto; max-width: 48%;
    min-width: 0;
    filter: none;
  }

  /* Watch frame: composed of a screen image + bezel overlay (responsive) */
  .watch-frame {
    position: relative;
    aspect-ratio: 600 / 960;
    width: 100%;
    max-width: 160px;
    flex-shrink: 1;
    filter: drop-shadow(0 14px 24px rgba(var(--shadow),0.34)) drop-shadow(0 4px 8px rgba(var(--shadow),0.18));
  }
  .daily-watch .daily-vis .watch-frame {
    flex: 1 1 0;
    min-width: 0;
    max-width: 130px;
    /* Lock the frame to the bezel image's real aspect ratio so it is never
       squished — otherwise the screen hole (a % of the box) gets a wrong aspect
       and object-fit:cover crops the capture's sides (cut the widget's edge
       text). Sized by width (flex), height follows from the ratio. */
    aspect-ratio: 600 / 960;
    height: auto;
  }
  /* Watch screen capture, sized to match the bezel hole exactly
     (70.33% × 53.54% of frame, top 23.23%, left 14.83%).
     Scales with the frame so it stays responsive. */
  .daily-watch .daily-vis .watch-frame .watch-screen {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    max-width: none;
    object-fit: cover;
    filter: none;
  }
  .daily-watch .daily-vis .watch-frame .watch-bezel {
    width: 100% !important;
    height: 100%;
    max-width: none;
  }

  .daily-notif .daily-vis {
    background: linear-gradient(180deg, #DCE9F7 0%, #A8C8E8 100%);
  }
  .daily-notif .daily-vis img {
    max-width: 92%;
    filter: none;
    -webkit-mask-image: radial-gradient(ellipse 95% 75% at center, black 60%, transparent 100%);
    mask-image: radial-gradient(ellipse 95% 75% at center, black 60%, transparent 100%);
  }

  .daily-spotlight .daily-vis {
    background: linear-gradient(135deg, #C9C4D2 0%, #9DA0B6 45%, #D4B59A 100%);
    padding: 0;
    align-items: flex-start;
  }
  /* Spotlight: full iPhone capture in a bezel, anchored to the TOP of the visual
     (top of the phone shown, bottom cropped) — the mirror of Toast to undo. */
  .daily-spotlight .pp-phone {
    position: relative;
    width: 64%;
    max-width: 240px;
    aspect-ratio: 1470 / 3000;
    margin: 26px auto 0;
    filter: drop-shadow(0 17px 30px rgba(var(--shadow),0.30)) drop-shadow(0 5px 10px rgba(var(--shadow),0.16));
  }

  .daily-continuity .daily-vis {
    background: linear-gradient(135deg, #6A488C 0%, #2F1B4F 100%);
    padding: 0;
    display: block;
    position: relative;
    container-type: inline-size;
    container-name: contvis;
  }
  /* iPad dock pinned to the TOP-LEFT corner of the visual at a capped size so
     it stays corner-sized even when the card stretches full-width in
     single-column mode; the iPhone Handoff banner floats in the remaining
     space (lower-centered). */
  .daily-continuity .continuity-stage {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .daily-continuity .continuity-ipad {
    position: absolute;
    top: 0; left: 0;
    width: 75%; max-width: 215px; height: auto;
    filter: drop-shadow(0 12px 24px rgba(var(--shadow),0.30)) drop-shadow(0 4px 8px rgba(var(--shadow),0.16));
  }
  .daily-continuity .continuity-iphone {
    position: absolute;
    left: 50%; top: 60%;
    transform: translateX(-50%);
    width: 78%; max-width: 230px; height: auto;
    filter: drop-shadow(0 12px 24px rgba(var(--shadow),0.30)) drop-shadow(0 4px 8px rgba(var(--shadow),0.16));
  }
  /* When the card is wide (single-column mode) the two captures looked lost in
     the large purple area, so scale them up based on the card's own width
     (container query, not viewport — responds to the real cause). iPad stays
     pinned top-left; banner stays centered in the remaining space. */
  @container contvis (min-width: 540px) {
    .daily-continuity .continuity-ipad {
      width: 52%; max-width: 520px;
    }
    .daily-continuity .continuity-iphone {
      width: 54%; max-width: 540px;
      top: 56%;
    }
  }

  .daily-shortcuts-siri .daily-vis {
    background: linear-gradient(135deg, #0F5F58 0%, #0A2E2A 60%, #061A18 100%);
    padding: 28px;
    gap: 18px;
  }
  .daily-shortcuts-siri .daily-vis img {
    width: auto; max-width: 42%; height: auto; max-height: 80%;
    object-fit: contain;
    filter: drop-shadow(0 7px 12px rgba(var(--shadow),0.32)) drop-shadow(0 2px 5px rgba(var(--shadow),0.18));
  }

  /* Peek and Pop + Toast to undo: full iPhone screenshots whose key UI sits in
     the lower half (context menu / undo toast), so the image is anchored to the
     bottom of the visual area to keep that UI in view. */
  .daily-peekpop .daily-vis,
  .daily-undo .daily-vis {
    padding: 0;
    align-items: flex-end;
  }
  .daily-peekpop .daily-vis {
    background: linear-gradient(135deg, #C2CCDC 0%, #8294B2 100%);
    align-items: flex-start;
  }
  .daily-undo .daily-vis {
    background: linear-gradient(135deg, #BBC4EC 0%, #7B86C8 100%);
  }
  /* Peek and Pop + Toast to undo: screenshot composed inside a real iPhone bezel.
     The capture (1320×2868) exactly fills the bezel's screen hole (89.80%×95.60%
     of the 1470×3000 frame), so object-fit cover shows it 1:1 with no distortion.
     The phone is anchored to the bottom of the visual so the lower UI (context
     menu / undo toast) stays in view. */
  .daily-peekpop .pp-phone,
  .daily-undo .pp-phone {
    position: relative;
    width: 64%;
    aspect-ratio: 1470 / 3000;
    margin: 0 auto 26px;
    filter: drop-shadow(0 17px 30px rgba(var(--shadow),0.30)) drop-shadow(0 5px 10px rgba(var(--shadow),0.16));
  }
  /* Peek and Pop shows two framed iPhones side by side. */
  .daily-peekpop .pp-duo {
    display: flex; align-items: flex-start; justify-content: center;
    gap: 10px; width: 100%;
    margin: 0;
  }
  .daily-peekpop .pp-phone {
    width: 40%;
    max-width: 132px;
    margin: 0;
    /* Hard cap on how far UP the screenshot can show: pulled up 11% so the
       status bar + nav icons sit above the visual's top edge and are clipped
       by .daily-vis's overflow:hidden — leaving "My Balances" / "Aiden Taylor"
       as the highest thing visible. (No clip-path here: it would crop the
       drop-shadow at the box edges; the container overflow does the hiding.) */
    transform: translateY(-11%);
  }
  .daily-peekpop .pp-screen-clip,
  .daily-undo .pp-screen-clip,
  .daily-spotlight .pp-screen-clip {
    position: absolute;
    top: 2.20%; left: 5.10%;
    width: 89.80%; height: 95.60%;
    overflow: hidden;
    border-radius: 13% / 6%;
  }
  .daily-peekpop .pp-screen,
  .daily-undo .pp-screen,
  .daily-spotlight .pp-screen {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    max-width: none; max-height: none;
    object-fit: cover;
    filter: none;
  }
  .daily-peekpop .pp-bezel,
  .daily-undo .pp-bezel,
  .daily-spotlight .pp-bezel {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    max-width: none; max-height: none;
    filter: none;
  }

  .daily-a11y .daily-vis {
    background: linear-gradient(135deg, #2A6CF4 0%, #6B3FF1 60%, #C842D9 100%);
    padding: 32px;
    color: #fff;
  }
  .daily-a11y .a11y-stack {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    width: 100%; max-width: 320px;
  }
  .daily-a11y .a11y-chip {
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 14px;
    padding: 14px 12px;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.35) inset,
      0 8px 18px rgba(var(--shadow),0.15);
    color: #fff;
    text-align: center;
  }
  .daily-a11y .a11y-chip svg { width: 22px; height: 22px; }
  .daily-a11y .a11y-chip span {
    font-size: 12px; font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.2;
  }
  .features-grid {
    display: grid; gap: 14px;
    grid-template-columns: repeat(3, 1fr);
    margin: 14px 0;
  }
  @media (max-width: 900px) { .features-grid { grid-template-columns: 1fr; } }

  .feature {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    display: flex; flex-direction: column;
    min-height: 480px;
    background: var(--bg-alt);
    transition: background-color .3s ease;
  }
  .feature-vis {
    height: 240px;
    position: relative;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    padding: 28px;
  }
  .feature-body {
    padding: 30px 32px 36px;
    flex: 1;
    display: flex; flex-direction: column;
  }
  .feature-body h3 {
    font-size: 24px; letter-spacing: -0.025em; margin: 0 0 10px;
    font-weight: 600; line-height: 1.15;
  }
  .feature-body p {
    margin: 0; font-size: 17px; line-height: 1.45;
    color: var(--ink-muted); letter-spacing: -0.01em;
    flex: 1;
  }
  .feature-tag {
    margin-top: 24px;
    font-size: 12px; color: var(--ink-light);
    letter-spacing: 0.04em; text-transform: uppercase;
    font-weight: 500;
  }

  /* Card 1, Privé par défaut (iCloud blue) */
  .feature-privacy .feature-vis {
    background: radial-gradient(circle at 50% 38%, #5AB0FF 0%, #1E7FE8 55%, #0040A0 100%);
    color: #fff;
  }
  .feature-privacy .shield {
    position: relative;
    width: 108px; height: 128px;
    filter: drop-shadow(0 18px 32px rgba(var(--shadow),0.35));
  }
  .feature-privacy .shield svg { width: 100%; height: 100%; display: block; }
  .feature-privacy .feature-vis::before,
  .feature-privacy .feature-vis::after {
    content: ""; position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    box-shadow: 0 0 12px rgba(255,255,255,0.7);
  }
  .feature-privacy .feature-vis::before {
    top: 28%; left: 20%;
    width: 5px; height: 5px;
  }
  .feature-privacy .feature-vis::after {
    top: 64%; right: 22%;
    width: 3px; height: 3px;
  }

  /* Card 2, Rappels discrets (notification look) */
  .feature-reminders .feature-vis {
    position: relative;
    background: radial-gradient(120% 90% at 50% 0%, #3a3a3c 0%, #1c1c1e 60%, #000 100%);
    padding: 28px 22px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }
  .feature-reminders .notif {
    width: 100%; max-width: 360px;
    background: rgba(255,255,255,0.94);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    padding: 10px 12px;
    display: flex; align-items: flex-start; gap: 10px;
    box-shadow: 0 14px 34px rgba(var(--shadow),0.28), 0 4px 10px rgba(var(--shadow),0.18);
    color: #000;
  }
  .feature-reminders .notif-icon {
    width: 36px; height: 36px; border-radius: 8px;
    background-image: url('../logo/logo-light.svg');
    background-size: cover; background-position: center;
    flex-shrink: 0;
  }
  .feature-reminders .notif-body { flex: 1; min-width: 0; }
  .feature-reminders .notif-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 8px;
  }
  .feature-reminders .notif-title {
    font-size: 12px; font-weight: 600; color: #000;
    letter-spacing: 0; text-transform: uppercase;
  }
  .feature-reminders .notif-time  { font-size: 11px; color: #86868b; }
  .feature-reminders .notif-text  {
    font-size: 13px; color: #1d1d1f; letter-spacing: -0.005em; line-height: 1.3;
    margin-top: 1px;
  }
  .feature-reminders .notif.stack {
    position: absolute;
    top: 50%; left: 50%;
    width: 100%; /* capped by .notif max-width */
    transform: translate(-50%, -50%) translateY(18px) scale(0.94);
    background: rgba(255,255,255,0.65);
    z-index: -1;
  }

  /* Card 3, Multi-devises (coral gradient) */
  .feature-currency .feature-vis {
    background: linear-gradient(135deg, #FFD1B3 0%, #FF8E72 50%, #E84F6A 100%);
    color: #fff;
    padding: 32px 18px;
  }
  .feature-currency .currency-stack {
    display: flex; align-items: center; justify-content: center;
    position: relative;
  }
  .feature-currency .coin {
    width: 56px; height: 56px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; font-weight: 600;
    background: rgba(255,255,255,0.22);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 8px 18px rgba(var(--shadow),0.18);
    color: #fff;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }
  .feature-currency .coin.big {
    width: 100px; height: 100px;
    font-size: 56px; font-weight: 700;
    background: #fff; color: #E84F6A;
    z-index: 2;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.7) inset,
      0 16px 32px rgba(180,40,60,0.32),
      0 4px 10px rgba(var(--shadow),0.10);
  }
  .feature-currency .coin.l1 { margin-right: -14px; z-index: 1; }
  .feature-currency .coin.l2 { margin-right: -22px; z-index: 0; opacity: 0.78; width: 48px; height: 48px; font-size: 24px; }
  .feature-currency .coin.r1 { margin-left:  -14px; z-index: 1; }
  .feature-currency .coin.r2 { margin-left:  -22px; z-index: 0; opacity: 0.78; width: 48px; height: 48px; font-size: 24px; }

  /* Card 4, Import / Export CSV (green → blue) */
  .feature-csv .feature-vis {
    background: linear-gradient(135deg, #5AD1A0 0%, #0A7CFF 100%);
  }
  .feature-csv .feature-vis .csv-illu {
    width: 200px; max-width: 100%; height: auto;
    filter: drop-shadow(0 16px 30px rgba(var(--shadow),0.28)) drop-shadow(0 5px 10px rgba(var(--shadow),0.16));
  }
  .feature-csv .feature-body h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }

  /* ── Languages panel ─────────────────────────────────── */
  .langs {
    background: var(--bg-alt);
    border-radius: 28px;
    padding: clamp(48px, 6vw, 80px) clamp(28px, 5vw, 64px);
    margin: 14px 0;
    text-align: center;
    transition: background-color .3s ease;
  }
  .langs h2 { max-width: 18ch; margin: 0 auto; }
  .langs .panel-body { margin: 22px auto 0; max-width: 640px; }
  .lang-chips {
    margin-top: clamp(36px, 4vw, 56px);
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 10px 12px;
  }
  .lang-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px;
    border-radius: 980px;
    background: var(--bg);
    color: var(--ink);
    font-size: 15px; font-weight: 500;
    letter-spacing: -0.005em;
    box-shadow: 0 1px 0 rgba(var(--shadow),0.04), 0 6px 14px rgba(var(--shadow),0.04);
    transition: background-color .3s ease, box-shadow .3s ease;
  }
  [data-theme="dark"] .lang-chip {
    background: #2a2a2c;
    box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 6px 14px rgba(var(--shadow),0.25);
  }
  @media (prefers-color-scheme: dark) {
    [data-theme="auto"] .lang-chip {
      background: #2a2a2c;
      box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 6px 14px rgba(var(--shadow),0.25);
    }
  }
  .lang-chip .flag { width: 22px; height: 16px; border-radius: 2px; display: block; flex-shrink: 0; }

  /* ── Reviews marquee ───────────────────────────────────── */
  .reviews {
    --rev-band-bg: var(--bg-alt);
    --rev-card-bg: #ffffff;
    --rev-card-stroke: var(--hairline);
    --rev-star: #FF9F0A;
    padding: 72px 0;
    background: var(--rev-band-bg);
    overflow: hidden;
  }
  [data-theme="dark"] .reviews {
    --rev-band-bg: #000000;
    --rev-card-bg: #1c1c1e;
  }
  @media (prefers-color-scheme: dark) {
    [data-theme="auto"] .reviews {
      --rev-band-bg: #000000;
      --rev-card-bg: #1c1c1e;
    }
  }
  .reviews-intro {
    margin-top: 0;
    margin-bottom: clamp(32px, 4vw, 52px);
  }
  .reviews-band {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* fade the band edges so cards slide in/out softly */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  }
  .reviews-track {
    display: flex;
    width: max-content;
    /* vertical breathing room so the cards' box-shadow isn't clipped by the
       band's overflow:hidden (needed for the horizontal marquee) */
    padding: 14px 0 32px;
    animation: reviews-scroll 32s linear infinite;
    will-change: transform;
  }
  @keyframes reviews-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .reviews-track { animation: none; }
    /* center the first set when motion is disabled */
    .reviews-band { -webkit-mask-image: none; mask-image: none; }
    .reviews-track { justify-content: center; flex-wrap: wrap; width: 100%; }
    .reviews-track .review-card[aria-hidden="true"] { display: none; }
  }

  /* ── Press mentions (scrollable cards) ──────────────────── */
  .press { padding: 64px 0; }
  .press .daily-intro { margin: 0 0 clamp(28px, 4vw, 44px); }
  .press-scroll {
    display: flex; gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    justify-content: safe center;
    padding: 8px 4px 14px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  }
  .press-card {
    flex: 0 0 min(88%, 460px);
    scroll-snap-align: center;
    box-sizing: border-box;
    display: flex; flex-direction: column; gap: 14px;
    background: var(--bg-alt);
    border: 1px solid var(--hairline);
    border-radius: 16px;
    padding: 20px 22px;
    text-decoration: none; color: inherit;
    transition: transform .15s ease, border-color .15s ease;
  }
  .press-card:hover { transform: translateY(-2px); border-color: rgba(var(--shadow),0.18); }
  .press-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .press-card-quote {
    margin: 0; flex: 1;
    font-size: 16px; line-height: 1.5; letter-spacing: -0.01em;
    color: var(--ink-muted);
    quotes: "\201C" "\201D";
  }
  .press-card-quote:lang(fr) { quotes: "\00AB\00A0" "\00A0\00BB"; }
  .press-card-quote::before { content: open-quote; }
  .press-card-quote::after { content: close-quote; }
  .press-card-foot { display: flex; align-items: baseline; gap: 10px; font-size: 13px; }
  .press-card-name { font-style: normal; font-weight: 600; color: var(--ink); }
  .press-card-date { color: var(--ink-light); }
  .press-card-date::before { content: "·"; margin-right: 10px; color: var(--ink-light); }
  .press-card-arrow { margin-left: auto; color: var(--accent); font-weight: 500; }
  .review-card {
    flex: 0 0 auto;
    width: 320px;
    margin-right: 20px;
    box-sizing: border-box;
    background: var(--rev-card-bg);
    border: 1px solid var(--rev-card-stroke);
    border-radius: 18px;
    padding: 22px 24px;
    box-shadow: 0 1px 2px rgba(var(--shadow),0.04), 0 10px 24px rgba(var(--shadow),0.05);
  }
  [data-theme="dark"] .review-card,
  [data-theme="auto"] .review-card { box-shadow: 0 1px 2px rgba(var(--shadow),0.3), 0 10px 24px rgba(var(--shadow),0.35); }
  .review-stars {
    color: var(--rev-star);
    font-size: 15px;
    letter-spacing: 2px;
    line-height: 1;
    margin-bottom: 12px;
  }
  .review-title {
    font-size: 17px; font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
    margin-bottom: 6px;
  }
  .review-text {
    font-size: 15px; line-height: 1.45;
    color: var(--ink-muted);
    margin: 0;
    text-wrap: pretty;
  }

  /* ── CTA ───────────────────────────────────────────────── */
  .cta { text-align: center; padding: 64px 22px 100px; }
  .cta-logo {
    width: 168px; height: 168px;
    margin: 0 auto 28px;
    overflow: visible;
  }
  .cta-logo .settli-logo { width: 100%; height: 100%; }
  /* Animated "money toss" logo — pure CSS (also reused by the loading overlay). */
  .settli-logo { display: block; overflow: visible; }
  .settli-logo .part { transform-box: fill-box; transform-origin: center; }
  .settli-logo .fig path { fill: var(--ink); }
  .settli-toss .bill { animation: settli-toss 2.4s ease-in-out infinite; }
  .settli-toss .coin { animation: settli-toss 2.4s ease-in-out infinite .35s; }
  @keyframes settli-toss {
    0%,100% { transform: translateY(0) rotate(0); }
    35%     { transform: translateY(-200px) rotate(-13deg); }
    70%     { transform: translateY(-65px) rotate(6deg); }
  }
  @media (prefers-reduced-motion: reduce) {
    .settli-toss .bill, .settli-toss .coin { animation: none; }
  }
  .cta h2 { max-width: 880px; margin: 0 auto; }
  .cta-sub { margin: 22px auto 0; max-width: 620px; }
  .cta-buttons {
    margin-top: 38px;
    display: flex; gap: 14px; justify-content: center; align-items: center; flex-wrap: wrap;
  }
  .cta-features { margin: 16px 0 0; text-align: center; }
  .cta-changelog {
    margin: 22px 0 0; text-align: center;
  }
  .cta-changelog a {
    color: var(--ink-muted, #6e6e73);
    font-size: 15px; letter-spacing: -0.01em;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .15s ease, border-color .15s ease;
  }
  .cta-changelog a:hover {
    color: var(--accent, #007AFF);
    border-bottom-color: currentColor;
  }
  .btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 24px;
    border-radius: 980px;
    font-size: 17px; font-weight: 500; letter-spacing: -0.01em;
    text-decoration: none; cursor: pointer;
    transition: transform .15s ease, opacity .15s ease;
    border: none;
  }
  .btn:hover { opacity: 0.92; }
  .btn:active { transform: scale(0.98); }
  /* App Store badge (CTA) */
  .appstore-badge {
    display: inline-block;
    line-height: 0;
    transition: transform .15s ease, opacity .15s ease;
  }
  .appstore-badge:hover { opacity: 0.88; }
  .appstore-badge:active { transform: scale(0.97); }
  .appstore-badge img {
    height: 54px; width: auto;
    display: block;
    border-radius: 9px;
  }
  .appstore-badge .badge-dark { display: none; }
  [data-theme="dark"] .appstore-badge .badge-light { display: none; }
  [data-theme="dark"] .appstore-badge .badge-dark { display: block; }
  @media (prefers-color-scheme: dark) {
    [data-theme="auto"] .appstore-badge .badge-light { display: none; }
    [data-theme="auto"] .appstore-badge .badge-dark { display: block; }
  }
  /* Badge « laisser un avis » Product Hunt (bascule clair/sombre comme l'App Store) */
  .cta .ph-badge { display: inline-block; line-height: 0; }
  .cta .ph-badge img { width: 250px; height: 54px; }
  .ph-badge .badge-dark { display: none; }
  [data-theme="dark"] .ph-badge .badge-light { display: none; }
  [data-theme="dark"] .ph-badge .badge-dark { display: block; }
  @media (prefers-color-scheme: dark) {
    [data-theme="auto"] .ph-badge .badge-light { display: none; }
    [data-theme="auto"] .ph-badge .badge-dark { display: block; }
  }
  .btn-ghost {
    background: var(--accent); color: #fff;
  }

  /* ── Footer ────────────────────────────────────────────── */
  footer {
    background: var(--bg-alt);
    padding: 36px 22px;
    font-size: 12px; color: var(--ink-light);
    border-top: 0.5px solid var(--hairline);
    transition: background-color .3s ease;
  }
  .foot-inner {
    max-width: 1080px; margin: 0 auto;
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 12px;
  }
  .foot-links { display: flex; gap: 22px; }
  .foot-links a { color: var(--ink-muted); text-decoration: none; }
  .foot-links a:hover { color: var(--ink); }

  /* ── i18n loader overlay ─────────────────────────────── */
  html.is-i18n-loading body { visibility: hidden; }
  .i18n-overlay {
    position: fixed; inset: 0;
    background: var(--bg, #fff);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999;
    visibility: visible !important;
    opacity: 1; transition: opacity .25s ease;
  }
  .i18n-overlay.is-hiding { opacity: 0; pointer-events: none; }
  .i18n-overlay .spinner {
    width: 28px; height: 28px; border-radius: 50%;
    border: 2.5px solid rgba(0,0,0,0.12);
    border-top-color: var(--accent, #007AFF);
    animation: i18n-spin 0.8s linear infinite;
  }
  [data-theme="dark"] .i18n-overlay .spinner { border-color: rgba(255,255,255,0.18); border-top-color: var(--accent, #007AFF); }
  @media (prefers-color-scheme: dark) {
    [data-theme="auto"] .i18n-overlay .spinner { border-color: rgba(255,255,255,0.18); border-top-color: var(--accent, #007AFF); }
  }
  @keyframes i18n-spin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) {
    .i18n-overlay .spinner { animation: none; }
  }