/* The website's Terms, Privacy, Contact and Support, on the same paper as the
   app.

   These four pages still carried the cocoa palette the app was built in
   before the rebuild - a near-black ground and a gold rule - so somebody who
   tapped through from a pale, white-carded app landed somewhere that looked
   like a different company. Apple requires these to be reachable without the
   app, which means they are often the first BYTT page a stranger sees.

   Light by default, because the app is light by default. The words are
   untouched; this is the paper they are printed on. */

:root {
  color-scheme: light;
  --page:      #FDF3F3;
  --card:      #FFFFFF;
  --ink:       #14121A;
  --dim:       #4A4653;
  --faint:     #64606E;
  --line:      rgba(20, 18, 26, .10);
  --brand:     linear-gradient(97deg, #C2450F 0%, #C01F55 100%);
  --brand-flat:#C2450F;
  --ring:      rgba(194, 69, 15, .18);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  line-height: 1.62;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* The pale rings the app drifts behind everything, at rest. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60vw 60vw at 82% -8%, rgba(240, 120, 90, .12), transparent 62%),
    radial-gradient(52vw 52vw at -12% 92%, rgba(236, 63, 110, .10), transparent 60%);
}

.wrap { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; padding: 26px 22px 90px; }

.brandbar { margin: 0 0 26px; }

h1 {
  font-size: clamp(27px, 7vw, 33px);
  line-height: 1.12;
  letter-spacing: -.02em;
  margin: 30px 0 6px;
  font-weight: 800;
}
.updated { color: var(--faint); font-size: 13px; margin: 0 0 26px; }

/* Each clause is a card, the way every other list in the app is a card. */
section {
  background: var(--card);
  border: 0;
  border-radius: 18px;
  padding: 18px 19px 20px;
  margin-bottom: 12px;
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 0 0 1px var(--line), 0 4px 14px rgba(150, 90, 95, .07);
}
h2 {
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: .005em;
  margin: 0 0 8px;
  background: var(--brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
p { margin: 0; color: var(--dim); font-size: 15px; }
p + p { margin-top: 10px; }

a { color: var(--brand-flat); text-decoration-color: var(--ring); text-underline-offset: 2px; }
a:hover { text-decoration-color: currentColor; }

footer { margin-top: 32px; color: var(--faint); font-size: 13px; }
footer a { margin-right: 14px; }

/* ---------- the contact and support forms ---------- */
.cform { display: grid; gap: 14px; margin-top: 4px; }
.cform label { display: block; font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.cform input, .cform select, .cform textarea {
  width: 100%;
  font: 400 16px/1.4 inherit;
  color: var(--ink);
  background: var(--page);
  border: 0;
  border-radius: 14px;
  padding: 13px 14px;
  box-shadow: inset 0 0 0 1.4px var(--line);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.cform input:focus, .cform select:focus, .cform textarea:focus {
  box-shadow: inset 0 0 0 2px var(--brand-flat);
}
.cform textarea { min-height: 150px; resize: vertical; }

.cbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; min-height: 54px; padding: 15px 20px;
  border: 0; border-radius: 99px; cursor: pointer;
  font: 700 17px/1 inherit; color: #fff;
  background: linear-gradient(97deg, #E8661E 0%, #EC503F 52%, #E63578 100%);
  box-shadow: 0 8px 20px rgba(230, 80, 63, .28);
}
.cbtn:disabled { opacity: .55; box-shadow: none; cursor: default; }
.cnote { color: var(--faint); font-size: 13px; margin-top: 12px; }

/* ---------- the mark at the top ---------- */
.brandbar .bl-name, .brandbar .bl-tag { color: var(--ink); }
.brandbar .bl-tag { color: var(--faint); }

/* These pages are the brand, not a preference. They were following the
   phone's dark setting, which is why they came out near-black on a device set
   to dark and pink on every machine I checked them from. The app they belong
   to is light; so are they, on any phone. */

/* brand.css was written for a near-black page, so its wordmark is a pale gold
   that all but vanishes on this one. Same mark, ink that suits the paper. */
.brandbar .bl-mono, .brandbar .bl-mono .bl-l {
  background: var(--brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.brandbar .bl-sweep { opacity: .22; }

/* A textarea does not inherit the page's font unless told to, so its
   placeholder was coming out in the browser's monospace default. */
.cform input, .cform select, .cform textarea {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
}
.cform ::placeholder { color: var(--faint); opacity: 1; }


/* ---------- the lockup, matched to the app ----------
   The site drew its own: the old folded-paper object with a cream-into-khaki
   face, and a wordmark in gold leaf ending in brown. The app stopped using
   both when the palette changed - it has an SVG mark with a cream card and
   orange pause bars, and the wordmark takes the brand gradient. Two drawings
   of one identity is one too many, so the markup here is now the app's
   compact lockup verbatim and these rules are its sizing.

   The numbers are the app's: 42px mark, 21px letters at -.9 tracking,
   11.5px name, 8px uppercase tagline at .085em. */
.brandbar .lockup.compact { display: flex; align-items: center; gap: 12px; }
.brandbar .bl-icon {
  /* The folded object is 54x42 at brand-sm and floats, so the slot leaves it
     room to move instead of clipping it - the same box the app gives it. */
  width: 56px; height: 46px; flex: none;
  display: grid; place-items: center; overflow: visible;
}
.brandbar .bl-icon .ob-mark { width: 100%; height: auto; display: block; }
.brandbar .lockup-text { min-width: 0; }

.brandbar .brandmark-sm { display: flex; gap: 1px; align-items: baseline; }
.brandbar .brandmark-sm span {
  font: 900 21px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
  letter-spacing: -.9px;
  /* The app's --grad-brand. Stated rather than referenced, because this
     stylesheet has its own token names and --brand here is the deeper pair
     the body copy uses. */
  background: linear-gradient(97deg, #FF9A3C 0%, #FB6A50 48%, #F0417C 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

.brandbar .bl-name.xs {
  display: block; margin-top: 1px;
  font: 700 11.5px/1.15 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
  color: var(--ink); white-space: nowrap;
}
.brandbar .bl-tag.xs {
  display: block; margin-top: 1px;
  font: 600 8px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
  letter-spacing: .085em; text-transform: uppercase;
  color: var(--faint); white-space: nowrap;
}