/* ===== strata-components.css ===== */
/* Strata — COMPONENT LAYER (consolidated 2026-06-05).
   These are the component rules that historically lived only in each demo
   page's <style> block (segmented, tabs, switch, slider, alerts, progress,
   menus, datepicker/calendar, tasklist, kanban, etc.). They are gathered here
   and @imported by strata-foundation.css so the foundation is SELF-SUFFICIENT:
   link strata-foundation.css alone and every component styles correctly.
   No foundation primitive is redefined — only the components the core omits.
   (The 24 demo pages still carry their own inline copies for now; those are
   now redundant and can be stripped in a later cleanup pass.) */

/* ====================================================================
   SEGMENTED CONTROL  (shell + .strata-segment from 05-navigation;
   plain-role-tab label styling from 02-buttons-controls so the Form-inputs
   segmented variant — which uses bare [role="tab"], not .strata-segment —
   also reads correctly). Indicator slides via JS-set --strata-ind-x/-w.
   ==================================================================== */
.strata-segmented { display: inline-flex; max-width: 100%; }
.strata-segmented__list {
  position: relative;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--strata-sp-1);
  padding: var(--strata-sp-1);
  width: 100%;
  background: var(--strata-surface-2);
  border: var(--strata-border);
  border-radius: var(--strata-r-full);
}
.strata-segment {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--strata-sp-2);
  padding: 8px 18px;
  font-family: var(--strata-font-body);
  font-size: var(--strata-text-sm);
  font-weight: 600;
  line-height: 1.2;
  color: var(--strata-text-2);
  background: transparent;
  border: 0;
  border-radius: var(--strata-r-full);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--strata-t-fast);
}
.strata-segment i { font-size: var(--strata-text-lg); line-height: 1; }
.strata-segment:hover { color: var(--strata-text-1); }
/* Active = inverted fill (solid action), white text. Indicator carries it. */
.strata-segment[aria-selected="true"] { color: var(--strata-text-on-accent); }
.strata-segment:focus-visible {
  outline: var(--strata-focus-width) solid var(--strata-primary);
  outline-offset: var(--strata-focus-offset);
}
.strata-segmented__indicator {
  position: absolute;
  z-index: 0;
  top: var(--strata-sp-1);
  left: 0;
  height: calc(100% - (var(--strata-sp-1) * 2));
  width: var(--strata-ind-w, 0);
  transform: translateX(var(--strata-ind-x, 0));
  background: var(--strata-action);
  border-radius: var(--strata-r-full);
  box-shadow: var(--strata-shadow-1);
  transition: transform var(--strata-t-base), width var(--strata-t-base);
  pointer-events: none;
}
/* Form-inputs variant: plain [role="tab"] buttons (no .strata-segment). */
.strata-segmented__list > [role="tab"]:not(.strata-segment) {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--strata-sp-2);
  padding: 7px 16px;
  border: 0;
  background: transparent;
  border-radius: var(--strata-r-full);
  font-family: var(--strata-font-body);
  font-size: var(--strata-text-sm);
  font-weight: 500;
  line-height: 1.2;
  color: var(--strata-text-2);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--strata-t-fast), font-weight var(--strata-t-fast);
}
.strata-segmented__list > [role="tab"]:not(.strata-segment):hover { color: var(--strata-text-1); }
.strata-segmented__list > [role="tab"]:not(.strata-segment)[aria-selected="true"] {
  color: var(--strata-text-on-accent);
  font-weight: 600;
}
.strata-segmented__list > [role="tab"]:not(.strata-segment):focus-visible {
  outline: var(--strata-focus-width) solid var(--strata-primary);
  outline-offset: var(--strata-focus-offset);
}


/* ====================================================================
   SWITCH / TOGGLE  (02-buttons-controls)
   ==================================================================== */
.strata-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--strata-sp-3);
  cursor: pointer;
  user-select: none;
}
.strata-switch__input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.strata-switch__track {
  position: relative;
  flex: none;
  width: 46px;
  height: 26px;
  border-radius: var(--strata-r-full);
  background: var(--strata-surface-2);
  border: var(--strata-border);
  box-shadow: inset 0 1px 2px rgba(var(--strata-primary-rgb), 0.06);
  transition: background var(--strata-t-fast), box-shadow var(--strata-t-fast);
}
.strata-switch__thumb {
  position: absolute;
  top: 50%;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: var(--strata-r-full);
  background: var(--strata-surface-3);
  box-shadow: var(--strata-shadow-2);
  transform: translate(0, -50%);
  transition: transform var(--strata-t-fast);
}
.strata-switch__input:checked + .strata-switch__track {
  background: var(--strata-action-grad);
  border-color: transparent;
}
.strata-switch__input:checked + .strata-switch__track .strata-switch__thumb {
  transform: translate(20px, -50%);
}
.strata-switch__input:focus-visible + .strata-switch__track {
  outline: var(--strata-focus-width) solid var(--strata-primary);
  outline-offset: var(--strata-focus-offset);
}
.strata-switch__input:disabled + .strata-switch__track {
  opacity: 0.5;
}
.strata-switch:has(.strata-switch__input:disabled) {
  cursor: not-allowed;
  color: var(--strata-text-3);
}
.strata-switch__label { color: var(--strata-text-1); font-weight: 500; }


/* ====================================================================
   BUTTON GROUP  (02-buttons-controls)
   ==================================================================== */
.strata-btn-group {
  display: inline-flex;
  border-radius: var(--strata-r-md);
  box-shadow: var(--strata-shadow-1);
}
.strata-btn-group .strata-btn {
  box-shadow: none;
  border-radius: 0;
}
.strata-btn-group .strata-btn:not(:first-child) {
  margin-left: -1px;
}
.strata-btn-group .strata-btn:first-child {
  border-top-left-radius: var(--strata-r-md);
  border-bottom-left-radius: var(--strata-r-md);
}
.strata-btn-group .strata-btn:last-child {
  border-top-right-radius: var(--strata-r-md);
  border-bottom-right-radius: var(--strata-r-md);
}
.strata-btn-group .strata-btn[aria-pressed="true"] {
  filter: var(--strata-lift-selected);
  box-shadow: inset 0 0 0 2px var(--strata-action);
  z-index: 1;
}


/* ====================================================================
   SPLIT-ACTION BUTTON + DROPDOWN PANEL + MENUITEM  (02-buttons-controls)
   ==================================================================== */
.strata-split {
  display: inline-flex;
  position: relative;
}
.strata-split__main {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.strata-split__toggle {
  width: 40px;
  padding-left: 0;
  padding-right: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: 1px;
}
.strata-dropdown { position: relative; display: inline-block; }
.strata-dropdown__panel {
  position: absolute;
  top: calc(100% + var(--strata-sp-2));
  left: 0;
  min-width: 220px;
  padding: var(--strata-sp-2);
  border-radius: var(--strata-r-lg);
}
.strata-dropdown__panel[data-align="right"] { left: auto; right: 0; }
.strata-dropdown__panel[hidden] { display: none; }

/* ----------------------------------------------------------------------
 * Palette switcher  (data-strata="palette")
 * A .strata-dropdown whose panel is a scrollable grid of palette swatches.
 * Each swatch carries its own data-strata-palette, so strata-palettes.css
 * resolves --strata-mesh / --strata-action-grad locally per swatch. The
 * trigger chip previews the ACTIVE palette (inherits --strata-mesh from the
 * root). Requires strata-palettes.css linked AFTER strata-foundation.css.
 * -------------------------------------------------------------------- */
.strata-palette-switch__trigger { display: inline-flex; align-items: center; gap: var(--strata-sp-2); }
.strata-palette-switch__chip {
  width: 22px; height: 22px; flex: none;
  border-radius: var(--strata-r-sm);
  background-image: var(--strata-mesh, var(--strata-bg-grad));
  background-size: cover;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .10), var(--strata-shadow-1);
}
.strata-palette-switch__label { font-weight: 600; }
.strata-palette-switch__panel { width: 332px; max-width: min(332px, 86vw); }

.strata-pswatchgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--strata-sp-2);
  max-height: min(58vh, 420px);
  overflow: auto;
  padding: 2px;
}
.strata-pswatch {
  position: relative;
  display: flex; flex-direction: column;
  padding: 0; overflow: hidden; cursor: pointer;
  font: inherit; text-align: left;
  border: 1px solid var(--strata-border-color);
  border-radius: var(--strata-r-md);
  background: var(--strata-surface-2);
  transition: transform var(--strata-t-fast), box-shadow var(--strata-t-fast);
}
.strata-pswatch:hover { transform: translateY(-1px); box-shadow: var(--strata-shadow-2); }
.strata-pswatch:focus-visible { outline: var(--strata-focus-width) solid var(--strata-primary); outline-offset: 2px; }
.strata-pswatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--strata-primary); border-color: transparent; }
.strata-pswatch__mesh { height: 34px; background-image: var(--strata-mesh, var(--strata-bg-grad)); background-size: cover; }
.strata-pswatch__row { display: flex; align-items: center; gap: var(--strata-sp-2); padding: var(--strata-sp-2); }
.strata-pswatch__dot {
  width: 12px; height: 12px; flex: none;
  border-radius: var(--strata-r-full);
  background-image: var(--strata-action-grad);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
}
.strata-pswatch__name {
  font-size: var(--strata-text-xs); font-weight: 600;
  color: var(--strata-text-1); line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.strata-menuitem {
  display: flex;
  align-items: center;
  gap: var(--strata-sp-3);
  width: 100%;
  padding: var(--strata-sp-2) var(--strata-sp-3);
  border: 0;
  background: transparent;
  border-radius: var(--strata-r-sm);
  font-family: var(--strata-font-body);
  font-size: var(--strata-text-sm);
  font-weight: 500;
  line-height: 1.3;
  color: var(--strata-text-1);
  text-align: left;
  cursor: pointer;
  transition: background var(--strata-t-fast), color var(--strata-t-fast);
}
.strata-menuitem i { font-size: var(--strata-text-lg); color: var(--strata-text-2); }
.strata-menuitem:hover {
  background: var(--strata-primary-soft);
  color: oklch(from var(--strata-action) .38 c h);
}
.strata-menuitem:hover i { color: oklch(from var(--strata-action) .42 c h); }
.strata-menuitem:focus-visible {
  outline: var(--strata-focus-width) solid var(--strata-primary);
  outline-offset: calc(var(--strata-focus-offset) * -1);
}
.strata-menuitem--danger { color: oklch(from var(--strata-red) .48 c h); }
.strata-menuitem--danger i { color: oklch(from var(--strata-red) .55 c h); }
.strata-menuitem--danger:hover {
  background: oklch(from var(--strata-red) .94 calc(c * .5) h);
  color: oklch(from var(--strata-red) .42 c h);
}


/* ====================================================================
   FLOATING ACTION BUTTON + BLOCK BUTTON + LOADING STATE  (02-buttons-controls)
   ==================================================================== */
.strata-fab {
  width: 56px;
  height: 56px;
  border-radius: var(--strata-r-full);
  padding: 0;
  box-shadow: var(--strata-shadow-4);
}
.strata-fab i { font-size: 24px; }
.strata-fab--pinned {
  position: absolute;
  right: var(--strata-sp-4);
  bottom: var(--strata-sp-4);
}
.strata-fab--extended {
  width: auto;
  height: 56px;
  padding: 0 var(--strata-sp-5);
  gap: var(--strata-sp-2);
}
.strata-btn--block { display: flex; width: 100%; }
/* A button caught loading: lock width so it does not reflow on swap. */
.is-loading { pointer-events: none; }
.is-loading .btn-label { opacity: 0.85; }


/* ====================================================================
   TABS  (05-navigation)
   ==================================================================== */
.strata-tabs { display: flex; flex-direction: column; gap: var(--strata-sp-4); }
.strata-tabs__list {
  position: relative;
  display: inline-flex;
  align-self: flex-start;
  max-width: 100%;
  gap: var(--strata-sp-1);
  padding: var(--strata-sp-1);
  background: var(--strata-surface-2);
  border: var(--strata-border);
  border-radius: var(--strata-r-md);
  overflow-x: auto;
  scrollbar-width: none;
}
.strata-tabs__list::-webkit-scrollbar { display: none; }
.strata-tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--strata-sp-2);
  flex: none;
  padding: 8px 16px;
  font-family: var(--strata-font-body);
  font-size: var(--strata-text-sm);
  font-weight: 500;
  line-height: 1.2;
  color: var(--strata-text-2);
  background: transparent;
  border: 0;
  border-radius: var(--strata-r-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--strata-t-fast), filter var(--strata-t-fast);
}
.strata-tab i { font-size: var(--strata-text-lg); line-height: 1; }
.strata-tab:hover { color: var(--strata-text-1); }
.strata-tab[aria-selected="true"] { color: var(--strata-text-1); font-weight: 700; }
.strata-tab:focus-visible {
  outline: var(--strata-focus-width) solid var(--strata-primary);
  outline-offset: var(--strata-focus-offset);
}
.strata-tab .strata-badge { font-weight: 700; }
.strata-tabs__indicator {
  position: absolute;
  z-index: 0;
  top: var(--strata-sp-1);
  left: 0;
  height: calc(100% - (var(--strata-sp-1) * 2));
  width: var(--strata-ind-w, 0);
  transform: translateX(var(--strata-ind-x, 0));
  background: var(--strata-surface-3);
  border-radius: var(--strata-r-sm);
  box-shadow: var(--strata-shadow-2);
  transition: transform var(--strata-t-base), width var(--strata-t-base);
  pointer-events: none;
}
.strata-panel {
  padding: var(--strata-sp-5);
  border-radius: var(--strata-r-lg);
}
.strata-panel[hidden] { display: none; }
.strata-panel h4 { margin: 0 0 var(--strata-sp-2); }
.strata-panel p { margin: 0; color: var(--strata-text-2); }


/* ====================================================================
   SIDEBAR (labelled rail)  (05-navigation)
   ==================================================================== */
.strata-sidenav {
  display: flex;
  flex-direction: column;
  gap: var(--strata-sp-1);
  padding: var(--strata-sp-2);
  border-radius: var(--strata-r-lg);
  min-width: 232px;
}
.strata-sidenav__section {
  margin: var(--strata-sp-3) var(--strata-sp-3) var(--strata-sp-1);
}
.strata-sidenav__section:first-child { margin-top: var(--strata-sp-1); }
.strata-sidenav__item {
  display: flex;
  align-items: center;
  gap: var(--strata-sp-3);
  padding: 9px 12px;
  font-family: var(--strata-font-body);
  font-size: var(--strata-text-sm);
  font-weight: 500;
  color: var(--strata-text-2);
  background: transparent;
  border: 0;
  border-radius: var(--strata-r-md);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: color var(--strata-t-fast), background var(--strata-t-fast), box-shadow var(--strata-t-fast), filter var(--strata-t-fast);
}
.strata-sidenav__item:hover { background: var(--strata-surface-2); color: var(--strata-text-1); filter: var(--strata-lift-hover); }
.strata-sidenav__item i { font-size: var(--strata-text-xl); line-height: 1; flex: none; }
.strata-sidenav__label { flex: 1 1 auto; }
.strata-sidenav__item[aria-current="page"] {
  background: var(--strata-primary-soft);
  color: var(--strata-text-1);
  font-weight: 700;
  box-shadow: inset 0 0 0 2px var(--strata-action);
}
.strata-sidenav__item[aria-current="page"] i { color: var(--strata-action); }
.strata-sidenav__item:focus-visible {
  outline: var(--strata-focus-width) solid var(--strata-primary);
  outline-offset: calc(-1 * var(--strata-focus-width));
}
.strata-sidenav__count {
  margin-left: auto;
  flex: none;
  min-width: 22px;
  padding: 1px 7px;
  text-align: center;
  font-size: var(--strata-text-xs);
  font-weight: 700;
}


/* ====================================================================
   ICON RAIL (compact, squircle targets)  (05-navigation)
   ==================================================================== */
.strata-iconrail {
  display: flex;
  flex-direction: column;
  gap: var(--strata-sp-2);
  padding: var(--strata-sp-2);
  border-radius: var(--strata-r-lg);
  align-items: center;
}
.strata-iconrail__item {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: var(--strata-text-2xl);
  color: var(--strata-text-2);
  background: transparent;
  border: 0;
  border-radius: var(--strata-squircle-fallback);
  cursor: pointer;
  transition: color var(--strata-t-fast), filter var(--strata-t-fast);
}
.strata-iconrail__item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--strata-squircle-fallback);
  background: transparent;
  -webkit-clip-path: url(#strata-squircle);
  clip-path: url(#strata-squircle);
  transition: background var(--strata-t-fast), box-shadow var(--strata-t-fast);
}
.strata-iconrail__item:hover { color: var(--strata-text-1); filter: var(--strata-lift-hover); }
.strata-iconrail__item:hover::before { background: var(--strata-surface-2); }
.strata-iconrail__item[aria-current="page"] { color: var(--strata-action); }
.strata-iconrail__item[aria-current="page"]::before {
  background: var(--strata-primary-soft);
  box-shadow: inset 0 0 0 2px var(--strata-action);
}
.strata-iconrail__item:focus-visible {
  outline: var(--strata-focus-width) solid var(--strata-primary);
  outline-offset: calc(-1 * var(--strata-focus-width));
}


/* ====================================================================
   BREADCRUMB  (05-navigation)
   ==================================================================== */
.strata-breadcrumb { width: 100%; }
.strata-breadcrumb__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--strata-sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.strata-breadcrumb__item { display: inline-flex; align-items: center; gap: var(--strata-sp-1); }
.strata-breadcrumb__link {
  display: inline-flex;
  align-items: center;
  gap: var(--strata-sp-2);
  padding: 4px 8px;
  font-size: var(--strata-text-sm);
  font-weight: 500;
  color: var(--strata-text-2);
  background: transparent;
  border: 0;
  border-radius: var(--strata-r-sm);
  cursor: pointer;
  transition: color var(--strata-t-fast), background var(--strata-t-fast);
}
.strata-breadcrumb__link i { font-size: var(--strata-text-lg); line-height: 1; }
.strata-breadcrumb__link:hover { color: var(--strata-text-1); background: var(--strata-surface-2); }
.strata-breadcrumb__link:focus-visible {
  outline: var(--strata-focus-width) solid var(--strata-primary);
  outline-offset: var(--strata-focus-offset);
}
.strata-breadcrumb__sep { color: var(--strata-text-3); display: inline-flex; }
.strata-breadcrumb__sep i { font-size: var(--strata-text-base); }
.strata-breadcrumb__current {
  padding: 4px 8px;
  font-size: var(--strata-text-sm);
  font-weight: 700;
  color: var(--strata-text-1);
}


/* ====================================================================
   DROPDOWN / MENU  (05-navigation; powers the catalog "Dropdown menu")
   ==================================================================== */
.strata-menu, .strata-dropdown { position: relative; display: inline-flex; }
.strata-menu__panel, .strata-dropdown__panel {
  position: absolute;
  top: calc(100% + var(--strata-sp-2));
  left: 0;
  z-index: 40;
  min-width: 232px;
  padding: var(--strata-sp-1);
  border-radius: var(--strata-r-lg);
}
.strata-menu__panel--right, .strata-dropdown__panel--right { left: auto; right: 0; }
.strata-menu__panel[hidden], .strata-dropdown__panel[hidden] { display: none; }
.strata-menu__group { padding: var(--strata-sp-1) 0; }
.strata-menu__group + .strata-menu__group { border-top: var(--strata-border); }
.strata-menu__label {
  padding: var(--strata-sp-1) var(--strata-sp-3) var(--strata-sp-2);
  font-family: var(--strata-font-body);
  font-size: var(--strata-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--strata-text-3);
}
.strata-menu__separator {
  height: 1px;
  margin: var(--strata-sp-1) var(--strata-sp-2);
  background: var(--strata-border-color);
  border: 0;
}
.strata-menu__item {
  display: flex;
  align-items: center;
  gap: var(--strata-sp-3);
  width: 100%;
  padding: 8px var(--strata-sp-3);
  font-family: var(--strata-font-body);
  font-size: var(--strata-text-sm);
  font-weight: 500;
  color: var(--strata-text-1);
  background: transparent;
  border: 0;
  border-radius: var(--strata-r-md);
  cursor: pointer;
  text-align: left;
  transition: background var(--strata-t-fast), filter var(--strata-t-fast), color var(--strata-t-fast);
}
.strata-menu__item i { font-size: var(--strata-text-lg); line-height: 1; flex: none; color: var(--strata-text-2); }
.strata-menu__item:hover { background: var(--strata-surface-2); filter: var(--strata-lift-hover); }
.strata-menu__item[aria-current="true"] {
  background: var(--strata-primary-soft);
  font-weight: 700;
  box-shadow: inset 0 0 0 2px var(--strata-action);
}
.strata-menu__item[aria-current="true"] i { color: var(--strata-action); }
.strata-menu__item:focus-visible {
  outline: var(--strata-focus-width) solid var(--strata-primary);
  outline-offset: calc(-1 * var(--strata-focus-width));
}
.strata-menu__shortcut {
  margin-left: auto;
  flex: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--strata-text-xs);
  color: var(--strata-text-3);
}
.strata-menu__check { margin-left: auto; flex: none; color: var(--strata-action); font-size: var(--strata-text-lg); }
.strata-menu__item--danger { color: var(--strata-red); }
.strata-menu__item--danger i { color: var(--strata-red); }
.strata-menu__item--danger:hover { background: var(--strata-red-glow); filter: none; }
.strata-menu__trigger.strata-btn i.strata-menu__caret {
  transition: transform var(--strata-t-fast);
  font-size: var(--strata-text-base);
}
.strata-menu__trigger[aria-expanded="true"] i.strata-menu__caret { transform: rotate(180deg); }


/* ====================================================================
   PAGINATION  (05-navigation)
   ==================================================================== */
.strata-pagination {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--strata-sp-2);
}
.strata-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--strata-sp-2);
  min-width: 40px;
  height: 40px;
  padding: 0 var(--strata-sp-3);
  font-family: var(--strata-font-body);
  font-size: var(--strata-text-sm);
  font-weight: 600;
  color: var(--strata-text-1);
  background: var(--strata-surface-3);
  border: var(--strata-border);
  border-radius: var(--strata-r-md);
  cursor: pointer;
  transition: filter var(--strata-t-fast), background var(--strata-t-fast), box-shadow var(--strata-t-fast), color var(--strata-t-fast);
}
.strata-page i { font-size: var(--strata-text-lg); line-height: 1; }
.strata-page:hover:not(:disabled):not([aria-current="page"]) { filter: var(--strata-lift-hover); border-color: var(--strata-action); }
.strata-page[aria-current="page"] {
  background: var(--strata-action);
  color: var(--strata-text-on-accent);
  border-color: transparent;
  box-shadow: var(--strata-shadow-2);
}
.strata-page:disabled { opacity: 0.45; cursor: not-allowed; }
.strata-page:focus-visible {
  outline: var(--strata-focus-width) solid var(--strata-primary);
  outline-offset: var(--strata-focus-offset);
}
.strata-page--ellipsis {
  min-width: 32px;
  background: transparent;
  border: 0;
  color: var(--strata-text-3);
  cursor: default;
  pointer-events: none;
}


/* ====================================================================
   FORM FIELD WRAPPER + VALIDATION STATES  (03-form-inputs)
   ==================================================================== */
.field { display: flex; flex-direction: column; gap: var(--strata-sp-2); }
.field__label {
  display: flex;
  align-items: center;
  gap: var(--strata-sp-2);
  color: var(--strata-text-1);
  font-weight: 600;
}
.field__req { color: var(--strata-action); font-weight: 700; }
.field__optional { color: var(--strata-text-3); font-weight: 400; }
.field__help { margin: 0; color: var(--strata-text-2); }
.field__msg {
  display: none;
  align-items: center;
  gap: var(--strata-sp-2);
  margin: 0;
}
.field__msg i { font-size: var(--strata-text-base); line-height: 1; }
.field__msg--error   { color: var(--strata-red); }
.field__msg--success { color: var(--strata-green); }
.field[data-state="error"]   .field__msg--error   { display: flex; }
.field[data-state="success"] .field__msg--success { display: flex; }
.field[data-state="error"] .strata-input {
  border-color: var(--strata-red);
}
.field[data-state="error"] .strata-input:focus,
.field[data-state="error"] .strata-input:focus-visible {
  border-color: var(--strata-red);
  box-shadow: 0 0 0 3px var(--strata-red-glow);
}
.field[data-state="success"] .strata-input {
  border-color: var(--strata-green);
}
.field[data-state="success"] .strata-input:focus,
.field[data-state="success"] .strata-input:focus-visible {
  border-color: var(--strata-green);
  box-shadow: 0 0 0 3px var(--strata-green-glow);
}


/* ====================================================================
   CHECKBOX / RADIO OPTION ROWS  (03-form-inputs)
   ==================================================================== */
.check-group, .radio-group {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: var(--strata-r-md);
}
.opt-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--strata-sp-3);
  padding: var(--strata-sp-3) var(--strata-sp-4);
  border-radius: var(--strata-r-md);
  cursor: pointer;
  transition: filter var(--strata-t-fast), background var(--strata-t-fast);
}
.opt-row:hover { filter: var(--strata-lift-hover); background: var(--strata-surface-2); }
.opt-row__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.opt-row__title { color: var(--strata-text-1); font-weight: 500; }
.opt-row__sub { color: var(--strata-text-2); }
.opt-row input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.opt-row[data-checked="true"] {
  background: var(--strata-primary-soft);
  color: oklch(from var(--strata-action) .36 c h);
}
.opt-row[data-checked="true"] .opt-row__title { color: oklch(from var(--strata-action) .34 c h); }
.check-group .opt-row[data-checked="true"]:has(+ .opt-row[data-checked="true"]) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.check-group .opt-row[data-checked="true"] + .opt-row[data-checked="true"] {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.opt-row:has(input:focus-visible) {
  outline: var(--strata-focus-width) solid var(--strata-primary);
  outline-offset: var(--strata-focus-offset);
}
/* Checkbox glyph box. */
.ctrl-box {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: var(--strata-r-sm);
  border: 2px solid var(--strata-border-strong);
  background: var(--strata-surface-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--strata-text-on-accent);
  transition: border-color var(--strata-t-fast), background var(--strata-t-fast);
}
.ctrl-box i { font-size: 15px; line-height: 1; opacity: 0; transform: scale(0.6); transition: opacity var(--strata-t-fast), transform var(--strata-t-fast); }
.opt-row input:checked ~ .ctrl-box {
  background: var(--strata-action-grad);
  border-color: transparent;
}
.opt-row input:checked ~ .ctrl-box i { opacity: 1; transform: scale(1); }
.opt-row input:indeterminate ~ .ctrl-box {
  background: var(--strata-action-grad);
  border-color: transparent;
}
.opt-row input:indeterminate ~ .ctrl-box i { opacity: 1; transform: scale(1); }
/* Radio glyph + selected inset ring (no side strip). */
.ctrl-radio {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: var(--strata-r-full);
  border: 2px solid var(--strata-border-strong);
  background: var(--strata-surface-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--strata-t-fast);
}
.ctrl-radio::after {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: var(--strata-r-full);
  background: var(--strata-action-grad);
  transform: scale(0);
  transition: transform var(--strata-t-base);
}
.opt-row input:checked ~ .ctrl-radio { border-color: var(--strata-action); }
.opt-row input:checked ~ .ctrl-radio::after { transform: scale(1); }
.radio-group .opt-row[data-checked="true"] {
  box-shadow: inset 0 0 0 2px var(--strata-action);
  margin: 2px 0;
}


/* ====================================================================
   SLIDER / RANGE  (03-form-inputs)
   ==================================================================== */
.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: var(--strata-r-full);
  background: var(--strata-surface-2);
  border: var(--strata-border);
  outline: none;
  background-image: linear-gradient(var(--strata-action), var(--strata-action));
  background-repeat: no-repeat;
  background-size: var(--slider-fill, 0%) 100%;
  cursor: pointer;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: var(--strata-r-full);
  background: var(--strata-action-grad);
  box-shadow: var(--strata-shadow-2);
  border: 2px solid var(--strata-surface-3);
  cursor: pointer;
  transition: filter var(--strata-t-fast);
}
.slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: var(--strata-r-full);
  background: var(--strata-action-grad);
  box-shadow: var(--strata-shadow-2);
  border: 2px solid var(--strata-surface-3);
  cursor: pointer;
}
.slider:hover::-webkit-slider-thumb { filter: var(--strata-lift-hover); }
.slider:focus-visible::-webkit-slider-thumb {
  box-shadow: var(--strata-shadow-2), 0 0 0 4px var(--strata-primary-soft);
}
.slider:focus-visible::-moz-range-thumb {
  box-shadow: var(--strata-shadow-2), 0 0 0 4px var(--strata-primary-soft);
}
.slider:focus-visible { box-shadow: none; }


/* ====================================================================
   INPUT GROUP (prefix/suffix)  (03-form-inputs)
   ==================================================================== */
.input-group {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--strata-border-strong);
  border-radius: var(--strata-r-md);
  background: var(--strata-surface-3);
  overflow: hidden;
  transition: border-color var(--strata-t-fast), box-shadow var(--strata-t-fast);
}
.input-group:hover { border-color: var(--strata-action); }
.input-group:focus-within {
  border-color: var(--strata-primary);
  box-shadow: 0 0 0 3px var(--strata-primary-soft);
}
.input-group__affix {
  display: inline-flex;
  align-items: center;
  gap: var(--strata-sp-1);
  padding: 0 var(--strata-sp-3);
  background: var(--strata-surface-2);
  color: var(--strata-text-2);
  white-space: nowrap;
}
.input-group__affix--prefix { border-right: var(--strata-border); }
.input-group__affix--suffix { border-left: var(--strata-border); }
.input-group .strata-input {
  border: 0;
  border-radius: 0;
  background: transparent;
  flex: 1 1 auto;
  min-width: 0;
}
.input-group .strata-input:focus,
.input-group .strata-input:focus-visible { box-shadow: none; }


/* ====================================================================
   SEARCH FIELD  (03-form-inputs)
   ==================================================================== */
.search { position: relative; }
.search__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--strata-text-2);
  pointer-events: none;
  line-height: 1;
}
.search .strata-input { padding-left: 42px; padding-right: 42px; }
.search__clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: var(--strata-r-full);
  background: var(--strata-surface-2);
  color: var(--strata-text-2);
  cursor: pointer;
  transition: filter var(--strata-t-fast);
}
.search__clear:hover { filter: var(--strata-lift-hover); color: var(--strata-text-1); }
.search.has-value .search__clear { display: inline-flex; }


/* ====================================================================
   DATEPICKER + CALENDAR  (04-date-time)
   JS (Strata.datepicker / Strata.calendar) injects the .strata-cal__* tree
   into .strata-datepicker / .strata-calendar hosts.
   ==================================================================== */
.strata-datepicker { position: relative; }
.strata-datepicker__input { cursor: pointer; }
.strata-datepicker__pop {
  position: absolute;
  top: calc(100% + var(--strata-sp-2));
  left: 0;
  z-index: 30;
  min-width: 280px;
  padding: var(--strata-sp-4);
  border-radius: var(--strata-r-lg);
}
.strata-datepicker[data-inline] .strata-datepicker__pop {
  position: static;
  box-shadow: none;
  padding: 0;
  min-width: 0;
  border: 0;
  background: transparent;
}
.strata-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--strata-sp-3);
  margin-bottom: var(--strata-sp-3);
}
.strata-cal__title {
  font-family: var(--strata-font-body);
  font-weight: 600;
  font-size: var(--strata-text-base);
  color: var(--strata-text-1);
  text-align: center;
  flex: 1 1 auto;
}
.strata-cal__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  font-size: var(--strata-text-xl);
  line-height: 1;
  border: 1px solid var(--strata-border-strong);
  border-radius: var(--strata-r-md);
  background: var(--strata-surface-3);
  color: var(--strata-text-1);
  cursor: pointer;
  transition: filter var(--strata-t-fast), border-color var(--strata-t-fast);
}
.strata-cal__nav:hover { filter: var(--strata-lift-hover); border-color: var(--strata-action); }
.strata-cal__nav:focus-visible {
  outline: var(--strata-focus-width) solid var(--strata-primary);
  outline-offset: var(--strata-focus-offset);
}
.strata-cal__row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--strata-sp-1);
}
.strata-cal__row + .strata-cal__row { margin-top: var(--strata-sp-1); }
.strata-cal__dow { margin-bottom: var(--strata-sp-2); }
.strata-cal__dowcell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  font-family: var(--strata-font-body);
  font-weight: 600;
  font-size: var(--strata-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--strata-text-3);
}
.strata-cal__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  min-height: 38px;
  padding: 0;
  font-family: var(--strata-font-body);
  font-size: var(--strata-text-sm);
  font-weight: 500;
  color: var(--strata-text-1);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--strata-r-md);
  cursor: pointer;
  transition: filter var(--strata-t-fast), background var(--strata-t-fast), box-shadow var(--strata-t-fast);
}
.strata-cal__cell:hover { background: var(--strata-surface-2); filter: var(--strata-lift-hover); }
.strata-cal__cell:focus-visible {
  outline: var(--strata-focus-width) solid var(--strata-primary);
  outline-offset: var(--strata-focus-offset);
}
.strata-cal__cell.is-out { color: var(--strata-text-3); opacity: 0.55; }
.strata-cal__cell.is-today {
  box-shadow: inset 0 0 0 1px var(--strata-action);
  font-weight: 700;
}
.strata-cal__cell.is-selected {
  background: var(--strata-action);
  color: var(--strata-text-on-accent);
  box-shadow: var(--strata-shadow-2);
}
.strata-cal__cell.is-selected:hover { background: var(--strata-action); filter: var(--strata-lift-hover); }
.strata-cal__cell.is-inrange { background: var(--strata-primary-soft); border-radius: var(--strata-r-sm); }
.strata-cal__cell.is-disabled,
.strata-cal__cell[disabled] {
  color: var(--strata-text-3);
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.strata-cal__cell.has-event { position: relative; }
.strata-cal__cell.has-event::after {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: var(--strata-r-full);
  background: var(--strata-action);
}
.strata-cal__cell.is-selected.has-event::after { background: var(--strata-text-on-accent); }
.strata-cal__grid--mini .strata-cal__cell { min-height: 30px; font-size: var(--strata-text-xs); border-radius: var(--strata-r-sm); }
.strata-cal__grid--mini .strata-cal__dowcell { height: 22px; }
.strata-cal__week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--strata-sp-2);
}
.strata-cal__wcell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--strata-sp-1);
  padding: var(--strata-sp-3) var(--strata-sp-1);
  border-radius: var(--strata-r-md);
  background: var(--strata-surface-2);
  border: var(--strata-border);
  cursor: pointer;
  transition: filter var(--strata-t-fast), box-shadow var(--strata-t-fast);
}
.strata-cal__wcell:hover { filter: var(--strata-lift-hover); }
.strata-cal__wcell.is-today { box-shadow: inset 0 0 0 1px var(--strata-action); }
.strata-cal__wcell.is-selected {
  background: var(--strata-action);
  box-shadow: var(--strata-shadow-2);
}
.strata-cal__wcell.is-selected .strata-cal__wday,
.strata-cal__wcell.is-selected .strata-cal__wnum { color: var(--strata-text-on-accent); }
.strata-cal__wday {
  font-family: var(--strata-font-body);
  font-weight: 600;
  font-size: var(--strata-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--strata-text-3);
}
.strata-cal__wnum {
  font-family: var(--strata-font-body);
  font-weight: 700;
  font-size: var(--strata-text-xl);
  color: var(--strata-text-1);
}
.strata-cal__periods {
  display: inline-flex;
  gap: var(--strata-sp-1);
  padding: var(--strata-sp-1);
  margin-bottom: var(--strata-sp-4);
  background: var(--strata-surface-2);
  border: var(--strata-border);
  border-radius: var(--strata-r-full);
}
.strata-cal__period {
  padding: 6px 16px;
  font-family: var(--strata-font-body);
  font-weight: 600;
  font-size: var(--strata-text-sm);
  color: var(--strata-text-2);
  background: transparent;
  border: 0;
  border-radius: var(--strata-r-full);
  cursor: pointer;
  transition: filter var(--strata-t-fast), background var(--strata-t-fast), color var(--strata-t-fast);
}
.strata-cal__period:hover { color: var(--strata-text-1); }
.strata-cal__period[aria-selected="true"] {
  background: var(--strata-action);
  color: var(--strata-text-on-accent);
  box-shadow: var(--strata-shadow-1);
}
.strata-cal__period:focus-visible {
  outline: var(--strata-focus-width) solid var(--strata-primary);
  outline-offset: var(--strata-focus-offset);
}


/* ====================================================================
   STAT CARD + METRIC CARD + TREND PILL  (06-data-display)
   ==================================================================== */
.stat { display: flex; flex-direction: column; gap: var(--strata-sp-2); padding: var(--strata-sp-5); }
.stat__top { display: flex; align-items: center; justify-content: space-between; gap: var(--strata-sp-3); }
.stat__label { margin: 0; color: var(--strata-text-2); min-height: 1.45em; }
.stat__icon { color: var(--strata-action); font-size: var(--strata-text-xl); flex: none; }
.stat__value { margin: 0; font-variant-numeric: tabular-nums; }
.stat__foot { margin: 0; color: var(--strata-text-3); min-height: 1.4em; }
.metric { display: flex; flex-direction: column; gap: var(--strata-sp-3); padding: var(--strata-sp-5); }
.metric__head { display: flex; align-items: center; gap: var(--strata-sp-3); min-height: 48px; }
.metric__label { margin: 0; color: var(--strata-text-2); }
.metric__valrow { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--strata-sp-3); }
.metric__value { margin: 0; line-height: 1; font-variant-numeric: tabular-nums; }
.strata-trend {
  display: inline-flex;
  align-items: center;
  gap: var(--strata-sp-1);
  padding: 3px 10px;
  border-radius: var(--strata-r-full);
  font-family: var(--strata-font-body);
  font-size: var(--strata-text-xs);
  font-weight: 700;
  line-height: 1.4;
  color: var(--strata-text-on-accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.strata-trend--up   { background: var(--strata-green-grad); }
.strata-trend--down { background: var(--strata-red-grad); }
.strata-trend--flat { background: linear-gradient(135deg, var(--strata-surface-7), var(--strata-surface-6)); color: var(--strata-text-2); }
.metric__spark { display: flex; align-items: flex-end; gap: 3px; height: 36px; }
.metric__bar {
  flex: 1 1 0;
  min-width: 4px;
  border-radius: var(--strata-r-sm) var(--strata-r-sm) 0 0;
  background: var(--strata-action-grad);
  opacity: 0.55;
}
.metric__bar:last-child { opacity: 1; }


/* ====================================================================
   DATA TABLE  (06-data-display)
   ==================================================================== */
.strata-table-wrap { width: 100%; overflow-x: auto; border-radius: var(--strata-r-lg); }
.strata-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--strata-font-body);
  font-size: var(--strata-text-sm);
}
.strata-table th,
.strata-table td {
  padding: var(--strata-sp-3) var(--strata-sp-4);
  text-align: left;
  border-bottom: 1px solid var(--strata-border-color);
  vertical-align: middle;
  white-space: nowrap;
}
.strata-table thead th {
  color: var(--strata-text-2);
  font-weight: 600;
  font-size: var(--strata-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--strata-border-strong);
  position: sticky;
  top: 0;
  background: var(--strata-surface-3);
  z-index: 1;
}
.strata-table__sort {
  display: inline-flex;
  align-items: center;
  gap: var(--strata-sp-1);
  width: 100%;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color var(--strata-t-fast);
}
.strata-table__sort:hover { color: var(--strata-text-1); }
.strata-table__sort:focus-visible {
  outline: var(--strata-focus-width) solid var(--strata-primary);
  outline-offset: var(--strata-focus-offset);
  border-radius: var(--strata-r-sm);
}
.strata-table__sort .ph { font-size: var(--strata-text-base); opacity: 0.55; transition: opacity var(--strata-t-fast); }
.strata-table__sort[aria-sort="ascending"] .ph,
.strata-table__sort[aria-sort="descending"] .ph { opacity: 1; color: var(--strata-action); }
th[aria-sort] { color: var(--strata-text-1); }
.strata-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.strata-table thead .is-num .strata-table__sort { justify-content: flex-end; }
.strata-table tbody tr {
  cursor: pointer;
  transition: background var(--strata-t-fast);
}
.strata-table tbody tr:hover { background: var(--strata-primary-glass); }
.strata-table tbody tr.is-selected {
  background: var(--strata-primary-soft);
  box-shadow: inset 0 0 0 2px var(--strata-action);
}
.strata-table tbody tr.is-selected td { border-bottom-color: transparent; }
.strata-table tbody tr:last-child td { border-bottom: 0; }
.strata-table__check {
  width: 18px; height: 18px;
  accent-color: var(--strata-action);
  cursor: pointer;
}
.strata-table__name { display: flex; align-items: center; gap: var(--strata-sp-3); }
.strata-table__name .strata-body-sm { color: var(--strata-text-1); font-weight: 500; }


/* ====================================================================
   LIST ROWS  (06-data-display)
   ==================================================================== */
.strata-list { display: flex; flex-direction: column; }
.strata-listrow {
  display: flex;
  align-items: center;
  gap: var(--strata-sp-4);
  padding: var(--strata-sp-3) var(--strata-sp-3);
  border-radius: var(--strata-r-md);
  border-bottom: 1px solid var(--strata-border-color);
  transition: background var(--strata-t-fast), box-shadow var(--strata-t-fast);
  cursor: pointer;
}
.strata-listrow:last-child { border-bottom: 0; }
.strata-listrow:hover { background: var(--strata-primary-glass); }
.strata-listrow.is-selected {
  background: var(--strata-primary-soft);
  border-bottom-color: transparent;
  box-shadow: inset 0 0 0 2px var(--strata-action);
}
.strata-listrow:focus-visible {
  outline: var(--strata-focus-width) solid var(--strata-primary);
  outline-offset: calc(var(--strata-focus-offset) * -1);
}
.strata-listrow__lead { flex: none; }
.strata-listrow__main { flex: 1 1 auto; min-width: 0; }
.strata-listrow__title { margin: 0; color: var(--strata-text-1); font-weight: 600; }
.strata-listrow__sub {
  margin: 2px 0 0;
  color: var(--strata-text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.strata-listrow__trail {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--strata-sp-2);
  color: var(--strata-text-2);
}


/* ====================================================================
   TIMELINE  (06-data-display)
   ==================================================================== */
.strata-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.strata-tl {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: var(--strata-sp-4);
  padding-bottom: var(--strata-sp-5);
}
.strata-tl:last-child { padding-bottom: 0; }
.strata-tl__rail { position: relative; display: flex; justify-content: center; }
.strata-tl:not(:last-child) .strata-tl__rail::before {
  content: "";
  position: absolute;
  top: 30px;
  bottom: calc(var(--strata-sp-5) * -1);
  width: 2px;
  background: var(--strata-border-strong);
}
.strata-tl__node {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  flex: none;
  border-radius: var(--strata-r-full);
  background: var(--strata-action-grad);
  color: var(--strata-text-on-accent);
  font-size: var(--strata-text-base);
  box-shadow: var(--strata-shadow-1);
}
.strata-tl__node--green { background: var(--strata-green-grad); }
.strata-tl__node--amber { background: var(--strata-amber-grad); }
.strata-tl__node--muted { background: var(--strata-surface-2); color: var(--strata-text-3); box-shadow: inset 0 0 0 2px var(--strata-border-strong); }
.strata-tl__body { padding-top: 3px; min-width: 0; }
.strata-tl__title { margin: 0; color: var(--strata-text-1); font-weight: 600; }
.strata-tl__meta { margin: 2px 0 0; color: var(--strata-text-3); }
.strata-tl__desc { margin: var(--strata-sp-2) 0 0; color: var(--strata-text-2); }


/* ====================================================================
   STEPPED PROGRESS / MILESTONES (horizontal)  (06-data-display)
   ==================================================================== */
.strata-steps {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: start;
  gap: 0;
}
.strata-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--strata-sp-2);
  text-align: center;
  padding: 0 var(--strata-sp-2);
}
.strata-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 13px;
  left: 50%;
  width: 100%;
  height: 3px;
  border-radius: var(--strata-r-full);
  background: var(--strata-border-strong);
}
.strata-step.is-done:not(:last-child)::after { background: var(--strata-action); }
.strata-step__dot {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: var(--strata-r-full);
  background: var(--strata-surface-2);
  color: var(--strata-text-3);
  box-shadow: inset 0 0 0 2px var(--strata-border-strong);
  font-size: var(--strata-text-sm);
  font-weight: 700;
}
.strata-step.is-done .strata-step__dot {
  background: var(--strata-action-grad);
  color: var(--strata-text-on-accent);
  box-shadow: var(--strata-shadow-1);
}
.strata-step.is-current .strata-step__dot {
  background: var(--strata-surface-3);
  color: var(--strata-action);
  box-shadow: inset 0 0 0 2px var(--strata-action), var(--strata-shadow-1);
}
.strata-step__label { margin: 0; color: var(--strata-text-1); font-weight: 600; }
.strata-step.is-pending .strata-step__label { color: var(--strata-text-3); }
.strata-step__sub { margin: 0; color: var(--strata-text-3); }


/* ====================================================================
   AVATAR GROUP  (06-data-display; built on foundation .strata-avatar)
   ==================================================================== */
.strata-avatar-group { display: inline-flex; align-items: center; }
.strata-avatar-group .strata-avatar {
  box-shadow: 0 0 0 2px var(--strata-surface-3);
  margin-left: -10px;
}
.strata-avatar-group .strata-avatar:first-child { margin-left: 0; }
.strata-avatar--more {
  background: var(--strata-surface-6);
  color: var(--strata-text-1);
  font-weight: 700;
}


/* ====================================================================
   TAG LIST (removable, quieter than a badge)  (06-data-display)
   ==================================================================== */
.strata-tags { display: flex; flex-wrap: wrap; gap: var(--strata-sp-2); }
.strata-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--strata-sp-1);
  padding: 4px 6px 4px 11px;
  border-radius: var(--strata-r-full);
  background: var(--strata-surface-2);
  border: var(--strata-border);
  color: var(--strata-text-1);
  font-size: var(--strata-text-sm);
  font-weight: 500;
  line-height: 1.3;
}
.strata-tag__dot {
  width: 7px; height: 7px; border-radius: var(--strata-r-full);
  background: var(--strata-action-grad);
}
.strata-tag__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border: 0;
  border-radius: var(--strata-r-full);
  background: transparent;
  color: var(--strata-text-3);
  cursor: pointer;
  font-size: var(--strata-text-base);
  transition: background var(--strata-t-fast), color var(--strata-t-fast);
}
.strata-tag__x:hover { background: var(--strata-red-grad); color: var(--strata-text-on-accent); }
.strata-tag__x:focus-visible {
  outline: var(--strata-focus-width) solid var(--strata-primary);
  outline-offset: 1px;
}


/* ====================================================================
   DEFINITION LIST  (06-data-display)
   ==================================================================== */
.strata-dl { margin: 0; display: flex; flex-direction: column; }
.strata-dl__row {
  display: grid;
  grid-template-columns: 40% 1fr;
  gap: var(--strata-sp-4);
  padding: var(--strata-sp-3) 0;
  border-bottom: 1px solid var(--strata-border-color);
  align-items: baseline;
}
.strata-dl__row:last-child { border-bottom: 0; }
.strata-dl__key { margin: 0; color: var(--strata-text-2); }
.strata-dl__val { margin: 0; color: var(--strata-text-1); font-weight: 500; font-variant-numeric: tabular-nums; }
.strata-dl__val .specimen-row { gap: var(--strata-sp-2); }


/* ====================================================================
   PROGRESS BAR (linear) + PROGRESS RING  (07-feedback-overlays)
   ==================================================================== */
.strata-progress { width: 100%; }
.strata-progress__track {
  position: relative;
  height: 10px;
  width: 100%;
  border-radius: var(--strata-r-full);
  background: var(--strata-surface-2);
  border: var(--strata-border);
  overflow: hidden;
}
.strata-progress__fill {
  height: 100%;
  border-radius: var(--strata-r-full);
  background: var(--strata-action-grad);
  transition: width var(--strata-t-base);
}
.strata-progress__row {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: var(--strata-sp-2); gap: var(--strata-sp-3);
}
.strata-progress__value { font-weight: 700; color: var(--strata-text-1); }
.strata-ring { display: inline-grid; place-items: center; position: relative; }
.strata-ring svg { transform: rotate(-90deg); display: block; }
.strata-ring__track { fill: none; stroke: var(--strata-surface-2); }
.strata-ring__bar {
  fill: none;
  stroke: url(#strata-ring-grad);
  stroke-linecap: round;
  transition: stroke-dashoffset var(--strata-t-base);
}
.strata-ring__label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--strata-font-body);
  font-weight: 700;
  font-size: var(--strata-text-xl);
  color: var(--strata-text-1);
}


/* ====================================================================
   ALERT / BANNER  (07-feedback-overlays)
   ==================================================================== */
.strata-alert {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: var(--strata-sp-3);
  padding: var(--strata-sp-4);
  border-radius: var(--strata-r-lg);
  border: var(--strata-border);
  background: var(--strata-surface-3);
  box-shadow: var(--strata-shadow-2);
}
.strata-alert__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  flex: none;
  border-radius: var(--strata-r-md);
  color: var(--strata-text-on-accent);
  font-size: 21px;
  box-shadow: var(--strata-shadow-1);
}
.strata-alert__title {
  font-family: var(--strata-font-body);
  font-weight: 700;
  font-size: var(--strata-text-base);
  line-height: 1.3;
  color: var(--strata-text-1);
}
.strata-alert__msg {
  margin-top: 2px;
  font-family: var(--strata-font-body);
  font-size: var(--strata-text-sm);
  line-height: 1.5;
  color: var(--strata-text-2);
}
.strata-alert__msg a { font-weight: 600; }
.strata-alert__close {
  flex: none;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--strata-r-sm);
  background: transparent; color: var(--strata-text-3);
  cursor: pointer; font-size: var(--strata-text-xl); line-height: 1;
  transition: background var(--strata-t-fast), color var(--strata-t-fast);
}
.strata-alert__close:hover { background: var(--strata-surface-2); color: var(--strata-text-1); }
.strata-alert__close:focus-visible {
  outline: var(--strata-focus-width) solid var(--strata-primary);
  outline-offset: var(--strata-focus-offset);
}
.strata-alert--info    { background:
  linear-gradient(0deg, var(--strata-blue-glow), var(--strata-blue-glow)), var(--strata-surface-3); }
.strata-alert--success { background:
  linear-gradient(0deg, var(--strata-green-glow), var(--strata-green-glow)), var(--strata-surface-3); }
.strata-alert--warning { background:
  linear-gradient(0deg, var(--strata-amber-glow), var(--strata-amber-glow)), var(--strata-surface-3); }
.strata-alert--danger  { background:
  linear-gradient(0deg, var(--strata-red-glow), var(--strata-red-glow)), var(--strata-surface-3); }
.strata-alert--info    .strata-alert__icon { background: var(--strata-blue-grad); }
.strata-alert--success .strata-alert__icon { background: var(--strata-green-grad); }
.strata-alert--warning .strata-alert__icon { background: var(--strata-amber-grad); }
.strata-alert--danger  .strata-alert__icon { background: var(--strata-red-grad); }


/* ====================================================================
   TOAST  (07-feedback-overlays; fired by Strata.toast)
   ==================================================================== */
.strata-toast-stack {
  position: fixed;
  right: var(--strata-sp-4);
  bottom: var(--strata-sp-4);
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: var(--strata-sp-3);
  width: min(380px, calc(100vw - var(--strata-sp-6)));
  pointer-events: none;
}
.strata-toast {
  position: relative;
  pointer-events: auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: var(--strata-sp-3);
  padding: var(--strata-sp-4) var(--strata-sp-4) calc(var(--strata-sp-4) + 4px);
  overflow: hidden;
  background: var(--strata-surface-3);
  border: var(--strata-border);
  border-radius: var(--strata-r-lg);
  box-shadow: var(--strata-shadow-5);
  transform: translateY(6px);
  opacity: 0;
  transition: transform var(--strata-t-base), opacity var(--strata-t-base);
}
.strata-toast[data-enter] { transform: translateY(0); opacity: 1; }
.strata-toast[data-leaving] { transform: translateY(6px); opacity: 0; }
.strata-toast__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: var(--strata-r-md);
  color: var(--strata-text-on-accent);
  font-size: 20px;
  box-shadow: var(--strata-shadow-1);
  background: var(--strata-blue-grad);
}
.strata-toast[data-type="success"] .strata-toast__icon { background: var(--strata-green-grad); }
.strata-toast[data-type="warning"] .strata-toast__icon { background: var(--strata-amber-grad); }
.strata-toast[data-type="error"]   .strata-toast__icon { background: var(--strata-red-grad); }
.strata-toast[data-type="info"]    .strata-toast__icon { background: var(--strata-blue-grad); }
.strata-toast__body { min-width: 0; }
.strata-toast__title {
  font-family: var(--strata-font-body);
  font-weight: 700;
  font-size: var(--strata-text-base);
  color: var(--strata-text-1);
  line-height: 1.3;
}
.strata-toast__msg {
  margin-top: 2px;
  font-family: var(--strata-font-body);
  font-size: var(--strata-text-sm);
  color: var(--strata-text-2);
  line-height: 1.45;
}
.strata-toast__close {
  flex: none;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0;
  border-radius: var(--strata-r-sm);
  background: transparent;
  color: var(--strata-text-3);
  cursor: pointer;
  font-size: var(--strata-text-xl);
  line-height: 1;
  transition: background var(--strata-t-fast), color var(--strata-t-fast);
}
.strata-toast__close:hover { background: var(--strata-surface-2); color: var(--strata-text-1); }
.strata-toast__close:focus-visible {
  outline: var(--strata-focus-width) solid var(--strata-primary);
  outline-offset: var(--strata-focus-offset);
}
.strata-toast__progress {
  position: absolute;
  left: 0; bottom: 0;
  height: 4px;
  width: 100%;
  background: var(--strata-blue);
  border-bottom-left-radius: var(--strata-r-lg);
}
.strata-toast[data-type="success"] .strata-toast__progress { background: var(--strata-green); }
.strata-toast[data-type="warning"] .strata-toast__progress { background: var(--strata-amber); }
.strata-toast[data-type="error"]   .strata-toast__progress { background: var(--strata-red); }


/* ====================================================================
   TOOLTIP  (07-feedback-overlays)
   ==================================================================== */
.strata-tooltip__bubble {
  max-width: 240px;
  padding: var(--strata-sp-2) var(--strata-sp-3);
  border-radius: var(--strata-r-md);
  font-family: var(--strata-font-body);
  font-size: var(--strata-text-sm);
  line-height: 1.4;
  color: var(--strata-text-1);
  pointer-events: none;
  z-index: 130;
}
.strata-tooltip__bubble[hidden] { display: none; }
.tip-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: var(--strata-r-full);
  border: 1px solid var(--strata-border-strong);
  background: var(--strata-surface-3);
  color: var(--strata-text-2);
  cursor: help;
  font-size: var(--strata-text-lg);
  transition: filter var(--strata-t-fast), border-color var(--strata-t-fast);
}
.tip-trigger:hover { filter: var(--strata-lift-hover); border-color: var(--strata-action); }
.tip-trigger:focus-visible {
  outline: var(--strata-focus-width) solid var(--strata-primary);
  outline-offset: var(--strata-focus-offset);
}


/* ====================================================================
   POPOVER  (07-feedback-overlays)
   ==================================================================== */
.strata-popover { position: relative; display: inline-flex; }
.strata-popover__panel {
  position: absolute;
  z-index: 110;
  min-width: 260px;
  max-width: 320px;
  padding: var(--strata-sp-4);
  border-radius: var(--strata-r-lg);
  top: calc(100% + var(--strata-sp-2));
  left: 0;
}
.strata-popover__panel[hidden] { display: none; }
.strata-popover__title { margin: 0 0 var(--strata-sp-1); }
.strata-popover__panel p { margin: 0; }
.strata-popover__foot { margin-top: var(--strata-sp-4); display: flex; justify-content: flex-end; gap: var(--strata-sp-2); }


/* ====================================================================
   DIALOG (modal)  (07-feedback-overlays)
   ==================================================================== */
.strata-dialog {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--strata-sp-5);
}
.strata-dialog[hidden] { display: none; }
.strata-dialog__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(var(--strata-primary-rgb), 0.46);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity var(--strata-t-base);
}
.strata-dialog[data-open] .strata-dialog__backdrop { opacity: 1; }
.strata-dialog__panel {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - var(--strata-sp-7));
  overflow: auto;
  border-radius: var(--strata-r-xl);
  padding: var(--strata-sp-6);
  transform: translateY(8px);
  opacity: 0;
  transition: transform var(--strata-t-base), opacity var(--strata-t-base);
}
.strata-dialog[data-open] .strata-dialog__panel { transform: translateY(0); opacity: 1; }
.strata-dialog__panel--wide { max-width: 560px; }
.strata-dialog__head {
  display: flex;
  align-items: flex-start;
  gap: var(--strata-sp-3);
  margin-bottom: var(--strata-sp-3);
}
.strata-dialog__head .strata-icon-box { width: 44px; height: 44px; font-size: 22px; }
.strata-dialog__titles { flex: 1 1 auto; min-width: 0; }
.strata-dialog__title { margin: 0; }
.strata-dialog__sub { margin: var(--strata-sp-1) 0 0; }
.strata-dialog__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--strata-border-strong);
  border-radius: var(--strata-r-md);
  background: var(--strata-surface-3);
  color: var(--strata-text-2);
  cursor: pointer;
  font-size: var(--strata-text-xl);
  line-height: 1;
  transition: filter var(--strata-t-fast), border-color var(--strata-t-fast), color var(--strata-t-fast);
}
.strata-dialog__close:hover { filter: var(--strata-lift-hover); border-color: var(--strata-action); color: var(--strata-text-1); }
.strata-dialog__close:focus-visible {
  outline: var(--strata-focus-width) solid var(--strata-primary);
  outline-offset: var(--strata-focus-offset);
}
.strata-dialog__body { margin-top: var(--strata-sp-2); }
.strata-dialog__field { margin-top: var(--strata-sp-4); }
.strata-dialog__field:first-child { margin-top: 0; }
.strata-dialog__foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--strata-sp-2);
  margin-top: var(--strata-sp-6);
}


/* ====================================================================
   THINKING INDICATOR (pulsing dots)  (07-feedback-overlays)
   ==================================================================== */
.strata-thinking {
  display: inline-flex;
  align-items: center;
  gap: var(--strata-sp-3);
  padding: var(--strata-sp-3) var(--strata-sp-4);
  border-radius: var(--strata-r-full);
  background: var(--strata-surface-2);
  border: var(--strata-border);
  color: var(--strata-text-2);
}
.strata-thinking__dots { display: inline-flex; gap: 5px; }
.strata-thinking__dots span {
  width: 7px; height: 7px;
  border-radius: var(--strata-r-full);
  background: var(--strata-action);
  animation: strata-think 1200ms ease-in-out infinite;
}
.strata-thinking__dots span:nth-child(2) { animation-delay: 160ms; }
.strata-thinking__dots span:nth-child(3) { animation-delay: 320ms; }
@keyframes strata-think {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-3px); }
}


/* ====================================================================
   SPINNER  (07-feedback-overlays = canonical base + size variants;
   the loading-button conic spinner from 02 is scoped to .is-loading so
   that the in-button spinner sits inline at 1em in the button's color.)
   ==================================================================== */
.strata-spinner {
  width: 30px; height: 30px;
  border-radius: var(--strata-r-full);
  border: 3px solid var(--strata-surface-2);
  border-top-color: var(--strata-action);
  animation: strata-spin 760ms linear infinite;
}
.strata-spinner--lg { width: 44px; height: 44px; border-width: 4px; }
.strata-spinner--sm { width: 20px; height: 20px; border-width: 2px; }
@keyframes strata-spin { to { transform: rotate(360deg); } }
/* Inside a loading button: the 1em conic ring that inherits currentColor. */
.is-loading .strata-spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 0;
  background:
    conic-gradient(from 0deg, currentColor 0deg, transparent 300deg);
  -webkit-mask: radial-gradient(circle 0.5em at center,
    transparent calc(0.5em - 2px), currentColor calc(0.5em - 2px));
          mask: radial-gradient(circle 0.5em at center,
    transparent calc(0.5em - 2px), currentColor calc(0.5em - 2px));
  animation: strata-spin 720ms linear infinite;
  flex: none;
}


/* ====================================================================
   SKELETON LOADER  (06-data-display)
   ==================================================================== */
.strata-skel {
  display: block;
  border-radius: var(--strata-r-sm);
  background: linear-gradient(100deg,
    var(--strata-surface-2) 30%,
    var(--strata-surface-6) 50%,
    var(--strata-surface-2) 70%);
  background-size: 220% 100%;
  animation: strata-skel-pan 1.4s ease-in-out infinite;
}
@keyframes strata-skel-pan {
  from { background-position: 180% 0; }
  to   { background-position: -20% 0; }
}
.strata-skel--text { height: 0.82rem; }
.strata-skel--title { height: 1.1rem; }
.strata-skel--line-90 { width: 90%; }
.strata-skel--line-70 { width: 70%; }
.strata-skel--line-50 { width: 50%; }
.strata-skel--avatar { width: 44px; height: 44px; border-radius: var(--strata-r-full); }
.strata-skel--block { height: 76px; border-radius: var(--strata-r-md); }


/* ====================================================================
   EMPTY STATE  (06-data-display)
   ==================================================================== */
.strata-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--strata-sp-3);
  padding: var(--strata-sp-7) var(--strata-sp-5);
}
.strata-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px;
  border-radius: var(--strata-r-xl);
  background: var(--strata-action-grad);
  color: var(--strata-text-on-accent);
  font-size: 32px;
  box-shadow: var(--strata-shadow-2);
}
.strata-empty__title { margin: var(--strata-sp-1) 0 0; }
.strata-empty__body { margin: 0; color: var(--strata-text-2); max-width: 42ch; }


/* ====================================================================
   TASK LIST + PRIORITY DOT  (08-task-lists)
   ==================================================================== */
.strata-tasklist {
  list-style: none;
  margin: 0;
  padding: var(--strata-sp-2);
  display: flex;
  flex-direction: column;
}
.strata-task {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--strata-sp-3);
  padding: var(--strata-sp-3) var(--strata-sp-3);
  border-radius: var(--strata-r-sm);
  color: var(--strata-text-1);
  transition: background var(--strata-t-fast), filter var(--strata-t-fast);
}
.strata-task:hover { filter: var(--strata-lift-hover); }
.strata-task[data-dragging] { opacity: 0.55; }
.strata-task[data-done] { background: var(--strata-primary-soft); }
.strata-task[data-done] + .strata-task[data-done] {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.strata-task[data-done]:has(+ .strata-task[data-done]) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.strata-task[data-done] .strata-task__title {
  text-decoration: line-through;
  color: var(--strata-text-3);
}
.strata-task__lead {
  display: inline-flex;
  align-items: center;
  gap: var(--strata-sp-3);
}
.strata-task__check {
  width: 20px;
  height: 20px;
  flex: none;
  accent-color: var(--strata-action);
  cursor: pointer;
}
.strata-task__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.strata-task__title {
  font-weight: 500;
  line-height: 1.4;
}
.strata-task__meta {
  display: flex;
  align-items: center;
  gap: var(--strata-sp-2);
  flex-wrap: wrap;
}
.strata-task__trailing {
  display: inline-flex;
  align-items: center;
  gap: var(--strata-sp-2);
}
.strata-task[hidden] { display: none; }
.priority-dot {
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: var(--strata-r-full);
  box-shadow: var(--strata-shadow-1);
}
.priority-dot--high { background: var(--strata-red); }
.priority-dot--med  { background: var(--strata-amber); }
.priority-dot--low  { background: var(--strata-green); }


/* ====================================================================
   KANBAN COLUMN + CARDS  (08-task-lists)
   ==================================================================== */
.strata-kanban {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--strata-sp-4);
  align-items: start;
}
.strata-kanban__col {
  display: flex;
  flex-direction: column;
  padding: var(--strata-sp-4);
}
.strata-kanban__colhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--strata-sp-2);
  margin-bottom: var(--strata-sp-3);
}
.strata-kanban__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 var(--strata-sp-2);
  border-radius: var(--strata-r-full);
  background: var(--strata-surface-2);
  border: var(--strata-border);
  font-size: var(--strata-text-xs);
  font-weight: 700;
  color: var(--strata-text-2);
  font-variant-numeric: tabular-nums;
}
.strata-kanban__cards {
  display: flex;
  flex-direction: column;
  gap: var(--strata-sp-3);
  min-height: 72px;
}
.strata-kanban__card {
  padding: var(--strata-sp-4);
  background: var(--strata-surface-3);
  border: var(--strata-border);
  border-radius: var(--strata-r-md);
  box-shadow: var(--strata-shadow-2);
  cursor: grab;
  color: var(--strata-text-1);
}
.strata-kanban__card:active { cursor: grabbing; }
.strata-kanban__card[data-dragging] { opacity: 0.55; box-shadow: var(--strata-shadow-5); }
.strata-kanban__card-title { font-weight: 600; margin-bottom: var(--strata-sp-2); }
.strata-kanban__card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--strata-sp-2);
  margin-top: var(--strata-sp-3);
}
/* "Add card" button: dashed full-width affordance at the column foot. */
.add-card {
  margin-top: var(--strata-sp-3);
  width: 100%;
  justify-content: center;
  border: 1px dashed var(--strata-border-strong);
  background: transparent;
  color: var(--strata-text-2);
}
.add-card:hover { background: var(--strata-primary-soft); }

/* ===== strata-foundation.css (imports stripped) ===== */
/* ====================================================================
   STRATA — CANONICAL FOUNDATION
   ====================================================================
   The single, shared foundation stylesheet for the Strata design
   system. Every Strata component, infographic, and showcase links
   THIS file and reads its tokens + primitives from here.

   Source of truth: the Life Goals companion app
   (goalsandprogress/product/companion-app/current.html) and the
   Glass UI v4 surface/shadow recipes (templates/glass-v4/).

   Verified against the app (2026-06-05):
     --strata-primary  #0066ff   (= app --lgp-c-primary)
     green  #10b981 · amber #f59e0b · cyan #00b4d8 · red #ef4444
     brand gradient #0066ff -> #3a8bff (= planning silo default)
     light page bg + dark page bg copied verbatim from the app.

   Linking contract (HTML <head>, in THIS order):
     1. DM Sans .......... Google Fonts <link>
     2. loretta-display .. Adobe Typekit <link> (kit xla1yek)
     3. Phosphor v2.0.3 .. unpkg <link> x3 (regular / fill / bold)
     4. strata-foundation.css  (this file)   +  strata.js (defer)

   This file @imports ONLY DM Sans. Typekit + Phosphor are <link>ed
   from HTML (an @import for Typekit/unpkg would race the cascade).

   Rules honored:
     - Light theme is the default; a full dark token set ships under
       [data-theme="dark"].
     - Zero hardcoded hex inside component rules — components reference
       custom properties only.
     - No decorative @keyframes. Motion is functional micro-transition
       only, and is fully disabled under prefers-reduced-motion and in
       infographic contexts.
     - Runs from file:// with no build step, bundler, or framework.

   SECTION INDEX
     1.  Font import (DM Sans)
     2.  :root light-theme tokens  +  [data-theme="dark"] overrides
     3.  Per-silo accent blocks  ([data-silo="..."])
     4.  Base / reset
     5.  Typography classes
     6.  Surface system (8 levels, states, glass / mesh / aura)
     7.  Spacing / gap / radius utilities
     8.  Core component primitives
           btn · badge · chip · card · input · divider · avatar · focus
     9.  Infographic helpers
           ig-canvas · ig-ref · infobox · icon-box
     10. prefers-reduced-motion kill switch
   ==================================================================== */


/* ====================================================================
   1. FONT IMPORT — DM Sans (body / UI)
   --------------------------------------------------------------------
   Display font (loretta-display) + Phosphor icons are <link>ed by the
   HTML head, NOT imported here. See the linking contract above.
   ==================================================================== */

/* Component layer — segmented, tabs, switch, slider, alerts, progress, menus,
   datepicker, tasklist, kanban, etc. Historically these lived only in the demo
   pages; pulling them in here makes the foundation self-sufficient (link this
   one file and every component styles). Must stay an @import (top of file). */



/* ====================================================================
   2. :root — LIGHT THEME TOKENS (default)
   ==================================================================== */
:root {

  /* ---- Brand accent ------------------------------------------------
     --strata-primary is THE UI accent: buttons, focus rings, active
     states, links, selection. --strata-action defaults to it and is
     swapped per-silo (Section 3). Components reference --strata-action
     for "the current accent" and --strata-primary only where the brand
     blue must hold regardless of silo (focus ring, selection). */
  --strata-primary:        #0066ff;
  --strata-primary-rgb:    0, 102, 255;
  --strata-primary-soft:   rgba(0, 102, 255, 0.16);
  --strata-primary-glass:  rgba(0, 102, 255, 0.10);
  --strata-primary-grad:   linear-gradient(135deg, #0066ff, #3a8bff);

  /* Current action accent (silo-swappable). Default = brand blue. */
  --strata-action:         var(--strata-primary);
  --strata-action-grad:    var(--strata-primary-grad);

  /* ---- Data / semantic palette -------------------------------------
     ONLY for charts, infographic categories, and status. Each family:
     base · light · grad (bold light->base) · glow-soft. Never pastel. */
  --strata-blue:           #0066ff;
  --strata-blue-light:     #3a8bff;
  --strata-blue-grad:      linear-gradient(135deg, #3a8bff, #0066ff);
  --strata-blue-glow:      rgba(0, 102, 255, 0.28);

  --strata-green:          #10b981;
  --strata-green-light:    #34d399;
  --strata-green-grad:     linear-gradient(135deg, #34d399, #10b981);
  --strata-green-glow:     rgba(16, 185, 129, 0.28);

  --strata-amber:          #f59e0b;
  --strata-amber-light:    #fbbf24;
  --strata-amber-grad:     linear-gradient(135deg, #fbbf24, #f59e0b);
  --strata-amber-glow:     rgba(245, 158, 11, 0.28);

  --strata-red:            #ef4444;
  --strata-red-light:      #f87171;
  --strata-red-grad:       linear-gradient(135deg, #f87171, #ef4444);
  --strata-red-glow:       rgba(239, 68, 68, 0.28);

  --strata-cyan:           #00b4d8;
  --strata-cyan-light:     #22d3ee;
  --strata-cyan-grad:      linear-gradient(135deg, #22d3ee, #00b4d8);
  --strata-cyan-glow:      rgba(0, 180, 216, 0.28);

  --strata-purple:         #8b5cf6;
  --strata-purple-light:   #a78bfa;
  --strata-purple-grad:    linear-gradient(135deg, #a78bfa, #8b5cf6);
  --strata-purple-glow:    rgba(139, 92, 246, 0.28);

  --strata-pink:           #ec4899;
  --strata-pink-light:     #f472b6;
  --strata-pink-grad:      linear-gradient(135deg, #f472b6, #ec4899);
  --strata-pink-glow:      rgba(236, 72, 153, 0.28);

  --strata-indigo:         #6366f1;
  --strata-indigo-light:   #818cf8;
  --strata-indigo-grad:    linear-gradient(135deg, #818cf8, #6366f1);
  --strata-indigo-glow:    rgba(99, 102, 241, 0.28);

  --strata-orange:         #f97316;
  --strata-orange-light:   #fb923c;
  --strata-orange-grad:    linear-gradient(135deg, #fb923c, #f97316);
  --strata-orange-glow:    rgba(249, 115, 22, 0.28);

  /* ---- Fonts -------------------------------------------------------
     Body / UI = DM Sans. Display / headings = loretta-display, rendered
     ITALIC, serif. Heading classes set font-style: italic themselves. */
  --strata-font-body:      'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --strata-font-display:   'loretta-display', Georgia, 'Times New Roman', serif;

  /* ---- Type scale (use classes, never inline font-size) ----------- */
  --strata-text-xs:        0.72rem;
  --strata-text-sm:        0.82rem;
  --strata-text-base:      0.92rem;
  --strata-text-lg:        1rem;
  --strata-text-xl:        1.15rem;
  --strata-text-2xl:       1.5rem;
  --strata-text-3xl:       clamp(1.8rem, 3.4vw, 2.6rem);
  --strata-text-4xl:       clamp(2.4rem, 5vw, 3.4rem);
  --strata-text-5xl:       clamp(3rem, 6vw, 4.4rem);

  /* ---- Text colours (light) --------------------------------------- */
  --strata-text-1:         #1a1a1f;
  --strata-text-2:         #4d4d57;
  --strata-text-3:         #5e5e6b;
  --strata-text-on-accent: #ffffff;

  /* ---- Page background (light) — verbatim from the app ------------ */
  --strata-bg:             #f4f4f6;
  --strata-bg-grad:        linear-gradient(160deg, #f6f6fa 0%, #f1f1f5 35%, #f6f5fb 100%);

  /* ---- Surface levels (light) ------------------------------------- */
  /* L1-L2 are translucent glass; L3+ flatten to solid white and let the
     layered shadow recipe carry all elevation. */
  --strata-surface-1:      rgba(255, 255, 255, 0.55);
  --strata-surface-2:      rgba(255, 255, 255, 0.80);
  --strata-surface-3:      #ffffff;
  --strata-surface-4:      #ffffff;
  --strata-surface-5:      #ffffff;
  --strata-surface-6:      #ffffff;
  --strata-surface-7:      #ffffff;
  --strata-surface-8:      #ffffff;

  /* Glass blur (L1-L2). */
  --strata-glass-blur:     10px;

  /* ---- Borders / hairlines (light) -------------------------------- */
  --strata-border:         1px solid rgba(15, 18, 40, 0.10);
  --strata-border-color:   rgba(15, 18, 40, 0.10);
  --strata-border-strong:  rgba(15, 18, 40, 0.12);
  --strata-glass-border:   rgba(255, 255, 255, 0.70);

  /* ---- Layered shadow recipes per level (1-8) --------------------- */
  /* Reused from Glass v4 (L1-L7) and extended one step to L8. */
  --strata-shadow-1: 0 1px 2px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.08);
  --strata-shadow-2: 0 2px 4px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.08), 0 4px 8px rgba(0,0,0,.04);
  --strata-shadow-3: 0 4px 6px rgba(0,0,0,.05), 0 2px 4px rgba(0,0,0,.08), 0 8px 16px rgba(0,0,0,.05);
  --strata-shadow-4: 0 6px 10px rgba(0,0,0,.06), 0 3px 6px rgba(0,0,0,.09), 0 12px 24px rgba(0,0,0,.06);
  --strata-shadow-5: 0 8px 16px rgba(0,0,0,.08), 0 4px 8px rgba(0,0,0,.10), 0 20px 40px rgba(0,0,0,.08);
  --strata-shadow-6: 0 10px 20px rgba(0,0,0,.09), 0 6px 12px rgba(0,0,0,.11), 0 26px 52px rgba(0,0,0,.09);
  --strata-shadow-7: 0 12px 24px rgba(0,0,0,.10), 0 8px 16px rgba(0,0,0,.12), 0 32px 64px rgba(0,0,0,.10);
  --strata-shadow-8: 0 14px 28px rgba(0,0,0,.11), 0 10px 20px rgba(0,0,0,.14), 0 40px 80px rgba(0,0,0,.11);

  /* ---- State lift amounts ----------------------------------------- */
  /* Hover lifts +6%, selected +10%, via brightness in light mode. */
  --strata-lift-hover:     brightness(1.06);
  --strata-lift-selected:  brightness(1.10);

  /* ---- Spacing (4 / 8 grid) --------------------------------------- */
  --strata-sp-1:           4px;
  --strata-sp-2:           8px;
  --strata-sp-3:           12px;
  --strata-sp-4:           16px;
  --strata-sp-5:           24px;
  --strata-sp-6:           32px;
  --strata-sp-7:           48px;
  --strata-sp-8:           64px;

  /* ---- Radius ------------------------------------------------------ */
  /* Harmonized nesting: child radius = parent radius - parent padding. */
  --strata-r-sm:           10px;
  --strata-r-md:           14px;
  --strata-r-lg:           18px;
  --strata-r-xl:           24px;
  --strata-r-2xl:          28px;
  --strata-r-full:         9999px;

  /* ---- Squircle (icon boxes, icon buttons, rails) ----------------- */
  /* The signature shape is a TRUE iOS-style superellipse, rendered with
     clip-path: url(#strata-squircle) — a hidden SVG injected once by
     strata.js. It renders in every browser (incl. Safari + Firefox) and
     from file://, unlike CSS corner-shape (Chrome/Edge only). This radius
     is ONLY the pre-JS / no-JS graceful fallback (a plain rounded square). */
  --strata-squircle-fallback: 30%;

  /* ---- Motion (functional micro-transitions only) ----------------- */
  --strata-t-fast:         160ms cubic-bezier(.4, 0, .2, 1);
  --strata-t-base:         240ms cubic-bezier(.4, 0, .2, 1);

  /* ---- Focus ring -------------------------------------------------- */
  /* Always brand blue, regardless of silo. */
  --strata-focus-ring:     0 0 0 2px var(--strata-bg), 0 0 0 4px var(--strata-primary);
  --strata-focus-width:    2px;
  --strata-focus-offset:   2px;

  /* ---- Infographic canvas ----------------------------------------- */
  --strata-ig-bg:          #f4f4f6;
  --strata-ig-width:       800px;
}


/* ====================================================================
   2b. [data-theme="dark"] — DARK THEME OVERRIDES
   --------------------------------------------------------------------
   Dark keeps ADDING white-opacity steps plus the layered shadow recipe
   (#171717 -> #414141 style progression, extended to 8 levels). Page
   background copied verbatim from the app.
   ==================================================================== */
[data-theme="dark"] {

  /* Brand accent unchanged in hue; soft/glass tints lifted for dark. */
  --strata-primary-soft:   rgba(0, 102, 255, 0.24);
  --strata-primary-glass:  rgba(0, 102, 255, 0.16);

  /* Text colours (dark). */
  --strata-text-1:         #f3f3f7;
  --strata-text-2:         #b9b9c4;
  --strata-text-3:         #7d7d8a;

  /* Page background (dark) — verbatim from the app. */
  --strata-bg:             #161620;
  --strata-bg-grad:        linear-gradient(160deg, #15141d 0%, #0f0f17 50%, #16101e 100%);

  /* Surface levels (dark): #1a1a22 -> #525267, 8 explicit steps. */
  --strata-surface-1:      #1a1a22;
  --strata-surface-2:      #22222c;
  --strata-surface-3:      #2a2a36;
  --strata-surface-4:      #32323f;
  --strata-surface-5:      #3a3a49;
  --strata-surface-6:      #424253;
  --strata-surface-7:      #4a4a5d;
  --strata-surface-8:      #525267;

  /* Borders (dark). */
  --strata-border:         1px solid rgba(255, 255, 255, 0.10);
  --strata-border-color:   rgba(255, 255, 255, 0.10);
  --strata-border-strong:  rgba(255, 255, 255, 0.18);
  --strata-glass-border:   rgba(255, 255, 255, 0.12);

  /* Layered shadows (dark) — deeper opacities so depth still reads on a
     near-black substrate. Same 3-layer structure as light, L1-L8. */
  --strata-shadow-1: 0 1px 2px rgba(0,0,0,.30), 0 1px 3px rgba(0,0,0,.36);
  --strata-shadow-2: 0 2px 4px rgba(0,0,0,.32), 0 1px 3px rgba(0,0,0,.36), 0 4px 8px rgba(0,0,0,.28);
  --strata-shadow-3: 0 4px 6px rgba(0,0,0,.34), 0 2px 4px rgba(0,0,0,.38), 0 8px 16px rgba(0,0,0,.32);
  --strata-shadow-4: 0 6px 10px rgba(0,0,0,.36), 0 3px 6px rgba(0,0,0,.40), 0 12px 24px rgba(0,0,0,.34);
  --strata-shadow-5: 0 8px 16px rgba(0,0,0,.40), 0 4px 8px rgba(0,0,0,.44), 0 20px 40px rgba(0,0,0,.38);
  --strata-shadow-6: 0 10px 20px rgba(0,0,0,.42), 0 6px 12px rgba(0,0,0,.46), 0 26px 52px rgba(0,0,0,.40);
  --strata-shadow-7: 0 12px 24px rgba(0,0,0,.44), 0 8px 16px rgba(0,0,0,.48), 0 32px 64px rgba(0,0,0,.42);
  --strata-shadow-8: 0 14px 28px rgba(0,0,0,.48), 0 10px 20px rgba(0,0,0,.52), 0 40px 80px rgba(0,0,0,.46);

  /* State lift: dark lifts via brightness slightly more (+10% hover). */
  --strata-lift-hover:     brightness(1.10);
  --strata-lift-selected:  brightness(1.16);

  /* Glass border / blur for dark glass surfaces. */
  --strata-glass-blur:     12px;

  /* Focus ring: inner halo matches the dark substrate. */
  --strata-focus-ring:     0 0 0 2px var(--strata-bg), 0 0 0 4px var(--strata-primary);

  /* Infographic canvas stays light-on-purpose by default; dark IG
     contexts opt in by setting --strata-ig-bg locally if needed. */
}


/* ====================================================================
   3. PER-SILO ACCENT BLOCKS
   --------------------------------------------------------------------
   The REAL silos of goalsandprogress.com — verified against the live
   silo structure (SEO master index: "Silos (Tier 1) | 5") + the article
   folder tree: planning, growth, productivity, well-being, work-life,
   plus the tools utility silo. (Earlier builds invented relationships /
   mindfulness / finance — those are NOT silos and were removed.)
   Each [data-silo] swaps --strata-action + --strata-action-grad; the
   brand --strata-primary (#0066ff, focus ring + selection) is NOT
   swapped, so #0066ff stays the default/no-silo accent. Palette
   Ramon-confirmed 2026-06-06: planning = brand blue, the other five are
   distinct non-clashing hues; gradient end = oklch-lightened base.
   ==================================================================== */
[data-silo="planning"] {
  /* Ramon-locked 2026-06-06: planning = the brand blue (matches --strata-primary
     + the companion-app brand gradient). The other 5 silos are distinct hues. */
  --strata-action:      #0066ff;
  --strata-action-grad: linear-gradient(135deg, #0066ff, #3a8bff);
}
[data-silo="growth"] {
  --strata-action:      #16a34a;
  --strata-action-grad: linear-gradient(135deg, #16a34a, oklch(from #16a34a calc(l + .10) c h));
}
[data-silo="productivity"] {
  --strata-action:      #d97706;
  --strata-action-grad: linear-gradient(135deg, #d97706, oklch(from #d97706 calc(l + .10) c h));
}
[data-silo="well-being"] {
  --strata-action:      #8b5cf6;
  --strata-action-grad: linear-gradient(135deg, #8b5cf6, oklch(from #8b5cf6 calc(l + .10) c h));
}
[data-silo="work-life"] {
  --strata-action:      #0d9488;
  --strata-action-grad: linear-gradient(135deg, #0d9488, oklch(from #0d9488 calc(l + .10) c h));
}
[data-silo="tools"] {
  --strata-action:      #64748b;
  --strata-action-grad: linear-gradient(135deg, #64748b, oklch(from #64748b calc(l + .10) c h));
}


/* ====================================================================
   4. BASE / RESET
   ==================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--strata-font-body);
  font-size: var(--strata-text-base);
  line-height: 1.55;
  color: var(--strata-text-1);
  background-color: var(--strata-bg);
  background-image: var(--strata-bg-grad);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Links use the current action accent. */
a {
  color: var(--strata-action);
  text-decoration: none;
  transition: color var(--strata-t-fast);
}
a:hover {
  text-decoration: underline;
}

/* Selection uses the brand primary regardless of silo. */
::selection {
  background: var(--strata-primary-soft);
  color: var(--strata-text-1);
}

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

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}


/* ====================================================================
   5. TYPOGRAPHY CLASSES
   --------------------------------------------------------------------
   Use these classes; never inline font-size. Headings render in the
   display font, ITALIC. Headline weight/size is always >= body.
   ==================================================================== */
.strata-display {
  font-family: var(--strata-font-display);
  font-style: italic;
  font-weight: 600;
  font-size: var(--strata-text-5xl);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--strata-text-1);
}

.strata-h1 {
  font-family: var(--strata-font-display);
  font-style: italic;
  font-weight: 600;
  font-size: var(--strata-text-3xl);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--strata-text-1);
}

.strata-h2 {
  font-family: var(--strata-font-display);
  font-style: italic;
  font-weight: 600;
  font-size: var(--strata-text-2xl);
  line-height: 1.18;
  color: var(--strata-text-1);
}

/* h3 / h4 step down into the body font at heavy weight (still >= body). */
.strata-h3 {
  font-family: var(--strata-font-body);
  font-weight: 700;
  font-size: var(--strata-text-xl);
  line-height: 1.3;
  color: var(--strata-text-1);
}

.strata-h4 {
  font-family: var(--strata-font-body);
  font-weight: 700;
  font-size: var(--strata-text-lg);
  line-height: 1.35;
  color: var(--strata-text-1);
}

.strata-body {
  font-family: var(--strata-font-body);
  font-weight: 400;
  font-size: var(--strata-text-base);
  line-height: 1.55;
  color: var(--strata-text-1);
}

.strata-body-sm {
  font-family: var(--strata-font-body);
  font-weight: 400;
  font-size: var(--strata-text-sm);
  line-height: 1.5;
  color: var(--strata-text-2);
}

.strata-caption {
  font-family: var(--strata-font-body);
  font-weight: 400;
  font-size: var(--strata-text-xs);
  line-height: 1.45;
  color: var(--strata-text-2);
}

.strata-eyebrow {
  font-family: var(--strata-font-body);
  font-weight: 600;
  font-size: var(--strata-text-xs);
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--strata-text-2);
}


/* ====================================================================
   6. SURFACE SYSTEM (context-aware, 8 levels)
   --------------------------------------------------------------------
   Every surface carries data-level. [data-level="1".."8"] sets the
   background + shadow + border for that level, in light AND dark. The
   JS resolver (strata.js) auto-assigns level = parent surface level + 1,
   and overlays (dialog / popover / dropdown / tooltip) = trigger
   substrate + 2 so they always read as lifted.
   ==================================================================== */
.strata-surface {
  position: relative;
  background: var(--strata-surface-3);
  border: var(--strata-border);
  border-radius: var(--strata-r-lg);
  color: var(--strata-text-1);
  transition: box-shadow var(--strata-t-base), filter var(--strata-t-fast);
}

/* L1 — glass: translucent + backdrop blur, glass hairline. */
.strata-surface[data-level="1"] {
  background: var(--strata-surface-1);
  border-color: var(--strata-glass-border);
  box-shadow: var(--strata-shadow-1);
  -webkit-backdrop-filter: blur(var(--strata-glass-blur));
          backdrop-filter: blur(var(--strata-glass-blur));
}

/* L2 — stronger glass. */
.strata-surface[data-level="2"] {
  background: var(--strata-surface-2);
  border-color: var(--strata-glass-border);
  box-shadow: var(--strata-shadow-2);
  -webkit-backdrop-filter: blur(var(--strata-glass-blur));
          backdrop-filter: blur(var(--strata-glass-blur));
}

/* L3-L8 — solid (white in light, stepped white-opacity in dark);
   elevation carried by the layered shadow recipe. */
.strata-surface[data-level="3"] {
  background: var(--strata-surface-3);
  box-shadow: var(--strata-shadow-3);
}
.strata-surface[data-level="4"] {
  background: var(--strata-surface-4);
  box-shadow: var(--strata-shadow-4);
}
.strata-surface[data-level="5"] {
  background: var(--strata-surface-5);
  box-shadow: var(--strata-shadow-5);
}
.strata-surface[data-level="6"] {
  background: var(--strata-surface-6);
  box-shadow: var(--strata-shadow-6);
}
.strata-surface[data-level="7"] {
  background: var(--strata-surface-7);
  box-shadow: var(--strata-shadow-7);
}
.strata-surface[data-level="8"] {
  background: var(--strata-surface-8);
  box-shadow: var(--strata-shadow-8);
}

/* ---- Interaction state helpers ----------------------------------- */
/* Hover = +6% lift. Apply .strata-surface--interactive (or the resolver
   can add it) for hover affordance on clickable surfaces. */
.strata-surface--interactive {
  cursor: pointer;
}
.strata-surface--interactive:hover {
  filter: var(--strata-lift-hover);
}

/* Selected = +10% lift + inset ring (NEVER a colored side-border). */
.strata-surface.is-selected,
.strata-surface[aria-selected="true"],
.strata-surface[data-selected="true"] {
  filter: var(--strata-lift-selected);
  box-shadow: var(--strata-shadow-3), inset 0 0 0 2px var(--strata-action);
}

/* ---- Inset ring selection helper (standalone) -------------------- */
/* The canonical Strata selection treatment: inset 2px accent ring. */
.strata-inset-ring {
  box-shadow: inset 0 0 0 2px var(--strata-action);
}
.strata-inset-ring--primary {
  box-shadow: inset 0 0 0 2px var(--strata-primary);
}

/* ---- Glass helper (standalone, not tied to a data-level) --------- */
.strata-glass {
  background: var(--strata-surface-1);
  border: 1px solid var(--strata-glass-border);
  -webkit-backdrop-filter: blur(var(--strata-glass-blur));
          backdrop-filter: blur(var(--strata-glass-blur));
}

/* ---- Mesh helper -------------------------------------------------- */
/* Directional wash that re-tints with the active accent + palette. Static
   (no drift) so it is safe in infographic contexts. The base layer is the
   palette mesh (--strata-mesh, set by [data-strata-palette]); with no palette
   it falls back to the calm app field. The blooms follow --strata-action, so
   the wash tracks the silo OR palette accent (was a fixed brand blue). */
.strata-mesh {
  background-image:
    radial-gradient(120% 120% at 12% 8%, color-mix(in srgb, var(--strata-action) 14%, transparent), transparent 55%),
    radial-gradient(120% 120% at 88% 92%, color-mix(in srgb, var(--strata-action) 22%, transparent), transparent 55%),
    var(--strata-mesh, var(--strata-bg-grad));
}

/* ---- Aura helper -------------------------------------------------- */
/* Soft radial glow inside a positioned container. Purely decorative
   emphasis kept very low-opacity; disabled cost is just opacity. */
.strata-aura {
  position: relative;
}
.strata-aura::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(900px 600px at 30% 30%,
    var(--strata-primary-glass), transparent 60%);
  pointer-events: none;
  z-index: 0;
}


/* ====================================================================
   7. SPACING / GAP / RADIUS UTILITIES
   ==================================================================== */

/* ---- Flex/grid gap utilities ------------------------------------- */
.strata-gap-sm { gap: 16px; }
.strata-gap-md { gap: 20px; }
.strata-gap-lg { gap: 28px; }

/* Generic stack/row helpers (optional convenience). */
.strata-stack { display: flex; flex-direction: column; }
.strata-row   { display: flex; flex-direction: row; align-items: center; }

/* ---- Radius utilities -------------------------------------------- */
.strata-r-sm   { border-radius: var(--strata-r-sm); }
.strata-r-md   { border-radius: var(--strata-r-md); }
.strata-r-lg   { border-radius: var(--strata-r-lg); }
.strata-r-xl   { border-radius: var(--strata-r-xl); }
.strata-r-2xl  { border-radius: var(--strata-r-2xl); }
.strata-r-full { border-radius: var(--strata-r-full); }


/* ====================================================================
   8. CORE COMPONENT PRIMITIVES
   ==================================================================== */

/* --------------------------------------------------------------------
   8.1 BUTTON  .strata-btn
   --------------------------------------------------------------------
   OKLCH-derived from --strata-action (the app's button contract).
   Variants: --primary / --secondary / --ghost / --danger.
   Sizes:    --xs / --sm / --md (default) / --lg / --xl + icon button.
   -------------------------------------------------------------------- */
.strata-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--strata-sp-2);
  padding: 10px 18px;
  font-family: var(--strata-font-body);
  font-size: var(--strata-text-base);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--strata-r-full);   /* pill — matches the companion app */
  cursor: pointer;
  user-select: none;
  background: var(--btn-fill, transparent);
  color: var(--strata-text-1);
  transition: filter var(--strata-t-fast),
              transform var(--strata-t-fast),
              box-shadow var(--strata-t-fast),
              background var(--strata-t-fast),
              border-color var(--strata-t-fast);
}
/* Shared micro-interactions (companion-app feel): lift on hover, press on active. */
.strata-btn:hover { transform: translateY(-1px); }
.strata-btn:active { transform: translateY(0) scale(0.97); }
.strata-btn:disabled,
.strata-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

/* Primary — the action gradient under a glass sheen, with a layered shadow
   stack (color glow + contact + inset white top-rim + inset dark base) and a
   white hairline border — mirrors the companion app .lgp-btn--primary.
   --btn-fill stays the CLEAN gradient so .strata-btn--icon paints it on its
   clipped squircle ::before while the button itself keeps its focus ring. */
.strata-btn--primary {
  --btn-fill: linear-gradient(
    oklch(from var(--strata-action) clamp(.46, l, .62) calc(c * 1.22) h),
    oklch(from var(--strata-action) clamp(.36, calc(l - .10), .50) calc(c * 1.15) h)
  );
  background:
    linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.06) 38%, transparent 58%, rgba(255,255,255,0.04) 100%),
    var(--btn-fill);
  color: var(--strata-text-on-accent);
  border: 1px solid rgba(255,255,255,0.24);
  text-shadow: 0 1px 2px rgba(0,0,0,0.22);
  box-shadow:
    0 6px 18px oklch(from var(--strata-action) .48 calc(c * 1.20) h / .48),
    0 1px 2px rgba(0,0,0,0.10),
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -1px 0 rgba(0,0,0,0.14);
}
.strata-btn--primary:hover { filter: var(--strata-lift-hover); }
.strata-btn--primary:active { filter: brightness(0.96); }

/* Secondary — soft tinted fill with a quiet glass rim (inset white top line). */
.strata-btn--secondary {
  --btn-fill: oklch(from var(--strata-action) .95 calc(c * .4) h);
  background: var(--btn-fill);
  color: oklch(from var(--strata-action) .32 c h);
  border-color: oklch(from var(--strata-action) .88 calc(c * .5) h);
  box-shadow: 0 2px 6px rgba(180,180,200,0.18), inset 0 1px 0 rgba(255,255,255,0.7);
}
.strata-btn--secondary:hover {
  --btn-fill: oklch(from var(--strata-action) .92 calc(c * .5) h);
}

/* Ghost — minimal weight, transparent until hover; no shadow (stays flat). */
.strata-btn--ghost {
  --btn-fill: transparent;
  background: var(--btn-fill);
  color: oklch(from var(--strata-action) .42 c h);
}
.strata-btn--ghost:hover {
  --btn-fill: oklch(from var(--strata-action) .92 calc(c * .5) h);
}

/* Danger — semantic red, same glass treatment as primary. */
.strata-btn--danger {
  --btn-fill: linear-gradient(
    oklch(from var(--strata-red) clamp(.46, l, .62) calc(c * 1.18) h),
    oklch(from var(--strata-red) clamp(.36, calc(l - .10), .50) calc(c * 1.12) h)
  );
  background:
    linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.06) 38%, transparent 58%, rgba(255,255,255,0.04) 100%),
    var(--btn-fill);
  color: var(--strata-text-on-accent);
  border: 1px solid rgba(255,255,255,0.24);
  text-shadow: 0 1px 2px rgba(0,0,0,0.22);
  box-shadow:
    0 6px 18px oklch(from var(--strata-red) .50 calc(c * 1.15) h / .42),
    0 1px 2px rgba(0,0,0,0.10),
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -1px 0 rgba(0,0,0,0.14);
}
.strata-btn--danger:hover { filter: var(--strata-lift-hover); }

/* Dark-theme parity for the tinted variants (companion app darkens secondary +
   ghost in dark so they read as "supporting" on a dark field instead of staying
   light). --btn-fill is overridden so icon buttons inherit it too; the white
   glass rim is toned down for dark. */
[data-theme="dark"] .strata-btn--secondary {
  --btn-fill: oklch(from var(--strata-action) .24 calc(c * .5) h);
  color: oklch(from var(--strata-action) .86 calc(c * .7) h);
  border-color: oklch(from var(--strata-action) .32 calc(c * .6) h);
  box-shadow: 0 2px 6px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.10);
}
[data-theme="dark"] .strata-btn--secondary:hover {
  --btn-fill: oklch(from var(--strata-action) .30 calc(c * .6) h);
}
[data-theme="dark"] .strata-btn--ghost { color: oklch(from var(--strata-action) .80 c h); }
[data-theme="dark"] .strata-btn--ghost:hover {
  --btn-fill: oklch(from var(--strata-action) .26 calc(c * .5) h);
  color: oklch(from var(--strata-action) .85 c h);
}

/* ---- Button sizes ------------------------------------------------ */
.strata-btn--xs {
  padding: 5px 10px;
  font-size: var(--strata-text-xs);
  gap: var(--strata-sp-1);
}
.strata-btn--sm {
  padding: 7px 14px;
  font-size: var(--strata-text-sm);
}
.strata-btn--md {
  padding: 10px 18px;
  font-size: var(--strata-text-base);
}
.strata-btn--lg {
  padding: 13px 24px;
  font-size: var(--strata-text-lg);
}
.strata-btn--xl {
  padding: 16px 30px;
  font-size: var(--strata-text-xl);
}

/* ---- Icon-only button -------------------------------------------- */
.strata-btn--icon {
  padding: 0;
  width: 40px;
  height: 40px;
  /* True squircle WITHOUT losing the focus outline. The host stays UNCLIPPED
     (so :focus-visible can draw its ring); the variant fill is painted onto a
     clipped ::before via the shared squircle-surface rules in §9.4. We
     neutralize the host's own paint (bg / shadow / border) so only the clipped
     squircle shows; the icon glyph + focus outline ride on the host.
     border-radius below is just the focus-ring shape. */
  border-radius: var(--strata-squircle-fallback);
  background: transparent;
  box-shadow: none;
  border-color: transparent;
  --ibx-grad: var(--btn-fill, transparent);   /* fill from the button variant */
  --ibx-accent: var(--strata-action);          /* ring + halo tint */
}
.strata-btn--icon.strata-btn--xs { width: 28px; height: 28px; }
.strata-btn--icon.strata-btn--sm { width: 34px; height: 34px; }
.strata-btn--icon.strata-btn--lg { width: 48px; height: 48px; }
.strata-btn--icon.strata-btn--xl { width: 56px; height: 56px; }
/* Danger icon buttons tint their ring/halo red to match the fill (others keep
   the silo action accent). */
.strata-btn--danger.strata-btn--icon { --ibx-accent: var(--strata-red); }


/* --------------------------------------------------------------------
   8.2 BADGE  .strata-badge
   --------------------------------------------------------------------
   SOLID gradient fill (never washed-out). Color variants map to the
   data palette. Modifiers: --dot (leading dot), --outline (keeps a
   filled body but adds a ring — outline-but-still-filled).
   -------------------------------------------------------------------- */
.strata-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--strata-sp-1);
  padding: 3px 10px;
  font-family: var(--strata-font-body);
  font-size: var(--strata-text-xs);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.01em;
  border-radius: var(--strata-r-full);
  color: var(--strata-text-on-accent);
  background: var(--strata-action-grad);
  white-space: nowrap;
}

/* Color variants — SOLID bold gradients from the data palette. */
.strata-badge--blue   { background: var(--strata-blue-grad); }
.strata-badge--green  { background: var(--strata-green-grad); }
.strata-badge--amber  { background: var(--strata-amber-grad); }
.strata-badge--red    { background: var(--strata-red-grad); }
.strata-badge--cyan   { background: var(--strata-cyan-grad); }
.strata-badge--purple { background: var(--strata-purple-grad); }
.strata-badge--pink   { background: var(--strata-pink-grad); }
.strata-badge--indigo { background: var(--strata-indigo-grad); }
.strata-badge--orange { background: var(--strata-orange-grad); }

/* Leading status dot. */
.strata-badge--dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--strata-r-full);
  background: currentColor;
  opacity: 0.85;
}

/* Outline-but-still-filled: keeps a filled body, adds a contrast ring
   so the badge still reads as solid (Strata never ships hollow badges). */
.strata-badge--outline {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}


/* --------------------------------------------------------------------
   8.3 CHIP  .strata-chip
   --------------------------------------------------------------------
   Quieter than a badge: surface-tinted token used for filters / tags.
   Selected state uses the inset ring, never a side-border.
   -------------------------------------------------------------------- */
.strata-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--strata-sp-2);
  padding: 6px 12px;
  font-family: var(--strata-font-body);
  font-size: var(--strata-text-sm);
  font-weight: 500;
  line-height: 1.3;
  border-radius: var(--strata-r-full);
  background: var(--strata-surface-2);
  border: var(--strata-border);
  color: var(--strata-text-1);
  cursor: pointer;
  transition: filter var(--strata-t-fast), box-shadow var(--strata-t-fast);
}
.strata-chip:hover {
  filter: var(--strata-lift-hover);
}
.strata-chip.is-selected,
.strata-chip[aria-pressed="true"] {
  background: var(--strata-primary-soft);
  color: oklch(from var(--strata-action) .38 c h);
  box-shadow: inset 0 0 0 2px var(--strata-action);
}


/* --------------------------------------------------------------------
   8.4 CARD  .strata-card
   --------------------------------------------------------------------
   A surface preset: L3 white + shadow + harmonized radius + padding.
   Pair with data-level to re-home it in the elevation system.
   -------------------------------------------------------------------- */
.strata-card {
  background: var(--strata-surface-3);
  border: var(--strata-border);
  border-radius: var(--strata-r-xl);
  box-shadow: var(--strata-shadow-3);
  padding: var(--strata-sp-5);
  color: var(--strata-text-1);
  transition: box-shadow var(--strata-t-base), filter var(--strata-t-fast);
}
.strata-card--interactive {
  cursor: pointer;
}
.strata-card--interactive:hover {
  filter: var(--strata-lift-hover);
  box-shadow: var(--strata-shadow-4);
}
.strata-card.is-selected {
  box-shadow: var(--strata-shadow-4), inset 0 0 0 2px var(--strata-action);
}


/* --------------------------------------------------------------------
   8.5 INPUT  .strata-input
   --------------------------------------------------------------------
   Text inputs, textareas, selects. Focus shows the brand ring.
   -------------------------------------------------------------------- */
.strata-input {
  display: block;
  width: 100%;
  padding: 10px 14px;
  font-family: var(--strata-font-body);
  font-size: var(--strata-text-base);
  line-height: 1.4;
  color: var(--strata-text-1);
  background: var(--strata-surface-3);
  border: 1px solid var(--strata-border-strong);
  border-radius: var(--strata-r-md);
  transition: border-color var(--strata-t-fast), box-shadow var(--strata-t-fast);
}
.strata-input::placeholder {
  color: var(--strata-text-3);
}
.strata-input:hover {
  border-color: var(--strata-action);
}
.strata-input:focus,
.strata-input:focus-visible {
  outline: none;
  border-color: var(--strata-primary);
  box-shadow: 0 0 0 3px var(--strata-primary-soft);
}
.strata-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
textarea.strata-input {
  min-height: 96px;
  resize: vertical;
  line-height: 1.5;
}


/* --------------------------------------------------------------------
   8.6 DIVIDER  .strata-divider
   -------------------------------------------------------------------- */
.strata-divider {
  border: 0;
  height: 1px;
  width: 100%;
  background: var(--strata-border-color);
  margin: var(--strata-sp-4) 0;
}
.strata-divider--vertical {
  height: auto;
  width: 1px;
  align-self: stretch;
  margin: 0 var(--strata-sp-4);
}


/* --------------------------------------------------------------------
   8.7 AVATAR  .strata-avatar
   -------------------------------------------------------------------- */
.strata-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--strata-r-full);
  overflow: hidden;
  flex: none;
  font-family: var(--strata-font-body);
  font-weight: 600;
  font-size: var(--strata-text-sm);
  color: var(--strata-text-on-accent);
  background: var(--strata-action-grad);
  box-shadow: var(--strata-shadow-1);
}
.strata-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.strata-avatar--sm { width: 28px; height: 28px; font-size: var(--strata-text-xs); }
.strata-avatar--lg { width: 56px; height: 56px; font-size: var(--strata-text-lg); }
.strata-avatar--xl { width: 72px; height: 72px; font-size: var(--strata-text-xl); }


/* --------------------------------------------------------------------
   8.8 FOCUS-VISIBLE RING (global)
   --------------------------------------------------------------------
   Keyboard focus on any interactive Strata element shows the brand
   2px ring with a 2px offset gap. Mouse focus stays quiet.
   -------------------------------------------------------------------- */
.strata-btn:focus-visible,
.strata-chip:focus-visible,
.strata-card:focus-visible,
.strata-surface:focus-visible,
.strata-badge:focus-visible,
.strata-avatar:focus-visible {
  outline: var(--strata-focus-width) solid var(--strata-primary);
  outline-offset: var(--strata-focus-offset);
}


/* ====================================================================
   9. INFOGRAPHIC HELPERS
   --------------------------------------------------------------------
   Static-render targets (PNG export): NO transitions live here, and
   the reduced-motion / infographic kill switch (Section 10) strips any
   inherited ones. 800px fixed canvas on the IG background.
   ==================================================================== */

/* ---- 9.1 Canvas .strata-ig-canvas -------------------------------- */
/* Fixed 800px content frame, centered, on the flat IG background. */
.strata-ig-canvas {
  width: var(--strata-ig-width);
  max-width: 100%;
  margin-inline: auto;
  padding: var(--strata-sp-6);
  background: var(--strata-ig-bg);
  color: var(--strata-text-1);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--strata-font-body);
}
.strata-ig-canvas * {
  /* Infographics never animate. */
  transition: none !important;
  animation: none !important;
}

/* ---- 9.2 Reference line .strata-ig-ref --------------------------- */
/* Small, secondary, visible source/reference line below charts. */
.strata-ig-ref {
  display: block;
  margin-top: var(--strata-sp-3);
  font-family: var(--strata-font-body);
  font-size: var(--strata-text-xs);
  font-weight: 400;
  line-height: 1.4;
  color: var(--strata-text-2);
  text-align: center;
}
.strata-ig-ref::before {
  /* Visible reference rule above the caption. */
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  margin: 0 auto var(--strata-sp-2);
  border-radius: var(--strata-r-full);
  background: var(--strata-border-strong);
}

/* ---- 9.3 Infobox .strata-infobox --------------------------------- */
/* Callout block with a gradient badge header (rounded top corners) and
   a subtle watermark glyph. Body is a solid surface. */
.strata-infobox {
  position: relative;
  width: 100%;
  background: var(--strata-surface-3);
  border: var(--strata-border);
  border-radius: var(--strata-r-lg);
  box-shadow: var(--strata-shadow-2);
  overflow: hidden;
}

/* Badge header — gradient bar, rounded top corners (inherits radius). */
.strata-infobox__header {
  display: flex;
  align-items: center;
  gap: var(--strata-sp-2);
  padding: var(--strata-sp-3) var(--strata-sp-4);
  background: var(--strata-action-grad);
  color: var(--strata-text-on-accent);
  font-family: var(--strata-font-body);
  font-weight: 700;
  font-size: var(--strata-text-base);
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.strata-infobox__body {
  position: relative;
  z-index: 1;
  padding: var(--strata-sp-4);
  color: var(--strata-text-1);
}

/* Watermark — large faint glyph in the bottom-right of the body. Set
   the glyph via the data-watermark content or drop a Phosphor <i>. */
.strata-infobox__watermark {
  position: absolute;
  right: var(--strata-sp-3);
  bottom: var(--strata-sp-2);
  font-size: 96px;
  line-height: 1;
  color: var(--strata-action);
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}

/* ---- 9.4 Squircle surface (.strata-icon-box, .strata-btn--icon) --- */
/* The signature Strata shape: a TRUE iOS-style superellipse, cross-browser.
   The visible squircle is a clipped ::before (fill) + an optional clipped
   ::after (ring), both via clip-path: url(#strata-squircle) — a hidden SVG
   injected once by strata.js. clip-path against an in-document SVG renders in
   EVERY browser (Chrome, Safari, Firefox) and from file://, unlike CSS
   corner-shape (Chrome/Edge only).

   The HOST is deliberately NOT clipped, so an interactive host keeps its
   :focus-visible outline (clip-path would cut the outline away). Effects ride
   on filter, which DOES follow the clip: drop shadow + halo compose through
   --ibx-shadow + --ibx-glow; the ring is the larger ::after layer. Drive the
   fill with --ibx-grad and the ring/halo tint with --ibx-accent. One surface
   powers the decorative .strata-icon-box chip, the interactive
   .strata-btn--icon (fed the button variant's fill), and the standalone
   .strata-sq-surface utility (used by e.g. the demo nav rails). Pre-/no-JS
   the fill degrades to a rounded square. */
.strata-icon-box,
.strata-btn--icon,
.strata-sq-surface {
  --ibx-shadow: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.20)); /* base elevation; --raised overrides */
  --ibx-glow:   drop-shadow(0 0 0 transparent);            /* no-op default; --halo sets a glow */
  position: relative;
  isolation: isolate;
}
.strata-icon-box::before,
.strata-btn--icon::before,
.strata-sq-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--strata-squircle-fallback);          /* pre-/no-JS fallback */
  background: var(--ibx-grad);
  -webkit-clip-path: url(#strata-squircle);
  clip-path: url(#strata-squircle);
  filter: var(--ibx-shadow) var(--ibx-glow);
}
/* Ring border: a larger squircle layer behind the fill, in the accent. */
.strata-icon-box--ring::after,
.strata-btn--icon.strata-btn--ring::after,
.strata-sq-surface--ring::after {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: -2;
  border-radius: var(--strata-squircle-fallback);
  background: var(--ibx-accent);
  -webkit-clip-path: url(#strata-squircle);
  clip-path: url(#strata-squircle);
}
/* Opt-in effects — compose freely (each swaps one filter slot; ring is its
   own layer), on icon boxes AND icon buttons:
   class="strata-icon-box strata-icon-box--blue strata-icon-box--halo"  or
   class="strata-btn strata-btn--secondary strata-btn--icon strata-btn--halo". */
.strata-icon-box--raised,
.strata-btn--icon.strata-btn--raised,
.strata-sq-surface--raised { --ibx-shadow: drop-shadow(0 6px 14px rgba(15, 23, 42, 0.30)); }
.strata-icon-box--halo,
.strata-btn--icon.strata-btn--halo,
.strata-sq-surface--halo   { --ibx-glow: drop-shadow(0 0 11px color-mix(in srgb, var(--ibx-accent) 60%, transparent)); }

/* Decorative chip specifics: 48px, action gradient fill, white icon. */
.strata-icon-box {
  --ibx-grad:   var(--strata-action-grad);   /* fill (per color variant) */
  --ibx-accent: var(--strata-action);        /* ring + halo tint (per variant) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: none;
  background: transparent;
  color: var(--strata-text-on-accent);
  font-size: 24px;
}
/* Standalone surface utility default fill (consumers set --ibx-grad per state). */
.strata-sq-surface { --ibx-grad: transparent; --ibx-accent: var(--strata-action); }
/* Reusable squircle utility for a STATIC square container — direct clip (no
   effect layers), rounded-square fallback pre-/no-JS. */
.strata-squircle {
  border-radius: var(--strata-squircle-fallback);
  -webkit-clip-path: url(#strata-squircle);
  clip-path: url(#strata-squircle);
}
/* Semantic color variants: fill gradient + matching ring/halo tint. */
.strata-icon-box--blue   { --ibx-grad: var(--strata-blue-grad);   --ibx-accent: var(--strata-blue); }
.strata-icon-box--green  { --ibx-grad: var(--strata-green-grad);  --ibx-accent: var(--strata-green); }
.strata-icon-box--amber  { --ibx-grad: var(--strata-amber-grad);  --ibx-accent: var(--strata-amber); }
.strata-icon-box--red    { --ibx-grad: var(--strata-red-grad);    --ibx-accent: var(--strata-red); }
.strata-icon-box--cyan   { --ibx-grad: var(--strata-cyan-grad);   --ibx-accent: var(--strata-cyan); }
.strata-icon-box--purple { --ibx-grad: var(--strata-purple-grad); --ibx-accent: var(--strata-purple); }
.strata-icon-box--pink   { --ibx-grad: var(--strata-pink-grad);   --ibx-accent: var(--strata-pink); }
.strata-icon-box--indigo { --ibx-grad: var(--strata-indigo-grad); --ibx-accent: var(--strata-indigo); }
.strata-icon-box--orange { --ibx-grad: var(--strata-orange-grad); --ibx-accent: var(--strata-orange); }


/* ====================================================================
   10. REDUCED MOTION — KILL SWITCH
   --------------------------------------------------------------------
   Strata has no decorative @keyframes, but this strips every functional
   transition/animation when the user asks for reduced motion. Infographic
   contexts are already transition-free (Section 9).
   ==================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* ===== strata-palettes.css ===== */
/* Strata palettes — ported from the companion app (src/css/50-palettes.css) via
   _tools/gen_palettes.py. 26 palettes × light/dark. OPT-IN: link AFTER
   strata-foundation.css (so a palette accent OVERRIDES the silo accent — Ramon-locked
   2026-06-06). Set data-strata-palette="<slug>" on the root. Drives --strata-mesh (the
   mesh wash, shown THROUGH the translucent glass surfaces) + --strata-action (accent). */

/* When a palette is active, nested [data-silo] sections defer to the palette accent.
   [data-strata-palette] [data-silo] (specificity 0,2,0) beats the [data-silo] block
   (0,1,0); `inherit` makes the silo element take the palette accent from its ancestor
   chain instead of its own hue. This is what makes "palette replaces silo accent" hold
   at EVERY nesting depth, not just when both sit on the same root element. */
[data-strata-palette] [data-silo] {
  --strata-action: inherit;
  --strata-action-grad: inherit;
}

/* Classic Glass */
[data-strata-palette="classic-glass"] {
  --strata-mesh: linear-gradient(in oklch 160deg, #FFFFFF 0%, #F8F8FC 30%, #ECECF2 60%, #DCDCE4 100%);
  --strata-action: #00B4D8;
  --strata-action-grad: linear-gradient(135deg, #3B82F6, #0044AA);
}
[data-strata-palette="classic-glass"][data-theme="dark"] {
  --strata-mesh: linear-gradient(in oklch 160deg, #2A2A34 0%, #20202A 40%, #18181F 75%, #0F0F15 100%);
  --strata-action: #00B4D8;
  --strata-action-grad: linear-gradient(135deg, #6EA9FF, #3B82F6);
}

/* Brushed Steel */
[data-strata-palette="brushed-steel"] {
  --strata-mesh: linear-gradient(in oklch 160deg, #FBFAF6 0%, #E5E5EB 30%, #B8B8C0 55%, #6B6B75 80%, #2C2C34 100%);
  --strata-action: #B8B8C0;
  --strata-action-grad: linear-gradient(135deg, #4A4A56, #2C2C34);
}
[data-strata-palette="brushed-steel"][data-theme="dark"] {
  --strata-mesh: linear-gradient(in oklch 160deg, #FBFAF6 0%, #E5E5EB 30%, #B8B8C0 55%, #6B6B75 80%, #2C2C34 100%);
  --strata-action: #B8B8C0;
  --strata-action-grad: linear-gradient(135deg, #B8B8C0, #6B6B75);
}

/* Atlas Dusk */
[data-strata-palette="atlas-dusk"] {
  --strata-mesh: linear-gradient(in oklch 160deg, #DFC6AA 0%, #C1967C 25%, #9EB0AA 55%, #24547D 85%, #112244 100%);
  --strata-action: #C1967C;
  --strata-action-grad: linear-gradient(135deg, #24547D, #112244);
}
[data-strata-palette="atlas-dusk"][data-theme="dark"] {
  --strata-mesh: linear-gradient(in oklch 160deg, #DFC6AA 0%, #C1967C 25%, #9EB0AA 55%, #24547D 85%, #112244 100%);
  --strata-action: #DFC6AA;
  --strata-action-grad: linear-gradient(135deg, #DFC6AA, #C1967C);
}

/* Captain */
[data-strata-palette="captain-mirage"] {
  --strata-mesh: linear-gradient(in oklch 160deg, #FF5B04 0%, #075056 55%, #16232A 100%);
  --strata-action: #FF5B04;
  --strata-action-grad: linear-gradient(135deg, #FF5B04, #C84500);
}
[data-strata-palette="captain-mirage"][data-theme="dark"] {
  --strata-mesh: linear-gradient(in oklch 160deg, #FF5B04 0%, #075056 55%, #16232A 100%);
  --strata-action: #FF5B04;
  --strata-action-grad: linear-gradient(135deg, #FF5B04, #C84500);
}

/* Carroburg Twilight */
[data-strata-palette="carroburg-twilight"] {
  --strata-mesh: linear-gradient(in oklch 160deg, #A7D4D9 0%, #AAAAFF 25%, #F4BFFF 50%, #A82A70 80%, #2B0F2E 100%);
  --strata-action: #F4BFFF;
  --strata-action-grad: linear-gradient(135deg, #A82A70, #2B0F2E);
}
[data-strata-palette="carroburg-twilight"][data-theme="dark"] {
  --strata-mesh: linear-gradient(in oklch 160deg, #A7D4D9 0%, #AAAAFF 25%, #F4BFFF 50%, #A82A70 80%, #2B0F2E 100%);
  --strata-action: #F4BFFF;
  --strata-action-grad: linear-gradient(135deg, #F4BFFF, #A82A70);
}

/* Electric Orchid */
[data-strata-palette="electric-orchid"] {
  --strata-mesh: linear-gradient(in oklch 160deg, #87F5F5 0%, #F042FF 35%, #7226FF 65%, #160078 100%);
  --strata-action: #87F5F5;
  --strata-action-grad: linear-gradient(135deg, #7226FF, #160078);
}
[data-strata-palette="electric-orchid"][data-theme="dark"] {
  --strata-mesh: linear-gradient(in oklch 160deg, #87F5F5 0%, #F042FF 35%, #7226FF 65%, #160078 100%);
  --strata-action: #87F5F5;
  --strata-action-grad: linear-gradient(135deg, #87F5F5, #F042FF);
}

/* Enchanted Plum */
[data-strata-palette="enchanted-plum"] {
  --strata-mesh: linear-gradient(in oklch 160deg, #EDB9BD 0%, #AA4488 30%, #602A77 60%, #211640 85%, #0C0C1F 100%);
  --strata-action: #AA4488;
  --strata-action-grad: linear-gradient(135deg, #602A77, #211640);
}
[data-strata-palette="enchanted-plum"][data-theme="dark"] {
  --strata-mesh: linear-gradient(in oklch 160deg, #EDB9BD 0%, #AA4488 30%, #602A77 60%, #211640 85%, #0C0C1F 100%);
  --strata-action: #EDB9BD;
  --strata-action-grad: linear-gradient(135deg, #EDB9BD, #AA4488);
}

/* English Daydream */
[data-strata-palette="english-daydream"] {
  --strata-mesh: linear-gradient(in oklch 160deg, #FFCA46 0%, #BADBED 32%, #581A57 70%, #06012C 100%);
  --strata-action: #FFCA46;
  --strata-action-grad: linear-gradient(135deg, #581A57, #06012C);
}
[data-strata-palette="english-daydream"][data-theme="dark"] {
  --strata-mesh: linear-gradient(in oklch 160deg, #FFCA46 0%, #BADBED 32%, #581A57 70%, #06012C 100%);
  --strata-action: #FFCA46;
  --strata-action-grad: linear-gradient(135deg, #FFCA46, #BADBED);
}

/* Forge Smoke */
[data-strata-palette="forge-smoke"] {
  --strata-mesh: linear-gradient(in oklch 160deg, #FF4E20 0%, #B83312 30%, #414E58 65%, #1F282E 100%);
  --strata-action: #FF4E20;
  --strata-action-grad: linear-gradient(135deg, #FF4E20, #B83312);
}
[data-strata-palette="forge-smoke"][data-theme="dark"] {
  --strata-mesh: linear-gradient(in oklch 160deg, #FF4E20 0%, #B83312 30%, #414E58 65%, #1F282E 100%);
  --strata-action: #FF4E20;
  --strata-action-grad: linear-gradient(135deg, #FF4E20, #B83312);
}

/* Highland Mist */
[data-strata-palette="highland-mist"] {
  --strata-mesh: linear-gradient(in oklch 160deg, #EAABBC 0%, #7AB2D4 45%, #60569A 75%, #195353 100%);
  --strata-action: #EAABBC;
  --strata-action-grad: linear-gradient(135deg, #60569A, #195353);
}
[data-strata-palette="highland-mist"][data-theme="dark"] {
  --strata-mesh: linear-gradient(in oklch 160deg, #EAABBC 0%, #7AB2D4 45%, #60569A 75%, #195353 100%);
  --strata-action: #EAABBC;
  --strata-action-grad: linear-gradient(135deg, #EAABBC, #7AB2D4);
}

/* Iris Twilight */
[data-strata-palette="iris-twilight"] {
  --strata-mesh: linear-gradient(in oklch 160deg, #D7D0E1 0%, #F77FBE 35%, #4B61D1 70%, #220088 100%);
  --strata-action: #F77FBE;
  --strata-action-grad: linear-gradient(135deg, #65318E, #220088);
}
[data-strata-palette="iris-twilight"][data-theme="dark"] {
  --strata-mesh: linear-gradient(in oklch 160deg, #D7D0E1 0%, #F77FBE 35%, #4B61D1 70%, #220088 100%);
  --strata-action: #F77FBE;
  --strata-action-grad: linear-gradient(135deg, #F77FBE, #4B61D1);
}

/* Library Velvet */
[data-strata-palette="library-velvet"] {
  --strata-mesh: linear-gradient(in oklch 160deg, #F3CA6C 0%, #3973C0 50%, #66033C 100%);
  --strata-action: #F3CA6C;
  --strata-action-grad: linear-gradient(135deg, #66033C, #3F0125);
}
[data-strata-palette="library-velvet"][data-theme="dark"] {
  --strata-mesh: linear-gradient(in oklch 160deg, #F3CA6C 0%, #3973C0 50%, #66033C 100%);
  --strata-action: #F3CA6C;
  --strata-action-grad: linear-gradient(135deg, #F3CA6C, #B89B89);
}

/* Marsh Heron */
[data-strata-palette="marsh-heron"] {
  --strata-mesh: linear-gradient(in oklch 160deg, #FBEC5D 0%, #6DD1BB 35%, #008292 60%, #5E3958 85%, #234537 100%);
  --strata-action: #FBEC5D;
  --strata-action-grad: linear-gradient(135deg, #008292, #234537);
}
[data-strata-palette="marsh-heron"][data-theme="dark"] {
  --strata-mesh: linear-gradient(in oklch 160deg, #FBEC5D 0%, #6DD1BB 35%, #008292 60%, #5E3958 85%, #234537 100%);
  --strata-action: #FBEC5D;
  --strata-action-grad: linear-gradient(135deg, #FBEC5D, #6DD1BB);
}

/* Nebula Twist */
[data-strata-palette="nebula-twist"] {
  --strata-mesh: linear-gradient(in oklch 160deg, #C6D624 0%, #E56CC0 35%, #472E97 70%, #281367 100%);
  --strata-action: #E56CC0;
  --strata-action-grad: linear-gradient(135deg, #E56CC0, #472E97);
}
[data-strata-palette="nebula-twist"][data-theme="dark"] {
  --strata-mesh: linear-gradient(in oklch 160deg, #C6D624 0%, #E56CC0 35%, #472E97 70%, #281367 100%);
  --strata-action: #C6D624;
  --strata-action-grad: linear-gradient(135deg, #E56CC0, #C6D624);
}

/* Neon Meadow */
[data-strata-palette="neon-meadow"] {
  --strata-mesh: linear-gradient(in oklch 160deg, #D8F878 0%, #E47CB8 40%, #9448B0 75%, #332277 100%);
  --strata-action: #D8F878;
  --strata-action-grad: linear-gradient(135deg, #9448B0, #332277);
}
[data-strata-palette="neon-meadow"][data-theme="dark"] {
  --strata-mesh: linear-gradient(in oklch 160deg, #D8F878 0%, #E47CB8 40%, #9448B0 75%, #332277 100%);
  --strata-action: #D8F878;
  --strata-action-grad: linear-gradient(135deg, #D8F878, #E47CB8);
}

/* Orbital Persia */
[data-strata-palette="orbital-persia"] {
  --strata-mesh: linear-gradient(in oklch 160deg, #F77FBE 0%, #4B61D1 35%, #65318E 70%, #220088 100%);
  --strata-action: #F77FBE;
  --strata-action-grad: linear-gradient(135deg, #4B61D1, #220088);
}
[data-strata-palette="orbital-persia"][data-theme="dark"] {
  --strata-mesh: linear-gradient(in oklch 160deg, #F77FBE 0%, #4B61D1 35%, #65318E 70%, #220088 100%);
  --strata-action: #F77FBE;
  --strata-action-grad: linear-gradient(135deg, #F77FBE, #4B61D1);
}

/* Orchard Vespers */
[data-strata-palette="orchard-vespers"] {
  --strata-mesh: linear-gradient(in oklch 160deg, #EFCF98 0%, #BDDFB2 30%, #AFDDCC 50%, #653475 85%, #251B19 100%);
  --strata-action: #EFCF98;
  --strata-action-grad: linear-gradient(135deg, #653475, #251B19);
}
[data-strata-palette="orchard-vespers"][data-theme="dark"] {
  --strata-mesh: linear-gradient(in oklch 160deg, #EFCF98 0%, #BDDFB2 30%, #AFDDCC 50%, #653475 85%, #251B19 100%);
  --strata-action: #EFCF98;
  --strata-action-grad: linear-gradient(135deg, #EFCF98, #BDDFB2);
}

/* Polar Honey */
[data-strata-palette="polar-honey"] {
  --strata-mesh: linear-gradient(in oklch 160deg, #C0D6EA 0%, #EED484 30%, #B4A6D5 60%, #00416A 90%, #011C39 100%);
  --strata-action: #EED484;
  --strata-action-grad: linear-gradient(135deg, #00416A, #011C39);
}
[data-strata-palette="polar-honey"][data-theme="dark"] {
  --strata-mesh: linear-gradient(in oklch 160deg, #C0D6EA 0%, #EED484 30%, #B4A6D5 60%, #00416A 90%, #011C39 100%);
  --strata-action: #EED484;
  --strata-action-grad: linear-gradient(135deg, #EED484, #B4A6D5);
}

/* Reef Diving */
[data-strata-palette="reef-diving"] {
  --strata-mesh: linear-gradient(in oklch 160deg, #F8C0BA 0%, #E94E6D 40%, #327A88 70%, #0F084B 100%);
  --strata-action: #F8C0BA;
  --strata-action-grad: linear-gradient(135deg, #E94E6D, #0F084B);
}
[data-strata-palette="reef-diving"][data-theme="dark"] {
  --strata-mesh: linear-gradient(in oklch 160deg, #F8C0BA 0%, #E94E6D 40%, #327A88 70%, #0F084B 100%);
  --strata-action: #F8C0BA;
  --strata-action-grad: linear-gradient(135deg, #F8C0BA, #E94E6D);
}

/* Riverside Persimmon */
[data-strata-palette="riverside-persimmon"] {
  --strata-mesh: linear-gradient(in oklch 160deg, #B6DBBF 0%, #E1583F 55%, #A91F29 85%, #422329 100%);
  --strata-action: #B6DBBF;
  --strata-action-grad: linear-gradient(135deg, #E1583F, #A91F29);
}
[data-strata-palette="riverside-persimmon"][data-theme="dark"] {
  --strata-mesh: linear-gradient(in oklch 160deg, #B6DBBF 0%, #E1583F 55%, #A91F29 85%, #422329 100%);
  --strata-action: #B6DBBF;
  --strata-action-grad: linear-gradient(135deg, #B6DBBF, #E1583F);
}

/* Sakura Twilight */
[data-strata-palette="sakura-twilight"] {
  --strata-mesh: linear-gradient(in oklch 160deg, #EAABBC 0%, #60569A 40%, #7AB2D4 70%, #195353 100%);
  --strata-action: #EAABBC;
  --strata-action-grad: linear-gradient(135deg, #60569A, #195353);
}
[data-strata-palette="sakura-twilight"][data-theme="dark"] {
  --strata-mesh: linear-gradient(in oklch 160deg, #EAABBC 0%, #7AB2D4 35%, #60569A 65%, #195353 90%, #252525 100%);
  --strata-action: #EAABBC;
  --strata-action-grad: linear-gradient(135deg, #EAABBC, #60569A);
}

/* Souk Night */
[data-strata-palette="souk-night"] {
  --strata-mesh: linear-gradient(in oklch 160deg, #EEAA11 0%, #BB3381 40%, #4FB3B3 65%, #3F1D50 90%, #16141C 100%);
  --strata-action: #EEAA11;
  --strata-action-grad: linear-gradient(135deg, #BB3381, #3F1D50);
}
[data-strata-palette="souk-night"][data-theme="dark"] {
  --strata-mesh: linear-gradient(in oklch 160deg, #EEAA11 0%, #BB3381 40%, #4FB3B3 65%, #3F1D50 90%, #16141C 100%);
  --strata-action: #EEAA11;
  --strata-action-grad: linear-gradient(135deg, #EEAA11, #BB3381);
}

/* Stardust Atoll */
[data-strata-palette="stardust-atoll"] {
  --strata-mesh: linear-gradient(in oklch 160deg, #A0E5D9 0%, #09CDCD 30%, #81459E 65%, #002D72 100%);
  --strata-action: #09CDCD;
  --strata-action-grad: linear-gradient(135deg, #573894, #002D72);
}
[data-strata-palette="stardust-atoll"][data-theme="dark"] {
  --strata-mesh: linear-gradient(in oklch 160deg, #A0E5D9 0%, #09CDCD 30%, #81459E 65%, #002D72 100%);
  --strata-action: #09CDCD;
  --strata-action-grad: linear-gradient(135deg, #09CDCD, #81459E);
}

/* Sunkissed Saltflats */
[data-strata-palette="sunkissed-saltflats"] {
  --strata-mesh: linear-gradient(in oklch 160deg, #FFFB08 0%, #AED0C9 45%, #1B6F81 80%, #09324A 100%);
  --strata-action: #FFFB08;
  --strata-action-grad: linear-gradient(135deg, #1B6F81, #09324A);
}
[data-strata-palette="sunkissed-saltflats"][data-theme="dark"] {
  --strata-mesh: linear-gradient(in oklch 160deg, #FFFB08 0%, #AED0C9 45%, #1B6F81 80%, #09324A 100%);
  --strata-action: #FFFB08;
  --strata-action-grad: linear-gradient(135deg, #AED0C9, #1B6F81);
}

/* Vespers Tide */
[data-strata-palette="vespers-tide"] {
  --strata-mesh: linear-gradient(in oklch 160deg, #FEDE8F 0%, #FEA993 30%, #7366BD 60%, #1C6B69 90%, #01343A 100%);
  --strata-action: #7366BD;
  --strata-action-grad: linear-gradient(135deg, #1C6B69, #01343A);
}
[data-strata-palette="vespers-tide"][data-theme="dark"] {
  --strata-mesh: linear-gradient(in oklch 160deg, #FEDE8F 0%, #FEA993 30%, #7366BD 60%, #1C6B69 90%, #01343A 100%);
  --strata-action: #FEA993;
  --strata-action-grad: linear-gradient(135deg, #FEDE8F, #FEA993);
}

/* Wharfside Embers */
[data-strata-palette="wharfside-embers"] {
  --strata-mesh: linear-gradient(in oklch 160deg, #FBA765 0%, #E6474A 40%, #66023C 75%, #102C33 100%);
  --strata-action: #FBA765;
  --strata-action-grad: linear-gradient(135deg, #E6474A, #66023C);
}
[data-strata-palette="wharfside-embers"][data-theme="dark"] {
  --strata-mesh: linear-gradient(in oklch 160deg, #FBA765 0%, #E6474A 40%, #66023C 75%, #102C33 100%);
  --strata-action: #FBA765;
  --strata-action-grad: linear-gradient(135deg, #FBA765, #E6474A);
}

/* ===== shared.css ===== */
/* ============================================================================
   shared.css — Life Goals App landing pages, shared partial
   ============================================================================
   Layered ON TOP of the Strata design system. It only consumes Strata tokens
   (var(--strata-*)) and never redefines the system. Link AFTER
   strata-foundation.css (which @imports strata-components.css) and, optionally,
   strata-palettes.css. Provides the reusable scaffold + components the four
   landing pages (A / B / C / D) share, plus the visual styling for the
   app-surface simulation rendered by app-sim.js.

   Hard rules honored throughout:
     - box-sizing: border-box globally (also set by Strata; re-asserted here).
     - No horizontal overflow at any width: grids use
       repeat(N, minmax(0, 1fr)); grid AND flex children get min-width: 0;
       text wraps (overflow-wrap: anywhere where needed); images/svg max-width:100%.
     - Equal-height, identical-internal-structure bento cards (flex column +
       stretch + reserved title rows), so siblings read as one designed set.
     - prefers-reduced-motion: all motion disabled (Strata kills transitions;
       here we also freeze the sim fan to the poster frame).
     - American spelling, no em-dashes in any class names or content hooks.

   SECTION INDEX
     1.  Reset reinforcement + page scaffold
     2.  Hero (split) + mesh/glass treatment
     3.  Commitment chips (honest, scannable)
     4.  Bento grid + equal-height cards + expand pattern
     5.  Email-capture block (homepage .gp-pill look)
     6.  CTA rows
     7.  "For you / not for you" two-column lists
     8.  FAQ accordion
     9.  Reserved (hidden) social-proof strip
     10. Footer
     11. App-surface simulation (app-sim.js output)  .lgpsim-*
     12. Responsive + reduced-motion + reduced-transparency
   ============================================================================ */


/* ====================================================================
   1. RESET REINFORCEMENT + PAGE SCAFFOLD
   ==================================================================== */
*, *::before, *::after { box-sizing: border-box; }

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

/* Page width container: keeps everything inside the viewport, centered. */
.lp-wrap {
  width: 100%;
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);
}

/* Vertical rhythm between major sections. */
.lp-section { padding-block: clamp(48px, 8vw, 96px); }
.lp-section--tight { padding-block: clamp(32px, 5vw, 56px); }

/* A section heading cluster (eyebrow + display title + lede). */
.lp-sectionhead { max-width: 46rem; margin-bottom: clamp(24px, 4vw, 40px); }
.lp-sectionhead--center { margin-inline: auto; text-align: center; }
.lp-sectionhead .lp-eyebrow { margin-bottom: var(--strata-sp-2); }
.lp-sectionhead h2 { margin: 0 0 var(--strata-sp-3); }
.lp-sectionhead p { margin: 0; color: var(--strata-text-2); }

/* Eyebrow pill (small, calm, accent-tinted). */
.lp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--strata-sp-2);
  padding: 5px 12px;
  border-radius: var(--strata-r-full);
  background: var(--strata-primary-soft);
  color: oklch(from var(--strata-action) .42 c h);
  font-family: var(--strata-font-body);
  font-size: var(--strata-text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lp-eyebrow i { font-size: 1em; }

/* Skip link for keyboard users. */
.lp-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
}
.lp-skip:focus {
  left: var(--strata-sp-4);
  top: var(--strata-sp-4);
  padding: 10px 16px;
  background: var(--strata-surface-3);
  border-radius: var(--strata-r-md);
  box-shadow: var(--strata-shadow-4);
}


/* ====================================================================
   2. HERO (split) + MESH / GLASS TREATMENT
   --------------------------------------------------------------------
   Copy + CTA on the left, the app-sim on the right (research: split hero,
   sim beside copy, never full-bleed). The mesh wash + soft white overlays
   give the glassy gradient lighting; a scrim keeps hero text >= 4.5:1.
   ==================================================================== */
.lp-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(40px, 7vw, 88px);
}

/* Ambient mesh lighting behind the hero (re-tints with --strata-action).
   Decorative only; it sits behind a content layer that carries the scrim. */
.lp-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    radial-gradient(60% 70% at 12% 4%, color-mix(in srgb, var(--strata-action) 16%, transparent), transparent 60%),
    radial-gradient(55% 60% at 92% 96%, color-mix(in srgb, var(--strata-action) 18%, transparent), transparent 60%),
    var(--strata-mesh, var(--strata-bg-grad));
  pointer-events: none;
}
/* Soft white overlay (the homepage hero's semi-transparent wash). */
.lp-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(255,255,255,0.55), transparent 70%);
  pointer-events: none;
}
[data-theme="dark"] .lp-hero__bg::after {
  background: radial-gradient(80% 60% at 50% 0%, rgba(20,20,30,0.45), transparent 70%);
}

.lp-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}

/* Hero copy column. */
.lp-hero__copy { min-width: 0; }
.lp-hero__copy h1 { margin: 0 0 var(--strata-sp-4); }
.lp-hero__sub {
  margin: 0 0 var(--strata-sp-5);
  font-size: var(--strata-text-xl);
  line-height: 1.5;
  color: var(--strata-text-2);
  max-width: 34rem;
}
.lp-hero__riskline {
  margin-top: var(--strata-sp-4);
  font-size: var(--strata-text-sm);
  color: var(--strata-text-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--strata-sp-2);
}
.lp-hero__riskline i { color: oklch(from var(--strata-action) .48 c h); }

/* Hero sim column: reserve the box with an aspect-ratio so the sim can never
   cause CLS, and so it paints a stable poster immediately. */
.lp-hero__sim { min-width: 0; }
/* Pre-JS / pre-mount reservation: the hero sim container holds the stage's
   final 5/6 box BEFORE JS adds .lgpsim-stage, so lazy-mounting causes zero
   layout shift. Once the real stage (or any mounted card) is present, it owns
   the height and we release the placeholder reservation. */
.lp-hero__sim > [data-lgp-sim="hero"]:not([data-lgp-sim-done]) {
  display: block;
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
  aspect-ratio: 5 / 6;
}
.lp-hero__sim > [data-lgp-sim="hero"][data-lgp-sim-done] { aspect-ratio: auto; }


/* ====================================================================
   3. COMMITMENT CHIPS (honest, scannable, reasonably high)
   ==================================================================== */
.lp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--strata-sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--strata-sp-2);
  min-width: 0;
  padding: 7px 14px;
  border-radius: var(--strata-r-full);
  background: var(--strata-surface-2);
  border: var(--strata-border);
  box-shadow: var(--strata-shadow-1);
  font-family: var(--strata-font-body);
  font-size: var(--strata-text-sm);
  font-weight: 600;
  color: var(--strata-text-1);
  -webkit-backdrop-filter: blur(var(--strata-glass-blur));
          backdrop-filter: blur(var(--strata-glass-blur));
}
.lp-chip i {
  font-size: 1.1em;
  color: oklch(from var(--strata-action) .48 c h);
  flex: none;
}
.lp-chip span { min-width: 0; overflow-wrap: anywhere; }


/* ====================================================================
   4. BENTO GRID + EQUAL-HEIGHT CARDS + EXPAND PATTERN
   --------------------------------------------------------------------
   repeat(N, minmax(0, 1fr)) + grid-auto-rows: 1fr so siblings are equal
   height; each card is a flex column with an identical internal recipe
   (icon -> reserved title row -> body -> footer pinned bottom), so a
   2-line title in one card does not shift bodies out of alignment.
   ==================================================================== */
.lp-bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: clamp(12px, 2vw, 22px);
}
/* Optional hero cell (2x2) for the most important feature. */
.lp-bento__cell--hero {
  grid-column: span 2;
  grid-row: span 2;
}
.lp-bento__cell--wide { grid-column: span 2; }

/* The card itself: equal height via flex column + stretch. */
.lp-card {
  display: flex;
  flex-direction: column;
  min-width: 0;             /* never let content force overflow */
  height: 100%;
  background: var(--strata-surface-3);
  border: var(--strata-border);
  border-radius: var(--strata-r-xl);
  box-shadow: var(--strata-shadow-3);
  padding: clamp(16px, 2.4vw, 28px);
  color: var(--strata-text-1);
  overflow: hidden;
  transition: box-shadow var(--strata-t-base), filter var(--strata-t-fast);
}
.lp-card--glass {
  background: var(--strata-surface-1);
  border-color: var(--strata-glass-border);
  -webkit-backdrop-filter: blur(var(--strata-glass-blur));
          backdrop-filter: blur(var(--strata-glass-blur));
}

/* Identical internal recipe. */
.lp-card__icon {
  width: 44px; height: 44px;
  flex: none;
  margin-bottom: var(--strata-sp-4);
  color: var(--strata-text-on-accent);
  font-size: 22px;
}
/* Reserved title row keeps bodies aligned even when a title wraps to 2 lines. */
.lp-card__title {
  margin: 0 0 var(--strata-sp-2);
  min-height: 2.6em;        /* reserve up to 2 lines */
  display: flex;
  align-items: flex-start;
  font-family: var(--strata-font-body);
  font-weight: 700;
  font-size: var(--strata-text-lg);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.lp-card__body {
  margin: 0;
  color: var(--strata-text-2);
  font-size: var(--strata-text-base);
  line-height: 1.55;
  overflow-wrap: anywhere;
}
/* Footer / actions pinned to the bottom so cards align. */
.lp-card__foot {
  margin-top: auto;
  padding-top: var(--strata-sp-4);
}

/* If a card carries a mini-sim visual, give it a consistent slot (~60% feel). */
.lp-card__visual {
  margin: 0 0 var(--strata-sp-4);
  min-width: 0;
}
/* Pre-mount reservation for an embedded mini sim. Minis now mount EAGERLY on
   load (app-sim.js), rendering one screen synchronously, so this only guards
   the split second before that synchronous mount. Keep it SMALL so the card
   hugs the sim's real content (no dead space) once mounted. Released on mount. */
.lp-card__visual > [data-lgp-sim-mini]:not([data-lgp-sim-done]) {
  display: block;
  width: 100%;
  min-height: 120px;
}

/* ---- Expand pattern (progressive disclosure) ---------------------- */
/* A <details>-based accordion: native, accessible, zero JS. Use:
     <details class="lp-expand"><summary class="lp-expand__summary">
       Read more <i class="ph ph-caret-down"></i>
     </summary><div class="lp-expand__panel">...</div></details>            */
.lp-expand { margin-top: var(--strata-sp-3); }
.lp-expand__summary {
  display: inline-flex;
  align-items: center;
  gap: var(--strata-sp-2);
  cursor: pointer;
  list-style: none;
  font-family: var(--strata-font-body);
  font-weight: 600;
  font-size: var(--strata-text-sm);
  color: oklch(from var(--strata-action) .42 c h);
  border-radius: var(--strata-r-full);
  padding: 4px 2px;
}
.lp-expand__summary::-webkit-details-marker { display: none; }
.lp-expand__summary i {
  transition: transform var(--strata-t-fast);
}
.lp-expand[open] .lp-expand__summary i { transform: rotate(180deg); }
.lp-expand__summary:focus-visible {
  outline: var(--strata-focus-width) solid var(--strata-primary);
  outline-offset: var(--strata-focus-offset);
}
.lp-expand__panel {
  margin-top: var(--strata-sp-3);
  padding-top: var(--strata-sp-3);
  border-top: var(--strata-border);
  color: var(--strata-text-2);
  font-size: var(--strata-text-sm);
  line-height: 1.55;
  overflow-wrap: anywhere;
}


/* ====================================================================
   5. EMAIL-CAPTURE BLOCK (homepage .gp-pill glass-card look)
   --------------------------------------------------------------------
   A glass card with a rounded input + a gradient pill button using the
   homepage look: #3b82f6 -> #0066ff with a white top-sheen overlay.
   ==================================================================== */
.lp-capture {
  background: var(--strata-surface-1);
  border: 1px solid var(--strata-glass-border);
  border-radius: var(--strata-r-2xl);
  box-shadow: var(--strata-shadow-5);
  padding: clamp(20px, 3vw, 36px);
  -webkit-backdrop-filter: blur(var(--strata-glass-blur));
          backdrop-filter: blur(var(--strata-glass-blur));
  max-width: 44rem;
}
.lp-capture--center { margin-inline: auto; text-align: center; }
.lp-capture h2, .lp-capture h3 { margin: 0 0 var(--strata-sp-2); }
.lp-capture__lede {
  margin: 0 0 var(--strata-sp-5);
  color: var(--strata-text-2);
}

/* The form row: email field + pill button. Wraps to stacked on small screens. */
.lp-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--strata-sp-3);
  align-items: stretch;
}
.lp-capture--center .lp-form { justify-content: center; }
.lp-form__field {
  flex: 1 1 16rem;
  min-width: 0;
}
.lp-form__input {
  width: 100%;
  min-height: 52px;          /* >= 44px tap target */
  padding: 12px 18px;
  font-size: var(--strata-text-lg);
  color: var(--strata-text-1);
  background: var(--strata-surface-3);
  border: 1px solid var(--strata-border-strong);
  border-radius: var(--strata-r-full);
  transition: border-color var(--strata-t-fast), box-shadow var(--strata-t-fast);
}
.lp-form__input::placeholder { color: var(--strata-text-3); }
.lp-form__input:focus,
.lp-form__input:focus-visible {
  outline: none;
  border-color: var(--strata-primary);
  box-shadow: 0 0 0 3px var(--strata-primary-soft);
}

/* The .gp-pill button: homepage gradient + white top sheen. */
.gp-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--strata-sp-2);
  min-height: 52px;
  padding: 12px 28px;
  font-family: var(--strata-font-body);
  font-size: var(--strata-text-lg);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--strata-r-full);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.08) 40%, transparent 60%, rgba(255,255,255,0.05) 100%),
    linear-gradient(135deg, #3b82f6 0%, #0066ff 100%);
  box-shadow:
    0 6px 18px rgba(0, 102, 255, 0.42),
    0 1px 2px rgba(0, 0, 0, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14);
  transition: filter var(--strata-t-fast), transform var(--strata-t-fast);
}
.gp-pill:hover { filter: brightness(1.06); transform: translateY(-1px); }
.gp-pill:active { transform: translateY(0) scale(0.98); }
.gp-pill:focus-visible {
  outline: var(--strata-focus-width) solid var(--strata-primary);
  outline-offset: var(--strata-focus-offset);
}
.gp-pill--lg { min-height: 58px; font-size: var(--strata-text-xl); padding: 14px 34px; }

/* Doubt-remover microcopy line under the form. */
.lp-form__note {
  margin: var(--strata-sp-4) 0 0;
  font-size: var(--strata-text-sm);
  color: var(--strata-text-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--strata-sp-2) var(--strata-sp-4);
}
.lp-capture--center .lp-form__note { justify-content: center; }
.lp-form__note span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.lp-form__note i { color: oklch(from var(--strata-action) .48 c h); }

/* Post-submit "check your inbox" state (toggle .is-sent on the form wrapper). */
.lp-capture__sent { display: none; }
.lp-capture.is-sent .lp-form,
.lp-capture.is-sent .lp-form__note { display: none; }
.lp-capture.is-sent .lp-capture__sent {
  display: flex;
  align-items: flex-start;
  gap: var(--strata-sp-3);
  text-align: left;
}
.lp-capture__sent i { font-size: 26px; color: var(--strata-green); flex: none; }


/* ====================================================================
   6. CTA ROWS  (primary pill right, ghost left)
   --------------------------------------------------------------------
   Honors the locked convention: ghost on the LEFT, primary on the RIGHT.
   Wraps cleanly; both controls keep >= 44px height.
   ==================================================================== */
.lp-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--strata-sp-3);
}
.lp-cta-row--center { justify-content: center; }
.lp-cta-row .strata-btn,
.lp-cta-row .gp-pill { min-height: 50px; }
/* The ghost (secondary) is visually subordinate to the primary. */
.lp-cta-row__secondary { order: 0; }
.lp-cta-row__primary { order: 1; }


/* ====================================================================
   7. "FOR YOU / NOT FOR YOU" TWO-COLUMN LISTS
   ==================================================================== */
.lp-fit {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 28px);
}
.lp-fit__col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--strata-surface-3);
  border: var(--strata-border);
  border-radius: var(--strata-r-xl);
  box-shadow: var(--strata-shadow-2);
  padding: clamp(18px, 2.6vw, 28px);
}
.lp-fit__head {
  display: flex;
  align-items: center;
  gap: var(--strata-sp-2);
  margin: 0 0 var(--strata-sp-4);
  font-family: var(--strata-font-body);
  font-weight: 700;
  font-size: var(--strata-text-lg);
}
.lp-fit__col--yes .lp-fit__head { color: oklch(from var(--strata-green) .42 c h); }
.lp-fit__col--no .lp-fit__head  { color: var(--strata-text-2); }
.lp-fit__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--strata-sp-3); }
.lp-fit__list li {
  display: flex;
  gap: var(--strata-sp-3);
  min-width: 0;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.lp-fit__list i { flex: none; font-size: 1.15em; margin-top: 0.1em; }
.lp-fit__col--yes .lp-fit__list i { color: var(--strata-green); }
.lp-fit__col--no .lp-fit__list i  { color: var(--strata-text-3); }


/* ====================================================================
   8. FAQ ACCORDION (native <details>, accessible)
   ==================================================================== */
.lp-faq { display: grid; gap: var(--strata-sp-3); }
.lp-faq__item {
  background: var(--strata-surface-3);
  border: var(--strata-border);
  border-radius: var(--strata-r-lg);
  box-shadow: var(--strata-shadow-1);
  overflow: hidden;
}
.lp-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--strata-sp-3);
  cursor: pointer;
  list-style: none;
  padding: clamp(14px, 2vw, 20px);
  font-family: var(--strata-font-body);
  font-weight: 700;
  font-size: var(--strata-text-lg);
  color: var(--strata-text-1);
}
.lp-faq__q::-webkit-details-marker { display: none; }
.lp-faq__q i {
  flex: none;
  color: oklch(from var(--strata-action) .46 c h);
  transition: transform var(--strata-t-fast);
}
.lp-faq__item[open] .lp-faq__q i { transform: rotate(180deg); }
.lp-faq__q:focus-visible {
  outline: var(--strata-focus-width) solid var(--strata-primary);
  outline-offset: calc(var(--strata-focus-offset) * -1);
}
.lp-faq__a {
  padding: 0 clamp(14px, 2vw, 20px) clamp(14px, 2vw, 20px);
  margin: 0;
  color: var(--strata-text-2);
  line-height: 1.6;
  overflow-wrap: anywhere;
}


/* ====================================================================
   9. RESERVED (HIDDEN) SOCIAL-PROOF STRIP
   --------------------------------------------------------------------
   No testimonials exist yet. This strip stays hidden until switched on;
   add the `is-live` class (or remove `hidden`) once real proof exists.
   ==================================================================== */
.lp-proof[hidden] { display: none !important; }
.lp-proof {
  display: none;                 /* default off; .lp-proof.is-live turns it on */
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 4vw, 40px);
  padding: var(--strata-sp-5);
  opacity: 0.7;
}
.lp-proof.is-live { display: flex; }


/* ====================================================================
   10. FOOTER
   ==================================================================== */
.lp-footer {
  border-top: var(--strata-border);
  padding-block: clamp(32px, 5vw, 56px);
  color: var(--strata-text-2);
  font-size: var(--strata-text-sm);
}
.lp-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: clamp(20px, 4vw, 48px);
}
.lp-footer__brand { min-width: 0; }
.lp-footer__brand strong {
  font-family: var(--strata-font-display);
  font-style: italic;
  font-size: var(--strata-text-xl);
  color: var(--strata-text-1);
}
.lp-footer__col { min-width: 0; }
.lp-footer__col h4 {
  margin: 0 0 var(--strata-sp-3);
  font-size: var(--strata-text-sm);
  font-weight: 700;
  color: var(--strata-text-1);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.lp-footer__col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--strata-sp-2); }
.lp-footer__col a { color: var(--strata-text-2); }
.lp-footer__col a:hover { color: var(--strata-action); }
.lp-footer__legal {
  margin-top: clamp(24px, 4vw, 40px);
  padding-top: var(--strata-sp-4);
  border-top: var(--strata-border);
  color: var(--strata-text-3);
  font-size: var(--strata-text-xs);
}


/* ====================================================================
   11. APP-SURFACE SIMULATION  (app-sim.js output)
   --------------------------------------------------------------------
   Styles every class app-sim.js emits. The browser chrome + cards read as
   the real app (glass + subtle shadow, brand blue). Mirrors the app's
   visual language for the radar, habit grid, cascade, insights, etc.
   ==================================================================== */

/* ---- Root containers --------------------------------------------- */
.lgpsim { min-width: 0; }

/* ---- Pre-mount height reservation + placeholder (zero CLS) -------- */
/* Minis mount EAGERLY on load (app-sim.js) and render one screen synchronously,
   so they hug their real content immediately and the user never sees an empty
   box. This small floor only guards the split second before that synchronous
   mount (prevents a zero-height collapse); it is released on mount, so a short
   sim card (Execute breadcrumb) stays short and a tall one (radar) stays tall. */
[data-lgp-sim-mini]:not([data-lgp-sim-done]) {
  display: block;
  min-width: 0;
  min-height: 120px;
}
/* The lightweight placeholder fills its reserved box until the real sim mounts.
   Visual only (the JS marks it aria-hidden); a calm card-shaped shimmer. */
.lgpsim-placeholder {
  display: flex;
  flex-direction: column;
  gap: var(--strata-sp-3);
  width: 100%;
  height: 100%;
  min-height: inherit;
  padding: clamp(14px, 2.4vw, 22px);
  border: 1px solid var(--strata-glass-border);
  border-radius: var(--strata-r-xl);
  background: var(--strata-surface-2);
  box-shadow: var(--strata-shadow-3);
  overflow: hidden;
}
.lgpsim-placeholder__chip {
  width: 44%;
  height: 18px;
  border-radius: var(--strata-r-full);
  background: var(--strata-surface-3);
}
.lgpsim-placeholder__body {
  flex: 1 1 auto;
  min-height: 120px;
  border-radius: var(--strata-r-lg);
  background:
    linear-gradient(180deg, var(--strata-surface-3), color-mix(in srgb, var(--strata-surface-3) 70%, transparent));
}

/* HERO stage: a positioned arena the fanned cards live in. The box is sized
   with aspect-ratio so the poster paints stably (no CLS) before JS runs.
   Extra bottom room (the fanned cards sit a little lower) keeps depth visible. */
.lgpsim--hero { display: block; }
.lgpsim-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 6;
  max-width: 460px;
  margin-inline: auto;
}
/* Each card is absolutely positioned AND stretched to fill the whole stage box,
   so every fanned card is EXACTLY the same height regardless of its content
   (the viewport clips the overflow). This is what makes the cards equal-height. */
.lgpsim-stagecard {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, 0);   /* poster: first card centered */
  transform-origin: center top;
  transition: transform var(--strata-t-base), opacity var(--strata-t-base);
  will-change: transform, opacity;
}
/* Pre-JS / poster: only the first card is visible; the rest are parked behind
   it (opacity handled inline once JS lays them out; this is the safe default). */
.lgpsim--hero:not(.is-ready) .lgpsim-stagecard:not([data-active]) { opacity: 0; }
.lgpsim-stagecard[data-active] { z-index: 10; }

/* MINI: a single card, no stage. */
.lgpsim--mini .lgpsim-card { max-width: 100%; }

/* ---- Fixed-fill app-screen card (hero stage) --------------------- */
/* A refined RING + frame so the card clearly reads as "the app on a screen,"
   distinct from the page card: a crisp inner ring, a soft outer ring, and a
   layered drop shadow. The card fills the stage and lays out as a column so its
   viewport can take the remaining height and clip cleanly. */
.lgpsim-card--fill {
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 0 0 1px var(--strata-border-color),                 /* crisp inner ring */
    0 0 0 6px color-mix(in srgb, var(--strata-action) 9%, transparent), /* soft outer ring */
    var(--strata-shadow-7);                               /* layered depth */
}
.lgpsim-card--fill .lgpsim-viewport {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;          /* clip content to the fixed box */
}
/* Soft fade hint at the foot of a clipped screen: "there is more below." */
.lgpsim-viewport__fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 44px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--strata-surface-3) 92%);
}

/* ---- Browser-chrome card ----------------------------------------- */
.lgpsim-card {
  width: 100%;
  background: var(--strata-surface-3);
  border: 1px solid var(--strata-glass-border);
  border-radius: var(--strata-r-xl);
  box-shadow: var(--strata-shadow-6);
  overflow: hidden;
}
.lgpsim-card--bare { box-shadow: var(--strata-shadow-3); }

.lgpsim-chrome {
  display: flex;
  align-items: center;
  gap: var(--strata-sp-3);
  padding: 9px 14px;
  background: color-mix(in srgb, var(--strata-surface-2) 88%, var(--strata-action) 4%);
  border-bottom: var(--strata-border);
}
.lgpsim-dots { display: inline-flex; gap: 6px; flex: none; }
.lgpsim-dots i {
  width: 10px; height: 10px;
  border-radius: var(--strata-r-full);
  background: rgba(150,150,175,0.5);
}
.lgpsim-dots i:nth-child(1) { background: #ff5f57; }
.lgpsim-dots i:nth-child(2) { background: #febc2e; }
.lgpsim-dots i:nth-child(3) { background: #28c840; }
.lgpsim-addr {
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: var(--strata-surface-3);
  border: var(--strata-border);
  border-radius: var(--strata-r-full);
  font-family: var(--strata-font-body);
  font-size: var(--strata-text-xs);
  color: var(--strata-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lgpsim-addr i { color: var(--strata-green); font-size: 0.9em; flex: none; }

.lgpsim-viewport {
  padding: clamp(14px, 2.4vw, 22px);
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--strata-action) 5%, transparent), transparent 60%),
    var(--strata-surface-3);
}

/* ---- Screen wrapper + head --------------------------------------- */
.lgpsim-screen { min-width: 0; }
.lgpsim-head {
  display: flex;
  align-items: center;
  gap: var(--strata-sp-3);
  margin-bottom: var(--strata-sp-4);
}
.lgpsim-head__icon {
  width: 48px; height: 48px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--strata-squircle-fallback);
  -webkit-clip-path: url(#strata-squircle);
          clip-path: url(#strata-squircle);
  color: #fff;
  font-size: 26px;
  background: var(--strata-action-grad);
  box-shadow: 0 4px 10px rgba(0,102,255,0.28);
}
.lgpsim-head__text { display: flex; flex-direction: column; min-width: 0; }
.lgpsim-head__title {
  font-family: var(--strata-font-display);
  font-style: italic;
  font-weight: 600;
  font-size: var(--strata-text-xl);
  line-height: 1.1;
  color: var(--strata-text-1);
  overflow-wrap: anywhere;
}
.lgpsim-head__sub {
  font-size: var(--strata-text-xs);
  color: var(--strata-text-2);
  overflow-wrap: anywhere;
}

.lgpsim-note {
  margin: var(--strata-sp-3) 0 0;
  font-size: var(--strata-text-xs);
  color: var(--strata-text-2);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* ---- Radar screen ------------------------------------------------- */
/* isolation: isolate gives the radar its own stacking context so the
   light-mode multiply blend composites only against the card surface behind it
   (not arbitrary page ancestors). In dark mode the JS switches the polygons to
   normal blend with tuned alpha fills, so the read stays legible either way. */
.lgpsim-radar-wrap { display: flex; justify-content: center; isolation: isolate; }
.lgpsim-radar { width: 100%; max-width: 300px; height: auto; }
.lgpsim-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--strata-sp-4);
  justify-content: center;
  margin-top: var(--strata-sp-2);
  font-size: var(--strata-text-xs);
  color: var(--strata-text-2);
}
.lgpsim-legend__item { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.lgpsim-dot { width: 10px; height: 10px; border-radius: var(--strata-r-full); flex: none; }
.lgpsim-dot--sat { background: #0066ff; }
.lgpsim-dot--imp { background: #ff4d8d; }

/* ---- Values screen ------------------------------------------------ */
.lgpsim-vallist { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--strata-sp-2); }
.lgpsim-valrow {
  display: flex;
  align-items: center;
  gap: var(--strata-sp-3);
  min-width: 0;
  padding: 10px 14px;
  border-radius: var(--strata-r-md);
  background: var(--strata-surface-2);
  border: var(--strata-border);
}
.lgpsim-rank {
  width: 24px; height: 24px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--strata-r-full);
  font-size: var(--strata-text-xs);
  font-weight: 700;
  color: #fff;
  background: var(--strata-action-grad);
}
.lgpsim-valname { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.lgpsim-purpose {
  margin: var(--strata-sp-4) 0 0;
  padding: var(--strata-sp-3);
  border: 1px solid color-mix(in srgb, var(--strata-action) 22%, transparent);
  border-radius: var(--strata-r-sm);
  background: var(--strata-primary-glass);
  font-size: var(--strata-text-sm);
  font-style: italic;
  color: var(--strata-text-1);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* ---- Vision screen ------------------------------------------------ */
.lgpsim-futures { display: grid; gap: var(--strata-sp-3); }
.lgpsim-future {
  min-width: 0;
  padding: var(--strata-sp-3) var(--strata-sp-4);
  border-radius: var(--strata-r-md);
  background: var(--strata-surface-2);
  border: var(--strata-border);
}
.lgpsim-future.is-picked {
  background: var(--strata-primary-glass);
  box-shadow: inset 0 0 0 2px var(--strata-action);
}
.lgpsim-future__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--strata-sp-2);
  margin-bottom: 4px;
}
.lgpsim-future__tag {
  font-size: var(--strata-text-xs);
  font-weight: 700;
  color: #fff;
  padding: 2px 8px;
  border-radius: var(--strata-r-full);
  background: var(--strata-action-grad);
  flex: none;
}
.lgpsim-future__label { font-weight: 700; font-size: var(--strata-text-sm); min-width: 0; }
.lgpsim-future__pick {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--strata-text-xs);
  font-weight: 700;
  color: oklch(from var(--strata-action) .42 c h);
  flex: none;
}
.lgpsim-future__text {
  margin: 0;
  font-size: var(--strata-text-sm);
  color: var(--strata-text-2);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* ---- Summit screen ------------------------------------------------ */
/* Value-labeled example sentences: a small uppercase value chip over a serif
   italic "By 2036 I will..." sentence, mirroring the real Summit step. */
.lgpsim-summit { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--strata-sp-3); }
.lgpsim-summit__row {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--strata-sp-3) var(--strata-sp-4);
  border-radius: var(--strata-r-md);
  background: var(--strata-surface-2);
  border: var(--strata-border);
  box-shadow: var(--strata-shadow-2);
}
.lgpsim-summit__val {
  align-self: flex-start;
  font-size: var(--strata-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: oklch(from var(--strata-action) .44 c h);
}
.lgpsim-summit__sentence {
  font-family: var(--strata-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--strata-text-base);
  line-height: 1.35;
  color: var(--strata-text-1);
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ---- Cascade / Execute screen ------------------------------------ */
/* A cadence breadcrumb chain of pills (2026 > Q2 > Jun > W26 > Sun 28), the
   today pill highlighted, then a daily anchor and nested focus items. */
.lgpsim-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-bottom: var(--strata-sp-4);
}
.lgpsim-crumb {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 4px 10px;
  border-radius: var(--strata-r-full);
  background: var(--strata-surface-2);
  border: var(--strata-border);
  font-size: var(--strata-text-xs);
  font-weight: 700;
  color: var(--strata-text-2);
  overflow-wrap: anywhere;
}
.lgpsim-crumb i { font-size: 0.95em; color: oklch(from var(--strata-action) .46 c h); flex: none; }
.lgpsim-crumb.is-now {
  background: var(--strata-action-grad);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 10px rgba(0,102,255,0.30);
}
.lgpsim-crumb.is-now i { color: #fff; }
.lgpsim-crumbsep { display: inline-flex; color: var(--strata-text-3); font-size: 0.85em; flex: none; }

.lgpsim-anchor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--strata-sp-2) var(--strata-sp-3);
  margin-bottom: var(--strata-sp-3);
  padding: var(--strata-sp-3) var(--strata-sp-4);
  border-radius: var(--strata-r-md);
  background: var(--strata-primary-glass);
  border: 1px solid color-mix(in srgb, var(--strata-action) 24%, transparent);
}
.lgpsim-anchor__lbl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--strata-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: oklch(from var(--strata-action) .42 c h);
  flex: none;
}
.lgpsim-anchor__lbl i { color: oklch(from var(--strata-action) .46 c h); }
.lgpsim-anchor__val {
  font-family: var(--strata-font-display);
  font-style: italic;
  font-weight: 600;
  font-size: var(--strata-text-lg);
  color: var(--strata-text-1);
  min-width: 0;
  overflow-wrap: anywhere;
}
.lgpsim-focuslist { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.lgpsim-focusitem {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--strata-sp-2) var(--strata-sp-3);
  min-width: 0;
  padding: 8px 12px;
  border-radius: var(--strata-r-sm);
  background: var(--strata-surface-2);
  border: var(--strata-border);
}
.lgpsim-focusitem__area {
  font-size: var(--strata-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: oklch(from var(--strata-action) .44 c h);
  flex: none;
}
.lgpsim-focusitem__txt {
  font-size: var(--strata-text-sm);
  color: var(--strata-text-1);
  line-height: 1.4;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ---- Habits screen (Habit Garden) -------------------------------- */
/* The distinctive real view: a GREEN gradient card with the habit title, a
   flame "current streak" flag, a big serif streak number, a last-7-days dot
   row, and longest/total tallies. */
.lgpsim-streakcard {
  position: relative;
  overflow: hidden;
  margin-bottom: var(--strata-sp-3);
  padding: var(--strata-sp-4);
  border-radius: var(--strata-r-lg);
  color: #fff;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,0.20), transparent 55%),
    linear-gradient(150deg, #34d399 0%, #10b981 55%, #059669 100%);
  box-shadow: 0 10px 22px rgba(16,185,129,0.32);
}
.lgpsim-streakcard__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--strata-sp-2);
  margin-bottom: 2px;
}
.lgpsim-streakcard__name { font-weight: 700; font-size: var(--strata-text-sm); min-width: 0; overflow-wrap: anywhere; }
.lgpsim-streakcard__flag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  font-size: var(--strata-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.92;
}
.lgpsim-streakcard__num {
  font-family: var(--strata-font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(2.6rem, 8vw, 3.4rem);
  line-height: 1;
  margin: 2px 0 var(--strata-sp-3);
}
.lgpsim-streakdots { display: flex; gap: 6px; margin-bottom: 6px; }
.lgpsim-streakdot {
  width: 14px; height: 14px;
  flex: none;
  border-radius: var(--strata-r-full);
  background: rgba(255,255,255,0.32);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.45);
}
.lgpsim-streakdot.is-done { background: #ffffff; box-shadow: none; }
.lgpsim-streakdot.is-lazy { background: var(--strata-amber); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55); }
.lgpsim-streakcard__days {
  font-size: var(--strata-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.82;
  margin-bottom: var(--strata-sp-3);
}
.lgpsim-streakcard__tallies {
  display: flex;
  flex-wrap: wrap;
  gap: var(--strata-sp-2) var(--strata-sp-4);
  padding-top: var(--strata-sp-3);
  border-top: 1px solid rgba(255,255,255,0.24);
  font-size: var(--strata-text-xs);
  letter-spacing: 0.04em;
  opacity: 0.92;
}
.lgpsim-streakcard__tallies strong { font-size: var(--strata-text-base); font-weight: 800; }

/* Secondary month strip (year-tracker feel). */
.lgpsim-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}
.lgpsim-cell {
  aspect-ratio: 1 / 1;
  border-radius: 5px;
  background: var(--strata-surface-2);
  border: 1px solid var(--strata-border-color);
}
.lgpsim-cell.is-done {
  background: var(--strata-green);
  border-color: transparent;
}
.lgpsim-cell.is-lazy {
  background: var(--strata-amber);
  border-color: transparent;
}

.lgpsim-habitmeta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--strata-sp-2);
  margin-bottom: var(--strata-sp-3);
}
.lgpsim-chiplet {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  max-width: 100%;
  padding: 4px 10px;
  border-radius: var(--strata-r-full);
  background: var(--strata-surface-2);
  border: var(--strata-border);
  font-size: var(--strata-text-xs);
  color: var(--strata-text-2);
  overflow-wrap: anywhere;
}
.lgpsim-chiplet i { flex: none; color: oklch(from var(--strata-action) .46 c h); }
.lgpsim-chiplet--lazy i { color: var(--strata-purple); }

/* ---- Insights screen (Maya's Insights) --------------------------- */
/* Overview/Trends/Detail tab chips, then headline stat cards with big serif
   numbers, a small label, and a delta tag. */
.lgpsim-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--strata-sp-3);
}
.lgpsim-tab {
  padding: 4px 12px;
  border-radius: var(--strata-r-full);
  background: var(--strata-surface-2);
  border: var(--strata-border);
  font-size: var(--strata-text-xs);
  font-weight: 600;
  color: var(--strata-text-2);
}
.lgpsim-tab.is-active {
  background: var(--strata-action-grad);
  border-color: transparent;
  color: #fff;
}
.lgpsim-statgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--strata-sp-2);
  margin-bottom: var(--strata-sp-4);
}
.lgpsim-statcard {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: var(--strata-sp-3);
  border-radius: var(--strata-r-md);
  background: var(--strata-surface-2);
  border: var(--strata-border);
}
.lgpsim-statcard__big {
  font-family: var(--strata-font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.6rem, 5.5vw, 2rem);
  line-height: 1;
  color: var(--strata-text-1);
}
.lgpsim-statcard__label {
  font-size: var(--strata-text-xs);
  font-weight: 600;
  color: var(--strata-text-2);
  min-width: 0;
  overflow-wrap: anywhere;
}
.lgpsim-statcard__delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: var(--strata-text-xs);
  font-weight: 700;
  color: var(--strata-text-3);
}
.lgpsim-statcard__delta i { flex: none; }
.lgpsim-statcard__delta--up { color: oklch(from var(--strata-green) .42 c h); }
.lgpsim-statcard__delta--down { color: oklch(from var(--strata-red) .46 c h); }

.lgpsim-ins-mshead {
  font-size: var(--strata-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--strata-text-2);
  margin-bottom: var(--strata-sp-2);
}
.lgpsim-ms-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.lgpsim-ms {
  display: flex;
  align-items: center;
  gap: var(--strata-sp-2);
  min-width: 0;
  font-size: var(--strata-text-sm);
}
.lgpsim-ms__light { width: 11px; height: 11px; border-radius: var(--strata-r-full); flex: none; }
.lgpsim-ms.is-green .lgpsim-ms__light { background: var(--strata-green); box-shadow: 0 0 0 3px var(--strata-green-glow); }
.lgpsim-ms.is-amber .lgpsim-ms__light { background: var(--strata-amber); box-shadow: 0 0 0 3px var(--strata-amber-glow); }
.lgpsim-ms.is-red   .lgpsim-ms__light { background: var(--strata-red);   box-shadow: 0 0 0 3px var(--strata-red-glow); }
.lgpsim-ms__title { min-width: 0; color: var(--strata-text-1); overflow-wrap: anywhere; }

/* ---- Wins screen (Wall of Wins) ---------------------------------- */
/* Vibrant mesh-gradient poster cards: a small uppercase category, a serif
   italic title, a big serif number, and a footer. The most striking element. */
.lgpsim-wins {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--strata-sp-2);
}
.lgpsim-win {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  padding: var(--strata-sp-3);
  border-radius: var(--strata-r-md);
  color: #fff;
  box-shadow: var(--strata-shadow-3);
}
/* Mesh gradients (two-stop radial sheen over a diagonal base) per category. */
.lgpsim-win--teal      { background: radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,0.22), transparent 55%), linear-gradient(140deg, #2dd4bf, #0d9488); }
.lgpsim-win--bluegreen { background: radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,0.22), transparent 55%), linear-gradient(140deg, #22d3ee, #0e7490); }
.lgpsim-win--green     { background: radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,0.22), transparent 55%), linear-gradient(140deg, #4ade80, #16a34a); }
.lgpsim-win--purple    { background: radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,0.22), transparent 55%), linear-gradient(140deg, #a78bfa, #7c3aed); }
.lgpsim-win--pinkred   { background: radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,0.24), transparent 55%), linear-gradient(140deg, #fb7185, #e11d48); }
.lgpsim-win--orange    { background: radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,0.24), transparent 55%), linear-gradient(140deg, #fbbf24, #ea580c); }
.lgpsim-win__cat {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.9;
}
.lgpsim-win__title {
  font-family: var(--strata-font-display);
  font-style: italic;
  font-weight: 600;
  font-size: var(--strata-text-sm);
  line-height: 1.2;
  min-width: 0;
  overflow-wrap: anywhere;
}
.lgpsim-win__big {
  font-family: var(--strata-font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.7rem, 6vw, 2.2rem);
  line-height: 1;
  margin: 2px 0;
}
.lgpsim-win__foot {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  opacity: 0.92;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ---- Privacy screen ---------------------------------------------- */
.lgpsim-privbadge {
  display: inline-flex;
  align-items: center;
  gap: var(--strata-sp-2);
  max-width: 100%;
  margin-bottom: var(--strata-sp-4);
  padding: 8px 14px;
  border-radius: var(--strata-r-full);
  background: color-mix(in srgb, var(--strata-green) 12%, transparent);
  color: oklch(from var(--strata-green) .36 c h);
  font-size: var(--strata-text-sm);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.lgpsim-privbadge i { color: var(--strata-green); flex: none; }
.lgpsim-privlist { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--strata-sp-3); }
.lgpsim-privrow { display: flex; gap: var(--strata-sp-3); min-width: 0; }
.lgpsim-privrow__icon {
  width: 36px; height: 36px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--strata-r-md);
  background: var(--strata-surface-2);
  border: var(--strata-border);
  color: oklch(from var(--strata-action) .46 c h);
  font-size: 18px;
}
.lgpsim-privrow__body { display: flex; flex-direction: column; min-width: 0; }
.lgpsim-privrow__body strong { font-size: var(--strata-text-sm); color: var(--strata-text-1); }
.lgpsim-privrow__body span { font-size: var(--strata-text-xs); color: var(--strata-text-2); overflow-wrap: anywhere; }

/* ---- Calendar screen --------------------------------------------- */
.lgpsim-rhythmlist { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.lgpsim-rhythm {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--strata-sp-2);
  min-width: 0;
  padding: 8px 12px;
  border-radius: var(--strata-r-sm);
  background: var(--strata-surface-2);
  border: var(--strata-border);
}
.lgpsim-rhythm__icon {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--strata-r-sm);
  background: var(--strata-surface-3);
  color: oklch(from var(--strata-action) .46 c h);
  font-size: 15px;
}
.lgpsim-rhythm__every { font-weight: 700; font-size: var(--strata-text-sm); min-width: 0; overflow-wrap: anywhere; }
.lgpsim-rhythm__mins { font-size: var(--strata-text-xs); color: var(--strata-text-2); white-space: nowrap; }
.lgpsim-rhythm__verb { font-size: var(--strata-text-xs); color: oklch(from var(--strata-action) .46 c h); font-weight: 600; white-space: nowrap; }
.lgpsim-icsbar {
  display: flex;
  align-items: center;
  gap: var(--strata-sp-2);
  margin-top: var(--strata-sp-3);
  padding: 10px 14px;
  border-radius: var(--strata-r-md);
  background: var(--strata-primary-glass);
  color: oklch(from var(--strata-action) .40 c h);
  font-size: var(--strata-text-sm);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.lgpsim-icsbar i { flex: none; }

/* ---- Hero dot indicators ----------------------------------------- */
.lgpsim-dots-row {
  display: flex;
  justify-content: center;
  gap: var(--strata-sp-2);
  margin-top: var(--strata-sp-5);
}
.lgpsim-dot-btn {
  width: 10px; height: 10px;
  padding: 0;
  border: none;
  border-radius: var(--strata-r-full);
  background: rgba(150,150,175,0.45);
  cursor: pointer;
  transition: background var(--strata-t-fast), transform var(--strata-t-fast);
}
.lgpsim-dot-btn:hover { background: rgba(150,150,175,0.7); }
.lgpsim-dot-btn.is-active {
  background: var(--strata-action);
  transform: scale(1.25);
}
.lgpsim-dot-btn:focus-visible {
  outline: var(--strata-focus-width) solid var(--strata-primary);
  outline-offset: var(--strata-focus-offset);
}


/* ====================================================================
   12. RESPONSIVE + REDUCED MOTION + REDUCED TRANSPARENCY
   ==================================================================== */

/* Tablet: bento to 2 columns; hero cell spans the full 2. */
@media (max-width: 1024px) {
  .lp-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-bento__cell--hero { grid-column: span 2; grid-row: span 1; }
  .lp-bento__cell--wide { grid-column: span 2; }
}

/* Stack the split hero below 900px (sim under the copy). */
@media (max-width: 900px) {
  .lp-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .lp-hero__sim { order: 2; }
}

/* Mobile: single column everywhere; full-width form controls. */
@media (max-width: 680px) {
  .lp-bento { grid-template-columns: minmax(0, 1fr); }
  .lp-bento__cell--hero,
  .lp-bento__cell--wide { grid-column: span 1; }
  .lp-fit { grid-template-columns: minmax(0, 1fr); }
  .lp-card__title { min-height: 0; }          /* no need to reserve in 1-col */

  .lp-form { flex-direction: column; }
  .lp-form__field { flex: 1 1 auto; }
  .gp-pill { width: 100%; }

  /* CTA row: primary on top (full width), ghost below. */
  .lp-cta-row .strata-btn,
  .lp-cta-row .gp-pill { width: 100%; }
  .lp-cta-row__primary { order: 0; }
  .lp-cta-row__secondary { order: 1; }
  /* Wins posters stay a 2-up mosaic even on phones (the sim card is narrow,
     so the poster grid reads best at 2 columns). */
}

/* Reduced motion: freeze the sim fan to the poster frame; kill all transitions
   (Strata also does this globally; reasserted here for the sim transforms). */
@media (prefers-reduced-motion: reduce) {
  .lgpsim-stagecard {
    transition: none !important;
    will-change: auto;
  }
  .lp-expand__summary i,
  .lp-faq__item[open] .lp-faq__q i,
  .gp-pill { transition: none !important; }
}

/* OS "Reduce transparency": solidify the glass surfaces to opaque AND
   neutralize the decorative mesh/gradient wash + scrim layers so text contrast
   never depends on translucency. Covers the hero bg and any shared __bg/scrim
   layer under an .lp-* container. */
@media (prefers-reduced-transparency: reduce) {
  .lp-chip,
  .lp-card--glass,
  .lp-capture,
  .lgpsim-card { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .lp-chip,
  .lp-card--glass,
  .lp-capture { background: var(--strata-surface-3); }

  /* Flatten the hero ambient wash to a solid page surface; drop the white
     scrim overlay (it is no longer needed once the wash is gone). */
  .lp-hero__bg,
  [class*="lp-"] > .lp-hero__bg {
    background: var(--strata-bg);
    background-image: none;
  }
  .lp-hero__bg::after { display: none; content: none; }

  /* Any shared mesh helper used as an ambient layer under an .lp-* block
     loses its translucent blooms and falls back to the solid page surface. */
  .lp-section .strata-mesh,
  .lp-hero .strata-mesh { background-image: none; background: var(--strata-bg); }
}

/* ===== central.css (page styles - last so they win) ===== */
/* central.css - the landing page's shared styles (from 04-hybrid.html inline <style>).
   Load ONCE on the Elementor page (page settings custom CSS, or one HTML widget <style>).
   Requires the head-includes (strata foundation + fonts + phosphor) to also be present. */

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

    /* Smooth click-to-jump for the rail + in-page anchors (the shared kit forces
       scroll-behavior:auto under prefers-reduced-motion, so this is motion-safe).
       scroll-margin-top keeps a jumped-to section clear of the sticky top bar. */
    html { scroll-behavior: smooth; }
    section[id] { scroll-margin-top: 88px; }
    @media (min-width: 1080px) { section[id] { scroll-margin-top: 88px; } }

    /* Scroll reveal: opt-in fade + rise, applied to a few focal moments. The JS
       adds .is-in when the element arrives. Reduced-motion shows it instantly. */
    .hy-reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1); }
    .hy-reveal.is-in { opacity: 1; transform: none; }
    @media (prefers-reduced-motion: reduce) {
      .hy-reveal { opacity: 1; transform: none; transition: none; }
    }

    /* ================================================================
       TYPOGRAPHY (fixed brand spec for this page; overrides the Strata
       classes locally without redefining the design system).
         - Section headings (.strata-h2) + the founder heading: Loretta
           display, italic, 900, 38px / 1.2 desktop (scaled on mobile).
         - Hero H1 (.strata-display): same family/style/weight, larger.
         - Body reading text: DM Sans, 500, 18px / 1.5.
       Micro-UI (chips, small labels, in-sim text, table cells, swatch
       labels) is intentionally NOT bumped to 18px; it keeps its own sizes.
       ================================================================ */
    .strata-h2,
    .hy-founder__lead {
      font-family: var(--strata-font-display);
      font-style: italic;
      font-weight: 900;
      font-size: 38px;
      line-height: 1.2;
      letter-spacing: -0.01em;
      color: var(--strata-text-1);
    }
    /* Section headlines wear the hero's blue->cyan gradient (Ramon 2026-06-28:
       "use the gradient font style like the hero headline"). Clipped to the
       glyphs; the dark-mode variant lifts the blue end so it stays legible. */
    .strata-h2 {
      background: linear-gradient(135deg, var(--strata-action) 0%, var(--strata-cyan) 100%);
      -webkit-background-clip: text;
              background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
    }
    [data-theme="dark"] .strata-h2 {
      background: linear-gradient(135deg, oklch(from var(--strata-action) 0.74 c h) 0%, var(--strata-cyan) 100%);
      -webkit-background-clip: text;
              background-clip: text;
    }
    /* Hero H1: a DRAMATIC jump above the 38px section H2 (Apple-grade scale).
       ~54px on phones up to ~88px on wide screens. Size is the hierarchy. */
    .strata-display {
      font-family: var(--strata-font-display);
      font-style: italic;
      font-weight: 900;
      font-size: clamp(3.35rem, 1.9rem + 6vw, 5.5rem);
      line-height: 1.02;
      letter-spacing: -0.02em;
      color: var(--strata-text-1);
    }
    /* Body reading text: paragraphs + card/FAQ/founder copy.
       Standard reading copy is 18px desktop / 16px mobile. The per-component
       rules further down MUST NOT re-set font-size on these selectors (that
       would override this block via equal-specificity source order); the small
       --strata-text-sm sizes were removed there so this single source wins. */
    .lp-hero__sub,
    .lp-sectionhead p,
    .hy-bcard__body,
    .hy-stage__body,
    .lp-faq__a,
    .hy-founder__body p,
    .hy-honest__list span,
    .lp-fit__list li,
    .hy-table__honest {
      font-family: var(--strata-font-body);
      font-weight: 500;
      font-size: 18px;
      line-height: 1.5;
      text-wrap: pretty;   /* avoid orphan/widow words in reading copy */
    }
    /* Pretty line breaking (Ramon 2026-06-28): balance multi-line headings so
       they split evenly, and apply pretty to the remaining copy blocks not in
       the reading-copy group above. Progressive enhancement (older engines fall
       back to normal wrapping). */
    .strata-display, .strata-h2, .hy-bcard__title, .hy-panelcard__head2,
    .hy-stage__title, .hy-summit__title, .lp-fit__head, .hy-honest__head,
    .hy-themes__title, .hy-rhythm__head h3, .hy-bentogroup__head h3 { text-wrap: balance; }
    .hy-cascade__head p, .hy-panelcard__example, .hy-panelcard__row,
    .hy-summit__body, .hy-honest__list strong, .hy-stepper__hint,
    .hy-themes__sub { text-wrap: pretty; }
    /* Mobile: scale the headings down but keep Loretta italic 900; reading
       copy steps 18px -> 16px (kept readable, micro-UI stays its own size). */
    @media (max-width: 600px) {
      .strata-h2, .hy-founder__lead { font-size: 30px; }
      .lp-hero__sub,
      .lp-sectionhead p,
      .hy-bcard__body,
      .hy-stage__body,
      .lp-faq__a,
      .hy-founder__body p,
      .hy-honest__list span,
      .lp-fit__list li,
      .hy-table__honest {
        font-size: 16px;
      }
    }

    /* ================================================================
       SQUIRCLE ICON BADGES (Strata superellipse). Reuses the canonical
       clip-path: url(#strata-squircle) that strata.js injects once into
       the DOM (objectBoundingBox clipPath); border-radius is the pre-/no-JS
       fallback. Direct clip is fine for the plain (non-button) icon badges
       on this page. Enlarged + squircled below per badge class. */
    .hy-squircle {
      border-radius: var(--strata-squircle-fallback);
      -webkit-clip-path: url(#strata-squircle);
              clip-path: url(#strata-squircle);
    }

    /* ================================================================
       "FOR YOU / NOT FOR YOU" HEADINGS (section #fit, plus the mirrored
       email-use disclosure). Page-local overrides of the shared .lp-fit
       defaults: a big, bold heading beside a large squircle icon BADGE.
       The icon is the direct <i> child of .lp-fit__head; the inline list
       icons (.lp-fit__list i) are untouched. Scoped here so the other
       landing pages keep the shared default. ================================ */
    .lp-fit__head {
      align-items: center;
      gap: var(--strata-sp-3);
      font-family: var(--strata-font-body);
      font-weight: 800;
      font-size: clamp(1.35rem, 1.15rem + 0.7vw, 1.55rem);  /* ~22-25px */
      line-height: 1.2;
      letter-spacing: -0.01em;
      min-width: 0;
      overflow-wrap: anywhere;
    }
    /* The heading icon becomes a large squircle badge. */
    .lp-fit__head > i {
      flex: none;
      width: 52px; height: 52px;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 30px;
      color: #fff;
      border-radius: var(--strata-squircle-fallback);
      -webkit-clip-path: url(#strata-squircle);
              clip-path: url(#strata-squircle);
      box-shadow: 0 6px 16px rgba(0,102,255,0.24);
    }
    /* "Yes" badge reads green; "No" badge a muted slate. Heading text keeps
       the shared yes/no color rules (those still apply to .lp-fit__head). */
    .lp-fit__col--yes .lp-fit__head > i {
      background: var(--strata-green-grad, linear-gradient(135deg, var(--strata-green), oklch(from var(--strata-green) calc(l * 0.88) c h)));
      box-shadow: 0 6px 16px color-mix(in srgb, var(--strata-green) 28%, transparent);
    }
    .lp-fit__col--no .lp-fit__head > i {
      background: linear-gradient(135deg, var(--strata-text-3), color-mix(in srgb, var(--strata-text-3) 70%, #000));
      color: #fff;
      box-shadow: 0 5px 14px color-mix(in srgb, var(--strata-text-3) 24%, transparent);
    }
    @media (max-width: 600px) {
      .lp-fit__head { font-size: 1.3rem; }
      .lp-fit__head > i { width: 46px; height: 46px; font-size: 26px; }
    }

    /* Emotional Loretta accent for a few headline phrases / story beats.
       Weight 900 to match the headline brand spec (it is part of the H1). */
    .hy-script {
      font-family: var(--strata-font-display);
      font-style: italic;
      font-weight: 900;
      color: oklch(from var(--strata-action) .45 c h);
    }
    [data-theme="dark"] .hy-script { color: oklch(from var(--strata-action) .80 c h); }

    /* The full product name, woven into the subhead (replaces the old eyebrow).
       overflow-wrap keeps it from ever pushing the line past a narrow viewport. */
    .hy-prodname { color: var(--strata-text-1); font-weight: 700; overflow-wrap: anywhere; }

    /* Quiet hero chips: monochrome context, NOT competing with the headline or
       the accent CTA (60-30-10: keep the blue for the one action). The shared
       .lp-chip tints its icon blue + adds glass; this variant calms both. */
    .lp-chips--quiet .lp-chip {
      background: color-mix(in srgb, var(--strata-surface-3) 70%, transparent);
      border-color: var(--strata-border-color);
      box-shadow: none;
      color: var(--strata-text-2);
      font-weight: 600;
    }
    .lp-chips--quiet .lp-chip i { color: var(--strata-text-3); }

    /* ================================================================
       HOW BETA ACCESS WORKS: a 5-step strip. Equal-size steps via a grid
       (repeat(5, minmax(0,1fr))) that collapses to fewer columns on
       narrow screens, never overflowing. Each step is a flex column with
       a numbered disc over a short label, so siblings read as one set.
       ================================================================ */
    .hy-access {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: clamp(10px, 1.6vw, 16px);
      counter-reset: none;
    }
    .hy-access__step {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: var(--strata-sp-3);
      min-width: 0;
      padding: clamp(16px, 2vw, 22px) clamp(10px, 1.4vw, 16px);
      background: var(--strata-surface-3);
      border: var(--strata-border);
      border-radius: var(--strata-r-xl);
      box-shadow: var(--strata-shadow-2);
    }
    .hy-access__num {
      width: 38px; height: 38px;
      flex: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--strata-r-full);
      font-family: var(--strata-font-display);
      font-style: italic;
      font-weight: 700;
      font-size: var(--strata-text-lg);
      color: #fff;
      background: var(--strata-action-grad);
      box-shadow: 0 4px 10px rgba(0,102,255,0.28);
    }
    .hy-access__txt {
      font-family: var(--strata-font-body);
      font-weight: 600;
      font-size: var(--strata-text-sm);
      line-height: 1.35;
      color: var(--strata-text-1);
      min-width: 0;
      overflow-wrap: anywhere;
    }

    /* Muted clarity line under an email form (what we email + local data). */
    .hy-form__clarify {
      margin: var(--strata-sp-3) 0 0;
      font-size: var(--strata-text-sm);
      line-height: 1.5;
      color: var(--strata-text-2);
      overflow-wrap: anywhere;
    }
    .lp-capture--center .hy-form__clarify { max-width: 40rem; margin-inline: auto; }
    .lp-capture.is-sent .hy-form__clarify { display: none; }

    /* Email-use disclosure block: spacing before the FAQ accordion. */
    .hy-emailuse { margin-bottom: clamp(20px, 3vw, 32px); }

    /* ================================================================
       MOBILE STICKY CTA: a fixed bottom bar shown only at the teaser's
       mobile breakpoint (<= 880px). Glass background, safe-area padding,
       above content. Desktop hides it. Page bottom padding is added on
       mobile (see the media query) so the final content clears the bar.
       ================================================================ */
    .hy-stickycta { display: none; }
    @media (max-width: 880px) {
      .hy-stickycta {
        display: flex;
        align-items: center;
        gap: var(--strata-sp-3);
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 80;
        padding: 10px clamp(14px, 4vw, 20px);
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
        background: color-mix(in srgb, var(--strata-surface-3) 86%, transparent);
        border-top: 1px solid var(--strata-glass-border);
        box-shadow: 0 -8px 24px rgba(30,30,50,0.14);
        -webkit-backdrop-filter: blur(16px) saturate(1.2);
                backdrop-filter: blur(16px) saturate(1.2);
      }
      .hy-stickycta .gp-pill {
        flex: 1 1 auto;
        min-width: 0;
        min-height: 48px;
        padding: 10px 18px;
        white-space: nowrap;
      }
      .hy-stickycta__demo {
        flex: none;
        font-family: var(--strata-font-body);
        font-weight: 700;
        font-size: var(--strata-text-sm);
        color: oklch(from var(--strata-action) .42 c h);
        white-space: nowrap;
        padding: 8px 4px;
      }
      .hy-stickycta__demo:focus-visible {
        outline: var(--strata-focus-width) solid var(--strata-primary);
        outline-offset: 2px;
        border-radius: var(--strata-r-sm);
      }
      /* Reserve room so the fixed bar never hides the final content. */
      body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
    }
    @media (max-width: 880px) and (prefers-reduced-transparency: reduce) {
      .hy-stickycta { background: var(--strata-surface-3); -webkit-backdrop-filter: none; backdrop-filter: none; }
    }
    /* Access strip: 5 -> fewer columns as width drops, always fitting. */
    @media (max-width: 760px) {
      .hy-access { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 380px) {
      .hy-access { grid-template-columns: minmax(0, 1fr); }
    }

    /* Visible field label above the email input (placeholders are not labels). */
    .lp-form__label {
      display: block;
      width: 100%;
      margin-bottom: 6px;
      font-size: var(--strata-text-xs);
      font-weight: 700;
      letter-spacing: 0.02em;
      color: var(--strata-text-2);
    }

    /* ================================================================
       HERO GLASS PANEL (like the app gate): a translucent, rounded,
       backdrop-blurred panel behind the hero copy to lift contrast. It is
       INSET (not full-bleed), so the smooth gradient shows around it; the
       framed sim sits beside it on the gradient.
       ================================================================ */
    .hy-glass {
      padding: clamp(20px, 3vw, 36px);
      border-radius: var(--strata-r-2xl);
      background: color-mix(in srgb, var(--strata-surface-3) 60%, transparent);
      border: 1px solid var(--strata-glass-border);
      box-shadow: var(--strata-shadow-5), inset 0 1px 0 rgba(255,255,255,0.40);
      -webkit-backdrop-filter: blur(16px) saturate(1.2);
              backdrop-filter: blur(16px) saturate(1.2);
    }
    [data-theme="dark"] .hy-glass {
      background: color-mix(in srgb, var(--strata-surface-2) 62%, transparent);
      box-shadow: var(--strata-shadow-5), inset 0 1px 0 rgba(255,255,255,0.08);
    }
    /* The hero capture sits INSIDE the glass panel, so it drops its own card
       chrome and reads as part of the panel (not a nested box). */
    .hy-glass .hy-hero__capture {
      background: transparent;
      border: none;
      box-shadow: none;
      -webkit-backdrop-filter: none;
              backdrop-filter: none;
      padding: 0;
      max-width: none;
    }

    /* ================================================================
       FLOATING MINI-NAV: a tiny glass pill of section links that floats in the
       left gutter and follows the scroll (scroll-spy). Nav-only — no brand, no
       header, no CTA. It reserves NO layout space, so it shows only where the
       gutter is wide enough to clear the 1140px centered content (>= 1440px);
       below that it hides and the site theme's top menu carries navigation.
       ================================================================ */
    .hy-dock { display: none; }
    @media (min-width: 1440px) {
      .hy-dock {
        display: flex;
        flex-direction: column;
        gap: 2px;
        position: fixed;
        top: 50%;
        left: max(12px, calc((100vw - 1140px) / 2 - 150px));
        transform: translateY(-50%);
        z-index: 60;
        padding: 6px;
        border-radius: var(--strata-r-xl);
        background: color-mix(in srgb, var(--strata-surface-3) 68%, transparent);
        border: 1px solid var(--strata-glass-border);
        box-shadow: var(--strata-shadow-4);
        -webkit-backdrop-filter: blur(14px) saturate(1.2);
                backdrop-filter: blur(14px) saturate(1.2);
        /* Hidden over the full-width coverflow hero (which it would overlap);
           JS reveals it once the hero scrolls past. */
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--strata-t-base) ease;
      }
      .hy-dock.is-revealed { opacity: 1; pointer-events: auto; }
      .hy-dock__link {
        display: block;
        padding: 6px 14px;
        border-radius: var(--strata-r-full);
        font-family: var(--strata-font-body);
        font-size: 0.82rem;
        font-weight: 600;
        line-height: 1.2;
        color: var(--strata-text-2);
        text-decoration: none;
        white-space: nowrap;
        transition: background var(--strata-t-fast), color var(--strata-t-fast);
      }
      .hy-dock__link:hover { background: var(--strata-surface-2); color: var(--strata-text-1); }
      .hy-dock__link[aria-current="true"] { background: var(--strata-primary-glass); color: oklch(from var(--strata-action) .40 c h); }
      .hy-dock__link:focus-visible { outline: var(--strata-focus-width) solid var(--strata-primary); outline-offset: 2px; }
    }
    @media (min-width: 1440px) and (prefers-reduced-transparency: reduce) {
      .hy-dock { background: var(--strata-surface-3); -webkit-backdrop-filter: none; backdrop-filter: none; }
    }

    /* The shared .gp-pill is white-space:nowrap + flex:0 0 auto, so a long
       label can overflow a 360px viewport. Cap it to the container and allow
       the label to wrap so it always fits. Page-local; shared assets stay
       untouched. Applies to every .gp-pill on the page. */
    .gp-pill {
      max-width: 100%;
      white-space: normal;
      overflow-wrap: anywhere;
      text-align: center;
    }

    /* ================================================================
       HERO: a calm dawn gradient with a soft summit silhouette. The
       scrim keeps text >= 4.5:1 over the wash, in both themes.
       ================================================================ */
    .hy-hero { position: relative; overflow: hidden; isolation: isolate; }
    /* SMOOTH OKLCH WASH (no discrete "balls"): one continuous diagonal gradient
       that interpolates in OKLCH between three token-derived hues, over one very
       large soft OKLCH radial for depth, over the palette mesh. Every stop is
       derived from --strata-action, so it re-tints with the theme/palette. */
    .hy-hero__sky {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background:
        linear-gradient(135deg in oklch,
          oklch(from var(--strata-action) 0.78 calc(c * 1.05) h / 0.40) 0%,
          oklch(from var(--strata-action) 0.72 calc(c * 0.95) calc(h + 32) / 0.30) 42%,
          oklch(from var(--strata-action) 0.70 calc(c * 1.0) calc(h - 40) / 0.34) 100%),
        radial-gradient(120% 100% at 72% 8% in oklch,
          oklch(from var(--strata-action) 0.80 calc(c * 1.1) h / 0.42),
          transparent 70%),
        var(--strata-mesh, var(--strata-bg-grad));
      background-size: 100% 100%, 180% 180%, cover;
      background-position: 0 0, 70% 10%, center;
    }
    /* A single, very large soft OKLCH bloom that slowly drifts for life. It is a
       continuous wash (no circles/balls), inset:0 + overflow:hidden so it never
       extends the page at any width. */
    .hy-hero__aurora {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
    }
    .hy-hero__aurora::before {
      content: "";
      position: absolute;
      inset: -20%;
      background:
        radial-gradient(60% 55% at 30% 30% in oklch,
          oklch(from var(--strata-action) 0.74 calc(c * 1.1) calc(h + 24) / 0.30), transparent 70%),
        radial-gradient(55% 50% at 78% 72% in oklch,
          oklch(from var(--strata-action) 0.70 calc(c * 1.05) calc(h - 36) / 0.26), transparent 72%);
      filter: blur(40px);
      animation: hyDrift 26s ease-in-out infinite alternate;
    }
    [data-theme="dark"] .hy-hero__aurora::before { opacity: 0.7; }
    @keyframes hyDrift {
      from { transform: translate3d(0, 0, 0) scale(1.02); }
      to   { transform: translate3d(2%, -2%, 0) scale(1.08); }
    }
    /* The scrim keeps the headline + CTA readable over the wash: light around the
       content, stronger low down. */
    .hy-hero__sky::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(75% 60% at 30% 38%, rgba(255,255,255,0.40), transparent 68%),
        linear-gradient(180deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.04) 38%, rgba(255,255,255,0.48) 100%);
    }
    [data-theme="dark"] .hy-hero__sky::after {
      background:
        radial-gradient(75% 60% at 30% 38%, rgba(10,12,22,0.32), transparent 68%),
        linear-gradient(180deg, rgba(10,12,22,0.18) 0%, rgba(10,12,22,0.05) 40%, rgba(10,12,22,0.58) 100%);
    }
    /* Soft mountain ridge at the foot of the hero, behind the content. */
    .hy-hero__ridge {
      position: absolute;
      left: 0; right: 0; bottom: -1px;
      width: 100%;
      height: clamp(80px, 14vw, 180px);
      z-index: 0;
      pointer-events: none;
      color: var(--strata-action);
    }
    .hy-hero__ridge svg { display: block; width: 100%; height: 100%; }
    .hy-hero > .lp-wrap { position: relative; z-index: 1; }

    /* A quiet "try it yourself" affordance under the hero sim. */
    .hy-simcta { margin-top: var(--strata-sp-4); text-align: center; }
    .hy-simcta a {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--strata-font-body);
      font-weight: 600;
      font-size: var(--strata-text-sm);
      color: oklch(from var(--strata-action) .42 c h);
      text-decoration: none;
    }
    [data-theme="dark"] .hy-simcta a { color: oklch(from var(--strata-action) .80 c h); }
    .hy-simcta a:hover { text-decoration: underline; }

    /* Hero inline-capture: the email form IS the primary hero action.
       Reuses the .lp-form / .gp-pill kit; this just tightens spacing and
       keeps the secondary demo link subordinate beneath it. */
    .hy-hero__capture { margin-top: var(--strata-sp-5); max-width: 32rem; }
    .hy-hero__secondary {
      margin-top: var(--strata-sp-3);
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--strata-font-body);
      font-weight: 600;
      font-size: var(--strata-text-sm);
      color: oklch(from var(--strata-action) .42 c h);
      text-decoration: none;
    }
    [data-theme="dark"] .hy-hero__secondary { color: oklch(from var(--strata-action) .82 c h); }
    .hy-hero__secondary:hover { text-decoration: underline; }

    /* ================================================================
       SELF-SELECTION + reusable section helpers.
       ================================================================ */
    .hy-center { text-align: center; margin-inline: auto; }

    /* ================================================================
       BENTO MOSAIC v3 (page-local). Honors the aspect ratios from the layout
       JSON: a fixed 6-col grid; each card sets grid-column:span C + grid-row:
       span R, so its SHAPE is exactly what Ramon set in the editor. Content is
       fitted to that fixed box: sim cards show a CHROME-LESS, header-less CROP
       of the app screen (a highlight faded at the bottom) with a "+" that opens
       the walkthrough; NO icon badges (sim cards are plain, the sim is the
       visual; idea + statement cards get a faint watermark glyph). No JS: the
       grid is purely declarative. Responsive 6 -> 4 -> 2 cols.
       ================================================================ */
    .hy-bento2 {
      --hy-cols: 6;
      --hy-row: 60px;
      display: grid;
      grid-template-columns: repeat(var(--hy-cols), minmax(0, 1fr));
      grid-auto-rows: var(--hy-row);
      grid-auto-flow: row dense;
      gap: clamp(12px, 1.5vw, 16px);
    }
    .hy-bento2 > * { min-width: 0; }

    /* THE CARD fills its grid area exactly and clips content to the radius. */
    .hy-bcard {
      position: relative;
      display: flex; flex-direction: column;
      min-width: 0; height: 100%;
      padding: clamp(14px, 1.5vw, 18px);
      border-radius: var(--strata-r-xl);
      background: var(--strata-surface-2);
      border: 1px solid var(--strata-border-color);
      box-shadow: var(--strata-shadow-2);
      color: var(--strata-text-1);
      overflow: hidden;
    }
    .hy-bcard__texthead { position: relative; z-index: 1; min-width: 0; }
    .hy-bcard__kicker {
      margin: 0 0 3px;
      font-size: var(--strata-text-xs); font-weight: 700;
      letter-spacing: 0.045em; text-transform: uppercase;
      color: var(--strata-action); overflow-wrap: anywhere;
    }
    [data-theme="dark"] .hy-bcard__kicker { color: oklch(from var(--strata-action) .82 c h); }
    .hy-bcard__title {
      margin: 0;
      font-family: var(--strata-font-body); font-weight: 700;
      font-size: var(--strata-text-lg); line-height: 1.2;
      color: var(--strata-text-1); min-width: 0; overflow-wrap: anywhere; text-wrap: balance;
    }
    .hy-bcard__body {
      margin: 6px 0 0; color: var(--strata-text-2);
      font-size: var(--strata-text-sm); line-height: 1.45;
      overflow-wrap: anywhere; text-wrap: pretty;
    }

    /* SIM CROP: fills the remaining height, clips to a highlight, fades out at
       the bottom edge (there is more inside the app). Chrome-less + header-less. */
    .hy-bcard__sim {
      position: relative; flex: 1 1 auto; min-height: 0;
      margin-top: var(--strata-sp-3); overflow: hidden;
    }
    .hy-bcard__sim::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40px;
      background: linear-gradient(transparent, var(--strata-surface-2));
      pointer-events: none; z-index: 2;
    }
    .hy-bcard--aura .hy-bcard__sim::after { background: linear-gradient(transparent, var(--strata-surface-3)); }
    .hy-bcard__sim [data-lgp-sim-mini] { display: block; min-width: 0; }
    .hy-bcard__sim .lgpsim-head { display: none; }            /* redundant in the crop */
    .hy-bcard__sim .lgpsim-card { box-shadow: none; }         /* flat, chrome-less */

    /* "+" affordance opens the walkthrough modal (replaces the CTA row). */
    .hy-bcard__plus {
      position: absolute; top: 10px; right: 10px; z-index: 4;
      width: 30px; height: 30px; flex: none; padding: 0;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: var(--strata-r-full);
      border: 1px solid color-mix(in srgb, var(--strata-action) 18%, var(--strata-border-color));
      background: color-mix(in srgb, var(--strata-action) 10%, var(--strata-surface-1));
      color: var(--strata-action); cursor: pointer; font-size: 16px;
      box-shadow: var(--strata-shadow-1);
      transition: transform var(--strata-t-fast), background var(--strata-t-fast);
    }
    .hy-bcard__plus:hover { transform: translateY(-1px); background: var(--strata-primary-glass); }
    .hy-bcard__plus:focus-visible { outline: var(--strata-focus-width) solid var(--strata-primary); outline-offset: 2px; }
    [data-theme="dark"] .hy-bcard__plus { color: oklch(from var(--strata-action) .82 c h); }

    /* WATERMARK glyph (idea + statement cards): large, very faint, no badge bg
       (Ramon 2026-06-29: reduce the icon's strength). */
    .hy-bcard__wm {
      position: absolute; right: -6px; bottom: -12px; z-index: 0;
      font-size: 84px; line-height: 1;
      color: color-mix(in srgb, var(--strata-action) 7%, transparent);
      pointer-events: none;
    }
    [data-theme="dark"] .hy-bcard__wm { color: color-mix(in srgb, var(--strata-action) 13%, transparent); }
    .hy-bcard--statement .hy-bcard__title { font-size: var(--strata-text-xl); }
    /* Idea cards: the text only fills ~60% of the card, so center it and let it
       breathe a touch (Ramon 2026-06-29: a small margin, a bit less tight). */
    .hy-bcard--idea { justify-content: center; padding: clamp(16px, 1.8vw, 20px); }
    .hy-bcard--idea .hy-bcard__title { line-height: 1.28; }
    .hy-bcard--idea .hy-bcard__body { margin-top: 8px; line-height: 1.55; }

    /* AURA cards (Values, Cascade, Summit): animated gradient ring + glow. */
    @property --hy-aura { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
    @keyframes hy-auraSpin { to { --hy-aura: 360deg; } }
    .hy-bcard--aura {
      border-color: transparent;
      background:
        radial-gradient(130% 110% at 0% 0%, color-mix(in srgb, var(--strata-action) 9%, transparent), transparent 60%),
        var(--strata-surface-3);
      box-shadow: var(--strata-shadow-4), 0 22px 60px -28px color-mix(in srgb, var(--strata-action) 55%, transparent);
    }
    .hy-bcard--aura::before {
      content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.6px;
      background: conic-gradient(from var(--hy-aura), #0066ff, #00b4d8, #7c5cff, #0066ff);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
              mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor; mask-composite: exclude;
      pointer-events: none; z-index: 3;
    }
    @media (prefers-reduced-motion: no-preference) { .hy-bcard--aura::before { animation: hy-auraSpin 9s linear infinite; } }

    /* THEME card (interactive, compact): kicker + title + a thin tinted preview
       bar + a wrapping row of swatch dots (re-tints the bar only, in JS). */
    .hy-themes {
      position: relative; display: flex; flex-direction: column; gap: var(--strata-sp-2);
      min-width: 0; height: 100%;
      padding: clamp(14px, 1.5vw, 18px);
      border-radius: var(--strata-r-xl);
      background:
        radial-gradient(130% 110% at 100% 0%, color-mix(in srgb, var(--strata-action) 14%, transparent), transparent 60%),
        var(--strata-surface-1);
      border: 1px solid var(--strata-glass-border);
      box-shadow: var(--strata-shadow-3);
      overflow: hidden;
    }
    .hy-themes__title {
      margin: 0; font-family: var(--strata-font-body); font-weight: 700;
      font-size: var(--strata-text-base); line-height: 1.2; color: var(--strata-text-1); text-wrap: balance;
    }
    .hy-themes__sub { margin: 0; color: var(--strata-text-2); font-size: var(--strata-text-xs); line-height: 1.4; }
    /* MORPHING theme button: one pill that crossfades through the palette
       gradients (~1.6s each), the name morphing too. Two stacked bg layers
       cross-fade via opacity (gradients do not interpolate). JS-driven; static
       under reduced motion. Decorative showcase of "26 themes". */
    .hy-themebtn {
      position: relative; overflow: hidden; isolation: isolate;
      margin-top: auto; align-self: stretch;   /* fixed width = card width, so it never jumps as the name changes */
      display: flex; align-items: center; justify-content: center; gap: 7px;
      padding: 9px 12px; border-radius: var(--strata-r-full);
      border: 1px solid var(--strata-glass-border);
      color: #fff; font-weight: 700; font-size: var(--strata-text-sm);
      cursor: pointer; box-shadow: var(--strata-shadow-3);
      transition: transform var(--strata-t-fast);
    }
    .hy-themebtn:hover { transform: translateY(-1px); }
    .hy-themebtn:focus-visible { outline: var(--strata-focus-width) solid var(--strata-primary); outline-offset: 2px; }
    .hy-themebtn__bg { position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 0.7s ease; }
    .hy-themebtn__bg.is-on { opacity: 1; }
    .hy-themebtn__ico { flex: none; font-size: 15px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25)); }
    .hy-themebtn__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0,0,0,0.25); }

    /* Responsive: 6 -> 4 -> 2 cols; the base row eases down on phones. */
    @media (max-width: 1024px) { .hy-bento2 { --hy-cols: 4; } }
    @media (max-width: 600px) { .hy-bento2 { --hy-cols: 2; --hy-row: 54px; } }
    @media (max-width: 420px) {
      .hy-bento2 { --hy-cols: 2; }
      .hy-bento2 > .is-narrow { grid-column: span 2 !important; }
    }

    /* ================================================================
       CASCADE HERO-MOMENT: the page's signature interactive section. One big
       line, then a STEPPER the user drives through Year -> Today. The trail
       (steps above the active one) stays lit to show focus inheriting down.
       Full-bleed feel via a calm framed panel; one accent (the active step).
       ================================================================ */
    .hy-cascade { position: relative; overflow: hidden; isolation: isolate; }
    .hy-cascade__sky {
      position: absolute; inset: 0; z-index: 0; pointer-events: none;
      background:
        radial-gradient(80% 70% at 80% 0% in oklch,
          oklch(from var(--strata-action) 0.72 calc(c * 1.05) h / 0.20), transparent 66%),
        var(--strata-mesh, var(--strata-bg-grad));
      opacity: 0.5;
    }
    .hy-cascade > .lp-wrap { position: relative; z-index: 1; }
    .hy-cascade__head { max-width: 40rem; margin: 0 auto clamp(28px, 4vw, 44px); text-align: center; }
    .hy-cascade__head h2 { margin: 0 0 var(--strata-sp-3); }
    .hy-cascade__head p {   /* clear, readable intro (Ramon: it read too tiny) */
      margin: 0 auto; max-width: 46rem;
      font-size: clamp(1.05rem, 1rem + 0.45vw, 1.2rem);
      line-height: 1.6; color: var(--strata-text-2);
    }
    /* Maya persona figure beside the cascade STEPPER (Ramon 2026-06-29: next to
       the screen, not the heading). Sits to the right of the stepper on desktop,
       and moves above it on narrow screens. */
    .hy-cascade__stage { display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); }
    .hy-cascade__stage .hy-stepper { flex: 1 1 auto; min-width: 0; }
    .hy-persona { flex: none; margin: 0; text-align: center; width: clamp(120px, 15vw, 172px); }
    .hy-persona__img { width: 100%; height: auto; display: block; filter: drop-shadow(0 14px 26px rgba(0,0,0,0.16)); }
    .hy-persona__cap {
      margin-top: var(--strata-sp-2);
      font-family: var(--strata-font-body); font-weight: 700;
      font-size: var(--strata-text-sm); line-height: 1.2; color: var(--strata-text-1);
    }
    .hy-persona__cap span { display: block; font-weight: 500; font-size: var(--strata-text-xs); color: var(--strata-text-2); }
    @media (max-width: 860px) {
      .hy-cascade__stage { flex-direction: column; align-items: center; }
      .hy-persona { order: -1; width: 104px; }
    }

    .hy-stepper {
      display: grid;
      grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
      gap: clamp(16px, 3vw, 40px);
      align-items: stretch;
      max-width: 60rem;
      margin-inline: auto;
      padding: clamp(18px, 2.6vw, 30px);
      border-radius: var(--strata-r-2xl);
      background: color-mix(in srgb, var(--strata-surface-3) 70%, transparent);
      border: 1px solid var(--strata-glass-border);
      box-shadow: var(--strata-shadow-5);
      -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    }
    /* Left: the vertical step rail (the trail). Nine levels, so it can run tall;
       it scrolls within a capped height rather than pushing the panel huge. */
    .hy-stepper__rail {
      display: flex; flex-direction: column; gap: 4px; min-width: 0;
      max-height: clamp(380px, 56vh, 560px);
      overflow-y: auto; overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
    }
    .hy-step {
      position: relative;
      display: flex;
      align-items: center;
      gap: var(--strata-sp-3);
      width: 100%;
      padding: 10px 14px;
      border: 1px solid transparent;
      border-radius: var(--strata-r-md);
      background: transparent;
      cursor: pointer;
      text-align: left;
      transition: background var(--strata-t-fast), border-color var(--strata-t-fast);
    }
    .hy-step__dot {
      width: 42px; height: 42px;
      flex: none;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: var(--strata-squircle-fallback);
      -webkit-clip-path: url(#strata-squircle);
              clip-path: url(#strata-squircle);
      font-size: 21px;
      color: var(--strata-text-2);
      background: var(--strata-surface-2);
      border: 1px solid var(--strata-border-color);
      transition: background var(--strata-t-base), color var(--strata-t-base), transform var(--strata-t-base);
    }
    .hy-step__txt { display: flex; flex-direction: column; min-width: 0; }
    .hy-step__lvl { font-weight: 700; font-size: var(--strata-text-sm); color: var(--strata-text-1); }
    .hy-step__when { font-size: var(--strata-text-xs); color: var(--strata-text-3); }
    /* connector line down the rail (aligned to the centre of the 42px dot) */
    .hy-step:not(:last-child)::after {
      content: "";
      position: absolute;
      left: 34px; top: 54px;
      width: 2px; height: calc(100% - 42px);
      background: var(--strata-border-color);
      transition: background var(--strata-t-base);
    }
    .hy-step:hover { background: var(--strata-surface-2); }
    /* "lit" = this step is at or above the active one (focus has reached it). */
    .hy-step.is-lit .hy-step__dot { background: var(--strata-action-grad); color: #fff; border-color: transparent; }
    .hy-step.is-lit:not(:last-child)::after { background: var(--strata-action); }
    .hy-step.is-active {
      background: var(--strata-primary-glass);
      border-color: color-mix(in srgb, var(--strata-action) 30%, transparent);
    }
    .hy-step.is-active .hy-step__dot { transform: scale(1.12); box-shadow: 0 4px 12px rgba(0,102,255,0.32); }
    .hy-step:focus-visible { outline: var(--strata-focus-width) solid var(--strata-primary); outline-offset: 2px; }

    /* Right: the panel that reveals the active level's focus. With nine levels
       the rail can be tall; centre the card's content so the panel never reads
       as a near-empty box on the upstream (short) levels. */
    .hy-stepper__panel {
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: var(--strata-sp-4);
      padding: clamp(22px, 2.8vw, 34px);
      border-radius: var(--strata-r-xl);
      background: var(--strata-surface-3);
      border: 1px solid var(--strata-border-color);
      box-shadow: var(--strata-shadow-2);
    }
    .hy-panelcard { display: flex; flex-direction: column; gap: var(--strata-sp-3); }
    /* Header: a real icon badge (squircle) + the level name as plain text.
       NO pill chip (Ramon 2026-06-28: no chips on the content cards). */
    .hy-panelcard__head { display: flex; align-items: center; gap: var(--strata-sp-3); }
    .hy-panelcard__badge {
      width: 54px; height: 54px; flex: none;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: var(--strata-squircle-fallback);
      -webkit-clip-path: url(#strata-squircle);
              clip-path: url(#strata-squircle);
      font-size: 28px; color: #fff;
      background: var(--strata-action-grad);
      box-shadow: 0 6px 16px rgba(0,102,255,0.28);
    }
    .hy-panelcard__eyebrow { display: flex; flex-direction: column; min-width: 0; }
    .hy-panelcard__level {
      font-family: var(--strata-font-body);
      font-weight: 800; font-size: 1.06rem; line-height: 1.15;
      color: var(--strata-text-1);
    }
    .hy-panelcard__role { font-size: var(--strata-text-sm); color: var(--strata-text-2); }
    /* The headline speaks for itself (no generic "what matters most"). */
    .hy-panelcard__head2 {
      margin: 2px 0 0;
      font-family: var(--strata-font-display);
      font-style: italic; font-weight: 700;
      font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.85rem);
      line-height: 1.18;
      color: var(--strata-text-1);
    }
    /* Maya's concrete entry at this level (the prominent statement). */
    .hy-panelcard__example {
      margin: 0;
      font-family: var(--strata-font-body); font-weight: 600;
      font-size: 18px; line-height: 1.5;
      color: var(--strata-text-1);
      overflow-wrap: anywhere;
    }
    /* Rich detail: her thinking + how it connects. A full-perimeter tinted
       surface (NO one-side border / hairline), two labeled lines. */
    .hy-panelcard__detail {
      display: flex; flex-direction: column; gap: var(--strata-sp-3);
      padding: var(--strata-sp-4);
      border-radius: var(--strata-r-lg);
      background: var(--strata-surface-2);
      border: 1px solid var(--strata-border-color);
    }
    .hy-panelcard__row {
      margin: 0;
      font-size: 15px; line-height: 1.55;
      color: var(--strata-text-2);
      overflow-wrap: anywhere;
    }
    .hy-panelcard__row strong { color: var(--strata-text-1); }
    .hy-panelcard__lbl {
      display: inline-flex; align-items: center; gap: 6px;
      margin-right: 8px;
      font-size: var(--strata-text-xs); font-weight: 800;
      text-transform: uppercase; letter-spacing: 0.05em;
      color: oklch(from var(--strata-action) .42 c h);
    }
    .hy-panelcard__lbl i { font-size: 14px; }
    [data-theme="dark"] .hy-panelcard__lbl { color: oklch(from var(--strata-action) .82 c h); }
    /* The panel content fades+rises a touch on change (transform/opacity only). */
    .hy-panelcard { animation: hyPanelIn var(--strata-t-base) ease both; }
    @keyframes hyPanelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
    .hy-stepper__hint { margin: var(--strata-sp-4) 0 0; text-align: center; font-size: var(--strata-text-sm); color: var(--strata-text-2); }

    @media (max-width: 720px) {
      .hy-stepper { grid-template-columns: minmax(0, 1fr); }
    }
    @media (prefers-reduced-motion: reduce) {
      .hy-panelcard { animation: none; }
    }

    /* ================================================================
       STYLISH + / x EXPANDER (replaces <details>). A circular icon button
       pinned top-right of an expandable card; "+" rotates into "x" when open.
       The panel animates its max-height (motion-safe via the shared kit).
       ================================================================ */
    .hy-bcard { position: relative; }   /* anchor for the absolute button */
    .hy-xpand__btn {
      position: absolute;
      top: clamp(12px, 1.6vw, 16px);
      right: clamp(12px, 1.6vw, 16px);
      z-index: 2;
      width: 30px; height: 30px;
      flex: none;
      display: inline-flex; align-items: center; justify-content: center;
      padding: 0;
      border: 1px solid var(--strata-border-color);
      border-radius: var(--strata-r-full);
      background: var(--strata-surface-3);
      color: oklch(from var(--strata-action) .42 c h);
      cursor: pointer;
      box-shadow: var(--strata-shadow-1);
      transition: transform var(--strata-t-fast), background var(--strata-t-fast), color var(--strata-t-fast);
    }
    .hy-xpand__btn:hover { background: var(--strata-primary-glass); transform: translateY(-1px); }
    .hy-xpand__btn:focus-visible { outline: var(--strata-focus-width) solid var(--strata-primary); outline-offset: 2px; }
    .hy-xpand__btn i { font-size: 18px; transition: transform var(--strata-t-base); }
    /* "+" rotates 135deg into an "x" when expanded. */
    .hy-xpand__btn[aria-expanded="true"] {
      background: var(--strata-action);
      color: #fff;
      border-color: transparent;
    }
    .hy-xpand__btn[aria-expanded="true"] i { transform: rotate(135deg); }
    /* Keep the title clear of the button. */
    .hy-bcard--xpand .hy-bcard__head,
    .hy-bcard--xpand > .hy-bcard__title { padding-right: 38px; }
    /* The detail panel: collapsed by default, animates max-height open. */
    .hy-xpand__panel {
      max-height: 0;
      overflow: hidden;
      transition: max-height var(--strata-t-base);
    }
    .hy-xpand__panel-inner {
      margin-top: var(--strata-sp-3);
      padding-top: var(--strata-sp-3);
      border-top: var(--strata-border);
      color: var(--strata-text-2);
      font-size: var(--strata-text-sm);
      line-height: 1.55;
      overflow-wrap: anywhere;
    }

    /* Apple-style "+" PILL that opens the modal walkthrough (item #13). A soft
       translucent surface pill carrying the label + a filled brand-blue circular
       "+" badge on the right ("Explore the line-up" pattern). Quiet by default,
       a subtle lift on hover; the blue badge reads as the actionable thing. */
    .hy-walkcta {
      align-self: flex-start;
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin-top: var(--strata-sp-1);
      padding: 7px 7px 7px 16px;
      background: color-mix(in srgb, var(--strata-action) 8%, var(--strata-surface-1));
      border: 1px solid color-mix(in srgb, var(--strata-action) 16%, var(--strata-border-color));
      border-radius: var(--strata-r-full);
      cursor: pointer;
      font-family: var(--strata-font-body);
      font-weight: 700;
      font-size: var(--strata-text-sm);
      line-height: 1;
      color: oklch(from var(--strata-action) .42 c h);
      box-shadow: var(--strata-shadow-1);
      transition: transform var(--strata-t-fast), background var(--strata-t-fast), box-shadow var(--strata-t-fast), border-color var(--strata-t-fast);
    }
    [data-theme="dark"] .hy-walkcta { color: oklch(from var(--strata-action) .82 c h); }
    /* The circular "+" badge: filled brand blue, white plus glyph. */
    .hy-walkcta__plus {
      flex: none;
      width: 26px; height: 26px;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: var(--strata-r-full);
      background: var(--strata-action-grad);
      color: #fff;
      font-size: 15px;
      box-shadow: 0 3px 8px rgba(0,102,255,0.30);
      transition: transform var(--strata-t-base);
    }
    .hy-walkcta:hover {
      transform: translateY(-1px);
      background: color-mix(in srgb, var(--strata-action) 13%, var(--strata-surface-1));
      border-color: color-mix(in srgb, var(--strata-action) 26%, var(--strata-border-color));
      box-shadow: var(--strata-shadow-2);
    }
    .hy-walkcta:hover .hy-walkcta__plus { transform: rotate(90deg); }
    .hy-walkcta:focus-visible { outline: var(--strata-focus-width) solid var(--strata-primary); outline-offset: 2px; }
    @media (prefers-reduced-motion: reduce) {
      .hy-walkcta, .hy-walkcta__plus { transition: none; }
      .hy-walkcta:hover { transform: none; }
      .hy-walkcta:hover .hy-walkcta__plus { transform: none; }
    }

    /* ================================================================
       MODAL WALKTHROUGH + SCREEN SLIDER (reusable). Opens from a feature
       card; inside, a carousel of JS-simulated app screens with a caption
       per step. Focus-trapped, Esc-to-close, prev/next + dots, keyboard +
       swipe. Never auto-rotates (user-driven). Reduced-motion = instant.
       ================================================================ */
    .hy-modal {
      position: fixed;
      inset: 0;
      z-index: 200;
      display: none;
      align-items: center;
      justify-content: center;
      padding: clamp(12px, 3vw, 32px);
      background: color-mix(in srgb, #0b0d18 64%, transparent);
      -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    }
    .hy-modal.is-open { display: flex; animation: hyFade var(--strata-t-fast) ease both; }
    @keyframes hyFade { from { opacity: 0; } to { opacity: 1; } }
    .hy-modal__dialog {
      position: relative;
      width: 100%;
      max-width: 560px;
      max-height: 92vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      border-radius: var(--strata-r-2xl);
      background: var(--strata-surface-3);
      border: 1px solid var(--strata-glass-border);
      box-shadow: var(--strata-shadow-8);
    }
    .hy-modal.is-open .hy-modal__dialog { animation: hyPop var(--strata-t-base) cubic-bezier(.2,.7,.3,1) both; }
    @keyframes hyPop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
    .hy-modal__head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--strata-sp-3);
      padding: clamp(16px, 2.4vw, 22px) clamp(16px, 2.4vw, 22px) var(--strata-sp-3);
    }
    .hy-modal__titles { min-width: 0; }
    .hy-modal__eyebrow {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: var(--strata-text-xs); font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.06em;
      color: oklch(from var(--strata-action) .42 c h);
    }
    .hy-modal__title {
      margin: 4px 0 0;
      font-family: var(--strata-font-display);
      font-style: italic; font-weight: 900;
      font-size: var(--strata-text-2xl);
      color: var(--strata-text-1);
      overflow-wrap: anywhere;
    }
    .hy-modal__close {
      flex: none;
      width: 38px; height: 38px;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: var(--strata-r-full);
      border: 1px solid var(--strata-border-color);
      background: var(--strata-surface-2);
      color: var(--strata-text-1);
      cursor: pointer;
      font-size: 20px;
      transition: background var(--strata-t-fast);
    }
    .hy-modal__close:hover { background: var(--strata-surface-1); }
    .hy-modal__close:focus-visible { outline: var(--strata-focus-width) solid var(--strata-primary); outline-offset: 2px; }
    /* The slider viewport: shows one slide; a track translates between slides. */
    /* The slider is the dialog's flexible middle: it grows to fill the space
       between the fixed header and footer, and scrolls VERTICALLY when a slide
       is taller than the room available (so a tall screen never clips its
       caption on a short laptop). Horizontal stays clipped for the carousel. */
    .hy-slider { padding: 0 clamp(16px, 2.4vw, 22px); min-width: 0; flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; }
    .hy-slider__viewport { overflow: hidden; min-width: 0; }
    .hy-slider__track {
      display: flex;
      transition: transform var(--strata-t-base) cubic-bezier(.2,.7,.3,1);
      will-change: transform;
    }
    .hy-slide {
      flex: 0 0 100%;
      min-width: 0;
      /* Inset the card within the slide so its OWN drop shadow has room before
         the carousel's overflow:hidden clip (Ramon 2026-06-28: shadows clipped
         on the sides). Paired with a tighter frame shadow just below. */
      padding: 8px clamp(20px, 3.5vw, 28px);
    }
    .hy-slide__sim { min-width: 0; }
    /* The app-screen frame normally wears the big shadow-6; inside the narrow
       carousel that gets side-clipped, so use a tighter shadow that fits the
       inset above. (The bare infographic cards already use shadow-3.) */
    .hy-slide .lgpsim-card { box-shadow: var(--strata-shadow-3); }
    .hy-slide__cap {
      margin: var(--strata-sp-6) 0 0;   /* more breathing room below the frame */
      font-family: var(--strata-font-body);
      font-weight: 500;
      font-size: 16px;
      line-height: 1.5;
      color: var(--strata-text-2);
      min-height: 3.6em;
      overflow-wrap: anywhere;
    }
    /* The bold lead sits on its own line; the explanation follows beneath. */
    .hy-slide__cap strong { display: block; margin-bottom: 4px; color: var(--strata-text-1); }
    /* Controls row: prev/next + dots + step count. */
    .hy-modal__foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--strata-sp-3);
      padding: var(--strata-sp-3) clamp(16px, 2.4vw, 22px) clamp(16px, 2.4vw, 22px);
    }
    .hy-modal__dots { display: inline-flex; gap: 7px; min-width: 0; flex-wrap: wrap; }
    .hy-modal__dot {
      min-width: 27px; height: 27px; padding: 0 6px;
      display: inline-flex; align-items: center; justify-content: center;
      border: 1px solid var(--strata-border-color);
      border-radius: var(--strata-r-full);
      background: var(--strata-surface-2);
      color: var(--strata-text-2);
      font-family: var(--strata-font-body); font-weight: 700; font-size: var(--strata-text-xs);
      cursor: pointer;
      transition: background var(--strata-t-fast), color var(--strata-t-fast), border-color var(--strata-t-fast);
    }
    .hy-modal__dot:hover { background: var(--strata-surface-3); }
    .hy-modal__dot.is-active { background: var(--strata-action); border-color: transparent; color: #fff; }
    .hy-modal__dot:focus-visible { outline: var(--strata-focus-width) solid var(--strata-primary); outline-offset: 2px; }
    .hy-modal__navs { display: inline-flex; align-items: center; gap: var(--strata-sp-2); flex: none; }
    .hy-modal__nav {
      width: 40px; height: 40px;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: var(--strata-r-full);
      border: 1px solid var(--strata-border-color);
      background: var(--strata-surface-2);
      color: var(--strata-text-1);
      cursor: pointer;
      font-size: 18px;
      transition: background var(--strata-t-fast), opacity var(--strata-t-fast);
    }
    .hy-modal__nav:hover { background: var(--strata-primary-glass); }
    .hy-modal__nav:focus-visible { outline: var(--strata-focus-width) solid var(--strata-primary); outline-offset: 2px; }
    .hy-modal__nav[disabled] { opacity: 0.4; cursor: default; }
    @media (prefers-reduced-motion: reduce) {
      .hy-modal.is-open, .hy-modal.is-open .hy-modal__dialog { animation: none; }
      .hy-slider__track { transition: none; }
    }
    @media (prefers-reduced-transparency: reduce) {
      .hy-modal { background: color-mix(in srgb, #0b0d18 85%, transparent); -webkit-backdrop-filter: none; backdrop-filter: none; }
    }

    /* ================================================================
       SHIFT: before -> after, REVEALED ON SCROLL (Ramon 2026-06-29: no drag).
       Two stacked panes; the "after" fades + rises in when it scrolls into view.
       Big Loretta watermark labels ("Before" / "After"). No badges, no hint.
       ================================================================ */
    .hy-shift { max-width: 60rem; margin-inline: auto; display: flex; flex-direction: column; gap: clamp(16px, 3vw, 28px); }
    .hy-shift__pane {
      position: relative; overflow: hidden;
      padding: clamp(24px, 4vw, 44px);
      border-radius: var(--strata-r-2xl);
      border: 1px solid var(--strata-glass-border);
      box-shadow: var(--strata-shadow-3);
    }
    .hy-shift__pane--before { background: radial-gradient(90% 90% at 15% 20% in oklch, oklch(0.62 0.13 28 / 0.16), transparent 70%), var(--strata-surface-2); }
    .hy-shift__pane--after  { background: radial-gradient(90% 90% at 85% 30% in oklch, oklch(from var(--strata-action) 0.72 calc(c * 1.05) h / 0.20), transparent 70%), var(--strata-surface-3); }
    .hy-shift__wm {
      position: absolute; top: -0.16em; right: 0.08em; z-index: 0;
      font-family: var(--strata-font-display); font-style: italic; font-weight: 700;
      font-size: clamp(3.4rem, 1.6rem + 8vw, 7.5rem); line-height: 1;
      pointer-events: none; user-select: none;
    }
    .hy-shift__pane--before .hy-shift__wm { color: oklch(0.62 0.13 28 / 0.13); }
    .hy-shift__pane--after  .hy-shift__wm { color: color-mix(in srgb, var(--strata-action) 13%, transparent); }
    .hy-shift__line {
      position: relative; z-index: 1; margin: 0; max-width: 36rem;
      font-family: var(--strata-font-display); font-style: italic; font-weight: 600;
      font-size: clamp(1.25rem, 1rem + 1.2vw, 1.8rem); line-height: 1.25;
      color: var(--strata-text-1); overflow-wrap: anywhere;
    }
    .hy-shift__sub { position: relative; z-index: 1; margin: var(--strata-sp-2) 0 0; max-width: 32rem; font-size: var(--strata-text-sm); color: var(--strata-text-2); overflow-wrap: anywhere; }
    .hy-shift__pane--after { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
    .hy-shift.is-revealed .hy-shift__pane--after { opacity: 1; transform: none; }
    @media (prefers-reduced-motion: reduce) { .hy-shift__pane--after { opacity: 1; transform: none; transition: none; } }

    /* ================================================================
       THEME SWITCHER CARD ("Make it yours"): 6 palette swatches + reset.
       Clicking sets data-strata-palette on <html> to restyle the whole page
       + sims live. Reads as a vivid, interactive showcase tile.
       ================================================================ */
    .hy-themes {
      display: flex;
      flex-direction: column;
      gap: var(--strata-sp-3);
      min-width: 0;
      padding: clamp(16px, 2vw, 22px);
      border-radius: var(--strata-r-xl);
      background:
        radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--strata-action) 16%, transparent), transparent 60%),
        var(--strata-surface-1);
      border: 1px solid var(--strata-glass-border);
      box-shadow: var(--strata-shadow-4);
      -webkit-backdrop-filter: blur(var(--strata-glass-blur));
              backdrop-filter: blur(var(--strata-glass-blur));
    }
    .hy-themes__title {
      margin: 0;
      font-family: var(--strata-font-display);
      font-style: italic;
      font-weight: 600;
      font-size: var(--strata-text-xl);
      color: var(--strata-text-1);
    }
    .hy-themes__sub { margin: 0; color: var(--strata-text-2); font-size: var(--strata-text-sm); line-height: 1.5; }

    /* Live preview strip: a small gradient panel + a sample CTA pill, both
       tinted by the ACTIVE --strata-mesh / --strata-action, so they re-tint
       instantly when a swatch is chosen (immediate local feedback). */
    .hy-preview {
      display: flex;
      align-items: center;
      gap: var(--strata-sp-3);
      padding: var(--strata-sp-2);
      border-radius: var(--strata-r-md);
      background: var(--strata-mesh, var(--strata-bg-grad));
      border: 1px solid var(--strata-glass-border);
      transition: background var(--strata-t-base);
    }
    .hy-preview__panel {
      width: 38%;
      min-width: 0;
      align-self: stretch;
      min-height: 34px;
      border-radius: var(--strata-r-sm);
      background: color-mix(in srgb, var(--strata-surface-3) 55%, transparent);
      border: 1px solid var(--strata-glass-border);
      -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    }
    .hy-preview__pill {
      flex: 1 1 auto;
      min-width: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 8px 14px;
      border-radius: var(--strata-r-full);
      font-size: var(--strata-text-sm);
      font-weight: 700;
      color: #fff;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      background: var(--strata-action-grad);
      box-shadow: 0 4px 12px color-mix(in srgb, var(--strata-action) 40%, transparent);
      transition: background var(--strata-t-base), box-shadow var(--strata-t-base);
    }
    .hy-preview__pill i { flex: none; }

    /* Swatch list: name-labeled rows in 2 columns; each chip shows the REAL
       palette mesh gradient (set inline from strata-palettes.css values). */
    .hy-swatches {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--strata-sp-2);
      margin-top: var(--strata-sp-1);
    }
    .hy-swatch {
      display: flex;
      align-items: center;
      gap: var(--strata-sp-2);
      min-width: 0;
      padding: 5px 8px 5px 5px;
      border: 1px solid var(--strata-border-color);
      border-radius: var(--strata-r-full);
      background: var(--strata-surface-3);
      cursor: pointer;
      text-align: left;
      transition: transform var(--strata-t-fast), box-shadow var(--strata-t-fast), border-color var(--strata-t-fast);
    }
    .hy-swatch:hover { transform: translateY(-1px); box-shadow: var(--strata-shadow-2); }
    .hy-swatch:focus-visible { outline: var(--strata-focus-width) solid var(--strata-primary); outline-offset: 2px; }
    .hy-swatch[aria-pressed="true"] {
      border-color: var(--strata-action);
      box-shadow: inset 0 0 0 1px var(--strata-action);
    }
    .hy-swatch__chip {
      position: relative;
      width: 26px; height: 26px;
      flex: none;
      border-radius: var(--strata-r-full);
      border: 1px solid var(--strata-glass-border);
      box-shadow: var(--strata-shadow-1);
    }
    .hy-swatch__chip--reset {
      display: inline-flex; align-items: center; justify-content: center;
      color: #fff; font-size: 13px;
    }
    .hy-swatch[aria-pressed="true"] .hy-swatch__chip::after {
      content: "\2713";
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      color: #fff; font-weight: 800; font-size: 13px;
      text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    }
    .hy-swatch__name {
      min-width: 0;
      font-size: var(--strata-text-xs);
      font-weight: 600;
      color: var(--strata-text-1);
      overflow-wrap: anywhere;
      line-height: 1.2;
    }

    /* ================================================================
       FOUR RULES OF THE ASCENT (foundation strip). 4 columns on desktop,
       stacks on mobile. Each rule: a numbered chip + a short bold title +
       a one-line body (DM Sans 500/18/1.5). Framed as the foundation the
       app is built on. Same-level cells share an equal internal recipe.
       ================================================================ */
    .hy-rules {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: clamp(14px, 2vw, 22px);
      align-items: stretch;
    }
    /* The four-rules cards, in the homepage idiom: a 2x2 grid of equal-height
       cards, each an italic serif rule TITLE (a link to the method page) + a
       short body + a "Keeps: X" pill. Reuses .hy-rule's card surface. */
    .hy-rules--linked {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      max-width: 56rem;
      margin-inline: auto;
    }
    .hy-rule {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: var(--strata-sp-3);
      height: 100%;
      padding: clamp(18px, 2.2vw, 26px);
      border-radius: var(--strata-r-xl);
      background: var(--strata-surface-3);
      border: 1px solid var(--strata-border-color);
      box-shadow: var(--strata-shadow-2);
    }
    .hy-rule__num {
      width: 36px; height: 36px;
      flex: none;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: var(--strata-r-md);
      font-family: var(--strata-font-display);
      font-style: italic;
      font-weight: 900;
      font-size: var(--strata-text-lg);
      color: #fff;
      background: var(--strata-action-grad);
      box-shadow: 0 5px 12px rgba(0,102,255,0.26);
    }
    .hy-rule__title {
      margin: 0;
      font-family: var(--strata-font-body);
      font-weight: 700;
      font-size: var(--strata-text-lg);
      line-height: 1.25;
      color: var(--strata-text-1);
      min-width: 0;
      overflow-wrap: anywhere;
    }
    /* Linked cards: the title is an italic serif (Loretta) link to the method page. */
    .hy-rule__link {
      font-family: var(--strata-font-display);
      font-style: italic;
      font-weight: 800;
      font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
      line-height: 1.18;
      color: var(--strata-text-1);
      text-decoration: none;
      overflow-wrap: anywhere;
      transition: color var(--strata-t-fast);
    }
    .hy-rule__link:hover { color: oklch(from var(--strata-action) .42 c h); text-decoration: underline; }
    .hy-rule__link:focus-visible { outline: var(--strata-focus-width) solid var(--strata-primary); outline-offset: 3px; border-radius: 4px; }
    [data-theme="dark"] .hy-rule__link:hover { color: oklch(from var(--strata-action) .82 c h); }
    .hy-rule__body {
      margin: 0;
      color: var(--strata-text-2);
      font-size: var(--strata-text-base);
      line-height: 1.5;
      overflow-wrap: anywhere;
    }
    /* "Keeps: X" pill — a small rounded chip with a brand-blue dot. */
    .hy-rule__pill {
      align-self: flex-start;
      margin-top: auto;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 5px 11px;
      border-radius: var(--strata-r-full);
      background: var(--strata-primary-glass);
      border: 1px solid color-mix(in srgb, var(--strata-action) 24%, transparent);
      color: oklch(from var(--strata-action) .40 c h);
      font-family: var(--strata-font-body);
      font-size: var(--strata-text-xs);
      font-weight: 600;
      line-height: 1.2;
    }
    [data-theme="dark"] .hy-rule__pill { color: oklch(from var(--strata-action) .82 c h); }
    .hy-rule__pilldot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--strata-action); }
    .hy-rules__more {
      margin-top: clamp(18px, 2.4vw, 28px);
      text-align: center;
    }
    .hy-rules__more a {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--strata-font-body);
      font-weight: 600;
      font-size: var(--strata-text-base);
      color: oklch(from var(--strata-action) .42 c h);
      text-decoration: none;
    }
    [data-theme="dark"] .hy-rules__more a { color: oklch(from var(--strata-action) .82 c h); }
    .hy-rules__more a:hover { text-decoration: underline; }

    /* ================================================================
       THE CLIMB: the 5 phases as ascending stages (a visual spine).
       Every stage shares the SAME internal recipe (number + icon, a
       reserved-height title, body), so the set reads as one staircase
       and a wrapping title never shifts a neighbour's body.
       ================================================================ */
    .hy-climb {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: clamp(12px, 1.8vw, 20px);
      align-items: stretch;
    }
    .hy-stage {
      position: relative;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: var(--strata-sp-3);
      height: 100%;
      padding: clamp(16px, 2vw, 24px);
      border-radius: var(--strata-r-xl);
      background: var(--strata-surface-3);
      border: var(--strata-border);
      box-shadow: var(--strata-shadow-2);
    }
    /* Each stage lifts slightly to suggest the ascent (desktop only). */
    .hy-stage:nth-child(2) { transform: translateY(-10px); }
    .hy-stage:nth-child(3) { transform: translateY(-20px); }
    .hy-stage:nth-child(4) { transform: translateY(-30px); }
    .hy-stage:nth-child(5) {
      transform: translateY(-40px);
      background:
        radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--strata-action) 14%, transparent), transparent 60%),
        var(--strata-surface-3);
      box-shadow: var(--strata-shadow-4);
    }
    .hy-stage__top { display: flex; align-items: center; gap: var(--strata-sp-3); }
    .hy-stage__icon {
      width: 64px; height: 64px;
      flex: none;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: var(--strata-squircle-fallback);
      -webkit-clip-path: url(#strata-squircle);
              clip-path: url(#strata-squircle);
      font-size: 28px;
      color: #fff;
      background: var(--strata-action-grad);
      box-shadow: 0 6px 16px rgba(0,102,255,0.28);
    }
    .hy-stage__title {
      margin: 0;
      min-height: 2.5em;          /* reserve up to 2 lines so bodies align */
      font-family: var(--strata-font-body);
      font-weight: 700;
      font-size: var(--strata-text-lg);
      line-height: 1.25;
      color: var(--strata-text-1);
      overflow-wrap: anywhere;
    }
    .hy-stage__body {
      margin: 0;
      color: var(--strata-text-2);
      /* font-size set by the shared reading-copy block (18px / 16px mobile). */
      line-height: 1.5;
      overflow-wrap: anywhere;
    }

    /* ================================================================
       SUMMIT CAPSTONE: the payoff the five stages climb toward. Ramon
       2026-06-28: the climb must actually REACH the summit, not end at
       insights. A full-width arrival banner after the staircase.
       ================================================================ */
    .hy-summit {
      margin-top: clamp(22px, 3.4vw, 40px);
      display: flex; align-items: center; gap: clamp(16px, 2.4vw, 26px);
      padding: clamp(20px, 2.8vw, 32px) clamp(22px, 3vw, 36px);
      border-radius: var(--strata-r-2xl);
      background:
        radial-gradient(130% 150% at 100% 0%, color-mix(in srgb, var(--strata-action) 18%, transparent), transparent 62%),
        var(--strata-surface-1);
      border: 1px solid var(--strata-glass-border);
      box-shadow: var(--strata-shadow-3);
    }
    .hy-summit__icon {
      width: 66px; height: 66px; flex: none;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: var(--strata-squircle-fallback);
      -webkit-clip-path: url(#strata-squircle);
              clip-path: url(#strata-squircle);
      font-size: 33px; color: #fff;
      background: var(--strata-action-grad);
      box-shadow: 0 6px 18px rgba(0,102,255,0.30);
    }
    .hy-summit__text { min-width: 0; }
    .hy-summit__title {
      margin: 0 0 6px;
      font-family: var(--strata-font-display); font-style: italic; font-weight: 700;
      font-size: clamp(1.4rem, 1.1rem + 1vw, 1.85rem); line-height: 1.15;
      color: var(--strata-text-1);
    }
    .hy-summit__body {
      margin: 0; color: var(--strata-text-2);
      font-size: 18px; line-height: 1.55; overflow-wrap: anywhere;
    }
    @media (max-width: 600px) {
      .hy-summit { flex-direction: column; text-align: center; align-items: center; }
      .hy-summit__body { font-size: 16px; }
    }

    /* ================================================================
       CADENCE RHYTHM (its own section now; editorial 5-column big numbers,
       Ramon 2026-06-29). Wrapping flex so the 5 columns reflow + center on
       small screens; big serif numbers carry it, no chips.
       ================================================================ */
    .hy-cadence {
      display: flex; flex-wrap: wrap; justify-content: center;
      gap: clamp(20px, 4vw, 52px) clamp(16px, 3vw, 40px);
      max-width: 62rem; margin-inline: auto;
    }
    .hy-cadence__col { flex: 1 1 0; min-width: 104px; max-width: 190px; text-align: center; }
    .hy-cadence__num {
      display: block;
      font-family: var(--strata-font-display); font-style: italic; font-weight: 700;
      font-size: clamp(2.6rem, 1.8rem + 2.4vw, 3.6rem); line-height: 1;
      color: var(--strata-action);
    }
    [data-theme="dark"] .hy-cadence__num { color: oklch(from var(--strata-action) .82 c h); }
    .hy-cadence__unit {
      font-style: normal; font-weight: 700; font-size: 0.3em;
      margin-left: 3px; vertical-align: 0.55em; letter-spacing: 0.02em;
      color: var(--strata-text-3);
    }
    .hy-cadence__every {
      display: block; margin-top: var(--strata-sp-3);
      font-family: var(--strata-font-body); font-weight: 700;
      font-size: var(--strata-text-base); color: var(--strata-text-1);
    }
    .hy-cadence__verb { display: block; margin-top: 2px; font-size: var(--strata-text-sm); color: var(--strata-text-2); }
    .hy-beats {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: clamp(10px, 1.6vw, 16px);
    }
    .hy-beat {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding: var(--strata-sp-3);
      border-radius: var(--strata-r-md);
      background: var(--strata-surface-2);
      border: var(--strata-border);
      text-align: center;
    }
    .hy-beat__icon {
      align-self: center;
      width: 42px; height: 42px;
      flex: none;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: var(--strata-squircle-fallback);
      -webkit-clip-path: url(#strata-squircle);
              clip-path: url(#strata-squircle);
      background: var(--strata-action-grad);
      color: #fff;
      font-size: 22px;
      margin-bottom: 4px;
      box-shadow: 0 5px 12px rgba(0,102,255,0.24);
    }
    .hy-beat__every { font-weight: 700; font-size: var(--strata-text-sm); color: var(--strata-text-1); min-width: 0; overflow-wrap: anywhere; }
    .hy-beat__mins { font-size: var(--strata-text-xs); color: var(--strata-text-2); min-width: 0; overflow-wrap: anywhere; }
    .hy-beat__verb { font-size: var(--strata-text-xs); font-weight: 600; color: oklch(from var(--strata-action) .46 c h); min-width: 0; overflow-wrap: anywhere; }

    /* ================================================================
       DEDICATED DEMO BAND (vivid; "see the whole app"). Ends on the
       email ask: the inline capture lives inside this band.
       ================================================================ */
    .hy-demo {
      position: relative;
      overflow: hidden;
      border-radius: var(--strata-r-2xl);
      box-shadow: var(--strata-shadow-5);
      padding: clamp(11px, 1.5vw, 18px);   /* the gradient RING width around the glass card */
    }
    .hy-demo__bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      /* A vivid full OKLCH gradient (brand blue -> cyan -> violet); it shows as a
         ring around the glass card and tints through it (Ramon 2026-06-29). */
      background-image: linear-gradient(135deg in oklch, #0066ff 0%, #00b4d8 50%, #7c5cff 100%);
    }
    /* White-transparent frosted glass card ON TOP of the gradient: the gradient
       rings it and shines softly through. */
    .hy-demo__glass {
      position: relative; z-index: 1;
      border-radius: calc(var(--strata-r-2xl) - 9px);
      padding: clamp(24px, 4vw, 44px);
      background: rgba(255, 255, 255, 0.88);   /* more opaque white; the gradient softly glows through (Ramon 2026-06-29) */
      -webkit-backdrop-filter: blur(16px) saturate(1.15);
              backdrop-filter: blur(16px) saturate(1.15);
      border: 1px solid color-mix(in srgb, #ffffff 60%, transparent);
      box-shadow: var(--strata-shadow-3);
    }
    [data-theme="dark"] .hy-demo__glass {
      background: rgba(20, 20, 28, 0.84);
      border-color: color-mix(in srgb, #ffffff 14%, transparent);
    }
    .hy-demo__grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
      gap: clamp(24px, 4vw, 52px);
      align-items: center;
    }
    .hy-demo__copy { min-width: 0; }
    .hy-demo__copy h2 { margin: 0 0 var(--strata-sp-3); }
    .hy-demo__copy > p { margin: 0 0 var(--strata-sp-4); color: var(--strata-text-2); font-size: var(--strata-text-lg); line-height: 1.55; }
    .hy-demo__note {
      display: inline-flex;
      align-items: center;
      gap: var(--strata-sp-2);
      margin-bottom: var(--strata-sp-4);
      padding: 8px 14px;
      border-radius: var(--strata-r-full);
      background: color-mix(in srgb, var(--strata-green) 14%, transparent);
      color: oklch(from var(--strata-green) .34 c h);
      font-size: var(--strata-text-sm);
      font-weight: 600;
      max-width: 100%;
      overflow-wrap: anywhere;
    }
    .hy-demo__note i { color: oklch(from var(--strata-green) .34 c h); flex: none; }
    .hy-demo__sim { min-width: 0; }
    /* The capture inside the demo band drops its own card chrome so it
       reads as part of the band, not a nested box. */
    .hy-demo .lp-capture {
      background: transparent;
      border: none;
      box-shadow: none;
      -webkit-backdrop-filter: none;
              backdrop-filter: none;
      padding: 0;
      max-width: none;
      text-align: left;
    }
    .hy-demo .lp-capture--center { margin-inline: 0; }
    .hy-demo__secondary {
      margin-top: var(--strata-sp-4);
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--strata-font-body);
      font-weight: 600;
      font-size: var(--strata-text-sm);
      color: oklch(from var(--strata-action) .42 c h);
      text-decoration: none;
    }
    [data-theme="dark"] .hy-demo__secondary { color: oklch(from var(--strata-action) .82 c h); }
    .hy-demo__secondary:hover { text-decoration: underline; }
    /* Centered beta-CTA variant (Ramon 2026-06-29): the demo band is now a
       normal free-beta CTA; the demo is demoted to the secondary link, and the
       hero-clone coverflow is gone. */
    .hy-demo__cta { position: relative; z-index: 1; max-width: 40rem; margin-inline: auto; text-align: center; }
    .hy-demo__cta h2 { margin: 0 0 var(--strata-sp-3); }
    .hy-demo__cta > p { margin: 0 auto var(--strata-sp-5); max-width: 34rem; color: var(--strata-text-2); font-size: var(--strata-text-lg); line-height: 1.55; }
    .hy-demo--cta .lp-capture { text-align: center; margin-inline: auto; max-width: 30rem; }
    .hy-demo__cta .hy-demo__secondary { margin-top: var(--strata-sp-5); }

    /* ================================================================
       HONEST EXPECTATIONS: two columns, wins FIRST, soft caveats AFTER
       (blemishing effect). Equal-height halves, identical internal grid.
       ================================================================ */
    .hy-honest {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: clamp(16px, 3vw, 28px);
      align-items: start;
    }
    .hy-honest__col {
      min-width: 0;
      padding: clamp(20px, 2.8vw, 32px);
      border-radius: var(--strata-r-2xl);
      box-shadow: var(--strata-shadow-2);
    }
    .hy-honest__col--is { background: var(--strata-surface-3); border: var(--strata-border); }
    .hy-honest__col--isnt { background: var(--strata-surface-2); border: var(--strata-border); }
    .hy-honest__head {
      display: flex;
      align-items: center;
      gap: var(--strata-sp-2);
      margin: 0 0 var(--strata-sp-4);
      font-family: var(--strata-font-display);
      font-style: italic;
      font-weight: 600;
      font-size: var(--strata-text-xl);
      color: var(--strata-text-1);
    }
    /* Darker green/info tokens for contrast on the surface (a11y). */
    /* Real squircle icon badges (Ramon 2026-06-28: the inline icons were too small). */
    .hy-honest__head i {
      width: 64px; height: 64px; flex: none;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: var(--strata-squircle-fallback);
      -webkit-clip-path: url(#strata-squircle);
              clip-path: url(#strata-squircle);
      font-size: 34px;
    }
    @media (max-width: 600px) { .hy-honest__head i { width: 52px; height: 52px; font-size: 28px; } }
    .hy-honest__col--is .hy-honest__head i { color: oklch(from var(--strata-green) .42 c h); background: color-mix(in srgb, var(--strata-green) 16%, transparent); }
    .hy-honest__col--isnt .hy-honest__head i { color: oklch(from var(--strata-action) .44 c h); background: var(--strata-primary-glass); }
    .hy-honest__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--strata-sp-4); }
    .hy-honest__list li { display: flex; gap: var(--strata-sp-3); min-width: 0; }
    .hy-honest__list i { flex: none; font-size: 1.1em; margin-top: 0.15em; }
    .hy-honest__col--is .hy-honest__list i { color: oklch(from var(--strata-green) .42 c h); }
    .hy-honest__col--isnt .hy-honest__list i { color: var(--strata-text-3); }
    .hy-honest__list strong { display: block; color: var(--strata-text-1); font-size: var(--strata-text-base); margin-bottom: 2px; }
    .hy-honest__list span { color: var(--strata-text-2); line-height: 1.5; overflow-wrap: anywhere; }

    /* ================================================================
       DIFFERENTIATION TABLE - honest, table-layout fixed so it never
       forces page overflow; scrolls inside its own box only on phones.
       Every icon cell carries visually-hidden text; legend is visible.
       ================================================================ */
    /* Wrapper contains the table by construction (proven 02 pattern):
       min-width:0 lets every grid/flex ancestor shrink it below content
       size, and overflow:hidden clips so the table can never push the page
       wide. The table itself is table-layout:fixed with wrapping cells, so
       it shrinks to fit rather than needing a horizontal scrollbar. */
    .hy-table-wrap {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      overflow: hidden;
      border-radius: var(--strata-r-xl);
    }
    .hy-table {
      width: 100%;
      max-width: 100%;
      table-layout: fixed;
      border-collapse: collapse;
      background: var(--strata-surface-3);
      border: var(--strata-border);
      border-radius: var(--strata-r-xl);
      overflow: hidden;
      font-size: var(--strata-text-sm);
    }
    .hy-table th, .hy-table td {
      padding: clamp(8px, 1.4vw, 14px);
      text-align: center;
      vertical-align: middle;
      border-bottom: 1px solid var(--strata-border-color);
      overflow-wrap: anywhere;
      min-width: 0;
    }
    .hy-table thead th {
      font-family: var(--strata-font-body);
      font-weight: 700;
      font-size: var(--strata-text-xs);
      letter-spacing: 0.03em;
      color: var(--strata-text-2);
      background: var(--strata-surface-2);
      line-height: 1.25;
      vertical-align: bottom;
    }
    .hy-table thead th.hy-col-us { color: #fff; background: var(--strata-action-grad); }
    .hy-table tbody th {
      text-align: left;
      font-weight: 600;
      color: var(--strata-text-1);
      line-height: 1.35;
    }
    .hy-table td.hy-col-us { background: var(--strata-primary-glass); }
    .hy-table tbody tr:last-child th,
    .hy-table tbody tr:last-child td { border-bottom: none; }
    .hy-table col.hy-c-feat { width: 26%; }
    /* Status glyphs with contrast-safe tokens. */
    .hy-yes  { color: oklch(from var(--strata-green) .42 c h); font-size: 1.2em; }
    .hy-no   { color: var(--strata-text-3); font-size: 1.05em; }
    .hy-part { color: oklch(from var(--strata-amber) .40 c h); font-weight: 700; font-size: 0.92em; }
    .hy-table caption { position: absolute; left: -9999px; }
    /* Visible legend (NOT aria-hidden). */
    .hy-table__legend {
      display: flex;
      flex-wrap: wrap;
      gap: var(--strata-sp-2) var(--strata-sp-4);
      margin-top: var(--strata-sp-3);
      font-size: var(--strata-text-xs);
      color: var(--strata-text-2);
    }
    .hy-table__legend span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
    .hy-table__honest {
      margin: var(--strata-sp-4) 0 0;
      /* font-size set by the shared reading-copy block (18px / 16px mobile). */
      color: var(--strata-text-2);
      line-height: 1.6;
      max-width: 52rem;
    }
    /* Plain-text comparison cell (the Reminders row): small, wraps, no nowrap. */
    .hy-cell-note {
      display: block;
      font-size: var(--strata-text-xs);
      font-weight: 600;
      line-height: 1.35;
      color: var(--strata-text-1);
      overflow-wrap: anywhere;
    }
    .hy-table td.hy-col-us .hy-cell-note { color: oklch(from var(--strata-action) .40 c h); }

    /* "How we remind you" explainer card under the comparison. */
    .hy-remind {
      display: flex;
      gap: clamp(14px, 2.4vw, 22px);
      align-items: flex-start;
      margin-top: clamp(20px, 3vw, 32px);
      padding: clamp(18px, 2.6vw, 28px);
      border-radius: var(--strata-r-2xl);
      background:
        radial-gradient(80% 120% at 0% 0% in oklch, oklch(from var(--strata-action) 0.72 calc(c * 1.0) h / 0.12), transparent 60%),
        var(--strata-surface-3);
      border: 1px solid var(--strata-border-color);
      box-shadow: var(--strata-shadow-2);
    }
    .hy-remind__icon {
      width: 64px; height: 64px;
      flex: none;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: var(--strata-squircle-fallback);
      -webkit-clip-path: url(#strata-squircle);
              clip-path: url(#strata-squircle);
      font-size: 28px;
      color: #fff;
      background: var(--strata-action-grad);
      box-shadow: 0 6px 16px rgba(0,102,255,0.28);
    }
    .hy-remind__body { min-width: 0; }
    .hy-remind__title {
      margin: 0 0 var(--strata-sp-2);
      font-family: var(--strata-font-body);
      font-weight: 700;
      font-size: var(--strata-text-lg);
      color: var(--strata-text-1);
    }
    .hy-remind__body p {
      margin: 0;
      font-family: var(--strata-font-body);
      font-weight: 500;
      font-size: 18px;
      line-height: 1.5;
      color: var(--strata-text-2);
      overflow-wrap: anywhere;
    }

    /* ================================================================
       FOUNDER NOTE - warm, brief, signed (the testimonial substitute).
       ================================================================ */
    .hy-founder {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: clamp(16px, 3vw, 32px);
      align-items: start;
      max-width: 58rem;
      margin-inline: auto;
      padding: clamp(22px, 3vw, 44px);
      border-radius: var(--strata-r-2xl);
      background:
        radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--strata-action) 9%, transparent), transparent 60%),
        var(--strata-surface-1);
      border: 1px solid var(--strata-glass-border);
      box-shadow: var(--strata-shadow-4);
      -webkit-backdrop-filter: blur(var(--strata-glass-blur));
              backdrop-filter: blur(var(--strata-glass-blur));
    }
    .hy-founder__photo {
      width: clamp(100px, 13vw, 132px);
      height: clamp(100px, 13vw, 132px);
      flex: none;
      object-fit: cover;
      border-radius: 50%;
      box-shadow: 0 12px 26px rgba(0,0,0,0.18);
      border: 3px solid color-mix(in srgb, var(--strata-action) 22%, var(--strata-surface-1));
    }
    .hy-founder__body { min-width: 0; }
    /* Specific enough to beat the reading-copy rule `.hy-founder__body p`
       (descendant selector) that otherwise forces this to body font/18px/500. */
    .hy-founder__body p.hy-founder__lead {
      margin: 0 0 var(--strata-sp-4);
      font-family: var(--strata-font-display);
      font-style: italic;
      font-weight: 700;   /* Loretta bold italic (Ramon 2026-06-29) */
      font-size: clamp(1.4rem, 1.05rem + 1.3vw, 1.85rem);
      line-height: 1.35;
      color: var(--strata-text-1);
      overflow-wrap: anywhere;
    }
    .hy-founder__lead::before {
      content: "\201C";   /* big decorative opening quote */
      display: block;
      font-family: var(--strata-font-display); font-style: italic; font-weight: 700;
      font-size: 3rem; line-height: 0.7;
      color: color-mix(in srgb, var(--strata-action) 36%, transparent);
      margin-bottom: 4px;
    }
    .hy-founder__body p { margin: 0 0 var(--strata-sp-3); color: var(--strata-text-2); line-height: 1.65; overflow-wrap: anywhere; }
    .hy-founder__sign {
      margin-top: var(--strata-sp-4);
      font-family: var(--strata-font-display);
      font-style: italic;
      font-weight: 600;
      font-size: var(--strata-text-xl);
      color: var(--strata-text-1);
    }
    .hy-founder__role { display: block; margin-top: 2px; font-family: var(--strata-font-body); font-style: normal; font-size: var(--strata-text-sm); color: var(--strata-text-2); }

    /* Final CTA gets the dawn sky again for a hopeful close. */
    .hy-final { position: relative; overflow: hidden; isolation: isolate; }
    .hy-final__sky {
      position: absolute; inset: 0; z-index: 0; pointer-events: none;
      /* Smooth OKLCH wash (no blobs), token-derived so it re-tints with theme. */
      background:
        linear-gradient(160deg in oklch,
          oklch(from var(--strata-action) 0.74 calc(c * 1.0) calc(h - 30) / 0.30) 0%,
          oklch(from var(--strata-action) 0.72 calc(c * 1.05) calc(h + 26) / 0.34) 100%),
        var(--strata-mesh, var(--strata-bg-grad));
    }
    .hy-final__sky::after {
      content: ""; position: absolute; inset: 0;
      background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.18) 60%, rgba(255,255,255,0.50) 100%);
    }
    [data-theme="dark"] .hy-final__sky::after {
      background: linear-gradient(180deg, rgba(10,12,22,0.55) 0%, rgba(10,12,22,0.20) 60%, rgba(10,12,22,0.55) 100%);
    }
    .hy-final > .lp-wrap { position: relative; z-index: 1; }

    /* ================================================================
       RESPONSIVE - collapse the climb + grids without any overflow.
       ================================================================ */
    @media (max-width: 1024px) {
      .hy-climb { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .hy-stage:nth-child(n) { transform: none; }   /* drop the staircase lift when wrapping */
      .hy-beats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    @media (max-width: 900px) {
      .hy-demo__grid { grid-template-columns: minmax(0, 1fr); }
      .hy-demo__sim { order: -1; }
      .hy-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 760px) {
      .hy-honest { grid-template-columns: minmax(0, 1fr); }
      .hy-beats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      /* The table stays table-layout:fixed and WRAPS to fit inside its own
         box (never scrolls the page). Tighten cell padding + type so the
         seven columns stay legible down to 360px. */
      .hy-table { font-size: var(--strata-text-xs); }
      .hy-table th, .hy-table td { padding: 7px 5px; }
    }
    @media (max-width: 600px) {
      .hy-climb { grid-template-columns: minmax(0, 1fr); }
      .hy-founder { grid-template-columns: minmax(0, 1fr); }
      .hy-beats { grid-template-columns: minmax(0, 1fr); }
      .hy-rules, .hy-rules--linked { grid-template-columns: minmax(0, 1fr); }
    }

    /* Reduced motion: freeze the ascent lift (shared kit freezes the sim) and
       stop the aurora drift (the blooms stay, just no animation). */
    @media (prefers-reduced-motion: reduce) {
      .hy-stage:nth-child(n) { transform: none; }
      .hy-hero__aurora::before { animation: none !important; }
    }
    /* Reduce transparency: solidify the local glass surfaces and drop the
       decorative aurora blooms (contrast must not depend on translucency). */
    @media (prefers-reduced-transparency: reduce) {
      .hy-dock, .hy-rhythm, .hy-founder, .hy-themes, .hy-glass, .hy-stepper {
        -webkit-backdrop-filter: none; backdrop-filter: none;
        background: var(--strata-surface-3);
      }
      .hy-hero__aurora { display: none; }
    }

.lgp-teaser { box-sizing: border-box; }
    .lgp-teaser {--lgp-glass-bg-strong: rgba(255,255,255,0.78);
      --lgp-glass-border: rgba(255,255,255,0.7);
      --lgp-input-card-bg: rgba(248,248,251,0.55);
      --lgp-input-card-border: rgba(0,0,0,0.06);
      --lgp-input-card-blur: 8px;
      --lgp-border-subtle: rgba(0,0,0,0.06);
      --lgp-shadow-dark: rgba(160,160,180,0.18);
      --lgp-text-primary: #1a1a1f;
      --lgp-text-secondary: #4d4d57;
      --lgp-text-tertiary: #5e5e6b;
      --lgp-c-primary: #0066ff;
      --lgp-c-primary-soft: rgba(0,102,255,0.16);
      --lgp-c-blue: #0066ff;
      --lgp-c-blue-soft: rgba(0,102,255,0.15);
      --lgp-c-cyan: #00b4d8;
      --lgp-c-green: #10b981;
      --lgp-c-green-soft: rgba(16,185,129,0.18);
      --lgp-c-amber: #f59e0b;
      --lgp-c-amber-soft: rgba(245,158,11,0.18);
      --lgp-c-red: #ef4444;
      --lgp-c-action: var(--lgp-c-primary);
      --lgp-r-md: 14px;
      --lgp-r-lg: 18px;
      --lgp-r-xl: 24px;
      --lgp-r-full: 9999px;
      --lgp-t-fast: 160ms cubic-bezier(0.4,0,0.2,1);
      --lgp-t-base: 220ms cubic-bezier(0.4,0,0.2,1);
      --lgp-t-spring: 480ms cubic-bezier(0.34,1.56,0.64,1);

      --lgp-btn-primary-bg-from: #3B82F6;
      --lgp-btn-primary-bg-to: #0044AA;
      --lgp-btn-primary-text: #ffffff;
      --lgp-btn-primary-text-shadow: 0 1px 2px rgba(0,0,0,0.22);
      --lgp-btn-primary-shadow: 0 6px 18px rgba(0,68,170,0.32);
      --lgp-btn-ghost-bg: transparent;
      --lgp-btn-ghost-text: var(--lgp-text-primary);
      --lgp-btn-ghost-border: var(--lgp-glass-border);
      --lgp-btn-ghost-hover-bg: rgba(0,102,255,0.06);
      --lgp-btn-ghost-hover-text: var(--lgp-c-primary);

      --page-bg: #faf8f3;
      --display: 'loretta-display', Georgia, serif;
      --sans: 'DM Sans', system-ui, sans-serif;
      --mono: 'DM Mono', 'SF Mono', monospace; }
    .lgp-teaser * {box-sizing: border-box; }
    .lgp-teaser, .lgp-teaser {margin: 0; padding: 80px 0 0; }
    .lgp-teaser {font-family: var(--sans);
      font-size: 16px; line-height: 1.5;
      color: var(--lgp-text-primary);
      background: var(--page-bg);
      -webkit-font-smoothing: antialiased;
      background-image:
        radial-gradient(ellipse 900px 500px at 15% 10%, rgba(0,102,255,0.05) 0%, transparent 60%),
        radial-gradient(ellipse 700px 500px at 95% 80%, rgba(0,180,216,0.06) 0%, transparent 60%);
       overflow-x: hidden; }
    .lgp-teaser .section {max-width: 1280px; margin: 0 auto; padding: 64px 24px 96px; }
    .lgp-teaser .intro {text-align: center; max-width: 720px; margin: 0 auto 40px; }
    .lgp-teaser .eyebrow {font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.16em;
      font-size: 11px; color: var(--lgp-text-tertiary); margin: 0 0 18px; font-weight: 500;
      display: inline-flex; align-items: center; gap: 10px; }
    .lgp-teaser .eyebrow .dot {width: 6px; height: 6px; border-radius: 50%; background: var(--lgp-c-primary); box-shadow: 0 0 0 4px rgba(0,102,255,0.12); animation: lgpt-dotPulse 2.4s ease-in-out infinite; }
    @keyframes lgpt-dotPulse { 0%,100% { box-shadow: 0 0 0 4px rgba(0,102,255,0.12); } 50% { box-shadow: 0 0 0 7px rgba(0,102,255,0.08); } }
    .lgp-teaser h1 {font-family: var(--display); font-style: italic; font-weight: 700; font-size: clamp(36px,5vw,56px); line-height: 1.04; letter-spacing: -0.02em; margin: 0 0 18px; }
    .lgp-teaser h1 .accent {background: linear-gradient(135deg, var(--lgp-c-primary) 0%, var(--lgp-c-cyan) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
    .lgp-teaser .subhead {font-family: var(--display); font-style: italic; font-weight: 600; font-size: clamp(20px,2.4vw,28px); color: var(--lgp-text-secondary); margin: 0 0 16px; letter-spacing: -0.01em; }
    .lgp-teaser .lead {font-size: 18px; line-height: 1.55; color: var(--lgp-text-secondary); margin: 0 auto; max-width: 600px; }
    .lgp-teaser .stage {position: relative; max-width: 1280px; margin: 0 auto; }
    .lgp-teaser .carousel {position: relative; height: 600px; margin: 0 auto; perspective: 1500px; -webkit-tap-highlight-color: transparent; }
    .lgp-teaser .carousel-halo {position: absolute; left: 50%; top: 46%; width: 880px; height: 680px; transform: translate(-50%,-50%); z-index: 0; pointer-events: none; border-radius: 50%; filter: blur(72px); opacity: 1; background: radial-gradient(circle at 30% 28%, rgba(0,102,255,0.42), transparent 56%), radial-gradient(circle at 74% 30%, rgba(0,180,216,0.36), transparent 56%), radial-gradient(circle at 58% 80%, rgba(192,38,211,0.24), transparent 58%), radial-gradient(circle at 22% 75%, rgba(99,102,241,0.22), transparent 55%); }
    .lgp-teaser .carousel-track {position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transform-style: preserve-3d; }
    .lgp-teaser .frame {position: absolute; width: 470px; height: 560px;
      border-radius: 26px;
      background: rgba(255,255,255,0.96);
      border: 1px solid var(--lgp-glass-border);
      box-shadow: 0 0 0 10px rgba(255,255,255,0.92), 0 0 0 11px rgba(20,20,45,0.06), 0 2px 6px rgba(0,0,0,0.04), 0 24px 50px rgba(30,30,50,0.12), 0 50px 120px rgba(30,30,50,0.10);
      overflow: hidden;
      transition: transform 720ms cubic-bezier(0.32,0.72,0.24,1), opacity 720ms cubic-bezier(0.32,0.72,0.24,1), filter 720ms cubic-bezier(0.32,0.72,0.24,1);
      display: flex; flex-direction: column; }
    .lgp-teaser .frame[data-pos="-2"] {transform: translateX(-740px) translateZ(-300px) scale(0.6) rotateY(20deg); opacity: 0; pointer-events: none; }
    .lgp-teaser .frame[data-pos="-1"] {transform: translateX(-372px) translateZ(-130px) scale(0.8) rotateY(15deg); opacity: 0.5; filter: blur(0.8px); z-index: 2; }
    .lgp-teaser .frame[data-pos="0"] {transform: translateX(0) translateZ(0) scale(1) rotateY(0); opacity: 1; z-index: 5; }
    .lgp-teaser .frame[data-pos="1"] {transform: translateX(372px) translateZ(-130px) scale(0.8) rotateY(-15deg); opacity: 0.5; filter: blur(0.8px); z-index: 2; }
    .lgp-teaser .frame[data-pos="2"] {transform: translateX(740px) translateZ(-300px) scale(0.6) rotateY(-20deg); opacity: 0; pointer-events: none; }
    .lgp-teaser .frame__chrome {display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid rgba(0,0,0,0.05); background: rgba(250,250,253,0.8); flex: none; }
    .lgp-teaser .frame__chrome .dots {display: flex; gap: 6px; }
    .lgp-teaser .frame__chrome .dots span {width: 10px; height: 10px; border-radius: 50%; }
    .lgp-teaser .frame__chrome .dots span:nth-child(1) {background: #ff5f57; }
    .lgp-teaser .frame__chrome .dots span:nth-child(2) {background: #ffbd2e; }
    .lgp-teaser .frame__chrome .dots span:nth-child(3) {background: #28c840; }
    .lgp-teaser .frame__chrome .addr {font-family: var(--mono); font-size: 10px; color: var(--lgp-text-tertiary); letter-spacing: 0.04em; padding: 4px 12px; background: rgba(255,255,255,0.8); border-radius: 5px; flex: 1; text-align: center; }
    .lgp-teaser .frame__chrome .badge {font-family: var(--mono); font-size: 9px; color: var(--lgp-c-primary); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; padding: 3px 8px; background: var(--lgp-c-primary-soft); border-radius: 5px; }
    .lgp-teaser .frame__stage {flex: 1; position: relative; overflow: hidden; }
    .lgp-teaser .carousel-meta {display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 32px auto 0; max-width: 720px; position: relative; z-index: 1; }
    .lgp-teaser .scene-copy {height: 124px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
    .lgp-teaser .scene-label {text-align: center; font-family: var(--display); font-style: italic; font-weight: 700; font-size: 28px; line-height: 1.15; letter-spacing: -0.01em; transition: opacity 360ms ease; }
    .lgp-teaser .scene-desc {text-align: center; font-size: 15px; color: var(--lgp-text-secondary); line-height: 1.5; max-width: 580px; transition: opacity 360ms ease; }
    .lgp-teaser .dots-row {display: flex; gap: 10px; }
    .lgp-teaser .dots-row button {appearance: none; border: 0; padding: 0; width: 32px; height: 6px; cursor: pointer; border-radius: 3px; background: rgba(26,26,31,0.12); transition: background 300ms ease, width 400ms cubic-bezier(0.32,0.72,0.24,1); }
    .lgp-teaser .dots-row button.is-active {background: var(--lgp-c-primary); width: 48px; }
    .lgp-teaser .dots-row button:focus-visible {outline: 2px solid var(--lgp-c-primary); outline-offset: 4px; }
    .lgp-teaser .scene-head {font-family: var(--display); font-style: italic; font-weight: 700; font-size: 15px; color: var(--lgp-text-primary); margin: 0 0 3px; display: flex; align-items: center; gap: 7px; }
    .lgp-teaser .scene-head i {color: var(--lgp-c-blue); font-size: 24px; font-style: normal; }
    .lgp-teaser .scene-subhead {font-size: 11.5px; color: var(--lgp-text-tertiary); margin: 0 0 12px; }
    .lgp-teaser .scene--spider {position: absolute; inset: 0; padding: 20px 22px; display: flex; flex-direction: column; }
    .lgp-teaser .scene--spider .wheel-stage {flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; }
    .lgp-teaser .scene--spider .wheel-svg {width: 100%; max-width: 392px; height: auto; aspect-ratio: 1/1; }
    .lgp-teaser .scene--spider .legend {display: flex; justify-content: center; gap: 16px; font-family: var(--mono); font-size: 10px; color: var(--lgp-text-tertiary); text-transform: uppercase; letter-spacing: 0.08em; padding: 6px 0 0; }
    .lgp-teaser .scene--spider .legend .lg-key {display: inline-flex; align-items: center; gap: 6px; }
    .lgp-teaser .scene--spider .lg-swatch {width: 16px; height: 0; }
    .lgp-teaser .scene--spider .lg-imp {border-top: 2px dashed #ff4d8d; }
    .lgp-teaser .scene--spider .lg-sat {border-top: 3px solid #0066ff; }
    .lgp-teaser .scene--spider .poly-anim {transform-box: fill-box; transform-origin: center; }
    .lgp-teaser .scene--spider .lgp-wheel-dot {transform-box: fill-box; transform-origin: center; }
    .lgp-teaser .frame.replay .scene--spider .poly-imp {animation: lgpt-polyDraw 1100ms cubic-bezier(0.34,1.08,0.64,1) 0.15s backwards; }
    .lgp-teaser .frame.replay .scene--spider .poly-sat {animation: lgpt-polyDraw 1100ms cubic-bezier(0.34,1.08,0.64,1) 0.5s backwards; }
    .lgp-teaser .frame.replay .scene--spider .lgp-wheel-dot {animation: lgpt-dotPop 460ms cubic-bezier(0.34,1.6,0.64,1) 1s backwards; }
    @keyframes lgpt-polyDraw { 0% { opacity: 0; transform: scale(0.18); } 65% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } }
    @keyframes lgpt-dotPop { 0% { opacity: 0; transform: scale(0); } 100% { opacity: 1; transform: scale(1); } }
    .lgp-teaser .scene--card {position: absolute; inset: 0; padding: 20px 22px; display: flex; flex-direction: column; }
    .lgp-teaser .scene--card .card-stage {flex: 1; display: flex; align-items: center; justify-content: center; perspective: 1000px; }
    .lgp-teaser .scene--card .card-stack {position: relative; width: 248px; height: 312px; transform-style: preserve-3d; }
    .lgp-teaser .scene--card .stack-bg-1 {position: absolute; inset: 0; background: rgba(245,245,250,0.7); border-radius: 14px; border: 1px solid rgba(0,0,0,0.04); transform: translateY(10px) scale(0.96); z-index: 0; }
    .lgp-teaser .scene--card .stack-bg-2 {position: absolute; inset: 0; background: rgba(240,240,247,0.4); border-radius: 14px; border: 1px solid rgba(0,0,0,0.03); transform: translateY(20px) scale(0.92); z-index: -1; }
    .lgp-teaser .lgp-rapidCard {position: absolute; inset: 0; min-height: 0; border-radius: 14px; perspective: 1000px; }
    .lgp-teaser .lgp-rapidCard__inner {position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 600ms cubic-bezier(0.4,0,0.2,1); }
    .lgp-teaser .lgp-rapidCard__face, .lgp-teaser .lgp-rapidCard__back {position: absolute; inset: 0; border-radius: 14px; backface-visibility: hidden; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 3px 10px rgba(0,0,0,0.07), inset 0 1px 0 rgba(255,255,255,0.85); }
    .lgp-teaser .lgp-rapidCard__face {padding: 22px 16px 18px;
      background:
        radial-gradient(120% 80% at 18% 8%, rgba(255,255,255,0.95), color-mix(in oklch, var(--lgp-c-action, var(--lgp-c-primary)) 4%, rgba(252,252,255,0.88)) 60%, color-mix(in oklch, var(--lgp-c-action, var(--lgp-c-primary)) 6%, rgba(245,245,250,0.82))),
        rgba(255,255,255,0.96);
      border: 1px solid color-mix(in oklch, var(--lgp-c-action, var(--lgp-c-primary)) 14%, var(--lgp-glass-border)); }
    .lgp-teaser .lgp-rapidCard__face::before {content: ''; position: absolute; inset: 5px; border: 1px solid color-mix(in oklch, var(--lgp-c-action, var(--lgp-c-primary)) 12%, rgba(180,180,200,0.16)); border-radius: 9px; pointer-events: none; }
    .lgp-teaser .lgp-rapidCard__back {transform: rotateY(180deg);
      background:
        repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 8px, transparent 8px, transparent 16px),
        radial-gradient(circle at 20% 18%, color-mix(in oklch, var(--lgp-c-action, var(--lgp-c-primary)) 65%, #0a0a0c), transparent 50%),
        radial-gradient(circle at 80% 82%, color-mix(in oklch, var(--lgp-c-action, var(--lgp-c-primary)) 70%, #1a1a1f), transparent 55%),
        linear-gradient(135deg, color-mix(in oklch, var(--lgp-c-action, var(--lgp-c-primary)) 35%, #0a0a0c) 0%, color-mix(in oklch, var(--lgp-c-action, var(--lgp-c-primary)) 22%, #0a0a0c) 60%, color-mix(in oklch, var(--lgp-c-action, var(--lgp-c-primary)) 10%, #050507) 100%);
      border: 1px solid color-mix(in oklch, var(--lgp-c-action, var(--lgp-c-primary)) 40%, transparent);
      align-items: center; justify-content: center; gap: 8px;
      color: rgba(255,255,255,0.82); }
    .lgp-teaser .lgp-rapidCard__back::before {content: ''; position: absolute; inset: 6px; border: 1px solid rgba(255,255,255,0.18); border-radius: 8px; pointer-events: none; }
    .lgp-teaser .lgp-rapidCard__mark {width: 38%; max-width: 70px; aspect-ratio: 1; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25)); }
    .lgp-teaser .lgp-rapidCard__backLbl {font-family: var(--display); font-style: italic; font-weight: 600; font-size: 0.78rem; letter-spacing: 0.04em; color: rgba(255,255,255,0.65); }
    .lgp-teaser .lgp-rapidCard__name {font-family: var(--display); font-style: italic; font-weight: 700; font-size: 1.3rem; line-height: 1.15; color: var(--lgp-text-primary); letter-spacing: -0.01em; text-align: center; margin: 6px 0 14px; flex-shrink: 0; text-wrap: balance; }
    .lgp-teaser .lgp-rapidCard__desc {font-size: 0.86rem; line-height: 1.5; color: var(--lgp-text-secondary); text-align: left; margin-bottom: 10px; text-wrap: pretty; }
    .lgp-teaser .lgp-rapidCard__differs {font-size: 0.76rem; line-height: 1.45; color: var(--lgp-text-tertiary); font-style: italic; margin-top: auto; padding-top: 10px; border-top: 1px dashed rgba(180,180,200,0.3); text-align: left; text-wrap: pretty; }
    .lgp-teaser .lgp-rapidCard__differsLbl {display: block; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-style: normal; color: var(--lgp-c-blue); margin-bottom: 2px; }
    .lgp-teaser .lgp-rapidCard__x {position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; background: rgba(255,255,255,0.92); border: 1px solid rgba(180,180,200,0.4); border-radius: 50%; font-size: 0.92rem; line-height: 1; font-weight: 700; color: var(--lgp-text-tertiary); display: flex; align-items: center; justify-content: center; z-index: 3; }
    .lgp-teaser .scene--card .lgp-rapidCard {animation: lgpt-cardCycle 16s infinite ease-in-out; opacity: 0; transform-origin: 50% 120%; }
    .lgp-teaser .scene--card .lgp-rapidCard:nth-child(3) {animation-delay: 0s; }
    .lgp-teaser .scene--card .lgp-rapidCard:nth-child(4) {animation-delay: 4s; }
    .lgp-teaser .scene--card .lgp-rapidCard:nth-child(5) {animation-delay: 8s; }
    .lgp-teaser .scene--card .lgp-rapidCard:nth-child(6) {animation-delay: 12s; }
    .lgp-teaser .scene--card .lgp-rapidCard__inner {animation: lgpt-cardFlip 16s infinite; animation-delay: inherit; }
    @keyframes lgpt-cardCycle {
      0%   { opacity: 0; transform: translateY(46px) rotate(-3deg) scale(0.9); z-index: 1; }
      3%   { opacity: 1; transform: translateY(0) rotate(-0.6deg) scale(0.98); z-index: 4; }
      22%  { opacity: 1; transform: translateY(0) rotate(-0.4deg) scale(1); z-index: 4; }
      26%  { opacity: 1; transform: translateY(-6px) rotate(7deg) scale(0.97); z-index: 4; }
      30%  { opacity: 0; transform: translateX(-300px) rotate(-20deg) scale(0.88); z-index: 1; }
      100% { opacity: 0; transform: translateX(-300px) rotate(-20deg) scale(0.88); z-index: 1; }
    }
    @keyframes lgpt-cardFlip { 0% { transform: rotateY(180deg); } 5% { transform: rotateY(180deg); } 11% { transform: rotateY(0); } 100% { transform: rotateY(0); } }
    .lgp-teaser .scene--month {position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
    .lgp-teaser .month-scale {width: 660px; transform: scale(0.638); transform-origin: center center; flex: none; }
    .lgp-teaser .lgp-execPanel {margin: 0; padding: 32px; background: rgba(255,255,255,0.55); border: 1px solid var(--lgp-glass-border); border-radius: var(--lgp-r-xl); box-shadow: 2px 2px 8px var(--lgp-shadow-dark), inset 0 1px 0 rgba(255,255,255,0.7); }
    .lgp-teaser .lgp-execPanel__head {display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
    .lgp-teaser .lgp-execPanel__head h2 {flex: 1 1 auto; min-width: 220px; font-family: var(--display); font-style: italic; font-weight: 700; font-size: 1.7rem; line-height: 1.1; margin: 0; display: flex; align-items: center; gap: 12px; }
    .lgp-teaser .lgp-execPanel__head h2 i {color: var(--lgp-c-primary); font-size: 1.5rem; flex-shrink: 0; margin-top: 5px; font-style: normal; }
    .lgp-teaser .lgp-execPanel__hint {font-size: 0.9rem; color: var(--lgp-text-secondary); margin: 0 0 12px; }
    .lgp-teaser .lgp-cascadeContext {padding: 12px 14px 10px; background: linear-gradient(135deg, rgba(0,102,255,0.06), rgba(0,180,216,0.05)); border: 1px solid rgba(0,102,255,0.20); border-radius: var(--lgp-r-md); margin-bottom: 16px; }
    .lgp-teaser .lgp-cascadeContext__head {display: flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--lgp-c-primary); margin-bottom: 8px; }
    .lgp-teaser .lgp-cascadeContext__head i {font-size: 0.95rem; }
    .lgp-teaser .lgp-cascadeContext__rows {display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; align-items: center; }
    .lgp-teaser .lgp-cascadeContext__row {display: contents; font-size: 0.92rem; color: var(--lgp-text-primary); }
    .lgp-teaser .lgp-cascadeContext__row > * {padding: 4px 0; }
    .lgp-teaser .lgp-cascadeContext__area {font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--lgp-c-primary); padding: 4px 10px; background: rgba(0,102,255,0.10); border-radius: var(--lgp-r-full); text-align: center; white-space: nowrap; justify-self: start; }
    .lgp-teaser .lgp-cascadeContext__goal {color: var(--lgp-text-secondary); line-height: 1.45; }
    .lgp-teaser .lgp-execSection {font-family: var(--display); font-style: italic; font-weight: 700; font-size: 1.45rem; line-height: 1.3; color: var(--lgp-text-primary); margin: 28px 0 16px; display: flex; align-items: center; gap: 12px; }
    .lgp-teaser .lgp-execSection::after {content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(180,180,200,0.4), transparent); }
    .lgp-teaser .lgp-execMsList {display: flex; flex-direction: column; gap: 6px; }
    .lgp-teaser .lgp-execMsRow {display: grid; grid-template-columns: auto 110px 1fr; gap: 10px; align-items: center; padding: 10px 14px; background: rgba(255,255,255,0.35); border: 1px solid rgba(0,0,0,0.05); border-radius: var(--lgp-r-md); font-size: 0.9rem; }
    .lgp-teaser .lgp-execMsRow.is-picked {background: color-mix(in oklch, var(--lgp-c-action, #0066ff), transparent 88%); border-color: color-mix(in oklch, var(--lgp-c-action, #0066ff), transparent 65%); }
    .lgp-teaser .lgp-check {width: 20px; height: 20px; flex: none; border-radius: 6px; border: 2px solid rgba(0,102,255,0.45); background: #fff; position: relative; transition: background 240ms ease, border-color 240ms ease; }
    .lgp-teaser .lgp-check svg {position: absolute; inset: 0; width: 100%; height: 100%; }
    .lgp-teaser .lgp-check__tick {fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 26; stroke-dashoffset: 26; }
    .lgp-teaser .lgp-checkRow.is-picked .lgp-check {background: var(--lgp-c-primary); border-color: var(--lgp-c-primary); }
    .lgp-teaser .lgp-checkRow.is-picked .lgp-check__tick {stroke-dashoffset: 0; transition: stroke-dashoffset 360ms cubic-bezier(0.65,0,0.45,1) 120ms; }
    .lgp-teaser .lgp-execMsRow__date {font-size: 0.78rem; color: var(--lgp-text-tertiary); font-feature-settings: 'tnum'; white-space: nowrap; }
    .lgp-teaser .lgp-execMsRow__title em {color: var(--lgp-text-tertiary); font-style: normal; }
    .lgp-teaser .lgp-execInputCard {padding: 22px; background: var(--lgp-input-card-bg); border: 1px solid var(--lgp-input-card-border); border-radius: var(--lgp-r-lg); backdrop-filter: blur(var(--lgp-input-card-blur)) saturate(1.05); margin: 18px 0; }
    .lgp-teaser .lgp-execHeadline {font-family: var(--display); font-style: italic; font-weight: 700; font-size: 1.45rem; line-height: 1.3; color: var(--lgp-text-primary); margin: 0 0 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .lgp-teaser .lgp-execHeadline__sub {font-family: var(--sans); font-style: normal; font-weight: 500; font-size: 0.86rem; color: var(--lgp-text-tertiary); margin-left: auto; }
    .lgp-teaser .lgp-field {margin-bottom: 18px; }
    .lgp-teaser .lgp-input {width: 100%; padding: 10px 14px; background: rgba(248,248,251,0.85); border: 1px solid rgba(190,190,205,0.4); border-radius: var(--lgp-r-md); font-size: 0.95rem; line-height: 1.4; color: var(--lgp-text-primary); box-shadow: inset 1px 1px 3px rgba(0,0,0,0.04), inset -1px -1px 3px rgba(255,255,255,0.85); font-family: inherit; box-sizing: border-box; }
    .lgp-teaser .lgp-execLockRow {display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; justify-content: flex-end; }
    .lgp-teaser .lgp-execLockRow--withNav {justify-content: flex-start; }
    .lgp-teaser .lgp-execLockRow--withNav > .lgp-btn--primary {margin-left: auto; }
    .lgp-teaser .lgp-btn {display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: var(--lgp-r-full); font-size: 0.92rem; font-weight: 600; border: 1px solid var(--lgp-glass-border); background: var(--lgp-glass-bg-strong); color: var(--lgp-text-primary); box-shadow: 0 2px 6px rgba(180,180,200,0.18), inset 0 1px 0 rgba(255,255,255,0.7); }
    .lgp-teaser .lgp-btn i.ph, .lgp-teaser .lgp-btn i.ph-fill {font-size: 1.05rem; line-height: 1; }
    .lgp-teaser .lgp-btn--ghost {background: var(--lgp-btn-ghost-bg); color: var(--lgp-btn-ghost-text); border-color: var(--lgp-btn-ghost-border); }
    .lgp-teaser .lgp-btn--primary {background:
        linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.06) 38%, transparent 58%, rgba(255,255,255,0.04) 100%),
        linear-gradient(135deg, var(--lgp-btn-primary-bg-from), var(--lgp-btn-primary-bg-to));
      color: var(--lgp-btn-primary-text);
      border: 1px solid rgba(255,255,255,0.24);
      text-shadow: var(--lgp-btn-primary-text-shadow);
      box-shadow: var(--lgp-btn-primary-shadow), 0 1px 2px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -1px 0 rgba(0,0,0,0.14), inset 0 7px 14px -8px rgba(255,255,255,0.55); }
    .lgp-teaser .scene--garden {position: absolute; inset: 0; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
    .lgp-teaser .lgp-habitGardenWrap {position: relative; padding: 16px 18px; border-radius: var(--lgp-r-xl); background: radial-gradient(60% 50% at 12% 12%, rgba(16,185,129,0.16), transparent 70%), radial-gradient(50% 50% at 88% 22%, rgba(0,180,216,0.14), transparent 70%), radial-gradient(40% 40% at 50% 95%, rgba(132,204,22,0.14), transparent 70%), linear-gradient(160deg, rgba(236,253,245,0.85), rgba(220,252,231,0.6) 40%, rgba(207,250,254,0.55)); border: 1px solid rgba(16,185,129,0.22); box-shadow: 0 8px 24px rgba(16,185,129,0.08); flex: none; }
    .lgp-teaser .lgp-streakCard {display: flex; flex-direction: column; justify-content: center; text-align: center; gap: 5px; }
    .lgp-teaser .lgp-streakCard__habitName {font-family: var(--display); font-style: italic; font-weight: 700; font-size: 1.05rem; line-height: 1.2; color: #047857; }
    .lgp-teaser .lgp-streakCard__eyebrow {font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.10em; color: #047857; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
    .lgp-teaser .lgp-streakCard__eyebrow i {color: #ea580c; font-size: 1rem; }
    .lgp-teaser .lgp-streakCard__num {font-family: var(--display); font-style: italic; font-size: 2.7rem; line-height: 1; font-weight: 700; color: #047857; }
    .lgp-teaser .lgp-streakCard__days {display: flex; justify-content: center; gap: 6px; margin: 2px 0 0; }
    .lgp-teaser .lgp-habitGarden__dot {width: 13px; height: 13px; border-radius: 50%; background: rgba(180,180,200,0.25); border: 1px solid rgba(180,180,200,0.35); }
    .lgp-teaser .lgp-habitGarden__dot.is-done {background: #10b981; border-color: #047857; }
    .lgp-teaser .lgp-habitGarden__dot.is-lazy {background: #f59e0b; border-color: #b45309; }
    .lgp-teaser .lgp-streakCard__daysLbl {font-size: 0.7rem; color: var(--lgp-text-tertiary); font-style: italic; margin-bottom: 2px; }
    .lgp-teaser .lgp-streakCard__stats {display: flex; justify-content: center; gap: 18px; align-items: center; padding-top: 8px; border-top: 1px dashed rgba(16,185,129,0.32); }
    .lgp-teaser .lgp-streakCard__stat {font-family: var(--display); font-style: italic; font-weight: 700; font-size: 1.4rem; line-height: 1; color: #047857; }
    .lgp-teaser .lgp-streakCard__statLbl {font-size: 0.68rem; color: #047857; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }
    .lgp-teaser .lgp-streakCard__stats__sep {width: 1px; height: 22px; background: rgba(16,185,129,0.22); }
    .lgp-teaser .lgp-habitGardenTitle {font-family: var(--display); font-style: italic; font-weight: 700; font-size: 1rem; color: var(--lgp-text-primary); display: flex; align-items: center; gap: 7px; margin: 0 0 6px; }
    .lgp-teaser .lgp-habitGardenTitle i {color: var(--lgp-text-secondary); font-size: 0.92rem; font-style: normal; }
    .lgp-teaser .garden-grid-card {padding: 14px 16px; background: rgba(255,255,255,0.55); border: 1px solid rgba(0,0,0,0.04); border-radius: var(--lgp-r-lg); flex: 1; min-height: 0; overflow: hidden; }
    .lgp-teaser .lgp-habitGrid {width: 92%; margin: 0 auto; border-collapse: separate; border-spacing: 3px 3px; font-size: 0.6rem; table-layout: fixed; }
    .lgp-teaser .lgp-habitGrid col.c-month {width: 40px; }
    .lgp-teaser .lgp-habitGrid col.c-sum {width: 30px; }
    .lgp-teaser .lgp-habitGrid thead {display: none; }
    .lgp-teaser .lgp-habitGrid th, .lgp-teaser .lgp-habitGrid td {border: 0; padding: 0; }
    .lgp-teaser .lgp-habitGrid th {padding: 2px 0; color: #065f46; font-weight: 700; font-size: 0.56rem; }
    .lgp-teaser .lgp-habitGrid td {aspect-ratio: 1/1; position: relative; background: rgba(255,255,255,0.55); border-radius: 3px; }
    .lgp-teaser .lgp-habitGrid td.is-done, .lgp-teaser .lgp-habitGrid td.is-lazy {background: transparent; }
    .lgp-teaser .lgp-habitGrid td.is-done::after, .lgp-teaser .lgp-habitGrid td.is-lazy::after {content: ''; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 5px; border-radius: 3px; }
    .lgp-teaser .lgp-habitGrid td.is-done::after {background: #10b981; }
    .lgp-teaser .lgp-habitGrid td.is-lazy::after {background: #f59e0b; opacity: 0.85; }
    .lgp-teaser .lgp-habitGrid th:first-child, .lgp-teaser .lgp-habitGrid td:first-child {font-weight: 700; color: var(--lgp-text-secondary); font-size: 0.56rem; text-align: left; aspect-ratio: auto; background: transparent; white-space: nowrap; padding-right: 10px; }
    .lgp-teaser .lgp-habitGrid th:last-child, .lgp-teaser .lgp-habitGrid .lgp-habitGrid__total {font-feature-settings: 'tnum'; font-weight: 700; color: var(--lgp-text-secondary); text-align: right; aspect-ratio: auto; background: transparent; font-size: 0.58rem; padding-left: 10px; }
    .lgp-teaser .lgp-habitGridLegend {margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 0.72rem; color: var(--lgp-text-tertiary); }
    .lgp-teaser .lgp-habitGridLegend__item {display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--lgp-text-secondary); }
    .lgp-teaser .lgp-rag {width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
    .lgp-teaser .lgp-rag--green {background: var(--lgp-c-green); box-shadow: 0 0 0 3px var(--lgp-c-green-soft); }
    .lgp-teaser .lgp-rag--amber {background: var(--lgp-c-amber); box-shadow: 0 0 0 3px var(--lgp-c-amber-soft); }
    .lgp-teaser .scene--insights {position: absolute; inset: 0; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
    .lgp-teaser .lgp-ins-stickyBar {display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; background: rgba(255,255,255,0.7); backdrop-filter: blur(12px); border: 1px solid var(--lgp-glass-border); border-radius: 16px; }
    .lgp-teaser .lgp-insights__h1 {font-family: var(--display); font-style: italic; font-weight: 700; font-size: 1.4rem; line-height: 1.1; letter-spacing: -0.01em; color: var(--lgp-text-primary); margin: 0; }
    .lgp-teaser .lgp-ins-periodChips {display: flex; gap: 4px; flex-wrap: wrap; }
    .lgp-teaser .lgp-ins-periodChip {appearance: none; border: 1px solid rgba(0,0,0,0.06); background: rgba(255,255,255,0.7); font-family: var(--sans); font-weight: 600; font-size: 0.72rem; padding: 5px 11px; border-radius: 999px; color: var(--lgp-text-secondary); cursor: pointer; }
    .lgp-teaser .lgp-ins-periodChip.is-active {background: var(--lgp-c-primary); color: #fff; border-color: var(--lgp-c-primary); }
    .lgp-teaser .lgp-ins-tldr {display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; background: linear-gradient(135deg, rgba(0,102,255,0.04), rgba(0,180,216,0.04)); border: 1px solid rgba(0,102,255,0.12); border-radius: 14px; }
    .lgp-teaser .lgp-ins-tldr__eyebrow {font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--lgp-c-primary); display: inline-flex; align-items: center; gap: 5px; }
    .lgp-teaser .lgp-ins-tldr__eyebrow i {font-size: 0.72rem; }
    .lgp-teaser .lgp-ins-tldr__sentence {font-family: var(--display); font-style: italic; font-weight: 600; font-size: 0.98rem; line-height: 1.45; color: var(--lgp-text-primary); margin: 0; letter-spacing: -0.005em; }
    .lgp-teaser .lgp-ins-tldr__sentence strong {font-style: normal; font-family: var(--sans); background: var(--lgp-c-primary-soft); color: var(--lgp-c-primary); padding: 0 5px; border-radius: 4px; font-weight: 700; }
    .lgp-teaser .trend-card {padding: 14px 14px 12px; background: rgba(255,255,255,0.7); border: 1px solid rgba(0,0,0,0.05); border-radius: 16px; flex: 1; display: flex; flex-direction: column; min-height: 0; }
    .lgp-teaser .trend-title {font-family: var(--display); font-style: italic; font-weight: 700; font-size: 0.92rem; color: var(--lgp-text-primary); margin: 0 0 8px; display: flex; align-items: center; justify-content: space-between; }
    .lgp-teaser .trend-title .score {font-family: var(--display); font-size: 1.15rem; color: var(--lgp-c-primary); font-style: italic; font-weight: 700; }
    .lgp-teaser .trend-bars {flex: 1; display: flex; align-items: flex-end; gap: 1.5px; padding-bottom: 8px; position: relative; min-height: 56px; }
    .lgp-teaser .trend-bars::after {content: ''; position: absolute; left: 0; right: 0; top: 15%; height: 1px; border-top: 1px dashed rgba(0,102,255,0.4); pointer-events: none; }
    .lgp-teaser .trend-bar {flex: 1; background: linear-gradient(180deg, var(--lgp-c-cyan), var(--lgp-c-primary)); border-radius: 1px 1px 0 0; min-height: 4px; }
    .lgp-teaser .frame.replay .trend-bar {animation: lgpt-barGrow 1200ms cubic-bezier(0.34,1.2,0.64,1) backwards; }
    @keyframes lgpt-barGrow { 0% { transform: scaleY(0); transform-origin: bottom; } 100% { transform: scaleY(1); transform-origin: bottom; } }
    .lgp-teaser .trend-stats {display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(0,0,0,0.05); }
    .lgp-teaser .trend-stat {text-align: center; }
    .lgp-teaser .trend-stat .v {font-family: var(--display); font-style: italic; font-weight: 700; font-size: 1rem; color: var(--lgp-text-primary); line-height: 1; }
    .lgp-teaser .trend-stat .l {font-family: var(--mono); font-size: 0.5rem; color: var(--lgp-text-tertiary); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 2px; }
    .lgp-teaser .beta-cta {width: 340px; background: rgba(255,255,255,0.64); backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); border: 1px solid rgba(255,255,255,0.6); border-radius: 22px; box-shadow: 0 20px 50px rgba(30,30,50,0.20), inset 0 1px 0 rgba(255,255,255,0.7); padding: 24px 24px 20px; z-index: 10; }
    .lgp-teaser .beta-cta__head {font-family: var(--display); font-style: italic; font-weight: 700; font-size: 1.45rem; color: var(--lgp-text-primary); margin: 0 0 6px; letter-spacing: -0.01em; }
    .lgp-teaser .beta-cta__sub {font-size: 0.84rem; color: var(--lgp-text-secondary); margin: 0 0 16px; line-height: 1.45; }
    .lgp-teaser .beta-cta__founding {display: flex; align-items: flex-start; gap: 7px; margin: 14px 0 0; font-size: 0.8rem; font-weight: 600; line-height: 1.4; color: var(--lgp-text-secondary); }
    .lgp-teaser .beta-cta__founding::before {content: '\2713'; color: var(--lgp-c-primary); font-weight: 700; flex: 0 0 auto; }
    .lgp-teaser .beta-cta__trust {margin: 8px 0 0; font-size: 0.76rem; line-height: 1.45; color: var(--lgp-text-tertiary); }
    .lgp-teaser .kit-form-host {min-height: 40px; }
    .lgp-teaser .kit-form-host form, .lgp-teaser .kit-form-host .formkit-form {background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; }
    .lgp-teaser .kit-form-host .formkit-fields {display: flex !important; flex-direction: column !important; gap: 10px !important; margin: 0 !important; }
    .lgp-teaser .kit-form-host .formkit-field {margin: 0 !important; }
    .lgp-teaser .kit-form-host .formkit-input, .lgp-teaser .kit-form-host input[type="email"], .lgp-teaser .kit-form-host input[type="text"] {width: 100% !important; height: 48px !important; padding: 0 14px !important; margin: 0 !important; font-family: var(--sans) !important; font-size: 0.95rem !important; line-height: 1.4 !important; color: var(--lgp-text-primary) !important; background: rgba(248,248,251,0.92) !important; border: 1px solid rgba(190,190,205,0.55) !important; border-radius: 15px !important; box-shadow: inset 1px 1px 3px rgba(0,0,0,0.04), inset -1px -1px 3px rgba(255,255,255,0.85) !important; box-sizing: border-box !important; }
    .lgp-teaser .kit-form-host .formkit-input::placeholder, .lgp-teaser .kit-form-host input::placeholder {color: var(--lgp-text-tertiary) !important; }
    .lgp-teaser .kit-form-host .formkit-input:focus, .lgp-teaser .kit-form-host input:focus {border-color: rgba(0,102,255,0.55) !important; outline: none !important; box-shadow: inset 1px 1px 3px rgba(0,0,0,0.04), 0 0 0 3px rgba(0,102,255,0.12) !important; }
    .lgp-teaser .kit-form-host .formkit-submit, .lgp-teaser .kit-form-host button[type="submit"], .lgp-teaser .kit-form-host button {display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; width: 100% !important; height: 48px !important; min-height: 0 !important; padding: 0 18px !important; margin: 0 !important; font-family: var(--sans) !important; font-weight: 600 !important; font-size: 0.95rem !important; line-height: 1 !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.24) !important; border-radius: 15px !important; cursor: pointer !important; background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.06) 38%, transparent 58%, rgba(255,255,255,0.04) 100%), linear-gradient(135deg, #3B82F6, #0044AA) !important; box-shadow: 0 6px 18px rgba(0,68,170,0.32), 0 1px 2px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -1px 0 rgba(0,0,0,0.14) !important; text-shadow: 0 1px 2px rgba(0,0,0,0.22) !important; transition: transform 160ms ease, box-shadow 220ms ease !important; }
    .lgp-teaser .kit-form-host .formkit-submit:hover, .lgp-teaser .kit-form-host button:hover {transform: translateY(-1px) !important; box-shadow: 0 10px 24px rgba(0,68,170,0.40), inset 0 1px 0 rgba(255,255,255,0.68) !important; }
    .lgp-teaser .kit-form-host .formkit-submit span, .lgp-teaser .kit-form-host button span {color: #fff !important; font-family: var(--sans) !important; font-weight: 600 !important; font-size: 0.95rem !important; line-height: 1 !important; }
    @media (min-width: 881px) {
    .lgp-teaser .beta-cta {position: absolute; top: 300px; right: 0; transform: translateY(-50%); }
    }
    @media (max-width: 880px) {
    .lgp-teaser .beta-cta {position: static; width: 100%; max-width: 430px; margin: 22px auto 0; }
    }
    .lgp-teaser .frame__stage {pointer-events: none; }
    .lgp-teaser .scene--annual {position: absolute; inset: 0; padding: 20px 22px; display: flex; flex-direction: column; }
    .lgp-teaser .scene--annual .lgp-bhagGoalCard {position: relative; margin: 4px 0 16px; padding: 20px; background: linear-gradient(135deg, #f4f8ff 0%, #e3edff 35%, #d2e0ff 65%, #e3edff 100%); border-radius: var(--lgp-r-xl); box-shadow: 0 14px 40px rgba(0,102,255,0.20), inset 0 1px 0 rgba(255,255,255,0.85); overflow: hidden; }
    .lgp-teaser .scene--annual .lgp-bhagGoalCard::before {content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 0%, transparent 38%, rgba(255,255,255,0.45) 50%, transparent 62%, transparent 100%); background-size: 220% 100%; animation: lgpt-lgpShimmer 7s ease-in-out infinite; pointer-events: none; }
    .lgp-teaser .scene--annual .lgp-bhagGoalCard > * {position: relative; z-index: 1; }
    .lgp-teaser .scene--annual .lgp-bhagGoalCard__head {display: flex; align-items: center; gap: 8px; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: color-mix(in oklch, var(--lgp-c-primary) 78%, #0a0a0c); margin-bottom: 10px; }
    .lgp-teaser .scene--annual .lgp-bhagGoalCard__head > i {font-size: 1rem; color: var(--lgp-c-primary); }
    .lgp-teaser .scene--annual .lgp-bhagGoalCard__text {font-family: var(--display); font-style: italic; font-weight: 700; font-size: 1.18rem; line-height: 1.32; color: var(--lgp-text-primary); letter-spacing: -0.005em; }
    .lgp-teaser .scene--annual .annual-year {flex: 1; display: flex; flex-direction: column; min-height: 0; }
    .lgp-teaser .scene--annual .annual-year__head {display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--lgp-text-tertiary); font-weight: 500; margin: 0 0 12px; }
    .lgp-teaser .scene--annual .annual-year__head i {color: var(--lgp-c-primary); font-size: 13px; }
    .lgp-teaser .scene--annual .lgp-cascadeContext__rows {gap: 10px 14px; }
    .lgp-teaser .scene--annual .lgp-cascadeContext__goal {font-size: 0.92rem; }
    .lgp-teaser .scene--daily {position: absolute; inset: 0; padding: 13px 18px; display: flex; flex-direction: column; gap: 5px; overflow: hidden; }
    .lgp-teaser .scene--daily .scene-head {margin: 0 0 1px; }
    .lgp-teaser .scene--daily .scene-subhead {margin: 0 0 7px; }
    .lgp-teaser .scene--daily .daily-actions__head, .lgp-teaser .scene--daily .lgp-execHeadline {color: var(--lgp-text-primary); }
    .lgp-teaser .scene--daily .daily-actions__head {display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--lgp-text-tertiary); font-weight: 500; margin: 0 0 6px; }
    .lgp-teaser .scene--daily .daily-actions__head i {color: var(--lgp-c-primary); font-size: 13px; }
    .lgp-teaser .lgp-dayTask {display: flex; align-items: center; gap: 10px; padding: 5px 11px; margin-bottom: 4px; background: rgba(255,255,255,0.5); border: 1px solid rgba(0,0,0,0.05); border-radius: var(--lgp-r-md); font-size: 0.9rem; color: var(--lgp-text-primary); }
    .lgp-teaser .lgp-dayTask__text {line-height: 1.3; }
    .lgp-teaser .lgp-checkRow.is-picked.lgp-dayTask {background: color-mix(in oklch, var(--lgp-c-primary), transparent 90%); border-color: color-mix(in oklch, var(--lgp-c-primary), transparent 70%); }
    .lgp-teaser .lgp-checkRow.is-picked.lgp-dayTask .lgp-dayTask__text {color: var(--lgp-text-tertiary); text-decoration: line-through; text-decoration-color: color-mix(in oklch, var(--lgp-text-tertiary), transparent 40%); }
    .lgp-teaser .scene--daily .daily-checkin {margin-top: 2px; padding: 11px 14px; }
    .lgp-teaser .scene--daily .lgp-execHeadline {font-family: var(--display); font-style: italic; font-weight: 700; font-size: 1.02rem; margin: 0 0 6px; display: flex; align-items: center; gap: 10px; }
    .lgp-teaser .scene--daily .lgp-execHeadline__sub {font-family: var(--sans); font-style: normal; font-weight: 500; font-size: 0.74rem; color: var(--lgp-text-tertiary); margin-left: auto; }
    .lgp-teaser .scene--daily .lgp-field {margin-bottom: 6px; }
    .lgp-teaser .scene--daily .lgp-field__label {display: block; font-size: 0.72rem; font-weight: 600; color: var(--lgp-text-secondary); margin-bottom: 2px; }
    .lgp-teaser .lgp-execWrap {padding: 14px 16px; background: var(--lgp-input-card-bg); border: 1px solid var(--lgp-input-card-border); border-radius: var(--lgp-r-lg); -webkit-backdrop-filter: blur(var(--lgp-input-card-blur)) saturate(1.05); backdrop-filter: blur(var(--lgp-input-card-blur)) saturate(1.05); }
    .lgp-teaser .lgp-reflectScale {display: flex; align-items: center; gap: 10px; margin-top: 2px; }
    .lgp-teaser .lgp-reflectScale__icon {flex-shrink: 0; width: 22px; text-align: center; font-size: 1.15rem; line-height: 1; color: var(--lgp-text-secondary); }
    .lgp-teaser .lgp-reflectScale__icon--low {opacity: 0.5; }
    .lgp-teaser .lgp-reflectScale__icon--high {opacity: 0.85; }
    .lgp-teaser .lgp-reflectScale input[type="range"] {flex: 1; margin: 0; min-width: 0; accent-color: var(--lgp-c-primary); height: 4px; }
    .lgp-teaser .lgp-reflectLine__ta {width: 100%; min-height: 0; resize: none; font-size: 0.9rem; line-height: 1.45; padding: 10px 12px; background: linear-gradient(180deg, rgba(252,250,255,0.95), rgba(248,246,254,0.7)); border: 1px solid rgba(0,102,255,0.25); border-radius: var(--lgp-r-md); color: var(--lgp-text-primary); font-family: inherit; box-sizing: border-box; }
    .lgp-teaser .scene--daily .keeper {color: var(--lgp-c-primary); font-weight: 600; }
    @keyframes lgpt-lgpShimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
    @media (max-width: 880px) {
    .lgp-teaser .section {padding: 32px 16px 56px; }
    .lgp-teaser .intro {margin-bottom: 20px; }
    .lgp-teaser .carousel {height: 548px; }
    .lgp-teaser .frame {width: calc(100vw - 56px); max-width: 430px; height: 540px; }
    .lgp-teaser .frame[data-pos="-1"] {transform: translateX(-112%) scale(0.9); opacity: 0; }
    .lgp-teaser .frame[data-pos="1"] {transform: translateX(112%) scale(0.9); opacity: 0; }
    .lgp-teaser .frame[data-pos="-2"], .lgp-teaser .frame[data-pos="2"] {display: none; }
    .lgp-teaser .month-scale {transform: scale(0.44); }
    .lgp-teaser .scene-copy {height: auto; }
    .lgp-teaser .scene-label {font-size: 22px; }
    .lgp-teaser .lgp-habitGrid thead {display: none; }
    .lgp-teaser .lgp-habitGrid {width: 96%; }
    }
    @media (prefers-reduced-motion: reduce) {
    .lgp-teaser *, .lgp-teaser *::before, .lgp-teaser *::after {animation: none !important; }
    .lgp-teaser .frame {transition: transform 0ms, opacity 0ms; }
    .lgp-teaser .scene--card .lgp-rapidCard:nth-child(3) {opacity: 1; }
    .lgp-teaser .scene--card .lgp-rapidCard:nth-child(3) .lgp-rapidCard__inner {transform: rotateY(0); }
    }
    .lgp-teaser .tech {margin-top: 60px; padding: 28px; border-radius: 18px; background: rgba(255,255,255,0.6); border: 1px solid var(--lgp-input-card-border); backdrop-filter: blur(10px); max-width: 800px; margin-left: auto; margin-right: auto; font-size: 14px; line-height: 1.6; }
    .lgp-teaser .tech h3 {font-family: var(--display); font-style: italic; font-weight: 700; font-size: 22px; margin: 0 0 14px; }
    .lgp-teaser .tech ul {padding-left: 22px; margin: 0; }
    .lgp-teaser .tech li {margin: 0 0 8px; }
    .lgp-teaser .tech code {font-family: var(--mono); font-size: 12px; background: var(--lgp-c-primary-soft); padding: 2px 6px; border-radius: 4px; color: var(--lgp-c-primary); }
    .lgp-teaser .hero-chips { list-style:none; margin:18px 0 0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 10px; }
    .lgp-teaser .hero-chip { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--lgp-text-tertiary); background:rgba(255,255,255,0.55); border:1px solid var(--lgp-border-subtle); border-radius:999px; padding:5px 12px; }
    .lgp-teaser .hero-chip i { font-size:18px; color:var(--lgp-c-primary); }