/* ==========================================================================
   Composer Agents — shared styles for the rebranded inner pages
   (plans, faq, contact, account, agents landing, agent articles).

   Layers on top of css/rebrand-home.css, which owns the brand tokens, the
   header/footer chrome, .button, .section-shell and .section-label. Nothing
   here redefines those — this file only adds the page-level furniture the
   home page never needed.
   ========================================================================== */

/* --- Orb canvases -------------------------------------------------------
   Every particle canvas MUST have an explicit CSS size. The engine sizes its
   drawing buffer from offsetWidth × devicePixelRatio; with no CSS size the
   element falls back to its own width/height attributes, so each resize pass
   feeds the previous buffer back in and the canvas grows without bound (a
   74px avatar reached 2400px this way). Sizing every orb from its wrapper
   makes that impossible.
   -------------------------------------------------------------------------- */
canvas[data-ca-orb]{display:block;width:100%;height:100%}

/* --- Page head ---------------------------------------------------------- */

.page-head{
  position:relative;
  padding-top:clamp(132px,13vw,188px);
  padding-bottom:clamp(52px,6vw,80px);
  text-align:center;
}
.page-head::before{
  content:"";
  position:absolute;
  z-index:-1;
  /* Kept clear of the fixed header: the scrolled header is translucent, so
     a halo starting above it reads as a smudge behind the navigation. */
  top:14%;
  left:50%;
  width:min(760px,92vw);
  aspect-ratio:1;
  border-radius:50%;
  background:rgba(212,168,58,.10);
  filter:blur(110px);
  transform:translateX(-50%);
  pointer-events:none;
}
.page-head h1{
  max-width:16ch;
  margin:20px auto 0;
  font-size:clamp(42px,6vw,80px);
  font-weight:500;
  letter-spacing:-.04em;
  line-height:1;
  text-wrap:balance;
}
.page-head>p{
  max-width:60ch;
  margin:26px auto 0;
  color:var(--muted-dark);
  font-size:clamp(16px,1.5vw,18px);
}
.page-head .button{margin-top:34px}

/* Left-aligned variant, for pages that open on a working surface rather
   than on a statement (account). */
.page-head.is-left{text-align:left}
.page-head.is-left h1,.page-head.is-left>p{margin-inline:0}
.page-head.is-left::before{left:22%}

/* --- Generic light surface ---------------------------------------------- */

.surface-paper{
  background:var(--paper);
  color:var(--ink);
}
.surface-paper .section-label{color:var(--gold)}
.surface-paper h2,.surface-paper h3{color:var(--ink)}
.surface-paper p{color:var(--muted-light)}

/* --- Plans -------------------------------------------------------------- */

.period-switch{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:36px;
  padding:5px;
  border:1px solid var(--line-dark);
  border-radius:999px;
  background:rgba(255,255,255,.04);
}
.period-switch button{
  min-height:42px;
  padding:0 24px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:rgba(255,255,255,.62);
  font-size:11px;
  font-weight:650;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:background-color .26s var(--ease),color .26s var(--ease);
}
.period-switch button.is-active{background:var(--gold);color:#fff}
.period-switch button i{font-style:normal;opacity:.7;letter-spacing:.04em;text-transform:none}

.plan-grid{
  padding-top:clamp(44px,5vw,64px);
  padding-bottom:clamp(60px,7vw,96px);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  align-items:stretch;
}
.plan-card{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:44px 32px 34px;
  border:1px solid var(--line-dark);
  border-radius:var(--radius);
  background:rgba(8,22,35,.62);
  backdrop-filter:blur(14px);
  transition:transform .3s var(--ease),border-color .24s ease,background-color .24s ease;
}
.plan-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.3)}
.plan-card.is-chosen{
  border-color:rgba(212,168,58,.62);
  background:linear-gradient(168deg,rgba(212,168,58,.14),rgba(8,22,35,.72));
}
.plan-card.is-featured{
  border-color:rgba(255,255,255,.34);
  background:linear-gradient(168deg,rgba(255,255,255,.09),rgba(8,22,35,.74));
}
.plan-flag{
  position:absolute;
  top:-1px;
  left:32px;
  padding:7px 14px;
  border-radius:0 0 var(--radius) var(--radius);
  background:var(--gold);
  color:#fff;
  font-size:9px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.plan-card.is-featured .plan-flag{background:rgba(255,255,255,.9);color:var(--ink)}
.plan-card h2{
  margin:0;
  font-size:13px;
  font-weight:650;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.plan-price{
  /* Explicit zero bottom margin: the default 1em would be ~60px here,
     because em resolves against this element's own display font-size. */
  margin:22px 0 0;
  display:flex;
  align-items:baseline;
  gap:9px;
  font-size:clamp(46px,5vw,62px);
  font-weight:500;
  letter-spacing:-.04em;
  line-height:1;
}
.plan-price s{
  color:rgba(255,255,255,.32);
  font-size:22px;
  font-weight:400;
  letter-spacing:-.02em;
}
.plan-price span{
  color:rgba(255,255,255,.5);
  font-size:12px;
  font-weight:400;
  letter-spacing:0;
}
.plan-note{
  min-height:20px;
  margin:8px 0 0;
  color:var(--gold-light);
  font-size:11px;
  font-weight:600;
  letter-spacing:.04em;
}
/* Typed as .plan-card>p rather than a bare class so it never has to fight
   the price/note rules above it — those are plain classes on <p> elements
   and would otherwise lose the cascade to a descendant selector. */
.plan-blurb{
  margin:22px 0 0;
  color:var(--muted-dark);
  font-size:13.5px;
  line-height:1.65;
}
.plan-features{
  margin:30px 0 0;
  padding:26px 0 0;
  border-top:1px solid var(--line-dark);
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.plan-features li{
  display:grid;
  grid-template-columns:16px 1fr;
  gap:12px;
  align-items:start;
  color:rgba(255,255,255,.82);
  font-size:13px;
  line-height:1.55;
}
.plan-features li svg{width:14px;height:14px;margin-top:4px;fill:none;stroke:var(--gold-light);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.plan-features li.is-locked{color:rgba(255,255,255,.42)}
.plan-features li.is-locked svg{stroke:rgba(255,255,255,.34)}
.plan-card .button{width:100%}
.plan-card .plan-action{margin-top:auto;padding-top:34px}

.plan-reassure{
  padding-bottom:clamp(80px,9vw,120px);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.plan-reassure article{
  padding:26px;
  border:1px solid var(--line-dark);
  border-radius:var(--radius);
  background:rgba(255,255,255,.02);
}
.plan-reassure strong{display:block;font-size:14px;font-weight:600}
.plan-reassure p{margin:8px 0 0;color:var(--muted-dark);font-size:12.5px;line-height:1.6}

/* Comparison table */
.compare-wrap{padding-bottom:clamp(90px,10vw,140px)}
.compare-scroll{overflow-x:auto;margin-top:clamp(34px,4vw,52px)}
.compare{
  width:100%;
  min-width:640px;
  border-collapse:collapse;
  font-size:13px;
}
.compare th,.compare td{
  padding:16px 18px;
  border-bottom:1px solid var(--line-dark);
  text-align:left;
  vertical-align:top;
}
.compare thead th{
  color:rgba(255,255,255,.5);
  font-size:10px;
  font-weight:650;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.compare thead th:not(:first-child){text-align:center}
.compare tbody th{font-weight:500;color:#fff}
.compare tbody td{text-align:center;color:var(--muted-dark)}
.compare tbody tr:hover td,.compare tbody tr:hover th{background:rgba(255,255,255,.03)}
.compare .yes{color:var(--gold-light);font-size:15px}
.compare .no{color:rgba(255,255,255,.26)}
.compare-group th{
  padding-top:30px;
  color:var(--gold-light);
  font-size:10px;
  font-weight:650;
  letter-spacing:.14em;
  text-transform:uppercase;
  border-bottom-color:transparent;
}

/* --- FAQ ---------------------------------------------------------------- */

.faq-layout{
  padding-bottom:clamp(90px,10vw,140px);
  display:grid;
  grid-template-columns:minmax(0,.34fr) minmax(0,1fr);
  gap:clamp(36px,5vw,80px);
  align-items:start;
}
.faq-side{position:sticky;top:120px}
.faq-search{
  width:100%;
  min-height:50px;
  padding:0 18px;
  border:1px solid var(--line-dark);
  border-radius:var(--radius);
  background:rgba(255,255,255,.04);
  color:#fff;
  font:inherit;
  font-size:14px;
  outline:none;
  transition:border-color .22s ease,background-color .22s ease;
}
.faq-search::placeholder{color:rgba(255,255,255,.38)}
.faq-search:focus{border-color:var(--gold-light);background:rgba(255,255,255,.06)}
.faq-cats{margin:22px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px}
.faq-cats button{
  width:100%;
  min-height:42px;
  padding:0 14px;
  border:0;
  border-radius:var(--radius);
  background:transparent;
  color:rgba(255,255,255,.62);
  text-align:left;
  font-size:12.5px;
  transition:background-color .2s ease,color .2s ease;
}
.faq-cats button:hover{color:#fff;background:rgba(255,255,255,.04)}
.faq-cats button.is-active{color:#fff;background:rgba(255,255,255,.07)}
.faq-cats button b{float:right;color:rgba(255,255,255,.3);font-weight:500}

.faq-list{display:flex;flex-direction:column}
.faq-group-title{
  margin:34px 0 4px;
  color:var(--gold-light);
  font-size:10px;
  font-weight:650;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.faq-group-title:first-child{margin-top:0}
.faq-item{border-bottom:1px solid var(--line-dark)}
.faq-q{
  width:100%;
  min-height:70px;
  padding:20px 0;
  border:0;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  text-align:left;
  color:#fff;
  font-size:clamp(15px,1.5vw,17px);
  font-weight:500;
  letter-spacing:-.01em;
  transition:color .2s ease;
}
.faq-q:hover{color:var(--gold-light)}
.faq-q i{
  position:relative;
  flex:none;
  width:15px;
  height:15px;
  font-style:normal;
}
.faq-q i::before,.faq-q i::after{
  content:"";
  position:absolute;
  top:50%;
  left:0;
  width:15px;
  height:1px;
  background:currentColor;
  transition:transform .3s var(--ease),opacity .3s ease;
}
.faq-q i::after{transform:rotate(90deg)}
.faq-item.is-open .faq-q i::after{transform:rotate(0);opacity:0}
.faq-item.is-open .faq-q{color:var(--gold-light)}
.faq-a{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .34s var(--ease);
}
.faq-item.is-open .faq-a{grid-template-rows:1fr}
.faq-a>div{overflow:hidden}
.faq-a p{
  max-width:74ch;
  margin:0;
  padding:0 0 26px;
  color:var(--muted-dark);
  font-size:14.5px;
  line-height:1.75;
}
.faq-a p+p{padding-top:14px}
.faq-empty{
  padding:60px 0;
  color:rgba(255,255,255,.45);
  font-size:14px;
  text-align:center;
}

/* --- Contact ------------------------------------------------------------ */

.contact-layout{
  padding-bottom:clamp(90px,10vw,140px);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(40px,6vw,96px);
  align-items:start;
}
.contact-form{display:flex;flex-direction:column;gap:20px}
.field label{
  display:block;
  margin-bottom:9px;
  color:rgba(255,255,255,.55);
  font-size:10px;
  font-weight:650;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.field input,.field textarea,.field select{
  width:100%;
  min-height:52px;
  padding:15px 16px;
  border:1px solid var(--line-dark);
  border-radius:var(--radius);
  background:rgba(255,255,255,.04);
  color:#fff;
  font:inherit;
  font-size:14.5px;
  outline:none;
  transition:border-color .22s ease,background-color .22s ease;
}
.field textarea{min-height:168px;resize:vertical;line-height:1.65}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.34)}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--gold-light);background:rgba(255,255,255,.06)}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,rgba(255,255,255,.5) 50%),linear-gradient(135deg,rgba(255,255,255,.5) 50%,transparent 50%);background-position:calc(100% - 20px) 24px,calc(100% - 14px) 24px;background-size:6px 6px;background-repeat:no-repeat}
.field select option{background:var(--navy-900);color:#fff}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form-note{margin:0;color:rgba(255,255,255,.42);font-size:11.5px;line-height:1.6}
.form-status{
  margin:0;
  padding:14px 16px;
  border:1px solid var(--line-dark);
  border-radius:var(--radius);
  font-size:13px;
  line-height:1.6;
}
.form-status.is-ok{border-color:rgba(126,190,140,.5);background:rgba(126,190,140,.1);color:#c8e8d1}
.form-status.is-error{border-color:rgba(214,120,92,.55);background:rgba(214,120,92,.1);color:#f0c4b6}
.form-status[hidden]{display:none}

.contact-aside{display:flex;flex-direction:column;gap:14px}
.contact-card{
  padding:28px;
  border:1px solid var(--line-dark);
  border-radius:var(--radius);
  background:rgba(255,255,255,.02);
}
.contact-card h2{margin:0;font-size:16px;font-weight:600;letter-spacing:-.01em}
.contact-card p{margin:10px 0 0;color:var(--muted-dark);font-size:13px;line-height:1.65}
.contact-card .button{margin-top:20px}
.contact-card.is-guida{
  border-color:rgba(71,123,158,.42);
  background:linear-gradient(168deg,rgba(71,123,158,.16),rgba(8,22,35,.6));
}
.contact-orb{width:104px;height:104px;margin-bottom:16px}

/* --- Account ------------------------------------------------------------ */

.account-shell{padding-bottom:clamp(90px,10vw,140px)}
.account-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
  gap:16px;
  align-items:start;
}
.panel{
  padding:32px;
  border:1px solid var(--line-dark);
  border-radius:var(--radius);
  background:rgba(8,22,35,.6);
}
.panel h2{
  margin:0 0 22px;
  font-size:11px;
  font-weight:650;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.panel-wide{grid-column:1/-1}
.identity{display:flex;align-items:center;gap:18px}
.identity-mark{
  flex:none;
  width:62px;
  height:62px;
  border-radius:50%;
  display:grid;
  place-items:center;
  border:1px solid rgba(212,168,58,.5);
  background:radial-gradient(circle at 34% 30%,rgba(212,168,58,.3),rgba(8,22,35,.9));
  font-size:19px;
  font-weight:600;
  letter-spacing:.06em;
}
.identity-name{margin:0;font-size:22px;font-weight:500;letter-spacing:-.02em}
.identity-mail{margin:4px 0 0;color:var(--muted-dark);font-size:13px;word-break:break-all}
.tier-badge{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-top:18px;
  padding:9px 15px;
  border:1px solid rgba(212,168,58,.45);
  border-radius:999px;
  background:rgba(212,168,58,.1);
  color:var(--gold-light);
  font-size:10px;
  font-weight:650;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.tier-badge.is-free{border-color:var(--line-dark);background:rgba(255,255,255,.04);color:rgba(255,255,255,.7)}
.data-rows{margin:0;display:grid;grid-template-columns:auto 1fr;gap:14px 26px;font-size:13.5px}
.data-rows dt{color:rgba(255,255,255,.48);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding-top:2px}
.data-rows dd{margin:0;color:#fff}
.account-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.link-action{
  min-height:44px;
  padding:0 4px;
  border:0;
  background:transparent;
  color:rgba(255,255,255,.55);
  font-size:12px;
  text-decoration:underline;
  text-underline-offset:4px;
  transition:color .2s ease;
}
.link-action:hover{color:#fff}
.link-action.is-danger:hover{color:#e79b83}

/* --- Agents landing ----------------------------------------------------- */

.agents-hero{
  position:relative;
  min-height:min(94vh,940px);
  padding-top:clamp(120px,12vw,168px);
  padding-bottom:clamp(60px,7vw,96px);
  display:grid;
  place-items:center;
  overflow:hidden;
  text-align:center;
}
.agents-hero-copy{position:relative;z-index:4;pointer-events:none}
.agents-hero-copy .button{pointer-events:auto}
.agents-hero h1{
  max-width:14ch;
  margin:18px auto 0;
  font-size:clamp(46px,6.6vw,92px);
  font-weight:500;
  letter-spacing:-.045em;
  line-height:.98;
  text-wrap:balance;
}
.agents-hero-copy>p{
  max-width:52ch;
  margin:24px auto 0;
  color:var(--muted-dark);
  font-size:clamp(16px,1.5vw,18px);
}
.agents-scroll-hint{
  margin-top:40px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:rgba(255,255,255,.42);
  font-size:10px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.agents-scroll-hint b{
  display:block;
  width:1px;
  height:26px;
  background:linear-gradient(rgba(255,255,255,.5),transparent);
  animation:hint-fall 2.2s var(--ease) infinite;
}
@keyframes hint-fall{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* Constellation: the six specialists arranged around a centre, entering
   with a staged zoom-out from the middle of the screen. */
.constellation{
  position:absolute;
  z-index:2;
  inset:0;
  display:grid;
  place-items:center;
  pointer-events:none;
}
.constellation-stage{
  position:relative;
  width:min(1080px,94vw);
  aspect-ratio:1.42;
  pointer-events:none;
}
.constellation-core{
  position:absolute;
  top:50%;
  left:50%;
  width:clamp(120px,15vw,190px);
  aspect-ratio:1;
  translate:-50% -50%;
  opacity:.5;
  pointer-events:none;
}
.constellation-core canvas{width:100%;height:100%;display:block}
.star{
  position:absolute;
  top:var(--sy);
  left:var(--sx);
  width:clamp(96px,10.5vw,148px);
  padding:0;
  border:0;
  background:transparent;
  translate:-50% -50%;
  display:grid;
  justify-items:center;
  gap:8px;
  pointer-events:auto;
  text-decoration:none;
  opacity:0;
  scale:.28;
  transition:filter .3s ease;
}
/* A keyframe animation with `both`, not a transition. A transition between
   two class states was repeatedly left frozen part-way through here (stars
   stuck at ~2% opacity), and a half-applied transition has no end state to
   fall back on; an animation with a fill mode always resolves to its last
   frame even if a frame is dropped. */
@keyframes star-arrive{
  from{opacity:0;scale:.28}
  to{opacity:1;scale:1}
}
.constellation.is-live .star{
  animation:star-arrive 1.05s var(--ease) var(--sd) both;
}
.star canvas{width:100%;aspect-ratio:1;display:block}
.star span{
  color:#fff;
  font-size:11px;
  font-weight:650;
  letter-spacing:.14em;
  text-transform:uppercase;
  transition:color .24s ease;
}
.star small{
  max-width:16ch;
  color:rgba(255,255,255,.44);
  font-size:10.5px;
  line-height:1.4;
  text-align:center;
}
.star:hover{filter:brightness(1.18)}
.star:hover span,.star:focus-visible span{color:var(--star-color,var(--gold-light))}
.constellation-line{
  position:absolute;
  inset:0;
  z-index:-1;
  overflow:visible;
  width:100%;
  height:100%;
  pointer-events:none;
}
/* Dash length and the draw-in are set from JS (see ca-orbs.js), which knows
   each path's real length. */
.constellation-line path{
  fill:none;
  stroke:rgba(255,255,255,.11);
  stroke-width:1;
}

/* Directory below the hero */
.agents-index{padding-block:clamp(80px,9vw,130px)}
.agents-index-grid{
  margin-top:clamp(42px,5vw,64px);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.agent-tile{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:30px;
  border:1px solid var(--line-dark);
  border-radius:var(--radius);
  background:rgba(8,22,35,.55);
  text-decoration:none;
  overflow:hidden;
  transition:transform .32s var(--ease),border-color .24s ease,background-color .24s ease;
}
.agent-tile::after{
  content:"";
  position:absolute;
  top:-40%;
  right:-30%;
  width:62%;
  aspect-ratio:1;
  border-radius:50%;
  background:var(--tile-color,var(--gold));
  opacity:.14;
  filter:blur(58px);
  transition:opacity .3s ease;
}
.agent-tile:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.34);background:rgba(14,34,51,.8)}
.agent-tile:hover::after{opacity:.3}
.agent-tile canvas{position:relative;z-index:1;width:88px;aspect-ratio:1}
.agent-tile h3{
  position:relative;
  z-index:1;
  margin:22px 0 0;
  font-size:26px;
  font-weight:500;
  letter-spacing:-.02em;
}
.agent-tile-role{
  position:relative;
  z-index:1;
  margin:6px 0 0;
  color:var(--tile-color,var(--gold-light));
  font-size:10px;
  font-weight:650;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.agent-tile p{position:relative;z-index:1;margin:16px 0 0;color:var(--muted-dark);font-size:13px;line-height:1.6}
.agent-tile-more{
  position:relative;
  z-index:1;
  margin-top:auto;
  padding-top:26px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#fff;
  font-size:10px;
  font-weight:650;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.agent-tile-more b{font-size:16px;font-weight:400;transition:transform .28s var(--ease)}
.agent-tile:hover .agent-tile-more b{transform:translate(3px,-3px)}

/* --- Agent article ------------------------------------------------------ */

.article-head{
  position:relative;
  padding-top:clamp(126px,12vw,178px);
  padding-bottom:clamp(48px,6vw,76px);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,.72fr);
  gap:clamp(34px,5vw,72px);
  align-items:center;
  overflow:hidden;
}
.article-head::before{
  content:"";
  position:absolute;
  z-index:0;
  top:-30%;
  right:-6%;
  width:min(720px,72vw);
  aspect-ratio:1;
  border-radius:50%;
  background:var(--agent-color,var(--gold));
  opacity:.15;
  filter:blur(120px);
  pointer-events:none;
}
.article-head>*{position:relative;z-index:1}
.article-crumbs{
  display:flex;
  align-items:center;
  gap:9px;
  color:rgba(255,255,255,.4);
  font-size:10px;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.article-crumbs a{color:rgba(255,255,255,.6);text-decoration:none}
.article-crumbs a:hover{color:#fff}
.article-role{
  margin:26px 0 0;
  color:var(--agent-color,var(--gold-light));
  font-size:11px;
  font-weight:650;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.article-head h1{
  margin:14px 0 0;
  font-size:clamp(60px,9vw,132px);
  font-weight:500;
  letter-spacing:-.05em;
  line-height:.9;
}
.article-standfirst{
  max-width:50ch;
  margin:24px 0 0;
  color:rgba(255,255,255,.82);
  font-size:clamp(17px,1.8vw,21px);
  line-height:1.6;
}
.article-meta{
  margin-top:30px;
  padding-top:22px;
  border-top:1px solid var(--line-dark);
  display:flex;
  flex-wrap:wrap;
  gap:28px;
}
.article-meta div{min-width:130px}
.article-meta dt{
  color:rgba(255,255,255,.4);
  font-size:9.5px;
  font-weight:650;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.article-meta dd{margin:7px 0 0;font-size:13.5px;line-height:1.5}
.article-orb{width:min(100%,420px);aspect-ratio:1;justify-self:center}
.article-orb canvas{width:100%;height:100%;display:block}

.article-body{
  padding-bottom:clamp(80px,9vw,120px);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,2.1fr);
  gap:clamp(30px,4vw,64px);
  align-items:start;
}
.article-body+.article-body{padding-top:0}
.article-aside{
  position:sticky;
  top:118px;
  color:rgba(255,255,255,.42);
  font-size:10px;
  font-weight:650;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.article-prose{max-width:70ch}
.article-prose h2{
  margin:0;
  font-size:clamp(30px,3.6vw,46px);
  font-weight:500;
  letter-spacing:-.035em;
  line-height:1.08;
}
.article-prose h3{
  margin:40px 0 0;
  font-size:19px;
  font-weight:600;
  letter-spacing:-.01em;
}
.article-prose p{margin:20px 0 0;color:var(--muted-dark);font-size:16px;line-height:1.8}
.article-prose p.lead{color:rgba(255,255,255,.86);font-size:18.5px}
.article-prose ul{margin:22px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px}
.article-prose ul li{
  display:grid;
  grid-template-columns:8px 1fr;
  gap:16px;
  align-items:start;
  color:var(--muted-dark);
  font-size:15px;
  line-height:1.65;
}
.article-prose ul li::before{
  content:"";
  width:7px;
  height:7px;
  margin-top:9px;
  border-radius:50%;
  background:var(--agent-color,var(--gold-light));
}
.article-prose blockquote{
  margin:34px 0 0;
  padding:26px 30px;
  border-left:2px solid var(--agent-color,var(--gold));
  background:rgba(255,255,255,.03);
  border-radius:0 var(--radius) var(--radius) 0;
}
.article-prose blockquote p{margin:0;color:#fff;font-size:18px;line-height:1.6}
.article-prose blockquote cite{
  display:block;
  margin-top:12px;
  color:rgba(255,255,255,.44);
  font-size:11px;
  font-style:normal;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.exchange{
  margin-top:34px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.exchange-ask{
  grid-column:1/-1;
  padding:22px 26px;
  border:1px solid var(--line-dark);
  border-radius:var(--radius);
  background:rgba(255,255,255,.04);
}
.exchange-ask span,.exchange article span{
  display:block;
  color:rgba(255,255,255,.42);
  font-size:9.5px;
  font-weight:650;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.exchange-ask p{margin:10px 0 0;color:#fff;font-size:16px;line-height:1.55}
.exchange article{
  padding:22px 26px;
  border:1px solid var(--line-dark);
  border-radius:var(--radius);
  background:rgba(0,10,22,.4);
}
.exchange article.is-specialist{
  border-color:var(--agent-color,var(--gold));
  background:linear-gradient(168deg,rgba(255,255,255,.06),rgba(0,10,22,.5));
}
.exchange article p{margin:12px 0 0;color:var(--muted-dark);font-size:13.5px;line-height:1.65}
.exchange article.is-specialist p{color:rgba(255,255,255,.86)}

.moment-grid{
  margin-top:26px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.moment-grid article{
  padding:24px;
  border:1px solid var(--line-dark);
  border-radius:var(--radius);
  background:rgba(255,255,255,.02);
}
.moment-grid strong{display:block;font-size:14px;font-weight:600;letter-spacing:-.01em}
.moment-grid p{margin:10px 0 0;color:var(--muted-dark);font-size:12.5px;line-height:1.6}

.steps{margin-top:28px;display:flex;flex-direction:column;gap:2px;counter-reset:step}
.steps article{
  padding:24px 0;
  border-top:1px solid var(--line-dark);
  display:grid;
  grid-template-columns:52px 1fr;
  gap:20px;
  align-items:start;
}
.steps article::before{
  counter-increment:step;
  content:"0" counter(step);
  color:var(--agent-color,var(--gold-light));
  font-size:12px;
  font-weight:650;
  letter-spacing:.1em;
  padding-top:3px;
}
.steps strong{display:block;font-size:16px;font-weight:600;letter-spacing:-.01em}
.steps p{margin:8px 0 0;color:var(--muted-dark);font-size:14px;line-height:1.7}

.limits{
  margin-top:26px;
  padding:26px 30px;
  border:1px solid var(--line-dark);
  border-radius:var(--radius);
  background:rgba(255,255,255,.02);
}
.limits strong{display:block;font-size:14px;font-weight:600}
.limits ul{margin-top:16px}
.limits ul li::before{background:rgba(255,255,255,.3)}

.article-next{
  padding-block:clamp(60px,7vw,96px);
  border-top:1px solid var(--line-dark);
}
.article-next-grid{
  margin-top:30px;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
}
.next-tile{
  padding:22px;
  border:1px solid var(--line-dark);
  border-radius:var(--radius);
  background:rgba(255,255,255,.02);
  text-decoration:none;
  display:grid;
  gap:10px;
  justify-items:start;
  transition:transform .28s var(--ease),border-color .22s ease;
}
.next-tile:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.32)}
.next-tile canvas{width:52px;aspect-ratio:1}
.next-tile b{font-size:14px;font-weight:600;letter-spacing:.02em}
.next-tile span{color:rgba(255,255,255,.46);font-size:10.5px;line-height:1.4}

/* Shared closing band */
.page-cta{
  padding-block:clamp(80px,9vw,128px);
  border-top:1px solid var(--line-dark);
  text-align:center;
}
.page-cta h2{
  margin:16px 0 0;
  font-size:clamp(36px,5vw,68px);
  font-weight:500;
  letter-spacing:-.04em;
  line-height:1.02;
}
.page-cta>p{max-width:52ch;margin:22px auto 0;color:var(--muted-dark);font-size:16px}
.page-cta-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:34px}
.page-cta small{display:block;margin-top:18px;color:rgba(255,255,255,.4);font-size:11px}

/* --- Responsive --------------------------------------------------------- */

@media (max-width:1100px){
  .plan-grid{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
  .plan-reassure{grid-template-columns:1fr}
  .article-body{grid-template-columns:1fr}
  .article-aside{position:static;margin-bottom:-8px}
  .article-next-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .faq-layout{grid-template-columns:1fr}
  .faq-side{position:static}
  .faq-cats{flex-direction:row;flex-wrap:wrap;gap:8px}
  .faq-cats button{width:auto;border:1px solid var(--line-dark)}
  .faq-cats button b{float:none;margin-left:8px}
  .contact-layout{grid-template-columns:1fr}
  .account-grid{grid-template-columns:1fr}
  .agents-index-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .article-head{grid-template-columns:1fr;text-align:left}
  .article-orb{width:min(74%,320px);justify-self:start;order:-1}
  .moment-grid{grid-template-columns:1fr}
  .exchange{grid-template-columns:1fr}
  .agents-hero{min-height:auto}
  .constellation{position:relative;grid-row:2;margin-top:44px}
  .constellation-stage{aspect-ratio:.92;width:100%}
  .agents-hero{grid-template-rows:auto auto}
}
@media (max-width:640px){
  .field-row{grid-template-columns:1fr}
  .agents-index-grid{grid-template-columns:1fr}
  .article-next-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps article{grid-template-columns:1fr;gap:8px}
  .page-head h1{font-size:clamp(36px,10vw,52px)}
  .article-head h1{font-size:clamp(52px,17vw,82px)}
}
@media (prefers-reduced-motion:reduce){
  .constellation-line path,.agents-scroll-hint b{transition:none;animation:none}
  .constellation .star,.constellation.is-live .star{opacity:1;scale:1;animation:none}
}

/* ==========================================================================
   Status pages (404, generic error)

   One centred column under a single brand orb. These are the only pages a
   visitor reaches by accident, so the job is to look like the rest of the
   site immediately and offer a way out — not to decorate.
   ========================================================================== */

.status-page{
  position:relative;
  min-height:100svh;
  padding-top:clamp(140px,15vw,210px);
  padding-bottom:clamp(80px,10vw,130px);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.status-page::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:8%;
  left:50%;
  translate:-50% 0;
  width:min(720px,90vw);
  aspect-ratio:1;
  border-radius:50%;
  background:rgba(212,168,58,.10);
  filter:blur(120px);
}
.status-orb{
  width:min(300px,52vw);
  aspect-ratio:1;
  margin-bottom:clamp(-40px,-3vw,-24px);
  pointer-events:none;
}
.status-orb canvas{width:100%;height:100%}

/* The numeral is the page's headline, so it takes the h1 treatment (weight
   500, hard negative tracking) rather than the heavy display weight the
   previous version used. */
.status-code{
  margin:0;
  color:rgba(255,255,255,.14);
  font-size:clamp(120px,22vw,210px);
  font-weight:500;
  letter-spacing:-.05em;
  line-height:.86;
}
.status-page h1{
  max-width:18ch;
  margin:18px 0 0;
  font-size:clamp(34px,5vw,60px);
  font-weight:500;
  letter-spacing:-.04em;
  line-height:1.02;
  text-wrap:balance;
}
.status-lead{
  max-width:52ch;
  margin:22px 0 0;
  color:var(--muted-dark);
  font-size:clamp(15px,1.4vw,17px);
}
.status-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  margin-top:34px;
}
.status-actions .button{min-width:200px}

/* A 404 is the one moment a visitor is definitely lost, so the useful
   destinations are worth naming rather than leaving to the footer. */
.status-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:0;
  margin-top:clamp(44px,6vw,68px);
  padding-top:22px;
  border-top:1px solid var(--line-dark);
  width:min(100%,620px);
}
.status-links a{
  padding:10px clamp(14px,2vw,22px);
  color:rgba(255,255,255,.62);
  font-size:12px;
  font-weight:600;
  letter-spacing:.06em;
  text-decoration:none;
  text-transform:uppercase;
  transition:color .2s ease;
}
.status-links a:hover,.status-links a:focus-visible{color:var(--gold-light)}
.status-countdown{
  margin:26px 0 0;
  min-height:1.4em;
  color:rgba(255,255,255,.36);
  font-size:11px;
  letter-spacing:.06em;
}
.status-countdown button{
  margin-left:8px;
  padding:0;
  border:0;
  background:none;
  color:rgba(255,255,255,.62);
  font-size:11px;
  letter-spacing:.06em;
  text-decoration:underline;
  text-underline-offset:3px;
}
.status-countdown button:hover{color:var(--gold-light)}

@media (max-width:640px){
  .status-page{min-height:auto}
  .status-links{flex-direction:column;gap:2px}
}

/* error.html covers 403/500/502/503/504, so it has no single number to show.
   A word sits at the same optical weight as the 404 numeral only at a much
   smaller size — 210px of "Oops" reads as a joke rather than a brand. */
.status-code.is-word{
  font-size:clamp(52px,10vw,108px);
  letter-spacing:-.04em;
  color:rgba(255,255,255,.16);
}

/* ==========================================================================
   Composer Studio upsell (/composer-studio for non-Expert members)

   Reached only by a signed-in member who is not on Expert, so this is a
   single-purpose sales page: show what the tool does, then the one action.
   ========================================================================== */

.studio-upsell{
  position:relative;
  padding-top:clamp(132px,13vw,190px);
  padding-bottom:clamp(80px,9vw,120px);
  text-align:center;
}
.studio-upsell::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:6%;
  left:50%;
  translate:-50% 0;
  width:min(780px,92vw);
  aspect-ratio:1;
  border-radius:50%;
  background:rgba(212,168,58,.12);
  filter:blur(120px);
}
.studio-orb{
  width:min(260px,46vw);
  aspect-ratio:1;
  margin:0 auto clamp(-34px,-2.4vw,-18px);
  pointer-events:none;
}
.studio-orb canvas{width:100%;height:100%}
.studio-upsell h1{
  max-width:14ch;
  margin:16px auto 0;
  font-size:clamp(42px,6vw,78px);
  font-weight:500;
  letter-spacing:-.04em;
  line-height:1;
  text-wrap:balance;
}
.studio-lead{
  max-width:58ch;
  margin:26px auto 0;
  color:var(--muted-dark);
  font-size:clamp(16px,1.5vw,18px);
}
.studio-points{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:clamp(48px,6vw,72px);
  text-align:left;
}
.studio-points article{
  padding:28px 26px;
  border:1px solid var(--line-dark);
  border-radius:var(--radius);
  background:rgba(7,19,34,.6);
  backdrop-filter:blur(14px);
}
.studio-points b{
  display:block;
  color:var(--gold-light);
  font-size:11px;
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.studio-points p{
  margin:14px 0 0;
  color:var(--muted-dark);
  font-size:14px;
  line-height:1.6;
}
.studio-cta{
  margin-top:clamp(48px,6vw,72px);
  padding-top:clamp(38px,4.4vw,54px);
  border-top:1px solid var(--line-dark);
}
.studio-cta .button{min-width:260px}
.studio-note{
  margin:20px auto 0;
  max-width:46ch;
  color:rgba(255,255,255,.46);
  font-size:12px;
}
.studio-note a{color:rgba(255,255,255,.72);text-underline-offset:3px}
.studio-note a:hover{color:var(--gold-light)}

@media (max-width:900px){
  .studio-points{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------------------
   Agent article hero — the "container doesn't cover the screen, there's space
   on the right".

   .article-head is a centred shell (~1308px inside a 1425px viewport) carrying
   `overflow:hidden`, and the coloured halo behind the sphere is an ::before at
   `right:-6%`. The bleed was therefore sliced off flat at the shell's right
   edge, putting a hard vertical seam there with ~58px of untinted background
   beyond it — the strip that reads as the hero stopping short of the screen.
   The halo is already wide enough to run past the viewport on its own; it just
   needed to be allowed to. Nothing can scroll sideways as a result, because
   html/body already clip on the x axis.

   The orb also sat 420px wide inside a 464px grid column, leaving a further
   ~22px of slack on each side; it now fills the column it was given.
   --------------------------------------------------------------------------- */
.article-head{overflow:visible}
/* Scoped to the two-column hero. Below 900px .article-head collapses to one
   column and the orb is deliberately 74%/320px and left-aligned; an unscoped
   rule here would sit after that media query and win at every width. */
@media (min-width:901px){
  .article-orb{width:min(100%,480px)}
}

/* ---------------------------------------------------------------------------
   Plans — three tiers readable at once, and a switch that actually moves.
   --------------------------------------------------------------------------- */

/* Sliding pill. --pill-x/--pill-w are measured per label in plans.html, because
   "Annual · save up to 40%" is far wider than "Monthly" and a 50/50 pill would
   sit off both. .is-ready is added one frame after the first measurement so the
   pill appears already in place instead of sliding in from the left on load. */
.period-switch{position:relative}
.period-switch::before{
  content:"";
  position:absolute;
  z-index:0;
  top:5px;
  left:0;
  height:calc(100% - 10px);
  width:var(--pill-w,0);
  transform:translateX(var(--pill-x,0));
  border-radius:999px;
  background:var(--gold)
}
.period-switch.is-ready::before{
  transition:transform .42s cubic-bezier(.65,0,.35,1),width .42s cubic-bezier(.65,0,.35,1)
}
.period-switch button{position:relative;z-index:1}
/* The pill IS the active background now; the old solid fill would cover it. */
.period-switch button.is-active{background:transparent;color:#fff}
@media (prefers-reduced-motion:reduce){.period-switch.is-ready::before{transition:none}}

/* The grid keeps three columns far further down than before. They used to
   collapse to a single stacked column at 900px, which is exactly the width a
   tablet reads this page at — so the three tiers could not be compared at a
   glance on the device most likely to be used for the comparison. */
@media (min-width:641px){
  .plan-grid[data-visible="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
  .plan-grid[data-visible="2"]{grid-template-columns:repeat(2,minmax(0,1fr));max-width:900px;margin-inline:auto}
  .plan-grid[data-visible="1"]{grid-template-columns:minmax(0,440px);justify-content:center}
}
@media (min-width:641px) and (max-width:1020px){
  /* The old single-column breakpoint also pinned the grid to max-width:560px
     and centred it. Restoring three columns without clearing that squeezed all
     three tiers into 560px (150px each). */
  .plan-grid{gap:10px;max-width:none;margin-inline:0}
  .plan-card{padding:34px 20px 26px}
  .plan-card h2{font-size:20px}
  .plan-price{font-size:34px}
  .plan-features li{font-size:12px}
  .plan-card .plan-action{padding-top:24px}
  .plan-card .button{padding-inline:10px;font-size:11px}
}

/* Below 640px three columns cannot be legible, so the row becomes a swipeable
   one: the tiers stay side by side and comparable rather than becoming three
   screens of scrolling. */
@media (max-width:640px){
  /* Flex, not grid. Three `.plan-grid` rules across this stylesheet set
     grid-template-columns at different breakpoints, and an auto-flow column
     track competing with an inherited explicit template resolved to three
     107px slivers. Switching the formatting context makes every one of those
     declarations inert instead of something this rule has to out-specify. */
  .plan-grid{
    display:flex;
    flex-wrap:nowrap;
    align-items:stretch;
    max-width:none;
    margin-inline:0;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--gutter,22px);
    gap:12px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none
  }
  .plan-grid::-webkit-scrollbar{display:none}
  .plan-card{flex:0 0 82%;scroll-snap-align:center}
  /* A lifted card inside a scroller drags the scroll geometry around. */
  .plan-card:hover{transform:none}
}

/* ---------------------------------------------------------------------------
   FAQ search — magnifying glass inside the field.

   Inlined as a data URI rather than an extra element, so the markup and the
   JS that reads #faq-search are untouched. The focus rule below re-states
   background-color only: it used the `background` shorthand, which would
   reset background-image and drop the icon the moment the field was focused.
   --------------------------------------------------------------------------- */
.faq-search{
  padding-left:46px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.45)' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:16px 50%;
  background-size:18px 18px
}
.faq-search:focus{background-color:rgba(255,255,255,.06)}
/* The native clear affordance sat on top of nothing useful and varied by
   browser; the field is cleared by emptying it. */
.faq-search::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}

/* ---------------------------------------------------------------------------
   Account — single column, particle profile mark, squared tier badge.
   --------------------------------------------------------------------------- */

/* One column. The two-column arrangement paired panels of very different
   heights (Profile against Current plan), so the shorter one left a ragged
   gap and the reading order jumped left/right between unrelated sections. */
.account-grid{
  grid-template-columns:minmax(0,1fr);
  max-width:860px;
  margin-inline:auto;
  gap:14px
}

/* The profile mark is a live particle field rather than a static gradient
   disc — the same intelligence the rest of the site is built from, at avatar
   scale. Initials sit above it with enough shadow to stay legible against the
   moving particles underneath. */
.identity-mark{
  position:relative;
  overflow:hidden;
  width:72px;
  height:72px;
  background:radial-gradient(circle at 34% 30%,rgba(212,168,58,.16),rgba(8,22,35,.94))
}
.identity-orb{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block
}
.identity-mark b{
  position:relative;
  z-index:1;
  font-size:19px;
  font-weight:600;
  letter-spacing:.06em;
  text-shadow:0 1px 8px rgba(0,10,22,.9),0 0 2px rgba(0,10,22,.9)
}

/* 10px, not a full pill: the badge reads as a status chip in the same
   geometry as the rest of the interface rather than a floating lozenge. */
.tier-badge{border-radius:10px}

/* Guida card: copy left, orb right, on every width. The orb used to be a
   block above the heading, so the card opened with an illustration instead of
   with the question it answers. */
.contact-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px
}
.contact-card-head h2{margin:0}
.contact-orb{
  flex:none;
  width:clamp(72px,18vw,96px);
  height:clamp(72px,18vw,96px);
  margin:0
}

/* ---------------------------------------------------------------------------
   Gold restored on descriptive labels.

   The eyebrow labels that name each part of an article ("The problem", "The
   specialist", "Reach for it when") had been flattened to low-opacity white,
   which left the pages with no accent at all above the fold and made the
   labels read as disabled text rather than as structure.
   --------------------------------------------------------------------------- */
.article-aside{color:var(--gold)}
.article-meta dt{color:var(--gold-light);opacity:.85}
.agents-index-card .card-role,
.next-tile span{color:var(--gold-light)}

/* ---------------------------------------------------------------------------
   Closing statement container.

   The pull quote still used the old treatment: a bare left rule with square
   corners on one side and a flat grey wash, which is the one component on the
   article that did not follow the new container language (full hairline
   border, full radius, agent-tinted fill, uppercase label). Restyled to match,
   and the attribution reads as a label rather than as a citation of a person
   who never said it.
   --------------------------------------------------------------------------- */
.article-prose blockquote{
  margin:38px 0 0;
  padding:clamp(24px,3vw,34px);
  border:1px solid color-mix(in srgb,var(--agent-color,var(--gold)) 40%,transparent);
  border-radius:var(--radius);
  background:color-mix(in srgb,var(--agent-color,var(--gold)) 8%,transparent)
}
.article-prose blockquote p{
  margin:0;
  color:#fff;
  font-size:clamp(17px,2vw,20px);
  font-weight:500;
  line-height:1.55;
  letter-spacing:-.01em
}
.article-prose blockquote cite{
  display:block;
  margin-top:16px;
  color:var(--agent-color,var(--gold-light));
  font-size:10px;
  font-style:normal;
  font-weight:650;
  letter-spacing:.14em;
  text-transform:uppercase
}

/* ---------------------------------------------------------------------------
   Agents landing — the constellation stage is gone.

   Six selectable spheres floating on a near-black stage duplicated the
   directory immediately below it: the same six specialists, the same links,
   but as small unlabelled targets a visitor had to hunt for. The page now
   opens on the statement and sends you straight down to the directory, which
   is the thing that actually answers "which one do I need".

   The hero therefore no longer has to reserve a full viewport for artwork
   that is not there.
   --------------------------------------------------------------------------- */
.agents-hero{
  min-height:0;
  padding-top:clamp(140px,14vw,200px);
  padding-bottom:clamp(52px,6vw,84px);
  place-items:start;
  text-align:left;
  overflow:visible
}
.agents-hero h1{margin-inline:0}
.agents-hero-copy>p{margin-inline:0}
.agents-hero-copy{pointer-events:auto}

/* The invitation to scroll is now a button-shaped link that says where it
   goes, with a target big enough to actually press. */
.agents-scroll-hint{
  margin-top:38px;
  min-height:48px;
  padding:0 20px;
  display:inline-flex;
  align-items:center;
  gap:14px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:999px;
  color:rgba(255,255,255,.9);
  font-size:11px;
  font-weight:650;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  transition:border-color .22s ease,background-color .22s ease,color .22s ease
}
.agents-scroll-hint:hover{
  border-color:var(--gold-light);
  background:rgba(212,168,58,.12);
  color:var(--gold-light)
}
.agents-scroll-hint b{
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  background:none;
  animation:hint-nudge 2.1s var(--ease) infinite
}
.agents-scroll-hint svg{width:18px;height:18px}
@keyframes hint-nudge{
  0%,100%{transform:translateY(0);opacity:.75}
  50%{transform:translateY(4px);opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .agents-scroll-hint b{animation:none}
}