/* The join, privacy, support and 404 pages, in the app's look (Hilltop Flat, Ridge green;
   restyled Oct 25 to match the home page): Figtree, white cards on the pale ground, one green
   action, black for the nav, white with an outline for the rest. Light and dark follow the device.
   The nav, footer and buttons are the same as home.css. */

@font-face { font-family: "Figtree"; src: url("/assets/fonts/figtree.ttf") format("truetype"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/assets/fonts/instrument-serif-italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --ground: #F6F7F9; --surface: #FFFFFF; --line: #E7E9EE; --line-strong: #D9DCE3; --track: #E6E8EE;
  --ink: #121214; --ink2: #5A5E67; --ink3: #6A6E78;
  --primary: #1F5D4C; --primary-pressed: #184A3D; --on-primary: #FFFFFF; --primary-tint: #EAF4F0;
  --wordmark: #1F5D4C; /* the logo for now: the word "Hilltop", Ridge green on light, white on dark */
  --nav: #121214; --on-nav: #FFFFFF;
  --card-shadow: 0 1px 2px rgba(18,22,36,.04), 0 10px 30px rgba(18,22,36,.06);
  --font: "Figtree", -apple-system, "Segoe UI", system-ui, sans-serif;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --nav-h: 68px;
  --gutter-l: max(20px, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, env(safe-area-inset-right, 0px));
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #000000; --surface: #1C1C1E; --line: #38383A; --line-strong: #48484A; --track: #2C2C2E;
    --ink: #F4F5F7; --ink2: #AEB0B7; --ink3: #9496A0;
    --primary: #7FD1B5; --primary-pressed: #A6D3C2; --on-primary: #0B2520; --primary-tint: #15302A;
    --wordmark: #FFFFFF;
    --nav: #F4F5F7; --on-nav: #121214;
    --card-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 17px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--ground); }
img { max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, figure, ol, ul { margin: 0; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 999px; }
.serif { font-family: var(--serif); font-style: italic; font-weight: 400; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--ink2); }
.link { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* Buttons: one green action, black for the nav, white with an outline for the rest */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 24px; border-radius: 999px; border: 0; cursor: pointer;
  font: 600 16px var(--font); color: inherit;
  transition: transform .12s ease-out, background-color .15s ease, box-shadow .15s ease;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--primary); color: var(--on-primary); }
.btn.primary:hover { background: var(--primary-pressed); }
.btn.outline { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn.outline:hover { box-shadow: inset 0 0 0 1px var(--ink3); }
.btn.black { background: var(--nav); color: var(--on-nav); }
.btn.off { background: var(--track); color: var(--ink2); cursor: default; }
.btn.off:active { transform: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* Nav: the wordmark, three links, Coming soon (as on the home page) */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 20; padding-top: env(safe-area-inset-top, 0px); padding-left: var(--gutter-l); padding-right: var(--gutter-r); background: var(--ground); }
.nav-in { max-width: 1160px; margin: 0 auto; height: var(--nav-h); display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; letter-spacing: -0.01em; color: var(--wordmark); }
/* The Twin hills mark beside the word (Oct 31), the same shape as the app's. */
.brand-mark { width: 30px; height: 18px; flex: none; }
.nav-links { margin-left: auto; display: flex; gap: 24px; font-size: 15px; font-weight: 500; color: var(--ink2); }
.nav-links a:hover, .nav-links a[aria-current] { color: var(--ink); }
.nav-cta { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px; background: var(--nav); color: var(--on-nav); font-weight: 600; font-size: 15px; transition: transform .12s ease-out; }
.nav-cta:active { transform: scale(.97); }

/* The page: one reading column under the nav */
.page {
  max-width: 760px; margin: 0 auto;
  padding: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 40px) var(--gutter-r) 112px var(--gutter-l);
  display: grid; gap: 40px;
}
.page-head { display: grid; gap: 14px; }
.page-head h1 { font-weight: 700; font-size: clamp(38px, 6vw, 60px); line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; }
.page-head .lede { font-size: 19px; color: var(--ink2); max-width: 34em; text-wrap: pretty; }
.section { display: grid; gap: 16px; }
.section h2 { font-weight: 700; font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; }
.section > p { color: var(--ink2); max-width: 38em; }

/* Cards hold content: white on the ground, round corners, the soft card shadow */
.card { background: var(--surface); border-radius: 24px; box-shadow: var(--card-shadow); padding: 24px; display: grid; gap: 12px; }
.card h2 { font-weight: 700; font-size: 20px; line-height: 1.2; letter-spacing: -0.01em; }
.card p { color: var(--ink2); }
.tag { justify-self: start; display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 10px; background: var(--track); color: var(--ink2); font-size: 13px; font-weight: 600; }

/* A card of rows: a label and what it means, hairlines between */
.card.rows { padding: 0; gap: 0; }
.rows .row { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 16px; padding: 18px 24px; }
.rows .row + .row { border-top: 1px solid var(--line); }
.rows .row b { font-weight: 600; }
.rows .row span { color: var(--ink2); }

/* A plain list with soft dots */
.dots { list-style: none; padding: 0; display: grid; gap: 10px; color: var(--ink2); }
.dots li { position: relative; padding-left: 18px; }
.dots li::before { content: ""; position: absolute; left: 0; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--ink3); }

/* Terms and Privacy (Oct 26): long text in short sections, a contents card to jump around */
.updated { font-size: 15px; color: var(--ink3); }
.toc ol { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
.toc a { color: var(--ink2); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.toc a:hover { color: var(--ink); text-decoration-color: currentColor; }
.section, .section h3 { scroll-margin-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 24px); }
.section h3 { font-weight: 600; font-size: 19px; line-height: 1.3; margin-top: 8px; }
.section > .dots { max-width: 38em; }
.section strong, .dots strong { color: var(--ink); font-weight: 600; }

/* Questions that open (as on the home page) */
.faq-list { display: grid; gap: 10px; }
.faq-list details { background: var(--surface); border-radius: 18px; padding: 6px 24px; box-shadow: var(--card-shadow); }
.faq-list summary { list-style: none; cursor: pointer; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-weight: 600; font-size: 18px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary svg { width: 20px; height: 20px; flex: none; color: var(--ink3); transition: transform .2s ease; }
.faq-list details[open] summary svg { transform: rotate(180deg); }
.faq-list summary:focus-visible { outline-offset: 6px; border-radius: 8px; }
.faq-list details p { padding-bottom: 18px; color: var(--ink2); max-width: 40em; }

/* The hill photo, framed like the home page's ridge */
.photo-card { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 21 / 9; background: #1C1C1E; }
.photo-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--line); pointer-events: none; }

/* The invite: the code in six cells, Open in Hilltop, then how to join */
.invite { justify-items: center; text-align: center; padding: 36px 28px; gap: 16px; }
.invite h1 { font-weight: 700; font-size: clamp(28px, 4.6vw, 40px); line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; }
.invite > p { max-width: 30em; text-wrap: pretty; }
.invite .btn-row { justify-content: center; }
.code-cells { position: relative; display: flex; gap: 8px; justify-content: center; margin: 4px 0; }
.code-cells .cell {
  width: 48px; height: 60px; border-radius: 14px; background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  display: grid; place-items: center; font: 700 26px var(--font); color: var(--ink); font-variant-numeric: tabular-nums;
  transition: box-shadow .15s ease, background-color .15s ease;
}
.code-cells.filled .cell { box-shadow: inset 0 0 0 2px var(--primary); background: var(--primary-tint); }
.code-cells input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; font-size: 16px; caret-color: transparent; cursor: text; }
.code-cells.focused .cell.active { box-shadow: inset 0 0 0 2px var(--ink); }
.steps { list-style: none; padding: 0; display: grid; gap: 12px; counter-reset: step; text-align: left; justify-self: stretch; max-width: 26em; margin: 8px auto 0; color: var(--ink2); }
.steps li { counter-increment: step; display: flex; gap: 12px; align-items: flex-start; }
.steps li::before { content: counter(step); flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--track); color: var(--ink); display: grid; place-items: center; font-size: 14px; font-weight: 700; margin-top: -1px; }
.invite form { display: grid; justify-items: center; gap: 16px; width: 100%; }

/* Footer, as on the home page */
.footer { max-width: 1160px; margin: 0 auto; padding: 32px var(--gutter-r) max(40px, env(safe-area-inset-bottom, 0px)) var(--gutter-l); display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; color: var(--ink2); font-size: 15px; }
.footer .brand { color: var(--wordmark); }
.footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-left: auto; }
.footer nav a:hover { color: var(--ink); }
.footer .credit { flex-basis: 100%; font-size: 14px; color: var(--ink3); }
.footer .credit a { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 860px) {
  :root { --nav-h: 60px; }
  .nav-links { display: none; }
  .nav-cta { margin-left: auto; }
  .footer nav { margin-left: 0; }
}
@media (max-width: 560px) {
  .page { gap: 32px; padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 24px); }
  .page-head .lede { font-size: 17px; }
  .rows .row { grid-template-columns: 1fr; gap: 4px; padding: 16px 20px; }
  .card { padding: 20px; }
  .toc ol { grid-template-columns: 1fr; }
  .invite { padding: 28px 20px; }
  .code-cells .cell { width: 44px; height: 56px; font-size: 24px; }
  .invite .btn-row { flex-direction: column; align-items: stretch; width: 100%; }
  .photo-card { aspect-ratio: 16 / 9; border-radius: 24px; }
  .faq-list details { padding: 6px 18px; }
  .faq-list summary { font-size: 17px; min-height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .nav-cta, .code-cells .cell, .faq-list summary svg { transition: none; }
}