/* ==========================================================================
   Astro Easy Mode — site-v1.css
   Versioned filename is deliberate: Cloudflare Pages serves stale CSS to
   returning visitors. Do not rename; bump to site-v2.css on the next refactor.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* ground + surfaces */
  --ground:    #0A0E14;
  --surface:   #0D1219;
  --surface-2: #10161F;
  --line:      #1C2430;
  --line-2:    #26303E;

  /* ink — ink-3 / ink-4 replace the two old muted greys that measured 4.21:1
     and 2.55:1 on this ground and failed WCAG AA. Do not reintroduce them. */
  --ink:   #E9EDF3;
  --ink-2: #A7B1C0;
  --ink-3: #8B94A3;
  --ink-4: #7C8695;

  /* accent */
  --accent:    #F0A35E;
  --accent-hi: #F7BE85;
  --on-accent: #140F09;

  /* type */
  --display: 'Space Grotesk', Helvetica, Arial, sans-serif;
  --body:    'Newsreader', Georgia, 'Times New Roman', serif;
  --mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* metrics */
  --wide:    1040px;
  --measure: 68ch;
  --r:       6px;
  --r-lg:    8px;

  /* the single vertical spacing value for the whole site */
  --rhythm: clamp(72px, 10vw, 120px);
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hi); }

::selection { background: rgba(240, 163, 94, .28); }

img { max-width: 100%; }

h1, h2, h3, h4, h5, h6 { font-family: var(--display); }

/* Focus — one rule, every interactive element. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="slider"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3. SKIP LINK
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 200;
  width: auto;
  height: auto;
  margin: 0;
  padding: 10px 16px;
  overflow: visible;
  clip: auto;
  clip-path: none;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  border-radius: var(--r);
}

/* --------------------------------------------------------------------------
   4. HEADER
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  background: rgba(10, 14, 20, .92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.site-header__bar {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-header__brand {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .02em;
  color: var(--ink);
  white-space: nowrap;
}
.site-header__brand:hover { color: var(--ink); }

.site-header__nav {
  display: flex;
  align-items: center;
  gap: 20px;
}

.site-header__link {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
}
.site-header__link:hover { color: var(--ink); }

/* Narrow phones: the bar must fit its own width, never push the page sideways. */
@media (max-width: 520px) {
  .site-header__bar { padding-inline: 16px; gap: 10px; }
  .site-header__nav { gap: 12px; }
  .site-header__nav .btn--sm { padding-inline: 12px; }
}

/* v2: the third nav link (Processing) does not fit beside the CTA on phones;
   it stays in the DOM and is linked from the footer and the guide CTA blocks. */
@media (max-width: 640px) {
  .site-header__link--extra { display: none; }
}

/* Below ~380px the nav (two links plus the priced CTA) no longer fit and
   pushed the whole page into horizontal scroll. Tighten spacing and type only;
   the 44px touch target is preserved. */
@media (max-width: 380px) {
  .site-header__bar { padding-inline: 12px; gap: 8px; }
  .site-header__nav { gap: 8px; }
  .site-header__nav .btn--sm { padding-inline: 10px; }
  .site-header__link { font-size: 13px; }
}

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 14px 30px;
  border: 1px solid transparent;
  border-radius: var(--r);
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .01em;
  line-height: 1.2;
  white-space: nowrap;
  /* nowrap keeps short labels like "Get processed - EUR29" on one line, but it
     also let a long label blow past the viewport: the guides' CTA "See what
     your eclipse photo could look like" measured 424px on a 390px screen and
     gave that page horizontal scroll. Cap the width always, and allow wrapping
     on phones where a two-line button is far better than a scrolling page. */
  max-width: 100%;
  cursor: pointer;
  text-align: center;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}

@media (max-width: 560px) {
  .btn { white-space: normal; }
}

.btn--primary {
  background: var(--accent);
  color: var(--on-accent);
}
.btn--primary:hover {
  background: var(--accent-hi);
  color: var(--on-accent);
}

.btn--ghost {
  background: transparent;
  border-color: var(--line-2);
  color: var(--ink);
}
.btn--ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: transparent;
}

.btn--sm {
  /* 44px, not 36: this is a touch target (header CTA), per the design floor. */
  min-height: 44px;
  padding: 8px 16px;
  font-size: 13px;
}

.btn--full { width: 100%; }

/* The hero / price CTAs breathe slowly. */
.btn--ember { animation: ae-ember-pulse 4s ease-in-out infinite; }

/* --------------------------------------------------------------------------
   6. LAYOUT — one rhythm, no stacked margins
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: 24px;
}
.wrap--narrow { max-width: 680px; }
.wrap--tight  { max-width: 640px; }

.section {
  width: 100%;
  padding-block: var(--rhythm);
  margin: 0;
}
/* the one block that must sit tight against what precedes it */
.section--flush { padding-block-start: 0; }
.section--flush-end { padding-block-end: 0; }

/* The footer already opens with a full rhythm step of its own, so the last
   block above it must not stack a second one — one deliberate step, not two. */
main > .section:last-of-type,
main > article:last-of-type { padding-block-end: 0; }

/* A page header that introduces a card grid is one unit with it — half a step. */
.section--flush-end + .section:has(> .card-grid) { padding-block-start: calc(var(--rhythm) * .55); }

.stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

/* --------------------------------------------------------------------------
   7. PROSE
   -------------------------------------------------------------------------- */
.prose {
  max-width: var(--measure);
  font-family: var(--body);
  line-height: 1.7;
  color: var(--ink-2);
}
.prose h1, .prose h2, .prose h3, .prose h4 {
  font-family: var(--display);
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.prose a { color: var(--accent); }
/* A button dropped inside .prose lost its own colour: `.prose a` (0,1,1) beats
   `.btn--primary` (0,1,0), so the label rendered accent-on-accent - amber text
   on an amber pill, i.e. an invisible button. Found 2026-08-11 on the gallery
   page's CTA. Restore the button's own colours whenever it sits in prose. */
.prose a.btn { color: inherit; }
.prose a.btn--primary { color: var(--on-accent); }
.prose a.btn--ghost, .prose a.btn--secondary { color: var(--ink); }

.lede {
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}

.caption {
  margin: 12px 2px 0;
  font-size: 14px;
  color: var(--ink-3);
  font-style: italic;
  text-align: center;
}
.caption--fine {
  font-size: 12px;
  font-style: normal;
  color: var(--ink-4);
}

.h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(26px, 4vw, 40px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   8. CARDS — elevation declared once: border only, no shadow.
   -------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.card__kicker {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: .06em;
}
.card__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.01em;
}
.card__body {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
}

/* A step is a card without the box: rule on top, no background. */
.step {
  border-top: 1px solid var(--line-2);
  padding: 24px 4px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.step__num {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent);
  letter-spacing: .1em;
}
.step__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.01em;
}
.step__body {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  align-items: stretch;
}
.card-grid > * { height: 100%; }

/* The price panel. */
.price-card {
  width: min(460px, 100%);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  padding: clamp(32px, 5vw, 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}
.price-card__figure {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(56px, 10vw, 76px);
  line-height: 1;
  letter-spacing: -0.03em;
}

/* --------------------------------------------------------------------------
   9. FAQ
   -------------------------------------------------------------------------- */
.faq { display: flex; flex-direction: column; }

.faq details {
  border-top: 1px solid var(--line);
  padding: 4px 0;
}
.faq details:last-child { border-bottom: 1px solid var(--line); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  padding: 18px 4px;
  cursor: pointer;
  font-family: var(--display);
  font-weight: 500;
  font-size: 17px;
  color: var(--ink);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
details summary::-webkit-details-marker { display: none; }

/* Drawn +/− indicator: two 1.5px rules, the vertical one collapses on open. */
.faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  background-image:
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-size: 13px 1.5px, 1.5px 13px;
  background-position: center, center;
  transition: background-size .18s ease, transform .18s ease;
}
.faq details[open] summary::after {
  background-size: 13px 1.5px, 1.5px 0;
}

.faq__answer {
  margin: 0 4px 20px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   10. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  width: 100%;
  max-width: var(--wide);
  margin-inline: auto;
  padding: var(--rhythm) 24px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.site-footer__brand {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .04em;
}
.site-footer p {
  margin: 0;
  font-size: 13px;
  color: var(--ink-3);
}
.site-footer__fine {
  font-size: 12px;
  color: var(--ink-4);
}
.site-footer a { color: var(--ink-2); }
.site-footer a:hover { color: var(--ink); }

/* --------------------------------------------------------------------------
   11. STARFIELD — two drifting layers, reusable across landing + guides
   -------------------------------------------------------------------------- */
.starfield {
  position: fixed;
  inset: -40px;
  pointer-events: none;
  z-index: 0;
}

.starfield--near {
  animation: ae-star-drift 240s linear infinite alternate;
  background-image:
    radial-gradient(1px 1px at 8% 12%, rgba(233,237,243,.9), transparent),
    radial-gradient(1.5px 1.5px at 22% 38%, rgba(233,237,243,.7), transparent),
    radial-gradient(1px 1px at 34% 8%, rgba(233,237,243,.8), transparent),
    radial-gradient(1px 1px at 47% 52%, rgba(233,237,243,.55), transparent),
    radial-gradient(2px 2px at 61% 21%, rgba(240,163,94,.55), transparent),
    radial-gradient(1px 1px at 72% 64%, rgba(233,237,243,.8), transparent),
    radial-gradient(1px 1px at 85% 33%, rgba(233,237,243,.65), transparent),
    radial-gradient(1.5px 1.5px at 93% 78%, rgba(233,237,243,.75), transparent),
    radial-gradient(1px 1px at 15% 82%, rgba(233,237,243,.6), transparent),
    radial-gradient(1px 1px at 55% 91%, rgba(233,237,243,.7), transparent);
}

.starfield--far {
  animation: ae-star-drift-2 320s linear infinite alternate;
  opacity: .55;
  background-image:
    radial-gradient(1px 1px at 12% 55%, rgba(233,237,243,.7), transparent),
    radial-gradient(1px 1px at 28% 74%, rgba(233,237,243,.5), transparent),
    radial-gradient(1px 1px at 41% 28%, rgba(233,237,243,.6), transparent),
    radial-gradient(1px 1px at 66% 45%, rgba(233,237,243,.5), transparent),
    radial-gradient(1px 1px at 78% 12%, rgba(143,184,220,.6), transparent),
    radial-gradient(1px 1px at 90% 58%, rgba(233,237,243,.55), transparent),
    radial-gradient(1px 1px at 5% 40%, rgba(233,237,243,.45), transparent),
    radial-gradient(1px 1px at 50% 5%, rgba(233,237,243,.5), transparent);
}

@keyframes ae-star-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-28px, 14px, 0); }
}
@keyframes ae-star-drift-2 {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(18px, -10px, 0); }
}
/* Parallax on the corona itself.

   First attempt drove this from the image's own view() timeline and it did not
   move at all: the image lives inside a position:sticky figure, so once the
   figure pins, the image's position in the scrollport stops changing and its
   timeline freezes. Verified by measuring the computed transform at three
   scroll offsets - identical every time.

   The fix is to drive it from the column that actually scrolls. The body
   column gets a named view timeline, the promo grid scopes that name, and the
   pinned image animates against it. So the corona drifts as the text travels
   past it, which is the parallax, while the frame stays put, which kills the
   gap. Wrapped in @supports: without scroll-driven animation the frame is just
   sticky, which already solves the original complaint. */
@supports (animation-timeline: view()) and (timeline-scope: --x) {
  @media (min-width: 860px) and (prefers-reduced-motion: no-preference) {
    .eclipse-promo { timeline-scope: --eclipse-promo; }
    .eclipse-promo__body { view-timeline: --eclipse-promo block; }
    .eclipse-promo__media img {
      animation: ae-parallax-y linear both;
      animation-timeline: --eclipse-promo;
      animation-range: entry 0% exit 100%;
      will-change: transform;
    }
  }
}
@keyframes ae-parallax-y {
  from { transform: translateY(30px) scale(1.08); }
  to   { transform: translateY(-30px) scale(1.08); }
}

@keyframes ae-ember-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240,163,94,0), 0 1px 18px rgba(240,163,94,.18); }
  50%      { box-shadow: 0 0 26px 2px rgba(240,163,94,.22), 0 1px 18px rgba(240,163,94,.3); }
}

/* --------------------------------------------------------------------------
   12. TABLES — one unified comparison style
   -------------------------------------------------------------------------- */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
}
.table th,
.table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.5;
  vertical-align: top;
}
.table th {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.table td { color: var(--ink); vertical-align: top; }

/* --------------------------------------------------------------------------
   13. CHECKLIST
   -------------------------------------------------------------------------- */
.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.checklist li {
  position: relative;
  padding-left: 30px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
}
.checklist li::before {
  content: "\2610";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-size: 18px;
}

/* --------------------------------------------------------------------------
   14. BADGES / CHIPS
   -------------------------------------------------------------------------- */
.badge {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 7px 12px;
  background: rgba(10, 14, 20, .82);
  border: 1px solid var(--line-2);
  border-radius: 3px;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
}
.badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.chip {
  margin: 0;
  padding: 5px 10px;
  background: rgba(10, 14, 20, .78);
  border: 1px solid var(--line-2);
  border-radius: 3px;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  pointer-events: none;
}
.chip--accent { color: var(--accent); }

/* --------------------------------------------------------------------------
   15. MEDIA — comparison slider + reveal video
   -------------------------------------------------------------------------- */
.compare {
  position: relative;
  width: 100%;
  aspect-ratio: 900 / 601;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-2);
  background: var(--surface);
  overflow: hidden;
  touch-action: none;
  cursor: ew-resize;
}
.compare img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
}
.compare__before {
  position: absolute;
  inset: 0;
  clip-path: inset(0 70% 0 0);
}
.compare__chip-left  { position: absolute; left: 12px;  bottom: 12px; z-index: 2; }
.compare__chip-right { position: absolute; right: 12px; bottom: 12px; z-index: 2; }
.compare__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 30%;
  width: 0;
  z-index: 3;
  transform: translateX(-50%);
  pointer-events: none;
}
.compare__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: rgba(233, 237, 243, .85);
  transform: translateX(-50%);
}
.compare__knob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(10, 14, 20, .88);
  border: 1px solid var(--line-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}

.reveal-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-2);
  background: var(--surface);
  overflow: hidden;
}
.reveal-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-toggle {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 8px 12px;
  background: rgba(10, 14, 20, .82);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 500;
  font-size: 12px;
  cursor: pointer;
}
.media-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   16. ORNAMENT
   -------------------------------------------------------------------------- */
.rule-short {
  width: 40px;
  height: 1px;
  background: var(--line-2);
  border: 0;
  margin: 0;
}
.ornament { color: var(--accent); opacity: .85; line-height: 0; }

/* --------------------------------------------------------------------------
   17. SCROLL REVEAL — fail-safe.
   Content is visible by default. Only the .js-reveal class, added by script at
   runtime, may hide it — so a JS failure can never leave a section invisible.
   -------------------------------------------------------------------------- */
.js-reveal {
  opacity: .001;
  filter: brightness(.35) blur(3px);
  transition: opacity .6s cubic-bezier(.22, .61, .36, 1),
              filter .7s cubic-bezier(.22, .61, .36, 1);
}
/* Ends at exactly opacity:1 / filter:none — no residual composited layer. */
.js-reveal.is-revealed {
  opacity: 1;
  filter: none;
}

/* --------------------------------------------------------------------------
   18. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .js-reveal { opacity: 1 !important; filter: none !important; }
}

/* --------------------------------------------------------------------------
   19. PAIR ROWS — "their words" → "what happens instead" (eclipse page)
   Same rhythm as .faq: hairline-separated rows, no boxes.
   -------------------------------------------------------------------------- */
.pair-grid { display: flex; flex-direction: column; }

.pair {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "quote quote"
    "mark  answer";
  column-gap: 14px;
  row-gap: 16px;
  align-items: start;
  padding: 26px 0;
  border-top: 1px solid var(--line);
}
.pair:last-child { border-bottom: 1px solid var(--line); }

.pair__quote {
  grid-area: quote;
  margin: 0;
  padding-left: 16px;
  border-left: 2px solid var(--line-2);
  font-family: var(--body);
  font-style: italic;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}
.pair__mark {
  grid-area: mark;
  color: var(--accent);
  line-height: 0;
  transform: rotate(90deg);
  margin-top: 4px;
}
.pair__answer {
  grid-area: answer;
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  text-wrap: pretty;
}

@media (min-width: 780px) {
  .pair {
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "quote mark answer";
    column-gap: 28px;
    align-items: center;
    padding: 28px 0;
  }
  .pair__mark { transform: none; margin-top: 0; }
}

/* --------------------------------------------------------------------------
   20. FRAMES — side-by-side stills, same elevation rule as .compare
   -------------------------------------------------------------------------- */
.two-up {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  width: 100%;
}
@media (min-width: 720px) {
  .two-up { grid-template-columns: 1fr 1fr; }
}

.frame {
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
.frame img {
  display: block;
  width: 100%;
  height: auto;
}
.frame__chip { position: absolute; left: 12px; bottom: 12px; z-index: 2; }

/* --------------------------------------------------------------------------
   21. NOTICE — a disclosure that is meant to be read, not buried
   -------------------------------------------------------------------------- */
.notice {
  width: 100%;
  border: 1px solid var(--line-2);
  border-left: 2px solid var(--accent);
  border-radius: var(--r);
  background: var(--surface);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}
.notice__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.notice__body {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   22. PANEL — the reserve card (price-card's sibling, left-aligned content)
   -------------------------------------------------------------------------- */
.panel {
  width: min(560px, 100%);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  padding: clamp(28px, 4.5vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.count {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.count__figure {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(40px, 8vw, 54px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent);
}
.count__label {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   23. FORM
   -------------------------------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: 16px; width: 100%; }

.field { display: flex; flex-direction: column; gap: 7px; text-align: left; }
.field__label {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.field__input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  background: var(--ground);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.4;
}
.field__input::placeholder { color: var(--ink-3); opacity: 1; }
.field__input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
}

.form__consent {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  text-align: left;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
}
.form__consent input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  accent-color: var(--accent);
}

/* Honeypot — off-screen, never announced, never focusable by tab order. */
.form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__note {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-3);
  text-align: left;
}
.form__status {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  text-align: left;
}
.form__status--error { color: #FFB3A0; }
.form__status--ok    { color: var(--accent-hi); }

.success {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
.success[hidden] { display: none; }
.success__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(22px, 3.4vw, 28px);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.success__body {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   24. RULES — numbered hairline rows (the shooting guide on the eclipse page).
   Same rhythm as .faq and .pair: hairline separators, no boxes, so the list
   reads as one column on a phone at a viewing site.
   -------------------------------------------------------------------------- */
.rules {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.rules__item {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "num  title"
    "num  body";
  column-gap: 16px;
  row-gap: 8px;
  align-items: start;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}
.rules__item:last-child { border-bottom: 1px solid var(--line); }

.rules__num {
  grid-area: num;
  padding-top: 5px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1;
  letter-spacing: .1em;
  color: var(--accent);
}

.rules__title {
  grid-area: title;
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: pretty;
}

.rules__body {
  grid-area: body;
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-2);
  text-wrap: pretty;
}

@media (min-width: 780px) {
  .rules__item  { column-gap: 22px; padding: 24px 0; }
  .rules__title { font-size: 18px; }
  .rules__body  { font-size: 16px; }
}

/* --------------------------------------------------------------------------
   25. LADDER — a shutter sequence shown as its own range. Wraps rather than
   scrolls, so it can never push the page sideways on a narrow phone.
   -------------------------------------------------------------------------- */
.ladder {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}
.ladder__step {
  padding: 5px 9px;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  background: var(--ground);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  line-height: 1.4;
  color: var(--ink-2);
  white-space: nowrap;
}
/* The two ends carry the range — they are the point of the row. */
.ladder__step--end {
  color: var(--accent);
  border-color: rgba(240, 163, 94, .45);
}

/* An announcement badge that is also a link: real tap target, real hover. */
a.badge--link {
  min-height: 44px;
  padding-block: 12px;
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease;
}
a.badge--link:hover {
  border-color: var(--accent);
  color: var(--accent-hi);
}


/* --------------------------------------------------------------------------
   17. BRANDMARK — C1 lockup (eclipse mark B5r + wordmark A1)
   Header: mark + "ASTRO EASY MODE". Footer: C7, the stacked treatment.
   The accessible name lives on the <a> / role="img" wrapper; the SVG and the
   split word spans are aria-hidden so a screen reader reads "Astro Easy Mode"
   once, not letter-spaced fragments.
   -------------------------------------------------------------------------- */
.bm {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
}
.bm svg { display: block; flex: 0 0 auto; }
.bm__t { font-family: var(--display); font-size: 15px; }
.bm__a { font-weight: 700; letter-spacing: .10em; }
.bm__b { font-weight: 500; letter-spacing: .18em; color: var(--ink-3); font-size: 12.3px; }

/* Neutralise the plain-text brand rules so the lockup's own weights apply. */
.site-header__brand.bm { font-weight: 400; letter-spacing: normal; font-size: inherit; }

/* The responsive rule is load-bearing: without it C1 pushes the page sideways
   at 363px. On narrow phones the mark carries the brand and the descriptor
   drops out. Measured, not guessed. */
@media (max-width: 520px) { .bm { gap: 7px; } .bm__b { letter-spacing:.13em; font-size:11px; } }
@media (max-width: 400px) { .bm svg { width:22px; height:22px; } .bm__b { display:none; } }

/* --------------------------------------------------------------------------
   26. ECLIPSE ANNOUNCEMENT BAR — full-width strip above .site-header.
   Whole strip is one link. Self-retires via inline script once the eclipse
   week has passed (see index.html); this CSS makes no date assumptions.
   -------------------------------------------------------------------------- */
.eclipse-bar {
  position: relative;
  width: 100%;
  overflow: clip;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.eclipse-bar__wash {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 160% at 20% 50%, rgba(240, 163, 94, .12) 0%, rgba(240, 163, 94, 0) 70%);
  pointer-events: none;
}
.eclipse-bar__link {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 18px;
  width: 100%;
  max-width: var(--wide);
  margin-inline: auto;
  min-height: 44px;
  padding: 10px 24px;
  color: var(--ink);
  text-decoration: none;
  text-align: center;
}
.eclipse-bar__mark {
  display: flex;
  flex-shrink: 0;
  color: var(--accent);
}
.eclipse-bar__mark svg { display: block; }
.eclipse-bar__copy {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 3px 10px;
}
.eclipse-bar__count {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .01em;
  color: var(--ink);
  white-space: nowrap;
}
.eclipse-bar__hook {
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-2);
}
.eclipse-bar__cta {
  flex-shrink: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  color: var(--accent);
  white-space: nowrap;
  transition: color .18s ease;
}
.eclipse-bar__link:hover .eclipse-bar__cta { color: var(--accent-hi); }

@media (max-width: 520px) {
  .eclipse-bar__link { padding: 10px 16px; }
}

/* --------------------------------------------------------------------------
   27. ECLIPSE PROMO — dedicated home-page section, image + facts.
   Mobile-first single column; two-up from 860px so the corona image and the
   copy sit side by side without crowding either.
   -------------------------------------------------------------------------- */
.eclipse-promo {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
}
.eclipse-promo__media { width: 100%; }
.eclipse-promo__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: center;
  align-items: center;
  width: 100%;
}
@media (min-width: 860px) {
  .eclipse-promo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    /* Top-aligned: centring left a dead band above the corona frame, since the
       body column is much taller than the media. */
    align-items: start;
  }
  /* The media column is roughly half the height of the body column, so
     top-aligning it moved the dead band from above the frame to below it —
     the gap did not go away, it just changed ends. Sticky is the actual fix:
     the frame travels with the reader while the taller column scrolls past,
     so the empty space is never on screen. 88px clears the sticky header. */
  .eclipse-promo__media {
    position: sticky;
    top: 88px;
  }
  .eclipse-promo__body { text-align: left; align-items: flex-start; }
}

/* C7 — stacked lockup for the footer. */
.site-footer__brand.bmk { font-weight: 400; letter-spacing: normal; }
.bmk__in {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  line-height: 1;
}
.bmk__in svg { display: block; }
.bmk__a {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .02em;
  color: var(--ink);
}
/* Deviation from A10's literal 0.40em: at footer scale that renders a 6-7px
   word, below any legibility floor. Held at 9px — same stacked proportions,
   readable. */
.bmk__b {
  font-family: var(--display);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: .235em;
  /* .235em of tracking adds a trailing gap; pull it back so the word optically
     centres under ASTRO. */
  text-indent: .235em;
  color: var(--ink-3);
}

/* Eclipse hero background: at narrow widths, background-size:cover on the
   3:2 landscape photo is height-driven (the mobile hero column is far
   taller than the photo is wide), so cover crops the photo's SIDES away and
   scales it up until the tall dimension fits — the disc ends up dominating
   the frame with barely a band of streamer visible top and bottom. A CSS
   zoom/reposition of the SAME landscape asset can't fix this: there just
   isn't enough vertical photo content above/below the disc in a 3:2 crop to
   reveal by panning alone (tried and reverted). The real fix is a dedicated
   PORTRAIT crop of the source photo (assets/eclipse-hero-eso-portrait[-2x]
   .jpg) that keeps most of the source's full height, so streamers are
   visible both above and below the disc at a phone aspect.
   !important is required: the element carries an inline background-image
   (plus size/position), which otherwise always wins over a stylesheet rule
   regardless of media query. Desktop (>520px) is untouched. */
@media (max-width: 520px) {
  .eclipse-hero-bg {
    background-image: url('/assets/eclipse-hero-eso-portrait.jpg') !important;
    background-image: image-set(
      url('/assets/eclipse-hero-eso-portrait-2x.jpg') 2x,
      url('/assets/eclipse-hero-eso-portrait.jpg') 1x
    ) !important;
  }
}