@charset "UTF-8";
/* Kyne Labs — structural + editorial layout.
   Colour only via L3 role tokens. Zero raw hex. Zero remote assets. Zero JS. */

*{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth}
body{margin:0;overflow-x:clip;background:var(--bg);color:var(--text)}
body.brand-celfavia{font-family:var(--font-editorial)}
a{color:inherit;text-underline-offset:5px}
a:hover{color:var(--accent)}
a:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
p{max-width:var(--measure)}
h1,h2,h3{line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);text-wrap:balance}
h1{font-size:clamp(2.4rem,7vw,4.4rem);font-weight:600;margin:14px 0}
h2{font-size:clamp(1.5rem,3.4vw,2.2rem);font-weight:600;margin:0 0 12px}
h3{font-size:1.15rem;margin:0 0 8px}

.skip{position:absolute;left:16px;top:-80px;background:var(--surface);color:var(--text);padding:10px;z-index:5}
.skip:focus{top:10px}

header.site,main.wrap,footer.site{max-width:var(--page-max);margin:auto;padding-left:var(--gutter);padding-right:var(--gutter)}

header.site{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:84px;border-bottom:1px solid var(--border)}
.wordmark{font-size:1.25rem;font-weight:650;text-decoration:none;letter-spacing:-.04em;min-height:var(--tap-min);display:inline-flex;align-items:center}
.wordmark span{color:var(--accent)}
nav{display:flex;flex-wrap:wrap;gap:4px 18px;align-items:center}
nav a{
  position:relative;
  display:inline-flex;align-items:center;min-height:var(--tap-min);
  font-size:.93rem;text-decoration:none;
  transition:color 180ms ease, opacity 180ms ease;
}
nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:10px;height:1.5px;
  background:currentColor;border-radius:1px;
  transform:scaleX(0);transform-origin:left center;
  transition:transform 180ms ease;
  pointer-events:none;
}
nav a:hover{opacity:.92}
nav a:hover::after,
nav a:focus-visible::after{transform:scaleX(1)}
nav a[aria-current=page]{font-weight:600;opacity:1}
nav a[aria-current=page]::after{transform:scaleX(1);opacity:.7}
nav a:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.lang-switch[hidden]{display:none!important}

.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;font-size:.85rem;color:var(--text-muted);padding-top:18px}
.crumbs a{display:inline-flex;align-items:center;min-height:var(--tap-min);text-underline-offset:4px}
.crumbs [aria-current=page]{color:var(--text);font-weight:550}
.crumb-sep{color:var(--border)}

.page-title{padding:40px 0 24px}
.eyebrow{text-transform:uppercase;letter-spacing:var(--tracking-wide);font-size:.72rem;font-weight:650;color:var(--accent);margin:0}
.lead{font-size:1.08rem;color:var(--text-muted);margin:10px 0 0}
.subtle{color:var(--text-muted);font-size:.92rem}
.section{padding:var(--space-section) 0;border-top:1px solid var(--border)}
.section-head{margin-bottom:28px}
.section-head .lead{margin-top:8px}
.section--flush{border-top:0;padding-top:0}
.section--band{
  margin:0 calc(-1 * var(--gutter));
  padding:var(--space-section) var(--gutter);
  background:var(--band-bg);
  color:var(--band-text);
  border-top:0;
}
.section--band .eyebrow{color:var(--band-text-muted)}
.section--band h2,.section--band h3{color:var(--band-text)}
.section--band p,.section--band .lead{color:var(--band-text-muted)}

.tag{display:inline-block;font-size:.78rem;color:var(--text-muted);border:1px solid var(--border);border-radius:var(--radius-pill);padding:4px 12px;margin:0}
.tag.accent{background:var(--accent-wash);border-color:var(--border-accent);color:var(--text)}

.list{list-style:none;padding:0;margin:18px 0 0}
.list li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:12px 0;border-bottom:1px solid var(--border)}
.list a{display:inline-flex;align-items:center;min-height:var(--tap-min);font-weight:550}
.name{font-weight:550}

.actions{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0 0}
.button{
  display:inline-flex;min-height:48px;padding:12px 22px;
  border:1px solid var(--border);border-radius:var(--radius-pill);
  text-decoration:none;align-items:center;justify-content:center;
  font-weight:550;background:var(--surface);color:var(--text);
  cursor:pointer;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    transform 160ms ease,
    opacity 180ms ease;
}
.button.primary{background:var(--cta-bg);border-color:var(--cta-bg);color:var(--cta-text)}
.button:hover{background:var(--accent-wash);border-color:var(--border-accent);color:var(--text)}
.button.primary:hover{background:var(--cta-bg-hover);border-color:var(--cta-bg-hover);color:var(--cta-text)}
.button:active{transform:translateY(1px)}
.button:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.button.primary:focus-visible{outline-color:var(--cta-bg)}
.button[aria-disabled=true],
.button:disabled,
.button.is-disabled{
  opacity:.42;cursor:not-allowed;pointer-events:none;
  transform:none;
}
.next{display:inline-flex;align-items:center;min-height:var(--tap-min);margin-top:10px;font-weight:550;text-decoration:none}
.next:hover{text-decoration:underline}

.notice{border-left:3px solid var(--accent);padding-left:18px;color:var(--text-muted)}
.phase-note{margin:0;background:var(--accent-wash);color:var(--text);padding:8px var(--gutter);text-align:center;font-size:.85rem;border-bottom:1px solid var(--border)}
.frozen{border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--radius);padding:22px;background:var(--surface)}
.frozen p,.frozen li,.frozen h2{overflow-wrap:anywhere}
.frozen ul{padding-left:20px;margin:14px 0}
.frozen li{margin-bottom:8px;color:var(--text-muted)}

/* ---- Editorial hero shells ---- */
.ed-hero{
  position:relative;
  margin:0 calc(-1 * var(--gutter));
  padding:48px var(--gutter) 52px;
  border-bottom:1px solid var(--border);
}
.ed-hero-grid{
  max-width:var(--page-max);margin:0 auto;
  display:grid;grid-template-columns:1fr;gap:28px;align-items:end;
}
.ed-hero h1{margin-top:8px;max-width:12ch}
.ed-hero .lead{max-width:40ch}
.ed-hero .sub-id{
  display:block;margin-top:10px;
  font-size:clamp(1rem,2.2vw,1.35rem);font-weight:550;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-muted);
}

/* Parent homepage: Rich Blue as composition subject */
.ed-hero--labs{
  background:var(--bg);
  padding-bottom:0;border-bottom:0;
}
.ed-hero--labs .ed-hero-grid{gap:0}
.labs-panel{
  background:var(--band-bg);color:var(--band-text);
  padding:48px 28px 56px;border-radius:0;
}
.labs-panel .eyebrow{color:var(--band-text-muted)}
.labs-panel h1{color:var(--band-text);font-size:clamp(2.8rem,8vw,5.2rem);max-width:10ch;margin:12px 0 18px}
.labs-panel .lead{color:var(--band-text-muted);max-width:34ch}
.labs-panel .button{background:transparent;border-color:var(--band-button-border);color:var(--band-text)}
.labs-panel .button.primary{background:var(--band-text);border-color:var(--band-text);color:var(--band-bg)}
.labs-panel .button:hover{background:var(--band-button-hover-bg);border-color:var(--band-button-hover-border);color:var(--band-text)}
.labs-panel .button.primary:hover{background:var(--surface);border-color:var(--surface);color:var(--band-bg)}
.labs-aside{
  background:var(--accent-wash);
  padding:36px 28px 40px;
  border-top:1px solid var(--border);
}
.labs-aside h2{font-size:clamp(1.3rem,2.5vw,1.7rem);margin:0 0 18px}
.labs-index{list-style:none;padding:0;margin:0;display:grid;gap:0}
.labs-index a{
  display:grid;grid-template-columns:1fr auto;gap:12px;align-items:baseline;
  padding:16px 0;border-bottom:1px solid var(--border);text-decoration:none;min-height:var(--tap-min);
}
.labs-index a:last-child{border-bottom:0}
.labs-index strong{font-size:1.15rem}
.labs-index span{color:var(--text-muted);font-size:.88rem}

/* Brand territory strips (homepage) */
.territory{display:grid;grid-template-columns:1fr;gap:0;margin:0 calc(-1 * var(--gutter))}
.territory-block{
  display:grid;grid-template-columns:1fr;gap:20px;
  padding:40px var(--gutter);text-decoration:none;color:inherit;
  border-bottom:1px solid var(--border);min-width:0;
}
.territory-block:hover{color:inherit}
.territory-block h3{font-size:clamp(1.6rem,3vw,2.2rem);margin:0}
.territory-block p{margin:0;color:var(--text-muted);max-width:40ch}
.territory-block .go{font-weight:550;color:var(--accent)}
.territory-block.on-celfavia{background:var(--accent-wash)}
.territory-block.on-kyne-english{background:var(--surface)}
.territory-block.on-kyne-life{
  background:var(--accent);color:var(--cta-text);border-bottom-color:var(--accent);
}
.territory-block.on-kyne-life p,
.territory-block.on-kyne-life .eyebrow,
.territory-block.on-kyne-life .go{color:var(--cta-text);opacity:.88}
.territory-block.on-kyne-life:hover{color:var(--cta-text)}

/* Featured editorial index */
.ed-index{list-style:none;padding:0;margin:0;border-top:1px solid var(--border)}
.ed-index a{
  display:grid;grid-template-columns:1fr;gap:4px;
  padding:22px 0;border-bottom:1px solid var(--border);
  text-decoration:none;min-height:var(--tap-min);
}
.ed-index a:hover{color:inherit}
.ed-index .meta{color:var(--text-muted);font-size:.88rem}
.ed-index strong{font-size:1.15rem}
.ed-index .go{color:var(--accent);font-weight:550}

/* Celfavia museum editorial */
.ed-hero--museum{
  background:
    linear-gradient(135deg, var(--hero-from) 0%, var(--hero-to) 55%, var(--accent-wash) 100%);
}
.museum-flag{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 18px;margin-top:8px}
.museum-flag .flagship{
  font-size:clamp(1.05rem,2vw,1.35rem);letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-muted);font-weight:550;
}
.ed-split{display:grid;grid-template-columns:1fr;gap:28px;align-items:center}
.ed-split--flip .ed-copy{order:2}
.ed-split--flip .shot{order:1}
.ed-copy h2{max-width:16ch}
.ed-copy p{color:var(--text-muted)}

/* Visual subjects / placeholders */
.shot{
  position:relative;min-height:220px;border:1px solid var(--border);
  border-radius:var(--radius-sm);overflow:hidden;background:var(--surface-alt);
}
.shot--motif{display:grid;place-items:center;padding:28px}
.shot--pending{
  display:grid;place-items:end start;padding:20px;
  background:
    repeating-linear-gradient(-45deg, var(--surface) 0 12px, var(--surface-alt) 12px 24px);
  border-style:dashed;
}
.shot--pending figcaption{
  margin:0;padding:8px 12px;background:var(--surface);border:1px solid var(--border);
  font-size:.82rem;color:var(--text-muted);
}
.shot--tall{min-height:320px}
.shot--device{min-height:280px;aspect-ratio:4/5;max-width:280px}

.motif{width:min(100%,280px);aspect-ratio:1;position:relative}
.motif-frame{
  position:absolute;inset:12%;border:2px solid var(--accent);
  box-shadow:18px 18px 0 var(--accent-tint);
}
.motif-frame::after{
  content:"";position:absolute;left:14%;right:14%;top:42%;height:2px;background:var(--border-accent);
}
.motif-letters{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:min(100%,240px);
}
.motif-letters span{
  aspect-ratio:1;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--border);
  font-weight:700;font-size:1.4rem;color:var(--accent);
}
.motif-letters span:nth-child(2){background:var(--accent-tint);border-color:var(--border-accent)}
.motif-letters span:nth-child(5){background:var(--accent-wash)}
.motif-path{
  width:min(100%,260px);height:160px;
  background:
    linear-gradient(90deg, var(--accent-tint) 0 28%, transparent 28%),
    linear-gradient(180deg, transparent 48%, var(--border-accent) 48% 52%, transparent 52%),
    radial-gradient(circle at 18% 50%, var(--accent) 0 10px, transparent 11px),
    radial-gradient(circle at 50% 50%, var(--accent) 0 10px, transparent 11px),
    radial-gradient(circle at 82% 50%, var(--accent) 0 10px, transparent 11px),
    var(--accent-wash);
  border:1px solid var(--border);
}
.motif-exam{
  width:min(100%,260px);display:grid;gap:8px;
}
.motif-exam i{
  display:block;height:14px;background:var(--surface);border:1px solid var(--border);
}
.motif-exam i:nth-child(1){width:88%}
.motif-exam i:nth-child(2){width:72%;background:var(--accent-tint);border-color:var(--border-accent)}
.motif-exam i:nth-child(3){width:64%}
.motif-exam i:nth-child(4){width:80%;background:var(--accent-wash)}
.motif-health{
  width:min(100%,220px);height:220px;border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, var(--accent-tint) 0 28%, transparent 29%),
    conic-gradient(from 200deg, var(--accent) 0 35%, var(--accent-wash) 35% 70%, var(--border-accent) 70% 100%);
  border:1px solid var(--border);
}
.motif-lemon{
  width:min(100%,240px);height:200px;
  background:
    linear-gradient(160deg, var(--accent-tint) 0 42%, transparent 42%),
    linear-gradient(20deg, var(--accent-wash) 0 50%, var(--surface-alt) 50%);
  border:1px solid var(--border);
  position:relative;
}
.motif-lemon::after{
  content:"";position:absolute;right:18%;bottom:18%;width:42%;height:42%;
  border-radius:18px;border:2px solid var(--accent);background:var(--surface);
}

/* English brand landing: unequal product territories */
.unequal{display:grid;grid-template-columns:1fr;gap:16px}
.unequal-main,.unequal-side{
  display:flex;flex-direction:column;gap:14px;
  padding:28px;text-decoration:none;color:inherit;min-width:0;
  border:1px solid var(--border);
}
.unequal-main{background:var(--accent-wash);min-height:280px}
.unequal-side{background:var(--surface);min-height:200px}
.unequal-main:hover,.unequal-side:hover{color:inherit}
.unequal h3{font-size:clamp(1.4rem,2.5vw,1.9rem);margin:0}
.unequal p{margin:0;color:var(--text-muted);max-width:36ch}
.unequal .go{margin-top:auto;font-weight:550;color:var(--accent)}

/* Sorumi path hero — text sits on wash; motif carries tint away from type */
.product-hero{
  position:relative;margin:0 calc(-1 * var(--gutter));
  padding:40px var(--gutter) 44px;border-bottom:1px solid var(--border);
}
.product-hero-inner{max-width:var(--page-max);margin:0 auto}
.product-hero h1{margin-top:10px;max-width:14ch}
.product-hero .lead{max-width:42ch;margin-top:12px}
.product-hero .actions{margin-top:24px}
.product-hero--path{
  background:linear-gradient(180deg, var(--accent-wash) 0%, var(--bg) 78%);
}
.product-hero--path .hero-compose{
  display:grid;grid-template-columns:1fr;gap:24px;align-items:end;
}
.product-hero--toolkit{
  background:
    linear-gradient(90deg, var(--accent-tint) 0 6px, transparent 6px),
    linear-gradient(180deg, var(--hero-from) 0%, var(--bg) 80%);
}
.product-hero--calm{
  background:linear-gradient(180deg, var(--hero-from) 0%, var(--bg) 70%);
}
.product-hero--calm .hero-compose{
  display:grid;grid-template-columns:1fr;gap:24px;align-items:center;
}
.product-hero--yevli{
  background:
    linear-gradient(115deg, var(--accent-tint) 0 34%, transparent 34%),
    linear-gradient(180deg, var(--hero-from) 0%, var(--bg) 72%);
}
.product-hero--yevli .hero-compose{
  display:grid;grid-template-columns:1fr;gap:28px;align-items:center;
}

.stage-path{display:grid;grid-template-columns:1fr;gap:10px;margin-top:24px;max-width:720px}
.stage-step{
  display:grid;grid-template-columns:auto 1fr;gap:12px;
  padding:14px 16px;background:var(--surface);border:1px solid var(--border);
}
.stage-step .stage-mark{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:2.6rem;min-height:2.6rem;padding:0 8px;border-radius:var(--radius-pill);
  background:var(--accent-wash);border:1px solid var(--border-accent);
  font-size:.78rem;font-weight:650;
}
.stage-step strong{display:block;margin-bottom:2px}
.stage-step p{margin:0;color:var(--text-muted);font-size:.9rem;max-width:none}

.cluster{display:grid;grid-template-columns:1fr;gap:20px}
.cluster-core{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border)}
.cluster-core > *{background:var(--bg);padding:22px 20px}
.cluster-core h3{margin:0 0 8px;font-size:1.05rem}
.cluster-core p{margin:0;color:var(--text-muted);font-size:.92rem;max-width:none}
.cluster-ext{display:flex;flex-wrap:wrap;gap:10px 18px;padding-top:8px}
.cluster-ext span{
  display:inline-flex;align-items:center;min-height:40px;
  padding:6px 14px;border-bottom:2px solid var(--border-accent);font-weight:550;
}

.bee-panel{
  display:grid;grid-template-columns:1fr;gap:20px;align-items:center;
  padding:28px;background:var(--accent-tint);border:1px solid var(--border-accent);
}
.bee-panel h2,.bee-panel p{color:var(--text)}
.bee-panel p{max-width:42ch}

.focus-rail{
  margin-top:24px;max-width:440px;border:1px solid var(--border);background:var(--surface);overflow:hidden;
}
.focus-rail .focus-item{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  min-height:var(--tap-min);padding:14px 18px;border-bottom:1px solid var(--border);font-size:.93rem;
}
.focus-rail .focus-item:last-child{border-bottom:0}
.focus-rail .focus-item span{color:var(--text-muted);font-size:.82rem}

.feature-rail{display:grid;gap:0;border-top:1px solid var(--border)}
.feature-row{
  display:grid;grid-template-columns:1fr;gap:6px;
  padding:18px 0;border-bottom:1px solid var(--border);
}
.feature-row h3{margin:0;font-size:1.02rem}
.feature-row p{margin:0;color:var(--text-muted);font-size:.92rem;max-width:56ch}

.timeline{display:grid;gap:0;border-left:2px solid var(--border-accent);padding-left:20px;margin-top:8px}
.timeline article{padding:0 0 22px;position:relative}
.timeline article::before{
  content:"";position:absolute;left:-27px;top:6px;width:10px;height:10px;border-radius:50%;
  background:var(--accent);border:2px solid var(--bg);
}
.timeline h3{margin:0 0 6px;font-size:1.05rem}
.timeline p{margin:0;color:var(--text-muted)}

.pine-panel{
  margin:0 calc(-1 * var(--gutter));
  padding:48px var(--gutter);
  background:var(--band-bg);color:var(--band-text);
}
.pine-panel .eyebrow{color:var(--band-text-muted)}
.pine-panel h1,.pine-panel h2{color:var(--band-text)}
.pine-panel .lead,.pine-panel p{color:var(--band-text-muted)}
.pine-panel .button{background:transparent;border-color:var(--band-button-border);color:var(--band-text)}
.pine-panel .button.primary{background:var(--band-text);border-color:var(--band-text);color:var(--band-bg)}
.pine-panel .button:hover{background:var(--band-button-hover-bg);color:var(--band-text)}
.pine-panel .button.primary:hover{background:var(--surface);border-color:var(--surface);color:var(--band-bg)}

.family-index{display:grid;gap:0;margin-top:28px;border-top:1px solid var(--band-button-border)}
.family-index a{
  display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  padding:18px 0;border-bottom:1px solid var(--band-button-border);
  text-decoration:none;color:var(--band-text);min-height:var(--tap-min);
}
.family-index a:hover{color:var(--band-text)}
.family-index .slot{opacity:.72}

.vault-hero{
  margin:0 calc(-1 * var(--gutter));
  padding:72px var(--gutter) 80px;
  background:
    linear-gradient(160deg, var(--band-bg) 0 48%, transparent 48%),
    var(--bg);
  border-bottom:1px solid var(--border);
}
.vault-hero-inner{max-width:var(--page-max);margin:0 auto}
.vault-hero h1{color:var(--band-text);font-size:clamp(2.6rem,8vw,5rem);max-width:10ch;margin:10px 0}
.vault-hero .by{color:var(--band-text-muted);letter-spacing:.14em;text-transform:uppercase;font-size:.85rem}
.vault-hero .lead{color:var(--text-muted);margin-top:36px;max-width:36ch}

.alias-panel{
  padding:28px;border:1px solid var(--border);background:var(--surface);
  max-width:52ch;
}
.alias-panel p{color:var(--text-muted);max-width:none}

.cta-band{
  margin:0 calc(-1 * var(--gutter));
  padding:48px var(--gutter);
  background:var(--band-bg);color:var(--band-text);
  border-top:1px solid var(--band-bg);
}
.cta-band .eyebrow{color:var(--band-text-muted)}
.cta-band h2{color:var(--band-text);margin-top:10px}
.cta-band .lead{color:var(--band-text-muted)}
.cta-band .button{background:transparent;border-color:var(--band-button-border);color:var(--band-text)}
.cta-band .button.primary{background:var(--band-text);border-color:var(--band-text);color:var(--band-bg)}
.cta-band .button:hover{background:var(--band-button-hover-bg);border-color:var(--band-button-hover-border);color:var(--band-text)}
.cta-band .button.primary:hover{background:var(--surface);border-color:var(--surface);color:var(--band-bg)}

.updates-empty{
  padding:22px 24px;border:1px dashed var(--border);border-radius:var(--radius);background:var(--surface-alt);
}
.updates-empty p{margin:0 0 14px;color:var(--text-muted)}

footer.site{border-top:1px solid var(--border);padding-top:28px;padding-bottom:36px;font-size:.85rem;display:flex;flex-direction:column;align-items:stretch}
.footer-product{display:flex;flex-wrap:wrap;gap:4px 22px;padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid var(--border)}
.footer-product a{display:inline-flex;align-items:center;min-height:var(--tap-min);text-decoration:none}
.footer-brands{display:flex;flex-wrap:wrap;gap:4px 22px;padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid var(--border)}
.footer-brands a{display:inline-flex;align-items:center;min-height:var(--tap-min);text-decoration:none}
.footer-main{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.footer-main p{margin:0}
.footer-main nav{gap:4px 18px}
code{font-size:.9em;overflow-wrap:anywhere}

@media(min-width:640px){
  .ed-hero-grid{grid-template-columns:1.15fr .85fr;gap:0;align-items:stretch}
  .labs-panel{padding:56px 40px 64px}
  .labs-aside{padding:48px 36px;border-top:0;border-left:1px solid var(--border)}
  .territory{grid-template-columns:1.2fr 1fr 1fr}
  .territory-block{border-bottom:0;border-right:1px solid var(--border);min-height:280px}
  .territory-block:last-child{border-right:0}
  .ed-index a{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;align-items:center;gap:16px}
  .ed-split{grid-template-columns:1.05fr .95fr;gap:40px}
  .ed-split--flip .ed-copy{order:0}
  .ed-split--flip .shot{order:0}
  .unequal{grid-template-columns:1.35fr .9fr}
  .product-hero--path .hero-compose,
  .product-hero--calm .hero-compose,
  .product-hero--yevli .hero-compose{grid-template-columns:1.1fr .9fr;gap:36px}
  .stage-path{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stage-step{grid-template-columns:1fr}
  .bee-panel{grid-template-columns:1.2fr .8fr}
  .feature-row{grid-template-columns:minmax(8rem,11rem) minmax(0,1fr);gap:16px 24px;align-items:baseline}
  .cluster-core{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(min-width:900px){
  .ed-hero{padding:64px var(--gutter) 72px}
  .labs-panel h1{font-size:clamp(3.4rem,6vw,5.6rem)}
  .product-hero{padding:52px var(--gutter) 60px}
}
@media(min-width:1280px){
  .ed-hero-grid,.product-hero-inner,.vault-hero-inner{max-width:var(--page-max)}
}
/* Tablet / phone header: brand row + equal tap grid */
@media(max-width:900px){
  header.site{
    flex-direction:column;align-items:stretch;gap:10px;
    padding-top:16px;padding-bottom:14px;min-height:auto;
  }
  header.site .wordmark{align-self:flex-start}
  header.site > nav[aria-label="主要導覽"]{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    gap:4px;width:100%;
    border-top:1px solid var(--border);
    padding-top:8px;
  }
  body[data-route="/english/sorumi/"] header.site > nav[aria-label="主要導覽"]{
    border-top-color:var(--band-button-border);
  }
  header.site > nav[aria-label="主要導覽"] a{
    justify-content:center;text-align:center;
    font-size:.82rem;padding:8px 4px;min-height:44px;
  }
  header.site > nav[aria-label="主要導覽"] a::after{bottom:6px;left:18%;right:18%;width:auto}
}

@media(max-width:760px){
  header.site,main.wrap,footer.site{padding-left:var(--gutter-sm);padding-right:var(--gutter-sm)}
  .phase-note{padding-left:var(--gutter-sm);padding-right:var(--gutter-sm)}
  .ed-hero,.cta-band,.territory,.pine-panel,.vault-hero,.product-hero,.section--band,.sorumi-hero,.sorumi-stage{
    margin-left:calc(-1 * var(--gutter-sm));margin-right:calc(-1 * var(--gutter-sm));
    padding-left:var(--gutter-sm);padding-right:var(--gutter-sm);
  }
  body[data-route="/english/sorumi/"] header.site{
    padding-left:var(--gutter-sm);padding-right:var(--gutter-sm);
  }
  body[data-route="/english/sorumi/"] .sorumi-path,
  body[data-route="/english/sorumi/"] .sorumi-feats,
  body[data-route="/english/sorumi/"] .sorumi-next{
    padding-left:0;padding-right:0;
  }
  .section{padding:var(--space-section-sm) 0}
  .footer-main{flex-direction:column}
  .cluster-core{grid-template-columns:1fr 1fr}
  .product-hero--yevli{background:linear-gradient(180deg, var(--accent-tint) 0 18%, var(--bg) 42%)}
  .actions{gap:14px}
  .sorumi-hero .actions .button{flex:1 1 auto;min-width:min(100%,148px)}
}

/* ---- Sorumi approved composition (fidelity correction; route-scoped) ---- */

body[data-route="/english/sorumi/"] header.site{
  max-width:none;width:100%;box-sizing:border-box;margin:0;
  padding-left:max(var(--gutter), calc(50% - var(--page-max) / 2 + var(--gutter)));
  padding-right:max(var(--gutter), calc(50% - var(--page-max) / 2 + var(--gutter)));
  background:var(--band-bg);color:var(--band-text);border-bottom:0;
}
body[data-route="/english/sorumi/"] header.site .wordmark{color:var(--band-text)}
body[data-route="/english/sorumi/"] header.site .wordmark span{color:var(--band-text-muted)}
body[data-route="/english/sorumi/"] header.site nav a{color:var(--band-text)}
body[data-route="/english/sorumi/"] header.site nav a:hover{
  color:var(--band-text);opacity:1;
}
body[data-route="/english/sorumi/"] header.site nav a:focus-visible{
  outline-color:var(--band-text);
}
body[data-route="/english/sorumi/"] header.site a:focus-visible{outline-color:var(--band-text)}

/* Soft large circles — atmosphere only, never the subject */
.sorumi-soft{
  position:absolute;border-radius:50%;pointer-events:none;
  background:var(--accent-tint);opacity:.1;
}
.sorumi-soft--a{
  width:min(48vw,420px);height:min(48vw,420px);
  right:-8%;top:-22%;
  background:var(--surface-alt);opacity:.7;
}
.sorumi-soft--b{
  width:min(26vw,220px);height:min(26vw,220px);
  right:34%;bottom:-14%;opacity:.14;
}
.sorumi-soft--c{
  width:min(16vw,140px);height:min(16vw,140px);
  left:46%;top:10%;
  background:var(--accent-wash);opacity:.95;
  border:2px solid var(--border-accent);
}
.sorumi-soft--d{
  width:min(42vw,380px);height:min(42vw,380px);
  left:-12%;bottom:-28%;
  background:var(--accent-tint);opacity:.12;
}
.sorumi-soft--e{
  width:min(24vw,220px);height:min(24vw,220px);
  right:4%;top:-16%;
  background:var(--surface);opacity:.55;
}

.sorumi-hero{
  position:relative;
  margin:0 calc(-1 * var(--gutter));
  padding:52px var(--gutter) 64px;
  background:linear-gradient(160deg, var(--hero-from) 0%, var(--bg) 48%, var(--hero-to) 100%);
  border-bottom:0;
  overflow:hidden;
}
.sorumi-hero-soft{position:absolute;inset:0;z-index:0}
.sorumi-hero-grid{
  position:relative;z-index:1;
  max-width:var(--page-max);margin:0 auto;
  display:grid;grid-template-columns:1fr;gap:36px;align-items:center;
}
.sorumi-hero-copy{max-width:34rem}
.sorumi-hero-copy .eyebrow{color:var(--accent)}
.sorumi-hero-copy h1{
  font-size:clamp(2.9rem,8vw,5rem);margin:8px 0 14px;max-width:9ch;color:var(--text);
}
.sorumi-hero-copy .lead{max-width:34ch;color:var(--text-muted)}

/* Right subject: child is primary plane; mascot integrates on top */
.sorumi-hero-subject{
  position:relative;
  width:min(100%,440px);
  margin:0 auto;
  aspect-ratio:1 / 1.02;
}
.sorumi-child-slot{
  position:absolute;inset:0 6% 8% 0;
  margin:0;min-height:0;aspect-ratio:auto;height:auto;
  border-radius:50%;
  border:2.5px dashed var(--border-accent);
  /* Override global striped pending — that read as a giant deco circle */
  background:linear-gradient(165deg, var(--accent-wash) 0%, var(--surface-alt) 100%);
  place-items:center;padding:0;
  z-index:1;
}
.sorumi-child-slot figcaption{
  border-radius:var(--radius-pill);
  border-color:var(--border-accent);
  background:var(--surface);
  color:var(--text-muted);
}

/* Explicit cut-out placeholder — never a character-sheet rectangle */
.sorumi-mascot-slot{
  margin:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;text-align:center;
  border-radius:50%;
  background:var(--surface);
  border:2.5px dashed var(--accent-tint);
  box-shadow:0 0 0 10px var(--accent-wash);
}
.sorumi-mascot-slot figcaption{
  margin:0;padding:0 10px;
  font-size:.74rem;line-height:1.35;color:var(--text-muted);font-weight:550;
}
.sorumi-mascot-slot-disk{
  width:46%;aspect-ratio:1;border-radius:50%;
  background:var(--accent-tint);opacity:.28;
}
.sorumi-mascot-slot--hero{
  position:absolute;z-index:2;
  width:44%;aspect-ratio:1;
  right:0;bottom:0;
}

.sorumi-path{
  padding:var(--space-section) 0 calc(var(--space-section) - 4px);
  background:var(--bg);
  scroll-margin-top:24px;
}
.sorumi-path-head{max-width:40rem;margin:0 0 28px}
.sorumi-path-head .eyebrow{color:var(--accent)}
.sorumi-path-head .lead{max-width:42ch}
.sorumi-orbs{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:22px;
  position:relative;
}
.sorumi-orbs::before{
  content:"";position:absolute;left:50%;top:6%;bottom:6%;width:2px;
  background:var(--accent-tint);opacity:.35;
  transform:translateX(-50%);
}
.sorumi-orb{
  position:relative;z-index:1;
  width:min(100%,340px);aspect-ratio:1;margin:0 auto;
  border-radius:50%;
  display:grid;
  grid-template-rows:1fr auto auto auto;
  align-items:center;justify-items:center;
  text-align:center;gap:0;
  padding:8% 10% 12%;
  background:var(--surface);
  border:2.5px solid var(--border-accent);
  color:var(--accent-tint);
  box-sizing:border-box;
  outline:none;
  transition:
    border-color 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}
.sorumi-orb--starters{background:var(--accent-wash)}
.sorumi-orb--movers{background:var(--surface);border-color:var(--accent-tint)}
.sorumi-orb--flyers{background:var(--surface-alt)}
.sorumi-orb:hover,
.sorumi-orb:focus-visible{
  border-color:var(--accent);
  border-width:3px;
  transform:translateY(-3px);
  box-shadow:0 10px 0 -6px var(--accent-wash);
}
.sorumi-orb:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:6px;
}
.sorumi-companion{
  display:grid;place-items:end center;
  width:86%;max-width:none;align-self:stretch;
  line-height:0;color:inherit;min-height:0;padding-top:4%;
  transition:transform 200ms ease;
}
.sorumi-orb:hover .sorumi-companion,
.sorumi-orb:focus-visible .sorumi-companion{
  transform:translateY(-4px);
}
.sorumi-companion svg{width:100%;height:auto;display:block;max-height:100%}
.sorumi-orb-level{
  margin:0;font-size:.68rem;font-weight:700;letter-spacing:var(--tracking-wide);
  text-transform:uppercase;color:var(--accent);
}
.sorumi-orb strong{display:block;color:var(--text);font-size:1.15rem;line-height:1.1;margin-top:1px}
.sorumi-orb > p{margin:3px 0 0;color:var(--text-muted);font-size:.8rem;max-width:14ch;line-height:1.25}

.sorumi-feats{
  padding:var(--space-section) 0;
  background:var(--surface);
  border-radius:0;
}
.sorumi-feats-head{margin:0 0 22px}
.sorumi-feats-head .eyebrow{color:var(--accent)}
.sorumi-feat-row{
  list-style:none;margin:0;padding:18px 12px;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 10px;
  background:var(--accent-wash);
  border:1.5px solid var(--border-accent);
  border-radius:calc(var(--radius) + 8px);
}
.sorumi-feat-row li{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;min-height:var(--tap-min);text-align:center;
  border-radius:var(--radius);
  padding:6px 4px;
  transition:transform 160ms ease;
}
.sorumi-feat-ico{
  display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:var(--surface);color:var(--accent-tint);
  border:1.5px solid var(--border-accent);
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    transform 180ms ease;
}
.sorumi-feat-row li:hover .sorumi-feat-ico,
.sorumi-feat-row li:focus-within .sorumi-feat-ico{
  border-color:var(--accent);
  transform:translateY(-2px);
}
.sorumi-feat-row li:hover{transform:translateY(-1px)}
.sorumi-feat-label{
  font-size:.88rem;font-weight:650;color:var(--text);letter-spacing:-.01em;
}
.sorumi-feat-bee .sorumi-feat-ico{
  background:var(--accent-tint);color:var(--surface);border-color:var(--accent-tint);
}
.sorumi-feat-bee .sorumi-feat-label{color:var(--accent)}

.sorumi-stage{
  position:relative;
  margin:0 calc(-1 * var(--gutter));
  padding:56px var(--gutter) 64px;
  background:
    radial-gradient(circle at 22% 58%, var(--accent-tint) 0 18%, transparent 48%),
    linear-gradient(180deg, var(--surface-alt) 0%, var(--accent-wash) 100%);
  border-top:0;
  overflow:hidden;
}
.sorumi-stage-soft{position:absolute;inset:0;z-index:0}
.sorumi-stage-frame{
  position:relative;z-index:1;
  max-width:var(--page-max);margin:0 auto;
  display:grid;grid-template-columns:1fr;gap:24px;
  align-items:end;justify-items:center;text-align:center;
}
.sorumi-mascot-slot--stage{
  width:min(100%,420px);aspect-ratio:1;
  border-width:3px;
  box-shadow:
    0 0 0 16px var(--surface),
    0 0 0 20px var(--border-accent);
}
.sorumi-mascot-slot--stage .sorumi-mascot-slot-disk{width:54%;opacity:.32}
.sorumi-mascot-slot--stage figcaption{font-size:.86rem}
.sorumi-stage-copy{max-width:26rem;align-self:center}
.sorumi-stage-copy .eyebrow{color:var(--accent)}
.sorumi-stage-copy .lead{margin-inline:auto;color:var(--text-muted)}

/* Light Sorumi close — not generic dark .cta-band */
.sorumi-next{
  padding:var(--space-section) 0 calc(var(--space-section) + 4px);
  text-align:center;
  background:var(--bg);
}
.sorumi-next .eyebrow{color:var(--accent)}
.sorumi-next .lead{margin-inline:auto;max-width:36ch}
.sorumi-next .actions{justify-content:center;gap:14px}

@media(min-width:720px){
  .sorumi-hero-grid{
    grid-template-columns:minmax(0,0.95fr) minmax(0,1.05fr);
    gap:48px;align-items:center;
  }
  .sorumi-hero-subject{margin:0 0 0 auto}
  .sorumi-orbs{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;align-items:stretch;padding:4px 0;
  }
  .sorumi-orbs::before{
    left:16%;right:16%;top:50%;bottom:auto;width:auto;height:2px;
    transform:none;
  }
  .sorumi-orb{width:100%;max-width:none}
  .sorumi-feat-row{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;padding:22px 18px}
  .sorumi-stage-frame{
    grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr);
    gap:36px;text-align:left;justify-items:stretch;align-items:center;
  }
  .sorumi-mascot-slot--stage{justify-self:center;width:min(100%,440px)}
  .sorumi-stage-copy .lead{margin-inline:0}
}
@media(min-width:900px){
  .sorumi-hero{padding:68px var(--gutter) 76px}
  .sorumi-hero-copy h1{font-size:clamp(3.6rem,6vw,5.4rem)}
  .sorumi-hero-subject{width:min(100%,480px)}
  .sorumi-companion{width:82%}
}
@media(min-width:1200px){
  .sorumi-hero-grid{gap:64px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,
  *::before,
  *::after{
    scroll-behavior:auto!important;
    transition:none!important;
    animation:none!important;
  }
  .sorumi-orb:hover,
  .sorumi-orb:focus-visible,
  .sorumi-feat-row li:hover,
  .sorumi-feat-row li:hover .sorumi-feat-ico,
  .sorumi-orb:hover .sorumi-companion,
  .sorumi-orb:focus-visible .sorumi-companion{
    transform:none;
  }
}

/* ============================================================
   Sorumi Structure & UX Pass
   Appended last on purpose: the route-scoped Sorumi rules above sit after
   the shared max-width:760px block, so mobile overrides have to come last
   to win at equal specificity.
   ============================================================ */

/* ---- Key Features: give the row a real hover response -------------
   Before this pass the only feedback was translateY(-1px); colour,
   background, border and shadow were identical at rest and on hover. */
.sorumi-feat-row li{
  transition:transform 160ms ease, background-color 180ms ease;
}
.sorumi-feat-row li:hover,
.sorumi-feat-row li:focus-within{
  transform:translateY(-1px);
  background:var(--surface-alt);  /* Vanilla. White on the row's own cream panel
                                     is a 1.03 step — visually nothing. Vanilla
                                     is 1.16 and, more to the point, a hue
                                     change, so the cell reads as a cell. */
}
.sorumi-feat-row li:hover .sorumi-feat-ico,
.sorumi-feat-row li:focus-within .sorumi-feat-ico{
  background:var(--surface);      /* white disc lifted out of the vanilla row */
  border-color:var(--accent);
  color:var(--accent);            /* raw tint 4C9DB0 on white is 3.11; accent is 6.06 */
  transform:translateY(-2px) scale(1.04);
}
/* Spelling Bee already carries an emphasis state — deepen it instead of
   lightening it, or hover would erase the emphasis. */
.sorumi-feat-row li.sorumi-feat-bee:hover .sorumi-feat-ico,
.sorumi-feat-row li.sorumi-feat-bee:focus-within .sorumi-feat-ico{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--surface);
}

/* ---- Learning Path circles ----------------------------------------
   The focus treatment is kept so it is ready the day an orb gains a real
   destination. It does not fire today: the list items are not focusable,
   because a focusable element with no role and no action is a dead stop
   for keyboard users. See the UX pass report. */

/* ---- Section rhythm: a little more air into the features band ---- */
body[data-route="/english/sorumi/"] .sorumi-feats{
  padding-top:calc(var(--space-section) + 18px);
}

/* ---- Mobile header -------------------------------------------------
   A 4-up tap grid already exists at max-width:900px. This block extends it
   rather than restating it: the selectors deliberately match that rule's
   shape (header.site > nav[aria-label="主要導覽"]), so the two compose by
   source order. An earlier draft used the shorter `header.site nav a`, lost
   on specificity, and left the bar off-centre. Zero JavaScript. */
@media(max-width:760px){
  /* The route-scoped Sorumi header rule further up re-asserts the desktop
     gutter with max(), which silently cancelled the 20px mobile gutter set
     in the earlier block and left the header 8px out of line with the page
     body. Restore the mobile gutter here, where it is last and wins. */
  body[data-route="/english/sorumi/"] header.site{
    padding-left:var(--gutter-sm);padding-right:var(--gutter-sm);
  }

  /* Edge to edge: the divider rules should reach the screen edges, not stop
     at the text gutter. */
  header.site > nav[aria-label="主要導覽"]{
    gap:0;
    width:calc(100% + var(--gutter-sm) * 2);
    margin-left:calc(-1 * var(--gutter-sm));
    margin-right:calc(-1 * var(--gutter-sm));
    padding-top:0;
    position:relative;
  }
  header.site > nav[aria-label="主要導覽"] a{
    min-height:52px;
    font-size:.9rem;
    padding:8px 4px;
    position:relative;
  }
  /* Hairline between cells, drawn with currentColor so one rule serves the
     dark Sorumi header and the light header on every other route. */
  header.site > nav[aria-label="主要導覽"] a + a::before{
    content:"";position:absolute;left:0;top:14px;bottom:14px;width:1px;
    background:currentColor;opacity:.16;pointer-events:none;
  }
  /* Touch has no hover, so the desktop underline is replaced by a top bar on
     the active route — a cue that does not depend on a pointer. */
  header.site > nav[aria-label="主要導覽"] a::after{display:none}
  header.site > nav[aria-label="主要導覽"] a[aria-current=page]{font-weight:700}
  header.site > nav[aria-label="主要導覽"] a[aria-current=page]::after{
    display:block;content:"";
    position:absolute;left:18%;right:18%;top:0;bottom:auto;
    width:auto;height:3px;
    background:currentColor;opacity:1;
    transform:none;
    border-radius:0 0 3px 3px;
  }

  /* ---- Learning Path on a narrow screen ----
     340px circles on a 390px viewport ate roughly a quarter of the page. */
  .sorumi-orbs{gap:16px}
  .sorumi-orb{
    width:min(78%,236px);
    padding:11% 13% 15%;
    border-width:2px;
  }
  .sorumi-orb strong{font-size:1rem}
  .sorumi-orb > p{font-size:.73rem;max-width:13ch;line-height:1.3}
  .sorumi-orb-level{font-size:.6rem}
  .sorumi-mascot-slot--stage{
    width:min(100%,288px);
    box-shadow:0 0 0 10px var(--surface),0 0 0 13px var(--border-accent);
  }
}

/* ---- Reduced motion, re-stated after the rules above ----
   Colour and background responses stay; only movement is removed. */
@media(prefers-reduced-motion:reduce){
  .sorumi-feat-row li:hover,
  .sorumi-feat-row li:focus-within,
  .sorumi-feat-row li:hover .sorumi-feat-ico,
  .sorumi-feat-row li:focus-within .sorumi-feat-ico,
  .sorumi-orb:hover,
  .sorumi-orb:focus-visible,
  .sorumi-orb:hover .sorumi-companion,
  .sorumi-orb:focus-visible .sorumi-companion{
    transform:none;
  }
}


/* ============================================================
   Release Preparation
   Three separate jobs, kept together because they all exist to make the
   public build differ from the working build in controlled ways.
   ============================================================ */

/* ---- 1. Release layout without the unfinished visual slots ----------
   build.py strips the dev-only regions, so in a release build these grids
   have one child instead of two. Collapsing them to a single column is what
   "degrade to a safe plain layout" means here: the copy keeps its own
   measure and the band keeps its proportions, and nothing is invented to
   fill the hole. */
body[data-build="release"] .sorumi-hero-grid,
body[data-build="release"] .sorumi-stage-frame,
body[data-build="release"] .hero-compose,
body[data-build="release"] .ed-split{
  grid-template-columns:minmax(0,1fr);
}
/* The Yevli hero paints a diagonal wedge sized for a two-column composition.
   With the device shot stripped, that wedge leaves a dead half-band, so the
   release build uses the same plain horizontal wash the narrow layout uses. */
body[data-build="release"] .product-hero--yevli{
  background:linear-gradient(180deg, var(--hero-from) 0%, var(--bg) 62%);
}
body[data-build="release"] .sorumi-hero-grid{
  justify-items:start;
}
/* Copy only, so it lines up with the page gutter like every other band on
   this page rather than floating in the middle of an empty stage. */
body[data-build="release"] .sorumi-stage-frame{
  justify-items:start;text-align:left;align-items:center;
}
/* The hero band was sized around a square subject column that is no longer
   there; without this it reads as a very tall strip of gradient. */
body[data-build="release"] .sorumi-hero{
  padding-top:64px;padding-bottom:72px;
}
body[data-build="release"] .sorumi-stage{
  padding-top:64px;padding-bottom:68px;
}
body[data-build="release"] .sorumi-stage-copy{
  max-width:34rem;
}
/* A centred band needs its children centred as boxes, not just their text:
   the global p{max-width:68ch} otherwise anchors the paragraph box to the
   left edge and only centres the words inside it. Pre-existing on
   .sorumi-next, visible once the section sat on its own. */
.sorumi-next > *{margin-left:auto;margin-right:auto}
body[data-build="release"] .sorumi-stage-copy > *{margin-left:0;margin-right:0}

/* ---- 2. Migrated Yevli legal documents ------------------------------
   Ported from the legacy stylesheet so the frozen text keeps the measure and
   rhythm it was approved with. Expressed in L3 role tokens — the legacy file
   used raw colours, which base.css is not allowed to carry. */
.legal-doc{max-width:800px;margin:0 auto;padding-top:34px;padding-bottom:48px}
.legal-doc h1{font-size:clamp(2rem,4vw,3rem)}
.legal-doc h2{font-size:1.4rem;margin-top:38px}
.legal-doc li{margin-bottom:12px}
.legal-doc ul{padding-left:20px}
.legal-doc p,.legal-doc li{overflow-wrap:anywhere}
.legal-doc p{max-width:var(--measure)}
.legal-doc > nav{
  display:flex;flex-wrap:wrap;gap:4px 18px;align-items:center;
  border-bottom:1px solid var(--border);padding-bottom:14px;
}
.legal-doc > nav a{
  display:inline-flex;align-items:center;min-height:var(--tap-min);
  font-size:.93rem;text-underline-offset:4px;
}
.legal-doc .brand{margin-top:30px;color:var(--accent);font-weight:600}
.legal-doc .meta{color:var(--text-muted);font-size:.9rem}
.legal-doc .language{
  border-top:1px solid var(--border);margin-top:52px;padding-top:32px;
}
.legal-doc .language h1{font-size:2rem}
.legal-doc .pill{font-size:.8rem;color:var(--accent);font-weight:650}
.legal-doc a{text-underline-offset:4px}

/* ---- 3. Sorumi hero atmosphere on a narrow screen -------------------
   --c sat at left:46%/top:10%, which on a 390px viewport put a 62px disc on
   top of the "Sorumi" wordmark. These circles are decoration behind the
   copy, so the fix is to move it out of the text column rather than to move
   the text. Parked bottom-right, below the CTAs, where the column is empty
   in both build modes. */
@media(max-width:760px){
  .sorumi-hero{padding-top:44px;padding-bottom:52px}
  /* The hero's decorative circles are removed below 760px rather than moved.
     Measured, not assumed: on a 390px viewport the copy column fills the band
     almost completely — 44px of clear space above the eyebrow in a release
     build — so every position that still reads as decoration on a desktop
     lands on the wordmark or the buttons here. The gradient already carries
     the mood, and these are aria-hidden ornaments, so dropping them costs
     nothing and removes the collision for good instead of relocating it.
     The mascot stage band goes the same way and for the same measured
     reason: once its unfinished figure is stripped for release the band is
     copy only, and both of its circles landed on the heading. */
  .sorumi-soft{display:none}
}