/* Base styles for the marketing pages.
 *
 * The blocks are lifted straight from the theme app extension and style only
 * what is theirs — colour, borders, layout of their own internals. Everything
 * underneath came from Dawn on the storefront: the reset, the type stack, and
 * crucially `.button`, which supplies the padding, radius and font-size our
 * CTAs inherit. Without a stand-in here every button loses its shape.
 *
 * Deliberately small. This is a base for the blocks to sit on, not a design
 * system — the blocks bring their own look.
 */

:root {
  /* Taken from the mockup's own settings, so the page and the blocks agree. */
  --eez-ink: #341539;        /* deep purple — headings, body, most surfaces */
  --eez-accent: #ff8820;     /* orange — highlights and counters */
  --eez-paper: #f9f7f5;      /* off-white — primary section background */
  --eez-paper-alt: #e5e3df;  /* warm grey — alternating sections */
  --eez-white: #ffffff;

  /* Dawn exposes both of these and the blocks read --buttons-radius directly
     for their own corners -- flip-card.css and stencil-hero.css both do. So
     this has to be the theme's raw 16px, not the 17px a button ends up with:
     Dawn adds the border width on top (see .button below). Publishing the
     already-summed value here rounded every block corner 1px too far. */
  --buttons-radius: 16px;
  --buttons-border-width: 1px;

  /* Typography, mirroring the theme settings the mockup was built with:
       Heading  Outfit Medium, scale 125%
       Body     Assistant Regular, scale 110%

     Dawn derives the heading scale relative to the body one rather than
     absolutely — 125/110 — because headings size in rem off a root the body
     scale already moved. Keeping that relationship means changing the body
     scale here rescales the page the way it would in the theme. */
  --font-body-family: Assistant, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-body-weight: 400;
  --font-body-scale: 1.10;

  --font-heading-family: Outfit, Assistant, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading-weight: 500;   /* Medium */
  --font-heading-scale: 1.1364; /* 125 / 110 */
}

*,
*::before,
*::after { box-sizing: border-box; }

/* The root size the blocks were authored against.
 *
 * Dawn's own formula, not a magic number: 62.5% of the browser default gives
 * 10px, and the body scale setting moves it from there. At 110% that lands on
 * 11px, which is exactly what the storefront computes.
 *
 * It matters because every block sizes its type in rem. Left at the browser's
 * 16px default, all block text renders about 45% larger — Scroll Reveal's
 * heading came out at 56px against the storefront's 38.5px, wrapping onto
 * extra lines and adding roughly 860px to the page.
 *
 * Because this is derived, changing --font-body-scale rescales the page the
 * same way changing the theme setting would.
 */
html {
  font-size: calc(var(--font-body-scale) * 62.5%);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--eez-paper);
  color: var(--eez-ink);
  font-family: var(--font-body-family);
  font-weight: var(--font-body-weight);
  /* 1.5rem = 16.5px at the root above, matching the storefront. Dawn steps
     this up at the 750px breakpoint; see the media query below. */
  font-size: 1.5rem;
  /* Dawn derives body leading from the body scale, so raising the scale
     tightens the ratio and keeps the measure readable. 1.727 at scale 1.10. */
  line-height: calc(1 + 0.8 / var(--font-body-scale));
  /* Dawn tracks body copy slightly open. This is not just a finish detail:
     it widens every line, so leaving it out lets text that wraps on the
     storefront fit on one line here and the block renders shorter. */
  letter-spacing: 0.06rem;
  /* The blocks pull themselves to the viewport edges with negative margins.
     Nothing should scroll sideways as a result. */
  overflow-x: hidden;
  /* Keep the footer on the bottom edge when a page doesn't fill the screen.
     Most of these pages run well past a screenful and never notice this, but
     Background Effects is a heading and a picker -- on a tall monitor it ran
     out midway down and left the footer stranded with paper beneath it.

     dvh so a phone's collapsing toolbar doesn't count toward the height and
     push a scrollbar onto a page that fits; vh first for anything that
     doesn't know dvh. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* The one child that gives up its height: announcement, header and footer
   stay their natural size and main absorbs whatever is left over. Scripts
   are display:none and never become flex items. */
body > main { flex: 1 0 auto; }

img { max-width: 100%; display: block; }

/* Headings, including the .h0-.h5 utility classes.
 *
 * These are not only for our own copy. The blocks set their own faces from
 * their per-block font settings, but their section titles are marked up as
 * `<h2 class="... h2">` and take their size from the theme's .h2 -- so if
 * these classes are missing the titles silently fall back to body size and
 * every block renders a little taller than it does on the storefront.
 *
 * Tiers and both line-height formulas are Dawn's, confirmed by measuring the
 * rendered storefront at 1440px and 390px rather than transcribed from memory.
 *
 * h6 is deliberately absent: Dawn leaves it to the browser default, and the
 * sizes matched once the body leading above was corrected. */
h1, h2, h3, h4, h5,
.h0, .h1, .h2, .h3, .h4, .h5 {
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight);
  margin: 0;
  /* Larger headings need proportionally less leading, so the heading scale
     divides into the extra. 1.264 at scale 1.1364. */
  line-height: calc(1 + 0.3 / max(1, var(--font-heading-scale)));
  /* The body tracking above, carried through the heading scale. 0.75px. */
  letter-spacing: calc(var(--font-heading-scale) * 0.06rem);
}

.h0 { font-size: calc(var(--font-heading-scale) * 4.0rem); }
h1, .h1 { font-size: calc(var(--font-heading-scale) * 3.0rem); }
h2, .h2 { font-size: calc(var(--font-heading-scale) * 2.0rem); }
h3, .h3 { font-size: calc(var(--font-heading-scale) * 1.7rem); }
h4, .h4 { font-size: calc(var(--font-heading-scale) * 1.5rem); }
h5, .h5 { font-size: calc(var(--font-heading-scale) * 1.2rem); }

/* Dawn's headings and body copy both step up past the tablet breakpoint. */
@media screen and (min-width: 750px) {
  body { font-size: 1.6rem; }

  .h0 { font-size: calc(var(--font-heading-scale) * 5.2rem); }
  h1, .h1 { font-size: calc(var(--font-heading-scale) * 4.0rem); }
  h2, .h2 { font-size: calc(var(--font-heading-scale) * 2.4rem); }
  h3, .h3 { font-size: calc(var(--font-heading-scale) * 1.8rem); }
  h4, .h4 { font-size: calc(var(--font-heading-scale) * 1.5rem); }
  h5, .h5 { font-size: calc(var(--font-heading-scale) * 1.3rem); }
}

/* The class every block's CTA extends. Dawn supplies this on the storefront;
   the blocks override only colour and border on top of it, so these values
   decide how the buttons are actually shaped. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Measured off Dawn rather than invented: it shapes the button with a
     min-height and horizontal padding only, no vertical padding. Guessing at
     vertical padding instead left every CTA 5px short, which showed up as a
     few pixels missing from each block that has one. */
  min-height: calc(4.5rem + var(--buttons-border-width) * 2);  /* 51.5px */
  padding: 0 3rem;       /* 0 33px */
  /* Dawn grows the radius by the border so the outer edge keeps the theme's
     curve. 17px, the same value the blocks' own buttons render. */
  border-radius: calc(var(--buttons-radius) + var(--buttons-border-width));
  font-family: var(--font-body-family);  /* Dawn's buttons use the body face */
  font-size: 1.5rem;
  font-weight: var(--font-body-weight);
  /* Derived from the body scale like the leading above, not a flat ratio.
     1.1818 at scale 1.10, so 19.5px against the 16.5px face. */
  line-height: calc(1 + 0.2 / var(--font-body-scale));
  letter-spacing: 0.1rem;  /* 1.1px, matching Dawn */
  text-decoration: none;
  cursor: pointer;
  border: 0;
  background: none;
  transition: box-shadow 0.15s ease;
}

.button:focus-visible {
  outline: 2px solid var(--eez-accent);
  outline-offset: 3px;
}

/* Screen-reader-only. Stencil Hero renders its wordmark as SVG and exposes
   the heading separately through this class, so the words survive for
   assistive tech and search engines. */
.visually-hidden,
.stencil-hero__heading-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ===== Site footer =====
 *
 * Appears on every page, including the 404, so it belongs here rather than in
 * page.css, which only the sub-pages load.
 *
 * Full-bleed purple with the notice centred. The vertical padding is 40px at
 * the theme's root, expressed in rem so it tracks --font-body-scale like the
 * rest of the page rather than pinning to one size.
 */
.site-footer {
  background: var(--eez-ink);
  color: var(--eez-paper);
  padding: 3.64rem 2rem;
  text-align: center;
}

.site-footer__note {
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.5;
}

/* ===== Announcement bar =====
 *
 * Sits above the header on every page. Measured off the mockup: white, 44px
 * tall, centred Outfit 500 at 16.25px with 1.1px tracking.
 *
 * The 20.54px line-height there is the theme's own heading ratio applied to
 * this size, so it is expressed as that calculation rather than pinned -- it
 * then tracks --font-heading-scale like every other heading on the page.
 */
.site-announcement {
  /* Paper, not white -- the header below it is the white one. Taken by
     sampling the rendered mockup rather than walking its DOM: the bar and its
     inner are both transparent there, so the DOM reports body white while
     what actually paints is rgb(249,247,245), which is this token exactly. */
  background: var(--eez-paper);
  padding: 1rem 2rem;
  text-align: center;
}

.site-announcement__text {
  margin: 0;
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight);
  font-size: 1.48rem;
  line-height: calc(1 + 0.3 / max(1, var(--font-heading-scale)));
  letter-spacing: 0.1rem;
  color: #121212;
}

/* ===== Site header =====
 *
 * On every page, so it belongs here rather than in page.css, which only the
 * sub-pages load -- same reason as the footer below it.
 *
 * Measured off the designer's mockup: white, a hairline rule beneath, a
 * 1320px inner column inset 55px, 70px logo, and Assistant 15.4px nav at 75%
 * ink. The three storefront icons on the right are replaced by one branded
 * CTA, which is why the right-hand side is a button rather than an icon row.
 */
.site-header {
  background: var(--eez-white);
  border-bottom: 1px solid rgba(18, 18, 18, 0.08);
}

.site-header__inner {
  max-width: 132rem;
  margin: 0 auto;
  padding: 2rem 5.5rem;
  display: flex;
  align-items: center;
  gap: 3.2rem;
}

.site-header__logo { flex: none; display: block; line-height: 0; }
.site-header__logo img { width: 7rem; height: 7rem; }

.site-header__nav {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  /* Pushes the CTA to the far right, where the icon row used to sit. */
  margin-right: auto;
}

.site-header__link {
  font-family: var(--font-body-family);
  font-size: 1.4rem;
  letter-spacing: 0.06rem;
  color: rgba(18, 18, 18, 0.75);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.site-header__link:hover,
.site-header__link:focus-visible { color: var(--eez-ink); }

/* The Features menu is a <details>, so it opens without any JavaScript --
   the same mechanism Dawn uses, and it keeps this page script-free. */
.site-header__dropdown { position: relative; }

.site-header__dropdown > summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  list-style: none;
}

.site-header__dropdown > summary::-webkit-details-marker { display: none; }

.site-header__caret { transition: transform 0.15s ease; }
.site-header__dropdown[open] .site-header__caret { transform: rotate(180deg); }

.site-header__menu {
  position: absolute;
  top: calc(100% + 1.2rem);
  left: -1.6rem;
  z-index: 20;
  margin: 0;
  padding: 0.8rem 0;
  list-style: none;
  min-width: 22rem;
  background: var(--eez-white);
  border: 1px solid rgba(18, 18, 18, 0.08);
  border-radius: 1rem;
  box-shadow: 0 8px 24px rgba(18, 18, 18, 0.1);
}

.site-header__menu a {
  display: block;
  padding: 0.9rem 1.6rem;
  font-family: var(--font-body-family);
  font-size: 1.4rem;
  color: rgba(18, 18, 18, 0.75);
  text-decoration: none;
  white-space: nowrap;
}

.site-header__menu a:hover,
.site-header__menu a:focus-visible {
  background: rgba(52, 21, 57, 0.05);
  color: var(--eez-ink);
}

/* Flip Cards' button treatment, in the brand orange: transparent fill, a
   hairline, and a second inset pixel on hover rather than a fill, so the
   button does not shift. Size and radius come from .button above. */
.site-header__cta {
  flex: none;
  background: transparent;
  color: var(--eez-accent);
  border: 1px solid var(--eez-accent);
  text-decoration: none;
  transition: box-shadow 0.15s ease;
}

.site-header__cta:hover,
.site-header__cta:focus-visible {
  background-color: transparent;
  color: var(--eez-accent);
  box-shadow: inset 0 0 0 2px var(--eez-accent);
}

@media (max-width: 989px) {
  .site-header__inner { padding: 1.6rem 2rem; gap: 1.6rem; flex-wrap: wrap; }
  /* The nav wraps to its own row rather than squeezing the CTA off screen. */
  .site-header__nav { order: 3; width: 100%; margin-right: 0; }
  .site-header__logo img { width: 5rem; height: 5rem; }
  .site-header__cta { margin-left: auto; }
}