/* ============================================================================
   txtGod — site styles

   Self-contained: no CDN, no webfont fetch, no framework. Everything below is
   first-party, which is why the CSP can stay strict and the page has nothing to
   block on.

   Tokens are lifted from the app's own DesignTokens.swift so the site and the
   product are visibly the same object. Light and dark are both first-class
   because the app is.
   ============================================================================ */

:root {
  /* Palette — app DesignTokens.Palette, light */
  --paper:      #FAF6EF;
  --paper-deep: #F2EBDD;
  --surface:    #FFFFFF;
  --ink:        #2B2620;
  --ink-soft:   #6B6255;
  --gilt:       #B08423;
  --gilt-bright:#D6A94A;
  --divider:    #E9E1D3;
  --shadow-1: 0 1px 2px rgb(43 38 32 / .05), 0 4px 14px rgb(43 38 32 / .05);
  --shadow-2: 0 2px 6px rgb(43 38 32 / .07), 0 18px 50px rgb(43 38 32 / .10);
  --shadow-3: 0 30px 80px rgb(43 38 32 / .18);

  --measure: 36rem;
  --radius:  16px;
  --radius-lg: 26px;
  --ease: cubic-bezier(.22,.61,.36,1);

  /* Fluid type — no media queries needed for the display sizes */
  --step-hero: clamp(2.6rem, 1.4rem + 5.2vw, 5rem);
  --step-h2:   clamp(1.75rem, 1.2rem + 2.1vw, 2.7rem);
  --step-lede: clamp(1.06rem, 1rem + .45vw, 1.3rem);

  --serif: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:      #141210;
    --paper-deep: #100E0C;
    --surface:    #201D18;
    --ink:        #ECE6DA;
    --ink-soft:   #A79E90;
    --gilt:       #D6A94A;
    --gilt-bright:#EBC169;
    --divider:    #2E2A23;
    --shadow-1: 0 1px 2px rgb(0 0 0 / .4), 0 4px 14px rgb(0 0 0 / .3);
    --shadow-2: 0 2px 6px rgb(0 0 0 / .45), 0 18px 50px rgb(0 0 0 / .45);
    --shadow-3: 0 30px 80px rgb(0 0 0 / .6);
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.65 var(--sans);
  overflow-x: hidden;           /* nothing may scroll the page sideways */
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--gilt); }

.wrap { width: min(72rem, 100% - 2.5rem); margin-inline: auto; }
.narrow { width: min(46rem, 100% - 2.5rem); margin-inline: auto; }

/* ---------------------------------------------------------------- nav ---- */

.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color 250ms var(--ease), background 250ms var(--ease);
}
.nav.is-stuck { border-bottom-color: var(--divider); }
.nav__in { display: flex; align-items: center; gap: 1rem; padding: .8rem 0; }

.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.brand img { width: 34px; height: 34px; border-radius: 9px; box-shadow: var(--shadow-1); }
.brand span {
  font: 700 1.3rem/1 var(--serif);
  color: var(--ink);
  letter-spacing: -.02em;
}
.nav__links { margin-left: auto; display: flex; align-items: center; gap: 1.4rem; }
.nav__links a { color: var(--ink-soft); text-decoration: none; font-size: .95rem; }
.nav__links a:hover { color: var(--gilt); }
@media (max-width: 34rem) { .nav__links .hide-sm { display: none; } }

/* -------------------------------------------------------------- buttons -- */

.btn {
  --btn-bg: var(--gilt);
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .8rem 1.5rem;
  border-radius: 999px;
  background: var(--btn-bg);
  color: #fff;
  font: 600 1rem/1 var(--sans);
  text-decoration: none;
  border: 0;
  box-shadow: 0 1px 2px rgb(43 38 32 / .18), 0 8px 24px color-mix(in srgb, var(--gilt) 32%, transparent);
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), background 220ms var(--ease);
}
.btn:hover {
  transform: translateY(-2px);
  background: var(--gilt-bright);
  box-shadow: 0 2px 4px rgb(43 38 32 / .2), 0 14px 34px color-mix(in srgb, var(--gilt) 42%, transparent);
}
.btn:active { transform: translateY(0) scale(.985); }
.btn--ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--divider); box-shadow: none;
}
.btn--ghost:hover { background: var(--surface); color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-1); }

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

/* ----------------------------------------------------------------- hero -- */

.hero { position: relative; padding: clamp(3rem, 8vw, 7rem) 0 0; overflow: hidden; }

/* Warm light behind the hero. Decorative only — must never eat clicks. */
.hero::before {
  content: "";
  position: absolute; inset: -30% -20% auto; height: 70vmax;
  background: radial-gradient(45% 45% at 50% 40%,
              color-mix(in srgb, var(--gilt) 20%, transparent), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.hero > * { position: relative; z-index: 1; }

.hero__grid {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 62rem) { .hero__grid { grid-template-columns: 1.05fr .95fr; } }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font: 600 .82rem/1 var(--sans);
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--gilt);
  background: color-mix(in srgb, var(--gilt) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--gilt) 26%, transparent);
  padding: .5rem .85rem; border-radius: 999px;
  margin-bottom: 1.4rem;
}

h1 {
  font: 700 var(--step-hero)/1.03 var(--serif);
  letter-spacing: -.035em;
  margin: 0 0 1.2rem;
  text-wrap: balance;
}
h1 em {
  font-style: normal;
  background: linear-gradient(102deg, var(--gilt) 8%, var(--gilt-bright) 52%, var(--gilt) 88%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.lede {
  font-size: var(--step-lede);
  color: var(--ink-soft);
  max-width: var(--measure);
  margin: 0 0 2rem;
  text-wrap: pretty;
}

.cta-row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.cta-note { font-size: .88rem; color: var(--ink-soft); margin-top: 1.1rem; }

/* --------------------------------------------------------- phone frame -- */

.phone {
  --w: 300px;
  position: relative;
  width: var(--w);
  aspect-ratio: 1206 / 2622;
  margin-inline: auto;
  border-radius: calc(var(--w) * .155);
  padding: calc(var(--w) * .026);
  background: linear-gradient(160deg, #4a453d, #17150f 42%, #3a352d);
  box-shadow: var(--shadow-3), 0 0 0 1px rgb(0 0 0 / .35) inset;
}
.phone__screen {
  width: 100%; height: 100%;
  border-radius: calc(var(--w) * .13);
  overflow: hidden;
  background: var(--paper);
  position: relative;
}
.phone__screen img { width: 100%; height: 100%; object-fit: cover; }
/* Dynamic Island */
.phone::after {
  content: "";
  position: absolute; top: calc(var(--w) * .045); left: 50%;
  translate: -50% 0;
  width: calc(var(--w) * .28); height: calc(var(--w) * .075);
  background: #000; border-radius: 999px; z-index: 2;
}
/* Screen glare */
.phone__screen::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(112deg, rgb(255 255 255 / .16) 0 22%, transparent 42%);
  pointer-events: none;
}

.hero .phone { --w: clamp(250px, 30vw, 330px); }

.hero__stage { position: relative; display: grid; place-items: center; }
.hero__stage .phone { animation: float 7s ease-in-out infinite; }
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-1.2deg); }
  50%      { transform: translateY(-14px) rotate(-1.2deg); }
}

/* --------------------------------------------------------------- rails -- */

.marquee {
  margin-top: clamp(3rem, 7vw, 5.5rem);
  border-block: 1px solid var(--divider);
  background: color-mix(in srgb, var(--paper-deep) 60%, transparent);
  padding: .9rem 0;
  overflow: hidden;
}
.marquee__track {
  display: flex; gap: 3rem; width: max-content;
  animation: slide 38s linear infinite;
  font: 500 .92rem/1 var(--sans);
  color: var(--ink-soft);
  white-space: nowrap;
}
.marquee__track span { display: inline-flex; align-items: center; gap: .55rem; }
.marquee__track b { color: var(--gilt); font-weight: 700; }
@keyframes slide { to { transform: translateX(-50%); } }
.marquee:hover .marquee__track { animation-play-state: paused; }

/* ------------------------------------------------------------ sections -- */

section { padding: clamp(3.5rem, 9vw, 7rem) 0; }

.sec-head { max-width: var(--measure); margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.sec-head h2 {
  font: 700 var(--step-h2)/1.1 var(--serif);
  letter-spacing: -.025em; margin: .6rem 0 .8rem;
  text-wrap: balance;
}
.sec-head p { color: var(--ink-soft); font-size: var(--step-lede); margin: 0; text-wrap: pretty; }
.kicker {
  font: 600 .8rem/1 var(--sans); letter-spacing: .1em;
  text-transform: uppercase; color: var(--gilt);
}

/* Alternating feature rows */
.feature {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center; grid-template-columns: 1fr;
  padding-block: clamp(2rem, 5vw, 3.5rem);
}
@media (min-width: 58rem) {
  .feature { grid-template-columns: 1fr 1fr; }
  .feature:nth-child(even) .feature__text { order: 2; }
}
/* Smaller than the hero phone: at hero size the tall frame left a chasm of dead
   space beside comparatively short copy. */
.feature .phone { --w: clamp(210px, 22vw, 260px); }

.feature__text h3 {
  font: 700 clamp(1.4rem, 1.1rem + 1vw, 2rem)/1.15 var(--serif);
  letter-spacing: -.02em; margin: .5rem 0 .7rem;
}
.feature__text p { color: var(--ink-soft); max-width: 32rem; }
.feature ul { list-style: none; padding: 0; margin: 1.2rem 0 0; }
.feature li {
  position: relative; padding-left: 1.7rem; margin-bottom: .55rem;
  color: var(--ink-soft);
}
.feature li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--gilt);
}

/* -------------------------------------------------------------- privacy -- */

.privacy {
  background: var(--paper-deep);
  border-block: 1px solid var(--divider);
}
.privacy__grid {
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin-top: 2.5rem;
}
.card {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-1);
  transition: transform 250ms var(--ease), box-shadow 250ms var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.card h3 { margin: .9rem 0 .4rem; font: 700 1.05rem/1.3 var(--sans); }
.card p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.card .ico {
  width: 2.4rem; height: 2.4rem; border-radius: 11px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--gilt) 14%, transparent);
  color: var(--gilt);
}
.card .ico svg { width: 1.3rem; height: 1.3rem; }

/* ------------------------------------------------------------- gallery -- */

.gallery {
  display: flex; gap: 1.4rem; overflow-x: auto;
  padding: 1rem .2rem 2rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.gallery::-webkit-scrollbar { display: none; }
.gallery .shot { scroll-snap-align: center; flex: 0 0 auto; }
.gallery .phone { --w: 230px; }

/* ------------------------------------------------------------- closing -- */

.close-cta { text-align: center; }
.close-cta .icon-lg {
  width: 92px; height: 92px; border-radius: 22px;
  margin: 0 auto 1.6rem; box-shadow: var(--shadow-2);
}
.close-cta h2 { font: 700 var(--step-h2)/1.1 var(--serif); letter-spacing: -.025em; margin: 0 0 .8rem; }
.close-cta p { color: var(--ink-soft); max-width: 34rem; margin: 0 auto 2rem; font-size: var(--step-lede); }

/* -------------------------------------------------------------- footer -- */

.foot {
  border-top: 1px solid var(--divider);
  padding: 2.5rem 0 3.5rem;
  font-size: .92rem; color: var(--ink-soft);
}
.foot__in { display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; align-items: center; }
.foot a { color: var(--ink-soft); text-decoration: none; }
.foot a:hover { color: var(--gilt); text-decoration: underline; }
.foot__brand { display: flex; align-items: center; gap: .55rem; margin-right: auto; }
.foot__brand img { width: 26px; height: 26px; border-radius: 7px; }

/* ------------------------------------------------------- prose (legal) -- */

.prose h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); margin-bottom: .6rem; }
.prose h2 {
  font: 700 1.3rem/1.3 var(--serif); margin: 2.6rem 0 .7rem;
  letter-spacing: -.015em;
}
.prose h3 { font: 700 1.02rem/1.4 var(--sans); margin: 1.9rem 0 .4rem; }
.prose p, .prose li { color: var(--ink-soft); max-width: var(--measure); }
.prose strong { color: var(--ink); }
.prose ul { padding-left: 1.15rem; }
.prose li { margin-bottom: .45rem; }
.updated { font-size: .9rem; color: var(--ink-soft); margin-bottom: 2.4rem; }
.callout {
  border-left: 3px solid var(--gilt);
  background: color-mix(in srgb, var(--gilt) 7%, transparent);
  padding: 1rem 1.2rem; border-radius: 0 var(--radius) var(--radius) 0;
  margin: 1.8rem 0;
}
.callout p { margin: 0; color: var(--ink); }

/* --------------------------------------------------------- animations -- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }

/* Anyone who asks for less motion gets a static page — and, critically, one
   where nothing is left invisible because its reveal never fired. */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .hero__stage .phone { animation: none; }
  .marquee__track { animation: none; }
  .btn:hover, .card:hover { transform: none; }
}