/* ==========================================================================
   drivers.quarryconnect.com: additions to main.css

   main.css is kept identical to quarryconnect-www so both sites share one
   look. Anything only the driver site needs lives here.
   ========================================================================== */

/* The driver photo sits behind every page, fixed to the viewport. Pages
   other than home get a heavier scrim so text panels read cleanly. */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}
.backdrop .photo { z-index: 0; }
.backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(5, 19, 43, 0.92) 0%, rgba(5, 19, 43, 0.6) 45%, rgba(5, 19, 43, 0.35) 100%),
    linear-gradient(90deg, rgba(5, 19, 43, 0.6) 0%, rgba(5, 19, 43, 0.1) 70%);
}
body:not(.page-home) .backdrop::after { background: rgba(5, 19, 43, 0.86); }

body { background: transparent; }
html { background: var(--navy-900); }

/* the photo is the backdrop, so heroes here have no image or scrim of their own */
.hero { background: none; }
.hero::after { display: none; }

/* Sign Up in the menu: a pill, like a button */
.site-nav a.nav-btn {
  border: 1px solid var(--blue-deep);
  background: var(--blue-deep);
  border-radius: 999px;
  padding: 0.4rem 1rem;
}
.site-nav a.nav-btn:hover,
.site-nav a.nav-btn[aria-current="page"] { background: var(--blue-press); border-color: var(--blue-press); }

@media (max-width: 61.99rem) {
  .site-nav a.nav-btn { background: none; border: 0; border-radius: 0; padding: 0.7rem 0; color: var(--blue-light); }
}

.site-foot { background: rgba(5, 19, 43, 0.9); }

/* ---------- home: message left, app panel right ---------- */

.hero--full { align-items: center; }

.hero__split {
  display: grid;
  gap: clamp(2rem, 5vh, 3rem);
  align-items: start;
}
@media (min-width: 62rem) {
  .hero__split { grid-template-columns: 2fr 1fr; column-gap: clamp(2rem, 5vw, 4.5rem); }
}
.hero__main { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(1rem, 2.4vh, 1.5rem); }
.hero__main .hero__text { max-width: 58ch; }

/* App store badges. Apple and Google both require their official BLACK
   badges, unaltered, when the two appear together, so they sit on a light
   panel (black on this navy would read as a hole). Gaps and padding stay at
   or above a quarter of the badge height, the clear space both require. */
.app-panel {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.store {
  background: rgba(240, 244, 250, 0.95);
  border-radius: 10px;
  padding: clamp(1rem, 2vw, 1.25rem);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.store__head { font-size: var(--t-small); font-weight: 700; color: var(--navy-800); }
.store__note { font-size: var(--t-micro); color: #44506a; }

.badges { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.badge { border: 0; display: block; border-radius: 7px; }
.badge img { width: clamp(142px, 15vw, 168px); height: auto; }
.badge.is-soon { opacity: 0.55; }
a.badge:hover { opacity: 0.85; }

.app-panel__signup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: clamp(1.1rem, 2vw, 1.4rem);
  background: rgba(5, 19, 43, 0.55);
  border: 1px solid var(--rule);
  border-radius: 10px;
}
.app-panel__signup p { font-size: var(--t-small); color: var(--text-soft); }
.app-panel__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* hero: what the Driver needs, and what the app does */
.hero__need { font-weight: 600; color: var(--text); padding-left: 0.9rem; border-left: 3px solid var(--blue); }
.hero__points { display: grid; gap: 0.45rem 1.75rem; color: var(--text-soft); }
@media (min-width: 40rem) { .hero__points { grid-template-columns: 1fr 1fr; } }
.hero__points li { padding-left: 1.4rem; position: relative; }
.hero__points li::before { content: "\2713"; position: absolute; left: 0; color: var(--blue-light); font-weight: 600; }

/* Getting Started: three numbered steps */
.steps__title { font-size: var(--t-h3); font-weight: 600; color: var(--text); }
.steps { counter-reset: step; display: flex; flex-direction: column; gap: 0.65rem; }
.steps li { counter-increment: step; position: relative; padding-left: 2.1rem; font-size: var(--t-small); color: var(--text-soft); }
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: -0.1rem;
  width: 1.5rem; height: 1.5rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--blue-deep); color: #fff;
  font-size: 0.8rem; font-weight: 700;
}
.steps__note { font-size: var(--t-small); color: var(--text-muted) !important; }

/* Broker and Driver in one: points to the Quarry Connect Software */
.app-panel__fork {
  padding: clamp(1rem, 2vw, 1.25rem) clamp(1.1rem, 2vw, 1.4rem);
  border: 1px dashed var(--rule-strong);
  border-radius: 10px;
  font-size: var(--t-small);
  color: var(--text-soft);
  display: flex; flex-direction: column; gap: 0.5rem;
}
.app-panel__fork strong { color: var(--text); }
.app-panel__fork a { color: var(--blue-light); font-weight: 600; }
@media (max-width: 61.99rem) {
  .app-panel .store { order: 2; }       /* phones: Getting Started first */
  .app-panel__fork { order: 3; }
}

/* store card content centred */
.store { align-items: center; text-align: center; }
.badges { justify-content: center; }

/* ---------- inner pages ---------- */

.page {
  padding-block: calc(var(--head-h) + clamp(2.5rem, 7vh, 4.5rem)) clamp(3.5rem, 9vh, 6rem);
}
.page__inner { max-width: 48rem; display: flex; flex-direction: column; gap: 1.25rem; }
.page__inner h1 { margin-bottom: 0.25rem; }
.page__inner h2 { font-size: var(--t-h3); font-weight: 600; margin-top: 1rem; }
.page__inner p,
.page__inner li { color: var(--text-soft); }
.page__inner ol { list-style: decimal; padding-left: 1.4rem; display: flex; flex-direction: column; gap: 0.5rem; }
.page__inner ul.dots { display: flex; flex-direction: column; gap: 0.5rem; }
.page__inner ul.dots li { padding-left: 1.1rem; position: relative; }
.page__inner ul.dots li::before {
  content: ""; position: absolute; left: 0; top: 0.72em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--blue);
}
.page__note {
  font-size: var(--t-small);
  color: var(--text-muted) !important;
  border-left: 2px solid var(--blue);
  padding-left: 1rem;
}

/* FAQ */
.faq { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.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); }

/* ---------- home: app screenshots, App Store style ----------
   The hero stops short of the full screen so the tops of the phones show at
   the bottom of the first view. On narrow screens the row scrolls sideways. */
.page-home .hero--full { min-height: calc(100svh - 7rem); }

.screens { padding-bottom: clamp(3rem, 8vh, 5rem); }
.screens__row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
}
.screens__item { scroll-snap-align: start; display: flex; flex-direction: column; gap: 0.85rem; }
/* two lines reserved, bottom-aligned, so the phones line up whatever the caption length */
.screens__cap { font-weight: 600; color: var(--text); text-align: center; min-height: 2.8em; display: flex; align-items: flex-end; justify-content: center; }
.screens__item img { width: 100%; height: auto; filter: drop-shadow(0 18px 36px rgba(3, 12, 28, 0.55)); }

@media (max-width: 61.99rem) {
  .screens__row {
    grid-auto-columns: 62%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter));
    padding: 0 var(--gutter) 0.75rem;
    scroll-padding-inline: var(--gutter);
  }
  .screens__row::-webkit-scrollbar { display: none; }
}

/* ---------- home: how Quarry Connect works ----------
   Desktop reads left to right: the Driver App in an iPhone frame, the
   arrows, the Quarry Connect Software in a larger browser frame. Below
   62rem it stacks phone, arrows, browser, and the arrows turn to point up
   (to the driver) or down (to the broker). A blue ball travels along
   arrows 2 to 5 in turn so the eye follows the flow. */
.how { padding-block: clamp(3.5rem, 9vh, 6rem); background: rgba(5, 19, 43, 0.82); border-top: 1px solid var(--rule); scroll-margin-top: 0; }
.how__title { font-size: clamp(2.4rem, 1.8rem + 2.6vw, 3.8rem); line-height: 1; margin-top: 0.5rem; }
.how__lede { margin-top: 1.25rem; max-width: 52rem; font-size: var(--t-lede); line-height: 1.45; color: var(--text); }

.flow {
  display: grid;
  gap: 1.5rem;
  margin-top: clamp(2rem, 5vh, 3rem);
  align-items: center;
  justify-items: center;
}
.flow__invite { display: none; }

@media (min-width: 62rem) {
  .flow {
    --flow-gap: clamp(1.25rem, 2.5vw, 2.25rem);
    grid-template-columns: 19rem minmax(13rem, 1fr) minmax(0, 1.55fr);
    column-gap: var(--flow-gap);
    row-gap: 0.9rem;
    justify-items: stretch;
    align-items: stretch;
  }
  .flow__party--driver,
  .flow__steps { align-self: center; }

  /* the invite: a bracket over both windows, from the top centre of the
     phone to the top centre of the browser, a head pointing down at each end */
  .flow__invite { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: end; }
  .flow__invite-end { position: relative; width: 50%; height: 2.4rem; border-top: 2px solid var(--blue-light); }
  .flow__invite-end--driver { justify-self: end; border-left: 2px solid var(--blue-light); border-top-left-radius: 16px; transform: translateX(1px); }
  .flow__invite-end--broker { justify-self: start; border-right: 2px solid var(--blue-light); border-top-right-radius: 16px; transform: translateX(-1px); }
  .flow__invite-end::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 9px;
    height: 9px;
    border-top: 2px solid var(--blue-light);
    border-right: 2px solid var(--blue-light);
  }
  .flow__invite-end--driver::after { left: -1px; transform: translate(-50%, 0) rotate(135deg); }
  .flow__invite-end--broker::after { right: -1px; transform: translate(50%, 0) rotate(135deg); }
  .flow__invite-mid {
    align-self: stretch;
    margin-inline: calc(-1 * var(--flow-gap));
    border-top: 2px solid var(--blue-light);
    margin-top: auto;
    height: 2.4rem;
    position: relative;
  }
  .flow__invite-mid .flow__label { position: absolute; left: 0; right: 0; bottom: calc(100% + 0.5rem); text-align: center; }

  /* the invite is drawn above, so its row in the list is for the stacked layout only */
  .flow__steps .flow__step--both { display: none; }
}

.flow__kicker { font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue-light); }
.flow__party h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem, 1.5rem + 1.2vw, 2.5rem); line-height: 1.05; }
.flow__list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.3rem; }
.flow__list li { padding-left: 1.4rem; position: relative; color: var(--text-soft); }
.flow__list li::before { content: "\2713"; position: absolute; left: 0; color: var(--blue-light); font-weight: 600; }

/* phone: the iPhone frame image over a dark screen. Insets are the frame's
   screen opening (120px of 1419 at the sides, 120px of 2796 top and bottom) */
.flow__party--driver { position: relative; width: min(19rem, 100%); aspect-ratio: 640 / 1261; }
.flow__party--driver::before {
  content: "";
  position: absolute;
  inset: 4% 8%;
  border-radius: 13% / 6.2%;
  background: linear-gradient(180deg, #0d2a55, var(--navy-900));
}
.flow__phone-frame { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.flow__screen {
  position: absolute;
  inset: 12% 13% 8%;          /* below the Dynamic Island */
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.flow__screen .flow__list { font-size: var(--t-small); }

/* a small slice of a real screen under each title, for depth */
.flow__slice {
  display: block;
  width: 100%;
  height: auto;
  margin: 0.3rem 0 0.4rem;
  border-radius: 10px;
  border: 1px solid rgba(15, 35, 70, 0.12);
  box-shadow: 0 8px 22px rgba(3, 12, 28, 0.18);
}
.flow__browser-body .flow__slice { max-width: 26rem; border-radius: 8px; }

/* browser window: bar with traffic lights and address, dark page */
.flow__party--broker {
  width: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule-strong);
  border-radius: 12px;
  overflow: hidden;
  background: var(--navy-800);
  box-shadow: 0 24px 60px rgba(3, 12, 28, 0.55);
}
.flow__browser-bar { display: flex; align-items: center; gap: 1rem; padding: 0.6rem 0.9rem; background: #13284a; border-bottom: 1px solid var(--rule); }
.flow__dots { display: flex; gap: 0.4rem; }
.flow__dots i { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: #ff5f57; }
.flow__dots i:nth-child(2) { background: #febc2e; }
.flow__dots i:nth-child(3) { background: #28c840; }
.flow__url { flex: 1; max-width: 22rem; margin-inline: auto; text-align: center; font-size: var(--t-micro); color: var(--text-muted); background: rgba(255, 255, 255, 0.07); border-radius: 999px; padding: 0.3rem 1rem; }
.flow__browser-body { flex: 1; padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3.25rem); display: flex; flex-direction: column; gap: 0.6rem; min-height: 22rem; }

/* arrows */
.flow__steps { display: flex; flex-direction: column; justify-content: center; gap: 1.1rem; width: 100%; }
.flow__step { display: flex; flex-direction: column; gap: 0.5rem; }
.flow__label { font-weight: 600; font-size: var(--t-small); color: var(--text); line-height: 1.3; }

.flow__arrow { position: relative; height: 2px; margin: 0.5rem 0.35rem 0.5rem 0; background: var(--blue-light); }
.flow__arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--blue-light);
  border-right: 2px solid var(--blue-light);
  transform: translateY(-50%) rotate(45deg);
}
.flow__step--to-driver .flow__arrow { transform: scaleX(-1); }   /* points left, to the driver */

/* the invite when stacked: a line with a head at each end */
.flow__arrow--both::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 9px;
  height: 9px;
  border-bottom: 2px solid var(--blue-light);
  border-left: 2px solid var(--blue-light);
  transform: translateY(-50%) rotate(45deg);
}

/* the ball: one arrow at a time, 2 then 3, 4, 5, then round again */
.flow__ball {
  position: absolute;
  top: 50%;
  left: 0;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--blue-deep);
  box-shadow: 0 0 0 4px rgba(44, 114, 238, 0.25), 0 0 18px rgba(44, 114, 238, 0.6);
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: flow-ball 8s linear infinite;
}
.flow__step:nth-child(3) .flow__ball { animation-delay: 2s; }
.flow__step:nth-child(4) .flow__ball { animation-delay: 4s; }
.flow__step:nth-child(5) .flow__ball { animation-delay: 6s; }
@keyframes flow-ball {
  0% { left: 0; opacity: 0; }
  3% { opacity: 1; }
  21% { left: 100%; opacity: 1; }
  24%, 100% { left: 100%; opacity: 0; }
}

@media (max-width: 61.99rem) {
  .flow__steps { max-width: 22rem; padding-inline: 0.5rem; }
  .flow__step { flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; }
  /* vertical: down to the broker, up to the driver */
  .flow__arrow { flex: 0 0 auto; width: 2px; height: 3rem; margin: 0 1rem 0 0; }
  .flow__arrow::after { right: auto; left: 50%; top: auto; bottom: 0; transform: translateX(-50%) rotate(135deg); }
  .flow__arrow--both::before { left: 50%; top: 0; transform: translateX(-50%) rotate(135deg); }
  .flow__step--to-driver .flow__arrow { transform: scaleY(-1); }
  .flow__ball { left: 50%; top: 0; width: 1.5rem; height: 1.5rem; animation-name: flow-ball-v; }
  @keyframes flow-ball-v {
    0% { top: 0; opacity: 0; }
    3% { opacity: 1; }
    21% { top: 100%; opacity: 1; }
    24%, 100% { top: 100%; opacity: 0; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .flow__ball { display: none; }
}

/* Light windows: white phone screen and browser page, dark text. Trial
   look (26 Oct 2026); remove "flow--light" in index.njk to go back. */
.flow--light .flow__party--driver::before { background: #f6f8fc; }
.flow--light .flow__party--broker { background: #ffffff; border-color: rgba(255, 255, 255, 0.5); }
.flow--light .flow__browser-bar { background: #e9edf3; border-bottom-color: #d6dce6; }
.flow--light .flow__url { background: #ffffff; color: #5f6b80; }
.flow--light .flow__kicker { color: var(--blue-deep); }
.flow--light .flow__party h3 { color: var(--navy-900); }
.flow--light .flow__list li { color: #2f3d55; }
.flow--light .flow__list li::before { color: var(--blue-deep); }

.how__multi { margin-top: clamp(1.75rem, 4vh, 2.5rem); max-width: 52rem; color: var(--text-soft); }
.how__multi a,
.how__both a { color: var(--blue-light); }
.how__both {
  margin-top: clamp(2rem, 5vh, 3rem);
  max-width: 52rem;
  padding-top: clamp(1.5rem, 4vh, 2rem);
  border-top: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 0.75rem;
}
.how__both h3 { font-size: var(--t-h3); font-weight: 600; }
.how__both p { color: var(--text-soft); }

/* language switch: the flags are links to the same page in the other
   language (main.css styles .lang__btn for the old buttons) */
a.lang__btn { border-bottom: 0; }
.lang__btn[aria-current="true"] { opacity: 1; }

/* translated legal pages: the note that the English version governs, just
   above "Last updated" */
.doc__translation { font-size: var(--t-small); color: var(--text-soft); }