.experience-hero,.access-explorer,.experience-audiences,.experience-process,.experience-closing { width:min(1160px,100%); margin-inline:auto; }
.experience-eyebrow { display:flex; gap:.6rem; align-items:center; margin:0 0 1.4rem; font-size:.7rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--accent-text); }
.experience-eyebrow > span { width:.45rem; height:.45rem; border-radius:50%; background:currentColor; }
.experience-lede { max-width:34rem; color:var(--text-secondary); font-size:1.08rem; line-height:1.8; margin:1.7rem 0; }
.experience-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.7rem; }
.experience-button { display:inline-flex; align-items:center; justify-content:space-between; gap:1.5rem; background:var(--button-background); color:var(--button-text); padding:.95rem 1.2rem; border:1px solid var(--button-background); border-radius:.5rem; font-size:.85rem; font-weight:600; transition:transform 160ms; }
.experience-button:hover { transform:translateY(-2px); }
.experience-button--outline { background:transparent; color:var(--text-primary); border-color:var(--border-strong); }
.experience-down { display:inline-flex; align-items:center; gap:2rem; font-size:.8rem; margin-top:2.5rem; color:var(--text-secondary); }
/* The access example is an open editorial section, not an embedded dashboard. */
.access-explorer {
  display:grid;
  grid-template-columns:minmax(16rem,.85fr) minmax(0,1.35fr);
  column-gap:5rem;
  padding:4.5rem 0;
  border-block:1px solid var(--border-strong);
  scroll-margin-top:7rem;
}
.access-explorer__header h2 {font:500 clamp(2rem,3.8vw,3.5rem)/1.08 var(--font-display);letter-spacing:-.035em;margin:0;max-width:24rem;}
.access-explorer__header > p:last-child {color:var(--text-secondary);font-size:.8rem;line-height:1.7;margin:1.4rem 0 2rem;}
.access-explorer__header > p:last-child span {margin-inline:.4rem;color:var(--text-tertiary);}
.access-explorer__choices {display:flex;flex-direction:column;align-items:stretch;gap:0;}
.access-explorer__choices button {
  appearance:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:transparent;color:var(--text-secondary);padding:1.2rem 0;border:0;border-bottom:1px solid var(--border-strong);
  font:500 .92rem/1.5 var(--font-body);text-align:start;cursor:pointer;
  transition:color 220ms,padding 300ms,border-color 220ms;
}
.access-explorer__choices button span {color:var(--accent);transition:transform 300ms;}
.access-explorer__choices button:hover {color:var(--text-primary);}
.access-explorer__choices button[aria-pressed="true"] {color:var(--text-primary);padding-left:.8rem;border-bottom-color:var(--accent);}
.access-explorer__choices button[aria-pressed="true"] span {transform:rotate(45deg);}
.access-explorer__choices button:focus-visible {outline:2px solid var(--accent);outline-offset:5px;}
.access-explorer__results {display:grid;align-self:center;min-width:0;}
.access-result {grid-area:1/1;min-width:0;}
.access-result[hidden] {display:none;}
.access-route {display:grid;grid-template-columns:1fr minmax(1.5rem,.4fr) 1.15fr minmax(1.5rem,.4fr) 1fr;align-items:center;gap:0;padding:3rem 0 2.5rem;}
.access-route__node {display:flex;align-items:center;flex-direction:column;gap:.8rem;text-align:center;min-width:0;font-size:.76rem;}
.access-route__node code,.access-route__node small {font-size:.66rem;overflow-wrap:anywhere;color:var(--text-secondary);line-height:1.6;}
.access-route__symbol {display:grid;place-items:center;width:3.8rem;height:3.8rem;border:1px solid var(--border-strong);border-radius:50%;font-size:1.7rem;background:var(--background);}
.access-route__node--router .access-route__symbol {width:5rem;height:5rem;background:var(--assetrouter-night);color:var(--assetrouter-cloud);border-color:var(--assetrouter-night);box-shadow:0 0 0 9px var(--secondary-soft);font:500 .85rem var(--font-logo);}
.access-route__status {color:var(--accent-text);font-size:.65rem;font-weight:700;line-height:1.6;}
.access-route__line {position:relative;display:block;height:1px;background:var(--border-strong);margin-top:-3.8rem;}
.access-route__line::after {content:"";position:absolute;left:0;top:-2px;width:30%;height:5px;border-radius:3px;background:var(--accent);}
.access-result--refused .access-route__status {color:var(--accent-strong);}
.access-result--refused .access-route__line:last-of-type {background:repeating-linear-gradient(to right,var(--border-strong) 0 4px,transparent 4px 8px);}
.access-result--refused .access-route__line:last-of-type::after {width:5px;height:13px;top:-6px;left:0;background:var(--accent-strong);border-radius:0;}
.access-result__explanation {padding:1.8rem 0 0;border-top:1px solid var(--border-strong);}
.access-result__explanation h3 {margin:0 0 .8rem;font:400 1.7rem/1.2 var(--font-display);}
.access-result__explanation p {margin:0;max-width:37rem;font-size:.85rem;line-height:1.8;color:var(--text-secondary);}
.access-explorer__record {grid-column:2;display:flex;gap:.8rem;margin:2rem 0 0;color:var(--text-tertiary);font-size:.7rem;line-height:1.7;max-width:34rem;}
@media(prefers-reduced-motion:no-preference) {
  .access-explorer.is-visible .access-result:not([hidden]) .access-route__line::after {animation:access-travel 1.4s cubic-bezier(.2,.6,.3,1) both;}
  .access-explorer.is-visible .access-result:not([hidden]) .access-route__line:last-of-type::after {animation-delay:.55s;}
  .access-explorer.is-visible .access-result--refused:not([hidden]) .access-route__line:last-of-type::after {animation:access-stop .4s .6s both;}
  @keyframes access-travel {0%{opacity:0;transform:translateX(0);}20%{opacity:1;}85%{opacity:1;}100%{opacity:0;transform:translateX(230%);}}
  @keyframes access-stop {from{opacity:0;transform:scaleY(0);}to{opacity:1;transform:scaleY(1);}}
}
.experience-section-heading h2 { font-size:clamp(2rem,4vw,3.5rem);line-height:1.1;font-weight:500;letter-spacing:-.045em;max-width:46rem;margin:0; text-wrap:balance; }
.experience-audiences { padding-top:7rem; }
.experience-audiences__grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:2.5rem;border-block:1px solid var(--border-strong); }
.experience-audiences__grid article { padding:2rem 2.5rem 2rem 0; }
.experience-audiences__grid article+article { border-left:1px solid var(--border-strong);padding-left:2.5rem;padding-right:0; }
.experience-audiences__index { font-family:monospace;font-size:.75rem;color:var(--accent-text); }
.experience-audiences h3 { font:500 clamp(1.8rem,3vw,2.5rem)/1.2 "Newsreader",serif;margin:1.5rem 0 .8rem; }
.experience-audiences article p { font-size:.95rem;line-height:1.8;color:var(--text-secondary);max-width:29rem; }
.experience-audiences article a { display:inline-flex;gap:2rem;font-size:.85rem;font-weight:600;margin-top:1.4rem; }
.experience-process { display:grid;grid-template-columns:1fr 1fr;gap:4rem;padding-block:7rem; }
.experience-process ol { list-style:none;padding:0;margin:0; }
.experience-process li { display:flex;gap:1.5rem; padding:1.4rem 0;border-top:1px solid var(--border-strong); }
.experience-process li > span { flex:0 0 1.5rem;white-space:nowrap;padding-top:.2rem;font: .8rem monospace;color:var(--accent-text); }
.experience-process h3 { margin:0;font-weight:500;font-size:1.3rem; }
.experience-process li p { color:var(--text-secondary);line-height:1.8;font-size:.85rem; }
.experience-closing { padding:3rem;background:var(--background-elevated);border:1px solid var(--border-strong);border-radius:1rem; }
.experience-closing h2 { font:500 clamp(2rem,4vw,3.5rem)/1.1 "Newsreader",serif;letter-spacing:-.03em;margin:0; }
.experience-closing p { color:var(--text-secondary);line-height:1.8;margin:1rem 0 2rem; }
.experience-text-link { display:inline-flex;gap:1.5rem;font-size:.85rem;padding:1rem; }
@media (max-width:950px) { .experience-process { gap:2.5rem; } }
@media (max-width:720px) { .experience-audiences { padding-top:4rem; }.experience-audiences__grid { grid-template-columns:1fr; }.experience-audiences__grid article+article { border-left:0;border-top:1px solid var(--border-strong);padding-left:0; }.experience-process { grid-template-columns:1fr;padding-block:4rem; }.experience-closing { padding:1.6rem; }.experience-actions { align-items:stretch; }.experience-button { flex:1 1 auto; } }

@media(max-width:950px) {.access-explorer {column-gap:2.5rem;}}
@media(max-width:720px) {
  .access-explorer {grid-template-columns:1fr;gap:1rem;padding:2.8rem 0;}
  .access-explorer__header h2 {max-width:none;}
  .access-explorer__choices button {padding-block:.85rem;}
  .access-route {padding:2.5rem 0 1.5rem;grid-template-columns:1fr 1.2rem 1.15fr 1.2rem 1fr;}
  .access-route__symbol {width:3rem;height:3rem;font-size:1.5rem;}
  .access-route__node--router .access-route__symbol {width:3.8rem;height:3.8rem;}
  .access-route__node {font-size:.7rem;}
  .access-route__line {margin-top:-4rem;}
  .access-explorer__record {grid-column:1;margin-top:.8rem;}
}

/* A quiet opening gives the name and one sentence the whole first view. */
.experience-hero {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:min(660px,78svh);
  padding:8rem 0 3.5rem;
  text-align:center;
}
.experience-hero__copy {width:100%;}
.experience-hero h1 {
  margin:0;
  font:400 clamp(4rem,9vw,8.5rem)/1.12 var(--font-logo);
  letter-spacing:-.065em;
  color:var(--text-primary);
}
.experience-tagline {
  margin:1.7rem auto 2.5rem;
  max-width:44rem;
  font:400 clamp(1.3rem,2.5vw,2rem)/1.4 var(--font-display);
  color:var(--text-secondary);
  text-wrap:balance;
}
.experience-tagline em {color:var(--text-primary);font-weight:400;}
.experience-hero .experience-actions {justify-content:center;}
.experience-hero .experience-down {margin-top:2.5rem;}
.experience-audiences .experience-lede {max-width:43rem;}
@media(min-width:721px) and (max-width:800px) {
  .experience-hero {min-height:620px;padding:7.5rem 0 3rem;}
}
@media(max-width:720px) {
  .experience-hero {min-height:0;padding:9rem 0 4rem;}
  .experience-hero h1 {font-size:clamp(3rem,12vw,5.4rem);letter-spacing:-.055em;}
  .experience-tagline {max-width:24rem;margin-block:1.4rem 2rem;}
  .experience-hero .experience-actions {max-width:24rem;margin-inline:auto;}
  .experience-hero .experience-down {margin-top:2rem;}
}
