/* ==========================================================================
   Websly Ease — "botanical greenhouse on cream paper"
   An experiment: Websly's own homepage rebuilt in the Ease Health design
   language (cream canvas, tinted flat panels, whisper-weight serif display,
   humanist sans everything-else, 14px radius, no shadows anywhere).

   Everything is namespaced --ee-* / .ee-* so it can never collide with
   gold.css, rosita.css, the Cloud settings engine, or the platform's own
   websly- vocabulary.

   Structure
     1  Fonts
     2  Tokens
     3  Reset + base
     4  Layout primitives (container / padding-global / section rhythm)
     5  Type
     6  Components (button, badge, panel, eyebrow, card)
     7  Motion (reveal, marquee, counters)
     8  Blocks (nav, hero, trust, trades, support, callout, why, work, cta, footer)
     9  Reduced motion
   ========================================================================== */

/* ── 1  Fonts — self-hosted, zero external origins ───────────────────────── */

/* Cormorant Garamond is the substitute the Ease Health system names for
   Faire Octave. Variable 300–700; only 300 is ever used for display. */
@font-face {
  font-family: 'Ease Display';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('./assets/fonts/cormorant-garamond-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Ease Display';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('./assets/fonts/cormorant-garamond-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Inter is the substitute for Suisse Intl. Variable 100–900. */
@font-face {
  font-family: 'Ease Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Ease Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── 2  Tokens ───────────────────────────────────────────────────────────── */

/* The whole system is sized in rem off a 14px root, exactly like the
   reference site — so 1rem is the body size and every spacing step is a
   round rem number. */
html { font-size: 87.5%; }

:root {
  /* Colour — the palette is closed. Botanical greens + one slate, nothing else. */
  --ee-forest:        #0f3e17;   /* the only saturated dark: headings, CTAs, links */
  --ee-forest-deep:   #0c2f10;   /* hover state for forest fills only */
  --ee-sage:          #b1dbb8;   /* heavier tinted panel */
  --ee-keylime:       #e1f4df;   /* the dominant tinted canvas tone */
  --ee-mint:          #cfe7d3;   /* mid-tone band between keylime and sage */
  --ee-slate:         #b6ced5;   /* the one cool panel — product showcases only */
  --ee-cream:         #fffefc;   /* page ground, badge fill, button text */
  --ee-charcoal:      #222222;   /* body copy, nav */
  --ee-border:        #efeeeb;   /* hairlines */

  /* Derived greys — tints of charcoal, not new hues */
  --ee-charcoal-70:   rgba(34, 34, 34, .70);
  --ee-charcoal-55:   rgba(34, 34, 34, .55);
  --ee-forest-20:     rgba(15, 62, 23, .20);
  --ee-forest-10:     rgba(15, 62, 23, .10);

  /* Semantic surfaces. Everything paints through these, so the palette
     variant below only has to redefine this handful. The default panel is
     Mint rather than Keylime — a step darker, which is what the tinted
     blocks wanted all along. */
  --ee-panel-soft:  var(--ee-mint);
  --ee-panel-mid:   var(--ee-sage);
  --ee-panel-cool:  var(--ee-slate);
  --ee-ladder-1:    var(--ee-keylime);
  --ee-ladder-2:    var(--ee-mint);
  --ee-ladder-3:    var(--ee-sage);
  --ee-accent:      var(--ee-forest);   /* rails and marks — decorative */
  --ee-accent-text: var(--ee-forest);   /* the same idea at 10-11px, where
                                           contrast actually has to hold up */
  --ee-badge-bg:    var(--ee-slate);    /* eyebrow pill on the cream canvas */
  --ee-fade-to:     var(--ee-sage);     /* what a fading section lands on */

  /* Three tokens that let a colourway go dark without rewriting components.
     --ee-raise is the fill of anything that floats ON a tinted panel: cards,
     pills, chips. On a light theme that is the paper itself; on a dark one it
     has to be a step UP, not the ground. */
  --ee-raise:  var(--ee-cream);
  --ee-btn-bg: var(--ee-forest);
  --ee-btn-fg: var(--ee-cream);
  --ee-btn-bg-hover: var(--ee-forest-deep);
  --ee-nav-veil: rgba(255, 254, 252, .86);

  /* Type families */
  --ee-serif: 'Ease Display', 'Cormorant Garamond', Cormorant, Georgia, 'Times New Roman', serif;
  --ee-sans:  'Ease Sans', Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ee-mono:  ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale — fluid, landing exactly on the reference sizes at desktop */
  --ee-t-display:  clamp(2.857rem, 3.4vw + 1.6rem,  5.28rem);   /* 40 → 74px */
  --ee-t-h-lg:     clamp(2.28rem,  2.6vw + 1.35rem, 4rem);      /* 32 → 56px */
  --ee-t-h:        clamp(1.93rem,  1.5vw + 1.35rem, 2.857rem);  /* 27 → 40px */
  --ee-t-h-sm:     clamp(1.43rem,  .5vw + 1.28rem,  1.64rem);   /* 20 → 23px */
  --ee-t-sub:      clamp(1.14rem,  .35vw + 1.05rem, 1.286rem);  /* 16 → 18px */
  --ee-t-lead:     1.143rem;                                    /* 16px */
  --ee-t-body:     1rem;                                        /* 14px */
  --ee-t-caption:  .786rem;                                     /* 11px */
  --ee-t-micro:    .714rem;                                     /* 10px */

  /* Spacing — the reference site's ladder, in rem */
  --ee-s-xxs: .5rem;  --ee-s-xs: 1rem;  --ee-s-sm: 1.5rem;  --ee-s-md: 2rem;
  --ee-s-lg: 3rem;    --ee-s-xl: 4rem;  --ee-s-xxl: 5rem;
  --ee-s-huge: 6rem;  --ee-s-xhuge: 7rem; --ee-s-xxhuge: 10rem;

  /* Section rhythm */
  --ee-sec-sm: 3.5rem;
  --ee-sec-md: 5rem;
  --ee-sec-lg: 7rem;

  /* Layout */
  --ee-pad-global: 2.5rem;
  --ee-container-lg: 103rem;   /* 1442px */
  --ee-container-md: 74rem;    /* 1036px */
  --ee-container-sm: 48rem;    /*  672px */

  /* Shape — non-negotiable per the system: 14 on everything, 999 on badges */
  --ee-r: 14px;
  --ee-r-sm: 7px;
  --ee-r-pill: 999px;

  /* Panel padding — never below 21px, that is the whole aesthetic */
  --ee-pad-panel: clamp(1.5rem, 2.4vw, 3rem);   /* 21 → 42px */
  --ee-pad-card:  clamp(1.5rem, 1.6vw, 2rem);   /* 21 → 28px */

  /* Motion */
  --ee-ease: cubic-bezier(.16, 1, .3, 1);
  --ee-ease-soft: cubic-bezier(.33, 1, .68, 1);
  --ee-dur: .9s;
}

/* ── 2b  Colourways ──────────────────────────────────────────────────────────
   Six of them, all branching from Botanical. Because every component paints
   through the semantic tokens above, a colourway is one block and nothing
   else in the file has to know it exists. `data-ee-palette` on <html> picks.

     botanical        forest ink, green tints                    (default)
     botanical-gold   the same greens, one antique gold, used tiny
     ember            forest ink on warm oat and sand, burnt amber
     harbour          deep navy ink, slate and mist, brass
     ink              paper, ink and one gold — Websly Gold / Rosita
     nocturne         the whole thing after dark, gold on deep forest
   ──────────────────────────────────────────────────────────────────────── */

/* ---- botanical-gold — greens, with gold doing only the small work ------- */
html[data-ee-palette="botanical-gold"] {
  --ee-accent:      #A8792A;
  --ee-accent-text: #8C621F;   /* 5.37:1 on cream, 4.69:1 on keylime */
  --ee-badge-bg:    #F1E6CD;
  --ee-panel-soft:  #d9ecda;   /* a shade above Mint, see v2 below */
}

/* ---- botanical-gold-v2 — Botanical's own greens, with the gold ---------
   v1 lifted the default panel from Mint #cfe7d3 to #d9ecda. That bought
   the gold 0.17 of contrast, which is not worth losing the colour over, so
   v2 puts the real greens back and darkens the gold instead:
     #8C621F on Mint  = 4.13:1   — fine for the rails, short of small text
     #6B4A17 on Mint  = 6.12:1   — clears AA for 11px labels
     #6B4A17 on Sage  = 5.23:1   — still clears it on the heaviest panel
   Decorative gold and text gold are separate tokens for exactly this. */
html[data-ee-palette="botanical-gold-v2"] {
  --ee-accent:      #8C621F;
  --ee-accent-text: #6B4A17;
  --ee-badge-bg:    #EEE1C4;
}
html[data-ee-palette="botanical-gold-v2"] .ee-mini__dot,
html[data-ee-palette="botanical-gold-v2"] .ee-chip::before { background: #B8862B; }
html[data-ee-palette="botanical-gold"] .ee-mini__dot,
html[data-ee-palette="botanical-gold"] .ee-chip::before { background: #C9A24A; }

/* ---- ember — the same forest ink, but the paper turns to sand ----------- */
html[data-ee-palette="ember"] {
  --ee-accent-text: #94511F;
  --ee-cream:   #FFFCF5;
  --ee-border:  #EDE3D2;
  --ee-keylime: #F7EFE1;
  --ee-mint:    #F0E3CD;
  --ee-sage:    #E4D2B4;
  --ee-slate:   #DFE4DA;

  --ee-panel-soft: #F0E3CD;
  --ee-panel-mid:  #E4D2B4;
  --ee-panel-cool: #DFE4DA;
  --ee-ladder-1:   #F9F2E7;
  --ee-ladder-2:   #F0E3CD;
  --ee-ladder-3:   #E4D2B4;

  --ee-accent:   #B2652A;
  --ee-badge-bg: #F2DFC6;
  --ee-fade-to:  #E4D2B4;
  --ee-nav-veil: rgba(255, 252, 245, .88);
}
html[data-ee-palette="ember"] .ee-eyebrow,
html[data-ee-palette="ember"] .ee-mini__head,
html[data-ee-palette="ember"] .ee-shot__cap { color: #94511F; }
html[data-ee-palette="ember"] .ee-mini__dot,
html[data-ee-palette="ember"] .ee-chip::before,
html[data-ee-palette="ember"] .ee-bars i:last-child { background: #B2652A; }

/* ---- harbour — navy ink, the cool panel promoted to the whole page ------ */
html[data-ee-palette="harbour"] {
  --ee-accent-text: #8C6522;
  --ee-forest:      #123543;
  --ee-forest-deep: #0C242E;
  --ee-forest-20:   rgba(18, 53, 67, .20);
  --ee-forest-10:   rgba(18, 53, 67, .09);
  --ee-charcoal:    #2A3C43;
  --ee-charcoal-70: rgba(42, 60, 67, .78);
  --ee-charcoal-55: rgba(42, 60, 67, .58);
  --ee-cream:       #FCFDFD;
  --ee-border:      #E4EAEC;

  --ee-keylime: #E9F1F3;
  --ee-mint:    #D6E5EA;
  --ee-sage:    #B6CED5;
  --ee-slate:   #DBE7DC;

  --ee-panel-soft: #D6E5EA;
  --ee-panel-mid:  #B6CED5;
  --ee-panel-cool: #DBE7DC;
  --ee-ladder-1:   #ECF3F5;
  --ee-ladder-2:   #D9E7EB;
  --ee-ladder-3:   #BFD5DB;

  --ee-accent:   #A97C33;
  --ee-badge-bg: #DDE9CF;
  --ee-fade-to:  #B6CED5;
  --ee-nav-veil: rgba(252, 253, 253, .88);
}
html[data-ee-palette="harbour"] .ee-eyebrow,
html[data-ee-palette="harbour"] .ee-mini__head,
html[data-ee-palette="harbour"] .ee-shot__cap { color: #8C6522; }
html[data-ee-palette="harbour"] .ee-mini__dot,
html[data-ee-palette="harbour"] .ee-chip::before { background: #A97C33; }

/* ---- ink — Websly Gold / Rosita London: paper, ink, one gold ------------ */
html[data-ee-palette="ink"] {
  --ee-accent-text: #8E661C;
  --ee-forest:      #101010;
  --ee-forest-deep: #2A2A2A;
  --ee-cream:       #FFFFFF;
  --ee-charcoal:    #4A4A4A;
  --ee-border:      #E2DED7;

  --ee-charcoal-70: rgba(74, 74, 74, .82);
  --ee-charcoal-55: rgba(74, 74, 74, .62);
  --ee-forest-20:   rgba(16, 16, 16, .20);
  --ee-forest-10:   rgba(16, 16, 16, .09);

  --ee-keylime: #F6F4F0;
  --ee-mint:    #F0EBE1;
  --ee-sage:    #E7DFCE;
  --ee-slate:   #EDEAE4;

  --ee-panel-soft: #F6F4F0;
  --ee-panel-mid:  #EFE9DD;
  --ee-panel-cool: #EDEAE4;
  --ee-ladder-1:   #F8F6F2;
  --ee-ladder-2:   #F1ECE3;
  --ee-ladder-3:   #E9E2D5;

  --ee-accent:   #B8862B;
  --ee-badge-bg: #F1E7D3;
  --ee-fade-to:  #F1EBE0;
  --ee-nav-veil: rgba(255, 255, 255, .9);
}
html[data-ee-palette="ink"] .ee-eyebrow,
html[data-ee-palette="ink"] .ee-mini__head,
html[data-ee-palette="ink"] .ee-shot__cap { color: #8E661C; }
html[data-ee-palette="ink"] .ee-mini__dot,
html[data-ee-palette="ink"] .ee-chip::before { background: #D9AE5E; }
html[data-ee-palette="ink"] ::selection { background: #F1E7D3; color: #101010; }
/* Paper on paper needs a hairline to read as a panel — that is how Gold and
   Rosita separate their surfaces, with a stroke rather than a fill. */
html[data-ee-palette="ink"] .ee-panel,
html[data-ee-palette="ink"] .ee-tile,
html[data-ee-palette="ink"] .ee-statcard,
html[data-ee-palette="ink"] .ee-card,
html[data-ee-palette="ink"] .ee-chip,
html[data-ee-palette="ink"] .ee-dev {
  outline: 1px solid var(--ee-border);
  outline-offset: -1px;
}

/* ---- nocturne — the same system after dark ------------------------------ */
html[data-ee-palette="nocturne"] {
  --ee-accent-text: #D9BE7E;
  --ee-cream:       #0E1A12;   /* the ground */
  --ee-raise:       #1B2C20;   /* what floats on a panel */
  --ee-forest:      #EAF2E6;   /* "ink" is now the light */
  --ee-forest-deep: #FFFFFF;
  --ee-charcoal:    #BFCFC0;
  --ee-charcoal-70: rgba(191, 207, 192, .80);
  --ee-charcoal-55: rgba(191, 207, 192, .60);
  --ee-forest-20:   rgba(234, 242, 230, .22);
  --ee-forest-10:   rgba(234, 242, 230, .10);
  --ee-border:      #24382A;

  --ee-keylime: #16241A;
  --ee-mint:    #1B2C20;
  --ee-sage:    #24382A;
  --ee-slate:   #1B2A31;

  --ee-panel-soft: #17271B;
  --ee-panel-mid:  #213326;
  --ee-panel-cool: #1B2A31;
  --ee-ladder-1:   #16241A;
  --ee-ladder-2:   #1C2E21;
  --ee-ladder-3:   #243828;

  --ee-accent:      #C9A961;
  --ee-badge-bg:    #24382A;
  --ee-fade-to:     #16241A;
  --ee-btn-bg:      #C9A961;
  --ee-btn-fg:      #0E1A12;
  --ee-btn-bg-hover:#DCC07E;
  --ee-nav-veil:    rgba(14, 26, 18, .86);
}
html[data-ee-palette="nocturne"] .ee-mini__dot,
html[data-ee-palette="nocturne"] .ee-chip::before,
html[data-ee-palette="nocturne"] .ee-bars i:last-child { background: #C9A961; }
html[data-ee-palette="nocturne"] .ee-bars i { background: #2C4433; }
html[data-ee-palette="nocturne"] .ee-slot--on { background: #C9A961; border-color: #C9A961; color: #0E1A12; }
html[data-ee-palette="nocturne"] .ee-slot--on .ee-slot__t { color: #0E1A12; }
html[data-ee-palette="nocturne"] .ee-mini__av,
html[data-ee-palette="nocturne"] .ee-mini__tag { background: #24382A; color: #D9BE7E; }
html[data-ee-palette="nocturne"] ::selection { background: #C9A961; color: #0E1A12; }
html[data-ee-palette="nocturne"] .ee-shot__desk img,
html[data-ee-palette="nocturne"] .ee-dev img { filter: brightness(.92); }

@media (max-width: 991px) {
  :root {
    --ee-pad-global: 1.5rem;
    --ee-s-lg: 2.5rem; --ee-s-xl: 3.5rem; --ee-s-xxl: 4.5rem;
    --ee-s-huge: 5rem; --ee-s-xhuge: 6rem; --ee-s-xxhuge: 7.5rem;
    --ee-sec-sm: 3rem; --ee-sec-md: 4rem; --ee-sec-lg: 6rem;
  }
}
@media (max-width: 767px) {
  :root {
    --ee-s-lg: 2rem; --ee-s-xl: 2.5rem; --ee-s-xxl: 3rem;
    --ee-s-huge: 3.5rem; --ee-s-xhuge: 4rem; --ee-s-xxhuge: 4.5rem;
    --ee-sec-sm: 2.5rem; --ee-sec-md: 3rem; --ee-sec-lg: 4rem;
  }
}
@media (max-width: 479px) {
  :root { --ee-pad-global: 1rem; }
}

/* ── 3  Reset + base ─────────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--ee-cream);
  color: var(--ee-charcoal);
  font-family: var(--ee-sans);
  font-size: var(--ee-t-body);
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* The page must never scroll sideways at any width. `clip` rather than
     `hidden` — hidden would turn <body> into a scroll container and break
     the sticky header. */
  overflow-x: clip;
}

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

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 300; }

:focus-visible {
  outline: 2px solid var(--ee-forest);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection { background: var(--ee-sage); color: var(--ee-forest); }

.ee-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.ee-skip {
  position: absolute; left: 50%; top: -4rem; transform: translateX(-50%);
  z-index: 200; background: var(--ee-forest); color: var(--ee-cream);
  padding: .75rem 1.25rem; border-radius: 0 0 var(--ee-r) var(--ee-r);
  transition: top .2s var(--ee-ease);
}
.ee-skip:focus { top: 0; }

/* ── 4  Layout primitives ────────────────────────────────────────────────── */

.ee-pad { padding-left: var(--ee-pad-global); padding-right: var(--ee-pad-global); }

.ee-container    { width: 100%; max-width: var(--ee-container-lg); margin-inline: auto; }
.ee-container-md { width: 100%; max-width: var(--ee-container-md); margin-inline: auto; }
.ee-container-sm { width: 100%; max-width: var(--ee-container-sm); margin-inline: auto; }

.ee-section    { padding-block: var(--ee-sec-md); }
.ee-section-lg { padding-block: var(--ee-sec-lg); }
.ee-section-sm { padding-block: var(--ee-sec-sm); }

.ee-stack    { display: grid; gap: .45rem; }
.ee-stack-lg { display: grid; gap: var(--ee-s-xl); }

/* ── 5  Type ─────────────────────────────────────────────────────────────── */

.ee-display, .ee-h1 {
  font-family: var(--ee-serif);
  font-weight: 300;
  font-size: var(--ee-t-display);
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--ee-forest);
}

.ee-h2 {
  font-family: var(--ee-serif);
  font-weight: 300;
  font-size: var(--ee-t-h-lg);
  line-height: 1.14;
  letter-spacing: -.03em;
  color: var(--ee-forest);
}

.ee-h3 {
  font-family: var(--ee-serif);
  font-weight: 300;
  font-size: var(--ee-t-h);
  line-height: 1.22;
  letter-spacing: -.01em;
  color: var(--ee-forest);
}

.ee-h4 {
  font-family: var(--ee-serif);
  font-weight: 300;
  font-size: var(--ee-t-h-sm);
  line-height: 1.3;
  color: var(--ee-forest);
}

/* The reference splits its headings by job: the serif carries the arguments
   (hero, the problem, the solution, questions), the sans carries the
   product — tiles, feature blocks, anything sitting next to a UI. At tile
   size the serif's 300 weight is too thin to hold a line anyway. */
.ee-h-sans {
  font-family: var(--ee-sans);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.1vw + 1.2rem, 1.93rem);   /* 21 → 27px */
  line-height: 1.24;
  letter-spacing: -.02em;
  color: var(--ee-forest);
}

/* The one uppercase treatment in the system, and only here. */
.ee-eyebrow {
  font-family: var(--ee-sans);
  font-size: var(--ee-t-caption);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ee-accent-text);
}

.ee-lead {
  font-size: var(--ee-t-lead);
  line-height: 1.55;
  color: var(--ee-charcoal);
}

.ee-body   { font-size: var(--ee-t-body); line-height: 1.55; color: var(--ee-charcoal); }
.ee-muted  { color: var(--ee-charcoal-70); }
.ee-sub    { font-size: var(--ee-t-sub); line-height: 1.3; font-weight: 600; color: var(--ee-forest); }
.ee-caption{ font-size: var(--ee-t-caption); line-height: 1.55; color: var(--ee-charcoal-70); }

/* Digits inside serif display text — Cormorant's figures are old-style and
   very light, so numbers borrow the sans and go tabular. */
.ee-num {
  font-family: var(--ee-sans);
  font-weight: 300;
  font-feature-settings: 'tnum' 1;
  letter-spacing: -.03em;
}

/* ── 6  Components ───────────────────────────────────────────────────────── */

/* Filled forest button — the only CTA treatment in the system */
.ee-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background: var(--ee-btn-bg);
  color: var(--ee-btn-fg);
  font-size: var(--ee-t-body);
  font-weight: 400;
  padding: 1rem 1.5rem;
  border-radius: var(--ee-r);
  transition: background .3s var(--ee-ease-soft);
}
.ee-btn .ee-btn__arrow { transition: transform .35s var(--ee-ease); flex: none; }
.ee-btn:hover  { background: var(--ee-btn-bg-hover); }
.ee-btn:hover .ee-btn__arrow { transform: translateX(5px); }
.ee-btn:active { transform: translateY(1px); }

.ee-btn--sm { padding: .65rem 1.15rem; gap: .9rem; border-radius: var(--ee-r-sm); }

/* Hero-scale button: the reference system pads this one to 42px all round */
.ee-btn--hero {
  width: 100%;
  padding: clamp(1.5rem, 2.4vw, 3rem);
  font-size: var(--ee-t-sub);
}

/* Ghost button — cream fill, forest ink. Used against tinted panels. */
.ee-btn--ghost {
  background: var(--ee-raise);
  color: var(--ee-forest);
}
.ee-btn--ghost:hover { background: var(--ee-keylime); }

/* Text link with a rule that draws in on hover */
.ee-link {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--ee-forest);
  font-weight: 500;
  position: relative;
  padding-bottom: 2px;
}
.ee-link::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ee-ease);
}
.ee-link:hover::after { transform: scaleX(1); }
.ee-link svg { transition: transform .35s var(--ee-ease); }
.ee-link:hover svg { transform: translateX(4px); }

/* Pill badge — cream on tint, the inverted paper-label relationship */
.ee-pill {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: var(--ee-raise);
  color: var(--ee-forest);
  font-size: var(--ee-t-body);
  line-height: 1;
  padding: .64rem 1rem;
  border-radius: var(--ee-r-pill);
  white-space: nowrap;
}
.ee-pill--quiet { background: transparent; box-shadow: inset 0 0 0 1px var(--ee-forest-20); }

/* Flat tinted panels — depth comes from fill, never from elevation */
.ee-panel {
  border-radius: var(--ee-r);
  padding: var(--ee-pad-panel);
}
.ee-panel--soft  { background: var(--ee-panel-soft); }
.ee-panel--mid   { background: var(--ee-panel-mid); }
.ee-panel--cool  { background: var(--ee-panel-cool); }
.ee-panel--cream { background: var(--ee-raise); }

/* White card that floats on a tinted panel — a printed screenshot */
.ee-card {
  background: var(--ee-raise);
  border-radius: var(--ee-r);
  padding: var(--ee-pad-card);
}

.ee-rule { height: 1px; background: var(--ee-border); border: 0; margin: 0; }

/* Eyebrow as a filled badge — the reference sets its section labels this way:
   a small slate tile on the cream canvas, a cream tile on a tinted one. */
.ee-badge {
  display: inline-block;
  background: var(--ee-badge-bg);
  color: var(--ee-accent-text);
  font-size: var(--ee-t-body);
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  padding: .64rem 1rem;
  border-radius: var(--ee-r-sm);
}
.ee-badge--cream { background: var(--ee-raise); }

/* Feature tile — stroke icon, heading, body, on a tinted fill. Three of them
   in a darkening ladder is the reference's own three-up. */
.ee-tile {
  display: grid;
  gap: 1.25rem;
  align-content: start;
  padding: var(--ee-pad-panel);
  border-radius: var(--ee-r);
  background: var(--ee-ladder-1);
}
.ee-tile > svg { color: var(--ee-forest); margin-bottom: .5rem; }
.ee-tile > svg [data-fill] { fill: currentColor; stroke: none; }
.ee-tile p  { color: var(--ee-charcoal); max-width: 42ch; }
@media (min-width: 768px) { .ee-tile h3 { max-width: 17ch; } }
.ee-tile--1 { background: var(--ee-ladder-1); }
.ee-tile--2 { background: var(--ee-ladder-2); }
.ee-tile--3 { background: var(--ee-ladder-3); }

/* Chip — a pill with a dot, used to list what a feature gives you */
.ee-chip {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: var(--ee-raise);
  color: var(--ee-forest);
  font-size: var(--ee-t-body);
  line-height: 1;
  padding: .7rem 1.05rem;
  border-radius: var(--ee-r-pill);
  white-space: nowrap;
}
.ee-chip::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ee-panel-cool);
  flex: none;
}

/* Stat in its own card, the way the reference shows case-study numbers */
.ee-statcard {
  display: grid;
  gap: .5rem;
  align-content: start;
  padding: var(--ee-pad-card);
  border-radius: var(--ee-r);
  background: var(--ee-ladder-1);
}

/* ---- Rails — the house line motif -------------------------------------- */
/* Parallel lines that turn only at right angles (softened by a 8–12px
   radius), never merge, and always end up the same distance apart as they
   started. Three states: frayed (nothing lines up), weave (they cross each
   other and land in register), shift (the whole bundle steps one slot).
   Drawn by scroll position, so the section paints itself as you arrive. */

/* The rails stretch to the width of their block. Height is clamped rather
   than tied to the aspect ratio so the drawing never squashes more than
   about half again in either direction — the right angles stay right. */
.ee-rails { width: 100%; display: block; height: clamp(150px, 26vw, 230px); }
.ee-hero__rails { height: clamp(112px, 15vw, 150px); }
.ee-rails path {
  fill: none;
  stroke: var(--ee-accent);
  stroke-width: var(--ee-rail-w, 1.25);
  stroke-linecap: butt;
  vector-effect: non-scaling-stroke;
}

/* One scroll value, --ee-draw (0→1), split into phases. The band lays
   itself down over the first stretch and then TRAVELS for the rest, so the
   crossings sail through the frame instead of just appearing there. The
   paths run far past the viewBox on both sides; the svg clips them. */
.ee-rails {
  --ee-rev: clamp(0, calc(var(--ee-draw, 0) / .42), 1);
}
/* pathLength="1" on every path, so all of them draw at the same rate no
   matter how much longer one route is than another. */
.ee-armed .ee-rails path {
  stroke-dasharray: 1 1;
  stroke-dashoffset: calc(1 - var(--ee-rev));
}
.ee-rails > g {
  transform: translateX(calc((.5 - var(--ee-draw, .5)) * var(--ee-travel, 0px)));
}
.ee-rails--thin { --ee-rail-w: 1.1; }
.ee-rails--soft path { opacity: .75; }

/* A section whose ground fades from paper to a tint as it scrolls in. The
   tint is the real background and a paper-coloured veil lifts off it, so
   with no JS the veil is simply never there and the section is fully
   tinted — which is the state everything on it is coloured for. */
.ee-fadebg { position: relative; background: var(--ee-fade-to); isolation: isolate; }
.ee-fadebg::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--ee-raise);
  opacity: var(--ee-veil, 0);
  pointer-events: none;
  z-index: -1;
}

/* ── 7  Motion ───────────────────────────────────────────────────────────── */

/* Rule: the visible state is the CSS default. Nothing may be hidden unless
   ease.js has added .ee-armed to <html>. A blocked script costs motion,
   never content. */

.ee-armed .ee-rise {
  opacity: 0;
  transform: translateY(1.5rem);
}
.ee-armed .ee-rise.ee-in {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--ee-dur) var(--ee-ease) var(--ee-d, 0s),
    transform var(--ee-dur) var(--ee-ease) var(--ee-d, 0s);
}

/* Panels scale up very slightly as they land — the reference site's
   .reveal-wrap move. */
.ee-armed .ee-pop {
  opacity: 0;
  transform: scale(.965);
}
.ee-armed .ee-pop.ee-in {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--ee-dur) var(--ee-ease) var(--ee-d, 0s),
    transform var(--ee-dur) var(--ee-ease) var(--ee-d, 0s);
}

/* Headline lines rise out of their own clipping mask */
.ee-lines { display: block; }
.ee-line  { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.ee-line > span { display: block; }
.ee-armed .ee-line > span { transform: translateY(105%); }
.ee-armed .ee-in .ee-line > span,
.ee-armed .ee-lines.ee-in .ee-line > span {
  transform: none;
  transition: transform 1.05s var(--ee-ease) var(--ee-ld, 0s);
}

/* Word-by-word ink-up, driven by scroll position. <b> marks the words that
   stay lit — it carries no weight of its own, only a marker. */
.ee-statement b { font-weight: inherit; font-style: inherit; }
.ee-statement w {
  display: inline;
  color: var(--ee-forest-20);
  transition: color .5s var(--ee-ease-soft);
}
.ee-statement w.ee-lit { color: var(--ee-forest); }
.ee-statement w.ee-key.ee-lit { color: var(--ee-forest); }

/* Marquee */
.ee-marquee {
  --ee-mq-dur: 60s;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6rem, #000 calc(100% - 6rem), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6rem, #000 calc(100% - 6rem), transparent);
}
@media (max-width: 767px) {
  .ee-marquee {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 2rem, #000 calc(100% - 2rem), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 2rem, #000 calc(100% - 2rem), transparent);
  }
}
.ee-marquee__track {
  display: flex;
  width: max-content;
}
/* Only a track ease.js has cloned into an even number of copies may move —
   animating a single copy would slide it off and leave a gap. */
.ee-armed .ee-marquee__track[data-ee-looped] {
  animation: ee-marquee var(--ee-mq-dur) linear infinite;
  will-change: transform;
}
.ee-marquee--rev .ee-marquee__track { animation-direction: reverse; }
.ee-marquee:hover .ee-marquee__track { animation-play-state: paused; }
.ee-marquee__set { display: flex; align-items: center; flex: none; }

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

/* ── 8  Blocks ───────────────────────────────────────────────────────────── */

/* ---- 8.1 Nav ------------------------------------------------------------ */

.ee-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  transition: background .4s var(--ee-ease-soft), box-shadow .4s var(--ee-ease-soft);
}
.ee-nav.ee-nav--stuck {
  background: var(--ee-nav-veil);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
          backdrop-filter: saturate(180%) blur(14px);
  box-shadow: inset 0 -1px 0 var(--ee-border);
}

.ee-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  max-width: var(--ee-container-lg);
  margin-inline: auto;
  height: 4.75rem;
}

.ee-brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--ee-forest); }
.ee-brand svg { flex: none; }

/* Four candidate marks ship at once; `data-ee-logo` on <html> shows one.
   Delete the other three from the header and the footer once one is picked. */
.ee-brand__mark { display: inline-flex; }
.ee-mark { display: none; }
html[data-ee-logo="a"] .ee-mark[data-v="a"],
html[data-ee-logo="b"] .ee-mark[data-v="b"],
html[data-ee-logo="c"] .ee-mark[data-v="c"] { display: block; }
html[data-ee-logo="d"] .ee-brand__mark { display: none; }
.ee-brand__dot {
  display: none;
  width: .2em; height: .2em; border-radius: 50%;
  background: var(--ee-accent);
  margin-left: .08em;
}
html[data-ee-logo="d"] .ee-brand__dot { display: inline-block; }
html[data-ee-logo="d"] .ee-brand__word { display: inline-flex; align-items: baseline; }
.ee-brand__word {
  font-family: var(--ee-serif);
  font-weight: 300;
  font-size: 1.72rem;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ee-forest);
}

.ee-nav__links { display: flex; align-items: center; gap: .25rem; }
.ee-nav__links a {
  color: var(--ee-charcoal);
  padding: .5rem .8rem;
  border-radius: var(--ee-r-sm);
  transition: background .25s var(--ee-ease-soft), color .25s var(--ee-ease-soft);
}
.ee-nav__links a:hover { background: var(--ee-keylime); color: var(--ee-forest); }

.ee-nav__right { display: flex; align-items: center; gap: .75rem; }

/* Hamburger — two rules that cross into an X */
.ee-burger {
  display: none;
  width: 2.75rem; height: 2.75rem;
  align-items: center; justify-content: center;
  border-radius: var(--ee-r-sm);
  color: var(--ee-forest);
}
.ee-burger span {
  display: block; position: relative;
  width: 20px; height: 1.5px; background: currentColor;
  transition: transform .4s var(--ee-ease), background .2s linear;
}
.ee-burger span::before,
.ee-burger span::after {
  content: ''; position: absolute; left: 0;
  width: 20px; height: 1.5px; background: currentColor;
  transition: transform .4s var(--ee-ease);
}
.ee-burger span::before { top: -6px; }
.ee-burger span::after  { top:  6px; }
.ee-nav--open .ee-burger span { background: transparent; }
.ee-nav--open .ee-burger span::before { transform: translateY(6px) rotate(45deg); }
.ee-nav--open .ee-burger span::after  { transform: translateY(-6px) rotate(-45deg); }

/* Mobile sheet */
.ee-sheet {
  position: fixed;
  inset: 4.75rem 0 0;
  z-index: 99;
  background: var(--ee-cream);
  padding: var(--ee-pad-global);
  padding-top: 1.5rem;
  padding-bottom: max(2rem, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-.75rem);
  transition: opacity .4s var(--ee-ease), transform .4s var(--ee-ease), visibility 0s linear .4s;
}
.ee-nav--open .ee-sheet {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity .4s var(--ee-ease), transform .55s var(--ee-ease), visibility 0s;
}

.ee-sheet__links { display: flex; flex-direction: column; }
.ee-sheet__links a {
  font-family: var(--ee-serif);
  font-weight: 300;
  font-size: clamp(1.9rem, 8vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--ee-forest);
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--ee-border);
  display: flex; align-items: baseline; justify-content: space-between;
  opacity: 0;
  transform: translateY(.85rem);
}
.ee-sheet__links a .ee-sheet__i {
  font-family: var(--ee-sans);
  font-size: var(--ee-t-micro);
  letter-spacing: .08em;
  color: var(--ee-charcoal-55);
}
.ee-nav--open .ee-sheet__links a {
  opacity: 1; transform: none;
  transition: opacity .5s var(--ee-ease) var(--ee-d), transform .6s var(--ee-ease) var(--ee-d);
}
.ee-sheet__foot { margin-top: auto; padding-top: 2rem; display: grid; gap: 1rem; }
.ee-sheet__mail { color: var(--ee-forest); }

@media (max-width: 991px) {
  .ee-nav__links { display: none; }
  .ee-nav__right .ee-btn { display: none; }
  .ee-burger { display: inline-flex; }
  .ee-nav--open { background: var(--ee-cream); box-shadow: inset 0 -1px 0 var(--ee-border); }
}
@media (min-width: 992px) {
  .ee-sheet { display: none; }
}

/* ---- 8.2 Hero ----------------------------------------------------------- */

.ee-hero { padding-top: 1rem; padding-bottom: var(--ee-s-md); }

.ee-hero__grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 992px) {
  .ee-hero__grid { grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); }
}

.ee-hero__left { display: grid; gap: 1rem; align-content: start; }

.ee-hero__copy { display: grid; gap: 1.5rem; align-content: space-between; min-height: 0; }
@media (min-width: 992px) {
  .ee-hero__copy { min-height: 20rem; }
}
.ee-hero__copy p { max-width: 34ch; }

/* The cards stretch to the panel so they read as screens, not as floating
   widgets marooned in the middle of it. */
.ee-hero__demo {
  display: flex;
  align-items: stretch;
  overflow: hidden;
}

/* The product shelf: three cream cards on the slate panel. */
.ee-shelf {
  display: grid;
  gap: .75rem;
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 767px) {
  /* On a phone the three cards become a snap rail so the hero stays short
     and every card stays legible instead of shrinking to a smear. */
  .ee-hero__demo { padding-right: 0; }
  .ee-shelf {
    display: flex;
    gap: .75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-right: var(--ee-pad-panel);
    scroll-padding-left: 0;
  }
  .ee-shelf::-webkit-scrollbar { display: none; }
  .ee-shelf > * { flex: 0 0 76%; scroll-snap-align: start; }
}

.ee-mini { display: grid; gap: .75rem; align-content: start; }
.ee-mini__head {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  font-size: var(--ee-t-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ee-accent-text);
}
.ee-mini__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ee-sage); flex: none; }

.ee-mini__row {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem 0;
  border-top: 1px solid var(--ee-border);
}
.ee-mini__row:first-of-type { border-top: 0; padding-top: 0; }
.ee-mini__av {
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--ee-keylime); color: var(--ee-forest);
  display: grid; place-items: center;
  font-size: var(--ee-t-micro); font-weight: 600; flex: none;
}
.ee-mini__name { font-size: var(--ee-t-caption); color: var(--ee-charcoal); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ee-mini__tag {
  font-size: var(--ee-t-micro); color: var(--ee-forest);
  background: var(--ee-keylime); border-radius: var(--ee-r-pill);
  padding: .2rem .5rem; flex: none;
}

/* the little bar chart */
.ee-bars { display: flex; align-items: flex-end; gap: .35rem; height: 6.5rem; }
.ee-bars i {
  flex: 1; display: block; background: var(--ee-mint); border-radius: 3px 3px 0 0;
  height: var(--h);
  transform-origin: bottom;
}
.ee-bars i:last-child { background: var(--ee-forest); }
.ee-armed .ee-bars i { transform: scaleY(0); }
.ee-armed .ee-in .ee-bars i {
  transform: none;
  transition: transform .8s var(--ee-ease) var(--ee-bd, 0s);
}
.ee-bars-x { display: flex; gap: .35rem; margin-top: .4rem; }
.ee-bars-x span { flex: 1; text-align: center; font-size: var(--ee-t-micro); color: var(--ee-charcoal-55); }

.ee-mini__big {
  font-family: var(--ee-sans);
  font-weight: 300;
  font-size: 1.72rem;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ee-forest);
  font-feature-settings: 'tnum' 1;
}

.ee-slot {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  border: 1px solid var(--ee-border);
  border-radius: var(--ee-r-sm);
  padding: .45rem .6rem;
  font-size: var(--ee-t-caption);
}
.ee-slot--on { background: var(--ee-forest); border-color: var(--ee-forest); color: var(--ee-raise); }
.ee-slot--on .ee-slot__t { color: var(--ee-raise); }
.ee-slot__t { color: var(--ee-charcoal-70); }

/* ---- 8.2b Hero layouts — A Panel · B Slab · C Open --------------------- */
/* One piece of markup, three shapes. `data-ee-hero` on <html> picks. */

.ee-hero__head { display: grid; gap: 1.25rem; justify-items: start; }
.ee-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .85rem 1.25rem; }
.ee-hero__rails { margin-top: 1.25rem; }

/* A — Panel. The reference's own split: tinted copy panel and a filled CTA
   block in the left column, the cool product panel on the right. */
html[data-ee-hero="a"] .ee-hero__cta-wide { display: none; }
html[data-ee-hero="a"] .ee-hero__rails    { display: none; }

/* B — Slab. Everything inside one tinted panel: the headline runs bigger,
   the cards sit on the tint as a shelf across the bottom. */
html[data-ee-hero="b"] .ee-hero__grid {
  grid-template-columns: 1fr;
  background: var(--ee-panel-soft);
  border-radius: var(--ee-r);
  padding: var(--ee-pad-panel);
  gap: var(--ee-s-md);
}
html[data-ee-hero="b"] .ee-hero__copy {
  background: none;
  padding: 0;
  min-height: 0;
}
html[data-ee-hero="b"] .ee-hero__copy .ee-h1 { font-size: clamp(2.6rem, 4.6vw + 1.2rem, 6.4rem); }
/* On a wide screen the slab splits inside itself: headline on the left,
   the sentence and the buttons sitting on its baseline to the right. */
@media (min-width: 992px) {
  html[data-ee-hero="b"] .ee-hero__head {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    column-gap: var(--ee-s-lg);
    align-items: end;
  }
  html[data-ee-hero="b"] .ee-hero__head > .ee-h1 { grid-column: 1; grid-row: 1 / span 2; }
  html[data-ee-hero="b"] .ee-hero__head > p { grid-column: 2; grid-row: 1; align-self: end; }
  html[data-ee-hero="b"] .ee-hero__head > .ee-hero__actions { grid-column: 2; grid-row: 2; }
}
@media (min-width: 768px) and (max-width: 991px) {
  html[data-ee-hero="b"] .ee-hero__copy { max-width: 26ch; }
}
html[data-ee-hero="b"] .ee-hero__demo { background: none; padding: 0; }
html[data-ee-hero="b"] .ee-hero__cta  { display: none; }
html[data-ee-hero="b"] .ee-hero__rails { display: none; }
@media (min-width: 992px) {
  html[data-ee-hero="b"] .ee-hero__left { gap: var(--ee-s-sm); }
}

/* C — Open. No panel behind the words at all: the headline sits on paper at
   full display size with the rails drawing under it, and the product panel
   runs the full width below. */
html[data-ee-hero="c"] .ee-hero__grid { grid-template-columns: 1fr; gap: var(--ee-s-md); }
html[data-ee-hero="c"] .ee-hero__copy {
  background: none;
  padding: 0;
  min-height: 0;
  gap: 1.5rem;
}
html[data-ee-hero="c"] .ee-hero__copy .ee-h1 { font-size: clamp(3.1rem, 6vw + 1rem, 7.2rem); max-width: 15ch; }
html[data-ee-hero="c"] .ee-hero__copy p { max-width: 44ch; font-size: var(--ee-t-sub); }
html[data-ee-hero="c"] .ee-hero__cta   { display: none; }
html[data-ee-hero="c"] .ee-hero__demo  { min-height: 0; }

/* The wide CTA row belongs to B and C */
html[data-ee-hero="a"] .ee-hero__head .ee-hero__actions { display: none; }
.ee-hero__cta-wide { display: inline-flex; }

/* ---- 8.3 Trust strip ---------------------------------------------------- */

.ee-trust { padding-block: var(--ee-sec-sm); }
.ee-trust__label { text-align: center; color: var(--ee-charcoal-70); margin-bottom: 1.5rem; }
.ee-trust .ee-marquee { --ee-mq-dur: 46s; }
.ee-trust__item {
  display: flex; align-items: center; gap: .7rem;
  padding-inline: clamp(1.25rem, 3vw, 2.75rem);
  color: var(--ee-charcoal);
  white-space: nowrap;
}
.ee-trust__item svg { color: var(--ee-forest); opacity: .55; flex: none; }
.ee-trust__name {
  font-family: var(--ee-serif);
  font-weight: 300;
  font-size: clamp(1.28rem, 2.4vw, 1.72rem);
  letter-spacing: -.01em;
  line-height: 1.1;
}
.ee-trust__where { font-size: var(--ee-t-micro); color: var(--ee-charcoal-55); letter-spacing: .06em; text-transform: uppercase; }

/* ---- 8.4 Trades band ---------------------------------------------------- */

.ee-trades {
  background: var(--ee-mint);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  display: grid;
  gap: .6rem;
}
.ee-trades .ee-marquee { --ee-mq-dur: 74s; }
.ee-trades .ee-marquee:nth-child(2) { --ee-mq-dur: 88s; }
.ee-trades__set > * { margin-right: .6rem; }

/* ---- 8.5 Support statement + stats -------------------------------------- */

.ee-support__head { display: grid; gap: 1.5rem; }
.ee-statement {
  font-family: var(--ee-serif);
  font-weight: 300;
  font-size: var(--ee-t-h-lg);
  line-height: 1.18;
  letter-spacing: -.03em;
  color: var(--ee-forest);
  max-width: 22ch;
}

.ee-stats {
  display: grid;
  gap: var(--ee-s-md);
  grid-template-columns: 1fr;
  margin-top: var(--ee-s-xl);
}
@media (min-width: 600px) { .ee-stats { grid-template-columns: repeat(2, 1fr); gap: var(--ee-s-md) 1.5rem; } }
@media (min-width: 992px) { .ee-stats { grid-template-columns: repeat(3, 1fr); } }

.ee-stat { display: grid; gap: .55rem; align-content: start; }
/* Numbers stay in the sans: Cormorant's figures are old-style and would put
   the pound sign and the digits on different baselines. */
.ee-stat__n {
  font-family: var(--ee-sans);
  font-weight: 300;
  font-size: clamp(3rem, 5.5vw, 4.6rem);
  line-height: 1;
  letter-spacing: -.045em;
  color: var(--ee-forest);
  font-feature-settings: 'tnum' 1;
}
.ee-stat__l { color: var(--ee-charcoal-70); max-width: 26ch; }

/* ---- 8.6 Callouts ------------------------------------------------------- */

.ee-callout { display: grid; gap: 1.25rem; justify-items: start; }
.ee-callout__h {
  font-family: var(--ee-serif);
  font-weight: 300;
  font-size: var(--ee-t-h);
  line-height: 1.26;
  letter-spacing: -.02em;
  color: var(--ee-forest);
}
.ee-callout--panel { padding: var(--ee-pad-panel); border-radius: var(--ee-r); background: var(--ee-sage); }

/* ---- 8.7 Why (3-up) ----------------------------------------------------- */

.ee-why__grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: var(--ee-s-xl);
}
@media (min-width: 768px) { .ee-why__grid { grid-template-columns: repeat(3, 1fr); } }

/* ---- 8.8 Feature block — copy, chips and a filled CTA on a tinted panel,
         with the product shot printed on the same panel ------------------- */

.ee-feature__grid { display: grid; gap: var(--ee-s-md); align-items: center; }
@media (min-width: 992px) {
  .ee-feature__grid { grid-template-columns: minmax(0, 41fr) minmax(0, 59fr); gap: var(--ee-s-lg); }
}
.ee-feature__copy { display: grid; gap: 1.5rem; justify-items: start; align-content: start; }
.ee-feature__copy p { max-width: 40ch; }
.ee-feature__chips { display: flex; flex-wrap: wrap; gap: .5rem; }

/* The rails sit under the callout they belong to and run past the gutter to
   the screen edge — they are a horizon, not a picture in a frame. */
.ee-callout__rails {
  margin-top: var(--ee-s-lg);
  margin-inline: calc(var(--ee-pad-global) * -1);
  width: calc(100% + (var(--ee-pad-global) * 2));
  max-width: none;   /* the global svg reset would cap this back to 100% */
}

.ee-shot { display: grid; }
.ee-shot__frame { position: relative; padding-bottom: 1.75rem; }
.ee-shot__desk { border-radius: var(--ee-r-sm); overflow: hidden; background: var(--ee-raise); }
.ee-shot__desk img { width: 100%; }
.ee-shot__phone {
  position: absolute;
  right: -.5rem;
  bottom: 0;
  width: 20%;
  min-width: 76px;
  border-radius: 10px;
  background: var(--ee-raise);
  padding: 5px;
}
.ee-shot__phone img { width: 100%; border-radius: 6px; }
.ee-shot__cap {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  margin-top: .9rem;
  font-size: var(--ee-t-micro);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ee-accent-text);
}
.ee-shot__cap span { color: rgba(15, 62, 23, .6); }

/* ---- 8.9 Questions — the system's FAQ row: serif question, sans answer -- */

.ee-faq { margin-top: var(--ee-s-xl); }
.ee-faq__row {
  display: grid;
  gap: .85rem;
  padding-block: clamp(1.5rem, 2.6vw, 2.5rem);
  border-top: 1px solid var(--ee-border);
}
.ee-faq__row:last-child { border-bottom: 1px solid var(--ee-border); }
@media (min-width: 768px) {
  .ee-faq__row { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); gap: 2rem; }
}
.ee-faq__q {
  font-family: var(--ee-serif);
  font-weight: 300;
  font-size: var(--ee-t-h);
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--ee-forest);
}
@media (min-width: 768px) { .ee-faq__q { max-width: 18ch; } }
.ee-faq__a { color: var(--ee-charcoal); max-width: 56ch; }
.ee-faq__a strong { font-weight: 600; color: var(--ee-forest); }

/* ---- 8.10 Final CTA ----------------------------------------------------- */

.ee-cta__panel {
  display: grid;
  gap: 1.75rem;
  justify-items: center;
  text-align: center;
  padding: clamp(2.25rem, 6vw, 5rem) var(--ee-pad-panel);
}
.ee-cta__panel .ee-h2 { max-width: 18ch; }
.ee-cta__panel p { max-width: 44ch; color: var(--ee-charcoal-70); }

/* ---- 8.10 Footer -------------------------------------------------------- */

.ee-footer { padding-block: var(--ee-sec-md) var(--ee-s-md); }
.ee-footer__grid {
  display: grid;
  gap: var(--ee-s-md) 1.5rem;
  grid-template-columns: repeat(2, 1fr);
  padding-top: var(--ee-s-md);
  border-top: 1px solid var(--ee-border);
}
@media (min-width: 768px) { .ee-footer__grid { grid-template-columns: 1.6fr repeat(3, 1fr); } }

.ee-footer__col { display: grid; gap: .6rem; align-content: start; }
.ee-footer__col h3 {
  font-family: var(--ee-sans);
  font-size: var(--ee-t-micro);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ee-charcoal-55);
  margin-bottom: .25rem;
}
.ee-footer__col a { color: var(--ee-charcoal); width: fit-content; }
.ee-footer__col a:hover { color: var(--ee-forest); }
.ee-footer__brand { grid-column: 1 / -1; }
@media (min-width: 768px) { .ee-footer__brand { grid-column: auto; } }
.ee-footer__brand p { color: var(--ee-charcoal-70); max-width: 30ch; margin-top: .85rem; }

.ee-footer__bottom {
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem;
  align-items: center; justify-content: space-between;
  margin-top: var(--ee-s-md);
  padding-top: 1.25rem;
  border-top: 1px solid var(--ee-border);
  color: var(--ee-charcoal-55);
  font-size: var(--ee-t-caption);
}
.ee-footer__bottom a:hover { color: var(--ee-forest); }

/* Sticky mobile action bar — one thumb-reachable call to action */
.ee-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  padding: .6rem var(--ee-pad-global);
  padding-bottom: calc(.6rem + env(safe-area-inset-bottom));
  background: var(--ee-nav-veil);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
          backdrop-filter: saturate(180%) blur(14px);
  box-shadow: inset 0 1px 0 var(--ee-border);
  transform: translateY(110%);
  transition: transform .45s var(--ee-ease);
}
.ee-bar.ee-bar--on { transform: none; }
.ee-bar .ee-btn { width: 100%; }
@media (min-width: 768px) { .ee-bar { display: none; } }
@media (max-width: 767px) { body { padding-bottom: 4.5rem; } }

/* ---- 8.7b The mark scene ------------------------------------------------ */
/* The lines come down out of the top right, cross each other at right
   angles, and while they are still travelling the W draws itself in the
   middle and then thickens into the mark. Three overlapping phases off one
   scroll value — nothing here is a separate trigger. */

.ee-mark-scene {
  width: 100%;
  /* Capped, not auto: at 1036px the viewBox ratio alone would make this
     600px tall. preserveAspectRatio="meet" keeps the W in proportion and
     lets the rails run out past both edges. */
  height: clamp(210px, 30vw, 360px);
  display: block;
  margin-top: var(--ee-s-lg);
  --pa: clamp(0, calc(var(--ee-draw, 0) / .40), 1);          /* rails lay down */
  --pb: clamp(0, calc((var(--ee-draw, 0) - .28) / .40), 1);  /* W draws        */
  --pc: clamp(0, calc((var(--ee-draw, 0) - .70) / .30), 1);  /* W fills        */
}
.ee-mark-scene path { fill: none; stroke: var(--ee-accent); }

/* Unarmed — no JS, or reduced motion — is the FINISHED state: rails quiet,
   outline gone, mark solid. Nothing is ever hidden waiting for a scroll. */
.ee-mark-scene .ee-mark__rails { stroke-width: 1.6; opacity: .28; }
.ee-mark-scene .ee-mark__line  { stroke-width: 8;  opacity: 0; stroke-linejoin: round; stroke-linecap: round; }
.ee-mark-scene .ee-mark__fill  { stroke-width: 30; opacity: 1; stroke-linejoin: round; stroke-linecap: round; }

/* Travel is deliberately short here: the staircase has to stay clear of the
   W's right arm at every point in the run, not just at rest. */
.ee-armed .ee-mark-scene .ee-mark__rails {
  opacity: calc(.6 - var(--pc) * .32);
  transform: translateX(calc((.5 - var(--ee-draw, .5)) * 110px));
}
.ee-armed .ee-mark-scene .ee-mark__rails path {
  stroke-dasharray: 1 1;
  stroke-dashoffset: calc(1 - var(--pa));
}
.ee-armed .ee-mark-scene .ee-mark__line {
  opacity: calc(1 - var(--pc));
  stroke-dasharray: 1 1;
  stroke-dashoffset: calc(1 - var(--pb));
}
.ee-armed .ee-mark-scene .ee-mark__fill { opacity: var(--pc); }

/* ---- 8.8b Device frames ------------------------------------------------- */
/* A screenshot on its own never reads as "a website on a computer". These
   two frames do the reading for it: a browser window with a URL in it, and
   a phone with a speaker pill. Both are drawn, so they cost nothing and
   recolour with the palette. */

.ee-dev { background: var(--ee-raise); border-radius: 10px; overflow: hidden; }

.ee-dev--desk .ee-dev__bar {
  display: flex; align-items: center; gap: .6rem;
  padding: .45rem .6rem;
  border-bottom: 1px solid var(--ee-border);
}
.ee-dev__dots { display: flex; gap: 4px; flex: none; }
.ee-dev__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--ee-forest-20); }
.ee-dev__url {
  flex: 1; min-width: 0;
  height: 1.15rem;
  border-radius: var(--ee-r-pill);
  background: var(--ee-forest-10);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--ee-t-micro);
  letter-spacing: .02em;
  color: var(--ee-charcoal-70);
  padding: 0 .5rem;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.ee-dev--desk img { width: 100%; display: block; }

.ee-dev--phone {
  border-radius: 20px;
  padding: 5px;
  outline: 1px solid var(--ee-forest-20);
  outline-offset: -1px;
}
.ee-dev__screen { position: relative; border-radius: 15px; overflow: hidden; }
.ee-dev__screen img { width: 100%; display: block; }
.ee-dev__pill {
  position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
  width: 30%; height: 4px; border-radius: var(--ee-r-pill);
  background: rgba(16, 24, 16, .35);
}

/* The stage: a browser window with a phone leaning on it. Which corner the
   phone sits in alternates, and a project with no phone simply gets a wider
   window — so no two slides look the same. */
.ee-stage { position: relative; }
.ee-stage__desk { width: 100%; }
.ee-stage__phone {
  position: absolute;
  bottom: -1.25rem;
  right: -.75rem;
  width: 21%;
  min-width: 82px;
  max-width: 150px;
}
.ee-stage--left .ee-stage__phone { right: auto; left: -.75rem; }
.ee-stage--phoneless .ee-stage__desk { width: 100%; }
.ee-stage:not(.ee-stage--phoneless) { padding-bottom: 1.5rem; }

/* ---- 8.8c Project carousel ---------------------------------------------- */

.ee-carousel__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: var(--ee-s-md);
}
.ee-carousel__count {
  font-size: var(--ee-t-caption);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ee-charcoal-55);
  font-feature-settings: 'tnum' 1;
}
.ee-carousel__count b { color: var(--ee-forest); font-weight: 600; }
.ee-carousel__nav { display: flex; gap: .5rem; }
.ee-carousel__nav button {
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border-radius: var(--ee-r-pill);
  color: var(--ee-forest);
  outline: 1px solid var(--ee-forest-20);
  outline-offset: -1px;
  transition: background .25s var(--ee-ease-soft), opacity .25s var(--ee-ease-soft);
}
.ee-carousel__nav button:hover { background: var(--ee-panel-soft); }
.ee-carousel__nav button[disabled] { opacity: .3; cursor: default; background: none; }

/* Full-bleed rail so the neighbouring slides show through the fade */
.ee-carousel__rail {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  width: calc(100% + (var(--ee-pad-global) * 2));
  margin-inline: calc(var(--ee-pad-global) * -1);
  padding-inline: var(--ee-pad-global);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--ee-pad-global), #000 calc(100% - var(--ee-pad-global)), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 var(--ee-pad-global), #000 calc(100% - var(--ee-pad-global)), transparent);
}
.ee-carousel__rail::-webkit-scrollbar { display: none; }
.ee-carousel__rail > * {
  flex: 0 0 min(100%, 62rem);
  scroll-snap-align: center;
}
@media (min-width: 1200px) {
  .ee-carousel__rail {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5rem, #000 calc(100% - 5rem), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 5rem, #000 calc(100% - 5rem), transparent);
  }
}
@media (prefers-reduced-motion: reduce) { .ee-carousel__rail { scroll-behavior: auto; } }

.ee-proj {
  display: grid;
  gap: var(--ee-s-md);
  align-content: start;
  padding: var(--ee-pad-panel);
  border-radius: var(--ee-r);
  background: var(--ee-panel-mid);
}
@media (min-width: 900px) {
  .ee-proj { grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); align-items: center; gap: var(--ee-s-lg); }
}
.ee-proj__copy { display: grid; gap: 1.25rem; justify-items: start; align-content: start; }
.ee-proj__copy p { max-width: 40ch; }
.ee-proj__meta {
  display: flex; flex-wrap: wrap; gap: .35rem 1rem;
  font-size: var(--ee-t-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ee-charcoal-55);
}
.ee-proj__chips { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---- 8.8d Mission band -------------------------------------------------- */

.ee-mission { display: grid; gap: 1.5rem; justify-items: start; }
.ee-mission p { max-width: 46ch; }
.ee-plate {
  margin-top: var(--ee-s-lg);
  border-radius: var(--ee-r);
  background: var(--ee-panel-mid);
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: clamp(260px, 32vw, 440px);
  padding-top: var(--ee-pad-panel);
}
.ee-plate .ee-rails { height: 100%; align-self: center; }
.ee-plate__cap {
  padding: var(--ee-pad-panel);
  padding-top: 0;
  font-size: var(--ee-t-caption);
  color: var(--ee-forest);
}
.ee-plate--photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---- 8.10b Footer socials ----------------------------------------------- */

.ee-social { display: flex; gap: .5rem; margin-top: .35rem; }
.ee-social span, .ee-social a {
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  border-radius: var(--ee-r-pill);
  color: var(--ee-forest);
  outline: 1px solid var(--ee-forest-20);
  outline-offset: -1px;
  transition: background .25s var(--ee-ease-soft), color .25s var(--ee-ease-soft);
}
.ee-social a:hover { background: var(--ee-forest); color: var(--ee-btn-fg); }

/* ---- 8.12 Subpage furniture --------------------------------------------- */

/* Page header — the shape every page below the homepage opens with */
.ee-phead { display: grid; gap: 1.5rem; justify-items: start; padding-top: var(--ee-s-md); }
.ee-phead .ee-h1 { max-width: 17ch; }
.ee-phead p { max-width: 48ch; font-size: var(--ee-t-sub); }

/* A checked list — the one place a tick is allowed */
.ee-list { display: grid; gap: .85rem; }
.ee-list li { display: grid; grid-template-columns: 1.1rem 1fr; gap: .7rem; align-items: start; }
.ee-list svg { color: var(--ee-accent); margin-top: .28em; }
.ee-list span { color: var(--ee-charcoal); }

/* Pricing plan */
.ee-plans { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: var(--ee-s-xl); }
@media (min-width: 900px) { .ee-plans { grid-template-columns: repeat(3, 1fr); } }
.ee-plan {
  display: grid;
  gap: 1.25rem;
  align-content: start;
  padding: var(--ee-pad-panel);
  border-radius: var(--ee-r);
  background: var(--ee-ladder-1);
}
.ee-plan--mid { background: var(--ee-ladder-2); }
.ee-plan--top { background: var(--ee-ladder-3); }
.ee-plan__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ee-plan__tag {
  font-size: var(--ee-t-micro); letter-spacing: .08em; text-transform: uppercase;
  background: var(--ee-raise); color: var(--ee-forest);
  border-radius: var(--ee-r-pill); padding: .3rem .6rem;
}
.ee-plan__price {
  font-family: var(--ee-sans); font-weight: 300;
  font-size: clamp(2.6rem, 3.4vw, 3.6rem); line-height: 1;
  letter-spacing: -.04em; color: var(--ee-forest);
  font-feature-settings: 'tnum' 1;
  display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap;
}
.ee-plan__was {
  font-size: var(--ee-t-sub); color: var(--ee-charcoal-55);
  text-decoration: line-through; font-weight: 400; letter-spacing: 0;
}
.ee-plan__per { font-size: var(--ee-t-body); color: var(--ee-charcoal-70); letter-spacing: 0; }
.ee-plan__setup { font-size: var(--ee-t-caption); color: var(--ee-charcoal-70); }
.ee-plan .ee-btn { width: 100%; justify-content: space-between; }

/* Careers role row */
.ee-role {
  display: grid; gap: .5rem;
  padding-block: clamp(1.25rem, 2.2vw, 2rem);
  border-top: 1px solid var(--ee-border);
}
.ee-role:last-of-type { border-bottom: 1px solid var(--ee-border); }
@media (min-width: 768px) {
  .ee-role { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2rem; }
}
.ee-role__meta { display: flex; flex-wrap: wrap; gap: .35rem 1rem; font-size: var(--ee-t-caption);
  letter-spacing: .06em; text-transform: uppercase; color: var(--ee-charcoal-55); }

/* Contact rows */
.ee-clist { display: grid; }
.ee-clist > * {
  display: grid; gap: .25rem;
  padding-block: 1.25rem;
  border-top: 1px solid var(--ee-border);
}
.ee-clist > *:last-child { border-bottom: 1px solid var(--ee-border); }
@media (min-width: 640px) {
  .ee-clist > * { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: 1.5rem; align-items: baseline; }
}
.ee-clist dt, .ee-clist .ee-clist__k {
  font-size: var(--ee-t-micro); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ee-charcoal-55);
}

/* Enquiry form */
.ee-form { display: grid; gap: 1rem; }
.ee-field { display: grid; gap: .4rem; }
.ee-field label { font-size: var(--ee-t-caption); letter-spacing: .06em; text-transform: uppercase; color: var(--ee-charcoal-70); }
.ee-field input, .ee-field textarea {
  font: inherit; color: var(--ee-forest);
  background: var(--ee-raise);
  border: 1px solid var(--ee-border);
  border-radius: var(--ee-r-sm);
  padding: .8rem .9rem;
  width: 100%;
}
.ee-field textarea { min-height: 8rem; resize: vertical; }
.ee-field input::placeholder, .ee-field textarea::placeholder { color: var(--ee-charcoal-55); }
@media (min-width: 640px) { .ee-form__two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } }

/* Two-column prose split used on About */
.ee-split { display: grid; gap: var(--ee-s-md); }
@media (min-width: 900px) {
  .ee-split { grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); gap: var(--ee-s-lg); align-items: start; }
}

/* ---- 8.11 Dev picker — delete once a direction is chosen ---------------- */

.ee-pick {
  position: fixed;
  left: 1rem; bottom: 1rem;
  z-index: 120;
  background: var(--ee-raise);
  border: 1px solid var(--ee-border);
  border-radius: var(--ee-r);
  padding: .75rem .85rem;
  display: grid;
  gap: .6rem;
  font-size: var(--ee-t-caption);
  max-width: 15rem;
  box-shadow: 0 8px 30px rgba(15, 62, 23, .12);
}
.ee-pick[hidden] { display: none; }
.ee-pick__head {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  color: var(--ee-charcoal-55);
  text-transform: uppercase; letter-spacing: .08em; font-size: var(--ee-t-micro);
}
.ee-pick__head button { color: var(--ee-charcoal-55); font-size: 1rem; line-height: 1; padding: 0 .15rem; }
.ee-pick__row { display: grid; gap: .3rem; }
.ee-pick__lab { color: var(--ee-charcoal-70); }
.ee-pick__set { display: flex; gap: .25rem; }
.ee-pick__set--wrap { flex-wrap: wrap; }
.ee-pick__set--wrap button { flex: 1 1 4.4rem; }
.ee-pick__note { font-size: var(--ee-t-micro); color: var(--ee-charcoal-55); }
.ee-pick__set button {
  flex: 1;
  border: 1px solid var(--ee-border);
  border-radius: var(--ee-r-sm);
  padding: .35rem .4rem;
  color: var(--ee-charcoal);
  background: var(--ee-raise);
  transition: background .2s var(--ee-ease-soft), color .2s var(--ee-ease-soft), border-color .2s var(--ee-ease-soft);
}
.ee-pick__set button[aria-pressed="true"] {
  background: var(--ee-forest);
  border-color: var(--ee-forest);
  color: var(--ee-cream);
}
.ee-pick__tab {
  position: fixed; left: 1rem; bottom: 1rem; z-index: 120;
  background: var(--ee-forest); color: var(--ee-cream);
  border-radius: var(--ee-r-pill);
  padding: .5rem .9rem;
  font-size: var(--ee-t-micro); letter-spacing: .08em; text-transform: uppercase;
}
.ee-pick__tab[hidden] { display: none; }
@media (max-width: 767px) {
  .ee-pick, .ee-pick__tab { bottom: 4.75rem; }
}

/* ── 9  Reduced motion ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .ee-marquee__track { animation: none; transform: none; }
  .ee-marquee {
    overflow-x: auto;
    -webkit-mask-image: none; mask-image: none;
  }
  .ee-statement w { color: var(--ee-forest); }
  /* rails drawn in full, band parked centre, ground already on its tint,
     and the mark already solid */
  .ee-rails path { stroke-dasharray: none; stroke-dashoffset: 0; }
  .ee-rails > g, .ee-mark-scene .ee-mark__rails { transform: none; }
  .ee-fadebg::before { opacity: 0; }
  .ee-mark-scene .ee-mark__line { opacity: 0; }
  .ee-mark-scene .ee-mark__fill { opacity: 1; }
  .ee-mark-scene .ee-mark__rails { opacity: .28; }
}


/* ===========================================================================
   16. Legal page — terms & privacy
   ---------------------------------------------------------------------------
   A long read, so the job is legibility, not decoration: one 66-character
   measure, generous leading, and numbered sub-clauses that stay attached to
   the clause they belong to. It borrows the panel and card fills already in
   the system rather than inventing surfaces, so it recolours with every
   colourway including Nocturne, and it holds no shadow, like everything else.
   =========================================================================== */

.ee-legal { max-width: 46rem; }

.ee-legal__summary,
.ee-legal__toc,
.ee-legal__note {
  background: var(--ee-panel-soft);
  border-radius: var(--ee-r);
  padding: var(--ee-pad-panel);
  margin-bottom: var(--ee-s-md);
}

.ee-legal__summary h2 {
  font-family: var(--ee-serif);
  font-weight: 300;
  font-size: var(--ee-t-h-sm);
  line-height: 1.15;
  margin: 0 0 var(--ee-s-xs);
  color: var(--ee-forest);
}

.ee-legal__summary p,
.ee-legal__note p { font-size: var(--ee-t-body); line-height: 1.6; color: var(--ee-charcoal); margin: 0 0 var(--ee-s-xs); }
/* The global reset strips list markers. A legal document needs them back:
   its own clauses cite each other by number ("the notice periods are in
   section 6"), so an unnumbered list is a document that cannot be read. */
.ee-legal__summary ul { margin: 0; padding-left: 1.2em; list-style: disc; }
.ee-legal__summary li { font-size: var(--ee-t-body); line-height: 1.6; color: var(--ee-charcoal); margin-bottom: .6em; }

/* Contents: a plain index, not a nav bar — it is read once and then ignored. */
.ee-legal__toc p {
  font-size: var(--ee-t-caption);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ee-accent-text);
  margin: 0 0 var(--ee-s-xs);
}
.ee-legal__toc ol { margin: 0; padding-left: 1.4em; columns: 2; column-gap: var(--ee-s-md); list-style: decimal; }
.ee-legal__toc li { font-size: var(--ee-t-body); line-height: 1.9; break-inside: avoid; }
.ee-legal__toc a { color: var(--ee-charcoal); text-decoration: none; border-bottom: 1px solid transparent; }
.ee-legal__toc a:hover,
.ee-legal__toc a:focus-visible { color: var(--ee-forest); border-bottom-color: currentColor; }
@media (max-width: 599px) { .ee-legal__toc ol { columns: 1; } }

/* One clause. scroll-margin-top keeps the heading clear of the fixed nav when
   arrived at from the contents list. */
.ee-legal__clause { padding-top: var(--ee-s-md); scroll-margin-top: 5.5rem; }
.ee-legal__clause + .ee-legal__clause { border-top: 1px solid var(--ee-border); }

.ee-legal__clause h3 {
  font-family: var(--ee-serif);
  font-weight: 300;
  font-size: var(--ee-t-h-sm);
  line-height: 1.2;
  margin: 0 0 var(--ee-s-xxs);
  color: var(--ee-forest);
}

/* The one-line summary of the clause, before the clause itself. */
.ee-legal__plain {
  font-size: var(--ee-t-body);
  line-height: 1.55;
  color: var(--ee-accent-text);
  margin: 0 0 var(--ee-s-xs);
}

/* Numbered "6.1, 6.2" style, so a clause can be cited exactly. The counter is
   built from the clause's own index rather than nesting real <ol>s, which the
   source document does not have. */
.ee-legal__sub { margin: 0; padding-left: 1.6em; list-style: decimal; }
.ee-legal__sub::marker, .ee-legal__sub > li::marker { color: var(--ee-charcoal-70); font-size: .9em; }
.ee-legal__sub > li {
  font-size: var(--ee-t-body);
  line-height: 1.75;
  color: var(--ee-charcoal);
  margin-bottom: .7em;
  padding-left: .2em;
}
.ee-legal__sub a { color: var(--ee-forest); }

.ee-legal__body > h2 {
  font-family: var(--ee-serif);
  font-weight: 300;
  font-size: var(--ee-t-h-lg);
  line-height: 1.1;
  margin: var(--ee-s-lg) 0 var(--ee-s-xs);
  color: var(--ee-forest);
}