/* The public homepage (home.html). Everything else comes from styles.css: fonts, tokens, .btn, focus ring.
   The first screen uses the logo's own colours, as the phone app's splash screen does. */
:root {
  --navy: #1e2a4a;
  --amber: #f5a93b;
  --coral: #e4624a;
  --cream: #fff3cf;
}

body.home { display: block; }
.home main { display: block; }
/* One centred container for the top bar and the first screen, so the logo lines up with the headline and
   Sign in with the phone. The sections below use .inner at the same width. */
.wrap, .inner { max-width: 1000px; margin: 0 auto; padding: 0 var(--gutter); }
.inner.narrow { max-width: 680px; }

/* Top bar */
.topbar { background: var(--navy); color: var(--cream); }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
/* The icon's navy square melts into the bar, so the houses are what shows: about the wordmark's cap height. */
.brand-link { display: inline-flex; align-items: center; gap: 4px; margin-left: -12px; color: var(--cream); text-decoration: none; font-weight: 700; font-size: 1.35rem; letter-spacing: -0.01em; min-height: 44px; }
.brand-link img { width: 56px; height: 56px; display: block; }
.topbar .signin { color: var(--cream); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }

/* First screen */
.hero { background: var(--navy); color: var(--cream); padding: 16px 0 44px; }
.hero-inner { display: grid; gap: 36px; align-items: center; }
.hero h1 { color: #fff; font-size: 2.2rem; line-height: 1.1; max-width: 12ch; }
.hero h1::after { content: ""; display: block; width: 56px; height: 5px; border-radius: 3px; background: var(--coral); margin-top: 18px; }
.hero .lead { margin-top: 20px; font-size: 1.1rem; line-height: 1.5; max-width: 34ch; color: var(--cream); }
.hero .cta { margin-top: 26px; }
.hero .small { margin-top: 16px; font-size: 0.95rem; color: var(--cream); }
.hero a:not(.btn) { color: #fff; }
.hero :focus-visible, .topbar :focus-visible { outline-color: var(--amber); }

.btn-amber { background: var(--amber); color: var(--navy); border-color: var(--amber); min-height: 54px; padding: 12px 26px; font-size: 1.05rem; }
.btn-amber:hover { filter: brightness(1.04); }

/* ---------- The phone: a small working copy of a group's Posts tab, built in HTML (not a screenshot). ----------
   The strip at the top is the switcher (home.js). Without JavaScript it shows The Kapoors. Each sample group has
   one colour everywhere: Book club coral, Cousins cream, The Kapoors amber, all with navy initials. */
.phone { --demo-cream: #ffebb0; margin: 0; justify-self: center; width: min(300px, 82vw); text-align: center; }
.device {
  aspect-ratio: 390 / 844; display: flex; flex-direction: column; text-align: left; overflow: hidden;
  border-radius: 38px; border: 9px solid #0d1322; background: var(--bg); color: var(--ink);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35); font-size: 13px; line-height: 1.4;
}
.d-strip { flex: none; display: flex; gap: 8px; align-items: center; padding: 12px 12px 10px; background: var(--paper); border-bottom: 1px solid var(--rule); }
.d-circle {
  appearance: none; border: 0; padding: 0; width: 38px; height: 38px; border-radius: 50%; flex: none; cursor: pointer;
  display: grid; place-items: center; font: inherit; font-weight: 700; font-size: 13px; color: var(--navy);
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 2px transparent;
  transition: box-shadow var(--motion-fade) var(--ease-out), transform var(--motion-press) var(--ease-out);
}
.d-circle:active { transform: scale(var(--press-scale)); }
.d-circle[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4.5px var(--moss); }
.d-circle:focus-visible { outline: 3px solid var(--moss); outline-offset: 4px; }
.c-amber { background: var(--amber); }
.c-coral { background: var(--coral); }
.c-cream { background: var(--demo-cream); }
.d-new { cursor: default; background: transparent; border: 1.5px dashed var(--ink-soft); color: var(--ink-soft); font-weight: 400; font-size: 18px; }
.d-panels { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.d-panels::-webkit-scrollbar { display: none; }
.d-panel { padding: 14px 14px 18px; }
.d-panel:not([hidden]) { animation: d-in var(--motion-list) var(--ease-out); }
@keyframes d-in { from { opacity: 0; } to { opacity: 1; } }
.d-title { display: flex; align-items: baseline; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.d-title b { font-size: 16px; }
.d-title span { color: var(--ink-soft); font-size: 12px; }
.d-post { padding: 14px 0 6px; border-bottom: 1px solid var(--rule); }
.d-post:last-child { border-bottom: 0; }
.d-meta b { font-weight: 700; }
.d-meta span { color: var(--ink-soft); font-size: 12px; margin-left: 4px; }
.d-text { margin-top: 4px; }
.d-media { display: grid; gap: 3px; margin-top: 8px; border-radius: 10px; overflow: hidden; }
.d-media img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; }
.d-media.n1 img { aspect-ratio: 4 / 3; }
.d-media.n2 { grid-template-columns: 1fr 1fr; }
.d-media.n3 { grid-template-columns: 1fr 1fr 1fr; }
.d-acts { display: flex; gap: 18px; margin-top: 6px; color: var(--ink-soft); font-size: 12px; font-weight: 600; }
.d-acts span { display: inline-flex; align-items: center; gap: 5px; }
.ic { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.d-tabbar { flex: none; display: flex; justify-content: space-around; padding: 7px 0 12px; background: var(--paper); border-top: 1px solid var(--rule); color: var(--ink-soft); font-size: 10.5px; font-weight: 600; }
.d-tabbar span { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.d-tabbar .ic { width: 20px; height: 20px; }
.d-tabbar .on { color: var(--moss); }
.hint { margin-top: 14px; font-size: 0.95rem; font-weight: 600; color: var(--cream); }
/* A small hello from the other circles, twice, the first time the phone is in view, so people notice they can tap. */
@keyframes d-hello { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-5px); } }
.device.hello .d-circle[aria-pressed="false"] { animation: d-hello 600ms var(--ease-in-out) 2; }
.device.hello .d-circle[aria-pressed="false"] + .d-circle[aria-pressed="false"] { animation-delay: 150ms; }
@media (prefers-reduced-motion: reduce) {
  .d-circle { transition: none; }
  .d-panel:not([hidden]), .device.hello .d-circle { animation: none; }
}

/* Three points */
.points { padding: 48px 0 8px; }
.three { display: grid; gap: 28px; }
.three article { padding: 22px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--rule); }
.three h2 { font-size: 1.2rem; }
.three p, .plain p, .hero .lead { text-wrap: pretty; }
.three p { margin-top: 10px; color: var(--ink-soft); line-height: 1.5; }

/* Plain sections */
.plain { padding: 44px 0 0; }
.plain h2 { font-size: 1.5rem; }
.plain p { margin-top: 12px; line-height: 1.55; font-size: 1.05rem; }
/* Same width and left edge as the feature cards; lines kept under about 70 characters. */
.plain p, .closing .then { max-width: 58ch; }
.why .inner > * { max-width: 58ch; }
.why { padding-top: 48px; }
.why .inner { padding-top: 0; }
.why .inner::before { content: ""; display: block; border-top: 1px solid var(--rule); margin-bottom: 40px; max-width: none; }

/* Closing */
.closing { padding: 56px 0 72px; }
.closing h2 { font-size: 1.6rem; }
.closing .cta { margin-top: 22px; max-width: none; }
/* Plain text under the button, never a link: what happens after you start. */
.closing .then { margin-top: 12px; font-size: 0.95rem; color: var(--ink-soft); }
/* Option B, to compare: the closing section centred on its own. */
.closing.centred { text-align: center; }
.closing.centred .then { margin-left: auto; margin-right: auto; }
.closing.centred .cta { display: flex; justify-content: center; }
.closing .btn-amber { background: var(--navy); color: #fff; border-color: var(--navy); }
@media (prefers-color-scheme: dark) {
  .closing .btn-amber { background: var(--amber); color: var(--navy); border-color: var(--amber); }
}

/* Laptop: headline and phone side by side, centred against each other, the whole phone in the first screen.
   The phone is sized from the window height (top bar 72px, hero padding, hint), never cropped. */
@media (min-width: 900px) {
  .hero { padding: 24px 0 40px; }
  .hero-inner { grid-template-columns: minmax(0, 1fr) auto; gap: 80px; min-height: calc(100svh - 72px - 64px); }
  .hero h1 { font-size: 3.5rem; }
  .hero .lead { font-size: 1.25rem; max-width: 34ch; }
  .hero-text { max-width: 540px; }
  .phone { width: clamp(250px, calc((100svh - 72px - 64px - 44px) * 390 / 844), 340px); }
  .three { grid-template-columns: repeat(3, 1fr); }
  .points { padding-top: 64px; }
  .plain { padding-top: 56px; }
  .closing { padding: 72px 0 96px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}