/* Perch public site, ported from the approved E6 stylesheet (engine/webapp.py _BASE,
   design system reference/perch-design-system.md v1.1). Tokens and rules verbatim; rules the
   static pages do not use (chips, selects, textareas, pending state) are omitted, not changed.
   No scripts anywhere on this site; nothing loads from any third party. */
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 300 700;
             font-display: swap;
             src: url(/fonts/source-serif-4-var.woff2) format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 300 700;
             font-display: swap;
             src: url(/fonts/source-serif-4-italic-var.woff2) format("woff2"); }
:root { --sand:#EAE6DB; --sheet:#FEFDFA; --ink:#22333B; --mist:#6E7B7A; --sea:#17546E;
        --dawn:#E4C9A0; --edge:#D9D3C4; --ctrl-edge:#CFC8B7; }
* { box-sizing: border-box; }
body { font-family: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
       font-size: 1.09rem;
       max-width: 36rem; margin: 0 auto; padding: 3rem 1.25rem 0;
       color: var(--ink); background: var(--sand); line-height: 1.6; }
header { margin-bottom: 2.2rem; }
h1 { font-size: 1.75em; font-weight: 550; letter-spacing: 0.015em; margin: 0;
     line-height: 1.15; }
.tagline { color: var(--mist); margin: 0 0 1.2rem; font-style: italic;
           font-size: 1.12em; letter-spacing: 0.01em; }
.vista { border-radius: 10px; overflow: hidden; line-height: 0;
         border: 1px solid var(--edge); }
.vista svg { width: 100%; height: auto; display: block; }
.card { background: var(--sheet); border: 1px solid var(--edge); border-radius: 8px;
        padding: 1.5rem 1.5rem 1.6rem; margin: 1.1rem 0;
        box-shadow: 0 1px 3px rgba(74,68,54,0.06); }
label { display: block; margin-top: 1.35rem; font-weight: 500; font-size: 1.05em; }
.card label:first-child, .card .sub:first-child { margin-top: 0; }
.sub { display: block; margin-top: 1rem; font-weight: 500; font-size: 0.75rem;
       letter-spacing: 0.06em; text-transform: uppercase; color: #6E7767;
       font-family: -apple-system, "Segoe UI", "Helvetica Neue", sans-serif; }
label.sub { font-size: 0.75rem; }
input { width: 100%; padding: 0.65rem 0.75rem; margin-top: 0.4rem;
       font-family: -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
       font-size: 0.95rem; color: var(--ink); background: white;
       border: 1px solid var(--ctrl-edge); border-radius: 6px; height: 2.75rem; }
input::placeholder { color: #9AA0A4; }
input:focus, button:focus-visible {
       outline: 2px solid var(--sea); outline-offset: 1px; border-color: var(--sea); }
/* Preview form (this site only): the signup is shown, not live, and the whole fieldset is
   disabled. Browsers gray disabled controls toward illegible; these keep the sheet material
   legible while the disabled state stays honest (nothing here accepts input). */
fieldset { border: 0; padding: 0; min-width: 0; margin: 0; }
fieldset[disabled] input { background: #FBFAF6; cursor: not-allowed; }
button { margin-top: 1.4rem; padding: 0.75rem 1.6rem; font-size: 0.98rem; font-weight: 550;
         cursor: pointer; background: var(--sea); color: white; border: none;
         border-radius: 6px; font-family: -apple-system, "Segoe UI", sans-serif;
         letter-spacing: 0.01em; box-shadow: 0 1px 2px rgba(23,84,110,0.25); }
button:disabled { opacity: 0.6; cursor: not-allowed; }
/* Site-local deviation (Hung, Aug 4): the product's .brief runs 1.05em as the payoff on a
   working page; here three cards stack and the size difference read as inconsistency. */
.brief { background: var(--sheet); border: 1px solid var(--edge); padding: 1.4rem 1.5rem;
         margin: 1.5rem 0; border-radius: 8px;
         box-shadow: 0 1px 3px rgba(74,68,54,0.06); }
.brief p { margin: 0; }
.privacy, .muted, .consent { color: #5F6A66; font-size: 0.85rem;
         font-family: -apple-system, "Segoe UI", "Helvetica Neue", sans-serif; }
.consent { margin: 0.45rem 0 0; line-height: 1.5; }
.consent a { color: var(--sea); }
.sig { font-style: italic; margin-top: 1.4rem; font-size: 1.1em; }
/* Page heading on Terms/Privacy (Hung, Aug 4: bold): serif, at the masthead's weight, which
   is the page's weight ceiling (nothing outbolds the wordmark). */
.pagehead { margin: 0 0 0.9rem; font-weight: 550; font-size: 1.05em; }
p { margin: 0.9rem 0; }
a { color: var(--sea); }
footer { border-top: 1px solid var(--edge); margin-top: 2.6rem; padding: 1.2rem 0 2.6rem;
         display: flex; align-items: baseline; gap: 0.6rem; }
footer .fabout { color: var(--sea); font-size: 0.85rem;
         font-family: -apple-system, "Segoe UI", "Helvetica Neue", sans-serif; }
@media (max-width: 480px) {
  body { font-size: 1.16rem; padding: 2rem 10px 0; }
  /* .brief included (Hung's catch, Aug 4): the gutter tightening originally named .card only,
     so the brief box kept desktop padding and its text sat ~12px right of every other box. */
  .card, .brief { padding: 16px 12px 18px; }
}