/* Brand guidelines page. Builds on the tokens in styles.css. */
.bg-page main{padding-top:20px}
.bg-hero{position:relative;overflow:hidden;border-radius:var(--radius-xl);background:var(--ink-950);color:#fff;padding:clamp(32px,6vw,72px);isolation:isolate}
.bg-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(600px 380px at 85% 10%,rgb(91 91 255 / .38),transparent 70%),radial-gradient(520px 360px at 70% 110%,rgb(255 90 54 / .3),transparent 70%)}
.bg-hero::after{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgb(255 255 255 / .035) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255 / .035) 1px,transparent 1px);background-size:40px 40px}
.bg-hero .logo{height:clamp(40px,7vw,72px);color:#fff}
.bg-hero .logo-echo-2{stroke:var(--iris-400)}
.bg-hero h1{color:#fff;font-size:clamp(34px,5vw,60px);margin:clamp(32px,6vw,64px) 0 16px;max-width:820px}
.bg-hero p{color:#A9AEC0;font-size:var(--text-lg);max-width:620px;margin:0}
.bg-hero .eyebrow{color:#A9AEC0}
.bg-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.bg-meta span{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#D9DCE3;border:1px solid rgb(255 255 255 / .14);border-radius:var(--radius-pill);padding:6px 12px}

.bg-nav{position:sticky;top:0;z-index:5;display:flex;gap:4px;overflow-x:auto;margin:20px 0 0;padding:10px 0;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);scrollbar-width:none}
.bg-nav a{flex-shrink:0;padding:8px 14px;border-radius:var(--radius-pill);font-size:var(--text-sm);font-weight:500;color:var(--text-2);text-decoration:none}
.bg-nav a:hover{background:var(--surface);color:var(--text)}

.bg-section{padding:64px 0 8px;border-bottom:1px solid var(--border);padding-bottom:56px;scroll-margin-top:60px}
.bg-section:last-of-type{border-bottom:0}
.bg-head{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:24px 56px;margin-bottom:32px}
.bg-head h2{font-size:var(--text-3xl);letter-spacing:-.04em;margin:8px 0 0}
.bg-head p{margin:0;font-size:var(--text-md);color:var(--text-2);line-height:1.7;max-width:620px;align-self:end}
.bg-grid{display:grid;gap:14px}
.bg-grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.bg-grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.bg-grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tile{position:relative;border-radius:var(--radius-lg);border:1px solid var(--border);background:var(--surface);padding:24px;min-width:0}
.tile-label{display:flex;justify-content:space-between;gap:12px;margin-top:18px;font-size:var(--text-sm);color:var(--text-2)}
.tile-label b{font-weight:600;color:var(--text)}
.tile-label a{font-weight:500;text-decoration:none}

/* Logo showcases */
.stage{display:grid;place-items:center;min-height:220px;border-radius:var(--radius-md)}
.stage.light{background:#F7F6F3;color:var(--ink-900)}
.stage.dark{background:var(--ink-950);color:#fff}
.stage.dark .logo-echo-2{stroke:var(--iris-400)}
.stage.ember{background:var(--ember-500);color:#fff}
.stage.ember .logo-echo-1,.stage.ember .logo-echo-2,.stage.ember .logo-dot{stroke:#fff;fill:#fff}
.stage.ember .logo-echo-1,.stage.ember .logo-echo-2{fill:none}
.stage.light .logo-echo-1,.stage.ember .logo-echo-1{}
.stage .logo{height:auto;width:min(82%,340px)}
.stage .mark{height:96px}
.stage img{width:112px;height:112px;border-radius:26px;box-shadow:0 20px 40px -16px rgb(10 13 26 / .5)}
.stage.light .logo-echo-2{stroke:var(--iris-500)}
.stage.light .logo-echo-1{stroke:var(--ember-500)}
.stage.light .logo-dot{fill:var(--ember-500)}
.anatomy{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center}
.anatomy .stage{min-height:0;padding:28px;background-image:linear-gradient(var(--hairline) 1px,transparent 1px),linear-gradient(90deg,var(--hairline) 1px,transparent 1px);background-size:12px 12px;background-color:var(--surface-sunken);color:var(--text)}
.anatomy .mark{height:150px}
.anatomy ol{margin:0;padding:0;list-style:none;counter-reset:a}
.anatomy li{counter-increment:a;display:grid;grid-template-columns:28px 1fr;gap:10px;padding:12px 0;border-top:1px solid var(--border);font-size:var(--text-base);color:var(--text-2)}
.anatomy li:first-child{border-top:0}
.anatomy li::before{content:counter(a,decimal-leading-zero);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--accent-text);padding-top:3px}
.anatomy li b{color:var(--text);font-weight:600}
.rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:14px}
.rule{padding:18px;border-radius:var(--radius-md);background:var(--surface-sunken);border:1px solid var(--border);font-size:var(--text-sm);color:var(--text-2);line-height:1.6}
.rule b{display:block;color:var(--text);font-size:var(--text-base);margin-bottom:4px}
.rule.dont b::before{content:"✕ ";color:var(--danger)}
.rule.do b::before{content:"✓ ";color:var(--success)}

/* Colour */
.swatch{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);background:var(--surface)}
.chip{height:132px;padding:16px;display:flex;align-items:flex-end;font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.06em}
.swatch-info{padding:14px 16px 16px}
.swatch-info b{display:block;font-size:var(--text-base);font-weight:600}
.swatch-info code{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-2)}
.swatch-info p{margin:8px 0 0;font-size:var(--text-sm);color:var(--text-2);line-height:1.55}
.c-ink{background:var(--ink-900);color:#fff}.c-paper{background:#F7F6F3;color:var(--ink-900)}.c-ember{background:var(--ember-500);color:#fff}.c-iris{background:var(--iris-500);color:#fff}
.ramp{display:grid;grid-template-columns:repeat(var(--n,8),1fr);border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border)}
.ramp span{height:64px;display:flex;align-items:flex-end;padding:8px;font-family:var(--font-mono);font-size:10px}
.ramp-row+.ramp-row{margin-top:18px}
.ramp-row h3{font-size:var(--text-sm);font-weight:600;margin:0 0 8px;display:flex;justify-content:space-between}
.ramp-row h3 span{font-family:var(--font-mono);font-weight:400;font-size:var(--text-xs);color:var(--text-3)}
.i950{background:#0A0D1A;color:#fff}.i900{background:#0F1424;color:#fff}.i800{background:#1A2033;color:#fff}.i700{background:#2A3147;color:#fff}.i600{background:#434A60;color:#fff}.i500{background:#5E6579;color:#fff}.i400{background:#868C9E;color:#fff}.i300{background:#B3B8C5}.i200{background:#D9DCE3}.i100{background:#EEEFF3}.i50{background:#F5F6F8}
.i300,.i200,.i100,.i50,.e50,.e100,.e200,.r50,.r100,.r200{color:var(--ink-900)}
.e50{background:#FFF4F0}.e100{background:#FFE4DB}.e200{background:#FFC6B5}.e400{background:#FF7D5C;color:#fff}.e500{background:#FF5A36;color:#fff}.e600{background:#E8441F;color:#fff}.e700{background:#B93516;color:#fff}
.r50{background:#F2F2FF}.r100{background:#E4E4FF}.r200{background:#C8C8FF}.r400{background:#8B8BFF;color:#fff}.r500{background:#5B5BFF;color:#fff}.r600{background:#4646E8;color:#fff}.r700{background:#3434B8;color:#fff}
.signal-bar{height:120px;border-radius:var(--radius-lg);background:var(--signal);display:flex;align-items:flex-end;justify-content:space-between;padding:16px 18px;color:#fff;font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.06em}

/* Typography */
.type-specimen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.specimen .big{font-size:88px;line-height:1;letter-spacing:-.05em;font-weight:600;margin:6px 0 18px;color:var(--text)}
.specimen.mono .big{font-family:var(--font-mono);font-weight:500;letter-spacing:-.04em}
.specimen.serif .big{font-family:var(--font-accent);font-style:italic;font-weight:400;letter-spacing:-.02em;background:var(--signal);-webkit-background-clip:text;background-clip:text;color:transparent}
.specimen p{margin:0;font-size:var(--text-sm);color:var(--text-2);line-height:1.6}
.specimen .glyphs{margin-top:14px;font-size:var(--text-md);color:var(--text);letter-spacing:.02em;overflow-wrap:anywhere}
.specimen.mono .glyphs{font-family:var(--font-mono)}
.specimen.serif .glyphs{font-family:var(--font-accent);font-style:italic;font-size:var(--text-xl)}
.scale{margin-top:14px;border-radius:var(--radius-lg);border:1px solid var(--border);background:var(--surface);overflow:hidden}
.scale>div{display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:baseline;padding:18px 24px;border-top:1px solid var(--border)}
.scale>div:first-child{border-top:0}
.scale code{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-3)}
.t-display{font-size:56px;font-weight:600;letter-spacing:-.045em;line-height:1.05}
.t-display em{font-family:var(--font-accent);font-weight:400;font-style:italic;background:var(--signal);-webkit-background-clip:text;background-clip:text;color:transparent}
.t-h2{font-size:28px;font-weight:600;letter-spacing:-.035em}
.t-h3{font-size:22px;font-weight:600;letter-spacing:-.025em}
.t-body{font-size:15px;color:var(--text-2);line-height:1.6}
.t-label{font-size:13px;font-weight:550}
.t-micro{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--text-2)}

/* Components */
.demo-stack{display:flex;flex-direction:column;gap:12px}
.demo-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.demo-row .primary,.demo-row .secondary{width:auto}
.btn-ghost{min-height:52px;padding:0 18px;border-radius:var(--radius-md);border:1px solid var(--border-strong);background:var(--surface);font-weight:500}
.status-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 10px;border-radius:var(--radius-pill);font-size:var(--text-sm);font-weight:500;border:1px solid var(--border);background:var(--surface)}
.status-chip i{width:7px;height:7px;border-radius:50%;background:currentColor}
.status-chip.ok{color:var(--success);background:var(--success-soft);border-color:transparent}
.status-chip.live{color:var(--accent-text);background:var(--accent-soft);border-color:transparent}
.status-chip.you{color:var(--voice-you-text);background:var(--voice-you-soft);border-color:transparent}
.tile .language-route{margin:0}
.tile .status-orb{margin:8px auto 0}
.tile .conversation{max-width:none;box-shadow:none}
.tile .field-hint{margin-bottom:0}

/* Voice */
.voice{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.voice .tile h3{font-size:var(--text-xl);letter-spacing:-.025em;margin:0 0 8px}
.voice .tile>p{margin:0 0 16px;color:var(--text-2);font-size:var(--text-base);line-height:1.65}
.say{display:grid;gap:8px}
.say div{padding:12px 14px;border-radius:var(--radius-sm);font-size:var(--text-sm);line-height:1.5}
.say .yes{background:var(--success-soft);color:var(--text)}
.say .no{background:var(--danger-soft);color:var(--text-2);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--danger) 50%,transparent)}
.say span{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;margin-bottom:3px;color:var(--text-3)}

/* Motion & tokens */
.motion-demo{display:grid;place-items:center;min-height:180px}
.motion-demo .wave{height:48px;gap:6px}
.motion-demo .wave i{width:6px}
.token-table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.token-table th,.token-table td{text-align:left;padding:11px 14px;border-top:1px solid var(--border);vertical-align:top}
.token-table th{font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);border-top:0}
.token-table code{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text)}
.token-table td:last-child{color:var(--text-2)}
.downloads{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.downloads a{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 16px;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--surface);color:var(--text);text-decoration:none;font-size:var(--text-sm);font-weight:500}
.downloads a:hover{border-color:var(--border-strong)}
.downloads a span{font-family:var(--font-mono);font-size:10.5px;color:var(--text-3)}

@media (max-width:960px){
  .bg-head{grid-template-columns:1fr}
  .bg-grid.c3,.bg-grid.c4,.type-specimen,.voice,.downloads{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .bg-grid.c2,.bg-grid.c3,.bg-grid.c4,.type-specimen,.voice,.rules,.downloads{grid-template-columns:1fr}
  .anatomy{grid-template-columns:1fr}
  .scale>div{grid-template-columns:1fr;gap:6px}
  .t-display{font-size:40px}
  .specimen .big{font-size:72px}
  .ramp span{font-size:0;height:44px}
  .bg-section{padding:44px 0 40px}
  .bg-head h2{font-size:var(--text-2xl)}
  .token-table td:nth-child(2){display:none}.token-table th:nth-child(2){display:none}
}
/* Inline styles are blocked by the CSP; small layout variants live here. */
[data-gap="12"]{margin-top:12px}[data-gap="14"]{margin-top:14px}
.ramp[data-n="11"]{grid-template-columns:repeat(11,1fr)}.ramp[data-n="7"]{grid-template-columns:repeat(7,1fr)}
.tile[data-table]{padding:6px 10px;overflow-x:auto}