/* Hex Quest site, in the app's title style (combined, 2026-11-04): Honey on gold, falling
   hexes, the brown honeycomb, the Hex Quest logo and the Figma title buttons.
   Token names follow the app (App/Theme/HoneyTheme.swift, App/Menu/TitleHoneycomb.swift). */
:root {
  --gold-top: #ddbc60;         /* HoneyColor.goldTop */
  --gold-bottom: #e59737;      /* HoneyColor.goldBottom */
  --cell-fill: #5f3d25;        /* HoneyColor.cellFill: the honeycomb */
  --logo-outline: #171005;     /* the logo's near-black outline */
  --icon-brown: #a65422;       /* HoneyColor.iconBrown */
  --ink: #2b1a0a;              /* body text on gold and cream */
  --ink-soft: #5a3a1c;
  /* TitleButton */
  --button-face: #edc96c;
  --button-border: #ecb95b;
  --button-lip: #9f7733;
  --button-highlight: #fef7c9;
  --radius-panel: 18px;        /* HoneyRadius.panel */
  --cream: #fff4d6;
  --font: system-ui, -apple-system, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  background: var(--gold-bottom);
}
body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(var(--gold-top), var(--gold-bottom) 100vh) no-repeat, var(--gold-bottom);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: var(--icon-brown); }
:focus-visible {
  outline: 3px solid var(--logo-outline);
  outline-offset: 4px;
}

/* The falling hexes: one fixed canvas behind the whole page, like the app's title. */
.falling-hexes {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
main, .footer { position: relative; z-index: 1; }

/* White caps lettering with a black edge and drop, like the app's tagline. Used for headings
   that are live text (the tagline and button label are rendered from Goldman Sans). */
.lettering {
  color: #fff;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-shadow:
    -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000,
    0 -1.5px 0 #000, 0 1.5px 0 #000, -1.5px 0 0 #000, 1.5px 0 0 #000,
    0 4px 0 #000,
    0 6px 8px rgba(0, 0, 0, 0.3);
}

/* ---------- Hero: the title screen ---------- */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.honeycomb {
  position: absolute;
  inset: 0 auto auto 0;
  pointer-events: none;
}
/* Logo, tagline, 40, button: one group, centred, as in the app. */
.hero__group {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3rem 1rem;
  text-align: center;
}
.hero h1 { margin: 0; }
.logo {
  width: min(370px, 86vw);
  height: auto;
}
.tagline {
  width: 217px;
  height: auto;
  margin: 0 0 40px;
}
.download {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.beta {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 0 #000, 0 0 6px rgba(0, 0, 0, 0.6);
}
/* On the gold (no honeycomb behind it), dark ink for contrast. */
.closing .beta {
  color: var(--ink);
  text-shadow: none;
}
.beta strong {
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---------- Title button (TitleButton, Figma 299:7128) ---------- */

.title-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 280px;
  padding: 18px 30px;
  border-radius: var(--radius-panel);
  overflow: hidden;        /* clips the glint; the shadows below still show */
  isolation: isolate;
  /* Flat face, three faint stripes of light (Figma's 105°, 108° and 113° gradients),
     a 3 px gold border inside the edge. */
  background:
    linear-gradient(105deg, transparent 74.99%, rgba(255, 255, 255, 0.2) 76.673%, rgba(255, 255, 255, 0.2) 90.14%, transparent 91.823%),
    linear-gradient(107.951deg, transparent 31.609%, rgba(255, 255, 255, 0.2) 34.506%, rgba(255, 255, 255, 0.2) 57.68%, transparent 60.576%),
    linear-gradient(113.369deg, transparent 12.571%, rgba(255, 255, 255, 0.2) 14.142%, rgba(255, 255, 255, 0.2) 26.71%, transparent 28.281%),
    var(--button-face);
  /* Border, then the hard lip 3 px down and the soft drop. */
  box-shadow:
    inset 0 0 0 3px var(--button-border),
    0 3px 0 var(--button-lip),
    0 6px 10px rgba(0, 0, 0, 0.5);
  text-decoration: none;
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1), filter 200ms ease;
}
/* The cream highlight along the top edge and down the right end (Figma's white vector,
   node 299:7125), over everything, in Hard Light. */
.title-button::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 13px;
  right: 3.3px;
  height: 30.5px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 263.697 30.5' preserveAspectRatio='none'%3E%3Cpath fill='%23FEF7C9' d='M249.5 0L3.49991 0C2.16657 0 0 0 0 2C0 4 10.5 3.5 13 3.5C88.6667 3.5 231 4 239 4C263.5 4 259 30.5 262 30.5C264.5 30.5 263.5 26 263.5 15C263.5 3 254.167 0 249.5 0Z'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  mix-blend-mode: hard-light;
  pointer-events: none;
  z-index: 2;
}
.title-button__label {
  position: relative;
  z-index: 1;
  width: 230px;
  height: auto;
}
.title-button:active {
  transform: scale(0.9);          /* HoneyMotion.pressScale */
  filter: brightness(0.94);       /* pressDarken -0.06 */
}

/* TitleAttention: every 3.2 s a springy 1.06 nudge and a glint across the face. */
.title-button--attention {
  animation: attention-nudge 3.2s 1.2s infinite;
}
.title-button--attention::before {
  content: "";
  position: absolute;
  top: -50%;
  left: 50%;
  width: 46px;
  height: 200%;
  margin-left: -23px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  mix-blend-mode: plus-lighter;
  transform: translateX(-260px) rotate(22deg);
  animation: attention-glint 3.2s 1.2s infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes attention-nudge {
  0%   { transform: scale(1); }
  5%   { transform: scale(1.06); }
  9%   { transform: scale(1.06); }
  14%  { transform: scale(0.985); }
  20%  { transform: scale(1); }
  100% { transform: scale(1); }
}
@keyframes attention-glint {
  0%   { transform: translateX(-260px) rotate(22deg); }
  1%   { transform: translateX(-260px) rotate(22deg); animation-timing-function: ease-in-out; }
  23%  { transform: translateX(260px) rotate(22deg); }
  100% { transform: translateX(260px) rotate(22deg); }
}

/* ---------- Screens ---------- */

.screens {
  padding: 4.5rem 0 3rem;
}
.section-title {
  margin: 0 auto 0.75rem;
  padding: 0 1.5rem;
  max-width: 40rem;
  text-align: center;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.15;
  text-wrap: balance;
}
.section-lede {
  margin: 0 auto 3rem;
  padding: 0 1.5rem;
  max-width: 34rem;
  text-align: center;
  font-weight: 600;
  color: var(--ink);
}
.shots {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 240px));
  gap: 2rem 1.75rem;
  justify-content: center;
  margin: 0;
  padding: 0.5rem 1.5rem 1.5rem;
  list-style: none;
}
@media (max-width: 1100px) {
  .shots { grid-template-columns: repeat(2, minmax(0, 260px)); }
}
/* Phones: one swipeable row, each shot snapping to the centre. */
@media (max-width: 600px) {
  .shots {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 68vw;
    justify-content: start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .shots::-webkit-scrollbar { display: none; }
}
.shot {
  scroll-snap-align: center;
  margin: 0;
}
.shot img {
  width: 100%;
  height: auto;
  aspect-ratio: 1320 / 2868;
  border-radius: 2.2rem;
  border: 6px solid var(--cell-fill);
  box-shadow: 0 4px 0 var(--button-lip), 0 14px 28px rgba(0, 0, 0, 0.35);
  background: var(--cell-fill);
}
.shot figcaption {
  padding: 1rem 0.25rem 0;
  text-align: center;
}
.shot h3 {
  margin: 0 0 0.2rem;
  font-size: 1.125rem;
  font-weight: 900;
  color: var(--logo-outline);
}
.shot p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--ink-soft);
  font-weight: 500;
}

/* ---------- Closing call to action ---------- */

.closing {
  padding: 2.5rem 1.5rem 5rem;
  text-align: center;
}
.closing .section-title { margin-bottom: 0.75rem; }
.promises {
  margin: 0 0 2.25rem;
  font-weight: 700;
  color: var(--ink);
}

/* ---------- Footer ---------- */

.footer {
  padding: 2rem 1.5rem 3rem;
  border-top: 2px solid rgba(95, 61, 37, 0.25);
  text-align: center;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}
.footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  margin-bottom: 0.75rem;
}
.footer a {
  color: var(--logo-outline);
  font-weight: 800;
  text-decoration: none;
}
.footer a:hover { text-decoration: underline; }
.footer p { margin: 0; }

/* ---------- Legal pages: a cream card on the gold ---------- */

.legal {
  max-width: 46rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
}
.legal__home {
  display: block;
  width: fit-content;
  margin: 0 auto 1.5rem;
}
.legal__home img { width: 190px; height: auto; }
.legal__card {
  padding: 2.25rem clamp(1.25rem, 5vw, 3rem) 2.5rem;
  border-radius: var(--radius-panel);
  background: var(--cream);
  box-shadow:
    inset 0 0 0 3px var(--button-border),
    0 3px 0 var(--button-lip),
    0 10px 24px rgba(0, 0, 0, 0.25);
}
.legal h1 {
  margin: 0 0 0.25rem;
  font-size: 2.25rem;
  font-weight: 900;
  line-height: 1.15;
  color: var(--logo-outline);
}
.legal .updated {
  margin: 0 0 2rem;
  color: var(--ink-soft);
  font-size: 0.9375rem;
}
.legal h2 {
  margin: 2.25rem 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--cell-fill);
}
.legal p, .legal li { color: var(--ink); }
.legal ul { padding-left: 1.25rem; }
.legal li { margin-bottom: 0.4rem; }
.legal table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0 1rem;
  font-size: 0.9375rem;
}
.legal th, .legal td {
  padding: 0.6rem 0.5rem;
  border-bottom: 1px solid rgba(95, 61, 37, 0.2);
  text-align: left;
  vertical-align: top;
}
.legal th { font-weight: 800; }

@media (prefers-reduced-motion: reduce) {
  .title-button { transition: none; }
  .title-button--attention, .title-button--attention::before { animation: none; }
  .title-button--attention::before { display: none; }
}