/* AevenSpace stylesheet — generated from src/css/. Do not edit directly. */
@layer tokens, base, components, utilities;

/* ===========================================================================
   Web fonts — self-hosted, variable

   Only the body face is a webfont now: headings and the hero are set in Times
   New Roman, which is local everywhere and needs no @font-face.

   Figtree ships as a variable font: a single file covers the whole weight
   range, and the browser instances 400/600/700 from it. Google's css2 API
   hides that — it emits one @font-face per weight, all pointing at the same
   file — so the earlier pass stored and preloaded three identical copies. One
   face per subset now, declared with a weight range.

   unicode-range means a browser only downloads the subset a page needs —
   English pages never fetch latin-ext.
   =========================================================================== */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/figtree-400-latin.c3d43bb5.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/figtree-400-latin-ext.9d6a415c.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@layer tokens {

:root {
  /* The palette below is a single fixed light one — cream ground, ink text —
     and there is no dark counterpart. Saying so is what keeps it intact: a
     browser told nothing assumes the page can be darkened for it, and Chrome
     on Android does exactly that (Auto Dark Theme), inverting the cream to a
     muddy grey and taking the terracotta with it. Declaring the scheme opts
     out of that, and lines up the scrollbars, caret, autofill and native
     dropdowns with the page instead of with the OS.

     If a real dark palette is ever added, this becomes `light dark`. */
  color-scheme: light;

  --color-bg: #f5ead8;
  --color-surface: #ebddc5;
  --color-text: #201e1d;
  --color-accent: #c67139;
  --color-accent-2: #7a8a5e;
  --color-divider: color-mix(in srgb, #201e1d 16%, transparent);

  --color-neutral-100: #f9f4ed;
  --color-neutral-200: #eee7db;
  --color-neutral-300: #dcd3c4;
  --color-neutral-400: #c0b6a5;
  --color-neutral-500: #a19786;
  --color-neutral-600: #82796a;
  --color-neutral-700: #645c50;
  --color-neutral-800: #474238;
  --color-neutral-900: #2e2b25;

  --color-accent-100: #fff2eb;
  --color-accent-200: #ffe1d0;
  --color-accent-300: #ffc6a5;
  --color-accent-400: #f6a06b;
  --color-accent-500: #d67f48;
  --color-accent-600: #b2622d;
  --color-accent-700: #8c491a;
  --color-accent-800: #643312;
  --color-accent-900: #402310;

  /* Call-to-action surfaces. The cream label on --color-accent measures
     3.03:1, below the 4.5:1 WCAG AA minimum, so filled buttons use a
     slightly deeper tone of the same terracotta: 4.68:1 at rest, 5.72:1 on
     hover. --color-accent itself is unchanged, so every decorative use of
     it across the site keeps exactly the colour it has today. */
  --color-accent-cta: #9c5626;
  --color-accent-cta-hover: #8c491a;
  --color-accent-cta-active: #7c4017;

  /* ── Semantic surface + text tokens ──────────────────────────────────────
     The palette above is the raw material; these are the roles. Before this
     existed the codebase carried six different alphas for what are really two
     text roles and two rule weights — .65/.68/.70/.72/.74/.75 for muted copy,
     .08/.09/.10/.12/.13/.14 for dividers. Each token's alpha is the value that
     was already dominant, and each text token is at or above the 4.5:1 WCAG AA
     floor on both --color-bg and --color-surface. Reach for these rather than
     inventing another rgba(). */
  --text: var(--color-text);                    /* headings, body copy */
  --text-secondary: rgba(32,30,29,.72);         /* supporting paragraphs — 5.64:1 */
  --text-tertiary: rgba(32,30,29,.65);          /* captions, meta, labels — 4.58:1 */
  --rule: rgba(32,30,29,.14);                   /* section dividers */
  --rule-soft: rgba(32,30,29,.1);               /* internal gridlines */

  --text-on-dark: rgba(240,230,213,.78);        /* footer links — 7.57:1 */
  --text-on-dark-dim: rgba(240,230,213,.55);    /* footer legalese — 4.56:1 */
  --rule-on-dark: rgba(240,230,213,.14);
  --fill-on-dark: rgba(240,230,213,.1);

  --color-accent-2-100: #f0fae1;
  --color-accent-2-200: #e1eecc;
  --color-accent-2-300: #ccdbb2;
  --color-accent-2-400: #aebf92;
  --color-accent-2-500: #8fa073;
  --color-accent-2-600: #728157;
  --color-accent-2-700: #56633f;
  --color-accent-2-800: #3d472b;
  --color-accent-2-900: #272e1b;

  /* Headings and the landing hero share one serif. Times New Roman first, then
     the equivalents that ship on machines without it, so the shape holds up off
     Windows/macOS. No webfont: these are all local. */
  --font-heading: "Times New Roman", Times, "Liberation Serif", "Nimbus Roman", serif;
  --font-heading-weight: 400;
  --font-body: "Figtree", system-ui, sans-serif;
  --font-hero: var(--font-heading);

  /* ── Spacing — 4px base ───────────────────────────────────────────────────
     Was an inherited 4.4px base, which produced fractional values that never
     landed on the pixel grid. Same rhythm, whole numbers. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ── Radii ─────────────────────────────────────────────────────────────── */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-xl: 36px;
  --radius-pill: 999px;

  /* ── Elevation ────────────────────────────────────────────────────────────
     Each level is several shadows stacked rather than one: a tight contact
     shadow, a mid diffuse layer, and a wide ambient one. That is how light
     actually falls off, and it is most of the difference between a card that
     looks pasted on and one that looks placed. The colour is the darkest
     neutral (#2e2b25) rather than black, so shadows stay warm against the
     cream and never go grey. */
  --shadow-xs: 0 1px 2px rgba(46,43,37,.07);
  --shadow-sm: 0 1px 2px rgba(46,43,37,.06),
               0 2px 6px rgba(46,43,37,.08);
  --shadow-md: 0 1px 2px rgba(46,43,37,.05),
               0 4px 10px rgba(46,43,37,.08),
               0 9px 20px rgba(46,43,37,.07);
  --shadow-lg: 0 2px 4px rgba(46,43,37,.05),
               0 8px 18px rgba(46,43,37,.09),
               0 18px 36px rgba(46,43,37,.10);
  --shadow-xl: 0 4px 8px rgba(46,43,37,.05),
               0 14px 28px rgba(46,43,37,.09),
               0 28px 56px rgba(46,43,37,.12);

  /* ── Type scale — 1.25 (major third) from a 15px base ─────────────────────
     Sizes the page bodies already reach for, expressed once. */
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-md: 17px;
  --text-lg: 20px;
  --text-xl: 25px;
  --text-2xl: 31px;
  --text-3xl: 39px;
  --text-4xl: 49px;
  --text-5xl: 61px;
  --text-6xl: 76px;

  /* ── Motion ───────────────────────────────────────────────────────────────
     Durations short enough to feel like response rather than animation. The
     ease curves are the same family already used across the site; naming them
     stops each new component inventing its own. */
  --dur-instant: 90ms;
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
  --dur-slower: 800ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);      /* decelerate — entrances */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);  /* symmetric — moves */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* slight overshoot — press */

  /* ── Breakpoints ──────────────────────────────────────────────────────────
     Custom properties cannot be used inside a media query, so these are the
     agreed set rather than something the CSS can reference. Pick from them
     rather than inventing a new width:
       520px  narrow phone      780px  phone / small tablet
       900px  tablet            1080px small desktop
     Values already in the codebase outside this set are deliberate tuning for
     a specific component and are left alone. */
}

}

@layer base {

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }
.washed{filter:saturate(0.6) contrast(0.85) brightness(1.1) opacity(0.94)}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

.hr { height: 1px; border: 0; margin: var(--space-4) 0; background: var(--color-divider); }

}

@layer components {

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
/* Filled ink, not outlined. The terracotta outline asked the reader to work
   out that it was the button; a solid dark shape on cream does not need
   explaining, and it anchors a section without spending a second accent
   colour on it. Ink (#201e1d) rather than pure black, so the CTA belongs to
   the same family as the type it sits under. Terracotta stays the accent
   everywhere else — links, ghost buttons, the marks. */
.btn-primary {
  background: var(--color-text);
  color: var(--color-bg);
  border-color: var(--color-text);
}
/* Hover lifts toward the cream ground and the press deepens past ink, so the
   two states move in opposite directions and the button never looks stuck. */
.btn-primary:hover {
  background: color-mix(in srgb, var(--color-text) 86%, var(--color-bg));
  border-color: color-mix(in srgb, var(--color-text) 86%, var(--color-bg));
  color: var(--color-bg);
}
.btn-primary:active {
  background: #000;
  border-color: #000;
  color: var(--color-bg);
}
/* Paired with a solid ink pill, the old divider-weight border read as disabled
   next to it. Ink at 45% is the lightest edge that still holds the pair. */
.btn-secondary { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }

.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: none;
}
.nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 1px solid var(--color-divider);
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

.card, .dialog { border-radius: calc(var(--radius-lg) * 1.15); }
/* Everything round: tags, segmented controls, inputs and buttons. A filled
   ink pill is unmistakably a target on its own — the squared corners were
   carrying weight the fill now carries — and a full radius is what keeps the
   CTA from reading as pasted-in UI chrome on a page of soft edges. */
.tag, .seg, .input, .btn { border-radius: 999px; }
.input { padding-inline: 14px; }


body{margin:0;background:#f5ead8}
a{color:var(--color-accent-700);text-decoration:none}
a:hover{color:var(--color-accent-600)}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}

}

@layer components {

/* ===========================================================================
   Icon — a <use> reference into /assets/sprite.570e94b4.svg
   ===========================================================================
   The wrapper carries size and stroke; both inherit into the referenced symbol,
   so one shape in the sprite serves every size and weight on the site. These
   defaults were previously repeated as seven attributes on all 82 icons.
   Override weight with .icon--thin / --bold / --heavy, or set --icon-stroke. */
.icon {
  width: var(--icon-size, 1em);
  height: var(--icon-size, 1em);
  display: block;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke, 2.4);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--thin  { --icon-stroke: 2.2; }
.icon--bold  { --icon-stroke: 2.6; }
.icon--heavy { --icon-stroke: 3; }
.icon--max   { --icon-stroke: 3.5; }

}

@layer components {

/* ===========================================================================
   Standard page layout (.pg-*)
   =========================================================================== */
.pg-wrap { max-width:1240px; margin:0 auto; padding:64px 32px 90px; }
.pg-hero { max-width:820px; margin-bottom:56px; }
.pg-eyebrow { font:600 11px/1 var(--font-body); letter-spacing:.14em; text-transform:uppercase; color:var(--color-accent-700); }
.pg-hero h1 { font:400 62px/1.02 var(--font-heading); letter-spacing:-.035em; margin:18px 0 22px; max-width:16ch; text-wrap:pretty; }
.pg-hero p { font:400 20px/1.6 var(--font-body); color:var(--text-secondary); margin:0; max-width:54ch; }

.pg-card { background:var(--color-surface); border-radius:32px; padding:44px 44px 40px; margin-bottom:70px; position:relative; overflow:hidden; }
.pg-card-in { position:relative; z-index:1; }
.pg-card p { font:400 19px/1.65 var(--font-body); color:var(--text-secondary); margin:0 0 18px; max-width:58ch; }
.pg-card p:last-child { margin-bottom:0; }
.pg-card p.pg-emph { font:600 20px/1.6 var(--font-body); color:var(--color-text); max-width:50ch; }

.pg-sec { margin-bottom:70px; }
.pg-sec-h { font:400 44px/1.03 var(--font-heading); letter-spacing:-.03em; margin:16px 0 14px; max-width:17ch; }
.pg-sec-p { font:400 18px/1.6 var(--font-body); color:var(--text-secondary); margin:0 0 40px; max-width:52ch; }

.pg-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0 40px; }
.pg-grid.two { grid-template-columns:repeat(2,1fr); }
.pg-item { padding:30px 0 32px; border-top:1px solid var(--rule); }
.pg-grid:not(.two) .pg-item:nth-last-child(-n+3) { border-bottom:1px solid var(--rule); }
.pg-grid.two .pg-item:nth-last-child(-n+2) { border-bottom:1px solid var(--rule); }
.pg-item { position: relative; }
.pg-item h3 { font:400 24px/1.15 var(--font-heading); font-weight:var(--font-heading-weight); margin:0 0 10px; }
.pg-item p { font:400 15px/1.6 var(--font-body); color:var(--text-secondary); margin:0; }

.pg-list { list-style:none; margin:0; padding:0; max-width:60ch; }
.pg-list li { position:relative; padding:0 0 16px 26px; font:400 17px/1.6 var(--font-body); color:var(--text-secondary); }
.pg-list li::before { content:""; position:absolute; left:2px; top:11px; width:8px; height:8px; border-radius:999px; background:var(--color-accent); }

.pg-dark { background:var(--color-neutral-900); color:#f0e6d5; border-radius:32px; padding:50px 44px; margin-bottom:70px; }
.pg-dark .pg-eyebrow { color:var(--color-accent-300); }
.pg-dark h2 { font:400 42px/1.05 var(--font-heading); letter-spacing:-.03em; margin:16px 0 20px; max-width:18ch; color:#f5ead8; }
.pg-dark p { font:400 17px/1.65 var(--font-body); color:rgba(240,230,213,.75); margin:0 0 14px; max-width:56ch; }
.pg-dark p:last-child { margin-bottom:0; }

.pg-end { padding:10px 0; }
.pg-end h2 { font:400 54px/1.02 var(--font-heading); letter-spacing:-.035em; margin:0 0 18px; max-width:15ch; }
.pg-end p { font:400 19px/1.6 var(--font-body); color:var(--text-secondary); margin:0 0 28px; max-width:48ch; }
.pg-note { font:400 14px/1.5 var(--font-body); color:var(--text-tertiary); margin:16px 0 0; }

@media (max-width: 900px) {
  .pg-wrap { padding:40px 18px 60px; }
  .pg-hero { margin-bottom:38px; }
  .pg-hero h1 { font-size:38px; }
  .pg-hero p { font-size:17px; }
  .pg-card { padding:28px 22px 26px; border-radius:26px; margin-bottom:48px; }
  .pg-card p { font-size:17px; }
    .pg-sec { margin-bottom:48px; }
  .pg-sec-h { font-size:31px; }
  .pg-grid, .pg-grid.two { grid-template-columns:1fr; }
  .pg-grid .pg-item:nth-last-child(-n+3), .pg-grid.two .pg-item:nth-last-child(-n+2) { border-bottom:none; }
  .pg-grid .pg-item:last-child { border-bottom:1px solid var(--rule); }
  .pg-dark { padding:32px 22px; border-radius:26px; margin-bottom:48px; }
  .pg-dark h2 { font-size:30px; }
  .pg-end h2 { font-size:34px; }
}

}

@layer components {

/* ===========================================================================
   Mission page (.ms-*)
   =========================================================================== */
.ms-wrap { max-width:1240px; margin:0 auto; padding:64px 32px 90px; }

.ms-hero { max-width:840px; margin-bottom:60px; }
.ms-eyebrow { font:600 11px/1 var(--font-body); letter-spacing:.14em; text-transform:uppercase; color:var(--color-accent-700); }
.ms-hero h1 { font:400 66px/1.02 var(--font-heading); letter-spacing:-.035em; margin:18px 0 22px; max-width:16ch; text-wrap:pretty; }
.ms-hero p { font:400 20px/1.6 var(--font-body); color:var(--text-secondary); margin:0; max-width:54ch; }

.ms-card { background:var(--color-surface); border-radius:32px; padding:46px 46px 42px; margin-bottom:76px; position:relative; overflow:hidden; }
.ms-card-in { position:relative; z-index:1; }
.ms-card p { font:400 19px/1.65 var(--font-body); color:var(--text-secondary); margin:0 0 18px; max-width:58ch; }
.ms-card p.ms-emph { font:600 20px/1.6 var(--font-body); color:var(--color-text); margin:0; max-width:50ch; }

.ms-sec { margin-bottom:76px; }
.ms-sec-h { font:400 46px/1.03 var(--font-heading); letter-spacing:-.03em; margin:16px 0 14px; max-width:16ch; }
.ms-sec-p { font:400 18px/1.6 var(--font-body); color:var(--text-secondary); margin:0 0 44px; max-width:52ch; }

.ms-principles { display:grid; grid-template-columns:repeat(3,1fr); gap:0 40px; }
.ms-principle { padding:30px 0 32px; border-top:1px solid var(--rule); }
.ms-principle:nth-last-child(-n+3) { border-bottom:1px solid var(--rule); }
.ms-principle h3 { font:400 24px/1.15 var(--font-heading); font-weight:var(--font-heading-weight); margin:0 0 10px; }
.ms-principle p { font:400 15px/1.6 var(--font-body); color:var(--text-secondary); margin:0; }

.ms-promise { background:var(--color-neutral-900); color:#f0e6d5; border-radius:32px; padding:52px 46px; margin-bottom:76px; }
.ms-promise .ms-eyebrow { color:var(--color-accent-300); }
.ms-promise h2 { font:400 44px/1.05 var(--font-heading); letter-spacing:-.03em; margin:16px 0 30px; max-width:18ch; color:#f5ead8; }
.ms-promise-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid rgba(240,230,213,.2); }
.ms-promise-grid > div { padding:28px 34px 4px 0; }
.ms-promise-grid > div + div { border-left:1px solid var(--rule-on-dark); padding-left:34px; }
.ms-promise-grid h3 { font:400 22px/1.2 var(--font-heading); font-weight:var(--font-heading-weight); margin:0 0 10px; color:#f5ead8; }
.ms-promise-grid p { font:400 15px/1.6 var(--font-body); color:rgba(240,230,213,.72); margin:0; }

.ms-end { padding:10px 0 10px; }
.ms-end h2 { font:400 56px/1.02 var(--font-heading); letter-spacing:-.035em; margin:0 0 18px; max-width:14ch; }
.ms-end p { font:400 19px/1.6 var(--font-body); color:var(--text-secondary); margin:0 0 30px; max-width:46ch; }
.ms-end .ms-note { font:400 14px/1.5 var(--font-body); color:var(--text-tertiary); margin:16px 0 0; }

@media (max-width: 900px) {
  .ms-wrap { padding:40px 18px 60px; }
  .ms-hero { margin-bottom:40px; }
  .ms-hero h1 { font-size:40px; }
  .ms-hero p { font-size:17px; }
  .ms-card { padding:30px 22px 28px; border-radius:26px; margin-bottom:52px; }
  .ms-card p { font-size:17px; }
  .ms-card p.ms-emph { font-size:18px; }
    .ms-sec { margin-bottom:52px; }
  .ms-sec-h { font-size:32px; }
  .ms-principles { grid-template-columns:1fr; gap:0; }
  .ms-principle:nth-last-child(-n+3) { border-bottom:none; }
  .ms-principle:last-child { border-bottom:1px solid var(--rule); }
  .ms-promise { padding:32px 22px; border-radius:26px; margin-bottom:52px; }
  .ms-promise h2 { font-size:32px; }
  .ms-promise-grid { grid-template-columns:1fr; }
  .ms-promise-grid > div + div { border-left:none; border-top:1px solid var(--rule-on-dark); padding-left:0; padding-top:24px; }
  .ms-end h2 { font-size:36px; }
}

}

@layer components {

/* ===========================================================================
   Pricing page (.pr-*)
   =========================================================================== */
.pr-wrap { max-width:1240px; margin:0 auto; padding:64px 32px 90px; }
.pr-hero { max-width:760px; margin-bottom:56px; }
.pr-eyebrow { font:600 11px/1 var(--font-body); letter-spacing:.14em; text-transform:uppercase; color:var(--color-accent-700); }
.pr-hero h1 { font:400 64px/1.02 var(--font-heading); letter-spacing:-.035em; margin:18px 0 20px; max-width:14ch; }
.pr-hero p { font:400 20px/1.6 var(--font-body); color:var(--text-secondary); margin:0; max-width:54ch; }

.pr-card { background:var(--color-surface); border-radius:32px; padding:44px 44px 40px; margin-bottom:64px; position:relative; overflow:hidden; }
.pr-card-in { position:relative; }
.pr-badge { display:inline-flex; align-items:center; gap:8px; background:var(--color-accent-2-100); color:var(--color-accent-2-800);
  border-radius:999px; padding:7px 14px; font:600 12px/1 var(--font-body); margin-bottom:22px; }
.pr-price { font:400 84px/1 var(--font-heading); letter-spacing:-.04em; margin:0 0 10px; }
.pr-price small { font:400 20px/1 var(--font-body); color:var(--text-tertiary); letter-spacing:0; margin-left:6px; }
.pr-sub { font:400 17px/1.6 var(--font-body); color:var(--text-secondary); margin:0 0 28px; max-width:50ch; }
.pr-cta { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.pr-note { font:400 14px/1.5 var(--font-body); color:var(--text-tertiary); }

.pr-sec-h { font:400 40px/1.05 var(--font-heading); letter-spacing:-.03em; margin:0 0 8px; }
.pr-sec-p { font:400 16px/1.6 var(--font-body); color:var(--text-tertiary); margin:0 0 32px; max-width:52ch; }
.pr-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px 34px; margin-bottom:70px; }
.pr-item { display:flex; gap:13px; align-items:flex-start; }
.pr-check { width:22px; height:22px; border-radius:999px; background:var(--color-accent-2-200); color:var(--color-accent-2-800);
  display:grid; place-items:center; flex:none; margin-top:2px; }
.pr-item-t { font:600 15px/1.35 var(--font-body); margin:0 0 4px; }
.pr-item-d { font:400 14px/1.55 var(--font-body); color:var(--text-tertiary); margin:0; }

.pr-why { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:start; background:var(--color-surface);
  border-radius:32px; padding:46px; margin-bottom:70px; }
.pr-why h2 { font:400 38px/1.06 var(--font-heading); letter-spacing:-.03em; margin:0 0 14px; max-width:16ch; }
.pr-why p { font:400 16px/1.7 var(--font-body); color:var(--text-secondary); margin:0 0 14px; }
.pr-why p:last-child { margin-bottom:0; }

.pr-faq { display:grid; grid-template-columns:340px 1fr; gap:70px; align-items:start; }
.pr-faq-row { padding:22px 0; border-top:1px solid var(--rule); }
.pr-faq-row:last-child { border-bottom:1px solid var(--rule); }
.pr-faq-q { font:600 17px/1.4 var(--font-body); margin:0 0 8px; }
.pr-faq-a { font:400 15px/1.65 var(--font-body); color:var(--text-secondary); margin:0; max-width:70ch; }

.pr-end { text-align:left; padding:80px 0 10px; }
.pr-end h2 { font:400 52px/1.02 var(--font-heading); letter-spacing:-.035em; margin:0 0 18px; max-width:16ch; }
.pr-end p { font:400 18px/1.6 var(--font-body); color:var(--text-secondary); margin:0 0 28px; max-width:46ch; }

@media (max-width: 900px) {
  .pr-wrap { padding:40px 18px 60px; }
  .pr-hero h1 { font-size:40px; }
  .pr-hero p { font-size:17px; }
  .pr-card { padding:30px 22px 28px; border-radius:26px; }
  .pr-price { font-size:60px; }
  .pr-grid { grid-template-columns:1fr; gap:22px; }
  .pr-why, .pr-faq { grid-template-columns:1fr; gap:26px; }
  .pr-why { padding:28px 22px; }
  .pr-sec-h { font-size:30px; }
  .pr-end h2 { font-size:36px; }
  }

}

@layer components {

/* ===========================================================================
   Workspace page (.ws-*)
   =========================================================================== */
/* ── workspace tabs ─────────────────────────────────────────────────────
   The tab list drives which screen panel is shown. Only the active panel is
   in the DOM flow; the rest are display:none, so the page is one screen tall
   instead of seven stacked. */
.ws-wrap { max-width:1240px; margin:0 auto; padding:64px 32px 90px; }
.ws-head { display:flex; align-items:flex-end; gap:40px; margin-bottom:40px; }
.ws-eyebrow { font:600 11px/1 var(--font-body); letter-spacing:.14em; text-transform:uppercase; color:var(--color-accent-700); }
.ws-head h1 { font:400 54px/1.03 var(--font-heading); letter-spacing:-.03em; margin:18px 0 0; max-width:18ch; }
.ws-head p { font:400 17px/1.6 var(--font-body); color:var(--text-secondary); margin:0 0 6px; max-width:38ch; margin-left:auto; }
.ws-cols { display:flex; gap:26px; align-items:flex-start; }
.ws-rail { width:236px; flex:none; position:relative; }
.ws-tabs { display:flex; flex-direction:column; border-left:1px solid var(--rule); position:relative; }
.ws-ind { position:absolute; left:0; top:0; width:3px; height:46px; border-radius:2px; background:var(--color-accent);
  transition:transform .32s cubic-bezier(.2,.8,.2,1); }
.ws-tab { text-align:left; background:none; border:0; cursor:pointer; font:600 16px/1.2 var(--font-body);
  color:var(--text-tertiary); padding:14px 18px; height:46px; transition:color .18s; }
.ws-tab:hover { color:var(--color-accent-700); }
.ws-tab.on { color:var(--color-text); }
.ws-blurb { font:400 14px/1.6 var(--font-body); color:var(--text-tertiary); margin:26px 18px 0; }
.ws-stage { flex:1; min-width:0; background:var(--color-surface); border-radius:28px; padding:22px; box-shadow:var(--shadow-md); }
.ws-screen { background:var(--color-bg); border-radius:20px; min-height:640px; overflow:hidden; position:relative; }
.ws-panel { display:none; }
.ws-panel.on { display:block; }
@media (prefers-reduced-motion: reduce) {
  .ws-ind { transition:none; }
}
@media (max-width: 900px) {
  .ws-wrap { padding:40px 18px 60px; }
  .ws-head { flex-direction:column; align-items:flex-start; gap:14px; }
  .ws-head h1 { font-size:34px; }
  .ws-head p { margin-left:0; }
  .ws-cols { flex-direction:column; }
  .ws-rail { width:100%; }
  .ws-tabs { flex-direction:row; overflow-x:auto; border-left:none; gap:4px; -webkit-overflow-scrolling:touch; }
  .ws-tab { white-space:nowrap; padding:10px 14px; }
  .ws-ind { display:none; }
  .ws-blurb { margin:14px 0 0; }
  .ws-stage { padding:12px; }
  .ws-screen { min-height:0; }
}

}

@layer components {

/* ===========================================================================
   Feature page content (.fhero, .fsec, .fgrid ...) — component rules only.
   The base/reset and .btn rules that shipped in feature.css are dropped: they
   duplicated the base layer above and overrode it, which changed header height.
   The .fh-* header and .ff-* footer rules are gone with the shared partials.
   =========================================================================== */
.fpage {max-width: 1080px; margin: 0 auto; padding: 0 32px;}
.fhero {position: relative; padding: 92px 0 60px; overflow: hidden;}
.fhero-in {position: relative; z-index: 1; max-width: 720px;}
.fkicker {display: inline-flex; align-items: center; gap: 9px; background: var(--color-surface); border-radius: 999px; padding: 7px 14px; font: 600 12px/1 var(--font-body); color: var(--text-secondary); margin-bottom: 24px;}
.fkicker .ico {width: 18px; height: 18px; border-radius: 999px; display: grid; place-items: center;}
.fhero h1 {font-size: 64px; line-height: .98; letter-spacing: -.035em; margin: 0 0 22px; text-wrap: pretty;}
.fhero .lede {font: 400 20px/1.55 var(--font-body); color: var(--text-secondary); margin: 0 0 30px; max-width: 56ch;}
.fhero .cta {display: flex; align-items: center; gap: 14px; flex-wrap: wrap;}
.fstats {display: flex; gap: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin: 8px 0 0;}
.fstat {flex: 1; padding: 26px 30px; border-left: 1px solid var(--rule-soft);}
.fstat:first-child {padding-left: 0; border-left: 0;}
.fstat:last-child {padding-right: 0;}
.fstat b {display: block; font: 400 34px/1 var(--font-heading); margin-bottom: 6px;}
.fstat span {font: 400 13px/1.45 var(--font-body); color:var(--text-tertiary);}
.fsec {padding: 72px 0;}
.fsec.alt {background: var(--color-surface);}
.fsec-head {max-width: 620px; margin-bottom: 40px;}
.feyebrow {font: 600 11px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent-700);}
.fsec-head h2 {font-size: 44px; line-height: 1.04; margin: 16px 0 14px;}
.fsec-head p {font: 400 18px/1.6 var(--font-body); color: var(--text-secondary); margin: 0;}
.fgrid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;}
.fcard {background: var(--color-bg); border: 1px solid var(--rule-soft); border-radius: 22px; padding: 26px 24px; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);}
.fsec.alt .fcard {background: var(--color-neutral-100);}
.fcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.fcard .ico {width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 16px;}
.fcard h3 {font: 600 18px/1.25 var(--font-body); margin: 0 0 8px; font-family: var(--font-body); letter-spacing: 0;}
.fcard p {font: 400 14px/1.55 var(--font-body); color: rgba(32,30,29,.66); margin: 0;}
.frow {display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;}
.frow.rev .fcol-media {order: -1;}
.fcol h2 {font-size: 40px; line-height: 1.05; margin: 0 0 18px;}
.fcol p {font: 400 17px/1.6 var(--font-body); color: var(--text-secondary); margin: 0 0 14px; max-width: 46ch;}
.fbullets {list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-direction: column; gap: 12px;}
.fbullets li {display: flex; gap: 11px; align-items: flex-start; font: 400 15px/1.5 var(--font-body);}
.fbullets .chk {width: 22px; height: 22px; flex: none; border-radius: 999px; background: var(--color-accent-2-100); color: var(--color-accent-2-700); display: grid; place-items: center;}
.fmedia {background: var(--color-surface); border-radius: 24px; padding: 26px; box-shadow: var(--shadow-md); min-height: 300px;}
.fsec.alt .fmedia {background: var(--color-bg);}
.fmock-row {display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--color-bg); border-radius: 16px; margin-bottom: 10px; box-shadow: var(--shadow-sm);}
.fsec.alt .fmock-row {background: var(--color-surface);}
.fmock-row .dot {width: 22px; height: 22px; border-radius: 999px; flex: none; border: 2px solid var(--color-accent);}
.fmock-row .dot.done {background: var(--color-accent); border-color: var(--color-accent);}
.fmock-row .b {flex: 1; min-width: 0;}
.fmock-row .b p {margin: 0;}
.fmock-row .b .t {font: 600 14px/1.3 var(--font-body);}
.fmock-row .b .m {font: 400 12px/1.3 var(--font-body); color:var(--text-tertiary);}
.fmock-row .tag {font: 600 11px/1.6 var(--font-body); border-radius: 999px; padding: 3px 10px; background: var(--color-accent-2-100); color: var(--color-accent-2-900); flex: none;}
.fmock-ai {background: var(--color-accent-2-100); border-radius: 18px; padding: 16px 18px; display: flex; gap: 12px; align-items: flex-start;}
.fmock-ai .orb {width: 26px; height: 26px; border-radius: 999px; background: var(--color-accent-2-600); display: grid; place-items: center; color: #f5ead8; flex: none;}
.fmock-ai p {margin: 0; font: 400 14px/1.55 var(--font-body); color: rgba(32,30,29,.78);}
.fcta {padding: 80px 0; text-align: center;}
.fcta h2 {font-size: 48px; line-height: 1.02; margin: 0 0 16px;}
.fcta p {font: 400 18px/1.6 var(--font-body); color: var(--text-secondary); margin: 0 auto 28px; max-width: 46ch;}
.frelated {padding: 60px 0 20px;}
.frelated h3 {font-size: 26px; margin: 0 0 22px;}
.frel-grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;}
.frel {display: flex; align-items: center; gap: 12px; padding: 16px; background: var(--color-surface); border-radius: 16px; color: var(--color-text); transition: transform .18s, box-shadow .18s;}
.frel:hover {transform: translateY(-2px); box-shadow: var(--shadow-sm);}
.frel .ico {width: 34px; height: 34px; border-radius: 11px; flex: none; display: grid; place-items: center;}
.frel b {font: 600 14px/1.2 var(--font-body);}
@media (max-width: 820px) {
.fhero h1 {font-size: 44px;}
.fhero {padding: 60px 0 40px;}
.fgrid, .frel-grid {grid-template-columns: 1fr 1fr;}
.frow {grid-template-columns: 1fr; gap: 32px;}
.frow.rev .fcol-media {order: 0;}
.fstats {flex-wrap: wrap;}
.fstat {flex: 1 1 45%;}
.fsec-head h2, .fcol h2 {font-size: 32px;}
.fcta h2 {font-size: 36px;}
}
@media (max-width: 520px) {
.fgrid, .frel-grid {grid-template-columns: 1fr;}
}
@media (prefers-reduced-motion: reduce) {
.fcard, .frel {transition: none;}
}

}

@layer components {

/* ===========================================================================
   Home feature showcase — everything below the hero
   ===========================================================================
   The hero answers "what is AevenSpace?" with one large live demo. These four
   sections answer "how does it work?" with four small ones: Aeven AI, the
   wellbeing check-in, the LMS import and the assignment workspace.

   Two rules held throughout:

   1. No new design language. Every colour, radius, shadow, duration and font
      here is a token from 10-tokens.css, and the demo chrome is deliberately
      the same shape as the hero simulation's (.hs-*) so the page reads as one
      product rather than two.
   2. The markup is the finished state. home-showcase.js only adds classes to
      replay how that state came to be, so with JS off — or on a first paint
      before the script runs — every demo is a complete, legible screenshot.
      That is why the resting styles below are the *end* of each animation and
      the .js-gated rules are the beginning.
   =========================================================================== */

/* ── Section scaffold ─────────────────────────────────────────────────────── */
.fx-wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.fx-sec { padding: 104px 0; }
.fx-sec--alt { background: var(--color-surface); }

/* The demo column is always the wider of the two, whichever side it is on. */
.fx-row { display: grid; grid-template-columns: 1fr 1.06fr; gap: 76px; align-items: center; }
.fx-row--rev { grid-template-columns: 1.06fr 1fr; }
.fx-row--rev .fx-col-media { order: -1; }
.fx-col-media { min-width: 0; }

.fx-eyebrow {
  display: flex; align-items: center; gap: 9px;
  font: 600 11px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-accent-700); margin: 0;
}
.fx-eyebrow-ico { width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; flex: none; }
.fx-ico-sage { background: var(--color-accent-2-100); color: var(--color-accent-2-700); }
.fx-ico-terra { background: var(--color-accent-100); color: var(--color-accent-700); }

.fx-copy h2 {
  font: 400 52px/1.03 var(--font-heading); letter-spacing: -.03em;
  margin: 20px 0 20px; max-width: 15ch; text-wrap: pretty;
}
/* Section number set against the top-right of the heading. The wrapper is
   sized to the heading rather than the column so the number tracks the text
   block, not the far edge of the page. */
.fx-h2-num { display: flex; align-items: flex-start; gap: 0; width: fit-content; max-width: 100%; }
/* The h2 box is as wide as its longest wrapped line, but the number aligns to
   the first line — which is usually shorter, leaving dead space between them.
   CSS cannot measure a rendered line, so pull the number back over that gap by
   a fixed amount and let it overlap the box rather than the text. */
.fx-h2-num h2 { flex: 0 1 auto; width: fit-content; }
.fx-num {
  flex: none; margin: 26px 0 0 -1.2em;
  font: 600 15px/1 var(--font-body); letter-spacing: .1em;
  color: var(--color-text);
}
.fx-lede { font: 400 18px/1.6 var(--font-body); color: var(--text-secondary); margin: 0 0 26px; max-width: 46ch; }
.fx-points { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-direction: column; gap: 13px; }
.fx-points li { display: flex; gap: 11px; align-items: flex-start; font: 400 15px/1.5 var(--font-body); max-width: 44ch; }
.fx-points .chk {
  width: 21px; height: 21px; flex: none; border-radius: 999px; margin-top: 1px;
  background: var(--color-accent-2-100); color: var(--color-accent-2-700);
  display: grid; place-items: center;
}
.fx-aside {
  font: 600 15px/1.55 var(--font-body); margin: 0 0 26px; max-width: 42ch;
  padding-left: 14px; border-left: 2px solid var(--color-accent-300);
}
.fx-link {
  display: inline-flex; align-items: center; gap: 7px;
  font: 600 15px/1 var(--font-body); color: var(--color-accent-700);
}
.fx-link span { transition: transform var(--dur-base) var(--ease-out); }
.fx-link:hover span { transform: translateX(4px); }

/* ── The index rail, directly under the hero ──────────────────────────────── */
.fx-lead { padding: 34px 0 62px; }
.fx-lead-h { font: 400 32px/1.06 var(--font-heading); letter-spacing: -.028em; margin: 14px 0 34px; max-width: 22ch; }
.fx-index { display: flex; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.fx-index-item {
  flex: 1; display: block; padding: 26px 30px; color: inherit;
  border-left: 1px solid var(--rule-soft);
  transition: background var(--dur-base) var(--ease-out);
}
.fx-index-item:first-child { padding-left: 0; border-left: 0; }
.fx-index-item:last-child { padding-right: 0; }
.fx-index-item:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); color: inherit; }
.fx-index-item .n { display: block; font: 400 14px/1 var(--font-heading); color: var(--color-accent-700); }
.fx-index-item .t { display: block; font: 600 16px/1.3 var(--font-body); margin: 12px 0 5px; }
.fx-index-item .d { display: block; font: 400 13px/1.45 var(--font-body); color: var(--text-tertiary); max-width: 26ch; }

/* ── Demo chrome, shared by all four ──────────────────────────────────────── */
.fx-demo {
  position: relative; overflow: hidden;
  background: var(--color-bg); border: 1px solid var(--rule-soft); border-radius: 26px;
  box-shadow: var(--shadow-lg);
  font-family: var(--font-body); color: var(--color-text);
  display: flex; flex-direction: column; min-height: 494px;
}
.fx-sec--alt .fx-demo { border-color: transparent; }
.fx-demo * { box-sizing: border-box; }
@media (hover: hover) and (pointer: fine) {
  .fx-demo { transition: box-shadow var(--dur-slow) var(--ease-out); }
  .fx-demo:hover { box-shadow: var(--shadow-xl); }
}

.fx-head {
  display: flex; align-items: center; gap: 10px; flex: none;
  padding: 14px 20px; background: var(--color-surface);
  border-bottom: 1px solid var(--rule-soft);
}
.fx-sec--alt .fx-head { background: color-mix(in srgb, var(--color-surface) 62%, var(--color-bg)); }
.fx-mark, .fx-head-ico { width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; flex: none; }
.fx-head-t { font: 400 17px/1 var(--font-heading); }
.fx-head-ctx { margin-left: auto; font: 600 11px/1 var(--font-body); color: var(--text-tertiary); }

.fx-k { font: 600 10px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--text-tertiary); }
.fx-k--sage { color: var(--color-accent-2-700); }

/* The one entrance every demo shares. Gated on .js so a no-script visitor sees
   the finished state instead of a blank card. */
.js .fx-anim {
  opacity: 0; transform: translateY(10px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slower) var(--ease-out);
}
.js .fx-anim.is-in { opacity: 1; transform: none; }

/* ── 01 · Aeven AI ────────────────────────────────────────────────────────── */
.fx-ai-body { flex: 1; padding: 22px 20px 14px; display: flex; flex-direction: column; gap: 12px; }
.fx-msg { display: flex; }
.fx-msg p { margin: 0; font: 400 14px/1.5 var(--font-body); }
.fx-msg--me { justify-content: flex-end; }
.fx-msg--me p {
  max-width: 78%; background: var(--color-accent-cta); color: var(--color-bg);
  border-radius: 18px 18px 5px 18px; padding: 11px 15px;
}
.fx-msg--ai p { max-width: 92%; color: rgba(32,30,29,.82); padding-left: 2px; }
.fx-msg--ai p::after {
  content: ""; display: inline-block; width: 2px; height: 1em; vertical-align: -2px;
  margin-left: 2px; background: var(--color-accent-2-700); opacity: 0;
}
.fx-ai.is-typing .fx-msg--ai p::after { opacity: 1; animation: fxBlink 1s step-end infinite; }
/* Aeven's opening line is always there — it is the state the panel rests in,
   so it never types and never carries the caret. */
.fx-msg--greet p { color: var(--text-tertiary); }
.fx-msg--greet p::after { content: none; }

.fx-dots { display: flex; gap: 5px; padding: 4px 2px; }
.fx-dots i { width: 6px; height: 6px; border-radius: 999px; background: var(--color-accent-2-500); animation: fxPulse 1.1s ease-in-out infinite; }
.fx-dots i:nth-child(2) { animation-delay: .16s; }
.fx-dots i:nth-child(3) { animation-delay: .32s; }
.js .fx-dots { position: absolute; opacity: 0; }   /* out of flow: it is a beat, not a row */
.js .fx-dots.is-in { position: static; opacity: 1; }

.fx-plan { background: var(--color-surface); border-radius: 20px; padding: 15px 16px 13px; margin-top: auto; }
.fx-sec--alt .fx-plan { background: color-mix(in srgb, var(--color-surface) 62%, var(--color-bg)); }
.fx-plan-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.fx-plan-total { margin-left: auto; font: 600 12px/1 var(--font-body); color: var(--color-accent-700); }
.fx-plan-list { list-style: none; margin: 0; padding: 0; }
.fx-plan-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 2px;
  border-bottom: 1px solid var(--rule-soft);
}
.fx-plan-row:last-child { border-bottom: 0; }
.fx-when { flex: none; width: 58px; font: 600 10px/1.35 var(--font-body); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .06em; }
.fx-when b { display: block; font: 600 12px/1.3 var(--font-body); color: var(--color-text); text-transform: none; letter-spacing: 0; }
.fx-plan-b { flex: 1; min-width: 0; }
.fx-plan-b .t { display: block; font: 600 13.5px/1.3 var(--font-body); }
.fx-plan-b .m { display: block; font: 400 11.5px/1.35 var(--font-body); color: var(--text-tertiary); margin-top: 2px; }
.fx-dur {
  flex: none; font: 600 11px/1 var(--font-body); color: var(--color-accent-2-800);
  background: var(--color-accent-2-100); border-radius: 999px; padding: 5px 9px;
}
.fx-prio { flex: none; width: 4px; height: 22px; border-radius: 999px; }
.fx-prio.hi { background: var(--color-accent); }
.fx-prio.md { background: var(--color-accent-2-600); }
.fx-prio.lo { background: rgba(32,30,29,.18); }
.fx-plan-foot { display: flex; align-items: center; gap: 12px; margin-top: 11px; }
.fx-plan-note { font: 400 11.5px/1.35 var(--font-body); color: var(--text-tertiary); }
.fx-btn {
  margin-left: auto; flex: none; font: 600 12px/1 var(--font-body);
  background: var(--color-accent-cta); color: var(--color-bg);
  border-radius: 999px; padding: 9px 14px;
  transition: transform var(--dur-instant) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.fx-btn.is-press { transform: scale(.95); background: var(--color-accent-cta-active); }

.fx-composer {
  flex: none; display: flex; align-items: center; gap: 2px;
  margin: 0 20px 18px; padding: 11px 12px 11px 16px;
  background: var(--color-bg); border: 1px solid var(--rule); border-radius: 999px;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.fx-sec--alt .fx-composer { background: var(--color-bg); }
.fx-ai.is-writing .fx-composer { border-color: var(--color-accent-400); box-shadow: 0 0 0 3px rgba(198,113,57,.13); }
.fx-composer-t { font: 400 13.5px/1.4 var(--font-body); color: var(--text-tertiary); min-width: 0; }
.fx-ai.is-writing .fx-composer-t { color: var(--color-text); }
.fx-caret { width: 2px; height: 15px; background: var(--color-accent); opacity: 0; flex: none; }
.fx-ai.is-writing .fx-caret { opacity: 1; animation: fxBlink 1s step-end infinite; }
.fx-send {
  margin-left: auto; flex: none; width: 27px; height: 27px; border-radius: 999px;
  background: var(--color-neutral-300); color: var(--color-bg);
  display: grid; place-items: center;
  transition: background var(--dur-base) var(--ease-out);
}
.fx-ai.is-writing .fx-send { background: var(--color-accent-cta); }

/* The plan is kept in place rather than confirmed by a toast — a floating
   pill would have to land on top of something the demo is still showing. */
.fx-btn.is-done { background: var(--color-accent-2-600); }
.fx-plan-note { transition: color var(--dur-base) var(--ease-out); }
.fx-plan-note.is-done { color: var(--color-accent-2-700); font-weight: 600; }

/* ── 02 · Wellbeing ───────────────────────────────────────────────────────── */
.fx-well-body { flex: 1; padding: 22px 20px 20px; display: flex; flex-direction: column; }
.fx-well-q { font: 400 26px/1.1 var(--font-heading); letter-spacing: -.02em; margin: 0 0 16px; }
.fx-moods { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 8px; margin-bottom: 16px; }
.fx-mood {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 13px 4px 11px; border-radius: 18px;
  border: 1px solid var(--rule); background: var(--color-bg);
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
.fx-mood i { width: 22px; height: 22px; border-radius: 999px; display: block; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.fx-mood b { font: 600 11px/1 var(--font-body); color: var(--text-tertiary); }
.fx-mood.is-hover { transform: translateY(-3px); border-color: rgba(32,30,29,.28); }
.fx-mood.is-on { background: var(--color-accent-cta); border-color: transparent; }
.fx-mood.is-on i { transform: scale(1.1); box-shadow: 0 0 0 3px rgba(245,234,216,.5); }
.fx-mood.is-on b { color: var(--color-bg); }
/* resting (no-JS) state: the pick is already made */
.fx-mood.is-pick { background: var(--color-accent-cta); border-color: transparent; }
.fx-mood.is-pick i { transform: scale(1.1); box-shadow: 0 0 0 3px rgba(245,234,216,.5); }
.fx-mood.is-pick b { color: var(--color-bg); }
.js .fx-mood.is-pick { background: var(--color-bg); border-color: var(--rule); }
.js .fx-mood.is-pick i { transform: none; box-shadow: none; }
.js .fx-mood.is-pick b { color: var(--text-tertiary); }
.js .fx-mood.is-pick.is-on { background: var(--color-accent-cta); border-color: transparent; }
.js .fx-mood.is-pick.is-on i { transform: scale(1.1); box-shadow: 0 0 0 3px rgba(245,234,216,.5); }
.js .fx-mood.is-pick.is-on b { color: var(--color-bg); }

.fx-refl {
  background: var(--color-accent-2-100); border: 1.5px dashed var(--color-accent-2-400);
  border-radius: 18px; padding: 14px 16px; margin-bottom: 18px;
}
.fx-refl p { margin: 8px 0 0; font: 400 13.5px/1.5 var(--font-body); }
.fx-refl em { font-style: normal; font-weight: 600; }

/* Study balance — one measure, one hue, seven evenings. The overloaded day is
   the only one in terracotta and the only one carrying a value label, so the
   outlier is never signalled by colour alone. */
.fx-balance { margin-bottom: 16px; }
.fx-bal-head { display: flex; align-items: baseline; margin-bottom: 20px; }
.fx-bal-meta { margin-left: auto; font: 400 11px/1 var(--font-body); color: var(--text-tertiary); }
.fx-bars { display: flex; align-items: flex-end; gap: 6px; padding-bottom: 20px; }
.fx-bar { position: relative; flex: 1; height: 84px; }
.fx-bar i {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--h);
  background: var(--color-accent-2-400); border-radius: 4px 4px 2px 2px;
  transform-origin: bottom;
  transition: height var(--dur-slower) var(--ease-out), background var(--dur-slow) var(--ease-out),
              transform var(--dur-slower) var(--ease-out);
}
.fx-bar b { position: absolute; left: 0; right: 0; bottom: -18px; text-align: center; font: 600 10px/1 var(--font-body); color: var(--text-tertiary); }
.fx-bar em {
  position: absolute; left: 50%; top: -17px; transform: translateX(-50%);
  font: 600 10px/1 var(--font-body); font-style: normal; color: var(--color-accent-700); white-space: nowrap;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.fx-bar--over i { background: var(--color-accent); }
/* the day work moves off, and the day it moves onto */
.fx-bar.is-eased i { height: var(--h2); }
.fx-bar--over.is-eased i { background: var(--color-accent-2-400); }
.js .fx-bar i { transform: scaleY(0); }
.js .fx-bar.is-in i { transform: none; }
.js .fx-bar em { opacity: 0; }
.js .fx-bar.is-in em { opacity: 1; }
.js .fx-bar.is-in.is-eased em { opacity: 0; }

.fx-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.fx-tile { background: var(--color-surface); border-radius: 16px; padding: 13px 15px; }
.fx-sec--alt .fx-tile { background: color-mix(in srgb, var(--color-surface) 62%, var(--color-bg)); }
.fx-tile b { display: block; font: 400 24px/1 var(--font-heading); letter-spacing: -.02em; margin-bottom: 6px; }
.fx-tile span { font: 400 11.5px/1.35 var(--font-body); color: var(--text-tertiary); }

.fx-well-note {
  margin-top: auto; display: flex; align-items: flex-start; gap: 10px;
  background: var(--color-surface); border-radius: 16px; padding: 12px 14px;
  font: 400 12.5px/1.45 var(--font-body); color: rgba(32,30,29,.8);
}
.fx-sec--alt .fx-well-note { background: color-mix(in srgb, var(--color-surface) 62%, var(--color-bg)); }
.fx-note-ico {
  width: 22px; height: 22px; border-radius: 999px; flex: none; display: grid; place-items: center;
  background: var(--color-accent-2-600); color: var(--color-bg);
}

/* ── 03 · LMS integration ─────────────────────────────────────────────────── */
.fx-lms-body { flex: 1; padding: 20px 20px 8px; display: flex; flex-direction: column; }
.fx-prov { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fx-prov-row {
  display: flex; align-items: center; gap: 12px; padding: 11px 13px;
  background: var(--color-surface); border: 1px solid transparent; border-radius: 16px;
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.fx-sec--alt .fx-prov-row { background: color-mix(in srgb, var(--color-surface) 62%, var(--color-bg)); }
.fx-prov-row .lg {
  width: 30px; height: 30px; border-radius: 10px; flex: none; display: grid; place-items: center;
  font: 600 13px/1 var(--font-body); color: #f9f4ed;
}
/* Real provider logos instead of a lettered tile. The mark keeps its own
   brand colours, so the tile behind it goes neutral rather than tinted —
   a coloured ground would fight the logo it's holding. */
.fx-prov-row .lg--img {
  background: var(--color-bg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-primary) 8%, transparent);
  overflow: hidden;
}
.fx-prov-row .lg--img img {
  width: 100%; height: 100%; object-fit: contain; padding: 4px; display: block;
}
.fx-prov-row .nm { flex: 1; min-width: 0; font: 600 13.5px/1.25 var(--font-body); }
.fx-prov-row .nm em { display: block; font: 400 11px/1.3 var(--font-body); font-style: normal; color: var(--text-tertiary); margin-top: 3px; }
.fx-state {
  flex: none; display: flex; align-items: center; gap: 7px;
  font: 600 11.5px/1 var(--font-body); color: var(--color-accent-700);
  background: var(--color-accent-100); border-radius: 999px; padding: 7px 12px;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.fx-spin {
  width: 12px; height: 12px; border-radius: 999px; flex: none;
  border: 2px solid color-mix(in srgb, var(--color-accent-700) 30%, transparent);
  border-top-color: var(--color-accent-700);
  display: none; animation: fxSpin .8s linear infinite;
}
.fx-prov-row.is-busy .fx-spin { display: block; }
.fx-prov-row.is-done .fx-state { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.fx-prov-row.is-done { border-color: var(--color-accent-2-300); }
/* resting state: Canvas is connected */
.fx-prov-row.is-target .fx-state { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.fx-prov-row.is-target { border-color: var(--color-accent-2-300); }
.js .fx-prov-row.is-target:not(.is-done) .fx-state { background: var(--color-accent-100); color: var(--color-accent-700); }
.js .fx-prov-row.is-target:not(.is-done) { border-color: transparent; }

.fx-sync { margin-bottom: 16px; }
.fx-sync-head { display: flex; align-items: baseline; margin-bottom: 9px; }
.fx-sync-count { margin-left: auto; font: 600 11px/1 var(--font-body); color: var(--text-tertiary); }
.fx-prog { height: 4px; border-radius: 999px; background: rgba(32,30,29,.1); overflow: hidden; margin-bottom: 12px; }
.fx-prog i { display: block; height: 100%; width: 100%; border-radius: 999px; background: var(--color-accent-2-600); transition: width 2.2s cubic-bezier(.4,0,.2,1); }
.js .fx-prog i { width: 0; }
.js .fx-sync.is-in .fx-prog i { width: 100%; }
.fx-courses { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.fx-course { display: flex; align-items: center; gap: 10px; font: 600 13px/1.3 var(--font-body); }
.fx-course .chk {
  width: 19px; height: 19px; border-radius: 999px; flex: none; display: grid; place-items: center;
  background: var(--color-accent-2-600); color: var(--color-bg);
}
.fx-course .nm { flex: 1; min-width: 0; }
.fx-course .mt { flex: none; font: 400 11px/1 var(--font-body); color: var(--text-tertiary); }

.fx-landed { margin-top: auto; background: var(--color-surface); border-radius: 18px; padding: 13px 15px; }
.fx-sec--alt .fx-landed { background: color-mix(in srgb, var(--color-surface) 62%, var(--color-bg)); }
.fx-landed-head { display: flex; align-items: baseline; margin-bottom: 4px; }
.fx-landed-meta { margin-left: auto; font: 600 11px/1 var(--font-body); color: var(--color-accent-700); }
.fx-landed-list { list-style: none; margin: 0; padding: 0; }
.fx-landed-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--rule-soft); }
.fx-landed-row:last-child { border-bottom: 0; }
.fx-landed-row .cd { width: 7px; height: 7px; border-radius: 999px; flex: none; }
.fx-landed-row .t { flex: 1; min-width: 0; font: 400 12.5px/1.35 var(--font-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-landed-row .dd { flex: none; font: 600 11px/1 var(--font-body); color: var(--text-tertiary); }
.fx-lms-foot {
  flex: none; display: flex; align-items: center; gap: 8px; margin: 0;
  padding: 12px 20px; border-top: 1px solid var(--rule-soft);
  font: 400 11.5px/1.4 var(--font-body); color: var(--text-tertiary);
}
.fx-lock { width: 20px; height: 20px; border-radius: 999px; flex: none; display: grid; place-items: center; background: var(--color-neutral-200); color: var(--color-neutral-700); }

/* ── 04 · Assignment workspace ────────────────────────────────────────────── */
.fx-seg { margin-left: auto; display: flex; gap: 3px; background: var(--color-neutral-100); padding: 4px; border-radius: 999px; }
.fx-seg b {
  font: 600 11px/1 var(--font-body); color: var(--text-tertiary);
  border-radius: 999px; padding: 7px 12px;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.fx-seg b.is-on { background: var(--color-accent-cta); color: var(--color-bg); }

.fx-work-stage { position: relative; flex: 1; min-height: 442px; }
.fx-panel {
  position: absolute; inset: 0; padding: 18px 20px 20px; display: flex; flex-direction: column;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity var(--dur-slow) ease, transform var(--dur-slower) var(--ease-out);
}
.fx-panel.is-on { opacity: 1; transform: none; }
/* no-JS: only the first panel is shown, and it is shown sorted */
html:not(.js) .fx-panel:not(.is-on) { display: none; }
.fx-panel-k { position: relative; height: 14px; margin: 0 0 16px; }
.fx-panel-k span {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  font: 600 10px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--text-tertiary);
  transition: opacity var(--dur-slow) var(--ease-out);
}
.fx-panel-k .lab-a { opacity: 0; }
.fx-panel-k .lab-b { opacity: 1; color: var(--color-accent-2-700); }
.fx-panel-k .lab-s { opacity: 1; }   /* panels with nothing to switch between */
/* .is-raw is the "before" — the pile as it arrives, before anything sorts it */
.js .fx-panel.is-raw .fx-panel-k .lab-a { opacity: 1; }
.js .fx-panel.is-raw .fx-panel-k .lab-b { opacity: 0; }

.fx-cards { list-style: none; margin: 0; padding: 0; position: relative; height: 362px; }
.fx-card {
  position: absolute; left: 0; right: 0; top: 0; height: 52px;
  display: flex; align-items: center; gap: 12px; padding: 0 14px;
  background: var(--color-surface); border-radius: 16px;
  transform: translateY(var(--sy));
  transition: transform var(--dur-slower) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out),
              background var(--dur-slow) var(--ease-out);
}
.fx-sec--alt .fx-card { background: color-mix(in srgb, var(--color-surface) 62%, var(--color-bg)); }
.fx-card-b { flex: 1; min-width: 0; }
.fx-card-b .t { display: block; font: 600 13.5px/1.3 var(--font-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-card-b .m {
  display: flex; align-items: center; gap: 6px; margin-top: 3px;
  font: 400 11.5px/1.3 var(--font-body); color: var(--text-tertiary);
  white-space: nowrap; overflow: hidden;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.fx-card-b .cd { width: 7px; height: 7px; border-radius: 999px; flex: none; }
.fx-card .due--now { color: var(--color-accent-700); font-weight: 600; }
.fx-est {
  flex: none; font: 600 11px/1 var(--font-body); color: var(--color-accent-2-800);
  background: var(--color-accent-2-100); border-radius: 999px; padding: 5px 9px;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.js .fx-panel.is-raw .fx-card {
  transform: translate(var(--mx), var(--my)) rotate(var(--rot));
  box-shadow: var(--shadow-sm);
}
.js .fx-panel.is-raw .fx-card-b .m,
.js .fx-panel.is-raw .fx-est,
.js .fx-panel.is-raw .fx-prio { opacity: 0; }

.fx-today { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fx-today-row {
  display: flex; align-items: center; gap: 13px; padding: 14px;
  background: var(--color-surface); border-radius: 16px;
}
.fx-sec--alt .fx-today-row { background: color-mix(in srgb, var(--color-surface) 62%, var(--color-bg)); }
.fx-today-row .n {
  width: 24px; height: 24px; border-radius: 999px; flex: none; display: grid; place-items: center;
  background: var(--color-accent-cta); color: var(--color-bg); font: 600 12px/1 var(--font-body);
}
.fx-today-foot { margin-top: auto; display: flex; align-items: flex-end; gap: 28px; padding-top: 18px; border-top: 1px solid var(--rule-soft); }
.fx-today-foot b { display: block; font: 400 24px/1 var(--font-heading); letter-spacing: -.02em; margin-top: 7px; }
.fx-today-tag {
  margin-left: auto; font: 600 11px/1 var(--font-body); color: var(--color-accent-2-800);
  background: var(--color-accent-2-100); border-radius: 999px; padding: 8px 12px;
}

.fx-week { flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.fx-day { background: var(--color-surface); border-radius: 14px; padding: 10px 8px; display: flex; flex-direction: column; gap: 6px; }
.fx-sec--alt .fx-day { background: color-mix(in srgb, var(--color-surface) 62%, var(--color-bg)); }
.fx-day.is-today { background: var(--color-accent-100); }
.fx-day .dn { font: 600 10px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 2px; }
.fx-chip {
  border-left: 3px solid var(--c); border-radius: 7px; padding: 7px 8px;
  background: var(--color-bg); font: 600 10.5px/1.3 var(--font-body);
}
.fx-chip--soft { background: var(--color-accent-2-100); color: var(--color-accent-2-800); font-weight: 400; }
/* the rest of a student's week — the things school never knew about */
.fx-chip--own { background: var(--color-neutral-100); color: var(--color-neutral-800); font-weight: 400; }

/* ── Keyframes ────────────────────────────────────────────────────────────── */
@keyframes fxBlink { 0%,50% { opacity: 1; } 50.01%,100% { opacity: 0; } }
@keyframes fxPulse { 0%,100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
@keyframes fxSpin { to { transform: rotate(360deg); } }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .fx-row { grid-template-columns: 1fr; gap: 44px; }
  .fx-row--rev .fx-col-media { order: 0; }
  .fx-copy h2 { max-width: 20ch; }
  .fx-demo { min-height: 0; }
}
@media (max-width: 900px) {
  .fx-index { flex-wrap: wrap; }
  .fx-index-item { flex: 1 1 46%; padding: 20px 0; border-left: 0; }
  .fx-index-item:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--rule-soft); }
  .fx-index-item:nth-child(n+3) { border-top: 1px solid var(--rule-soft); }
}
@media (max-width: 780px) {
  .fx-sec { padding: 62px 0; }
  .fx-wrap { padding: 0 18px; }
  /* The hero demo now runs at this width too, and its card ends flush with the
     section — without a gap here the index rail's eyebrow starts inside the
     fade at the bottom of it. */
  .fx-lead { padding: 34px 0 54px; }
  .fx-lead-h { font-size: 26px !important; margin-bottom: 22px; }
  .fx-copy h2 { font-size: 32px !important; margin: 16px 0 16px; }
  .fx-lede { font-size: 16px; }
  .fx-head { padding: 12px 14px; }
  .fx-ai-body, .fx-well-body, .fx-lms-body { padding: 16px 14px 10px; }
  .fx-panel { padding: 14px; }
  .fx-composer { margin: 0 14px 14px; }
  .fx-well-q { font-size: 22px; }
  .fx-moods { gap: 5px; }
  .fx-mood { padding: 10px 2px 9px; border-radius: 14px; }
  .fx-mood i { width: 18px; height: 18px; }
  .fx-mood b { font-size: 10px; }
  .fx-tiles { grid-template-columns: 1fr; }
  .fx-when { width: 50px; }
  .fx-week { grid-template-columns: repeat(3, 1fr); }
  .fx-day:nth-child(n+4) { display: none; }
  .fx-today-foot { gap: 18px; }
}
/* Small phones. Nothing is dropped here — the demos are the argument, so they
   get tighter rather than shorter, and the two fixed-height stages come down to
   match so a phone is not scrolling past dead space to reach the next section. */
@media (max-width: 520px) {
  .fx-head { padding: 11px 12px; gap: 8px; }
  .fx-head-t { font-size: 15px; }
  .fx-head-ctx { font-size: 10px; letter-spacing: 0; }
  .fx-seg { padding: 3px; gap: 2px; }
  .fx-seg b { padding: 6px 9px; font-size: 10px; white-space: nowrap; }
  .fx-work-stage { min-height: 408px; }
  .fx-cards { height: 336px; }
  .fx-card { height: 48px; padding: 0 11px; }
  .fx-today-row { padding: 11px; gap: 10px; }
  .fx-today-foot { gap: 14px; padding-top: 14px; }
  .fx-today-foot b { font-size: 20px; }
  .fx-today-tag { padding: 7px 9px; font-size: 10px; }
  .fx-plan-row { gap: 9px; }
  .fx-when { width: 44px; }
  .fx-mood b { font-size: 9px; }
  .fx-well-q { font-size: 20px; }
  .fx-refl, .fx-well-note { padding: 12px 13px; }
  .fx-prov-row { padding: 10px; gap: 10px; }
  .fx-prov-row .nm { font-size: 12.5px; }
  .fx-state { padding: 6px 9px; font-size: 11px; }
  .fx-lms-foot { padding: 11px 14px; }
}

/* ── Reduced motion, and the static tier ──────────────────────────────────────
   The demos still show their finished state — home-showcase.js settles each one
   on sight and never loops. Everything that would move is switched off here.

   Both selectors carry the same rules. `perf-static` is the tier a device is
   put on when it asks for less motion, is on a metered or 2G-class connection,
   or measurably cannot hold a frame budget; the media query stays for the case
   where no JavaScript ran at all and no class was ever set. */
@media (prefers-reduced-motion: reduce) {
  .js .fx-anim { opacity: 1; transform: none; transition: none; }
  .fx-demo *, .fx-card, .fx-panel, .fx-bar i, .fx-mood, .fx-btn, .fx-toast, .fx-prog i { transition: none !important; }
  .fx-dots i, .fx-caret, .fx-spin, .fx-msg--ai p::after { animation: none !important; }
  .fx-dots { display: none; }   /* a typing indicator with nothing to indicate */
  .js .fx-bar i { transform: none; }
  .fx-link span { transition: none; }
  .fx-link:hover span { transform: none; }
}
.perf-static .fx-anim { opacity: 1; transform: none; transition: none; }
.perf-static .fx-demo *,
.perf-static .fx-card, .perf-static .fx-panel, .perf-static .fx-bar i,
.perf-static .fx-mood, .perf-static .fx-btn, .perf-static .fx-prog i { transition: none !important; }
.perf-static .fx-dots i, .perf-static .fx-caret, .perf-static .fx-spin,
.perf-static .fx-msg--ai p::after { animation: none !important; }
.perf-static .fx-dots { display: none; }
.perf-static .fx-bar i { transform: none; }
.perf-static .fx-link span { transition: none; }
.perf-static .fx-link:hover span { transform: none; }
/* Both resting states below are written for JS that will animate them. On the
   static tier nothing will, so the markup's own finished state is restored. */
.perf-static .fx-prog i { width: 100%; }
.perf-static .fx-panel.is-raw .fx-card { transform: translateY(var(--sy)); box-shadow: none; }
.perf-static .fx-panel.is-raw .fx-card-b .m,
.perf-static .fx-panel.is-raw .fx-est,
.perf-static .fx-panel.is-raw .fx-prio { opacity: 1; }
.perf-static .fx-panel-k .lab-a { opacity: 0; }
.perf-static .fx-panel-k .lab-b { opacity: 1; }

}

@layer components {
  /* ── Demo 01 · the Aeven conversation ──────────────────────────────────────
     A self-contained replay of one exchange: the mark resolves, the greeting
     settles, a question types itself, and the answer streams back.

     Ported from a standalone prototype, with three things changed to make it
     part of this site rather than a page pasted into it:

       · colours come from the site tokens, not the prototype's own hexes, so
         it follows the palette (and would follow a future dark mode) instead
         of pinning its own cream;
       · type is the site's --font-body / --font-heading — the prototype
         pulled Inter off Google Fonts, which would have been a third webfont
         request for one component;
       · it sizes to its container with aspect-ratio rather than filling the
         viewport height.

     Everything is scoped under .ad-stage. The showcase's own demo styles key
     off .fx-ai and friends, so there is no overlap. */
  .ad-stage {
    --ad-sunk: var(--color-surface, #EBE1CE);
    --ad-line: var(--color-border, #DFD3BC);
    --ad-clay: var(--color-accent, #C1763D);
    --ad-clay-soft: var(--color-accent-400, #D9A276);
    --ad-moss: var(--color-accent-2, #6F8156);
    --ad-ink: var(--color-text, #181613);
    --ad-muted: var(--color-text-soft, #A2978A);
    --ad-ease: cubic-bezier(.22, .9, .24, 1);
    --ad-ease-soft: cubic-bezier(.4, 0, .2, 1);

    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 18px;
    background: var(--color-bg, #F2EADB);
    border: 1px solid var(--ad-line);
    font-family: var(--font-body);
    color: var(--ad-ink);
  }

  /* persistent chrome */
  .ad-chrome { position: absolute; top: 18px; left: 18px; display: flex; gap: 8px; z-index: 5; }
  .ad-chip {
    width: 30px; height: 30px; border-radius: 50%;
    border: 1px solid var(--ad-line);
    display: grid; place-items: center;
    color: var(--ad-muted); background: transparent;
  }
  .ad-chip svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; }

  .ad-mark circle { fill: none; stroke-width: 1.7; vector-effect: non-scaling-stroke; }
  .ad-ring-a { stroke: var(--ad-clay); }
  .ad-ring-b { stroke: var(--ad-moss); }

  /* empty state */
  .ad-hero {
    position: absolute; left: 0; right: 0; top: 39%;
    transform: translateY(-50%);
    display: flex; flex-direction: column; align-items: center;
    padding: 0 20px;
    transition: opacity .5s var(--ad-ease-soft), transform .6s var(--ad-ease), filter .5s linear;
  }
  .ad-hero.is-gone { opacity: 0; transform: translateY(-50%) translateY(-18px); filter: blur(6px); pointer-events: none; }
  .ad-hero .ad-mark { width: 62px; height: 37px; opacity: 0; }
  .ad-hero.is-lit .ad-mark { animation: adMarkIn .9s var(--ad-ease) forwards; }
  @keyframes adMarkIn { to { opacity: 1; } }
  .ad-hero .ad-mark circle { stroke-dasharray: 82; stroke-dashoffset: 82; }
  .ad-hero.is-lit .ad-ring-a { animation: adDraw .8s var(--ad-ease-soft) forwards, adSlideA .9s var(--ad-ease) forwards; }
  .ad-hero.is-lit .ad-ring-b { animation: adDraw .8s .08s var(--ad-ease-soft) forwards, adSlideB .9s .08s var(--ad-ease) forwards; }
  @keyframes adDraw { to { stroke-dashoffset: 0; } }
  @keyframes adSlideA { from { transform: translateX(-7px); } to { transform: none; } }
  @keyframes adSlideB { from { transform: translateX(7px); } to { transform: none; } }

  .ad-headline {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight, 400);
    font-size: clamp(20px, 2.4vw, 30px);
    letter-spacing: -.005em; line-height: 1.12;
    margin: 22px 0 0; text-align: center; max-width: 16ch;
  }
  .ad-headline .ad-w { display: inline-block; opacity: 0; transform: translateY(14px); filter: blur(5px); }
  .ad-headline .ad-w.is-in {
    opacity: 1; transform: none; filter: none;
    transition: opacity .55s var(--ad-ease-soft), transform .7s var(--ad-ease), filter .55s linear;
  }

  /* thread */
  .ad-thread {
    position: absolute; top: 0; left: 0; right: 0;
    padding: 58px clamp(14px, 2vw, 26px) 0;
    display: flex; flex-direction: column; gap: 16px;
  }
  .ad-bubble {
    align-self: flex-end; max-width: 78%;
    background: var(--ad-sunk); border: 1px solid rgba(0, 0, 0, .045);
    border-radius: 14px; padding: 10px 15px;
    font-size: clamp(12px, .95vw, 14px); line-height: 1.45;
    opacity: 0; transform: translateY(26px) scale(.985);
  }
  .ad-bubble.is-in { opacity: 1; transform: none; transition: opacity .45s var(--ad-ease-soft), transform .7s var(--ad-ease); }

  .ad-reply { display: flex; gap: 11px; align-items: flex-start; opacity: 0; }
  .ad-reply.is-in { opacity: 1; transition: opacity .35s var(--ad-ease-soft); }
  .ad-reply .ad-mark { width: 26px; height: 16px; flex: none; margin-top: 3px; }
  .ad-reply.is-thinking .ad-mark { animation: adBreathe 1.15s var(--ad-ease-soft) infinite; }
  @keyframes adBreathe {
    0%, 100% { opacity: .42; transform: scale(.94); }
    50%      { opacity: 1;   transform: scale(1.04); }
  }
  .ad-reply p { margin: 0; font-size: clamp(12px, .95vw, 14px); line-height: 1.62; }
  .ad-reply .ad-w { opacity: 0; filter: blur(4px); }
  .ad-reply .ad-w.is-in { opacity: 1; filter: none; transition: opacity .3s var(--ad-ease-soft), filter .3s linear; }

  /* composer */
  .ad-composer {
    position: absolute; left: 50%; bottom: clamp(12px, 3vh, 22px);
    width: 92%;
    transform: translateX(-50%) translateY(var(--ad-dy, 0px));
    display: flex; align-items: center; gap: 8px;
    background: var(--ad-sunk); border: 1.5px solid var(--ad-clay);
    border-radius: 999px; padding: 10px 8px 10px clamp(14px, 1.6vw, 20px);
    opacity: 0;
    transition: transform .85s var(--ad-ease), width .85s var(--ad-ease), opacity .5s var(--ad-ease-soft);
  }
  .ad-composer.is-in { opacity: 1; }
  .ad-composer.is-centered { width: min(420px, 84%); }

  .ad-field { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; height: 20px; }
  .ad-ghost { position: absolute; left: 0; color: var(--ad-muted); font-size: clamp(12px, .95vw, 14px); transition: opacity .25s linear; }
  .ad-ghost.is-hidden { opacity: 0; }
  .ad-typed { font-size: clamp(12px, .95vw, 14px); white-space: nowrap; overflow: hidden; }
  .ad-caret { width: 1.5px; height: 1.15em; background: var(--ad-ink); opacity: 0; margin-left: 1px; flex: none; border-radius: 1px; }
  .ad-caret.is-on { animation: adBlink 1.05s steps(1, end) infinite; }
  @keyframes adBlink { 0%, 49% { opacity: .85; } 50%, 100% { opacity: 0; } }

  .ad-pip { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--ad-clay-soft); }
  .ad-pip.is-live { animation: adPip 2.4s var(--ad-ease-soft) infinite; }
  @keyframes adPip { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } }

  .ad-send {
    width: 34px; height: 34px; flex: none; border: 0; border-radius: 50%;
    background: var(--ad-clay); display: grid; place-items: center;
    transition: transform .35s var(--ad-ease);
  }
  .ad-send svg {
    width: 16px; height: 16px; fill: none; stroke: var(--color-bg, #FBF6EC);
    stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round;
    transition: transform .5s var(--ad-ease), opacity .3s linear;
  }
  .ad-send.is-pressed { transform: scale(.88); }
  .ad-send.is-fired svg { transform: translate(16px, -16px) scale(.7); opacity: 0; }

  @media (max-width: 900px) {
    .ad-stage { aspect-ratio: 5 / 4; }
  }
  @media (max-width: 640px) {
    .ad-stage { aspect-ratio: 3 / 4; }
    .ad-composer { padding: 9px 7px 9px 14px; }
    .ad-bubble { max-width: 88%; }
  }

  /* The site kills animation globally (80-motion.css) and exempts only the
     demos by id; this component is inside #aeven-ai's media column, so it is
     covered by that carve-out. Reduced motion still stops everything and the
     script paints the finished conversation instead. */
  @media (prefers-reduced-motion: reduce) {
    .ad-stage *, .ad-stage *::before, .ad-stage *::after {
      animation: none !important;
      transition: none !important;
    }
  }
}

@layer components {
  /* ── Demo 02 · the daily check-in ──────────────────────────────────────────
     Replays a whole check-in: the mood sweeps and lands, the three dials
     answer themselves, save resolves the card into the day it produced, and
     the 14-day trend draws alongside.

     Same porting rules as demo 01 (46-aeven-demo.css): site tokens rather
     than the prototype's own hexes, the site's typefaces rather than a third
     webfont, and sized to its column instead of the viewport.

     The prototype was a two-column dashboard at full width. Here it lives in
     a media column roughly half a page wide, so the grid collapses to one
     column much earlier and the trend card sits under the form rather than
     beside it. Scoped under .ck-stage throughout. */
  .ck-stage {
    --ck-surface: var(--color-surface, #F1E8D4);
    --ck-surface-2: #EADFC8;
    --ck-chip: #EDE3CE;
    --ck-line: var(--color-border, #E0D5BE);
    --ck-empty: #FBF8F0;
    --ck-clay: var(--color-accent, #C0703A);
    --ck-rust: var(--color-accent-700, #A75B2B);
    --ck-moss: var(--color-accent-2, #6E8156);
    --ck-ink: var(--color-text, #1C1A17);
    --ck-muted: var(--color-text-soft, #8C8375);
    --ck-ease: cubic-bezier(.22, .9, .24, 1);
    --ck-soft: cubic-bezier(.4, 0, .2, 1);

    position: relative;
    width: 100%;
    padding: clamp(14px, 1.4vw, 20px);
    border-radius: 18px;
    background: var(--color-bg, #F3EBDC);
    border: 1px solid var(--ck-line);
    font-family: var(--font-body);
    color: var(--ck-ink);
    overflow: hidden;
  }
  .ck-stage .ck-serif { font-family: var(--font-heading); font-weight: var(--font-heading-weight, 400); letter-spacing: -.005em; }

  .ck-title { font-size: clamp(17px, 1.5vw, 22px); margin: 0 0 clamp(10px, 1vw, 14px); }

  /* One column: the media slot is far narrower than the prototype's page. */
  .ck-grid { display: grid; gap: clamp(10px, 1vw, 14px); grid-template-columns: minmax(0, 1fr); align-items: start; }
  .ck-card { background: var(--ck-surface); border: 1px solid var(--ck-line); border-radius: 16px; }

  .ck-rise { opacity: 0; transform: translateY(18px); }
  .ck-rise.is-in { opacity: 1; transform: none; transition: opacity .55s var(--ck-soft), transform .8s var(--ck-ease); }
  .ck-fade { opacity: 0; }
  .ck-fade.is-in { opacity: 1; transition: opacity .5s var(--ck-soft); }

  /* the card swaps between the form and the resulting plan */
  .ck-faces { position: relative; transition: height .75s var(--ck-ease); }
  .ck-face { padding: clamp(14px, 1.3vw, 20px); }
  .ck-face.ck-form { transition: opacity .4s var(--ck-soft), transform .6s var(--ck-ease), filter .4s linear; }
  .ck-face.ck-form.is-gone { opacity: 0; transform: translateY(-10px); filter: blur(5px); pointer-events: none; }
  .ck-face.ck-result { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
  .ck-face.ck-result.is-on { opacity: 1; transition: opacity .5s var(--ck-soft); }

  .ck-hello { font-size: clamp(15px, 1.3vw, 19px); margin: 0 0 8px; }
  .ck-ask { font-size: 11.5px; font-weight: 600; margin: 0 0 9px; color: var(--ck-ink); opacity: .8; }

  .ck-moods { display: flex; gap: 5px; }
  .ck-chip {
    flex: 1; min-width: 0; background: var(--ck-chip); border: 1px solid var(--ck-line);
    border-radius: 11px; padding: 8px 2px 7px; text-align: center;
    font-size: 10.5px; color: var(--ck-ink);
    transition: background .3s var(--ck-soft), color .3s var(--ck-soft),
                border-color .3s var(--ck-soft), transform .45s var(--ck-ease);
  }
  .ck-chip .ck-dot { width: 9px; height: 9px; border-radius: 50%; margin: 0 auto 5px; transition: background .3s var(--ck-soft); }
  .ck-chip.is-scan { transform: translateY(-3px); background: #E7DBC1; }
  .ck-chip.is-sel { background: var(--ck-clay); border-color: var(--ck-clay); color: #FFF8EE; transform: translateY(-3px); }
  .ck-chip.is-sel .ck-dot { background: #FFF8EE; }

  .ck-metrics { background: var(--ck-surface-2); border-radius: 13px; padding: clamp(10px, 1vw, 14px); margin: clamp(10px, 1vw, 14px) 0; }
  .ck-metric + .ck-metric { border-top: 1px solid rgba(0, 0, 0, .055); margin-top: 10px; padding-top: 10px; }
  .ck-mhead { display: flex; align-items: baseline; gap: 7px; margin-bottom: 7px; }
  .ck-mname { font-size: 9.5px; font-weight: 600; letter-spacing: .1em; color: var(--ck-ink); opacity: .78; }
  .ck-mhint { font-size: 10px; color: var(--ck-muted); }
  .ck-mval { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--ck-c); opacity: 0; transform: translateY(4px); }
  .ck-mval.is-in { opacity: 1; transform: none; transition: opacity .4s var(--ck-soft), transform .5s var(--ck-ease); }
  .ck-bars { display: flex; gap: 5px; }
  .ck-bar {
    flex: 1; height: clamp(20px, 1.8vw, 26px); border-radius: 9px; background: var(--ck-empty);
    position: relative; transition: box-shadow .4s var(--ck-soft);
  }
  .ck-bar i {
    position: absolute; inset: 0; border-radius: inherit; background: var(--ck-c);
    transform: scaleX(0); transform-origin: left center;
    transition: transform .52s var(--ck-ease);
  }
  .ck-bar.is-on i { transform: none; }
  .ck-bar.is-edge { box-shadow: 0 0 0 2px var(--ck-surface-2), 0 0 0 3.5px var(--ck-c); }

  .ck-more { display: inline-block; border: 1px solid var(--ck-line); border-radius: 999px; padding: 7px 12px; font-size: 10.5px; font-weight: 500; color: var(--ck-ink); }
  .ck-foot { border-top: 1px solid var(--ck-line); margin: clamp(10px, 1vw, 14px) calc(-1 * clamp(14px, 1.3vw, 20px)) 0; padding: clamp(10px, 1vw, 14px) clamp(14px, 1.3vw, 20px) 0; display: flex; justify-content: flex-end; }
  .ck-save {
    background: var(--ck-clay); color: #FFF8EE; border: 0; border-radius: 999px;
    padding: 9px 16px; font-size: 11.5px; font-weight: 600; font-family: inherit;
    transition: transform .35s var(--ck-ease), box-shadow .35s var(--ck-soft);
  }
  .ck-save.is-pressed { transform: scale(.955); }

  /* the resolved plan */
  .ck-check {
    width: 40px; height: 40px; border-radius: 50%; background: var(--ck-moss);
    display: grid; place-items: center; margin-bottom: 14px;
    opacity: 0; transform: scale(.55);
  }
  .ck-check.is-in { opacity: 1; transform: none; transition: opacity .3s linear, transform .75s cubic-bezier(.2, 1.3, .35, 1); }
  .ck-check svg { width: 19px; height: 19px; fill: none; stroke: #FBF7EE; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .ck-check path { stroke-dasharray: 30; stroke-dashoffset: 30; }
  .ck-check.is-in path { animation: ckTick .5s .18s var(--ck-soft) forwards; }
  @keyframes ckTick { to { stroke-dashoffset: 0; } }

  .ck-rhead { font-size: clamp(15px, 1.3vw, 19px); margin: 0 0 6px; }
  .ck-rsub { font-size: 11.5px; line-height: 1.5; color: var(--ck-muted); margin: 0 0 12px; max-width: 46ch; }

  .ck-row {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 2px; border-top: 1px solid var(--ck-line);
    opacity: 0; transform: translateY(10px);
  }
  .ck-row:last-of-type { border-bottom: 1px solid var(--ck-line); }
  .ck-row.is-in { opacity: 1; transform: none; transition: opacity .45s var(--ck-soft), transform .6s var(--ck-ease); }
  .ck-row .ck-t { color: var(--ck-rust); font-size: 11px; width: 52px; flex: none; }
  .ck-row .ck-n { font-weight: 600; font-size: 11.5px; flex: 1; min-width: 0; }
  .ck-row .ck-d { color: var(--ck-muted); font-size: 11px; flex: none; }
  .ck-again { display: inline-block; margin-top: 12px; border: 1px solid var(--ck-line); border-radius: 999px; padding: 7px 13px; font-size: 11px; font-weight: 600; }

  /* the 14-day trend */
  .ck-mood { padding: clamp(12px, 1.1vw, 16px); }
  .ck-mtitle { display: flex; align-items: center; gap: 7px; font-size: clamp(13px, 1.1vw, 16px); margin: 0 0 11px; }
  .ck-mtitle svg { width: 14px; height: 14px; stroke: var(--ck-muted); fill: none; stroke-width: 1.8; stroke-linecap: round; }
  .ck-tiles { display: flex; gap: 5px; flex-wrap: wrap; }
  .ck-tile { flex: 1 1 54px; background: #F4ECDA; border: 1px solid var(--ck-line); border-radius: 10px; padding: 7px 8px; }
  .ck-tile b { display: block; font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
  .ck-tile.ck-green b { color: #7C9160; }
  .ck-tile span { display: block; margin-top: 3px; font-size: 7.5px; letter-spacing: .08em; color: var(--ck-muted); line-height: 1.3; }

  .ck-chart { margin-top: 13px; }
  .ck-chart svg { width: 100%; height: auto; display: block; }
  .ck-area { fill: #E1D4BA; opacity: 0; transition: opacity .7s var(--ck-soft); }
  .ck-area.is-in { opacity: .85; }
  .ck-line { fill: none; stroke: var(--ck-rust); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
  .ck-pt { fill: var(--ck-rust); opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.4); }
  .ck-pt.is-in { opacity: 1; transform: scale(1); transition: opacity .3s linear, transform .5s cubic-bezier(.2, 1.3, .35, 1); }
  .ck-axis { display: flex; justify-content: space-between; font-size: 9.5px; color: var(--ck-muted); margin-top: 5px; }

  @media (prefers-reduced-motion: reduce) {
    .ck-stage *, .ck-stage *::before, .ck-stage *::after {
      animation: none !important;
      transition: none !important;
    }
  }
}

@layer components {
  /* ── Demo 03 · integrations ────────────────────────────────────────────────
     Replays two sources connecting: Google Calendar goes through a consent
     dialog, Canvas connects straight through, then a sync sweeps both. The
     counter and the banner's progress bar track it.

     Ported under the same rules as demos 01 and 02 — site tokens rather than
     the prototype's hexes, the site's typefaces rather than a Google-hosted
     Inter, gated on visibility, sized to its column.

     The prototype was a full settings page: six source rows at 52px icons
     with 62ch of description each. That will not fit a half-page media
     column, so this shows the two rows the story actually needs and drops
     the rest — the copy beside it already lists what else connects. Type,
     icons and padding all step down to match.

     The modal is positioned inside the stage, not the viewport: a demo that
     dims the whole page to show its own dialog would read as the site having
     opened one. Scoped under .ig-stage throughout. */
  .ig-stage {
    --ig-surface: #F0E7D3;
    --ig-line: var(--color-border, #E1D7C1);
    --ig-clay: var(--color-accent, #B4682F);
    --ig-moss: var(--color-accent-2, #6E8156);
    --ig-moss-ink: #4F6140;
    --ig-mint: #EEF5DF;
    --ig-ink: var(--color-text, #1C1A17);
    --ig-muted: var(--color-text-soft, #8A8173);
    --ig-ease: cubic-bezier(.22, .9, .24, 1);
    --ig-soft: cubic-bezier(.4, 0, .2, 1);

    position: relative;
    width: 100%;
    border-radius: 18px;
    background: var(--color-bg, #F3EBDC);
    border: 1px solid var(--ig-line);
    font-family: var(--font-body);
    color: var(--ig-ink);
    overflow: hidden;
  }
  .ig-stage .ig-serif { font-family: var(--font-heading); font-weight: var(--font-heading-weight, 400); }

  .ig-page {
    padding: clamp(14px, 1.4vw, 20px);
    transition: filter .45s var(--ig-soft), transform .5s var(--ig-soft);
  }
  .ig-page.is-dim { filter: blur(3px); transform: scale(.995); }

  .ig-rise { opacity: 0; transform: translateY(16px); }
  .ig-rise.is-in { opacity: 1; transform: none; transition: opacity .5s var(--ig-soft), transform .7s var(--ig-ease); }

  .ig-title { font-size: clamp(16px, 1.4vw, 21px); margin: 0 0 5px; letter-spacing: -.005em; }
  .ig-lede { margin: 0 0 clamp(11px, 1.1vw, 15px); color: var(--ig-muted); font-size: 11.5px; line-height: 1.5; max-width: 62ch; }

  /* status banner */
  .ig-banner {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 8px;
    background: var(--ig-mint); border-radius: 12px;
    padding: 10px 10px 10px 13px; margin-bottom: clamp(11px, 1.1vw, 15px);
    transition: background .6s var(--ig-soft);
  }
  .ig-banner.is-full { background: #E6F0D2; }
  .ig-dot { width: 7px; height: 7px; border-radius: 50%; background: #A9B98F; flex: none; transition: background .5s var(--ig-soft); }
  .ig-dot.is-live { background: var(--ig-moss); animation: igPulse 2.2s var(--ig-soft) infinite; }
  @keyframes igPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(110,129,86,.45); } 55% { box-shadow: 0 0 0 6px rgba(110,129,86,0); } }
  .ig-btext { font-size: 11.5px; }
  .ig-btext b { font-weight: 600; display: inline-block; }
  .ig-btext b.is-pop { animation: igPop .5s var(--ig-ease); }
  @keyframes igPop { 0% { transform: translateY(7px) scale(.86); opacity: 0; } 100% { transform: none; opacity: 1; } }
  .ig-synced { margin-left: 6px; color: var(--ig-moss-ink); font-size: 11px; opacity: 0; transition: opacity .4s var(--ig-soft); }
  .ig-synced.is-in { opacity: 1; }
  .ig-syncall {
    margin-left: auto; background: #FAF6EA; border: 1px solid #DDE3CC;
    padding: 7px 12px; font-size: 11px; font-weight: 500; color: var(--ig-ink);
  }
  .ig-bprog { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--ig-moss); opacity: .55; transition: width .9s var(--ig-ease); }

  .ig-eyebrow { font-size: 9.5px; font-weight: 600; letter-spacing: .14em; color: var(--ig-clay); margin: 0 0 8px; }

  /* source rows */
  .ig-row {
    position: relative; overflow: hidden;
    display: flex; align-items: flex-start; gap: 12px;
    background: var(--ig-surface); border: 1px solid var(--ig-line); border-radius: 13px;
    padding: 12px 13px; margin-bottom: 9px;
    transition: background .6s var(--ig-soft), border-color .6s var(--ig-soft);
  }
  .ig-row::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(100deg, transparent 22%, rgba(255,255,255,.62) 50%, transparent 78%);
    transform: translateX(-110%);
  }
  .ig-row.is-working::after { animation: igSweep 1.05s linear infinite; }
  .ig-row.is-flash::after { animation: igSweep .85s var(--ig-soft) 1; }
  @keyframes igSweep { to { transform: translateX(110%); } }
  .ig-row.is-done { background: #F1EDDA; border-color: #D6D9BF; }

  .ig-ico {
    width: 34px; height: 34px; flex: none; border-radius: 10px; background: #E9DFCA;
    display: grid; place-items: center; transition: box-shadow .5s var(--ig-soft);
  }
  .ig-row.is-done .ig-ico { box-shadow: 0 0 0 2px var(--color-bg, #F3EBDC), 0 0 0 3.5px var(--ig-moss); }
  /* Real brand marks (assets/brand/integrations) rather than hand-drawn
     approximations — a wrong logo on a page about connecting to those very
     services is the detail people notice. object-fit guards the one raster
     among them (canvas.png) against being stretched. */
  .ig-ico svg,
  .ig-ico img { width: 19px; height: 19px; object-fit: contain; display: block; }

  .ig-body { flex: 1; min-width: 0; }
  .ig-rhead { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
  .ig-rname { font-size: 13px; font-weight: 600; margin: 0; }
  .ig-badge {
    font-size: 8px; font-weight: 600; letter-spacing: .09em;
    background: #E7DDC7; color: #7C7364; border-radius: 5px; padding: 3px 6px;
    transition: background .4s var(--ig-soft), color .4s var(--ig-soft);
  }
  .ig-badge.is-ok { background: #DCE8C6; color: var(--ig-moss-ink); }
  .ig-badge.is-pop { animation: igPop .45s var(--ig-ease); }
  .ig-desc { margin: 5px 0 0; color: var(--ig-muted); font-size: 11px; line-height: 1.5; max-width: 52ch; }
  .ig-meta { margin: 5px 0 0; font-size: 10.5px; color: var(--ig-moss-ink); opacity: 0; transform: translateY(5px); }
  .ig-meta.is-in { opacity: 1; transform: none; transition: opacity .45s var(--ig-soft), transform .55s var(--ig-ease); }

  /* buttons */
  .ig-btn {
    position: relative; overflow: hidden; isolation: isolate;
    font: inherit; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    transform: translateZ(0); backface-visibility: hidden;
    transition: background .5s var(--ig-soft), color .5s var(--ig-soft),
                border-color .5s var(--ig-soft), box-shadow .45s var(--ig-soft);
  }
  .ig-btn .ig-lbl {
    display: inline-flex; align-items: center; gap: 6px;
    transition: opacity .22s var(--ig-soft), transform .34s var(--ig-ease), filter .22s linear;
  }
  .ig-btn.is-swapping .ig-lbl { opacity: 0; transform: translateY(-6px); filter: blur(2px); }
  .ig-btn svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

  @keyframes igTap {
    0% { transform: scale(1); } 26% { transform: scale(.952); }
    62% { transform: scale(1.008); } 100% { transform: scale(1); }
  }
  .ig-btn.is-tapped { animation: igTap .46s cubic-bezier(.32, .72, .24, 1); }
  .ig-ripple {
    position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; border-radius: 50%;
    background: currentColor; opacity: .22; pointer-events: none; z-index: -1;
    transform: translate(-50%, -50%) scale(0);
    animation: igRipple .62s cubic-bezier(.22, .9, .24, 1) forwards;
  }
  @keyframes igRipple { to { transform: translate(-50%, -50%) scale(16); opacity: 0; } }

  .ig-cta {
    flex: none; align-self: center;
    background: var(--ig-clay); color: #FCF7EC; border: 1px solid var(--ig-clay);
    padding: 7px 14px; font-size: 11px; font-weight: 600; min-width: 92px;
  }
  .ig-cta.is-done { background: transparent; color: var(--ig-moss-ink); border-color: #BFCCA6; }
  .ig-spin { width: 10px; height: 10px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; opacity: .9; animation: igSpin .7s linear infinite; }
  @keyframes igSpin { to { transform: rotate(360deg); } }

  /* consent dialog — scoped to the stage, never the viewport */
  .ig-scrim {
    position: absolute; inset: 0; background: rgba(38, 32, 24, .42);
    opacity: 0; pointer-events: none; transition: opacity .4s var(--ig-soft);
    display: grid; place-items: center; padding: 16px;
  }
  .ig-scrim.is-on { opacity: 1; }
  .ig-modal {
    width: min(400px, 100%); background: #F6EFDF; border-radius: 16px;
    box-shadow: 0 20px 50px rgba(60, 40, 20, .28);
    transform: translateY(14px) scale(.955); opacity: 0;
    transition: transform .5s var(--ig-ease), opacity .35s var(--ig-soft);
  }
  .ig-scrim.is-on .ig-modal { transform: none; opacity: 1; }
  .ig-mtop { padding: 16px 18px 14px; }
  .ig-mhead { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
  .ig-mtitle { font-size: clamp(14px, 1.2vw, 17px); margin: 0; flex: 1; }
  .ig-x { width: 16px; height: 16px; flex: none; color: #6B6252; }
  .ig-x svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
  .ig-mtop p { margin: 0 0 9px; font-size: 11px; line-height: 1.55; color: #3C372F; }
  .ig-note { background: #E7D9C4; border-radius: 9px; padding: 10px 12px; font-size: 10.5px; line-height: 1.5; color: #3C372F; }
  .ig-mfoot { border-top: 1px solid rgba(0, 0, 0, .06); padding: 11px 18px; display: flex; justify-content: flex-end; gap: 8px; }
  .ig-ghostbtn { background: transparent; border: 1px solid #D9CEB8; padding: 7px 14px; font-size: 11px; font-weight: 500; color: var(--ig-ink); }
  .ig-primary {
    background: var(--ig-clay); color: #FCF7EC; border: 1px solid var(--ig-clay);
    padding: 8px 15px; font-size: 11px; font-weight: 600; min-width: 150px;
  }

  @media (max-width: 560px) {
    .ig-row { flex-wrap: wrap; }
    .ig-cta { width: 100%; margin-top: 4px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .ig-stage *, .ig-stage *::before, .ig-stage *::after {
      animation: none !important;
      transition: none !important;
    }
  }
}

@layer components {
  /* ── Demo 04 · your day ────────────────────────────────────────────────────
     Replays a planned day being accepted and then re-tuned: each block is
     kept and cools from green to grey while the rail fills behind it, then
     "Lighter" is chosen and the whole page answers at once — dials soften,
     blocks shorten, the third lifts out and lands in the moved-off list, and
     the reasons, load and focus all restate themselves.

     That simultaneous answer is the point of this demo, and the reason it is
     worth the size: it is the only one that shows the plan REACTING rather
     than just existing.

     Ported under the same rules as demos 01-03 — site tokens rather than the
     prototype's hexes, the site's typefaces rather than a Google-hosted
     Inter, gated on visibility, sized to its column.

     The prototype was a full-width two-column app screen. In a half-page
     media column that would be unreadable, so the columns stack: the day
     first, then the reasoning beneath it. Type and padding step down to
     match. Scoped under .dy-stage throughout. */
  .dy-stage {
    --dy-panel: #EAE0CB;
    --dy-tan: #E9DFC9;
    --dy-line: var(--color-border, #DCD2BC);
    --dy-green: #EFF5DF;
    --dy-green-line: #C7D2AB;
    --dy-grey: #EAE6DC;
    --dy-grey-line: #D9D3C5;
    --dy-peach: #E8A87C;
    --dy-clay: var(--color-accent, #B4682F);
    --dy-clay-deep: #9C5726;
    --dy-moss: var(--color-accent-2, #6E8156);
    --dy-slate: #D6CEC0;
    --dy-ink: var(--color-text, #1C1A17);
    --dy-muted: var(--color-text-soft, #8A8173);
    --dy-ease: cubic-bezier(.22, .9, .24, 1);
    --dy-soft: cubic-bezier(.4, 0, .2, 1);

    position: relative; width: 100%;
    border-radius: 18px;
    background: var(--color-bg, #F3EBDC);
    border: 1px solid var(--dy-line);
    padding: clamp(13px, 1.3vw, 18px);
    font-family: var(--font-body);
    color: var(--dy-ink);
    overflow: hidden;
  }
  .dy-stage .dy-serif { font-family: var(--font-heading); font-weight: var(--font-heading-weight, 400); }

  .dy-rise { opacity: 0; transform: translateY(16px); }
  .dy-rise.is-in { opacity: 1; transform: none; transition: opacity .5s var(--dy-soft), transform .7s var(--dy-ease); }

  /* buttons */
  .dy-btn {
    position: relative; overflow: hidden; isolation: isolate; font: inherit; border: 0; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    transform: translateZ(0); backface-visibility: hidden;
    transition: background .5s var(--dy-soft), color .5s var(--dy-soft), opacity .35s var(--dy-soft);
  }
  .dy-btn .dy-lbl { display: inline-flex; align-items: center; gap: 6px; }
  @keyframes dyTap { 0% { transform: scale(1); } 26% { transform: scale(.952); } 62% { transform: scale(1.008); } 100% { transform: scale(1); } }
  .dy-btn.is-tapped { animation: dyTap .46s cubic-bezier(.32, .72, .24, 1); }
  .dy-ripple {
    position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; border-radius: 50%;
    background: currentColor; opacity: .22; pointer-events: none; z-index: -1;
    transform: translate(-50%, -50%) scale(0); animation: dyRipple .62s var(--dy-ease) forwards;
  }
  @keyframes dyRipple { to { transform: translate(-50%, -50%) scale(16); opacity: 0; } }

  /* header */
  .dy-top { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
  .dy-h1 { font-size: clamp(15px, 1.35vw, 20px); margin: 0 0 5px; letter-spacing: -.005em; }
  .dy-lede { margin: 0; color: var(--dy-ink); opacity: .72; font-size: 10.5px; line-height: 1.5; max-width: 46ch; }
  .dy-start { margin-left: auto; flex: none; background: var(--dy-clay); color: #FCF7EC; padding: 7px 12px; font-size: 10.5px; font-weight: 600; }

  /* check-in panel */
  .dy-panel { background: var(--dy-panel); border-radius: 13px; padding: clamp(11px, 1.1vw, 15px); margin-bottom: clamp(12px, 1.2vw, 16px); }
  .dy-pgrid { display: grid; grid-template-columns: minmax(0, .55fr) minmax(0, 1.45fr); gap: clamp(10px, 1.4vw, 18px); }
  .dy-nocheck { font-size: 8.5px; font-weight: 600; letter-spacing: .12em; color: var(--dy-muted); margin: 0 0 7px; }
  .dy-checkin { font-size: 11px; color: var(--dy-ink); margin: 0; }
  .dy-dials { display: flex; flex-direction: column; gap: 8px; }
  .dy-dhead { display: flex; align-items: baseline; margin-bottom: 5px; }
  .dy-dname { font-size: 8.5px; font-weight: 600; letter-spacing: .12em; color: var(--dy-ink); opacity: .75; }
  .dy-dval { margin-left: auto; font-size: 10.5px; font-weight: 700; transition: opacity .3s var(--dy-soft); }
  .dy-dval.is-swap { opacity: 0; }
  .dy-pbars { display: flex; gap: 5px; }
  .dy-pb { flex: 1; height: 14px; border-radius: 5px; background: var(--dy-slate); transition: background .55s var(--dy-soft); }
  .dy-pb.is-soft { background: var(--dy-peach); }
  .dy-pb.is-strong { background: var(--dy-clay); }

  .dy-prow { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; border-top: 1px solid rgba(0, 0, 0, .07); margin-top: 11px; padding-top: 11px; }
  .dy-prow > span { font-size: 10.5px; }
  .dy-seg { position: relative; display: flex; background: #F1E8D6; border: 1px solid var(--dy-line); border-radius: 999px; padding: 3px; }
  .dy-segthumb { position: absolute; top: 3px; bottom: 3px; border-radius: 999px; background: var(--dy-clay); transition: left .55s var(--dy-ease), width .55s var(--dy-ease); }
  .dy-seg button { position: relative; z-index: 1; background: transparent; border: 0; font: inherit; font-size: 10px; padding: 5px 9px; border-radius: 999px; color: var(--dy-ink); transition: color .4s var(--dy-soft); }
  .dy-seg button.is-on { color: #FCF7EC; font-weight: 600; }

  /* Single column: the prototype's side-by-side would be unreadable here. */
  .dy-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(14px, 1.5vw, 20px); }
  .dy-chead { display: flex; align-items: baseline; margin-bottom: 9px; }
  .dy-chead h4 { font-size: clamp(13px, 1.15vw, 17px); margin: 0; }
  .dy-cnote { margin-left: auto; font-size: 8.5px; font-weight: 600; letter-spacing: .11em; color: var(--dy-muted); transition: opacity .25s var(--dy-soft); }
  .dy-cnote.is-swap { opacity: 0; }

  /* the timeline */
  .dy-timeline { position: relative; list-style: none; margin: 0; padding: 0; }
  .dy-timeline::before { content: ''; position: absolute; left: 40px; top: 6px; bottom: 8px; width: 1.5px; background: var(--dy-line); }
  .dy-railfill { position: absolute; left: 40px; top: 6px; width: 1.5px; height: 0; background: var(--dy-moss); opacity: .75; transition: height .85s var(--dy-ease); }
  .dy-slot {
    display: grid; grid-template-columns: 30px 1fr; gap: 20px; overflow: hidden;
    transition: height .65s var(--dy-ease), opacity .45s var(--dy-soft), transform .6s var(--dy-ease), margin .65s var(--dy-ease);
  }
  .dy-slot + .dy-slot { margin-top: 9px; }
  .dy-slot.is-out { opacity: 0; transform: translateX(46px); }
  .dy-when { font-size: 10px; color: var(--dy-ink); opacity: .72; padding-top: 13px; text-align: right; }

  .dy-block {
    position: relative; overflow: hidden;
    background: var(--dy-green); border: 1.5px dashed var(--dy-green-line); border-radius: 11px; padding: 10px 12px;
    transition: background .6s var(--dy-soft), border-color .6s var(--dy-soft);
  }
  .dy-block::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(100deg, transparent 22%, rgba(255,255,255,.55) 50%, transparent 78%);
    transform: translateX(-110%);
  }
  .dy-block.is-settling::after { animation: dySweep .85s var(--dy-soft) 1; }
  @keyframes dySweep { to { transform: translateX(110%); } }
  .dy-block.is-kept { background: var(--dy-grey); border-style: solid; border-color: var(--dy-grey-line); }
  .dy-eyebrow { font-size: 7.5px; font-weight: 600; letter-spacing: .11em; color: #6E7A58; margin: 0 0 5px; transition: color .6s var(--dy-soft); }
  .dy-block.is-kept .dy-eyebrow { color: #948B7C; }
  .dy-btitle { font-size: 11.5px; font-weight: 600; margin: 0 0 4px; transition: color .6s var(--dy-soft); }
  .dy-block.is-kept .dy-btitle { color: #6E6659; }
  .dy-bnote { margin: 0; font-size: 10px; color: var(--dy-muted); line-height: 1.45; }
  .dy-dur { display: inline-block; transition: opacity .25s var(--dy-soft), transform .3s var(--dy-ease); }
  .dy-dur.is-swap { opacity: 0; transform: translateY(-4px); }

  .dy-actwrap { position: relative; height: 28px; margin-top: 8px; }
  .dy-acts { position: absolute; inset: 0; display: flex; align-items: center; gap: 11px; transition: opacity .35s var(--dy-soft), transform .45s var(--dy-ease); }
  .dy-block.is-kept .dy-acts { opacity: 0; transform: translateY(-6px); pointer-events: none; }
  .dy-keep { background: var(--dy-clay); color: #FCF7EC; padding: 6px 13px; font-size: 10px; font-weight: 600; }
  .dy-link { font-size: 10px; color: var(--dy-ink); opacity: .72; }
  .dy-link.is-dim { opacity: .5; }
  .dy-keptag {
    position: absolute; inset: 0; display: flex; align-items: center; gap: 6px;
    font-size: 10px; font-weight: 600; color: var(--dy-moss);
    opacity: 0; transform: translateY(6px); pointer-events: none;
  }
  .dy-block.is-kept .dy-keptag { opacity: 1; transform: none; transition: opacity .45s .18s var(--dy-soft), transform .55s .18s var(--dy-ease); }
  .dy-keptag svg { width: 12px; height: 12px; fill: none; stroke: var(--dy-moss); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .dy-keptag path { stroke-dasharray: 30; stroke-dashoffset: 30; }
  .dy-block.is-kept .dy-keptag path { animation: dyTick .5s .3s var(--dy-soft) forwards; }
  @keyframes dyTick { to { stroke-dashoffset: 0; } }

  .dy-done { display: grid; grid-template-columns: 30px 1fr; gap: 20px; margin-top: 10px; position: relative; }
  .dy-done .dy-dot { position: absolute; left: 36px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--dy-moss); }
  .dy-dtitle { font-size: 11px; font-weight: 500; margin: 0 0 2px; }
  .dy-dsub { margin: 0; font-size: 10px; color: var(--dy-muted); }

  /* reasoning column */
  .dy-sec + .dy-sec { margin-top: clamp(13px, 1.3vw, 18px); }
  .dy-sub { margin: 0 0 8px; font-size: 10px; color: var(--dy-muted); }
  .dy-reason {
    background: var(--dy-tan); border-radius: 10px; padding: 9px 11px; font-size: 10.5px; line-height: 1.5;
    color: var(--dy-ink); margin-bottom: 6px;
    transition: opacity .3s var(--dy-soft), transform .4s var(--dy-ease), filter .3s linear;
  }
  .dy-reason.is-swap { opacity: 0; transform: translateY(-6px); filter: blur(2px); }
  .dy-loadhead { display: flex; align-items: baseline; margin-bottom: 8px; }
  .dy-loadhead h4 { font-size: clamp(12px, 1.1vw, 16px); margin: 0; }
  .dy-focus { margin-left: auto; font-family: var(--font-heading); font-weight: var(--font-heading-weight, 400); font-size: 13px; color: var(--dy-clay-deep); transition: opacity .25s var(--dy-soft), transform .3s var(--dy-ease); }
  .dy-focus.is-swap { opacity: 0; transform: translateY(-5px); }
  .dy-loadcard { background: var(--dy-tan); border-radius: 10px; padding: 10px 11px; }
  .dy-lbars { display: flex; gap: 5px; margin-bottom: 7px; }
  .dy-lb { flex: 1; height: 13px; border-radius: 4px; background: var(--dy-slate); transition: background .55s var(--dy-soft); }
  .dy-lb.is-on { background: var(--dy-peach); }
  .dy-loadnote { margin: 0; font-size: 9.5px; color: var(--dy-muted); line-height: 1.45; transition: opacity .3s var(--dy-soft), filter .3s linear; }
  .dy-loadnote.is-swap { opacity: 0; filter: blur(2px); }

  .dy-moved {
    display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--dy-line); padding: 8px 2px; overflow: hidden;
    transition: height .55s var(--dy-ease), opacity .45s var(--dy-soft), transform .55s var(--dy-ease), padding .55s var(--dy-ease);
  }
  .dy-moved .dy-od { font-size: 8.5px; color: var(--dy-muted); width: 40px; flex: none; line-height: 1.3; }
  .dy-moved .dy-pip { width: 6px; height: 6px; border-radius: 50%; background: var(--dy-clay); flex: none; }
  .dy-moved .dy-nm { flex: 1; min-width: 0; font-size: 10.5px; }
  .dy-moved .dy-mn { font-size: 9.5px; color: var(--dy-muted); }
  .dy-moved.is-hidden { height: 0; opacity: 0; transform: translateY(-8px); padding: 0; border-top-color: transparent; }

  @media (max-width: 560px) {
    .dy-pgrid { grid-template-columns: 1fr; }
    .dy-top { flex-wrap: wrap; }
    .dy-start { margin-left: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .dy-stage *, .dy-stage *::before, .dy-stage *::after {
      animation: none !important;
      transition: none !important;
    }
  }
}

@layer components {

/* ===========================================================================
   Navigation, mobile sheet and responsive overrides
   =========================================================================== */
.site-nav > a:hover{background:var(--color-surface);color:var(--color-text)}
/* Product dropdown — themed to the Organic landing */
.nav-dd{position:relative}
.nav-dd-btn{display:inline-flex;align-items:center;gap:5px;font:400 16px/1 var(--font-heading);color:var(--text-secondary);padding:9px 12px 9px 14px;border-radius:999px;background:none;border:0;cursor:pointer;transition:background .15s,color .15s}
.nav-dd-btn svg{transition:transform .2s ease}
.nav-dd:hover .nav-dd-btn,.nav-dd-btn[aria-expanded="true"]{background:var(--color-surface);color:var(--color-text)}
.nav-dd:hover .nav-dd-btn svg,.nav-dd-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
/* Product menu: a single column. Two columns split the panel too narrowly for
   these descriptions and the text collided across the gap. */
.nav-dd-menu{
  position:absolute;left:0;top:calc(100% + 12px);width:380px;padding:14px;
  transform:translateY(-6px);
  background:var(--color-bg);border:1px solid var(--rule-soft);border-radius:22px;
  box-shadow:0 18px 48px -12px rgba(46,43,37,.28), 0 2px 6px rgba(46,43,37,.06);
  opacity:0;visibility:hidden;
  transition: transform .24s cubic-bezier(.16,1,.3,1), visibility .18s;z-index:60;
  display:grid;grid-template-columns:1fr;gap:2px;
}
.nav-dd:hover .nav-dd-menu,.nav-dd.open .nav-dd-menu{opacity:1;visibility:visible;transform:translateY(0)}
/* The panel sits 12px below the trigger. Without this the pointer crosses a
   dead gap on the way down, :hover drops and the menu closes before it can be
   clicked. This invisible strip bridges the gap so the hover never breaks. */
.nav-dd-menu::after{
  content:"";position:absolute;left:0;right:0;top:-14px;height:14px;
}
/* little arrow tying the panel to the trigger */
.nav-dd-menu::before{
  content:"";position:absolute;left:34px;top:-7px;width:12px;height:12px;
  transform:rotate(45deg);
  background:var(--color-bg);border-left:1px solid var(--rule-soft);border-top:1px solid var(--rule-soft);
  border-radius:2px 0 0 0;
}
.nav-dd-menu a{
  display:flex;align-items:flex-start;padding:13px 14px;border-radius:15px;
  text-decoration:none;transition:background .16s ease;position:relative;
  /* grid items default to min-width:auto, so the descriptions would force
     the column past its 1fr share and spill out of the panel. */
  min-width:0;
}
.nav-dd-menu a:hover{background:var(--color-surface)}
.nav-dd-menu .txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.nav-dd-menu .txt b{font:400 17px/1.25 var(--font-heading);color:var(--color-text)}
.nav-dd-menu .txt small{font:400 13.5px/1.45 var(--font-heading);color:var(--text-tertiary);overflow-wrap:anywhere}
@media (max-width:980px){
  .nav-dd-menu{width:min(380px,calc(100vw - 32px))}
}
@media (max-width:820px){.nav-dd-menu{display:none}}

/* ── mobile nav: hamburger + slide-down sheet ───────────────────────────── */
.nav-burger{display:none;width:38px;height:38px;border-radius:999px;border:0;background:none;cursor:pointer;align-items:center;justify-content:center;color:var(--color-text);flex:none}
.nav-mobile-sheet{
  position:fixed;left:12px;right:12px;top:70px;z-index:70;
  background:var(--color-bg);border:1px solid var(--rule-soft);border-radius:20px;
  box-shadow:var(--shadow-lg);padding:10px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition: transform .22s cubic-bezier(.16,1,.3,1), visibility .18s;
}
.nav-mobile-sheet.open{opacity:1;visibility:visible;transform:none}
.nav-mobile-sheet a{display:block;padding:13px 14px;border-radius:14px;font:400 17px/1 var(--font-heading);color:var(--color-text);text-decoration:none}
.nav-mobile-sheet a:active{background:var(--color-surface)}
.nav-mobile-sheet .nm-sep{height:1px;background:var(--rule-soft);margin:6px 8px}
/* Outlined to match the primary buttons everywhere else. It sits on the same
   cream sheet, so a solid block here would be the one filled CTA left. */
/* Matches .btn-primary: a filled ink pill, not the outlined terracotta it
   mirrored before. */
.nav-mobile-sheet .nm-cta{background:var(--color-text);color:var(--color-bg);border:1px solid var(--color-text);border-radius:999px;text-align:center;margin-top:4px}

/* ── hero rotating word: underline-sweep reveal ─────────────────────────
   Two word layers stacked in a fixed-width box (sized in JS to the longest
   word, so the sentence never reflows). A thin accent underline grows under
   the outgoing word, then keeps sweeping rightward to wipe it away while the
   incoming word is revealed behind the sweep via a matching clip-path — the
   same moving edge both erases the old word and unveils the new one. */
/* ── hero headline ──────────────────────────────────────────────────────
   Set in the serif (--font-hero), smaller than the old 88px, and centered
   along with the subhead and buttons. Sized with clamp() so the drop to
   phone widths is continuous rather than stepped at a breakpoint. The
   optical centre of a centered block sits slightly high, hence the extra
   bottom margin under the buttons rather than even spacing. */
.hero-copy { text-align: center; margin-inline: auto; }
.hero-copy .hero-actions { justify-content: center; }
.hero-h1 {
  white-space: normal;
  font: 400 clamp(38px, 5.4vw, 66px)/1.06 var(--font-hero);
  letter-spacing: -0.02em;
  /* No width cap: the rotating word changes the line's length on every
     rotation, and a fixed cap made the break land differently for each word —
     "Be Curious with / AevenSpace." reads as lopsided even though it is
     centred. Letting the line run and balancing it keeps the two halves even
     whichever word is on screen. */
  max-width: none;
  text-wrap: balance;
  margin: 0 auto 26px;
}
.hero-sub { margin: 0 auto 34px; }
.hw {
  position: relative; display: inline-block; vertical-align: top;
  height: 1em; overflow: visible;
}
.hw-word {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  color: var(--color-text);
}
/* Each letter keeps its layout slot the whole time and is only shown or hidden,
   so the word never reflows mid-write and the caret can measure real offsets. */
.hw-l {
  display: inline-block;
  opacity: 0;
}
/* The caret is the accent-colored write head; JS translates it to the active
   letter. transform/opacity only — never layout-triggering. */
.hw-underline {
  position: absolute; left: 0; bottom: 0.08em; top: 0.16em; width: 1.5px;
  background: var(--color-accent);
  opacity: 0; will-change: transform;
}
/* Until hero-word.js mounts — no JavaScript, a failed request, or the static
   performance tier, which does not load it at all — both words are taken out of
   the flow and the slot measures zero, so "Be" and "with AevenSpace." print on
   top of the word between them. Before the mount the first word is simply text
   in the line, which is what the markup already says. HeroWord.mount() sets
   data-hw-live and hands the slot over. */
.hw:not([data-hw-live]) { height: auto; }
.hw:not([data-hw-live]) .hw-a { position: static; }
.hw:not([data-hw-live]) .hw-b,
.hw:not([data-hw-live]) .hw-underline { display: none; }
@media (prefers-reduced-motion: reduce) {
  .hw-l { opacity: 1 !important; transition: none !important; }
  .hw-word.hw-b { display: none; }
  .hw-underline { display: none; }
}

/* ── premium mobile layout ───────────────────────────────────────────────
   The whole page is hand-tuned desktop pixel values with no class hooks for
   most grids, so this block retargets by structural selector rather than
   editing hundreds of inline styles. */

}

@layer components {

@media (max-width: 780px) {
  body { font-size: 15px; }
  h1 { font-size: 34px !important; }
  h2 { font-size: 30px !important; }

  /* nav: hide the desktop link row + dropdown, show the burger */
  header > div { padding: 12px 18px !important; gap: 12px !important; }
  .site-nav, header .nav-dd { display: none !important; }
  header > div > a[href="/"] span:last-child { font-size: 17px !important; }
  .nav-signin-link { display: none !important; }
  .nav-burger { display: flex !important; }

  /* hero */
  #top { padding: 28px 18px 0 !important; }
  /* Size comes from the clamp() on .hero-h1, which already bottoms out at a
     phone-appropriate size — only the width cap needs lifting here. */
  #top h1 { max-width: none !important; }
  #top p { font-size: 17px !important; }
  /* The hero demo used to be hidden below this width for being cursor-driven.
     It is the first thing the page has to prove, so it stays: hero-sim.css
     narrows the frame to one column, and on a device that cannot run the
     simulation the same markup is served as a static first frame instead. */

  /* every two-column / three-column grid section becomes one column */
  section [style*="grid-template-columns:1fr 1fr"],
  section [style*="grid-template-columns:340px 1fr"],
  section [style*="grid-template-columns:repeat(3,1fr)"],
  footer [style*="grid-template-columns:1.6fr 1fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important; gap: 32px !important;
  }
  section [style*="grid-template-columns:repeat(3,1fr)"] > div[style*="border-left:1px solid"] { border-left: none !important; border-top: 1px solid var(--rule-soft) !important; padding-left: 0 !important; padding-right: 0 !important; }

  /* product tabs showcase: stack the tab list above the preview, drop fixed height */
  #product > div[style*="align-items:flex-end"] { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; }
  #product > div[style*="align-items:flex-end"] p { margin-left: 0 !important; }
  #product > div[style*="display:flex;gap:26px"] { flex-direction: column !important; }
  #product > div[style*="display:flex;gap:26px"] > div:first-child { width: 100% !important; }
  #product > div[style*="display:flex;gap:26px"] > div:first-child > div { flex-direction: row !important; overflow-x: auto !important; border-left: none !important; gap: 4px; -webkit-overflow-scrolling: touch; }
  #product > div[style*="display:flex;gap:26px"] > div:first-child button { white-space: nowrap; padding: 10px 14px !important; }
  #product > div[style*="display:flex;gap:26px"] > div:first-child span[style*="position:absolute"] { display: none; }
  #product [style*="flex:1;min-width:0;background:var(--color-surface);border-radius:28px"] { width: 100%; box-sizing: border-box; overflow-x: hidden; }
  #product [style*="min-height:640px"] { min-height: 0 !important; }
  #product [style*="grid-template-columns:1.35fr .85fr"] { grid-template-columns: 1fr !important; }
  #product [style*="padding:34px 40px"],
  #product [style*="padding:32px 40px"],
  #product [style*="padding:30px 40px"],
  #product [style*="padding:30px 40px;display:flex;flex-direction:column;height:100%"] { padding: 22px 18px !important; }
  /* Today tab: day-spine + study-hours card, side by side at 40px gap → stack */
  #product [style*="display:flex;gap:40px;margin-top:28px"] { flex-direction: column !important; gap: 20px !important; }
  #product [style*="display:flex;gap:40px;margin-top:28px"] > div:first-child { padding-left: 44px !important; }
  #product [style*="width:250px;flex:none"] { width: 100% !important; }
  /* Courses tab preview: reuse the general 2-col rule, plus its own gap:40px grid */
  #product [style*="padding:26px 40px;display:grid;grid-template-columns:1.35fr .85fr"] { padding: 22px 18px !important; }
  /* course cover header (title left, exam countdown right) wraps */
  #product [style*="height:130px"] { height: auto !important; flex-wrap: wrap !important; gap: 10px !important; padding: 18px !important; }
  #product [style*="height:130px"] > div[style*="margin-left:auto"] { margin-left: 0 !important; text-align: left !important; }
  /* catalog grid inside product preview: repeat(3,1fr) already → 2 cols above */
  /* calendar week preview inside product: the 7-day strip + hour-line background
     can't compress to a phone width — let it scroll horizontally in its own box
     instead of blowing out the card. */
  #product [style*="grid-template-columns:repeat(7,1fr)"] {
    display: flex !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch;
    padding-bottom: 320px !important; /* the absolutely-positioned event chips need room below the header row */
  }
  #product [style*="grid-template-columns:repeat(7,1fr)"] > * { flex: 1 0 96px; }
  #product [style*="display:flex;align-items:flex-end;margin-bottom:20px"] { flex-wrap: wrap !important; gap: 10px !important; }
  /* lesson viewer: side rail + reading pane */
  #product [style*="width:190px;flex:none"] { width: 100% !important; flex-direction: row !important; overflow-x: auto !important; padding: 14px 10px !important; }
  #product [style*="flex:1;min-width:0;padding:30px 44px"] { padding: 20px 18px !important; }
  /* Aeven chat tab: quiz answers + composer already stack fine; just tighten padding */
  #product [style*="padding:30px 40px;display:flex;flex-direction:column;height:100%"] > div[style*="align-self:flex-end;max-width:66%"] { max-width: 84% !important; }

  /* catalog course grid inside the product preview */
  #product [style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: repeat(2,1fr) !important; }

  /* week calendar preview inside the product tab */
  #product [style*="grid-template-columns:repeat(7,1fr)"] { overflow-x: auto; display: flex !important; }
  #product [style*="grid-template-columns:repeat(7,1fr)"] > * { flex: 1 0 92px; }

  /* the lesson viewer tab: side rail stacks above content */
  #product div[style*="display:flex;height:100%"] { flex-direction: column !important; }
  #product div[style*="width:190px"] { width: 100% !important; flex-direction: row !important; overflow-x: auto !important; gap: 6px !important; }

  /* pricing cards + testimonials + FAQ already covered by the repeat(3,1fr) rule above */
  #pricing > div:first-child { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; }
  #pricing p[style*="margin-left:auto"] { margin-left: 0 !important; }

  /* final CTA heading */
  #start h2 { font-size: 42px !important; }
  #start span[style*="border-radius:999px"][style*="background:var(--color-accent-100)"] { display: none; }

  /* footer: single column, logo block first */
  footer [style*="grid-template-columns:1.6fr 1fr 1fr 1fr 1fr"] { gap: 34px !important; }
  footer [style*="margin-left:auto"] { margin-left: 0 !important; }
}

}

@layer utilities {

/* ===========================================================================
   Skip link — first focusable element, visible only on focus
   =========================================================================== */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--color-bg); color: var(--color-text);
  font: 600 14px/1 var(--font-body); padding: 12px 18px;
  border-radius: 999px; box-shadow: var(--shadow-md);
  transition: top .18s ease;
}
.skip-link:focus-visible { top: 12px; }

}

@layer components {

/* ===========================================================================
   Contact form (.cf-*) — mailto composer, no backend
   =========================================================================== */
.cf-grid { display: grid; grid-template-columns: 340px 1fr; gap: 70px; align-items: start; }
.cf-form { display: flex; flex-direction: column; gap: 18px; }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cf-field { display: flex; flex-direction: column; gap: 7px; }
.cf-field label { font: 600 13px/1 var(--font-body); color: var(--text-secondary); }
.cf-field input, .cf-field select, .cf-field textarea {
  font: 400 15px/1.5 var(--font-body); color: var(--color-text);
  background: var(--color-bg); border: 1px solid rgba(32,30,29,.16);
  border-radius: 14px; padding: 12px 14px; width: 100%;
}
.cf-field textarea { min-height: 150px; resize: vertical; }
.cf-field input:focus-visible, .cf-field select:focus-visible, .cf-field textarea:focus-visible {
  outline: 2px solid var(--color-accent); outline-offset: 1px; border-color: transparent;
}
.cf-note { font: 400 13px/1.5 var(--font-body); color:var(--text-tertiary); margin: 0; }
.cf-status { font: 600 14px/1.5 var(--font-body); color: var(--color-accent-2-700); margin: 0; display: none; }
.cf-status.show { display: block; }
.cf-detail { padding: 18px 0; border-top: 1px solid var(--rule); }
.cf-detail:last-child { border-bottom: 1px solid var(--rule); }
.cf-detail dt { font: 600 11px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color:var(--text-tertiary); margin-bottom: 8px; }
.cf-detail dd { font: 400 16px/1.5 var(--font-body); margin: 0; }
@media (max-width: 900px) {
  .cf-grid { grid-template-columns: 1fr; gap: 32px; }
  .cf-row { grid-template-columns: 1fr; }
}

}

@layer utilities {

/* ===========================================================================
   Motion
   ===========================================================================
   The landing pages are static: no entrances, no transitions, no hover
   animation, no page transitions. Content is simply there when the page is.

   The single exception is the hero simulation (#hero-sim), which is the
   product demo — a cursor driving the real UI. Its motion is the content, so
   it is exempted from the site-wide suppression at the bottom of this file
   and keeps its own timing in assets/hero-sim.css.

   NOTE on .reveal: upstream hid every .reveal at opacity 0 and let motion.js
   fade it back in. With entrances removed there is nothing to fade, so the
   hiding rule is gone entirely — content is simply present. The fail-safe and
   the perf-static override that existed to rescue that rule go with it; there
   is no longer a state in which the page can be stuck invisible. */

/* ── Pointer response ────────────────────────────────────────────────────────
   Only for devices that actually have a pointer; on touch these would either
   never fire or stick after a tap. Kept: a hover lift is feedback, not motion
   the page performs at you. */
@media (hover: hover) and (pointer: fine) {
  .lift {
    transition:
      transform var(--dur-base) var(--ease-out),
      box-shadow var(--dur-base) var(--ease-out);
  }
  .lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

  /* Buttons acknowledge a press. The scale is tiny on purpose — enough to feel
     mechanical, not enough to look bouncy. */
  .btn { transition: background var(--dur-fast) var(--ease-out), transform var(--dur-instant) var(--ease-out); }
  .btn:active { transform: scale(.985); }
}

/* ── Depth ───────────────────────────────────────────────────────────────────
   Kept as a compositor hint only; motion.js no longer writes an offset. */
.parallax { will-change: auto; }
.perf-static .parallax { transform: none !important; will-change: auto; }

/* ── Reduced motion ──────────────────────────────────────────────────────────
   Only the pointer feedback above is left to suppress. */
@media (prefers-reduced-motion: reduce) {
  .lift, .btn { transition: none; }
  .lift:hover { transform: none; }
  .btn:active { transform: none; }
}

}

/* ── No motion ───────────────────────────────────────────────────────────────
   Outside @layer on purpose: layered !important loses to unlayered !important,
   so this has to sit here to actually win.

   :not(#hero-sim *) — and the matching :not(#hero-sim) — carve the demo and
   everything inside it out of the rule. The demo animates a cursor across the
   real product UI; suppressing that would remove the thing the page exists to
   show.

   #aeven-demo, #checkin-demo, #integrations-demo and #day-demo are the
   replays in sections 01-04 — same reasoning as the hero: the motion IS the
   demonstration.

   #page-beat is carved out for the same reason: it is the brand mark beating
   over a page transition, and it is the one thing here that is not content.
   The rule above is about the page you are READING holding still — the beat
   only ever exists between pages, never while you are looking at one. Without
   this exception it still painted, but frozen: a static mark on a wash, which
   is worse than not doing it at all.

   Everything else on the site holds still. */
*:not(#hero-sim):not(#hero-sim *):not(#page-beat):not(#page-beat *):not(#aeven-demo):not(#aeven-demo *):not(#checkin-demo):not(#checkin-demo *):not(#integrations-demo):not(#integrations-demo *):not(#day-demo):not(#day-demo *),
*:not(#hero-sim):not(#hero-sim *):not(#page-beat):not(#page-beat *):not(#aeven-demo):not(#aeven-demo *):not(#checkin-demo):not(#checkin-demo *):not(#integrations-demo):not(#integrations-demo *):not(#day-demo):not(#day-demo *)::before,
*:not(#hero-sim):not(#hero-sim *):not(#page-beat):not(#page-beat *):not(#aeven-demo):not(#aeven-demo *):not(#checkin-demo):not(#checkin-demo *):not(#integrations-demo):not(#integrations-demo *):not(#day-demo):not(#day-demo *)::after {
  animation: none !important;
  transition: none !important;
}

@layer components {
  /* ── Page-transition beat ──
     Landing pages are separate documents, so moving between them is a real
     navigation with a real gap. The brand mark beats once over the page
     colour to cover it — same mark and rhythm as the app's boot splash and
     its rail transitions.

     This is not an entrance animation: it never plays on content you are
     reading, only between pages. See assets/js/page-beat.js.

     Inert by construction — pointer-events:none and aria-hidden — so it can
     never swallow the click it is decorating. */
  .page-beat {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    background: var(--color-bg);
    pointer-events: none;
  }

  .page-beat-mark {
    width: 46px;
    height: 46px;
    background: url("/assets/brand/mark.svg") center / contain no-repeat;
  }

  /* leaving: the wash comes up over 240ms — slow enough to read as a
     deliberate dissolve rather than a cut, and it is the only part of this on
     the critical path, so it stays the shorter half. */
  .page-beat.pb-out {
    animation: pageBeatOutWash 0.24s ease-out both;
  }
  .page-beat.pb-out .page-beat-mark {
    animation: pageBeatBreath 1.5s cubic-bezier(0.37, 0, 0.28, 1) infinite;
  }

  /* arriving: one slow breath, then the wash clears off the loaded page */
  .page-beat.pb-in {
    animation: pageBeatInWash 0.9s cubic-bezier(0.4, 0, 0.2, 1) both;
  }
  .page-beat.pb-in .page-beat-mark {
    animation: pageBeatBreath 1.5s cubic-bezier(0.37, 0, 0.28, 1) both;
  }

  @keyframes pageBeatOutWash {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  @keyframes pageBeatInWash {
    0%   { opacity: 1; }
    55%  { opacity: 1; }
    100% { opacity: 0; }
  }

  /* One slow breath rather than a double thump.
     The earlier version fired two beats inside 340ms at a 1.13 peak, which
     reads as urgency — a notification, something wanting attention. Premium
     motion is slower and shallower than feels right on paper: 1.5s for a
     single swell to 1.05, eased so it moves most in the middle and settles
     rather than snapping. Looping on the way out, it becomes a calm pulse
     that can hold for as long as a slow page needs without ever nagging. */
  @keyframes pageBeatBreath {
    0%   { transform: scale(1);     opacity: 1; }
    46%  { transform: scale(1.05);  opacity: 1; }
    100% { transform: scale(1);     opacity: 1; }
  }

  /* The script bails out under reduced motion before any of this is built.
     This is the belt-and-braces for a stylesheet that outlives that check. */
  @media (prefers-reduced-motion: reduce) {
    .page-beat { display: none; }
  }
}