@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Merriweather:wght@400;700&display=swap');

:root{
  --bg: #ffffff;
  --text: #333333;
  --subtext: #555555;
  --muted: rgba(0, 0, 0, 0.7);
  --brand: #c20000;
  --border: rgba(0, 0, 0, 0.08);
  --shadow-up: 0 -10px 14px -14px rgba(0, 0, 0, 0.35);
  --shadow-down: 0 10px 14px -14px rgba(0, 0, 0, 0.35);

  --line: var(--border);
  --card: #f7f7f7;
  --red: var(--brand);
  --redDark: #a00000;

  --radius: 16px;
  --max: 1080px;
  --shadow: 0 10px 22px rgba(0,0,0,.08);
  --font: 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box}
html,
body{height:100%}
body{margin:0; min-height:100vh; display:flex; flex-direction:column; font-family:var(--font); color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased}
a{color:inherit; text-decoration:none}
.container{max-width:var(--max); margin:0 auto; padding:0 20px}

/* Header */
header{position:sticky; top:0; z-index:50; background:var(--bg); border-bottom:1px solid var(--line); box-shadow:var(--shadow-down)}
.header-inner{min-height:72px; height:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 18px}
.brand{display:inline-flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px}
.brand-logo{height:46px; width:auto; display:block}
nav{display:flex; align-items:center; column-gap:12px; row-gap:0; color:#aaa; font-weight:600; flex:1; justify-content:center; flex-wrap:wrap}
nav a{padding:4px 6px; border-radius:10px; font-size:1rem; white-space:nowrap; line-height:1.0}
nav a:hover{color:var(--brand); text-decoration:none}
nav a.active{color:var(--text)}

.nav-item{position:relative; display:inline-flex; align-items:center}
.nav-link{padding:4px 6px; border-radius:10px; font-size:1rem; font-weight:600; color:#aaa; background:transparent; border:0; cursor:pointer; font-family:inherit; white-space:nowrap; line-height:1.0}
.nav-link:hover{color:var(--brand)}
.nav-link[aria-expanded="true"]{color:var(--text)}

.nav-dropdown{position:absolute; top:calc(100% + 10px); left:0; min-width:240px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-down); padding:8px; display:none; z-index:80}
.nav-item.open .nav-dropdown{display:block}
.nav-dropdown a{display:block; padding:10px 10px; border-radius:10px; font-size:0.95rem; color:#aaa; font-weight:600}
.nav-dropdown a:hover{color:var(--brand); text-decoration:none}
.cta{display:flex; gap:10px; align-items:center}
.btn{height:44px; padding:0 18px; border-radius:12px; border:1px solid transparent; cursor:pointer; font-weight:900; letter-spacing:.2px; display:inline-flex; align-items:center; justify-content:center; transition:.15s}
.btn-primary{background:var(--red); color:#fff}
.btn-primary:hover{background:var(--redDark)}
.btn-ghost{background:#fff; border-color:var(--line); color:#222}
.btn-ghost:hover{background:#f6f6f6}
.icon-btn{width:auto; height:auto; border-radius:0; border:0; background:transparent; padding:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center}
.icon-btn:hover{background:transparent}
.header-info{border:0; background:transparent; padding:0; cursor:pointer; display:inline-flex; align-items:center}
.header-info-icon{height:46px; width:auto; display:block}
.hamburger{width:18px; height:14px; position:relative}
.hamburger span{position:absolute; left:0; right:0; height:2px; background:#333; border-radius:2px}
.hamburger span:nth-child(1){top:0} .hamburger span:nth-child(2){top:6px} .hamburger span:nth-child(3){top:12px}

/* Main */
main{flex:1; padding:26px 0 40px}
.page{display:grid; grid-template-columns: 1fr; gap:16px}
.hero{border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(#fff,#fbfbfb); box-shadow:var(--shadow); padding:24px; text-align:center}
h1{margin:0 0 10px 0; font-size:36px; line-height:1.2; font-family:'Merriweather', serif; color:var(--brand); letter-spacing:-0.3px}
.claim{margin:7px 0 9px; font-size:1rem; color:var(--subtext); font-weight:500}
.lede{margin:0 auto 22px; font-size:0.9rem; line-height:1.5; color:var(--subtext); font-weight:600; max-width:100ch}
.actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:0; justify-content:center}

.grid{display:grid; grid-template-columns: 1fr 1fr; gap:14px}
.card{border:1px solid var(--line); border-radius:14px; background:#fff; padding:16px}
.card h2{margin:0 0 6px 0; font-size:18px; font-family:'Merriweather', serif}
.card p{margin:0; color:var(--muted); font-weight:600; line-height:1.55}
.list{margin:10px 0 0 0; padding-left:18px; color:#444; font-weight:650; line-height:1.6}

.callout{
  border:1px solid rgba(214,31,31,.35);
  background:#fff5f5;
  border-radius:14px;
  padding:14px;
  color:#222;
  font-weight:750;
  line-height:1.5;
}

.callout2{
  border:1px solid rgba(214,31,31,.35);
  background:#d79f9f;
  border-radius:14px;
  padding:14px;
  color:#222;
  font-weight:750;
  line-height:1.5;
}

.quote{
  border:1px solid var(--line);
  background:#fafafa;
  border-radius:14px;
  padding:14px;
  color:#333;
  font-weight:750;
  line-height:1.5;
}

/* Footer (desktop) */
footer{background:var(--bg); border-top:1px solid var(--line); box-shadow:var(--shadow-up); padding:0}
.footer-grid{display:none}
.footer-bottom{margin-top:0; padding:16px 20px; color:var(--subtext); font-weight:600; font-size:0.9rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px}
.footer-bottom a{color:#aaa; font-weight:600; font-size:0.9rem}
.footer-bottom a:hover{color:var(--brand); text-decoration:none}
.footer-bottom > span:first-child{order:2}
.footer-bottom > span:last-child{order:1}

/* Mobile mini footer + sheet */
.mini-footer{display:none; position:fixed; left:0; right:0; bottom:0; height:64px; background:rgba(255,255,255,.96); backdrop-filter:saturate(180%) blur(10px); border-top:1px solid var(--line); box-shadow: var(--shadow-up); z-index:60; padding-bottom: env(safe-area-inset-bottom)}
.mini-footer-inner{height:64px; display:flex; align-items:center; justify-content:center; gap:12px; font-weight:900}
.mini-footer-inner button{height:40px; background:#fff; border:1px solid var(--line); padding:0 14px; border-radius:12px; cursor:pointer; font-weight:900; color:#222}
.mini-footer-inner button:hover{background:#f6f6f6}

.sheet-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.32); backdrop-filter: blur(2px); display:none; z-index:80}
.sheet{position:fixed; left:0; right:0; bottom:0; width:min(560px, 95%); margin:0 auto; background:#fff; border-top-left-radius:22px; border-top-right-radius:22px; box-shadow:0 -18px 42px rgba(0,0,0,.22); transform:translateY(110%); transition:transform .22s cubic-bezier(.2,.9,.2,1); z-index:90; max-height:78vh; overflow:auto; padding:12px 14px 18px; padding-bottom: calc(18px + env(safe-area-inset-bottom))}
.sheet.open{transform:translateY(0)} .sheet-backdrop.open{display:block}
.sheet::before{content:""; display:block; width:44px; height:5px; border-radius:999px; background:rgba(0,0,0,.14); margin:8px auto 10px}
.sheet-header{display:flex; align-items:center; justify-content:center; padding:4px 2px 10px; position:relative}
.sheet-header b{font-size:1.02rem; letter-spacing:.2px; color:var(--brand); text-align:center}
.sheet-close{width:42px; height:42px; border-radius:12px; border:1px solid var(--line); background:#fff; cursor:pointer; color:var(--text); font-weight:900; font-size:18px; line-height:1; display:inline-flex; align-items:center; justify-content:center; position:absolute; right:2px; top:calc(50% - 10px); transform:translateY(-50%)}
.sheet-close:hover{background:#f6f6f6}
.sheet-group{margin-top:10px; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff}
.sheet-group-title{padding:10px 12px; background:#fff; font-weight:700; color:var(--text); border-bottom:1px solid var(--line); letter-spacing:.1px}
.sheet-item{display:flex; align-items:center; justify-content:space-between; padding:13px 12px; font-weight:600; color:#aaa; border-bottom:1px solid var(--line); font-size:1rem}
.sheet-item:hover{background:#fff; color:var(--brand); text-decoration:none}
.sheet-subitem{display:flex; align-items:center; justify-content:space-between; padding:13px 12px; font-weight:600; color:#aaa; border-bottom:1px solid var(--line); font-size:1rem}
.sheet-subitem:hover{background:#fff; color:var(--brand); text-decoration:none}
.sheet-item:last-child{border-bottom:none}
.sheet-subitem:last-child{border-bottom:none}
.chev{color:#999; font-weight:900}

@media (max-width:980px){
  .grid{grid-template-columns:1fr}
  .mini-footer{display:none !important}
  main{padding-bottom:0}
  h1{font-size:32px}

  footer{background:var(--bg); border-top:1px solid var(--line); box-shadow:var(--shadow-up); margin-top:14px}
  .footer-bottom{flex-direction:column; justify-content:center; align-items:center; text-align:center; gap:3px; padding:12px 12px; font-size:0.82rem}
  .footer-bottom > span:first-child{order:2}
  .footer-bottom > span:last-child{order:1}
  .footer-bottom > span:last-child{display:flex !important; justify-content:center; flex-wrap:nowrap; gap:8px; max-width:100%}
  .footer-bottom a{font-size:0.82rem}
}

@media (max-width:480px){
  .footer-bottom{font-size:0.7rem}
  .footer-bottom a{font-size:0.7rem}
  .footer-bottom{padding:8px 6px}
  .footer-bottom > span:last-child{gap:4px}
}

@media (max-width:768px){
  .header-inner{justify-content:center; gap:36px}
  nav{display:none}
}

@media (min-width: 1800px) {
  :root {
    --max: 1150px;
  }

  h1 {
    font-size: 2.6rem;
  }

  .claim {
    font-size: 1.1rem;
  }

  .lede {
    font-size: 1.05rem;
  }

  .btn {
    padding: 0 20px;
  }
}

@media (min-width: 2400px) {
  :root {
    --max: 1300px;
  }

  h1 {
    font-size: 3.1rem;
  }

  .claim {
    font-size: 1.25rem;
  }

  .lede {
    font-size: 1.1rem;
  }

  .btn {
    height: 48px;
    padding: 0 24px;
  }
}