/* ==========================================================================
   Quarry Connect — quarryconnect.com
   Navy ground · brand blue #2c72ee · Instrument Serif display, Inter text

   Full-bleed photographs carry white type. Every photo sits under a scrim
   (.hero::after, .block::after) that is darkest where the copy sits, bottom
   left. If you swap in a brighter photograph, check the copy still reads
   over its lightest patch before trusting the greys.
   ========================================================================== */

/* ---------- tokens ---------- */

:root {
  /* The logo's own navy is #123D79. The grounds are darker relatives of it. */
  --navy-900: #05132b;
  --navy-800: #0a2246;
  --navy-700: #123d79;

  --blue: #2c72ee;        /* brand blue: accents, rules, marks */
  --blue-deep: #2568e0;   /* button fill: 5.1:1 with white */
  --blue-press: #1f5ed4;  /* button hover deepens to 5.8:1 rather than brightening */
  --blue-light: #8fb6ff;  /* links on navy */

  --text: #ffffff;
  --text-soft: #dce6f5;
  --text-muted: #a9bcd6;
  --text-dim: #7f93b0;    /* on solid navy only, never over a photograph */

  --rule: rgba(255, 255, 255, 0.14);
  --rule-strong: rgba(255, 255, 255, 0.26);
  --panel: rgba(255, 255, 255, 0.04);
  --field: rgba(3, 12, 28, 0.62);

  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  /* fluid scale */
  --t-micro: clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
  --t-small: clamp(0.86rem, 0.83rem + 0.15vw, 0.94rem);
  --t-body: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --t-lede: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  --t-h3: clamp(1.06rem, 1rem + 0.3vw, 1.2rem);
  --t-display-s: clamp(2.2rem, 1.6rem + 2.6vw, 3.8rem);
  --t-display: clamp(2.8rem, 1.6rem + 5vw, 6.4rem);

  --gutter: clamp(1rem, 4vw, 4.5rem);
  --shell: 80rem;
  --head-h: 4.75rem;
}

/* ---------- reset ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--head-h);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--navy-900);
  color: var(--text-soft);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.menu-open { overflow: hidden; }

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

h1, h2, h3 { margin: 0; line-height: 1.1; color: var(--text); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a {
  color: var(--blue-light);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--blue-light) 38%, transparent);
  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
}
a:hover { border-bottom-color: var(--blue-light); }

:focus-visible {
  outline: 2px solid var(--blue-light);
  outline-offset: 3px;
  border-radius: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  z-index: 100;
  background: var(--text);
  color: var(--navy-900);
  padding: 0.6rem 1rem;
  border: 0;
  border-radius: 4px;
}
.skip:focus { top: 0.75rem; }

/* ---------- shell and type ---------- */

.wrap {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* The large serif. Instrument Serif has one weight; size does the work. */
.display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-display);
  line-height: 1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h2.display { font-size: var(--t-display-s); line-height: 1.04; }

/* a longer title (a question, say): a step down from .display and wider */
.hero h1.display--long { font-size: clamp(2.6rem, 1.6rem + 4vw, 5.4rem); max-width: 20ch; }

.eyebrow,
.block__num {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.lede {
  font-size: var(--t-lede);
  line-height: 1.45;
  color: var(--text);
  max-width: 40ch;
}

/* ==========================================================================
   Header and menu
   ========================================================================== */

.site-head {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  /* over a photograph: a soft top shade so the menu reads against sky */
  background: linear-gradient(180deg, rgba(5, 19, 43, 0.6), rgba(5, 19, 43, 0));
  transition: background 200ms ease, box-shadow 200ms ease;
}

.site-head.is-scrolled,
.page-plain .site-head,
.site-head.is-open {
  background: rgba(5, 19, 43, 0.94);
  box-shadow: 0 1px 0 var(--rule);
}

@supports (backdrop-filter: blur(1px)) {
  .site-head.is-scrolled,
  .page-plain .site-head { background: rgba(5, 19, 43, 0.82); backdrop-filter: blur(10px); }
  /* a backdrop filter traps the fixed menu panel inside the header, so it
     comes off while the menu is open */
  .site-head.is-open { background: rgba(5, 19, 43, 0.94); backdrop-filter: none; }
}

.site-head__bar {
  height: var(--head-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.site-head__logo { border: 0; flex: 0 0 auto; margin-right: auto; }
.site-head__logo img { width: clamp(160px, 18vw, 210px); }

.site-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
}
/* every item a flex row, so links with and without a dropdown line up */
.site-nav > ul > li { display: flex; align-items: center; }

.site-nav a {
  color: var(--text);
  font-size: var(--t-small);
  font-weight: 500;
  border-bottom: 1px solid transparent;
  padding-block: 0.25rem;
}
.site-nav a:hover { border-bottom-color: var(--text); }
.site-nav a[aria-current="page"],
.site-nav a.is-section { border-bottom-color: var(--blue); }

/* Dropdown: opens on hover, or with the chevron (keyboard and touch). */
.site-nav__parent { position: relative; display: flex; align-items: center; gap: 0.2rem; }

.site-nav__more {
  display: grid;
  place-items: center;
  align-self: stretch;
  padding: 0 0.3rem;
  background: none;
  border: 0;
  color: var(--text);
  cursor: pointer;
}
.site-nav__more svg { transition: transform 160ms ease; }

.site-nav ul.site-nav__sub {
  position: absolute;
  top: 100%;
  left: -1rem;
  min-width: 11rem;
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin-top: 0.6rem;
  padding: 0.5rem 0;
  background: rgba(5, 19, 43, 0.96);
  border: 1px solid var(--rule);
  border-radius: 8px;
  box-shadow: 0 16px 40px rgba(3, 12, 28, 0.45);
}
/* bridge the gap so the pointer can travel from the link to the menu */
.site-nav__sub::before { content: ""; position: absolute; inset: -0.7rem 0 auto; height: 0.7rem; }
.site-nav__sub a { display: block; padding: 0.5rem 1rem; border: 0; white-space: nowrap; }
.site-nav__sub a:hover { background: rgba(255, 255, 255, 0.06); }
.site-nav__sub a[aria-current="page"] { color: var(--blue-light); }

@media (min-width: 62rem) and (hover: hover) {
  .site-nav__parent:hover .site-nav__sub { display: flex; }
}
.site-nav__parent.is-open .site-nav__sub { display: flex; }
.site-nav__parent.is-open .site-nav__more svg { transform: rotate(180deg); }

/* language flags, right of the menu */
.lang { display: flex; align-items: center; gap: 0.5rem; }

.lang__btn {
  display: grid;
  place-items: center;
  padding: 0.3rem;
  background: none;
  border: 0;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 140ms ease;
}
.lang__btn img {
  display: block;
  width: 24px;
  height: 18px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.lang__btn:hover { opacity: 0.85; }
.lang__btn[aria-current="true"] { opacity: 1; }

.menu-toggle {
  display: none;
  align-items: center;
  gap: 0.6rem;
  font: inherit;
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--text);
  background: none;
  border: 0;
  padding: 0.5rem 0;
  cursor: pointer;
}

.menu-toggle__bars,
.menu-toggle__bars::before,
.menu-toggle__bars::after {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: transform 200ms ease, background 200ms ease;
}
.menu-toggle__bars { position: relative; }
.menu-toggle__bars::before,
.menu-toggle__bars::after { content: ""; position: absolute; left: 0; }
.menu-toggle__bars::before { top: -7px; }
.menu-toggle__bars::after { top: 7px; }

.is-open .menu-toggle__bars { background: transparent; }
.is-open .menu-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.is-open .menu-toggle__bars::after { transform: translateY(-7px) rotate(-45deg); }

/* Below 62rem the menu folds into the toggle and opens as a full panel. */
@media (max-width: 61.99rem) {
  .menu-toggle { display: inline-flex; order: 3; }   /* flags sit left of it */

  .site-nav {
    display: none;
    position: fixed;
    inset: var(--head-h) 0 0;
    background: var(--navy-900);
    overflow-y: auto;
    padding: 1.5rem var(--gutter) 3rem;
  }
  .is-open .site-nav { display: block; }

  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav > ul > li { display: block; }
  .site-nav li { border-bottom: 1px solid var(--rule); }
  .site-nav a {
    display: block;
    font-family: var(--serif);
    font-size: clamp(1.9rem, 7vw, 2.6rem);
    font-weight: 400;
    padding-block: 0.7rem;
    border: 0;
  }
  .site-nav a[aria-current="page"] { color: var(--blue-light); }

  /* the panel lists the sub pages indented under their parent, always open */
  .site-nav__parent { display: block; }
  .site-nav__more { display: none; }
  .site-nav ul.site-nav__sub {
    position: static;
    display: flex;
    min-width: 0;
    margin: 0 0 0.9rem;
    padding: 0 0 0 1.25rem;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .site-nav__sub::before { display: none; }
  .site-nav__sub li { border: 0; }
  .site-nav .site-nav__sub a {
    font-family: inherit;
    font-size: var(--t-lede);
    padding-block: 0.35rem;
    color: var(--text-soft);
  }
  .site-nav .site-nav__sub a:hover { background: none; color: var(--text); }
}

/* ==========================================================================
   Full-bleed photographs: hero (top of each page) and block (homepage)
   ========================================================================== */

.hero,
.block {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--navy-800);
}

.photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-credit {
  position: absolute;
  right: var(--gutter);
  bottom: 0.6rem;
  z-index: 1;
  font-size: 0.68rem;
  color: var(--text-muted);
}

/* Map video (homepage Brokers block): fades in over the map photo once it
   is playing (site.js). It sits under the same scrim as the photos, plus a
   flat navy tint because the animated map is paler than the photographs. */
.photo--video { opacity: 0; transition: opacity 0.8s ease; }
.photo-credit--video { opacity: 0; transition: opacity 0.8s ease; }
.hero:has(.photo--video)::before,
.block:has(.photo--video)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(5, 19, 43, 0.45);
  opacity: 0;
  transition: opacity 0.8s ease;
}
.is-video-playing .photo--video,
.is-video-playing .photo-credit--video,
.is-video-playing.hero::before,
.is-video-playing.block::before { opacity: 1; }
/* the still photo's own credit gives way to the video's */
.photo-credit:not(.photo-credit--video) { transition: opacity 0.8s ease; }
.is-video-playing .photo-credit:not(.photo-credit--video) { opacity: 0; }

/* SCRIM: darkest at the bottom left, where the copy sits. */
.hero::after,
.block::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(0deg, rgba(5, 19, 43, 0.92) 0%, rgba(5, 19, 43, 0.62) 38%, rgba(5, 19, 43, 0.2) 72%, rgba(5, 19, 43, 0.35) 100%),
    linear-gradient(90deg, rgba(5, 19, 43, 0.55) 0%, rgba(5, 19, 43, 0) 65%);
}

.hero--full { min-height: 100svh; }
.hero--page { min-height: min(60svh, 40rem); }
.hero--page .hero__inner { padding-bottom: clamp(2rem, 6vh, 3.5rem); }
/* Photo band behind a page title without moving it (FAQ): the photo runs
   full width from the top of the page to just below the title. */
.section--band { overflow: hidden; }
.band-head { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: inherit; }
.band-head__bg {
  position: absolute;
  z-index: -1;
  left: calc(50% - 50vw);
  width: 100vw;
  top: calc(-1 * (var(--head-h) + clamp(3rem, 8vh, 5rem)));   /* .section--top padding */
  bottom: -1.1rem;
  overflow: hidden;
}
.band-head__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(5, 19, 43, 0.92) 0%, rgba(5, 19, 43, 0.62) 38%, rgba(5, 19, 43, 0.2) 72%, rgba(5, 19, 43, 0.35) 100%),
    linear-gradient(90deg, rgba(5, 19, 43, 0.55) 0%, rgba(5, 19, 43, 0) 65%);
}

/* compact photo band, so the page content starts above the fold (Pricing) */
.hero--compact { min-height: 0; }
.hero--compact .hero__inner { padding-top: calc(var(--head-h) + clamp(1.25rem, 4vh, 2.5rem)); padding-bottom: clamp(0.5rem, 1.5vh, 1rem); }
.hero + .section--tight { padding-top: clamp(1.25rem, 3vh, 2rem); }

.hero__inner,
.block__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1rem, 2.4vh, 1.5rem);
  padding-top: calc(var(--head-h) + 3rem);
  padding-bottom: clamp(3rem, 10vh, 6.5rem);
}

.hero h1,
.block h2 { max-width: 15ch; text-shadow: 0 2px 30px rgba(3, 12, 28, 0.45); }

.hero__sub {
  font-size: var(--t-lede);
  line-height: 1.4;
  color: var(--text);
  max-width: 36ch;
}

.hero__text,
.block__text {
  max-width: 54ch;
  color: var(--text-soft);
}

/* Homepage hero: message in the left two thirds, proof and sign-up in the
   right third, level with the top of the message. Below 62rem the side
   drops under the message. */
.hero--full { align-items: center; }   /* homepage: centred, not on the floor */
.hero__inner--split { display: grid; gap: clamp(1.75rem, 4vh, 2.5rem); align-items: start; }
.hero__main { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(1rem, 2.4vh, 1.5rem); }

@media (min-width: 62rem) {
  .hero__inner--split { grid-template-columns: 2fr 1fr; column-gap: clamp(2rem, 5vw, 4.5rem); }
}

/* the screen stack, a short line and the demo button, centred, with no
   panel behind them so they sit back from the headline */
.hero__side {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  width: 100%;
  max-width: 30rem;
  justify-self: center;
}
.hero__side .hero__text { color: var(--text-soft); text-shadow: 0 1px 12px rgba(3, 12, 28, 0.6); }
.hero__side .hero__proof { max-width: 30ch; text-wrap: balance; text-shadow: 0 1px 12px rgba(3, 12, 28, 0.6); }
.hero__side .btn { margin-top: 0.5rem; }
@media (min-width: 62rem) {
  .hero__inner--split .hero__side { align-self: center; }
}

/* ---------- hero screen stack: three app screens and a phone in 3D ---------- */
/* The screens float one behind another, rising to the right, with the
   Driver App in front at the lower right. One shared tilt keeps them all
   parallel. Desktop screens are 16:9 crops of the 1600px screenshots,
   top-anchored. */
.stack {
  position: relative;
  width: 100%;
  aspect-ratio: 10 / 7;
  perspective: 1600px;
  margin-bottom: 0.5rem;
}
.stack__screen,
.stack__phone {
  position: absolute;
  transform: rotateY(-24deg) rotateX(8deg) rotateZ(1deg);
  transform-origin: 0 50%;
  overflow: hidden;
  box-shadow: 0 24px 48px -12px rgba(2, 8, 20, 0.7);
}
.stack__screen { border-radius: 6px; }
.stack__screen img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: top left;
  background: #fff;
}
.stack__screen--back  { left: 34%; top: 2%;  width: 64%; opacity: 0.9; }
.stack__screen--mid   { left: 20%; top: 17%; width: 66%; }
.stack__screen--front { left: 4%;  top: 33%; width: 68%; }
/* the phone stands upright in front of the tilted screens; the
   screenshot carries its own thin phone frame, so no box round it */
.stack__phone {
  left: 79%;
  top: 44%;
  width: 14%;
  transform: none;
  overflow: visible;
  box-shadow: none;
  filter: drop-shadow(0 16px 22px rgba(2, 8, 20, 0.65));
}
.stack__phone img {
  display: block;
  width: 100%;
  height: auto;
}

.hero__proof {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
}
.hero__proof li { padding-left: 1rem; position: relative; }
.hero__proof li::before { content: "\2022"; position: absolute; left: 0; color: var(--blue-light); }

.block { min-height: 100svh; }
.block h2.display { font-size: var(--t-display); line-height: 1; }
.block h2.display--long { max-width: 20ch; }
.block__inner { gap: clamp(0.9rem, 2vh, 1.25rem); }
.block .btn { margin-top: 0.5rem; }

/* Block with app screenshots: copy in the left two thirds, phone at the
   left of the right third. Below 62rem the phone is hidden for now. */
.block__copy { display: flex; flex-direction: column; align-items: flex-start; gap: inherit; }
.block__phone { display: none; }

@media (min-width: 62rem) {
  .block__inner--phone {
    display: grid;
    grid-template-columns: 2fr 1fr;
    column-gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
  }
  .block__phone {
    display: block;
    justify-self: start;
    width: clamp(13rem, 15.5vw, 17.5rem);
    height: auto;
    filter: drop-shadow(0 24px 48px rgba(3, 12, 28, 0.55));
  }
}

/* Phone carousel: the screens are stacked and cross-fade (site.js). Without
   JS, or with reduced motion, only the first shows. */
.phones { position: relative; aspect-ratio: 600 / 1182; }
.phones__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.phones__slide.is-active { opacity: 1; }

/* white chevrons either side of the phone */
.phones__btn {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}
.phones__btn:hover,
.phones__btn:focus-visible { opacity: 1; }
.phones__btn--prev { left: -3.5rem; }
.phones__btn--next { right: -3.5rem; }

/* scroll cue at the foot of the homepage hero */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  translate: -50% 0;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  background: rgba(5, 19, 43, 0.45);
  box-shadow: 0 4px 18px rgba(2, 8, 20, 0.5);
  animation: cue 2.2s ease-in-out infinite;
  transition: background-color 0.2s, border-color 0.2s;
}
.hero__scroll:hover,
.hero__scroll:focus-visible { background: var(--blue-press); border-color: #fff; }
/* a down chevron */
.hero__scroll span {
  width: 0.75rem;
  height: 0.75rem;
  margin-top: -0.35rem;
  border-right: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  rotate: 45deg;
}
@keyframes cue {
  0%, 100% { transform: translateY(-3px); }
  50% { transform: translateY(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll { animation: none; }
}

/* ==========================================================================
   Content sections
   ========================================================================== */

.section { padding-block: clamp(4rem, 10vh, 7rem); }
.hero + .section { padding-top: clamp(2.5rem, 6vh, 4rem); }
.section--top { padding-top: calc(var(--head-h) + clamp(3rem, 8vh, 5rem)); }

.features {
  margin-top: clamp(3rem, 7vh, 4.5rem);
  display: grid;
  gap: 0 clamp(2rem, 5vw, 4.5rem);
  counter-reset: feature;
}

@media (min-width: 48rem) {
  .features { grid-template-columns: 1fr 1fr; }
}

.feature {
  counter-increment: feature;
  border-top: 1px solid var(--rule);
  padding-block: 1.6rem 2rem;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  align-content: start;
  column-gap: 1rem;
  row-gap: 0.5rem;
}

.feature::before {
  content: counter(feature, decimal-leading-zero);
  grid-row: span 2;
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--blue-light);
  padding-top: 0.15rem;
}

.feature h3 { font-size: var(--t-h3); font-weight: 600; line-height: 1.3; }
.feature p { color: var(--text-muted); }

.prose {
  max-width: 46rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.prose .lede { max-width: none; margin-bottom: 0.5rem; }
.prose p:not(.lede) { color: var(--text-soft); }
.prose h2 { font-size: var(--t-h3); font-weight: 600; line-height: 1.3; margin-top: 1rem; }

/* ---------- pricing: headline card, fee and volume tables ---------- */

#pricing { scroll-margin-top: var(--head-h); }
.section--follow { padding-top: 0; }

/* pricing landing: three columns */
.pricing-intro { max-width: 52rem; color: var(--text-soft); }
.tiers {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-top: clamp(2rem, 5vh, 3rem);
}
@media (min-width: 58rem) {
  .tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* The whole card is clickable: the More link's hit area is stretched over
   it, so there is still one link with clear text for search and screen
   readers. */
.tier { height: 100%; gap: 1rem; position: relative; transition: border-color 160ms ease, background 160ms ease; }
.tier:hover { border-color: rgba(143, 182, 255, 0.45); background: #0d2a55; }
.tier:focus-within { outline: 2px solid var(--blue-light); outline-offset: 3px; }
.tier__more::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tier__more:focus-visible { outline: none; }
.tier:hover .tier__more-arrow { transform: translateX(3px); }
.tier__price { color: var(--text-muted) !important; }
.tier__from { display: block; font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 0.35rem; }
.tier__amount { font-family: var(--serif); font-size: clamp(2.8rem, 2.2rem + 2vw, 3.8rem); line-height: 1; color: var(--text); }
.tier__sub { color: var(--text) !important; font-weight: 600; }
.tier__note { color: var(--text) !important; font-weight: 600; }
.tier__more { margin-top: auto; align-self: flex-end; display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; color: var(--blue-light); border: 0; }
.tier__more:hover .tier__more-arrow { transform: translateX(3px); }
/* the stretched More link sits above the card; keep the footnote asterisk clickable */
.tier .price-hero__note { position: relative; z-index: 1; }
.tiers__note { margin-top: clamp(1.5rem, 3vh, 2rem); max-width: 52rem; font-size: var(--t-small); color: var(--text-soft); scroll-margin-top: calc(var(--head-h) + 1.5rem); }
.tiers__note span { color: var(--text); margin-right: 0.15em; }
/* page footnote: an asterisk in the text links to it */
.fn-ref { border: 0; color: var(--blue-light); text-decoration: none; margin-left: 0.05em; }
.prose .footnote { margin-top: clamp(1.5rem, 3vh, 2rem); padding-top: 1rem; border-top: 1px solid var(--line, rgba(255,255,255,0.15)); font-size: var(--t-small); color: var(--text-soft); scroll-margin-top: calc(var(--head-h) + 1.5rem); }
.prose .footnote span { color: var(--text); margin-right: 0.15em; }
.tier__more-arrow { transition: transform 160ms ease; }

.price-top {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}
@media (min-width: 58rem) {
  .price-top { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}
.price-hero { gap: 0.6rem; }
.price-cards { display: flex; flex-direction: column; gap: 1rem; }
.price-hero--single .price-hero__price span { font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); }
.price-hero__from { font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted) !important; }
.price-hero__price { color: var(--text-muted) !important; }
.price-hero__price span { font-family: var(--serif); font-size: clamp(3.4rem, 2.6rem + 3vw, 5rem); line-height: 1; color: var(--text); }
.price-hero__note { border: 0; color: var(--text); font-size: 0.6em; vertical-align: super; line-height: 0; margin-left: 0.05em; }
#ticket-fees { scroll-margin-top: calc(var(--head-h) + 1.5rem); }
#ticket-fees span { color: var(--text); }
.price-hero__setup s { color: var(--text-muted); }
.price-hero__setup strong { color: var(--blue-light); margin-left: 0.35rem; }

.price-tables {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  margin-top: clamp(3rem, 7vh, 4.5rem);
  align-items: start;
}
.price-tables .price-table { max-width: 44rem; }
.price-table { display: flex; flex-direction: column; gap: 0.75rem; }
.price-features { display: flex; flex-direction: column; gap: 1rem; }
.price-features h2,
.price-table h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.8rem, 1.5rem + 1vw, 2.4rem); }
.price-table > p { color: var(--text-soft); }

.checklist { display: flex; flex-direction: column; gap: 0.6rem; }
.checklist li { padding-left: 1.6rem; position: relative; color: var(--text-soft); }
.checklist li::before { content: "\2713"; position: absolute; left: 0; color: var(--blue-light); font-weight: 600; }
.price-table table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; font-variant-numeric: tabular-nums; }
.price-table th,
.price-table td { padding: 0.7rem 0.75rem; text-align: right; border-bottom: 1px solid var(--rule); }
.price-table th:first-child,
.price-table td:first-child { text-align: left; padding-left: 0; }
.price-table th:last-child,
.price-table td:last-child { padding-right: 0; }
.price-table th { font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.price-table td { color: var(--text-soft); }
.price-table td:last-child { color: var(--text); font-weight: 600; }
.price-table__enterprise a { color: var(--blue-light); }

/* registered mark, raised and small (added at build, eleventy.config.js) */
sup.reg { font-size: 0.55em; line-height: 0; vertical-align: super; margin-left: 0.05em; }
.display sup.reg { font-size: 0.3em; vertical-align: 1.6em; }

/* ---------- screenshot rows: text beside a desktop screenshot, alternating ---------- */

.showcase { display: flex; flex-direction: column; gap: clamp(3.5rem, 9vh, 6rem); }
.showcase__row { display: grid; gap: 1.5rem; align-items: center; }
.showcase__text { display: flex; flex-direction: column; gap: 0.75rem; max-width: 34rem; }
.showcase__text h2 { font-size: var(--t-h3); font-weight: 600; line-height: 1.3; }
.showcase__text p { color: var(--text-soft); }
.showcase__img { width: 100%; height: auto; }

@media (min-width: 58rem) {
  .showcase__row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2.5rem, 5vw, 4.5rem); }
  .showcase__row:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .showcase__row:nth-child(even) .showcase__text { order: 2; }
}
/* portrait-ish screens (the invoice) stay a sensible size */
.showcase__img[width="1033"] { max-width: 36rem; justify-self: center; }

/* ---------- page intro, section titles ---------- */

.section--intro { padding-bottom: 0; }
.intro__lede { max-width: 52rem; color: var(--text-soft); }
.intro__lede + .intro__lede { margin-top: 1rem; }
.section--intro + .section--follow { padding-top: clamp(2.5rem, 6vh, 4rem); }
.price-title { font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem); line-height: 1; margin-bottom: clamp(1.5rem, 4vh, 2.25rem); }
.showcase__title { font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem); line-height: 1; }
.showcase__img--phone { max-width: 17rem; justify-self: center; filter: drop-shadow(0 18px 36px rgba(3, 12, 28, 0.55)); }
.split--single { grid-template-columns: minmax(0, 46rem) !important; }

/* ---------- QuickBooks page ---------- */

.hero--qb .hero__inner { padding-bottom: clamp(2rem, 5vh, 3rem); }
.qb-hero { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (min-width: 62rem) {
  .qb-hero { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
.qb-hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(1rem, 2.4vh, 1.5rem); }
.qb-hero__shot { width: 100%; height: auto; }

.qb { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
@media (min-width: 58rem) { .qb { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); } }
.qb__col { display: flex; flex-direction: column; gap: 1.25rem; }
.qb__title { font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem); line-height: 1; }
.qb__steps { counter-reset: qb; display: flex; flex-direction: column; gap: 1rem; }
.qb__steps li { counter-increment: qb; position: relative; padding-left: 2.6rem; color: var(--text-soft); }
.qb__steps li::before {
  content: counter(qb);
  position: absolute; left: 0; top: -0.1rem;
  width: 1.8rem; height: 1.8rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--blue-deep); color: #fff;
  font-size: var(--t-small); font-weight: 700;
}
.qb__other { color: var(--text-soft); }
.qb__tm { margin-top: clamp(2.5rem, 6vh, 4rem); font-size: var(--t-micro); color: var(--text-muted); }

/* ---------- FAQ ---------- */

.faq { display: flex; flex-direction: column; border-top: 1px solid var(--rule); margin-top: 1rem; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.1rem 2rem 1.1rem 0;
  position: relative;
  font-weight: 600;
  color: var(--text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0.25rem;
  top: 50%;
  translate: 0 -50%;
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--blue-light);
}
.faq details[open] summary::after { content: "\2212"; }
.faq details > div { padding: 0 0 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; }
.faq details p { color: var(--text-soft); }

/* ---------- closing call to action ---------- */

.cta {
  background: var(--navy-800);
  border-top: 1px solid var(--rule);
  padding-block: clamp(4rem, 12vh, 7.5rem);
  text-align: center;
}

.cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.cta__inner p { color: var(--text-soft); max-width: 40ch; }

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
  margin-top: 1rem;
}

/* ---------- form page layout: form beside a side card ---------- */

.split {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

@media (min-width: 58rem) {
  .split { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .split__side { position: sticky; top: calc(var(--head-h) + 2rem); margin-top: 7.5rem; }
}

.split__main {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.split__main .form { margin-top: 1rem; }

.card {
  background: var(--navy-800);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
}
.card h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.8rem, 1.5rem + 1vw, 2.4rem); }
.card p { color: var(--text-soft); }
.card .btn { margin-top: 0.5rem; }
.card .card__action { align-self: center; }
.card__muted { color: var(--text-muted) !important; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-block;
  justify-self: start;
  font-family: inherit;
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--blue-deep);
  border: 1px solid var(--blue-deep);
  border-radius: 999px;
  padding: 0.8rem 1.75rem;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.btn:hover:not(:disabled) { background: var(--blue-press); border-color: var(--blue-press); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* white button over a photograph */
.btn--light { background: var(--text); color: var(--navy-900); border-color: var(--text); }
.btn--light:hover:not(:disabled) { background: var(--text-soft); border-color: var(--text-soft); }

.btn--ghost { background: transparent; border-color: var(--rule-strong); }
.btn--ghost:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); border-color: var(--text); }

/* ==========================================================================
   Form
   ========================================================================== */

.form {
  display: grid;
  gap: 1.05rem;
  background: var(--navy-800);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: clamp(1.25rem, 3vw, 2rem);
}

@media (min-width: 34rem) {
  .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.05rem; }
}
@media (max-width: 33.99rem) {
  .form__row { display: grid; gap: 1.05rem; }
}

.field { display: flex; flex-direction: column; gap: 0.42rem; }

.field label {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.field .req { color: var(--blue-light); }

.field input,
.field select,
.field textarea {
  font-family: inherit;
  font-size: var(--t-body);
  color: var(--text);
  background: var(--field);
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  padding: 0.7rem 0.85rem;
  width: 100%;
  transition: border-color 140ms ease;
}

.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
                    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 50%, calc(100% - 0.8rem) 50%;
  background-size: 0.35rem 0.35rem;
  background-repeat: no-repeat;
  padding-right: 2.25rem;
  color-scheme: dark;   /* dark native dropdown list */
}
.field select option { color: var(--text); background: #1f2937; }

.field textarea { resize: vertical; min-height: 7rem; line-height: 1.55; }

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: rgba(255, 255, 255, 0.42); }

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  border-color: var(--blue-light);
  outline: 1px solid var(--blue-light);
  outline-offset: 0;
}

/* honeypot: reachable to bots, invisible and out of tab order.
   It is named "website", not "company"; company is a real field. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__note {
  font-size: var(--t-micro);
  color: var(--text-dim);
  line-height: 1.55;
}

/* Success: the form is replaced by this panel so it can't be sent twice. */
.form-sent {
  border: 1px solid var(--blue);
  border-radius: 8px;
  background: var(--navy-800);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.form-sent:focus { outline: none; }
.form-sent:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 3px; }
.form-sent h3 { font-size: var(--t-h3); font-weight: 700; line-height: 1.25; }
.form-sent p { font-size: var(--t-small); color: var(--text-muted); line-height: 1.58; }

.form__status {
  font-size: var(--t-small);
  line-height: 1.55;
  padding: 0.75rem 0.95rem;
  border-radius: 4px;
  border: 1px solid var(--rule-strong);
  background: var(--field);
}
.form__status[hidden] { display: none; }
.form__status[data-state="ok"] { border-color: var(--blue-light); color: var(--text); }
.form__status[data-state="error"] { border-color: #c0705c; color: #f4cec2; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-foot {
  border-top: 1px solid var(--rule);
  padding-block: clamp(2.5rem, 6vh, 3.5rem);
  font-size: var(--t-small);
  color: var(--text-muted);
}

.site-foot__grid {
  display: grid;
  gap: 2rem clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

@media (min-width: 52rem) {
  .site-foot__grid { grid-template-columns: auto 1fr auto; }
}

.site-foot__mark { border: 0; display: block; opacity: 0.9; }
.site-foot__mark:hover { opacity: 1; }
.site-foot__mark img { width: clamp(46px, 5vw, 56px); }

.site-foot__addr { font-style: normal; display: flex; flex-direction: column; gap: 0.15rem; }
.site-foot__addr strong { color: var(--text-soft); font-weight: 600; }

.site-foot__nav ul { display: grid; grid-template-columns: repeat(2, auto); gap: 0.35rem 2rem; }

/* copyright line: full width, centred under the rest */
.site-foot__end {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 0.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  text-align: center;
}
.site-foot__legal { display: inline-flex; gap: 0.75rem; }
.site-foot__sep { color: var(--text-dim); }

.site-foot a { color: var(--text-muted); border-bottom-color: transparent; }
.site-foot a:hover { color: var(--blue-light); border-bottom-color: var(--blue-light); }

/* ==========================================================================
   Simple content pages (privacy, terms, 404)
   ========================================================================== */

.doc { padding-block: calc(var(--head-h) + clamp(2rem, 6vh, 4rem)) clamp(3rem, 9vh, 5.5rem); }

.doc__inner {
  max-width: 44rem;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.doc h1 { font-family: var(--serif); font-weight: 400; font-size: var(--t-display-s); }
.doc h2 { font-size: var(--t-h3); font-weight: 600; margin-top: 1.1rem; }
.doc p { color: var(--text-muted); }
.doc ul { display: flex; flex-direction: column; gap: 0.5rem; color: var(--text-muted); }
.doc li { padding-left: 1.1rem; position: relative; }
.doc li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue);
}
/* Spanish legal pages: the English version governs */
.doc__translation { font-size: var(--t-small); }
.doc__updated {
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ==========================================================================
   Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}