/* ================================================================
   AGING WITH ASH — SITE STYLEBOOK  (shared by every page)
   AUDIENCE: SENIORS. Readability rules — do not break these:

   1. MINIMUM FONT SIZE = 16px anywhere on the site (footer/legal
      is the floor). Reading text is 18–19px. Headings 26px+.
      Sizes are in px on purpose so the minimum stays explicit.
   2. CONTRAST: all reading text meets WCAG AA (>= 4.5:1) on the
      cream background. Reading text uses --ink / --soft (both dark).
      GOLD is a brand ACCENT only (logo, the name "Ash", buttons) —
      never used for body/reading text.
   3. LINE-HEIGHT >= 1.5 for paragraphs; generous spacing.
   4. Links are underlined and use --link (dark, AA-compliant).

   When you add a new style, keep it within these rules.
   ================================================================ */
:root{
  --gold:#FFC432; --gold-deep:#E8A317;     /* brand accent / buttons only */
  --ink:#2b2417;                            /* primary reading text (~11:1) */
  --soft:#4a4130;                           /* secondary text  (~8:1, AA)   */
  --link:#8a5500;                           /* links           (~5:1, AA)   */
  --cream:#FFF9EC; --card:#ffffff; --line:#e8dcc0;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--cream);
  background-image:radial-gradient(1200px 480px at 50% -180px, #FFE6A8 0%, rgba(255,230,168,0) 70%);
  font-size:18px;            /* base — never resolves below 16px anywhere */
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:var(--link)}        /* underlined by default — keep it for seniors */
.wrap{max-width:680px; margin:0 auto; padding:0 22px}

/* ---- top nav ---- */
.nav{max-width:680px; margin:0 auto; padding:18px 22px 0;
     display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap}
.nav .logo{display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink); font-weight:800; font-size:22px}
.nav .logo .ash{color:var(--gold-deep)}
.nav .logo svg{width:30px;height:30px}
/* collapsed menu: a "Menu" button that opens a dropdown. JS-toggled (reliable in
   Safari, where a styled <summary> won't toggle). Scalable + uncluttered. */
.menu{position:relative}
.menu-btn{display:inline-flex; align-items:center; gap:11px; cursor:pointer;
  font-weight:800; font-size:18px; color:var(--ink); padding:11px 18px;
  border:2px solid var(--line); border-radius:12px; background:var(--card)}
.menu-btn:hover,.menu.open .menu-btn{border-color:var(--gold-deep)}
.menu .bars{position:relative; display:inline-block; width:22px; height:2.5px; background:var(--ink); border-radius:2px}
.menu .bars::before,.menu .bars::after{content:""; position:absolute; left:0; width:22px; height:2.5px; background:var(--ink); border-radius:2px}
.menu .bars::before{top:-7px} .menu .bars::after{top:7px}
.menu .dropdown{position:absolute; right:0; top:calc(100% + 10px); z-index:60; min-width:240px;
  display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line);
  border-radius:14px; box-shadow:0 16px 40px rgba(140,100,20,.22); padding:8px}
.menu .dropdown[hidden]{display:none}
.menu .dropdown:not([hidden]){animation:menuIn .14s ease-out}
@keyframes menuIn{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:translateY(0)}}
.menu .dropdown a{text-decoration:none; color:var(--ink); font-weight:700; font-size:18px;
  padding:14px 16px; border-radius:10px}
.menu .dropdown a:hover{background:#FFF1CC}
.menu .dropdown a[aria-current]{background:#FFF1CC; box-shadow:inset 4px 0 0 var(--gold-deep)}

/* ---- shared top section (same on every page) ---- */
.top{max-width:680px; margin:0 auto; padding:clamp(20px,5vw,34px) 22px 6px; text-align:center}
.video{position:relative; aspect-ratio:16/9; border-radius:16px; overflow:hidden;
       box-shadow:0 14px 38px rgba(180,140,30,.18); background:#000; border:1px solid var(--line)}
.video iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.intro{font-size:clamp(20px,4vw,26px); font-weight:700; color:var(--ink);
       margin:24px auto; max-width:30em; line-height:1.45}

/* ---- cards / signup ---- */
.card{background:var(--card); border:1px solid var(--line); border-radius:18px;
      padding:clamp(22px,5vw,32px); box-shadow:0 12px 34px rgba(180,140,30,.12); text-align:left; margin-bottom:22px}
.card h2{font-size:23px; margin:0 0 6px; text-align:center}
.card p.sub{margin:0 0 18px; color:var(--soft); text-align:center; font-size:18px}
form.signup{display:flex; flex-direction:column; gap:13px}
.signup label{font-weight:700; font-size:17px}
.signup input[type=email]{width:100%; padding:17px 16px; font-size:19px; border:2px solid var(--line);
       border-radius:12px; background:#fffdf6; color:var(--ink)}
.signup input[type=email]::placeholder{color:#7a6f56}   /* readable placeholder */
.signup input[type=email]:focus{outline:none; border-color:var(--gold-deep); box-shadow:0 0 0 4px rgba(255,196,50,.3)}
button{appearance:none; border:0; cursor:pointer; font-size:20px; font-weight:800; padding:17px 18px;
       border-radius:12px; color:#3a2d05; background:linear-gradient(180deg,var(--gold),var(--gold-deep));
       box-shadow:0 6px 0 rgba(180,120,10,.25)}
button:hover{filter:brightness(1.03)}
button:active{transform:translateY(2px); box-shadow:0 4px 0 rgba(180,120,10,.25)}
button[disabled]{opacity:.6; cursor:default}
.fineprint{font-size:16px; color:var(--soft); margin:14px 2px 0; text-align:center; line-height:1.5}
.msg{margin-top:14px; font-size:18px; font-weight:700; text-align:center; display:none}
.msg.ok{display:block; color:#176b35}
.msg.err{display:block; color:#a3361f}

/* ---- page-specific content area ---- */
.page{max-width:680px; margin:0 auto; padding:8px 22px 10px}
.page h1{font-size:clamp(28px,5.5vw,40px); line-height:1.2; margin:16px 0 14px; font-weight:800}
.page h2{font-size:26px; margin:28px 0 12px; font-weight:800}
.page p{font-size:19px; color:var(--ink); margin:0 0 16px; line-height:1.6}
.page ul{font-size:19px; color:var(--ink); line-height:1.65}

/* ---- product offer card ---- */
.product{padding:0; overflow:hidden}
.prod{display:flex; gap:18px; align-items:center; text-decoration:none; color:inherit; padding:clamp(18px,4.4vw,26px)}
.prod .cover{width:120px; flex:none; border-radius:10px; box-shadow:0 6px 18px rgba(180,140,30,.22)}
.product .pkic{margin:0 0 4px; font-size:15px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:var(--link)}
.product .ptitle{margin:0 0 7px; font-size:23px; font-weight:800; line-height:1.15; text-align:left}
.product .psub{margin:0 0 14px; font-size:17px; color:var(--soft); text-align:left; line-height:1.5}
.prow{display:flex; align-items:center; gap:13px; flex-wrap:wrap}
.price{font-size:24px; font-weight:800; color:var(--ink)}
.buybtn{font-size:18px; font-weight:800; color:#3a2d05; padding:12px 18px; border-radius:11px;
        background:linear-gradient(180deg,var(--gold),var(--gold-deep)); box-shadow:0 5px 0 rgba(180,120,10,.25)}
.prod:hover .buybtn{filter:brightness(1.04)}
@media(max-width:460px){.prod{flex-direction:column; text-align:center}.prod .cover{width:150px}
  .product .ptitle,.product .psub{text-align:center}.prow{justify-content:center}}

/* ---- youtube link + footer ---- */
.yt{display:inline-flex; align-items:center; gap:9px; margin:8px 0 4px; text-decoration:none;
    color:var(--ink); font-weight:700; font-size:19px; border-bottom:2px solid var(--gold)}
.yt svg{width:28px;height:28px}
footer{max-width:680px; margin:0 auto; padding:34px 22px 48px; text-align:center; font-size:16px; color:var(--soft); line-height:1.6}
footer a{color:var(--link)}
.center{text-align:center}