/* ═══════════════════════════════════════════════════════════════════════
   The Together Pages — stylesheet for every page except the homepage.

   COMPLETE, not an override layer. Pages that load this must NOT also load
   site.css, and must not carry page-local <style> blocks. One file, one type
   scale, one column. Identity values taken from the homepage's inline CSS.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --navy:#1E3A5F; --deep:#12325C; --orange:#F28A32; --sky:#9FBBD6;
  --cream:#FFF6E8; --mist:#DCE8EF; --frame:#E9EEF3; --disc:#D8DEE6;
  --body:#3C4A5C; --muted:#7A8798; --white:#FFFFFF;
  --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --hand:"Caveat","Hanken Grotesk",cursive;
  --col:38rem;               /* ONE column width, used by main and footer */
  --gap:1.15rem;             /* ONE paragraph rhythm */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{margin:0; background:var(--white); color:var(--body);
  font-family:var(--sans); font-size:1.0625rem; line-height:1.65;
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; min-height:100vh}

main{width:100%; max-width:var(--col); margin:0 auto;
  padding:3.5rem 1.5rem 3rem; flex:1}

/* ── TWO text sizes on the page, and no more ──────────────────────────
   1.1875rem  lede
   1.0625rem  everything else, differentiated by colour, not by size     */
p{margin:0 0 var(--gap); font-size:1.0625rem;
  text-align:justify; hyphens:auto; -webkit-hyphens:auto}
.lede{font-size:1.1875rem; line-height:1.55}
/* short lines never justify - they would only open gaps */
.cta, .btn-note{text-align:center; hyphens:manual}
.muted{color:var(--muted)}
a{color:var(--deep)}
a:hover{color:var(--navy)}
em{font-style:italic}

.wordmark{display:block; text-align:center; font-weight:700; font-size:.875rem;
  letter-spacing:.22em; text-transform:uppercase; color:#243b57;
  text-decoration:none; margin:0 0 2.75rem}
.wordmark:hover{color:var(--navy)}

/* An identification hook rather than information: the cover at half the size
   of the homepage hero (20rem -> 10rem). Sits where the wordmark sits, and
   carries the wordmark's bottom margin so the page rhythm is unchanged. */
.hook{display:block; width:10rem; margin:0 auto 2.75rem}
.hook img{width:100%; height:auto; display:block; border-radius:2px;
  box-shadow:0 10px 28px rgba(18,50,92,.18)}

h1{font-family:var(--sans); font-weight:800; font-size:2.5rem; line-height:1.12;
  letter-spacing:-.02em; color:var(--deep); margin:0 0 1.5rem; text-align:center;
  text-wrap:balance}
h2{font-family:var(--hand); font-weight:700; font-size:2.4rem; line-height:1.08;
  letter-spacing:0; color:var(--deep); margin:2.75rem 0 1rem; text-wrap:balance}
/* an <hr> already supplies the air, so the heading after one does not add more */
hr + h2, main > h2:first-child{margin-top:0}

hr{border:0; border-top:1px solid var(--frame); margin:3.25rem 0}

/* ── the cover ─────────────────────────────────────────────────────── */
.cover{margin:0 auto 2.25rem; width:100%; max-width:17rem}
.cover img{width:100%; height:auto; display:block; border-radius:2px;
  box-shadow:0 14px 40px rgba(18,50,92,.20)}

/* ── one button, two colours ───────────────────────────────────────── */
.btn{display:inline-block; border:0; cursor:pointer; text-decoration:none;
  font-family:var(--sans); font-weight:800; font-size:1rem;
  letter-spacing:.1em; text-transform:uppercase;
  padding:1.05rem 2rem; border-radius:999px;
  background:var(--orange); color:#fff; transition:background .15s ease}
.btn:hover{background:#dd7a25; color:#fff}
.btn:focus-visible{outline:3px solid var(--deep); outline-offset:3px}
.btn.navy{background:var(--navy)}
.btn.navy:hover{background:#16304f}
.btn.navy:focus-visible{outline-color:var(--orange)}
.btn-note{display:block; margin:.85rem 0 0; color:var(--muted)}
.cta{margin:1.75rem 0}

/* ── email box ─────────────────────────────────────────────────────── */
.grab{margin:1.5rem 0 0}
.grab-label{display:block; font-weight:700; color:var(--deep); margin:0 0 .6rem}
.grab-row{display:flex; flex-wrap:wrap; gap:.6rem}
.grab-input{flex:1 1 14rem; min-width:0; font-family:var(--sans); font-size:1rem;
  color:var(--deep); background:#fff; padding:1.05rem 1.25rem;
  border:2px solid var(--muted); border-radius:999px}
.grab-input::placeholder{color:var(--muted)}
.grab-input:hover{border-color:var(--navy)}
.grab-input:focus{outline:0; border-color:var(--navy)}
.grab-input:focus-visible{outline:3px solid var(--orange); outline-offset:2px}
.grab-trap{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.grab-consent{margin:1rem 0 0; color:var(--muted)}

/* ── footer ────────────────────────────────────────────────────────── */
footer{width:100%; max-width:var(--col); margin:0 auto;
  padding:2.25rem 1.5rem 3.5rem; border-top:1px solid var(--frame);
  color:var(--muted); font-size:.9375rem; text-align:center}
footer a{color:var(--muted)}
.footlogo{display:block; width:78px; height:auto; margin:0 auto 1.25rem}

/* ── page furniture that used to live in site.css ─────────────────────
   privacy / remind / review no longer load site.css. Everything those
   pages need is here, on this file's one type scale. Nothing in this
   block is allowed to introduce a third text size.                     */
.quiet, .note p, .hint{color:var(--muted)}
.quiet{font-size:1.0625rem}
.hint{font-size:1.0625rem; margin:.1rem 0 .55rem}

.note{background:#fff; border:1px solid var(--disc); border-radius:14px;
  padding:1.15rem 1.35rem; margin:1.75rem 0}
.note p{font-size:1.0625rem}
.note.ok{border-color:var(--navy)}

/* form fields on the reminder page. .grab-input is a class, so it keeps
   its own pill shape wherever these element rules would otherwise reach. */
label{display:block; font-family:var(--sans); font-weight:700;
  font-size:1.0625rem; color:var(--deep); margin:1.7rem 0 .45rem}
input[type=text],input[type=email],input[type=date],select,textarea{
  width:100%; font-family:var(--sans); font-size:1rem; color:var(--deep);
  background:#fff; padding:.95rem 1.15rem;
  border:2px solid var(--disc); border-radius:12px}
input:hover,select:hover,textarea:hover{border-color:var(--navy)}
input:focus,select:focus,textarea:focus{outline:0; border-color:var(--navy)}
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--orange); outline-offset:2px}

/* a bare <button> is the same object as .btn, navy by default */
button{display:inline-block; border:0; cursor:pointer;
  font-family:var(--sans); font-weight:800; font-size:1rem;
  letter-spacing:.1em; text-transform:uppercase;
  padding:1.05rem 2rem; border-radius:999px;
  background:var(--navy); color:#fff; transition:background .15s ease}
button:hover{background:#16304f}
button:focus-visible{outline:3px solid var(--orange); outline-offset:3px}
button:disabled{background:var(--muted); cursor:default}

/* store list on the review page */
ul.stores{list-style:none; padding:0; margin:1.25rem 0 0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(10rem,1fr)); gap:.5rem}
ul.stores a{display:block; padding:.7rem .9rem; background:#fff;
  border:2px solid var(--frame); border-radius:12px; text-decoration:none;
  font-family:var(--sans); font-size:1rem; color:var(--deep); text-align:center}
ul.stores a:hover{border-color:var(--navy)}

@media (min-width:52rem){ h1{font-size:3rem} h2{font-size:2.7rem} }
@media (max-width:30rem){
  /* short measure: justification opens holes, so fall back to ragged right */
  p, .lede{text-align:left}
  main{padding:2.5rem 1.25rem 2.5rem}
  h1{font-size:2rem} h2{font-size:2.05rem}
  .cover{max-width:13rem}
  .btn, button{width:100%; text-align:center}
}