/* page.css — shared by faq.html, privacy.html and terms.html.
   index.html keeps its own inline styles; these pages are text documents and
   have nothing in common with it beyond the header, footer and palette. */

:root{
  --navy:#19223A;
  --navy-deep:#0F1829;
  --gold:#E0A73D;
  --gold-lt:#F2CE7E;
  --cream:#F2ECE1;
  --red:#93301D;
  --red-dk:#7A1C10;
  --ink:#3A2A1C;
  --nav-h:84px;
  --maxw:1400px;
  --readw:760px;
  --caps:'Oswald','Arial Narrow',sans-serif;
  --wordmark:'Bevan',Rockwell,Georgia,serif;
  --body:'Poppins',system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
/* Plain white, not the parchment used on the home page. These are documents
   people read a thousand words of, and a texture behind body copy fights it the
   whole way down. The header and footer keep the leather, so the pages still
   belong to the site. */
/* Sticky footer. Without min-height and the flex column, a short page -- the
   signup form, an empty FAQ section -- leaves the footer floating in the middle
   with white below it. main takes the slack so the footer is pushed to the
   bottom of the viewport or below the content, whichever is lower. */
body{
  margin:0;font-family:var(--body);color:#2B3440;
  background:#fff;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
main{flex:1 0 auto}
.site-footer{flex:none}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

/* ---------------- header, matching index.html ---------------- */
.site-header{
  position:sticky;top:0;z-index:100;height:var(--nav-h);
  background:var(--navy) url('leather-navy.jpg') center/420px;
  border-top:2px solid rgba(224,167,61,.55);
  border-bottom:2px solid rgba(224,167,61,.55);
  box-shadow:0 6px 22px rgba(0,0,0,.5);
}
.site-header::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(255,255,255,.05),transparent 38%),
    linear-gradient(0deg,rgba(0,0,0,.22),transparent 30%);
}
.nav{
  position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;height:100%;
  display:flex;align-items:center;gap:20px;padding:0 24px;
}
.brand{
  display:flex;align-items:center;gap:.42em;text-decoration:none;flex:none;
  font-family:var(--wordmark);font-weight:400;
  font-size:clamp(17px,2.1vw,23px);
  letter-spacing:.055em;text-transform:uppercase;
  color:var(--gold);white-space:nowrap;line-height:1;
  text-shadow:0 1px 0 rgba(0,0,0,.55);
}
.brand-mark{height:1.42em;width:auto;flex:none}
.brand:hover{color:var(--gold-lt)}
.nav-links{display:flex;align-items:center;gap:clamp(12px,1.7vw,24px);margin-left:auto}
.nav-links a{
  font-family:var(--caps);font-weight:500;font-size:13.5px;
  letter-spacing:.07em;text-transform:uppercase;
  color:var(--cream);text-decoration:none;white-space:nowrap;
  padding:7px 0 5px;border-bottom:2px solid transparent;
  transition:color .15s ease,border-color .15s ease;
}
.nav-links a:hover{color:var(--gold-lt);border-bottom-color:rgba(224,167,61,.65)}
.nav-links a[aria-current="page"]{border-bottom-color:var(--gold)}
.nav-cta{
  flex:none;margin-left:6px;
  font-family:var(--caps);font-weight:600;font-size:14px;
  letter-spacing:.06em;text-transform:uppercase;
  color:#F7EBD8;text-decoration:none;padding:12px 22px;border-radius:5px;
  background:linear-gradient(180deg,var(--red),var(--red-dk));
  border:1px solid #5C1409;
  box-shadow:inset 0 1px 0 rgba(255,180,150,.3),0 3px 8px rgba(0,0,0,.4);
  transition:filter .15s ease,transform .15s ease;cursor:pointer;
}
.nav-cta:hover{filter:brightness(1.15);transform:translateY(-1px)}
.nav-toggle{display:none;margin-left:auto;background:none;border:0;padding:10px;cursor:pointer}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--gold);margin:5px 0;border-radius:2px}
@media (max-width:1000px){
  .nav-links{gap:13px}
  .nav-links a{font-size:12.5px;letter-spacing:.04em}
  .nav-cta{padding:11px 17px;font-size:13px}
}
@media (max-width:880px){
  :root{--nav-h:68px}
  .nav{padding:0 18px}
  .nav-toggle{display:block}
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;margin:0;
    background:var(--navy-deep) url('leather-navy.jpg') center/420px;
    border-bottom:2px solid rgba(224,167,61,.55);
    padding:8px 18px 18px;box-shadow:0 14px 28px rgba(0,0,0,.5);
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:14px 2px;font-size:14px;border-bottom:1px solid rgba(224,167,61,.16)}
  .nav-links a:hover{border-bottom-color:rgba(224,167,61,.16)}
  .nav-cta{margin:14px 0 0;text-align:center;padding:14px 20px}
}

/* ---------------- the document itself ---------------- */
.doc{max-width:var(--readw);margin:0 auto;padding:38px 22px 60px}

.doc-head{text-align:center;margin-bottom:30px}
.doc-head h1{
  font-family:var(--caps);font-weight:600;text-transform:uppercase;
  font-size:clamp(28px,5vw,42px);letter-spacing:.02em;
  color:var(--navy);margin:0;line-height:1.1;
}
.doc-head .stamp{
  font-family:var(--caps);font-weight:500;font-size:12.5px;
  letter-spacing:.16em;text-transform:uppercase;color:#8A7A5E;margin-top:8px;
}
.doc-head .rule{
  width:min(320px,70%);height:2px;margin:16px auto 0;
  background:var(--gold);
}

.doc h2{
  font-family:var(--caps);font-weight:600;text-transform:uppercase;
  font-size:clamp(18px,2.6vw,22px);letter-spacing:.04em;
  color:var(--navy);margin:34px 0 10px;
  padding-bottom:6px;border-bottom:1px solid #E2E6EB;
}
.doc h3{
  font-family:var(--body);font-weight:600;font-size:16px;
  color:var(--navy);margin:20px 0 6px;
}
.doc p,.doc li{font-size:16px;line-height:1.7;color:#39424E}
.doc p{margin:0 0 12px}
.doc ul,.doc ol{margin:0 0 14px;padding-left:22px}
.doc li{margin-bottom:6px}
.doc strong{color:var(--navy)}
.doc a{color:#8A5A12;text-underline-offset:2px}

/* A short summary above the legal text. Nobody reads a privacy policy; a
   plain-language box at the top is the part that actually informs. */
.plain{
  background:#FBF7EF;
  border:1px solid #ECE1CB;
  border-left:4px solid var(--gold);
  border-radius:4px;padding:18px 20px;margin:0 0 28px;
}
.plain p{margin:0 0 9px;font-size:15.5px;line-height:1.6}
.plain p:last-child{margin:0}
.plain strong{display:block;font-family:var(--caps);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;font-size:12.5px;
  color:#7A5A1E;margin-bottom:6px}

/* FAQ */
.faq details{
  background:#fff;
  border:1px solid #E2E6EB;border-radius:6px;
  margin-bottom:8px;overflow:hidden;
}
.faq details[open]{border-color:#D8CBAE;box-shadow:0 1px 3px rgba(20,30,45,.06)}
.faq summary{
  cursor:pointer;list-style:none;padding:15px 17px;
  font-weight:600;font-size:16px;color:var(--navy);
  display:flex;align-items:center;gap:10px;
}
.faq summary:hover{background:#FBFCFD}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{
  content:"+";font-family:var(--caps);font-size:19px;color:#8A6524;
  width:16px;flex:none;line-height:1;
}
.faq details[open] summary::before{content:"\2013"}
.faq details[open] summary{border-bottom:1px solid #EDF0F3}
.faq .body{padding:14px 17px 17px 44px}
.faq .body p:last-child{margin:0}
.faq h2{margin-top:30px}

.contact-line{
  margin-top:36px;padding-top:20px;
  border-top:1px solid #E2E6EB;
  font-size:15px;color:#5A6472;
}

.hidden{display:none}

/* ---------------- forms ----------------
   These were only ever defined inside index.html's inline block, so signup.html
   rendered an unstyled form -- labels beside inputs, fields wrapping into each
   other, and the honeypot on show. A visible honeypot is not a cosmetic
   problem: a real person can fill it in and have their signup silently thrown
   away. */
.field{display:block;margin-bottom:16px}
.field > span{
  display:block;font-family:var(--caps);font-weight:500;
  font-size:12px;letter-spacing:.11em;text-transform:uppercase;
  color:#6B7480;margin-bottom:6px;
}
.field input,.field textarea,.field select{
  display:block;width:100%;font:inherit;font-size:16px;color:var(--ink);
  background:#fff;border:1px solid #CFD6DE;border-radius:6px;
  padding:13px 14px;
}
.field input::placeholder,.field textarea::placeholder{color:#A8B2BD}
.field textarea{min-height:120px;resize:vertical;line-height:1.5}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(224,167,61,.22);
}
.field small{display:block;font-size:12.5px;color:#6B7480;margin-top:7px;line-height:1.5}

/* Off-screen, not display:none -- some bots skip hidden fields but will fill
   one that is merely out of view. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------------- footer, matching index.html ---------------- */
.site-footer{
  position:relative;margin-top:0;
  background:var(--navy) url('leather-navy.jpg') center/420px;
  border-top:2px solid rgba(224,167,61,.55);
  box-shadow:0 -6px 22px rgba(0,0,0,.35);
  font-size:16px;line-height:1.6;
}
.site-footer::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 34%);
}
.footer-inner{
  position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;
  padding:34px 24px 30px;
  display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center;
}
.footer-inner .brand{font-size:clamp(19px,2.3vw,25px)}
.footer-links{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0}
.footer-links a,.footer-links button{
  font-family:var(--caps);font-weight:500;font-size:13.5px;
  letter-spacing:.09em;text-transform:uppercase;
  color:var(--cream);text-decoration:none;padding:6px 18px;
  border:0;background:none;cursor:pointer;
  border-bottom:2px solid transparent;
  transition:color .15s ease,border-color .15s ease;
}
.footer-links a:hover,.footer-links button:hover{color:var(--gold-lt);border-bottom-color:rgba(224,167,61,.65)}
.footer-links span{color:rgba(224,167,61,.5);font-size:11px;line-height:1}
.made-in{
  display:flex;align-items:center;gap:10px;
  font-family:var(--caps);font-weight:500;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
  padding:9px 18px;border-radius:4px;
  background:rgba(0,0,0,.22);border:1px solid rgba(224,167,61,.32);
}
.made-in svg{width:26px;height:auto;flex:none;border-radius:1px}
.footer-legal{
  width:100%;padding-top:18px;border-top:1px solid rgba(224,167,61,.22);
  font-size:12.5px;color:#B9AE99;
}
@media (max-width:880px){
  .footer-inner{padding:28px 18px 26px;gap:18px}
  .footer-links a,.footer-links button{padding:8px 13px;font-size:13px}
  .made-in{font-size:11.5px;letter-spacing:.1em;padding:8px 14px}
  .doc{padding:26px 18px 44px}
}