/* ADAM redesign — landing (index.html / welcome.js). Everything is scoped to #welcome. */
#welcome{
  --lp-gutter:clamp(16px,4vw,56px);
  --lp-max:1240px;
  --lp-glass:color-mix(in srgb,var(--surface) 68%,transparent);
  --lp-glass-strong:color-mix(in srgb,var(--surface) 84%,transparent);
  --lp-glass-line:color-mix(in srgb,var(--line) 80%,transparent);
  --lp-blur:saturate(1.4) blur(14px);
  color:var(--ink);background:transparent;overflow-x:clip;min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;
}
#welcome :where(h1,h2,h3,p,ul,dl,dd,figure){margin:0;padding:0}
#welcome :where(ul){list-style:none}
#welcome p{color:var(--muted)}
#welcome a:focus-visible,#welcome button:focus-visible,#welcome select:focus-visible{outline:2px solid var(--brand);outline-offset:3px}

/* ---------- header ---------- */
#welcome .lp-header{
  width:100%;max-width:var(--lp-max);margin-inline:auto;box-sizing:border-box;
  display:flex;align-items:center;justify-content:flex-start;gap:var(--sp-5);padding:var(--sp-5) var(--lp-gutter);
  height:auto;border:0;background:transparent;font-size:var(--fs-md);
}
#welcome .lp-brand{display:inline-flex;align-items:center;gap:10px;font-size:1.375rem;font-weight:700;letter-spacing:.06em;color:var(--ink)}
#welcome .lp-mark{
  display:grid;place-items:center;width:34px;height:34px;flex:none;
  border-radius:60% 8px 60% 8px; /* a leaf */
  background:var(--brand);color:var(--paper);
  font:700 1.25rem/1 var(--font-display);letter-spacing:0;padding-bottom:3px;box-sizing:border-box;
}
#welcome .lp-nav{display:flex;justify-content:flex-start;align-items:center;gap:var(--sp-5);margin-top:0;margin-inline-start:var(--sp-5);font-size:var(--fs-sm)}
#welcome .lp-nav a{color:var(--muted);padding:6px 0;font-size:inherit;border-bottom:1.5px solid transparent;transition:color .2s,border-color .2s}
#welcome .lp-nav a:hover{color:var(--ink);border-color:currentColor}
#welcome .lp-tools{display:flex;align-items:center;gap:var(--sp-2);margin-inline-start:auto}
#welcome .lp-tools .global-controls{gap:var(--sp-2)}
#welcome .lp-tools .global-controls select,
#welcome .lp-tools .icon-button{
  height:38px;box-sizing:border-box;border:1px solid var(--lp-glass-line);border-radius:var(--r-sm);
  background:var(--lp-glass);-webkit-backdrop-filter:var(--lp-blur);backdrop-filter:var(--lp-blur);color:var(--ink);
}
#welcome .lp-tools .global-controls select{font-size:var(--fs-xs);padding:0 8px;max-width:84px}
#welcome .lp-tools .icon-button{min-width:38px;font-size:18px}

/* ---------- buttons ---------- */
#welcome .lp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;box-sizing:border-box;
  padding:0 22px;border-radius:var(--r-md);border:1px solid transparent;
  font:600 var(--fs-md)/1.2 var(--font-body);letter-spacing:0;cursor:pointer;text-decoration:none;
  transition:background-color .2s,border-color .2s,transform .2s var(--ease-out);
}
#welcome .lp-btn:active{transform:translateY(1px)}
#welcome .lp-btn-main{background:var(--brand);border-color:var(--brand);color:var(--paper)}
#welcome .lp-btn-main:hover{background:color-mix(in srgb,var(--brand) 86%,var(--ink))}
#welcome .lp-btn-glass{
  background:var(--lp-glass);border-color:var(--lp-glass-line);color:var(--ink);
  -webkit-backdrop-filter:var(--lp-blur);backdrop-filter:var(--lp-blur);
}
#welcome .lp-btn-glass:hover{background:var(--lp-glass-strong);border-color:var(--brand)}
#welcome .lp-btn-sm{min-height:38px;padding:0 16px;font-size:var(--fs-sm);border-radius:var(--r-sm)}

/* ---------- page ---------- */
#welcome .lp{
  flex:1;width:100%;max-width:var(--lp-max);margin-inline:auto;box-sizing:border-box;
  padding:0 var(--lp-gutter) var(--sp-8);
}

/* hero: left-aligned type, the right side belongs to the knowledge-tree canvas */
#welcome .lp-hero{
  position:relative;isolation:isolate;
  min-height:min(78svh,760px);display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(32px,7vh,88px) clamp(40px,8vh,96px);
}
#welcome .lp-hero::before{ /* soft reading scrim, not decoration: keeps type legible over branches */
  content:"";position:absolute;z-index:-1;inset:-10% 30% -10% -30%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--paper) 72%,transparent),transparent);
}
#welcome .lp-title{
  font-family:var(--font-display);font-weight:750;
  font-size:clamp(2.5rem,6.4vw,6rem);line-height:.94;letter-spacing:-.045em;
  color:var(--ink);max-width:min(100%,10.5em);text-wrap:balance;
}
#welcome .lp-line{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.02em}
#welcome .lp-line>span{display:inline-block}
/* each sentence steps further out, like growth along a branch */
#welcome .lp-line{padding-inline-start:calc(var(--i,0) * .55em)}
#welcome .lp-lede{
  margin-top:clamp(24px,4vh,40px);max-width:44ch;
  font-size:clamp(1.0625rem,1.4vw,1.25rem);line-height:1.6;color:color-mix(in srgb,var(--ink) 78%,var(--muted));
}
#welcome .lp-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-6)}
#welcome .lp-free{margin-top:var(--sp-3);font-size:var(--fs-sm)}
#welcome .lp-facts{display:flex;flex-wrap:wrap;gap:var(--sp-5) var(--sp-7);margin-top:clamp(32px,6vh,64px)}
#welcome .lp-facts>div{display:flex;flex-direction:column-reverse;gap:2px;padding-inline-start:var(--sp-4);border-inline-start:2px solid color-mix(in srgb,var(--brand) 45%,transparent)}
#welcome .lp-facts dd{font:650 var(--fs-2xl)/1 var(--font-display);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
#welcome .lp-facts dt{font-size:var(--fs-sm);color:var(--muted)}

/* one orchestrated moment: the headline grows in, line by line, on first paint only */
@media (prefers-reduced-motion:no-preference){
  #welcome .lp-enter .lp-line>span{animation:lp-rise .9s var(--ease-out) both;animation-delay:calc(120ms + var(--i,0) * 140ms)}
  #welcome .lp-enter :is(.lp-lede,.lp-hero>.lp-actions,.lp-free,.lp-facts){animation:lp-fade .8s ease-out .62s both}
}
@keyframes lp-rise{from{transform:translateY(105%)}to{transform:none}}
@keyframes lp-fade{from{opacity:0}to{opacity:1}}

/* ---------- headings ---------- */
#welcome .lp-h2{
  font-family:var(--font-display);font-weight:700;font-size:clamp(1.875rem,3.6vw,3rem);
  line-height:1.05;letter-spacing:-.035em;color:var(--ink);max-width:20ch;text-wrap:balance;
}
#welcome .lp-h3{font-family:var(--font-display);font-weight:650;font-size:var(--fs-xl);line-height:1.15;letter-spacing:-.025em;color:var(--ink);text-wrap:balance}

/* ---------- audiences ---------- */
#welcome .lp-audiences{padding-top:var(--sp-7);scroll-margin-top:var(--sp-5)}
#welcome .lp-tabs{
  display:inline-flex;flex-wrap:wrap;gap:4px;margin:var(--sp-5) 0 var(--sp-4);padding:4px;
  border:1px solid var(--lp-glass-line);border-radius:var(--r-pill);
  background:var(--lp-glass);-webkit-backdrop-filter:var(--lp-blur);backdrop-filter:var(--lp-blur);
}
#welcome .lp-tabs button{
  border:0;border-radius:var(--r-pill);background:transparent;color:var(--muted);
  padding:10px 20px;min-height:44px;font:600 var(--fs-sm)/1.2 var(--font-body);cursor:pointer;transition:background-color .2s,color .2s;
}
#welcome .lp-tabs button:hover{color:var(--ink)}
#welcome .lp-tabs button.active{background:var(--ink);color:var(--paper)}
#welcome .lp-panel{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);
  padding:clamp(22px,3.5vw,44px);border-radius:var(--r-lg);
  border:1px solid var(--lp-glass-line);background:var(--lp-glass);
  -webkit-backdrop-filter:var(--lp-blur);backdrop-filter:var(--lp-blur);
}
#welcome .lp-panel-text>p:first-of-type{margin-top:var(--sp-4);max-width:56ch;font-size:var(--fs-md);line-height:1.65}
#welcome .lp-fine{margin-top:var(--sp-4);font-size:var(--fs-xs)}
#welcome .lp-roster{align-self:start;padding:var(--sp-5);border-radius:var(--r-md);background:color-mix(in srgb,var(--surface-alt) 75%,transparent)}
#welcome .lp-roster figcaption{font:600 var(--fs-sm)/1.3 var(--font-display);color:var(--ink);margin-bottom:var(--sp-2)}
#welcome .lp-roster li{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) 0;border-top:1px solid var(--line)}
#welcome .lp-roster li:first-child{border-top:0}
#welcome .lp-avatar{
  flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--soft);color:var(--brand);font:700 var(--fs-md)/1 var(--font-display);
}
#welcome .lp-who{display:flex;flex-direction:column;min-width:0}
#welcome .lp-who strong{font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#welcome .lp-who small{font-size:var(--fs-xs);color:var(--muted)}
#welcome .lp-score{margin-inline-start:auto;font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}
#welcome .lp-score b{font:650 var(--fs-lg)/1 var(--font-display);color:var(--brand);margin-inline-end:2px}

/* ---------- career pathways: subjects grow into a profession ---------- */
#welcome .lp-paths{padding-top:var(--sp-8)}
#welcome .lp-paths-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-5) var(--sp-7);align-items:end;margin-bottom:var(--sp-6)}
#welcome .lp-paths-head p{max-width:46ch;font-size:var(--fs-md);line-height:1.6}
#welcome .lp-routes{border-top:1px solid var(--line)}
#welcome .lp-routes li{border-bottom:1px solid var(--line)}
#welcome .lp-route{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) auto;gap:var(--sp-3) var(--sp-6);align-items:center;
  padding:var(--sp-5) var(--sp-4);margin-inline:calc(var(--sp-4) * -1);border-radius:var(--r-md);
  color:var(--ink);text-decoration:none;transition:background-color .25s;
}
#welcome .lp-route:hover{background:var(--lp-glass);-webkit-backdrop-filter:var(--lp-blur);backdrop-filter:var(--lp-blur)}
#welcome .lp-route-goal{display:flex;flex-direction:column;gap:4px}
#welcome .lp-route-goal strong{font:650 var(--fs-xl)/1.15 var(--font-display);letter-spacing:-.025em}
#welcome .lp-route-goal small{font-size:var(--fs-sm);color:var(--muted)}
#welcome .lp-route-subjects{display:flex;flex-wrap:wrap;gap:6px}
#welcome .lp-route-subjects span{
  padding:4px 11px;border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:500;
  background:color-mix(in srgb,var(--soft) 80%,transparent);color:color-mix(in srgb,var(--ink) 82%,var(--brand));
}
#welcome .lp-route-cta{font-size:var(--fs-sm);font-weight:600;color:var(--brand);white-space:nowrap;border-bottom:1.5px solid transparent;transition:border-color .2s;justify-self:start}
#welcome .lp-route:hover .lp-route-cta{border-color:currentColor}

/* ---------- note + footer ---------- */
#welcome .lp-note{
  margin-top:var(--sp-7);max-width:72ch;padding:var(--sp-1) 0 var(--sp-1) var(--sp-4);
  border-inline-start:3px solid var(--apricot);font-size:var(--fs-sm);line-height:1.6;color:var(--muted);
}
#welcome .lp-footer{
  width:100%;max-width:var(--lp-max);margin-inline:auto;box-sizing:border-box;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-2) var(--sp-5);
  padding:var(--sp-5) var(--lp-gutter) var(--sp-6);font-size:var(--fs-sm);color:var(--muted);
}
#welcome .lp-footer b{font-family:var(--font-display);letter-spacing:.06em;color:var(--ink);margin-inline-end:var(--sp-2)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  #welcome .lp-panel{grid-template-columns:1fr}
  #welcome .lp-paths-head{grid-template-columns:1fr}
  #welcome .lp-route{grid-template-columns:minmax(0,1fr) auto}
  #welcome .lp-route-subjects{grid-column:1/-1;grid-row:2}
}
@media (max-width:720px){
  #welcome .lp-header{flex-wrap:wrap;row-gap:var(--sp-3);padding-block:var(--sp-4)}
  #welcome .lp-nav{order:3;width:100%;margin:0;gap:var(--sp-2) var(--sp-5);flex-wrap:wrap}
  #welcome .lp-nav a{padding:10px 0}
  #welcome .lp-hero{min-height:0;padding-block:var(--sp-6) var(--sp-7)}
  #welcome .lp-hero::before{inset:-5% -20% -5% -40%}
  #welcome .lp-title{font-size:clamp(2.375rem,11vw,3.5rem);max-width:none}
  #welcome .lp-line{padding-inline-start:calc(var(--i,0) * .32em)}
  #welcome .lp-facts{gap:var(--sp-4) var(--sp-5)}
  #welcome .lp-facts dd{font-size:var(--fs-xl)}
  #welcome .lp-tabs{display:flex;border-radius:var(--r-md)}
  #welcome .lp-tabs button{flex:1 1 auto;padding:10px 12px;border-radius:calc(var(--r-md) - 4px)}
  #welcome .lp-paths{padding-top:var(--sp-7)}
  #welcome .lp-route{grid-template-columns:1fr;margin-inline:0;padding-inline:0}
  #welcome .lp-route-subjects{grid-row:auto}
  #welcome .lp-footer{flex-direction:column}
}
@media (max-width:400px){
  #welcome .lp-brand{font-size:1.125rem}
  #welcome .lp-mark{width:30px;height:30px;font-size:1.0625rem}
  #welcome .lp-tools{gap:6px}
  #welcome .lp-tools .global-controls select{max-width:68px;padding:0 4px}
  #welcome .lp-btn-sm{padding:0 12px}
  #welcome .lp-actions .lp-btn{flex:1 1 100%}
  #welcome .lp-tabs{flex-wrap:nowrap}
  #welcome .lp-tabs button{padding:10px 6px;font-size:var(--fs-xs)}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  #welcome{--lp-glass:color-mix(in srgb,var(--surface) 92%,transparent)}
}