/* ═══════════════════════════════════════
   AVA Experience — public page components
   Loaded after ava-design.css on public pages only.
═══════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');

:root {
  --serif: 'Instrument Serif', Georgia, serif;
  --wrap: 1200px;
  --ink-soft: color-mix(in srgb, var(--ink) 72%, var(--bg));
  --panel: color-mix(in srgb, var(--surface) 78%, transparent);
  --panel-line: color-mix(in srgb, var(--ink) 9%, transparent);
  --night: #070b16;
  --night-2: #0d1426;
}
[data-theme="dark"] {
  --panel: color-mix(in srgb, var(--surface) 70%, transparent);
  --panel-line: rgba(255,255,255,0.08);
}

body { background:var(--bg); }

/* Headline voice: editorial serif accent */
.pub-h1, .x-title, .x-display {
  font-weight:400; letter-spacing:-0.035em; text-wrap:balance;
}
.pub-h1 em, .x-title em, .x-display em, .register-left h1 em {
  font-family:var(--serif); font-style:italic; font-weight:400;
  letter-spacing:-0.01em; font-size:1.08em; line-height:.9;
}

/* ── Layout ── */
.x-wrap { max-width:var(--wrap); margin:0 auto; padding:0 32px; }
.x-section { position:relative; padding:120px 0; }
.x-section.tight { padding:88px 0; }
.x-section.alt { background:var(--surface); border-block:1px solid var(--line); }
.x-head { max-width:760px; margin:0 auto 56px; text-align:center; }
.x-head.left { margin-left:0; text-align:left; }
.x-kicker {
  display:inline-flex; align-items:center; gap:8px; margin-bottom:18px;
  font-family:'Geist Mono',monospace; font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--teal-2);
}
[data-theme="dark"] .x-kicker { color:var(--teal); }
.x-kicker::before { content:''; width:18px; height:1px; background:currentColor; }
.x-title { font-size:clamp(34px,4.4vw,60px); line-height:1.04; color:var(--ink); margin-bottom:18px; }
.x-lead { font-size:17px; line-height:1.7; color:var(--muted); }
.x-head .x-lead { max-width:600px; margin:0 auto; }
.x-head.left .x-lead { margin:0; }

/* ── Hero ── */
.x-hero {
  position:relative; isolation:isolate; overflow:hidden;
  padding:72px 0 96px;
}
.x-hero::before {
  content:''; position:absolute; inset:-25% -15% 0; z-index:-2;
  background:
    radial-gradient(34% 42% at 18% 28%, var(--aurora-1), transparent 70%),
    radial-gradient(30% 40% at 82% 22%, var(--aurora-2), transparent 70%),
    radial-gradient(30% 34% at 60% 85%, var(--aurora-3), transparent 70%);
  filter:blur(24px);
  -webkit-mask-image:linear-gradient(to bottom,#000 60%,transparent);
  mask-image:linear-gradient(to bottom,#000 60%,transparent);
  animation:aurora 20s ease-in-out infinite alternate;
}
.x-hero::after {
  content:''; position:absolute; inset:0; z-index:-1;
  background-image:radial-gradient(color-mix(in srgb, var(--ink) 16%, transparent) 1px, transparent 1.2px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 65% 55% at 50% 35%, #000 10%, transparent 72%);
  mask-image:radial-gradient(ellipse 65% 55% at 50% 35%, #000 10%, transparent 72%);
  opacity:.55;
}
.x-hero-grid { display:grid; grid-template-columns:1.02fr .98fr; gap:56px; align-items:center; }
.x-hero.center { text-align:center; padding:96px 0 104px; }
.x-hero.center .x-lead { max-width:640px; margin:0 auto; }
.x-display {
  font-size:clamp(46px,6.4vw,92px); line-height:.98; color:var(--ink);
  margin:0 0 24px;
}
.x-hero .x-lead { font-size:18px; max-width:540px; margin-bottom:34px; }
.x-actions { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.x-hero.center .x-actions { justify-content:center; }
.x-actions .btn { padding:14px 26px; font-size:14px; }
.x-meta { display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:30px; font-size:13px; color:var(--muted); }
.x-hero.center .x-meta { justify-content:center; }
.x-meta span { display:inline-flex; align-items:center; gap:7px; }
.x-meta svg { width:14px; height:14px; color:var(--green); }

/* Mouse-follow glow inside heroes */
.x-glow {
  position:absolute; width:520px; height:520px; border-radius:50%; z-index:-1;
  left:var(--gx,50%); top:var(--gy,40%); transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(6,182,212,0.16), transparent);
  pointer-events:none; transition:left .6s var(--ease-out), top .6s var(--ease-out);
}

/* ── Live session console ── */
.console-wrap { position:relative; perspective:1400px; }
.console-wrap::before {
  content:''; position:absolute; inset:8% -4% -6%; z-index:-1; border-radius:40px;
  background:conic-gradient(from 180deg at 50% 50%, var(--teal), var(--blue), var(--violet), var(--teal));
  filter:blur(60px); opacity:.28;
  animation:spin 14s linear infinite;
}
.console {
  position:relative; border-radius:24px; overflow:hidden;
  background:var(--panel); border:1px solid var(--panel-line);
  backdrop-filter:blur(22px) saturate(1.3); -webkit-backdrop-filter:blur(22px) saturate(1.3);
  box-shadow:0 40px 90px -30px rgba(15,23,42,0.45), inset 0 1px 0 rgba(255,255,255,0.4);
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .5s var(--ease-out);
  transform-style:preserve-3d;
}
[data-theme="dark"] .console { box-shadow:0 40px 90px -30px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.06); }
.console-top {
  display:flex; align-items:center; gap:12px; padding:16px 18px;
  border-bottom:1px solid var(--panel-line);
}
.console-orb {
  width:38px; height:38px; border-radius:50%; flex-shrink:0; position:relative;
  background:conic-gradient(from 0deg, var(--teal), var(--blue), var(--violet), var(--teal));
  animation:spin 6s linear infinite;
}
.console-orb::after { content:''; position:absolute; inset:3px; border-radius:50%; background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.45), transparent 50%), #0b1220; }
.console-id { min-width:0; }
.console-name { font-size:14px; font-weight:600; color:var(--ink); }
.console-status { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); }
.console-status i { width:7px; height:7px; border-radius:50%; background:var(--green); animation:ping 1.8s var(--ease-out) infinite; box-shadow:0 0 0 0 rgba(22,163,74,.5); }
.console-tag {
  margin-left:auto; font-family:'Geist Mono',monospace; font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); padding:5px 9px; border-radius:100px;
  border:1px solid var(--panel-line); white-space:nowrap;
}
.console-phases { display:flex; gap:6px; padding:14px 18px 0; }
.console-phase {
  flex:1; min-width:0; font-size:10.5px; color:var(--muted-2); text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.console-phase::before {
  content:''; display:block; height:3px; border-radius:3px; margin-bottom:6px;
  background:var(--panel-line); transition:background .5s;
}
.console-phase.done::before { background:color-mix(in srgb, var(--teal) 55%, transparent); }
.console-phase.on { color:var(--ink); font-weight:600; }
.console-phase.on::before { background:var(--grad); }
.console-feed {
  height:280px; padding:18px; display:flex; flex-direction:column; gap:10px;
  justify-content:flex-end; overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 10%);
  mask-image:linear-gradient(to bottom,transparent,#000 10%);
}
.msg {
  max-width:86%; padding:10px 14px; border-radius:16px; font-size:13.5px; line-height:1.55;
  animation:msgIn .5s var(--ease-out) both;
}
@keyframes msgIn { from { opacity:0; transform:translateY(10px) scale(.98); } }
.msg.you { align-self:flex-end; background:var(--ink); color:var(--bg); border-bottom-right-radius:5px; }
.msg.ava {
  align-self:flex-start; color:var(--ink); border-bottom-left-radius:5px;
  background:color-mix(in srgb, var(--teal) 10%, var(--surface));
  border:1px solid color-mix(in srgb, var(--teal) 22%, transparent);
}
.msg .who { display:block; font-family:'Geist Mono',monospace; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; opacity:.55; margin-bottom:3px; }
.msg .caret { display:inline-block; width:2px; height:1em; margin-left:2px; vertical-align:-2px; background:currentColor; animation:blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }
.console-wave {
  display:flex; align-items:center; justify-content:center; gap:3px; height:44px;
  padding:0 18px; border-top:1px solid var(--panel-line);
}
.console-wave span {
  width:3px; height:100%; border-radius:3px; background:var(--grad);
  transform:scaleY(.12); transition:transform .12s linear;
}
.console-capture { padding:14px 18px 18px; border-top:1px solid var(--panel-line); min-height:92px; }
.console-capture-label {
  font-family:'Geist Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin-bottom:9px; display:flex; justify-content:space-between;
}
.console-chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip {
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:9px;
  font-size:12px; color:var(--ink-3); background:var(--surface); border:1px solid var(--panel-line);
  animation:msgIn .5s var(--ease-out) both;
}
.chip b { font-weight:600; color:var(--teal-2); }
[data-theme="dark"] .chip b { color:var(--teal); }
.console-note { margin-top:12px; font-size:11px; color:var(--muted-2); text-align:center; }

/* ── Stats ── */
.x-stats {
  display:grid; grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line); border-radius:24px; overflow:hidden;
  background:var(--surface);
}
.x-stat { padding:30px 28px; position:relative; }
.x-stat + .x-stat { border-left:1px solid var(--line); }
.x-stat-num {
  font-size:clamp(40px,4.4vw,60px); font-weight:300; letter-spacing:-0.04em; line-height:1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent; margin-bottom:10px;
  font-variant-numeric:tabular-nums;
}
.x-stat-label { font-size:13px; color:var(--muted); line-height:1.5; }

/* ── Mode cards ── */
.x-modes { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.x-mode {
  position:relative; overflow:hidden; border-radius:28px; padding:40px;
  background:var(--surface); border:1px solid var(--line);
  display:flex; flex-direction:column;
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .3s;
}
.x-mode:hover { transform:translateY(-6px); box-shadow:var(--glow); border-color:color-mix(in srgb, var(--blue) 30%, var(--line)); }
.x-mode-art { position:relative; height:150px; margin-bottom:32px; pointer-events:none; }
.x-mode h3 { font-size:28px; font-weight:400; letter-spacing:-0.02em; color:var(--ink); margin-bottom:10px; }
.x-mode p { font-size:15px; color:var(--muted); line-height:1.7; max-width:420px; }
.x-mode .x-link { margin-top:18px; }
.x-link {
  display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--blue);
}
[data-theme="dark"] .x-link { color:#60a5fa; }
.x-link svg { transition:transform .25s var(--ease-out); }
.x-link:hover svg { transform:translateX(4px); }

/* steps art (guided) */
.art-steps { display:flex; gap:10px; align-items:flex-end; height:100%; }
.art-steps span {
  flex:1; border-radius:12px 12px 4px 4px; background:var(--bg-2);
  border:1px solid var(--line); position:relative; overflow:hidden;
}
.art-steps span::after {
  content:''; position:absolute; inset:auto 0 0; height:0; background:var(--grad); opacity:.85;
  transition:height 1s var(--ease-out);
}
.x-mode:hover .art-steps span::after, .art-steps.lit span::after { height:100%; }
.art-steps span:nth-child(1) { height:30%; } .art-steps span:nth-child(1)::after { transition-delay:0s; }
.art-steps span:nth-child(2) { height:46%; } .art-steps span:nth-child(2)::after { transition-delay:.12s; }
.art-steps span:nth-child(3) { height:62%; } .art-steps span:nth-child(3)::after { transition-delay:.24s; }
.art-steps span:nth-child(4) { height:78%; } .art-steps span:nth-child(4)::after { transition-delay:.36s; }
.art-steps span:nth-child(5) { height:96%; } .art-steps span:nth-child(5)::after { transition-delay:.48s; }
/* bubbles art (coaching) */
.art-bubbles { position:relative; height:100%; }
.art-bubbles span {
  position:absolute; padding:9px 14px; border-radius:14px; font-size:12px; white-space:nowrap;
  background:var(--bg-2); border:1px solid var(--line); color:var(--ink-3);
  animation:float 6s ease-in-out infinite;
}
.art-bubbles span:nth-child(1) { top:4%; left:0; }
.art-bubbles span:nth-child(2) { top:38%; right:0; animation-delay:-2s; background:color-mix(in srgb, var(--teal) 12%, var(--surface)); border-color:color-mix(in srgb, var(--teal) 30%, transparent); }
.art-bubbles span:nth-child(3) { top:72%; left:12%; animation-delay:-4s; }
@keyframes float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }

/* ── Methodology explorer ── */
.mx {
  display:grid; grid-template-columns:300px 1fr; gap:0;
  border-radius:28px; overflow:hidden; border:1px solid var(--line);
  background:var(--surface); box-shadow:var(--shadow-md);
}
.mx-list { padding:14px; border-right:1px solid var(--line); background:var(--bg-2); display:flex; flex-direction:column; gap:4px; }
[data-theme="dark"] .mx-list { background:color-mix(in srgb, var(--bg) 60%, var(--surface)); }
.mx-tab {
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  padding:12px 14px; border-radius:14px; border:1px solid transparent; background:transparent;
  font:500 14px 'Geist',sans-serif; color:var(--muted); cursor:pointer;
  transition:background .2s, color .2s, border-color .2s, transform .25s var(--ease-out);
}
.mx-tab:hover { color:var(--ink); background:var(--surface); transform:translateX(3px); }
.mx-tab[aria-selected="true"] { color:var(--ink); background:var(--surface); border-color:var(--line); box-shadow:var(--shadow-sm); }
.mx-tab .n {
  width:26px; height:26px; border-radius:8px; display:grid; place-items:center; flex-shrink:0;
  font:500 11px 'Geist Mono',monospace; background:var(--surface); border:1px solid var(--line); color:var(--muted);
  transition:background .25s, color .25s;
}
.mx-tab[aria-selected="true"] .n { background:var(--grad); color:#fff; border-color:transparent; }
.mx-panel { padding:48px 52px; position:relative; overflow:hidden; display:flex; flex-direction:column; }
.mx-panel::before {
  content:''; position:absolute; right:-120px; top:-120px; width:360px; height:360px; border-radius:50%;
  background:radial-gradient(closest-side, var(--aurora-1), transparent); pointer-events:none;
}
.mx-kick { font-family:'Geist Mono',monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.mx-name { font-size:clamp(30px,3.4vw,46px); font-weight:400; letter-spacing:-0.03em; color:var(--ink); margin-bottom:14px; line-height:1.05; }
.mx-guide { font-size:16px; line-height:1.75; color:var(--muted); max-width:560px; margin-bottom:36px; }
.mx-phases { display:flex; gap:0; margin-bottom:36px; counter-reset:ph; }
.mx-phase { flex:1; position:relative; min-width:0; padding-right:8px; }
.mx-phase::before {
  counter-increment:ph; content:counter(ph);
  position:relative; z-index:1;
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  font:500 12px 'Geist Mono',monospace; color:var(--muted);
  background:var(--surface); border:1.5px solid var(--line);
  transition:all .4s var(--ease-out);
}
.mx-phase::after {
  content:''; position:absolute; top:17px; left:34px; right:0; height:2px;
  background:linear-gradient(90deg, var(--teal) var(--fill,0%), var(--line) var(--fill,0%));
  transition:--fill .5s;
}
.mx-phase:last-child::after { display:none; }
.mx-phase.done::after { --fill:100%; }
.mx-phase.done::before { background:color-mix(in srgb, var(--teal) 14%, var(--surface)); color:var(--teal-2); border-color:color-mix(in srgb, var(--teal) 50%, transparent); }
.mx-phase.on::before { background:var(--grad); color:#fff; border-color:transparent; transform:scale(1.12); box-shadow:0 8px 20px -6px rgba(37,99,235,.6); }
.mx-phase span { display:block; margin-top:10px; font-size:12.5px; color:var(--muted); line-height:1.35; padding-right:6px; }
.mx-phase.on span { color:var(--ink); font-weight:600; }
.mx-anim { animation:mxIn .55s var(--ease-out) both; }
@keyframes mxIn { from { opacity:0; transform:translateY(8px); } }
.mx-foot { margin-top:auto; display:flex; gap:14px; align-items:center; flex-wrap:wrap; }

/* ── Bento ── */
.bento { display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.bento-card {
  --mx:-999px; --my:-999px;
  position:relative; overflow:hidden; border-radius:24px; padding:28px;
  background:radial-gradient(460px circle at var(--mx) var(--my), rgba(6,182,212,0.10), transparent 45%), var(--surface);
  border:1px solid var(--line); display:flex; flex-direction:column;
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .3s, translate .8s var(--ease-out), opacity .8s var(--ease-out);
}
.bento-card:hover { transform:translateY(-5px); box-shadow:var(--glow); border-color:color-mix(in srgb, var(--blue) 28%, var(--line)); }
.bento-card.s2 { grid-column:span 2; } .bento-card.s3 { grid-column:span 3; } .bento-card.s4 { grid-column:span 4; }
.bento-card.dark {
  background:radial-gradient(460px circle at var(--mx) var(--my), rgba(6,182,212,0.2), transparent 45%), linear-gradient(150deg,var(--night),#13224a);
  border-color:rgba(255,255,255,0.07); color:#fff;
}
.bento-art { height:170px; margin:-4px -4px 22px; border-radius:16px; position:relative; overflow:hidden;
  background:var(--bg-2); border:1px solid var(--line); display:grid; place-items:center; }
[data-theme="dark"] .bento-art { background:color-mix(in srgb, var(--bg) 70%, var(--surface)); }
.bento-card.dark .bento-art { background:rgba(255,255,255,0.03); border-color:rgba(255,255,255,0.07); }
.bento-card h3 { font-size:19px; font-weight:600; letter-spacing:-0.01em; color:var(--ink); margin-bottom:8px; display:flex; align-items:center; gap:9px; }
.bento-card.dark h3 { color:#fff; }
.bento-card p { font-size:14px; color:var(--muted); line-height:1.7; }
.bento-card.dark p { color:rgba(255,255,255,0.6); }
.bento-card h3 svg { width:18px; height:18px; color:var(--teal); }

/* art: big wave */
.art-wave { display:flex; align-items:center; gap:4px; height:90px; }
.art-wave span { width:5px; border-radius:5px; background:linear-gradient(var(--teal),#60a5fa); height:100%; animation:bar 1.3s ease-in-out infinite; transform:scaleY(.2); }
/* art: toggles */
.art-toggles { display:flex; flex-direction:column; gap:9px; width:82%; }
.art-toggle { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 12px; border-radius:11px; background:var(--surface); border:1px solid var(--line); font-size:12px; color:var(--ink-3); font-weight:500; }
.art-toggle i { width:30px; height:17px; border-radius:20px; background:var(--line); position:relative; flex-shrink:0; transition:background .4s; }
.art-toggle i::after { content:''; position:absolute; top:2px; left:2px; width:13px; height:13px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .4s var(--ease-out); }
.art-toggle.on i { background:var(--grad); }
.art-toggle.on i::after { transform:translateX(13px); }
/* art: summary doc */
.art-doc { width:80%; display:flex; flex-direction:column; gap:10px; }
.art-doc div { font-family:'Geist Mono',monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--teal-2); }
[data-theme="dark"] .art-doc div { color:var(--teal); }
.art-doc span { display:block; height:7px; border-radius:6px; background:var(--line); transform-origin:left; animation:lineGrow 3.6s var(--ease-out) infinite; }
.art-doc span:nth-of-type(2n) { width:78%; } .art-doc span:nth-of-type(3n) { width:58%; }
@keyframes lineGrow { 0% { transform:scaleX(0); } 30%,85% { transform:scaleX(1); } 100% { transform:scaleX(1); opacity:.4; } }
/* art: bars */
.art-bars { display:flex; align-items:flex-end; gap:10px; height:110px; width:82%; border-bottom:1px solid var(--line); padding-bottom:2px; }
.art-bars span { flex:1; border-radius:7px 7px 2px 2px; background:var(--grad); opacity:.85; transform-origin:bottom; transform:scaleY(.15); transition:transform 1.1s var(--ease-out); }
.bento-card.visible .art-bars span, .bento-card:hover .art-bars span { transform:scaleY(1); }
.art-bars span:nth-child(1) { height:35%; transition-delay:.05s; } .art-bars span:nth-child(2) { height:55%; transition-delay:.12s; }
.art-bars span:nth-child(3) { height:45%; transition-delay:.19s; } .art-bars span:nth-child(4) { height:72%; transition-delay:.26s; }
.art-bars span:nth-child(5) { height:64%; transition-delay:.33s; } .art-bars span:nth-child(6) { height:90%; transition-delay:.4s; }
.art-bars span:nth-child(7) { height:100%; transition-delay:.47s; }
/* art: sticky notes */
.art-board { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; width:84%; }
.art-board span {
  padding:10px 12px; border-radius:6px; font-size:11.5px; font-weight:600; color:#1f2937;
  box-shadow:0 6px 14px -6px rgba(0,0,0,.3); transition:transform .5s var(--ease-out);
}
.art-board span:nth-child(1) { background:#bbf7d0; transform:rotate(-2deg); }
.art-board span:nth-child(2) { background:#fecaca; transform:rotate(1.5deg); }
.art-board span:nth-child(3) { background:#bfdbfe; transform:rotate(1deg); }
.art-board span:nth-child(4) { background:#fde68a; transform:rotate(-1.5deg); }
.bento-card:hover .art-board span { transform:rotate(0) translateY(-3px); }
/* art: phase checklist */
.art-checks { display:flex; flex-direction:column; gap:8px; width:76%; }
.art-checks span { display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--ink-3); }
.art-checks span::before {
  content:''; width:18px; height:18px; border-radius:50%; flex-shrink:0;
  border:1.5px solid var(--line); background:var(--surface);
}
.art-checks span.done::before { background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5'/%3E%3C/svg%3E") center/12px no-repeat; border-color:var(--teal); }
.art-checks span.on { font-weight:600; color:var(--ink); }
.art-checks span.on::before { border-color:var(--blue); box-shadow:0 0 0 4px rgba(37,99,235,.15); }
/* art: cue chips */
.art-cues { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; width:88%; }
.art-cues span { padding:8px 12px; border-radius:100px; font-size:12px; color:var(--ink-3); background:var(--surface); border:1px dashed color-mix(in srgb, var(--ink) 20%, transparent); transition:all .3s; }
.bento-card:hover .art-cues span:nth-child(2) { border-style:solid; border-color:var(--teal); color:var(--teal-2); }

/* ── Meet Ava (video) ── */
.meet {
  display:grid; grid-template-columns:auto 1fr; gap:48px; align-items:center;
  padding:44px; border-radius:32px; position:relative; overflow:hidden;
  background:linear-gradient(140deg,var(--night),#122149 60%,#0c2a40);
  color:#fff; border:1px solid rgba(255,255,255,0.06);
}
.meet::before { content:''; position:absolute; right:-160px; bottom:-200px; width:520px; height:520px; border-radius:50%; background:radial-gradient(closest-side, rgba(6,182,212,.22), transparent); }
.meet-ring { position:relative; width:220px; height:220px; display:grid; place-items:center; }
.meet-ring::before { content:''; position:absolute; inset:0; border-radius:50%; background:conic-gradient(var(--teal),var(--blue),var(--violet),var(--teal)); animation:spin 8s linear infinite; }
.meet-ring::after { content:''; position:absolute; inset:-18px; border-radius:50%; border:1px solid rgba(6,182,212,.35); animation:ripple 3.6s var(--ease-out) infinite; }
.meet-ring video { position:relative; z-index:1; width:206px; height:206px; border-radius:50%; object-fit:cover; border:4px solid var(--night); }
.meet .x-kicker { color:var(--teal); }
.meet h2 { font-size:clamp(28px,3vw,42px); font-weight:400; letter-spacing:-0.03em; line-height:1.1; margin-bottom:14px; }
.meet p { color:rgba(255,255,255,0.62); font-size:16px; line-height:1.75; max-width:620px; margin-bottom:26px; }
.meet .btn-outline { color:#fff; border-color:rgba(255,255,255,0.2); background:rgba(255,255,255,0.04); }
.meet .btn-outline:hover { border-color:#fff; color:#fff; }
.meet > * { position:relative; }

/* ── Timeline ── */
.x-split { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.timeline { position:relative; display:flex; flex-direction:column; gap:34px; padding-left:66px; }
.timeline::before, .timeline::after { content:''; position:absolute; left:23px; top:24px; bottom:24px; width:2px; border-radius:2px; }
.timeline::before { background:var(--line); }
.timeline::after { background:var(--grad); transform-origin:top; transform:scaleY(var(--tl,0)); transition:transform .2s linear; }
.tl-step { position:relative; }
.tl-dot {
  position:absolute; left:-66px; top:0; width:48px; height:48px; border-radius:16px; z-index:1;
  display:grid; place-items:center; color:#fff;
  box-shadow:0 10px 24px -8px rgba(37,99,235,.55);
}
.tl-dot svg { width:20px; height:20px; }
.tl-step h4 { font-size:19px; font-weight:600; color:var(--ink); margin:2px 0 6px; letter-spacing:-0.01em; }
.tl-step p { font-size:15px; color:var(--muted); line-height:1.65; }
.photo-frame { position:relative; border-radius:28px; }
.photo-frame img { border-radius:28px; width:100%; aspect-ratio:4/4.2; object-fit:cover; box-shadow:0 40px 80px -30px rgba(15,23,42,.45); }
.photo-badge {
  position:absolute; left:-22px; bottom:34px; display:flex; align-items:center; gap:12px;
  padding:14px 18px; border-radius:18px; background:var(--panel); border:1px solid var(--panel-line);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:var(--shadow-lg);
  animation:float 6s ease-in-out infinite;
}
.photo-badge .console-orb { width:32px; height:32px; }
.photo-badge b { display:block; font-size:13px; color:var(--ink); }
.photo-badge small { font-size:12px; color:var(--muted); }

/* ── Quotes ── */
.x-quotes { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.x-quote {
  position:relative; padding:34px 30px 30px; border-radius:24px; background:var(--surface);
  border:1px solid var(--line); transition:transform .45s var(--ease-out), box-shadow .45s, translate .8s var(--ease-out), opacity .8s var(--ease-out);
}
.x-quote:hover { transform:translateY(-4px) rotate(-.4deg); box-shadow:var(--shadow-lg); }
.x-quote::before {
  content:'\201C'; position:absolute; top:-6px; left:22px; font-family:var(--serif); font-size:96px; line-height:1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.x-quote p { font-family:var(--serif); font-size:24px; line-height:1.3; color:var(--ink); letter-spacing:-0.01em; padding-top:22px; }
.x-quote .x-quote-tag { display:inline-block; margin-top:18px; font-size:12px; color:var(--muted); }
.x-resolve { text-align:center; max-width:720px; margin:48px auto 0; font-size:19px; line-height:1.65; color:var(--muted); }
.x-resolve strong { color:var(--ink); font-weight:600; }

/* ── Personas ── */
.who-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.who-card {
  --mx:-999px; --my:-999px;
  position:relative; padding:28px 26px; border-radius:24px; overflow:hidden;
  background:radial-gradient(360px circle at var(--mx) var(--my), rgba(6,182,212,0.1), transparent 45%), var(--surface);
  border:1px solid var(--line);
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .3s, translate .8s var(--ease-out), opacity .8s var(--ease-out);
}
.who-card:hover { transform:translateY(-6px); box-shadow:var(--glow); border-color:color-mix(in srgb, var(--blue) 26%, var(--line)); }
.who-icon { width:48px; height:48px; border-radius:15px; display:grid; place-items:center; color:#fff; margin-bottom:22px; transition:transform .45s var(--ease-out); }
.who-card:hover .who-icon { transform:rotate(-8deg) scale(1.08); }
.who-icon svg { width:22px; height:22px; }
.who-card h3 { font-size:18px; font-weight:600; color:var(--ink); margin-bottom:8px; }
.who-card p { font-size:14px; color:var(--muted); line-height:1.65; }
.g-teal { background:linear-gradient(135deg,var(--teal),var(--blue)); }
.g-violet { background:linear-gradient(135deg,#7c3aed,var(--blue)); }
.g-amber { background:linear-gradient(135deg,#f59e0b,#ea580c); }
.g-green { background:linear-gradient(135deg,#10b981,#15803d); }

/* Persona switcher (use cases) */
.persona { display:grid; grid-template-columns:320px 1fr; gap:20px; }
.persona-tabs { display:flex; flex-direction:column; gap:10px; }
.persona-tab {
  display:flex; align-items:center; gap:14px; width:100%; text-align:left; cursor:pointer;
  padding:16px; border-radius:20px; border:1px solid var(--line); background:var(--surface);
  font:600 15px 'Geist',sans-serif; color:var(--ink-3); position:relative; overflow:hidden;
  transition:transform .35s var(--ease-out), box-shadow .35s, border-color .25s, color .2s;
}
.persona-tab .who-icon { width:42px; height:42px; border-radius:13px; margin:0; }
.persona-tab .who-icon svg { width:19px; height:19px; }
.persona-tab small { display:block; font-weight:400; font-size:12px; color:var(--muted); margin-top:2px; }
.persona-tab:hover { transform:translateX(4px); }
.persona-tab[aria-selected="true"] { color:var(--ink); border-color:color-mix(in srgb, var(--blue) 35%, var(--line)); box-shadow:var(--glow); }
.persona-tab .bar { position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--grad); }
.persona-tab[aria-selected="true"] .bar { animation:barFill var(--cycle,7s) linear forwards; }
.persona.paused .persona-tab .bar { animation-play-state:paused; }
@keyframes barFill { to { width:100%; } }
.persona-panel {
  position:relative; overflow:hidden; border-radius:28px; padding:48px;
  background:linear-gradient(150deg,var(--night),#13224a 65%,#0d2c42); color:#fff;
  min-height:420px; display:flex; flex-direction:column; justify-content:center;
}
.persona-panel::before { content:''; position:absolute; right:-140px; top:-140px; width:440px; height:440px; border-radius:50%; background:radial-gradient(closest-side, rgba(6,182,212,.25), transparent); }
.persona-panel[hidden] { display:none; }
.persona-panel > * { position:relative; }
.persona-panel .who-icon { width:60px; height:60px; border-radius:18px; }
.persona-panel .who-icon svg { width:26px; height:26px; }
.persona-panel h3 { font-size:clamp(30px,3.4vw,46px); font-weight:400; letter-spacing:-0.03em; margin-bottom:14px; }
.persona-panel p { font-size:17px; color:rgba(255,255,255,.66); line-height:1.7; max-width:560px; margin-bottom:22px; }
.persona-panel .uc-tag { background:rgba(255,255,255,.08); color:rgba(255,255,255,.85); border:1px solid rgba(255,255,255,.1); padding:6px 12px; font-size:12px; }
.persona-try {
  margin-top:26px; padding:16px 18px; border-radius:16px; max-width:560px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  font-size:14.5px; color:rgba(255,255,255,.85); line-height:1.6;
}
.persona-try b { display:block; font-family:'Geist Mono',monospace; font-weight:500; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--teal); margin-bottom:6px; }
.persona-panel .persona-cta { color:#7dd3fc; font-size:14px; margin-top:24px; }

/* ── Mission / principles (about) ── */
.mission-points { display:flex; flex-direction:column; gap:14px; }
.mission-point {
  display:grid; grid-template-columns:56px 1fr; gap:18px; align-items:start;
  padding:24px; border-radius:22px; background:var(--surface); border:1px solid var(--line);
  transition:transform .45s var(--ease-out), box-shadow .45s, border-color .3s, translate .8s var(--ease-out), opacity .8s var(--ease-out);
}
.mission-point:hover { transform:translateX(6px); box-shadow:var(--shadow-md); border-color:color-mix(in srgb, var(--teal) 35%, var(--line)); }
.mission-point .num { font-family:var(--serif); font-style:italic; font-size:40px; line-height:1; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.mission-point h4 { font-size:16px; font-weight:600; color:var(--ink); margin-bottom:5px; }
.mission-point p { font-size:14px; color:var(--muted); line-height:1.65; }
.mission-copy p { font-size:17px; color:var(--muted); line-height:1.8; margin-bottom:16px; }
.principles { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.principle {
  position:relative; overflow:hidden; padding:36px 32px; border-radius:26px;
  background:var(--surface); border:1px solid var(--line); min-height:280px;
  display:flex; flex-direction:column; justify-content:flex-end;
  transition:transform .45s var(--ease-out), box-shadow .45s, translate .8s var(--ease-out), opacity .8s var(--ease-out);
}
.principle:hover { transform:translateY(-6px); box-shadow:var(--glow); }
.principle .big {
  position:absolute; top:6px; right:22px; font-family:var(--serif); font-style:italic; font-size:150px; line-height:1;
  color:color-mix(in srgb, var(--ink) 6%, transparent); transition:color .4s, transform .6s var(--ease-out);
}
.principle:hover .big { color:color-mix(in srgb, var(--teal) 22%, transparent); transform:translateY(-6px); }
.principle .who-icon { margin-bottom:auto; }
.principle h3 { font-size:22px; font-weight:500; color:var(--ink); margin:28px 0 10px; letter-spacing:-0.01em; }
.principle p { font-size:15px; color:var(--muted); line-height:1.7; }

/* Scroll-lit statement */
.lit-text {
  font-size:clamp(30px,4.2vw,58px); line-height:1.18; letter-spacing:-0.03em; font-weight:400;
  max-width:1040px; margin:0 auto; text-align:center; text-wrap:balance;
}
.lit-text .w { color:color-mix(in srgb, var(--ink) 16%, transparent); transition:color .35s; }
.lit-text .w.on { color:var(--ink); }
.lit-text em { font-family:var(--serif); }
.lit-text em .w.on { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ── CTA band ── */
.x-cta { padding:40px 0 120px; }
.x-cta-box {
  position:relative; overflow:hidden; isolation:isolate; border-radius:36px;
  padding:88px 48px; text-align:center; color:#fff;
  background:linear-gradient(140deg,var(--night),#13224a 55%,#0c2d45);
}
.x-cta-box::before {
  content:''; position:absolute; inset:-40%; z-index:-1;
  background:
    radial-gradient(30% 40% at 25% 30%, rgba(6,182,212,.35), transparent 70%),
    radial-gradient(30% 40% at 75% 70%, rgba(124,58,237,.3), transparent 70%);
  animation:aurora 16s ease-in-out infinite alternate;
}
.x-cta-box::after {
  content:''; position:absolute; inset:0; z-index:-1;
  background-image:radial-gradient(rgba(255,255,255,.12) 1px, transparent 1.2px); background-size:24px 24px;
  -webkit-mask-image:radial-gradient(ellipse at center, #000, transparent 70%); mask-image:radial-gradient(ellipse at center, #000, transparent 70%);
}
.x-cta-box h2 { font-size:clamp(36px,5vw,68px); font-weight:400; letter-spacing:-0.04em; line-height:1.02; margin-bottom:18px; }
.x-cta-box h2 em { font-family:var(--serif); font-style:italic; background:linear-gradient(90deg,#67e8f9,#93c5fd,#c4b5fd); -webkit-background-clip:text; background-clip:text; color:transparent; }
.x-cta-box p { font-size:17px; color:rgba(255,255,255,.65); max-width:520px; margin:0 auto 34px; line-height:1.7; }
.x-cta-box .btn-outline { color:#fff; border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.05); }
.x-cta-box .btn-outline:hover { color:#fff; border-color:#fff; }
.x-cta-box .hero-orb { margin-bottom:28px; }

/* ── Includes row (pricing) ── */
.x-includes { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:1100px; margin:28px auto 0; }
.x-include { display:flex; align-items:center; gap:14px; padding:18px 20px; border-radius:18px; background:var(--surface); border:1px solid var(--line); font-size:14px; color:var(--ink-3); font-weight:500; }
.x-include .who-icon { width:38px; height:38px; border-radius:12px; margin:0; flex-shrink:0; }
.x-include .who-icon svg { width:17px; height:17px; }

/* Pricing cards: bolder */
:where(body:not([data-mode])) .pricing-grid { align-items:stretch; }
:where(body:not([data-mode])) .pricing-card { border-radius:28px; padding:40px 32px; }
:where(body:not([data-mode])) .pricing-card h3 { font-size:15px; font-weight:600; color:var(--muted); letter-spacing:.01em; }
:where(body:not([data-mode])) .pricing-price { font-size:64px; font-weight:300; letter-spacing:-0.05em; line-height:1; margin:6px 0 8px; }
:where(body:not([data-mode])) .pricing-card.pop {
  background:linear-gradient(160deg,var(--night),#13224a) padding-box, var(--grad-wide) border-box;
  background-size:100% 100%, 220% 100%;
}
:where(body:not([data-mode])) .pricing-card.pop h3, :where(body:not([data-mode])) .pricing-card.pop .pricing-dur { color:rgba(255,255,255,.6); }
:where(body:not([data-mode])) .pricing-card.pop .pricing-features li { color:rgba(255,255,255,.85); }
:where(body:not([data-mode])) .pricing-card.pop .pricing-features li::before { background:rgba(6,182,212,.18); color:#67e8f9; }
:where(body:not([data-mode])) .pricing-card.pop .pricing-price { background:linear-gradient(90deg,#67e8f9,#93c5fd); -webkit-background-clip:text; background-clip:text; }
:where(body:not([data-mode])) .pricing-card.pop .badge-pop { top:18px; right:18px; }
:where(body:not([data-mode])) .pricing-features li { font-size:14px; padding:8px 0; }
:where(body:not([data-mode])) .pricing-note { border-radius:16px; }

/* ── Contact ── */
.contact-left .hero-orb { margin:0 0 36px; width:120px; height:120px; }
.contact-left .hero-orb-core { width:80px; height:80px; }
.contact-left h1 em { font-family:var(--serif); font-size:1.1em; font-weight:400; }
.contact-right h2 { letter-spacing:-0.02em; }
.contact-right form { padding:36px; border-radius:26px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-lg); max-width:520px !important; }
.contact-right .ava-input, .contact-right .ava-select { padding:13px 15px; border-radius:12px; font-size:14px; background:var(--bg-2); }
.contact-right .ava-input:hover, .contact-right .ava-select:hover { border-color:color-mix(in srgb, var(--ink) 18%, transparent); }
.contact-right .ava-input:focus, .contact-right .ava-select:focus { background:var(--surface); }
.contact-steps { display:flex; flex-direction:column; gap:16px; margin-top:8px; }

/* ── Legal ── */
.legal-hero { position:relative; isolation:isolate; overflow:hidden; padding:80px 0 56px; border-bottom:1px solid var(--line); }
.legal-hero::before { content:''; position:absolute; inset:-40% -10% 0; z-index:-1; background:radial-gradient(30% 50% at 20% 30%, var(--aurora-1), transparent 70%), radial-gradient(30% 50% at 85% 20%, var(--aurora-3), transparent 70%); filter:blur(20px); }
.legal-hero h1 { font-size:clamp(40px,5vw,68px) !important; letter-spacing:-0.04em; }
.legal-layout { display:grid; grid-template-columns:240px minmax(0,1fr); gap:64px; max-width:1100px; margin:0 auto; padding:56px 32px 96px; }
.legal-layout .legal-body { padding:0; max-width:none; margin:0; }
.legal-toc { position:sticky; top:104px; align-self:start; max-height:calc(100vh - 130px); overflow:auto; padding-right:6px; }
.legal-toc-title { font-family:'Geist Mono',monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
.legal-toc a { display:block; padding:7px 0 7px 14px; border-left:2px solid var(--line); font-size:13px; color:var(--muted); line-height:1.4; transition:color .2s, border-color .2s, padding .25s var(--ease-out); }
.legal-toc a:hover { color:var(--ink); }
.legal-toc a.on { color:var(--ink); border-color:var(--teal); padding-left:18px; font-weight:500; }
.legal-section { padding:28px 30px; border-radius:20px; background:var(--surface); border:1px solid var(--line); margin-bottom:14px; }
.legal-h2 { border-bottom:none; padding-bottom:0; font-size:18px; letter-spacing:-0.01em; }
.legal-p { font-size:15px; }
.legal-ul li { font-size:14px; }

/* ── Auth / register / settings / payment ── */
.auth-page-card, .register-wrapper, .payment-card { border:1px solid var(--panel-line); }
.auth-page-card { border-radius:28px; padding:44px; }
.auth-page-card h1 { font-size:34px; letter-spacing:-0.03em; }
.register-left { position:relative; overflow:hidden; }
.register-left h1 { font-size:42px; letter-spacing:-0.035em; }
.register-tag { transition:transform .3s var(--ease-out), background .3s; }
.register-tag:hover { transform:translateY(-2px); background:rgba(6,182,212,.25); }
.settings-header h1 { font-size:42px; letter-spacing:-0.035em; }
.settings-card { border-radius:22px; transition:box-shadow .35s, border-color .3s; }
.settings-card:hover { box-shadow:var(--shadow-md); }
.payment-card { border-radius:32px; }
.payment-card h1 { font-size:32px; letter-spacing:-0.03em; }

/* ── Footer refresh ── */
:where(body:not([data-mode])) footer { background:var(--night); padding-top:72px; }
.footer-brand-name { letter-spacing:.08em; }
.footer-big {
  max-width:1200px; margin:0 auto 56px; display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap;
  padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.07); position:relative; z-index:1;
}
.footer-big h3 { font-size:clamp(30px,4vw,52px); font-weight:400; letter-spacing:-0.035em; color:#fff; line-height:1.05; }
.footer-big h3 em { font-family:var(--serif); font-style:italic; background:linear-gradient(90deg,#67e8f9,#93c5fd,#c4b5fd); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .x-hero-grid { grid-template-columns:1fr; gap:48px; }
  .x-hero { padding-top:48px; }
  .console-wrap { max-width:560px; margin:0 auto; width:100%; }
  .bento-card.s2 { grid-column:span 3; } .bento-card.s4 { grid-column:span 6; }
  .who-grid { grid-template-columns:repeat(2,1fr); }
  .x-split { grid-template-columns:1fr; gap:48px; }
  .persona { grid-template-columns:1fr; }
  .persona-tabs { flex-direction:row; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
  .persona-tabs::-webkit-scrollbar { display:none; }
  .persona-tab { flex:0 0 auto; width:auto; }
  .persona-tab small { display:none; }
}
@media (max-width: 900px) {
  .x-section { padding:80px 0; }
  .x-modes, .principles, .x-quotes, .x-includes { grid-template-columns:1fr; }
  .x-stats { grid-template-columns:1fr 1fr; }
  .x-stat:nth-child(3) { border-left:none; }
  .x-stat:nth-child(n+3) { border-top:1px solid var(--line); }
  .mx { grid-template-columns:1fr; }
  .mx-list { flex-direction:row; overflow-x:auto; border-right:none; border-bottom:1px solid var(--line); scrollbar-width:none; }
  .mx-list::-webkit-scrollbar { display:none; }
  .mx-tab { flex:0 0 auto; width:auto; white-space:nowrap; }
  .mx-tab:hover { transform:none; }
  .mx-panel { padding:32px 24px; }
  .meet { grid-template-columns:1fr; text-align:center; padding:36px 24px; gap:28px; }
  .meet-ring { margin:0 auto; width:180px; height:180px; }
  .meet-ring video { width:168px; height:168px; }
  .meet p { margin-left:auto; margin-right:auto; }
  .legal-layout { grid-template-columns:1fr; gap:0; padding:32px 20px 64px; }
  .legal-toc { display:none; }
  .photo-badge { left:12px; }
}
@media (max-width: 600px) {
  .x-wrap { padding:0 18px; }
  .x-display { font-size:clamp(40px,11vw,56px); }
  .x-hero .x-lead { font-size:16px; }
  .x-actions .btn { flex:1; justify-content:center; }
  .bento-card.s2, .bento-card.s3 { grid-column:span 6; }
  .who-grid { grid-template-columns:1fr; }
  .x-stat { padding:22px 18px; }
  .x-mode { padding:28px; }
  .art-bubbles span { font-size:11px; }
  .mx-phases { flex-wrap:wrap; row-gap:16px; }
  .mx-phase { flex:0 0 33.33%; }
  .mx-phase::after { display:none; }
  .persona-panel { padding:32px 24px; min-height:0; }
  .x-cta-box { padding:56px 22px; border-radius:28px; }
  .console-feed { height:320px; }
  .console-tag { display:none; }
  .timeline { padding-left:60px; }
  .tl-dot { left:-60px; width:44px; height:44px; }
  .contact-right form { padding:24px; }
  .legal-section { padding:22px 20px; }
  .auth-page-card { padding:32px 24px; }
  .footer-big { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .art-bars span { transform:none; }
  .lit-text .w { color:var(--ink); }
}
.contact-left .pub-eyebrow { align-self:flex-start; }
.legal-h2::before { top:4px; bottom:4px; }