/*
  Castlebury Ventures — the whole stylesheet. Phase 65 §5.1.

  ## What this is

  Four static pages, one stylesheet, no build step and no framework. The site
  is the company page, the Nom Nom landing placeholder, the privacy policy and
  the account-deletion instructions — the last two being what the Play Console
  requires a URL for.

  ## It follows the app's design law, with one deliberate departure

  Same palette as the theme branch (stone, phase 63 §4), same hairlines, same
  small corners, and no shadow anywhere except the card idiom. The departure:
  the app bundles Inter as two TTFs and this site does NOT ship font binaries.
  A landing placeholder is not worth two 300KB downloads on a phone, and the
  system stack below is what Inter is a refinement of rather than a departure
  from. When there is a real landing page, that is the moment to reconsider.

  ## Mobile first

  One column, 100% width, a max-width that only engages on a wide screen. There
  is no breakpoint doing layout work — the layout is the same everywhere and
  the container simply stops growing.
*/

:root {
  /* Stone, light. The exact values from the theme branch's tokens. */
  --bg: #FAFAF9;
  --surface: #FFFFFF;
  --fill: #F5F5F4;
  --border: #E7E5E4;
  --text: #0C0A09;
  --text-muted: #57534D;
  --accent: #1C1917;
  --accent-text: #FAFAF9;

  --radius-sm: 6px;
  --radius-md: 8px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* stone-900 for the page, stone-800 for a card: a warm grey you can see. */
    --bg: #1C1917;
    --surface: #292524;
    --fill: #44403B;
    --border: rgba(255, 255, 255, 0.12);
    --text: #FAFAF9;
    --text-muted: #B2AEA8;
    --accent: #E7E5E4;
    --accent-text: #1C1917;
  }
}

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

html {
  /*
    No font binaries. `-apple-system` and `Segoe UI` are what Inter was drawn
    to sit alongside; on Android this resolves to Roboto, which is the face the
    app falls back to anyway when Inter fails to load.
  */
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    sans-serif;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
}

main {
  max-width: 40rem;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) var(--space-8);
}

header {
  padding-bottom: var(--space-5);
}

h1 {
  font-size: 1.5rem;
  line-height: 1.3;
  margin: 0 0 var(--space-2);
  font-weight: 600;
}

h2 {
  font-size: 1.125rem;
  line-height: 1.4;
  margin: var(--space-6) 0 var(--space-2);
  font-weight: 600;
}

h3 {
  font-size: 1rem;
  margin: var(--space-5) 0 var(--space-1);
  font-weight: 600;
}

p,
li {
  margin: 0 0 var(--space-3);
}

ul,
ol {
  padding-left: var(--space-5);
  margin: 0 0 var(--space-3);
}

a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--text-muted);
}

.muted {
  color: var(--text-muted);
  font-size: 0.875rem;
}

/*
  The card idiom, and the only raised surface on the site: `surface` on `bg`,
  one hairline, small corners. No shadow — the app's own cards get one from
  `elevated()`, and a static page has nothing to elevate above.
*/
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin: var(--space-4) 0;
}

/* Steps that have to be followed in order, numbered so they read as steps. */
.steps {
  counter-reset: step;
  list-style: none;
  padding-left: 0;
}

.steps li {
  counter-increment: step;
  padding-left: var(--space-6);
  position: relative;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-sm);
  background: var(--fill);
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.5rem;
  text-align: center;
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-6) 0;
}

footer {
  border-top: 1px solid var(--border);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  color: var(--text-muted);
  font-size: 0.875rem;
}

/* Long email addresses and URLs must not push the page sideways on a phone. */
.break {
  overflow-wrap: anywhere;
}