/* ==========================================================================
   Plait redesign — every other public page (flag on only; html.px-public).

   public/redesign.js loads this after redesign.css and redesign-landing.css on the pages the
   build tags with data-px-page="public" (scripts/build-localization.js): home, guides and the
   article template, comparisons, calculators, about, press, legal, 404, sign-in and the Apple
   Watch and Garmin set-up flows, in English, Spanish, German and French.

   Presentation only: copy, links, CTAs, forms, tracking scripts, structured data and the
   creator credit are untouched. The pages keep their own stylesheets (plait.css, blog-guides.css,
   nutrition-calculator.css, sign-in.css, landing-product.css and inline \3c style>); this layer
   re-points their tokens at the paper/ink/basil system and restyles the few hard-coded colours.
   The page sheets are parsed after this one, so contested declarations carry !important.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
/* The pages' tokens (plait.css, the home page's inline sheet, blog-guides.css), resolved on
   body where the system's --px-* tokens live, so dark mode follows automatically. */
html.px-public body {
  --bg: var(--px-paper);
  --bg-card: var(--px-card);
  --bg-card-2: var(--px-paper-2);
  --border: var(--px-line);
  --border-strong: var(--px-line-strong);
  --accent: var(--px-accent);
  --accent-2: var(--px-accent-hover);
  --accent-soft: var(--px-accent-tint);
  --green: var(--px-accent);
  --green-soft: var(--px-accent-tint);
  --purple: var(--px-accent);
  --warn: #8a5a00;
  --danger: var(--px-danger);
  --text: var(--px-ink);
  --text-2: var(--px-ink2);
  --text-3: var(--px-muted-ink);
  --font: var(--px-sans);
  --radius: 14px;
  --radius-lg: var(--px-r);
  --radius-xl: 28px;
  --shadow-accent: none;
  /* home page */
  --bg-dark: var(--px-paper);
  --bg-card-hover: var(--px-paper-2);
  --accent-blue: var(--px-accent);
  --accent-green: var(--px-accent);
  --accent-purple: var(--px-accent);
  --text-primary: var(--px-ink);
  --text-secondary: var(--px-ink2);
  --text-muted: var(--px-muted-ink);
  /* blog-guides.css */
  --pl-accent: var(--px-accent);
  --pl-muted: var(--px-ink2);
  color-scheme: light;
  font-feature-settings: 'cv11', 'ss01';
  text-rendering: optimizeLegibility;
}
@media (prefers-color-scheme: dark) {
  html.px-public:not([data-px-theme='light']) body {
    --warn: #e7c35a;
    color-scheme: dark;
  }
}
html.px-public[data-px-theme='dark'] body {
  --warn: #e7c35a;
  color-scheme: dark;
}
html.px-public :focus-visible {
  outline: 2px solid var(--px-accent);
  outline-offset: 3px;
}
html.px-public ::selection {
  background: var(--px-accent-tint);
  color: var(--px-ink);
}
/* The white logo mark reads as ink on paper (and stays white in dark mode). */
html.px-public img[src*='whoopy_logo'] {
  filter: invert(1) brightness(0.15);
}
@media (prefers-color-scheme: dark) {
  html.px-public:not([data-px-theme='light']) img[src*='whoopy_logo'] {
    filter: none;
  }
}
html.px-public[data-px-theme='dark'] img[src*='whoopy_logo'] {
  filter: none;
}

/* ------------------------------------------------------------------ type */
html.px-public :is(h1, h2, h3, h4) {
  color: var(--px-ink);
  font-family: var(--px-sans);
}
html.px-public :is(h1, h2) {
  font-weight: 650 !important;
  letter-spacing: -0.035em !important;
}
html.px-public :is(h1, h2) em,
html.px-public .px-serif {
  font-family: var(--px-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--px-accent-ink);
}
/* Small caps labels: mono, basil, tracked — the system's eyebrow. */
html.px-public :is(.pl-eyebrow, .guide-kicker, .calculator-kicker, .pl-card__kicker, .nf__code) {
  color: var(--px-accent-ink) !important;
  font: 600 12px/1.3 var(--px-mono) !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ nav */
html.px-public .pl-nav__links {
  gap: 22px;
}
html.px-public .pl-nav__links a[aria-current='page'] {
  color: var(--px-ink);
}
@media (hover: hover) and (pointer: fine) {
  html.px-public .pl-nav__links a:hover {
    color: var(--px-ink);
  }
}
html.px-public .pl-nav__links .pl-btn,
html.px-public .pl-nav .pl-btn {
  color: var(--px-paper) !important;
}
html.px-public .pl-nav__links .pl-btn--sm {
  min-height: 40px;
  padding: 10px 18px;
  box-shadow: none !important;
}
@media (max-width: 640px) {
  html.px-public .pl-nav__links {
    gap: 14px;
  }
}

/* ------------------------------------------------------------------ buttons and links */
html.px-public .pl-btn--ghost {
  border-color: var(--px-line-strong) !important;
  background: transparent !important;
  color: var(--px-ink) !important;
}
@media (hover: hover) and (pointer: fine) {
  html.px-public .pl-btn--ghost:hover {
    border-color: var(--px-ink) !important;
    transform: translateY(-2px);
  }
}
html.px-public .pl-btn--green {
  background: var(--px-accent) !important;
  color: var(--px-on-accent) !important;
}
html.px-public .pl-btn--lg {
  min-height: 56px;
  padding: 16px 30px;
  font-size: 17px;
}
html.px-public .pl-btn:focus-visible {
  outline: none;
  box-shadow: var(--px-focus) !important;
}
html.px-public main a:not([class]),
html.px-public .pl-prose a,
html.px-public .pl-legal a,
html.px-public .pl-link-btn {
  color: var(--px-accent-ink);
  text-decoration-color: color-mix(in srgb, var(--px-accent) 40%, transparent);
  text-underline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  html.px-public .pl-prose a:hover,
  html.px-public main a:not([class]):hover {
    color: var(--px-accent-hover);
    text-decoration-color: currentColor;
  }
}

/* ------------------------------------------------------------------ cards and pills */
html.px-public :is(.pl-card, .blog-post-card, .guide-card, .calculator-panel) {
  border: 0 !important;
  border-radius: var(--px-r) !important;
  background: var(--px-card) !important;
  box-shadow: var(--px-shadow);
  transition:
    transform 0.45s var(--px-spring),
    box-shadow 0.45s;
}
@media (hover: hover) and (pointer: fine) {
  html.px-public :is(.pl-card--hover, .blog-post-card, .guide-card):hover {
    transform: translateY(-4px);
    box-shadow: var(--px-shadow-lift);
  }
}
html.px-public :is(.blog-post-card, .guide-card):focus-within {
  box-shadow:
    var(--px-shadow-lift),
    0 0 0 2px var(--px-accent);
}
html.px-public .pl-card--glow::before {
  display: none;
}
html.px-public .pl-pill {
  min-height: 36px;
  border-color: var(--px-line-strong) !important;
  background: var(--px-card) !important;
  color: var(--px-ink2) !important;
}
@media (hover: hover) and (pointer: fine) {
  html.px-public .pl-pill:hover {
    border-color: var(--px-ink) !important;
    color: var(--px-ink) !important;
  }
}
html.px-public :is(.pl-pill--accent, .pl-pill--green) {
  border-color: transparent !important;
  background: var(--px-accent-tint) !important;
  color: var(--px-accent-ink) !important;
}
html.px-public .pl-badge {
  border-color: transparent !important;
  background: var(--px-accent-tint) !important;
  color: var(--px-accent-ink) !important;
}
html.px-public .pl-badge--neutral {
  background: var(--px-paper-2) !important;
  color: var(--px-ink2) !important;
}
html.px-public .pl-tag {
  border-color: transparent !important;
  background: var(--px-accent-tint) !important;
  color: var(--px-accent-ink) !important;
}
html.px-public .pl-hero::before {
  display: none;
}
html.px-public .pl-hero h1 {
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1.04;
}
html.px-public .pl-stat__n {
  font-weight: 650;
  letter-spacing: -0.04em;
}

/* ------------------------------------------------------------------ article template */
html.px-public .pl-article-header h1 {
  font-size: clamp(34px, 5.4vw, 52px);
  line-height: 1.06;
}
html.px-public :is(.pl-byline, .guide-meta) {
  color: var(--px-muted-ink) !important;
}
html.px-public .pl-avatar {
  border-color: var(--px-line) !important;
}
html.px-public .pl-lede {
  border: 0 !important;
  border-radius: var(--px-r-sm) !important;
  background: var(--px-accent-tint) !important;
  color: var(--px-ink) !important;
}
html.px-public :is(.pl-prose, .guide-intro) {
  color: var(--px-ink2);
}
html.px-public .pl-prose :is(h2, h3, h4, strong) {
  color: var(--px-ink);
}
html.px-public .pl-prose li::marker {
  color: var(--px-accent-ink);
}
html.px-public .pl-prose blockquote {
  border-left-color: var(--px-accent) !important;
  border-radius: 0 var(--px-r-sm) var(--px-r-sm) 0 !important;
  background: var(--px-card) !important;
  box-shadow: var(--px-shadow);
  color: var(--px-ink2) !important;
}
html.px-public .pl-prose code {
  background: var(--px-paper-2) !important;
  color: var(--px-ink) !important;
}
html.px-public .pl-prose pre,
html.px-public .pl-table-wrap {
  border-color: var(--px-line) !important;
  border-radius: var(--px-r-sm) !important;
  background: var(--px-card) !important;
}
html.px-public .pl-prose th {
  background: var(--px-paper-2) !important;
  color: var(--px-ink) !important;
  font: 600 12px/1.3 var(--px-mono) !important;
  letter-spacing: 0.1em !important;
}
html.px-public .pl-prose :is(th, td) {
  border-bottom-color: var(--px-line) !important;
}
html.px-public .pl-prose td:first-child {
  color: var(--px-ink) !important;
}
html.px-public :is(.pl-callout, .pl-aside) {
  border: 0 !important;
  border-left: 3px solid var(--px-accent) !important;
  border-radius: var(--px-r-sm) !important;
  background: var(--px-card) !important;
  box-shadow: var(--px-shadow);
  color: var(--px-ink2) !important;
}
html.px-public .pl-callout--warn {
  border-left-color: var(--px-carbs) !important;
}
html.px-public .pl-callout--danger {
  border-left-color: var(--px-danger) !important;
}
html.px-public :is(.pl-callout, .pl-aside) :is(h3, h4) {
  color: var(--px-ink) !important;
}
html.px-public .pl-cta-box {
  border: 0 !important;
  border-radius: 28px !important;
  background: var(--px-ink) !important;
  color: var(--px-paper);
  box-shadow: 0 30px 70px rgba(18, 26, 27, 0.18);
}
html.px-public .pl-cta-box::before {
  display: none;
}
html.px-public .pl-cta-box h3 {
  color: var(--px-paper) !important;
  font-weight: 650 !important;
  letter-spacing: -0.03em !important;
}
html.px-public .pl-cta-box p {
  color: color-mix(in srgb, var(--px-paper) 78%, transparent) !important;
}
html.px-public .pl-cta-box .pl-btn--primary {
  background: var(--px-paper) !important;
  color: var(--px-ink) !important;
  box-shadow: none !important;
}
html.px-public :is(.pl-related, .guide-next, .pl-footnotes) {
  border-top-color: var(--px-line) !important;
}
html.px-public .pl-related h3 {
  color: var(--px-muted-ink) !important;
  font: 600 12px/1.3 var(--px-mono) !important;
  letter-spacing: 0.14em !important;
}
html.px-public .pl-related li {
  border-bottom-color: var(--px-line) !important;
}
html.px-public .pl-related a {
  color: var(--px-ink) !important;
}
@media (hover: hover) and (pointer: fine) {
  html.px-public .pl-related a:hover {
    color: var(--px-accent-ink) !important;
  }
}
html.px-public .pl-prose hr {
  border-top-color: var(--px-line) !important;
}
/* The sticky call to action at the foot of articles: a floating paper bar. */
html.px-public .blog-sticky-cta {
  border-top: 1px solid var(--px-line) !important;
  background: color-mix(in srgb, var(--px-paper) 88%, transparent) !important;
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
}
html.px-public .blog-sticky-cta p {
  color: var(--px-ink2) !important;
}
html.px-public .blog-sticky-cta a {
  border-radius: 999px !important;
  background: var(--px-ink) !important;
  color: var(--px-paper) !important;
}

/* ------------------------------------------------------------------ guides and blog index */
html.px-public .guide-index-header h1 {
  font-size: clamp(40px, 6vw, 68px) !important;
  line-height: 1.02 !important;
}
html.px-public :is(.guide-card, .blog-post-card) h2 a,
html.px-public .blog-post-card .post-title {
  color: var(--px-ink) !important;
}
@media (hover: hover) and (pointer: fine) {
  html.px-public .guide-card h2 a:hover {
    color: var(--px-accent-ink) !important;
  }
}
html.px-public :is(.guide-card p, .guide-editorial, .guide-index-header > p:last-child) {
  color: var(--px-ink2) !important;
}
html.px-public .blog-post-card .post-date {
  color: var(--px-muted-ink) !important;
  font-family: var(--px-mono);
  font-size: 12px;
  font-weight: 600;
}
html.px-public .blog-post-card .read-more {
  color: var(--px-accent-ink) !important;
}
html.px-public .blog-posts-grid > .blog-post-card:first-child {
  background: var(--px-card) !important;
  box-shadow:
    inset 0 0 0 2px var(--px-accent),
    var(--px-shadow);
}
html.px-public .blog-posts-grid > .blog-post-card:first-child::before {
  border: 0 !important;
  background: var(--px-accent-tint) !important;
  color: var(--px-accent-ink) !important;
  font-family: var(--px-mono) !important;
  font-size: 12px !important;
}

/* ------------------------------------------------------------------ calculators */
html.px-public .calculator-wrap h1 {
  font-size: clamp(36px, 5.6vw, 60px) !important;
  line-height: 1.04 !important;
}
html.px-public .calculator-panel :is(input, select),
html.px-public :is(.pl-input, .pl-select, .pl-field input, .pl-field select) {
  min-height: 48px;
  border: 1px solid var(--px-line-strong) !important;
  border-radius: 14px !important;
  background-color: var(--px-paper) !important;
  color: var(--px-ink) !important;
}
html.px-public .calculator-panel :is(input, select):focus,
html.px-public :is(.pl-input, .pl-select, .pl-field input, .pl-field select):focus {
  border-color: var(--px-accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px var(--px-accent-tint) !important;
}
html.px-public :is(.pl-input, .pl-field input)::placeholder {
  color: var(--px-muted-ink) !important;
}
html.px-public :is(.calculator-panel select, .pl-select, .pl-field select) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a4f52' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-size: 14px !important;
}
html.px-public :is(.pl-select, .pl-field select) option,
html.px-public .calculator-panel option {
  background: var(--px-card);
  color: var(--px-ink);
}
html.px-public .calculator-panel button {
  border-radius: 999px !important;
}
html.px-public .calculator-wrap .estimate-calories {
  color: var(--px-ink) !important;
  font-weight: 650;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
html.px-public .estimate-macros dd {
  font-variant-numeric: tabular-nums;
}
html.px-public .sample-meal summary {
  color: var(--px-accent-ink) !important;
}
html.px-public .sample-meal details {
  border-top-color: var(--px-line) !important;
}

/* ------------------------------------------------------------------ legal */
html.px-public .pl-legal h1 {
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.04;
}
html.px-public .pl-legal .pl-updated {
  color: var(--px-muted-ink) !important;
  font-family: var(--px-mono);
  font-size: 12.5px;
}
html.px-public .pl-legal h2 {
  font-size: 22px !important;
  letter-spacing: -0.02em !important;
}

/* ------------------------------------------------------------------ about */
html.px-public .ai-mark {
  border-color: var(--px-line) !important;
  background: var(--px-accent-tint) !important;
  color: var(--px-accent-ink) !important;
  font-family: var(--px-serif);
  font-style: italic;
  font-weight: 400 !important;
}
html.px-public .team-card__role {
  color: var(--px-accent-ink) !important;
}
html.px-public .pl-social a {
  border-color: var(--px-line-strong) !important;
  border-radius: 999px !important;
  color: var(--px-ink2) !important;
}
@media (hover: hover) and (pointer: fine) {
  html.px-public .pl-social a:hover {
    border-color: var(--px-ink) !important;
    color: var(--px-ink) !important;
  }
}
html.px-public .pl-photo__frame {
  border-color: var(--px-line) !important;
  border-radius: var(--px-r-sm) !important;
}
html.px-public .story__before .pl-photo__frame--tall img {
  background: var(--px-paper-2) !important;
}
html.px-public .pl-photo__label--after {
  color: var(--px-accent-ink) !important;
}

/* ------------------------------------------------------------------ footer */
html.px-public .pl-footer,
html.px-public body > footer,
html.px-public .plait-seo-languages {
  border-top-color: var(--px-line) !important;
  background: transparent !important;
  color: var(--px-muted-ink) !important;
}
html.px-public .pl-footer p,
html.px-public body > footer p {
  color: var(--px-muted-ink) !important;
}
html.px-public :is(.pl-footer, body > footer, .plait-seo-languages) a {
  color: var(--px-ink2) !important;
}
@media (hover: hover) and (pointer: fine) {
  html.px-public :is(.pl-footer, body > footer, .plait-seo-languages) a:hover {
    color: var(--px-accent-ink) !important;
  }
}
html.px-public .plait-seo-languages {
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  font-family: var(--px-sans);
}
/* The creator credit stays a plain, followed pair of links, in the system's ink. */
html.px-public body .plait-creator-credit a {
  color: var(--px-ink) !important;
  font-weight: 500;
}

/* ================================================================== home (/) */
html.px-public[data-plait-seo-path='/'] .hero::before,
html.px-public[data-plait-seo-path='/'] .hero-preview::before {
  display: none;
}
html.px-public[data-plait-seo-path='/'] .nav {
  position: sticky;
  top: 0;
  z-index: 50;
  transition:
    background 0.4s,
    box-shadow 0.4s;
}
html.px-public[data-plait-seo-path='/'] .nav.is-stuck {
  background: color-mix(in srgb, var(--px-paper) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 1px 0 var(--px-line);
}
html.px-public[data-plait-seo-path='/'] .nav-links a {
  color: var(--px-ink2);
}
@media (hover: hover) and (pointer: fine) {
  html.px-public[data-plait-seo-path='/'] .nav-links a:hover {
    color: var(--px-ink);
  }
}
html.px-public[data-plait-seo-path='/'] .hero-badge {
  border-color: transparent !important;
  background: var(--px-accent-tint) !important;
  color: var(--px-accent-ink) !important;
}
html.px-public[data-plait-seo-path='/'] .hero-badge .dot {
  background: var(--px-accent) !important;
}
html.px-public[data-plait-seo-path='/'] .hero-title {
  color: var(--px-ink);
  font-size: clamp(42px, 7.4vw, 84px) !important;
  line-height: 1 !important;
  letter-spacing: -0.05em !important;
}
html.px-public[data-plait-seo-path='/'] .hero-title .highlight {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--px-accent-ink) !important;
  font-family: var(--px-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  padding-right: 0.06em;
}
html.px-public[data-plait-seo-path='/'] .hero-subtitle strong {
  color: var(--px-ink) !important;
}
html.px-public[data-plait-seo-path='/'] .soon-tag {
  border-color: transparent !important;
  background: var(--px-accent-tint) !important;
  color: var(--px-accent-ink) !important;
}
html.px-public[data-plait-seo-path='/'] .cta-button {
  border-radius: 999px !important;
  background: var(--px-ink) !important;
  color: var(--px-paper) !important;
  box-shadow: 0 12px 28px rgba(18, 26, 27, 0.18) !important;
  transition:
    transform 0.35s var(--px-spring),
    box-shadow 0.35s !important;
}
@media (hover: hover) and (pointer: fine) {
  html.px-public[data-plait-seo-path='/'] .cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(18, 26, 27, 0.24) !important;
  }
}
html.px-public[data-plait-seo-path='/'] .cta-button:focus-visible {
  outline: none;
  box-shadow: var(--px-focus) !important;
}
html.px-public[data-plait-seo-path='/'] .nav-links .cta-button {
  min-height: 40px;
  box-shadow: none !important;
}
html.px-public[data-plait-seo-path='/'] .cta-secondary {
  color: var(--px-ink2) !important;
}
html.px-public[data-plait-seo-path='/'] .cta-subtext,
html.px-public[data-plait-seo-path='/'] .hero-preview-caption,
html.px-public[data-plait-seo-path='/'] .proof-label {
  color: var(--px-muted-ink) !important;
}
html.px-public[data-plait-seo-path='/']
  :is(.cta-subtext svg, .cta-subtext strong, .proof-value .check) {
  color: var(--px-accent-ink) !important;
}
html.px-public[data-plait-seo-path='/'] .proof-label a {
  color: var(--px-ink2) !important;
  text-decoration-color: var(--px-line-strong) !important;
}
html.px-public[data-plait-seo-path='/'] .hero-preview img {
  border: 0 !important;
  border-radius: 28px !important;
  box-shadow: 0 30px 70px rgba(18, 26, 27, 0.16);
}
html.px-public[data-plait-seo-path='/'] .hero-proof {
  border-top-color: var(--px-line) !important;
}
html.px-public[data-plait-seo-path='/'] .proof-value {
  font-weight: 650 !important;
  letter-spacing: -0.04em !important;
}
/* Alternate sections sit on the deeper paper; cards are white. */
html.px-public[data-plait-seo-path='/'] .section-dark {
  background: var(--px-paper-2) !important;
}
html.px-public[data-plait-seo-path='/'] .product-section-heading .product-eyebrow,
html.px-public[data-plait-seo-path='/'] .waitlist-badge,
html.px-public[data-plait-seo-path='/'] .plan-name {
  color: var(--px-accent-ink) !important;
  font-family: var(--px-mono) !important;
}
html.px-public[data-plait-seo-path='/'] .product-inline-link {
  color: var(--px-ink) !important;
  text-decoration-color: var(--px-line-strong) !important;
}
@media (hover: hover) and (pointer: fine) {
  html.px-public[data-plait-seo-path='/'] .product-inline-link:hover {
    color: var(--px-accent-ink) !important;
  }
}
html.px-public[data-plait-seo-path='/'] :is(.plan-card, .testimonial-card, .product-steps li) {
  border: 0 !important;
  border-radius: var(--px-r) !important;
  background: var(--px-card) !important;
  box-shadow: var(--px-shadow);
}
html.px-public[data-plait-seo-path='/'] .plan-card {
  transition:
    transform 0.45s var(--px-spring),
    box-shadow 0.45s;
}
@media (hover: hover) and (pointer: fine) {
  html.px-public[data-plait-seo-path='/'] .plan-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--px-shadow-lift);
  }
}
html.px-public[data-plait-seo-path='/'] .plan-card.annual {
  box-shadow:
    inset 0 0 0 2px var(--px-accent),
    var(--px-shadow);
}
html.px-public[data-plait-seo-path='/'] .plan-badge,
html.px-public[data-plait-seo-path='/'] .plan-card.lifetime .plan-badge {
  background: var(--px-accent) !important;
  color: var(--px-on-accent) !important;
}
html.px-public[data-plait-seo-path='/'] .plan-price {
  color: var(--px-ink) !important;
  font-weight: 650 !important;
  letter-spacing: -0.04em !important;
}
html.px-public[data-plait-seo-path='/'] :is(.pricing-table thead th.pro-col, .tick.pro) {
  color: var(--px-accent-ink) !important;
}
html.px-public[data-plait-seo-path='/'] :is(.tick, .tick.pro) {
  background: var(--px-accent-tint) !important;
  color: var(--px-accent-ink) !important;
}
html.px-public[data-plait-seo-path='/'] .dash {
  color: var(--px-muted) !important;
}
html.px-public[data-plait-seo-path='/'] .pricing-table thead th {
  background: var(--px-paper-2) !important;
}
html.px-public[data-plait-seo-path='/'] .waitlist {
  border: 0 !important;
  border-radius: 28px !important;
  background: var(--px-card) !important;
  box-shadow: var(--px-shadow);
}
html.px-public[data-plait-seo-path='/'] .waitlist-form input[type='email'] {
  border-color: var(--px-line-strong) !important;
  border-radius: 999px !important;
  background: var(--px-paper) !important;
  color: var(--px-ink) !important;
}
html.px-public[data-plait-seo-path='/'] .waitlist-form button {
  border-radius: 999px !important;
  background: var(--px-accent) !important;
  color: var(--px-on-accent) !important;
}
html.px-public[data-plait-seo-path='/'] .cta-section,
html.px-public[data-plait-seo-path='/'] main ~ section[style],
html.px-public[data-plait-seo-path='/'] section[style*='linear-gradient'] {
  background: var(--px-paper-2) !important;
}
/* The device chooser: a system sheet. */
html.px-public[data-plait-seo-path='/'] .chooser {
  background: rgba(18, 26, 27, 0.42) !important;
}
html.px-public[data-plait-seo-path='/'] .chooser-panel {
  border: 0 !important;
  border-radius: 28px !important;
  background: var(--px-card) !important;
  color: var(--px-ink);
  box-shadow: 0 30px 80px rgba(18, 26, 27, 0.28) !important;
}
html.px-public[data-plait-seo-path='/'] .chooser-option {
  border-color: var(--px-line) !important;
  border-radius: 18px !important;
  background: var(--px-paper) !important;
  color: var(--px-ink) !important;
}
@media (hover: hover) and (pointer: fine) {
  html.px-public[data-plait-seo-path='/'] .chooser-option:hover {
    border-color: var(--px-ink) !important;
  }
}
html.px-public[data-plait-seo-path='/'] .chooser-option .opt-icon {
  background: var(--px-accent-tint) !important;
  color: var(--px-accent-ink) !important;
}
html.px-public[data-plait-seo-path='/']
  :is(.chooser-option .opt-sub, .chooser-foot, .chooser-panel > p) {
  color: var(--px-ink2) !important;
}
@media (hover: hover) and (pointer: fine) {
  html.px-public[data-plait-seo-path='/'] .chooser-close:hover {
    background: var(--px-paper-2) !important;
  }
}
html.px-public[data-plait-seo-path='/'] .sticky-cta {
  border-top-color: var(--px-line) !important;
  background: color-mix(in srgb, var(--px-paper) 90%, transparent) !important;
}
html.px-public[data-plait-seo-path='/'] .sticky-cta__text {
  color: var(--px-ink2) !important;
}
html.px-public[data-plait-seo-path='/'] .sticky-cta__text strong {
  color: var(--px-ink) !important;
}
html.px-public[data-plait-seo-path='/'] footer .footer-col h4 {
  color: var(--px-muted-ink);
  opacity: 1 !important;
  font-family: var(--px-mono);
}
/* How it works: white cards, basil marks. */
html.px-public[data-plait-seo-path='/'] .product-steps li {
  --step-accent: var(--px-accent);
}
html.px-public[data-plait-seo-path='/'] .product-steps li:not(:last-child)::after {
  color: var(--px-muted);
}
html.px-public[data-plait-seo-path='/'] .product-step-icon {
  border: 0 !important;
  background: var(--px-accent-tint) !important;
  box-shadow: none !important;
}
html.px-public[data-plait-seo-path='/'] .product-step-note {
  color: var(--px-muted-ink) !important;
}
html.px-public[data-plait-seo-path='/'] .product-feature-list > div {
  border-bottom-color: var(--px-line) !important;
}
html.px-public[data-plait-seo-path='/'] .product-feature-list dt svg {
  stroke: var(--px-accent) !important;
}
html.px-public[data-plait-seo-path='/'] .product-tier {
  border: 0 !important;
  border-radius: 999px !important;
  padding: 2px 8px !important;
  background: var(--px-ink) !important;
  color: var(--px-paper) !important;
  font-size: 10.5px !important;
}
html.px-public[data-plait-seo-path='/'] .product-tier-free {
  background: var(--px-accent-tint) !important;
  color: var(--px-accent-ink) !important;
}
/* In practice: the two notification examples stay dark "screens" (they show a phone
   notification); the practical cases are plain rows on paper. */
html.px-public[data-plait-seo-path='/'] .product-scenario {
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.76);
  color: #fff;
  border: 0 !important;
  border-radius: 28px !important;
  box-shadow: 0 30px 70px rgba(18, 26, 27, 0.2) !important;
}
html.px-public[data-plait-seo-path='/'] .product-scenario h3 {
  color: #fff !important;
}
html.px-public[data-plait-seo-path='/']
  :is(.product-practical-cases, .product-practical-case + .product-practical-case) {
  border-color: var(--px-line) !important;
}
html.px-public[data-plait-seo-path='/'] .product-practical-icon {
  stroke: var(--px-accent) !important;
}
html.px-public[data-plait-seo-path='/']
  :is(.product-swap-visual, .product-shopping-visual, .product-swap-visual > span:first-child) {
  color: var(--px-ink2) !important;
}
html.px-public[data-plait-seo-path='/']
  :is(.product-swap-visual > span:nth-child(2), .product-shopping-visual li::before) {
  color: var(--px-accent-ink) !important;
}
html.px-public[data-plait-seo-path='/'] .product-notification-note {
  color: var(--px-muted-ink) !important;
}
html.px-public[data-plait-seo-path='/'] .product-scenario :is(h3, h4) {
  color: #e5eef2 !important;
}
html.px-public[data-plait-seo-path='/'] :is(.section-header h2, .waitlist h2, .cta-section h2) {
  line-height: 1.1 !important;
}
/* "Not ready to connect" email capture (inline styles in the page). */
html.px-public[data-plait-seo-path='/'] section:has(#emailCaptureForm) h2 {
  color: var(--px-ink) !important;
}
html.px-public[data-plait-seo-path='/'] section:has(#emailCaptureForm) p {
  color: var(--px-ink2) !important;
}
html.px-public[data-plait-seo-path='/'] section:has(#emailCaptureForm) p:last-child {
  color: var(--px-muted-ink) !important;
}
html.px-public[data-plait-seo-path='/'] #captureMessage {
  color: var(--px-accent-ink) !important;
}
html.px-public[data-plait-seo-path='/'] #captureEmail {
  min-height: 52px;
  border: 1px solid var(--px-line-strong) !important;
  border-radius: 999px !important;
  background: var(--px-card) !important;
  color: var(--px-ink) !important;
}
html.px-public[data-plait-seo-path='/'] #captureEmail:focus {
  border-color: var(--px-accent) !important;
  box-shadow: 0 0 0 3px var(--px-accent-tint);
}
html.px-public[data-plait-seo-path='/'] #emailCaptureForm button {
  min-height: 52px;
  border-radius: 999px !important;
  background: var(--px-ink) !important;
  color: var(--px-paper) !important;
}
/* The plan preview stays a dark "screen", like on the ad landings. */
html.px-public[data-plait-seo-path='/'] .product-plan-example {
  --bg-card: #161a1f;
  --bg-card-hover: #1c2127;
  --border: rgba(255, 255, 255, 0.08);
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.76);
  --text-muted: rgba(255, 255, 255, 0.58);
  --accent-blue: #7dd87a;
  --accent-green: #7dd87a;
  color: #fff;
  border-radius: 28px !important;
  box-shadow: 0 30px 70px rgba(18, 26, 27, 0.22) !important;
}

/* ================================================================== press (/press/) */
html.px-public[data-plait-seo-path='/press/'] body {
  color: var(--px-ink) !important;
}
html.px-public[data-plait-seo-path='/press/'] .min-h-screen,
html.px-public[data-plait-seo-path='/press/'] body > .min-h-screen {
  background: var(--px-paper) !important;
}
html.px-public[data-plait-seo-path='/press/'] .glass-effect {
  border: 0 !important;
  background: var(--px-card) !important;
  box-shadow: var(--px-shadow);
}
html.px-public[data-plait-seo-path='/press/'] nav.glass-effect {
  background: color-mix(in srgb, var(--px-paper) 86%, transparent) !important;
  box-shadow: 0 1px 0 var(--px-line);
}
html.px-public[data-plait-seo-path='/press/'] :is(.text-white, h1, h2, h3, h4, strong) {
  color: var(--px-ink) !important;
}
html.px-public[data-plait-seo-path='/press/'] [class*='text-dark-'],
html.px-public[data-plait-seo-path='/press/'] [class*='text-gray-'] {
  color: var(--px-ink2) !important;
}
html.px-public[data-plait-seo-path='/press/'] .gradient-text {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--px-ink) !important;
}
html.px-public[data-plait-seo-path='/press/'] :is(.press-card, .download-card) {
  border-left: 0 !important;
  border-radius: var(--px-r) !important;
}
html.px-public[data-plait-seo-path='/press/'] .download-card {
  box-shadow:
    inset 0 0 0 2px var(--px-accent),
    var(--px-shadow);
}
html.px-public[data-plait-seo-path='/press/']
  main
  :is(
    [class*='bg-gradient-to-'],
    [class*='bg-primary-'],
    [class*='bg-green-'],
    [class*='bg-blue-'],
    [class*='bg-purple-'],
    [class*='bg-dark-']
  ):not(.min-h-screen):not(a[href$='.zip']),
html.px-public[data-plait-seo-path='/press/']
  :is(nav, .max-w-7xl)
  :is(
    [class*='bg-gradient-to-'],
    [class*='bg-primary-'],
    [class*='bg-green-'],
    [class*='bg-blue-'],
    [class*='bg-purple-'],
    [class*='bg-dark-']
  ):not(.min-h-screen):not(a[href$='.zip']) {
  background: var(--px-accent-tint) !important;
  color: var(--px-accent-ink) !important;
}
html.px-public[data-plait-seo-path='/press/'] a[href$='.zip'] {
  border-radius: 999px !important;
  background: var(--px-ink) !important;
  color: var(--px-paper) !important;
}
html.px-public[data-plait-seo-path='/press/'] [class*='text-primary-'],
html.px-public[data-plait-seo-path='/press/'] [class*='text-accent-'],
html.px-public[data-plait-seo-path='/press/'] [class*='text-green-'],
html.px-public[data-plait-seo-path='/press/'] [class*='text-blue-'],
html.px-public[data-plait-seo-path='/press/'] [class*='text-purple-'],
html.px-public[data-plait-seo-path='/press/'] [class*='text-yellow-'],
html.px-public[data-plait-seo-path='/press/'] main a:not([href$='.zip']) {
  color: var(--px-accent-ink) !important;
}
html.px-public[data-plait-seo-path='/press/'] [class*='border-dark-'] {
  border-color: var(--px-line) !important;
}

html.px-public[data-plait-seo-path='/press/'] .pl-footer {
  margin: 0;
  padding: 32px 24px 8px;
  border-top: 1px solid var(--px-line);
  text-align: center;
  font-size: 13px;
}

/* ================================================================== 404 */
html.px-public .nf h1 {
  font-size: clamp(40px, 6.6vw, 72px) !important;
  line-height: 1 !important;
}

/* ================================================================== sign-in */
html.px-public body:has(> main > .providers),
html.px-public body:has(.providers) {
  background: var(--px-paper) !important;
}
html.px-public main .brand {
  color: var(--px-ink) !important;
  font-weight: 650 !important;
  letter-spacing: -0.04em !important;
}
html.px-public main .brand span {
  color: var(--px-accent-ink) !important;
}
html.px-public main .eyebrow {
  color: var(--px-accent-ink) !important;
  font: 600 12px/1.3 var(--px-mono) !important;
  letter-spacing: 0.14em !important;
}
html.px-public :is(main .lead, .email-note, .reassurance, .divider, #code-form p, #sign-in-status) {
  color: var(--px-ink2) !important;
}
html.px-public .providers .provider {
  min-height: 56px;
  align-items: center;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 16px 22px !important;
  background: var(--px-card) !important;
  color: var(--px-ink) !important;
  box-shadow: var(--px-shadow);
  transition:
    transform 0.35s var(--px-spring),
    box-shadow 0.35s;
}
@media (hover: hover) and (pointer: fine) {
  html.px-public .providers .provider:hover {
    transform: translateY(-2px);
    box-shadow: var(--px-shadow-lift);
  }
}
html.px-public .providers .provider span {
  color: var(--px-accent-ink) !important;
}
html.px-public .divider::before,
html.px-public .divider::after,
html.px-public .reassurance {
  border-color: var(--px-line) !important;
}
html.px-public .divider::before,
html.px-public .divider::after {
  background: var(--px-line) !important;
}
html.px-public body:has(.providers) main :is(input) {
  border: 1px solid var(--px-line-strong) !important;
  border-radius: 14px !important;
  background: var(--px-card) !important;
  color: var(--px-ink) !important;
}
html.px-public body:has(.providers) main input:focus {
  border-color: var(--px-accent) !important;
  outline: none;
  box-shadow: 0 0 0 3px var(--px-accent-tint);
}
html.px-public body:has(.providers) main button:not(.secondary) {
  min-height: 52px;
  border-radius: 999px !important;
  background: var(--px-ink) !important;
  color: var(--px-paper) !important;
}
html.px-public body:has(.providers) main button.secondary {
  border-radius: 999px !important;
  border-color: var(--px-line-strong) !important;
  color: var(--px-ink) !important;
}
html.px-public body:has(.providers) a {
  color: var(--px-accent-ink);
}
html.px-public body:has(.providers) #sign-in-status[data-error='true'] {
  color: var(--px-danger) !important;
}

/* ================================================================== set-up flows
   (connect-apple-watch.html and garmin-email.html: one card on paper) */
html.px-public body > main.container {
  border: 0 !important;
  border-radius: 28px !important;
  background: var(--px-card) !important;
  box-shadow: var(--px-shadow);
}
html.px-public body:has(> main.container) {
  background: var(--px-paper) !important;
}
html.px-public main.container :is(h1, h2) {
  color: var(--px-ink) !important;
}
html.px-public main.container .logo img {
  border-radius: 0 !important;
}
html.px-public main.container :is(.badge, .garmin-badge) {
  border-color: transparent !important;
  background: var(--px-accent-tint) !important;
  color: var(--px-accent-ink) !important;
}
html.px-public main.container .badge .beta {
  border-color: transparent !important;
  background: var(--px-card) !important;
  color: var(--px-accent-ink) !important;
}
html.px-public main.container .card {
  border: 0 !important;
  border-radius: 18px !important;
  background: var(--px-paper) !important;
}
html.px-public main.container :is(.btn, .submit-btn) {
  min-height: 52px;
  border-radius: 999px !important;
  background: var(--px-ink) !important;
  color: var(--px-paper) !important;
  box-shadow: none !important;
}
html.px-public main.container .btn.secondary {
  border: 1px solid var(--px-line-strong) !important;
  background: var(--px-card) !important;
  color: var(--px-ink) !important;
}
html.px-public main.container :is(.btn, .submit-btn):focus-visible {
  outline: none;
  box-shadow: var(--px-focus) !important;
}
html.px-public main.container :is(.form-group input, .form-group select) {
  border-color: var(--px-line-strong) !important;
  border-radius: 14px !important;
  background-color: var(--px-paper) !important;
  color: var(--px-ink) !important;
}
html.px-public main.container :is(.form-group input, .form-group select):focus {
  border-color: var(--px-accent) !important;
  box-shadow: 0 0 0 3px var(--px-accent-tint) !important;
}
html.px-public main.container .form-group input::placeholder {
  color: var(--px-muted-ink) !important;
}
html.px-public main.container .form-group select option {
  background: var(--px-card) !important;
  color: var(--px-ink) !important;
}
html.px-public main.container code {
  background: var(--px-paper-2) !important;
}
html.px-public main.container .url-box {
  border-color: var(--px-line-strong) !important;
  background: var(--px-paper-2) !important;
  color: var(--px-ink) !important;
}
html.px-public main.container .metric-list span {
  border-color: transparent !important;
  color: var(--px-accent-ink) !important;
}
html.px-public main.container .tabs {
  border-radius: 999px !important;
  background: var(--px-paper-2) !important;
}
html.px-public main.container .tab {
  border-radius: 999px !important;
}
html.px-public main.container .tab.active {
  background: var(--px-card) !important;
  color: var(--px-ink) !important;
  box-shadow: var(--px-shadow);
}
html.px-public main.container :is(.msg.error, .error-msg) {
  color: var(--px-danger) !important;
}
html.px-public main.container .dot.on {
  box-shadow: none !important;
}
html.px-public main.container :is(.privacy-note a, .link, .resend-link) {
  color: var(--px-accent-ink) !important;
}

/* The phone language slot takes its own row in any footer layout. */
html.px-public .px-lang-slot {
  flex-basis: 100%;
  width: 100%;
}
html.px-public main.container :is(input, select):focus-visible,
html.px-public body:has(.providers) main input:focus-visible {
  outline: none;
}

/* ------------------------------------------------------------------ phones */
@media (max-width: 768px) {
  /* Home: a smaller mark, so the headline and its call to action sit higher. */
  html.px-public[data-plait-seo-path='/'] .hero-logo-mobile {
    margin-bottom: 16px !important;
  }
  html.px-public[data-plait-seo-path='/'] .hero-logo-mobile img {
    height: 44px !important;
  }
  html.px-public[data-plait-seo-path='/'] .hero-badge {
    margin-bottom: 18px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
  }
}
@media (max-width: 640px) {
  /* Home on phones: the hero's call to action sits above the consent card in all four
     languages (German and French headlines run longest). */
  html.px-public[data-plait-seo-path='/'] .hero-title {
    margin-bottom: 16px !important;
    font-size: 38px !important;
    line-height: 1.02 !important;
  }
  html.px-public[data-plait-seo-path='/'] .hero-subtitle {
    margin-bottom: 22px !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
  }
  html.px-public[data-plait-seo-path='/'] .hero-content .cta-button {
    min-height: 52px;
    padding: 14px 28px !important;
  }
}
@media (max-width: 640px) {
  /* Press kit: a compact header so the download sits above the consent card. */
  /* The decorative icon tiles above the title and the download give way on phones. */
  html.px-public[data-plait-seo-path='/press/'] .text-center.mb-12 > .flex:first-child,
  html.px-public[data-plait-seo-path='/press/'] .download-card > .flex:first-child {
    display: none !important;
  }
  html.px-public[data-plait-seo-path='/press/'] .download-card {
    padding: 22px !important;
  }
  html.px-public[data-plait-seo-path='/press/'] .text-center.mb-12 {
    margin-bottom: 24px !important;
  }
  html.px-public[data-plait-seo-path='/press/'] .text-center.mb-12 h1 {
    font-size: 34px !important;
  }
  html.px-public[data-plait-seo-path='/press/'] .text-center.mb-12 p {
    font-size: 16px !important;
  }
  html.px-public .pl-article-wrap {
    padding-top: 28px;
  }
  html.px-public .pl-cta-box {
    padding: 32px 22px !important;
  }
}