/* FIXEX marketing site.
   Colours are the Figma design tokens from packages/config/tokens.cjs, so the
   site, the app, and the admin dashboard read as one product. */

:root {
  --brand: #fe6100;
  --brand-dark: #d94f00;
  --brand-light: #ffbe99;
  --brand-tint: #fff1e8;
  --ink: #1a1a1a;
  --ink-2: #666666;
  --ink-3: #999999;
  --bg: #ffffff;
  --bg-subtle: #f5f5f5;
  --border: #e6e6e6;
  --max: 1160px;
  --radius: 18px;
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.1);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Firefox. Kept subtle: the scrollbar is chrome, not a brand moment, and a
     saturated orange bar down the edge of every page fights the content. */
  scrollbar-width: thin;
  scrollbar-color: var(--brand) var(--bg-subtle);
}

/* WebKit and Blink. */
::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}
::-webkit-scrollbar-track {
  background: var(--bg-subtle);
}
::-webkit-scrollbar-thumb {
  background: #d8d3cf;
  border-radius: 999px;
  /* Inset border leaves breathing room so the thumb reads as a pill rather
     than filling the gutter edge to edge. */
  border: 3px solid var(--bg-subtle);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--brand);
}
::selection {
  background: var(--brand);
  color: #fff;
}

body {
  margin: 0;
  font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  font-size: 16.5px;
  overflow-x: hidden;
}

h1,
h2,
h3 {
  font-family: 'Outfit', 'Open Sans', system-ui, sans-serif;
  line-height: 1.12;
  margin: 0 0 0.5em;
  letter-spacing: -0.025em;
}

h1 {
  font-size: clamp(2.2rem, 5.6vw, 4rem);
  font-weight: 700;
}
h2 {
  font-size: clamp(1.7rem, 3.7vw, 2.6rem);
  font-weight: 700;
}
h3 {
  font-size: 1.16rem;
  font-weight: 600;
}
p {
  margin: 0 0 1rem;
}
img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--brand-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover {
  color: var(--brand);
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brand);
  color: #fff;
  padding: 12px 20px;
  z-index: 200;
}
.skip:focus {
  left: 0;
}

/* ---------- header ---------- */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 24px;
  max-width: var(--max);
  margin: 0 auto;
}
.logo {
  height: 34px;
  width: auto;
}
.nav-links {
  display: flex;
  gap: 28px;
  align-items: center;
}
.nav-links a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
}
.nav-links a:hover {
  color: var(--brand);
}
.nav-cta {
  background: var(--brand);
  color: #fff !important;
  padding: 9px 20px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  white-space: nowrap;
}
.nav-cta:hover {
  background: var(--brand-dark);
}
/* Hamburger. Hidden on desktop, where the links show inline. */
.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 11px;
  cursor: pointer;
  place-items: center;
}
.nav-toggle svg {
  width: 21px;
  height: 21px;
  stroke: var(--ink);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}
.nav-toggle .close {
  display: none;
}
.nav-toggle[aria-expanded='true'] .open {
  display: none;
}
.nav-toggle[aria-expanded='true'] .close {
  display: block;
}

/* Scrim behind the mobile menu. Hidden entirely on desktop. */
.nav-scrim {
  display: none;
}

@media (max-width: 860px) {
  .nav-toggle {
    display: grid;
    /* Above the panel, so the same button closes what it opened. */
    position: relative;
    z-index: 120;
  }
  .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(10, 10, 10, 0.45);
    backdrop-filter: blur(2px);
  }
  .nav-scrim[hidden] {
    display: none;
  }

  /* A panel sliding in from the right, rather than a dropdown pushing the page
     around. It is off canvas rather than display:none so it can animate, and
     because a dropdown that covers the top of the page hides the very content
     the anchor links jump to. */
  .nav-links {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 110;
    width: min(82vw, 330px);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    background: #fff;
    box-shadow: -18px 0 44px rgba(0, 0, 0, 0.16);
    padding: 84px 24px 28px;
    overflow-y: auto;
    /* display:none when closed, not transform:translateX(100%). A fixed element
       parked off screen to the right still counts toward the document scroll
       width, which gave the whole page a 320px horizontal overflow on a phone.
       The slide in is a keyframe on open instead. */
    display: none;
  }
  .nav-links.open {
    display: flex;
    animation: nav-slide-in 0.26s cubic-bezier(0.4, 0, 0.2, 1);
  }
  @keyframes nav-slide-in {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(0);
    }
  }
  .nav-links a {
    padding: 15px 2px;
    border-bottom: 1px solid var(--border);
    font-size: 1.02rem;
    color: var(--ink);
    /* Chevron on each row, so the panel reads as navigation rather than a
       stack of loose text. */
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .nav-links a:not(.nav-cta)::after {
    content: '';
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--ink-3);
    border-bottom: 2px solid var(--ink-3);
    transform: rotate(-45deg);
  }
  .nav-cta {
    justify-content: center;
    text-align: center;
    margin-top: 22px;
    padding: 15px 20px;
    border-bottom: 0;
    font-size: 1rem;
  }
  /* Above the scrim. The panel is a child of header, and header already sets
     z-index:100, which makes it a stacking context: the panel's own z-index is
     therefore scoped inside header and cannot beat a sibling of header. Without
     this the scrim painted over the panel and swallowed every tap on a menu
     link. */
  header {
    position: sticky;
    z-index: 120;
    /* backdrop-filter makes an element a containing block for its
       position:fixed descendants, which clipped the menu panel to the height of
       the header bar. The background is already 94% opaque, so dropping the
       blur on phones costs nothing visible. */
    backdrop-filter: none;
  }
  .nav {
    position: relative;
  }
  /* Locks the page while the panel is open. */
  body.nav-open {
    overflow: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-links.open {
    animation: none;
  }
}

/* ---------- hero slider ---------- */
.hero {
  position: relative;
  min-height: min(88vh, 760px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #0d0d0d;
}
.slides {
  position: absolute;
  inset: 0;
}
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  /* Slow drift gives the stills a sense of motion without any video weight. */
  transform: scale(1.06);
  transition:
    opacity 1.1s ease,
    transform 7s linear;
}
.slide.active {
  opacity: 1;
  transform: scale(1);
}
.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Slightly right of centre. The subject in every slide sits on the right, so
     as the viewport narrows and cover crops the sides, this keeps the person in
     frame rather than trimming them away. */
  object-position: 62% center;
}
/* Keeps white text readable over any photograph, whatever its exposure. */
.slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(8, 8, 8, 0.94) 0%,
    rgba(12, 8, 4, 0.82) 42%,
    rgba(20, 10, 2, 0.42) 72%,
    rgba(254, 97, 0, 0.18) 100%
  );
}
.hero-inner {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 96px 0;
}
.hero h1 {
  color: #fff;
  max-width: 16ch;
  margin-bottom: 0.35em;
}
.hero h1 .accent {
  color: var(--brand);
}
.hero .lede {
  color: #ded8d3;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  max-width: 46ch;
  margin-bottom: 2rem;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(254, 97, 0, 0.16);
  border: 1px solid rgba(254, 97, 0, 0.45);
  color: #ffb480;
  border-radius: 999px;
  padding: 7px 17px;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 22px;
}
.eyebrow::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
}

/* slider controls */
.dots {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: 10px;
}
.dots button {
  width: 34px;
  height: 4px;
  border: 0;
  padding: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: background 0.25s ease;
}
.dots button[aria-current='true'] {
  background: var(--brand);
}
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(0, 0, 0, 0.32);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  backdrop-filter: blur(6px);
}
.arrow:hover {
  background: var(--brand);
  border-color: var(--brand);
}
.arrow.prev {
  left: 18px;
}
.arrow.next {
  right: 18px;
}
@media (max-width: 860px) {
  .arrow {
    display: none;
  }
}

/* On a narrow phone the hero container is far taller than it is wide, so a 16:9
   image is cropped hard from the SIDES rather than the top. Left unchecked that
   trims the subject out of frame entirely. Shortening the hero brings the
   container closer to the image ratio, and pushing the focal point further right
   keeps the person visible. */
@media (max-width: 700px) {
  .hero {
    min-height: min(74vh, 620px);
  }
  .hero-inner {
    padding: 68px 0 84px;
  }
  .slide img {
    object-position: 70% center;
  }
  .slide::after {
    /* Nearly opaque on a small screen: there is far less image showing, so the
       text needs the contrast more, not less. */
    background: linear-gradient(
      170deg,
      rgba(8, 8, 8, 0.9) 0%,
      rgba(12, 8, 4, 0.82) 55%,
      rgba(20, 10, 2, 0.66) 100%
    );
  }
  .stores {
    gap: 10px;
  }
}

/* ---------- store badges ---------- */
.stores {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #000;
  border: 1px solid #3a3a3a;
  border-radius: 13px;
  padding: 11px 22px 11px 18px;
  text-decoration: none;
  color: #fff;
  min-width: 194px;
  transition:
    transform 0.16s ease,
    border-color 0.16s ease;
}
.badge:hover {
  transform: translateY(-2px);
  border-color: var(--brand);
  color: #fff;
}
.badge .small {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #b9b9b9;
  line-height: 1.3;
  /* Neither line may wrap. A wrapped badge is taller than its pair and the row
     goes visibly crooked. */
  white-space: nowrap;
}
.badge .big {
  display: block;
  font-family: 'Outfit', sans-serif;
  font-size: 1.13rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.badge[aria-disabled='true'] {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}
.stores-note {
  margin-top: 14px;
  font-size: 0.85rem;
  color: #a29c97;
}
.band .stores-note {
  color: #9a938e;
}

/* On a phone the desktop badge is disproportionate: it was sized for a wide
   hero and ends up dominating the screen, competing with the headline it is
   supposed to support. Scaled down and kept two per row at every width. */
@media (max-width: 860px) {
  .badge {
    /* Basis 0 rather than calc(50% - gap): the two badges then always share the
       row equally whatever the gap is. Computing a percentage against a gap
       that differs per breakpoint is how the second badge silently wrapped onto
       its own line and got stretched to full width. */
    flex: 1 1 0;
    min-width: 0;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 11px;
  }
  .badge svg {
    width: 21px;
    height: 21px;
  }
  .badge .small {
    font-size: 0.56rem;
    letter-spacing: 0.04em;
  }
  .badge .big {
    font-size: 0.94rem;
  }
  .stores-note {
    margin-top: 11px;
    font-size: 0.78rem;
  }
}

@media (max-width: 400px) {
  .badge {
    gap: 6px;
    padding: 7px 9px;
  }
  .badge svg {
    width: 18px;
    height: 18px;
  }
  .badge .small {
    font-size: 0.5rem;
  }
  .badge .big {
    font-size: 0.85rem;
  }
}

/* ---------- sections ---------- */
section {
  padding: clamp(60px, 8vw, 104px) 0;
}
.section-head {
  max-width: 62ch;
  margin-bottom: 3rem;
}
.section-sub {
  color: var(--ink-2);
  font-size: 1.05rem;
  margin: 0;
}
.kicker {
  display: block;
  color: var(--brand);
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.alt {
  background: var(--bg-subtle);
}

.grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
}
.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px;
}
.card h3 {
  margin-bottom: 0.4rem;
}
.card p {
  color: var(--ink-2);
  margin: 0;
  font-size: 0.97rem;
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--brand);
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 18px;
}
.icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--brand-tint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--brand-dark);
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- services with photography ---------- */
.services {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
}
.service {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 268px;
  display: flex;
  align-items: flex-end;
  color: #fff;
  text-decoration: none;
  box-shadow: var(--shadow);
}
.service img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.service:hover img {
  transform: scale(1.06);
}
.service::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.86) 12%, rgba(0, 0, 0, 0.1) 68%);
}
.service span {
  position: relative;
  z-index: 2;
  padding: 24px;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 1.16rem;
}

/* Two per row on phones rather than one. Four full width tiles stacked made the
   section a long scroll for what is meant to be a glance.
   These must stay after the base .service rules above: same specificity, so
   source order decides, and placing them earlier let min-height:268px win. */
@media (max-width: 700px) {
  .services {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .service {
    min-height: 168px;
  }
  .service span {
    padding: 14px;
    font-size: 0.94rem;
  }
}
@media (max-width: 400px) {
  .service {
    min-height: 142px;
  }
  .service span {
    padding: 11px;
    font-size: 0.85rem;
  }
}

/* ---------- trade chips ----------
   Every trade linked by its own name. Plain links, because the whole point is
   that the link text is the search term and a crawler can follow it. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 30px;
}
.chip {
  display: inline-block;
  padding: 9px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
  transition:
    border-color 0.15s ease,
    color 0.15s ease;
}
.chip:hover {
  border-color: var(--brand);
  color: var(--brand-dark);
}
/* Neighbourhood labels rather than links: they are coverage information, not
   pages, and a chip that looks tappable and is not is worse than a plain one. */
.chip.static {
  background: var(--bg-subtle);
  color: var(--ink-2);
  font-weight: 400;
}
.center {
  text-align: center;
}

/* ---------- area pages ---------- */
.area-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.area-card {
  display: block;
  padding: 22px 24px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition:
    border-color 0.15s ease,
    transform 0.15s ease;
}
.area-card:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
}
.area-card h3 {
  margin: 0 0 4px;
  font-size: 1.08rem;
}
.area-card p {
  margin: 0 0 8px;
  color: var(--brand-dark);
  font-size: 0.82rem;
  font-weight: 600;
}
.area-card span {
  display: block;
  color: var(--ink-3);
  font-size: 0.85rem;
}
.center-cta {
  display: flex;
  justify-content: center;
  margin-top: 26px;
}
.textlink {
  color: var(--brand-dark);
  font-weight: 600;
  text-decoration: none;
}
.textlink:hover {
  text-decoration: underline;
}

/* ---------- service landing pages ---------- */
.page-head {
  padding-bottom: 0;
}
.page-head h1 {
  margin: 14px 0 12px;
}
.svc-hero {
  background: var(--bg-subtle);
}
.svc-hero-inner {
  display: grid;
  gap: clamp(28px, 5vw, 56px);
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
}
.svc-hero h1 {
  margin: 16px 0 14px;
  font-size: clamp(1.9rem, 4vw, 2.9rem);
}
.svc-hero img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  aspect-ratio: 16 / 11;
  object-fit: cover;
}
.svc-cta {
  margin-top: 28px;
}
/* The alternate names people search for. Visible on purpose: a keyword list
   users cannot see is cloaking, and this one genuinely helps someone confirm
   they are on the right page. */
.aka {
  margin-top: 22px;
  color: var(--ink-3);
  font-size: 0.88rem;
}
.joblist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px 30px;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
}
.joblist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--ink-2);
}
.joblist svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  fill: none;
  stroke: var(--brand);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.svc-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.svc-card {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition:
    border-color 0.15s ease,
    transform 0.15s ease;
}
.svc-card:hover {
  border-color: var(--brand);
  transform: translateY(-3px);
}
.svc-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.svc-card div {
  padding: 20px 22px 24px;
}
.svc-card h2 {
  font-size: 1.15rem;
  margin: 0 0 6px;
}
.svc-card p {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.93rem;
}

@media (max-width: 880px) {
  .svc-hero-inner {
    grid-template-columns: 1fr;
  }
  /* Image first would push the copy and the store badges below the fold on a
     phone, which is the opposite of what this page exists to do. */
  .svc-hero img {
    order: 2;
  }
}

/* ---------- split feature ---------- */
.split {
  display: grid;
  gap: clamp(30px, 5vw, 64px);
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.split img {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: 100%;
}
@media (max-width: 880px) {
  .split {
    grid-template-columns: 1fr;
  }
}
.ticks {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.ticks li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--ink-2);
}
.ticks li svg {
  flex: 0 0 auto;
  margin-top: 5px;
  width: 17px;
  height: 17px;
  stroke: var(--brand);
  fill: none;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ticks strong {
  color: var(--ink);
  display: block;
}

/* ---------- provider band ---------- */
.band {
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: stretch;
}
.band-copy {
  padding: clamp(32px, 5vw, 60px);
}
.band h2 {
  color: #fff;
  margin-bottom: 0.6rem;
}
.band p {
  color: #cfcac6;
}
.band .ticks li {
  color: #e2ded9;
}
.band .ticks strong {
  color: #fff;
}
.band-img {
  position: relative;
  min-height: 320px;
}
.band-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 880px) {
  .band {
    grid-template-columns: 1fr;
  }
}

/* ---------- footer ---------- */
footer {
  background: #0d0d0d;
  color: #9a9490;
  padding: 60px 0 30px;
  font-size: 0.93rem;
}
footer h4 {
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin: 0 0 15px;
}
footer a {
  color: #cbc6c2;
  text-decoration: none;
  display: block;
  margin-bottom: 9px;
}
footer a:hover {
  color: var(--brand);
}
.foot-grid {
  display: grid;
  gap: 36px;
  grid-template-columns: 1.6fr repeat(4, 1fr);
}
@media (max-width: 1040px) {
  .foot-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 880px) {
  .foot-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .foot-grid {
    grid-template-columns: 1fr;
  }
}
.foot-logo {
  height: 34px;
  width: auto;
  margin-bottom: 14px;
}
.foot-bottom {
  border-top: 1px solid #262626;
  margin-top: 40px;
  padding-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  font-size: 0.86rem;
}
.foot-bottom a {
  display: inline;
  margin: 0;
}
.dev-credit {
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
}
.dev-credit:hover {
  color: var(--brand-light);
  text-decoration: underline;
}

/* ---------- legal pages ---------- */
.legal {
  max-width: 790px;
  margin: 0 auto;
  padding: 56px 24px 92px;
}
.legal h1 {
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  margin-bottom: 0.2em;
}
.legal .updated {
  color: var(--ink-3);
  font-size: 0.92rem;
  margin-bottom: 2.4rem;
}
.legal h2 {
  font-size: 1.3rem;
  margin-top: 2.4rem;
  margin-bottom: 0.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.legal h2:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.legal p {
  color: #3d3d3d;
}
.summary {
  background: var(--brand-tint);
  border: 1px solid #ffd9c0;
  border-radius: var(--radius);
  padding: 27px 30px;
  margin-bottom: 2.6rem;
}
.summary p {
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 0.7rem;
}
.summary ul {
  margin: 0;
  padding-left: 20px;
  color: #4a4a4a;
}
.summary li {
  margin-bottom: 6px;
}
.summary .note {
  font-weight: 400;
  font-size: 0.94rem;
  color: #5a5a5a;
  margin: 1rem 0 0;
}
.backlink {
  display: inline-block;
  margin-bottom: 1.8rem;
  font-weight: 600;
  text-decoration: none;
}

/* ---------- delete account ---------- */
.steps {
  counter-reset: s;
  padding: 0;
  margin: 0 0 2rem;
  list-style: none;
}
.steps li {
  counter-increment: s;
  position: relative;
  padding-left: 48px;
  margin-bottom: 18px;
  color: #3d3d3d;
}
.steps li::before {
  content: counter(s);
  position: absolute;
  left: 0;
  top: -2px;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
}
.callout {
  border-left: 3px solid var(--brand);
  background: var(--bg-subtle);
  padding: 18px 22px;
  border-radius: 0 10px 10px 0;
  margin: 1.6rem 0;
}
.callout p:last-child {
  margin-bottom: 0;
}
table.data {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2rem 0 2rem;
  font-size: 0.95rem;
}
table.data th,
table.data td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
table.data th {
  background: var(--bg-subtle);
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
}

/* ---------- faq ----------
   Native <details>, so every answer is in the HTML at load. Google reads the
   text whether or not the accordion is open, and it works with JavaScript off,
   which a JS driven accordion does not. */
.faq {
  max-width: 820px;
  margin: 0 auto;
}
.faq details {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 12px;
  overflow: hidden;
}
.faq details[open] {
  border-color: var(--brand-light);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 1.03rem;
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
/* Chevron drawn in CSS rather than an inline SVG per item: 6 copies of the same
   icon is markup nobody needs to download. */
.faq summary::after {
  content: '';
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after {
  transform: rotate(-135deg);
}
.faq summary:hover {
  color: var(--brand-dark);
}
.faq details p {
  margin: 0;
  padding: 0 22px 22px;
  color: var(--ink-2);
  font-size: 0.97rem;
}

@media (max-width: 700px) {
  .faq summary {
    padding: 17px 18px;
    font-size: 0.98rem;
  }
  .faq details p {
    padding: 0 18px 18px;
  }
}

/* ---------- scroll to top ---------- */
.to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 22px rgba(254, 97, 0, 0.42);
  /* Hidden until the user has scrolled. visibility rather than display so the
     fade actually animates, and so it is removed from the tab order while
     hidden rather than being a focusable control pointing nowhere. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity 0.22s ease,
    transform 0.22s ease,
    visibility 0.22s,
    background 0.18s ease;
}
.to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.to-top:hover {
  background: var(--brand-dark);
}
.to-top svg {
  width: 20px;
  height: 20px;
  stroke: #fff;
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 700px) {
  .to-top {
    right: 16px;
    bottom: 16px;
    width: 42px;
    height: 42px;
  }
}

/* ---------- narrow phones ----------
   Below about 420px the fixed minimums start to overflow: a 320px viewport
   leaves 272px of usable width, which is exactly the grid minimum, and two
   store badges at 194px each cannot fit side by side at any width under 400px.
   Everything here collapses to a single column rather than being allowed to
   push the page wider than the screen. */
@media (max-width: 480px) {
  .wrap,
  .nav {
    padding-left: 18px;
    padding-right: 18px;
  }
  .legal {
    padding-left: 18px;
    padding-right: 18px;
  }
  .grid {
    grid-template-columns: 1fr;
  }
  .card {
    padding: 24px 22px;
  }
  .band-copy {
    padding: 28px 22px;
  }
  .summary {
    padding: 22px 20px;
  }
  .steps li {
    padding-left: 42px;
  }
  h1 {
    font-size: clamp(1.95rem, 8.5vw, 2.6rem);
  }
  .hero .lede {
    font-size: 1rem;
  }
}

/* Wide content must scroll inside itself rather than widening the page. The
   deletion page carries a two column data table that Play reviewers open on a
   phone. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.2rem 0 2rem;
}
.table-scroll table.data {
  margin: 0;
  min-width: 420px;
}

/* Respect the operating system setting. The slider still advances, it just
   stops animating the zoom and cross fade. */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .slide {
    transform: none;
  }
}

@media print {
  header,
  footer,
  .skip {
    display: none;
  }
}