/* =========================================================
   Amazed Labs — company site stylesheet
   Source of truth: tokens/tokens.css (do not edit values here
   without syncing tokens.json and tokens.css).
   ========================================================= */

/* Source keeps the stable path so this sheet opens and edits normally. The build
   rewrites the import below to the token sheet's own content-addressed FILENAME,
   a sibling `tokens.<hash>.css`. It has to name the file: a query on this sheet's
   own <link> is not inherited by its imports — the browser resolves the path
   against the sheet and drops the query — and neither is a hash. The token sheet
   is hashed independently of this one, so a change to either re-keys only that
   file. See scripts/build.mjs. */
@import url("./tokens.30e79c6202b482a2.css");

/* ---------- Reset (small, opinionated) ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; }
/* The UA gives <figure> a 40px side margin, which shrinks the hero and story
   art inside their grid columns. Reset it so illustrations fill their column. */
figure { margin: 0; }
img, svg, video { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; margin: 0; }
:focus-visible { outline: var(--al-stroke-focus) solid var(--al-accent-wonder-pressed); outline-offset: 2px; border-radius: 4px; }

/* ---------- Base ---------- */
html, body {
  background: var(--al-surface-canvas);
  color: var(--al-ink-primary);
}
body {
  font-family: var(--al-font-body);
  font-size: var(--al-body-m-size);
  line-height: var(--al-body-m-lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--al-font-display);
  font-weight: 700;
  color: var(--al-ink-primary);
  margin: 0;
  letter-spacing: -0.3px;
}
h1 {
  font-size: var(--al-display-xl-size);
  line-height: var(--al-display-xl-lh);
  letter-spacing: var(--al-display-xl-tr);
  font-weight: 700;
  /* Matches the hero's own h1 spacing, so a standalone h1 (404) never collides
     with the paragraph beneath it. */
  margin-bottom: var(--al-space-4);
}
h2 {
  font-size: var(--al-display-l-size);
  line-height: var(--al-display-l-lh);
  letter-spacing: var(--al-display-l-tr);
  margin-bottom: var(--al-space-4);
}
h3 {
  font-size: var(--al-display-m-size);
  line-height: var(--al-display-m-lh);
  letter-spacing: var(--al-display-m-tr);
  margin-bottom: var(--al-space-3);
}
h4 {
  font-size: var(--al-title-l-size);
  line-height: var(--al-title-l-lh);
  letter-spacing: var(--al-title-l-tr);
  margin-bottom: var(--al-space-2);
}

p { margin: 0 0 var(--al-space-3) 0; color: var(--al-ink-secondary); }
strong { color: var(--al-ink-primary); font-weight: 600; }
small { font-size: var(--al-body-s-size); }
a { color: var(--al-ink-primary); text-decoration: underline; text-decoration-color: var(--al-divider-strong); text-underline-offset: 4px; transition: text-decoration-color var(--al-motion-state) var(--al-ease-ink); }
a:hover, a:focus-visible { text-decoration-color: var(--al-accent-wonder); }

/* ---------- Layout primitives ---------- */
.al-container {
  width: 100%;
  max-width: var(--al-container-max);
  margin: 0 auto;
  padding: 0 var(--al-container-pad-mobile);
}
.al-container--narrow {
  max-width: var(--al-container-narrow-max);
}
/* The product proof is the widest band on the page — it earns more room than
   the reading columns around it, and the extra width is what keeps each real
   product screenshot legible in a three-up row. */
.al-container--wide {
  max-width: var(--al-container-wide-max);
}
@media (min-width: 768px) {
  .al-container { padding: 0 var(--al-container-pad); }
}

.al-section {
  padding: var(--al-space-12) 0;
}
@media (min-width: 768px) {
  .al-section { padding: var(--al-space-14) 0; }
}
/* The hero and the product band are deliberately close together: the page has
   to reach real product proof inside the first screen, so neither one carries
   the full section rhythm on its facing edge. */
.al-section--hero {
  padding-top: var(--al-space-5);
  padding-bottom: var(--al-space-6);
}
.al-section--products {
  padding-top: var(--al-space-6);
}
@media (min-width: 768px) {
  .al-section--hero {
    padding-top: var(--al-space-8);
    padding-bottom: var(--al-space-8);
  }
  .al-section--products { padding-top: var(--al-space-8); }
}
.al-section__lede {
  font-size: var(--al-body-l-size);
  line-height: var(--al-body-l-lh);
  max-width: 62ch;
}

.al-eyebrow {
  font-family: var(--al-font-ui);
  font-size: var(--al-eyebrow-size);
  letter-spacing: var(--al-eyebrow-tr);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--al-ink-muted);
  margin-bottom: var(--al-space-3);
}

/* ---------- Skip link ---------- */
.al-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--al-ink-primary);
  color: var(--al-ink-inverse);
  padding: var(--al-space-2) var(--al-space-3);
  border-radius: var(--al-radius-sm);
  z-index: 999;
}
.al-skip:focus {
  left: var(--al-space-3);
  top: var(--al-space-3);
}

/* ---------- Site header / nav ---------- */
.al-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 246, 236, 0.86);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--al-divider-hairline);
}
.al-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--al-space-3) var(--al-container-pad-mobile);
  gap: var(--al-space-3);
}
@media (min-width: 768px) {
  .al-header__inner { padding: var(--al-space-3) var(--al-container-pad); }
}
.al-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--al-space-2);
  text-decoration: none;
  font-family: var(--al-font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--al-ink-primary);
  letter-spacing: -0.3px;
  white-space: nowrap;
}
.al-brand img { width: 32px; height: 32px; }
.al-brand:focus-visible { outline: var(--al-stroke-focus) solid var(--al-accent-wonder-pressed); outline-offset: 2px; border-radius: 4px; }
.al-nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--al-space-3);
  /* Toggle pill width: hamburger glyph + pill padding + hairline border. The
     mobile <details> box is pinned to the same value, so the two can't drift. */
  --al-nav-toggle-w: calc(18px + 2 * var(--al-space-3) + 2px);
}
.al-nav__link {
  display: none;
  font-family: var(--al-font-ui);
  font-size: var(--al-body-s-size);
  color: var(--al-ink-secondary);
  text-decoration: none;
  padding: var(--al-space-2) 0;
  transition: color var(--al-motion-state) var(--al-ease-ink);
}
.al-nav__link:hover, .al-nav__link:focus-visible {
  color: var(--al-ink-primary);
}
@media (min-width: 768px) {
  .al-nav { gap: var(--al-space-5); }
  .al-nav__link { display: inline-flex; }
}

/* ---------- Mobile nav disclosure (no-JS <details>, <768px only; desktop uses the inline links above) ---------- */
/* The disclosure is a column: toggle on top, panel underneath and IN FLOW, so
   opening it grows the sticky header instead of floating a layer over the page.
   The box is pinned to the toggle pill's width so the wider panel never widens
   the header row — that keeps the row on one line down to 320px. The
   panel is centred on the toggle rather than flush to the container edge: the
   toggle sits a CTA-width in from the right, so centring is what keeps the
   panel on screen at 320px (regression-tested). */
.al-nav__menu {
  display: flex;
  flex-direction: column;
  /* The toggle is the last control in the bar, so its right edge is the
     container's right edge. Aligning the panel to that edge (it overflows
     leftward out of the pinned box) lands it on the header's right margin
     instead of floating mid-row. */
  align-items: flex-end;
  width: var(--al-nav-toggle-w);
}
.al-nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--al-nav-toggle-w);
  min-width: var(--al-touch-min);
  min-height: var(--al-touch-min);
  padding: 0 var(--al-space-3);
  border: 1px solid var(--al-divider-strong);
  border-radius: var(--al-radius-pill);
  color: var(--al-ink-primary);
  cursor: pointer;
  list-style: none;
  transition: background var(--al-motion-state) var(--al-ease-ink), border-color var(--al-motion-state) var(--al-ease-ink);
}
.al-nav__toggle::-webkit-details-marker { display: none; }
.al-nav__toggle:hover { background: var(--al-surface-raised); border-color: var(--al-ink-tertiary); }
.al-nav__toggle:focus-visible { outline: var(--al-stroke-focus) solid var(--al-accent-wonder-pressed); outline-offset: 2px; }
.al-nav__bars { position: relative; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }
.al-nav__bars::before, .al-nav__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.al-nav__bars::before { top: -6px; }
.al-nav__bars::after  { top: 6px; }
.al-nav__bars, .al-nav__bars::before, .al-nav__bars::after {
  transition: transform var(--al-motion-state) var(--al-ease-ink), top var(--al-motion-state) var(--al-ease-ink), background var(--al-motion-state) var(--al-ease-ink);
}
.al-nav__menu[open] .al-nav__bars { background: transparent; }
.al-nav__menu[open] .al-nav__bars::before { top: 0; transform: rotate(45deg); }
.al-nav__menu[open] .al-nav__bars::after  { top: 0; transform: rotate(-45deg); }
.al-nav__panel {
  /* In flow (not absolute): the open panel is part of the header box, so the
     hero is pushed below it and can never be covered. `position: relative`
     only keeps z-index meaningful for the panel's shadow. */
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--al-space-1);
  /* Never wider than the viewport minus the container gutters, so the
     right-aligned panel still starts on screen at 320px. */
  width: min(220px, calc(100vw - 2 * var(--al-container-pad-mobile)));
  margin-top: var(--al-space-2);
  padding: var(--al-space-2);
  background: var(--al-surface-panel);
  border: 1px solid var(--al-divider-subtle);
  border-radius: var(--al-radius-md);
  box-shadow: var(--al-elev-raised);
}
.al-nav__panel .al-nav__link {
  display: block;
  padding: var(--al-space-2) var(--al-space-3);
  border-radius: var(--al-radius-sm);
  color: var(--al-ink-secondary);
}
.al-nav__panel .al-nav__link:hover,
.al-nav__panel .al-nav__link:focus-visible {
  color: var(--al-ink-primary);
  background: var(--al-surface-canvas);
}
@media (min-width: 768px) {
  /* Desktop renders the inline .al-nav__link list; the mobile disclosure is hidden. */
  .al-nav__menu { display: none; }
}
@media (max-width: 767px) {
  /* Give the brand the same touch-target box as the toggle so the bar controls
     stay aligned once the header expands. Closed-state geometry is unchanged:
     44px is shorter than the bar row, so `align-items: center` still centres it. */
  .al-header .al-brand { min-height: var(--al-touch-min); }
  /* While the panel is open the header is taller than the bar row — pin the bar
     controls to the top so they stay on the bar instead of re-centring against
     the expanded header. Progressive enhancement: where :has() is unsupported
     the panel still pushes the hero down, only this centring is skipped. */
  .al-header__inner:has(.al-nav__menu[open]),
  .al-nav:has(.al-nav__menu[open]) { align-items: flex-start; }
}
@media (max-width: 479px) {
  /* Narrow-phone header: logo-only brand (the wordmark returns >=480px and always
     stays in the footer) keeps the bar on a single row with the menu toggle down
     to 320px. */
  .al-header .al-brand span { display: none; }
}

/* ---------- Hero ---------- */
.al-hero {
  display: grid;
  gap: var(--al-space-5);
  align-items: center;
}
@media (min-width: 1024px) {
  /* The copy column is wide enough for the headline to set in three lines with
     no stranded word; a narrower one broke it to four and pushed the apps below
     the fold. */
  .al-hero { grid-template-columns: 1.25fr 1fr; gap: var(--al-space-12); }
}
.al-hero__copy h1 { margin-bottom: var(--al-space-4); }
.al-hero__copy h1 .al-mark-wonder {
  /* Wonder accent used as decorative emphasis only — italic + subtle underline rule.
     Color is kept off text to preserve WCAG AA contrast against cream canvas. */
  font-style: italic;
  background-image: linear-gradient(transparent 88%, var(--al-accent-wonder) 88%, var(--al-accent-wonder) 96%, transparent 96%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 0 0.04em;
}
.al-hero__lede {
  font-size: var(--al-body-l-size);
  line-height: var(--al-body-l-lh);
  color: var(--al-ink-secondary);
  max-width: 44ch;
  margin-bottom: var(--al-space-5);
}
.al-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--al-space-3);
}
.al-hero__art {
  border-radius: var(--al-radius-xl);
  overflow: hidden;
  background: var(--al-surface-canvas-warm);
  box-shadow: var(--al-elev-card);
  aspect-ratio: 16 / 9;
}
@media (min-width: 1024px) {
  .al-hero__art { aspect-ratio: 4 / 3; }
}
@media (max-width: 767px) {
  /* On a phone the hero illustration stacks *under* the copy, so it is the one
     thing standing between the visitor and the apps. The page keeps its warmth
     from the illustrations that carry meaning further down — the TandemPaws
     card and the story scene — and gives the first screen to the products. */
  .al-hero__art { display: none; }
}
.al-hero__art img,
.al-hero__art svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Buttons ---------- */
.al-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--al-space-2);
  font-family: var(--al-font-ui);
  font-size: var(--al-body-m-size);
  font-weight: 600;
  min-height: var(--al-touch-min);
  padding: var(--al-space-3) var(--al-space-5);
  border-radius: var(--al-radius-pill);
  text-decoration: none;
  transition: transform var(--al-motion-state) var(--al-ease-ink),
              background var(--al-motion-state) var(--al-ease-ink),
              box-shadow var(--al-motion-state) var(--al-ease-ink);
  cursor: pointer;
  border: 1px solid transparent;
}
.al-btn:focus-visible {
  outline: var(--al-stroke-focus) solid var(--al-accent-wonder-pressed);
  outline-offset: 2px;
}
.al-btn--primary {
  background: var(--al-ink-primary);
  color: var(--al-ink-inverse);
}
.al-btn--primary:hover, .al-btn--primary:focus-visible {
  background: #1d1810;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(42, 36, 27, 0.18);
}
.al-btn--ghost {
  background: transparent;
  color: var(--al-ink-primary);
  border-color: var(--al-divider-strong);
}
.al-btn--ghost:hover, .al-btn--ghost:focus-visible {
  background: var(--al-surface-raised);
  transform: translateY(-1px);
}
.al-btn--wonder {
  background: var(--al-accent-wonder);
  color: var(--al-ink-primary);
}
.al-btn--wonder:hover, .al-btn--wonder:focus-visible {
  background: var(--al-accent-wonder-pressed);
  color: var(--al-ink-inverse);
  transform: translateY(-1px);
}

/* ---------- Founder story ---------- */
.al-story {
  display: grid;
  gap: var(--al-space-8);
  align-items: center;
}
@media (min-width: 1024px) {
  /* The concept plate is square, so it earns less than half the row: at 1fr 1fr
     a 500px square would tower over ~350px of prose. The narrower first track
     keeps the two sides close in height and the section short. */
  .al-story { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); column-gap: var(--al-space-12); }
}
.al-story__body p { font-size: var(--al-body-l-size); line-height: var(--al-body-l-lh); }
.al-story__sign {
  font-family: var(--al-font-display);
  font-size: var(--al-body-m-size);
  color: var(--al-ink-secondary);
  margin-top: var(--al-space-5);
}
/* The concept plate is now the section's only visual. It is a square graphic
   that already carries its own wordmark and line, so it is framed and
   width-capped rather than stretched to the container, where it would outweigh
   the story it illustrates. `contain`, never `cover` — cropping this one would
   cut the wordmark off the top and the line off the bottom. The artwork's own
   light background is left as supplied; the plate only frames it. */
.al-story__concept {
  justify-self: center;
  width: min(100%, 400px);
  padding: var(--al-space-4);
  background: var(--al-surface-panel);
  border: 1px solid var(--al-divider-subtle);
  border-radius: var(--al-radius-lg);
  box-shadow: var(--al-elev-card);
}
.al-story__concept img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: var(--al-radius-md);
}
/* Must follow the base rules above, not sit with the other .al-story
   breakpoint: both selectors are one class deep, so source order is what
   decides which placement wins. */
@media (min-width: 1024px) {
  /* The plate leads the row and the prose sits beside it. The figure comes
     after the body in the document so a phone reads the heading first; the
     explicit placement is what puts it back on the left on a wide screen. */
  .al-story__concept {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
  }
  .al-story__body { grid-column: 2; grid-row: 1; }
}

/* ---------- Values grid ---------- */
.al-values {
  display: grid;
  gap: var(--al-space-5);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: var(--al-space-8);
}
.al-value {
  background: var(--al-surface-panel);
  border: 1px solid var(--al-divider-subtle);
  border-radius: var(--al-radius-lg);
  padding: var(--al-space-5);
  transition: border-color var(--al-motion-state) var(--al-ease-ink), transform var(--al-motion-state) var(--al-ease-ink);
}
.al-value:hover, .al-value:focus-within {
  border-color: var(--al-divider-strong);
  transform: translateY(-2px);
}
.al-value__icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--al-surface-canvas);
  border-radius: var(--al-radius-md);
  margin-bottom: var(--al-space-3);
}
.al-value h3 {
  font-size: var(--al-title-l-size);
  line-height: var(--al-title-l-lh);
  margin-bottom: var(--al-space-2);
}
.al-value p {
  margin: 0;
  font-size: var(--al-body-m-size);
  line-height: var(--al-body-m-lh);
}

/* ---------- Product cards ---------- */
.al-products {
  display: grid;
  gap: var(--al-space-5);
  margin-top: var(--al-space-6);
  /* Cards size to their own content. Stretching them to a shared height left a
     tall void in the one card that carries the shortest boundary line. */
  align-items: start;
}
@media (min-width: 1024px) {
  .al-products { grid-template-columns: repeat(3, 1fr); }
}
.al-product {
  background: var(--al-surface-panel);
  border: 1px solid var(--al-divider-subtle);
  border-radius: var(--al-radius-lg);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform var(--al-motion-state) var(--al-ease-ink), box-shadow var(--al-motion-state) var(--al-ease-ink);
}
.al-product::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  z-index: 1;
}
.al-product[data-product="tonoit"]::before        { background: var(--al-product-tono); }
.al-product[data-product="parentscript"]::before  { background: var(--al-product-parentscript); }
.al-product[data-product="tandempaws"]::before    { background: var(--al-product-tandempaws); }
.al-product:hover {
  transform: translateY(-3px);
  box-shadow: var(--al-elev-raised);
}
/* The proof panel. A fixed 4:3 box means the real screenshots and the one
   illustration share a rhythm, and the box is reserved before the image
   decodes, so nothing below it shifts. */
.al-product__shot {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--al-surface-sunken);
  border-bottom: 1px solid var(--al-divider-subtle);
}
.al-product__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.al-product__shot--dark { background: #0B0B10; }
/* The illustration is a drawing, not a screen: show all of it rather than
   cropping to fill, so nobody reads a cropped edge as a cut-off interface. */
.al-product__shot--art  { background: var(--al-surface-canvas-warm); }
.al-product__shot--art img { object-fit: contain; }
.al-product__body {
  display: flex;
  flex-direction: column;
  gap: var(--al-space-3);
  padding: var(--al-space-5);
  flex: 1;
}
.al-product h3 {
  font-size: var(--al-display-m-size);
  font-family: var(--al-font-display);
  color: var(--al-ink-primary);
  margin-bottom: 0;
}
.al-product[data-product="tonoit"] h3::after        { content: ""; display: block; width: 56px; height: 4px; border-radius: 2px; background: var(--al-product-tono); margin-top: 8px; }
.al-product[data-product="parentscript"] h3::after  { content: ""; display: block; width: 56px; height: 4px; border-radius: 2px; background: var(--al-product-parentscript); margin-top: 8px; }
.al-product[data-product="tandempaws"] h3::after    { content: ""; display: block; width: 56px; height: 4px; border-radius: 2px; background: var(--al-product-tandempaws); margin-top: 8px; }
.al-product p { margin: 0; }
.al-product__boundary {
  padding-top: var(--al-space-3);
  border-top: 1px solid var(--al-divider-subtle);
  font-size: var(--al-body-s-size);
  line-height: 1.55;
  color: var(--al-ink-muted);
}
/* Availability, stated once per product and never louder than the product name. */
.al-status {
  align-self: flex-start;
  font-family: var(--al-font-ui);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
  padding: 0.3rem 0.7rem;
  border-radius: var(--al-radius-pill);
}
.al-status--live    { background: var(--al-state-success-bg); color: var(--al-state-success-fg); }
.al-status--beta    { background: var(--al-state-warn-bg);    color: var(--al-state-warn-fg); }
.al-status--private { background: var(--al-state-attn-bg);    color: var(--al-state-attn-fg); }
.al-product__link {
  margin-top: auto;
  padding-top: var(--al-space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--al-space-1);
  font-family: var(--al-font-ui);
  font-size: var(--al-body-s-size);
  font-weight: 600;
  color: var(--al-ink-primary);
  text-decoration: none;
  border-bottom: 1.5px solid var(--al-accent-wonder);
  align-self: flex-start;
  padding-bottom: 2px;
  transition: color var(--al-motion-state) var(--al-ease-ink), border-color var(--al-motion-state) var(--al-ease-ink);
}
.al-product__link:hover { color: var(--al-ink-primary); border-color: var(--al-accent-wonder-pressed); }
.al-product__link:focus-visible { outline: var(--al-stroke-focus) solid var(--al-accent-wonder-pressed); outline-offset: 2px; border-radius: 4px; }

/* ---------- Disclosure (progressive-disclosure boundaries) ----------
   The full reviewed boundary and pledge language is never cut, only folded:
   it stays one keyboard-reachable click away instead of burying the products
   under defensive copy. No JS — a native <details>. */
.al-disclosure {
  margin-top: var(--al-space-6);
  border: 1px solid var(--al-divider-subtle);
  border-radius: var(--al-radius-md);
  background: var(--al-surface-panel);
}
.al-disclosure > summary {
  font-family: var(--al-font-ui);
  font-size: var(--al-body-s-size);
  font-weight: 600;
  color: var(--al-ink-secondary);
  padding: var(--al-space-3) var(--al-space-4);
  min-height: var(--al-touch-min);
  display: flex;
  align-items: center;
  gap: var(--al-space-2);
  cursor: pointer;
  list-style: none;
  border-radius: var(--al-radius-md);
}
.al-disclosure > summary::-webkit-details-marker { display: none; }
.al-disclosure > summary::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--al-ink-tertiary);
  border-bottom: 2px solid var(--al-ink-tertiary);
  transform: rotate(-45deg);
  transition: transform var(--al-motion-state) var(--al-ease-ink);
}
.al-disclosure[open] > summary::before { transform: rotate(45deg); }
.al-disclosure > summary:hover { color: var(--al-ink-primary); }
.al-disclosure > summary:focus-visible {
  outline: var(--al-stroke-focus) solid var(--al-accent-wonder-pressed);
  outline-offset: 2px;
}
.al-disclosure__body {
  padding: 0 var(--al-space-4) var(--al-space-4);
  border-top: 1px solid var(--al-divider-subtle);
}
.al-disclosure__body p {
  margin: var(--al-space-3) 0 0 0;
  font-size: var(--al-body-s-size);
  line-height: 1.6;
  color: var(--al-ink-secondary);
}
.al-limits { margin-top: var(--al-space-5); }

/* ---------- Pledge section ---------- */
.al-pledge {
  background: var(--al-surface-canvas-warm);
  border-radius: var(--al-radius-xl);
  padding: var(--al-space-10) var(--al-space-6);
  display: grid;
  gap: var(--al-space-6);
  align-items: center;
  margin-top: var(--al-space-8);
}
@media (min-width: 768px) {
  .al-pledge { padding: var(--al-space-10) var(--al-space-8); }
}
/* The seal is a compact anchor beside the beneficiaries heading. It used to
   hold a fixed 200px column, which squeezed the disclosure notes into narrow
   ribbons inside the already-narrow container. */
.al-pledge__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--al-space-5);
}
.al-pledge__head h3 { margin-bottom: 0; }
.al-pledge__seal { flex: none; width: 116px; height: 116px; }
@media (min-width: 768px) {
  .al-pledge__seal { width: 140px; height: 140px; }
}
.al-pledge h2 { margin-bottom: var(--al-space-4); }
.al-pledge__list {
  display: grid;
  gap: var(--al-space-3);
  margin-top: var(--al-space-3);
}
.al-pledge__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--al-space-3);
  padding: var(--al-space-3) 0;
  border-top: 1px solid var(--al-divider-subtle);
  align-items: baseline;
}
.al-pledge__item:first-child { border-top: 0; }
.al-pledge__item strong { font-family: var(--al-font-ui); font-size: var(--al-body-m-size); }
.al-pledge__item span { font-family: var(--al-font-ui); font-size: var(--al-body-s-size); color: var(--al-ink-muted); text-align: right; }
.al-pledge__note {
  margin-top: var(--al-space-5);
  padding: var(--al-space-3) var(--al-space-4);
  border-radius: var(--al-radius-md);
  background: var(--al-surface-canvas);
  border-left: 3px solid var(--al-accent-honey);
  font-size: var(--al-body-s-size);
  color: var(--al-ink-secondary);
}
.al-pledge__note:last-child { margin-bottom: 0; }
@media (max-width: 599px) {
  /* On phones the heading and the seal cannot share a row without forcing the
     panel wider than the viewport, so the seal sits above the heading and the
     beneficiary rows stack label-over-name. Placed after the base rules so
     these win. */
  .al-pledge__head { flex-direction: column-reverse; align-items: flex-start; gap: var(--al-space-4); }
  .al-pledge__item { grid-template-columns: 1fr; gap: var(--al-space-1); }
  .al-pledge__item span { text-align: left; }
}

/* ---------- Address directory (contact and privacy pages) ---------- */
/* One block per role, because the point of the page is that a visitor picks the
   right address on the first read. Nothing here is a card: a bordered grid of
   six panels would imply six departments, and there is one small studio. */
.al-directory { display: grid; gap: var(--al-space-5); margin-top: var(--al-space-8); }
.al-directory__item {
  padding-top: var(--al-space-5);
  border-top: 1px solid var(--al-divider-subtle);
}
.al-directory__item:first-child { border-top: 0; padding-top: 0; }
.al-directory__item h3 { margin-bottom: var(--al-space-2); }
.al-directory__item p:last-child { margin-bottom: 0; }
/* The address is the action on this page, so it gets a full touch target and
   the same underline treatment the footer links use — never colour alone. */
.al-directory__address {
  display: inline-flex;
  align-items: center;
  min-height: var(--al-touch-min);
  font-family: var(--al-font-ui);
  font-size: var(--al-body-m-size);
  color: var(--al-ink-primary);
  text-decoration: underline;
  text-decoration-color: var(--al-accent-wonder);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.al-directory__address:hover, .al-directory__address:focus-visible {
  text-decoration-color: var(--al-accent-wonder-pressed);
}

/* ---------- Footer ---------- */
.al-footer {
  margin-top: var(--al-space-18);
  padding: var(--al-space-10) 0 var(--al-space-12) 0;
  border-top: 1px solid var(--al-divider-subtle);
  background: var(--al-surface-canvas-warm);
}
.al-footer__grid {
  display: grid;
  gap: var(--al-space-6);
  margin-bottom: var(--al-space-6);
}
@media (min-width: 768px) {
  .al-footer__grid { grid-template-columns: 2fr 1fr 1fr; }
}
.al-footer__note {
  font-family: var(--al-font-ui);
  font-size: var(--al-body-s-size);
  color: var(--al-ink-muted);
  max-width: 70ch;
  margin-bottom: var(--al-space-5);
}
.al-footer h4 {
  font-family: var(--al-font-ui);
  font-size: var(--al-eyebrow-size);
  letter-spacing: var(--al-eyebrow-tr);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--al-ink-muted);
  margin-bottom: var(--al-space-3);
}
.al-footer ul { display: grid; gap: var(--al-space-2); }
/* The footer link lists are stacked targets, not links inside a sentence, so
   they are sized rather than relying on WCAG 2.2's spacing exception: a 24px
   box plus the row gap keeps every one comfortably tappable. */
.al-footer ul a { display: inline-flex; align-items: center; min-height: 24px; }
.al-footer__tagline { margin-top: var(--al-space-3); max-width: 36ch; }
.al-footer a {
  font-family: var(--al-font-ui);
  font-size: var(--al-body-s-size);
  color: var(--al-ink-secondary);
  text-decoration: none;
}
.al-footer a:hover, .al-footer a:focus-visible { color: var(--al-ink-primary); text-decoration: underline; text-decoration-color: var(--al-accent-wonder); }
/* The footer's link lists sit on their own rows, so removing their underline is
   unambiguous. The boundary note is a sentence with a link inside it: that link
   is only 1.37:1 against the surrounding text, so it must be underlined or it is
   distinguishable by colour alone (WCAG 1.4.1). These rules follow `.al-footer a`
   deliberately — they tie on specificity, so order is what settles it. */
.al-footer__note a {
  color: var(--al-ink-secondary);
  text-decoration: underline;
  text-decoration-color: var(--al-ink-tertiary);
  text-underline-offset: 3px;
}
.al-footer__note a:hover, .al-footer__note a:focus-visible {
  color: var(--al-ink-primary);
  text-decoration-color: var(--al-accent-wonder-pressed);
}
.al-footer__fine {
  font-family: var(--al-font-ui);
  font-size: var(--al-body-s-size);
  color: var(--al-ink-muted);
  border-top: 1px solid var(--al-divider-subtle);
  padding-top: var(--al-space-4);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--al-space-3);
}

/* ---------- Reduced motion override ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- Subtle motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .al-product, .al-value, .al-btn {
    will-change: transform;
  }
}

/* ---------- Print ---------- */
@media print {
  .al-header, .al-footer { display: none; }
  body { background: white; color: black; }
  .al-product { break-inside: avoid; }
}

/* ---------- High-contrast override ---------- */
@media (prefers-contrast: more) {
  :focus-visible { outline: var(--al-stroke-focus) solid var(--al-accent-wonder-pressed); outline-width: 3px; outline-offset: 2px; }
  a, .al-value, .al-product, .al-btn, .al-disclosure { border-color: var(--al-ink-primary); }
  .al-product__link { text-decoration-thickness: 2px; }
  .al-product__shot { border-bottom-color: var(--al-ink-primary); }
  .al-story__concept { border-color: var(--al-ink-primary); }
}