/* Greenlue webfonts — all four brand families + the iOS app face.
   Loaded from Google Fonts. The @import below pulls Google's own @font-face
   rules (which point at fonts.gstatic.com .woff2 binaries).

   Brand families (Design Language v1.1):
     Lora    — serif, emotional headlines, pull-quotes
     Inter   — UI workhorse: body, labels, buttons, app chrome
     Nunito  — logo wordmark ONLY (900 weight, brand-gradient fill)
     Caveat  — handwritten sticky notes ONLY (>= 1.3rem)
   App face (Greenlue Lite, iOS):
     Plus Jakarta Sans — the entire mobile app UI
*/
/* cyrillic-ext */

/* cyrillic */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* greek-ext */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* greek-ext */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* greek-ext */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* greek-ext */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* greek-ext */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* greek-ext */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* math */

/* symbols */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* math */

/* symbols */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* math */

/* symbols */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* math */

/* symbols */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* math */

/* symbols */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* vietnamese */

/* latin-ext */

/* latin */

/* Greenlue — Color tokens (Design Language v1.1, canonical brand)
   Base values + semantic aliases. Brand surfaces are light & warm-white;
   dark sections are near-black. Three brand hues, each with one job. */
:root {
  /* ─── Core brand hues ─── */
  --green: #1AA34D;   /* primary CTA, "something happened", brand anchor */
  --teal:  #1AAFA0;   /* gradient bridge, secondary accents — never solo primary */
  --blue:  #29ABE2;   /* CTA on gradient bgs, info, secondary interactive */

  --green-deep: #158A40;  /* primary button hover */

  /* ─── Neutrals ─── */
  --dark:      #111111;   /* hero/dark surfaces, headlines on light */
  --mid:       #444444;   /* body text on white */
  --soft:      #888888;   /* labels, captions, metadata */
  --muted:     #BBBBBB;   /* placeholders, disabled, fine print */
  --off-white: #F7F7F5;   /* page background, app sidebar */
  --white:     #FFFFFF;   /* cards, inputs, panels, modals */
  --border:    #E8E8E8;   /* default 1px border / divider */

  /* ─── Gradients — each has exactly one job ─── */
  --bg-grad:    linear-gradient(135deg, #D6EEF8 0%, #D6F0E6 100%); /* @kind color */
  --brand-grad: linear-gradient(90deg, #1AA34D 0%, #1AAFA0 50%, #29ABE2 100%); /* @kind color */
  --cta-grad:   linear-gradient(135deg, #2ECC71 0%, #1AA34D 30%, #1AAFA0 60%, #29ABE2 100%); /* @kind color */

  /* ─── Status / semantic (app surfaces) ─── */
  --success:    #1AA34D;
  --success-bg: rgba(26,163,77,0.12);
  --info:       #29ABE2;
  --info-bg:    rgba(41,171,226,0.12);
  --warning:    #F59E0B;
  --warning-bg: rgba(245,158,11,0.12);
  --alert:      #EF4444;
  --alert-bg:   rgba(239,68,68,0.10);

  /* ─── Tinted brand fills (pills, soft chips, icon wells) ─── */
  --green-soft: rgba(26,163,77,0.10);
  --teal-soft:  rgba(26,175,160,0.10);
  --blue-soft:  rgba(41,171,226,0.12);

  /* ─── Sticky-note palette — whiteboard moment ONLY ─── */
  --sticky-yellow: #FFF59D;
  --sticky-blue:   #B3E5FC;
  --sticky-green:  #C8E6C9;
  --sticky-pink:   #F8BBD9;
  --sticky-paper:  #F0EDE8;  /* warm board bg — never pure white */

  /* ─── Semantic aliases ─── */
  --text-strong:   var(--dark);
  --text-body:     var(--mid);
  --text-subtle:   var(--soft);
  --text-disabled: var(--muted);

  --surface-page:  var(--off-white);
  --surface-card:  var(--white);
  --surface-dark:  #0A0A0A;
  --surface-dark-2:#1C1C1E;

  --accent:        var(--green);
  --accent-hover:  var(--green-deep);
  --on-accent:     #FFFFFF;
  --on-dark:       #FFFFFF;
  --on-dark-muted: #D8D8D8;

  --border-default: var(--border);
  --border-accent:  rgba(26,163,77,0.25);  /* alert cards, active states */
}

/* Greenlue — Typography tokens (Design Language v1.1)
   Four families, each with a strict role. Lora owns emotion; Inter owns
   function; Nunito is the wordmark only; Caveat is sticky-notes only. */
:root {
  /* ─── Families ─── */
  --font-serif:  'Lora', Georgia, 'Times New Roman', serif;          /* emotional headlines, quotes */
  --font-sans:   'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* UI workhorse */
  --font-logo:   'Nunito', system-ui, sans-serif;                    /* wordmark ONLY, 900 */
  --font-hand:   'Caveat', 'Comic Sans MS', cursive;                 /* sticky notes ONLY */
  --font-mono:   'Courier New', 'SF Mono', ui-monospace, monospace;  /* medical values, dosages, HR/BP */
  --font-app:    'Plus Jakarta Sans', system-ui, sans-serif;         /* Greenlue Lite (iOS) app UI */

  /* ─── Role tokens (size · weight · line-height) ─── */
  /* Hero / emotional question — Lora, dark sections */
  --type-hero-font:   var(--font-serif);
  --type-hero-size:   clamp(2.4rem, 5vw, 3.6rem);
  --type-hero-weight: 500;
  --type-hero-lh:     1.08;
  --type-hero-spacing:-0.01em;

  /* H1 / statement — Lora, the "turn" moment */
  --type-h1-font:   var(--font-serif);
  --type-h1-size:   clamp(1.6rem, 3.5vw, 2.2rem);
  --type-h1-weight: 500;
  --type-h1-lh:     1.18;

  /* H2 / subhead — Inter */
  --type-h2-font:   var(--font-sans);
  --type-h2-size:   1.18rem;
  --type-h2-weight: 600;
  --type-h2-spacing:-0.01em;

  /* H3 / component title — Inter */
  --type-h3-font:   var(--font-sans);
  --type-h3-size:   1rem;
  --type-h3-weight: 600;

  /* Body — Inter, max-width ~640px for comfort */
  --type-body-font:   var(--font-sans);
  --type-body-size:   1rem;
  --type-body-weight: 400;
  --type-body-lh:     1.7;

  /* Small / caption */
  --type-small-size:   0.82rem;
  --type-small-weight: 400;
  --type-small-lh:     1.6;

  /* Label / eyebrow — uppercase + tracked */
  --type-label-size:    0.68rem;
  --type-label-weight:  700;
  --type-label-spacing: 0.12em;
  --type-label-transform: uppercase;

  /* Emotional quote — Lora italic */
  --type-quote-font:   var(--font-serif);
  --type-quote-size:   1.2rem;
  --type-quote-style:  italic;
  --type-quote-lh:     1.58;

  /* Handwritten sticky — Caveat, never < 1.3rem */
  --type-hand-font:   var(--font-hand);
  --type-hand-size:   1.45rem;
  --type-hand-weight: 600;

  /* Mono / product values */
  --type-mono-font: var(--font-mono);
  --type-mono-size: 0.9rem;
}

/* Greenlue — Spacing, radius, elevation & motion tokens (Design Language v1.1) */
:root {
  /* ─── Spacing scale — 4px base unit ─── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-30: 120px;

  /* ─── Border radius ─── */
  --radius-sm:  8px;    /* buttons, inputs, tags */
  --radius-md:  14px;   /* cards, digest, alerts */
  --radius-lg:  20px;   /* panels, app content areas */
  --radius-xl:  22px;   /* iMessage UI, modals, overlays */
  --radius-pill: 100px; /* pills, badges, avatars */

  /* ─── Elevation (4 levels) ─── */
  --shadow-flat:  0 1px 2px rgba(0,0,0,0.05);   /* tags, inputs, badges */
  --shadow-sm:    0 1px 4px rgba(0,0,0,0.06);
  --shadow-card:  0 2px 16px rgba(0,0,0,0.07);  /* feature/digest/alert cards */
  --shadow-md:    0 2px 16px rgba(0,0,0,0.08);
  --shadow-panel: 0 4px 28px rgba(0,0,0,0.09);  /* app content, visit cards */
  --shadow-float: 0 8px 44px rgba(0,0,0,0.12);  /* iMessage, modals, overlays */
  --shadow-lg:    0 8px 40px rgba(0,0,0,0.12);

  /* ─── Borders ─── */
  --border-width:        1px;     /* default border */
  --border-width-accent: 1.5px;   /* alert / active state border */
  --border-accent-line:  3px;     /* brand-gradient feature-card top */

  /* ─── Motion ─── */
  --motion-instant:   100ms;  /* @kind other */
  --motion-quick:     250ms;  /* @kind other */
  --motion-deliberate:500ms;  /* @kind other */
  --motion-slow:      1000ms; /* @kind other */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);   /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);  /* @kind other */
  --motion-stagger: 150ms;    /* @kind other */

  /* ─── Layout ─── */
  --content-max:   980px;
  --prose-max:     640px;
}

/* Greenlue — base resets & document defaults.
   Kept minimal: brand pages set their own backgrounds. */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headlines default to tight tracking; emotional roles opt into Lora. */
h1, h2, h3, h4 { color: var(--text-strong); }

a { color: var(--green); text-decoration: none; }

::selection { background: rgba(26,163,77,0.18); }

/* Greenlue Lite — iOS app theme (secondary scope)
   The mobile product runs a warmer, calmer "Granola-style" palette built on a
   SINGLE deep-green accent over warm paper, in Plus Jakarta Sans. Apply by
   placing `class="gl-app"` (light) or `class="gl-app" data-theme="dark"` on a
   container; everything inside reads these tokens. Distinct from the brand
   web palette on purpose — same warmth, denser and quieter for daily use. */
.gl-app {
  --app-font: var(--font-app);
  --app-accent: #0E9D7E;        /* the one app accent — deep teal-green */
  --app-accent-soft: color-mix(in oklab, var(--app-accent) 12%, var(--app-surface));
  --app-accent-deep: color-mix(in oklab, var(--app-accent) 72%, #000);

  --app-radius:    18px;        /* card radius */
  --app-radius-sm: 12px;
  --app-gap:       14px;        /* density gap */
  --app-pad:       18px;        /* horizontal padding */

  /* light palette */
  --app-bg:        #F3F2EC;     /* warm paper */
  --app-surface:   #FFFFFF;
  --app-surface-2: #FAF9F4;
  --app-line:      #EAE7DE;
  --app-text:      #1C1B17;
  --app-text-2:    #6E6A60;
  --app-text-3:    #A29C90;

  /* status */
  --app-alert: #DC5B45;
  --app-warn:  #C98325;
  --app-info:  #3B82C4;
  --app-ok:    #19936C;

  font-family: var(--app-font);
  background: var(--app-bg);
  color: var(--app-text);
  -webkit-font-smoothing: antialiased;
}
.gl-app[data-theme="dark"] {
  --app-bg:        #0E1113;
  --app-surface:   #181C1F;
  --app-surface-2: #14181A;
  --app-line:      #272C30;
  --app-text:      #F1F2F0;
  --app-text-2:    #9AA0A2;
  --app-text-3:    #686E70;
  --app-alert: #F0735C;
  --app-warn:  #E1A14B;
  --app-info:  #5AA0E0;
  --app-ok:    #2FB488;
  --app-accent-soft: color-mix(in oklab, var(--app-accent) 22%, var(--app-surface));
}

/* ════════════════════════════════════════════════════════════
   Greenlue Design System — global stylesheet entry point.
   Consumers link THIS one file. It only 
   no rules live here directly.
   ════════════════════════════════════════════════════════════ */
/* Greenlue webfonts — all four brand families + the iOS app face.
   Loaded from Google Fonts. The 
   dark sections are near-black. Three brand hues, each with one job. */
:root {
  /* ─── Core brand hues ─── */
  --green: #1AA34D;   /* primary CTA, "something happened", brand anchor */
  --teal:  #1AAFA0;   /* gradient bridge, secondary accents — never solo primary */
  --blue:  #29ABE2;   /* CTA on gradient bgs, info, secondary interactive */

  --green-deep: #158A40;  /* primary button hover */

  /* ─── Neutrals ─── */
  --dark:      #111111;   /* hero/dark surfaces, headlines on light */
  --mid:       #444444;   /* body text on white */
  --soft:      #888888;   /* labels, captions, metadata */
  --muted:     #BBBBBB;   /* placeholders, disabled, fine print */
  --off-white: #F7F7F5;   /* page background, app sidebar */
  --white:     #FFFFFF;   /* cards, inputs, panels, modals */
  --border:    #E8E8E8;   /* default 1px border / divider */

  /* ─── Gradients — each has exactly one job ─── */
  --bg-grad:    linear-gradient(135deg, #D6EEF8 0%, #D6F0E6 100%); /* @kind color */
  --brand-grad: linear-gradient(90deg, #1AA34D 0%, #1AAFA0 50%, #29ABE2 100%); /* @kind color */
  --cta-grad:   linear-gradient(135deg, #2ECC71 0%, #1AA34D 30%, #1AAFA0 60%, #29ABE2 100%); /* @kind color */

  /* ─── Status / semantic (app surfaces) ─── */
  --success:    #1AA34D;
  --success-bg: rgba(26,163,77,0.12);
  --info:       #29ABE2;
  --info-bg:    rgba(41,171,226,0.12);
  --warning:    #F59E0B;
  --warning-bg: rgba(245,158,11,0.12);
  --alert:      #EF4444;
  --alert-bg:   rgba(239,68,68,0.10);

  /* ─── Tinted brand fills (pills, soft chips, icon wells) ─── */
  --green-soft: rgba(26,163,77,0.10);
  --teal-soft:  rgba(26,175,160,0.10);
  --blue-soft:  rgba(41,171,226,0.12);

  /* ─── Sticky-note palette — whiteboard moment ONLY ─── */
  --sticky-yellow: #FFF59D;
  --sticky-blue:   #B3E5FC;
  --sticky-green:  #C8E6C9;
  --sticky-pink:   #F8BBD9;
  --sticky-paper:  #F0EDE8;  /* warm board bg — never pure white */

  /* ─── Semantic aliases ─── */
  --text-strong:   var(--dark);
  --text-body:     var(--mid);
  --text-subtle:   var(--soft);
  --text-disabled: var(--muted);

  --surface-page:  var(--off-white);
  --surface-card:  var(--white);
  --surface-dark:  #0A0A0A;
  --surface-dark-2:#1C1C1E;

  --accent:        var(--green);
  --accent-hover:  var(--green-deep);
  --on-accent:     #FFFFFF;
  --on-dark:       #FFFFFF;
  --on-dark-muted: #D8D8D8;

  --border-default: var(--border);
  --border-accent:  rgba(26,163,77,0.25);  /* alert cards, active states */
}

/* Greenlue — Typography tokens (Design Language v1.1)
   Four families, each with a strict role. Lora owns emotion; Inter owns
   function; Nunito is the wordmark only; Caveat is sticky-notes only. */
:root {
  /* ─── Families ─── */
  --font-serif:  'Lora', Georgia, 'Times New Roman', serif;          /* emotional headlines, quotes */
  --font-sans:   'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* UI workhorse */
  --font-logo:   'Nunito', system-ui, sans-serif;                    /* wordmark ONLY, 900 */
  --font-hand:   'Caveat', 'Comic Sans MS', cursive;                 /* sticky notes ONLY */
  --font-mono:   'Courier New', 'SF Mono', ui-monospace, monospace;  /* medical values, dosages, HR/BP */
  --font-app:    'Plus Jakarta Sans', system-ui, sans-serif;         /* Greenlue Lite (iOS) app UI */

  /* ─── Role tokens (size · weight · line-height) ─── */
  /* Hero / emotional question — Lora, dark sections */
  --type-hero-font:   var(--font-serif);
  --type-hero-size:   clamp(2.4rem, 5vw, 3.6rem);
  --type-hero-weight: 500;
  --type-hero-lh:     1.08;
  --type-hero-spacing:-0.01em;

  /* H1 / statement — Lora, the "turn" moment */
  --type-h1-font:   var(--font-serif);
  --type-h1-size:   clamp(1.6rem, 3.5vw, 2.2rem);
  --type-h1-weight: 500;
  --type-h1-lh:     1.18;

  /* H2 / subhead — Inter */
  --type-h2-font:   var(--font-sans);
  --type-h2-size:   1.18rem;
  --type-h2-weight: 600;
  --type-h2-spacing:-0.01em;

  /* H3 / component title — Inter */
  --type-h3-font:   var(--font-sans);
  --type-h3-size:   1rem;
  --type-h3-weight: 600;

  /* Body — Inter, max-width ~640px for comfort */
  --type-body-font:   var(--font-sans);
  --type-body-size:   1rem;
  --type-body-weight: 400;
  --type-body-lh:     1.7;

  /* Small / caption */
  --type-small-size:   0.82rem;
  --type-small-weight: 400;
  --type-small-lh:     1.6;

  /* Label / eyebrow — uppercase + tracked */
  --type-label-size:    0.68rem;
  --type-label-weight:  700;
  --type-label-spacing: 0.12em;
  --type-label-transform: uppercase;

  /* Emotional quote — Lora italic */
  --type-quote-font:   var(--font-serif);
  --type-quote-size:   1.2rem;
  --type-quote-style:  italic;
  --type-quote-lh:     1.58;

  /* Handwritten sticky — Caveat, never < 1.3rem */
  --type-hand-font:   var(--font-hand);
  --type-hand-size:   1.45rem;
  --type-hand-weight: 600;

  /* Mono / product values */
  --type-mono-font: var(--font-mono);
  --type-mono-size: 0.9rem;
}

/* Greenlue — Spacing, radius, elevation & motion tokens (Design Language v1.1) */
:root {
  /* ─── Spacing scale — 4px base unit ─── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-30: 120px;

  /* ─── Border radius ─── */
  --radius-sm:  8px;    /* buttons, inputs, tags */
  --radius-md:  14px;   /* cards, digest, alerts */
  --radius-lg:  20px;   /* panels, app content areas */
  --radius-xl:  22px;   /* iMessage UI, modals, overlays */
  --radius-pill: 100px; /* pills, badges, avatars */

  /* ─── Elevation (4 levels) ─── */
  --shadow-flat:  0 1px 2px rgba(0,0,0,0.05);   /* tags, inputs, badges */
  --shadow-sm:    0 1px 4px rgba(0,0,0,0.06);
  --shadow-card:  0 2px 16px rgba(0,0,0,0.07);  /* feature/digest/alert cards */
  --shadow-md:    0 2px 16px rgba(0,0,0,0.08);
  --shadow-panel: 0 4px 28px rgba(0,0,0,0.09);  /* app content, visit cards */
  --shadow-float: 0 8px 44px rgba(0,0,0,0.12);  /* iMessage, modals, overlays */
  --shadow-lg:    0 8px 40px rgba(0,0,0,0.12);

  /* ─── Borders ─── */
  --border-width:        1px;     /* default border */
  --border-width-accent: 1.5px;   /* alert / active state border */
  --border-accent-line:  3px;     /* brand-gradient feature-card top */

  /* ─── Motion ─── */
  --motion-instant:   100ms;  /* @kind other */
  --motion-quick:     250ms;  /* @kind other */
  --motion-deliberate:500ms;  /* @kind other */
  --motion-slow:      1000ms; /* @kind other */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);   /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);  /* @kind other */
  --motion-stagger: 150ms;    /* @kind other */

  /* ─── Layout ─── */
  --content-max:   980px;
  --prose-max:     640px;
}

/* Greenlue — base resets & document defaults.
   Kept minimal: brand pages set their own backgrounds. */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headlines default to tight tracking; emotional roles opt into Lora. */
h1, h2, h3, h4 { color: var(--text-strong); }

a { color: var(--green); text-decoration: none; }

::selection { background: rgba(26,163,77,0.18); }

/* Greenlue Lite — iOS app theme (secondary scope)
   The mobile product runs a warmer, calmer "Granola-style" palette built on a
   SINGLE deep-green accent over warm paper, in Plus Jakarta Sans. Apply by
   placing `class="gl-app"` (light) or `class="gl-app" data-theme="dark"` on a
   container; everything inside reads these tokens. Distinct from the brand
   web palette on purpose — same warmth, denser and quieter for daily use. */
.gl-app {
  --app-font: var(--font-app);
  --app-accent: #0E9D7E;        /* the one app accent — deep teal-green */
  --app-accent-soft: color-mix(in oklab, var(--app-accent) 12%, var(--app-surface));
  --app-accent-deep: color-mix(in oklab, var(--app-accent) 72%, #000);

  --app-radius:    18px;        /* card radius */
  --app-radius-sm: 12px;
  --app-gap:       14px;        /* density gap */
  --app-pad:       18px;        /* horizontal padding */

  /* light palette */
  --app-bg:        #F3F2EC;     /* warm paper */
  --app-surface:   #FFFFFF;
  --app-surface-2: #FAF9F4;
  --app-line:      #EAE7DE;
  --app-text:      #1C1B17;
  --app-text-2:    #6E6A60;
  --app-text-3:    #A29C90;

  /* status */
  --app-alert: #DC5B45;
  --app-warn:  #C98325;
  --app-info:  #3B82C4;
  --app-ok:    #19936C;

  font-family: var(--app-font);
  background: var(--app-bg);
  color: var(--app-text);
  -webkit-font-smoothing: antialiased;
}
.gl-app[data-theme="dark"] {
  --app-bg:        #0E1113;
  --app-surface:   #181C1F;
  --app-surface-2: #14181A;
  --app-line:      #272C30;
  --app-text:      #F1F2F0;
  --app-text-2:    #9AA0A2;
  --app-text-3:    #686E70;
  --app-alert: #F0735C;
  --app-warn:  #E1A14B;
  --app-info:  #5AA0E0;
  --app-ok:    #2FB488;
  --app-accent-soft: color-mix(in oklab, var(--app-accent) 22%, var(--app-surface));
}

html { scroll-behavior: smooth; }
    body { margin: 0; background: var(--white); -webkit-font-smoothing: antialiased; }
    a { color: var(--green); }
    a:hover { color: var(--green-deep, #157A3B); }
    @keyframes glPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(26,175,160,.5); } 50% { box-shadow: 0 0 0 9px rgba(26,175,160,0); } }
    @keyframes glFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
    @keyframes glRise { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
    .gl-rise { animation: glRise .7s cubic-bezier(.16,1,.3,1) both; }
    @keyframes glRotate {
      0%, 16%   { transform: translateY(0); }
      22%, 38%  { transform: translateY(-1.5em); }
      44%, 60%  { transform: translateY(-3em); }
      66%, 82%  { transform: translateY(-4.5em); }
      88%, 100% { transform: translateY(-6em); }
    }
    @keyframes glDash { to { stroke-dashoffset: -14; } }
    @keyframes glBlink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
    /* Hero rotating-word caret */
    .gl-caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -0.12em; background: var(--teal); border-radius: 1px; animation: glBlink 1s step-end infinite; }
    /* Keep line 1 of the hero on a single line on desktop → two lines total */
    @media (min-width: 900px) { .gl-hero-line1 { white-space: nowrap; } }
    @media (prefers-reduced-motion: reduce) { [style*="glRotate"], [style*="glDash"] { animation: none !important; } .gl-caret { animation: none; } }

/* ── Rebuild helpers (added during static rebuild) ── */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
.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;
}

/* How-it-works walkthrough tabs (was framework state: step1Style/step1NumStyle) */
.gl-step {
  display: flex; align-items: flex-start; gap: 16px; padding: 18px 20px;
  border-radius: 14px; border: 1px solid transparent; background: transparent;
  cursor: pointer; text-align: left; width: 100%;
  transition: all .25s ease; font-family: var(--font-sans);
}
.gl-step.is-active {
  background: var(--white); border: 1px solid var(--border);
  box-shadow: var(--shadow-md), inset 0 3px 0 0 var(--step-accent);
}
.gl-step-num {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-sans); font-weight: 700; font-size: 1.1rem;
  background: var(--off-white); color: var(--soft);
  transition: all .25s ease;
}
.gl-step.is-active .gl-step-num {
  background: var(--step-accent); color: #fff;
  box-shadow: 0 8px 20px -6px var(--step-accent);
}
.gl-panel[hidden] { display: none; }

/* Waitlist form focus (was style-focus on the email input) */
#waitlist-form input[type="email"]:focus { border-color: var(--green); }

/* Guide cover placeholders (were empty image-slot upload widgets) */
.guide-icon {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.guide-icon svg { width: 24px; height: 24px; opacity: .95; }

/* ── Section rhythm — tightened vertical spacing (July 21 edits) ──
   Padding lives here (not inline) so it can respond to viewport.
   Desktop is ~25% tighter than the original 80–88px bands; mobile
   compresses further so sections don't feel stretched on phones. */
.gl-nav { padding: 26px 28px 12px; }
.gl-sec { padding: 60px 28px; }
.gl-sec--hero { padding: 44px 28px 52px; }
.gl-foot { padding: 40px 28px; }

@media (max-width: 860px) {
  .gl-sec { padding: 48px 24px; }
  .gl-sec--hero { padding: 32px 24px 40px; }
  .gl-nav { padding: 22px 24px 10px; }
  .gl-foot { padding: 36px 24px; }
}
@media (max-width: 560px) {
  .gl-sec { padding: 40px 20px; }
  .gl-sec--hero { padding: 24px 20px 32px; }
  .gl-nav { padding: 20px 20px 8px; }
  .gl-foot { padding: 32px 20px; }
}

/* ── Mobile text wrapping — no lone-word lines ──
   Headlines balance their lines (roughly equal length, so the last
   word never strands on its own row); paragraphs avoid short widows.
   The art-directed <br> breaks are dropped below 560px so the browser
   can rewrap freely — a leading space in the markup keeps the words
   separated when the break is removed. */
.gl-hero-h1, .gl-sec h1, .gl-sec h2 { text-wrap: balance; }
.gl-sec p { text-wrap: pretty; }

@media (max-width: 560px) {
  br.gl-br { display: none; }
}