/* ─────────────────────────────────────────────────────────────────────────────
   Jamtable website — page styles.

   The Digital Discovery Group design system ships tokens only (_ds/styles.css).
   This file implements the DS components the Features page uses — Panel,
   Button, Eyebrow, SectionHeading, ArrowLink, Callout, Badge, EchoAvatar,
   EchoPanel — as plain CSS classes, plus the app shell and the dark theme.

   Rules held from the system readme:
     · Buttons darken on hover and gain --sheen. Glass is the one exception.
     · Cards lift -3px to --shadow-md, border stepping to --border-emphasis.
     · Focus is --shadow-focus plus a blue border. Never removed without replacing.
     · Hairlines carry the structure; nothing bounces, overshoots or scales in.
   ───────────────────────────────────────────────────────────────────────────── */

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

:root{
  /* Brighter actions, held to the system's white-text rule: every filled fill
     below measures 4.9:1 or better against #FFFFFF. Bright plume hue, driven
     down the value ramp — the same derivation as --accent-*-deep. */
  --action-primary-bg:#2566DD;
  --action-primary-bg-hover:#1E56C0;
  --action-primary-bg-active:#1A4AA6;
  --action-accent-bg:#1F6AE0;
  --action-accent-bg-hover:#1A5AC4;
  --action-cyan-bg:#1F6AE0;
  --action-cyan-bg-hover:#1A5AC4;
  --action-green-bg:#358020;
  --action-green-bg-hover:#2C6B1A;
  --action-orange-bg:#D22C1B;
  --action-orange-bg-hover:#B32415;
}

html{scroll-behavior:smooth}
body{margin:0;background:var(--surface-page);color:var(--text-primary);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--text-link-hover)}
img{max-width:100%}
:focus-visible{outline:none;box-shadow:var(--shadow-focus);border-color:var(--border-focus)}

/* ── Dark theme ───────────────────────────────────────────────────────────────
   A token remap, not a second stylesheet. The system ships light only. */
:root[data-theme="dark"]{
  color-scheme:dark;
  --neutral-0:#0F2029;--neutral-50:#0A1821;--neutral-100:#16303C;--neutral-200:#22414F;--neutral-300:#2E5263;--neutral-400:#456C7E;
  --ink-900:#E9F1F6;--slate-600:#A7B9C5;--slate-500:#95A9B6;--slate-400:#8098A6;--slate-300:#5D7383;--slate-200:#4A6274;--slate-100:#3A5464;
  --text-primary:#E9F1F6;--text-secondary:#A7B9C5;--text-tertiary:#8098A6;--text-brand:#8CC6F0;--text-inverse:#FFFFFF;--text-link:#8CC6F0;--text-link-hover:#B6DDF7;
  --surface-page:#08151D;--surface-page-alt:#0B1C25;--surface-card:#0F2029;--surface-sunken:#16303C;--surface-panel:#0F2029;
  --surface-ink:#0C2233;--surface-ink-deep:#08171F;--surface-code:#08171F;--echo-surface:#08171F;--surface-glass:rgba(9,22,30,.74);--surface-overlay:rgba(4,11,16,.68);
  --border-default:rgba(255,255,255,.10);--border-emphasis:rgba(255,255,255,.18);
  --action-secondary-fg:#E9F1F6;--action-secondary-border:rgba(255,255,255,.18);--action-secondary-bg-hover:rgba(255,255,255,.07);
  --action-ghost-fg:#A7B9C5;
  --shadow-xs:0 1px 2px rgba(0,0,0,.32);--shadow-sm:0 1px 3px rgba(0,0,0,.36);
  --shadow-md:0 12px 30px -12px rgba(0,0,0,.62),0 2px 6px rgba(0,0,0,.3);
  --shadow-lg:0 34px 70px -24px rgba(0,0,0,.72),0 8px 20px rgba(0,0,0,.4);
}

/* Washes are precomputed over paper, so they need remapping on ink. */
:root[data-theme="dark"]{
  --wash-cyber:rgba(56,120,232,.14);
  --wash-ai:rgba(120,88,224,.16);
  --wash-digital:rgba(0,184,208,.13);
  --wash-retail:rgba(248,112,24,.14);
  --wash-green:rgba(128,184,104,.14);
  --wash-amber:rgba(248,192,0,.13);
  --wash-red:rgba(217,58,43,.14);
}

/* ── Page keyframes ─────────────────────────────────────────────────────────── */
@keyframes jtRise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes jtSlide{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes jtFade{from{opacity:0}to{opacity:1}}
@keyframes jt-ping{0%{transform:scale(.7);opacity:.8}70%{transform:scale(2.4);opacity:0}100%{transform:scale(2.4);opacity:0}}
@media (prefers-reduced-motion:reduce){[data-jt-ping]{animation:none}}

/* ── Panel ────────────────────────────────────────────────────────────────────
   Layers stack in a fixed order: air → field → noise → vignette → content. */
.panel{position:relative;padding:var(--section-y) var(--gutter);overflow:hidden;isolation:isolate}
.panel__inner{position:relative;z-index:2;max-width:var(--container-max);margin:0 auto}
.panel--paper{background:var(--surface-page)}
.panel--alt{background:var(--surface-page-alt)}
.panel--ink{background:var(--surface-ink);color:var(--text-inverse)}
.panel--deep{background:var(--surface-ink-deep);color:var(--text-inverse)}
.panel--rule::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--plume-gradient);z-index:3}
.panel__layer{position:absolute;inset:0;z-index:0;pointer-events:none}
.panel__air--nebula{background:var(--bg-nebula-ink);animation:var(--anim-drift)}
.panel__air--halo{background:var(--bg-plume-bloom);filter:blur(70px);opacity:.42;animation:var(--anim-bloom)}
.panel__air--aurora{background:var(--bg-aurora-ink);animation:var(--anim-aurora)}
.panel__field--blueprint{background-image:var(--bg-blueprint);background-size:var(--bg-blueprint-size);-webkit-mask-image:var(--mask-margins);mask-image:var(--mask-margins)}
.panel--ink .panel__field--blueprint,.panel--deep .panel__field--blueprint{background-image:var(--bg-blueprint-inverse)}
.panel__noise{background-image:var(--bg-noise);opacity:var(--bg-noise-opacity-ink)}
.panel--paper .panel__noise,.panel--alt .panel__noise{opacity:var(--bg-noise-opacity-paper)}
.panel__vignette{background:var(--vignette-ink)}
.panel--paper .panel__vignette,.panel--alt .panel__vignette{background:var(--vignette-paper)}

/* Hero — the bars/core-pulse field bleeds past the section padding. */
.hero__field{position:absolute;top:calc(-1 * var(--section-y));bottom:calc(-1 * var(--section-y));left:50%;transform:translateX(-50%);width:100vw;z-index:0;pointer-events:none}

/* ── Eyebrow / chip ───────────────────────────────────────────────────────────
   A practice is identified by a 7px dot, never by a large field of colour. */
.chip{display:inline-flex;align-items:center;gap:8px;padding:5px 11px;border-radius:var(--radius-xs);font-family:var(--font-mono);font-size:var(--text-nano);letter-spacing:var(--tracking-wider);text-transform:uppercase;white-space:nowrap;border:1px solid var(--border-default);background:var(--neutral-100);color:var(--text-primary)}
.chip__dot{width:7px;height:7px;border-radius:50%;background:var(--slate-400);flex:0 0 auto}
.chip--plain{background:transparent;color:var(--text-tertiary)}
.chip--inverse{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.07);box-shadow:var(--highlight-top);color:rgba(255,255,255,.84)}
.chip--blue{border-color:rgba(56,120,232,.28);background:var(--wash-cyber)}
.chip--blue .chip__dot{background:var(--accent-blue)}
.chip--cyan{border-color:rgba(0,184,208,.34);background:var(--wash-digital)}
.chip--cyan .chip__dot{background:var(--accent-cyan)}
.chip--green{border-color:rgba(128,184,104,.44);background:var(--wash-green)}
.chip--green .chip__dot{background:var(--accent-green)}
.chip--amber{border-color:rgba(248,192,0,.42);background:var(--wash-amber)}
.chip--amber .chip__dot{background:var(--accent-amber)}
.chip--red{border-color:rgba(217,58,43,.26);background:var(--wash-red)}
.chip--red .chip__dot{background:var(--accent-red)}
.chip--ai{border-color:rgba(120,88,224,.26);background:var(--wash-ai)}
.chip--ai .chip__dot{background:var(--echo-accent)}
.chip--orange{border-color:rgba(248,112,24,.30);background:var(--wash-retail)}
.chip--orange .chip__dot{background:var(--accent-orange)}
.chip--inverse.chip--cyan .chip__dot{background:var(--accent-cyan)}
.chip--inverse.chip--ai .chip__dot{background:var(--echo-accent)}
.chip--inverse.chip--orange .chip__dot{background:var(--accent-orange)}
.chip-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:16px}

.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:var(--text-nano);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--text-tertiary)}
.eyebrow--inverse{color:rgba(255,255,255,.62)}
.eyebrow__dot{width:7px;height:7px;border-radius:50%;background:var(--practice-retail);flex:0 0 auto}

/* ── Section heading ──────────────────────────────────────────────────────────
   One idea, one heading. Levels descend without a skip. */
.heading__title{margin:0;letter-spacing:var(--tracking-tight);line-height:var(--leading-tight);font-weight:var(--weight-semibold);color:var(--text-primary);text-wrap:balance}
.heading--sm .heading__title{font-size:var(--text-h1)}
.heading--md .heading__title{font-size:var(--text-display-3)}
.heading--lg .heading__title{font-size:var(--text-display-2);font-family:var(--font-display);letter-spacing:var(--tracking-display)}
.heading__lead{margin:16px 0 0;font-size:var(--text-lead);line-height:var(--leading-snug);font-weight:var(--weight-light);color:var(--text-secondary);max-width:var(--measure-lead)}
.panel--ink .heading__title,.panel--deep .heading__title{color:var(--text-inverse)}
.panel--ink .heading__lead,.panel--deep .heading__lead{color:var(--text-inverse-muted)}

/* ── Buttons ─────────────────────────────────────────────────────────────────
   Sentence case. Darken on hover, gain --sheen; never lighten, never shift hue. */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-sans);font-size:var(--text-caption);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wide);border-radius:var(--radius-sm);border:1px solid transparent;cursor:pointer;text-align:center;overflow:hidden;transition:var(--transition-control),transform var(--duration-instant) var(--ease-standard)}
.btn::after{content:"";position:absolute;inset:0;background:var(--sheen);opacity:0;transition:opacity var(--duration-fast) var(--ease-standard);pointer-events:none}
.btn:hover::after{opacity:1}
.btn:active{transform:translateY(1px)}
.btn--sm{height:32px;padding:0 12px}
.btn--md{height:38px;padding:0 16px}
.btn--lg{height:46px;padding:0 22px;font-size:var(--text-body-sm)}
.btn--full{width:100%}
.btn--primary{background:var(--action-primary-bg);color:var(--action-primary-fg)}
.btn--primary:hover{background:var(--action-primary-bg-hover);color:var(--action-primary-fg)}
.btn--primary:active{background:var(--action-primary-bg-active)}
.btn--accent{background:var(--action-accent-bg);color:var(--action-accent-fg)}
.btn--accent:hover{background:var(--action-accent-bg-hover);color:var(--action-accent-fg)}
.btn--orange{background:var(--action-orange-bg);color:var(--action-orange-fg)}
.btn--orange:hover{background:var(--action-orange-bg-hover);color:var(--action-orange-fg)}
.btn--secondary{background:transparent;border-color:var(--action-secondary-border);color:var(--action-secondary-fg)}
.btn--secondary:hover{background:var(--action-secondary-bg-hover);color:var(--action-secondary-fg)}
/* Glass is a lens, not a fill — the one button in the system that lightens on hover. */
.btn--glass-inverse{background:var(--action-glass-bg-inverse);border-color:var(--action-glass-border-inverse);color:var(--action-glass-fg-inverse);box-shadow:var(--action-glass-shadow-inverse);backdrop-filter:var(--glass-blur-inverse);-webkit-backdrop-filter:var(--glass-blur-inverse)}
.btn--glass-inverse:hover{background:var(--action-glass-bg-inverse-hover);color:var(--action-glass-fg-inverse)}
.btn--glass-inverse::after{background:var(--glass-specular-inverse);opacity:1}

/* ── ArrowLink ────────────────────────────────────────────────────────────────
   The arrow is a plain → set in the label's own type, so it tracks with the text. */
.arrow-link{display:inline-flex;align-items:center;gap:8px;font-size:var(--text-body-sm);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wide);color:var(--text-link)}
.arrow-link__arrow{display:inline-block;transition:transform var(--duration-base) var(--ease-standard)}
.arrow-link:hover{color:var(--accent-blue)}
.arrow-link:hover .arrow-link__arrow{transform:translateX(4px)}
.arrow-link--inverse{color:var(--text-inverse)}
.arrow-link--inverse:hover{color:var(--text-inverse);opacity:.82}

/* ── Callout ─────────────────────────────────────────────────────────────────── */
.callout{display:grid;gap:6px;padding:16px 18px;border:1px solid var(--border-default);border-left:2px solid var(--slate-400);border-radius:var(--radius-lg);background:var(--surface-card);box-shadow:var(--shadow-xs)}
.callout--info{border-left-color:var(--status-info);background:var(--status-info-wash)}
.callout__title{font-size:var(--text-body-sm);font-weight:var(--weight-semibold);color:var(--text-primary)}
.callout__body{margin:0;font-size:var(--text-caption);line-height:var(--leading-snug);color:var(--text-secondary)}

/* ── Badge ───────────────────────────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:7px;padding:3px 9px;border-radius:var(--radius-xs);font-size:var(--text-micro);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wide);border:1px solid transparent}
.badge--success-soft{background:var(--status-success-wash);color:var(--text-primary);border-color:rgba(128,184,104,.44)}
.badge__dot{width:6px;height:6px;border-radius:50%;background:var(--status-success);flex:0 0 auto;color:var(--status-success)}
.badge__dot--pulse{animation:var(--anim-pulse)}

/* ── Capability sections ─────────────────────────────────────────────────────── */
.cap{scroll-margin-top:88px;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(24px,4vw,64px);padding:clamp(40px,5vw,64px) 0 clamp(32px,4vw,48px);border-top:1px solid var(--border-default)}
.cap--stacked{display:block}
.cap__body{align-self:start}
.cap__title{margin:0 0 16px;font-size:var(--text-h1);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);font-weight:var(--weight-semibold);color:var(--text-primary);max-width:22ch;text-wrap:pretty}
.cap__p{margin:0 0 12px;font-size:var(--text-body);line-height:var(--leading-body);color:var(--text-secondary);max-width:52ch}
.cap__p:last-of-type{margin-bottom:0}

/* Bordered feature list — 1px gaps over the border colour, so the rules are hairlines. */
.rulelist{list-style:none;margin:0;padding:0;align-self:start;display:grid;gap:1px;background:var(--border-default);border:1px solid var(--border-default);border-top:2px solid var(--slate-400);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-xs)}
.rulelist li{background:var(--surface-card);padding:13px 18px;font-size:var(--text-body-sm);line-height:var(--leading-snug);color:var(--text-primary)}
.rulelist--cols{grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.rulelist--cyan{border-top-color:var(--accent-cyan)}
.rulelist--blue{border-top-color:var(--accent-blue)}
.rulelist--green{border-top-color:var(--accent-green)}
.rulelist--amber{border-top-color:var(--accent-amber)}
.rulelist--red{border-top-color:var(--accent-red)}
.rulelist--ai{border-top-color:var(--echo-accent)}
.rulelist--orange{border-top-color:var(--accent-orange)}

/* ── Index grids (the six platforms, the twelve capabilities) ─────────────────── */
.tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));border-top:1px solid var(--border-default);border-left:1px solid var(--border-default)}
.tiles>li{border-right:1px solid var(--border-default);border-bottom:1px solid var(--border-default)}
.tile{display:block;padding:0 18px 22px;color:var(--text-primary);transition:background var(--duration-fast) var(--ease-standard)}
.tile:hover{background:var(--surface-card);color:var(--text-primary)}
.tile__rule{display:block;height:3px;margin:0 -18px 15px}
.tile__num{display:block;font-family:var(--font-mono);font-size:var(--text-nano);letter-spacing:var(--tracking-wider);color:var(--text-tertiary);margin-bottom:8px}
.tile__name{display:block;font-size:var(--text-h3);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight)}

.capindex{list-style:none;margin:clamp(32px,4vw,48px) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));border-top:1px solid var(--border-default);border-left:1px solid var(--border-default)}
.capindex>li{border-right:1px solid var(--border-default);border-bottom:1px solid var(--border-default)}
.capindex a{display:block;padding:14px 16px 15px;color:var(--text-primary);transition:background var(--duration-fast) var(--ease-standard)}
.capindex a:hover{background:var(--surface-card);color:var(--text-primary)}
.capindex__meta{display:flex;align-items:center;gap:9px;margin-bottom:5px;font-family:var(--font-mono);font-size:var(--text-nano);letter-spacing:var(--tracking-wider);color:var(--slate-400);text-transform:uppercase}
.capindex__dot{width:8px;height:8px;border-radius:50%;background:var(--slate-400);flex:0 0 auto}
.capindex__name{display:block;font-size:var(--text-caption);font-weight:var(--weight-medium);padding-left:17px}

.metarail{margin-top:24px;display:flex;flex-wrap:wrap;gap:10px 32px;font-family:var(--font-mono);font-size:var(--text-nano);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--text-tertiary)}

/* ── Editorial two-column blocks ─────────────────────────────────────────────── */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(28px,5vw,72px);align-items:start}
.split__prose{display:grid;gap:16px;max-width:var(--measure-prose)}
.split__prose p{margin:0;font-size:var(--text-body);line-height:var(--leading-body);color:var(--text-secondary)}
.split__prose p.lede{color:var(--text-primary)}
.split--divided{margin-top:clamp(40px,6vw,72px);padding-top:clamp(28px,4vw,40px);border-top:1px solid var(--border-default)}

/* ── Full-bleed figure with a protection scrim (never a capsule) ──────────────── */
.bleed{margin:0;position:relative;background:var(--surface-ink-deep)}
.bleed img{display:block;width:100%;height:clamp(360px,54vw,760px);object-fit:cover;object-position:center 42%}
.bleed__scrim{position:absolute;inset:0;background:var(--scrim-bottom)}
.bleed figcaption{position:absolute;left:0;right:0;bottom:0;padding:clamp(20px,4vw,40px) var(--gutter)}
.bleed__caption{max-width:var(--container-max);margin:0 auto;display:flex;flex-wrap:wrap;gap:8px 20px;align-items:baseline}
.bleed__caption span:last-child{font-size:var(--text-body-sm);color:var(--text-inverse)}

/* ── Device band ─────────────────────────────────────────────────────────────── */
.devices{margin:clamp(28px,4vw,44px) 0 0;background:var(--surface-page-alt);border:1px solid var(--border-default);border-radius:var(--radius-lg);padding:clamp(20px,3vw,36px) clamp(20px,3vw,36px) clamp(16px,2vw,24px)}
.devices__row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:clamp(20px,3vw,44px)}
.devices__row img{display:block;width:auto;object-fit:contain}
.devices figcaption{margin-top:clamp(16px,2vw,24px);padding-top:16px;border-top:1px solid var(--border-default);font-size:var(--text-caption);line-height:var(--leading-snug);color:var(--text-secondary);text-align:center}

/* ── ECHO ────────────────────────────────────────────────────────────────────── */
.echo-head{scroll-margin-top:88px;display:flex;flex-direction:row-reverse;justify-content:flex-start;align-items:flex-start;gap:clamp(20px,3vw,36px);flex-wrap:wrap;text-align:right}
.echo-head__body{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;align-items:flex-end}
/* The ring is the identity — at 22px the portrait is unreadable and the ring is
   what still says Echo. Never dropped, never recoloured, never cropped square. */
.echo-avatar{position:relative;flex:0 0 auto;width:104px;height:104px;border-radius:50%;overflow:hidden;background:var(--echo-surface);box-shadow:0 0 0 2px var(--echo-ring),var(--glow-echo)}
.echo-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.echo-card{display:flex;flex-direction:column;gap:12px;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-lg);background:rgba(255,255,255,.045);box-shadow:var(--highlight-top);padding:clamp(18px,2.4vw,26px)}
.echo-label{font-family:var(--font-mono);font-size:var(--text-nano);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:rgba(255,255,255,.42)}
.echo-sources{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.echo-source{display:flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:var(--text-nano);color:rgba(255,255,255,.62)}
.echo-source__dot{width:6px;height:6px;border-radius:50%;background:var(--echo-accent);display:block;flex:0 0 auto}
.echo-note{margin:18px 0 0;font-size:var(--text-caption);line-height:var(--leading-snug);color:rgba(255,255,255,.55);max-width:var(--measure-prose)}
.echo-points{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:0 clamp(24px,3vw,44px)}
.echo-points li{padding:14px 0;border-top:1px solid rgba(255,255,255,.10)}
.echo-points b{display:block;font-size:var(--text-body-sm);font-weight:var(--weight-semibold);color:var(--text-inverse);margin-bottom:4px}
.echo-points span{font-size:var(--text-caption);line-height:var(--leading-snug);color:var(--text-inverse-muted)}
.echo-controls{display:grid;gap:1px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.10);border-radius:var(--radius-lg);overflow:hidden;grid-template-columns:repeat(2,minmax(0,1fr))}
.echo-controls>div{background:rgba(255,255,255,.04);padding:20px 20px 22px}
.echo-controls b{display:block;font-size:var(--text-body-sm);font-weight:var(--weight-semibold);color:var(--text-inverse);margin-bottom:5px}
.echo-controls span{font-size:var(--text-caption);line-height:var(--leading-snug);color:var(--text-inverse-muted)}
@media (min-width:1080px){.echo-controls{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (max-width:560px){.echo-controls{grid-template-columns:minmax(0,1fr)}}
.echo-demo{scroll-margin-top:88px;margin:clamp(32px,4vw,52px) 0 0}
.echo-demo__stage{position:relative;aspect-ratio:16/9;width:100%;border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-lg);background:var(--surface-ink);background-image:var(--bg-blueprint-inverse);background-size:var(--bg-blueprint-size);box-shadow:var(--highlight-top);overflow:hidden;display:flex;align-items:center;justify-content:center}
.echo-demo__bloom{position:absolute;inset:0;background:var(--bg-plume-bloom);filter:blur(60px);opacity:.5}
.echo-demo figcaption{margin-top:14px;font-size:var(--text-caption);line-height:var(--leading-snug);color:rgba(255,255,255,.55);max-width:var(--measure-prose)}

/* ── Supporting capabilities (native <details>, so answers ship in the markup) ── */
.disclosures{margin-top:clamp(28px,4vw,44px);border-top:1px solid var(--border-emphasis)}
.disclosures details{scroll-margin-top:88px}
.disclosures summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:16px;padding:20px 14px;margin:0 -14px;border-bottom:1px solid var(--border-default);transition:background var(--duration-fast) var(--ease-standard)}
.disclosures summary::-webkit-details-marker{display:none}
.disclosures summary:hover{background:var(--surface-card)}
.disclosures__num{font-family:var(--font-mono);font-size:var(--text-nano);color:var(--text-tertiary);flex:0 0 24px}
.disclosures__name{flex:1 1 240px;font-size:var(--text-h3);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);color:var(--text-primary)}
.disclosures__tag{flex:2 1 320px;font-size:var(--text-caption);color:var(--text-secondary)}
.disclosures__plus{flex:0 0 auto;font-size:18px;line-height:1;color:var(--text-tertiary);transition:transform var(--duration-fast) var(--ease-standard)}
.disclosures details[open] .disclosures__plus{transform:rotate(45deg)}
.disclosures__panel{padding:8px 0 24px 40px;border-bottom:1px solid var(--border-default);display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.disclosures__panel p{margin:0;font-size:var(--text-body-sm);line-height:var(--leading-body);color:var(--text-secondary)}
.disclosures__panel ul{list-style:none;margin:0;padding:0}
.disclosures__panel li{font-size:var(--text-body-sm);line-height:var(--leading-snug);padding:8px 0;border-top:1px solid var(--border-default)}
.disclosures__panel li.muted{color:var(--text-tertiary)}

/* ── Honesty register ────────────────────────────────────────────────────────── */
.register{margin-top:clamp(28px,4vw,44px);display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(24px,3vw,40px)}
.register__col{background:var(--surface-card);border:1px solid var(--border-default);border-top:2px solid var(--slate-400);border-radius:var(--radius-lg);padding:clamp(22px,2.6vw,30px);box-shadow:var(--shadow-xs)}
.register__col--live{border-top-color:var(--status-success)}
.register__col--commissioning{border-top-color:var(--status-warning)}
.register__col h3{margin:0 0 6px;font-size:var(--text-h2);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);color:var(--text-primary)}
.register__col>p{margin:0 0 16px;font-size:var(--text-caption);line-height:var(--leading-snug);color:var(--text-secondary)}
.register__col ul{list-style:none;margin:0;padding:0}
.register__col li{font-size:var(--text-body-sm);line-height:var(--leading-snug);padding:9px 0;border-top:1px solid var(--border-default)}
.register__col--planned li{color:var(--text-secondary)}

/* ── Fulfilment channel cards ────────────────────────────────────────────────── */
.channels{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:1px;background:var(--border-default);border:1px solid var(--border-default);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-xs)}
.channels li{background:var(--surface-card);padding:18px}
.channels__state{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-family:var(--font-mono);font-size:var(--text-nano);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--text-tertiary)}
.channels__state i{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.channels__name{font-size:var(--text-body-sm);font-weight:var(--weight-semibold);color:var(--text-primary);margin-bottom:6px}
.channels p{margin:0;font-size:var(--text-caption);line-height:var(--leading-snug);color:var(--text-secondary)}

/* ── Site footer block ───────────────────────────────────────────────────────── */
.sitemap{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(24px,4vw,56px)}
.sitemap__label{font-family:var(--font-mono);font-size:var(--text-nano);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--text-tertiary);margin-bottom:14px}
.sitemap ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sitemap a{font-size:var(--text-caption);color:var(--text-secondary)}
.sitemap a:hover{color:var(--text-link-hover)}
.colophon{margin-top:clamp(32px,4vw,48px);padding-top:20px;border-top:1px solid var(--border-default);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;font-family:var(--font-mono);font-size:var(--text-nano);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--text-tertiary)}

/* ── App shell: header ───────────────────────────────────────────────────────── */
.shell{position:fixed;top:0;left:0;right:0;z-index:60;background:var(--surface-glass);backdrop-filter:blur(14px) saturate(180%);-webkit-backdrop-filter:blur(14px) saturate(180%);border-bottom:1px solid var(--border-default)}
.shell__bar{max-width:calc(var(--container-max) + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter);height:60px;display:flex;align-items:center;gap:8px}
.shell__spacer{height:60px}
.shell__menubtn{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 11px 0 12px;margin-right:4px;border-radius:var(--radius-sm);border:1px solid var(--border-default);background:var(--surface-card);color:var(--text-primary);font-family:var(--font-sans);font-size:var(--text-caption);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wide);cursor:pointer;flex:0 0 auto;transition:var(--transition-control)}
.shell__menubtn:hover{border-color:var(--border-emphasis);background:var(--surface-sunken)}
.shell__brand{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;color:var(--text-primary)}
.shell__brand:hover{color:var(--text-primary)}
.shell__brand img{height:28px;width:auto;display:block}
.shell__wordmark{display:flex;flex-direction:column;gap:1px}
.shell__wordmark b{font-family:var(--font-display);font-size:1.0625rem;line-height:1.05;font-weight:var(--weight-bold);letter-spacing:var(--tracking-display);color:var(--text-primary)}
.shell__wordmark span{font-family:var(--font-mono);font-size:var(--text-nano);line-height:1.2;letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--text-tertiary);white-space:nowrap}
.shell__searchwrap{flex:1 1 auto;display:flex;justify-content:center;min-width:0;padding:0 8px}
.shell__search{display:flex;align-items:center;gap:9px;width:min(440px,100%);height:34px;padding:0 8px 0 12px;border-radius:var(--radius-sm);border:1px solid var(--border-default);background:var(--surface-sunken);color:var(--text-tertiary);font-family:var(--font-sans);font-size:var(--text-caption);cursor:pointer;text-align:left;transition:var(--transition-control)}
.shell__search:hover{border-color:var(--border-emphasis);background:var(--surface-card)}
.shell__search span{flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shell__search kbd{flex:0 0 auto;font-family:var(--font-mono);font-size:var(--text-nano);letter-spacing:.06em;padding:3px 6px;border-radius:var(--radius-xs);border:1px solid var(--border-default);background:var(--surface-card);color:var(--text-tertiary)}
.shell__actions{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.shell__clock{display:flex;align-items:center;gap:8px;height:24px;padding-right:10px;margin-right:4px;border-right:1px solid var(--border-default)}
.shell__clock i{width:6px;height:6px;border-radius:50%;background:var(--accent-green);color:var(--accent-green);box-shadow:0 0 0 3px rgba(128,184,104,.18);animation:var(--anim-pulse)}
.shell__clock time{font-family:var(--font-mono);font-size:var(--text-caption);font-variant-numeric:tabular-nums;color:var(--text-secondary)}
.shell__clock em{font-family:var(--font-mono);font-size:var(--text-nano);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--text-tertiary)}
.iconbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--radius-sm);border:1px solid transparent;background:transparent;color:var(--text-secondary);cursor:pointer;transition:var(--transition-control)}
.iconbtn:hover{background:var(--surface-sunken);color:var(--text-primary)}
.iconbtn--echo:hover{color:var(--echo-accent)}
.iconbtn__pip{position:absolute;top:6px;right:6px;width:5px;height:5px;border-radius:50%;background:var(--echo-accent);box-shadow:0 0 0 2px var(--surface-glass)}
.shell__divider{width:1px;height:24px;background:var(--border-default);margin:0 6px}

/* Menu drawer */
.menu__scrim{position:fixed;left:0;right:0;top:60px;bottom:0;background:var(--surface-overlay);z-index:30;animation:jtFade 200ms var(--ease-standard) both}
.menu{position:absolute;left:0;right:0;top:60px;z-index:35;background:var(--surface-page);border-bottom:1px solid var(--border-default);box-shadow:var(--shadow-lg);max-height:calc(100dvh - 60px);overflow:auto;animation:jtRise 200ms var(--ease-out) both}
.menu__rule{position:absolute;left:0;right:0;top:0;height:2px;background:var(--plume-gradient)}
.menu__grid{max-width:calc(var(--container-max) + 2 * var(--gutter));margin:0 auto;padding:24px var(--gutter) 20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,208px),1fr));gap:16px}
.menu__card{display:flex;flex-direction:column;gap:9px;padding:15px 15px 17px;border-radius:var(--radius-lg);border:1px solid var(--border-default);background:var(--surface-card);box-shadow:var(--shadow-xs);transition:var(--transition-lift);color:var(--text-primary)}
.menu__card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--border-emphasis);color:var(--text-primary)}
.menu__cardhead{display:flex;align-items:center;gap:9px}
.menu__icon{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex:0 0 auto;border-radius:var(--radius-sm)}
.menu__name{font-size:var(--text-h4);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);color:var(--text-primary)}
.menu__tag{font-size:var(--text-caption);line-height:var(--leading-snug);color:var(--text-secondary)}
.menu__go{display:inline-flex;align-items:center;gap:6px;margin-top:2px;font-size:var(--text-micro);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wide)}
.menu__foot{border-top:1px solid var(--border-default);background:var(--surface-page-alt)}
.menu__footinner{max-width:calc(var(--container-max) + 2 * var(--gutter));margin:0 auto;padding:11px var(--gutter);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--font-mono);font-size:var(--text-nano);letter-spacing:.08em;text-transform:uppercase;color:var(--text-tertiary)}
.menu__status{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.menu__live{display:inline-flex;align-items:center;gap:7px;color:var(--text-secondary)}
.menu__live i{width:6px;height:6px;border-radius:50%;background:var(--accent-green);color:var(--accent-green);box-shadow:0 0 0 3px rgba(128,184,104,.18);animation:var(--anim-pulse)}

/* Profile menu */
.profile{position:absolute;right:max(var(--gutter),calc((100vw - var(--container-max)) / 2));top:58px;z-index:46;width:min(288px,calc(100vw - 24px));border-radius:var(--radius-lg);border:1px solid var(--border-default);background:var(--surface-card);box-shadow:var(--shadow-lg);overflow:hidden;animation:jtRise 160ms var(--ease-out) both}
.profile__scrim{position:fixed;inset:0;z-index:44}
.profile__head{display:flex;align-items:center;gap:11px;padding:15px 16px;border-bottom:1px solid var(--border-default);background:var(--surface-page-alt)}
.avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--ink-700);color:#fff;font-weight:var(--weight-semibold);box-shadow:var(--highlight-top)}
.avatar--sm{width:28px;height:28px;font-size:var(--text-micro)}
.avatar--md{width:38px;height:38px;font-size:var(--text-body-sm)}
.profile__links{display:flex;flex-direction:column;padding:8px}
.profile__links a{display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:var(--radius-xs);font-size:var(--text-body-sm);color:var(--text-secondary);transition:var(--transition-control)}
.profile__links a:hover{background:var(--surface-sunken);color:var(--text-primary)}
.profile__foot{padding:10px 14px;border-top:1px solid var(--border-default);background:var(--surface-page-alt);display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:var(--text-nano);letter-spacing:.06em;text-transform:uppercase;color:var(--text-tertiary)}
.profile__signout{font-family:var(--font-sans);font-size:var(--text-caption);font-weight:var(--weight-semibold);letter-spacing:normal;text-transform:none;color:var(--text-secondary);background:none;border:none;padding:0;cursor:pointer}
.profile__signout:hover{color:var(--text-danger)}
.shell__account{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 9px 0 4px;border-radius:var(--radius-pill);border:1px solid var(--border-default);background:var(--surface-card);cursor:pointer;transition:var(--transition-control)}
.shell__account:hover{border-color:var(--border-emphasis)}
.shell__account b{font-size:var(--text-caption);font-weight:var(--weight-semibold);color:var(--text-primary);white-space:nowrap}

/* ── Overlays ────────────────────────────────────────────────────────────────── */
.overlay{position:fixed;inset:0;z-index:80;background:var(--surface-overlay);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:flex;justify-content:center;animation:jtFade 160ms var(--ease-standard) both}
.overlay--search{padding:11vh 20px 20px}
.overlay--modal{align-items:flex-start;padding:9vh 20px 20px;overflow-y:auto}

.searchbox{width:min(680px,100%);max-height:74vh;display:flex;flex-direction:column;border-radius:var(--radius-xl);border:1px solid var(--border-default);background:var(--surface-card);box-shadow:var(--shadow-lg);overflow:hidden;animation:jtRise 200ms var(--ease-out) both}
.searchbox__head{display:flex;align-items:center;gap:11px;padding:15px 17px;border-bottom:1px solid var(--border-default)}
.searchbox__head input{flex:1 1 auto;min-width:0;border:none;outline:none;background:transparent;font-family:var(--font-sans);font-size:var(--text-lead);letter-spacing:var(--tracking-tight);color:var(--text-primary)}
.searchbox__esc{font-family:var(--font-mono);font-size:var(--text-nano);letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:var(--radius-xs);border:1px solid var(--border-default);background:var(--surface-sunken);color:var(--text-tertiary);cursor:pointer}
.searchbox__results{flex:1 1 auto;overflow-y:auto;padding:8px}
.searchbox__group{padding:8px 10px 4px;font-family:var(--font-mono);font-size:var(--text-nano);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--text-tertiary)}
.searchbox__hit{display:flex;align-items:center;gap:12px;padding:10px 11px;border-radius:var(--radius-sm);transition:var(--transition-control);color:var(--text-primary)}
.searchbox__hit:hover,.searchbox__hit[data-active]{background:var(--surface-sunken);color:var(--text-primary)}
.searchbox__icon{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex:0 0 auto;border-radius:var(--radius-xs);background:var(--surface-sunken);color:var(--text-secondary)}
.searchbox__text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.searchbox__text b{font-size:var(--text-body-sm);font-weight:var(--weight-medium);color:var(--text-primary)}
.searchbox__text span{font-size:var(--text-caption);color:var(--text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.searchbox__empty{padding:34px 14px;text-align:center}
.searchbox__foot{padding:10px 16px;border-top:1px solid var(--border-default);background:var(--surface-page-alt);display:flex;justify-content:space-between;gap:12px;font-family:var(--font-mono);font-size:var(--text-nano);letter-spacing:.06em;text-transform:uppercase;color:var(--text-tertiary)}

.modal{width:min(560px,100%);border-radius:var(--radius-xl);border:1px solid var(--border-default);background:var(--surface-card);box-shadow:var(--shadow-lg);overflow:hidden;animation:jtRise 200ms var(--ease-out) both}
.modal--wide{width:min(920px,100%);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.modal__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 22px 16px;border-bottom:1px solid var(--border-default)}
.modal__title{display:flex;flex-direction:column;gap:5px}
.modal__title span{font-family:var(--font-mono);font-size:var(--text-nano);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--text-tertiary)}
.modal__title b{font-size:var(--text-h2);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);color:var(--text-primary)}
.modal__close{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:var(--radius-xs);border:1px solid var(--border-default);background:var(--surface-card);color:var(--text-secondary);cursor:pointer}
.modal__close:hover{background:var(--surface-sunken)}
.modal__body{padding:20px 22px;display:flex;flex-direction:column;gap:15px}
.modal__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:14px}
.modal__foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:4px}
.modal__ref{font-family:var(--font-mono);font-size:var(--text-nano);letter-spacing:.06em;text-transform:uppercase;color:var(--text-tertiary)}
.modal__sent{padding:30px 22px 26px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.modal__tick{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--wash-green);color:var(--accent-green)}

/* Form controls */
.field{display:flex;flex-direction:column;gap:6px}
.field__label{font-size:var(--text-micro);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-secondary)}
.field__control{height:38px;padding:0 12px;border-radius:var(--radius-sm);border:1px solid var(--border-default);background:var(--surface-card);color:var(--text-primary);font-family:var(--font-sans);font-size:var(--text-body-sm);transition:var(--transition-control)}
textarea.field__control{height:auto;padding:10px 12px;line-height:var(--leading-snug);resize:vertical}
.field__control:focus{outline:none;border-color:var(--border-focus);box-shadow:var(--shadow-focus)}
.checkbox{display:inline-flex;align-items:center;gap:8px;font-size:var(--text-caption);color:var(--text-secondary);cursor:pointer}

/* Sign-in aside */
.authside{position:relative;padding:26px;background:var(--surface-ink-deep);color:var(--text-inverse);overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:20px}
.authside__mesh{position:absolute;inset:-10%;background:var(--mesh-ink);opacity:.7;animation:var(--anim-drift)}
.authside__grid{position:absolute;inset:0;background:var(--grid-lines-inverse);background-size:var(--grid-size) var(--grid-size);-webkit-mask-image:radial-gradient(100% 70% at 50% 0%,#000 10%,transparent 78%);mask-image:radial-gradient(100% 70% at 50% 0%,#000 10%,transparent 78%)}
.authside__block{position:relative;display:flex;flex-direction:column;gap:12px}
.authside__points{position:relative;display:flex;flex-direction:column;gap:9px}
.authside__points span{display:flex;align-items:center;gap:9px;font-size:var(--text-caption);color:rgba(255,255,255,.78)}
.authside__points i{width:5px;height:5px;border-radius:50%;background:var(--accent-cyan);flex:0 0 auto}

/* ECHO drawer */
.echo-drawer{position:fixed;top:70px;right:12px;bottom:12px;z-index:82;width:min(420px,calc(100% - 24px));animation:jtSlide 240ms var(--ease-out) both}
.echo-panel{display:flex;flex-direction:column;height:100%;border-radius:var(--radius-xl);border:1px solid rgba(255,255,255,.14);background:var(--echo-surface);box-shadow:var(--glow-echo),var(--shadow-lg);overflow:hidden}
.echo-panel__head{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03)}
.echo-panel__head .echo-avatar{width:34px;height:34px;box-shadow:0 0 0 2px var(--echo-ring)}
.echo-panel__id{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}
.echo-panel__id b{font-size:var(--text-body-sm);font-weight:var(--weight-semibold);color:var(--text-inverse)}
.echo-panel__id span{font-family:var(--font-mono);font-size:var(--text-nano);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:rgba(255,255,255,.44)}
.echo-panel__log{flex:1 1 auto;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:14px}
.echo-msg{display:flex;flex-direction:column;gap:6px;max-width:88%}
.echo-msg--user{align-self:flex-end;align-items:flex-end}
.echo-msg__bubble{padding:10px 13px;border-radius:var(--radius-lg);font-size:var(--text-body-sm);line-height:var(--leading-snug)}
.echo-msg--user .echo-msg__bubble{background:var(--echo-user-bubble);color:#fff}
.echo-msg--echo .echo-msg__bubble{background:var(--echo-bubble-inverse);color:var(--text-inverse)}
.echo-msg__meta{font-family:var(--font-mono);font-size:var(--text-nano);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:rgba(255,255,255,.38)}
.echo-panel__think{display:flex;gap:5px;padding:4px 2px}
.echo-panel__think i{width:6px;height:6px;border-radius:50%;background:var(--echo-accent);animation:ddg-echo-think 1.2s var(--ease-inout) infinite}
.echo-panel__think i:nth-child(2){animation-delay:.16s}
.echo-panel__think i:nth-child(3){animation-delay:.32s}
.echo-panel__suggest{display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 12px}
.echo-panel__suggest button{font-family:var(--font-sans);font-size:var(--text-caption);padding:6px 11px;border-radius:var(--radius-pill);border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);color:rgba(255,255,255,.78);cursor:pointer;transition:var(--transition-control)}
.echo-panel__suggest button:hover{background:rgba(255,255,255,.10);color:#fff}
.echo-panel__composer{display:flex;align-items:center;gap:9px;padding:12px 14px;border-top:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03)}
.echo-panel__composer input{flex:1 1 auto;min-width:0;height:36px;padding:0 12px;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:var(--text-inverse);font-family:var(--font-sans);font-size:var(--text-body-sm)}
.echo-panel__composer input::placeholder{color:rgba(255,255,255,.38)}
.echo-panel__composer input:focus{outline:none;border-color:var(--echo-accent);box-shadow:0 0 0 3px var(--echo-accent-soft)}
.echo-panel__send{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex:0 0 auto;border-radius:var(--radius-sm);border:none;background:var(--echo-accent);color:#fff;cursor:pointer;transition:var(--transition-control)}
.echo-panel__send:hover{background:#6A4BD0}

/* ── Site footer rail ────────────────────────────────────────────────────────── */
.footrail{border-top:1px solid var(--border-default);background:var(--surface-page-alt)}
.footrail__inner{max-width:calc(var(--container-max) + 2 * var(--gutter));margin:0 auto;padding:14px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.footrail__brand{display:flex;align-items:center;gap:12px}
.footrail__brand img{height:26px;width:auto;display:block}
.footrail__brand span{font-family:var(--font-mono);font-size:var(--text-nano);letter-spacing:.08em;text-transform:uppercase;color:var(--text-tertiary)}
.footrail__meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.footrail__clock{display:flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:var(--text-nano);letter-spacing:.08em;text-transform:uppercase;color:var(--text-tertiary)}
.themeswitch{display:inline-flex;align-items:center;gap:2px;padding:2px;border-radius:var(--radius-pill);border:1px solid var(--border-default);background:var(--surface-card)}
.themeswitch button{font-family:var(--font-mono);font-size:var(--text-nano);letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:var(--radius-pill);border:none;cursor:pointer;background:transparent;color:var(--text-tertiary);transition:var(--transition-control)}
.themeswitch button[aria-pressed="true"]{background:var(--surface-sunken);color:var(--text-primary)}

/* ── Flow diagram + hero field ───────────────────────────────────────────────── */
.flow__chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(22px,3vw,32px)}
.flow__chip{position:relative;appearance:none;-webkit-appearance:none;cursor:pointer;padding:9px 14px 10px;border-radius:var(--radius-xs);overflow:hidden;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.035);color:rgba(255,255,255,.52);line-height:1;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;transition:color 220ms linear,background 220ms linear,border-color 220ms linear}
.flow__chipbar{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--accent-cyan);opacity:0}
.flow__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:10px 24px}
.flow__kicker{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.38);margin-bottom:7px}
.flow__title{font-size:clamp(17px,2vw,22px);line-height:1.25;font-weight:500;letter-spacing:-0.01em;color:var(--text-inverse)}
.flow__readout{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);white-space:nowrap}
.flow__drop{position:relative;height:38px;margin-top:12px}
.flow__dropdot{position:absolute;top:0;left:26%;width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 12px rgba(160,215,255,.9);opacity:0;transform:translate(-50%,0);will-change:transform,opacity}
.flow__rail{position:relative;height:2px;background:rgba(255,255,255,.13);border-radius:2px}
.flow__railglow{position:absolute;left:0;right:0;top:-9px;height:20px;filter:blur(10px);opacity:.07;border-radius:10px}
.flow__railcore{position:absolute;inset:0;opacity:.28;border-radius:2px}
.flow__comet{position:absolute;top:-6px;height:14px;left:26%;width:0;background:radial-gradient(ellipse at center,rgba(255,255,255,.95) 0%,rgba(170,220,255,.5) 36%,rgba(170,220,255,0) 72%);filter:blur(3px);opacity:0;will-change:left,width,opacity}
.flow__cap{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;margin-top:11px;color:rgba(255,255,255,.42)}
.flow__grid{margin-top:clamp(20px,2.6vw,30px);display:grid;grid-template-columns:repeat(auto-fit,minmax(184px,1fr));gap:1px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.09);border-radius:var(--radius-lg);overflow:hidden}
.flow__tile{position:relative;padding:16px 16px 18px;background:rgba(255,255,255,.028)}
.flow__edge{position:absolute;top:0;left:0;right:0;height:2px;opacity:0;transform:scaleX(.12);transform-origin:left center;will-change:opacity,transform}
.flow__tilehead{display:flex;align-items:center;gap:8px}
.flow__tiledot{width:7px;height:7px;border-radius:50%;opacity:.4;flex:0 0 auto}
.flow__tilename{font-size:14px;line-height:1.2;font-weight:600;letter-spacing:-0.005em;color:rgba(255,255,255,.74);transition:color 220ms linear}
.flow__tilestatus{margin-top:8px;font-family:var(--font-mono);font-size:11px;line-height:1.5;letter-spacing:.02em;color:var(--text-inverse-muted);min-height:33px}

/* Hero core-pulse */
.pulse{position:relative;height:100%;width:100%;overflow:hidden}
.pulse__edges{position:absolute;inset:0;pointer-events:none}
.pulse__guide{position:absolute;width:1px;background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.16));transform:translateX(-50%)}
.pulse__core{position:absolute;left:70%;top:58%;width:0;height:0}
.pulse__halo{position:absolute;left:-46px;top:-46px;width:92px;height:92px;border-radius:50%;background:radial-gradient(circle,rgba(120,88,224,.55) 0%,rgba(120,88,224,0) 70%);filter:blur(4px);opacity:.28}
.pulse__ring{position:absolute;left:-31px;top:-31px;width:62px;height:62px;border-radius:50%;border:1px solid rgba(120,88,224,.4)}
.pulse__ping{position:absolute;left:-31px;top:-31px;width:62px;height:62px;border-radius:50%;border:1px solid var(--echo-accent);opacity:0;transform:scale(.6);will-change:transform,opacity}
.pulse__node{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:var(--echo-accent);box-shadow:0 0 16px var(--echo-accent)}
.pulse__corelabel{position:absolute;left:50%;top:40px;transform:translateX(-50%);font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.66);white-space:nowrap}
.pulse__row{position:absolute;left:0;right:0;bottom:clamp(16px,2.2vw,28px);display:flex;justify-content:space-between;align-items:flex-end;gap:clamp(4px,.6vw,12px);padding:0 clamp(18px,3.5vw,52px)}
.pulse__mod{display:flex;flex-direction:column;align-items:center;gap:9px;min-width:0}
.pulse__moddot{width:8px;height:8px;border-radius:50%;opacity:.32}
.pulse__modlabel{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.36);white-space:nowrap;transition:color 200ms linear}
.pulse__stream{position:absolute;top:clamp(76px,8vw,112px);right:max(24px,calc((100vw - var(--container-max)) / 2));width:clamp(280px,24vw,336px)}
.pulse__streamkicker{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.38)}
.pulse__pip{position:relative;width:7px;height:7px;flex:0 0 auto}
.pulse__pip i{position:absolute;inset:0;border-radius:50%}
.pulse__pip i:first-child{border:1px solid var(--accent-cyan);animation:jt-ping 2.6s var(--ease-standard) infinite}
.pulse__pip i:last-child{background:var(--accent-cyan);box-shadow:0 0 8px var(--accent-cyan)}
.pulse__streamtitle{margin-top:7px;font-size:15px;line-height:1.3;font-weight:600;letter-spacing:-0.01em;color:var(--text-inverse)}
.pulse__ticker{display:flex;align-items:center;gap:8px;margin-top:9px;overflow:hidden}
.pulse__tickerdot{width:6px;height:6px;border-radius:50%;background:var(--echo-accent);flex:0 0 auto}
.pulse__tickermsg{font-family:var(--font-mono);font-size:10px;letter-spacing:.02em;color:rgba(255,255,255,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pulse__hist{position:relative;height:15px;margin-top:15px}
.pulse__packet{position:absolute;left:70%;top:0;display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:var(--radius-xs);border:1px solid rgba(255,255,255,.2);background:rgba(8,23,31,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:rgba(255,255,255,.92);white-space:nowrap;opacity:0;transform:translate(-50%,0);will-change:transform,opacity;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.pulse__packetdot{width:6px;height:6px;border-radius:50%;background:var(--accent-cyan);flex:0 0 auto}

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width:1180px){[data-hide-lg]{display:none!important}}
@media (max-width:1180px){.pulse__modlabel{display:none}}
@media (max-width:1100px){.pulse__stream{display:none}}
@media (max-width:860px){[data-hide-md]{display:none!important}}
@media (max-width:620px){[data-hide-sm]{display:none!important}}
[data-only-sm]{display:none}
@media (max-width:620px){[data-only-sm]{display:inline-flex!important}}
@media (max-width:900px){
  .hero__lead{display:none}
  .echo-head{text-align:left;flex-direction:row;justify-content:flex-start}
  .echo-head__body{align-items:flex-start}
}