/*
|--------------------------------------------------------------------------
| Aurora Health Essentials — brand layer
|--------------------------------------------------------------------------
|
| Loaded AFTER css/site.css. site.css owns structure; this file owns the
| look. Two halves:
|
|   A. Tokens — the palette, type and shape values site.css reads.
|   B. Components — the `au-*` classes that exist only on this brand: the
|      wordmark, the aurora hero, the range strip, the category rail, the
|      routine columns, the bundle band, the honest-claims panel and the
|      guides strip.
|
| PALETTE — "Aurora night"
|
|   #0B1026  night      the deep indigo the dark bands are cut from
|   #141B3D  night-2    raised surfaces inside a dark band
|   #16C0AD  teal       the aurora teal
|   #7C5CFF  violet     the aurora violet
|   #B6F2E7  mint       pale highlight, the light in a dark band
|   #F5F7FD  canvas     page paper, faintly indigo so it is not cold white
|
| THREE COLOURS ARE DERIVED, and each one earns its place by contrast
| measurement rather than taste:
|
|   --accent-strong (#0A7A6E). White on the brand teal #16C0AD measures
|     2.29:1 — nowhere near the 4.5:1 AA needs for a button label. So the
|     teal stays the brand colour for fills that carry NO text (dots, ticks,
|     rules, gradient stops) and this deeper tone sits behind white labels
|     at 5.22:1.
|
|   --accent-2-strong (#5B3EE0). Same story for the violet: white on #7C5CFF
|     is 4.35:1, which just misses. This one clears at 6.54:1 and is what
|     focus rings and violet buttons actually use.
|
|   --accent-2-lite (#A98CFF). The reverse case. #7C5CFF on the night indigo
|     is 4.33:1 — fine for a large heading, not for body text. Violet text
|     inside a dark band uses this instead, at 7.06:1.
|
| Every ratio above was measured against the exact hexes in this file, not
| estimated. If you change a value, re-measure before shipping it.
|
| Display type is Newsreader (a low-contrast literary serif); body type is
| Inter.
|
*/

/* =========================================================================
   A. TOKENS
   ====================================================================== */

:root {
  --ink: #0f1533;
  --ink-2: #3a4470;   /*  8.75:1 on canvas */
  --ink-3: #5a6493;   /*  5.33:1 on canvas — the lightest text tone allowed */
  --ink-4: #9aa3c6;   /*  7.55:1 on night — for text inside dark bands only */

  --canvas: #f5f7fd;
  --paper: #ffffff;
  --night: #0b1026;
  --night-2: #141b3d;

  --accent: #16c0ad;          /* fills that carry no text */
  --accent-strong: #0a7a6e;   /* fills that sit under a white label */
  --accent-2: #7c5cff;        /* fills that carry no text */
  --accent-2-strong: #5b3ee0; /* fills that sit under a white label */
  --accent-2-lite: #a98cff;   /* violet TEXT, dark bands only */
  --mint: #b6f2e7;
  --mint-soft: #e6faf6;

  --line: #dde3f2;
  --line-night: rgba(255, 255, 255, 0.14);

  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --wrap: 1200px;

  /* Motion curves — see the note in site.css. Restated here so the brand
     layer owns every token it uses. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

/*
| The aurora itself. Three soft radial pools — teal low-left, violet
| high-right, a mint rim between them — over the night indigo. Reused by the
| hero, the bundle band and the footer so the same light appears throughout
| rather than only at the top of the homepage.
*/
.au-aurora {
  position: relative;
  background: var(--night);
  color: #fff;
  isolation: isolate;
  overflow: hidden;
}
.au-aurora::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 150%;
  z-index: -1;
  background:
    radial-gradient(58% 44% at 18% 78%, rgba(22, 192, 173, 0.38), transparent 68%),
    radial-gradient(52% 40% at 82% 12%, rgba(124, 92, 255, 0.42), transparent 66%),
    radial-gradient(40% 30% at 52% 44%, rgba(182, 242, 231, 0.18), transparent 70%);
  filter: blur(6px);

  /*
  | The aurora drifts. 26 seconds for one pass, which is slow enough that
  | you never catch it moving — you just notice the band is not the same
  | as it was a minute ago.
  |
  | ease-in-out rather than linear: this is a there-and-back, and linear
  | makes the reversal at each end visible as a hard turn. Constant-velocity
  | easing belongs on marquees and progress bars, not on something breathing.
  |
  | transform only, on an element that is already its own layer thanks to
  | the blur — so the whole thing runs on the compositor and never touches
  | layout or paint.
  */
  animation: au-drift 26s var(--ease-in-out) infinite;
}

@keyframes au-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-3%, 2.5%, 0) scale(1.07); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
.au-aurora::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent);
  opacity: 0.55;
}

.au-aurora h1, .au-aurora h2, .au-aurora h3 { color: #fff; }
.au-aurora p { color: #d8ddf2; }
.au-aurora .ah-eyebrow { color: var(--mint); }

/* =========================================================================
   B1. WORDMARK
   ====================================================================== */

.au-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  padding: 4px 2px;
}

/* The mark: a small aurora arc, drawn rather than loaded. */
/*
| The arc turns when you point at the wordmark, and only then. It sits in
| the header on every page and in peripheral vision the whole time a person
| is reading — something that moves constantly up there is a distraction,
| not a detail.
*/
@media (hover: hover) and (pointer: fine) {
  .au-wordmark:hover .au-mark { transform: rotate(140deg); }
}

.au-mark {
  transition: transform 0.7s var(--ease-out);
  width: 30px; height: 30px;
  border-radius: 50%;
  background:
    conic-gradient(from 210deg, var(--accent), var(--accent-2) 45%, var(--mint) 72%, var(--accent) 100%);
  box-shadow: inset 0 0 0 3px var(--paper);
  flex: none;
}

.au-wordmark-text { display: flex; flex-direction: column; line-height: 1.05; }
.au-wordmark-name { font-family: var(--font-display); font-size: 1.24rem; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; }
/* nowrap: the tracking on this line is wide enough that it wrapped to two
   lines in a narrow header and pushed the whole bar taller. */
.au-wordmark-sub { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.19em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }

.au-aurora .au-mark, .ah-footer .au-mark { box-shadow: inset 0 0 0 3px var(--night); }
.ah-footer .au-wordmark-sub { color: var(--ink-4); }

/* =========================================================================
   B2. HERO
   The homepage opens dark and stays dark until the catalog starts. Nothing
   else in this estate does that, which is the point.
   ====================================================================== */

/* Lifestyle-first banner. The photograph owns the right side; a dark
   gradient behind the copy keeps the text readable without putting it in a
   separate card. */
.au-lifestyle-hero {
  position: relative;
  min-height: clamp(650px, 72vw, 790px);
  display: grid;
  align-items: stretch;
  overflow: hidden;
  isolation: isolate;
  background: #091226;
  color: #fff;
}

.au-lifestyle-hero-picture {
  position: absolute;
  inset: 0 0 0 38%;
  z-index: -2;
}
.au-lifestyle-hero-picture img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }

.au-lifestyle-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(7, 15, 34, 1) 0%, rgba(7, 15, 34, 0.98) 33%, rgba(7, 15, 34, 0.54) 57%, rgba(7, 15, 34, 0.08) 82%),
    linear-gradient(0deg, rgba(7, 15, 34, 0.58), transparent 44%);
}

.au-lifestyle-hero-inner {
  position: relative;
  width: 100%;
  min-height: inherit;
  display: grid;
  align-items: center;
  padding-block: clamp(64px, 8vw, 96px);
}

.au-lifestyle-copy { width: min(100%, 600px); }
.au-lifestyle-copy .ah-eyebrow { color: var(--mint); }
.au-lifestyle-copy h1 {
  max-width: 11ch;
  margin: 12px 0 24px;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(3rem, 6.2vw, 5.6rem);
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.035em;
}
.au-lifestyle-copy h1 em { color: var(--mint); font-weight: 400; }
.au-lifestyle-lede { max-width: 51ch; color: #d8ddf2; font-size: clamp(1rem, 1.4vw, 1.14rem); }

.au-lifestyle-card {
  position: absolute;
  left: calc(50% - 30px);
  top: clamp(28px, 4vw, 54px);
  width: 330px;
  padding: 18px;
  border: 1px solid rgba(182, 242, 231, 0.28);
  border-radius: 20px;
  background: rgba(9, 18, 38, 0.9);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(14px);
}
.au-lifestyle-card-top { display: flex; align-items: center; gap: 10px; color: #b8c1dc; font-size: 0.72rem; }
.au-lifestyle-card-body { display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center; margin-block: 16px; }
.au-lifestyle-card-body img { width: 76px; aspect-ratio: 1; object-fit: cover; border-radius: 12px; }
.au-lifestyle-card-body h2 { margin: 0 0 4px; color: #fff; font-family: var(--font-display); font-size: 1.22rem; font-weight: 400; }
.au-lifestyle-card-body p { margin: 0; color: #aeb8d4; font-size: 0.78rem; }
.au-lifestyle-card-foot { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; border-top: 1px solid var(--line-night); }
.au-lifestyle-card-foot strong { font-family: var(--font-display); font-size: 1.8rem; font-weight: 500; }
.au-lifestyle-card-foot a { color: var(--mint); font-size: 0.8rem; font-weight: 700; text-decoration: none; }

@media (max-width: 1279px) {
  .au-lifestyle-card { display: none; }
}

/* The original range banner now follows the lifestyle image as a pale mint
   chapter, giving the two full-width sections distinct visual jobs. */
.au-range-hero { background: #eaf5f0; color: var(--ink); }
.au-range-hero::before {
  background:
    radial-gradient(48% 52% at 8% 22%, rgba(22, 192, 173, 0.19), transparent 70%),
    radial-gradient(45% 46% at 88% 18%, rgba(124, 92, 255, 0.16), transparent 68%);
}
.au-range-hero .au-range-title { color: var(--ink); }
.au-range-hero.au-hero .au-range-title em, .au-range-hero .ah-eyebrow { color: var(--accent-strong); }
.au-range-hero p { color: var(--ink-2); }
.au-range-hero .au-hero-fine { color: var(--ink-3) !important; }
.au-range-hero .au-hero-inner > div:first-child .ah-btn-invert { background: var(--night); color: #fff; }
.au-range-hero .au-hero-inner > div:first-child .ah-btn-ghost-night { color: var(--night); border-color: rgba(11, 16, 38, 0.3); }
.au-range-hero .au-hero-inner > div:first-child .ah-btn-ghost-night:hover { background: rgba(11, 16, 38, 0.08); }
.au-range-hero .au-stats { background: rgba(11, 16, 38, 0.14); border-color: rgba(11, 16, 38, 0.14); }
.au-range-hero .au-stat { background: rgba(255, 255, 255, 0.72); }
.au-range-hero .au-stat-value { color: var(--ink); }
.au-range-hero .au-stat-label { color: var(--ink-3); }

.au-hero { padding-block: clamp(56px, 9vw, 108px) clamp(40px, 6vw, 72px); }

.au-hero-inner { display: grid; gap: 40px; align-items: center; }
@media (min-width: 940px) { .au-hero-inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 64px; } }

@media (max-width: 820px) {
  .au-lifestyle-hero { min-height: 820px; }
  .au-lifestyle-hero-picture { inset: 42% 0 0; }
  .au-lifestyle-hero-picture img { object-position: 70% center; }
  .au-lifestyle-hero::before {
    background: linear-gradient(180deg, #091226 0%, #091226 44%, rgba(9, 18, 38, 0.56) 68%, rgba(9, 18, 38, 0.18) 100%);
  }
  .au-lifestyle-hero-inner { align-items: start; padding-top: 54px; }
  .au-lifestyle-copy h1 { max-width: 12ch; font-size: clamp(2.7rem, 12vw, 4.4rem); }
  .au-lifestyle-lede { max-width: 43ch; }
}

@media (max-width: 520px) {
  .au-lifestyle-hero { min-height: 760px; }
  .au-lifestyle-hero-picture { inset: 48% 0 0; }
  .au-lifestyle-copy h1 { margin-bottom: 18px; }
  .au-lifestyle-copy .au-hero-actions { margin-bottom: 18px; }
  .au-lifestyle-copy .au-hero-fine { font-size: 0.72rem; max-width: 42ch; }
}

.au-hero .au-range-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 6vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: -0.022em;
  margin: 0 0 20px;
}
.au-hero .au-range-title em { font-style: italic; color: var(--mint); }

.au-hero-lede { font-size: clamp(1.02rem, 1.6vw, 1.16rem); max-width: 54ch; margin-bottom: 30px; }

.au-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }

.au-hero-fine { font-size: 0.84rem; color: var(--ink-4) !important; max-width: 48ch; }

/*
| Range strip. Every figure is read from the catalog at render time, so it
| cannot drift out of date the way a hand-typed "20+ products" would.
*/
.au-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px;
  background: var(--line-night);
  border: 1px solid var(--line-night);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.au-stat { background: rgba(11, 16, 38, 0.62); padding: 20px 18px; }
.au-stat-value { font-family: var(--font-display); font-size: 1.9rem; font-weight: 400; line-height: 1; color: #fff; }
.au-stat-label { display: block; margin-top: 8px; font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-4); }

/*
|--------------------------------------------------------------------------
| B2b. HERO PRODUCT PANEL
|--------------------------------------------------------------------------
|
| The one place on the site where a single product is meant to dominate.
| It is built to out-weigh the headline column beside it without shouting:
| a raised surface, a mint hairline, and an aurora glow behind it that the
| flat cards elsewhere never get.
|
| The glow is a ::before on a -1 z-index inside an isolated stacking
| context, so it can sit behind the panel's own translucent background
| without bleeding over the band's other content.
|
*/

.au-hero-feature {
  position: relative;
  isolation: isolate;
  padding: clamp(22px, 2.6vw, 30px);
  border-radius: calc(var(--radius-lg) + 6px);
  background: linear-gradient(180deg, rgba(24, 32, 72, 0.94), rgba(11, 16, 38, 0.96));
  border: 1px solid rgba(182, 242, 231, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 30px 70px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
}

.au-hero-feature::before {
  content: "";
  position: absolute;
  inset: -13%;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(45% 40% at 20% 12%, rgba(22, 192, 173, 0.46), transparent 66%),
    radial-gradient(45% 40% at 84% 88%, rgba(124, 92, 255, 0.48), transparent 64%);
  filter: blur(30px);
  opacity: 0.7;
  pointer-events: none;
  animation: au-glow 9s var(--ease-in-out) infinite;
}

/* Opacity only — the layer is already rasterised, so this costs the
   compositor a blend and nothing else. */
@keyframes au-glow {
  0%, 100% { opacity: 0.58; }
  50%      { opacity: 0.82; }
}

.au-hero-feature-flags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }

.au-hero-flag {
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--mint);
  color: var(--night);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.au-hero-flag-note { font-size: 0.78rem; color: var(--ink-4); }

.au-hero-feature-media {
  display: block;
  aspect-ratio: 16 / 10;
  margin-bottom: 20px;
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-night);
  color: inherit;
  text-decoration: none;
}
.au-hero-feature-media .ah-media-img { width: 100%; height: 100%; object-fit: cover; }

.au-hero-feature-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
  line-height: 1.14;
  letter-spacing: -0.012em;
  margin: 0 0 6px;
}
.au-hero-feature-name a { color: #fff; text-decoration: none; }
.au-hero-feature-name a:hover { text-decoration: underline; }

.au-hero-feature-sub { color: var(--ink-4) !important; font-size: 0.95rem; margin: 0 0 18px; }

.au-hero-feature-points { list-style: none; padding: 0; margin: 0 0 22px; }
.au-hero-feature-points li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 8px;
  font-size: 0.9rem;
  color: #d3daf1;
}
.au-hero-feature-points li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent);
}

.au-hero-feature-buy {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding-top: 18px;
  margin-bottom: 18px;
  border-top: 1px solid var(--line-night);
}
.au-hero-feature-price { font-size: 2.1rem; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.au-hero-feature-size { font-size: 0.84rem; color: var(--ink-4); }

.au-hero-feature-actions { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 460px) { .au-hero-feature-actions { grid-template-columns: 1fr auto; } }

/* The range strip now runs full width under both hero columns. */
.au-hero .au-stats { margin-top: clamp(36px, 5vw, 56px); }

/* =========================================================================
   B3. CATEGORY RAIL
   Five tiles, one per live catalog category, each carrying its real count.
   ====================================================================== */

.au-rail { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.au-rail-tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  min-height: 148px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  text-decoration: none;
  transition: transform 0.2s var(--ease-out), border-color 0.2s ease, background-color 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .au-rail-tile:hover { transform: translateY(-3px); border-color: transparent; background: var(--mint-soft); }
}
.au-rail-tile:active { transform: scale(0.985); }
.au-rail-name { font-family: var(--font-display); font-size: 1.24rem; font-weight: 400; line-height: 1.2; }
.au-rail-count { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.au-rail-tile:hover .au-rail-count { color: var(--accent-strong); }

/* =========================================================================
   B4. ROUTINE COLUMNS
   Morning / active hours / evening, each pointing at real catalog products.
   This module exists instead of a generic "how it works" band because it is
   the honest version of the same idea: these are the things we sell, sorted
   by when a person would actually reach for them.
   ====================================================================== */

.au-routine { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.au-slot {
  display: flex;
  flex-direction: column;
  padding: 26px 24px;
  border-radius: var(--radius-lg);
  background: var(--paper);
  border: 1px solid var(--line);
}

.au-slot-time {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: 12px;
}
.au-slot-time::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; }
.au-slot:nth-child(2) .au-slot-time { color: var(--accent-2-strong); }
.au-slot:nth-child(2) .au-slot-time::before { background: var(--accent-2); }
.au-slot:nth-child(3) .au-slot-time { color: var(--ink-2); }
.au-slot:nth-child(3) .au-slot-time::before { background: var(--ink-2); }

.au-slot h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; margin-bottom: 8px; }
.au-slot > p { color: var(--ink-3); font-size: 0.94rem; margin-bottom: 18px; }

.au-slot-list { list-style: none; padding: 0; margin: auto 0 0; border-top: 1px solid var(--line); }
.au-slot-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin: 0; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.au-slot-list li:last-child { border-bottom: 0; }
.au-slot-list a { text-decoration: none; font-weight: 500; }
.au-slot-list a:hover { text-decoration: underline; }
.au-slot-list span { color: var(--ink-3); white-space: nowrap; }

/* =========================================================================
   B5. BUNDLE BAND
   ====================================================================== */

.au-bundles { padding-block: clamp(52px, 8vw, 92px); }

.au-bundle-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }

.au-bundle {
  display: flex;
  flex-direction: column;
  padding: 26px 24px 24px;
  border-radius: var(--radius-lg);
  background: rgba(20, 27, 61, 0.72);
  border: 1px solid var(--line-night);
  backdrop-filter: blur(8px);
}
/*
| The pack photograph. Inset inside the card's own padding rather than bled
| to the edges: these cards are translucent glass on the aurora band, and a
| full-bleed photo would cut through that panel instead of sitting on it.
|
| 4/3 is the same crop the shop card uses, so a product photographed square
| loses the same top and bottom here as it does everywhere else on the site
| — the pack reads as the same object in both places.
*/
.au-bundle-media {
  display: block;
  aspect-ratio: 4 / 3;
  margin-bottom: 20px;
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
}

.au-bundle h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.42rem; margin-bottom: 6px; }
.au-bundle h3 a { color: inherit; text-decoration: none; }
.au-bundle h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.au-bundle-sub { color: var(--ink-4) !important; font-size: 0.9rem; margin-bottom: 18px; }

.au-bundle-items { list-style: none; padding: 0; margin: 0 0 20px; }
.au-bundle-items li { position: relative; padding-left: 20px; margin-bottom: 7px; font-size: 0.86rem; color: #cfd6ee; }
.au-bundle-items li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

.au-bundle-price { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line-night); }
.au-bundle-now { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.01em; }

/*
| The compare-at line. Only rendered when wsCompareAtPrice() returns a
| figure, which it only does when the pack genuinely costs less than its
| contents. A pack with no saving simply shows its price and nothing else —
| there is no styling here for a saving that does not exist.
*/
.au-bundle-was { color: var(--ink-4); font-size: 0.92rem; margin-left: 8px; }
.au-bundle-save {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--mint);
  color: var(--night);
  font-size: 0.76rem;
  font-weight: 700;
}
.au-bundle-note { font-size: 0.78rem; color: var(--ink-4) !important; margin: 8px 0 16px; }

.au-bundle .ah-btn-invert { width: 100%; }

/* =========================================================================
   B6. HONEST-CLAIMS PANEL
   The one piece of copy on this site that is easiest to get wrong, so it
   gets its own component and its own place in the page rather than being
   buried in the footer.
   ====================================================================== */

.au-honest { display: grid; gap: 30px; align-items: start; }
@media (min-width: 900px) { .au-honest { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 56px; } }

.au-honest-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.au-honest-list li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 14px;
  align-items: start;
  margin: 0;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.au-honest-list li:last-child { border-bottom: 0; }
.au-honest-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--mint-soft);
  color: var(--accent-strong);
  font-size: 0.8rem;
  font-weight: 700;
}
.au-honest-list strong { display: block; margin-bottom: 3px; font-size: 0.98rem; }
.au-honest-list p { margin: 0; color: var(--ink-3); font-size: 0.9rem; }

/* =========================================================================
   B7. GUIDES STRIP
   The two PDFs. Deliberately small, quiet and last: a guide should never
   outrank a physical product on this page.
   ====================================================================== */

.au-guides { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/*
| Thumbnail beside the text rather than above it. A guide should not
| outrank a physical product on this page, and a full-width cover image
| would give these two cards more visual weight than the equipment shelf
| at the top — a square 104px thumb identifies the PDF without competing.
|
| Square, so the 1:1 catalog files crop to nothing here.
*/
.au-guide {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding: 24px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
}
.au-guide-media {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--mint-soft);
}
.au-guide-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

/* Narrow enough that a side-by-side leaves the description in a gutter. */
@media (max-width: 460px) {
  .au-guide { grid-template-columns: minmax(0, 1fr); }
  .au-guide-media { width: 120px; }
}
.au-guide-tag { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-2-strong); }
.au-guide h3 { font-size: 1.08rem; margin: 0; }
.au-guide p { color: var(--ink-3); font-size: 0.9rem; margin: 0; }
.au-guide-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 8px; }
.au-guide-price { font-weight: 700; font-size: 1.1rem; }

/* =========================================================================
   B8. SHOP FILTER
   ====================================================================== */

.au-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.au-filter-btn {
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--paper);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
}
.au-filter-btn:hover { border-color: var(--ink-4); color: var(--ink); }
.au-filter-btn[aria-pressed="true"] { background: var(--night); border-color: var(--night); color: #fff; }

/* =========================================================================
   B9. PAGE HEAD (shop, faq, privacy, thank you)
   ====================================================================== */

.au-pagehead { padding-block: clamp(40px, 6vw, 64px); }
.au-pagehead h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.1rem, 5vw, 3.2rem); letter-spacing: -0.02em; margin-bottom: 12px; }
.au-pagehead p { max-width: 60ch; margin: 0; }

.au-crumbs { font-size: 0.82rem; color: var(--ink-3); margin-bottom: 18px; }
.au-crumbs a { color: var(--ink-3); }
.au-crumbs a:hover { color: var(--ink); }

/* =========================================================================
   B10. FOOTER SKIN
   ====================================================================== */

.ah-footer { position: relative; overflow: hidden; }
.ah-footer::before {
  content: "";
  position: absolute;
  inset: auto -20% -60% -20%;
  height: 120%;
  background:
    radial-gradient(46% 60% at 22% 100%, rgba(22, 192, 173, 0.24), transparent 70%),
    radial-gradient(44% 58% at 80% 100%, rgba(124, 92, 255, 0.26), transparent 68%);
  pointer-events: none;
}
.ah-footer .ah-wrap { position: relative; }

/* =========================================================================
   B11. HERO ENTRANCE
   ====================================================================== */

/*
| The one page-load animation on the site, and it runs exactly once per
| visit — which is what makes it worth having. Anything a person sees dozens
| of times a day should not animate at all; a hero they see once can.
|
| Pure CSS, deliberately. index.php puts .au-enter and an --enter-i index on
| the handful of hero children, and the delay falls out of that. No
| JavaScript is involved, so there is no path where a script failure leaves
| the top of the homepage invisible.
|
| 55ms between items. Long enough to read as a cascade, short enough that
| the last item lands under a second after the first.
*/
.au-enter {
  animation: au-enter 0.56s var(--ease-out) both;
  animation-delay: calc(var(--enter-i, 0) * 55ms);
}

@keyframes au-enter {
  from { opacity: 0; transform: translateY(16px); }
}

/*
| The product panel gets its own entrance — further travel, a touch longer,
| and a scale that starts at 0.985 rather than 0. Nothing in the real world
| appears from nothing, and an element that grows from zero reads as a pop
| rather than as something arriving.
*/
.au-hero-feature {
  animation: au-enter-panel 0.72s var(--ease-out) both;
  animation-delay: 190ms;
}

@keyframes au-enter-panel {
  from { opacity: 0; transform: translateY(24px) scale(0.985); }
}

/* =========================================================================
   B12. BRAND HOVER + PRESS STATES
   ====================================================================== */

.au-bundle { transition: transform 0.22s var(--ease-out), border-color 0.22s ease, background-color 0.22s ease; }
.au-slot { transition: transform 0.22s var(--ease-out), border-color 0.22s ease; }
.au-guide { transition: transform 0.22s var(--ease-out), border-color 0.22s ease; }
.au-filter-btn { transition: transform 0.16s var(--ease-out), border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease; }
.au-hero-feature-media .ah-media-img,
.au-hero-feature-media .ah-media-fallback,
.au-bundle-media .ah-media-img,
.au-bundle-media .ah-media-fallback,
.au-guide-media .ah-media-img,
.au-guide-media .ah-media-fallback { transition: transform 0.5s var(--ease-out); }
.au-slot-list a,
.au-hero-feature-name a { transition: color 0.16s ease; }

@media (hover: hover) and (pointer: fine) {
  .au-bundle:hover { transform: translateY(-4px); border-color: rgba(182, 242, 231, 0.34); }
  .au-slot:hover { transform: translateY(-3px); border-color: var(--ink-4); }
  .au-guide:hover { transform: translateY(-3px); border-color: var(--accent); }
  .au-filter-btn:hover { transform: translateY(-1px); }
  .au-hero-feature:hover .ah-media-img,
  .au-hero-feature:hover .ah-media-fallback { transform: scale(1.03); }

  /*
  | Same slower drift the shop card uses: the card lifts in 220ms, the
  | photo keeps moving for 500ms after it settles.
  */
  .au-bundle:hover .ah-media-img,
  .au-bundle:hover .ah-media-fallback,
  .au-guide:hover .ah-media-img,
  .au-guide:hover .ah-media-fallback { transform: scale(1.04); }
}

.au-filter-btn:active { transform: scale(0.97); }

/* =========================================================================
   B13. prefers-reduced-motion — BRAND LAYER
   ====================================================================== */

/*
| These overrides have to live here rather than in site.css. Both files
| declare rules for these selectors at the same specificity, and brand.css
| loads second — a reduced-motion rule for .au-* written in site.css would
| simply lose to the ordinary rule above it in this file.
|
| Same principle as the structural block: the fade survives, the movement
| does not. The two ambient animations stop outright — a drifting background
| is exactly the kind of thing someone turns this setting on to be rid of.
*/
@media (prefers-reduced-motion: reduce) {
  .au-aurora::before,
  .au-hero-feature::before { animation: none; }

  .au-enter,
  .au-hero-feature { animation: ah-fade-in 0.24s ease both; }

  .au-rail-tile:hover,
  .au-rail-tile:active,
  .au-bundle:hover,
  .au-slot:hover,
  .au-guide:hover,
  .au-filter-btn:hover,
  .au-filter-btn:active { transform: none; }

  .au-hero-feature:hover .ah-media-img,
  .au-hero-feature:hover .ah-media-fallback,
  .au-bundle:hover .ah-media-img,
  .au-bundle:hover .ah-media-fallback,
  .au-guide:hover .ah-media-img,
  .au-guide:hover .ah-media-fallback,
  .au-wordmark:hover .au-mark { transform: none; }
}