/** Shopify CDN: Minification failed

Line 1645:13 Expected identifier but found whitespace
Line 1645:15 Unexpected "{"
Line 1645:24 Expected ":"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:big-stat-horizon (INDEX:3) */
.bsh {
    position: relative;
    display: flex;
    min-height: var(--bsh-min-h, 80vh);
    overflow: hidden;
    isolation: isolate;
  }
  .bsh--v-top { align-items: flex-start; }
  .bsh--v-center { align-items: center; }
  .bsh--v-bottom { align-items: flex-end; }

  /* ---------- Background image ---------- */
  .bsh__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    display: block;
  }
  .bsh__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .bsh__img--mobile { display: none; }
  .bsh__overlay {
    position: absolute;
    inset: 0;
    display: block;
    background: rgb(var(--color-background));
    opacity: var(--bsh-overlay, 0);
  }

  /* ---------- Horizon arc ---------- */
  .bsh__horizon {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: block;
    pointer-events: none;
  }
  .bsh__arc {
    position: absolute;
    top: var(--bsh-arc-top, 64%);
    left: 50%;
    display: block;
    width: var(--bsh-arc-width, 300%);
    aspect-ratio: 1 / 1;
    transform: translateX(-50%);
    border-radius: 50%;
    border-top: 1.5px solid rgba(var(--color-foreground), 0.6);
    background: rgb(var(--color-background));
    box-shadow:
      0 -1rem 6rem rgba(var(--color-foreground), calc(var(--bsh-glow, 0.5) * 0.35)),
      0 -4rem 16rem rgba(var(--color-foreground), calc(var(--bsh-glow, 0.5) * 0.25));
  }
  /* With a background image, keep the planet transparent so the image shows */
  .bsh__media ~ .bsh__horizon .bsh__arc {
    background: transparent;
    box-shadow:
      inset 0 2rem 6rem rgba(var(--color-foreground), calc(var(--bsh-glow, 0.5) * 0.2)),
      0 -2rem 10rem rgba(var(--color-foreground), calc(var(--bsh-glow, 0.5) * 0.25));
  }

  /* ---------- Content ---------- */
  .bsh__content {
    position: relative;
    width: 100%;
    text-align: center;
  }

  .bsh__stat {
    display: inline-flex;
    align-items: flex-end;
    gap: 1rem;
    margin: 0;
    color: rgb(var(--color-foreground));
    /* nudge so the number (not number + unit) reads as centered */
    padding-left: 4rem;
  }
  .bsh__number {
    display: block;
    font-size: clamp(7.2rem, 30vw, var(--bsh-stat-size, 200px));
    line-height: 0.85;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
  }
  .bsh__number--heading {
    font-family: var(--font-heading-family);
    font-style: var(--font-heading-style);
    font-weight: var(--font-heading-weight);
  }
  .bsh__number--body {
    font-family: var(--font-body-family);
    font-style: var(--font-body-style);
    font-weight: var(--font-body-weight);
  }
  .bsh__unit {
    font-size: 2rem;
    line-height: 1;
    padding-bottom: 0.4rem;
    color: rgba(var(--color-foreground), 0.75);
  }

  .bsh__heading {
    margin: 4.4rem 0 0;
    line-height: 1.05;
    color: rgb(var(--color-foreground));
  }
  .bsh__text {
    margin: 2.8rem auto 0;
    max-width: 52rem;
    color: rgba(var(--color-foreground), 0.75);
  }
  .bsh__button { margin-top: 3.2rem; }

  /* ---------- Mobile ---------- */
  @media screen and (max-width: 749px) {
    .bsh { min-height: var(--bsh-min-h-mobile, 70vh); }
    .bsh__img--desktop { display: none; }
    .bsh__img--mobile { display: block; }
    .bsh__arc { width: calc(var(--bsh-arc-width, 300%) * 1.4); }

    .bsh__stat { padding-left: 2.4rem; gap: 0.6rem; }
    .bsh__unit { font-size: 1.6rem; }
    .bsh__heading { margin-top: 2.8rem; }
    .bsh__text { margin-top: 1.8rem; }
  }
/* END_SECTION:big-stat-horizon */

/* START_SECTION:brand-story (INDEX:4) */
brand-story-strike,
  .bss { display: block; }
  .bss-wrap {
    --bss-fg: var(--color-foreground, 245, 245, 247);
    --bss-bg: var(--color-background, 18, 18, 20);
    background-color: rgb(var(--bss-bg));
    color: rgb(var(--bss-fg));
  }
  .bss { --bss-accent-fallback: #f2c200; }

  .bss__inner {
    max-width: var(--bss-max, 800px);
    margin: 0 auto;
  }
  .bss__heading {
    margin: 0;
    line-height: 1.05;
    color: rgb(var(--bss-fg));
  }

  /* ---------- Crossed-out lines ---------- */
  .bss__strikes {
    margin: 2.4rem 0 0;
    font-family: var(--font-heading-family);
    font-style: var(--font-heading-style);
    font-weight: var(--font-heading-weight);
    line-height: 1.12;
    letter-spacing: -0.02em;
  }
  .bss__strike-line { display: block; }
  .bss__strike {
    color: rgba(var(--bss-fg), var(--bss-dim, 0.4));
    text-decoration: none;
    /* The strike line is a background so it follows the text across line breaks */
    background-image: linear-gradient(var(--bss-accent, var(--bss-accent-fallback)), var(--bss-accent, var(--bss-accent-fallback)));
    background-repeat: no-repeat;
    background-position: 0 56%;
    background-size: 100% max(3px, 0.07em);
  }
  @media (prefers-reduced-motion: no-preference) {
    .bss--animate.is-ready .bss__strike { background-size: 0% max(3px, 0.07em); }
    .bss--animate.is-ready.is-visible .bss__strike {
      background-size: 100% max(3px, 0.07em);
      transition: background-size 0.9s cubic-bezier(0.65, 0, 0.35, 1);
      transition-delay: calc(0.25s + var(--i, 0) * 0.6s);
    }
  }

  /* ---------- Paragraph ---------- */
  .bss__text {
    max-width: 36rem;
    margin-top: 3.2rem;
    font-size: 1.5rem;
    line-height: 1.55;
    color: rgba(var(--bss-fg), 0.85);
  }
  .bss__text--right { margin-left: auto; }
  .bss__text--left { margin-right: auto; }
  .bss__text > :first-child { margin-top: 0; }
  .bss__text > :last-child { margin-bottom: 0; }

  /* ---------- Images ---------- */
  .bss__images {
    display: grid;
    gap: 0.8rem;
    height: var(--bss-img-h, 240px);
    margin: 4rem 0 0;
    padding: 0;
    list-style: none;
  }
  .bss__images--1 { grid-template-columns: 1fr; }
  .bss__images--2 { grid-template-columns: 2fr 1fr; }
  .bss__images--3 { grid-template-columns: 2fr 1fr 1fr; }
  .bss__images--4 { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .bss__image {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--bss-radius, 1.6rem);
    background: rgba(var(--bss-fg), 0.06);
  }
  .bss__img,
  .bss__placeholder {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
  }
  .bss__img { object-fit: cover; }
  .bss__placeholder { fill: rgba(var(--bss-fg), 0.15); }
  .bss__caption {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    padding: 0.5rem 1rem;
    border-radius: 10rem;
    background: rgba(var(--bss-bg), 0.75);
    color: rgb(var(--bss-fg));
    font-size: 1.2rem;
    line-height: 1.2;
    backdrop-filter: blur(6px);
  }

  /* ---------- Mobile ---------- */
  @media screen and (max-width: 749px) {
    .bss__strikes { margin-top: 1.6rem; }
    .bss__text { max-width: none; margin-top: 2.4rem; }
    .bss__images {
      height: auto;
      grid-template-columns: 1fr 1fr;
      margin-top: 2.8rem;
    }
    .bss__image { aspect-ratio: 1; }
    .bss__image:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
    .bss__images--1 .bss__image { aspect-ratio: 4 / 3; }
  }
/* END_SECTION:brand-story */

/* START_SECTION:compatibility-dial (INDEX:15) */
.pfd__heading {
    margin: 0 0 4rem;
    text-align: center;
    line-height: 1.05;
    color: rgb(var(--color-foreground));
  }

  /* ---------- Stage: [left] [dial] [right] ---------- */
  .pfd__stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--pfd-dial-max, 400px)) minmax(0, 1fr);
    grid-template-areas: 'left dial right';
    align-items: center;
    column-gap: 3rem;
  }

  .pfd__side {
    display: flex;
    align-items: center;
    gap: 2.2rem;
    min-width: 0;
  }
  .pfd__side--left {
    grid-area: left;
    justify-content: flex-end;
    text-align: right;
  }
  .pfd__side--right {
    grid-area: right;
    justify-content: flex-start;
    text-align: left;
  }
  .pfd__side-text { min-width: 0; }
  .pfd__side-title {
    margin: 0;
    color: rgb(var(--color-foreground));
  }
  .pfd__side-sub {
    margin: 0.8rem 0 0;
    font-size: 1.5rem;
    color: rgba(var(--color-foreground), 0.75);
  }
  .pfd__connector {
    flex: 0 1 6.8rem;
    min-width: 2.4rem;
    height: 1px;
    background: rgba(var(--color-foreground), 0.25);
  }

  /* ---------- Dial (scales with its own width) ---------- */
  .pfd__dial-wrap {
    grid-area: dial;
    display: flex;
    justify-content: center;
    min-width: 0;
  }
  .pfd__dial {
    --s: 1;
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    container-type: inline-size;
  }

  .pfd__ticks {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .pfd__tick {
    position: absolute;
    left: 50%;
    top: 0;
    width: 0;
    height: 50%;
    transform-origin: 50% 100%;
    transform: rotate(var(--r));
  }
  .pfd__tick::before {
    content: '';
    position: absolute;
    top: 0;
    left: -0.5px;
    width: 1px;
    height: 4cqi;
    background: rgba(var(--color-foreground), 0.45);
  }
  .pfd__tick--major::before {
    left: -1.5px;
    width: 3px;
    height: 8cqi;
    border-radius: 2px;
    background: rgb(var(--color-foreground));
  }

  .pfd__media {
    position: absolute;
    inset: 18%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .pfd__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* Watch — colors from the screen color scheme */
  .pfd__watch {
    position: absolute;
    left: 28%;
    top: 24%;
    width: 44%;
    height: 52%;
    padding: 1.8cqi;
    box-sizing: border-box;
    border-radius: 9cqi;
    background-color: rgb(var(--color-background));
    background-image: linear-gradient(rgba(var(--color-foreground), 0.14), rgba(var(--color-foreground), 0.14));
    box-shadow: 0 7cqi 14cqi -3cqi rgba(var(--color-shadow, 0, 0, 0), 0.3);
  }
  .pfd__screen {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 7cqi;
    background: rgb(var(--color-background));
  }
  .pfd__screen-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .pfd__clock {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.6cqi;
    text-align: center;
  }
  .pfd__date {
    font-size: 1.1rem;
    font-size: calc(2.8cqi * var(--s));
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(var(--color-foreground), 0.65);
  }
  .pfd__time {
    font-family: var(--font-heading-family);
    font-style: var(--font-heading-style);
    font-weight: var(--font-heading-weight);
    font-size: 4rem;
    font-size: calc(10cqi * var(--s));
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: rgb(var(--color-foreground));
  }

  @container (max-width: 320px) {
    .pfd__watch { --s: 1.1; }
  }

  /* ---------- Footer ---------- */
  .pfd__footer {
    margin-top: 4rem;
    text-align: center;
  }
  .pfd__caption {
    margin: 0 auto;
    max-width: 60rem;
    color: rgba(var(--color-foreground), 0.75);
  }
  .pfd__button { margin-top: 2.4rem; }

  /* ---------- Tablet: tighten sides ---------- */
  @media screen and (min-width: 750px) and (max-width: 989px) {
    .pfd__stage { column-gap: 1.6rem; }
    .pfd__side { gap: 1.2rem; }
    .pfd__connector { flex-basis: 3.2rem; }
  }

  /* ---------- Mobile: dial on top, labels side by side ---------- */
  @media screen and (max-width: 749px) {
    .pfd__heading { margin-bottom: 2.4rem; }

    .pfd__stage {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      grid-template-areas:
        'dial dial'
        'left right';
      row-gap: 2.8rem;
      column-gap: 1.6rem;
    }
    .pfd__dial-wrap .pfd__dial { width: min(100%, 34rem); }

    .pfd__side,
    .pfd__side--left,
    .pfd__side--right {
      justify-content: center;
      text-align: center;
    }
    .pfd__connector { display: none; }
    .pfd__side-sub { font-size: 1.4rem; }

    .pfd__footer { margin-top: 2.8rem; }
  }
/* END_SECTION:compatibility-dial */

/* START_SECTION:faq-accordion (INDEX:19) */
.faq-wrap {
    --faq-fg: var(--color-foreground, 18, 18, 18);
    --faq-bg: var(--color-background, 243, 243, 245);
    background-color: rgb(var(--faq-bg));
    color: rgb(var(--faq-fg));
    scroll-margin-top: 8rem;
  }
  .faq {
    max-width: var(--faq-max, 840px);
    margin: 0 auto;
  }
  .faq--left { margin-left: 0; }

  .faq__heading {
    margin: 0 0 3.6rem;
    line-height: 1.02;
    color: rgb(var(--faq-fg));
  }
  .faq__intro {
    margin: -2rem 0 3.2rem;
    color: rgba(var(--faq-fg), 0.7);
  }

  .faq__list { border-top: 1px solid rgba(var(--faq-fg), 0.12); }
  .faq__item { border-bottom: 1px solid rgba(var(--faq-fg), 0.12); }

  .faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 2.4rem 0;
    list-style: none;
    cursor: pointer;
  }
  .faq__question::-webkit-details-marker { display: none; }
  .faq__question:focus-visible {
    outline: 0.2rem solid rgba(var(--faq-fg), 0.5);
    outline-offset: 0.4rem;
    border-radius: 0.4rem;
  }
  .faq__question-text {
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.4;
    color: rgb(var(--faq-fg));
  }

  /* Plus that turns into a minus */
  .faq__icon {
    position: relative;
    flex: none;
    width: 1.4rem;
    height: 1.4rem;
  }
  .faq__icon::before,
  .faq__icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1.5px;
    margin-top: -0.75px;
    background: rgb(var(--faq-fg));
    transition: transform 0.25s ease, opacity 0.25s ease;
  }
  .faq__icon::after { transform: rotate(90deg); }
  .faq__item[open] .faq__icon::after { transform: rotate(0deg); opacity: 0; }

  .faq__answer {
    max-width: 68rem;
    padding: 0 3.4rem 2.6rem 0;
    font-size: 1.5rem;
    line-height: 1.6;
    color: rgba(var(--faq-fg), 0.75);
  }
  .faq__answer > :first-child { margin-top: 0; }
  .faq__answer > :last-child { margin-bottom: 0; }
  .faq__answer p + p,
  .faq__answer p + ol,
  .faq__answer p + ul { margin-top: 1rem; }
  .faq__answer a { color: rgb(var(--faq-fg)); text-underline-offset: 0.3rem; }
  @media (prefers-reduced-motion: no-preference) {
    .faq__item[open] .faq__answer { animation: faq-in 0.3s ease both; }
  }
  @keyframes faq-in {
    from { opacity: 0; transform: translateY(-0.4rem); }
    to { opacity: 1; transform: none; }
  }

  /* Editor-only placeholder highlight */
  .faq__item--todo .faq__question-text::after {
    content: ' •';
    color: #d48a00;
  }
  .faq__todo-note {
    display: inline-block;
    margin: 0 0 1rem !important;
    padding: 0.4rem 1rem;
    border-radius: 0.6rem;
    background: #fff4d6;
    color: #7a5200;
    font-size: 1.2rem;
  }

  .faq__footer {
    margin-top: 3.2rem;
    font-size: 1.5rem;
    color: rgba(var(--faq-fg), 0.7);
  }
  .faq__footer a { color: rgb(var(--faq-fg)); }

  @media screen and (max-width: 749px) {
    .faq__heading { margin-bottom: 2.4rem; }
    .faq__question { padding: 2rem 0; gap: 1.6rem; }
    .faq__question-text { font-size: 1.6rem; }
    .faq__answer { padding: 0 0 2.2rem; font-size: 1.45rem; }
  }
/* END_SECTION:faq-accordion */

/* START_SECTION:feature-banner-card (INDEX:20) */
.fbc {
    position: relative;
    display: flex;
    min-height: var(--fbc-min-h, 70vh);
    overflow: hidden;
  }

  /* ---------- Media ---------- */
  .fbc__media {
    position: absolute;
    inset: 0;
    background: rgba(var(--color-foreground), 0.06);
  }
  .fbc__img,
  .fbc__placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .fbc__img { object-fit: cover; }
  .fbc__img--mobile { display: none; }
  .fbc__placeholder { fill: rgba(var(--color-foreground), 0.3); }
  .fbc__overlay {
    position: absolute;
    inset: 0;
    background: rgb(var(--color-background));
    opacity: var(--fbc-overlay, 0);
  }

  /* ---------- Card placement ---------- */
  .fbc__inner {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
  .fbc--h-left .fbc__inner { justify-content: flex-start; }
  .fbc--h-center .fbc__inner { justify-content: center; }
  .fbc--h-right .fbc__inner { justify-content: flex-end; }
  .fbc--v-top .fbc__inner { align-items: flex-start; }
  .fbc--v-middle .fbc__inner { align-items: center; }
  .fbc--v-bottom .fbc__inner { align-items: flex-end; }

  /* ---------- Card ---------- */
  .fbc__card {
    width: 100%;
    max-width: var(--fbc-card-max, 520px);
    box-sizing: border-box;
    padding: 4.8rem 4.4rem 4.4rem;
    border-radius: var(--fbc-radius, 2.8rem);
  }
  .fbc__heading {
    margin: 0;
    line-height: 1.02;
    color: rgb(var(--color-foreground));
  }
  .fbc__text {
    margin: 1.8rem 0 0;
    color: rgba(var(--color-foreground), 0.75);
  }

  /* Ruler divider: a tall tick every N ticks, short ticks between */
  .fbc__ruler {
    --fbc-tick-gap: 11px;
    --fbc-ticks: 5;
    --fbc-group: calc(var(--fbc-tick-gap) * var(--fbc-ticks));
    display: block;
    height: 1.4rem;
    margin: 3.2rem 0;
    background-image:
      repeating-linear-gradient(
        90deg,
        rgba(var(--color-foreground), 0.55) 0 1.5px,
        transparent 1.5px var(--fbc-group)
      ),
      repeating-linear-gradient(
        90deg,
        rgba(var(--color-foreground), 0.28) 0 1px,
        transparent 1px var(--fbc-tick-gap)
      );
    background-size: 100% 100%, 100% 42%;
    background-position: left top, left center;
    background-repeat: no-repeat;
  }
  .fbc__ruler:first-child { margin-top: 0; }
  .fbc__ruler:last-child { margin-bottom: 0; }

  .fbc__feature + .fbc__feature { margin-top: 2.4rem; }
  .fbc__feature-title {
    margin: 0;
    color: rgb(var(--color-foreground));
  }
  .fbc__feature-text {
    margin: 0.8rem 0 0;
    font-size: 1.5rem;
    color: rgba(var(--color-foreground), 0.75);
  }
  .fbc__button-wrap { margin-top: 2.8rem; }

  /* ---------- Mobile ---------- */
  @media screen and (max-width: 749px) {
    .fbc { min-height: var(--fbc-min-h-mobile, 60vh); }
    .fbc__img--desktop { display: none; }
    .fbc__img--mobile { display: block; }

    .fbc__inner { padding-top: 2.4rem; padding-bottom: 2.4rem; }
    .fbc__card { max-width: none; padding: 3.2rem 2.4rem 2.8rem; }
    .fbc__ruler { margin: 2.4rem 0; }

    /* Stacked: image on top, card below overlapping slightly */
    .fbc--mobile-stacked {
      flex-direction: column;
      min-height: 0;
      overflow: visible;
    }
    .fbc--mobile-stacked .fbc__media {
      position: relative;
      inset: auto;
      height: var(--fbc-min-h-mobile, 60vh);
      overflow: hidden;
    }
    .fbc--mobile-stacked .fbc__inner {
      margin-top: -6rem;
      padding-top: 0;
      padding-bottom: 0;
    }
  }
/* END_SECTION:feature-banner-card */

/* START_SECTION:feature-hero-watch (INDEX:21) */
/* ---------- Layout ---------- */
  .pfh__grid {
    display: grid;
    grid-template-columns: var(--pfh-cols, 1fr 1fr);
    align-items: center;
    gap: 4rem 6rem;
  }
  .pfh--visual-left .pfh__visual-col { order: -1; }

  .pfh__text-col { min-width: 0; }
  .pfh__visual-col {
    min-width: 0;
    display: flex;
    justify-content: center;
  }

  /* ---------- Text column ---------- */
  .pfh__text {
    position: relative;
    padding: 4rem 0 5.6rem 0;
  }

  .pfh__heading {
    margin: 0;
    line-height: 1.05;
    color: rgb(var(--color-foreground));
  }
  .pfh__subtext {
    margin: 1.8rem 0 0;
    max-width: 48rem;
    color: rgba(var(--color-foreground), 0.75);
  }
  .pfh__button { margin-top: 2.8rem; }

  /* ---------- Visual (scales with its own width) ---------- */
  .pfh__visual {
    --s: 1; /* type boost on small containers */
    position: relative;
    width: min(100%, var(--pfh-visual-max, 540px));
    aspect-ratio: 1 / 1;
    container-type: inline-size;
  }

  .pfh__ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
  }
  .pfh__ring--outer {
    inset: 0;
    border: 1px solid rgba(var(--color-foreground), 0.09);
  }
  .pfh__ring--inner {
    inset: 10%;
    border: 1.6cqi solid rgba(var(--color-foreground), 0.035);
    background: rgba(var(--color-foreground), 0.012);
  }

  .pfh__media {
    position: absolute;
    inset: 12%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .pfh__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* Watch — colors from the screen color scheme */
  .pfh__watch {
    position: absolute;
    left: 27%;
    top: 22.7%;
    width: 46%;
    height: 55%;
    padding: 1.5cqi;
    border-radius: 9cqi;
    background-color: rgb(var(--color-background));
    background-image: linear-gradient(rgba(var(--color-foreground), 0.14), rgba(var(--color-foreground), 0.14));
    box-shadow: 0 7cqi 12cqi -3cqi rgba(var(--color-shadow, 0, 0, 0), 0.3);
  }
  .pfh__screen {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 13cqi 10cqi 14cqi;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 7.5cqi;
    background: rgb(var(--color-background));
  }
  .pfh__screen--image { position: relative; }
  .pfh__screen-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .pfh__screen--image > :not(.pfh__screen-img) { position: relative; z-index: 1; }

  .pfh__screen-label {
    font-size: 1.2rem;
    font-size: calc(2.4cqi * var(--s));
    line-height: 1.3;
    color: rgba(var(--color-foreground), 0.6);
  }
  .pfh__screen-title {
    margin-top: 0.6cqi;
    font-family: var(--font-heading-family);
    font-style: var(--font-heading-style);
    font-weight: var(--font-heading-weight);
    font-size: 2.4rem;
    font-size: calc(4.8cqi * var(--s));
    line-height: 1.15;
    color: rgb(var(--color-foreground));
    overflow-wrap: anywhere;
  }
  .pfh__screen-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1.6cqi;
    margin-top: auto;
  }
  .pfh__pill {
    display: inline-flex;
    align-items: center;
    padding: 1.4cqi 3cqi;
    border-radius: 10rem;
    font-size: 1.3rem;
    font-size: calc(2.6cqi * var(--s));
    font-weight: 600;
    line-height: 1.2;
  }
  .pfh__pill--ghost {
    background: rgba(var(--color-foreground), 0.16);
    color: rgb(var(--color-foreground));
  }
  .pfh__pill--solid {
    background: rgb(var(--color-foreground));
    color: rgb(var(--color-background));
  }

  /* Notification — colors from the notification color scheme */
  .pfh__notif-wrap {
    position: absolute;
    left: 46.5%;
    top: 12%;
    width: 53.5%;
    z-index: 2;
  }
  .pfh__notif-ghost {
    position: absolute;
    left: 5%;
    right: 5%;
    top: -2.4cqi;
    height: 8cqi;
    border-radius: 3.4cqi 3.4cqi 0 0;
    overflow: hidden;
  }
  .pfh__notif-ghost::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(var(--color-foreground), 0.08);
  }
  .pfh__notif {
    position: relative;
    padding: 3cqi 3.2cqi 3.2cqi;
    border-radius: 3.4cqi;
    box-shadow: 0 3cqi 7cqi rgba(var(--color-shadow, 0, 0, 0), 0.12);
  }
  .pfh__notif-head {
    display: flex;
    align-items: center;
    gap: 1.6cqi;
    font-size: 1.3rem;
    font-size: calc(2.5cqi * var(--s));
    line-height: 1.2;
  }
  .pfh__notif-icon {
    flex: none;
    width: calc(3.8cqi * var(--s));
    height: calc(3.8cqi * var(--s));
    border-radius: 1.1cqi;
    overflow: hidden;
    background: rgb(var(--color-foreground));
  }
  .pfh__notif-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .pfh__notif-app {
    font-weight: 600;
    color: rgb(var(--color-foreground));
  }
  .pfh__notif-time {
    margin-left: auto;
    color: rgba(var(--color-foreground), 0.6);
  }
  .pfh__notif-title {
    margin: 3cqi 0 2cqi;
    font-size: 1.5rem;
    font-size: calc(3cqi * var(--s));
    font-weight: 600;
    line-height: 1.2;
    color: rgb(var(--color-foreground));
  }
  .pfh__notif-body {
    margin: 0;
    font-size: 1.4rem;
    font-size: calc(2.8cqi * var(--s));
    line-height: 1.45;
    color: rgba(var(--color-foreground), 0.8);
  }

  /* Small visuals: bump mockup type so it stays legible */
  @container (max-width: 440px) {
    .pfh__watch,
    .pfh__notif-wrap { --s: 1.2; }
  }

  /* ---------- Mobile ---------- */
  @media screen and (max-width: 749px) {
    .pfh__grid {
      grid-template-columns: minmax(0, 1fr);
      gap: 3.2rem;
    }
    .pfh--mobile-above .pfh__visual-col { order: -1; }
    .pfh--mobile-below .pfh__visual-col { order: 1; }

    .pfh__text { padding: 2.4rem 0 3.2rem 0; }

    .pfh__visual { width: min(100%, 46rem); }
  }
/* END_SECTION:feature-hero-watch */

/* START_SECTION:feature-marquee (INDEX:22) */
.fmq {
    --fmq-gap: 72px;
    position: relative;
    overflow: hidden;
  }
  .fmq--borders {
    border-top: 1px solid rgba(var(--color-foreground), 0.08);
    border-bottom: 1px solid rgba(var(--color-foreground), 0.08);
  }

  .fmq__viewport {
    overflow: hidden;
    padding: 1.8rem 0;
  }

  .fmq__track {
    display: flex;
    width: max-content;
    animation: fmq-scroll var(--fmq-duration, 30s) linear infinite;
    will-change: transform;
  }
  .fmq--right .fmq__track { animation-direction: reverse; }
  .fmq--pause:hover .fmq__track,
  .fmq--pause:focus-within .fmq__track {
    animation-play-state: paused;
  }

  @keyframes fmq-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-100% / var(--fmq-copies, 4))); }
  }

  .fmq__group {
    display: flex;
    align-items: center;
    flex: none;
  }

  .fmq__item {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 1.2rem;
    padding-inline: calc(var(--fmq-gap) / 2);
    white-space: nowrap;
    text-decoration: none;
    color: rgb(var(--color-foreground));
  }
  a.fmq__item:hover .fmq__label {
    text-decoration: underline;
    text-underline-offset: 0.3rem;
  }

  /* Thin divider after every item (keeps the loop seamless) */
  .fmq--dividers .fmq__item::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 1px;
    height: 1.8rem;
    transform: translateY(-50%);
    background: rgba(var(--color-foreground), 0.18);
  }

  .fmq__icon {
    flex: none;
    width: 1.8rem;
    height: 1.8rem;
  }
  .fmq__icon--image {
    object-fit: contain;
  }

  .fmq__label {
    font-family: var(--font-body-family);
    font-weight: 500;
    line-height: 1.2;
  }
  .fmq--text-small .fmq__label { font-size: 1.4rem; }
  .fmq--text-medium .fmq__label { font-size: 1.6rem; }
  .fmq--text-large .fmq__label { font-size: 2rem; }
  .fmq--text-large .fmq__icon { width: 2.2rem; height: 2.2rem; }

  @media screen and (max-width: 749px) {
    .fmq__viewport { padding: 1.4rem 0; }
    .fmq__item { gap: 1rem; padding-inline: calc(var(--fmq-gap) / 3); }
    .fmq--text-medium .fmq__label { font-size: 1.5rem; }
    .fmq--text-large .fmq__label { font-size: 1.8rem; }
  }

  /* Reduced motion: no animation, swipeable row of the first set only */
  @media (prefers-reduced-motion: reduce) {
    .fmq__track { animation: none; }
    .fmq__viewport {
      overflow-x: auto;
      scrollbar-width: none;
    }
    .fmq__viewport::-webkit-scrollbar { display: none; }
    .fmq__group[aria-hidden='true'] { display: none; }
  }
/* END_SECTION:feature-marquee */

/* START_SECTION:features-table (INDEX:26) */
.ftr { margin: 2.8rem 0 0; max-width: 48rem; }
  .ftr__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.4rem 0;
    border-top: 1px solid rgba(var(--color-foreground), 0.1);
  }
  .ftr__label { color: rgba(var(--color-foreground), 0.7); }
  .ftr__value { margin: 0; font-weight: 600; color: rgb(var(--color-foreground)); }
  .pfh__notif-title.ftr__big {
    font-family: var(--font-heading-family);
    font-weight: 700;
    font-size: 4.6cqi;
    letter-spacing: -0.02em;
    margin: 1.4cqi 0 0;
  }

  /* ---------- Layout ---------- */
  .ftt__grid {
    display: grid;
    grid-template-columns: var(--ftt-cols, 1fr 1fr);
    align-items: center;
    gap: 4rem 6rem;
  }
  .ftt--card-left .ftt__card-col { order: -1; }

  .ftt__text { min-width: 0; }
  .ftt__heading {
    margin: 0;
    line-height: 1.05;
    color: rgb(var(--color-foreground));
  }
  .ftt__subtext {
    margin: 1.8rem 0 0;
    max-width: 48rem;
    color: rgba(var(--color-foreground), 0.75);
  }
  .ftt__button { margin-top: 2.8rem; }

  .ftt__card-col {
    min-width: 0;
    display: flex;
    justify-content: flex-end;
  }
  .ftt--card-left .ftt__card-col { justify-content: flex-start; }

  /* ---------- Card ---------- */
  .ftc {
    width: 100%;
    max-width: var(--ftt-card-max, 560px);
    box-sizing: border-box;
    padding: 4rem 3.8rem 4.4rem;
    border-radius: var(--ftc-radius, 2.8rem);
    background: rgba(var(--color-foreground), 0.05);
  }
  .ftc--scheme { background: rgb(var(--color-background)); }

  .ftc__title {
    margin: 0 0 1.6rem;
    color: rgb(var(--color-foreground));
  }

  .ftc__rows { margin: 0; padding: 0; }
  .ftc__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.9rem 0;
    border-bottom: 1px solid rgba(var(--color-foreground), 0.1);
  }
  .ftc__row:first-child { padding-top: 0.6rem; }
  .ftc--no-dividers .ftc__row { border-bottom: 0; }

  .ftc__label {
    min-width: 0;
    color: rgba(var(--color-foreground), 0.75);
  }
  .ftc__value {
    margin: 0;
    flex: none;
    max-width: 60%;
    text-align: right;
    font-weight: 600;
    color: rgb(var(--color-foreground));
  }

  .ftc__summary {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.2rem 2rem;
    padding-top: 3.2rem;
  }
  .ftc__summary-label {
    padding-bottom: 0.4rem;
    font-weight: 600;
    color: rgb(var(--color-foreground));
  }
  .ftc__summary-value {
    margin: 0 0 0 auto;
    line-height: 0.9;
    color: rgb(var(--color-foreground));
  }

  /* ---------- Mobile ---------- */
  @media screen and (max-width: 749px) {
    .ftt__grid {
      grid-template-columns: minmax(0, 1fr);
      gap: 3.2rem;
    }
    .ftt--mobile-below .ftt__card-col { order: 1; }
    .ftt--mobile-above .ftt__card-col { order: -1; }
    .ftt__card-col,
    .ftt--card-left .ftt__card-col { justify-content: stretch; }
    .ftc { max-width: none; padding: 2.8rem 2.2rem 3rem; }
    .ftc__row { padding: 1.6rem 0; }
    .ftc__summary { padding-top: 2.4rem; }
  }
/* END_SECTION:features-table */

/* START_SECTION:health-stats (INDEX:29) */
/* ---------- Layout ---------- */
  .hrs__grid {
    display: grid;
    grid-template-columns: var(--hrs-cols, 1fr 1fr);
    align-items: center;
    gap: 4rem 6rem;
  }
  .hrs--image-right .hrs__media-col { order: 1; }

  .hrs__media-col,
  .hrs__content { min-width: 0; }

  .hrs__media {
    position: relative;
    aspect-ratio: var(--hrs-ratio, 4 / 5);
    overflow: hidden;
    border-radius: var(--hrs-radius, 2.8rem);
    background: rgba(var(--color-foreground), 0.04);
  }
  .hrs__img,
  .hrs__placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .hrs__img { object-fit: cover; }
  .hrs__placeholder { fill: rgba(var(--color-foreground), 0.35); }

  .hrs__heading {
    margin: 0;
    line-height: 1.05;
    color: rgb(var(--color-foreground));
  }
  .hrs__subtext {
    margin: 1.8rem 0 0;
    max-width: 48rem;
    color: rgba(var(--color-foreground), 0.75);
  }
  .hrs__button { margin-top: 2.4rem; }

  /* ---------- Card ---------- */
  .hrs__card {
    display: block;
    margin-top: 3.6rem;
    padding: 3.6rem 2.6rem 3rem;
    border-radius: var(--hrs-radius, 2.8rem);
    background: rgba(var(--color-foreground), 0.05);
  }
  .hrs__card--scheme { background: rgb(var(--color-background)); }

  .hrs__chart + .hrs__chart {
    margin-top: 3rem;
    padding-top: 3.6rem;
    border-top: 1px solid rgba(var(--color-foreground), 0.08);
  }

  .hrs__chart-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.6rem;
    margin-bottom: 2.4rem;
  }
  .hrs__chart-title {
    margin: 0;
    font-family: var(--font-body-family);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0;
    color: rgb(var(--color-foreground));
  }
  .hrs__chart-stat {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    white-space: nowrap;
  }
  .hrs__chart-value {
    margin: 0;
    line-height: 1;
    color: rgb(var(--color-foreground));
  }
  .hrs__chart-unit {
    font-size: 1.3rem;
    color: rgba(var(--color-foreground), 0.6);
  }

  /* Bars */
  .hrs__bars {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2px;
    height: var(--hrs-chart-h, 82px);
  }
  .hrs__bar {
    flex: 0 1 2px;
    min-width: 1px;
    height: var(--h);
    border-radius: 1px;
    background: rgba(var(--color-foreground), 0.45);
    transform-origin: bottom;
  }
  .hrs__bar--accent {
    flex-basis: 3px;
    background: rgb(var(--color-foreground));
  }

  .hrs__axis {
    display: flex;
    justify-content: space-between;
    margin-top: 3rem;
    font-size: 1.3rem;
    color: rgba(var(--color-foreground), 0.6);
  }

  /* Bar grow-in (only when JS marks the card visible) */
  @media (prefers-reduced-motion: no-preference) {
    .hrs__card--animate.is-ready .hrs__bar {
      transform: scaleY(0);
    }
    .hrs__card--animate.is-visible .hrs__bar {
      transform: scaleY(1);
      transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
      transition-delay: calc(var(--i) * 12ms);
    }
  }

  /* ---------- Mobile ---------- */
  @media screen and (max-width: 749px) {
    .hrs__grid {
      grid-template-columns: minmax(0, 1fr);
      gap: 3.2rem;
    }
    .hrs--mobile-above .hrs__media-col { order: -1; }
    .hrs--mobile-below .hrs__media-col { order: 1; }
    .hrs__media { aspect-ratio: var(--hrs-ratio-mobile, 4 / 3); }

    .hrs__card {
      margin-top: 2.8rem;
      padding: 2.6rem 1.8rem 2.2rem;
    }
    .hrs__chart + .hrs__chart { margin-top: 2.4rem; padding-top: 2.6rem; }
    .hrs__bars { gap: 1px; }
    .hrs__axis { margin-top: 2rem; }
  }
/* END_SECTION:health-stats */

/* START_SECTION:help-search (INDEX:30) */
.hsr-wrap {
    --hsr-fg: var(--color-foreground, 18, 18, 18);
    --hsr-bg: var(--color-background, 243, 243, 245);
    background-color: rgb(var(--hsr-bg));
    color: rgb(var(--hsr-fg));
  }
  .hsr {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .hsr--left { align-items: flex-start; text-align: left; }

  .hsr__heading {
    margin: 0;
    line-height: 1.05;
    color: rgb(var(--hsr-fg));
  }
  .hsr__text {
    max-width: 52rem;
    margin: 1.2rem 0 0;
    font-size: 1.5rem;
    color: rgba(var(--hsr-fg), 0.7);
  }

  .hsr__form {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: var(--hsr-max, 400px);
    margin-top: 2.4rem;
    padding: 0.5rem;
    border: 1px solid rgba(var(--hsr-fg), 0.08);
    border-radius: 10rem;
    background: rgb(var(--color-input-background, 255, 255, 255));
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .hsr__form:focus-within {
    border-color: rgba(var(--hsr-fg), 0.35);
    box-shadow: 0 0 0 0.3rem rgba(var(--hsr-fg), 0.08);
  }
  .hsr__input {
    flex: 1;
    min-width: 0;
    height: 4.2rem;
    padding: 0 1.4rem;
    border: 0;
    background: transparent;
    color: rgb(var(--color-input-text, var(--hsr-fg)));
    font-family: var(--font-body-family);
    font-size: 1.5rem;
    -webkit-appearance: none;
    appearance: none;
  }
  .hsr__input::placeholder { color: rgba(var(--hsr-fg), 0.5); }
  .hsr__input:focus { outline: none; box-shadow: none; }
  .hsr__input::-webkit-search-cancel-button { cursor: pointer; }

  .hsr__submit {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    height: 4.2rem;
    min-width: 4.2rem;
    padding: 0 2rem;
    border: 0;
    border-radius: 10rem;
    background: rgb(var(--color-button, var(--hsr-fg)));
    color: rgb(var(--color-button-text, 255, 255, 255));
    font-family: var(--font-body-family);
    font-size: 1.4rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.2s ease;
  }
  .hsr__submit:hover { filter: brightness(1.15); }
  .hsr__submit:focus-visible {
    outline: 0.2rem solid rgba(var(--hsr-fg), 0.5);
    outline-offset: 0.2rem;
  }
  .hsr__submit-icon--mobile { display: none; }

  .hsr__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    margin-top: 1.6rem;
  }
  .hsr--left .hsr__chips { justify-content: flex-start; }
  .hsr__chips-label {
    font-size: 1.3rem;
    color: rgba(var(--hsr-fg), 0.6);
  }
  .hsr__chip {
    padding: 0.6rem 1.4rem;
    border: 1px solid rgba(var(--hsr-fg), 0.12);
    border-radius: 10rem;
    font-size: 1.3rem;
    color: rgb(var(--hsr-fg));
    text-decoration: none;
    transition: border-color 0.2s ease;
  }
  .hsr__chip:hover { border-color: rgba(var(--hsr-fg), 0.45); }

  @media screen and (max-width: 749px) {
    .hsr__form { margin-top: 2rem; }
    .hsr__input { height: 4rem; padding: 0 1.2rem; font-size: 1.6rem; }
    .hsr__submit { height: 4rem; padding: 0 1.4rem; }
  }
  @media screen and (max-width: 400px) {
    .hsr__submit { padding: 0; width: 4rem; }
    .hsr__submit-text { display: none; }
    .hsr__submit-icon--mobile { display: block; }
  }
/* END_SECTION:help-search */

/* START_SECTION:hero-buy (INDEX:31) */
.hb {
    position: relative;
    overflow: hidden;
  }

  .hb__heading {
    margin: 0;
    font-size: clamp(4rem, 5.4vw, 8.4rem);
    line-height: 1.04;
    letter-spacing: -0.03em;
  }

  .hb__eyebrow {
    margin: 0 0 1.2rem;
    font-size: 2rem;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: -0.015em;
    letter-spacing: 0;
    color: rgba(var(--color-foreground), 0.65);
  }

  .hb__text {
    margin: 1.8rem 0 0;
    max-width: 46rem;
    font-size: 1.9rem;
    line-height: 1.42;
    letter-spacing: -0.01em;
    color: rgba(var(--color-foreground), 0.75);
  }

  .hb__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.2rem 2.4rem;
    margin-top: 2.8rem;
  }

  .hb__link {
    font-size: 1.6rem;
    font-weight: 500;
    color: rgb(var(--color-foreground));
    text-decoration: none;
  }

  .hb__price {
    margin: 1.4rem 0 0;
    font-size: 1.5rem;
    line-height: 1.4;
    color: rgba(var(--color-foreground), 0.75);
  }
  .hb__price strong {
    font-weight: 600;
    color: rgb(var(--color-foreground));
  }

  .hb__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem 2rem;
    margin: 2.4rem 0 0;
    padding: 0;
    list-style: none;
  }
  .hb__trust-item {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.4rem;
    line-height: 1.3;
    color: rgba(var(--color-foreground), 0.8);
    white-space: nowrap;
  }
  .hb__trust-item svg { flex: none; }

  /* Desktop: the image fills the section and sits right, on the same Paper background. */
  @media screen and (min-width: 750px) {
    .hb {
      display: flex;
      align-items: center;
      /* 11rem = announcement bar + header. Never taller than the screen. */
      height: min(calc(100svh - 11rem), var(--hb-max, 720px));
      min-height: 46rem;
    }
    .hb__media {
      position: absolute;
      inset: 0;
      overflow: hidden;
    }
    .hb__media picture { display: contents; }
    /* Larger than the section and anchored right, which pulls the watch toward the text. */
    .hb__img {
      position: absolute;
      top: 50%;
      right: 0;
      height: max(116%, 52vw);
      width: auto;
      max-width: none;
      transform: translateY(-50%);
    }
    .hb__inner {
      position: relative;
      z-index: 1;
      width: 100%;
    }
    .hb__content { max-width: 56rem; }
  }

  /* Mobile: short image on top, then everything needed to buy. */
  @media screen and (max-width: 749px) {
    .hb__media {
      height: clamp(15rem, 30svh, 30rem);
      overflow: hidden;
    }
    .hb__media picture { display: contents; }
    .hb__img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 60% 54%;
    }
    .hb__inner { padding-block: 1rem 2.8rem; }
    .hb__content { text-align: center; }
    .hb__eyebrow { margin-bottom: 0.6rem; font-size: 1.6rem; }
    .hb__heading { font-size: clamp(3.6rem, 10.6vw, 4.8rem); }
    .hb__text {
      margin: 1rem auto 0;
      font-size: 1.6rem;
      line-height: 1.38;
    }
    .hb__actions {
      flex-direction: column;
      gap: 1rem;
      margin-top: 1.6rem;
    }
    .hb__button { width: 100%; }
    .hb__link.yet-more { display: none; }
    .hb__price { margin-top: 1rem; font-size: 1.4rem; }
    .hb__trust {
      justify-content: center;
      gap: 0.4rem 1.2rem;
      margin-top: 1rem;
    }
    .hb__trust-item { font-size: 1.25rem; gap: 0.4rem; }
    .hb__trust-item svg { width: 1.3rem; height: 1.3rem; }
  }

  @media screen and (max-width: 749px) and (max-height: 640px) {
    .hb__eyebrow, .hb__text { display: none; }
    .hb__heading { margin-top: 0.4rem; }
  }
/* END_SECTION:hero-buy */

/* START_SECTION:iwatch-story (INDEX:34) */
.iwatch-story {
  padding: 80px 20px;
  background: {{ section.settings.back_color }};
  text-align: center;
}

.iwatch-story__container {
  max-width: 1200px;
  margin: 0 auto;
}

.iwatch-story__heading {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 12px;
}

.iwatch-story__subheading {
  font-size: 18px;
  color: #555;
  margin-bottom: 60px;
}

.iwatch-story__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.iwatch-card {
  padding: 40px 30px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.iwatch-card__icon {
  width: 56px;
  height: 56px;
  margin-bottom: 20px;
}

.iwatch-card__label {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
}

.iwatch-card__title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 14px;
}

.iwatch-card__text {
  font-size: 16px;
  color: #555;
  margin-bottom: 28px;
}

.iwatch-card__button {
  background: #000;
  color: #fff;
  padding: 12px 26px;
  border-radius: 30px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease;
}

.iwatch-card__button:hover {
  background: #333;
}

/* Background colors */
.bg-green { background: #ecfaf4; }
.bg-yellow { background: #fdf6e6; }
.bg-blue { background: #eef8fd; }

/* Popup Styles */
.iwatch-popup {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  justify-content: center;
  align-items: center;
}

.iwatch-popup__content {
  max-width: 800px;
  width: 90%;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

.iwatch-popup__close {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  z-index: 10;
}

.iwatch-popup iframe,
.iwatch-popup video {
  width: 100%;
  height: 450px;
  border-radius: 12px;
}

/* Responsive */
@media (max-width: 990px) {
  .iwatch-story__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width:767px) {
  .iwatch-story__heading {
    font-size: 32px;
  }
}
/* END_SECTION:iwatch-story */

/* START_SECTION:mission-beliefs (INDEX:55) */
mission-beliefs,
  .mbl { display: block; }
  .mbl-wrap {
    --mbl-fg: var(--color-foreground, 18, 18, 18);
    --mbl-bg: var(--color-background, 255, 255, 255);
    background-color: rgb(var(--mbl-bg));
    color: rgb(var(--mbl-fg));
  }
  .mbl { --mbl-accent-fallback: #f2c200; }

  .mbl__inner {
    max-width: var(--mbl-max, 800px);
    margin: 0 auto;
  }

  .mbl__heading {
    margin: 0;
    line-height: 1.05;
    color: rgb(var(--mbl-fg));
  }
  .mbl__statement {
    max-width: 64rem;
    margin: 1.6rem 0 0;
    font-family: var(--font-heading-family);
    font-style: var(--font-heading-style);
    font-weight: var(--font-heading-weight);
    line-height: 1.2;
    letter-spacing: -0.015em;
  }
  .mbl__statement-main { color: rgb(var(--mbl-fg)); }
  .mbl__statement-muted { color: rgba(var(--mbl-fg), 0.45); }

  .mbl__label {
    margin: 4rem 0 1.2rem;
    font-size: 1.2rem;
    color: rgba(var(--mbl-fg), 0.6);
  }

  /* ---------- Panels (desktop: expanding) ---------- */
  .mbl__panels {
    display: flex;
    gap: 0.8rem;
    height: var(--mbl-height, 340px);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .mbl__panel {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--mbl-radius, 2rem);
    background: rgba(var(--mbl-fg), 0.05);
    cursor: pointer;
    transition: flex-grow 0.55s cubic-bezier(0.25, 0.8, 0.25, 1);
  }
  .mbl__panel.is-active { flex-grow: var(--mbl-grow, 2.2); cursor: default; }
  .mbl__panel:focus-visible {
    outline: 0.2rem solid rgba(var(--mbl-fg), 0.5);
    outline-offset: 0.3rem;
  }

  .mbl__media {
    position: absolute;
    inset: 0;
    display: block;
    opacity: 0.55;
    transition: opacity 0.45s ease;
  }
  .mbl__panel.is-active .mbl__media { opacity: 1; }
  .mbl__img,
  .mbl__placeholder {
    display: block;
    width: 100%;
    height: 100%;
  }
  .mbl__img { object-fit: cover; }
  .mbl__placeholder { fill: rgba(var(--mbl-fg), 0.25); }

  .mbl__card {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.4rem 1.4rem 1.4rem;
    border-radius: max(calc(var(--mbl-radius, 2rem) - 0.6rem), 0px);
    background: rgb(var(--mbl-bg));
    color: rgb(var(--mbl-fg));
    box-shadow: 0 0.6rem 2rem -1rem rgba(var(--mbl-fg), 0.25);
  }
  .mbl__num {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1rem;
    letter-spacing: 0.04em;
    color: rgba(var(--mbl-fg), 0.5);
  }
  .mbl__card-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
  }
  .mbl__title {
    min-width: 0;
    font-family: var(--font-heading-family);
    font-style: var(--font-heading-style);
    font-weight: var(--font-heading-weight);
    font-size: 1.6rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
  }
  .mbl__dot {
    flex: none;
    width: 0.8rem;
    height: 0.8rem;
    margin-bottom: 0.3rem;
    border-radius: 50%;
    background: rgba(var(--mbl-fg), 0.15);
    transition: background-color 0.3s ease;
  }
  .mbl__panel.is-active .mbl__dot { background: var(--mbl-accent, var(--mbl-accent-fallback)); }

  /* Optional text/link show only on the open panel */
  .mbl__text,
  .mbl__link {
    display: none;
    font-size: 1.35rem;
    line-height: 1.5;
    color: rgba(var(--mbl-fg), 0.7);
  }
  .mbl__link { color: rgb(var(--mbl-fg)); font-weight: 600; text-decoration: none; }
  .mbl__link:hover { text-decoration: underline; text-underline-offset: 0.3rem; }
  .mbl__panel.is-active .mbl__text,
  .mbl__panel.is-active .mbl__link { display: block; }

  @media (prefers-reduced-motion: reduce) {
    .mbl__panel,
    .mbl__media { transition: none; }
  }

  /* ---------- Tablet ---------- */
  @media screen and (min-width: 750px) and (max-width: 989px) {
    .mbl__title { font-size: 1.45rem; }
  }

  /* ---------- Mobile ---------- */
  @media screen and (max-width: 749px) {
    .mbl__label { margin-top: 2.8rem; }
    .mbl__panels { height: auto; }
    .mbl__panel,
    .mbl__panel.is-active { flex: none; cursor: default; }
    .mbl__panel { aspect-ratio: 4 / 3; }
    .mbl__media { opacity: 1; }
    .mbl__dot { background: var(--mbl-accent, var(--mbl-accent-fallback)); }
    .mbl__text,
    .mbl__link { display: block; }

    .mbl--mobile-stack .mbl__panels { flex-direction: column; gap: 1rem; }
    .mbl--mobile-stack .mbl__panel { width: 100%; }

    .mbl--mobile-swipe .mbl__panels {
      margin: 0 -1.5rem;
      padding: 0 1.5rem 0.4rem;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: 1.5rem;
      scrollbar-width: none;
    }
    .mbl--mobile-swipe .mbl__panels::-webkit-scrollbar { display: none; }
    .mbl--mobile-swipe .mbl__panel { width: 80%; aspect-ratio: 4 / 5; scroll-snap-align: start; }
  }
/* END_SECTION:mission-beliefs */

/* START_SECTION:product-showcase-carousel (INDEX:63) */
.psc {
    --psc-gutter: 3.2rem;
    position: relative;
  }

  .psc__heading {
    margin: 0 0 4rem;
    text-align: var(--psc-align, center);
  }

  /* Stage: [prev] [card viewport] [next] / dots underneath */
  .psc__stage {
    display: grid;
    grid-template-columns: 1fr minmax(0, var(--psc-card-max)) 1fr;
    grid-template-areas:
      'prev viewport next'
      '.    dots     .';
    align-items: center;
    column-gap: 2rem;
    position: relative;
  }

  .psc__band {
    grid-row: 1;
    grid-column: 1 / -1;
    align-self: center;
    height: var(--psc-band-height, 75%);
    background: rgba(var(--color-foreground), var(--psc-band-opacity, 0.06));
    z-index: 0;
    pointer-events: none;
  }

  .psc__viewport {
    grid-area: viewport;
    position: relative;
    z-index: 1;
    min-width: 0;
    margin-inline: calc(var(--psc-gutter) * -1);
  }

  .psc__track {
    position: relative;
    display: flex;
    margin: 0;
    padding: 2rem 0 5rem;
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .psc__track::-webkit-scrollbar { display: none; }

  .psc__slide {
    flex: 0 0 100%;
    display: flex;
    box-sizing: border-box;
    padding-inline: var(--psc-gutter);
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* Card */
  .psc__card {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3rem;
    padding: 1.5rem;
    border-radius: var(--psc-radius, 2.8rem);
  }
  .psc__card--shadow {
    box-shadow: 0 2.4rem 5rem -1rem rgba(var(--color-shadow, var(--color-foreground)), 0.14);
  }
  .psc__card--image-right .psc__media { order: 2; }

  .psc__media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: max(calc(var(--psc-radius, 2.8rem) - 0.8rem), 0px);
    background: rgba(var(--color-foreground), 0.04);
  }
  .psc__img,
  .psc__placeholder {
    display: block;
    width: 100%;
    height: 100%;
  }
  .psc__img { object-fit: var(--psc-fit, cover); }
  .psc__placeholder { fill: rgba(var(--color-foreground), 0.35); }

  .psc__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    padding: 2rem 1.5rem;
  }
  .psc__title {
    margin: 0 0 1.2rem;
    color: rgb(var(--color-foreground));
  }
  .psc__desc {
    margin: 0 0 1.6rem;
    color: rgba(var(--color-foreground), 0.75);
  }
  .psc__link {
    font-weight: 600;
    color: rgb(var(--color-foreground));
  }

  .psc__stats {
    display: grid;
    grid-template-columns: repeat(var(--psc-stat-count, 3), minmax(0, 1fr));
    gap: 2rem;
    width: 100%;
    max-width: 32rem;
    margin: auto 0 0;
    padding-top: 3rem;
  }
  .psc__stat {
    display: flex;
    flex-direction: column-reverse; /* value above label, dt/dd order kept for a11y */
    gap: 0.4rem;
    min-width: 0;
  }
  .psc__stat-value {
    margin: 0;
    color: rgb(var(--color-foreground));
    white-space: nowrap;
  }
  .psc__stat-label {
    font-size: 1.4rem;
    color: rgba(var(--color-foreground), 0.75);
  }

  .psc__badge {
    position: absolute;
    z-index: 1;
    left: 1rem;
    bottom: 1rem;
    padding: 0.3rem 1rem;
    border-radius: 2rem;
    background: rgb(var(--color-background));
    color: rgba(var(--color-foreground), 0.75);
    font-size: 1.2rem;
    line-height: 1.5;
  }

  /* Rail layout: a lineup, with the next watch peeking in */
  .psc__head { display: block; }
  .psc--rail .psc__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.2rem 3.2rem;
    flex-wrap: wrap;
    margin-bottom: 3.2rem;
  }
  .psc--rail .psc__heading { margin: 0; text-align: left; }
  .psc--rail .psc__stage { display: block; position: relative; }
  .psc--rail .psc__band { display: none; }
  .psc--rail .psc__viewport { margin-inline: 0; }
  .psc--rail .psc__track {
    gap: 2rem;
    padding: 0 0 1.2rem;
    scroll-snap-type: x mandatory;
  }
  .psc--rail .psc__slide {
    flex: 0 0 calc((100% - 6rem) / 4);
    padding-inline: 0;
    scroll-snap-stop: normal;
  }
  .psc--rail .psc__card {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
  }
  .psc--rail .psc__media {
    aspect-ratio: 1 / 1.08;
    border-radius: 2rem;
    background: #fff;
  }
  .psc--rail .psc__content {
    flex: 1;
    align-items: center;
    text-align: center;
    padding: 2rem 1rem 0;
  }
  .psc--rail .psc__title {
    margin: 0;
    font-size: 2.4rem;
    line-height: 1.15;
    letter-spacing: -0.015em;
  }
  .psc--rail .psc__desc {
    margin: 0.6rem 0 0;
    font-size: 1.6rem;
    line-height: 1.35;
    letter-spacing: -0.005em;
  }
  .psc__price {
    margin: 0.8rem 0 1.6rem;
    font-size: 1.6rem;
    line-height: 1.35;
    font-weight: 600;
    color: rgb(var(--color-foreground));
  }
  .psc--rail .psc__shop { margin-top: auto; min-height: 3.8rem; padding: 0 2.2rem; font-size: 1.5rem; }
  .psc--rail .psc__arrow {
    position: absolute;
    top: calc(50% - 8rem);
    width: 4.4rem;
    height: 4.4rem;
    z-index: 3;
    background: rgba(245, 245, 247, 0.8);
    color: rgb(var(--color-foreground));
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    box-shadow: 0 0.2rem 1.2rem rgba(0, 0, 0, 0.1);
  }
  .psc--rail .psc__arrow--prev { left: -2.2rem; }
  .psc--rail .psc__arrow--next { right: -2.2rem; }
  .psc--rail .psc__dots { display: none; }
  @media screen and (min-width: 750px) and (max-width: 1100px) {
    .psc--rail .psc__slide { flex-basis: calc((100% - 4rem) / 3); }
  }
  @media screen and (max-width: 749px) {
    .psc--rail .psc__head { margin-bottom: 2rem; }
    .psc--rail .psc__track { gap: 1.2rem; padding-inline: 1.5rem; scroll-padding-inline: 1.5rem; }
    .psc--rail .psc__viewport { margin-inline: -1.5rem; }
    .psc--rail .psc__slide { flex-basis: 72%; }
    .psc--rail .psc__arrow { display: none; }
  }

  /* Arrows — use the scheme's button colors */
  .psc__arrow {
    position: relative;
    z-index: 2;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.6rem;
    height: 4.6rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(var(--color-button));
    color: rgb(var(--color-button-text));
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .psc__arrow--prev { grid-area: prev; }
  .psc__arrow--next { grid-area: next; }
  .psc__arrow svg { width: 1.8rem; height: 1.8rem; }
  .psc__arrow:hover:not([disabled]) { transform: scale(1.06); }
  .psc__arrow[disabled] { opacity: 0.3; cursor: not-allowed; }
  .psc__arrow:focus-visible,
  .psc__dot:focus-visible {
    outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
    outline-offset: 0.3rem;
  }

  /* Dots */
  .psc__dots {
    grid-area: dots;
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 0.2rem;
    position: relative;
    z-index: 1;
  }
  .psc__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.4rem;
    min-width: 1.6rem;
    padding: 0 0.4rem;
    border: 0;
    background: none;
    cursor: pointer;
  }
  .psc__dot::before {
    content: '';
    display: block;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 1rem;
    background: rgba(var(--color-foreground), 0.45);
    transition: width 0.3s ease, background-color 0.3s ease;
  }
  .psc__dot.is-active::before {
    width: 4.4rem;
    background: rgb(var(--color-foreground));
  }

  .psc__footer {
    margin-top: 3.2rem;
    text-align: var(--psc-align, center);
  }

  /* Mobile */
  @media screen and (max-width: 749px) {
    .psc { --psc-gutter: 1.5rem; }

    .psc__heading { margin-bottom: 2.4rem; }

    .psc__stage {
      grid-template-columns: auto minmax(0, 1fr) auto;
      grid-template-areas:
        'viewport viewport viewport'
        'prev     dots     next';
      column-gap: 1.2rem;
    }

    .psc__band { margin-inline: -1.5rem; }

    .psc__track { padding: 1.2rem 0 3.2rem; }

    .psc__card {
      grid-template-columns: minmax(0, 1fr);
      gap: 0;
      padding: 1rem;
    }
    .psc__card--image-right .psc__media { order: 0; }
    .psc__media { aspect-ratio: var(--psc-mobile-ratio, 1); }

    .psc__content { padding: 2rem 1rem 1.2rem; }
    .psc__stats { max-width: none; padding-top: 2.4rem; }

    .psc__arrow { width: 4rem; height: 4rem; }
    .psc__arrow svg { width: 1.6rem; height: 1.6rem; }

    .psc__footer { margin-top: 2.4rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    .psc__dot::before,
    .psc__arrow { transition: none; }
  }
/* END_SECTION:product-showcase-carousel */

/* START_SECTION:section-slideshow (INDEX:67) */
.ysg { display: block; padding-top: var(--ysg-pad-top, 72px); }

  .ysg__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
  }
  .ysg__pill {
    min-height: 4.4rem;
    padding: 0 2.2rem;
    border: 0;
    border-radius: 4rem;
    background: rgba(var(--color-foreground), 0.06);
    color: rgb(var(--color-foreground));
    font-family: inherit;
    font-size: 1.6rem;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease-out;
  }
  .ysg__pill:hover { background: rgba(var(--color-foreground), 0.1); }
  .ysg__pill:active { transform: scale(0.97); }
  .ysg__pill[aria-selected='true'] {
    background: rgb(var(--color-foreground));
    color: rgb(var(--color-background));
  }
  .ysg__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.4rem;
    height: 4.4rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: rgba(var(--color-foreground), 0.6);
    cursor: pointer;
  }
  .ysg__toggle:hover { color: rgb(var(--color-foreground)); }
  .ysg__icon-play { display: none; }
  .ysg__toggle[aria-pressed='true'] .ysg__icon-play { display: block; }
  .ysg__toggle[aria-pressed='true'] .ysg__icon-pause { display: none; }

  .ysg__track {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .ysg__track::-webkit-scrollbar { display: none; }
  .ysg__slide .page-width { max-width: none; padding-inline: var(--yet-panel-pad); }
  .ysg__slide {
    flex: 0 0 100%;
    min-width: 0;
    display: flex;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  /* The adopted sections fill the slide and centre their content, so all slides match. */
  .ysg__slide > .shopify-section { width: 100%; display: flex; }
  .ysg__slide > .shopify-section > :not(style):not(script):not(link) { width: 100%; display: flex; align-items: center; }
  .ysg__slide > .shopify-section > :not(style):not(script):not(link) > :not(style):not(script):not(link) { width: 100%; }

  @media screen and (max-width: 749px) {
    .ysg__nav {
      flex-wrap: nowrap;
      justify-content: flex-start;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .ysg__nav::-webkit-scrollbar { display: none; }
    .ysg__pill { flex: none; font-size: 1.5rem; padding: 0 1.8rem; }
    .ysg__toggle { flex: none; }
  }
/* END_SECTION:section-slideshow */

/* START_SECTION:setup-steps (INDEX:68) */
.sim__split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 4rem 6rem;
  }
  .sim__panel--media .sim__header { text-align: left; margin-bottom: 2.8rem; }
  .sim__panel--media .sim__list { margin: 0; max-width: none; }
  .sim__panel--media .sim__step { cursor: pointer; grid-template-columns: 5.2rem 2.4rem minmax(0, 1fr); }
  .sim__panel--media .sim__num { text-align: left; }
  .sim__split-media {
    position: relative;
    aspect-ratio: 4 / 5;
    max-height: 64rem;
    width: 100%;
    border-radius: 2rem;
    overflow: hidden;
    background: rgba(var(--color-foreground), 0.04);
  }
  .sim__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.35s ease;
  }
  .sim__photo.is-active { opacity: 1; }
  @media screen and (max-width: 749px) {
    .sim__split { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; }
    .sim__split-media { order: -1; aspect-ratio: 1 / 1; }
    .sim__panel--media .sim__header { margin-bottom: 2rem; }
  }

  .sim {
    /* Captured at section level so the highlight card always uses the
       section's background, even inside a differently colored panel. */
    --sim-highlight: var(--color-background);
  }

  /* ---------- Panel ---------- */
  .sim__panel {
    max-width: var(--sim-panel-max, 700px);
    margin: 0 auto;
  }
  .sim__panel--on {
    padding: 5.6rem 5rem 4.8rem;
    border-radius: var(--sim-radius, 2.8rem);
    background: rgba(var(--color-foreground), 0.04);
  }
  .sim__panel--scheme { background: rgb(var(--color-background)); }

  /* ---------- Header ---------- */
  .sim__header {
    text-align: center;
    margin-bottom: 4rem;
  }
  .sim__heading {
    margin: 0;
    line-height: 1.05;
    color: rgb(var(--color-foreground));
  }
  .sim__subtext {
    margin: 1.4rem auto 0;
    max-width: 52rem;
    font-size: 1.5rem;
    color: rgba(var(--color-foreground), 0.75);
  }

  /* ---------- Timeline ---------- */
  .sim__list {
    --sim-pad: 2.2rem;      /* vertical padding of each row */
    --sim-dot: 1rem;        /* dot size */
    --sim-title-lh: 2.2rem; /* title line height, used to center the dot */
    max-width: var(--sim-list-max, 600px);
    margin: 0 auto;
    padding: 0;
    list-style: none;
  }

  .sim__step {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2rem minmax(0, 1fr);
    column-gap: 2rem;
    padding: 0 2.4rem;
    border-radius: calc(var(--sim-radius, 2.8rem) * 0.6);
    transition: background-color 0.25s ease;
  }
  .sim__step.is-highlight {
    background: rgb(var(--sim-highlight));
  }

  .sim__num,
  .sim__body {
    padding-block: var(--sim-pad);
  }
  .sim__step .sim__num {
    margin: 0;
    text-align: right;
    line-height: var(--sim-title-lh);
    font-variant-numeric: tabular-nums;
    color: rgb(var(--color-foreground));
    white-space: nowrap;
  }

  .sim__track {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .sim__seg {
    width: 1px;
    background: rgba(var(--color-foreground), 0.15);
  }
  .sim__seg--top {
    flex: none;
    height: calc(var(--sim-pad) + (var(--sim-title-lh) - var(--sim-dot)) / 2);
  }
  .sim__seg--bottom { flex: 1; }
  .sim__dot {
    flex: none;
    width: var(--sim-dot);
    height: var(--sim-dot);
    box-sizing: border-box;
    border: 1.5px solid rgb(var(--color-foreground));
    border-radius: 50%;
  }

  /* Line only runs between steps, and stops at highlighted cards */
  .sim__step:first-child .sim__seg--top,
  .sim__step:last-child .sim__seg--bottom,
  .sim__step.is-highlight .sim__seg,
  .sim__list--no-line .sim__seg {
    visibility: hidden;
  }

  .sim__title {
    margin: 0;
    font-family: var(--font-body-family);
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: var(--sim-title-lh);
    color: rgb(var(--color-foreground));
  }
  .sim__text {
    margin: 0.6rem 0 0;
    font-size: 1.4rem;
    line-height: 1.6;
    color: rgba(var(--color-foreground), 0.7);
  }

  /* Highlight follows the cursor (desktop pointers only) */
  @media (hover: hover) {
    .sim__list--hover:hover .sim__step.is-highlight:not(:hover) {
      background: transparent;
    }
    .sim__list--hover:hover .sim__step.is-highlight:not(:hover) .sim__seg { visibility: visible; }
    .sim__list--hover .sim__step:hover {
      background: rgb(var(--sim-highlight));
    }
    .sim__list--hover .sim__step:hover .sim__seg { visibility: hidden; }
    .sim__list--hover .sim__step:first-child .sim__seg--top,
    .sim__list--hover .sim__step:last-child .sim__seg--bottom,
    .sim__list--no-line .sim__seg { visibility: hidden !important; }
  }

  .sim__footer {
    margin-top: 3.6rem;
    text-align: center;
  }

  /* ---------- Mobile ---------- */
  @media screen and (max-width: 749px) {
    .sim__panel--on { padding: 3.6rem 1.6rem 3rem; }
    .sim__header { margin-bottom: 2.8rem; }

    .sim__list { --sim-pad: 1.8rem; }
    .sim__step {
      grid-template-columns: auto 1.6rem minmax(0, 1fr);
      column-gap: 1.4rem;
      padding: 0 1.6rem;
    }
    .sim__num { text-align: left; }
  }
/* END_SECTION:setup-steps */

/* START_SECTION:smart-watch-feature (INDEX:70) */
.smart-watch-section {
  padding: 60px 20px;
  background: #ffffff;
}

.smart-watch-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}
.smart-watch-section h2{
  text-align: center;
    font-size: 32px;
    
    font-weight: 600;
    margin-bottom: 40px;
}

.smart-watch-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 50px;
}

.smart-watch-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.smart-watch-image {
  background: #1f1f26;
  border-radius: 20px;
  padding: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.smart-watch-image img {
  max-width: 100%;
  height: auto;
}

.smart-watch-section .smart-watch-title {
  font-size: 32px;
   text-align: left;
  font-weight: 700;
      line-height: 38px;
      margin:0px;
  
}

.smart-watch-text {
  font-size: 16px;
  color: #555;
  line-height: 1.6;
}

.smart-watch-button {
  margin-top: 10px;
}

.smart-watch-button a {
  display: inline-block;
  padding: 14px 28px;
  background: #000;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  transition: background 0.3s ease;
}

.smart-watch-button a:hover {
  background: #333;
}

/* Mobile */
@media (max-width: 768px) {
  .smart-watch-grid {
    grid-template-columns: 1fr;
  }

  .smart-watch-title {
    font-size: 26px;
  }
}
/* END_SECTION:smart-watch-feature */

/* START_SECTION:story-reveal (INDEX:71) */
story-reveal,
  .srv { display: block; }
  .srv-wrap {
    --srv-fg: var(--color-foreground, 18, 18, 18);
    --srv-bg: var(--color-background, 255, 255, 255);
    background-color: rgb(var(--srv-bg));
    color: rgb(var(--srv-fg));
  }
  .srv { --srv-accent-fallback: #f2c200; }

  .srv__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: var(--srv-max, 900px);
    margin: 0 auto;
    text-align: center;
  }
  .srv--left .srv__inner { align-items: flex-start; margin-left: 0; text-align: left; }

  .srv__eyebrow {
    margin: 0 0 1.6rem;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(var(--srv-fg), 0.55);
  }
  .srv__intro {
    max-width: 48rem;
    margin: 0 0 3.2rem;
    font-size: 1.7rem;
    line-height: 1.6;
    color: rgba(var(--srv-fg), 0.65);
  }
  .srv__intro > :first-child { margin-top: 0; }
  .srv__intro > :last-child { margin-bottom: 0; }

  /* ---------- Lines ---------- */
  .srv__lines {
    display: flex;
    flex-direction: column;
    align-items: inherit;
    margin: 0;
    font-family: var(--font-heading-family);
    font-style: var(--font-heading-style);
    font-weight: var(--font-heading-weight);
    letter-spacing: -0.03em;
  }
  .srv__line {
    display: block;
    color: rgba(var(--srv-fg), var(--srv-dim, 0.12));
    transition: color 0.6s ease;
  }
  .srv__line.is-on { color: rgb(var(--srv-fg)); }
  .srv__line--small { font-size: clamp(2rem, 3.4vw, 3.4rem); line-height: 1.15; margin-top: 0.8rem; }
  .srv__line--medium { font-size: clamp(2.8rem, 4.4vw, 4.6rem); line-height: 1.08; }
  .srv__line--large { font-size: clamp(4.4rem, 8vw, 8.8rem); line-height: 1; margin: 0.4rem 0; }
  .srv__line--huge { font-size: clamp(6.4rem, 13vw, 15rem); line-height: 0.95; letter-spacing: -0.045em; margin: 0.6rem 0 0.4rem; }
  .srv__line--small + .srv__line--small,
  .srv__line--medium + .srv__line--medium { margin-top: 0; }

  .srv__dot {
    display: inline-block;
    width: 0.16em;
    height: 0.16em;
    min-width: 0.9rem;
    min-height: 0.9rem;
    margin-left: 0.04em;
    border-radius: 50%;
    background: var(--srv-accent, var(--srv-accent-fallback));
    vertical-align: baseline;
    opacity: 0.35;
    transform: scale(0.6);
    transition: opacity 0.5s ease 0.2s, transform 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) 0.2s;
  }
  .srv__line.is-on .srv__dot { opacity: 1; transform: none; }

  /* ---------- Underline ---------- */
  .srv__rule {
    position: relative;
    display: block;
    width: 13rem;
    height: 1.5px;
    margin-top: 2rem;
    background: rgba(var(--srv-fg), var(--srv-dim, 0.12));
    overflow: hidden;
  }
  .srv__rule-fill {
    position: absolute;
    inset: 0;
    display: block;
    background: rgb(var(--srv-fg));
    transform: scaleX(var(--srv-progress, 0));
    transform-origin: left;
    transition: transform 0.4s ease;
  }
  .srv--center .srv__rule-fill { transform-origin: center; }

  .srv__outro {
    max-width: 52rem;
    margin-top: 3.2rem;
    font-size: 1.6rem;
    line-height: 1.6;
    color: rgba(var(--srv-fg), 0.7);
  }
  .srv__button { margin-top: 3.2rem; }

  /* No animation: everything visible */
  .srv.is-static .srv__line { color: rgb(var(--srv-fg)); }
  .srv.is-static .srv__dot { opacity: 1; transform: none; }
  .srv.is-static .srv__rule-fill { transform: none; }

  @media (prefers-reduced-motion: reduce) {
    .srv__line { color: rgb(var(--srv-fg)); transition: none; }
    .srv__dot { opacity: 1; transform: none; transition: none; }
    .srv__rule-fill { transform: none; transition: none; }
  }

  @media screen and (max-width: 749px) {
    .srv__intro { margin-bottom: 2.4rem; font-size: 1.5rem; }
    .srv__rule { width: 9rem; margin-top: 1.6rem; }
  }
/* END_SECTION:story-reveal */

/* START_SECTION:support-hub (INDEX:72) */
.shb-wrap {
    --shb-fg: var(--color-foreground, 18, 18, 18);
    --shb-bg: var(--color-background, 255, 255, 255);
    background-color: rgb(var(--shb-bg));
    color: rgb(var(--shb-fg));
    scroll-margin-top: 8rem;
  }

  /* ---------- Link cards ---------- */
  .shb__cards {
    display: grid;
    grid-template-columns: repeat(var(--shb-cards, 4), minmax(0, 1fr));
    gap: 0.8rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .shb__card-item { display: flex; min-width: 0; }
  .shb__card {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1.8rem 2rem;
    border: 1px solid rgba(var(--shb-fg), 0.08);
    border-radius: var(--shb-radius, 1.6rem);
    background: rgb(var(--shb-bg));
    color: rgb(var(--shb-fg));
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.2s ease;
  }
  a.shb__card:hover,
  .shb__card.is-highlighted { border-color: rgba(var(--shb-fg), 0.55); }
  a.shb__card:hover { transform: translateY(-1px); }
  a.shb__card:focus-visible {
    outline: 0.2rem solid rgba(var(--shb-fg), 0.5);
    outline-offset: 0.2rem;
  }
  .shb__card-title {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
  }
  .shb__card-text {
    font-size: 1.3rem;
    line-height: 1.4;
    color: rgba(var(--shb-fg), 0.65);
  }

  /* ---------- Intro + steps ---------- */
  .shb__body {
    display: grid;
    grid-template-columns: var(--shb-cols, 1fr 1fr);
    gap: 3.2rem 6rem;
    align-items: start;
    margin-top: 6rem;
  }
  .shb__body--flush { margin-top: 0; }
  .shb__intro { min-width: 0; }
  .shb__heading {
    margin: 0;
    line-height: 1.02;
    color: rgb(var(--shb-fg));
  }
  .shb__text {
    margin: 1.6rem 0 0;
    max-width: 44rem;
    font-size: 1.5rem;
    color: rgba(var(--shb-fg), 0.7);
  }
  .shb__button { margin-top: 2.4rem; }

  .shb__steps {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid rgba(var(--shb-fg), 0.08);
  }
  .shb__step {
    display: grid;
    grid-template-columns: 6.4rem minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
    padding: 2.2rem 0 2.4rem;
    border-bottom: 1px solid rgba(var(--shb-fg), 0.08);
  }
  .shb__step:last-child { border-bottom: 0; }
  .shb__steps--plain,
  .shb__steps--plain .shb__step { border: 0; }
  .shb__num {
    margin: 0;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: rgb(var(--shb-fg));
  }
  .shb__step-title {
    margin: 0;
    font-family: var(--font-body-family);
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.35;
    color: rgb(var(--shb-fg));
  }
  .shb__step-text {
    margin: 0.6rem 0 0;
    font-size: 1.4rem;
    line-height: 1.5;
    color: rgba(var(--shb-fg), 0.65);
  }

  /* ---------- Tablet ---------- */
  @media screen and (min-width: 750px) and (max-width: 989px) {
    .shb__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .shb__body { grid-template-columns: minmax(0, 1fr); margin-top: 4.8rem; }
  }

  /* ---------- Mobile ---------- */
  @media screen and (max-width: 749px) {
    .shb__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .shb--mobile-stack .shb__cards { grid-template-columns: minmax(0, 1fr); }
    .shb--mobile-swipe .shb__cards {
      display: flex;
      margin: 0 -1.5rem;
      padding: 0 1.5rem 0.4rem;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: 1.5rem;
      scrollbar-width: none;
    }
    .shb--mobile-swipe .shb__cards::-webkit-scrollbar { display: none; }
    .shb--mobile-swipe .shb__card-item { flex: 0 0 62%; scroll-snap-align: start; }

    .shb__card { padding: 1.6rem; min-height: 0; }
    .shb__card-title { font-size: 1.4rem; }
    .shb__card-text { font-size: 1.25rem; }

    .shb__body { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; margin-top: 4rem; }
    .shb__step { grid-template-columns: 4.8rem minmax(0, 1fr); gap: 1.4rem; padding: 1.8rem 0 2rem; }
    .shb__step-title { font-size: 1.5rem; }
    .shb__step-text { font-size: 1.35rem; }
  }
/* END_SECTION:support-hub */

/* START_SECTION:testimonial-cards (INDEX:74) */
/* ---------- Heading ---------- */
  .tsc__heading {
    margin: 0 0 4rem;
    line-height: 1.05;
  }
  .tsc__heading--center { text-align: center; }
  .tsc__heading--right { text-align: right; }
  .tsc__heading-main { color: rgb(var(--color-foreground)); }
  .tsc__heading-accent { color: rgba(var(--color-foreground), 0.45); }

  /* ---------- Grid ---------- */
  .tsc__list {
    display: grid;
    grid-template-columns: repeat(var(--tsc-cols, 3), minmax(0, 1fr));
    gap: 1.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .tsc__item { display: flex; min-width: 0; }

  /* ---------- Card ---------- */
  .tsc__card {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: var(--tsc-card-min-h, 356px);
    margin: 0;
    padding: 3rem 3rem 3rem;
    box-sizing: border-box;
    border-radius: var(--tsc-radius, 2.8rem);
  }

  .tsc__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
  }
  .tsc__avatar {
    flex: none;
    display: block;
    width: 5.2rem;
    height: 5.2rem;
    overflow: hidden;
    border-radius: 50%;
    background: rgba(var(--color-foreground), 0.06);
  }
  .tsc__avatar img,
  .tsc__avatar-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .tsc__avatar-placeholder { fill: rgba(var(--color-foreground), 0.25); }

  .tsc__stars {
    margin-top: 2rem;
    color: #fac11a;
    font-size: 1.5rem;
    letter-spacing: 0.1em;
    line-height: 1;
  }
  .tsc__footnote {
    margin: 2.4rem 0 0;
    font-size: 1.3rem;
    color: rgba(var(--color-foreground), 0.65);
  }

  .tsc__tag {
    margin-left: auto;
    padding: 0.7rem 1.5rem;
    border: 1px solid rgba(var(--color-foreground), 0.12);
    border-radius: 10rem;
    font-size: 1.3rem;
    line-height: 1.3;
    white-space: nowrap;
    color: rgb(var(--color-foreground));
    text-decoration: none;
    transition: border-color 0.2s ease;
  }
  .tsc__tag--link:hover { border-color: rgba(var(--color-foreground), 0.45); }

  .tsc__quote {
    margin: auto 0;
    padding: 4rem 0;
    border: 0;
  }
  .tsc__quote p {
    margin: 0;
    font-size: 2.4rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: rgb(var(--color-foreground));
    text-wrap: pretty;
  }
  .tsc__quote--heading p {
    font-family: var(--font-heading-family);
    font-style: var(--font-heading-style);
    font-weight: var(--font-heading-weight);
  }
  .tsc__quote--body p {
    font-family: var(--font-body-family);
    font-style: var(--font-body-style);
    font-weight: var(--font-body-weight);
  }

  .tsc__author {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding-left: 1.5rem;
    border-left: 1px solid rgba(var(--color-foreground), 0.5);
  }
  .tsc__name {
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.3;
    color: rgb(var(--color-foreground));
  }
  .tsc__detail {
    font-size: 1.3rem;
    line-height: 1.3;
    color: rgba(var(--color-foreground), 0.6);
  }

  /* ---------- Tablet ---------- */
  @media screen and (min-width: 750px) and (max-width: 989px) {
    .tsc__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  /* ---------- Mobile ---------- */
  @media screen and (max-width: 749px) {
    .tsc__heading { margin-bottom: 2.4rem; }
    .tsc__card {
      min-height: 0;
      padding: 2.4rem;
    }
    .tsc__quote { padding: 3.2rem 0; }
    .tsc__quote p { font-size: 2rem; }

    .tsc--mobile-stack .tsc__list { grid-template-columns: minmax(0, 1fr); }

    /* Swipeable row with a peek of the next card */
    .tsc--mobile-slider .tsc__list {
      display: flex;
      gap: 1.2rem;
      margin: 0 -1.5rem;
      padding: 0 1.5rem 0.4rem;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: 1.5rem;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }
    .tsc--mobile-slider .tsc__list::-webkit-scrollbar { display: none; }
    .tsc--mobile-slider .tsc__item {
      flex: 0 0 84%;
      scroll-snap-align: start;
    }
  }
/* END_SECTION:testimonial-cards */

/* START_SECTION:watch-collection-grid (INDEX:77) */
.fyw__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.2rem 3.2rem;
    margin-bottom: 3.2rem;
  }
  .fyw__group { display: flex; align-items: center; gap: 1rem; min-width: 0; }
  .fyw__group-label { flex: none; font-size: 1.4rem; color: rgba(var(--fyw-fg), 0.65); }
  .fyw__chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
  .fyw__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 3.6rem;
    padding: 0 1.4rem;
    border: 0;
    border-radius: 4rem;
    background: rgba(var(--fyw-fg), 0.06);
    color: rgb(var(--fyw-fg));
    font-family: inherit;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease-out;
  }
  .fyw__chip:hover:not(:disabled) { background: rgba(var(--fyw-fg), 0.1); }
  .fyw__chip:disabled { opacity: 0.32; cursor: not-allowed; }
  .fyw__chip:active:not(:disabled) { transform: scale(0.97); }
  .fyw__chip[aria-pressed='true'] { background: rgb(var(--fyw-fg)); color: rgb(var(--color-background)); }
  .fyw__dot {
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    background: var(--dot);
    box-shadow: inset 0 0 0 0.1rem rgba(0, 0, 0, 0.16), 0 0 0 0.1rem rgba(255, 255, 255, 0.35);
  }
  .fyw__clear { background: none; border: 0; padding: 0; font-family: inherit; font-size: 1.4rem; cursor: pointer; }
  .fyw__clear[hidden] { display: none; }
  @media screen and (max-width: 749px) {
    .fyw__bar { flex-direction: column; align-items: stretch; gap: 1rem; margin-bottom: 2.4rem; }
    .fyw__group { align-items: center; }
    .fyw__group-label { width: 6.4rem; }
    .fyw__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -1.5rem; padding-right: 1.5rem; }
    .fyw__chips::-webkit-scrollbar { display: none; }
    .fyw__chip { flex: none; }
  }

  /* Fallback colors (used only if the theme's color schemes aren't loading) */
  fyw-grid,
  .fyw {
    display: block;
  }
  .fyw-wrap {
    --fyw-fg: var(--color-foreground, 18, 18, 18);
    --fyw-bg: var(--color-background, 243, 243, 245);
    background-color: rgb(var(--fyw-bg));
  }
  .fyw__card {
    --fyw-fg: var(--color-foreground, 18, 18, 18);
    --fyw-card-bg: var(--color-background, 255, 255, 255);
  }

  /* ---------- Header ---------- */
  .fyw__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2.4rem 4rem;
    margin-bottom: 4rem;
  }
  .fyw__heading {
    margin: 0;
    line-height: 1.02;
    color: rgb(var(--fyw-fg));
  }
  .fyw__intro {
    margin: -2rem 0 3.6rem;
    max-width: 64rem;
    color: rgba(var(--fyw-fg), 0.75);
  }

  .fyw__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
  }
  .fyw__filter {
    padding: 1rem 2rem;
    border: 1px solid rgba(var(--fyw-fg), 0.15);
    border-radius: 10rem;
    background: transparent;
    font-family: var(--font-body-family);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    color: rgb(var(--fyw-fg));
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }
  .fyw__filter:hover { border-color: rgba(var(--fyw-fg), 0.45); }
  .fyw__filter[aria-pressed='true'] {
    background: rgb(var(--fyw-fg));
    border-color: rgb(var(--fyw-fg));
    color: rgb(var(--fyw-bg));
  }
  .fyw__filter:focus-visible {
    outline: 0.2rem solid rgba(var(--fyw-fg), 0.5);
    outline-offset: 0.3rem;
  }

  /* ---------- Grid ---------- */
  .fyw__grid {
    display: grid;
    grid-template-columns: repeat(var(--fyw-cols, 4), minmax(0, 1fr));
    gap: 1.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .fyw__item { display: flex; min-width: 0; }
  .fyw__item[hidden] { display: none; }

  /* ---------- Card ---------- */
  .fyw__card {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1.1rem;
    border-radius: var(--fyw-radius, 2.8rem);
    background: rgb(var(--fyw-card-bg));
    color: rgb(var(--fyw-fg));
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .fyw__card--border { box-shadow: 0 0 0 1px rgba(var(--fyw-fg), 0.06); }
  .fyw__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px rgba(var(--fyw-fg), 0.08), 0 1.2rem 3rem -1.6rem rgba(var(--fyw-fg), 0.25);
  }

  .fyw__media {
    position: relative;
    aspect-ratio: var(--fyw-ratio, 1);
    overflow: hidden;
    border-radius: max(calc(var(--fyw-radius, 2.8rem) - 1rem), 0px);
  }
  .fyw__media--tint { background: rgba(var(--fyw-fg), 0.04); }
  .fyw__img,
  .fyw__placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .fyw__img { object-fit: contain; transition: opacity 0.35s ease; }
  .fyw__placeholder { fill: rgba(var(--fyw-fg), 0.3); background: rgba(var(--fyw-fg), 0.04); }
  .fyw__img--hover { opacity: 0; }
  @media (hover: hover) {
    .fyw__card:hover .fyw__img--hover { opacity: 1; }
  }

  .fyw__badge {
    position: absolute;
    top: 1.2rem;
    left: 1.2rem;
    z-index: 1;
    padding: 0.6rem 1.2rem;
    border-radius: 10rem;
    background: rgb(var(--fyw-fg));
    color: rgb(var(--fyw-card-bg));
    font-family: var(--font-heading-family);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
  }
  .fyw__status {
    position: absolute;
    left: 1.2rem;
    bottom: 1.2rem;
    z-index: 1;
    padding: 0.5rem 1.2rem;
    border: 1px solid rgba(var(--fyw-fg), 0.15);
    border-radius: 10rem;
    background: rgb(var(--fyw-card-bg));
    font-size: 1.2rem;
    line-height: 1.2;
    color: rgba(var(--fyw-fg), 0.8);
  }

  .fyw__info {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 2.2rem 1.1rem 1.4rem;
  }
  .fyw__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.2rem;
  }
  .fyw__title {
    margin: 0;
    min-width: 0;
    font-family: var(--font-heading-family);
    font-style: var(--font-heading-style);
    font-weight: var(--font-heading-weight);
    font-size: 2.2rem;
    line-height: 1.15;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
  }
  .fyw__link {
    color: inherit;
    text-decoration: none;
  }
  /* Whole card is clickable */
  .fyw__link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: var(--fyw-radius, 2.8rem);
  }
  .fyw__link:focus-visible { outline: none; }
  .fyw__link:focus-visible::after {
    outline: 0.2rem solid rgba(var(--fyw-fg), 0.5);
    outline-offset: 0.3rem;
  }

  .fyw__prices {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
    flex: none;
    text-align: right;
  }
  .fyw__price {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
  }
  .fyw__price--second {
    font-size: 1.3rem;
    font-weight: 500;
    color: rgba(var(--fyw-fg), 0.6);
  }
  .fyw__compare {
    margin-right: 0.6rem;
    font-weight: 400;
    color: rgba(var(--fyw-fg), 0.5);
  }

  .fyw__desc {
    margin: 1.2rem 0 0;
    font-size: 1.5rem;
    line-height: 1.45;
    color: rgba(var(--fyw-fg), 0.75);
  }

  .fyw__swatches {
    display: flex;
    gap: 0.8rem;
    margin: auto 0 0;
    padding: 1.4rem 0 0;
    list-style: none;
  }
  .fyw__swatch {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: var(--swatch);
    box-shadow: inset 0 0 0 1px rgba(var(--fyw-fg), 0.12);
  }

  .fyw__empty {
    margin: 2rem 0 0;
    color: rgba(var(--fyw-fg), 0.7);
  }

  /* ---------- Tablet ---------- */
  @media screen and (min-width: 750px) and (max-width: 989px) {
    .fyw__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  /* ---------- Mobile ---------- */
  @media screen and (max-width: 749px) {
    .fyw__header {
      flex-direction: column;
      align-items: flex-start;
      gap: 2rem;
      margin-bottom: 2.8rem;
    }
    .fyw__intro { margin: -1.2rem 0 2.4rem; }
    .fyw__filter { padding: 0.9rem 1.8rem; font-size: 1.4rem; }
    .fyw__grid {
      grid-template-columns: repeat(var(--fyw-cols-mobile, 1), minmax(0, 1fr));
      gap: 1.2rem;
    }
    .fyw__card { padding: 1rem; border-radius: calc(var(--fyw-radius, 2.8rem) * 0.85); }
    .fyw__info { padding: 1.8rem 1rem 1.2rem; }
    .fyw__title { font-size: 2rem; }
  }
  /* Two columns on mobile: stack price under the name */
  @media screen and (max-width: 749px) {
    .fyw--m2 .fyw__row { flex-direction: column; gap: 0.6rem; }
    .fyw--m2 .fyw__prices { align-items: flex-start; text-align: left; }
    .fyw--m2 .fyw__title { font-size: 1.7rem; }
    .fyw--m2 .fyw__desc { font-size: 1.3rem; }
    .fyw--m2 .fyw__badge { font-size: 0.9rem; padding: 0.5rem 0.9rem; top: 0.8rem; left: 0.8rem; }
  }
/* END_SECTION:watch-collection-grid */

/* START_SECTION:watch-recommendations (INDEX:78) */
/* Fallback colors (used only if the theme's color schemes aren't loading) */
  fyr-grid,
  .fyr {
    display: block;
  }
  .fyr-wrap {
    --fyr-fg: var(--color-foreground, 18, 18, 18);
    --fyr-bg: var(--color-background, 243, 243, 245);
    background-color: rgb(var(--fyr-bg));
  }
  .fyr__card {
    --fyr-fg: var(--color-foreground, 18, 18, 18);
    --fyr-card-bg: var(--color-background, 255, 255, 255);
  }

  /* ---------- Header ---------- */
  .fyr__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2.4rem 4rem;
    margin-bottom: 4rem;
  }
  .fyr__heading {
    margin: 0;
    line-height: 1.02;
    color: rgb(var(--fyr-fg));
  }
  .fyr__intro {
    margin: -2rem 0 3.6rem;
    max-width: 64rem;
    color: rgba(var(--fyr-fg), 0.75);
  }

  .fyr__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
  }
  .fyr__filter {
    padding: 1rem 2rem;
    border: 1px solid rgba(var(--fyr-fg), 0.15);
    border-radius: 10rem;
    background: transparent;
    font-family: var(--font-body-family);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    color: rgb(var(--fyr-fg));
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }
  .fyr__filter:hover { border-color: rgba(var(--fyr-fg), 0.45); }
  .fyr__filter[aria-pressed='true'] {
    background: rgb(var(--fyr-fg));
    border-color: rgb(var(--fyr-fg));
    color: rgb(var(--fyr-bg));
  }
  .fyr__filter:focus-visible {
    outline: 0.2rem solid rgba(var(--fyr-fg), 0.5);
    outline-offset: 0.3rem;
  }

  /* ---------- Grid ---------- */
  .fyr__grid {
    display: grid;
    grid-template-columns: repeat(var(--fyr-cols, 4), minmax(0, 1fr));
    gap: 1.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .fyr__item { display: flex; min-width: 0; }
  .fyr__item[hidden] { display: none; }

  /* ---------- Card ---------- */
  .fyr__card {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1.1rem;
    border-radius: var(--fyr-radius, 2.8rem);
    background: rgb(var(--fyr-card-bg));
    color: rgb(var(--fyr-fg));
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .fyr__card--border { box-shadow: 0 0 0 1px rgba(var(--fyr-fg), 0.06); }
  .fyr__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px rgba(var(--fyr-fg), 0.08), 0 1.2rem 3rem -1.6rem rgba(var(--fyr-fg), 0.25);
  }

  .fyr__media {
    position: relative;
    aspect-ratio: var(--fyr-ratio, 1);
    overflow: hidden;
    border-radius: max(calc(var(--fyr-radius, 2.8rem) - 1rem), 0px);
  }
  .fyr__media--tint { background: rgba(var(--fyr-fg), 0.04); }
  .fyr__img,
  .fyr__placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .fyr__img { object-fit: contain; transition: opacity 0.35s ease; }
  .fyr__placeholder { fill: rgba(var(--fyr-fg), 0.3); background: rgba(var(--fyr-fg), 0.04); }
  .fyr__img--hover { opacity: 0; }
  @media (hover: hover) {
    .fyr__card:hover .fyr__img--hover { opacity: 1; }
  }

  .fyr__badge {
    position: absolute;
    top: 1.2rem;
    left: 1.2rem;
    z-index: 1;
    padding: 0.6rem 1.2rem;
    border-radius: 10rem;
    background: rgb(var(--fyr-fg));
    color: rgb(var(--fyr-card-bg));
    font-family: var(--font-heading-family);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
  }
  .fyr__status {
    position: absolute;
    left: 1.2rem;
    bottom: 1.2rem;
    z-index: 1;
    padding: 0.5rem 1.2rem;
    border: 1px solid rgba(var(--fyr-fg), 0.15);
    border-radius: 10rem;
    background: rgb(var(--fyr-card-bg));
    font-size: 1.2rem;
    line-height: 1.2;
    color: rgba(var(--fyr-fg), 0.8);
  }

  .fyr__info {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 2.2rem 1.1rem 1.4rem;
  }
  .fyr__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.2rem;
  }
  .fyr__title {
    margin: 0;
    min-width: 0;
    font-family: var(--font-heading-family);
    font-style: var(--font-heading-style);
    font-weight: var(--font-heading-weight);
    font-size: 2.2rem;
    line-height: 1.15;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
  }
  .fyr__link {
    color: inherit;
    text-decoration: none;
  }
  /* Whole card is clickable */
  .fyr__link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: var(--fyr-radius, 2.8rem);
  }
  .fyr__link:focus-visible { outline: none; }
  .fyr__link:focus-visible::after {
    outline: 0.2rem solid rgba(var(--fyr-fg), 0.5);
    outline-offset: 0.3rem;
  }

  .fyr__prices {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
    flex: none;
    text-align: right;
  }
  .fyr__price {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
  }
  .fyr__price--second {
    font-size: 1.3rem;
    font-weight: 500;
    color: rgba(var(--fyr-fg), 0.6);
  }
  .fyr__compare {
    margin-right: 0.6rem;
    font-weight: 400;
    color: rgba(var(--fyr-fg), 0.5);
  }

  .fyr__desc {
    margin: 1.2rem 0 0;
    font-size: 1.5rem;
    line-height: 1.45;
    color: rgba(var(--fyr-fg), 0.75);
  }

  .fyr__swatches {
    display: flex;
    gap: 0.8rem;
    margin: auto 0 0;
    padding: 1.4rem 0 0;
    list-style: none;
  }
  .fyr__swatch {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: var(--swatch);
    box-shadow: inset 0 0 0 1px rgba(var(--fyr-fg), 0.12);
  }

  .fyr-wrap[hidden] { display: none; }

  .fyr__view-all {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem 2rem;
    border: 1px solid rgba(var(--fyr-fg), 0.15);
    border-radius: 10rem;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    color: rgb(var(--fyr-fg));
    text-decoration: none;
    transition: border-color 0.2s ease;
  }
  .fyr__view-all:hover { border-color: rgba(var(--fyr-fg), 0.45); }

  .fyr__empty {
    margin: 2rem 0 0;
    color: rgba(var(--fyr-fg), 0.7);
  }

  /* ---------- Tablet ---------- */
  @media screen and (min-width: 750px) and (max-width: 989px) {
    .fyr__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  /* ---------- Mobile ---------- */
  @media screen and (max-width: 749px) {
    .fyr__header {
      flex-direction: column;
      align-items: flex-start;
      gap: 2rem;
      margin-bottom: 2.8rem;
    }
    .fyr__intro { margin: -1.2rem 0 2.4rem; }
    .fyr__filter { padding: 0.9rem 1.8rem; font-size: 1.4rem; }
    .fyr__grid {
      grid-template-columns: repeat(var(--fyr-cols-mobile, 1), minmax(0, 1fr));
      gap: 1.2rem;
    }
    .fyr__card { padding: 1rem; border-radius: calc(var(--fyr-radius, 2.8rem) * 0.85); }
    .fyr__view-all { padding: 0.9rem 1.8rem; font-size: 1.4rem; }

    /* Swipe layout: one card plus a peek of the next */
    .fyr--m-slider .fyr__grid {
      display: flex;
      margin: 0 -1.5rem;
      padding: 0 1.5rem 0.6rem;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: 1.5rem;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }
    .fyr--m-slider .fyr__grid::-webkit-scrollbar { display: none; }
    .fyr--m-slider .fyr__item {
      flex: 0 0 80%;
      scroll-snap-align: start;
    }
    .fyr--m-slider .fyr__card:hover { transform: none; }
    .fyr__info { padding: 1.8rem 1rem 1.2rem; }
    .fyr__title { font-size: 2rem; }
  }
  /* Two columns on mobile: stack price under the name */
  @media screen and (max-width: 749px) {
    .fyr--m-slider.fyr--m2 .fyr__item { flex-basis: 62%; }
    .fyr--m2 .fyr__row { flex-direction: column; gap: 0.6rem; }
    .fyr--m2 .fyr__prices { align-items: flex-start; text-align: left; }
    .fyr--m2 .fyr__title { font-size: 1.7rem; }
    .fyr--m2 .fyr__desc { font-size: 1.3rem; }
    .fyr--m2 .fyr__badge { font-size: 0.9rem; padding: 0.5rem 0.9rem; top: 0.8rem; left: 0.8rem; }
  }
/* END_SECTION:watch-recommendations */

/* START_SECTION:whats-inside-tabs (INDEX:79) */
wki-tabs,
  .wki { display: block; }

  /* Fallback colors if the theme's color schemes aren't loading */
  .wki-wrap {
    --wki-fg: var(--color-foreground, 18, 18, 18);
    --wki-bg: var(--color-background, 255, 255, 255);
    background-color: rgb(var(--wki-bg));
  }
  .wki { --wki-accent-fallback: #f2c200; }
  .wki__panel--scheme {
    --wki-fg: var(--color-foreground, 18, 18, 18);
  }

  /* ---------- Header ---------- */
  .wki__header {
    max-width: 72rem;
    margin: 0 auto 4.4rem;
    text-align: center;
  }
  .wki__heading {
    margin: 0;
    line-height: 1.05;
    color: rgb(var(--wki-fg));
  }
  .wki__subtext {
    max-width: 44rem;
    margin: 1.8rem auto 0;
    font-size: 1.5rem;
    line-height: 1.55;
    color: rgba(var(--wki-fg), 0.7);
  }

  /* ---------- Layout ---------- */
  .wki__layout {
    display: grid;
    grid-template-columns: minmax(20rem, 26rem) minmax(0, 1fr);
    align-items: start;
    gap: 1.6rem;
    max-width: var(--wki-max, 1100px);
    margin: 0 auto;
  }

  /* ---------- Tabs ---------- */
  .wki__tabs {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
  }
  .wki__tab {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    width: 100%;
    min-height: 7.2rem;
    padding: 1.4rem 1.8rem;
    border: 1px solid rgba(var(--wki-fg), 0.1);
    border-radius: calc(var(--wki-radius, 2.4rem) * 0.55);
    background: rgb(var(--wki-bg));
    color: rgb(var(--wki-fg));
    text-align: left;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  }
  .wki__tab:hover { border-color: rgba(var(--wki-fg), 0.35); }
  .wki__tab[aria-selected='true'] {
    background: rgb(var(--wki-fg));
    border-color: rgb(var(--wki-fg));
    color: rgb(var(--wki-bg));
  }
  .wki__tab:focus-visible,
  .wki__feature:focus-visible {
    outline: 0.2rem solid rgba(var(--wki-fg), 0.5);
    outline-offset: 0.2rem;
  }
  .wki__tab-label {
    flex: 1;
    font-family: var(--font-heading-family);
    font-style: var(--font-heading-style);
    font-weight: var(--font-heading-weight);
    font-size: 1.5rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
  }
  .wki__num {
    flex: none;
    font-family: var(--font-body-family); font-variant-numeric: tabular-nums;
    font-size: 1.1rem;
    letter-spacing: 0.04em;
    opacity: 0.55;
  }
  .wki__dot {
    flex: none;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background: var(--wki-accent, var(--wki-accent-fallback));
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.25s ease, transform 0.25s ease;
  }
  .wki__tab[aria-selected='true'] .wki__dot { opacity: 1; transform: none; }

  /* ---------- Panel ---------- */
  .wki__panel {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
    gap: 2.8rem;
    padding: 1.6rem;
    border-radius: var(--wki-radius, 2.4rem);
    background: rgba(var(--wki-fg), 0.05);
  }
  .wki__panel--scheme { background: rgb(var(--color-background, 243, 243, 245)); }
  .wki__panel[hidden] { display: none; }
  @media (prefers-reduced-motion: no-preference) {
    .wki__panel:not([hidden]) { animation: wki-fade 0.4s ease both; }
  }
  @keyframes wki-fade {
    from { opacity: 0; transform: translateY(0.6rem); }
    to { opacity: 1; transform: none; }
  }

  .wki__media {
    position: relative;
    aspect-ratio: var(--wki-ratio, 3 / 4);
    overflow: hidden;
    border-radius: max(calc(var(--wki-radius, 2.4rem) - 0.8rem), 0px);
    background: rgba(var(--wki-fg), 0.05);
  }
  .wki__media-item {
    position: absolute;
    inset: 0;
    display: block;
    opacity: 0;
    transition: opacity 0.45s ease;
  }
  .wki__media-item.is-active { opacity: 1; }
  .wki__img,
  .wki__placeholder {
    display: block;
    width: 100%;
    height: 100%;
  }
  .wki__img { object-fit: cover; }
  .wki__placeholder { fill: rgba(var(--wki-fg), 0.3); }

  .wki__overlay {
    position: absolute;
    left: 1.2rem;
    right: 1.2rem;
    bottom: 1.2rem;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    pointer-events: none;
  }
  .wki__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    min-width: 0;
    padding: 0.7rem 1.4rem;
    border-radius: 10rem;
    background: rgb(var(--wki-bg));
    color: rgb(var(--wki-fg));
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.2;
  }
  .wki__pill-dot {
    flex: none;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: var(--wki-accent, var(--wki-accent-fallback));
  }
  .wki__pill-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .wki__counter {
    flex: none;
    margin-left: auto;
    padding: 0.7rem 1.2rem;
    border-radius: 10rem;
    background: rgb(var(--wki-fg));
    color: rgb(var(--wki-bg));
    font-family: var(--font-body-family); font-variant-numeric: tabular-nums;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: pre;
  }

  /* ---------- Content ---------- */
  .wki__content {
    min-width: 0;
    padding: 2rem 0.8rem 1rem 0;
  }
  .wki__title {
    margin: 0 0 2.4rem;
    line-height: 1.08;
    color: rgb(var(--wki-fg));
  }
  .wki__cat-text {
    margin: -1.2rem 0 2.4rem;
    color: rgba(var(--wki-fg), 0.7);
  }
  .wki__features {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .wki__feature {
    display: flex;
    align-items: flex-start;
    gap: 1.6rem;
    width: 100%;
    padding: 1.4rem 1.8rem;
    border: 0;
    border-radius: calc(var(--wki-radius, 2.4rem) * 0.55);
    background: transparent;
    color: rgb(var(--wki-fg));
    text-align: left;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
  }
  .wki__feature .wki__num { padding-top: 0.3rem; }
  .wki__feature.is-active {
    background: rgb(var(--wki-bg));
    box-shadow: 0 0.6rem 2rem -0.8rem rgba(var(--wki-fg), 0.18);
  }
  .wki__feature-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
  }
  .wki__feature-title {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.35;
  }
  .wki__feature-text {
    font-size: 1.35rem;
    line-height: 1.5;
    color: rgba(var(--wki-fg), 0.6);
  }

  /* ---------- Tablet ---------- */
  @media screen and (min-width: 750px) and (max-width: 989px) {
    .wki__layout { grid-template-columns: minmax(0, 1fr); }
    .wki__tabs {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  /* ---------- Mobile ---------- */
  @media screen and (max-width: 749px) {
    .wki__header { margin-bottom: 2.8rem; }
    .wki__layout { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }

    /* Tabs become a swipeable row */
    .wki__tabs {
      flex-direction: row;
      margin: 0 -1.5rem;
      padding: 0 1.5rem 0.4rem;
      overflow-x: auto;
      scroll-snap-type: x proximity;
      scroll-padding-inline: 1.5rem;
      scrollbar-width: none;
    }
    .wki__tabs::-webkit-scrollbar { display: none; }
    .wki__tab {
      flex: 0 0 auto;
      width: auto;
      max-width: 24rem;
      min-height: 0;
      padding: 1.2rem 1.6rem;
      scroll-snap-align: start;
    }
    .wki__tab-label { font-size: 1.4rem; }

    .wki__panel {
      grid-template-columns: minmax(0, 1fr);
      gap: 0.8rem;
      padding: 1rem;
    }
    .wki__media { aspect-ratio: var(--wki-ratio-mobile, 4 / 3); }
    .wki__content { padding: 1.6rem 0.4rem 0.4rem; }
    .wki__title { margin-bottom: 1.6rem; }
    .wki__feature { padding: 1.2rem 1.4rem; gap: 1.2rem; }
  }
/* END_SECTION:whats-inside-tabs */

/* START_SECTION:why-we-built (INDEX:81) */
why-we-built,
  .wwb { display: block; }
  .wwb-wrap {
    --wwb-fg: var(--color-foreground, 18, 18, 18);
    --wwb-bg: var(--color-background, 243, 243, 245);
    background-color: rgb(var(--wwb-bg));
    color: rgb(var(--wwb-fg));
  }
  .wwb { --wwb-accent-fallback: #f2c200; }

  .wwb__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: var(--wwb-max, 760px);
    margin: 0 auto;
    text-align: center;
  }

  .wwb__eyebrow {
    margin: 0 0 2rem;
    line-height: 1.1;
    color: rgb(var(--wwb-fg));
  }
  .wwb__headline {
    margin: 0;
    line-height: 1;
    letter-spacing: -0.03em;
    color: rgb(var(--wwb-fg));
  }

  /* Struck-through part */
  .wwb__strike {
    position: relative;
    display: inline-block;
    text-decoration: none;
    white-space: nowrap;
  }
  .wwb__strike-text { color: rgba(var(--wwb-fg), 0.4); }
  .wwb__strike-line {
    position: absolute;
    left: -0.04em;
    right: -0.04em;
    top: 52%;
    display: block;
    height: 0.09em;
    min-height: 3px;
    border-radius: 1em;
    background: var(--wwb-accent, var(--wwb-accent-fallback));
    transform-origin: left center;
  }
  @media (prefers-reduced-motion: no-preference) {
    .wwb--animate.is-ready .wwb__strike-line { transform: scaleX(0); }
    .wwb--animate.is-ready.is-visible .wwb__strike-line {
      transform: scaleX(1);
      transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1) 0.25s;
    }
  }

  .wwb__label {
    margin: 4rem 0 1.2rem;
    font-size: 1.2rem;
    color: rgba(var(--wwb-fg), 0.55);
  }
  .wwb__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem;
    max-width: 90rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .wwb__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.7rem 1.6rem 0.7rem 0.7rem;
    border-radius: 10rem;
    background: rgb(var(--color-background, 255, 255, 255));
    box-shadow: 0 0 0 1px rgba(var(--wwb-fg), 0.04);
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.2;
    color: rgb(var(--color-foreground, 18, 18, 18));
  }
  .wwb__check {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: var(--wwb-accent, var(--wwb-accent-fallback));
    color: #121212;
  }

  /* ---------- Image + quote ---------- */
  .wwb__visual {
    position: relative;
    margin-top: 3.6rem;
    padding-bottom: calc(var(--wwb-overlap, 48px) + 2rem);
  }
  .wwb__visual--no-image { padding-bottom: 0; }
  .wwb__media {
    position: relative;
    aspect-ratio: var(--wwb-ratio, 2.3);
    overflow: hidden;
    border-radius: var(--wwb-radius, 2rem);
    background: rgba(var(--wwb-fg), 0.05);
  }
  .wwb__img,
  .wwb__placeholder {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
  }
  .wwb__img { object-fit: cover; }
  .wwb__img--mobile { display: none; }
  .wwb__placeholder { fill: rgba(var(--wwb-fg), 0.25); }

  .wwb__quote {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: min(56rem, calc(100% - 4rem));
    margin: 0;
    box-sizing: border-box;
    padding: 3.2rem 4rem;
    border-radius: var(--wwb-radius, 2rem);
    background: rgb(var(--color-background, 255, 255, 255));
    color: rgb(var(--color-foreground, 18, 18, 18));
    box-shadow: 0 1.6rem 4rem -2rem rgba(var(--wwb-fg), 0.3);
    text-align: center;
    transform: translateX(-50%);
  }
  .wwb__visual--no-image .wwb__quote { position: relative; left: auto; transform: none; margin: 0 auto; }
  .wwb__quote p {
    margin: 0;
    font-size: clamp(2rem, 2.4vw, 2.6rem);
    line-height: 1.3;
  }
  .wwb__quote--serif p {
    font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-weight: 400;
  }
  .wwb__quote--heading p {
    font-family: var(--font-heading-family);
    font-style: var(--font-heading-style);
    font-weight: var(--font-heading-weight);
    letter-spacing: -0.01em;
  }
  .wwb__quote--body p {
    font-family: var(--font-body-family);
    font-style: italic;
  }
  .wwb__cite {
    display: block;
    margin-top: 1.4rem;
    font-size: 1.3rem;
    font-style: normal;
    color: rgba(var(--color-foreground, 18, 18, 18), 0.6);
  }

  /* ---------- Mobile ---------- */
  @media screen and (max-width: 749px) {
    .wwb__eyebrow { margin-bottom: 1.4rem; }
    .wwb__strike { white-space: normal; }
    .wwb__label { margin-top: 2.8rem; }
    .wwb__chips { gap: 0.6rem; }
    .wwb__chip { font-size: 1.3rem; padding: 0.6rem 1.3rem 0.6rem 0.6rem; }
    .wwb__check { width: 2rem; height: 2rem; }

    .wwb__visual { margin-top: 2.8rem; padding-bottom: 0; }
    .wwb__media { aspect-ratio: var(--wwb-ratio-mobile, 4 / 3); }
    .wwb__img--desktop { display: none; }
    .wwb__img--mobile { display: block; }
    .wwb__quote {
      position: relative;
      left: auto;
      width: calc(100% - 2.4rem);
      margin: calc(var(--wwb-overlap, 48px) * -0.8) auto 0;
      padding: 2.4rem 2rem;
      transform: none;
    }
    .wwb__quote p { font-size: 1.9rem; }
  }
/* END_SECTION:why-we-built */

/* START_SECTION:workout-tracker (INDEX:82) */
/* ---------- Layout ---------- */
  .mfm__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 4rem 8rem;
  }
  .mfm--ring-left .mfm__side { order: -1; }
  .mfm__main,
  .mfm__side { min-width: 0; }

  .mfm__heading {
    margin: 0;
    line-height: 1.02;
    color: rgb(var(--color-foreground));
  }
  .mfm__subtext {
    margin: 1.6rem 0 0;
    color: rgba(var(--color-foreground), 0.75);
  }

  /* ---------- Tabs ---------- */
  .mfm__tracker { display: block; }
  .mfm__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 2.8rem;
  }
  .mfm__tab {
    padding: 0.9rem 1.9rem;
    border: 1px solid rgba(var(--color-foreground), 0.15);
    border-radius: 10rem;
    background: transparent;
    font-family: var(--font-body-family);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    color: rgb(var(--color-foreground));
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }
  .mfm__tab:hover { border-color: rgba(var(--color-foreground), 0.45); }
  .mfm__tab[aria-selected='true'] {
    background: rgb(var(--color-foreground));
    border-color: rgb(var(--color-foreground));
    color: rgb(var(--color-background));
  }
  .mfm__tab:focus-visible {
    outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
    outline-offset: 0.3rem;
  }

  /* ---------- Workout card ---------- */
  .mfm__card {
    margin-top: 3rem;
    padding: 3.4rem 3.4rem 3.6rem;
    border-radius: var(--mfm-radius, 2.8rem);
  }
  .mfm__card[hidden] { display: none; }

  .mfm__card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
  }
  .mfm__card-name {
    font-size: 1.6rem;
    font-weight: 600;
    color: rgb(var(--color-foreground));
  }
  .mfm__status {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1.4rem;
    color: rgba(var(--color-foreground), 0.75);
  }
  .mfm__status-dot {
    display: block;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background: rgba(var(--color-foreground), 0.75);
  }
  @media (prefers-reduced-motion: no-preference) {
    .mfm__status-dot { animation: mfm-pulse 1.6s ease-in-out infinite; }
  }
  @keyframes mfm-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
  }

  .mfm__time {
    display: block;
    margin: 2.4rem 0 2.6rem;
    font-family: var(--font-heading-family);
    font-style: var(--font-heading-style);
    font-weight: var(--font-heading-weight);
    font-size: clamp(5.6rem, 8vw, 8.8rem);
    line-height: 0.95;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: rgb(var(--color-foreground));
  }

  .mfm__bar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 1.8rem;
    padding-bottom: 3rem;
    margin-bottom: 3rem;
    border-bottom: 1px solid rgba(var(--color-foreground), 0.12);
  }
  .mfm__bar-tick {
    display: block;
    width: 2px;
    height: 45%;
    border-radius: 1px;
    background: rgba(var(--color-foreground), 0.18);
    transition: background-color 0.4s ease;
  }
  .mfm__bar-tick:nth-child(odd) { height: 70%; }
  .mfm__bar-tick:nth-child(5n + 1) { height: 100%; }
  .mfm__bar-tick.is-on { background: rgb(var(--color-foreground)); }

  .mfm__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.6rem;
    margin: 0;
  }
  .mfm__stat {
    display: flex;
    flex-direction: column-reverse; /* value above label, dt/dd order kept for a11y */
    gap: 0.6rem;
    min-width: 0;
  }
  .mfm__stat-value {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    font-family: var(--font-heading-family);
    font-style: var(--font-heading-style);
    font-weight: var(--font-heading-weight);
    font-size: 2.8rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: rgb(var(--color-foreground));
    white-space: nowrap;
  }
  .mfm__stat-unit {
    font-family: var(--font-body-family);
    font-weight: var(--font-body-weight);
    font-size: 1.4rem;
    color: rgba(var(--color-foreground), 0.75);
  }
  .mfm__stat-label {
    font-size: 1.4rem;
    color: rgba(var(--color-foreground), 0.75);
  }

  /* ---------- Ring ---------- */
  .mfm__side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
  }
  .mfm__ring {
    position: relative;
    display: block;
    width: min(100%, var(--mfm-ring-max, 440px));
    aspect-ratio: 1 / 1;
    container-type: inline-size;
  }
  .mfm__ring-ticks {
    position: absolute;
    inset: 0;
    display: block;
  }
  .mfm__ring-tick {
    position: absolute;
    left: 50%;
    top: 0;
    display: block;
    width: 0;
    height: 50%;
    transform-origin: 50% 100%;
    transform: rotate(var(--r));
  }
  /* Tick weights (set by the "Ring tick weight" setting) */
  .mfm { --mfm-minor-w: 1.5px; --mfm-major-w: 2.5px; }
  .mfm--ticks-hairline { --mfm-minor-w: 1px; --mfm-major-w: 1.5px; }
  .mfm--ticks-regular { --mfm-minor-w: 2px; --mfm-major-w: 4px; }
  .mfm--ticks-bold { --mfm-minor-w: 1.6cqi; --mfm-major-w: 2.5cqi; }

  .mfm__ring-tick::before {
    content: '';
    position: absolute;
    top: 0;
    left: calc(var(--mfm-minor-w) / -2);
    width: var(--mfm-minor-w);
    height: 6.5cqi;
    border-radius: 1px;
    background: rgba(var(--color-foreground), 0.12);
    transition: background-color 0.3s ease;
  }
  .mfm__ring-tick--major::before {
    left: calc(var(--mfm-major-w) / -2);
    width: var(--mfm-major-w);
    height: 9.5cqi;
  }
  .mfm__ring-tick.is-on::before { background: rgb(var(--color-foreground)); }

  /* Ring fill animation: JS adds .is-ready then .is-visible */
  @media (prefers-reduced-motion: no-preference) {
    .mfm__ring--animate.is-ready:not(.is-visible) .mfm__ring-tick.is-on::before {
      background: rgba(var(--color-foreground), 0.12);
    }
    .mfm__ring--animate.is-visible .mfm__ring-tick::before {
      transition-delay: calc(var(--i) * 18ms);
    }
  }

  .mfm__ring-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.2cqi;
    text-align: center;
  }
  .mfm__ring-value {
    font-family: var(--font-heading-family);
    font-style: var(--font-heading-style);
    font-weight: var(--font-heading-weight);
    font-size: 4.8rem;
    font-size: 17cqi;
    line-height: 0.95;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: rgb(var(--color-foreground));
  }
  .mfm__ring-caption {
    font-size: 1.4rem;
    font-size: max(1.3rem, 3.4cqi);
    color: rgba(var(--color-foreground), 0.75);
  }

  /* ---------- Tiles ---------- */
  .mfm__tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 1.2rem;
    width: min(100%, var(--mfm-ring-max, 440px));
  }
  .mfm__tile {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 2.2rem 2.2rem 2rem;
    border-radius: calc(var(--mfm-radius, 2.8rem) * 0.8);
    background: rgba(var(--color-foreground), 0.05);
  }
  .mfm__tile-value {
    font-family: var(--font-heading-family);
    font-style: var(--font-heading-style);
    font-weight: var(--font-heading-weight);
    font-size: 2.8rem;
    line-height: 1;
    color: rgb(var(--color-foreground));
  }
  .mfm__tile-label {
    font-size: 1.4rem;
    color: rgba(var(--color-foreground), 0.75);
  }

  /* ---------- Tablet ---------- */
  @media screen and (min-width: 750px) and (max-width: 989px) {
    .mfm__grid { gap: 4rem; }
    .mfm__card { padding: 2.8rem; }
    .mfm__stat-value { font-size: 2.2rem; }
  }

  /* ---------- Mobile ---------- */
  @media screen and (max-width: 749px) {
    .mfm__grid {
      grid-template-columns: minmax(0, 1fr);
      gap: 4.8rem;
    }
    .mfm--ring-left .mfm__side { order: 0; }

    .mfm__tabs {
      flex-wrap: nowrap;
      margin: 2.4rem -1.5rem 0;
      padding: 0 1.5rem 0.4rem;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .mfm__tabs::-webkit-scrollbar { display: none; }
    .mfm__tab { flex: none; padding: 0.8rem 1.6rem; font-size: 1.4rem; }

    .mfm__card { margin-top: 2rem; padding: 2.4rem 2.2rem 2.6rem; }
    .mfm__time { margin: 2rem 0; }
    .mfm__bar { padding-bottom: 2.2rem; margin-bottom: 2.2rem; }
    .mfm__stat-value { font-size: 2.2rem; }
    .mfm__stat-unit,
    .mfm__stat-label { font-size: 1.2rem; }

    .mfm__ring { width: min(100%, 34rem); }
    .mfm__tiles { width: 100%; }
    .mfm__tile { padding: 1.8rem; }
    .mfm__tile-value { font-size: 2.4rem; }
  }
/* END_SECTION:workout-tracker */