/*
 * Copyright 2020 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

/* See ./styles.css.md for design notes and rationale. */

/* Inter Tight */
/* stylelint-disable-next-line no-invalid-position-at-import-rule */
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 400;
  font-display: fallback;
  src: url('../fonts/inter-tight-v9-latin-regular.woff2') format('woff2');
}

@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 500;
  font-display: fallback;
  src: url('../fonts/inter-tight-v9-latin-500.woff2') format('woff2');
}

@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 600;
  font-display: fallback;
  src: url('../fonts/inter-tight-v9-latin-600.woff2') format('woff2');
}

@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 300;
  font-display: fallback;
  src: url('../fonts/inter-tight-v9-latin-300.woff2') format('woff2');
}

/* Playfair Display */
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 500;
  font-display: fallback;
  src: url('../fonts/playfair-display-v40-latin-500.woff2') format('woff2');
}

:root {
  /* Color primitives (--ds-*) */
  --ds-color-brand-dark: #013638;
  --ds-color-brand-mid: #108389;
  --ds-color-brand-tint: #cce5e7;
  --ds-color-neutral-0: #fff;
  --ds-color-neutral-50: #fafafc;
  --ds-color-neutral-100: #f8f8f7;
  --ds-color-neutral-150: #e3e3e2;
  --ds-color-neutral-200: #cdcccb;
  --ds-color-neutral-250: #b6b6b5;
  --ds-color-neutral-300: #888887;
  --ds-color-neutral-400: #555551;
  --ds-color-neutral-500: #3e3f4e;
  --ds-color-neutral-700: #242424;
  --ds-color-neutral-800: #161616;
  --ds-color-accent-cream: #fef9ee;
  --ds-color-accent-cream-warm: #e8e1cf;
  --ds-color-accent-sand: #f5f2eb;
  --ds-color-highlight-beta: #4a5d73;
  --ds-color-highlight-gamma: #8a6fa8;
  --ds-color-highlight-iota: #8c9a9a;
  --ds-color-highlight-theta: #607e95;
  --ds-color-status-success: #16a761;
  --ds-color-status-success-strong: #146e3c;
  --ds-color-status-warning: #e07100;
  --ds-color-status-tint-success: #e8f4e4;
  --ds-color-status-tint-warning: #fef0e9;
  --ds-color-elevation-tint: #00000026;
  --ds-color-elevation-tint-opaque: #000;
  --ds-color-scrim-black-50: rgb(0 0 0 / 50%);
  --ds-opacity-0: 0;
  --ds-opacity-10: 0.1;
  --ds-opacity-20: 0.2;
  --ds-opacity-25: 0.25;
  --ds-opacity-60: 0.6;
  --ds-opacity-100: 1;

  /* Color semantics (--ll-*) */
  --ll-color-brand-primary: var(--ds-color-brand-dark);
  --ll-color-brand-secondary: var(--ds-color-brand-mid);
  --ll-color-bg-default: var(--ds-color-neutral-0);
  --ll-color-bg-muted: var(--ds-color-neutral-100);
  --ll-color-bg-card: var(--ds-color-neutral-150);
  --ll-color-bg-brand: var(--ll-color-brand-primary);
  --ll-color-bg-brand-accent: var(--ds-color-brand-mid);
  --ll-color-bg-inverse: var(--ds-color-brand-dark);
  --ll-color-bg-accent: var(--ds-color-accent-cream);
  --ll-color-bg-accent-warm: var(--ds-color-accent-cream-warm);
  --ll-color-bg-sand: var(--ds-color-accent-sand);
  --ll-color-bg-promo: var(--ds-color-accent-cream);
  --ll-color-bg-cta-gradient: linear-gradient(180deg, var(--ds-color-brand-mid) 15%, var(--ds-color-brand-dark) 173%);
  --ll-color-bg-cta-gradient-cream: linear-gradient(180deg, var(--ll-color-bg-accent) 0%, var(--ll-color-bg-accent-warm) 95.67%);
  --ll-color-bg-disabled: var(--ds-color-neutral-200);
  --ll-color-bg-secondary: var(--ds-color-neutral-50);
  --ll-color-bg-secondary-hover: var(--ds-color-neutral-100);
  --ll-color-bg-scrim: var(--ds-color-scrim-black-50);
  --ll-color-bg-sale-accent: var(--ds-color-highlight-gamma);
  --ll-color-bg-tint-success: var(--ds-color-status-tint-success);
  --ll-color-bg-tint-warning: var(--ds-color-status-tint-warning);
  --ll-color-bg-pdes: var(--ds-color-accent-cream);
  --ll-color-text-primary: var(--ds-color-brand-dark);
  --ll-color-text-secondary: var(--ds-color-neutral-800);
  --ll-color-text-tertiary: var(--ds-color-neutral-400);
  --ll-color-text-brand: var(--ds-color-brand-mid);
  --ll-color-text-link: var(--ds-color-highlight-theta);
  --ll-color-text-link-hover: var(--ds-color-brand-dark);
  --ll-color-text-inverse: var(--ds-color-neutral-0);
  --ll-color-text-disabled: var(--ds-color-neutral-300);
  --ll-color-text-muted: var(--ds-color-highlight-theta);
  --ll-color-text-placeholder: var(--ds-color-neutral-250);
  --ll-color-border-default: var(--ds-color-neutral-150);
  --ll-color-border-secondary: var(--ds-color-neutral-150);
  --ll-color-border-tertiary: var(--ds-color-neutral-300);
  --ll-color-border-table: var(--ds-color-neutral-300);
  --ll-color-border-strong: var(--ds-color-neutral-800);
  --ll-color-border-brand: var(--ds-color-brand-mid);
  --ll-color-border-disabled: var(--ds-color-neutral-200);
  --ll-color-border-on-brand: var(--ds-color-brand-dark);
  --ll-color-border-inverse: var(--ds-color-neutral-0);
  --ll-color-border-focus: var(--ds-color-brand-mid);
  --ll-color-border-invalid: var(--ds-color-status-warning);
  --ll-color-status-success: var(--ds-color-status-success);
  --ll-color-status-success-strong: var(--ds-color-status-success-strong);
  --ll-color-status-warning: var(--ds-color-status-warning);
  --ll-color-status-error: var(--ll-color-status-warning);
  --ll-color-status-tint-success: var(--ds-color-status-tint-success);
  --ll-color-status-tint-warning: var(--ds-color-status-tint-warning);
  --ll-color-status-info: var(--ll-color-text-muted);
  --ll-color-signal-success: var(--ds-color-status-success);
  --ll-color-signal-warning: var(--ds-color-status-warning);
  --ll-color-highlight-brand-light: var(--ds-color-brand-tint);
  --ll-color-highlight-beta: var(--ds-color-highlight-beta);
  --ll-color-highlight-iota: var(--ds-color-highlight-iota);
  --ll-color-highlight-theta: var(--ds-color-highlight-theta);
  --ll-color-shadow-tint: var(--ds-color-neutral-150);
  --ll-color-elevation-tint: var(--ds-color-elevation-tint);
  --ll-color-focus-ring: var(--ds-color-brand-mid);
  --ll-opacity-transparent: var(--ds-opacity-0);
  --ll-opacity-subtle: var(--ds-opacity-10);
  --ll-opacity-divider: var(--ds-opacity-20);
  --ll-opacity-sale-fill: var(--ds-opacity-25);
  --ll-opacity-secondary-text: var(--ds-opacity-60);
  --ll-opacity-opaque: var(--ds-opacity-100);

  /* Typography primitives (--ds-*) */
  --ds-font-family-primary: "Inter Tight", arial, sans-serif;
  --ds-font-family-heading: "Inter Tight", arial, sans-serif;
  --ds-font-family-secondary: "Playfair Display", georgia, serif;
  --ds-font-family-fallback: arial, sans-serif;
  --ds-font-size-72: 72px;
  --ds-font-size-64: 64px;
  --ds-font-size-52: 52px;
  --ds-font-size-44: 44px;
  --ds-font-size-36: 36px;
  --ds-font-size-28: 28px;
  --ds-font-size-24: 24px;
  --ds-font-size-22: 22px;
  --ds-font-size-20: 20px;
  --ds-font-size-18: 18px;
  --ds-font-size-16: 16px;
  --ds-font-size-14: 14px;
  --ds-font-size-12: 12px;
  --ds-font-size-10: 10px;
  --ds-line-height-h0: 86px;
  --ds-line-height-h1: 76px;
  --ds-line-height-h2: 62px;
  --ds-line-height-h3: 52px;
  --ds-line-height-h4: 44px;
  --ds-line-height-h5: 34px;
  --ds-line-height-h6: 30px;
  --ds-line-height-h7: 26px;
  --ds-line-height-body-3xl: 36px;
  --ds-line-height-body-2xl: 32px;
  --ds-line-height-body-xl: 30px;
  --ds-line-height-body-lg: 26px;
  --ds-line-height-body-base: 24px;
  --ds-line-height-body-sm: 22px;
  --ds-line-height-body-xs: 18px;
  --ds-line-height-button-lg: 24px;
  --ds-line-height-button-sm: 18px;
  --ds-line-height-tagline-sm: 16px;
  --ds-line-height-label: 16px;
  --ds-line-height-badge: 18px;
  --ds-letter-spacing-h0: 1.397px;
  --ds-letter-spacing-h1: 1.299px;
  --ds-letter-spacing-h2: 0.998px;
  --ds-letter-spacing-h3: 0.902px;
  --ds-letter-spacing-h4: 0.698px;
  --ds-letter-spacing-h5: 0.6px;
  --ds-letter-spacing-h6: 0.48px;
  --ds-letter-spacing-h7: 0;
  --ds-letter-spacing-body-3xl: 0;
  --ds-letter-spacing-body-2xl: 0.44px;
  --ds-letter-spacing-body-xl: 0.44px;
  --ds-letter-spacing-body-lg: 0.481px;
  --ds-letter-spacing-body-base: 0.32px;
  --ds-letter-spacing-body-sm: 0.28px;
  --ds-letter-spacing-body-xs: 0.24px;
  --ds-letter-spacing-button-lg: 0.24px;
  --ds-letter-spacing-button-sm: 0.239px;
  --ds-letter-spacing-tagline-sm: 0.601px;
  --ds-letter-spacing-label: 0.24px;
  --ds-letter-spacing-badge: -0.3px;
  --ds-font-weight-light: 300;
  --ds-font-weight-regular: 400;
  --ds-font-weight-medium: 500;
  --ds-font-weight-semibold: 600;
  --ds-font-weight-bold: 700;
  --ds-font-weight-extrabold: 800;

  /* Typography semantics (--ll-text-*) */
  --ll-text-h0-size: var(--ds-font-size-72);
  --ll-text-h0-line-height: var(--ds-line-height-h0);
  --ll-text-h0-letter-spacing: var(--ds-letter-spacing-h0);
  --ll-text-h0-weight: var(--ds-font-weight-medium);
  --ll-text-h0-family: var(--ds-font-family-secondary);
  --ll-text-h1-size: var(--ds-font-size-64);
  --ll-text-h1-line-height: var(--ds-line-height-h1);
  --ll-text-h1-letter-spacing: var(--ds-letter-spacing-h1);
  --ll-text-h1-weight: var(--ds-font-weight-medium);
  --ll-text-h1-family: var(--ds-font-family-secondary);
  --ll-text-h2-size: var(--ds-font-size-52);
  --ll-text-h2-line-height: var(--ds-line-height-h2);
  --ll-text-h2-letter-spacing: var(--ds-letter-spacing-h2);
  --ll-text-h2-weight: var(--ds-font-weight-medium);
  --ll-text-h2-family: var(--ds-font-family-heading);
  --ll-text-h3-size: var(--ds-font-size-44);
  --ll-text-h3-line-height: var(--ds-line-height-h3);
  --ll-text-h3-letter-spacing: var(--ds-letter-spacing-h3);
  --ll-text-h3-weight: var(--ds-font-weight-medium);
  --ll-text-h3-family: var(--ds-font-family-heading);
  --ll-text-h4-size: var(--ds-font-size-36);
  --ll-text-h4-line-height: var(--ds-line-height-h4);
  --ll-text-h4-letter-spacing: var(--ds-letter-spacing-h4);
  --ll-text-h4-weight: var(--ds-font-weight-medium);
  --ll-text-h4-family: var(--ds-font-family-heading);
  --ll-text-h5-size: var(--ds-font-size-28);
  --ll-text-h5-line-height: var(--ds-line-height-h5);
  --ll-text-h5-letter-spacing: var(--ds-letter-spacing-h5);
  --ll-text-h5-weight: var(--ds-font-weight-medium);
  --ll-text-h5-family: var(--ds-font-family-heading);
  --ll-text-h6-size: var(--ds-font-size-24);
  --ll-text-h6-line-height: var(--ds-line-height-h6);
  --ll-text-h6-letter-spacing: var(--ds-letter-spacing-h6);
  --ll-text-h6-weight: var(--ds-font-weight-medium);
  --ll-text-h6-family: var(--ds-font-family-heading);
  --ll-text-h7-size: var(--ds-font-size-20);
  --ll-text-h7-line-height: var(--ds-line-height-h7);
  --ll-text-h7-letter-spacing: var(--ds-letter-spacing-h7);
  --ll-text-h7-weight: var(--ds-font-weight-medium);
  --ll-text-h7-family: var(--ds-font-family-heading);
  --ll-text-body-3xl-size: var(--ds-font-size-24);
  --ll-text-body-3xl-line-height: var(--ds-line-height-body-3xl);
  --ll-text-body-3xl-letter-spacing: var(--ds-letter-spacing-body-3xl);
  --ll-text-body-3xl-weight: var(--ds-font-weight-regular);
  --ll-text-body-3xl-family: var(--ds-font-family-primary);
  --ll-text-body-2xl-size: var(--ds-font-size-22);
  --ll-text-body-2xl-line-height: var(--ds-line-height-body-2xl);
  --ll-text-body-2xl-letter-spacing: var(--ds-letter-spacing-body-2xl);
  --ll-text-body-2xl-weight: var(--ds-font-weight-regular);
  --ll-text-body-2xl-family: var(--ds-font-family-primary);
  --ll-text-body-xl-size: var(--ds-font-size-20);
  --ll-text-body-xl-line-height: var(--ds-line-height-body-xl);
  --ll-text-body-xl-letter-spacing: var(--ds-letter-spacing-body-xl);
  --ll-text-body-xl-weight: var(--ds-font-weight-regular);
  --ll-text-body-xl-family: var(--ds-font-family-primary);
  --ll-text-body-lg-size: var(--ds-font-size-18);
  --ll-text-body-lg-line-height: var(--ds-line-height-body-lg);
  --ll-text-body-lg-letter-spacing: var(--ds-letter-spacing-body-lg);
  --ll-text-body-lg-weight: var(--ds-font-weight-regular);
  --ll-text-body-lg-family: var(--ds-font-family-primary);
  --ll-text-body-base-size: var(--ds-font-size-16);
  --ll-text-body-base-line-height: var(--ds-line-height-body-base);
  --ll-text-body-base-letter-spacing: var(--ds-letter-spacing-body-base);
  --ll-text-body-base-weight: var(--ds-font-weight-regular);
  --ll-text-body-base-family: var(--ds-font-family-primary);
  --ll-text-body-base-weight-emphasis: var(--ds-font-weight-bold);
  --ll-text-body-sm-size: var(--ds-font-size-14);
  --ll-text-body-sm-line-height: var(--ds-line-height-body-sm);
  --ll-text-body-sm-letter-spacing: var(--ds-letter-spacing-body-sm);
  --ll-text-body-sm-weight: var(--ds-font-weight-regular);
  --ll-text-body-sm-family: var(--ds-font-family-primary);
  --ll-text-body-sm-weight-emphasis: var(--ds-font-weight-medium);
  --ll-text-body-xs-size: var(--ds-font-size-12);
  --ll-text-body-xs-line-height: var(--ds-line-height-body-xs);
  --ll-text-body-xs-letter-spacing: var(--ds-letter-spacing-body-xs);
  --ll-text-body-xs-weight: var(--ds-font-weight-regular);
  --ll-text-body-xs-family: var(--ds-font-family-primary);
  --ll-text-button-lg-size: var(--ds-font-size-18);
  --ll-text-button-lg-line-height: var(--ds-line-height-button-lg);
  --ll-text-button-lg-letter-spacing: var(--ds-letter-spacing-button-lg);
  --ll-text-button-lg-weight: var(--ds-font-weight-medium);
  --ll-text-button-lg-family: var(--ds-font-family-primary);
  --ll-text-button-base-size: var(--ds-font-size-16);
  --ll-text-button-base-line-height: var(--ds-line-height-button-lg);
  --ll-text-button-base-letter-spacing: var(--ds-letter-spacing-body-base);
  --ll-text-button-base-weight: var(--ds-font-weight-medium);
  --ll-text-button-base-family: var(--ds-font-family-primary);
  --ll-text-button-sm-size: var(--ds-font-size-14);
  --ll-text-button-sm-line-height: var(--ds-line-height-button-sm);
  --ll-text-button-sm-letter-spacing: var(--ds-letter-spacing-button-sm);
  --ll-text-button-sm-weight: var(--ds-font-weight-medium);
  --ll-text-button-sm-family: var(--ds-font-family-primary);
  --ll-text-tagline-sm-size: var(--ds-font-size-14);
  --ll-text-tagline-sm-line-height: var(--ds-line-height-tagline-sm);
  --ll-text-tagline-sm-letter-spacing: var(--ds-letter-spacing-tagline-sm);
  --ll-text-tagline-sm-weight: var(--ds-font-weight-medium);
  --ll-text-tagline-sm-weight-emphasis: var(--ds-font-weight-semibold);
  --ll-text-tagline-sm-family: var(--ds-font-family-primary);
  --ll-text-eyebrow-size: var(--ds-font-size-12);
  --ll-text-eyebrow-line-height: var(--ds-line-height-label);
  --ll-text-eyebrow-letter-spacing: var(--ds-letter-spacing-body-base);
  --ll-text-eyebrow-weight: var(--ds-font-weight-medium);
  --ll-text-eyebrow-family: var(--ds-font-family-primary);
  --ll-text-label-size: var(--ds-font-size-12);
  --ll-text-label-line-height: var(--ds-line-height-label);
  --ll-text-label-letter-spacing: var(--ds-letter-spacing-label);
  --ll-text-label-weight: var(--ds-font-weight-regular);
  --ll-text-label-family: var(--ds-font-family-primary);
  --ll-text-badge-size: var(--ds-font-size-10);
  --ll-text-badge-line-height: var(--ds-line-height-badge);
  --ll-text-badge-letter-spacing: var(--ds-letter-spacing-badge);
  --ll-text-badge-weight: var(--ds-font-weight-medium);
  --ll-text-badge-family: var(--ds-font-family-primary);

  /* Spacing - Figma source-of-truth */
  --ds-space-0: 0;
  --ds-space-2: 2px;
  --ds-space-4: 4px;
  --ds-space-8: 8px;
  --ds-space-12: 12px;
  --ds-space-16: 16px;
  --ds-space-20: 20px;
  --ds-space-24: 24px;
  --ds-space-32: 32px;
  --ds-space-40: 40px;
  --ds-space-44: 44px;
  --ds-space-48: 48px;
  --ds-space-56: 56px;
  --ds-space-64: 64px;
  --ds-space-72: 72px;
  --ds-space-80: 80px;
  --ds-space-88: 88px;
  --ds-space-96: 96px;
  --ds-space-104: 104px;
  --ds-space-112: 112px;
  --ds-space-120: 120px;
  --ll-space-0: var(--ds-space-0);
  --ll-space-1: var(--ds-space-2);
  --ll-space-2: var(--ds-space-4);
  --ll-space-3: var(--ds-space-8);
  --ll-space-4: var(--ds-space-12);
  --ll-space-5: var(--ds-space-16);
  --ll-space-6: var(--ds-space-20);
  --ll-space-7: var(--ds-space-24);
  --ll-space-8: var(--ds-space-32);
  --ll-space-9: var(--ds-space-40);
  --ll-space-10: var(--ds-space-44);
  --ll-space-11: var(--ds-space-48);
  --ll-space-12: var(--ds-space-56);
  --ll-space-13: var(--ds-space-64);
  --ll-space-14: var(--ds-space-72);
  --ll-space-15: var(--ds-space-80);
  --ll-space-16: var(--ds-space-88);
  --ll-space-17: var(--ds-space-96);
  --ll-space-18: var(--ds-space-104);
  --ll-space-19: var(--ds-space-112);
  --ll-space-20: var(--ds-space-120);

  /* Radius and border width */
  --ds-radius-0: 0;
  --ds-radius-xs: 2px;
  --ds-radius-s: 4px;
  --ds-radius-m: 6px;
  --ds-radius-l: 8px;
  --ds-radius-xl: 16px;
  --ds-radius-full: 9999px;
  --ds-border-width-0: 0;
  --ds-border-width-xs: 1px;
  --ds-border-width-s: 2px;
  --ds-border-width-m: 4px;
  --ds-border-width-l: 6px;
  --ds-border-width-xl: 8px;
  --ll-radius-none: var(--ds-radius-0);
  --ll-radius-xs: var(--ds-radius-xs);
  --ll-radius-s: var(--ds-radius-s);
  --ll-radius-sm: var(--ds-radius-xs);
  --ll-radius-md: var(--ds-radius-m);
  --ll-radius-md-desktop: var(--ds-radius-m);
  --ll-radius-md-mobile: var(--ds-radius-l);
  --ll-radius-card: var(--ds-radius-l);
  --ll-radius-lg: var(--ds-radius-xl);
  --ll-radius-xl: var(--ds-radius-xl);
  --ll-radius-full: var(--ds-radius-full);
  --ll-radius-pill: var(--ds-radius-full);
  --ll-radius-focus-ring: var(--ds-radius-l);
  --ll-border-width-none: var(--ds-border-width-0);
  --ll-border-width-hairline: var(--ds-border-width-xs);
  --ll-border-width-xs: var(--ds-border-width-xs);
  --ll-border-width-strong: var(--ds-border-width-s);
  --ll-border-width-accent: var(--ds-border-width-m);

  /* Breakpoint primitives */
  --ds-breakpoint-sm-min: 0;
  --ds-breakpoint-sm-max: 767px;
  --ds-breakpoint-md-min: 768px;
  --ds-breakpoint-md-max: 1023px;
  --ds-breakpoint-lg-min: 1024px;
  --ds-breakpoint-lg-max: 1439px;
  --ds-breakpoint-xl-min: 1440px;

  /* Grid primitives + responsive semantics */
  --ds-grid-content-sm: 328px;
  --ds-grid-content-md: 704px;
  --ds-grid-content-lg: 936px;
  --ds-grid-content-xl: 1312px;
  --ds-grid-margin-sm: 16px;
  --ds-grid-margin-md: 32px;
  --ds-grid-margin-lg: 44px;
  --ds-grid-margin-xl: 64px;
  --ds-grid-gutter-sm: 12px;
  --ds-grid-gutter-md: 16px;
  --ds-grid-gutter-lg: 24px;
  --ds-grid-gutter-xl: 32px;
  --ds-grid-columns-sm: 4;
  --ds-grid-columns-md: 12;
  --ds-grid-columns-lg: 12;
  --ds-grid-columns-xl: 12;
  --ll-grid-content: var(--ds-grid-content-sm);
  --ll-grid-margin: var(--ds-grid-margin-sm);
  --ll-grid-gutter: var(--ds-grid-gutter-sm);
  --ll-grid-columns: var(--ds-grid-columns-sm);

  /* Motion primitives + paired semantic role groups */
  --ds-duration-100: 100ms;
  --ds-duration-150: 150ms;
  --ds-duration-200: 200ms;
  --ds-duration-220: 220ms;
  --ds-duration-300: 300ms;
  --ds-duration-320: 320ms;
  --ds-duration-500: 500ms;
  --ds-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ds-easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --ds-easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
  --ds-easing-emphasized-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ds-easing-linear: linear;
  --ll-motion-hover-duration: var(--ds-duration-150);
  --ll-motion-hover-easing: var(--ds-easing-standard);
  --ll-motion-focus-duration: var(--ds-duration-100);
  --ll-motion-focus-easing: var(--ds-easing-standard);
  --ll-motion-interactive-state-duration: var(--ds-duration-220);
  --ll-motion-interactive-state-easing: var(--ds-easing-emphasized-out);
  --ll-motion-navbar-state-duration: var(--ds-duration-320);
  --ll-motion-navbar-state-easing: var(--ds-easing-emphasized-out);
  --ll-motion-enter-duration: var(--ds-duration-300);
  --ll-motion-enter-easing: var(--ds-easing-decelerate);
  --ll-motion-exit-duration: var(--ds-duration-200);
  --ll-motion-exit-easing: var(--ds-easing-accelerate);

  /* Shadow primitives + semantics */
  --ds-shadow-none: none;
  --ds-shadow-default: 0 6px 24px 0 #e3e3e2;
  --ds-shadow-floating-top: 0 4px 20px 0 rgb(0 0 0 / 12%);
  --ds-shadow-floating-bottom: 0 -4px 20px 0 rgb(0 0 0 / 12%);
  --ds-shadow-overlay: 0 12px 24px -12px rgb(0 0 0 / 10%);
  --ll-shadow-none: var(--ds-shadow-none);
  --ll-shadow-resting: var(--ds-shadow-default);
  --ll-shadow-floating: var(--ds-shadow-floating-top);
  --ll-shadow-floating-bottom: var(--ds-shadow-floating-bottom);
  --ll-shadow-overlay: var(--ds-shadow-overlay);

  /* Project layout (kept; not provided by ll-eds tokens) */
  --nav-height: 65px;
}

/* Grid semantic aliases - responsive overrides at canonical breakpoints */
@media (width >= 768px) {
  :root {
    --ll-grid-content: var(--ds-grid-content-md);
    --ll-grid-margin: var(--ds-grid-margin-md);
    --ll-grid-gutter: var(--ds-grid-gutter-md);
    --ll-grid-columns: var(--ds-grid-columns-md);
    --nav-height: 67px;
  }
}

@media (width >= 1024px) {
  :root {
    --ll-grid-content: var(--ds-grid-content-lg);
    --ll-grid-margin: var(--ds-grid-margin-lg);
    --ll-grid-gutter: var(--ds-grid-gutter-lg);
    --ll-grid-columns: var(--ds-grid-columns-lg);
    --nav-height: 73px;
  }
}

@media (width >= 1440px) {
  :root {
    --ll-grid-content: var(--ds-grid-content-xl);
    --ll-grid-margin: var(--ds-grid-margin-xl);
    --ll-grid-gutter: var(--ds-grid-gutter-xl);
    --ll-grid-columns: var(--ds-grid-columns-xl);
  }
}

/* Base typography + page shell */

body {
  display: none;
  min-height: 100dvh;
  flex-direction: column;
  margin: 0;
  background-color: var(--ll-color-bg-default);
  color: var(--ll-color-text-primary);
  font-family: var(--ll-text-body-base-family);
  font-size: var(--ll-text-body-base-size);
  line-height: var(--ll-text-body-base-line-height);
  letter-spacing: var(--ll-text-body-base-letter-spacing);
  font-weight: var(--ll-text-body-base-weight);
}

body.appear {
  display: flex;
}

header {
  min-height: var(--nav-height);
}

header .header,
footer .footer {
  visibility: hidden;
}

header .header[data-block-status="loaded"],
footer .footer[data-block-status="loaded"] {
  visibility: visible;
}

/* Top-nav decoration failsafe - see ./styles.css.md */
.top-nav.block {
  display: none;
}

/* Product-nav decoration failsafe - see ./styles.css.md */
.product-nav.block {
  box-sizing: border-box;
  min-height: 50px;
}

.product-nav > * {
  display: none;
}

@media (width >= 1024px) {
  .product-nav.block {
    min-height: 48px;
  }
}

/* Product-hero-* decoration failsafe - see ./styles.css.md */
.product-hero-image.block,
.product-hero-info.block,
.product-hero-plans.block,
.product-hero-key-features.block {
  box-sizing: border-box;
}

.product-hero-image.block { aspect-ratio: 704 / 429; }
.product-hero-info.block { min-height: 144px; }
.product-hero-plans.block { min-height: 426px; }
.product-hero-key-features.block { min-height: 115px; }

.product-hero-plans.block:has(.product-hero-plans__root[data-display-mode="billings-only"]) {
  min-height: 280px;
}

.product-hero-image > *,
.product-hero-info > *,
.product-hero-plans > *,
.product-hero-key-features > * {
  display: none;
}

@media (width >= 1024px) {
  .product-hero-image.block { aspect-ratio: 536 / 420; }
  .product-hero-info.block { min-height: 144px; }
  .product-hero-plans.block { min-height: 420px; }
  .product-hero-key-features.block { min-height: 135px; }
}

@media (width >= 1440px) {
  .product-hero-image.block { aspect-ratio: 750 / 419; }
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ds-font-family-heading);
  font-weight: var(--ds-font-weight-medium);
  line-height: 1.25;
  scroll-margin: 40px;
}

/* Jump-link offset - any element that owns an `id` may be the target
 * of an in-page hash link (blocks stamping their own `block.id` via
 * `toSlug` from scripts/jump-pipe.js, aem.live's auto-generated
 * heading slugs, any block-authored anchor). Reserve the sticky
 * top-nav's height plus a bit of breathing room so the target never
 * sits behind the nav bar. `--nav-height` steps 65 -> 67 at 768 -> 73
 * at 1024, so the offset tracks the bar across breakpoints. Applies
 * to both the click hijack path (dev / author / capture) and the
 * browser default hash-scroll (real users on prerendered pages). */
[id] {
  scroll-margin-block-start: calc(var(--nav-height) + var(--ll-space-3));
}

h1 {
  margin-top: 51.2px;
  margin-bottom: 16px;
  font-family: var(--ll-text-h1-family);
  font-size: var(--ll-text-h1-size);
  line-height: var(--ll-text-h1-line-height);
  letter-spacing: var(--ll-text-h1-letter-spacing);
  font-weight: var(--ll-text-h1-weight);
}

h2 {
  margin-top: 41.6px;
  margin-bottom: 13px;
  font-size: var(--ll-text-h2-size);
  line-height: var(--ll-text-h2-line-height);
  letter-spacing: var(--ll-text-h2-letter-spacing);
  font-weight: var(--ll-text-h2-weight);
}

h3 {
  margin-top: 35.2px;
  margin-bottom: 11px;
  font-size: var(--ll-text-h3-size);
  line-height: var(--ll-text-h3-line-height);
  letter-spacing: var(--ll-text-h3-letter-spacing);
  font-weight: var(--ll-text-h3-weight);
}

h4 {
  margin-top: 28.8px;
  margin-bottom: 9px;
  font-size: var(--ll-text-h4-size);
  line-height: var(--ll-text-h4-line-height);
  letter-spacing: var(--ll-text-h4-letter-spacing);
  font-weight: var(--ll-text-h4-weight);
}

h5 {
  margin-top: 22.4px;
  margin-bottom: 7px;
  font-size: var(--ll-text-h5-size);
  line-height: var(--ll-text-h5-line-height);
  letter-spacing: var(--ll-text-h5-letter-spacing);
  font-weight: var(--ll-text-h5-weight);
}

h6 {
  margin-top: 19.2px;
  margin-bottom: 6px;
  font-size: var(--ll-text-h6-size);
  line-height: var(--ll-text-h6-line-height);
  letter-spacing: var(--ll-text-h6-letter-spacing);
  font-weight: var(--ll-text-h6-weight);
}

/* Heading-size utility classes (.h0-.h7) */
.h0 {
  font-family: var(--ll-text-h0-family);
  font-size: var(--ll-text-h0-size);
  line-height: var(--ll-text-h0-line-height);
  letter-spacing: var(--ll-text-h0-letter-spacing);
  font-weight: var(--ll-text-h0-weight);
}

.h1 {
  font-family: var(--ll-text-h1-family);
  font-size: var(--ll-text-h1-size);
  line-height: var(--ll-text-h1-line-height);
  letter-spacing: var(--ll-text-h1-letter-spacing);
  font-weight: var(--ll-text-h1-weight);
}

.h2 {
  font-family: var(--ll-text-h2-family);
  font-size: var(--ll-text-h2-size);
  line-height: var(--ll-text-h2-line-height);
  letter-spacing: var(--ll-text-h2-letter-spacing);
  font-weight: var(--ll-text-h2-weight);
}

.h3 {
  font-family: var(--ll-text-h3-family);
  font-size: var(--ll-text-h3-size);
  line-height: var(--ll-text-h3-line-height);
  letter-spacing: var(--ll-text-h3-letter-spacing);
  font-weight: var(--ll-text-h3-weight);
}

.h4 {
  font-family: var(--ll-text-h4-family);
  font-size: var(--ll-text-h4-size);
  line-height: var(--ll-text-h4-line-height);
  letter-spacing: var(--ll-text-h4-letter-spacing);
  font-weight: var(--ll-text-h4-weight);
}

.h5 {
  font-family: var(--ll-text-h5-family);
  font-size: var(--ll-text-h5-size);
  line-height: var(--ll-text-h5-line-height);
  letter-spacing: var(--ll-text-h5-letter-spacing);
  font-weight: var(--ll-text-h5-weight);
}

.h6 {
  font-family: var(--ll-text-h6-family);
  font-size: var(--ll-text-h6-size);
  line-height: var(--ll-text-h6-line-height);
  letter-spacing: var(--ll-text-h6-letter-spacing);
  font-weight: var(--ll-text-h6-weight);
}

.h7 {
  font-family: var(--ll-text-h7-family);
  font-size: var(--ll-text-h7-size);
  line-height: var(--ll-text-h7-line-height);
  letter-spacing: var(--ll-text-h7-letter-spacing);
  font-weight: var(--ll-text-h7-weight);
}

/* Body-size utility classes (.body-3xl-.body-xs) */
.body-3xl {
  font-family: var(--ll-text-body-3xl-family);
  font-size: var(--ll-text-body-3xl-size);
  line-height: var(--ll-text-body-3xl-line-height);
  letter-spacing: var(--ll-text-body-3xl-letter-spacing);
  font-weight: var(--ll-text-body-3xl-weight);
}

.body-2xl {
  font-family: var(--ll-text-body-2xl-family);
  font-size: var(--ll-text-body-2xl-size);
  line-height: var(--ll-text-body-2xl-line-height);
  letter-spacing: var(--ll-text-body-2xl-letter-spacing);
  font-weight: var(--ll-text-body-2xl-weight);
}

.body-xl {
  font-family: var(--ll-text-body-xl-family);
  font-size: var(--ll-text-body-xl-size);
  line-height: var(--ll-text-body-xl-line-height);
  letter-spacing: var(--ll-text-body-xl-letter-spacing);
  font-weight: var(--ll-text-body-xl-weight);
}

.body-lg {
  font-family: var(--ll-text-body-lg-family);
  font-size: var(--ll-text-body-lg-size);
  line-height: var(--ll-text-body-lg-line-height);
  letter-spacing: var(--ll-text-body-lg-letter-spacing);
  font-weight: var(--ll-text-body-lg-weight);
}

.body-base {
  font-family: var(--ll-text-body-base-family);
  font-size: var(--ll-text-body-base-size);
  line-height: var(--ll-text-body-base-line-height);
  letter-spacing: var(--ll-text-body-base-letter-spacing);
  font-weight: var(--ll-text-body-base-weight);
}

.body-sm {
  font-family: var(--ll-text-body-sm-family);
  font-size: var(--ll-text-body-sm-size);
  line-height: var(--ll-text-body-sm-line-height);
  letter-spacing: var(--ll-text-body-sm-letter-spacing);
  font-weight: var(--ll-text-body-sm-weight);
}

.body-xs {
  font-family: var(--ll-text-body-xs-family);
  font-size: var(--ll-text-body-xs-size);
  line-height: var(--ll-text-body-xs-line-height);
  letter-spacing: var(--ll-text-body-xs-letter-spacing);
  font-weight: var(--ll-text-body-xs-weight);
}

/* Button-size typography utilities (.button-lg/.button-base/.button-sm) */
.button-lg {
  font-family: var(--ll-text-button-lg-family);
  font-size: var(--ll-text-button-lg-size);
  line-height: var(--ll-text-button-lg-line-height);
  letter-spacing: var(--ll-text-button-lg-letter-spacing);
  font-weight: var(--ll-text-button-lg-weight);
}

.button-base {
  font-family: var(--ll-text-button-base-family);
  font-size: var(--ll-text-button-base-size);
  line-height: var(--ll-text-button-base-line-height);
  letter-spacing: var(--ll-text-button-base-letter-spacing);
  font-weight: var(--ll-text-button-base-weight);
}

.button-sm {
  font-family: var(--ll-text-button-sm-family);
  font-size: var(--ll-text-button-sm-size);
  line-height: var(--ll-text-button-sm-line-height);
  letter-spacing: var(--ll-text-button-sm-letter-spacing);
  font-weight: var(--ll-text-button-sm-weight);
}

/* Medium (Figma Buttons > Secondary > Medium spec): padding + typography
   combined. Departs from .button-lg/.button-base/.button-sm which are
   typography-only, because Figma's Medium size implies both smaller font
   AND tighter padding. */
.button-md {
  --ll-button-padding: 10px 26px;

  font-family: var(--ll-text-button-base-family);
  font-size: var(--ll-text-button-base-size);
  line-height: var(--ll-text-button-base-line-height);
  letter-spacing: var(--ll-text-button-base-letter-spacing);
  font-weight: var(--ll-text-button-base-weight);
}

/* Misc role utilities (.tagline-sm / .eyebrow / .label) */
.tagline-sm {
  font-family: var(--ll-text-tagline-sm-family);
  font-size: var(--ll-text-tagline-sm-size);
  line-height: var(--ll-text-tagline-sm-line-height);
  letter-spacing: var(--ll-text-tagline-sm-letter-spacing);
  font-weight: var(--ll-text-tagline-sm-weight);
}

.eyebrow {
  font-family: var(--ll-text-eyebrow-family);
  font-size: var(--ll-text-eyebrow-size);
  line-height: var(--ll-text-eyebrow-line-height);
  letter-spacing: var(--ll-text-eyebrow-letter-spacing);
  font-weight: var(--ll-text-eyebrow-weight);
}

.label {
  font-family: var(--ll-text-label-family);
  font-size: var(--ll-text-label-size);
  line-height: var(--ll-text-label-line-height);
  letter-spacing: var(--ll-text-label-letter-spacing);
  font-weight: var(--ll-text-label-weight);
}

/* .sr-only - visually hidden, screen-reader announced */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Secondary brand voice (.is-secondary) */
.is-secondary {
  font-family: var(--ds-font-family-secondary);
  font-weight: var(--ds-font-weight-medium);
}

.is-secondary :is(
  h1, h2, h3, h4, h5, h6,
  .h0, .h1, .h2, .h3, .h4, .h5, .h6, .h7,
  .body-3xl, .body-2xl, .body-xl, .body-lg, .body-base, .body-sm, .body-xs,
  .button-lg, .button-base, .button-sm, .button-md,
  .tagline-sm, .eyebrow, .label
) {
  font-family: var(--ds-font-family-secondary);
  font-weight: var(--ds-font-weight-medium);
}

p, dl, ol, ul, pre, blockquote {
  margin-top: 12.8px;
  margin-bottom: 4px;
}

code, pre {
  font-family: monospace;
  font-size: var(--ll-text-body-sm-size);
}

pre {
  padding: 16px;
  border-radius: var(--ll-radius-md);
  background-color: var(--ll-color-bg-muted);
  overflow-x: auto;
  white-space: pre;
}

main {
  flex: 1;
}

input, textarea, select, button {
  font: inherit;
}

/* Default link style: Uses :where() so specificity=0 for easy overrides via text-decoration: none. */
:where(a:any-link) {
  color: var(--ll-color-text-link);
  text-decoration: underline;
  overflow-wrap: break-word;
}

:where(a:hover) {
  color: var(--ll-color-text-link-hover);
  text-decoration: underline;
}

/* Molecule layer */

p.button-wrapper {
  margin: 12px 0;
}

a.button:any-link,
button.button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ll-button-width, auto);
  max-width: var(--ll-button-max-width, 100%);
  margin: 0;
  border: 2px solid transparent;
  border-radius: var(--ll-radius-pill);
  padding: var(--ll-button-padding, 8px 19.2px);
  font: inherit;
  font-weight: var(--ds-font-weight-medium);
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

form a.button:any-link,
form button.button {
  padding: 16px 24px;
}

@media (width < 768px) {
  form a.button:any-link,
  form button.button {
    padding: 12px 20px;
  }
}

a.button[aria-disabled="true"],
button.button:disabled {
  cursor: not-allowed;
  pointer-events: none;
}

a.button.primary,
button.button.primary {
  border-color: var(--ll-color-bg-brand);
  background-color: var(--ll-color-bg-brand);
  color: var(--ll-color-text-inverse);
}

a.button.primary:hover,
a.button.primary:focus-visible,
button.button.primary:hover,
button.button.primary:focus-visible {
  border-color: var(--ll-color-bg-brand-accent);
  background-color: var(--ll-color-bg-brand-accent);
  color: var(--ll-color-text-inverse);
}

a.button.primary[aria-disabled="true"],
a.button.primary[aria-disabled="true"]:hover,
a.button.primary[aria-disabled="true"]:focus-visible,
button.button.primary:disabled,
button.button.primary:disabled:hover,
button.button.primary:disabled:focus-visible {
  background-color: var(--ll-color-bg-disabled);
  border-color: var(--ll-color-bg-disabled);
  color: var(--ll-color-text-disabled);
}

a.button.secondary,
button.button.secondary {
  border-color: var(--ll-color-text-primary);
  background-color: transparent;
  color: var(--ll-color-text-primary);
}

a.button.secondary:hover,
a.button.secondary:focus-visible,
button.button.secondary:hover,
button.button.secondary:focus-visible {
  border-color: var(--ll-color-text-secondary);
  background-color: var(--ll-color-bg-muted);
  color: var(--ll-color-text-secondary);
}

a.button.secondary[aria-disabled="true"],
a.button.secondary[aria-disabled="true"]:hover,
a.button.secondary[aria-disabled="true"]:focus-visible,
button.button.secondary:disabled,
button.button.secondary:disabled:hover,
button.button.secondary:disabled:focus-visible {
  background-color: var(--ll-color-bg-disabled);
  border-color: var(--ll-color-bg-disabled);
  color: var(--ll-color-text-disabled);
}

/* high-impact call-to-action */
a.button.accent,
button.button.accent {
  border-color: var(--ll-color-text-link);
  background-color: var(--ll-color-text-link);
  color: var(--ll-color-text-inverse);
}

a.button.accent:hover,
a.button.accent:focus-visible,
button.button.accent:hover,
button.button.accent:focus-visible {
  border-color: var(--ll-color-text-link-hover);
  background-color: var(--ll-color-text-link-hover);
}

a.button.accent[aria-disabled="true"],
a.button.accent[aria-disabled="true"]:hover,
a.button.accent[aria-disabled="true"]:focus-visible,
button.button.accent:disabled,
button.button.accent:disabled:hover,
button.button.accent:disabled:focus-visible {
  background-color: var(--ll-color-bg-disabled);
  border-color: var(--ll-color-bg-disabled);
  color: var(--ll-color-text-disabled);
}

/* Brand CTA paint variants (dark-green sections, sand sections, dark-hero sections) */
a.button.sand-on-green,
a.button.sand-on-green:hover,
a.button.sand-on-green:focus-visible,
button.button.sand-on-green,
button.button.sand-on-green:hover,
button.button.sand-on-green:focus-visible {
  border-color: var(--ll-color-bg-sand);
  background-color: var(--ll-color-bg-sand);
  color: var(--ll-color-text-primary);
}

a.button.white-on-green,
a.button.white-on-green:hover,
a.button.white-on-green:focus-visible,
button.button.white-on-green,
button.button.white-on-green:hover,
button.button.white-on-green:focus-visible {
  border-color: var(--ll-color-bg-default);
  background-color: var(--ll-color-bg-default);
  color: var(--ll-color-text-primary);
}

a.button.green-on-sand,
a.button.green-on-sand:hover,
a.button.green-on-sand:focus-visible,
button.button.green-on-sand,
button.button.green-on-sand:hover,
button.button.green-on-sand:focus-visible {
  border-color: var(--ll-color-bg-brand);
  background-color: var(--ll-color-bg-brand);
  color: var(--ll-color-bg-sand);
}

a.button.gradient-on-sand,
a.button.gradient-on-sand:hover,
a.button.gradient-on-sand:focus-visible,
button.button.gradient-on-sand,
button.button.gradient-on-sand:hover,
button.button.gradient-on-sand:focus-visible {
  border-color: transparent;
  background: var(--ll-color-bg-cta-gradient);
  color: var(--ll-color-text-inverse);
}

a.button.transparent,
a.button.transparent:hover,
a.button.transparent:focus-visible,
button.button.transparent,
button.button.transparent:hover,
button.button.transparent:focus-visible {
  border-color: transparent;
  background-color: transparent;
  color: var(--ll-color-text-inverse);
  outline: 1px solid var(--ll-color-text-inverse);
  outline-offset: -2px;
}

a.button.white-on-dark,
a.button.white-on-dark:hover,
a.button.white-on-dark:focus-visible,
button.button.white-on-dark,
button.button.white-on-dark:hover,
button.button.white-on-dark:focus-visible {
  border-color: var(--ll-color-bg-default);
  background-color: var(--ll-color-bg-default);
  color: var(--ll-color-text-secondary);
}

a.button.gradient-cream-on-dark,
a.button.gradient-cream-on-dark:hover,
a.button.gradient-cream-on-dark:focus-visible,
button.button.gradient-cream-on-dark,
button.button.gradient-cream-on-dark:hover,
button.button.gradient-cream-on-dark:focus-visible {
  border-color: transparent;
  background: var(--ll-color-bg-cta-gradient-cream);
  color: var(--ll-color-text-secondary);
}

a.button.green-outlined-on-dark,
a.button.green-outlined-on-dark:hover,
a.button.green-outlined-on-dark:focus-visible,
button.button.green-outlined-on-dark,
button.button.green-outlined-on-dark:hover,
button.button.green-outlined-on-dark:focus-visible {
  border-color: var(--ll-color-text-inverse);
  background-color: var(--ll-color-bg-inverse);
  color: var(--ll-color-text-inverse);
}

main img {
  max-width: 100%;
  width: auto;
  height: auto;
}

.icon {
  display: inline-block;
  height: 24px;
  width: 24px;
}

.icon img {
  height: 100%;
  width: 100%;
}

/* Trustpilot star rating molecule */
.trustpilot-rating {
  display: flex;
  align-items: center;
  gap: var(--ll-space-3);
  margin: 0;
  font-family: var(--ll-text-body-sm-family);
  font-size: var(--ll-text-body-sm-size);
  line-height: var(--ll-text-body-sm-line-height);
  letter-spacing: var(--ll-text-body-sm-letter-spacing);
  font-weight: 500;
}

.trustpilot-rating--plain {
  display: block;
  font-weight: var(--ll-text-body-sm-weight);
}

.trustpilot-rating__stars {
  /* Light grey for the unfilled star area (empty stars + the right half of
   * a half star). Component-scoped alias to a light neutral border token. */
  --tpr-star-empty: var(--ll-color-border-default);

  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Stars mask the filled-star SVG silhouette so the fill comes from
 * `background` - sharp vector edges at any size (matches the review-card
 * stars and Figma's green mask stars, replacing the old 16px raster PNGs).
 * The <img> that processIconPaths injects is hidden; the mask does the work. */
.trustpilot-rating__star {
  display: inline-block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background-color: var(--ll-color-signal-success);
  mask-image: var(--ll-icon-star);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.trustpilot-rating__star img {
  display: none;
}

.trustpilot-rating__star--half {
  background-color: transparent;
  background-image: linear-gradient(
    to right,
    var(--ll-color-signal-success) 0 50%,
    var(--tpr-star-empty) 50% 100%
  );
}

.trustpilot-rating__star--empty {
  background-color: var(--tpr-star-empty);
}

.trustpilot-rating__text {
  display: inline;
}

.trustpilot-rating__rating {
  font-weight: 500;
}

.trustpilot-rating__count {
  color: inherit;
  text-underline-offset: 2px;
}

a.trustpilot-rating__count:hover,
a.trustpilot-rating__count:focus-visible {
  text-decoration-thickness: 2px;
}

/* Reduced-motion override */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* dp-pipe + tfn-pipe shimmer (shared paint recipe) */
a[href][href*="#dp/"],
a[href][href$="#tfn"],
a[href].tfn-element--loading,
.dp-element--loading,
.tfn-element--loading {
  min-width: 60px;
  border-radius: 4px;
  color: transparent;
  background: linear-gradient(
    90deg,
    var(--ll-color-bg-muted) 0%,
    var(--ll-color-bg-card) 50%,
    var(--ll-color-bg-muted) 100%
  );
  background-size: 200% 100%;
  animation: dp-link-shimmer 1500ms linear infinite;
}

.dp-element--loading.dp-element--entitlement-note {
  display: block;
  min-width: 0;
  min-height: 24px;
}

/* tfn-element shimmer variant (glossy sweep) */
a[href][href$="#tfn"],
a[href].tfn-element--loading,
.tfn-element--loading {
  background-image: linear-gradient(
    90deg,
    color-mix(in srgb, var(--ll-color-text-inverse) 10%, transparent) 0%,
    color-mix(in srgb, var(--ll-color-text-inverse) 55%, transparent) 50%,
    color-mix(in srgb, var(--ll-color-text-inverse) 10%, transparent) 100%
  );
}

/* .tfn-element__number - digit-only hover affordance for tel-links */
.tfn-element__number {
  color: inherit;
  text-decoration: inherit;
  transition: color 120ms ease;
}

a.tfn-element:hover .tfn-element__number,
a.tfn-element:focus-visible .tfn-element__number {
  color: var(--ll-color-text-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@keyframes dp-link-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Width helpers - six-cell width x bleed matrix */
.is-static-width {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--ll-grid-content);
  margin-inline: auto;
}

@media (width < 768px) {
  .is-static-width {
    max-width: min(calc(100% - 2 * var(--ll-grid-margin)), 328px);
  }
}

.is-static-bleed {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--ll-grid-content) + 2 * var(--ll-grid-margin));
  margin-inline: auto;
}

.is-fluid-width {
  box-sizing: border-box;
  width: 100%;
  max-width: min(calc(100dvw - 2 * var(--ll-grid-margin)), 1312px);
  margin-inline: auto;
}

@media (width < 768px) {
  .is-fluid-width {
    max-width: calc(100dvw - 2 * var(--ll-grid-margin));
  }
}

.is-fluid-bleed {
  box-sizing: border-box;
  width: 100%;
  max-width: min(100dvw, 1440px);
  margin-inline: auto;
}

.is-full-width {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(100dvw - 2 * var(--ll-grid-margin));
  margin-inline: auto;
}

.is-full-bleed {
  box-sizing: border-box;
  width: 100dvw;
  margin-inline: calc(50% - 50dvw);
}

html {
  overflow-x: clip;
  scrollbar-gutter: stable;
}

/* Grid utilities (.grid / .grid__column / .subgrid / .subgrid__column) */
.grid {
  box-sizing: border-box;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(var(--ll-grid-columns), minmax(0, 1fr));
  gap: var(--ll-grid-gutter);
}

.grid > * {
  grid-column: span var(--grid-col-sm, 4);
}

@media (width >= 768px) {
  .grid > * {
    grid-column: span var(--grid-col-md, 12);
  }
}

@media (width >= 1024px) {
  .grid > * {
    grid-column: span var(--grid-col-lg, var(--grid-col-md, 12));
  }
}

@media (width >= 1440px) {
  .grid > * {
    grid-column: span var(--grid-col-xl, var(--grid-col-lg, var(--grid-col-md, 12)));
  }
}

.grid__column {
  display: flex;
  flex-direction: column;
  gap: var(--grid-column-gap, var(--ll-space-7));
}

.subgrid {
  box-sizing: border-box;
  width: 100%;
  display: grid;
  grid-template-columns: subgrid;
  row-gap: var(--ll-grid-gutter);
}

.subgrid > * {
  grid-column: span var(--grid-col-sm, 4);
}

@media (width >= 768px) {
  .subgrid > * {
    grid-column: span var(--grid-col-md, 12);
  }
}

@media (width >= 1024px) {
  .subgrid > * {
    grid-column: span var(--grid-col-lg, var(--grid-col-md, 12));
  }
}

@media (width >= 1440px) {
  .subgrid > * {
    grid-column: span var(--grid-col-xl, var(--grid-col-lg, var(--grid-col-md, 12)));
  }
}

.subgrid__column {
  display: flex;
  flex-direction: column;
  gap: var(--subgrid-column-gap, var(--ll-space-7));
}

/* Universal Editor edit-mode chrome ([data-ue-label]) */
body[data-ue-mode] [data-ue-label],
html.adobe-ue-edit [data-ue-label],
html.adobe-ue-preview [data-ue-label] {
  position: relative;
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  margin: var(--ll-space-3) 0;
  padding: var(--ll-space-4);
  background: var(--ll-color-bg-muted);
  outline: 1px dashed var(--ll-color-border-tertiary);
  outline-offset: 2px;
}

body[data-ue-mode] [data-ue-label]::before,
html.adobe-ue-edit [data-ue-label]::before,
html.adobe-ue-preview [data-ue-label]::before {
  content: attr(data-ue-label);
  display: block;
  margin-block-end: var(--ll-space-3);
  color: var(--ll-color-text-muted);
  font-family: var(--ll-text-body-sm-family);
  font-size: 11px;
  font-weight: var(--ll-text-body-base-weight-emphasis);
  text-transform: uppercase;
  letter-spacing: 1px;
}