/* ==========================================================================
   LIVRAA — public website
   Single stylesheet for the whole marketing site + customer account area.

   Conventions
   -----------
   * Every class is prefixed `ws-` so nothing collides with the admin theme.
   * Logical properties only (margin-inline, inset-inline, text-align: start).
     RTL therefore needs no mirrored sheet — `dir="rtl"` on <html> is enough.
   * Colours, spacing and radii come from the custom properties below, so the
     palette can follow the brand colours managed in admin.
   ========================================================================== */

/* ---------------------------------------------------------------- fonts -- */
/* Montserrat is the brand's Latin face across admin, auth and now the public
   site. Self-hosted from the bundled variable file — no Google Fonts request.
   Noto Sans Arabic / GE Dinar keep their own faces (see layouts.brand). */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/montserrat/Montserrat-Variable.woff2') format('woff2'),
         url('../fonts/montserrat/Montserrat-Variable.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------------------- tokens -- */
:root {
    --ws-primary: #3c535a;
    --ws-primary-dark: #0e5655;
    --ws-primary-darker: #0e5655;
    --ws-primary-soft: #edf5ef;
    --ws-primary-softer: #faf7f2;

    --ws-accent: #ec912a;
    --ws-accent-soft: #f8eee2;

    --ws-ink: #3c535a;
    --ws-body: #3c535a;
    --ws-muted: #596b70;
    --ws-line: #dce3e1;

    --ws-surface: #ffffff;
    --ws-bg: #faf7f2;

    --ws-danger: #9e2c21;
    --ws-danger-soft: #f5e3e1;
    --ws-success: #0e5655;
    --ws-success-soft: #edf5ef;
    --ws-warning: #ec912a;
    --ws-warning-soft: #f8eee2;

    --ws-gradient: linear-gradient(0deg, #3c535a, #3c535a);
    --ws-gradient-soft:
        radial-gradient(720px 420px at 88% -6%, rgba(107, 176, 134, .14), transparent 64%),
        radial-gradient(640px 380px at 6% 102%, rgba(236, 219, 198, .5), transparent 66%),
        linear-gradient(180deg, #fbf9f5, #f8f4ee);
    --ws-gradient-warm: linear-gradient(0deg, #faf7f2, #faf7f2);
    /* Light brand wash for the hero, page heads and auth panes: cream
       (#ecdbc6) warming the top, botanical (#6bb086) cooling the bottom.
       Both are diluted far enough that body copy keeps full contrast. */
    --ws-gradient-hero:
        linear-gradient(168deg, #ffffff 0%, #fdfaf6 22%, #f7efe4 56%, #eef6f0 100%);

    /* Calm paper surfaces keep the supplied brand's spacious layout. The mist
       variant carries a diluted botanical/cream mesh so card sections read as
       a surface rather than flat paper. */
    --ws-gradient-mist:
        radial-gradient(760px 420px at 12% -8%, rgba(107, 176, 134, .16), transparent 64%),
        radial-gradient(680px 400px at 92% 104%, rgba(236, 219, 198, .55), transparent 66%),
        linear-gradient(180deg, #fbf9f5, #f7f3ec);
    --ws-gradient-cool: linear-gradient(0deg, #faf7f2, #faf7f2);

    /* Approved LIVRAA wordmark and supporting palette. */
    --ws-logo-ink: #3c535a;
    --ws-logo-lime: #6bb086;
    --ws-logo-orange: #e7670d;
    --ws-gradient-logo: linear-gradient(0deg, #faf7f2, #faf7f2);

    --ws-radius-sm: 10px;
    --ws-radius: 16px;
    --ws-radius-lg: 24px;
    --ws-radius-pill: 999px;

    /* Subtle depth for functional cards. */
    --ws-shadow-xs: 0 1px 2px rgba(60, 83, 90, .06);
    --ws-shadow-sm: 0 2px 6px rgba(60, 83, 90, .06), 0 1px 2px rgba(60, 83, 90, .04);
    --ws-shadow: 0 10px 30px rgba(60, 83, 90, .08), 0 2px 8px rgba(60, 83, 90, .04);
    --ws-shadow-lg: 0 24px 60px rgba(60, 83, 90, .14), 0 6px 18px rgba(60, 83, 90, .06);
    --ws-shadow-primary: 0 6px 18px rgba(60, 83, 90, .12);

    --ws-container: 1180px;
    --ws-gap: 24px;

    --ws-font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --ws-transition: .25s cubic-bezier(.4, 0, .2, 1);
}

/* Arabic typography — same family the admin panel switched to. */
[dir="rtl"] {
    --ws-font: 'GE Dinar', 'Noto Sans Arabic', 'Montserrat', 'Segoe UI', Tahoma, sans-serif;
}

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;

    /* The mobile nav drawer is parked off-screen with a transform, which still
       counts towards the document scroll width. `clip` removes that phantom
       horizontal scroll without turning <html> into a scroll container, so the
       sticky header keeps working (`hidden` would break it). */
    overflow-x: hidden;
    overflow-x: clip;
}

body.ws-body {
    margin: 0;
    background: var(--ws-bg);
    color: var(--ws-body);
    font-family: var(--ws-font);
    font-size: 16px;
    line-height: 1.7;
    overflow-x: hidden;
    overflow-x: clip;
}

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

a {
    color: var(--ws-primary-dark);
    text-decoration: none;
    transition: color var(--ws-transition);
}

a:hover {
    color: var(--ws-primary-darker);
}

/* Montserrat is geometric and runs wider than Inter at the same size, so the
   headings take a touch more weight and negative tracking to stay compact. */
h1, h2, h3, h4, h5 {
    margin: 0 0 .6em;
    color: var(--ws-ink);
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -.018em;
}

h1 { font-size: clamp(2rem, 4.4vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.35rem); }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1rem; }

ul, ol { margin: 0; padding: 0; }

/* Keyboard users get the outline; mouse users do not. */
:focus-visible {
    outline: 3px solid rgba(60, 83, 90, .45);
    outline-offset: 2px;
    border-radius: 4px;
}

.ws-skip-link {
    position: absolute;
    inset-block-start: -60px;
    inset-inline-start: 16px;
    z-index: 200;
    padding: 10px 18px;
    background: var(--ws-primary);
    color: #fff;
    border-radius: 0 0 var(--ws-radius-sm) var(--ws-radius-sm);
    transition: inset-block-start var(--ws-transition);
}

.ws-skip-link:focus {
    inset-block-start: 0;
    color: #fff;
}

/* --------------------------------------------------------------- layout -- */
/* Fluid container (Bootstrap `container-fluid` behaviour): full viewport width
   with a small gutter, instead of the old 1180px centred column. */
.ws-container {
    width: 100%;
    max-width: none;
    margin-inline: auto;
    padding-inline: clamp(16px, 3vw, 40px);
}

/* Opt-in reading column for long-form copy (legal pages, FAQs). */
.ws-container--narrow {
    max-width: var(--ws-container);
}

.ws-section {
    padding-block: clamp(48px, 7vw, 92px);
}

.ws-section--tight { padding-block: clamp(32px, 4vw, 56px); }

/* For pages that open with a section instead of a page head: enough top room
   to clear the floating .ws-fab controls. */
.ws-section--below-fab { padding-block-start: clamp(88px, 9vw, 108px); }

.ws-section--soft { background: var(--ws-gradient-soft); }

.ws-section--warm { background: var(--ws-gradient-warm); }

.ws-section--mist { background: var(--ws-gradient-mist); }

.ws-section--cool { background: var(--ws-gradient-cool); }

.ws-section--surface { background: var(--ws-surface); }

/* Dark surface for a feature section (home → subscription plans). White cards
   on a deep brand gradient, so the section breaks the run of pale panels. */
.ws-section--dark {
    position: relative;
    isolation: isolate;
    background-color: #24383e;
    background-image:
        radial-gradient(820px 440px at 10% -12%, rgba(107, 176, 134, .26), transparent 66%),
        radial-gradient(760px 420px at 94% 114%, rgba(14, 86, 85, .62), transparent 70%),
        linear-gradient(140deg, #3c535a 0%, #1b3d42 54%, #0e5655 100%);
    color: rgba(255, 255, 255, .76);
    overflow: hidden;
}

/* Botanical hairlines top and bottom, fading at the ends — the same edge
   treatment as the stats band, so the two dark areas read as one family. */
.ws-section--dark::before,
.ws-section--dark::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(107, 176, 134, .55) 24%,
                                rgba(107, 176, 134, .55) 76%, transparent);
}

.ws-section--dark::before { inset-block-start: 0; }
.ws-section--dark::after { inset-block-end: 0; }

.ws-section--dark .ws-section-head h2 { color: #fff; }

.ws-section--dark .ws-section-head p { color: rgba(255, 255, 255, .72); }

.ws-section--dark .ws-eyebrow {
    border-color: rgba(107, 176, 134, .45);
    background: rgba(255, 255, 255, .08);
    color: #d6efe0;
}

/* Cards keep their white body; only the shadow is deepened so they lift off
   the dark ground rather than floating on a grey halo. */
.ws-section--dark .ws-plan {
    border-color: rgba(255, 255, 255, .12);
    box-shadow: 0 24px 50px rgba(0, 0, 0, .3);
}

.ws-section--dark .ws-plan:hover {
    border-color: rgba(107, 176, 134, .5);
    box-shadow: 0 36px 70px rgba(0, 0, 0, .38);
}

/* Ghost buttons invert on the dark ground. */
.ws-section--dark .ws-btn--ghost {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .28);
    color: #fff;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: none;
}

.ws-section--dark .ws-btn--ghost:hover {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(107, 176, 134, .6);
    color: #fff;
}

.ws-grid {
    display: grid;
    gap: var(--ws-gap);
}

/* Grid and flex children default to min-width:auto, which lets wide content
   (a horizontal slider, a long table) blow the column out past the viewport.
   Pinning it to 0 keeps every column inside its track. */
.ws-grid > *,
.ws-hero__inner > *,
.ws-appdl__inner > * {
    min-width: 0;
}

.ws-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ws-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ws-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.ws-grid--auto {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* Stat strip — wide enough that long figures like "8,000,000+" never clip. */
.ws-grid--stats { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* Asymmetric two-column layouts (form + sidebar) that collapse on tablets. */
.ws-grid--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.ws-grid--split-reverse { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.ws-grid--split,
.ws-grid--split-reverse { gap: clamp(24px, 4vw, 44px); align-items: start; }

/* Checkout: the form carries most of the interaction (day chips, two-up field
   rows), so it gets appreciably more room than the summary beside it. */
.ws-checkout {
    grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 44px);
    align-items: start;
}

/* Every form panel stacks in the left column so the summary is always the
   right-hand column, however many sections the form grows to. */
.ws-checkout__main {
    display: grid;
    gap: 24px;
    min-width: 0;
}

/* The summary follows the form down — the totals and Proceed button stay in
   view while the customer works through the fields. */
.ws-checkout__summary {
    position: sticky;
    inset-block-start: 88px;
    min-width: 0;
}

/* Sticky only helps while the summary is beside the form; once the layout
   stacks it would just pin a panel over the fields. */
@media (max-width: 992px) {
    .ws-checkout__summary { position: static; }
}

/* ------------------------------------------------------- section header -- */
.ws-section-head {
    max-width: 760px;
    margin-inline: auto;
    margin-block-end: clamp(32px, 4.4vw, 56px);
    text-align: center;
}

.ws-section-head h2 {
    margin-block-end: .45em;
    font-size: clamp(1.7rem, 3.2vw, 2.5rem);
    letter-spacing: -.028em;
    text-wrap: balance;
}

.ws-section-head--start {
    margin-inline: 0;
    text-align: start;
}

.ws-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-block-end: 16px;
    padding: 7px 18px;
    border: 1px solid rgba(107, 176, 134, .34);
    border-radius: var(--ws-radius-pill);
    background: linear-gradient(120deg, rgba(107, 176, 134, .16), rgba(236, 219, 198, .34));
    color: var(--ws-primary-darker);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* Botanical dot ahead of the label, unless the chip already carries an icon. */
.ws-eyebrow::before {
    content: '';
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: 50%;
    background: var(--ws-logo-lime);
}

.ws-hero .ws-eyebrow::before { content: none; }

.ws-section-head p {
    margin-block-end: 0;
    color: var(--ws-muted);
    font-size: 1.02rem;
    line-height: 1.75;
    text-wrap: pretty;
}

/* ---------------------------------------------------------------- icons -- */
.ws-icon {
    width: 1.15em;
    height: 1.15em;
    flex: none;
    vertical-align: middle;
}

.ws-icon--lg { width: 1.6em; height: 1.6em; }
.ws-icon--xl { width: 2.1em; height: 2.1em; }

/* Directional glyphs flip with the writing direction. */
[dir="rtl"] .ws-icon--flip { transform: scaleX(-1); }

.ws-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: linear-gradient(140deg, #3c535a, #0e5655);
    color: #fff;
    box-shadow: 0 10px 22px rgba(14, 86, 85, .22),
    inset 0 0 0 1px rgba(107, 176, 134, .32);
}

.ws-icon-badge--soft {
    background: var(--ws-primary-soft);
    color: var(--ws-primary-dark);
    box-shadow: none;
}

.ws-icon-badge--round {
    border-radius: 50%;
    background: var(--ws-primary-darker);
    box-shadow: none;
}

/* ---------------------------------------------------------- stats band -- */
/* Full-bleed strip directly under the hero: five figures in one row,
   separated by hairlines rather than boxed into pills. */
/* Deliberately dark. The hero above it is a pale mint/cream gradient, so any
   light tint here read as a continuation of the hero rather than a band in its
   own right. Charcoal into evergreen, both from the brand palette. */
.ws-stats-band {
    position: relative;
    padding-block: clamp(26px, 3.2vw, 44px);
    background-color: #2f474e;
    background-image:
        radial-gradient(760px 300px at 18% -40%, rgba(107, 176, 134, .34), transparent 70%),
        radial-gradient(640px 280px at 88% 140%, rgba(14, 86, 85, .55), transparent 72%),
        linear-gradient(126deg, #3c535a 0%, #0e5655 100%);
    overflow: hidden;
}

/* Botanical hairline along the top edge, fading out at both ends — ties the
   dark band back to the pale hero sitting on it. */
.ws-stats-band::before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(107, 176, 134, .65) 22%,
                                rgba(107, 176, 134, .65) 78%, transparent);
}

.ws-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    list-style: none;
}

.ws-stat-pill {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1vw, 14px);
    min-width: 0;
    padding: clamp(6px, 1vw, 12px) clamp(12px, 1.4vw, 22px);
    /* Hairline dividers instead of five separate pills. */
    border-inline-start: 1px solid rgba(255, 255, 255, .13);
}

.ws-stats > .ws-stat-pill:first-child { border-inline-start: 0; }

.ws-stat-pill__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: clamp(40px, 3vw, 46px);
    height: clamp(40px, 3vw, 46px);
    /* Squircle, not a circle: reads as a modern badge beside the figure and
       keeps its shape when the icon glyph is wide. */
    border-radius: 15px;
    border: 1px solid rgba(107, 176, 134, .5);
    background: linear-gradient(140deg, rgba(107, 176, 134, .32), rgba(107, 176, 134, .08));
    color: #cdebd9;
    transition: background var(--ws-transition), color var(--ws-transition),
    transform var(--ws-transition), box-shadow var(--ws-transition);
}

.ws-stat-pill:hover .ws-stat-pill__icon {
    background: var(--ws-logo-lime);
    border-color: var(--ws-logo-lime);
    color: #14362a;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(107, 176, 134, .34);
}

/* Figure on the first line, label underneath. */
.ws-stat-pill__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    line-height: 1.15;
}

.ws-stat-pill__text strong {
    color: #fff;
    font-size: clamp(1.25rem, 1.7vw, 1.7rem);
    font-weight: 800;
    letter-spacing: -.02em;
    /* Even digit widths keep the five figures optically aligned. */
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Sentence case and no tracking: uppercase pushed the longer labels
   ("Nutritious Meals Served", "Business Partnerships") onto a second line. */
.ws-stat-pill__text > span {
    color: rgba(255, 255, 255, .7);
    font-size: clamp(.74rem, .86vw, .86rem);
    font-weight: 500;
    letter-spacing: 0;
    white-space: nowrap;
}

@media (max-width: 1200px) {
    .ws-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    /* Row starts carry no divider, and stacked rows get breathing room. */
    .ws-stat-pill { padding-block: 14px; }
    .ws-stats > .ws-stat-pill:nth-child(3n + 1) { border-inline-start: 0; }
    .ws-stats > .ws-stat-pill:nth-child(n + 4) { border-block-start: 1px solid rgba(255, 255, 255, .1); }
}

@media (max-width: 768px) {
    .ws-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .ws-stats > .ws-stat-pill:nth-child(3n + 1) { border-inline-start: 1px solid rgba(255, 255, 255, .13); }
    .ws-stats > .ws-stat-pill:nth-child(2n + 1) { border-inline-start: 0; }
    .ws-stats > .ws-stat-pill:nth-child(n + 3) { border-block-start: 1px solid rgba(255, 255, 255, .1); }

    .ws-stat-pill__icon { width: 40px; height: 40px; border-radius: 13px; }
}

@media (max-width: 520px) {
    .ws-stats { grid-template-columns: 1fr; }

    .ws-stats > .ws-stat-pill { border-inline-start: 0; }
    .ws-stats > .ws-stat-pill + .ws-stat-pill { border-block-start: 1px solid rgba(255, 255, 255, .1); }
}

@media (prefers-reduced-motion: reduce) {
    .ws-stat-pill__icon,
    .ws-stat-pill:hover .ws-stat-pill__icon { transition: none; transform: none; }
}

/* --------------------------------------------------------- meal detail -- */
/* Labelled badges. The category and meal-type vocabularies overlap ("Lunch" is
   both), so the label is what tells the two apart. */
.ws-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-block-end: 26px;
    list-style: none;
}

.ws-tag {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    padding: 7px 14px;
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius-pill);
    background: var(--ws-surface);
    box-shadow: var(--ws-shadow-xs);
}

.ws-tag__label {
    color: var(--ws-muted);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.ws-tag__value {
    color: var(--ws-ink);
    font-size: .88rem;
    font-weight: 700;
}

.ws-tag--flag {
    border-color: rgba(246, 166, 9, .4);
    background: var(--ws-accent-soft);
    color: var(--ws-warning);
    font-size: .82rem;
    font-weight: 700;
}

/* The dish, opening the page on the dark brand ground: the photo is the subject
   and a dark field makes it read like a plate under a spotlight. */
.ws-meal-hero {
    position: relative;
    background-color: #16302f;
    background-image:
        radial-gradient(900px 540px at 88% -14%, rgba(107, 176, 134, .3), transparent 60%),
        radial-gradient(760px 520px at 2% 108%, rgba(14, 86, 85, .55), transparent 62%),
        linear-gradient(168deg, #24454a 0%, #183434 54%, #0d2120 100%);
    overflow: hidden;
    color: rgba(255, 255, 255, .74);
}

/* Fading botanical hairlines top and bottom, as on the other dark sections. */
.ws-meal-hero::before,
.ws-meal-hero::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(107, 176, 134, .45), transparent);
}

.ws-meal-hero::before { inset-block-start: 0; }
.ws-meal-hero::after { inset-block-end: 0; }

/* Even 50/50 split, image beside the copy, centred on each other. */
.ws-meal-detail {
    gap: clamp(26px, 4.4vw, 56px);
    align-items: center;
}

.ws-meal-detail__media {
    position: relative;
    border-radius: clamp(20px, 2.4vw, 30px);
    overflow: hidden;
    background: var(--ws-surface);
    /* Depth against the dark ground, a soft ring and the flat botanical card
       peeking out behind the start edge. */
    box-shadow:
        0 34px 68px rgba(0, 0, 0, .42),
        0 10px 24px rgba(0, 0, 0, .22),
        0 0 0 1px rgba(255, 255, 255, .14),
        -14px 16px 0 -7px rgba(107, 176, 134, .34);
    aspect-ratio: 4 / 3;
    transition: transform var(--ws-transition), box-shadow var(--ws-transition);
}

[dir="rtl"] .ws-meal-detail__media {
    box-shadow:
        0 34px 68px rgba(0, 0, 0, .42),
        0 10px 24px rgba(0, 0, 0, .22),
        0 0 0 1px rgba(255, 255, 255, .14),
        14px 16px 0 -7px rgba(107, 176, 134, .34);
}

.ws-meal-detail__media:hover { transform: translateY(-4px); }

.ws-meal-detail__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s ease;
}

.ws-meal-detail__media:hover img { transform: scale(1.04); }

/* Copy column on the dark ground: frosted chips, white type, brand actions. */
.ws-meal-detail__copy .ws-tags { margin-block-end: 16px; }

.ws-meal-detail__copy .ws-tag {
    border-color: rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .09);
    box-shadow: none;
    backdrop-filter: blur(6px);
}

.ws-meal-detail__copy .ws-tag__label { color: #9ed9b6; }

.ws-meal-detail__copy .ws-tag__value { color: #fff; }

.ws-tag--new {
    border-color: rgba(107, 176, 134, .5);
    background: rgba(107, 176, 134, .2);
    color: #d6f2e2;
    font-size: .82rem;
    font-weight: 700;
}

.ws-tag--muted {
    border-color: rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .62);
    font-size: .82rem;
    font-weight: 700;
}

.ws-meal-detail__lead {
    max-width: 56ch;
    color: rgba(255, 255, 255, .72);
    line-height: 1.8;
}

/* Recorded figures: calories, weight, how many portion sizes exist. */
.ws-meal-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-block: 20px 0;
    padding: 0;
    list-style: none;
}

.ws-meal-facts li {
    min-width: 108px;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 16px;
    background: rgba(255, 255, 255, .07);
}

.ws-meal-facts__value {
    display: block;
    color: #fff;
    font-size: 1.3rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.ws-meal-facts__value small { font-size: .62em; font-weight: 700; margin-inline-start: 2px; }

.ws-meal-facts__label {
    display: block;
    margin-block-start: 4px;
    color: rgba(255, 255, 255, .58);
    font-size: .76rem;
    font-weight: 600;
}

/* Plan and ingredient groups. */
.ws-meal-block { margin-block-start: clamp(20px, 2.4vw, 28px); }

.ws-meal-block__title {
    margin: 0 0 10px;
    color: rgba(255, 255, 255, .56);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.ws-meal-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ws-meal-chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 15px;
    border: 1px solid rgba(107, 176, 134, .4);
    border-radius: var(--ws-radius-pill);
    background: rgba(107, 176, 134, .16);
    color: #d6f2e2;
    font-size: .84rem;
    font-weight: 700;
    transition: background var(--ws-transition), color var(--ws-transition),
                border-color var(--ws-transition);
}

a.ws-meal-chip:hover {
    background: #fff;
    border-color: #fff;
    color: var(--ws-primary-dark);
}

.ws-meal-chip--plain {
    border-color: rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .78);
    font-weight: 600;
}

.ws-meal-chip--plain.is-muted { color: rgba(255, 255, 255, .5); font-style: italic; }

.ws-meal-detail__copy .ws-btn-row { margin-block-start: clamp(24px, 2.8vw, 32px); }

.ws-meal-detail__copy .ws-btn-row .ws-btn { padding-block: 14px; padding-inline: 28px; }

.ws-meal-detail__copy .ws-btn--ghost {
    border-color: rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.ws-meal-detail__copy .ws-btn--ghost:hover {
    background: #fff;
    border-color: #fff;
    color: var(--ws-primary-dark);
}

/* Related dishes: the head carries a link into the full category listing. */
.ws-related__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 28px;
    margin-block-end: clamp(22px, 2.6vw, 30px);
}

.ws-related__title {
    margin: 12px 0 0;
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    line-height: 1.16;
    letter-spacing: -.026em;
    background: linear-gradient(104deg, #3c535a 18%, #0e5655 82%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ws-related__lead {
    margin: 6px 0 0;
    color: var(--ws-muted);
    font-size: .9rem;
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .ws-meal-detail__media:hover { transform: none; }
    .ws-meal-detail__media:hover img { transform: none; }
}

/* Meal names run long (up to ~80 characters), so they wrap to two or three
   lines — the global 1.25 heading line-height is too tight at this size. */
.ws-meal-detail__title {
    margin-block-end: 14px;
    color: #fff;
    font-size: clamp(1.5rem, 2.8vw, 2.3rem);
    line-height: 1.22;
    letter-spacing: -.026em;
    text-wrap: balance;
}

/* Macro tiles. auto-fit, because how many render depends on which figures the
   kitchen has filled in for that portion size. */
.ws-macros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
    gap: 12px;
}

/* Portion sizes side by side, one column each. */
.ws-portions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
}

.ws-portion + .ws-portion {
    padding-inline-start: 16px;
    border-inline-start: 1px solid var(--ws-line);
}

.ws-portion__size {
    display: block;
    margin-block-end: 8px;
    color: var(--ws-muted);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ws-macro {
    padding: 14px 12px;
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius);
    background: var(--ws-primary-softer);
    text-align: center;
}

.ws-macro__value {
    display: block;
    color: var(--ws-primary-darker);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
}

.ws-macro__value small { font-size: .72rem; font-weight: 700; margin-inline-start: 2px; }

.ws-macro__label {
    display: block;
    margin-block-start: 4px;
    color: var(--ws-muted);
    font-size: .8rem;
}

@media (max-width: 992px) {
    .ws-meal-detail { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------- clients -- */
/* Logos are supplied as 300x150 JPEGs on white, so they are desaturated to sit
   quietly together and colourise on hover/focus. The row runs as a marquee:
   the markup repeats the list twice and the track slides exactly half its
   width, so the loop has no visible seam. */
.ws-clients {
    position: relative;
    /* Full-bleed: the rail runs edge to edge inside the section container. */
    margin-inline: calc(clamp(16px, 3vw, 40px) * -1);
    overflow: hidden;
    /* Both ends fade out instead of cutting a logo in half. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.ws-clients__track {
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.6vw, 24px);
    width: max-content;
    padding-block: 6px;
    list-style: none;
    animation: ws-clients-marquee 46s linear infinite;
}

/* Hovering holds the rail still so a logo can be read. */
.ws-clients:hover .ws-clients__track,
.ws-clients:focus-within .ws-clients__track { animation-play-state: paused; }

@keyframes ws-clients-marquee {
    from { transform: translate3d(0, 0, 0); }
    /* Half the track is the first copy of the list. */
    to   { transform: translate3d(-50%, 0, 0); }
}

/* RTL lays the track out right to left, so the slide reverses with it. */
[dir="rtl"] .ws-clients__track { animation-name: ws-clients-marquee-rtl; }

@keyframes ws-clients-marquee-rtl {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(50%, 0, 0); }
}

.ws-clients__item {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: clamp(150px, 15vw, 200px);
    height: clamp(76px, 7vw, 96px);
    padding: 14px 18px;
    border: 1px solid rgba(60, 83, 90, .08);
    border-radius: var(--ws-radius);
    background: #fff;
    box-shadow: var(--ws-shadow-xs);
    transition: transform var(--ws-transition), box-shadow var(--ws-transition),
    border-color var(--ws-transition);
}

.ws-clients__item:hover {
    transform: translateY(-3px);
    border-color: rgba(107, 176, 134, .4);
    box-shadow: var(--ws-shadow-sm);
}

.ws-clients__item img {
    width: 100%;
    max-width: 160px;
    height: auto;
    filter: grayscale(1);
    opacity: .66;
    mix-blend-mode: multiply;
    transition: filter var(--ws-transition), opacity var(--ws-transition);
}

.ws-clients__item:hover img {
    filter: grayscale(0);
    opacity: 1;
}

/* No motion: drop the duplicate pass and let the logos wrap as a centred row.*/
@media (prefers-reduced-motion: reduce) {
    .ws-clients {
        -webkit-mask-image: none;
        mask-image: none;
    }

    .ws-clients__track {
        flex-wrap: wrap;
        justify-content: center;
        width: auto;
        animation: none;
    }

    .ws-clients__item--clone { display: none; }

    .ws-clients__item,
    .ws-clients__item:hover { transition: none; transform: none; }
}

/* ------------------------------------------------------------- outcomes -- */
/* Full-bleed band, eight row-cards four across. Row layout (badge beside the
   copy, not above it) is what lets a 4-across grid still hold the longest
   title and description in two lines each. */
/* Surface comes from .ws-section--dark on the same element; the band only adds
   the glow behind the grid. The dark modifier owns ::before/::after, so the
   glow hangs off the list instead. */
.ws-outcomes-band {
    position: relative;
    overflow: hidden;
}

/* Wide, low glow behind the cards — decoration only, never over them. */
.ws-outcomes::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    width: min(1100px, 90vw);
    aspect-ratio: 2 / 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(107, 176, 134, .22) 0%, rgba(107, 176, 134, 0) 70%);
    pointer-events: none;
}

/* Eight cards laid out 3 + 3 + 2. A six-column track with every card spanning
   two gives three per row; the trailing pair falls into columns 1-4, so the
   last row sits flush left under the two above it. */
.ws-outcomes {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--ws-gap);
    list-style: none;
}

.ws-outcomes > .ws-outcome { grid-column: span 2; }

/* Glass cards on the dark ground: a thin translucent fill rather than a solid
   panel, so the gradient behind stays visible. */
.ws-outcome {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: clamp(20px, 1.8vw, 26px) clamp(18px, 1.6vw, 24px);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: clamp(16px, 1.6vw, 22px);
    background: linear-gradient(140deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .04));
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .18);
    transition: transform var(--ws-transition), box-shadow var(--ws-transition),
    border-color var(--ws-transition), background var(--ws-transition);
}

.ws-outcome:hover {
    transform: translateY(-4px);
    border-color: rgba(107, 176, 134, .5);
    background: linear-gradient(140deg, rgba(255, 255, 255, .16), rgba(107, 176, 134, .1));
    box-shadow: 0 24px 48px rgba(0, 0, 0, .3);
}

.ws-outcome .ws-icon-badge {
    flex: none;
    width: 44px;
    height: 44px;
    margin-block-start: 2px;
    border: 1px solid rgba(107, 176, 134, .45);
    background: linear-gradient(140deg, rgba(107, 176, 134, .3), rgba(107, 176, 134, .08));
    color: #e4f6ec;
    box-shadow: none;
    transition: background var(--ws-transition), color var(--ws-transition),
    border-color var(--ws-transition);
}

/* The glyph runs small inside a 44px badge at the inherited font size. */
.ws-outcome .ws-icon-badge .ws-icon {
    width: 1.45em;
    height: 1.45em;
}

.ws-outcome:hover .ws-icon-badge {
    background: var(--ws-logo-lime);
    border-color: var(--ws-logo-lime);
    color: #14362a;
}

.ws-outcome__body { min-width: 0; }

/* Semi-bold, not the 800 the global heading rule applies — these read as card
   labels rather than section headings. */
.ws-outcome h4 {
    margin-block-end: 6px;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -.012em;
    text-wrap: balance;
}

.ws-outcome p {
    margin-block: 0;
    color: rgba(255, 255, 255, .68);
    font-size: .9rem;
    line-height: 1.66;
    text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
    .ws-outcome,
    .ws-outcome:hover { transition: none; transform: none; }
}

@media (max-width: 1100px) {
    .ws-outcomes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .ws-outcomes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* -------------------------------------------------------------- buttons -- */
.ws-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 26px;
    border: 1px solid transparent;
    border-radius: var(--ws-radius-pill);
    font-family: inherit;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: transform var(--ws-transition), box-shadow var(--ws-transition),
    background var(--ws-transition), color var(--ws-transition), border-color var(--ws-transition);
}

.ws-btn:hover { transform: translateY(-2px); }

.ws-btn:active { transform: translateY(0); }

.ws-btn--primary {
    background: var(--ws-gradient);
    color: #fff;
    box-shadow: var(--ws-shadow-primary);
}

.ws-btn--primary:hover {
    color: #fff;
    box-shadow: 0 18px 40px rgba(60, 83, 90, .34);
}

.ws-btn--ghost {
    background: var(--ws-surface);
    border-color: var(--ws-line);
    color: var(--ws-ink);
    box-shadow: var(--ws-shadow-sm);
}

.ws-btn--ghost:hover {
    border-color: var(--ws-primary);
    color: var(--ws-primary-dark);
}

.ws-btn--outline {
    background: transparent;
    border-color: currentColor;
    color: var(--ws-primary-dark);
}

.ws-btn--light {
    background: rgba(255, 255, 255, .16);
    color: #fff;
    border-color: rgba(255, 255, 255, .4);
}

.ws-btn--light:hover { background: rgba(255, 255, 255, .26); color: #fff; }

.ws-btn--danger {
    background: var(--ws-danger);
    color: #fff;
    box-shadow: 0 12px 26px rgba(226, 68, 92, .26);
}

.ws-btn--danger:hover { color: #fff; }

.ws-btn--block { width: 100%; }

.ws-btn--sm { padding: 9px 18px; font-size: .85rem; }

.ws-btn[disabled],
.ws-btn.is-loading {
    opacity: .6;
    pointer-events: none;
}

.ws-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* ---------------------------------------------------------------- cards -- */
.ws-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--ws-surface);
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius-lg);
    box-shadow: var(--ws-shadow-sm);
    overflow: hidden;
    transition: transform var(--ws-transition), box-shadow var(--ws-transition),
    border-color var(--ws-transition);
}

.ws-card--hover:hover {
    transform: translateY(-6px);
    box-shadow: var(--ws-shadow-lg);
    border-color: rgba(60, 83, 90, .28);
}

.ws-card__body {
    padding: 26px;
    flex: 1 1 auto;
}

.ws-card__footer {
    padding: 0 26px 26px;
}

/* Feature / benefit card ---------------------------------------------- */
.ws-feature {
    position: relative;
    isolation: isolate;
    padding: clamp(26px, 2.4vw, 34px) clamp(22px, 2vw, 30px);
    background: var(--ws-surface);
    border: 1px solid rgba(60, 83, 90, .08);
    border-radius: clamp(20px, 2vw, 26px);
    box-shadow: var(--ws-shadow-sm);
    overflow: hidden;
    transition: transform var(--ws-transition), box-shadow var(--ws-transition),
    border-color var(--ws-transition);
}

/* Botanical wash that fades in from the top corner on hover — the card keeps
   its white base, so the body copy never loses contrast. */
.ws-feature::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset-block-start: 0;
    inset-inline-end: 0;
    width: 60%;
    aspect-ratio: 1;
    background: radial-gradient(circle at 100% 0, rgba(107, 176, 134, .22), transparent 70%);
    opacity: .45;
    transition: opacity var(--ws-transition);
}

/* Brand rule along the top edge, drawn from the start edge on hover. */
.ws-feature::after {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--ws-logo-lime), rgba(14, 86, 85, .85));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}

[dir="rtl"] .ws-feature::after { transform-origin: right center; }

.ws-feature:hover {
    transform: translateY(-6px);
    border-color: rgba(107, 176, 134, .34);
    box-shadow: 0 26px 54px rgba(60, 83, 90, .14), 0 6px 16px rgba(60, 83, 90, .06);
}

.ws-feature:hover::before { opacity: 1; }

.ws-feature:hover::after { transform: scaleX(1); }

.ws-feature .ws-icon-badge {
    transition: transform var(--ws-transition), box-shadow var(--ws-transition),
    background var(--ws-transition);
}

.ws-feature:hover .ws-icon-badge {
    transform: translateY(-3px) rotate(-4deg);
    box-shadow: 0 14px 28px rgba(14, 86, 85, .28);
}

/* Badge colours cycle through the brand palette so a row of four cards has
   rhythm instead of four identical dark squares. */
.ws-grid > .ws-feature:nth-child(4n + 2) .ws-icon-badge {
    background: linear-gradient(140deg, #0e5655, #6bb086);
}

.ws-grid > .ws-feature:nth-child(4n + 3) .ws-icon-badge {
    background: linear-gradient(140deg, #475627, #6bb086);
}

.ws-grid > .ws-feature:nth-child(4n + 4) .ws-icon-badge {
    background: linear-gradient(140deg, #3c535a, #e7670d);
}

.ws-feature h4 {
    margin-block: 20px 10px;
    font-size: 1.12rem;
    letter-spacing: -.015em;
}

.ws-feature p {
    margin: 0;
    color: var(--ws-muted);
    font-size: .95rem;
    line-height: 1.7;
    text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
    .ws-feature,
    .ws-feature:hover,
    .ws-feature .ws-icon-badge,
    .ws-feature:hover .ws-icon-badge { transition: none; transform: none; }

    .ws-feature::after { transition: none; }
}

/* Stat card ------------------------------------------------------------ */
.ws-stat {
    padding: 26px 20px;
    border-radius: var(--ws-radius);
    background: var(--ws-surface);
    border: 1px solid var(--ws-line);
    box-shadow: var(--ws-shadow-sm);
    text-align: center;
}

.ws-stat__value {
    display: block;
    background: var(--ws-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: clamp(1.45rem, 2.4vw, 1.95rem);
    font-weight: 600;
    line-height: 1.15;
    white-space: nowrap;
}

.ws-stat__label {
    color: var(--ws-muted);
    font-size: .88rem;
    font-weight: 600;
}

/* Plan card ------------------------------------------------------------ */
.ws-plan {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    padding: clamp(28px, 2.6vw, 38px) clamp(24px, 2.2vw, 32px) clamp(26px, 2.4vw, 34px);
    border-radius: clamp(20px, 2vw, 28px);
    background: var(--ws-surface);
    border: 1px solid rgba(60, 83, 90, .08);
    box-shadow: var(--ws-shadow-sm);
    transition: transform var(--ws-transition), box-shadow var(--ws-transition),
    border-color var(--ws-transition);
    overflow: hidden;
}

/* Category accent along the top edge. The inline --ws-plan-accent carries the
   category colour managed in admin, so each card keeps its own identity. */
.ws-plan::before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 5px;
    background: var(--ws-plan-accent, linear-gradient(90deg, var(--ws-logo-lime), #0e5655));
}

/* Tint bleeding down from the header area — keeps the price block sitting on
   colour without touching the white body of the card. */
.ws-plan::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset-block-start: 0;
    inset-inline: 0;
    height: 190px;
    background: linear-gradient(180deg, rgba(107, 176, 134, .13), transparent 78%);
    opacity: .9;
    transition: opacity var(--ws-transition);
}

.ws-plan:hover {
    transform: translateY(-8px);
    border-color: rgba(107, 176, 134, .34);
    box-shadow: 0 30px 60px rgba(60, 83, 90, .16), 0 8px 20px rgba(60, 83, 90, .06);
}

.ws-plan:hover::after { opacity: 1; }

/* Chip rather than bare caps — it reads as a label and picks up the accent. */
.ws-plan__category {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 6px 14px;
    border: 1px solid rgba(107, 176, 134, .34);
    border-radius: var(--ws-radius-pill);
    background: rgba(255, 255, 255, .72);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ws-primary-dark);
}

.ws-plan__title {
    margin-block: 16px 8px;
    font-size: 1.3rem;
    letter-spacing: -.02em;
}

.ws-plan p.ws-text-muted {
    margin-block-end: 0;
    font-size: .93rem;
    line-height: 1.7;
    text-wrap: pretty;
}

.ws-plan__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-block: clamp(18px, 2vw, 24px) 0;
}

.ws-plan__amount {
    color: var(--ws-ink);
    font-size: clamp(2.1rem, 2.8vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -.035em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.ws-plan__currency {
    color: var(--ws-muted);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* The struck price sits in its own chip so the discount reads at a glance. */
.ws-plan__was {
    padding: 3px 10px;
    border-radius: var(--ws-radius-pill);
    background: var(--ws-danger-soft);
    color: var(--ws-danger);
    font-size: .8rem;
    font-weight: 600;
    text-decoration: line-through;
}

.ws-plan__meta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-block: clamp(20px, 2.2vw, 26px) clamp(22px, 2.4vw, 28px);
    padding-block-start: clamp(18px, 2vw, 22px);
    border-block-start: 1px solid rgba(60, 83, 90, .09);
}

.ws-plan__meta li {
    display: flex;
    align-items: center;
    gap: 11px;
    list-style: none;
    color: var(--ws-body);
    font-size: .92rem;
    font-weight: 500;
}

/* Tick in a soft botanical disc — the row reads as a feature, not a bullet. */
.ws-plan__meta .ws-icon {
    box-sizing: content-box;
    flex: none;
    padding: 6px;
    border-radius: 50%;
    background: rgba(107, 176, 134, .16);
    color: #2f7b53;
}

.ws-plan__cta { margin-block-start: auto; }

.ws-plan__cta .ws-btn--primary {
    padding-block: 14px;
    background: linear-gradient(118deg, #3c535a, #0e5655);
    box-shadow: 0 12px 26px rgba(14, 86, 85, .22);
}

.ws-plan:hover .ws-btn--primary {
    box-shadow: 0 18px 34px rgba(14, 86, 85, .3);
}

/* Arrow steps forward on hover, in whichever direction the page runs. */
.ws-plan__cta .ws-icon {
    transition: transform var(--ws-transition);
}

.ws-plan:hover .ws-plan__cta .ws-icon { transform: translateX(4px); }

[dir="rtl"] .ws-plan:hover .ws-plan__cta .ws-icon { transform: scaleX(-1) translateX(4px); }

@media (prefers-reduced-motion: reduce) {
    .ws-plan,
    .ws-plan:hover,
    .ws-plan__cta .ws-icon,
    .ws-plan:hover .ws-plan__cta .ws-icon { transition: none; transform: none; }
}

.ws-plan__ribbon {
    position: absolute;
    inset-block-start: 18px;
    inset-inline-end: 18px;
    padding: 5px 14px;
    border-radius: var(--ws-radius-pill);
    background: var(--ws-accent-soft);
    color: var(--ws-warning);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Meal card ------------------------------------------------------------ */
/* The whole card is the link, so colour has to be reset off the <a>. */
.ws-meal {
    display: flex;
    flex-direction: column;
    background: var(--ws-surface);
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius-lg);
    box-shadow: var(--ws-shadow-sm);
    overflow: hidden;
    color: inherit;
    transition: transform var(--ws-transition), box-shadow var(--ws-transition), border-color var(--ws-transition);
}

.ws-meal:hover,
.ws-meal:focus-visible {
    transform: translateY(-6px);
    border-color: rgba(60, 83, 90, .35);
    box-shadow: var(--ws-shadow-lg);
    color: inherit;
}

.ws-meal:hover .ws-meal__title { color: var(--ws-primary-dark); }

.ws-meal__media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--ws-gradient-soft);
    overflow: hidden;
}

.ws-meal__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.ws-meal:hover .ws-meal__media img { transform: scale(1.06); }

/* Calorie badge over the photo — the figure people scan for first, so it gets
   the strongest slot on the card instead of the category name. */
.ws-meal__tag {
    position: absolute;
    inset-block-start: 12px;
    inset-inline-start: 12px;
    padding: 6px 13px;
    border-radius: var(--ws-radius-pill);
    background: rgba(255, 255, 255, .94);
    color: var(--ws-primary-darker);
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: var(--ws-shadow-sm);
}

.ws-meal__body { padding: 18px 20px 22px; }

/* One line, ellipsised — meal names vary wildly in length and a two-line name
   pushes the macro chips out of alignment across the grid. */
.ws-meal__title {
    margin: 0 0 6px;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--ws-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ws-meal__desc {
    margin: 0 0 14px;
    color: var(--ws-muted);
    font-size: .88rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ws-meal__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ws-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--ws-radius-pill);
    background: var(--ws-primary-softer);
    color: var(--ws-primary-darker);
    font-size: .76rem;
    font-weight: 700;
}

/* Blog card ------------------------------------------------------------ */
.ws-blog {
    display: flex;
    flex-direction: column;
    background: var(--ws-surface);
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius-lg);
    box-shadow: var(--ws-shadow-sm);
    overflow: hidden;
    transition: transform var(--ws-transition), box-shadow var(--ws-transition);
}

.ws-blog:hover { transform: translateY(-6px); box-shadow: var(--ws-shadow-lg); }

/* Fixed 16:9 window: the artwork is absolutely placed inside it, so a square
   or portrait upload cannot stretch the card taller than its neighbours. */
.ws-blog__media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--ws-gradient-soft);
}

.ws-blog__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------------------------------------------------------- masonry -- */
/* CSS columns rather than a grid: card heights vary with the artwork, and
   `grid-template-rows: masonry` still is not broadly shipped. Note this fills
   column by column, so reading order runs down each column, not across. */
.ws-masonry {
    columns: 3;
    column-gap: var(--ws-gap);
}

.ws-masonry > * {
    break-inside: avoid;
    /* Safari still needs the legacy pair to honour break-inside in columns. */
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin-block-end: var(--ws-gap);
}

/* The card is flex elsewhere; inside a column it has to be a plain block or
   the column algorithm cannot split around it. */
.ws-masonry .ws-blog { display: block; }

/* Images keep their natural proportions here — that is the whole point. */
.ws-masonry .ws-blog__media {
    position: relative;
    aspect-ratio: auto;
    line-height: 0;
}

.ws-masonry .ws-blog__media img { height: auto; object-fit: contain; }

@media (max-width: 1080px) {
    .ws-masonry { columns: 2; }
}

@media (max-width: 640px) {
    .ws-masonry { columns: 1; }
}

.ws-blog__body { padding: 20px 22px 24px; }

/* Badge over the artwork, top end corner. */
.ws-blog__cat {
    position: absolute;
    inset-block-start: 12px;
    inset-inline-end: 12px;
    z-index: 1;
    max-width: calc(100% - 24px);
    padding: 9px 18px;
    border-radius: var(--ws-radius-pill);
    background: rgba(60, 83, 90, .94);
    box-shadow: 0 8px 20px rgba(13, 33, 31, .26);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ws-blog__title {
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.5;
    letter-spacing: -.012em;
}

/* ------------------------------------------------- floating nav controls -- */
/* There is no full-width header: a CTA pill and the menu trigger float over
   the page, and the menu itself is a full-screen two-pane overlay. */
.ws-fab {
    position: fixed;
    inset-block-start: 20px;
    inset-inline-end: 20px;
    z-index: 90;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* One height across the pill and the round buttons beside it. */
.ws-fab__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding-inline: 30px;
    border-radius: var(--ws-radius-pill);
    background: var(--ws-gradient);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    box-shadow: var(--ws-shadow-primary);
    transition: transform var(--ws-transition), box-shadow var(--ws-transition);
}

.ws-fab__cta:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(60, 83, 90, .34);
}

.ws-fab__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--ws-ink);
    cursor: pointer;
    box-shadow: var(--ws-shadow);
    transition: transform var(--ws-transition), box-shadow var(--ws-transition), color var(--ws-transition);
}

.ws-fab__icon:hover { color: var(--ws-primary-dark); }

.ws-fab__icon:hover { transform: translateY(-2px); box-shadow: var(--ws-shadow-lg); }

.ws-fab__icon .ws-icon { width: 1.4em; height: 1.4em; stroke-width: 2.2; }

/* --------------------------------------------------- full screen menu -- */
.ws-menu {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    grid-template-columns: 58% 42%;
    background: var(--ws-surface);
    animation: ws-menu-in .28s ease;
}

.ws-menu[hidden] { display: none; }

@keyframes ws-menu-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Left pane: brand on a dark field, download band pinned to the bottom. */
.ws-menu__brand {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: #1b3d42;
    background:
        radial-gradient(120% 90% at 0% 0%, rgba(107, 176, 134, .3), transparent 58%),
        radial-gradient(110% 85% at 100% 100%, rgba(14, 86, 85, .55), transparent 62%),
        linear-gradient(165deg, #3c535a 0%, #244449 52%, #12272b 100%);
    overflow: hidden;
}

.ws-menu__logo {
    padding: 34px 48px 0;
}

.ws-menu__logo img { max-height: 90px; width: auto; }

/* Three framed app screens in the dark pane.

   Sized by HEIGHT, not width: the pane is whatever is left between the logo and
   the download band, so the phones have to shrink to fit it rather than bleed
   under the band. The frame declares the 9:19.5 screen ratio so nothing is
   cropped, and the preview inside is typed in container units so its content
   scales with the frame instead of overflowing it. */
.ws-menu__screens {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-height: 0;
    padding: 18px 16px 36px;
    perspective: 1700px;
}

/* Botanical halo behind the stack, so the devices sit on something. */
.ws-menu__screens::before {
    content: '';
    position: absolute;
    inset-block: 4% 10%;
    inset-inline: 10%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(107, 176, 134, .32), transparent 72%);
    filter: blur(30px);
    pointer-events: none;
}

.ws-menu__screens .ws-phone {
    position: relative;
    flex: 0 0 auto;
    width: auto;
    height: min(100%, 440px);
    margin: 0;
    padding: 6px;
    border-radius: 30px;
    background: linear-gradient(165deg, #34434c 0%, #10171b 100%);
    box-shadow: 0 26px 54px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .13);
    transition: transform .4s ease;
}

/* Earpiece slot — small device detail that sells the frame. */
.ws-menu__screens .ws-phone::after {
    content: '';
    position: absolute;
    inset-block-start: 15px;
    inset-inline-start: 50%;
    z-index: 3;
    width: 30%;
    height: 4px;
    border-radius: var(--ws-radius-pill);
    background: rgba(255, 255, 255, .22);
    transform: translateX(-50%);
}

.ws-menu__screens .ws-phone__screen {
    height: 100%;
    width: auto;
    aspect-ratio: 9 / 19.5;
    border-radius: 24px;
    container-type: inline-size;
}

.ws-menu__screens .ws-phone__screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

/* Preview typography keyed to the frame width (cqw), not the viewport, so the
   whole screen — card and all three tiles — lands inside the device. */
.ws-menu__screens .ws-app-preview__header { padding: 10% 8% 7%; }

.ws-menu__screens .ws-app-preview__content {
    padding: 7% 8% 8%;
    font-size: 4.1cqw;
}

.ws-menu__screens .ws-app-preview__card { margin-block: 8%; padding: 8%; }

.ws-menu__screens .ws-app-preview__tile { margin-block: 4%; padding: 7% 6%; }

/* The outer two turn away from the viewer instead of simply sliding under the
   middle one, which used to crop their headlines. */
.ws-menu__screens[data-count="3"] .ws-phone:not(:first-child) { margin-inline-start: -12px; }

.ws-menu__screens[data-count="3"] .ws-phone:nth-child(2) {
    z-index: 2;
    height: min(100%, 500px);
}

.ws-menu__screens[data-count="3"] .ws-phone:first-child {
    transform: translateY(4%) rotateY(15deg) scale(.95);
    transform-origin: 100% 50%;
    opacity: .96;
}

.ws-menu__screens[data-count="3"] .ws-phone:last-child {
    transform: translateY(4%) rotateY(-15deg) scale(.95);
    transform-origin: 0 50%;
    opacity: .96;
}

/* box-shadow and transform take no logical values, so RTL gets its own pair. */
[dir="rtl"] .ws-menu__screens[data-count="3"] .ws-phone:first-child {
    transform: translateY(4%) rotateY(-15deg) scale(.95);
    transform-origin: 0 50%;
}

[dir="rtl"] .ws-menu__screens[data-count="3"] .ws-phone:last-child {
    transform: translateY(4%) rotateY(15deg) scale(.95);
    transform-origin: 100% 50%;
}

.ws-menu__screens:hover .ws-phone:nth-child(2) { transform: translateY(-8px); }

.ws-menu__apps { position: relative; }

/* Sits next to the language switch on the white links pane, so it reads as the
   pane's one filled action. */
.ws-menu__join {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 26px;
    border-radius: var(--ws-radius-pill);
    background: linear-gradient(118deg, var(--ws-primary), var(--ws-primary-dark));
    color: #fff;
    font-size: .92rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 12px 26px rgba(14, 86, 85, .26);
    transition: transform var(--ws-transition), box-shadow var(--ws-transition), filter var(--ws-transition);
}

.ws-menu__join:hover {
    color: #fff;
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 16px 32px rgba(14, 86, 85, .34);
}

.ws-menu__join .ws-icon { color: var(--ws-accent); }

.ws-menu__join .ws-icon { width: 1em; height: 1em; }

.ws-menu__apps-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 22px 32px;
    padding: 30px 48px 34px;
    border-block-start: 1px solid rgba(107, 176, 134, .32);
    background:
        radial-gradient(95% 150% at 100% 0%, rgba(107, 176, 134, .26), transparent 62%),
        linear-gradient(118deg, rgba(8, 28, 30, .72), rgba(20, 50, 52, .5));
    backdrop-filter: blur(10px);
}

.ws-menu__apps-copy { flex: 1 1 240px; min-width: 0; }

.ws-menu__apps-title {
    margin: 0;
    color: #fff;
    font-size: clamp(1.35rem, 2vw, 1.9rem);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -.022em;
}

.ws-menu__apps-text {
    max-width: 36ch;
    margin: 8px 0 0;
    color: rgba(255, 255, 255, .72);
    font-size: .9rem;
    line-height: 1.65;
}

/* Frosted store buttons — the flat translucent fill washed out against the
   brand gradient behind it. */
.ws-store-btn--glass {
    padding: 11px 22px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .11);
    border: 1px solid rgba(255, 255, 255, .26);
    backdrop-filter: blur(8px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .28);
}

.ws-store-btn--glass:hover {
    background: #fff;
    border-color: #fff;
    color: var(--ws-primary-darker);
    transform: translateY(-2px);
}

.ws-menu__store-buttons { display: flex; flex-wrap: wrap; gap: 12px; }

/* Short viewports: the band was eating the pane and squeezing the phones down
   to thumbnails, so it gives height back on anything laptop-sized. */
@media (max-height: 880px) {
    .ws-menu__apps-inner { padding: 22px 36px 24px; gap: 16px 24px; }
    .ws-menu__apps-title { font-size: 1.4rem; }
    .ws-menu__apps-text { margin-block-start: 5px; font-size: .86rem; }
    .ws-menu__join { margin-block-start: 14px; padding: 10px 22px; font-size: .88rem; }
    .ws-store-btn--glass { padding: 9px 18px; }
    .ws-menu__logo { padding: 24px 36px 0; }
    .ws-menu__logo img { max-height: 64px; }
    .ws-menu__screens { padding-block: 10px 24px; }
}

/* Right pane: the links. */
/* Links start at the top of the pane, not centred in it, so the list reads
   from the first item down however many entries the nav grows to. */
.ws-menu__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 100px 56px 110px;
    overflow-y: auto;
}

.ws-menu__close {
    position: absolute;
    inset-block-start: 30px;
    inset-inline-end: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--ws-line);
    border-radius: 50%;
    background: var(--ws-surface);
    color: var(--ws-ink);
    cursor: pointer;
    box-shadow: var(--ws-shadow-sm);
    transition: background var(--ws-transition), border-color var(--ws-transition),
                color var(--ws-transition), transform var(--ws-transition), box-shadow var(--ws-transition);
}

.ws-menu__close .ws-icon { width: 1.25em; height: 1.25em; }

.ws-menu__close:hover {
    background: var(--ws-primary);
    border-color: var(--ws-primary);
    color: #fff;
    transform: rotate(90deg);
    box-shadow: var(--ws-shadow-primary);
}

.ws-menu__close:active { transform: rotate(90deg) scale(.94); }

.ws-menu__links { display: grid; gap: 4px; list-style: none; }

.ws-menu__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    border-radius: 14px;
    color: var(--ws-ink);
    font-size: clamp(.92rem, 1.05vw, 1.05rem);
    font-weight: 700;
    transition: color var(--ws-transition), background var(--ws-transition),
                padding-inline-start var(--ws-transition);
}

/* Botanical rail on the leading edge: it grows out of the centre on hover and
   stays put on the current page, so the active entry is readable at a glance
   and not just a slightly different shade of ink. */
.ws-menu__link::before {
    content: '';
    position: absolute;
    inset-block: 50%;
    inset-inline-start: 0;
    width: 3px;
    border-radius: var(--ws-radius-pill);
    background: linear-gradient(180deg, #6bb086, #0e5655);
    transition: inset-block var(--ws-transition);
}

/* Trailing dot, the quiet counterpart to the rail. */
.ws-menu__link::after {
    content: '';
    position: absolute;
    inset-inline-end: 16px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #6bb086;
    opacity: 0;
    transition: opacity var(--ws-transition);
}

.ws-menu__link .ws-icon {
    width: 1.2em;
    height: 1.2em;
    flex-shrink: 0;
    color: var(--ws-primary);
    transition: color var(--ws-transition), transform var(--ws-transition);
}

.ws-menu__link:hover,
.ws-menu__link:focus-visible {
    color: var(--ws-primary-dark);
    background: linear-gradient(90deg, rgba(107, 176, 134, .17), rgba(236, 219, 198, .24));
    padding-inline-start: 24px;
}

[dir="rtl"] .ws-menu__link:hover,
[dir="rtl"] .ws-menu__link:focus-visible {
    background: linear-gradient(270deg, rgba(107, 176, 134, .17), rgba(236, 219, 198, .24));
}

.ws-menu__link:hover::before,
.ws-menu__link:focus-visible::before { inset-block: 26%; }

.ws-menu__link:hover .ws-icon,
.ws-menu__link:focus-visible .ws-icon { color: #4e9a6d; transform: scale(1.08); }

.ws-menu__link.is-active {
    color: var(--ws-primary-dark);
    background: linear-gradient(90deg, rgba(107, 176, 134, .22), rgba(236, 219, 198, .3));
    padding-inline-start: 24px;
}

[dir="rtl"] .ws-menu__link.is-active {
    background: linear-gradient(270deg, rgba(107, 176, 134, .22), rgba(236, 219, 198, .3));
}

.ws-menu__link.is-active::before { inset-block: 20%; }

.ws-menu__link.is-active::after { opacity: 1; }

.ws-menu__link.is-active .ws-icon { color: #0e5655; }

@media (prefers-reduced-motion: reduce) {
    .ws-menu__link:hover .ws-icon,
    .ws-menu__link:focus-visible .ws-icon { transform: none; }
}

/* Language switch and the join action, pinned to the bottom of the links pane. */
.ws-menu__foot {
    position: absolute;
    inset-block-end: 34px;
    inset-inline: 56px;
    align-self: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

/* Both controls share one height so the row reads as a single bar rather than
   two pills of different sizes. */
.ws-menu__foot .ws-lang-switch,
.ws-menu__foot .ws-menu__join {
    min-height: 46px;
    box-sizing: border-box;
}

.ws-menu__foot .ws-menu__join { padding-block: 0; }

.ws-lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 5px 5px 12px;
    border: 1px solid var(--ws-line, rgba(0, 0, 0, .1));
    border-radius: var(--ws-radius-pill);
    background: var(--ws-secondary, #f4f4f2);
}

.ws-lang-switch__icon {
    width: 1.1em;
    height: 1.1em;
    margin-inline-end: 4px;
    color: var(--ws-muted);
}

.ws-lang-switch__option {
    padding: 7px 16px;
    border-radius: var(--ws-radius-pill);
    color: var(--ws-muted);
    font-size: .9rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    transition: color var(--ws-transition), background var(--ws-transition);
}

.ws-lang-switch__option:hover { color: var(--ws-primary-dark); }

.ws-lang-switch__option.is-active {
    background: var(--ws-primary);
    color: #fff;
    box-shadow: 0 6px 16px rgba(60, 83, 90, .28);
}

.ws-lang-switch__option.is-active:hover { color: #fff; }

/* The Arabic label needs the Arabic face even while the page is in English —
   Inter has no Arabic glyphs, so it would fall back to a system font. */
.ws-lang-switch__option[lang="ar"] {
    font-family: 'GE Dinar', 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
    font-size: .84rem;
}

/* Pages start below the floating controls instead of below a header. */
.ws-hero,
.ws-page-head,
.ws-auth { padding-block-start: clamp(96px, 10vw, 132px); }

/* Account pages: the head carries a title and nothing else, so it does not need
   the full hero-height clearance — only enough to clear the floating controls. */
.ws-page-head--compact {
    padding-block: clamp(74px, 8vw, 92px) clamp(20px, 2.5vw, 30px);
}

/* ----------------------------------------------------------------- hero -- */
.ws-hero {
    position: relative;
    isolation: isolate;
    /* Asymmetric: the top only has to clear the fixed .ws-fab controls
       (20px offset + ~52px tall), the bottom just meets the stats band. */
    padding-block: clamp(48px, 6vw, 92px) clamp(44px, 5vw, 84px);
    /* Mesh of diluted brand lights over the base wash: botanical top-end,
       cream bottom-start, evergreen haze through the middle. */
    background-color: #fbf8f4;
    background-image:
        radial-gradient(900px 520px at 88% -10%, rgba(107, 176, 134, .26), transparent 62%),
        radial-gradient(760px 520px at 4% 108%, rgba(236, 219, 198, .72), transparent 64%),
        radial-gradient(620px 420px at 48% 118%, rgba(14, 86, 85, .10), transparent 66%),
        var(--ws-gradient-hero);
    overflow: hidden;
}

/* Two diffuse brand lights on top of the mesh. `filter: blur()` keeps the
   edges from banding on wide screens where a radial-gradient alone shows a
   visible ring. */
.ws-hero::before,
.ws-hero::after {
    content: '';
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(14px);
    pointer-events: none;
}

.ws-hero::before {
    width: clamp(360px, 42vw, 620px);
    aspect-ratio: 1;
    inset-block-start: -24%;
    inset-inline-end: -12%;
    background: radial-gradient(circle, rgba(107, 176, 134, .26), rgba(107, 176, 134, 0) 70%);
    animation: ws-hero-drift 18s ease-in-out infinite alternate;
}

.ws-hero::after {
    width: clamp(300px, 34vw, 520px);
    aspect-ratio: 1;
    inset-block-end: -26%;
    inset-inline-start: -14%;
    background: radial-gradient(circle, rgba(236, 219, 198, .66), rgba(236, 219, 198, 0) 70%);
    animation: ws-hero-drift 22s ease-in-out infinite alternate-reverse;
}

@keyframes ws-hero-drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(0, 26px, 0) scale(1.08); }
}

.ws-hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.04fr .96fr;
    align-items: center;
    gap: clamp(28px, 5vw, 68px);
}

/* Staggered rise for the copy column; the media follows last. */
.ws-hero__inner > div > *,
.ws-hero__media {
    animation: ws-hero-rise .7s cubic-bezier(.22, .68, .32, 1) both;
}

.ws-hero__inner > div > *:nth-child(1) { animation-delay: .02s; }
.ws-hero__inner > div > *:nth-child(2) { animation-delay: .08s; }
.ws-hero__inner > div > *:nth-child(3) { animation-delay: .14s; }
.ws-hero__inner > div > *:nth-child(4) { animation-delay: .20s; }
.ws-hero__inner > div > *:nth-child(5) { animation-delay: .26s; }
.ws-hero__inner > div > *:nth-child(6) { animation-delay: .32s; }
.ws-hero__inner > div > *:nth-child(7) { animation-delay: .38s; }
.ws-hero__media { animation-delay: .12s; }

@keyframes ws-hero-rise {
    from { opacity: 0; transform: translate3d(0, 18px, 0); }
    to   { opacity: 1; transform: none; }
}

.ws-hero__logo {
    /* block, so the eyebrow below starts on its own line rather than
       sitting alongside the logo */
    display: block;
    width: min(286px, 74%);
    margin-block-end: clamp(18px, 2.4vw, 28px);
}

.ws-hero__logo img {
    height: auto;
    width: 100%;
}

/* The hero sits on a pale wash, close enough to `--ws-primary-soft` that the
   default eyebrow tint washes out. Brand fill here, with a botanical icon so
   the chip carries the secondary colour. */
.ws-hero .ws-eyebrow {
    gap: 9px;
    padding: 8px 18px;
    background: linear-gradient(118deg, #3c535a, #0e5655);
    color: #fff;
    box-shadow: 0 10px 24px rgba(14, 86, 85, .22);
}

.ws-hero .ws-eyebrow .ws-icon { color: var(--ws-logo-lime); }

/* A responsive hierarchy for the approved brand slogan. */
.ws-hero__title {
    margin-block: clamp(16px, 2vw, 24px) 14px;
    /* Sized off the viewport so the slogan holds one line in the copy column
       instead of breaking after "Nourish." */
    font-size: clamp(1.3rem, 3.4vw, 2.9rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.03em;
    /* Ink gradient: brand primary into evergreen. Both ends clear AA against
       the pale hero, so no contrast is traded for the effect. */
    background: linear-gradient(104deg, #3c535a 18%, #0e5655 82%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}


/* Latin only: the Arabic slogan is longer and must stay free to wrap. */
[dir="ltr"] .ws-hero__title { white-space: nowrap; }

.ws-hero__title span {
    background: var(--ws-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ws-hero__lead {
    position: relative;
    max-width: 540px;
    margin-block-end: 22px;
    padding-inline-start: 16px;
    color: var(--ws-ink);
    font-size: clamp(1.08rem, 1.5vw, 1.26rem);
    font-weight: 600;
    letter-spacing: -.01em;
}

/* Botanical rule beside the slogan line — the one accent mark in the block. */
.ws-hero__lead::before {
    content: '';
    position: absolute;
    inset-block: 4px;
    inset-inline-start: 0;
    width: 4px;
    border-radius: var(--ws-radius-pill);
    background: linear-gradient(180deg, var(--ws-logo-lime), rgba(107, 176, 134, .25));
}

/* Secondary hero paragraph — smaller and muted so it supports the lead above
   it rather than competing with it. */
.ws-hero__lead--sm {
    max-width: 560px;
    margin-block-start: -6px;
    margin-block-end: clamp(26px, 3vw, 34px);
    padding-inline-start: 0;
    color: var(--ws-muted);
    font-size: 1rem;
    line-height: 1.74;
    font-weight: 400;
    letter-spacing: 0;
    text-wrap: pretty;
}

.ws-hero__lead--sm::before { content: none; }

/* Hero buttons sit larger than the site default — they are the page's primary
   conversion pair. */
.ws-hero .ws-btn {
    padding: 15px 30px;
    font-size: 1rem;
}

.ws-hero .ws-btn--primary {
    background: linear-gradient(118deg, #3c535a, #0e5655);
    box-shadow: 0 14px 30px rgba(14, 86, 85, .26);
}

.ws-hero .ws-btn--ghost {
    background: rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-color: rgba(60, 83, 90, .14);
}

.ws-hero__points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-block-start: clamp(26px, 3vw, 34px);
    list-style: none;
}

/* Chips rather than a bare inline list: on a tinted surface the ticks need a
   surface of their own to stay legible once the list wraps. */
.ws-hero__points li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid rgba(60, 83, 90, .09);
    border-radius: var(--ws-radius-pill);
    background: rgba(255, 255, 255, .74);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: var(--ws-shadow-xs);
    color: var(--ws-ink);
    font-size: .85rem;
    font-weight: 600;
    white-space: nowrap;
    transition: transform var(--ws-transition), box-shadow var(--ws-transition);
}

.ws-hero__points li:hover {
    transform: translateY(-2px);
    box-shadow: var(--ws-shadow-sm);
}

.ws-hero__points .ws-icon { color: var(--ws-logo-lime); }

/* 16/9 rather than 4/3: the hero photo is a wide flat-lay (1512x499), so a
   taller box would crop away most of the dish spread. */
.ws-hero__media {
    position: relative;
    border-radius: clamp(22px, 2.6vw, 34px);
    /* Soft depth, a white ring, and a flat botanical card peeking out behind
       the start edge — the offset is a spread shadow, so no extra markup. */
    box-shadow:
        0 36px 70px rgba(60, 83, 90, .20),
        0 8px 22px rgba(60, 83, 90, .08),
        0 0 0 1px rgba(255, 255, 255, .7),
        -16px 18px 0 -8px rgba(107, 176, 134, .26);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--ws-surface);
    transition: transform var(--ws-transition), box-shadow var(--ws-transition);
}

.ws-hero__media:hover {
    transform: translateY(-4px);
}

/* box-shadow takes no logical offsets, so the peeking accent card is mirrored
   by hand for RTL. */
[dir="rtl"] .ws-hero__media {
    box-shadow:
        0 36px 70px rgba(60, 83, 90, .20),
        0 8px 22px rgba(60, 83, 90, .08),
        0 0 0 1px rgba(255, 255, 255, .7),
        16px 18px 0 -8px rgba(107, 176, 134, .26);
}

/* Bottom scrim so the floating pill always has contrast, plus an inner
   highlight that keeps the card edge defined on the pale gradient. */
.ws-hero__media::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45);
    background: linear-gradient(to top, rgba(60, 83, 90, .30), rgba(60, 83, 90, 0) 44%);
    pointer-events: none;
}

.ws-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .7s ease;
}

.ws-hero__media:hover img { transform: scale(1.04); }

.ws-hero__float {
    position: absolute;
    z-index: 2;
    inset-block-end: clamp(14px, 2vw, 22px);
    inset-inline-start: clamp(14px, 2vw, 22px);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    border: 1px solid rgba(255, 255, 255, .62);
    border-radius: var(--ws-radius-pill);
    background: rgba(255, 255, 255, .84);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: var(--ws-shadow);
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ws-ink);
}

.ws-hero__float .ws-icon { color: var(--ws-logo-lime); }

@media (prefers-reduced-motion: reduce) {
    .ws-hero::before,
    .ws-hero::after,
    .ws-hero__inner > div > *,
    .ws-hero__media { animation: none; }

    .ws-hero__media img,
    .ws-hero__media:hover img,
    .ws-hero__media:hover,
    .ws-hero__points li:hover { transition: none; transform: none; }
}

/* ------------------------------------------------------- how it works ---- */
.ws-step {
    position: relative;
    padding: clamp(30px, 2.8vw, 40px) clamp(24px, 2.2vw, 32px) clamp(28px, 2.6vw, 36px);
    border-radius: clamp(20px, 2vw, 26px);
    background: var(--ws-surface);
    border: 1px solid rgba(60, 83, 90, .08);
    box-shadow: var(--ws-shadow-sm);
    transition: transform var(--ws-transition), box-shadow var(--ws-transition),
    border-color var(--ws-transition);
}

/* Dashed connector running from one card to the next, level with the icon
   badge — the three cards read as a sequence rather than three panels. */
.ws-step::after {
    content: '';
    position: absolute;
    inset-block-start: calc(clamp(30px, 2.8vw, 40px) + 28px);
    inset-inline-end: calc(var(--ws-gap) * -1);
    width: var(--ws-gap);
    border-block-start: 2px dashed rgba(107, 176, 134, .55);
}

.ws-grid > .ws-step:last-child::after { content: none; }

.ws-step:hover {
    transform: translateY(-6px);
    border-color: rgba(107, 176, 134, .34);
    box-shadow: 0 26px 54px rgba(60, 83, 90, .14), 0 6px 16px rgba(60, 83, 90, .06);
}

/* The step number is a badge in the corner, not a watermark: small, solid and
   readable, with the brand gradient the rest of the page uses. */
.ws-step__number {
    position: absolute;
    inset-block-start: clamp(22px, 2.2vw, 30px);
    inset-inline-end: clamp(22px, 2.2vw, 30px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: linear-gradient(140deg, rgba(107, 176, 134, .18), rgba(236, 219, 198, .45));
    border: 1px solid rgba(107, 176, 134, .4);
    color: var(--ws-primary-dark);
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    transition: background var(--ws-transition), color var(--ws-transition),
    border-color var(--ws-transition);
}

.ws-step:hover .ws-step__number {
    background: linear-gradient(140deg, #3c535a, #0e5655);
    border-color: transparent;
    color: #fff;
}

/* The soft badge gets a botanical ring here so it holds its own beside the
   numbered corner. */
.ws-step .ws-icon-badge--soft {
    width: 56px;
    height: 56px;
    border: 1px solid rgba(107, 176, 134, .34);
    background: linear-gradient(140deg, rgba(107, 176, 134, .2), rgba(237, 245, 239, .9));
    color: #16604a;
    transition: transform var(--ws-transition), box-shadow var(--ws-transition);
}

.ws-step:hover .ws-icon-badge--soft {
    transform: translateY(-3px) rotate(-4deg);
    box-shadow: 0 12px 24px rgba(107, 176, 134, .3);
}

.ws-step h3 {
    margin-block: 22px 10px;
    font-size: 1.2rem;
    letter-spacing: -.02em;
}

.ws-step p {
    margin: 0;
    color: var(--ws-muted);
    font-size: .95rem;
    line-height: 1.7;
    text-wrap: pretty;
}

/* Stacked or two-across: the connector would point at nothing. */
@media (max-width: 992px) {
    .ws-step::after { content: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ws-step,
    .ws-step:hover,
    .ws-step .ws-icon-badge--soft,
    .ws-step:hover .ws-icon-badge--soft { transition: none; transform: none; }
}

/* -------------------------------------------------- app download band -- */
/* Light band, copy on one side, a CSS-drawn phone frame on the other. The
   screenshots stay admin-managed, so the frame has to work with whatever
   aspect ratio gets uploaded — hence a fixed 9/19.5 screen with object-fit. */
.ws-appdl {
    position: relative;
    overflow: hidden;
    background: linear-gradient(120deg, #eef7f1 0%, #f8fbf9 42%, #f3f8fb 100%);
}

.ws-appdl__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
    align-items: center;
    gap: clamp(28px, 4vw, 52px);
}

.ws-appdl__copy h2 {
    max-width: 26ch;
    margin-block-end: 18px;
    text-wrap: balance;
}

.ws-appdl__lead {
    max-width: 52ch;
    margin-block-end: 26px;
    color: var(--ws-muted);
    font-size: 1.05rem;
    text-wrap: pretty;
}

.ws-appdl__points {
    display: grid;
    gap: 14px;
    margin-block-end: 30px;
    list-style: none;
}

.ws-appdl__points li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--ws-ink);
    font-size: 1.02rem;
}

/* Ringed tick, matching the reference's outlined check marks. */
.ws-appdl__points .ws-icon {
    flex: none;
    width: 1.5em;
    height: 1.5em;
    padding: .28em;
    border: 1.5px solid var(--ws-primary);
    border-radius: 50%;
    color: var(--ws-primary);
}

.ws-store-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.ws-store-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 11px 22px;
    border-radius: var(--ws-radius);
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .34);
    color: #fff;
    transition: background var(--ws-transition), transform var(--ws-transition);
}

.ws-store-btn:hover { background: rgba(255, 255, 255, .24); color: #fff; transform: translateY(-2px); }

.ws-store-btn img { height: 30px; width: auto; }

.ws-store-btn__text { display: flex; flex-direction: column; line-height: 1.2; text-align: start; }

.ws-store-btn__text small { font-size: .68rem; opacity: .82; }

.ws-store-btn__text strong { font-size: .95rem; }

/* Solid black store badges, for use on light backgrounds. */
.ws-store-btn--dark {
    padding: 12px 26px;
    border-radius: var(--ws-radius-sm);
    background: #111;
    border-color: #111;
    color: #fff;
    box-shadow: var(--ws-shadow-sm);
}

.ws-store-btn--dark:hover { background: #000; color: #fff; }

.ws-store-btn--dark .ws-store-btn__text small {
    opacity: 1;
    font-size: .7rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ws-store-btn--dark .ws-store-btn__text strong { font-size: 1.15rem; font-weight: 700; }

/* Phone frames --------------------------------------------------------- */
.ws-appdl__media {
    display: grid;
    justify-items: center;
}

/* Three screens up front. The middle one is raised and slightly larger, the
   outer two tuck behind it with a negative inline margin so the row stays
   compact instead of spreading across the whole column. */
.ws-phones {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ws-phone {
    position: relative;
    flex: none;
    width: min(320px, 36vw);
    margin: 0;
    padding: 8px;
    border-radius: 32px;
    background: linear-gradient(160deg, #2b3138 0%, #12161a 100%);
    box-shadow: var(--ws-shadow-lg), inset 0 0 0 2px rgba(255, 255, 255, .08);
}

.ws-phones[data-count="3"] .ws-phone:not(:first-child) { margin-inline-start: -46px; }

/* Middle phone forward: bigger, lifted, and above its neighbours. */
.ws-phones[data-count="3"] .ws-phone:nth-child(2) {
    z-index: 2;
    width: min(362px, 40vw);
    transform: translateY(-18px);
}

.ws-phones[data-count="2"] .ws-phone:not(:first-child) { margin-inline-start: -30px; }

.ws-phone__screen {
    position: relative;
    border-radius: 26px;
    overflow: hidden;
    background: #fff;
    aspect-ratio: 9 / 19.5;
}

.ws-phone__screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #fff;
}

@media (max-width: 992px) {
    .ws-appdl__inner { grid-template-columns: 1fr; }
    .ws-appdl__media { order: -1; }
    .ws-appdl__copy h2 { max-width: none; }
}

/* Below the split, the outer two would be too narrow to read — show the
   raised middle screen on its own. */
@media (max-width: 620px) {
    .ws-phones .ws-phone:not(:nth-child(2)) { display: none; }
    .ws-phones[data-count="1"] .ws-phone:first-child { display: block; }
    .ws-phones[data-count="3"] .ws-phone:nth-child(2) { width: min(260px, 68vw); transform: none; }
}

/* -------------------------------------------------------------- filters -- */
.ws-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-block-end: 28px;
}

.ws-search {
    position: relative;
    flex: 1 1 260px;
    min-width: 220px;
}

.ws-search .ws-icon {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 16px;
    /* Above the input, which paints later and would otherwise cover it. */
    z-index: 1;
    transform: translateY(-50%);
    color: var(--ws-muted);
    pointer-events: none;
}

.ws-search input {
    width: 100%;
    padding: 13px 18px;
    padding-inline-start: 46px;
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius-pill);
    background: var(--ws-surface);
    font-family: inherit;
    font-size: .92rem;
    color: var(--ws-ink);
    box-shadow: var(--ws-shadow-xs);
}

.ws-search input:focus { outline: none; border-color: var(--ws-primary); }

.ws-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
}

.ws-chip--sm {
    padding: 3px 9px;
    font-size: .7rem;
    font-weight: 700;
}

.ws-chip-btn {
    padding: 9px 18px;
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius-pill);
    background: var(--ws-surface);
    color: var(--ws-body);
    font-family: inherit;
    font-size: .86rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--ws-transition);
}

.ws-chip-btn:hover { border-color: var(--ws-primary); color: var(--ws-primary-dark); }

.ws-chip-btn.is-active {
    background: var(--ws-gradient);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--ws-shadow-primary);
}

/* Chips used as form controls (checkout day / cycle pickers) are <label>s, so
   they need to beat the generic `.ws-field label` typography. */
.ws-field .ws-chip-btn {
    display: inline-flex;
    align-items: center;
    color: var(--ws-body);
    font-size: .86rem;
    font-weight: 600;
    user-select: none;
}

.ws-field .ws-chip-btn.is-active { color: #fff; }

/* -------------------------------------------------------- coupon box -- */
.ws-coupon {
    margin-block: 18px 0;
    padding-block-start: 18px;
    border-block-start: 1px solid var(--ws-line);
}

.ws-coupon__label {
    display: block;
    margin-block-end: 8px;
    color: var(--ws-ink);
    font-size: .88rem;
    font-weight: 700;
}

/* Input + Apply as one joined control. The input sits outside .ws-field, so it
   never picked up the form styling and was falling back to the browser default
   border — hence the heavy dark box next to a pill button. */
.ws-coupon__row {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius-sm);
    background: var(--ws-surface);
    overflow: hidden;
    transition: border-color var(--ws-transition), box-shadow var(--ws-transition);
}

.ws-coupon__row:focus-within {
    border-color: var(--ws-primary);
    box-shadow: 0 0 0 3px rgba(60, 83, 90, .14);
}

.ws-coupon__row input {
    flex: 1 1 auto;
    min-width: 0;
    height: 46px;
    padding-inline: 14px;
    border: 0;
    background: none;
    color: var(--ws-ink);
    font-family: inherit;
    font-size: .95rem;
    text-transform: uppercase;
}

.ws-coupon__row input::placeholder { text-transform: none; }

.ws-coupon__row input:focus { outline: none; }

.ws-coupon__row .ws-btn {
    flex: none;
    height: 46px;
    padding-inline: 20px;
    border: 0;
    border-inline-start: 1px solid var(--ws-line);
    border-radius: 0;
    background: var(--ws-primary-softer);
    color: var(--ws-primary-dark);
    box-shadow: none;
    font-size: .88rem;
}

.ws-coupon__row .ws-btn:hover {
    transform: none;
    background: var(--ws-primary);
    color: #fff;
}

.ws-coupon__row .ws-btn[disabled] { transform: none; }

.ws-coupon__msg {
    margin-block: 8px 0;
    color: var(--ws-primary-dark);
    font-size: .82rem;
    font-weight: 600;
}

.ws-coupon__msg.is-error { color: var(--ws-danger); }

.ws-coupon__msg[hidden] { display: none; }

/* ---------------------------------------------------- address options -- */
.ws-address-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 12px;
}

.ws-address-option {
    display: block;
    padding: 14px 16px;
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius);
    background: var(--ws-surface);
    cursor: pointer;
    transition: border-color var(--ws-transition), box-shadow var(--ws-transition), background var(--ws-transition);
}

.ws-address-option:hover { border-color: var(--ws-primary); }

.ws-address-option.is-active {
    border-color: var(--ws-primary);
    background: var(--ws-primary-softer);
    box-shadow: 0 0 0 1px var(--ws-primary) inset;
}

/* Location on one end, the zone/street/building badges on the other, wrapping
   only when the card is too narrow to hold them side by side. */
.ws-address-option__body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 14px;
}

.ws-address-option__line {
    color: var(--ws-body);
    font-size: .88rem;
    font-weight: 500;
    line-height: 1.5;
}

.ws-address-option__line:first-child { color: var(--ws-ink); font-weight: 700; }

/* Zone, street and building stay on one line — nowrap on the badges keeps a
   value from breaking mid-badge, and the card min-width above gives them room. */
.ws-address-option__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ws-address-option__tags .ws-tag { white-space: nowrap; }

/* Compact variant of the labelled badge used on the meal detail page. */
.ws-tag--sm {
    gap: 5px;
    padding: 4px 10px;
    box-shadow: none;
}

.ws-tag--sm .ws-tag__label { font-size: .62rem; }

.ws-tag--sm .ws-tag__value { font-size: .8rem; }

/* ------------------------------------------------------- order summary -- */
.ws-summary {
    display: grid;
    gap: 10px;
    margin-block: 18px 0;
    padding-block-start: 18px;
    border-block-start: 1px solid var(--ws-line);
}

.ws-summary > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.ws-summary > div[hidden] { display: none; }

.ws-summary dt { color: var(--ws-muted); font-size: .9rem; }

.ws-summary dd { margin: 0; color: var(--ws-ink); font-weight: 700; }

.ws-summary__total {
    margin-block-start: 4px;
    padding-block-start: 12px;
    border-block-start: 1px solid var(--ws-line);
}

.ws-summary__total dt { color: var(--ws-ink); font-size: 1rem; font-weight: 700; }

.ws-summary__total dd { color: var(--ws-primary-dark); font-size: 1.25rem; }

/* ---------------------------------------------------------------- forms -- */
.ws-form { display: grid; gap: 18px; }

.ws-form__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.ws-form__row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 860px) {
    .ws-form__row--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ws-field { display: flex; flex-direction: column; gap: 8px; }

.ws-field label {
    color: var(--ws-ink);
    font-size: .88rem;
    font-weight: 700;
}

.ws-field label .ws-req { color: var(--ws-danger); }

/* The native picker is replaced by .ws-datepicker, so its glyph is hidden and
   the whole field becomes the trigger. */
.ws-field input[type="date"] { cursor: pointer; }

.ws-field input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

/* ------------------------------------------------------------ datepicker -- */
.ws-field { position: relative; }

.ws-datepicker {
    position: absolute;
    inset-block-start: calc(100% + 8px);
    inset-inline-start: 0;
    z-index: 60;
    /* Wider than the field it hangs off: the month and year selects need the
       room, and a popover may overlap what is beside it. */
    width: min(326px, calc(100vw - 32px));
    padding: 14px;
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius);
    background: var(--ws-surface);
    box-shadow: var(--ws-shadow-lg);
}

.ws-datepicker[hidden] { display: none; }

.ws-datepicker__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-block-end: 12px;
}

/* The two selects share the row between the arrows; the month label is the one
   that needs the room, so the year is fixed and the month takes the rest. */
.ws-datepicker__pickers {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    gap: 6px;
}

/* Month and year are selects, so a date of birth is two clicks away instead of
   hundreds of month steps. */
.ws-datepicker__select {
    min-width: 0;
    padding: 6px 4px 6px 8px;
    border: 1px solid var(--ws-line);
    border-radius: 9px;
    background: var(--ws-surface);
    color: var(--ws-ink);
    font-family: inherit;
    font-size: .84rem;
    font-weight: 600;
    text-overflow: ellipsis;
    cursor: pointer;
}

.ws-datepicker__select[data-dp-month] { flex: 1 1 auto; }

.ws-datepicker__select[data-dp-year] { flex: 0 0 84px; }

.ws-datepicker__select:focus {
    outline: none;
    border-color: #6bb086;
    box-shadow: 0 0 0 3px rgba(107, 176, 134, .16);
}

.ws-datepicker__month {
    color: var(--ws-ink);
    font-size: .95rem;
    font-weight: 700;
}

.ws-datepicker__nav {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--ws-line);
    border-radius: 50%;
    background: var(--ws-surface);
    color: var(--ws-body);
    cursor: pointer;
    transition: background var(--ws-transition), border-color var(--ws-transition), color var(--ws-transition);
}

.ws-datepicker__nav svg { width: 15px; height: 15px; }

.ws-datepicker__nav:hover {
    border-color: var(--ws-primary);
    background: var(--ws-primary-softer);
    color: var(--ws-primary-dark);
}

/* Chevrons point the reading direction, so they flip under RTL. */
[dir="rtl"] .ws-datepicker__nav svg { transform: scaleX(-1); }

.ws-datepicker__weekdays,
.ws-datepicker__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.ws-datepicker__weekdays {
    margin-block-end: 6px;
}

.ws-datepicker__weekdays span {
    padding-block: 4px;
    color: var(--ws-muted);
    font-size: .72rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}

.ws-datepicker__day {
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: var(--ws-radius-sm);
    background: none;
    color: var(--ws-ink);
    font-family: inherit;
    font-size: .86rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--ws-transition), color var(--ws-transition);
}

.ws-datepicker__day:hover:not(:disabled) { background: var(--ws-primary-softer); color: var(--ws-primary-dark); }

.ws-datepicker__day.is-outside { color: var(--ws-muted); opacity: .55; }

.ws-datepicker__day.is-today { box-shadow: inset 0 0 0 1px var(--ws-primary); }

.ws-datepicker__day.is-selected {
    background: var(--ws-gradient);
    color: #fff;
    box-shadow: var(--ws-shadow-primary);
}

.ws-datepicker__day:disabled {
    color: var(--ws-muted);
    opacity: .35;
    cursor: not-allowed;
}

.ws-field input,
.ws-field select,
.ws-field textarea {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius-sm);
    background: var(--ws-surface);
    color: var(--ws-ink);
    font-family: inherit;
    font-size: .95rem;
    transition: border-color var(--ws-transition), box-shadow var(--ws-transition);
}

.ws-field textarea { min-height: 130px; resize: vertical; }

.ws-field input:focus,
.ws-field select:focus,
.ws-field textarea:focus {
    outline: none;
    border-color: var(--ws-primary);
    box-shadow: 0 0 0 4px rgba(60, 83, 90, .12);
}

.ws-field__hint { color: var(--ws-muted); font-size: .8rem; }

/* A field's control row: the input plus whatever sits inside its box. The
   wrapper is what the glyph is positioned against, so an error message appended
   under the field does not drag the glyph down with it. */
.ws-field__control { position: relative; }

.ws-field__control > input { padding-inline-end: 44px; }

.ws-field__icon {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 14px;
    display: grid;
    place-items: center;
    color: var(--ws-muted);
    pointer-events: none;
}

.ws-field__icon .ws-icon { width: 1.05em; height: 1.05em; }

.ws-field__control:focus-within .ws-field__icon { color: #4e9a6d; }

/* Password reveal button, same slot as the field glyph but clickable. */
.ws-field__toggle {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 8px;
    display: grid;
    place-items: center;
    width: 36px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ws-muted);
    cursor: pointer;
    transition: color var(--ws-transition);
}

.ws-field__toggle:hover { color: var(--ws-primary-dark); }

.ws-field__toggle .ws-icon { width: 1.1em; height: 1.1em; }

.ws-field__toggle .ws-field__toggle-off,
.ws-field__toggle.is-revealed .ws-field__toggle-on { display: none; }

.ws-field__toggle.is-revealed .ws-field__toggle-off { display: block; }

.ws-field__toggle.is-revealed { color: #4e9a6d; }

/* intl-tel-input, dressed as one of our fields: the flag + dial code sit inside
   the same box as the number. */
.ws-field .iti { width: 100%; }

.ws-field .iti--separate-dial-code .iti__selected-flag {
    padding-inline: 14px 8px;
    border-start-start-radius: 12px;
    border-end-start-radius: 12px;
    background: rgba(107, 176, 134, .08);
}

.ws-field .iti--separate-dial-code .iti__selected-dial-code {
    color: var(--ws-ink);
    font-size: .95rem;
    font-weight: 600;
}

.ws-field .iti__arrow { border-top-color: var(--ws-muted); }

.ws-field .iti__country-list {
    border: 1px solid rgba(107, 176, 134, .4);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(60, 83, 90, .14);
    font-size: .9rem;
}

.ws-field .iti__country.iti__highlight { background: rgba(107, 176, 134, .18); }

.ws-field .iti__dial-code { color: var(--ws-muted); }

/* Inline validation (jQuery Validation renders into the field it belongs to). */
.ws-field__error {
    display: block;
    margin-block-start: 2px;
    color: var(--ws-danger);
    font-size: .78rem;
    line-height: 1.45;
}

/* Descendant, not child: intl-tel-input and the control wrapper both put a
   layer between the field and its input. */
.ws-field.is-invalid input,
.ws-field.is-invalid select,
.ws-field.is-invalid textarea,
.ws-field.is-invalid .select2-selection {
    border-color: var(--ws-danger);
}

.ws-field.is-invalid input:focus,
.ws-field.is-invalid select:focus,
.ws-field.is-invalid textarea:focus {
    box-shadow: 0 0 0 4px rgba(158, 44, 33, .12);
}

.ws-field.is-invalid .iti--separate-dial-code .iti__selected-flag {
    background: rgba(158, 44, 33, .07);
}

/* Select2, dressed as one of our fields. Height follows the inputs beside it. */
.ws-field .select2-container { width: 100% !important; }

.ws-field .select2-container--default .select2-selection--single {
    height: auto;
    padding: 12px 16px;
    border: 1px solid var(--ws-line);
    border-radius: 12px;
    background: var(--ws-surface);
}

.ws-field .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0;
    color: var(--ws-ink);
    font-size: .95rem;
    line-height: 1.35;
}

.ws-field .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--ws-muted); }

.ws-field .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    inset-block-start: 0;
    inset-inline-end: 10px;
    inset-inline-start: auto;
}

.ws-field .select2-container--default.select2-container--open .select2-selection--single,
.ws-field .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #6bb086;
    box-shadow: 0 0 0 4px rgba(107, 176, 134, .16);
}

.select2-container--default .select2-dropdown {
    border-color: rgba(107, 176, 134, .4);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(60, 83, 90, .14);
    overflow: hidden;
}

.select2-container--default .select2-search--dropdown { padding: 10px; }

.select2-container--default .select2-search--dropdown .select2-search__field {
    padding: 9px 12px;
    border: 1px solid var(--ws-line);
    border-radius: 10px;
    font-family: inherit;
    font-size: .9rem;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    outline: none;
    border-color: #6bb086;
}

.select2-container--default .select2-results__option {
    padding: 9px 14px;
    font-size: .9rem;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
    background: rgba(107, 176, 134, .18);
    color: var(--ws-primary-dark);
}

.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
    background: rgba(107, 176, 134, .3);
    color: var(--ws-primary-dark);
}

/* Inline links that have to carry weight inside small print — consent copy and
   the like: bold, with a rule under them so they read as links at .82rem. */
.ws-link-strong {
    font-weight: 700;
    color: var(--ws-primary-dark);
    border-block-end: 1px solid rgba(107, 176, 134, .6);
    transition: color var(--ws-transition), border-color var(--ws-transition);
}

.ws-link-strong:hover {
    color: #4e9a6d;
    border-block-end-color: #4e9a6d;
}

/* Numbers, emails and phone numbers stay LTR even on an Arabic page. */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="number"],
[dir="rtl"] input[type="url"] {
    direction: ltr;
    text-align: start;
}

.ws-check {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .88rem;
    color: var(--ws-body);
}

.ws-check input { width: 18px; height: 18px; accent-color: var(--ws-primary); }

/* --------------------------------------------------------------- alerts -- */
.ws-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-block: 20px 0;
    padding: 14px 18px;
    border-radius: var(--ws-radius);
    border: 1px solid transparent;
    font-size: .92rem;
    font-weight: 600;
    box-shadow: var(--ws-shadow-xs);
}

.ws-alert__text { flex: 1; }

.ws-alert__close {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    opacity: .6;
}

.ws-alert__close:hover { opacity: 1; }

/* ---------------------------------------------------------------- toasts -- */
/* Fixed stack in the corner rather than an inline banner, so a flash message
   never shifts the page content under the reader. */
.ws-toasts {
    position: fixed;
    inset-block-start: 88px;
    inset-inline-end: 20px;
    z-index: 150;
    display: grid;
    gap: 10px;
    width: min(380px, calc(100vw - 40px));
    pointer-events: none;
}

.ws-toast {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--ws-radius);
    border: 1px solid transparent;
    background: var(--ws-surface);
    box-shadow: var(--ws-shadow-lg);
    font-size: .92rem;
    line-height: 1.5;
    pointer-events: auto;
    animation: ws-toast-in .32s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes ws-toast-in {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: none; }
}

.ws-toast.is-leaving {
    opacity: 0;
    transform: translateX(24px);
    transition: opacity .3s ease, transform .3s ease;
}

.ws-toast__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: currentColor;
}

.ws-toast__icon .ws-icon { color: #fff; width: .95em; height: .95em; }

.ws-toast__text { flex: 1; min-width: 0; color: var(--ws-ink); }

.ws-toast__close {
    flex: none;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ws-muted);
    cursor: pointer;
    transition: color var(--ws-transition);
}

.ws-toast__close:hover { color: var(--ws-ink); }

/* The border and icon disc carry the status colour; the body stays white so
   the text keeps full contrast. */
.ws-toast--success { border-color: rgba(60, 83, 90, .35); color: var(--ws-success); }
.ws-toast--danger  { border-color: rgba(226, 68, 92, .35); color: var(--ws-danger); }
.ws-toast--warning { border-color: rgba(246, 166, 9, .4);  color: var(--ws-accent); }
.ws-toast--info    { border-color: rgba(60, 83, 90, .3);  color: var(--ws-primary); }

/* Clear of the floating nav controls on small screens. */
@media (max-width: 576px) {
    .ws-toasts { inset-block-start: 74px; inset-inline: 14px auto; width: calc(100vw - 28px); }
}

@media (prefers-reduced-motion: reduce) {
    .ws-toast { animation: none; }
    .ws-toast.is-leaving { transition: none; }
}

.ws-alert--success { background: var(--ws-success-soft); border-color: rgba(60, 83, 90, .28); color: #0e5655; }
.ws-alert--danger { background: var(--ws-danger-soft); border-color: rgba(158, 44, 33, .28); color: #9e2c21; }
.ws-alert--warning { background: var(--ws-warning-soft); border-color: rgba(236, 145, 42, .3); color: #9a4207; }
.ws-alert--info { background: var(--ws-primary-soft); border-color: rgba(60, 83, 90, .22); color: var(--ws-primary-darker); }

/* ------------------------------------------------------- faq groupings -- */
.ws-faq-group + .ws-faq-group { margin-block-start: 40px; }

.ws-faq-group[hidden] { display: none; }

/* Filtered-out grid items must not keep occupying a grid cell. */
[data-filter-item][hidden] { display: none; }

.ws-faq-group__title {
    margin-block-end: 16px;
    font-size: 1.25rem;
    color: var(--ws-primary-darker);
}

/* ------------------------------------------------------------ accordion -- */
.ws-accordion { display: grid; gap: 14px; }

.ws-accordion__item {
    background: var(--ws-surface);
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius);
    box-shadow: var(--ws-shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--ws-transition), border-color var(--ws-transition);
}

.ws-accordion__item.is-open {
    border-color: rgba(60, 83, 90, .34);
    box-shadow: var(--ws-shadow);
}

.ws-accordion__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 20px 24px;
    border: 0;
    background: none;
    color: var(--ws-ink);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    text-align: start;
    cursor: pointer;
}

.ws-accordion__trigger .ws-icon { transition: transform var(--ws-transition); color: var(--ws-primary); }

.ws-accordion__item.is-open .ws-accordion__trigger .ws-icon { transform: rotate(180deg); }

.ws-accordion__panel {
    display: none;
    padding: 0 24px 22px;
    color: var(--ws-body);
}

.ws-accordion__item.is-open .ws-accordion__panel { display: block; }

/* -------------------------------------------------------------- account -- */
.ws-account {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

/* Sidebar hidden — the subscription detail table needs the whole row. */
.ws-account--wide { grid-template-columns: minmax(0, 1fr); }

/* Divides the account-settings group from the content links above it. */
.ws-account__divider {
    margin-block-start: 10px;
    padding-block-start: 10px;
    border-block-start: 1px solid var(--ws-line);
}

.ws-account__nav {
    position: sticky;
    inset-block-start: 24px;
    padding: 22px;
    background: var(--ws-surface);
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius-lg);
    box-shadow: var(--ws-shadow-sm);
}

.ws-account__user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-block-end: 18px;
    margin-block-end: 14px;
    border-block-end: 1px solid var(--ws-line);
}

.ws-account__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--ws-gradient);
    color: #fff;
    font-weight: 600;
}

.ws-account__name { font-weight: 700; color: var(--ws-ink); font-size: .95rem; }

.ws-account__meta { color: var(--ws-muted); font-size: .8rem; }

.ws-account__links { display: grid; gap: 4px; list-style: none; }

.ws-account__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: var(--ws-radius-sm);
    color: var(--ws-body);
    font-size: .9rem;
    font-weight: 600;
    transition: background var(--ws-transition), color var(--ws-transition);
}

.ws-account__link:hover { background: var(--ws-primary-softer); color: var(--ws-primary-dark); }

.ws-account__link.is-active { background: var(--ws-primary-soft); color: var(--ws-primary-darker); }

.ws-panel {
    padding: 28px;
    background: var(--ws-surface);
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius-lg);
    box-shadow: var(--ws-shadow-sm);
}

.ws-panel + .ws-panel { margin-block-start: 24px; }

/* ------------------------------------------------ subscription detail -- */
/* Detail card beside the day table, matching the admin screen's split. */
.ws-subscription {
    display: grid;
    grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.ws-subscription > .ws-panel { margin-block-start: 0; }

/* Detail column is reference data, so it sits a step down from body copy. */
.ws-subscription .ws-datalist { gap: 10px; }

.ws-subscription .ws-datalist__row { padding-block-end: 9px; }

.ws-subscription .ws-datalist__label { font-size: .78rem; }

.ws-subscription .ws-datalist__value { font-size: .84rem; }

.ws-subscription .ws-panel__head h2 { font-size: 1.05rem; }

.ws-subscription .ws-table { font-size: .86rem; }

/* Status tabs above the table. */
.ws-tabs {
    gap: 6px;
    margin-block-end: 18px;
    padding-block-end: 14px;
    border-block-end: 1px solid var(--ws-line);
}

.ws-table--days td { vertical-align: middle; }

.ws-nowrap { white-space: nowrap; }

.ws-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ws-ink);
    font-weight: 700;
    white-space: nowrap;
}

.ws-count .ws-icon { color: var(--ws-primary); }

.ws-count small { color: var(--ws-muted); font-weight: 600; }

.ws-day-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

/* Square icon buttons for the per-day actions. Each carries a title and an
   aria-label, so the meaning survives without a visible caption. */
.ws-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius-sm);
    background: var(--ws-surface);
    color: var(--ws-body);
    cursor: pointer;
    transition: background var(--ws-transition), border-color var(--ws-transition), color var(--ws-transition);
}

.ws-icon-btn:hover {
    border-color: var(--ws-primary);
    background: var(--ws-primary-softer);
    color: var(--ws-primary-dark);
}

.ws-icon-btn.is-active {
    border-color: var(--ws-primary);
    background: var(--ws-primary);
    color: #fff;
}

.ws-icon-btn .ws-icon { width: 1.05em; height: 1.05em; }

/* The edit panel lives in its own full-width row under the day it belongs to. */
.ws-day-edit-cell { padding-block: 0 !important; }

.ws-schedule__edit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-block: 4px 14px;
    padding: 16px;
    border-radius: var(--ws-radius);
    background: var(--ws-primary-softer);
}

.ws-schedule__edit[hidden] { display: none; }

.ws-schedule__form { display: grid; gap: 10px; align-content: start; }

/* Filtered-out table rows must lose their table display, not just `hidden`. */
tr[data-filter-item][hidden] { display: none; }

@media (max-width: 1200px) {
    .ws-subscription { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------- calorie panel -- */
.ws-calories__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-block-start: 18px;
}

.ws-calories__wide { grid-column: 1 / -1; }

.ws-calories__result {
    margin-block-start: 22px;
    padding: 26px 22px;
    border-radius: var(--ws-radius-lg);
    background: var(--ws-primary-softer);
    border: 1px solid rgba(60, 83, 90, .22);
    text-align: center;
}

.ws-calories__value {
    display: block;
    color: var(--ws-primary-darker);
    font-size: 2.6rem;
    font-weight: 600;
    line-height: 1.1;
}

.ws-calories__label {
    display: block;
    margin-block-start: 4px;
    color: var(--ws-body);
    font-size: .92rem;
    font-weight: 600;
}

.ws-calories__note {
    max-width: 46ch;
    margin: 10px auto 18px;
    color: var(--ws-muted);
    font-size: .86rem;
}

/* ------------------------------------------------------- meal picker -- */
.ws-course + .ws-course {
    margin-block-start: 26px;
    padding-block-start: 22px;
    border-block-start: 1px solid var(--ws-line);
}

.ws-course__title {
    margin-block-end: 14px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ws-primary-darker);
}

.ws-meal-pick {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius);
    background: var(--ws-surface);
    overflow: hidden;
    cursor: pointer;
    transition: border-color var(--ws-transition), box-shadow var(--ws-transition), transform var(--ws-transition);
}

.ws-meal-pick:hover { transform: translateY(-3px); box-shadow: var(--ws-shadow); }

.ws-meal-pick.is-active {
    border-color: var(--ws-primary);
    box-shadow: 0 0 0 1px var(--ws-primary) inset, var(--ws-shadow);
}

/* At the limit the unchosen cards stay visible but stop responding. */
.ws-meal-pick.is-disabled { opacity: .45; cursor: not-allowed; }

.ws-meal-pick.is-disabled:hover { transform: none; box-shadow: none; }


.ws-meal-pick__media { position: relative; aspect-ratio: 3 / 2; background: var(--ws-gradient-soft); }

.ws-meal-pick__media img { width: 100%; height: 100%; object-fit: cover; }

.ws-meal-pick__body { display: grid; gap: 8px; padding: 14px; }

.ws-meal-pick__title { color: var(--ws-ink); font-weight: 700; font-size: .95rem; }

.ws-meal-pick__macros { display: flex; flex-wrap: wrap; gap: 6px; }

.ws-meal-pick__check {
    position: absolute;
    inset-block-start: 12px;
    inset-inline-end: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ws-surface);
    color: transparent;
    box-shadow: var(--ws-shadow-sm);
    transition: background var(--ws-transition), color var(--ws-transition);
}

.ws-meal-pick.is-active .ws-meal-pick__check { background: var(--ws-primary); color: #fff; }

/* --------------------------------------------------- profile card -- */
.ws-profile-card__head {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding-block-end: 22px;
    border-block-end: 1px solid var(--ws-line);
}

.ws-profile-card__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--ws-gradient);
    color: #fff;
    font-size: 1.6rem;
    font-weight: 600;
    box-shadow: var(--ws-shadow-primary);
}

.ws-profile-card__id { flex: 1 1 auto; min-width: 0; }

.ws-profile-card__name {
    margin: 0 0 10px;
    font-size: 1.25rem;
    line-height: 1.3;
}

.ws-profile-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Contact rows — icon, label, value. Auto-fit so one row of contacts spreads
   and three wrap into a tidy grid. */
.ws-profile-card__contacts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 18px;
    margin-block: 22px 0;
    list-style: none;
}

.ws-profile-card__contacts li {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.ws-profile-card__contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--ws-primary-softer);
    color: var(--ws-primary-dark);
}

.ws-profile-card__contact-body { display: grid; min-width: 0; }

.ws-profile-card__contact-label {
    color: var(--ws-muted);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.ws-profile-card__contact-value {
    color: var(--ws-ink);
    font-size: .92rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 576px) {
    .ws-profile-card__head { flex-wrap: wrap; }
}

/* ------------------------------------------------- account overview -- */
.ws-account-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-block-end: 24px;
}

.ws-account-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius-lg);
    background: var(--ws-surface);
    box-shadow: var(--ws-shadow-sm);
    color: inherit;
    transition: transform var(--ws-transition), box-shadow var(--ws-transition), border-color var(--ws-transition);
}

.ws-account-stat:hover {
    transform: translateY(-3px);
    border-color: rgba(60, 83, 90, .35);
    box-shadow: var(--ws-shadow);
    color: inherit;
}

.ws-account-stat .ws-icon-badge { flex: none; width: 44px; height: 44px; }

.ws-account-stat__body { display: grid; min-width: 0; }

.ws-account-stat__value {
    color: var(--ws-ink);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.1;
}

.ws-account-stat__label {
    color: var(--ws-muted);
    font-size: .84rem;
    font-weight: 600;
}

.ws-account-stat__go {
    flex: none;
    margin-inline-start: auto;
    color: var(--ws-muted);
    transition: transform var(--ws-transition), color var(--ws-transition);
}

.ws-account-stat:hover .ws-account-stat__go {
    color: var(--ws-primary);
    transform: translateX(3px);
}

[dir="rtl"] .ws-account-stat:hover .ws-account-stat__go { transform: translateX(-3px); }

@media (max-width: 1200px) {
    .ws-account-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 576px) {
    .ws-account-stats { grid-template-columns: 1fr; }
}

.ws-panel__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-block-end: 22px;
}

.ws-panel__head h2 { margin: 0; font-size: 1.25rem; }

/* Data list ------------------------------------------------------------ */
.ws-datalist { display: grid; gap: 14px; list-style: none; }

.ws-datalist__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    padding-block-end: 12px;
    border-block-end: 1px dashed var(--ws-line);
}

.ws-datalist__row:last-child { border-block-end: 0; padding-block-end: 0; }

.ws-datalist__label { color: var(--ws-muted); font-size: .86rem; font-weight: 600; }

.ws-datalist__value { color: var(--ws-ink); font-weight: 700; font-size: .92rem; }

/* Address card --------------------------------------------------------- */
.ws-address {
    position: relative;
    padding: 22px;
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius);
    background: var(--ws-surface);
    box-shadow: var(--ws-shadow-xs);
}

.ws-address.is-default { border-color: rgba(60, 83, 90, .4); background: var(--ws-primary-softer); }

.ws-address__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-block-end: 10px;
    padding: 4px 12px;
    border-radius: var(--ws-radius-pill);
    background: var(--ws-primary-soft);
    color: var(--ws-primary-darker);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
}

.ws-address__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-block-start: 16px;
    padding-block-start: 14px;
    border-block-start: 1px solid var(--ws-line);
}

/* Status pill ---------------------------------------------------------- */
.ws-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 13px;
    border-radius: var(--ws-radius-pill);
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.ws-status--activated,
.ws-status--completed { background: var(--ws-success-soft); color: #0e5655; }

.ws-status--pending { background: var(--ws-warning-soft); color: var(--ws-warning); }

.ws-status--cancelled,
.ws-status--expired { background: var(--ws-danger-soft); color: #9e2c21; }

.ws-status--freezed,
.ws-status--default { background: var(--ws-primary-soft); color: var(--ws-primary-darker); }

/* Simple table --------------------------------------------------------- */
.ws-table-wrap { overflow-x: auto; }

.ws-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.ws-table th,
.ws-table td {
    padding: 13px 14px;
    text-align: start;
    border-block-end: 1px solid var(--ws-line);
    white-space: nowrap;
}

.ws-table th { color: var(--ws-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }

.ws-table tbody tr:hover { background: var(--ws-primary-softer); }

/* ------------------------------------------------------------ auth pages -- */
.ws-auth {
    display: grid;
    align-content: center;
    /* The auth screens carry no footer, so they are sized to sit inside the
       viewport: enough top room to clear the floating controls, and no more. */
    padding-block: clamp(84px, 8vw, 96px) clamp(28px, 3.5vw, 48px);
    background: var(--ws-gradient-hero);
    min-height: 100svh;
}

/* Card beside the "how it works" panel — the container is fluid, so a lone
   centred card left most of the band empty. */
.ws-auth__inner {
    display: grid;
    grid-template-columns: minmax(0, 470px) minmax(0, 1fr);
    align-items: center;
    gap: clamp(24px, 3.6vw, 52px);
    max-width: 1320px;
}

/* Sign-up stands alone: no explainer beside it, so the card takes the band and
   its two-column field rows get room to breathe. */
.ws-auth__inner--solo {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    max-width: 820px;
}

/* Sign-up keeps the explainer, but the form is the subject: roughly 70/30
   instead of the even split the single-column auth cards use. */
.ws-auth__inner--form {
    grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
    max-width: 1340px;
}

.ws-auth__inner--form .ws-auth__card,
.ws-auth__inner--form .ws-auth__aside { max-width: none; }

/* The card is the page on this screen: flush to the top, bottom and leading
   edge of the viewport, with the explainer in the remaining column. */
.ws-auth--stretch {
    align-content: stretch;
    padding-block: 0;
}

.ws-auth--stretch .ws-auth__inner { align-items: stretch; }

.ws-auth--stretch .ws-auth__inner--form {
    max-width: none;
    padding-inline: 0;
    gap: clamp(22px, 3vw, 48px);
}

.ws-auth__inner--form .ws-auth__card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
    height: 100%;
    padding: clamp(28px, 3.2vw, 44px) clamp(24px, 2.6vw, 44px);
    padding-inline-start: clamp(28px, 3.4vw, 64px);
    border-inline-start: 0;
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}

/* The explainer keeps the gutter, plus room for the floating controls above it. */
.ws-auth__inner--form .ws-auth__aside {
    padding-block: clamp(84px, 8vw, 96px) clamp(24px, 3vw, 40px);
    padding-inline-end: clamp(20px, 3vw, 48px);
}

.ws-auth__inner--form .ws-auth__head,
.ws-auth__inner--form .ws-auth__foot { margin-block: 0; }

.ws-auth__inner--form .ws-auth__foot { padding-block-start: 16px; }

.ws-auth__inner--form .ws-auth__aside { align-self: center; }

/* Sign-up: a three-column field grid with a compact head, sized so the whole
   form sits inside a laptop viewport instead of scrolling. */
.ws-auth__head.ws-auth__head--row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-block-end: 22px;
    text-align: start;
}

.ws-auth__head--row .ws-icon-badge { flex: none; }

.ws-auth__head--row h1 {
    margin: 0;
    font-size: clamp(1.35rem, 2.2vw, 1.7rem);
    letter-spacing: -.024em;
}

.ws-auth__head--row p { margin-block-start: 4px; }

.ws-form__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px 22px;
}

.ws-form--register .ws-field label {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .01em;
}

/* Same control height as the sign-in form: base padding and type, only the
   corner radius is a touch tighter. */
/* Same control height as the sign-in form: base padding and type, only the
   corner radius is a touch tighter. Selects carry their own intrinsic line box,
   so they lose a pixel of padding to land on the same height as the inputs. */
.ws-form--register .ws-field input,
.ws-form--register .ws-field select {
    padding: 13px 16px;
    border-radius: 12px;
    font-size: .95rem;
}

.ws-form--register .ws-field select,
.ws-form--register .ws-field input[type="date"] { padding-block: 12px; }

.ws-form--register .ws-field input:focus,
.ws-form--register .ws-field select:focus {
    border-color: #6bb086;
    box-shadow: 0 0 0 4px rgba(107, 176, 134, .16);
}

.ws-form--register .ws-field { gap: 6px; }

.ws-form--register .ws-field__hint { font-size: .74rem; }

/* Submit and consent share one row, so the small print costs no height. */
.ws-form__actions {
    display: flex;
    margin-block-start: 2px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    margin-block-start: 4px;
}

.ws-form__actions .ws-btn { padding-inline: 34px; }

.ws-form__consent {
    flex: 1 1 280px;
    margin: 0;
    color: var(--ws-muted);
    font-size: .8rem;
    line-height: 1.6;
    text-align: end;
}

/* Sign-in prompt sitting beside the submit button. */
.ws-form__alt {
    margin: 0;
    color: var(--ws-muted);
    font-size: .86rem;
}

/* Consent in the slot the sign-in line used to occupy: centred under a rule. */
.ws-form__consent--foot {
    flex: none;
    margin-block-start: 16px;
    padding-block-start: 16px;
    border-block-start: 1px solid var(--ws-line);
    text-align: center;
}

@media (max-width: 860px) {
    .ws-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ws-form__consent { text-align: start; }
}

@media (max-width: 560px) {
    .ws-form__grid { grid-template-columns: 1fr; }
    .ws-form__actions .ws-btn { width: 100%; }
}

.ws-auth__card {
    width: 100%;
    max-width: 470px;
    padding: clamp(26px, 4vw, 42px);
    background: var(--ws-surface);
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius-lg);
    box-shadow: var(--ws-shadow-lg);
}

.ws-auth__aside {
    max-width: 640px;
    /* Container for the trust chips below, which size themselves to this pane
       so the three of them stay on one row. */
    container-type: inline-size;
}

.ws-auth__aside-title {
    margin-block: 12px 20px;
    font-size: clamp(1.4rem, 2.1vw, 1.85rem);
    line-height: 1.18;
    letter-spacing: -.026em;
    text-wrap: balance;
    background: linear-gradient(104deg, #3c535a 18%, #0e5655 82%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ws-auth__steps {
    display: grid;
    gap: 14px;
    max-width: 680px;
    list-style: none;
}

/* Each step is its own frosted card, joined by a dashed botanical connector,
   so the column reads as a sequence instead of three loose paragraphs. */
.ws-auth__step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 15px 18px;
    border: 1px solid rgba(107, 176, 134, .22);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .52));
    box-shadow: 0 10px 26px rgba(60, 83, 90, .06);
    backdrop-filter: blur(6px);
    transition: transform var(--ws-transition), border-color var(--ws-transition),
                box-shadow var(--ws-transition);
}

.ws-auth__step:hover {
    transform: translateY(-3px);
    border-color: rgba(107, 176, 134, .48);
    box-shadow: 0 18px 34px rgba(60, 83, 90, .1);
}

.ws-auth__step:not(:last-child)::after {
    content: '';
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 41px;
    width: 2px;
    height: 14px;
    background: repeating-linear-gradient(180deg, rgba(107, 176, 134, .55) 0 4px, transparent 4px 8px);
}

.ws-auth__step .ws-icon-badge {
    flex: none;
    border: 1px solid rgba(107, 176, 134, .3);
    background: linear-gradient(145deg, rgba(107, 176, 134, .18), rgba(236, 219, 198, .32));
    color: var(--ws-primary-dark);
    transition: transform var(--ws-transition), background var(--ws-transition), color var(--ws-transition);
}

.ws-auth__step:hover .ws-icon-badge {
    background: linear-gradient(140deg, #6bb086, #0e5655);
    color: #fff;
    transform: rotate(-4deg);
}

.ws-auth__step-body { min-width: 0; }

.ws-auth__step-index {
    display: block;
    color: #4e9a6d;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.ws-auth__step h3 {
    margin-block: 3px;
    font-size: 1rem;
    font-weight: 700;
}

.ws-auth__step p {
    margin: 0;
    color: var(--ws-muted);
    font-size: .88rem;
    line-height: 1.6;
}

/* Trust points as chips, matching the hero ticks. All three stay on one row:
   type and padding are keyed to the aside width, so they shrink with the pane
   instead of wrapping a lone chip onto a second line. */
.ws-auth__points {
    display: flex;
    flex-wrap: nowrap;
    gap: min(8px, 1.4cqw);
    margin-block-start: 20px;
    list-style: none;
}

.ws-auth__points li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-block: 7px;
    padding-inline: min(13px, 2.2cqw);
    border: 1px solid rgba(107, 176, 134, .28);
    border-radius: var(--ws-radius-pill);
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 6px 16px rgba(60, 83, 90, .05);
    color: var(--ws-body);
    font-size: min(.82rem, 2.03cqw);
    font-weight: 600;
    white-space: nowrap;
}

.ws-auth__points .ws-icon { flex: none; width: 1em; height: 1em; color: #4e9a6d; }

/* Below ~520px of pane the one-row chips would shrink to unreadable, so they
   wrap at a fixed size instead. */
@container (max-width: 520px) {
    .ws-auth__points { flex-wrap: wrap; gap: 8px; }
    .ws-auth__points li { padding-inline: 13px; font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
    .ws-auth__step:hover { transform: none; }
    .ws-auth__step:hover .ws-icon-badge { transform: none; }
}

/* Short laptop screens: tighten the whole pane so the sign-in screen still
   fits the viewport without a scrollbar. */
@media (min-width: 993px) and (max-height: 820px) {
    .ws-auth { padding-block: 76px 22px; }

    /* The flush sign-up card keeps its edge-to-edge box; it tightens instead. */
    .ws-auth--stretch { padding-block: 0; }

    .ws-auth__inner--form .ws-auth__card { gap: 10px; padding-block: 14px; }
    .ws-auth__inner--form .ws-auth__aside { padding-block: 72px 16px; }
    .ws-auth__inner--form .ws-auth__foot { padding-block-start: 10px; }

    /* The explainer sets the height of the row here, and the trust chips are the
       part that can go: the three steps carry the message on their own. */
    .ws-auth__inner--form .ws-auth__points { display: none; }
    .ws-auth__inner--form .ws-auth__step { padding-block: 11px; }

    .ws-form__grid { gap: 18px 18px; }

    .ws-form--register .ws-field input { padding-block: 11px; }
    .ws-form--register .ws-field select,
    .ws-form--register .ws-field input[type="date"] { padding-block: 10px; }

    .ws-form--register .ws-field { gap: 4px; }
    .ws-auth__card { padding: 24px 26px; }
    .ws-auth .ws-form,
    .ws-auth .ws-form__row { gap: 13px; }
    .ws-auth__head { margin-block-end: 18px; }
    .ws-auth__foot { margin-block-start: 16px; padding-block-start: 14px; }
    .ws-auth__aside-title { margin-block: 10px 14px; font-size: 1.4rem; }
    .ws-auth__steps { gap: 10px; }
    .ws-auth__step { padding: 12px 15px; }
    .ws-auth__step:not(:last-child)::after { height: 10px; }
    .ws-auth__step p { font-size: .84rem; }
    .ws-auth__points { margin-block-start: 14px; }
    .ws-auth__points li { padding-block: 6px; }
}

/* One column below the split: the card first, the explainer under it. */
@media (max-width: 992px) {
    .ws-auth__inner { grid-template-columns: 1fr; justify-items: center; }
    /* Stacked, the aside is a centred (fit-content) grid item, and inline-size
       containment would then size it from nothing — so the container context is
       dropped here and the pane simply fills the column. */
    .ws-auth__aside { container-type: normal; width: 100%; max-width: 520px; }
    .ws-auth__steps { max-width: none; }

    .ws-auth--stretch { padding-block: clamp(84px, 8vw, 96px) clamp(28px, 3.5vw, 48px); }

    .ws-auth--stretch .ws-auth__inner--form { padding-inline: clamp(16px, 3vw, 40px); }

    .ws-auth__inner--form .ws-auth__card {
        border-inline-start: 1px solid var(--ws-line);
        border-start-start-radius: var(--ws-radius-lg);
        border-end-start-radius: var(--ws-radius-lg);
    }

    .ws-auth__inner--form .ws-auth__aside { padding-block: 0; padding-inline-end: 0; }

    /* One row only makes sense beside the card; stacked, the chips wrap and go
       back to a fixed size rather than shrinking with the narrow pane. */
    .ws-auth__points { flex-wrap: wrap; gap: 8px; }
    .ws-auth__points li { padding-inline: 13px; font-size: .82rem; }
}

.ws-auth__head { text-align: center; margin-block-end: 26px; }

.ws-auth__head p { margin: 0; color: var(--ws-muted); }

.ws-auth__foot {
    margin-block-start: 22px;
    padding-block-start: 20px;
    border-block-start: 1px solid var(--ws-line);
    text-align: center;
    font-size: .9rem;
    color: var(--ws-muted);
}

/* ------------------------------------------------------------ plans band -- */
/* Filter chips on the dark listing band: frosted until selected, then solid. */
.ws-section--dark .ws-chip-btn {
    border-color: rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .84);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.ws-section--dark .ws-chip-btn:hover {
    border-color: rgba(107, 176, 134, .6);
    background: rgba(107, 176, 134, .18);
    color: #fff;
}

.ws-section--dark .ws-chip-btn.is-active {
    background: #fff;
    border-color: #fff;
    color: var(--ws-primary-dark);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .28);
}

/* The empty state sits on the dark ground too. */
.ws-section--dark .ws-empty { color: rgba(255, 255, 255, .7); }

.ws-section--dark .ws-empty h3 { color: #fff; }

/* ----------------------------------------------------------------- faqs -- */
/* The same light brand wash the other page openers use, so the accordion sits
   on a surface rather than flat paper. */
.ws-faqs,
.ws-blog-hero {
    position: relative;
    background-color: #fdfbf8;
    background-image:
        radial-gradient(720px 440px at 92% -12%, rgba(107, 176, 134, .16), transparent 62%),
        radial-gradient(640px 420px at 2% 104%, rgba(236, 219, 198, .42), transparent 64%),
        linear-gradient(176deg, #ffffff 0%, #fdfaf6 50%, #f4f8f5 100%);
    overflow: hidden;
}

/* Group heading: gradient ink with a botanical rule, matching the other heads. */
.ws-faqs .ws-faq-group__title {
    position: relative;
    margin-block-end: 18px;
    padding-block-end: 12px;
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    letter-spacing: -.022em;
    background: linear-gradient(104deg, #3c535a 18%, #0e5655 82%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ws-faqs .ws-faq-group__title::after {
    content: '';
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    width: 34px;
    height: 2px;
    border-radius: var(--ws-radius-pill);
    background: linear-gradient(90deg, #6bb086, #0e5655);
}

[dir="rtl"] .ws-faqs .ws-faq-group__title::after {
    background: linear-gradient(270deg, #6bb086, #0e5655);
}

/* Accordion: softer card, botanical edge once a question is open. */
.ws-faqs .ws-accordion__item {
    border-radius: 16px;
    border-color: rgba(60, 83, 90, .1);
    transition: border-color var(--ws-transition), box-shadow var(--ws-transition);
}

.ws-faqs .ws-accordion__item:hover { border-color: rgba(107, 176, 134, .4); }

.ws-faqs .ws-accordion__item.is-open {
    border-color: rgba(107, 176, 134, .5);
    box-shadow: 0 18px 40px rgba(60, 83, 90, .08);
}

.ws-faqs .ws-accordion__trigger { font-weight: 700; }

.ws-faqs .ws-accordion__item.is-open .ws-accordion__trigger { color: var(--ws-primary-dark); }

/* ---------------------------------------------------- related reads -- */
/* Light brand gradient under the related articles, so the page closes on a
   surface rather than the flat soft grey. */
.ws-related-reads {
    position: relative;
    background-color: #fbf9f5;
    background-image:
        radial-gradient(760px 440px at 92% -14%, rgba(107, 176, 134, .2), transparent 62%),
        radial-gradient(660px 420px at 4% 108%, rgba(236, 219, 198, .5), transparent 64%),
        linear-gradient(172deg, #ffffff 0%, #fdfaf6 46%, #f2f8f4 100%);
    overflow: hidden;
}

/* Botanical hairline where the article hands over to the related row. */
.ws-related-reads::before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(107, 176, 134, .45), transparent);
}

.ws-related-reads__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 28px;
    margin-block-end: clamp(22px, 2.6vw, 30px);
}

.ws-related-reads__title {
    margin: 12px 0 0;
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    line-height: 1.16;
    letter-spacing: -.026em;
    background: linear-gradient(104deg, #3c535a 18%, #0e5655 82%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Cards lift on hover here, since the whole tile is the link. */
.ws-related-reads .ws-blog {
    border: 1px solid rgba(107, 176, 134, .18);
    box-shadow: 0 16px 38px rgba(60, 83, 90, .08);
    transition: transform var(--ws-transition), box-shadow var(--ws-transition),
                border-color var(--ws-transition);
}

.ws-related-reads .ws-blog:hover {
    transform: translateY(-4px);
    border-color: rgba(107, 176, 134, .45);
    box-shadow: 0 26px 52px rgba(60, 83, 90, .14);
}

.ws-related-reads .ws-blog__media img { transition: transform .6s ease; }

.ws-related-reads .ws-blog:hover .ws-blog__media img { transform: scale(1.05); }

.ws-related-reads .ws-blog:hover .ws-blog__title { color: var(--ws-primary-dark); }

@media (prefers-reduced-motion: reduce) {
    .ws-related-reads .ws-blog:hover { transform: none; }
    .ws-related-reads .ws-blog:hover .ws-blog__media img { transform: none; }
}

/* ------------------------------------------------------------ legal -- */
/* Terms and privacy: the same light brand wash, with the policy on a single
   readable column rather than edge to edge. */
.ws-legal {
    position: relative;
    background-color: #fdfbf8;
    background-image:
        radial-gradient(680px 420px at 94% -10%, rgba(107, 176, 134, .14), transparent 62%),
        linear-gradient(178deg, #ffffff 0%, #fdfaf6 58%, #f6f9f6 100%);
    padding-block: clamp(28px, 3.4vw, 48px) clamp(40px, 5vw, 76px);
}

.ws-legal__panel {
    max-width: 1400px;
    margin-inline: auto;
    padding: clamp(26px, 3vw, 44px);
    border: 1px solid rgba(107, 176, 134, .22);
    border-radius: clamp(20px, 2.2vw, 28px);
    box-shadow: 0 24px 54px rgba(60, 83, 90, .09);
}

/* "Last updated" as a chip, so it reads as metadata not body copy. */
.ws-legal__updated {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 clamp(20px, 2.4vw, 28px);
    padding: 8px 16px;
    border: 1px solid rgba(107, 176, 134, .3);
    border-radius: var(--ws-radius-pill);
    background: rgba(107, 176, 134, .1);
    color: var(--ws-primary-dark);
    font-size: .8rem;
    font-weight: 700;
}

.ws-legal__updated .ws-icon { width: 1em; height: 1em; color: #4e9a6d; }

/* Headings inside the policy get the brand rule treatment. */
.ws-legal__body h3 {
    margin-block: clamp(26px, 3vw, 36px) 12px;
    padding-block-end: 10px;
    border-block-end: 1px solid rgba(107, 176, 134, .24);
    font-size: clamp(1.05rem, 1.7vw, 1.25rem);
    letter-spacing: -.016em;
    color: var(--ws-primary-dark);
}

.ws-legal__body h3:first-child { margin-block-start: 0; }

.ws-legal__body p { line-height: 1.85; }

/* -------------------------------------------------------- blog article -- */
/* Editorial headline gets a wider measure than the 18ch page titles. */
.ws-page-head.ws-page-head--article h1 {
    /* balance (the default here) keeps lines even and therefore narrow; an
       article headline should use the measure it is given. */
    max-width: min(44ch, 100%);
    font-size: clamp(1.5rem, 2.8vw, 2.3rem);
    line-height: 1.24;
    text-wrap: pretty;
}

.ws-article {
    position: relative;
    background-color: #fdfbf8;
    background-image:
        radial-gradient(680px 420px at 94% -10%, rgba(107, 176, 134, .14), transparent 62%),
        linear-gradient(178deg, #ffffff 0%, #fdfaf6 60%, #f6f9f6 100%);
    padding-block: clamp(26px, 3vw, 42px) clamp(40px, 5vw, 72px);
}

/* Category and date, centred under the headline. */
.ws-article__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 14px;
    margin-block-end: clamp(20px, 2.4vw, 28px);
}

.ws-article__cat {
    padding: 8px 16px;
    border-radius: var(--ws-radius-pill);
    background: rgba(60, 83, 90, .94);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    transition: background var(--ws-transition);
}

.ws-article__cat:hover { background: var(--ws-primary-dark); color: #fff; }

.ws-article__date {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ws-muted);
    font-size: .85rem;
    font-weight: 600;
}

.ws-article__date .ws-icon { width: 1em; height: 1em; color: #4e9a6d; }

/* Banner keeps the hero card treatment; the article measure sits under it. */
.ws-article__banner {
    aspect-ratio: 16 / 9;
    margin-block-end: clamp(26px, 3vw, 40px);
}

.ws-article__body {
    /* Full container width, matching the banner above it. */
    max-width: none;
}

/* Related cards keep their own height instead of stretching to the tallest. */
.ws-article + .ws-section .ws-grid--3 { align-items: start; }

/* ----------------------------------------------------------------- blog -- */
/* The filter row is a control strip, not a section head: it does not need the
   full section padding above and below it. */
.ws-blog-hero { padding-block: clamp(26px, 3vw, 40px) clamp(36px, 4.5vw, 64px); }

/* Categories on the left, search on the right, on one row. */
.ws-blog-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 20px;
    margin-block-end: clamp(22px, 2.6vw, 30px);
}

.ws-blog-filters__chips { flex: 1 1 320px; margin: 0; }

.ws-blog-filters { margin-block-end: clamp(18px, 2vw, 24px); }

.ws-blog-filters__search { flex: 0 1 300px; min-width: 220px; }

/* Frosted field: no submit button, the grid updates as you type. */
.ws-blog-filters__search .ws-search input {
    padding-block: 11px;
    border-color: rgba(107, 176, 134, .3);
    border-radius: var(--ws-radius-pill);
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 24px rgba(60, 83, 90, .07);
}

.ws-blog-filters__search .ws-search input:focus {
    border-color: #6bb086;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(107, 176, 134, .16);
}

.ws-blog-filters__search .ws-search .ws-icon { color: #4e9a6d; }

/* Cards keep their own height rather than stretching to the tallest in the row. */
.ws-blog-grid { align-items: start; }

/* The empty state spans the row instead of sitting in one cell. */
.ws-blog-empty { grid-column: 1 / -1; column-span: all; }

@media (max-width: 760px) {
    .ws-blog-filters { flex-direction: column; align-items: stretch; }
    .ws-blog-filters__search { flex: 1 1 auto; }
}

/* ---------------------------------------------------------- appointment -- */
/* Same light brand wash the other page openers use. */
.ws-appointment {
    position: relative;
    background-color: #fdfbf8;
    background-image:
        radial-gradient(720px 440px at 92% -12%, rgba(107, 176, 134, .16), transparent 62%),
        radial-gradient(640px 420px at 2% 106%, rgba(236, 219, 198, .45), transparent 64%),
        linear-gradient(176deg, #ffffff 0%, #fdfaf6 50%, #f4f8f5 100%);
    overflow: hidden;
}

.ws-appointment__grid { gap: clamp(24px, 3.4vw, 44px); }

/* Booking form: the bright card, the one thing the visitor acts on. */
.ws-appointment__form {
    padding: clamp(26px, 3vw, 38px);
    border: 1px solid rgba(107, 176, 134, .22);
    border-radius: clamp(20px, 2.2vw, 28px);
    box-shadow: 0 24px 54px rgba(60, 83, 90, .1);
}

.ws-appointment__form .ws-panel__head { margin-block-end: 18px; }

.ws-appointment__form .ws-panel__head h2 {
    font-size: clamp(1.3rem, 2.2vw, 1.75rem);
    letter-spacing: -.024em;
    background: linear-gradient(104deg, #3c535a 18%, #0e5655 82%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ws-appointment__form .ws-field label { font-size: .78rem; font-weight: 700; }

.ws-appointment__form .ws-field input,
.ws-appointment__form .ws-field select,
.ws-appointment__form .ws-field textarea { border-radius: 12px; }

.ws-appointment__form .ws-field input:focus,
.ws-appointment__form .ws-field select:focus,
.ws-appointment__form .ws-field textarea:focus {
    border-color: #6bb086;
    box-shadow: 0 0 0 4px rgba(107, 176, 134, .16);
}

/* Sign-in notice above the form. */
.ws-appointment__notice {
    margin-block: 0 20px;
    border-color: rgba(107, 176, 134, .32);
    background: rgba(107, 176, 134, .1);
}

/* Slot picker: a dashed well that holds the chips once they load. The chips
   are laid out on a track, so every time reads at the same width. */
.ws-slots {
    display: grid;
    align-content: center;
    gap: 14px;
    min-height: 62px;
    padding: 12px;
    border: 1px dashed rgba(107, 176, 134, .4);
    border-radius: 14px;
    background: rgba(107, 176, 134, .05);
}

.ws-slots__hint,
.ws-slots .ws-text-muted { margin: 0; }

/* Morning / afternoon groups, each on its own track so the times line up. */
.ws-slots__group { display: grid; gap: 8px; }

.ws-slots__label {
    color: #4e9a6d;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.ws-slots__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
    gap: 8px;
}

.ws-slots .ws-chip-btn {
    padding: 7px 6px;
    font-size: .82rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.ws-slots__hint {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    color: var(--ws-muted);
    font-size: .88rem;
}

.ws-slots__hint .ws-icon { width: 1.05em; height: 1.05em; color: #4e9a6d; }

/* Once slots render, the well is just a container for the chips. */
.ws-slots:has(.ws-chip) {
    border-style: solid;
    border-color: rgba(107, 176, 134, .24);
}

.ws-appointment__submit {
    margin-block-start: 6px;
    padding-block: 15px;
    background: linear-gradient(118deg, var(--ws-primary), var(--ws-primary-dark));
    box-shadow: 0 14px 30px rgba(14, 86, 85, .26);
}

.ws-appointment__aside { display: grid; gap: clamp(18px, 2vw, 24px); }

/* "What to expect": the dark panel of the pair. */
.ws-appointment__expect {
    padding: clamp(24px, 2.6vw, 32px);
    border: 0;
    border-radius: clamp(20px, 2.2vw, 28px);
    background-color: #16302f;
    background-image:
        radial-gradient(520px 320px at 100% 0%, rgba(107, 176, 134, .3), transparent 62%),
        linear-gradient(162deg, #24454a 0%, #183434 56%, #0d2120 100%);
    box-shadow: 0 24px 52px rgba(13, 33, 31, .26);
    color: rgba(255, 255, 255, .72);
}

.ws-appointment__expect h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.15rem, 1.8vw, 1.4rem);
    letter-spacing: -.02em;
}

.ws-appointment__list {
    display: grid;
    gap: 14px;
    margin-block: 18px 0;
    padding: 0;
    border: 0;
    list-style: none;
}

.ws-appointment__list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: rgba(255, 255, 255, .78);
    font-size: .92rem;
    line-height: 1.65;
}

/* Botanical disc behind each tick. */
.ws-appointment__list .ws-icon {
    flex: none;
    width: 26px;
    height: 26px;
    padding: 6px;
    border-radius: 50%;
    background: rgba(107, 176, 134, .2);
    color: #9ed9b6;
}

/* "Prefer to talk first?": the quiet card under it. */
.ws-appointment__talk {
    padding: clamp(24px, 2.6vw, 32px);
    border: 1px solid rgba(107, 176, 134, .22);
    border-radius: clamp(20px, 2.2vw, 28px);
    box-shadow: 0 18px 42px rgba(60, 83, 90, .08);
}

.ws-appointment__talk h2 {
    margin: 0;
    font-size: clamp(1.1rem, 1.7vw, 1.3rem);
    letter-spacing: -.02em;
}

.ws-appointment__talk > p { margin-block: 8px 18px; line-height: 1.7; }

.ws-appointment__talk .ws-btn--ghost {
    border-color: rgba(107, 176, 134, .4);
    background: rgba(107, 176, 134, .08);
    color: var(--ws-primary-dark);
}

.ws-appointment__talk .ws-btn--ghost:hover {
    border-color: var(--ws-primary-dark);
    background: var(--ws-primary-dark);
    color: #fff;
}

/* ----------------------------------------------------------- contact us -- */
/* Light brand wash under the two panels, same as the other page openers. */
.ws-contact {
    position: relative;
    background-color: #fdfbf8;
    background-image:
        radial-gradient(720px 440px at 92% -12%, rgba(107, 176, 134, .16), transparent 62%),
        radial-gradient(640px 420px at 2% 106%, rgba(236, 219, 198, .45), transparent 64%),
        linear-gradient(176deg, #ffffff 0%, #fdfaf6 50%, #f4f8f5 100%);
    overflow: hidden;
}

/* The details panel is reference material; the form is the task, so it keeps
   the larger share of the row. */
.ws-contact__grid {
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.45fr);
    align-items: start;
    gap: clamp(24px, 3.4vw, 44px);
}

/* Details panel: the dark one of the pair, so the form beside it stays the
   bright surface a visitor types into. */
.ws-contact__info {
    position: relative;
    padding: clamp(26px, 3vw, 38px);
    border: 0;
    border-radius: clamp(20px, 2.2vw, 28px);
    background-color: #16302f;
    background-image:
        radial-gradient(520px 320px at 100% 0%, rgba(107, 176, 134, .3), transparent 62%),
        linear-gradient(162deg, #24454a 0%, #183434 56%, #0d2120 100%);
    box-shadow: 0 26px 56px rgba(13, 33, 31, .28);
    color: rgba(255, 255, 255, .72);
}

.ws-contact__info h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.3rem, 2.2vw, 1.75rem);
    letter-spacing: -.024em;
}

.ws-contact__lead {
    margin: 10px 0 0;
    max-width: 42ch;
    color: rgba(255, 255, 255, .64);
    font-size: .92rem;
    line-height: 1.7;
}

/* Each row stacks: labelled icon on top, the value under it. */
.ws-contact__list {
    gap: 0;
    margin-block-start: clamp(22px, 2.4vw, 28px);
    list-style: none;
}

.ws-contact__list .ws-datalist__row {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 6px;
    padding-block: 16px;
    border-block-end: 1px solid rgba(255, 255, 255, .1);
}

.ws-contact__list .ws-datalist__row:first-child { padding-block-start: 0; }

.ws-contact__list .ws-datalist__row:last-child { border-block-end: 0; padding-block-end: 0; }

.ws-contact__list .ws-datalist__label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #9ed9b6;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ws-contact__list .ws-datalist__label .ws-icon { width: 1.15em; height: 1.15em; }

.ws-contact__list .ws-datalist__value {
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
}

a.ws-datalist__value { transition: color var(--ws-transition); }

.ws-contact__list a.ws-datalist__value:hover { color: #9ed9b6; }

.ws-contact__list .ws-text-muted { color: rgba(255, 255, 255, .5); }

/* Social buttons invert on the dark panel. */
.ws-contact__info .ws-social--contact a {
    border-color: rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.ws-contact__info .ws-social--contact a:hover {
    border-color: #fff;
    background: #fff;
    color: var(--ws-primary-dark);
}

/* Message panel: the bright card, with the brand focus ring on its fields. */
.ws-contact__form {
    padding: clamp(26px, 3vw, 38px);
    border: 1px solid rgba(107, 176, 134, .22);
    border-radius: clamp(20px, 2.2vw, 28px);
    box-shadow: 0 24px 54px rgba(60, 83, 90, .1);
}

.ws-contact__form h2 {
    margin: 0;
    font-size: clamp(1.3rem, 2.2vw, 1.75rem);
    letter-spacing: -.024em;
    background: linear-gradient(104deg, #3c535a 18%, #0e5655 82%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ws-contact__form > p { margin-block: 8px 0; line-height: 1.7; }

.ws-contact__form .ws-field label { font-size: .78rem; font-weight: 700; }

.ws-contact__form .ws-field input,
.ws-contact__form .ws-field textarea { border-radius: 12px; }

.ws-contact__form .ws-field input:focus,
.ws-contact__form .ws-field textarea:focus {
    border-color: #6bb086;
    box-shadow: 0 0 0 4px rgba(107, 176, 134, .16);
}

.ws-contact__form .ws-btn--primary { padding-block: 15px; }

/* ------------------------------------------------------------ programmes -- */
/* The goals as a row of pills rather than cards: the names are the content, so
   anything else around them was packaging. */
.ws-programmes .ws-section-head h2 { letter-spacing: -.028em; }

.ws-programme-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.ws-programme-pill {
    display: inline-flex;
    align-items: center;
    padding: 14px 28px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--ws-radius-pill);
    background: linear-gradient(150deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .05));
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .22);
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: -.01em;
    white-space: nowrap;
    transition: background var(--ws-transition), border-color var(--ws-transition),
                color var(--ws-transition), transform var(--ws-transition),
                box-shadow var(--ws-transition);
}

.ws-programme-pill:hover,
.ws-programme-pill:focus-visible {
    background: #fff;
    border-color: #fff;
    color: var(--ws-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(0, 0, 0, .3);
}

@media (max-width: 576px) {
    .ws-programme-pill { padding: 12px 20px; font-size: .88rem; }
}

@media (prefers-reduced-motion: reduce) {
    .ws-programme-pill:hover { transform: none; }
}

/* ------------------------------------------------------ what we stand for -- */
/* Numbered value cards: the same .ws-feature card, given an ordinal, a ruled
   title and a little more room to breathe. */
.ws-values .ws-section-head h2 {
    font-size: clamp(1.7rem, 3.2vw, 2.5rem);
    letter-spacing: -.028em;
    background: linear-gradient(104deg, #3c535a 18%, #0e5655 82%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ws-values__grid { counter-reset: ws-value; }

.ws-value {
    counter-increment: ws-value;
    padding: clamp(22px, 2.4vw, 30px);
}

/* Ordinal sits opposite the badge, quiet until the card is hovered. */
.ws-value::before {
    content: '0' counter(ws-value);
    position: absolute;
    inset-block-start: clamp(18px, 2vw, 24px);
    inset-inline-end: clamp(18px, 2vw, 24px);
    color: rgba(60, 83, 90, .22);
    font-size: .9rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
    transition: color var(--ws-transition);
}

.ws-value:hover::before { color: #6bb086; }

.ws-value h4 {
    position: relative;
    margin-block: 18px 12px;
    padding-block-end: 12px;
    font-size: 1.05rem;
    letter-spacing: -.012em;
}

/* Botanical rule under the title, growing on hover. */
.ws-value h4::after {
    content: '';
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    width: 26px;
    height: 2px;
    border-radius: var(--ws-radius-pill);
    background: linear-gradient(90deg, #6bb086, #0e5655);
    transition: width var(--ws-transition);
}

[dir="rtl"] .ws-value h4::after { background: linear-gradient(270deg, #6bb086, #0e5655); }

.ws-value:hover h4::after { width: 46px; }

.ws-value p { color: var(--ws-muted); line-height: 1.75; }

@media (prefers-reduced-motion: reduce) {
    .ws-value:hover h4::after { width: 26px; }
}

/* ------------------------------------------------------- about us intro -- */
/* The page's real opening block: same brand mesh and gradient ink as the home
   hero, so About reads like the rest of the site rather than a plain two-up. */
.ws-about-hero {
    position: relative;
    padding-block: clamp(44px, 6vw, 84px);
    background-color: #16302f;
    background-image:
        radial-gradient(900px 540px at 88% -14%, rgba(107, 176, 134, .3), transparent 60%),
        radial-gradient(760px 520px at 2% 108%, rgba(14, 86, 85, .55), transparent 62%),
        linear-gradient(168deg, #24454a 0%, #183434 54%, #0d2120 100%);
    overflow: hidden;
    color: rgba(255, 255, 255, .74);
}

/* Fading botanical hairlines on both edges, as on the other dark sections. */
.ws-about-hero::before,
.ws-about-hero::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(107, 176, 134, .45), transparent);
}

.ws-about-hero::before { inset-block-start: 0; }
.ws-about-hero::after { inset-block-end: 0; }

.ws-about-hero__grid {
    align-items: center;
    gap: clamp(28px, 4.4vw, 64px);
}

/* Inverted eyebrow for the dark ground. */
.ws-about-hero__copy .ws-eyebrow {
    border-color: rgba(107, 176, 134, .42);
    background: rgba(107, 176, 134, .16);
    color: #d6f2e2;
}

.ws-about-hero__copy .ws-eyebrow::before { background: #9ed9b6; }

.ws-about-hero__copy h2 {
    margin-block: 14px 16px;
    color: #fff;
    font-size: clamp(1.8rem, 3.4vw, 2.7rem);
    line-height: 1.14;
    letter-spacing: -.03em;
    text-wrap: balance;
}

.ws-about-hero__copy p {
    max-width: 56ch;
    color: rgba(255, 255, 255, .66);
    font-size: clamp(.95rem, 1.05vw, 1.05rem);
    line-height: 1.8;
}

/* First paragraph carries the weight; the second is supporting detail. */
.ws-about-hero__copy p:first-of-type { color: rgba(255, 255, 255, .82); }

/* Ghost button has to read against the dark field. */
.ws-about-hero__copy .ws-btn--primary,
.ws-meal-detail__copy .ws-btn--primary {
    background: linear-gradient(118deg, var(--ws-logo-lime), #0e5655);
    color: #fff;
    box-shadow: 0 14px 30px rgba(14, 86, 85, .38);
}

.ws-about-hero__copy .ws-btn--primary:hover,
.ws-meal-detail__copy .ws-btn--primary:hover { filter: brightness(1.06); }

.ws-about-hero__copy .ws-btn--ghost {
    border-color: rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.ws-about-hero__copy .ws-btn--ghost:hover {
    background: #fff;
    border-color: #fff;
    color: var(--ws-primary-dark);
}

/* Depth against the dark ground rather than the pale one. */
.ws-about-hero__media {
    box-shadow:
        0 34px 68px rgba(0, 0, 0, .42),
        0 10px 24px rgba(0, 0, 0, .22),
        0 0 0 1px rgba(255, 255, 255, .14),
        -16px 18px 0 -8px rgba(107, 176, 134, .34);
}

[dir="rtl"] .ws-about-hero__media {
    box-shadow:
        0 34px 68px rgba(0, 0, 0, .42),
        0 10px 24px rgba(0, 0, 0, .22),
        0 0 0 1px rgba(255, 255, 255, .14),
        16px 18px 0 -8px rgba(107, 176, 134, .34);
}

.ws-about-hero__copy .ws-btn-row { margin-block-start: clamp(22px, 2.6vw, 30px); }

.ws-about-hero__copy .ws-btn { padding-block: 15px; padding-inline: 30px; }

/* Staggered entrance, matching the home hero and the page heads. */
.ws-about-hero__copy > *,
.ws-about-hero__media { animation: ws-head-rise .62s cubic-bezier(.22, .8, .3, 1) both; }

.ws-about-hero__copy > *:nth-child(2) { animation-delay: .06s; }
.ws-about-hero__copy > *:nth-child(3) { animation-delay: .1s; }
.ws-about-hero__copy > *:nth-child(4) { animation-delay: .14s; }
.ws-about-hero__copy > *:nth-child(5) { animation-delay: .18s; }
.ws-about-hero__media { animation-delay: .12s; }

@media (prefers-reduced-motion: reduce) {
    .ws-about-hero__copy > *,
    .ws-about-hero__media { animation: none; }
}

/* ----------------------------------------------------------- page header -- */
/* Same brand mesh the home hero uses, so an inner page opens on the same light
   wash instead of a flat gradient: botanical top-end, cream bottom-start. */
.ws-page-head {
    position: relative;
    isolation: isolate;
    /* Top clearance keeps the crumb chip out of the floating .ws-fab controls. */
    padding-block: clamp(84px, 9vw, 104px) clamp(34px, 4vw, 56px);
    background-color: #fbf8f4;
    background-image:
        radial-gradient(820px 460px at 86% -16%, rgba(107, 176, 134, .24), transparent 62%),
        radial-gradient(700px 460px at 6% 112%, rgba(236, 219, 198, .66), transparent 64%),
        var(--ws-gradient-hero);
    overflow: hidden;
    text-align: center;
}

/* Blurred botanical light, low enough in opacity to stay behind the type. */
.ws-page-head::before {
    content: '';
    position: absolute;
    inset-block-start: -34%;
    inset-inline-start: 50%;
    z-index: -1;
    width: min(560px, 62vw);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(107, 176, 134, .3), transparent 72%);
    filter: blur(28px);
    transform: translateX(-50%);
    pointer-events: none;
}

/* Fading botanical hairline where the head meets the page body. */
.ws-page-head::after {
    content: '';
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(107, 176, 134, .5), transparent);
}

/* The crumbs are markup-last for the structured data, but they read first. */
.ws-page-head > .ws-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ws-page-head nav { order: -1; margin-block-end: 18px; }

.ws-page-head h1 {
    max-width: 18ch;
    margin-block-end: 12px;
    font-size: clamp(1.9rem, 4vw, 3.1rem);
    line-height: 1.1;
    letter-spacing: -.03em;
    text-wrap: balance;
    background: linear-gradient(104deg, #3c535a 18%, #0e5655 82%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ws-page-head p {
    max-width: 62ch;
    margin-inline: auto;
    color: var(--ws-muted);
    font-size: clamp(.95rem, 1.1vw, 1.05rem);
    line-height: 1.75;
    text-wrap: pretty;
}

/* Breadcrumb as a frosted chip rather than loose text under the lead. */
.ws-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border: 1px solid rgba(107, 176, 134, .3);
    border-radius: var(--ws-radius-pill);
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 6px 18px rgba(60, 83, 90, .07);
    backdrop-filter: blur(6px);
    list-style: none;
    font-size: .8rem;
    font-weight: 600;
    color: var(--ws-muted);
}

.ws-breadcrumb a { color: var(--ws-primary-dark); }

.ws-breadcrumb a:hover { color: #4e9a6d; }

.ws-breadcrumb .ws-icon { width: .9em; height: .9em; color: rgba(107, 176, 134, .9); }

/* Staggered entrance, matched to the home hero. */
.ws-page-head nav,
.ws-page-head h1,
.ws-page-head p { animation: ws-head-rise .62s cubic-bezier(.22, .8, .3, 1) both; }

.ws-page-head h1 { animation-delay: .06s; }
.ws-page-head p { animation-delay: .12s; }

@keyframes ws-head-rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ws-page-head nav,
    .ws-page-head h1,
    .ws-page-head p { animation: none; }
}

/* Short titles that should not be broken by the 18ch cap. */
.ws-page-head.ws-page-head--wide h1 { max-width: none; text-wrap: nowrap; }

@media (max-width: 760px) {
    .ws-page-head.ws-page-head--wide h1 { text-wrap: balance; }
}

/* Account pages: title only, so it keeps the tighter box and a smaller head. */
.ws-page-head--compact {
    padding-block: clamp(74px, 8vw, 92px) clamp(20px, 2.5vw, 30px);
}

.ws-page-head--compact h1 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); }

/* ------------------------------------------------------------------ CTA -- */
/* Capped because the page container is fluid — a full-bleed CTA card reads as
   a background band rather than a call to action. */
.ws-cta {
    position: relative;
    max-width: 1180px;
    margin-inline: auto;
    padding: clamp(38px, 5vw, 68px) clamp(24px, 5vw, 60px);
    border-radius: var(--ws-radius-lg);
    background: var(--ws-gradient);
    color: #fff;
    box-shadow: var(--ws-shadow-lg);
    overflow: hidden;
    text-align: center;
    isolation: isolate;
}

/* Two soft glows instead of one hard disc: reads as depth rather than as a
   stray circle clipped by the corner. */
.ws-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 80% at 88% -10%, rgba(255, 255, 255, .26), transparent 62%),
        radial-gradient(48% 70% at 6% 108%, rgba(255, 255, 255, .16), transparent 60%);
    pointer-events: none;
}

/* Hairline inset ring — lifts the card off the page background. */
.ws-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, .22);
    pointer-events: none;
}

.ws-cta > * { position: relative; z-index: 1; }

.ws-cta h2 {
    max-width: 20ch;
    margin-inline: auto;
    color: #fff;
    text-wrap: balance;
}

.ws-cta p {
    max-width: 56ch;
    margin-inline: auto;
    margin-block-end: 0;
    color: rgba(255, 255, 255, .9);
    text-wrap: pretty;
}

.ws-cta .ws-btn-row { justify-content: center; margin-block-start: 28px; }

.ws-cta__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-block-end: 16px;
    padding: 6px 16px;
    border-radius: var(--ws-radius-pill);
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .28);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ws-cta__points {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 26px;
    margin-block-start: 26px;
    padding-block-start: 24px;
    border-block-start: 1px solid rgba(255, 255, 255, .2);
    list-style: none;
}

.ws-cta__points li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, .92);
    font-size: .9rem;
    font-weight: 600;
}

.ws-cta__points .ws-icon { color: #fff; }

/* Solid white primary against the green card — the translucent `--light`
   buttons gave the two actions equal weight. */
.ws-btn--solid-light {
    background: #fff;
    border-color: #fff;
    color: var(--ws-primary-darker);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .18);
}

.ws-btn--solid-light:hover {
    background: #fff;
    color: var(--ws-primary-darker);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .24);
}

/* Full-bleed closing CTA ------------------------------------------------ */
/* The band carries the surface so the CTA runs edge to edge; `--light` then
   strips the card chrome. The band is the page's closing statement, so it
   takes the same dark brand surface as the other feature bands. */
.ws-cta-band {
    position: relative;
    isolation: isolate;
    /* Light brand wash: botanical overhead, cream along the bottom. It sits
       between the white client rail and the dark footer, so the page steps
       from light to dark rather than jumping. */
    background-color: #fbf9f5;
    background-image:
        radial-gradient(900px 460px at 50% -34%, rgba(107, 176, 134, .3), transparent 66%),
        radial-gradient(760px 420px at 8% 116%, rgba(236, 219, 198, .72), transparent 68%),
        linear-gradient(170deg, #ffffff 0%, #f8f4ed 55%, #eef6f0 100%);
    overflow: hidden;
}

/* Botanical hairlines at both edges. */
.ws-cta-band::before,
.ws-cta-band::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(107, 176, 134, .5) 24%,
                                rgba(107, 176, 134, .5) 76%, transparent);
}

.ws-cta-band::before { inset-block-start: 0; }
.ws-cta-band::after { inset-block-end: 0; }

/* No card, so the card's own block padding would just double up on the
   section's — drop it and let `.ws-section--tight` set the rhythm. */
.ws-cta--light {
    max-width: none;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--ws-body);
}

.ws-cta--light::before,
.ws-cta--light::after { content: none; }

.ws-cta--light h2 {
    color: var(--ws-ink);
    font-size: clamp(1.9rem, 3.6vw, 2.9rem);
    letter-spacing: -.032em;
}

.ws-cta--light p {
    color: var(--ws-muted);
    font-size: 1.05rem;
    line-height: 1.75;
}

.ws-cta--light .ws-cta__eyebrow {
    padding: 8px 18px;
    border-color: rgba(107, 176, 134, .34);
    background: linear-gradient(120deg, rgba(107, 176, 134, .16), rgba(236, 219, 198, .34));
    color: var(--ws-primary-darker);
    letter-spacing: .1em;
}

.ws-cta--light .ws-cta__eyebrow .ws-icon { color: var(--ws-logo-lime); }

.ws-cta-band .ws-btn--primary {
    background: linear-gradient(118deg, #3c535a, #0e5655);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 14px 30px rgba(14, 86, 85, .26);
}

.ws-cta-band .ws-btn--primary:hover {
    color: #fff;
    box-shadow: 0 20px 40px rgba(14, 86, 85, .32);
}

.ws-cta-band .ws-btn--ghost {
    background: rgba(255, 255, 255, .78);
    border-color: rgba(60, 83, 90, .14);
    color: var(--ws-ink);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.ws-cta-band .ws-btn--ghost:hover {
    border-color: rgba(107, 176, 134, .6);
    color: var(--ws-primary-dark);
}

.ws-cta-band .ws-btn {
    padding: 15px 30px;
    font-size: 1rem;
}

/* The closing checks read as chips here rather than a ruled-off row. */
.ws-cta--light .ws-cta__points {
    gap: 10px;
    padding-block-start: 0;
    border-block-start: 0;
}

.ws-cta--light .ws-cta__points li {
    padding: 9px 16px;
    border: 1px solid rgba(60, 83, 90, .09);
    border-radius: var(--ws-radius-pill);
    background: rgba(255, 255, 255, .74);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--ws-ink);
    font-size: .88rem;
}

.ws-cta--light .ws-cta__points .ws-icon { color: var(--ws-logo-lime); }

/* ------------------------------------------------- floating whatsapp -- */
/* Sits opposite the .ws-fab controls (which are pinned top-right), so the two
   never collide. */
.ws-whatsapp {
    position: fixed;
    inset-block-end: clamp(18px, 3vh, 30px);
    inset-inline-end: clamp(18px, 3vw, 30px);
    z-index: 110;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, #25d366 0%, #14a44a 55%, #0d8a3d 100%);
    color: #fff;
    box-shadow: 0 12px 28px rgba(18, 140, 63, .42);
    transition: transform var(--ws-transition), box-shadow var(--ws-transition);
}

.ws-whatsapp:hover {
    color: #fff;
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 18px 38px rgba(18, 140, 63, .5);
}

.ws-whatsapp__icon { width: 1.7em; height: 1.7em; position: relative; z-index: 1; }

/* Expanding ring behind the button. Sits under the icon and ignores pointer
   events so it never steals the click. */
.ws-whatsapp__pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(37, 211, 102, .55);
    animation: ws-whatsapp-pulse 2.4s cubic-bezier(.4, 0, .6, 1) infinite;
    pointer-events: none;
}

@keyframes ws-whatsapp-pulse {
    0%   { transform: scale(1);   opacity: .7; }
    70%  { transform: scale(1.8); opacity: 0; }
    100% { transform: scale(1.8); opacity: 0; }
}

@media (max-width: 576px) {
    .ws-whatsapp { width: 52px; height: 52px; }
    .ws-whatsapp__icon { width: 1.5em; height: 1.5em; }
}

@media (prefers-reduced-motion: reduce) {
    .ws-whatsapp__pulse { animation: none; }
    .ws-whatsapp:hover { transform: none; }
}

/* --------------------------------------------------------------- footer -- */
/* Deliberately the darkest surface on the site — the CTA band above it is a
   pale wash, so the page closes on a clear step down rather than two dark
   areas running together. */
.ws-footer {
    position: relative;
    padding-block: clamp(34px, 3.4vw, 48px) 26px;
    background-color: #12242a;
    background-image:
        radial-gradient(820px 420px at 8% -20%, rgba(107, 176, 134, .16), transparent 66%),
        radial-gradient(700px 400px at 94% 112%, rgba(14, 86, 85, .34), transparent 70%),
        linear-gradient(165deg, #22363c 0%, #162c2f 56%, #0c1f22 100%);
    color: rgba(255, 255, 255, .66);
}

/* Botanical hairline along the top edge, matching the dark feature bands. */
.ws-footer::before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(107, 176, 134, .5) 24%,
                                rgba(107, 176, 134, .5) 76%, transparent);
}

/* Newsletter strip: a full-width row above the columns. Keeping it inside the
   contact column made that column twice the height of the link lists, which
   left a dead block of empty footer beside it. */
/* Signup strip as a panel rather than a bare row: a botanical wash, a hairline
   and a mail badge, so it reads as an invitation instead of a label. */
.ws-footer__signup {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px clamp(24px, 4vw, 56px);
    padding: clamp(22px, 2.6vw, 30px) clamp(22px, 2.8vw, 34px);
    margin-block-end: clamp(30px, 4vw, 44px);
    border: 1px solid rgba(107, 176, 134, .24);
    border-radius: clamp(18px, 2vw, 24px);
    background-image:
        radial-gradient(520px 260px at 0% 0%, rgba(107, 176, 134, .22), transparent 62%),
        linear-gradient(118deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03));
}

.ws-footer__signup-copy {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex: 1 1 320px;
    max-width: 560px;
}

/* Mail badge beside the copy. */
.ws-newsletter__badge {
    display: grid;
    place-items: center;
    flex: none;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(107, 176, 134, .4);
    border-radius: 15px;
    background: rgba(107, 176, 134, .18);
    color: #d6f2e2;
}

.ws-newsletter__badge .ws-icon { width: 1.2em; height: 1.2em; }

.ws-newsletter__eyebrow {
    display: block;
    margin-block-end: 4px;
    color: #9ed9b6;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.ws-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
    gap: clamp(24px, 4vw, 44px);
}

.ws-footer__brand img { max-height: 58px; width: auto; max-width: 100%; margin-block-end: 16px; }

.ws-footer__tagline { max-width: 420px; font-size: .92rem; line-height: 1.75; }

/* Column headings: small caps with a botanical tint, so they label the column
   without competing with the links under them. */
.ws-footer__title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-block-end: 18px;
    color: #d6efe0;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ws-footer__title::before {
    content: '';
    width: 16px;
    height: 2px;
    flex: none;
    border-radius: var(--ws-radius-pill);
    background: var(--ws-logo-lime);
}

.ws-footer__links,
.ws-footer__contact { display: grid; gap: 12px; list-style: none; }

.ws-footer__links a {
    display: inline-block;
    color: rgba(255, 255, 255, .66);
    font-size: .9rem;
    transition: color var(--ws-transition), transform var(--ws-transition);
}

/* Links step toward the reading direction on hover. */
.ws-footer__links a:hover {
    color: #fff;
    transform: translateX(3px);
}

[dir="rtl"] .ws-footer__links a:hover { transform: translateX(-3px); }

/* Current page: full-strength white with a botanical marker, so the footer
   says where you are the same way the menu does. */
.ws-footer__links a.is-active {
    color: #fff;
    font-weight: 600;
}

.ws-footer__links a.is-active::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-inline-end: 9px;
    border-radius: 50%;
    background: var(--ws-logo-lime);
    vertical-align: middle;
}

.ws-footer__contact li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: .88rem;
    line-height: 1.7;
}

/* Was --ws-primary, which is all but invisible on this ground. */
.ws-footer__contact .ws-icon { margin-block-start: 4px; color: var(--ws-logo-lime); }

.ws-footer__contact a { color: rgba(255, 255, 255, .66); }

.ws-footer__contact a:hover { color: #fff; }

.ws-social { display: flex; gap: 10px; margin-block-start: 20px; }

.ws-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 14px;
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .82);
    transition: background var(--ws-transition), color var(--ws-transition),
    border-color var(--ws-transition), transform var(--ws-transition);
}

.ws-social a:hover {
    background: var(--ws-logo-lime);
    border-color: var(--ws-logo-lime);
    color: #14362a;
    transform: translateY(-3px);
}

/* Contact card sits on a light surface, so the footer's translucent-on-dark
   treatment is overridden here. Declared after the base rule on purpose —
   same specificity, so source order decides. */
.ws-social--contact { margin-block-start: 8px; }

.ws-social--contact a {
    border: 1px solid var(--ws-line);
    background: var(--ws-surface);
    color: var(--ws-body);
}

.ws-social--contact a:hover {
    border-color: var(--ws-primary);
    background: var(--ws-primary-softer);
    color: var(--ws-primary-dark);
}

/* Newsletter: the submit button is nested in the input pill so the whole
   control reads as one field. */
.ws-newsletter { flex: 1 1 340px; max-width: 440px; }

.ws-newsletter__title {
    margin: 0 0 6px;
    color: #fff;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -.014em;
}

.ws-newsletter__hint {
    margin: 0;
    color: rgba(255, 255, 255, .56);
    font-size: .82rem;
    line-height: 1.6;
}

.ws-newsletter__field {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-block: 5px;
    padding-inline: 15px 5px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--ws-radius-pill);
    background: rgba(255, 255, 255, .07);
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.ws-newsletter__field:focus-within {
    border-color: rgba(107, 176, 134, .72);
    background: rgba(255, 255, 255, .11);
    box-shadow: 0 0 0 4px rgba(107, 176, 134, .13);
}

.ws-newsletter__icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: var(--ws-logo-lime);
}

.ws-newsletter__icon svg { width: 17px; height: 17px; }

.ws-newsletter__field input {
    flex: 1;
    min-width: 0;
    padding-block: 10px;
    border: 0;
    background: none;
    color: #fff;
    font-family: inherit;
    font-size: .88rem;
}

.ws-newsletter__field input::placeholder { color: rgba(255, 255, 255, .45); }

.ws-newsletter__field input:focus { outline: none; }

/* The footer's one coloured action. */
.ws-newsletter__submit {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    padding-block: 10px;
    padding-inline: 17px;
    border: 0;
    border-radius: var(--ws-radius-pill);
    background: linear-gradient(118deg, var(--ws-logo-lime), #0e5655);
    box-shadow: 0 8px 18px rgba(14, 86, 85, .3);
    color: #fff;
    font-family: inherit;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.ws-newsletter__submit svg { width: 15px; height: 15px; }

.ws-newsletter__submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(14, 86, 85, .42);
    filter: brightness(1.06);
}

.ws-newsletter__submit:disabled { opacity: .65; cursor: not-allowed; transform: none; }

/* Invalid state + plugin message, themed for the dark footer. */
.ws-newsletter__field.is-invalid {
    border-color: rgba(255, 150, 134, .62);
    background: rgba(255, 150, 134, .08);
}

.ws-newsletter__field.is-invalid:focus-within { box-shadow: 0 0 0 4px rgba(255, 150, 134, .13); }

.ws-newsletter__feedback:empty { display: none; }

.ws-newsletter__feedback {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-block-start: 10px;
    color: #ffb7a9;
    font-size: .78rem;
    line-height: 1.5;
}

.ws-newsletter__feedback label.error { margin: 0; font-weight: 500; }

@media (max-width: 760px) {
    .ws-footer__signup { align-items: flex-start; }
    .ws-newsletter { max-width: none; }
}

@media (max-width: 420px) {
    .ws-newsletter__submit-text { display: none; }
    .ws-newsletter__submit { padding-inline: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .ws-newsletter__submit:hover { transform: none; }
}

.ws-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    margin-block-start: clamp(40px, 5vw, 56px);
    padding-block-start: 24px;
    border-block-start: 1px solid rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .54);
    font-size: .82rem;
}

.ws-footer__bottom p { margin: 0; }

/* The WhatsApp launcher is fixed at the end edge; keep the bottom bar's links
   clear of it. Scoped with :has so the bar is untouched when no number is
   configured and the launcher is not rendered. */
body:has(.ws-whatsapp) .ws-footer__bottom { padding-inline: 84px; }

@media (max-width: 576px) {
    body:has(.ws-whatsapp) .ws-footer__bottom { padding-inline: 0; padding-block-end: 76px; }
}

/* Policy links sit opposite the copyright line. */
.ws-footer__legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
}

.ws-footer__legal a {
    position: relative;
    color: rgba(255, 255, 255, .62);
    transition: color var(--ws-transition);
}

.ws-footer__legal a:hover { color: #fff; }

.ws-footer__legal a.is-active { color: #fff; font-weight: 600; }

/* Thin divider between the two links. */
.ws-footer__legal a + a::before {
    content: '';
    position: absolute;
    inset-block: 3px;
    inset-inline-start: -10px;
    width: 1px;
    background: rgba(255, 255, 255, .22);
}

.ws-footer__bottom a { color: rgba(255, 255, 255, .82); }

/* ------------------------------------------------------------ empty state -- */
.ws-empty {
    padding: 54px 24px;
    text-align: center;
    color: var(--ws-muted);
}

.ws-empty .ws-icon-badge { margin-inline: auto; margin-block-end: 18px; }

.ws-empty h3 { margin-block-end: 8px; }

/* ------------------------------------------------------------- utilities -- */
.ws-text-center { text-align: center; }
.ws-text-muted { color: var(--ws-muted); }
.ws-mb-0 { margin-block-end: 0; }
.ws-mt-3 { margin-block-start: 24px; }
.ws-mt-4 { margin-block-start: 32px; }
.ws-hidden { display: none !important; }
.ws-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ws-prose { color: var(--ws-body); }
.ws-prose h2 { margin-block: 1.6em .6em; }
.ws-prose h3 { margin-block: 1.4em .5em; }
.ws-prose ul, .ws-prose ol { margin-block-end: 1rem; padding-inline-start: 1.3rem; }
.ws-prose li { margin-block-end: .4rem; }
.ws-prose img { border-radius: var(--ws-radius); margin-block: 1rem; }

/* ------------------------------------------------------------ responsive -- */
@media (max-width: 1080px) {
    .ws-footer__grid { grid-template-columns: 1fr 1fr; }
    .ws-hero__inner { grid-template-columns: 1fr; }
    .ws-hero__media { order: -1; max-width: 620px; margin-inline: auto; }
    .ws-hero__lead, .ws-hero__lead--sm { max-width: none; }
    /* Full-width copy column: more room per line, so the slogan can scale up
       again and still sit on one row. */
    .ws-hero__title { font-size: clamp(1.3rem, 6.2vw, 2.9rem); }
    .ws-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 992px) {
    .ws-grid--split,
    .ws-grid--split-reverse,
    .ws-checkout { grid-template-columns: 1fr; }
    .ws-account { grid-template-columns: 1fr; }
    .ws-account__nav { position: static; }
    .ws-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* The two-pane menu stacks: links first, download band underneath. */
    .ws-menu {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto;
    }

    .ws-menu__brand { grid-row: 2; }

    .ws-menu__logo { display: none; }
    .ws-menu__screens { display: none; }

    .ws-menu__apps-inner { padding: 28px 24px; gap: 16px; }

    .ws-menu__panel { justify-content: flex-start; padding: 84px 24px 32px; }

    .ws-menu__foot { position: static; margin-block-start: 28px; align-self: auto; inset: auto; }
}

@media (max-width: 768px) {
    .ws-form__row { grid-template-columns: 1fr; }
    .ws-footer__grid { grid-template-columns: 1fr; }
    .ws-panel { padding: 22px; }
    .ws-hero__points { gap: 8px; }
    .ws-hero__points li { padding: 8px 13px; font-size: .84rem; }
    .ws-hero__logo { width: min(240px, 70%); }
}

@media (max-width: 576px) {
    body.ws-body { font-size: 15px; }

    .ws-fab { inset-block-start: 14px; inset-inline-end: 14px; gap: 8px; }
    .ws-fab__cta { height: 46px; padding-inline: 20px; font-size: .9rem; }
    .ws-fab__icon { width: 46px; height: 46px; }
    .ws-menu__apps-title { font-size: 1.5rem; }
    .ws-menu__store-buttons { width: 100%; }
    .ws-menu__store-buttons .ws-store-btn { flex: 1 1 140px; }
    .ws-grid--2,
    .ws-grid--3,
    .ws-grid--4 { grid-template-columns: 1fr; }
    .ws-grid--auto { grid-template-columns: 1fr; }
    .ws-btn { width: 100%; }
    .ws-btn-row .ws-btn { width: 100%; }
    .ws-card__body,
    .ws-plan { padding: 22px 20px; }
    .ws-footer__bottom { justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    .ws-menu__screens:hover .ws-phone:nth-child(2) { transform: none; }

    * {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Menu items page: single-select category tabs + section heading ---------- */
/* Plan selector: a dark bar above the category tabs, naming the plan being
   browsed and carrying the switch for the others. */
.ws-menu-plans {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 28px;
    padding: clamp(18px, 2.2vw, 26px) clamp(20px, 2.4vw, 30px);
    margin-block-end: clamp(22px, 2.6vw, 30px);
    border-radius: clamp(18px, 2vw, 26px);
    background-color: #16302f;
    background-image:
        radial-gradient(120% 160% at 0% 0%, rgba(107, 176, 134, .3), transparent 58%),
        linear-gradient(118deg, #1d3a37 0%, #16302f 52%, #0d211f 100%);
    box-shadow: 0 20px 44px rgba(13, 33, 31, .26);
}

.ws-menu-plans__intro {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.ws-menu-plans__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 15px;
    background: rgba(255, 255, 255, .1);
    color: #d6efe0;
}

.ws-menu-plans__icon .ws-icon { width: 1.2em; height: 1.2em; }

.ws-menu-plans__eyebrow {
    display: block;
    color: rgba(255, 255, 255, .56);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.ws-menu-plans__title {
    margin: 2px 0 0;
    color: #fff;
    font-size: clamp(1.3rem, 2.2vw, 1.8rem);
    line-height: 1.12;
    letter-spacing: -.026em;
}

.ws-menu-plans__lead {
    margin: 4px 0 0;
    color: rgba(255, 255, 255, .6);
    font-size: .85rem;
}

/* The pills sit in the space beside the title and scroll sideways when there
   are more plans than fit, rather than wrapping onto their own rows. */
.ws-menu-plans__list {
    display: flex;
    flex: 1 1 320px;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 4px;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: inline proximity;
    mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}

.ws-menu-plans__list::-webkit-scrollbar { display: none; }

.ws-menu-plans__list > li { scroll-snap-align: end; }

.ws-menu-plan {
    flex: none;
    padding: 10px 18px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--ws-radius-pill);
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .82);
    font-family: inherit;
    font-size: .86rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--ws-transition), color var(--ws-transition),
                border-color var(--ws-transition), transform var(--ws-transition);
}

.ws-menu-plan:hover {
    background: rgba(255, 255, 255, .16);
    color: #fff;
    transform: translateY(-1px);
}

.ws-menu-plan.is-active {
    background: #fff;
    border-color: #fff;
    color: var(--ws-primary-dark);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .22);
}

@media (max-width: 860px) {
    .ws-menu-plans { flex-direction: column; align-items: flex-start; }
    .ws-menu-plans__list { width: 100%; justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    .ws-menu-plan:hover { transform: none; }
}

/* Frozen to the bottom of the viewport: fixed rather than sticky, because a
   bottom-sticky row scrolls away once the grid moves past it. */
.ws-menu-tabs {
    position: fixed;
    inset-inline: 0;
    inset-block-end: clamp(14px, 2vh, 22px);
    z-index: 40;
    display: flex;
    justify-content: center;
    /* Clear of the floating WhatsApp launcher at the end edge. */
    padding-inline: 16px 86px;
    pointer-events: none;
}

/* Only the bar itself takes clicks, so the sticky row does not swallow taps on
   the cards it floats over. */
.ws-menu-tabs__list { pointer-events: auto; max-width: min(100%, 1120px); }

/* Out of the way once the grid is behind you, so it never covers the CTA or
   the footer. */
.ws-menu-tabs {
    transition: opacity .25s ease, transform .25s ease;
}

.ws-menu-tabs.is-parked {
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
}

/* Room under the grid so the last row is not hidden behind the pinned tabs. */
.ws-menu-hero { padding-block-end: clamp(92px, 12vh, 128px); }

.ws-menu-tabs__list {
    display: flex;
    gap: 4px;
    max-width: 100%;
    margin: 0;
    padding: 6px;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
    border: 1px solid rgba(107, 176, 134, .22);
    border-radius: var(--ws-radius-pill);
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(10px);
    /* Floating over the grid, so the shadow reads from every side: an ambient
       ring with no offset, a soft halo above, and the weight below. */
    box-shadow:
        0 0 0 1px rgba(60, 83, 90, .04),
        0 0 28px rgba(60, 83, 90, .12),
        0 -8px 22px rgba(60, 83, 90, .07),
        0 16px 38px rgba(60, 83, 90, .2);
}

.ws-menu-tabs__list::-webkit-scrollbar { display: none; }

.ws-menu-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 0;
    border-radius: var(--ws-radius-pill);
    background: transparent;
    color: var(--ws-body);
    font-family: inherit;
    font-size: .88rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--ws-transition), color var(--ws-transition);
}

.ws-menu-tab:hover { color: var(--ws-primary-dark); background: rgba(107, 176, 134, .12); }

.ws-menu-tab__count {
    padding: 1px 8px;
    border-radius: var(--ws-radius-pill);
    background: var(--ws-primary-softer);
    font-size: .72rem;
    font-weight: 700;
}

.ws-menu-tab.is-active {
    background: linear-gradient(118deg, var(--ws-primary), var(--ws-primary-dark));
    color: #fff;
    box-shadow: 0 8px 18px rgba(14, 86, 85, .26);
}
.ws-menu-tab.is-active .ws-menu-tab__count { background: rgba(255, 255, 255, .2); }

/* The listing opens on the same brand wash as the page head above it, so the
   tabs and the first row of cards sit on one continuous surface. */
.ws-menu-hero {
    position: relative;
    /* No isolation here: it would scope the pinned tab bar's z-index to this
       section, and the footer (later in the document) would paint over it. */
    background-color: #fdfbf8;
    background-image:
        radial-gradient(720px 420px at 94% -10%, rgba(107, 176, 134, .16), transparent 62%),
        radial-gradient(620px 400px at 4% 6%, rgba(236, 219, 198, .4), transparent 62%),
        linear-gradient(180deg, #fdfbf7 0%, #ffffff 42%);
}



/* Dark pill over the photo, bottom corner, as on the plan menu. */
.ws-meal__tag--dark {
    inset-block-start: auto;
    inset-block-end: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(60, 83, 90, .88);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
}

.ws-meal__tag--dark svg { width: 14px; height: 14px; }