:root {
  --cream: #FAF7F0;
  --card: #FFFFFF;
  --border: #E8E2D6;
  --primary: #0F7C73;
  --primary-light: #E6F2F0;
  --accent: #E8C87A;
  --text: #1A1F1B;
  --muted: #767061;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* One serif for everything that is meant to be read slowly. */
.serif {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.wrap { max-width: 1060px; margin: 0 auto; padding: 0 28px; }
.wrap-narrow { max-width: 720px; margin: 0 auto; padding: 0 28px; }

/* Small uppercase label above a section heading. */
.eyebrow {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--muted); margin: 0 0 14px;
}

/* The wordmark is artwork, not type: assets/logo/ten-wordmark.png, recoloured
   for each background by scripts/gen-logo.js. line-height 0 on the anchor
   stops the inline box adding a few stray pixels under the image, which is
   what makes a logo sit visibly off-centre next to a nav. */
.mark { display: inline-block; line-height: 0; text-decoration: none; }
.mark img { height: 30px; width: auto; display: block; }

/* ── The banner ────────────────────────────────────────────────────────────
   One treatment for the wordmark everywhere it appears: white on the deep
   emerald. So the header is a full-width band of it rather than a logo
   floating on cream — which also gives the nav somewhere to sit. */
/* The header is the same emerald as the hero below it, so on the landing
   page there is no seam — it reads as one green field with the wordmark
   sitting in it, rather than a banner stuck on top.
   Three columns so the nav is centred on the PAGE, not merely placed
   between the logo and the right edge; the empty third column is what makes
   that true. */
header { background: var(--primary); padding: 18px 0; }
header .wrap {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
}
header .mark { justify-self: start; }
header .mark img { height: 30px; }
header nav { justify-self: center; display: flex; gap: 26px; }
header nav a {
  color: rgba(255,255,255,0.88); text-decoration: none; font-size: 14.5px;
  font-weight: 500;
}
header nav a:hover { color: #fff; }
/* Download reads as one of the nav items, just brighter than the rest. */
.navcta { color: #fff !important; }
@media (max-width: 640px) {
  header { padding: 12px 0 6px; }
  header .wrap { grid-template-columns: 1fr; justify-items: center; gap: 4px; }
  header .mark { justify-self: center; }
  header .mark img { height: 28px; }
  /* Five items across a phone: nowrap keeps them on one line, and the
     horizontal padding comes in to make the room. The vertical padding
     stays — 22px of text is not a tap target, and 44px is the smallest
     thing a thumb hits reliably. */
  header nav { gap: 0; flex-wrap: nowrap; justify-content: center; }
  header nav a { font-size: 12.5px; padding: 12px 7px; white-space: nowrap; }
}

/* ── Hero ────────────────────────────────────────────────────────────────
   Emerald edge to edge with the wordmark large and the slogan under it —
   the splash screen, essentially, which is the first thing anyone sees of
   the app anyway. The photographs move to the strip below, where they can
   be several rather than one. */
/* Sized to the screen, not to its contents. The hero holds four things and
   the space between them is most of the design — stacked tight they read as
   a form, spread out they read as a statement. min-height keeps that true on
   a laptop, where content-height alone would leave it looking squat. */
.hero {
  background: var(--primary);
  padding: clamp(44px, 6.5vw, 86px) 24px clamp(30px, 4.5vw, 56px);
  text-align: center;
  min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
/* Sized by WIDTH, not height. A wordmark set by its height sits in a narrow
   column in the middle of the screen however much padding surrounds it; set
   by width it spans the page and becomes the thing the page is made of —
   which is what Bumble and Tinder are actually doing. */
/* The stage: the wordmark, with photographs laid over it at angles. Sized
   in percentages OF THE STAGE rather than the viewport, so a card that sits
   over the shoulder of the t stays there at every width. */
.hero .mark { display: block; width: 100%; }
.hero .mark img { width: min(56vw, 470px); height: auto; display: block; margin: 0 auto; }


/* The text in the hero, with room to breathe between each piece. */
.hero .slogan {
  color: rgba(255,255,255,0.88);
  font-size: clamp(15px, 2.4vw, 24px);
  letter-spacing: 0.14em; font-weight: 300;
  margin: clamp(16px, 2.6vw, 34px) 0 clamp(36px, 5vw, 64px);
}
.cta {
  display: flex; gap: clamp(14px, 1.6vw, 22px); justify-content: center;
  flex-wrap: wrap; margin-bottom: clamp(30px, 4.4vw, 54px);
}
.btn {
  display: inline-block; border-radius: 99px; padding: 15px 34px;
  font-size: 16px; font-weight: 600; text-decoration: none;
  border: 2px solid transparent; transition: transform .12s ease, opacity .12s ease;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: #fff; color: var(--primary); }
.btn-primary:hover { opacity: 0.92; }
.btn-ghost { border-color: rgba(255,255,255,0.8); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,0.14); }
/* Spread across a band rather than bunched in the middle — wide enough to
   look deliberate, not so wide they lose their relationship to each other. */
.hero .cities {
  width: min(84vw, 660px); margin: 0 auto;
  justify-content: space-between; gap: 10px;
}

/* No bubbles: set as capitals with wide letterspacing, they read as a line
   of places rather than a row of tags. */
.hero .city {
  background: none; padding: 0; border-radius: 0;
  color: rgba(255,255,255,0.92);
  text-transform: uppercase; letter-spacing: 0.18em;
  font-size: clamp(12.5px, 1.6vw, 17px); font-weight: 600;
}
@media (max-width: 560px) { .btn { padding: 13px 24px; font-size: 15px; } }

/* The strip: photographs and questions sliding past under the green. The
   track holds the cards twice and travels exactly half its width, so the
   loop has no seam. Pauses on hover, and holds still for anyone who has
   asked their system for less motion. */
/* The band the cards travel through is green at the top and cream at the
   bottom, so the join between the two sections runs BEHIND the cards and
   they sit across it rather than on one side of it. */
/* No padding, so the strip is exactly as tall as a card — which puts the
   hard stop in the gradient at the cards' own midpoint. Half of every card
   sits on the green, half on the cream, at any screen size. */
.strip {
  overflow: hidden;
  background: linear-gradient(to bottom, var(--primary) 0 50%, var(--cream) 50%);
}
/* Grid, not flex. In a max-content-sized FLEX container every item is
   measured by its own content, so a card full of text widened itself to
   600px while the photos stayed at 168 — neither width nor flex-basis nor
   min-width could override that. Grid columns are definite: the track is
   simply n columns of this width, whatever is inside them. */
.track {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: clamp(168px, 19vw, 246px);
  gap: clamp(14px, 2vw, 30px); width: max-content;
  animation: slide 64s linear infinite;
}
.strip:hover .track { animation-play-state: paused; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .track { animation: none; } }
.card {
  /* flex-basis, not just width. The track is sized with width: max-content so
     the marquee can travel exactly half of itself — and inside a max-content
     flex container every item contributes its CONTENT's max-content width,
     which for a card full of text is the whole lot unwrapped. That beat the
     declared width and blew the question cards out to 600px while the photos
     stayed at 176. A definite flex-basis is what the container measures
     instead. */
  width: 100%; aspect-ratio: 3/4; min-width: 0;
  /* Everything inside a card is sized in cqw — a share of the CARD's width,
     not the viewport's. Sized against the viewport the question fell to
     8.5px and the answers to 6px on a phone, because one card is a fifth of
     a desktop screen and two thirds of a phone. */
  container-type: inline-size;
  border-radius: 16px; overflow: hidden;
  border: 3px solid rgba(255,255,255,0.9);
  box-shadow: 0 16px 32px rgba(8, 26, 20, 0.3);
}
/* Direct children only. This used to be ".card img", which also caught the
   two faces inside the match card and stretched them to fill it — which is
   why they were ovals rather than circles. */
.card > img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The question face, laid out as the app lays it out: the question in the
   serif above, four lettered tiles below, darkest to lightest. */
.qcard {
  background: var(--cream); padding: 9% 8%;
  display: flex; flex-direction: column; gap: 6%;
}
.qcard .q {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: clamp(11px, 7.4cqw, 16px); line-height: 1.2; color: var(--text);
}
.qcard .grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5%; flex: 1; min-width: 0; }
.qcard .t {
  border-radius: 8px; color: #fff; padding: 7% 6%;
  font-size: clamp(8px, 5.4cqw, 11px); line-height: 1.2; text-align: center;
  min-width: 0; overflow-wrap: anywhere;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.qcard .t i {
  font-style: normal; font-size: 0.85em; opacity: 0.75;
  border: 1px solid rgba(255,255,255,0.5); border-radius: 99px;
  width: 1.7em; height: 1.7em; display: flex; align-items: center; justify-content: center;
}
.qcard .t:nth-child(1) { background: #0D6A64; }
.qcard .t:nth-child(2) { background: #0F7C73; }
.qcard .t:nth-child(3) { background: #1C887E; }
.qcard .t:nth-child(4) { background: #299990; }

/* Would-you-rather, as the app draws it: deep green, a gold hairline frame,
   the title boxed at the top, and two tall tiles instead of four small ones. */
.wyrcard {
  position: relative; overflow: hidden;
  background: linear-gradient(165deg, #117D74 0%, #0E726B 55%, #16877b 100%);
  border: 2px solid rgba(232,200,122,0.55);
  padding: 6% 5%;
  display: flex; flex-direction: column; gap: 4%;
  color: #fff; text-align: center;
}
.wyrhead {
  border: 1px solid rgba(232,200,122,0.5); border-radius: 8px;
  padding: 4% 3% 5%;
}
.today {
  display: block;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-style: italic; color: var(--accent);
  font-size: clamp(7.5px, 4.4cqw, 11px); margin-bottom: 2px;
}
.wyrtitle {
  display: block;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  text-transform: uppercase; letter-spacing: 0.14em;
  font-size: clamp(10px, 6cqw, 14px); line-height: 1.1;
}
.wyrcard .q {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: clamp(10px, 6.2cqw, 14px); line-height: 1.25; color: #fff;
  min-height: 3.4em;
}
.wyropts { display: flex; flex-direction: column; gap: 5%; flex: 1; }
.wyrcard .t {
  flex: 1; border: 1px solid rgba(232,200,122,0.45); border-radius: 10px;
  background: rgba(255,255,255,0.07);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8%; padding: 4%;
  font-size: clamp(9px, 5.6cqw, 12.5px); font-weight: 600; color: #fff;
  min-width: 0; overflow-wrap: anywhere;
}
.wyrcard .t i {
  font-style: normal; border: 1px solid rgba(255,255,255,0.55); border-radius: 99px;
  width: 1.9em; height: 1.9em; display: flex; align-items: center; justify-content: center;
  font-size: 0.85em; opacity: 0.85;
}
/* The little stars scattered over the app's version. */
.sparkle {
  position: absolute; color: rgba(232,200,122,0.55);
  font-size: clamp(8px, 4.5cqw, 12px); pointer-events: none;
}
.s1 { top: 5%;  left: 7%; }
.s2 { top: 8%;  right: 8%; font-size: 1.3em; }
.s3 { bottom: 9%; left: 9%; }
.s4 { bottom: 5%; right: 11%; font-size: 0.8em; }

.kicker {
  font-size: clamp(7.5px, 4.4cqw, 10px); text-transform: uppercase;
  letter-spacing: 0.16em; font-weight: 700; color: rgba(255,255,255,0.72);
}

/* The match card — the thing the ten questions are actually for, so it gets
   the script lettering, both faces, and the number at the size it deserves. */
/* Fireworks. Twelve sparks in two clusters, each thrown outward on its own
   delay and looping — enough to feel like something happened, few enough not
   to turn the card into a screensaver. They sit above the gradient and below
   everything that has to be read. */
.matchcard .fw {
  position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); opacity: 0; pointer-events: none;
  animation: burst 2.6s ease-out infinite;
}
@keyframes burst {
  0%   { transform: translate(0, 0) scale(0.3); opacity: 0; }
  12%  { opacity: 1; }
  70%  { opacity: 0.85; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .matchcard .fw { display: none; } }
.matchcard .f0 { left: 22%; top: 26%; --dx: -26px; --dy: -22px; animation-delay: 0s; }
.matchcard .f1 { left: 22%; top: 26%; --dx: 24px;  --dy: -26px; animation-delay: .08s; }
.matchcard .f2 { left: 22%; top: 26%; --dx: -30px; --dy: 14px;  animation-delay: .16s; }
.matchcard .f3 { left: 22%; top: 26%; --dx: 28px;  --dy: 18px;  animation-delay: .24s; }
.matchcard .f4 { left: 22%; top: 26%; --dx: 0px;   --dy: -34px; animation-delay: .32s; }
.matchcard .f5 { left: 22%; top: 26%; --dx: 6px;   --dy: 30px;  animation-delay: .4s; }
.matchcard .f6 { right: 20%; top: 60%; --dx: 26px;  --dy: -20px; animation-delay: 1.2s; }
.matchcard .f7 { right: 20%; top: 60%; --dx: -24px; --dy: -26px; animation-delay: 1.3s; }
.matchcard .f8 { right: 20%; top: 60%; --dx: 30px;  --dy: 16px;  animation-delay: 1.4s; }
.matchcard .f9 { right: 20%; top: 60%; --dx: -28px; --dy: 20px;  animation-delay: 1.5s; }
.matchcard .f10{ right: 20%; top: 60%; --dx: 2px;   --dy: -32px; animation-delay: 1.6s; }
.matchcard .f11{ right: 20%; top: 60%; --dx: -6px;  --dy: 30px;  animation-delay: 1.7s; }

.matchcard {
  position: relative;
  background: linear-gradient(155deg, #0e706b 0%, #0F7C73 50%, #299990 100%);
  color: #fff; padding: 9% 7%;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 4%; text-align: center;
}
.matchcard .matchmark { width: 82%; height: auto; }
/* The two of them, overlapping — the same arrangement the app uses. */
.matchcard .faces { display: flex; align-items: center; }
.matchcard .faces img {
  width: 30%; height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover;
  /* Two rings: white against the photograph, gold outside it. */
  border: 2.5px solid #fff;
  box-shadow: 0 0 0 3px var(--accent), 0 6px 14px rgba(0,0,0,0.28);
}
/* Side by side with a gap, not overlapping: one face in front of the other
   is the wrong idea for a screen about two people landing on the same
   answers. */
.matchcard .faces { gap: 7%; justify-content: center; }
.matchcard .score {
  font-size: clamp(34px, 23cqw, 56px); line-height: 1; font-weight: 800;
  letter-spacing: -0.04em;
}
.matchcard .score small { font-size: 0.42em; opacity: 0.68; font-weight: 700; }
.matchcard .mline {
  font-size: clamp(7.5px, 4.2cqw, 10px); text-transform: uppercase;
  letter-spacing: 0.18em; font-weight: 700; color: var(--accent);
}
/* The two things you can do next, as they appear in the app. */
.matchcard .mbtn {
  display: block; width: 100%; border-radius: 99px;
  padding: 5% 0; font-size: clamp(8px, 5cqw, 11px); font-weight: 700;
}
.matchcard .mbtn.primary { background: #fff; color: var(--primary); }
.matchcard .mbtn.ghost {
  border: 1.5px solid rgba(255,255,255,0.5); color: #fff;
}

.cities { display: flex; flex-wrap: wrap; gap: 8px; }
.city {
  background: var(--primary-light); color: var(--primary);
  border-radius: 99px; padding: 7px 15px; font-size: 13.5px; font-weight: 600;
}

/* ── How it works ──────────────────────────────────────────────────────── */
/* padding-top/bottom, never the shorthand: .section and .wrap share elements
   ("wrap section"), and a "padding: 92px 0" quietly reset .wrap's 28px side
   gutter to zero — which put the text hard against the edge of the phone. */
.section { padding-top: 92px; padding-bottom: 92px; }
@media (max-width: 759px) {
  .section { padding-top: 56px; padding-bottom: 56px; }
  .section-head { margin-bottom: 32px; }
}
.section-head { max-width: 620px; margin-bottom: 52px; }
.section-head h2 {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: 34px; font-weight: 400; line-height: 1.2; margin: 0 0 14px;
  letter-spacing: -0.02em;
}
.section-head p { font-size: 18px; color: var(--muted); margin: 0; }
/* Each line on its own, tighter leading than a wrapping paragraph would use
   because these are deliberate breaks rather than the text running out of
   room. */
.stack span { display: block; }
.stack { line-height: 1.08; }

/* The claim. Serif, emerald, with a gold rule under it — the one line on the
   page that is an argument rather than a description. */
.claimstrip {
  text-align: center;
  padding: clamp(40px, 6vw, 76px) 24px clamp(6px, 1vw, 12px);
}
.claim {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  /* Capitals. They need positive letterspacing where lowercase wanted
     negative — set tight, caps close up and stop being readable at a
     glance — and they read larger, so the size comes down a little. */
  text-transform: uppercase;
  font-size: clamp(19px, 2.9vw, 36px); line-height: 1.2; letter-spacing: 0.045em;
  color: var(--primary); margin: 0;
  padding-bottom: clamp(14px, 2vw, 22px);
  border-bottom: 3px solid var(--accent);
  display: inline-block;
}
/* The claim already provides the breathing space above the explanation. */
.claimstrip + section { padding-top: clamp(34px, 4.5vw, 62px); }

.steps { display: grid; gap: 0; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.step { padding: 28px 0; border-top: 2px solid var(--primary); }
@media (max-width: 759px) { .step { padding: 24px 0; } }
.step .n {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: 15px; color: var(--primary); letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 700; display: block; margin-bottom: 14px;
}
.step h3 { margin: 0 0 10px; font-size: 19px; letter-spacing: -0.01em; }
.step p { margin: 0; font-size: 16px; color: var(--muted); line-height: 1.6; }

/* ── Alternating image bands ───────────────────────────────────────────── */
.band { display: grid; gap: 40px; align-items: center; padding: 20px 0 76px; }
@media (min-width: 860px) {
  .band { grid-template-columns: 1fr 1fr; gap: 64px; }
  .band.flip .band-media { order: 2; }
}
/* aspect-ratio, not height:100%. A percentage height inside a grid cell whose
   own height comes from its content is circular, and browsers resolve it
   differently — here it collapsed the photograph to a strip and left a hole in
   the page the height of the text beside it. */
.band-media img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 20px; display: block;
}
@media (min-width: 860px) { .band-media img { aspect-ratio: 5 / 4; } }
.band-text h2 {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: 31px; font-weight: 400; line-height: 1.2; margin: 0 0 16px;
  letter-spacing: -0.02em;
}
.band-text p { font-size: 17px; color: var(--muted); margin: 0 0 14px; line-height: 1.65; }
.band-text p:last-child { margin-bottom: 0; }
.band-text strong { color: var(--text); font-weight: 600; }

/* ── Safety ────────────────────────────────────────────────────────────── */
.safety-section { background: var(--primary); color: #fff; padding: 84px 0; }
.safety-section h2 {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: 34px; font-weight: 400; margin: 0 0 16px; letter-spacing: -0.02em;
}
.safety-section .eyebrow { color: rgba(255,255,255,0.65); }
.safety-grid { display: grid; gap: 28px; margin-top: 44px; }
@media (min-width: 760px) { .safety-grid { grid-template-columns: repeat(3, 1fr); gap: 36px; } }
.safety-grid h3 { font-size: 17px; margin: 0 0 8px; }
.safety-grid p { font-size: 15.5px; margin: 0; color: rgba(255,255,255,0.8); line-height: 1.6; }
.safety-section .lede { font-size: 19px; color: rgba(255,255,255,0.9); margin: 0; max-width: 620px; }
.safety-note {
  margin-top: 44px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.22);
  font-size: 15px; color: rgba(255,255,255,0.8);
}
.safety-note a { color: #fff; }

/* Legal pages */
.doc { padding: 48px 0 24px; max-width: 720px; }
.doc h1 {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-weight: 400; letter-spacing: -0.02em;
}
.doc h1 { font-size: 30px; margin: 0 0 6px; letter-spacing: -0.4px; }
.doc .updated { color: var(--muted); font-size: 14px; margin: 0 0 36px; }
.doc section { margin-bottom: 30px; }
.doc h2 { font-size: 17px; margin: 0 0 8px; }
.doc p { margin: 0; color: #35392F; font-size: 16px; }

.contact-card {
  background: var(--card); border: 1.5px solid var(--border); border-radius: 18px;
  padding: 24px; margin: 24px 0;
}
.contact-card h2 { margin: 0 0 10px; font-size: 17px; }
.contact-card p { margin: 0 0 12px; font-size: 15.5px; color: var(--muted); }
.contact-card p:last-child { margin-bottom: 0; }
a { color: var(--primary); }

.urgent {
  background: #FFF4F6; border: 1.5px solid #F3D3DA; border-radius: 14px;
  padding: 16px 18px; font-size: 15px; margin: 24px 0;
}

footer {
  margin-top: 72px; border-top: 1px solid var(--border);
  padding: 28px 0 56px; color: var(--muted); font-size: 14px;
}
footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
footer a { color: var(--muted); text-decoration: none; margin-right: 18px; }
footer a:hover { color: var(--primary); }
/* The registered-company line sits under the links, on its own row. */
footer .legalline { flex-basis: 100%; font-size: 12.5px; line-height: 1.5; opacity: .85; }

/* ── Signup ───────────────────────────────────────────────────────────────
   The web does the first step only: name, email, password, date of birth.
   Everything after that — photos, the selfie check, preferences — happens in
   the app, and profiles.signup_complete stays false until it does, so an
   account made here cannot be matched with anybody in the meantime.
   That is not a shortcut: the selfie check is the thing that keeps the app
   honest, and it cannot be done properly in a desktop browser. */
.joinwrap {
  background: var(--primary); min-height: 72vh;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(28px, 5vw, 64px) 20px clamp(40px, 6vw, 80px);
}
.joincard {
  background: var(--cream); border-radius: 22px; width: min(100%, 460px);
  padding: clamp(24px, 4vw, 38px); box-shadow: 0 24px 60px rgba(8,26,20,0.3);
}
.joincard h1 {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-weight: 400; font-size: clamp(26px, 4vw, 34px); margin: 0 0 6px;
  letter-spacing: -0.02em;
}
.joincard .sub { color: var(--muted); font-size: 15px; margin: 0 0 24px; }
.field { margin-bottom: 16px; }
.field label {
  display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px;
}
.field input, .field select {
  width: 100%; font-size: 16px; /* 16px stops iOS zooming the page on focus */
  padding: 13px 14px; border-radius: 12px; border: 1.5px solid var(--border);
  background: #fff; color: var(--text); font-family: inherit;
}
.field input:focus, .field select:focus {
  outline: none; border-color: var(--primary);
}
.dob { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 8px; }
.hint { font-size: 12.5px; color: var(--muted); margin: 6px 0 0; }
.joinbtn {
  width: 100%; border: 0; border-radius: 99px; background: var(--primary);
  color: #fff; font-size: 16px; font-weight: 700; padding: 15px;
  font-family: inherit; cursor: pointer; margin-top: 6px;
}
.joinbtn[disabled] { opacity: 0.55; cursor: default; }
.joinerr {
  background: #FFF1F3; border: 1.5px solid #F3D3DA; color: #92243A;
  border-radius: 12px; padding: 11px 13px; font-size: 14px; margin-bottom: 16px;
}
.joinsmall { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 16px 0 0; }
.joinsmall a { color: var(--primary); }
/* The done panel */
.done { text-align: center; }
.done .tick {
  width: 56px; height: 56px; border-radius: 50%; background: var(--primary-light);
  color: var(--primary); font-size: 28px; line-height: 56px; margin: 0 auto 16px;
}
.storebtn {
  display: inline-block; width: 100%; text-align: center; margin-top: 8px;
  border-radius: 99px; background: var(--primary); color: #fff;
  padding: 15px; font-weight: 700; text-decoration: none;
}
.faq { padding-top: 40px; }
.faq details { border-bottom: 1px solid var(--border); padding: 4px 0; max-width: 760px; }
.faq summary {
  cursor: pointer; list-style: none; padding: 18px 0; font-size: 18px; font-weight: 700;
  display: flex; justify-content: space-between; gap: 18px; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 26px; font-weight: 400; color: var(--primary); line-height: 1; }
.faq details[open] summary::after { content: '\2212'; }
.faq details p { margin: 0 0 20px; color: var(--muted); font-size: 16.5px; line-height: 1.65; max-width: 640px; }
.faq details a { color: var(--primary); }
.feedbackcard {
  margin-top: 44px; max-width: 760px; background: var(--primary); color: #fff;
  border-radius: 22px; padding: 30px 32px;
}
.feedbackcard h3 { margin: 0 0 6px; font-size: 22px; }
.feedbackcard p { margin: 0 0 18px; color: rgba(255,255,255,0.85); }
.feedbackbtn {
  display: inline-block; background: #fff; color: var(--primary); font-weight: 800;
  padding: 13px 24px; border-radius: 99px; text-decoration: none;
}
.feedback {
  position: fixed; right: 18px; bottom: 18px; z-index: 30; background: var(--primary); color: #fff;
  font-weight: 700; font-size: 14.5px; padding: 12px 18px; border-radius: 99px; text-decoration: none;
  box-shadow: 0 6px 20px rgba(0,0,0,0.22);
}
.feedback:hover { filter: brightness(1.1); }
/* Feedback & support form, on the support page. */
.msgcard {
  background: #fff; border: 1px solid var(--border); border-radius: 18px;
  padding: clamp(20px, 4vw, 30px); margin: 0 0 22px; scroll-margin-top: 90px;
}
.msgcard h2 { margin: 0 0 6px; font-size: 20px; }
.msgcard .sub { margin: 0 0 20px; color: var(--muted); font-size: 15.5px; }
.msgcard .field textarea, .msgcard .field select, .msgcard .field input {
  width: 100%; font-size: 16px; padding: 13px 14px; border-radius: 12px;
  border: 1.5px solid var(--border); background: #fff; color: var(--text); font-family: inherit;
}
.msgcard .field textarea { min-height: 150px; resize: vertical; line-height: 1.5; }
.msgcard .field textarea:focus, .msgcard .field select:focus, .msgcard .field input:focus { outline: none; border-color: var(--primary); }
.msgcard .hint { font-size: 12.5px; color: var(--muted); margin: 6px 0 0; }
.msgcard .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.msgcard .done { padding: 8px 0; }
.msgcard .done h2 { margin-bottom: 8px; }

@media (max-width: 640px) { .feedback { right: 12px; bottom: 12px; padding: 10px 15px; font-size: 13.5px; } }
.dmsteps { text-align: left; margin: 18px auto 22px; padding-left: 22px; max-width: 420px; line-height: 1.55; color: var(--text); }
.dmsteps li { margin-bottom: 10px; }
.dmcode { font: 700 22px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 2px; color: var(--primary); margin: 4px 0 0; user-select: all; }
.storebtn.ghost {
  background: none; color: var(--primary);
  border: 1.5px solid var(--border); margin-top: 10px;
}

/* ── Phones ────────────────────────────────────────────────────────────────
   Last in the file on purpose. These override rules of equal specificity
   above them, and a media query placed earlier simply loses — which is why
   the cards stayed desktop-sized on a phone the first time round. */
@media (max-width: 620px) {
  .hero { padding: clamp(26px, 6vw, 44px) 18px clamp(22px, 5vw, 38px); }
  .hero .mark img { width: 66vw; }
  .slogan { letter-spacing: 0.1em; }

  /* Four place names only fit across a phone with the tracking pulled in; at
     0.18em they broke 3 + 1, which reads as an accident. */
  .hero .cities { width: 100%; justify-content: center; gap: 8px; }
  .hero .city { font-size: 10.5px; letter-spacing: 0.06em; }

  /* One card at a time, wide enough to read its answers on. */
  .card { width: clamp(210px, 62vw, 260px); }
  .track { grid-auto-columns: clamp(210px, 62vw, 260px); gap: 12px; }

  .claimstrip { padding: clamp(26px, 7vw, 44px) 14px 2px; }
  /* One line, always. At 20px the sentence wanted 426px and had 354, so it
     is sized from the viewport instead: the text measures about 21x its own
     font-size, and 4.2vw keeps that inside the screen from 320px up. The
     tracking comes in a little to buy the last few pixels. */
  .claim {
    font-size: min(4.2vw, 22px); letter-spacing: 0.02em; white-space: nowrap;
    padding-bottom: 10px;
  }
  .section-head h2 { font-size: clamp(26px, 7.2vw, 33px); }
  .section-head p { font-size: 16px; }

  /* The band headings are short statements — "Photos come after the match."
     — and a short statement broken over two lines reads as a mistake. Sized
     to hold one line at this width. */
  .band-text h2 { font-size: clamp(19px, 5.4vw, 23px); line-height: 1.15; }
  .band-text p { font-size: 15.5px; }
  .safety-section h2 { font-size: clamp(23px, 6.4vw, 28px); }
  .safety-section .lede { font-size: 17px; }

  /* Vertical padding tuned for a desktop column leaves visible slabs of
     empty colour on a phone: 84px of green above the safety band, another
     76px under the band before it, and 56px of white below the footer. */
  .band { padding-bottom: clamp(30px, 7vw, 44px); }
  .safety-section { padding: clamp(38px, 8vw, 52px) 0 clamp(40px, 8vw, 54px); }
  .safety-grid { gap: 22px; margin-top: 28px; }
  .safety-note { margin-top: 28px; padding-top: 18px; }
  .section { padding-top: clamp(34px, 7vw, 48px); padding-bottom: clamp(34px, 7vw, 48px); }

  footer { padding: 22px 0 26px; }
  footer .wrap { flex-direction: column; gap: 10px; text-align: center; }
  /* Footer links are the only navigation down here, so they get a real tap
     target rather than 17px of text. */
  footer a { margin: 0 6px; padding: 10px 6px; display: inline-block; }
}

/* Below this the four place names cannot share a line, so they go two and
   two rather than being left to wrap 3 + 1, which reads as an accident. */
/* Five nav items on the narrowest phones still in use. Below this the row
   was 29px wider than the screen and pushed the whole page sideways. */
@media (max-width: 355px) {
  header nav a { font-size: 11.5px; padding: 12px 4px; letter-spacing: -0.01em; }
}

@media (max-width: 310px) {
  .hero .cities {
    display: grid; grid-template-columns: 1fr 1fr; justify-items: center;
    gap: 8px 10px;
  }
}