/* GrabGuides — Shared Design System */

/* ===== FONTS ===== */
@import url('https://fonts.googleapis.com/css2?family=Afacad:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&display=swap');

/* ===== RESET ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ===== TOKENS ===== */
:root{
  --green-deep:#1B4332;
  --green-primary:#2D6A4F;
  --green-mid:#40916C;
  --green-light:#95D5B2;
  --green-pale:#D8F3DC;
  --tan:#D4A373;
  --tan-light:#E6CBA8;
  --tan-dark:#C08B4E;
  --cream:#FEFAE0;
  --off-white:#F8F7F2;
  --text-dark:#1A1A18;
  --text-mid:#3D3D38;
  --text-light:#6B6B63;
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --max-w:1100px;
  --max-w-narrow:780px;
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  font-family:'Afacad','Segoe UI',system-ui,-apple-system,sans-serif;
  color:var(--text-dark);
  background:var(--off-white);
  line-height:1.75;
  font-size:1.48rem;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{display:block;max-width:100%;height:auto}
a{color:inherit}

/* ===== SITE HEADER (ALWAYS VISIBLE) ===== */
.site-header{
  position:sticky;top:0;z-index:100;
  padding:0.65rem 1.25rem;
  background:var(--green-deep);
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid rgba(149,213,178,0.1);
}
.site-header .logo{
  text-decoration:none;display:flex;align-items:center;
}
.site-header .logo img{
  height:44px;width:auto;display:block;
}
.site-nav{display:flex;align-items:center;gap:2rem}
.site-nav a{
  color:rgba(254,250,224,0.6);font-size:1.32rem;font-weight:500;
  text-decoration:none;transition:color 0.2s;
}
.site-nav a:hover{color:var(--cream)}
.site-nav .nav-cta{
  background:var(--tan);color:var(--green-deep);
  padding:0.65rem 1.4rem;border-radius:6px;
  font-weight:700;font-size:1.2rem;
  transition:background 0.2s;
}
.site-nav .nav-cta:hover{background:var(--tan-light)}

/* ===== LAYOUT UTILITIES ===== */
.container{max-width:var(--max-w);margin:0 auto;padding:0 1.5rem}
.container-narrow{max-width:var(--max-w-narrow);margin:0 auto;padding:0 1.5rem}
section{padding:clamp(3.5rem,10vw,6rem) 0}

/* ===== TYPOGRAPHY ===== */
.section-label{
  display:inline-block;font-size:1.12rem;font-weight:700;
  letter-spacing:0.1em;text-transform:uppercase;
  color:var(--green-mid);margin-bottom:1rem;
}
.section-heading{
  font-size:clamp(2.5rem,6.5vw,4rem);
  font-weight:800;letter-spacing:-0.025em;
  line-height:1.12;margin-bottom:1.6rem;
}

/* ===== PRIMARY CTA ===== */
.cta-primary{
  display:inline-flex;align-items:center;gap:0.7rem;
  background:var(--tan);color:var(--green-deep);
  padding:1.5rem 3rem;border-radius:10px;
  font-size:1.62rem;font-weight:800;text-decoration:none;
  letter-spacing:-0.01em;border:none;font-family:inherit;cursor:pointer;
  transition:background 0.25s,transform 0.25s,box-shadow 0.25s;
  box-shadow:0 4px 20px rgba(212,163,115,0.3);
  -webkit-tap-highlight-color:transparent;
}
.cta-primary:hover{background:var(--tan-light);transform:translateY(-2px);box-shadow:0 8px 30px rgba(212,163,115,0.4)}
.cta-primary:active{transform:translateY(0);box-shadow:0 2px 10px rgba(212,163,115,0.3)}
.cta-primary.loading{opacity:0.7;pointer-events:none}
.cta-secondary{
  display:inline-flex;align-items:center;gap:0.7rem;
  background:transparent;color:var(--green-primary);
  padding:1.4rem 2.75rem;border-radius:10px;
  font-size:1.5rem;font-weight:700;text-decoration:none;
  border:2px solid var(--green-primary);font-family:inherit;cursor:pointer;
  transition:background 0.2s,color 0.2s;
  -webkit-tap-highlight-color:transparent;
}
.cta-secondary:hover{background:var(--green-primary);color:var(--cream)}

/* ===== SITE FOOTER ===== */
.site-footer{
  background:var(--green-deep);color:rgba(254,250,224,0.5);
  padding:3.5rem 1.5rem;
  padding-bottom:calc(3.5rem + var(--safe-bottom));
}
.footer-inner{
  max-width:var(--max-w);margin:0 auto;
  display:grid;grid-template-columns:1fr;gap:2rem;
}
.footer-brand .logo{
  text-decoration:none;display:inline-block;margin-bottom:0.5rem;
}
.footer-brand .logo img{
  height:52px;width:auto;display:block;
}
.footer-brand p{font-size:1.28rem;line-height:1.5;max-width:320px}
.footer-links h4{
  color:var(--cream);font-size:1.08rem;font-weight:700;
  letter-spacing:0.08em;text-transform:uppercase;margin-bottom:0.7rem;
}
.footer-links ul{list-style:none}
.footer-links li{margin-bottom:0.4rem}
.footer-links a{font-size:1.28rem;text-decoration:none;transition:color 0.2s}
.footer-links a:hover{color:var(--cream)}
.footer-bottom{
  margin-top:2rem;padding-top:1.5rem;
  border-top:1px solid rgba(149,213,178,0.1);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;
  font-size:1.08rem;
}
.footer-legal{display:flex;gap:1rem}
.footer-legal a{font-size:1.08rem;text-decoration:none;transition:color 0.2s}
.footer-legal a:hover{color:var(--cream)}
.footer-payments{display:flex;align-items:center;gap:0.85rem}
.footer-payments span{
  background:rgba(254,250,224,0.08);padding:0.4rem 0.8rem;
  border-radius:4px;font-size:0.98rem;font-weight:600;
  color:rgba(254,250,224,0.4);
}

/* ===== SCROLL REVEALS ===== */
.reveal{
  opacity:0;transform:translateY(20px);
  transition:opacity 0.6s cubic-bezier(0.16,1,0.3,1),transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:0.07s}
.reveal-delay-2{transition-delay:0.14s}
.reveal-delay-3{transition-delay:0.21s}
.reveal-delay-4{transition-delay:0.28s}
.reveal-delay-5{transition-delay:0.35s}
.reveal-delay-6{transition-delay:0.42s}

/* ===== RESPONSIVE ===== */
@media(max-width:639px){
  body{font-size:1.18rem}
  .site-nav{gap:1.1rem}
  .site-nav a{font-size:1.1rem}
  .site-header{padding:0.55rem 1rem}
  .site-header .logo img{height:38px}
  .container,.container-narrow{padding:0 1rem}
  .section-label{font-size:0.95rem}
  .section-heading{font-size:clamp(2rem,7vw,2.8rem)}
  .cta-primary{padding:1.2rem 2.2rem;font-size:1.35rem}
  .cta-secondary{padding:1.1rem 2rem;font-size:1.25rem}
  .footer-brand p,.footer-links a{font-size:1.1rem}
}
@media(max-width:399px){
  .site-nav a:not(.nav-cta){display:none}
}
@media(min-width:640px){
  section{padding:clamp(4rem,10vw,7rem) 0}
  .container{padding:0 3rem}
  .container-narrow{padding:0 3rem}
  .footer-inner{grid-template-columns:1.5fr 1fr 1fr}
}
@media(min-width:960px){
  .container{padding:0 4rem}
  .container-narrow{padding:0 4rem}
}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}
.no-js .reveal{opacity:1;transform:none}