:root{
  --color-primary:#2C3E50; /* Midnight Navy */
  --color-secondary:#C8A2C8; /* Elegant Lavender */
  --color-bg:#2C3E50; /* Navy canvas */
  --color-surface:#FDF5E6; /* Ivory */
  --color-danger:#9B2335; /* Rosewood */
  --color-text:#FDF5E6; /* On navy */
  --color-on-surface:#2C3E50; /* On ivory */
  --radius:12px; --shadow:0 2px 10px rgba(44,62,80,0.25);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--color-text); background:var(--color-bg)}

/* Global link color: Lavender on navy backgrounds */
a, a:visited, a:active { color: var(--color-secondary); }

.site-header{display:flex; align-items:center; justify-content:space-between; padding:24px 32px; background:var(--color-primary); box-shadow:var(--shadow)}
.site-header h1{display:flex; align-items:center; gap:10px; font-family:'DM Serif Display', Georgia, serif; font-weight:400; letter-spacing:0.3px}
.site-header h1 img{display:block; width:44px; height:44px; border-radius:50%; box-shadow:0 1px 2px rgba(0,0,0,0.2)}
.top-nav{display:flex; align-items:center; gap:8px}
.nav-bar .nav-item{display:flex; align-items:center; gap:8px; padding:8px 10px; background:transparent; border:1px solid rgba(253,245,230,0.2); color:var(--color-text); border-radius:999px; cursor:pointer; text-decoration:none}
.nav-bar .nav-item[aria-current="page"]{border-color: var(--color-secondary); background: rgba(200,162,200,0.15)}
.nav-bar .nav-item:hover{border-color: rgba(253,245,230,0.35)}
.nav-bar ion-icon{font-size:18px}
.nav-bar .nav-label{display:none}
@media (min-width: 720px){ .nav-bar .nav-label{display:inline} }

.container{max-width:960px; margin:0 auto; padding:32px 16px}
.card{background:var(--color-surface); color:var(--color-on-surface); border-radius:12px; padding:24px; box-shadow:var(--shadow); margin:24px 0}
.grid-3{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px}

.hero{padding:48px 0}
.hero h2{font-family:'DM Serif Display', Georgia, serif; font-weight:400; font-size:36px; margin:0 0 8px 0}
.hero p{max-width:56ch}
.actions{display:flex; gap:12px; margin-top:12px}
.btn{border:1px solid transparent; background:#eaeaea; color:var(--color-on-surface); padding:12px 16px; border-radius:10px; cursor:pointer; font-weight:700; text-decoration:none}
.btn.primary{background:var(--color-secondary); color:var(--color-primary)}

.checklist{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.toc-list li{display:block}
.toc-list summary{display:flex; align-items:center; gap:10px; cursor:pointer}
.toc-list summary .toc-chevron{margin-left:auto; transition: transform 160ms ease}
.toc-list details[open] .toc-chevron{transform: rotate(180deg)}
.toc-list details{border:1px solid rgba(44,62,80,0.12); border-radius:10px; padding:10px 12px; background:rgba(44,62,80,0.015)}
.toc-list details + li{margin-top:8px}
.toc-icon{width:1.3rem; height:1.3rem; flex:0 0 1.3rem}
.toc-desc{margin:10px 0 0 30px; color:var(--color-on-surface)}

  /* Mini‑App Benefits icons */
  .benefits-list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
  }
  .benefits-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
  }
  .benefits-list li::before { content: none !important; }
  .benefits-list ion-icon {
    color: #9B2335; /* Rosewood Red */
    font-size: 1.3rem;
    min-width: 1.3rem;
  }
blockquote{border-left:3px solid var(--color-secondary); padding-left:12px; margin:12px 0}

.site-footer{max-width:960px; margin:40px auto; padding:0 16px; color:rgba(253,245,230,0.8)}
.site-footer .footer-row{display:flex; align-items:center; justify-content:center; gap:16px; padding-top:12px; border-top:1px solid rgba(253,245,230,0.2)}
.site-footer .social-links{display:flex; gap:12px}
.site-footer .social-links a{display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:999px; border:1px solid rgba(253,245,230,0.25); color:var(--color-text)}
.site-footer .social-links a:hover{background:rgba(200,162,200,0.15); border-color:var(--color-secondary)}
.site-footer ion-icon{font-size:20px}

@media (min-width: 1024px){
  /* Make the logo larger on large screens */
  .site-header h1 img{width:80px; height:80px}
}
@media (min-width: 1440px){
  /* Extra-large displays: go even bigger */
  .site-header h1 img{width:96px; height:96px}
}

@media (max-width: 719px){
  .site-header{flex-direction:column; gap:8px}
  .site-header h1 img{width:40px; height:40px}
  .hero h2{font-size:30px}
}

/* FAQ dropdown styling */
#faq details{border:1px solid rgba(44,62,80,0.12); border-radius:10px; padding:10px 12px; background:rgba(44,62,80,0.015)}
#faq details + details{margin-top:8px}
#faq summary{display:flex; align-items:center; gap:10px; cursor:pointer; list-style:none}
#faq summary ion-icon{font-size:1.3rem}
#faq summary::-webkit-details-marker{display:none}
#faq .faq-chevron{margin-left:auto; transition: transform 160ms ease}
#faq details[open] .faq-chevron{transform: rotate(180deg)}
/* FAQ links should be Rosewood Red */
#faq a, #faq a:visited, #faq a:active { color: var(--color-danger); }