/* AnyTeam Interim — component classes (v0, will evolve). Values come from tokens.css custom properties; type sizes from the .<style> classes tokens.css generates (e.g. .display-1, .body-1-strong). Every colour here is a semantic token, so each class works in light and dark mode. */

:root { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }
body { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 24px; background: var(--bg-primary); color: var(--text-primary); -webkit-font-smoothing: antialiased; }
.at-pad { padding: var(--space-24); }
.at-row { display: flex; flex-wrap: wrap; gap: var(--space-12); align-items: center; }
.at-stack { display: flex; flex-direction: column; gap: var(--space-12); align-items: flex-start; }
.at-display { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.01em; margin: 0; }
.at-upper { text-transform: uppercase; }
.at-accent { color: inherit; } /* retired: the MEMORY word is set in the lockup's own colour */
:where(a, button, input, label, [tabindex]):focus-visible { outline: var(--stroke-l) solid var(--focus-ring); outline-offset: 2px; }

/* Logo — two <img> versions; the right one shows for the current colour mode (see assets/Logos/README.md) */
.at-logo { display: inline-flex; align-items: center; height: 24px; text-decoration: none; flex: none; }
.at-logo img { display: block; height: 100%; width: auto; }
.at-logo--mark { height: 32px; }
.at-logo__on-dark { display: none !important; }
[data-theme="dark"] .at-logo__on-light { display: none !important; }
[data-theme="dark"] .at-logo__on-dark { display: block !important; }

/* Type fallback when an image can't be used (plain-text email, alt contexts) */
.at-wordmark { font-family: var(--font-sans); font-weight: 600; font-size: 22px; line-height: 1; letter-spacing: -0.03em; text-transform: lowercase; color: var(--text-primary); text-decoration: none; }

/* Button — pill, 500 weight, three sizes */
.at-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); box-sizing: border-box; font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 500; text-decoration: none; white-space: nowrap; border: 0; border-radius: var(--radius-button); cursor: pointer; transition: background-color var(--duration-150) var(--ease-functional), color var(--duration-150) var(--ease-functional), box-shadow var(--duration-150) var(--ease-functional); }
.at-btn--s { height: var(--control-s); padding: 6px var(--space-16); }
.at-btn--m { height: var(--control-m); padding: 12px var(--space-24); }
.at-btn--l { height: var(--control-l); padding: 18px var(--space-24); }
.at-btn--primary { background: var(--action-primary); color: var(--on-action-primary); }
.at-btn--primary:hover { background: var(--text-hover); }
.at-btn--secondary { background: transparent; color: var(--text-primary); box-shadow: inset 0 0 0 var(--stroke-m) var(--border-secondary); }
.at-btn--secondary:hover { box-shadow: inset 0 0 0 var(--stroke-m) var(--text-primary); }
.at-btn--on-image { background: var(--bg-on-image); color: var(--black); }
.at-btn--on-image:hover { background: var(--grey-200); }
.at-btn--outline-on-image { background: transparent; color: var(--text-on-image); box-shadow: inset 0 0 0 var(--stroke-m) var(--text-on-image); }
.at-btn--outline-on-image:hover { background: var(--scrim); }
.at-btn--block { width: 100%; }
.at-btn:disabled, .at-btn[aria-disabled="true"] { background: var(--bg-disabled); color: var(--text-disabled); box-shadow: none; cursor: not-allowed; }

/* IconButton — circle */
.at-icon-btn { display: inline-grid; place-items: center; width: var(--control-m); height: var(--control-m); padding: 0; border: 0; border-radius: var(--radius-rounded); background: var(--bg-secondary); color: var(--text-primary); cursor: pointer; transition: background-color var(--duration-150) var(--ease-functional); }
.at-icon-btn:hover { background: var(--bg-hover); }
.at-icon-btn:disabled { color: var(--text-disabled); cursor: not-allowed; background: var(--bg-secondary); }
.at-icon-btn--ghost { background: transparent; width: 40px; height: 40px; }
.at-icon-btn--ghost:hover { background: var(--bg-hover); }
.at-icon { width: var(--icon-m); height: var(--icon-m); stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.at-icon--s { width: var(--icon-s); height: var(--icon-s); }

/* TextLink */
.at-link { color: var(--text-primary); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; transition: color var(--duration-150) var(--ease-functional); }
.at-link:hover { color: var(--text-hover); }
.at-link--chevron { display: inline-flex; align-items: center; gap: var(--space-6); text-decoration: none; font-size: 14px; line-height: 21px; }
.at-link--inline { color: var(--text-link); font-weight: 400; text-decoration: underline; }

/* GlobalNav — logo left, links in a centre pill, Sign in + Book a demo right */
.at-utility { height: var(--utility-bar-height); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gutter-exterior-l); background: var(--bg-secondary); font-size: 12px; line-height: 18px; font-weight: 500; }
.at-utility nav { display: flex; gap: var(--space-12); }
.at-utility a { color: var(--text-primary); text-decoration: none; }
.at-utility a + a::before { content: "|"; margin-right: var(--space-12); color: var(--text-primary); }
.at-nav { height: var(--nav-height); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 var(--gutter-exterior-l); background: var(--bg-primary); }
.at-nav__links { display: flex; gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-rounded); background: var(--bg-secondary); }
.at-nav__links a { font-weight: 500; color: var(--text-primary); text-decoration: none; padding: var(--space-6) var(--space-16); border-radius: var(--radius-rounded); transition: background-color var(--duration-150) var(--ease-functional); }
.at-nav__links a:hover { background: var(--bg-hover); }
.at-nav__links a[aria-current] { background: var(--bg-primary); }
.at-nav__end { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-16); }
.at-nav__end > a:not(.at-btn) { font-weight: 500; color: var(--text-primary); text-decoration: none; }
.at-nav__end > a:not(.at-btn):hover { color: var(--text-hover); }

/* PromoBar */
.at-promo { display: flex; align-items: center; justify-content: center; gap: var(--space-48); height: 44px; background: var(--bg-secondary); }
.at-promo a.at-promo__msg { font-size: 12px; line-height: 18px; font-weight: 500; color: var(--text-primary); text-decoration: underline; text-underline-offset: 2px; }
.at-promo button { background: none; border: 0; padding: var(--space-4); color: var(--text-primary); cursor: pointer; display: grid; place-items: center; }

/* EditorialNav (dark band) */
.at-ednav { height: var(--nav-height); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 var(--gutter-exterior-l); background: var(--bg-primary); }
.at-ednav__brand { display: inline-flex; align-items: baseline; gap: var(--space-8); text-decoration: none; }
.at-ednav__brand em { font-family: var(--font-serif); font-size: 22px; color: var(--text-primary); }
.at-ednav__links { display: flex; gap: var(--space-24); }
.at-ednav__links a { font-size: 16px; line-height: 16px; font-weight: 500; letter-spacing: 0.01em; color: var(--text-secondary); text-decoration: none; }
.at-ednav__links a:hover, .at-ednav__links a[aria-current] { color: var(--text-primary); }
.at-ednav__end { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-16); color: var(--text-primary); font-size: 16px; font-weight: 500; }
.at-ednav__end > a:not(.at-btn) { color: var(--text-primary); text-decoration: none; }

/* SearchField (search / ask) */
.at-search { display: inline-flex; align-items: center; gap: var(--space-8); height: var(--control-s); padding: 0 var(--space-16) 0 var(--space-8); border-radius: var(--radius-24); background: var(--bg-secondary); color: var(--text-primary); width: 180px; box-sizing: border-box; transition: background-color var(--duration-150) var(--ease-functional); }
.at-search:hover { background: var(--bg-hover); }
.at-search input { all: unset; flex: 1; min-width: 0; font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 500; color: var(--text-primary); }
.at-search input::placeholder { color: var(--text-secondary); }
.at-search:focus-within { outline: var(--stroke-l) solid var(--focus-ring); outline-offset: 2px; }

/* TextInput */
.at-field { display: flex; flex-direction: column; gap: var(--space-6); width: 320px; }
.at-field label { font-size: 14px; line-height: 21px; color: var(--text-secondary); }
.at-field input { box-sizing: border-box; height: var(--input-height); padding: 0 var(--space-16); border: 1px solid var(--border-primary); border-radius: var(--radius-8); background: var(--bg-primary); font-family: var(--font-sans); font-size: 16px; color: var(--text-primary); transition: box-shadow var(--duration-150) var(--ease-functional), border-color var(--duration-150) var(--ease-functional); }
.at-field input:focus { outline: none; border-color: var(--border-active); box-shadow: var(--shadow-focus); }
.at-field--error input { border-color: var(--border-critical); }
.at-field__msg { font-size: 12px; line-height: 18px; color: var(--text-secondary); }
.at-field--error .at-field__msg { color: var(--text-critical); }

/* TileSelector */
.at-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: var(--space-8); width: 100%; max-width: 560px; border: 0; padding: 0; margin: 0; }
.at-tile { position: relative; }
.at-tile input { position: absolute; opacity: 0; pointer-events: none; }
.at-tile span { display: grid; place-items: center; height: var(--control-m); padding: 0 var(--space-12); border-radius: var(--radius-4); box-shadow: inset 0 0 0 1px var(--border-secondary); font-size: 16px; color: var(--text-primary); cursor: pointer; text-align: center; transition: box-shadow var(--duration-150) var(--ease-functional); }
.at-tile span:hover { box-shadow: inset 0 0 0 1px var(--text-primary); }
.at-tile input:checked + span { box-shadow: inset 0 0 0 var(--stroke-m) var(--border-active); }
.at-tile input:focus-visible + span { outline: var(--stroke-l) solid var(--focus-ring); outline-offset: 2px; }
.at-tile input:disabled + span { background: var(--bg-secondary); color: var(--text-disabled); cursor: not-allowed; box-shadow: none; }
.at-tiles__head { display: flex; justify-content: space-between; align-items: center; max-width: 560px; margin-bottom: var(--space-12); font-weight: 500; }

/* Badge */
.at-badge { display: inline-flex; align-items: center; gap: var(--space-4); height: 32px; padding: 0 var(--space-12); border-radius: var(--radius-rounded); background: var(--bg-on-image); color: var(--black); font-size: 14px; line-height: 22px; font-weight: 500; }
.at-badge--dark { background: var(--black); color: var(--white); }

/* AgentCard */
.at-card { width: 100%; max-width: 360px; color: var(--text-primary); text-decoration: none; display: block; }
.at-card__media { position: relative; aspect-ratio: 1 / 1; background: var(--bg-image); overflow: hidden; border-radius: var(--radius-0); }
.at-card__media > .at-badge { position: absolute; top: var(--space-12); left: var(--space-12); z-index: 1; }
.at-card__info { padding: var(--space-8) 0 var(--space-2); }
.at-card__msg { color: var(--text-badge); font-weight: 500; }
.at-card__title { font-weight: 500; }
.at-card__sub { color: var(--text-secondary); }
.at-card__meta { font-weight: 500; margin-top: var(--space-8); }

/* Image and screenshot stand-ins (no real photography in this system yet) */
.at-img-studio { background: var(--bg-image); }
.at-img-photo { background: linear-gradient(90deg, rgba(17,17,17,0.72), rgba(17,17,17,0.12) 60%), linear-gradient(160deg, var(--grey-700), var(--grey-800) 55%, var(--grey-900)); }
.at-img-mono { background: linear-gradient(160deg, var(--grey-300), var(--grey-700)); }
.at-screen { position: absolute; inset: 18% 12% 0; background: var(--bg-primary); box-shadow: inset 0 0 0 1px var(--border-tertiary); padding: var(--space-16); display: flex; flex-direction: column; gap: var(--space-8); box-sizing: border-box; }
.at-screen i { display: block; height: 8px; border-radius: var(--radius-rounded); background: var(--bg-hover); }
.at-screen i:first-child { width: 45%; background: var(--text-primary); }
.at-screen i.at-screen__hl { background: var(--text-primary); width: 30%; }

/* HeroBanner */
.at-hero { position: relative; display: flex; align-items: flex-end; min-height: 420px; overflow: hidden; color: var(--text-on-image); }
.at-hero__copy { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-8); padding: var(--space-36); max-width: 640px; }
.at-hero__copy p { margin: 0 0 var(--space-16); font-size: 16px; line-height: 24px; color: var(--text-on-image); }
.at-hero__eyebrow { font-size: 13px; line-height: 1.5; color: var(--text-on-image); margin: 0 0 var(--space-8); }
.at-hero--contained { margin: 0 var(--gutter-exterior-l); }

/* ManifestoHero + footnote */
.at-manifesto { padding: var(--space-48) var(--gutter-exterior-l) var(--space-60); background: var(--bg-primary); color: var(--text-primary); }
.at-manifesto__eyebrow { font-size: 26px; line-height: 31px; font-weight: 500; letter-spacing: -0.02em; margin: 0 0 var(--space-20); }
.at-manifesto__head { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.01em; margin: 0; }
.at-footnote { font-family: var(--font-serif); font-style: italic; margin: var(--space-16) 0 0; }

/* Statement */
.at-statement { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter-grid-l); padding: var(--space-84) var(--gutter-exterior-l); background: var(--bg-primary); color: var(--text-primary); }
.at-statement > div { grid-column: 4 / span 6; display: flex; flex-direction: column; gap: 1.2em; }
.at-statement p { margin: 0; }

/* SplitFeature */
.at-split { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter-wide); padding: var(--space-60) var(--gutter-exterior-l); background: var(--bg-primary); color: var(--text-primary); align-items: start; }
.at-split__copy { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: var(--space-16); }
.at-split__copy h2 { margin: 0; }
.at-split__copy p { margin: 0; color: var(--text-secondary); }
.at-split__media { grid-column: 5 / span 8; aspect-ratio: 3 / 2; }

/* ArticleCard */
.at-article { display: grid; grid-template-columns: 7fr 5fr; gap: var(--gutter-wide); align-items: start; color: var(--text-primary); text-decoration: none; }
.at-article__media { aspect-ratio: 3 / 2; }
.at-article__copy { display: flex; flex-direction: column; gap: var(--space-12); }
.at-article__eyebrow { color: var(--text-secondary); }
.at-article__copy h3 { margin: 0; }
.at-article__dek { margin: 0; color: var(--text-secondary); }
.at-article--stacked { grid-template-columns: 1fr; gap: var(--space-16); }

/* NewsRail */
.at-rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24); padding: var(--space-12) 0; border-top: 1px solid var(--border-tertiary); border-bottom: 1px solid var(--border-tertiary); }
.at-rail a { display: grid; grid-template-columns: 96px 1fr; gap: var(--space-12); align-items: start; color: var(--text-primary); text-decoration: none; }
.at-rail a:hover h4 { color: var(--text-hover); }
.at-rail__thumb { aspect-ratio: 3 / 2; }
.at-rail__eyebrow { display: block; font-size: 13px; line-height: 1.5; color: var(--text-secondary); margin-bottom: var(--space-4); }
.at-rail h4 { margin: 0; transition: color var(--duration-150) var(--ease-functional); }
.at-rail__controls { display: flex; justify-content: flex-end; gap: var(--space-8); margin-bottom: var(--space-12); color: var(--text-primary); }

/* VideoControl */
.at-video { position: relative; min-height: 220px; display: flex; align-items: flex-end; justify-content: flex-end; padding: var(--space-24); }
.at-video::after { content: ""; position: absolute; inset: 0; background: var(--scrim); }
.at-video-btn { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: var(--space-8); height: var(--control-s); padding: 0 var(--space-16); border: 0; border-radius: var(--radius-button); background: var(--scrim-strong); color: var(--white); font-family: var(--font-sans); font-size: 14px; font-weight: 500; cursor: pointer; }
.at-video-btn:hover { background: var(--black); }

/* Banner (status message) */
.at-banner { display: flex; gap: var(--space-12); align-items: flex-start; padding: var(--space-16) var(--space-24); background: var(--warning); color: var(--on-warning); }

/* ThemeToggle */
.at-theme-toggle { display: inline-flex; gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-rounded); background: var(--bg-secondary); }
.at-theme-toggle button { all: unset; display: inline-flex; align-items: center; gap: var(--space-6); height: 32px; padding: 0 var(--space-12); border-radius: var(--radius-rounded); font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--text-secondary); cursor: pointer; }
.at-theme-toggle button[aria-pressed="true"] { background: var(--bg-primary); color: var(--text-primary); }
.at-theme-toggle button:focus-visible { outline: var(--stroke-l) solid var(--focus-ring); outline-offset: 2px; }


/* Grid — 4 columns below 600px, 8 at 600–959px, 12 at 960px+. Container caps the frame at 1920px and applies the page margin. */
.at-container { box-sizing: border-box; width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter-exterior-s); }
.at-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gutter-grid); row-gap: var(--space-48); }
.at-grid--wide { column-gap: var(--gutter-wide); }
.at-grid--dense { row-gap: var(--space-12); }
.at-span-full { grid-column: 1 / -1; }
.at-span-1 { grid-column: span 1 / span 1; }
.at-span-2 { grid-column: span 2 / span 2; }
.at-span-3 { grid-column: span 3 / span 3; }
.at-span-4 { grid-column: span 4 / span 4; }
@media (min-width: 600px) {
  .at-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .at-span-m-1 { grid-column: span 1 / span 1; }
  .at-span-m-2 { grid-column: span 2 / span 2; }
  .at-span-m-3 { grid-column: span 3 / span 3; }
  .at-span-m-4 { grid-column: span 4 / span 4; }
  .at-span-m-5 { grid-column: span 5 / span 5; }
  .at-span-m-6 { grid-column: span 6 / span 6; }
  .at-span-m-7 { grid-column: span 7 / span 7; }
  .at-span-m-8 { grid-column: span 8 / span 8; }
  .at-start-m-1 { grid-column-start: 1; }
  .at-start-m-2 { grid-column-start: 2; }
  .at-start-m-3 { grid-column-start: 3; }
  .at-start-m-4 { grid-column-start: 4; }
  .at-start-m-5 { grid-column-start: 5; }
  .at-start-m-6 { grid-column-start: 6; }
  .at-start-m-7 { grid-column-start: 7; }
  .at-start-m-8 { grid-column-start: 8; }
}
@media (min-width: 960px) {
  .at-container { padding: 0 var(--gutter-exterior-l); }
  .at-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter-grid-l); }
  .at-grid--wide { column-gap: var(--gutter-wide); }
  .at-span-l-1 { grid-column: span 1 / span 1; }
  .at-span-l-2 { grid-column: span 2 / span 2; }
  .at-span-l-3 { grid-column: span 3 / span 3; }
  .at-span-l-4 { grid-column: span 4 / span 4; }
  .at-span-l-5 { grid-column: span 5 / span 5; }
  .at-span-l-6 { grid-column: span 6 / span 6; }
  .at-span-l-7 { grid-column: span 7 / span 7; }
  .at-span-l-8 { grid-column: span 8 / span 8; }
  .at-span-l-9 { grid-column: span 9 / span 9; }
  .at-span-l-10 { grid-column: span 10 / span 10; }
  .at-span-l-11 { grid-column: span 11 / span 11; }
  .at-span-l-12 { grid-column: span 12 / span 12; }
  .at-start-l-1 { grid-column-start: 1; }
  .at-start-l-2 { grid-column-start: 2; }
  .at-start-l-3 { grid-column-start: 3; }
  .at-start-l-4 { grid-column-start: 4; }
  .at-start-l-5 { grid-column-start: 5; }
  .at-start-l-6 { grid-column-start: 6; }
  .at-start-l-7 { grid-column-start: 7; }
  .at-start-l-8 { grid-column-start: 8; }
  .at-start-l-9 { grid-column-start: 9; }
  .at-start-l-10 { grid-column-start: 10; }
  .at-start-l-11 { grid-column-start: 11; }
  .at-start-l-12 { grid-column-start: 12; }
}
/* Overlay for reviewing layouts: add .at-grid-overlay to an .at-grid */
.at-grid-overlay { background-image: repeating-linear-gradient(90deg, rgba(255, 80, 0, 0.12) 0 calc((100% - 3 * var(--gutter-grid)) / 4), transparent 0 calc((100% - 3 * var(--gutter-grid)) / 4 + var(--gutter-grid))); }
@media (min-width: 600px) { .at-grid-overlay { background-image: repeating-linear-gradient(90deg, rgba(255, 80, 0, 0.12) 0 calc((100% - 7 * var(--gutter-grid)) / 8), transparent 0 calc((100% - 7 * var(--gutter-grid)) / 8 + var(--gutter-grid))); } }
@media (min-width: 960px) { .at-grid-overlay { background-image: repeating-linear-gradient(90deg, rgba(255, 80, 0, 0.12) 0 calc((100% - 11 * var(--gutter-grid-l)) / 12), transparent 0 calc((100% - 11 * var(--gutter-grid-l)) / 12 + var(--gutter-grid-l))); } }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ===== Added Oct 23 2026 from the website build (Home). Every value is a token. ===== */

/* GlobalNav: drop-down triggers and menu panels */
.at-nav__links button { all: unset; display: inline-flex; align-items: center; gap: var(--space-4); font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 500; color: var(--text-primary); padding: var(--space-6) var(--space-12) var(--space-6) var(--space-16); border-radius: var(--radius-rounded); cursor: pointer; transition: background-color var(--duration-150) var(--ease-functional), color var(--duration-150) var(--ease-functional); }
.at-nav__links button:hover { background: var(--bg-hover); }
.at-nav__links button:focus-visible { outline: var(--stroke-l) solid var(--focus-ring); outline-offset: 2px; }
.at-nav__links button[aria-expanded="true"] { background: var(--action-primary); color: var(--on-action-primary); }
.at-nav__links button svg { transition: transform var(--duration-250) var(--ease-functional); }
.at-nav__links button[aria-expanded="true"] svg { transform: rotate(180deg); }
.at-nav--over-media { background: transparent; }
.at-mega { box-sizing: border-box; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter-grid-l); padding: var(--space-24); background: var(--bg-primary); color: var(--text-primary); border-radius: var(--radius-8); box-shadow: var(--shadow-100); }
[data-theme="dark"] .at-mega { background: var(--bg-secondary); }
.at-mega[hidden] { display: none; }
.at-mega__group { grid-column: span 3; display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.at-mega__group--wide { grid-column: span 6; }
.at-mega__head { margin: 0 0 var(--space-8); font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.at-mega__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter-grid-l); }
.at-mega__cols > div { display: flex; flex-direction: column; gap: var(--space-4); }
.at-mega__item { display: block; padding: var(--space-6) 0; color: var(--text-primary); text-decoration: none; }
.at-mega__item b { display: block; font-weight: 500; transition: color var(--duration-150) var(--ease-functional); }
.at-mega__item span { display: block; font-size: 14px; line-height: 21px; color: var(--text-secondary); }
.at-mega__item:hover b { color: var(--text-hover); }
.at-mega__media { grid-column: 7 / span 6; display: grid; grid-template-columns: 2fr 3fr; gap: var(--space-12); min-height: 264px; }
.at-mega__media--one { grid-column: 10 / span 3; grid-template-columns: 1fr; }
.at-mega__media--three { grid-column: 4 / span 9; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.at-mega__media--callout { grid-template-columns: 1fr; }
.at-mega__tile { display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; color: var(--text-primary); text-decoration: none; }
.at-mega__img { flex: 1; position: relative; overflow: hidden; min-height: 200px; background: var(--bg-image); }
.at-mega__img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-400) var(--ease-expressive); }
.at-mega__img--contain > img { object-fit: contain; }
.at-mega__tile:hover .at-mega__img > img { transform: scale(1.03); }
.at-mega__cap { font-size: 12px; line-height: 18px; color: var(--text-secondary); transition: color var(--duration-150) var(--ease-functional); }
.at-mega__tile:hover .at-mega__cap { color: var(--text-primary); }
.at-mega__cap b { display: block; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--text-primary); }
.at-mega__media--callout .at-mega__cap { font-size: 14px; line-height: 21px; }
.at-mega__mono { filter: grayscale(1); }

/* VideoControl: round, icon-only, outline variant (for a washed video hero) */
.at-video-btn--icon { width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: var(--radius-rounded); background: transparent; color: var(--text-primary); box-shadow: inset 0 0 0 var(--stroke-m) var(--border-secondary); transition: box-shadow var(--duration-150) var(--ease-functional); }
.at-video-btn--icon:hover { background: transparent; box-shadow: inset 0 0 0 var(--stroke-m) var(--text-primary); }

/* VideoHero: full-viewport video under a wash of the page ground, fading into the page at the bottom */
.at-video-hero { position: relative; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-end; min-height: 100vh; min-height: 100svh; padding: calc(var(--nav-height) + var(--space-72)) 0 max(var(--space-84), 16svh); overflow: hidden; background: var(--bg-primary); color: var(--text-primary); }
.at-video-hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--bg-image); }
.at-video-hero__media video, .at-video-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.at-video-hero__media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--bg-primary); opacity: 0.58; }
[data-theme="dark"] .at-video-hero__media::before, .at-video-hero[data-theme="dark"] .at-video-hero__media::before { opacity: 0.74; }
.at-video-hero__media::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(to bottom, transparent 80%, var(--bg-primary) 100%); }
.at-video-hero__body { position: relative; z-index: 3; width: 100%; }
.at-video-hero__lockup, .at-video-hero__side { will-change: transform; }
.at-video-hero > .at-video-btn--icon { position: absolute; z-index: 4; top: calc(var(--nav-height) + var(--space-24)); right: var(--gutter-exterior-l); }

/* ProductPanel: a Background (or flat art colour) with a transparent Cutout on top */
.at-panel { position: relative; aspect-ratio: 1 / 1; max-width: 100%; overflow: hidden; background: var(--art-paper); }
.at-panel--wide { aspect-ratio: 3 / 2; }
.at-panel--neutral { background: var(--art-paper); }
.at-panel--bold { background: var(--art-ember); }
.at-panel > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-400) var(--ease-expressive); }
.at-panel__bg { z-index: 0; }
.at-panel__bg--flip { transform: scaleX(-1); }
.at-panel__cut { z-index: 1; }
.at-panel__cut--left { object-position: 0 0; }
.at-panel__cut--right { object-position: 100% 0; }
a:hover > .at-panel > .at-panel__bg, a:hover .at-panel__bg, .at-panel:hover > .at-panel__bg { transform: scale(1.06); }
a:hover .at-panel__bg--flip, .at-panel:hover > .at-panel__bg--flip { transform: scaleX(-1) scale(1.06); }
a:hover .at-panel__cut, .at-panel:hover > .at-panel__cut { transform: scale(1.02); }

/* QuoteCarousel: one attributed quote at a time */
.at-quotes { display: grid; grid-template-columns: 1fr; row-gap: var(--space-24); color: var(--text-primary); }
.at-quotes__viewport { overflow: hidden; min-width: 0; }
.at-quotes__track { display: flex; margin: 0; padding: 0; list-style: none; transition: transform var(--duration-400) var(--ease-expressive); }
.at-quotes__slide { flex: 0 0 100%; min-width: 0; }
.at-quotes figure { margin: 0; max-width: 900px; }
.at-quotes blockquote { margin: 0; font: var(--text-conversation-3); text-wrap: balance; }
.at-quotes figcaption { display: flex; align-items: center; gap: var(--space-12); margin-top: var(--space-20); font-size: 14px; line-height: 21px; color: var(--text-secondary); }
.at-quotes figcaption b { font-weight: 500; color: var(--text-primary); }
.at-quotes__avatar { width: 64px; height: 64px; flex: none; border-radius: var(--radius-rounded); object-fit: cover; }
.at-quotes__controls { display: flex; align-items: center; gap: var(--space-8); }
.at-quotes__count { margin-right: var(--space-8); font-size: 14px; line-height: 21px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
@media (min-width: 960px) {
  .at-quotes { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter-grid-l); align-items: end; }
  .at-quotes__viewport { grid-column: 3 / span 8; }
  .at-quotes__controls { grid-column: 11 / span 2; justify-content: flex-end; padding-bottom: var(--space-12); }
  .at-quotes blockquote { font: var(--text-conversation-2); }
}

/* GrowingHeadings: three stages whose headings grow left to right on one shared baseline */
.at-grow { display: grid; grid-template-columns: 1fr; gap: var(--space-48) var(--gutter-grid-l); color: var(--text-primary); }
.at-grow__col { display: flex; flex-direction: column; gap: var(--space-16); }
.at-grow__head { margin: 0; font: var(--text-title-1); white-space: nowrap; }
.at-grow__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border-active); }
.at-grow__list li { padding: var(--space-12) 0; border-bottom: 1px solid var(--border-tertiary); color: var(--text-secondary); }
.at-grow__col:last-child .at-grow__list li { color: var(--text-primary); }
@media (min-width: 960px) {
  .at-grow { grid-template-columns: 3fr 4fr 5fr; grid-template-rows: auto auto; row-gap: var(--space-16); align-items: start; }
  .at-grow > .at-grow__col { display: contents; }
  .at-grow__head { grid-row: 1; align-self: last baseline; }
  .at-grow__list { grid-row: 2; }
  .at-grow__col:nth-child(1) > * { grid-column: 1; }
  .at-grow__col:nth-child(2) > * { grid-column: 2; }
  .at-grow__col:nth-child(3) > * { grid-column: 3; }
  .at-grow__col:nth-child(2) .at-grow__head { font: var(--text-oversize-3); letter-spacing: -0.02em; }
  .at-grow__col:nth-child(3) .at-grow__head { font: var(--text-oversize-1); letter-spacing: -0.03em; }
}

/* DayTimeline: an hour track with a dot per run, above the run log */
.at-day { color: var(--text-primary); }
.at-day__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-12); margin-bottom: var(--space-16); font-weight: 500; }
.at-day__head small { font-size: 12px; line-height: 18px; font-weight: 400; color: var(--text-secondary); }
.at-day__track { position: relative; height: 56px; margin-bottom: var(--space-12); border-bottom: 1px solid var(--border-secondary); }
.at-day__tick { position: absolute; bottom: 0; width: 1px; height: 8px; background: var(--border-secondary); }
.at-day__hour { position: absolute; bottom: 12px; transform: translateX(-50%); font-size: 12px; line-height: 18px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.at-day__run { position: absolute; bottom: -5px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: var(--radius-rounded); background: var(--text-primary); }
.at-day__log { margin: 0; padding: 0; list-style: none; }
.at-day__log li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--space-4) var(--space-16); padding: var(--space-16) 0; border-bottom: 1px solid var(--border-tertiary); }
.at-day__log time { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.at-day__log b { font-weight: 500; }
.at-day__log span { grid-column: 2; color: var(--text-secondary); }
@media (min-width: 600px) { .at-day__log li { grid-template-columns: 64px 200px minmax(0, 1fr); } .at-day__log span { grid-column: auto; } }

/* PhotoTile: a Lifestyle photo shown black and white, back to colour with a slight zoom on hover */
.at-photo-tile { display: flex; flex-direction: column; gap: var(--space-8); color: var(--text-primary); text-decoration: none; }
.at-photo-tile__img { position: relative; aspect-ratio: 4 / 5; max-width: 100%; margin-bottom: var(--space-8); overflow: hidden; background: var(--bg-image); }
.at-photo-tile__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter var(--duration-400) var(--ease-expressive), transform var(--duration-400) var(--ease-expressive); }
.at-photo-tile:hover .at-photo-tile__img img, .at-photo-tile:focus-within .at-photo-tile__img img { filter: none; transform: scale(1.05); }
.at-photo-tile__title { margin: 0; font: var(--text-title-4); }
.at-photo-tile__lead { margin: 0; font-weight: 500; }
.at-photo-tile__body { margin: 0; color: var(--text-secondary); }
@media (prefers-reduced-motion: reduce) { .at-photo-tile:hover .at-photo-tile__img img, a:hover .at-panel__cut, .at-panel:hover > .at-panel__cut, .at-panel:hover > .at-panel__bg { transform: none; } }
@media (prefers-reduced-motion: reduce) { a:hover .at-panel__bg--flip, .at-panel:hover > .at-panel__bg--flip { transform: scaleX(-1); } }