/*
 * Self-hosted web fonts, served from /fonts (static asset, excluded from
 * run_worker_first in wrangler.jsonc). Calibre (Klim): licensed for up to
 * 5,000 monthly unique visitors; the licence files are kept outside the
 * repository. The design draws Calibre at 400 only, so the other weights are
 * declared but should be used sparingly: each is ~28 KB.
 *
 * ABC Diatype (Dinamo) is the UI/body face: Regular (400) and Medium (500)
 * only. The one Bold use in the design (the lander's "View purchase options"
 * button) is set in Medium instead. Dinamo's web licence is per domain;
 * the licensing position for the ~1,300 lander hostnames is being settled
 * with Dinamo (31 Oct 2026), so until then Diatype may end up confined to
 * yolk.co.uk with the landers in Calibre.
 */
@font-face {
  font-family: "Calibre";
  src: url("/fonts/calibre-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Calibre";
  src: url("/fonts/calibre-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Calibre";
  src: url("/fonts/calibre-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Calibre";
  src: url("/fonts/calibre-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ABC Diatype";
  src: url("/fonts/abc-diatype-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "ABC Diatype";
  src: url("/fonts/abc-diatype-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
/*
 * Design tokens, read from the Figma file "Yolk – Web Design" (31 Oct 2026,
 * Homepage page: "Home" 1680×3022 and "Domain Lander" 1680×2568 frames).
 *
 * Units: Figma draws in px on a 1680 artboard with a 1200 content width;
 * here type and spacing are in rem (16px root, so 1rem = 16px and every
 * value below equals the drawn px at the browser default) and letter-
 * spacing in em, so the whole system follows the user's font-size setting
 * and can be nudged from one place (`html { font-size }`). The display
 * sizes (hero, h2, marquee) are fluid with clamp(): the drawn size from
 * 1280px up, smaller on phones. 1px rules stay 1px. The 8px spacing scale
 * (0.5rem steps) and the 12-column / 32px-gutter grid are the designer's
 * stated system. Nothing in the live site uses these yet (Base.astro keeps
 * its placeholder styles until the templates take the design); see
 * /styleguide for the rendered reference.
 */
:root {
  /* --- Colour (Figma hex, by frequency of use) --------------------------- */
  --ink: #151514;          /* text, primary button, footer ground */
  --ink-2: #343636;        /* secondary headings / dark UI */
  --ink-3: #5b5a58;        /* body copy on cream and in cards */
  --ink-4: #6d6d6d;        /* captions */
  --paper: #fdfcf8;        /* page ground */
  --cream: #f3f2ed;        /* tinted bands: spotlight, lander buy box backdrop */
  --card: #ffffff;         /* cards on cream */
  --rule: #a9a7a4;         /* 1px outlines: secondary pill, list rules */
  --rule-strong: #848380;
  --yolk: #ffdb67;         /* brand yellow: lander primary button, accents */
  --link: var(--ink);
  --on-ink: var(--paper);  /* text on --ink */
  --on-yolk: var(--ink);

  /* --- Type ------------------------------------------------------------- */
  /* Calibre: headings and display. ABC Diatype (400, 500): UI, body, labels. */
  --font-display: "Calibre", "ABC Diatype", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-text: "ABC Diatype", "Calibre", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Fluid display sizes: drawn size at ≥1280px, scaling down to phones. */
  --size-hero: clamp(2.5rem, 2.1rem + 1.75vw, 3.5rem);        /* 56px → 40px */
  --size-h2: clamp(1.625rem, 1.43rem + 0.87vw, 2.125rem);     /* 34px → 26px */
  --size-marquee: clamp(3.5rem, 1.72rem + 7.3vw, 7.5625rem);  /* 121px from 80em (where the container is full width) down to 56px on a phone */

  /* weight size/line-height family; letter-spacing alongside, in em */
  --text-hero: 400 var(--size-hero)/1.04 var(--font-display);  --ls-hero: -0.02em;    /* homepage h1 56/58 */
  --text-domain: 400 var(--size-hero)/1 var(--font-display);                         /* lander h1: the domain on one line (Figma 56/44), sub-line below in --size-h2 and --rule grey */
  --text-h2: 400 var(--size-h2)/1.3 var(--font-display);       --ls-h2: -0.01em;      /* section headings 34/44 */
  --text-h3: 400 1.375rem/1.75rem var(--font-display);                                /* post titles 22/28 */
  --text-card-title: 500 1.25rem/1.75rem var(--font-text);                           /* 20/28 "Experience you can bank on" */
  --text-story: 400 1.25rem/1.75rem var(--font-text);                                /* 20/28 story caption (Diatype; name in 500) */
  --text-lead: 400 1.125rem/1.6875rem var(--font-text);                              /* 18/27 intro paragraphs */
  --text-body: 400 1rem/1.625rem var(--font-text);                                   /* 16/26 */
  --text-small: 400 0.875rem/1.5625rem var(--font-text);                             /* 14/25 legal line, footnotes */
  --text-strap: 400 1.125rem/1.875rem var(--font-text);        --ls-strap: -0.01em;   /* 18/30 "A few to proudly fly the nest" */
  --text-footer-link: 400 0.9375rem/1.875rem var(--font-text);                       /* 15/30 */
  --text-nav: 500 1rem/2rem var(--font-text);                  --ls-nav: 0.02em;      /* 16/32 */
  --text-button: 500 1rem/2rem var(--font-text);
  --text-button-strong: 500 1rem/2rem var(--font-text);                              /* lander "View purchase options" (drawn Bold; Bold not licensed) */
  --text-label: 500 0.75rem/1.875rem var(--font-text);         --ls-label: 0.05em;    /* 12/30 uppercase section labels */
  --text-marquee: 400 var(--size-marquee)/0.9 var(--font-display); --ls-marquee: -0.01em; /* both spotlight lines; tight leading, lines sit ~104px apart at 121px */
  --text-price: 400 var(--size-h2)/1.18 var(--font-display);                           /* lander card "Buy now for £6,649" 34/40 */
  --text-link-row: 400 1.125rem/3rem var(--font-text);                               /* lander arrow-link rows 18 in a 49px row (48 + 1px rule) */

  /* --- Spacing: 8px scale (0.5rem steps) --------------------------------- */
  --s-1: 0.5rem; --s-2: 1rem; --s-3: 1.5rem; --s-4: 2rem; --s-5: 2.5rem; --s-6: 3rem;
  --s-8: 4rem; --s-10: 5rem; --s-12: 6rem; --s-16: 8rem;
  --section-gap: 5.25rem;       /* between homepage sections: 84px of CSS box = the 96px visual gap measured cap-to-baseline in Figma */
  --block-gap: var(--s-5);      /* section head (label, h2, intro) to content: 40px */

  /* --- Layout: 12 columns, 32px gutter, 1200 content ---------------------- */
  --container: 75rem;           /* 1200px */
  --gutter: 2rem;               /* 32px */
  --columns: 12;
  --page-margin: 1.5rem;        /* phone; 240px is the artboard margin at 1680 */

  /* --- Shape ---------------------------------------------------------- */
  --radius-pill: 100px;         /* any value past half the height; fixed on purpose */
  --radius-card: 0.5rem;        /* 8px */
  --button-h: 2.75rem;          /* 44px; primary 182×44, secondary "Case study" 143×42 */
  --button-px: 2rem;            /* 32px */

  /* --- Motion ---------------------------------------------------------- */
  --marquee-logos: 25s;         /* one copy of the client logo set (~1000px) passes */
  --marquee-line-1: 60s;        /* spotlight line 1, leftwards */
  --marquee-line-2: 75s;        /* spotlight line 2, rightwards */
}

/* Breakpoints in em so they track the user's font size too: 45em = 720px, 80em = 1280px. */
@media (min-width: 45em) { :root { --page-margin: 2.5rem; } }
@media (min-width: 80em) { :root { --page-margin: 4rem; } }
@media (max-width: 44.99em) { :root { --section-gap: 3.5rem; } }

@media (prefers-reduced-motion: reduce) {
  :root { --marquee-logos: 0s; --marquee-line-1: 0s; --marquee-line-2: 0s; }
}
/*
 * yolk.co.uk base styles on top of tokens.css: reset, type defaults, the
 * container and grid, buttons, labels, bands. Page-specific layout stays in
 * the page. Landers do not load this yet (they keep Base.astro's placeholder
 * styles until the lander template takes the design).
 */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-size-adjust: 100%; }
body { margin: 0; font: var(--text-body); }
img, svg { display: block; max-width: 100%; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; }

/* Layout */
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--page-margin)); margin: 0 auto; padding-inline: var(--page-margin); }
.grid { display: grid; grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); gap: var(--gutter); }
.span-4 { grid-column: span 4; }
.span-6 { grid-column: span 6; }
.span-12 { grid-column: 1 / -1; }
@media (max-width: 44.99em) { .span-4, .span-6 { grid-column: 1 / -1; } }
/* Sections stack with one gap above each; the band that follows the last one carries its own. */
.section { padding-top: var(--section-gap); }
.band { background: var(--cream); }
.band-ink { background: var(--ink); color: var(--on-ink); }
.band-ink a { color: inherit; }

/* Type */
.label { font: var(--text-label); letter-spacing: var(--ls-label); text-transform: uppercase; }
.hero-title { font: var(--text-hero); letter-spacing: var(--ls-hero); }
.h2 { font: var(--text-h2); letter-spacing: var(--ls-h2); }
.h3 { font: var(--text-h3); }
.lead { font: var(--text-lead); color: var(--ink-3); }
.body { font: var(--text-body); }
.small { font: var(--text-small); }
.strap { font: var(--text-strap); letter-spacing: var(--ls-strap); color: var(--ink-3); }
.muted { color: var(--ink-3); }
.card-title { font: var(--text-card-title); }

/* Section heading row: label, then heading left and intro right.
   Figma: label line → h2 line 7px; the intro's line box starts 15px below the h2's. */
.section-head { display: grid; grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); gap: 0 var(--gutter); align-items: start; margin-bottom: var(--block-gap); }
.section-head .label { grid-column: 1 / -1; margin-bottom: var(--s-1); }
.section-head .h2 { grid-column: span 6; }
.section-head .h2.span-12 { grid-column: 1 / -1; }
.section-head .lead { grid-column: 7 / -1; padding-top: 1rem; }
@media (max-width: 44.99em) { .section-head .h2, .section-head .lead { grid-column: 1 / -1; } }

/* Buttons: pills, 44px high */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1); min-height: var(--button-h); padding: 0 var(--button-px); border-radius: var(--radius-pill); border: 1px solid var(--ink); background: var(--ink); color: var(--on-ink); font: var(--text-button); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.btn:hover { background: var(--ink-2); border-color: var(--ink-2); }
.btn.secondary { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn.secondary:hover { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.btn.yolk { background: var(--yolk); color: var(--on-yolk); border-color: var(--yolk); font: var(--text-button-strong); }
.btn.yolk:hover { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.btn.block { display: flex; width: 100%; }

/* Arrow link list (lander side column). Figma: 18px text in 49px rows, a rule under each, arrow right. */
.rules li { border-bottom: 1px solid var(--rule); }
.rules a { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); font: var(--text-link-row); color: var(--ink); text-decoration: none; }
.rules a:hover { text-decoration: underline; }
.rules .icon { flex: 0 0 auto; }

/* Card on the cream band */
.card { background: var(--card); border-radius: var(--radius-card); padding: var(--s-6); }
@media (max-width: 44.99em) { .card { padding: var(--s-4); } }

/* Small notice (e.g. a lander reached on a path that does not exist) */
.notice { font: var(--text-small); color: var(--ink-3); border: 1px solid var(--rule); border-radius: var(--radius-card); padding: var(--s-1) var(--s-2); }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nav[data-astro-cid-kjc35efj] {
  padding-block: var(--s-4);
}

.nav-row[data-astro-cid-kjc35efj] {
  display: flex;
  align-items: center;
  gap: var(--s-6);
}

.logo[data-astro-cid-kjc35efj] {
  line-height: 0;
}

.links[data-astro-cid-kjc35efj] ul[data-astro-cid-kjc35efj] {
  display: flex;
  gap: var(--s-5);
}

.links[data-astro-cid-kjc35efj] a[data-astro-cid-kjc35efj] {
  font: var(--text-nav);
  letter-spacing: var(--ls-nav);
  text-decoration: none;
}

.links[data-astro-cid-kjc35efj] a[data-astro-cid-kjc35efj]:hover, .links[data-astro-cid-kjc35efj] a[data-astro-cid-kjc35efj][aria-current] {
  text-decoration: underline;
}

.email[data-astro-cid-kjc35efj] {
  margin-left: auto;
}

.menu[data-astro-cid-kjc35efj] {
  display: none;
  margin-left: auto;
  position: relative;
}

.menu[data-astro-cid-kjc35efj] summary[data-astro-cid-kjc35efj] {
  list-style: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-content: center;
  gap: 5px;
  cursor: pointer;
  border-radius: var(--radius-pill);
  border: 1px solid var(--rule);
}

.menu[data-astro-cid-kjc35efj] summary[data-astro-cid-kjc35efj]::-webkit-details-marker {
  display: none;
}

.menu[data-astro-cid-kjc35efj] summary[data-astro-cid-kjc35efj] span[data-astro-cid-kjc35efj] {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--ink);
}

.menu[data-astro-cid-kjc35efj] ul[data-astro-cid-kjc35efj] {
  position: absolute;
  right: 0;
  top: calc(100% + var(--s-1));
  min-width: 14rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  padding: var(--s-1) 0;
  z-index: 10;
}

.menu[data-astro-cid-kjc35efj] li[data-astro-cid-kjc35efj] a[data-astro-cid-kjc35efj] {
  display: block;
  padding: var(--s-1) var(--s-3);
  font: var(--text-nav);
  text-decoration: none;
}

.menu[data-astro-cid-kjc35efj] li[data-astro-cid-kjc35efj] a[data-astro-cid-kjc35efj]:hover {
  background: var(--cream);
}

@media (width <= 59.99em) {
  .links[data-astro-cid-kjc35efj], .email[data-astro-cid-kjc35efj] {
    display: none;
  }

  .menu[data-astro-cid-kjc35efj] {
    display: block;
  }
}
.footer[data-astro-cid-bddg4lij] {
  padding-block: var(--s-8) 3.5rem;
}

.footer[data-astro-cid-bddg4lij] a[data-astro-cid-bddg4lij] {
  text-decoration: none;
}

.footer[data-astro-cid-bddg4lij] a[data-astro-cid-bddg4lij]:hover {
  text-decoration: underline;
}

.logo[data-astro-cid-bddg4lij] {
  grid-column: span 4;
  line-height: 0;
}

.logo[data-astro-cid-bddg4lij] svg [fill="#1C1D1F"] {
  fill: var(--on-ink);
}

.logo[data-astro-cid-bddg4lij] svg [fill="white"] {
  fill: var(--ink);
}

.col[data-astro-cid-bddg4lij] {
  grid-column: span 2;
}

.col[data-astro-cid-bddg4lij] a[data-astro-cid-bddg4lij] {
  font: var(--text-footer-link);
}

.top[data-astro-cid-bddg4lij] {
  margin-bottom: var(--s-6);
}

.legal[data-astro-cid-bddg4lij] {
  padding-top: 3.5rem;
  border-top: 1px solid var(--ink-3);
  color: var(--cream);
}

.copy[data-astro-cid-bddg4lij] {
  grid-column: span 4;
}

.company[data-astro-cid-bddg4lij] {
  grid-column: 5 / -1;
}

@media (width <= 44.99em) {
  .logo[data-astro-cid-bddg4lij], .col[data-astro-cid-bddg4lij], .copy[data-astro-cid-bddg4lij], .company[data-astro-cid-bddg4lij] {
    grid-column: 1 / -1;
  }

  .top[data-astro-cid-bddg4lij] {
    margin-bottom: var(--s-8);
    row-gap: var(--s-3);
  }
}
.icon[data-astro-cid-bahuqh6s] {
  display: inline-block;
  width: 1.125rem;
  height: 1.125rem;
  vertical-align: -.2em;
}
.why-head[data-astro-cid-3va6vhg2] {
  margin-bottom: 3.5rem;
}

.why-art[data-astro-cid-3va6vhg2] {
  height: 13.4375rem;
  display: grid;
  place-items: center;
  margin-bottom: 1.75rem;
}

.why-art[data-astro-cid-3va6vhg2] img[data-astro-cid-3va6vhg2] {
  width: auto;
  max-height: 13.4375rem;
}

.why-col[data-astro-cid-3va6vhg2] .card-title[data-astro-cid-3va6vhg2] {
  margin-bottom: 1.25rem;
}

.why-col[data-astro-cid-3va6vhg2] .body[data-astro-cid-3va6vhg2] {
  color: var(--ink-4);
}

@media (width <= 44.99em) {
  .why[data-astro-cid-3va6vhg2] {
    row-gap: var(--s-6);
  }

  .why-art[data-astro-cid-3va6vhg2] {
    height: 10rem;
  }

  .why-art[data-astro-cid-3va6vhg2] img[data-astro-cid-3va6vhg2] {
    max-height: 10rem;
  }
}
.marquee[data-astro-cid-lmshgfmd] {
  overflow: hidden;
  overflow-x: clip;
  overflow-y: visible;
  white-space: nowrap;
  min-width: 0;
  max-width: 100%;
  contain: inline-size;
}

.track[data-astro-cid-lmshgfmd] {
  display: flex;
  width: max-content;
  animation: marquee var(--duration) linear infinite;
  will-change: transform;
}

.reverse[data-astro-cid-lmshgfmd] .track[data-astro-cid-lmshgfmd] {
  animation-direction: reverse;
}

.marquee[data-astro-cid-lmshgfmd]:hover .track[data-astro-cid-lmshgfmd] {
  animation-play-state: paused;
}

.set[data-astro-cid-lmshgfmd] {
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding-right: var(--gap);
}

@keyframes marquee {
  to {
    transform: translateX(var(--shift));
  }
}
.egg[data-astro-cid-4mdntz3x] {
  display: inline-block;
  width: .165em;
  height: .207em;
  color: var(--ink);
  overflow: visible;
}

.egg[data-astro-cid-4mdntz3x] path[data-astro-cid-4mdntz3x] {
  stroke-width: 1px;
}

@media (width <= 44.99em) {
  .egg[data-astro-cid-4mdntz3x] path[data-astro-cid-4mdntz3x] {
    stroke-width: 2px;
  }
}
.spotlight[data-astro-cid-vj2n2buj] {
  margin-top: var(--section-gap);
  padding-block: 3.5rem var(--s-8);
}

.spotlight[data-astro-cid-vj2n2buj] .label[data-astro-cid-vj2n2buj] {
  margin-bottom: var(--s-1);
}

.lines[data-astro-cid-vj2n2buj] {
  padding-block: 1.875rem 3.25rem;
}

.outline[data-astro-cid-vj2n2buj] {
  font: var(--text-marquee);
  letter-spacing: var(--ls-marquee);
  -webkit-text-stroke: 1px var(--ink);
}

.outline[data-astro-cid-vj2n2buj] a[data-astro-cid-vj2n2buj] {
  color: #0000;
  text-decoration: none;
  transition: color .2s;
}

.outline[data-astro-cid-vj2n2buj] a[data-astro-cid-vj2n2buj]:hover, .outline[data-astro-cid-vj2n2buj] a[data-astro-cid-vj2n2buj]:focus-visible {
  color: var(--card);
}

.outline[data-astro-cid-vj2n2buj] a[data-astro-cid-vj2n2buj]:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: .1em;
}

.outline[data-astro-cid-vj2n2buj] .egg {
  margin-inline: .3em;
  vertical-align: middle;
}

.egg-link[data-astro-cid-vj2n2buj] {
  display: inline-block;
}

.egg-link[data-astro-cid-vj2n2buj] .egg path {
  transition: fill .2s;
}

.egg-link[data-astro-cid-vj2n2buj]:hover .egg path {
  fill: var(--card);
}

.centre[data-astro-cid-vj2n2buj] {
  text-align: center;
}
.notice[data-astro-cid-5pht5paj] {
  margin-top: var(--s-2);
}

.hero[data-astro-cid-5pht5paj] {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: center;
  padding-block: 4.5rem;
}

.domain[data-astro-cid-5pht5paj] {
  grid-column: 1 / span 7;
  font: var(--text-domain);
  letter-spacing: var(--ls-hero);
  overflow-wrap: anywhere;
}

.subline[data-astro-cid-5pht5paj] {
  display: block;
  margin-top: var(--s-1);
  font: var(--text-h2);
  letter-spacing: var(--ls-h2);
  color: var(--rule);
}

.hero-art[data-astro-cid-5pht5paj] {
  grid-column: 9 / -1;
  width: 100%;
  max-width: 23.8125rem;
  height: auto;
  justify-self: end;
}

@media (width <= 44.99em) {
  .hero[data-astro-cid-5pht5paj] {
    padding-block: var(--s-4) var(--s-6);
    row-gap: var(--s-4);
  }

  .domain[data-astro-cid-5pht5paj], .hero-art[data-astro-cid-5pht5paj] {
    grid-column: 1 / -1;
  }

  .hero-art[data-astro-cid-5pht5paj] {
    max-width: 15rem;
    justify-self: start;
  }
}

.about[data-astro-cid-5pht5paj] {
  padding-block: var(--s-5);
}

.about-copy[data-astro-cid-5pht5paj] {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-6);
}

.about-copy[data-astro-cid-5pht5paj] .label[data-astro-cid-5pht5paj] {
  margin-bottom: 1.25rem;
}

.about-copy[data-astro-cid-5pht5paj] .lead[data-astro-cid-5pht5paj] {
  line-height: 1.75rem;
}

.content[data-astro-cid-5pht5paj] {
  margin-top: var(--s-3);
}

.content[data-astro-cid-5pht5paj] p {
  margin-bottom: var(--s-2);
}

.price[data-astro-cid-5pht5paj] {
  font: var(--text-price);
  margin-bottom: 2.75rem;
}

.price-sub[data-astro-cid-5pht5paj] {
  display: inline-block;
}

.bullets[data-astro-cid-5pht5paj] {
  margin-bottom: var(--s-6);
}

.bullets[data-astro-cid-5pht5paj] li[data-astro-cid-5pht5paj] {
  display: flex;
  gap: var(--s-2);
  align-items: baseline;
  font: var(--text-lead);
  line-height: 1.75rem;
  color: var(--ink-3);
}

.bullets[data-astro-cid-5pht5paj] .icon {
  flex: none;
  color: var(--ink);
  align-self: flex-start;
  margin-top: .3rem;
}

.offer[data-astro-cid-5pht5paj] {
  margin-top: var(--s-2);
  color: var(--ink-2);
}

.offer[data-astro-cid-5pht5paj] a[data-astro-cid-5pht5paj] {
  color: var(--ink);
}

@media (width <= 44.99em) {
  .about-copy[data-astro-cid-5pht5paj] {
    display: contents;
  }

  .about-copy[data-astro-cid-5pht5paj] > div[data-astro-cid-5pht5paj] {
    order: 1;
    grid-column: 1 / -1;
  }

  .purchase[data-astro-cid-5pht5paj] {
    order: 2;
  }

  .about-copy[data-astro-cid-5pht5paj] .rules[data-astro-cid-5pht5paj] {
    order: 3;
    grid-column: 1 / -1;
  }

  .price[data-astro-cid-5pht5paj] {
    margin-bottom: var(--s-4);
  }

  .bullets[data-astro-cid-5pht5paj] {
    margin-bottom: var(--s-4);
  }
}

.lander-why {
  padding-top: 4.25rem;
}
.hero[data-astro-cid-ufsvivk3] {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: center;
  padding-block: 4.5rem;
}

.domain[data-astro-cid-ufsvivk3] {
  grid-column: 1 / span 7;
  font: var(--text-domain);
  letter-spacing: var(--ls-hero);
  overflow-wrap: anywhere;
}

.subline[data-astro-cid-ufsvivk3] {
  display: block;
  margin-top: var(--s-1);
  font: var(--text-h2);
  letter-spacing: var(--ls-h2);
  color: var(--rule);
}

.copy[data-astro-cid-ufsvivk3] {
  grid-column: 1 / span 6;
}

.copy[data-astro-cid-ufsvivk3] .lead[data-astro-cid-ufsvivk3] {
  margin-bottom: var(--s-4);
}

.hero-art[data-astro-cid-ufsvivk3] {
  grid-column: 9 / -1;
  grid-row: 1 / span 2;
  width: 100%;
  max-width: 23.8125rem;
  height: auto;
  justify-self: end;
}

@media (width <= 44.99em) {
  .hero[data-astro-cid-ufsvivk3] {
    padding-block: var(--s-4) var(--s-6);
    row-gap: var(--s-4);
  }

  .domain[data-astro-cid-ufsvivk3], .copy[data-astro-cid-ufsvivk3], .hero-art[data-astro-cid-ufsvivk3] {
    grid-column: 1 / -1;
  }

  .hero-art[data-astro-cid-ufsvivk3] {
    grid-row: auto;
    max-width: 15rem;
    justify-self: start;
  }
}
.hero[data-astro-cid-yihherzx] {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: center;
  padding-block: 4.5rem;
}

.domain[data-astro-cid-yihherzx] {
  grid-column: 1 / span 7;
  font: var(--text-domain);
  letter-spacing: var(--ls-hero);
  overflow-wrap: anywhere;
}

.subline[data-astro-cid-yihherzx] {
  display: block;
  margin-top: var(--s-1);
  font: var(--text-h2);
  letter-spacing: var(--ls-h2);
  color: var(--rule);
}

.copy[data-astro-cid-yihherzx] {
  grid-column: 1 / span 6;
}

.copy[data-astro-cid-yihherzx] .lead[data-astro-cid-yihherzx] {
  margin-bottom: var(--s-4);
}

.actions[data-astro-cid-yihherzx] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
}

.hero-art[data-astro-cid-yihherzx] {
  grid-column: 9 / -1;
  grid-row: 1 / span 2;
  width: 100%;
  max-width: 18.75rem;
  height: auto;
  justify-self: end;
}

@media (width <= 44.99em) {
  .hero[data-astro-cid-yihherzx] {
    padding-block: var(--s-4) var(--s-6);
    row-gap: var(--s-4);
  }

  .domain[data-astro-cid-yihherzx], .copy[data-astro-cid-yihherzx], .hero-art[data-astro-cid-yihherzx] {
    grid-column: 1 / -1;
  }

  .hero-art[data-astro-cid-yihherzx] {
    grid-row: auto;
    max-width: 15rem;
    justify-self: start;
  }
}