/* ════════════════════════════════════════════════════════════════════
   Everyday Design System
   One stylesheet. Every token is --everyday-*.

   Everyday Korean is the first product on this system; Everyday Japanese and
   any sibling share it. A sibling product overrides the --everyday-theme-*
   block below and inherits everything else — do not fork this file.

   Structure:
     1. Product theme   the seven values that change per product
     2. Foundations     color, spacing, radius, type, shadow, motion
     3. Dark mode       product UI only; marketing surfaces are light-only
     4. Base + product components
     5. Marketing tokens and components
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. Product theme ──────────────────────────────────────────────────
   Everything downstream derives from these. To brand a sibling product,
   redefine this block and nothing else. */
:root {
  --everyday-theme-brand:          #1E40AF;  /* primary action, links */
  --everyday-theme-brand-pressed:  #1E3A8A;
  --everyday-theme-brand-light:    #60A5FA;  /* gradient pair, accents */
  --everyday-theme-accent:         #E63946;  /* scarcity, negative contrast */
  --everyday-theme-highlight:      #FCD34D;  /* warm accent on dark only */
  --everyday-theme-ink-deep:       #0B1A35;  /* deep surface, marketing body */
}

/* ════════════════════════════════════════════════════════════════════
   Everyday Design System
   The one stylesheet. App and website both. Every token is --everyday-*.

     1. Product theme   the only block a sibling product redefines
     2. Foundations     color, spacing, radius, type, shadow, motion
     3. Base + product components
     4. Marketing tokens and components

   Reference: DESIGN.md in the repo · Rendered: /kit/
   ════════════════════════════════════════════════════════════════════ */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

:root {
  /* ============================================================
     COLOR — Semantic tokens
     ============================================================ */

  /* Background layers */
  --everyday-bg-layer-default:        #FFFFFF;
  --everyday-bg-layer-basement:       #F4F4F5;
  --everyday-bg-layer-floor:          #FFFFFF;

  /* Foreground (text) */
  --everyday-fg-neutral:              #212124;
  --everyday-fg-neutral-muted:        #4D4D52;
  --everyday-fg-neutral-subtle:       #74747A;
  --everyday-fg-neutral-subtlest:     #A4A4AB;

  /* Stroke (borders) */
  --everyday-stroke-neutral:          #E2E2E5;
  --everyday-stroke-neutral-muted:    #EFEFF0;

  /* Brand — EK taegeuk blue, taken from the waves in the logo.
     Blue reads as "safe to click" universally; red is reserved as an accent
     for highlights / streaks / hearts (see --everyday-accent-red below). */
  --everyday-bg-brand-solid:          var(--everyday-theme-brand);
  --everyday-bg-brand-solid-pressed:  var(--everyday-theme-brand-pressed);
  --everyday-fg-brand:                var(--everyday-theme-brand);
  /* Foreground on any dark/solid surface.
     brand.css aliases it rather than redefining white a third time. */
  --everyday-fg-neutral-inverted:     #FFFFFF;
  --everyday-fg-brand-contrast:       var(--everyday-fg-neutral-inverted);

  /* EK secondary brand accent — taegeuk red from logo.
     Use sparingly for highlights/streaks/hearts. Do NOT use for primary CTAs. */
  --everyday-accent-red:                var(--everyday-theme-accent);

  /* Status */
  --everyday-fg-critical:             #E5202C;
  --everyday-bg-critical-solid:       #E5202C;
  --everyday-fg-positive:             #008B4D;
  --everyday-bg-positive-solid:       #008B4D;
  --everyday-fg-warning:              #A56700;
  --everyday-bg-warning-solid:        #FFB100;

  /* ============================================================
     SPACING — 4px scale
     ============================================================ */
  --everyday-space-1:  4px;
  --everyday-space-2:  8px;
  --everyday-space-3:  12px;
  --everyday-space-4:  16px;
  --everyday-space-5:  20px;
  --everyday-space-6:  24px;
  --everyday-space-8:  32px;
  --everyday-space-10: 40px;
  --everyday-space-12: 48px;
  --everyday-space-16: 64px;
  --everyday-space-20: 80px;

  /* ============================================================
     RADIUS
     ============================================================ */
  --everyday-radius-1:    2px;
  --everyday-radius-2:    4px;
  --everyday-radius-3:    8px;
  --everyday-radius-4:    12px;
  --everyday-radius-5:    16px;
  --everyday-radius-6:    20px;
  --everyday-radius-full: 9999px;

  /* ============================================================
     TYPOGRAPHY

     Line height follows one rule, by role rather than by size:

         display  1.2    one or two lines, set tight
         title    1.3    headings
         body     1.5    paragraphs — the reading measure
         label    1.4    UI controls, usually a single line
         caption  1.4    helper text

     Role, not size, because 18px means different things as body-l
     (a paragraph, wants air) and as title-4 (a heading, wants none).
     Leading is round(size x ratio). If you add a size, apply the rule
     rather than eyeballing it.

     Sizes are px, so they ignore the OS text-size setting. Fixing that
     means moving the ramp to rem, which means auditing the 428 rem values
     already computed against this file's 18px root — 119 of them in
     class/index.html alone. Separate job.
     ============================================================ */
  --everyday-font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Display (hero) */
  --everyday-display-1-size:     36px;
  --everyday-display-1-leading:  43px;
  --everyday-display-2-size:     32px;
  --everyday-display-2-leading:  38px;

  /* Title (page/section headings) */
  --everyday-title-1-size:       28px;
  --everyday-title-1-leading:    36px;
  --everyday-title-2-size:       22px;
  --everyday-title-2-leading:    29px;
  --everyday-title-3-size:       20px;
  --everyday-title-3-leading:    26px;
  --everyday-title-4-size:       18px;
  --everyday-title-4-leading:    23px;

  /* Body */
  --everyday-body-l-size:        18px;
  --everyday-body-l-leading:     27px;
  --everyday-body-m-size:        16px;
  --everyday-body-m-leading:     24px;
  --everyday-body-s-size:        14px;
  --everyday-body-s-leading:     21px;

  /* Label (UI controls, buttons) */

  /* Caption (helper text, hints) */
  --everyday-caption-size:       12px;
  --everyday-caption-leading:    17px;

  /* ============================================================
     SHADOW
     ============================================================ */
  --everyday-shadow-small:  0 1px 2px rgba(0,0,0,0.05);
  --everyday-shadow-medium: 0 4px 8px rgba(0,0,0,0.08);
  --everyday-shadow-large:  0 8px 24px rgba(0,0,0,0.12);

  /* ============================================================
     MOTION
     ============================================================ */
  --everyday-duration-short: 150ms;
  --everyday-duration-medium: 250ms;
  --everyday-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* ============================================================
     LAYOUT — shell-level dimensions
     ============================================================ */
  --everyday-app-bar-height:     56px;
  --everyday-bottom-cta-height:  88px;   /* button (56) + vertical padding (32) */
}


/* ============================================================
   BASE RESET
   ============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  font-family: var(--everyday-font-sans);
  font-size: var(--everyday-body-l-size);
  line-height: var(--everyday-body-l-leading);
  color: var(--everyday-fg-neutral);
  background: var(--everyday-bg-layer-default);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--everyday-fg-brand); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============================================================
   COMPONENT PRIMITIVES
   ============================================================ */

/* === App shell === */
.app {
  min-height: 100vh;
  display: flex; flex-direction: column;
  max-width: 480px;
  margin: 0 auto;
  background: var(--everyday-bg-layer-default);
}

/* === AppBar === */
.app-bar {
  position: sticky; top: 0; z-index: 10;
  height: var(--everyday-app-bar-height);
  display: flex; align-items: center;
  padding: 0 var(--everyday-space-4);
  background: var(--everyday-bg-layer-default);
}
.app-bar__back {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--everyday-radius-full);
  background: transparent; border: none; cursor: pointer;
  color: var(--everyday-fg-neutral);
  margin-left: -8px;
  transition: background var(--everyday-duration-short) var(--everyday-easing-standard);
}
.app-bar__back:hover { background: var(--everyday-bg-layer-basement); }
.app-bar__back svg { width: 24px; height: 24px; }

/* === Progress bar (top of screen) === */
.progress {
  height: 4px;
  background: var(--everyday-stroke-neutral-muted);
  overflow: hidden;
}
.progress__fill {
  height: 100%;
  background: var(--everyday-fg-neutral);
  transition: width var(--everyday-duration-medium) var(--everyday-easing-standard);
}

/* === Content === */
.content {
  flex: 1;
  padding: var(--everyday-space-8) var(--everyday-space-5)
           calc(var(--everyday-bottom-cta-height) + var(--everyday-space-4));
}

/* === Full-screen state (loading, success, error)
   Centered hero + bottom CTA pattern. Vertically centers within the
   *visible* area by accounting for the fixed BottomCTA. */
.full-state {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: var(--everyday-space-8) var(--everyday-space-5);
  padding-bottom: calc(var(--everyday-space-8) + var(--everyday-bottom-cta-height));
  text-align: center;
}
.full-state h2 {
  font-size: var(--everyday-title-1-size);
  line-height: var(--everyday-title-1-leading);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: var(--everyday-space-4) 0 var(--everyday-space-2);
  color: var(--everyday-fg-neutral);
}
.full-state p {
  font-size: var(--everyday-body-m-size);
  line-height: var(--everyday-body-m-leading);
  color: var(--everyday-fg-neutral-muted);
}

/* === Typography classes === */
.everyday-display-1 { font-size: var(--everyday-display-1-size); line-height: var(--everyday-display-1-leading); font-weight: 700; letter-spacing: -0.02em; }
.everyday-display-2 { font-size: var(--everyday-display-2-size); line-height: var(--everyday-display-2-leading); font-weight: 700; letter-spacing: -0.02em; }
.everyday-title-1   { font-size: var(--everyday-title-1-size);   line-height: var(--everyday-title-1-leading);   font-weight: 700; letter-spacing: -0.02em; }
.everyday-title-2   { font-size: var(--everyday-title-2-size);   line-height: var(--everyday-title-2-leading);   font-weight: 700; letter-spacing: -0.01em; }
.everyday-title-3   { font-size: var(--everyday-title-3-size);   line-height: var(--everyday-title-3-leading);   font-weight: 700; }
.everyday-title-4   { font-size: var(--everyday-title-4-size);   line-height: var(--everyday-title-4-leading);   font-weight: 600; }
.everyday-body-l    { font-size: var(--everyday-body-l-size);    line-height: var(--everyday-body-l-leading);    font-weight: 400; }
.everyday-body-m    { font-size: var(--everyday-body-m-size);    line-height: var(--everyday-body-m-leading);    font-weight: 400; }
.everyday-body-s    { font-size: var(--everyday-body-s-size);    line-height: var(--everyday-body-s-leading);    font-weight: 400; }
/* Labels are bold body — same sizes, weight 600, tighter leading (1.4). They used
   to carry their own 17/15/13px ramp, which interleaved with body's 18/16/14 and
   left seven rungs a single pixel apart between 12 and 18px. */
.everyday-label-l   { font-size: var(--everyday-body-l-size);   line-height: 1.4; font-weight: 600; }
.everyday-label-m   { font-size: var(--everyday-body-m-size);   line-height: 1.4; font-weight: 600; }
.everyday-label-s   { font-size: var(--everyday-body-s-size);   line-height: 1.4; font-weight: 600; }
.everyday-caption   { font-size: var(--everyday-caption-size);   line-height: var(--everyday-caption-leading);   font-weight: 400; }
.fg-muted    { color: var(--everyday-fg-neutral-muted); }
.fg-subtle   { color: var(--everyday-fg-neutral-subtle); }
.fg-subtlest { color: var(--everyday-fg-neutral-subtlest); }

/* === Form controls === */
.everyday-input,
input[type=text].everyday-input,
input[type=email].everyday-input,
input[type=password].everyday-input,
textarea.everyday-input {
  width: 100%;
  font-family: var(--everyday-font-sans);
  font-size: var(--everyday-body-l-size);
  line-height: var(--everyday-body-l-leading);
  color: var(--everyday-fg-neutral);
  background: var(--everyday-bg-layer-default);
  border: 1px solid var(--everyday-stroke-neutral);
  border-radius: var(--everyday-radius-3);
  padding: 14px var(--everyday-space-4);
  outline: none;
  transition: border-color var(--everyday-duration-short) var(--everyday-easing-standard);
}
.everyday-input::placeholder { color: var(--everyday-fg-neutral-subtlest); }
.everyday-input:focus { border-color: var(--everyday-fg-neutral); }
textarea.everyday-input { resize: vertical; min-height: 112px; }

/* === Password input (with show/hide toggle) === */
.password-input {
  position: relative;
}
.password-input .everyday-input {
  padding-right: 48px; /* leave room for the toggle */
}
.password-toggle {
  position: absolute;
  top: 50%; right: 4px;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--everyday-radius-3);
  cursor: pointer;
  color: var(--everyday-fg-neutral-subtle);
  transition: color var(--everyday-duration-short) var(--everyday-easing-standard),
              background var(--everyday-duration-short) var(--everyday-easing-standard);
}
.password-toggle:hover {
  color: var(--everyday-fg-neutral);
  background: var(--everyday-bg-layer-basement);
}
.password-toggle svg { width: 20px; height: 20px; }
/* When visible, show the "eye-off"; when hidden, show the "eye" */
.password-toggle .eye-off { display: none; }
.password-input.is-visible .password-toggle .eye-off { display: block; }
.password-input.is-visible .password-toggle .eye { display: none; }

/* === Buttons === */
.btn-primary, .btn-secondary, .btn-tertiary {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--everyday-space-2);
  height: 56px;
  padding: 0 var(--everyday-space-5);
  font-family: var(--everyday-font-sans);
  font-size: var(--everyday-body-l-size);
  line-height: 1;
  font-weight: 700;
  border-radius: var(--everyday-radius-4);
  border: none;
  cursor: pointer;
  transition: background var(--everyday-duration-short) var(--everyday-easing-standard),
              color var(--everyday-duration-short) var(--everyday-easing-standard);
}
.btn-primary {
  color: var(--everyday-fg-brand-contrast);
  background: var(--everyday-bg-brand-solid);
}
.btn-primary:hover:not(:disabled) { background: var(--everyday-bg-brand-solid-pressed); }
.btn-primary:disabled {
  background: var(--everyday-stroke-neutral);
  color: var(--everyday-fg-neutral-subtle);
  cursor: not-allowed;
}
.btn-secondary {
  color: var(--everyday-fg-neutral-muted);
  background: var(--everyday-bg-layer-basement);
}
.btn-secondary:hover:not(:disabled) { background: var(--everyday-stroke-neutral-muted); }
.btn-tertiary {
  color: var(--everyday-fg-neutral);
  background: transparent;
}
.btn-tertiary:hover:not(:disabled) { background: var(--everyday-bg-layer-basement); }

/* Button size variants */
.btn-size-medium { height: 48px; font-size: var(--everyday-body-m-size); }
.btn-size-small  { height: 40px; font-size: var(--everyday-body-s-size); padding: 0 var(--everyday-space-4); }

/* Full-width helper */
.btn-block { width: 100%; }

/* === BottomCTA === */
.bottom-cta {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  max-width: 480px;
  padding: var(--everyday-space-3) var(--everyday-space-5) calc(var(--everyday-space-5) + env(safe-area-inset-bottom, 0));
  background: var(--everyday-bg-layer-default);
  display: flex; gap: var(--everyday-space-3);
  z-index: 20;
}
.bottom-cta .btn-primary,
.bottom-cta .btn-secondary {
  flex: 1;
}

/* === Spinner === */
.everyday-spinner {
  display: inline-block;
  width: 28px; height: 28px;
  border: 3px solid var(--everyday-stroke-neutral);
  border-top-color: var(--everyday-fg-neutral);
  border-radius: 50%;
  animation: everyday-spin 0.8s linear infinite;
  flex-shrink: 0;
}
.everyday-spinner-small { width: 16px; height: 16px; border-width: 2px; }
@keyframes everyday-spin { to { transform: rotate(360deg); } }

/* When a spinner lives inside any button, inherit the button's text color
   so it adapts to active/disabled/secondary states automatically.
   Ring = 30% mix of currentColor; head = full currentColor. */
.btn-primary .everyday-spinner,
.btn-secondary .everyday-spinner,
.btn-tertiary .everyday-spinner {
  border-color: color-mix(in srgb, currentColor 30%, transparent);
  border-top-color: currentColor;
}

/* ════════════════════════════════════════════════════════════════════
   Marketing tier
   Tokens and components for landing and funnel surfaces. Product UI never
   reaches for these: fluid type, fluid section padding, a 1200px container.
   Nothing here redefines a foundation token, so the two tiers never fight.

   Source: extracted from /start/index.html (the first marketing page).
   Approach: snap nearby values to the nearest token. Outliers stay free.
   Do NOT tokenize every value — only the ones that should stay consistent.
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* ───────────── Color ─────────────
     Use --everyday-primary for CTAs, links, highlights.
     Use --everyday-highlight-warm (yellow) as the warm accent on dark surfaces —
     highlighter strokes, emphasized words, buttons sitting on navy.
     Text on light bg → --everyday-fg-marketing; text on dark bg → #fff. */

  /* Primary brand (taegeuk blue) */
  --everyday-primary-light:  var(--everyday-theme-brand-light);   /* gradient pair, accents */

  /* Surfaces */
  --everyday-bg-dark:   #000000;        /* dramatic dark sections */
  --everyday-bg-deep:   var(--everyday-theme-ink-deep);        /* deep navy (cards on dark) */

  /* Text */
  --everyday-fg-marketing:               var(--everyday-theme-ink-deep); /* primary on light */
  --everyday-fg-marketing-muted:         rgba(11, 26, 53, 0.6);
  --everyday-fg-marketing-subtle:        rgba(11, 26, 53, 0.45);
  --everyday-fg-on-dark-muted: rgba(255, 255, 255, 0.6);

  /* Accents */
  --everyday-highlight-warm:        var(--everyday-theme-highlight);       /* warm accent on navy — never on white */
  --everyday-fg-on-highlight-warm:     #0B1E5C;   /* highlight only, never primary */
  --everyday-trust:      #00B67A;       /* trustpilot / verified green */

  /* ───────────── Spacing ─────────────
     Section block padding (top/bottom). Match top/bottom for balance
     unless the section sits flush against the next one. */
  --everyday-pad-xl: clamp(96px, 10vw, 176px);  /* signature sections */
  --everyday-pad-lg: clamp(72px, 8vw, 128px);   /* default sections */
  --everyday-pad-md: clamp(56px, 7vw, 96px);    /* tighter sections */

  /* Card internal padding — same value on all sides by default. */
  --everyday-pad-card: clamp(24px, 3vw, 40px);

  /* Horizontal section padding — pair with --everyday-space-* for in-page gaps */

  /* ───────────── Typography ─────────────
     Display titles end in -xl/-lg/-md. Use 800 for titles, 900 for wordmarks,
     700 for subheads, 600 for labels. Body sizes for paragraph copy. */
  --everyday-title-hero: clamp(36px, 8vw, 96px);  /* page hero — one per page */
  --everyday-title-xl:   clamp(34px, 4.4vw, 56px); /* impact section title */
  --everyday-title-md:   clamp(28px, 3.6vw, 44px); /* compact title (FAQ, secondary) */
  --everyday-body-md:  clamp(15px, 1.4vw, 18px); /* default paragraph */
  --everyday-body-sm:  clamp(13px, 1.3vw, 15px); /* meta, small caption */

  /* Letter-spacing — most titles use -0.02em, wordmarks -0.04em,
     eyebrows / pill labels +0.14–0.16em (uppercase tracking). */
  --everyday-tracking-title:    -0.02em;
  --everyday-tracking-eyebrow:   0.16em;

  /* ───────────── Radius ───────────── */
  --everyday-radius-section:   32px;   /* rounded floating sections */
  --everyday-radius-card:      24px;   /* cards / charts */

  /* ───────────── Gradients ─────────────
     Only tokenize reused gradient patterns. One-off gradients stay inline. */
  --everyday-grad-title: linear-gradient(180deg, var(--everyday-primary-light) 0%, var(--everyday-bg-brand-solid) 100%);

  /* ───────────── Shadow ───────────── */

  /* ───────────── Marketing layer (folded in from ek-marketing.css) ─────────────
     Carried over verbatim when ek-marketing.css was retired — values are
     unchanged from the originals so the fold was a pure rename.

     Several of these overlap in PURPOSE with the tokens above but not in value
     (--everyday-body-xl vs --everyday-body-lg). That is deliberate and known;
     converging them is a separate, eyes-on pass. */

  /* Fluid display type, utopia.fyi scale (min vw 320 / max vw 1240,
     min body 16 / max body 20, ratio 1.2 → 1.333). Px not rem: this file
     sets html { font-size: 18px }, which would skew rem-based clamps. */
  /* Not a duplicate of --everyday-title-md despite the close caps (47 vs 44).
     The curves differ: at a 1100px viewport this is 44.2px and title-md is 39.6px,
     so folding one into the other shrinks the live-* hero ~10% at every width. */
  --everyday-display-l: clamp(28px, 21.39px + 2.07vw, 47px);  /* section title */
  --everyday-body-xl:   clamp(19px, 16.22px + 0.87vw, 27px);  /* hero sub-copy */

  /* Centered marketing band width. */
  --everyday-container: 1200px;

  /* The one marketing elevation. Soft slate, two layers — it reads as depth
     rather than a hard drop, and it is the only shadow a marketing surface gets.
     Consolidated from four (card / cta / lift / cta-soft) that had split by which
     stylesheet a page happened to come from, not by role. */
  --everyday-shadow-raised: 0 4px 12px -2px rgba(15, 23, 42, 0.08), 0 20px 40px -16px rgba(15, 23, 42, 0.18);

  /* Premixed alphas of the brand color — for tinted bands and chips. */
  --everyday-tint-soft:   color-mix(in srgb, var(--everyday-bg-brand-solid) 6%,  transparent);
  --everyday-tint-medium: color-mix(in srgb, var(--everyday-bg-brand-solid) 12%, transparent);
  --everyday-tint-strong: color-mix(in srgb, var(--everyday-bg-brand-solid) 24%, transparent);
}

/* ════════════════════════════════════════════════════════════════════
   Components
   The only class selectors in this file. Everything above is a token.
   Folded in from ek-marketing.css (retired) — rules are byte-identical
   to the originals apart from the .ek-* → .everyday-* rename.
   ════════════════════════════════════════════════════════════════════ */

/* Full-bleed wrapper. Pair with .everyday-container inside for centered content. */
.everyday-band {
  width: 100%;
}

/* Soft brand-tinted band — for a hero or any section that should feel "premium". */
.everyday-band--tint {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, var(--everyday-tint-strong), transparent 70%),
    linear-gradient(180deg, var(--everyday-bg-layer-floor) 0%, var(--everyday-bg-layer-basement) 100%);
}

/* Container — centered, wide. Use inside .everyday-band. */
.everyday-container {
  max-width: var(--everyday-container);
  margin: 0 auto;
  padding: 0 var(--everyday-space-5);
}

/* ── Type ── */

.everyday-display-l {
  font-size: var(--everyday-display-l);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.everyday-body-xl {
  font-size: var(--everyday-body-xl);
  line-height: 1.5;
  color: var(--everyday-fg-neutral-muted);
}

/* ── CTA ── */
/* .everyday-cta is the default (m); --xl for a hero's single conversion button. */
.everyday-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--everyday-space-2);
  background: var(--everyday-bg-brand-solid);
  color: var(--everyday-fg-brand-contrast);
  font-family: inherit;
  font-weight: 700;
  font-size: var(--everyday-body-m-size);
  padding: 14px var(--everyday-space-6);
  border-radius: var(--everyday-radius-full);
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: var(--everyday-shadow-raised);
  transition: background var(--everyday-duration-short) var(--everyday-easing-standard),
              transform var(--everyday-duration-short) var(--everyday-easing-standard);
}
.everyday-cta:hover { background: var(--everyday-bg-brand-solid-pressed); transform: translateY(-1px); text-decoration: none; }
.everyday-cta:focus-visible { outline: 2px solid var(--everyday-bg-brand-solid); outline-offset: 3px; }

.everyday-cta--xl {
  font-size: var(--everyday-body-l-size);
  padding: 18px var(--everyday-space-8);
  width: 100%;
  max-width: 420px;
}

/* ── Eyebrow ── */
/* Small uppercase brand-colored label above a heading. */
.everyday-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--everyday-space-2);
  color: var(--everyday-bg-brand-solid);
  font-size: var(--everyday-body-s-size);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Chip variant — pill with a soft brand tint, optional leading dot. */
.everyday-eyebrow--chip {
  background: var(--everyday-tint-medium);
  padding: 6px var(--everyday-space-3);
  border-radius: var(--everyday-radius-full);
  letter-spacing: 0;
  text-transform: none;
  color: var(--everyday-fg-neutral);
}
.everyday-eyebrow--chip .everyday-eyebrow__dot {
  width: 7px; height: 7px;
  border-radius: var(--everyday-radius-full);
  background: var(--everyday-bg-brand-solid);
}

/* ── Highlight ── */
/* Marker stroke behind a word inside a heading — EK emphasises by highlighting,
   not by bolding or recolouring. Wrap the word in a <span>, nothing else.

   The two variants came from six pages that had each rolled their own, and
   their geometry is kept exactly as it shipped: the warm one starts at 55% and
   stops at 95% so the yellow floats clear of the descenders, the default runs
   from 58% to the baseline. Converging them is an eyes-on change, not a tidy-up. */
.everyday-highlight {
  background-image: linear-gradient(transparent 58%, var(--everyday-tint-strong) 58%);
  padding: 0 2px;
}

/* On navy, where the blue tint would disappear. Yellow never goes on white. */
.everyday-highlight--warm {
  background-image: linear-gradient(transparent 55%, var(--everyday-highlight-warm) 55%, var(--everyday-highlight-warm) 95%, transparent 95%);
  background-repeat: no-repeat;
  padding: 0 4px;
}