@import url('/design/css/tokens.css');
@import url('/design/css/base.css');
@import url('/design/css/components.css');
@import url('/design/css/app.css');

/* ============================================================================
   Dean Agency — what is specific to this product.
   Everything structural (rail, tables, sheets, pills, toolbar) is shared in
   /design/css/app.css so the family stays one system.
   ========================================================================= */

/* --- The sign-in gate. No rail: there is nowhere to go until you are in. --- */
.ag-gate-page { min-height: 100dvh; display: grid; align-content: center; justify-items: center; gap: 18px; padding: var(--gutter); }
.ag-gate-brand { display: flex; }
.ag-gate-card { width: 100%; max-width: 26rem; }
.ag-gate-card .dean-core { padding: 1.75rem; }
.ag-signin-form { display: grid; gap: 0.875rem; }
.ag-signin-form > * { min-width: 0; }
.ag-signin-form input { width: 100%; min-width: 0; }
.ag-signin-title { margin: 0; font-size: 1.5rem; font-weight: 680; letter-spacing: -0.02em; }
.ag-signin-lede { margin: 0 0 0.25rem; }
.ag-warn { color: var(--alert); }

/* --- The signed-in user, in the rail foot beside the theme toggle. -------- */
.ag-railuser { display: flex; align-items: center; gap: 9px; padding: 4px; min-width: 0; }
.ag-railav { width: 30px; height: 30px; border-radius: 50%; background: var(--violet); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; }
.ag-railuser-text { display: grid; min-width: 0; line-height: 1.25; }
.ag-railuser-text strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-railuser-text .dean-note { font-size: 11px; }
.ag-railuser .dean-icon-button { margin-left: auto; flex: none; }

/* --- Stat row ------------------------------------------------------------- */
.ag-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 12px; margin: 0 0 22px; padding: 0; list-style: none; }
.ag-stat { display: grid; gap: 4px; padding: 16px 18px; border-radius: var(--r-core); background: var(--ink-raise); border: 1px solid var(--hair); box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-hi); min-width: 0; }
.ag-stat-value { font-size: 1.6rem; font-weight: 680; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* --- Two-column dashboard ------------------------------------------------- */
.ag-dash-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 22px; align-items: start; }
.ag-dash-cols > * { min-width: 0; }

/* --- Simple stacked lists inside a table card ----------------------------- */
.ag-attention { margin: 0; padding: 0; list-style: none; }
.ag-attention li { display: flex; align-items: center; gap: 10px; padding: 11px 18px; border-bottom: 1px solid var(--hair); font-size: 13.5px; }
.ag-attention li:last-child { border-bottom: none; }
.ag-attention li > span:last-child { margin-left: auto; }

/* --- Onboarding blockers -------------------------------------------------- */
.ag-blockers { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 8px; }
.ag-blockers li { display: grid; gap: 2px; padding: 10px 14px; border-radius: var(--r-panel); background: var(--warn-wash); }
.ag-blockers strong { font-size: 13.5px; }

/* --- People (representatives, guardians) ---------------------------------- */
.ag-people { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.ag-people li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 11px 14px; border-radius: var(--r-panel); background: color-mix(in srgb, var(--chalk) 4%, transparent); }
.ag-people li > .dean-note { margin-left: auto; }

/* Document rows carry several notes; only the action cluster hugs the right edge. */
.ag-docs li > .dean-note { margin-left: 0; }
.ag-doc-actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }

/* --- Booking readiness lanes --------------------------------------------- */
.ag-lanes { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 12px; }
.ag-lane { display: grid; gap: 6px; justify-items: start; padding: 12px 14px; border-radius: var(--r-panel); background: color-mix(in srgb, var(--chalk) 4%, transparent); }

/* --- Proposal options ----------------------------------------------------- */
.ag-option { padding: 16px 0; border-bottom: 1px solid var(--hair); }
.ag-option:last-child { border-bottom: none; }
.ag-option-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.ag-option-total { margin-left: auto; font-size: 1.15rem; font-weight: 680; font-variant-numeric: tabular-nums; }
.ag-trace { margin-top: 10px; }
.ag-trace summary { cursor: pointer; }

/* --- Knowledge ------------------------------------------------------------ */
.ag-kb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 14px; }
.ag-kb-card { display: grid; gap: 6px; text-align: left; padding: 16px 18px; cursor: pointer; font: inherit; color: inherit; }
.ag-kb-card:hover { border-color: var(--violet); }
.ag-prose { max-width: var(--read-max); white-space: pre-wrap; }
.ag-kb-schools { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 18px; }
.ag-kb-schools .dean-chip { border: 0; cursor: pointer; font: inherit; font-size: var(--t-nano); font-weight: 590; letter-spacing: 0.06em; text-transform: uppercase; }

/* --- Search --------------------------------------------------------------- */
.ag-searchpanel { padding: 18px 20px; margin-bottom: 18px; }

/* The filters most searches use stay visible; the rest fold away, so a panel of a dozen
   dropdowns does not push the results themselves below the fold. */
.ag-morefilters { margin-top: 14px; border-top: 1px solid var(--hair); padding-top: 12px; }
.ag-morefilters > summary {
  cursor: pointer; font-family: var(--sans); font-size: var(--t-nano); font-weight: 590;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--chalk-mute);
  list-style: none; display: flex; align-items: center; gap: 8px; padding: 2px 0;
}
.ag-morefilters > summary::-webkit-details-marker { display: none; }
.ag-morefilters > summary::before { content: '+'; font-size: 14px; line-height: 1; }
.ag-morefilters[open] > summary::before { content: '\2212'; }
.ag-morefilters > summary:hover { color: var(--chalk); }
.ag-morefilters > .dean-formgrid { margin-top: 14px; }

.ag-pager { margin-bottom: 12px; }
.ag-pagesize { display: inline-flex; align-items: center; gap: 8px; }
.ag-pagesize select { padding: 6px 10px; }

/* --- Client-facing proposal (p.html) keeps its own document look. --------- */
.ag-page { max-width: var(--shell-max); margin: 0 auto; padding: var(--gutter); display: grid; gap: 1.5rem; }
.ag-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.ag-wordmark { margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.03em; }
.ag-sub { margin: 0.25rem 0 0; }
.ag-total { margin: 0.25rem 0; font-family: var(--mono); font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.ag-row { display: grid; gap: 0.5rem; }
.ag-row .dean-core { padding: 1.125rem; display: grid; gap: 0.375rem; }
.ag-section-title { margin: 0 0 0.5rem; }
.pp-amount { font-variant-numeric: tabular-nums; }
.pp-plan { margin-top: 0.75rem; padding: 0.875rem 1rem; border: 1px solid var(--hair); border-radius: var(--r-panel); }
.pp-plan h3 { margin: 0 0 0.5rem; font-size: 0.95rem; }
.pp-plan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.375rem; }
.pp-plan li { display: flex; justify-content: space-between; gap: 1rem; }

/* One-line instalment strip under an option's price lines in the builder. */
.ag-payment-plan { margin: 8px 0 0; font-size: 0.9rem; color: var(--muted, inherit); display: flex; gap: 14px; flex-wrap: wrap; }

/* --- Getting set up: the first-login wizard and its rail chip ---------------- */
.ag-setup { display: grid; grid-template-columns: 280px 1fr; gap: 24px; margin-top: 16px; }
@media (max-width: 720px) { .ag-setup { grid-template-columns: 1fr; } }
.ag-setup-rail { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; align-content: start; }
/* A button, so the ten steps are reachable by keyboard and announced as steps. The reset keeps
   the row looking exactly as it did when it was a list item. */
.ag-setup-step { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; cursor: pointer;
  width: 100%; text-align: left; background: none; border: 0; color: inherit; font: inherit; }
.ag-setup-step:hover { background: color-mix(in srgb, var(--chalk) 5%, transparent); }
.ag-setup-step:focus-visible { outline: 2px solid var(--violet); outline-offset: 1px; }
.ag-setup-step.is-current { background: color-mix(in srgb, var(--violet) 10%, transparent); }
.ag-setup-step-text { display: grid; gap: 1px; min-width: 0; }
.ag-setup-step-text strong { font-size: 13.5px; font-weight: 600; }
.ag-setup-tick { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; border: 1px solid var(--hair-strong); color: var(--chalk-mute, inherit); }
.ag-setup-step.is-done .ag-setup-tick { background: var(--violet); border-color: var(--violet); color: #fff; }
.ag-setup-body { min-width: 0; display: grid; gap: 10px; align-content: start; }
.ag-setup-title { margin: 0; font-size: 1.25rem; }
.ag-setup-why { margin: 0; }
.ag-setup-complete { border-left: 3px solid var(--violet); padding-left: 10px; }
/* Where "Take me there" is about to put you, said before it does. */
.ag-setup-where { border-left: 3px solid var(--hair-strong); padding-left: 10px; }
.ag-setup-blocked { border-left: 3px solid var(--warn); padding-left: 10px; }
.ag-setup-focus { margin: 6px 0 0; }
/* The control a step was sent to, held for a moment so the eye finds it on arrival. */
.is-spotlit { animation: ag-spotlight 2.4s ease-out; border-radius: 8px; }
@keyframes ag-spotlight {
  0%, 60% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--violet) 55%, transparent); }
  100% { box-shadow: 0 0 0 3px transparent; }
}
@media (prefers-reduced-motion: reduce) { .is-spotlit { animation-duration: 1ms; } }
.ag-setup-chip { display: flex; align-items: center; gap: 8px; width: calc(100% - 20px); margin: 10px; padding: 9px 12px; border-radius: 9px; border: 1px solid var(--hair-strong); background: color-mix(in srgb, var(--violet) 8%, transparent); color: inherit; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.ag-setup-chip:hover { border-color: var(--violet); }
.ag-setup-chip .dean-note { margin-left: auto; }
.ag-setup-chip-ring { width: 8px; height: 8px; border-radius: 50%; background: var(--violet); }

/* `[hidden]` is the lowest-specificity UA rule, so any class setting `display`
   defeats it. Stated once, for every element. */
[hidden] { display: none !important; }

/* Grid children default to min-width:auto, so an input's intrinsic width pushes
   a row wider than its column and the whole page scrolls sideways on a phone. */
.dean-formgrid > *, .dean-formgrid input, .dean-formgrid select, .dean-formgrid textarea { min-width: 0; }

.ag-modal-form { margin-top: 14px; }
.ag-palette-empty { cursor: default; }

/* --- Deal Room thread ------------------------------------------------------ */
.ag-thread { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.ag-thread li { padding: 12px 14px; border-radius: var(--r-panel); background: color-mix(in srgb, var(--chalk) 4%, transparent); display: grid; gap: 6px; }
.ag-thread li.is-done { opacity: 0.66; }
.ag-thread li p { margin: 0; }
.ag-thread-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ag-thread-body { grid-column: 1 / -1; }
/* Grid children stretch. Left alone, "Mark done" spans the whole card and reads as a field
   rather than the small action it is. */
.ag-thread li .dean-button { justify-self: start; }
.ag-thread-body textarea { width: 100%; min-width: 0; }

/* --- Per-option panels in the builder ------------------------------------- */
.ag-option-tabs { margin-top: 12px; }
.ag-option-panel { margin-top: 10px; }

/* Consent shown verbatim: the words the person actually saw, not a summary. */
.ag-consent { margin: 0; padding: 12px 16px; border-left: 3px solid var(--violet); background: var(--violet-wash); border-radius: 0 var(--r-panel) var(--r-panel) 0; }
.ag-chiprow { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }

/* --- The provider record: forms that span, toggles, product lists ---------- */
.ag-span2 { grid-column: 1 / -1; }
.ag-checkrow { display: flex; gap: 18px; flex-wrap: wrap; }
.ag-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.ag-check input { width: 16px; height: 16px; accent-color: var(--violet); }

.ag-product-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.ag-products { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.ag-products li { padding: 11px 14px; border-radius: var(--r-panel); background: color-mix(in srgb, var(--chalk) 4%, transparent); }
.ag-product-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ag-product-head > .dean-note { flex: 1 1 auto; min-width: 0; }
.ag-product-head > button:last-child { margin-left: auto; }

/* --- Rate cards and policy bands: rows in a grid, one line per band -------- */
.ag-bands { display: grid; gap: 6px; margin-bottom: 8px; }
/* The column set follows the band's kind, on rows and header alike. */
.ag-band { display: grid; gap: 6px; align-items: center; }
.ag-band[data-kind="accommodation"] { grid-template-columns: 1.4fr 0.6fr 0.6fr 0.8fr 0.8fr 0.8fr 0.7fr 32px; }
.ag-band[data-kind="course"] { grid-template-columns: 1.4fr 0.6fr 0.6fr 0.8fr 32px; }
.ag-band--subdeal { grid-template-columns: 2fr 0.8fr 0.8fr 0.8fr 32px; }
.ag-band--policy { grid-template-columns: 0.9fr 0.7fr 0.7fr 2.2fr 32px; }
.ag-band-head { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--chalk-faint); font-weight: 600; }
.ag-band-head span { min-width: 0; }
.ag-band input {
  min-height: 34px; padding: 0 8px; min-width: 0; width: 100%;
  border: 1px solid var(--hair-strong); border-radius: 8px;
  background: var(--ink-sunken); color: var(--chalk); font: inherit; font-size: 13px;
}
.ag-band .dean-close { width: 24px; height: 24px; font-size: 13px; }

.ag-policy { padding: 12px 14px; border-radius: var(--r-panel); background: color-mix(in srgb, var(--chalk) 4%, transparent); margin-bottom: 10px; display: grid; gap: 10px; }

@media (max-width: 760px) {
  .ag-band, .ag-band--subdeal, .ag-band--policy { grid-template-columns: 1fr 1fr; }
  .ag-band-head { display: none; }
}

/* Growth studio embed */
.ag-embed-card { padding: 16px 18px; display: grid; gap: 10px; }
.ag-snippet { margin: 0; padding: 12px 14px; border-radius: var(--r-panel); background: color-mix(in srgb, var(--chalk) 5%, transparent); font-family: var(--mono); font-size: 12.5px; overflow-x: auto; white-space: pre; }

/* --- LinguaGo terms panel --------------------------------------------------- */
.ag-optin-warning { margin: 0 0 12px; padding: 10px 14px; border-radius: var(--r-panel); background: var(--warn-wash); color: var(--warn); font-size: 13.5px; }
.ag-clauses { display: grid; gap: 8px; }
.ag-clause { align-items: flex-start; }
.ag-clause span { line-height: 1.45; }
.ag-inline-days { width: 3.2rem; min-height: 26px; padding: 0 6px; border: 1px solid var(--hair-strong); border-radius: 6px; background: var(--ink-sunken); color: var(--chalk); font: inherit; font-size: 13px; text-align: center; }
.ag-methods { display: grid; gap: 8px; margin-bottom: 12px; }
.ag-methods input[type="radio"] { width: 15px; height: 15px; accent-color: var(--violet); }
.ag-cancellable { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; flex-wrap: wrap; }
.ag-cancellable input { width: 4rem; min-height: 32px; padding: 0 8px; border: 1px solid var(--hair-strong); border-radius: 8px; background: var(--ink-sunken); color: var(--chalk); font: inherit; text-align: center; }
.ag-band--terms { grid-template-columns: 0.8fr 0.8fr 1.1fr 0.9fr 0.9fr 0.7fr 32px; }
.ag-check--cell { font-size: 12.5px; }
.ag-narrow { max-width: 14rem; }
.ag-visa-components { display: flex; gap: 16px; align-items: end; flex-wrap: wrap; margin-bottom: 8px; }
.ag-terms-quote { margin-bottom: 8px; white-space: pre-wrap; }
.ag-upload-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
#termsPreview { margin-top: 6px; }

/* --- Registration flow ------------------------------------------------------ */
.ag-gate-alt { margin: 4px 0 0; }
.ag-register-card { max-width: 34rem; }
.ag-steps { display: flex; align-items: center; gap: 6px; margin-bottom: 16px; }
.ag-step { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: color-mix(in srgb, var(--chalk) 7%, transparent); color: var(--chalk-mute); }
.ag-step.is-here { background: var(--violet); color: #fff; }
.ag-step.is-done { background: var(--violet-wash); color: var(--violet); }
.ag-step-line { flex: 1; height: 2px; background: var(--hair-strong); border-radius: 2px; }
.ag-pickgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 8px; margin: 4px 0 10px; }
.ag-consentbox { align-items: flex-start; padding: 10px 12px; border-radius: var(--r-panel); background: var(--violet-wash); }
.ag-consentbox span { font-size: 13px; line-height: 1.5; }
.ag-registered { padding: 1.75rem; display: grid; gap: 12px; justify-items: start; }

.ag-sync-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.ag-sync-row input { flex: 1 1 18rem; min-height: 36px; padding: 0 10px; border: 1px solid var(--hair-strong); border-radius: var(--r-panel); background: var(--ink-sunken); color: var(--chalk); font: inherit; font-size: 13px; }

/* The preview frame on the Widgets and forms screen.
   Sized in CSS, never inline: `style-src 'self'` means the browser DROPS a style
   attribute, so an inline height leaves a zero-height iframe — which reads as a
   broken preview rather than a blocked attribute. That is exactly what happened. */
.dn-preview-frame {
  width: 100%;
  height: min(72vh, 760px);
  border: 1px solid var(--hair, rgba(60, 60, 67, 0.12));
  border-radius: 14px;
  background: #f5f5f7;
  display: block;
}

/* ---------- Sign-in — the hero split ----------------------------------------
   Matches the school edition's login (its `.lg2`), so the two products read as
   one family, with the agency's own mascot and its own capability ticker.

   TOKENS ARE TRANSLATED, NOT COPIED. The school stylesheet and this design
   system use the same names for different things — school `--ink` is the TEXT
   colour, Dean's `--ink` is the PAGE FIELD, and `--chalk` is the text. Pasting
   the school's rules here would have produced white-on-white. Colour comes only
   from tokens, so a white-label repaint reaches this page with no further work.

   NO INLINE `style` ATTRIBUTES. The school staggers each ticker row with
   `style="animation-duration:..."`. This app's CSP is `style-src 'self'` with
   no `'unsafe-inline'`, so the browser drops those silently and every row would
   run at one speed — a bug that looks like a design choice. The durations live
   in `:nth-child` rules below instead. */
.aglg { position: relative; min-height: 100dvh; display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); overflow: clip; }

/* The whole product, whispered: every capability drifts across the page as a
   nearly transparent ticker. Rows alternate direction; the content of each row
   is doubled so the translateX(-50%) loop is seamless. */
.aglg-mq { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: clip;
  display: flex; flex-direction: column; justify-content: space-evenly; }
.aglg-mq-row { white-space: nowrap; width: max-content; font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(28px, 4.6vw, 54px); line-height: 1;
  color: #8494ac; opacity: 0.055;
  animation: aglg-mq-l 90s linear infinite; will-change: transform; }
.aglg-mq-row span { padding-right: 0.6em; }
.aglg-mq-row.rev { animation-name: aglg-mq-r; }
.aglg-mq-row:nth-child(1) { animation-duration: 86s; }
.aglg-mq-row:nth-child(2) { animation-duration: 100s; }
.aglg-mq-row:nth-child(3) { animation-duration: 114s; }
.aglg-mq-row:nth-child(4) { animation-duration: 128s; }
.aglg-mq-row:nth-child(5) { animation-duration: 142s; }
.aglg-mq-row:nth-child(6) { animation-duration: 156s; }
@keyframes aglg-mq-l { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes aglg-mq-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }
[data-theme="dark"] .aglg-mq-row { color: #93a5c0; opacity: 0.07; }

/* THE PANEL IS PINNED DEEP IN BOTH THEMES, DELIBERATELY NOT `var(--violet)`.
   The accent tokens flip for dark mode -- `--violet` goes #6d28d9 -> #a78bfa and
   `--violet-lift` -> #c4b5fd -- because they are tuned to be READ ON a dark field.
   This panel is the opposite case: a filled field that always carries white text.
   Feeding it the token turned the brand panel pale lavender in dark mode and
   dropped the headline to unreadable. These are the mark's own colours (the mark
   runs #8b5cf6 -> #35b0f7); white on the base clears 7:1. */
.aglg-panel { --aglg-base: #6d28d9; --aglg-deep: #3a1580; --aglg-glow: #35b0f7;
  position: relative; overflow: clip; display: flex; flex-direction: column;
  justify-content: space-between; padding: 44px 52px; color: #fff;
  background:
    radial-gradient(120% 90% at 85% -10%, color-mix(in srgb, var(--aglg-glow) 26%, transparent), transparent 55%),
    radial-gradient(100% 100% at -10% 110%, rgba(0, 0, 0, 0.35), transparent 60%),
    linear-gradient(155deg, var(--aglg-base) 0%, var(--aglg-deep) 100%); }
.aglg-word, .aglg-foot { position: relative; z-index: 2; }
.aglg-word { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; letter-spacing: -0.02em; }
/* Cyan, not violet: the school's dot is yellow on navy and reads instantly. A
   violet dot on the violet panel disappeared -- caught in the browser, not the CSS. */
.aglg-word .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--aglg-glow, #35b0f7);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.16); }

/* Dean in the tuxedo, standing on the panel floor. Portrait ratio, so height
   drives and width follows — the same relationship the school login uses. */
.aglg-dean-spot { position: absolute; right: 5%; bottom: 0; height: min(78%, 600px); z-index: 2; pointer-events: none; }
.aglg-dean { height: 100%; width: auto; display: block;
  filter: drop-shadow(0 30px 34px rgba(0, 0, 0, 0.42));
  opacity: 0; transform: translateY(46px);
  animation: aglg-dean-in 1.1s var(--ease-enter) 0.35s forwards; }
@keyframes aglg-dean-in { to { opacity: 1; transform: none; } }

.aglg-foot { max-width: min(480px, 60%); }
.aglg-eyebrow { display: inline-block; padding: 5px 12px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; font-weight: 700; color: rgba(255, 255, 255, 0.85); }
.aglg-rotator { margin-top: 18px; min-height: 96px; position: relative; }
.aglg-rotator p { margin: 0; position: absolute; inset: 0 auto auto 0; max-width: 480px;
  font-size: clamp(24px, 3vw, 34px); line-height: 1.18; font-weight: 750;
  letter-spacing: -0.03em; text-wrap: balance;
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.7s var(--ease-enter), transform 0.7s var(--ease-enter); }
.aglg-rotator p.cur { opacity: 1; transform: none; }

.aglg-formside { display: grid; place-items: center; padding: 48px 24px; background: var(--ink); }
.aglg-formbox { position: relative; z-index: 2; width: min(400px, 92vw); }
.aglg-head { margin-bottom: 18px; }
.aglg-head h1 { margin: 0 0 4px; font-size: 29px; letter-spacing: -0.035em; font-weight: 800; color: var(--chalk); }
.aglg-sub { margin: 0; color: var(--chalk-mute); font-size: 14.5px; }
.aglg-alt { margin: 26px 0 0; color: var(--chalk-faint); font-size: 12.5px; }
.aglg-alt a { color: var(--violet); font-weight: 600; }

@media (max-width: 900px) {
  .aglg { grid-template-columns: 1fr; }
  .aglg-panel { min-height: 300px; padding: 28px; }
  /* Inset him and cap the headline's width: at 82%/right:2% his hand ran off the
     right edge and the tagline set underneath him. Caught on a 430px viewport. */
  .aglg-dean-spot { height: 70%; right: 6%; }
  .aglg-foot { max-width: 66%; }
}
@media (prefers-reduced-motion: reduce) {
  .aglg-mq-row { animation: none; }
  .aglg-dean { animation: none; opacity: 1; transform: none; }
  .aglg-rotator p { transition: none; }
}

/* A caveat on a priced option: something the school never published, which the consultant should
   ask about before sending. Warned, not errored — nothing is wrong, something is unknown.
   Tokens are this edition's own (--warn / --warn-wash / --r-panel), matching .ag-optin-warning:
   the Dean-prefixed names belong to the other edition and would silently fall back to a
   hard-coded light-mode colour that breaks in dark. */
.ag-unconfirmed {
  margin: 10px 0 0;
  padding: 10px 14px;
  border-radius: var(--r-panel);
  background: var(--warn-wash);
  color: var(--warn);
  font-size: 13.5px;
  line-height: 1.5;
}

/* A note under a filter that can only speak for part of the catalogue. Spans the grid cell it sits
   beside rather than becoming a column of its own. */
.ag-coverage { margin: -6px 0 0; color: var(--warn); grid-column: 1 / -1; }