/* ============================================================
   P1 — "Morning" design system
   Shared by the Morning prototype's secondary pages.
   (index.html and memberships.html still carry their own inline
   copies; they can be migrated to this file in one pass.)
   ============================================================ */

@font-face{
  font-family:'Manrope';
  src:url('fonts/manrope.woff2') format('woff2');
  font-weight:200 800;font-display:swap;
}

:root{
  --porcelain:#F6F1E7; --card:#FBF8F1; --slate:#262019; --soft:#6E6455;
  --gold:#A8813E; --sky:#55705E; --hair:#DFD6C4; --green:#17352A;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:'Manrope',-apple-system,"Helvetica Neue",sans-serif;
  background:var(--porcelain);color:var(--slate);
  font-size:15.5px;line-height:1.7;font-weight:400;
}
a{color:var(--gold);text-decoration:none}
img{display:block;max-width:100%;height:auto}
.wrap{max-width:36rem;margin:0 auto;padding:0 1.4rem}

/* ---------- type ---------- */
.k{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);font-weight:600}
.h1{font-size:clamp(30px,8.4vw,42px);line-height:1.14;font-weight:300;letter-spacing:-.015em;margin:1rem 0 .7rem}
.h2{font-size:clamp(24px,6.4vw,30px);font-weight:300;letter-spacing:-.01em;line-height:1.2;margin:.5rem 0 .9rem}
.h1 b,.h2 b{font-weight:700}
.sub{color:var(--soft);font-size:14.5px}
.lede{color:var(--soft);max-width:29rem}
.whisper{font-size:13px;color:var(--soft)}
.whisper b{color:var(--slate);font-weight:600}
/* Reassurance under a Register button. Smaller than the card body, larger
   than the genuine fine print, so it reads as a note and not a disclaimer. */
.tline .pr .from{font-weight:400;color:var(--soft);font-size:12px}
.tline .pr{text-align:right}
.tline .pr small.sub{display:block;font-weight:400;color:var(--soft);font-size:11px;margin-top:.05rem}
.perwash-k{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-top:.7rem}
.regnote{font-size:10px;line-height:1.45;color:var(--soft);text-align:center;margin-top:.5rem}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:10;
  background:rgba(246,241,231,.92);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.bar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;height:56px}
.mark{font-weight:700;font-size:17px;letter-spacing:.02em;color:var(--slate);white-space:nowrap}
.mark span{font-weight:300;color:var(--soft);font-size:12px;margin-left:.45rem;letter-spacing:.14em;text-transform:uppercase}
.bar nav{display:flex;gap:1rem;align-items:center;white-space:nowrap}
.bar nav a.plain{font-size:13px;font-weight:600;color:var(--slate)}
/* the descriptor is the first thing to go on very narrow screens */
@media (max-width:359px){ .mark span{display:none} }

/* ---------- buttons ---------- */
.btn{
  display:inline-block;background:var(--green);color:#F6F1E7!important;
  font-size:13px;font-weight:600;padding:.72rem 1.45rem;border-radius:99px;
  border:0;font-family:inherit;cursor:pointer;text-align:center;white-space:nowrap;
}
.btn.soft{background:transparent;color:var(--slate)!important;border:1px solid #C9BDA2}
.btn.wide{display:block;width:100%;font-size:14px;padding:.85rem 1rem}
header .btn{padding:.5rem 1.05rem;font-size:12px}
.row{display:flex;gap:.7rem;flex-wrap:wrap}

/* ---------- sections & cards ---------- */
section{padding:2.4rem 0}
.card{
  background:var(--card);border-radius:22px;padding:1.7rem 1.4rem;
  box-shadow:0 14px 44px -30px rgba(38,32,25,.25);
}
.card.tight{padding:1.3rem 1.2rem}

/* dark green panel */
.panel{background:var(--green);color:var(--porcelain);border-radius:22px;padding:1.7rem 1.4rem}
.panel .k{color:#C9A96A}
.panel .h2{color:var(--porcelain)}
.panel p{color:#E7E0CF}

/* ---------- fact rows ---------- */
.facts{border-top:1px solid var(--hair)}
.facts div{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.62rem 0;border-bottom:1px solid var(--hair);
  font-size:13.5px;color:var(--soft);
}
.facts span:last-child{color:var(--sky);font-weight:600;white-space:nowrap;text-align:right}

/* ---------- numbered / icon steps ---------- */
.step{display:grid;grid-template-columns:2.4rem 1fr;gap:.9rem;padding:.85rem 0;border-bottom:1px solid var(--hair);align-items:start}
.step:last-of-type{border-bottom:0}
.step .ic{
  width:2.2rem;height:2.2rem;border-radius:50%;background:#F1E7D2;color:var(--gold);
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;
}
.step h3{font-size:15.5px;font-weight:700}
.step p{font-size:13.5px;color:var(--soft)}

/* ---------- "while you slept" recap ---------- */
.recap p.big{
  font-size:clamp(20px,5.6vw,26px);font-weight:300;line-height:1.45;letter-spacing:-.005em;
  max-width:30rem;
}
.recap p.big b{font-weight:700}
.recap .quiet-list{margin-top:1.4rem;border-top:1px solid var(--hair)}
.recap .quiet-list div{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.62rem 0;border-bottom:1px solid var(--hair);font-size:13.5px;color:var(--soft);
}
.recap .quiet-list span:last-child{color:var(--sky);font-weight:600;white-space:nowrap}

/* ---------- add-ons ---------- */
.addon{
  display:grid;grid-template-columns:64px 1fr auto;gap:.9rem;align-items:center;
  padding:.9rem 0;border-bottom:1px solid var(--hair);
}
.addon:last-of-type{border-bottom:0;padding-bottom:.3rem}
.addon img{width:64px;height:64px;object-fit:cover;border-radius:14px}
.addon .tag{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:700}
.addon h3{font-size:15.5px;font-weight:700}
.addon p{font-size:13px;color:var(--soft)}
.addon .pr{
  font-weight:700;font-size:13.5px;color:var(--slate);
  background:#F1E7D2;border-radius:99px;padding:.38rem .75rem;white-space:nowrap;
}
/* Which add-on rate the selected plan pays. Two lines, so the pill wraps. */
.addon .pr.mem,.addon .pr.best{
  white-space:normal;text-align:center;max-width:6.4rem;
  font-size:11.5px;line-height:1.25;padding:.4rem .65rem;
}
.addon .pr.mem{background:#F1E7D2;box-shadow:inset 0 0 0 1px var(--gold)}
.addon .pr.best{background:var(--green);color:var(--porcelain)}
.addon .pr small{display:block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;margin-top:.1rem}
.addon-plan{margin:.4rem 0 1rem}
.addon-plan label{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:.35rem}
.addon-plan select{
  width:100%;font:inherit;font-size:16px;color:var(--slate);background:#fff;
  border:1px solid var(--hair);border-radius:12px;padding:.6rem .8rem;outline:none;
}
.addon-plan select:focus{border-color:var(--gold)}

/* ---------- chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chips span{
  font-size:11.5px;font-weight:600;color:var(--slate);
  background:rgba(246,241,231,.6);border:1px solid var(--hair);
  border-radius:99px;padding:.32rem .7rem;
}
.chips span i{font-style:normal;color:var(--gold);margin-right:.25rem}

/* ---------- accordion Q&A ---------- */
details.q{background:var(--card);border-radius:16px;margin-bottom:.55rem;box-shadow:0 8px 30px -26px rgba(38,32,25,.3)}
details.q summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;
  padding:.95rem 1.15rem;font-weight:600;font-size:14.5px;
}
details.q summary::-webkit-details-marker{display:none}
details.q summary::after{content:"＋";color:var(--gold);font-size:14px}
details.q[open] summary::after{content:"−"}
details.q p{padding:0 1.15rem 1rem;font-size:13.5px;color:var(--soft)}

/* ---------- forms ---------- */
/* The header is sticky, so anything scrolled to by anchor or by script lands
   underneath it without this. Applies to the Register buttons' jump to the
   form and to the confirmation scroll in forms.js. */
section{scroll-margin-top:4.5rem}

.field{margin-bottom:.85rem}
.field label{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;margin-bottom:.3rem}
.field label em{font-style:normal;font-weight:400;color:var(--soft)}
/* 16px is not a style choice. iOS magnifies the whole page when a focused
   form control's font-size is under 16px — WebKit's doing, so every browser
   on iOS behaves this way — and the page can be left magnified and scrolled
   sideways afterwards. At 16px it does not zoom at all, while still scrolling
   the field above the keyboard, which is the part worth keeping.
   desktop.css takes it back to 14.5px from 768px up, where no browser does
   this. Do not lower it here. */
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:16px;color:var(--slate);
  background:#fff;border:1px solid var(--hair);border-radius:12px;
  padding:.68rem .8rem;outline:none;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold)}
.field textarea{min-height:5.2rem;resize:vertical}
.field.check{display:flex;gap:.6rem;align-items:flex-start}
.field.check input{width:auto;margin-top:.35rem}
.field.check label{font-weight:400;font-size:13px;letter-spacing:0;margin:0}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.thanks{display:none;text-align:center;padding:1rem 0 .4rem}
form.sent .fields{display:none}
form.sent .thanks{display:block}

/* ---------- footer ---------- */
footer{padding:2.6rem 0 4.6rem;text-align:center}
footer p{font-size:12px;color:var(--soft);margin-bottom:.3rem}
footer .sun{font-size:18px;color:var(--gold)}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference){
  .fade{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease}
  .fade.in{opacity:1;transform:none}
}

/* ---------- lead form: failure and consent ----------
   The prototype could not fail, so none of this existed. */
.formerr{
  display:none;margin-top:.75rem;font-size:13px;line-height:1.5;
  color:#7E2C2C;background:#F6E7E4;border:1px solid #E6CFC9;
  border-radius:10px;padding:.6rem .8rem;
}
.formerr.show{display:block}
form.sending .fields{opacity:.6}
/* Honeypot. Off-screen rather than display:none — some bots skip hidden
   fields, but they will happily fill one that is merely positioned away.
   aria-hidden + tabindex=-1 keep it away from real people and AT. */
.hp{
  position:absolute!important;left:-9999px!important;top:auto!important;
  width:1px!important;height:1px!important;overflow:hidden!important;
}
.consent{display:flex;gap:.6rem;align-items:flex-start;margin:.2rem 0 .9rem}
.consent input{width:auto;margin-top:.3rem;flex:0 0 auto}
.consent label{font-weight:400;font-size:12.5px;letter-spacing:0;margin:0;color:var(--soft)}
.formnote{font-size:12px;color:var(--soft);line-height:1.55;margin-top:.7rem}
.formnote a{color:var(--gold)}