/* Shared by the homepage, /how-it-works and /guides (redesign, 30 Sep 2026).
   Tokens match the homepage-redesign canvas. */
:root{
  --page:#F4F1E8; --ink:#192826; --body:#4A5B57; --teal:#0C6F63; --deep:#085549;
  --mint:#DFF0EC; --line:#E4DFD5; --gold:#E8B86D; --sage:#D9E8D5; --card:#FFFFFF;
  --shadow-rest:0 1px 2px rgba(25,40,38,.06),0 8px 24px rgba(25,40,38,.06);
  --shadow-float:0 2px 4px rgba(25,40,38,.05),0 24px 56px rgba(25,40,38,.12);
  --display:'Inter Tight','Inter',-apple-system,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;color:var(--ink);background:var(--page);-webkit-font-smoothing:antialiased;line-height:1.5}
h1,h2,h3,p{margin:0}
img{max-width:100%}
a{color:var(--teal);text-decoration:none}
a:hover{color:var(--deep)}
a:focus-visible,button:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
[hidden]{display:none!important}

.wrap{max-width:1280px;margin:0 auto;padding:0 80px}
/* Sections that are also .wrap set their own vertical padding; the side gutter must survive that. */
.wrap.wrap{padding-left:80px;padding-right:80px}
.eyebrow{font-size:14px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--teal)}
.h2{font-family:var(--display);font-size:clamp(34px,4vw,52px);font-weight:600;letter-spacing:-.035em;line-height:1.1}
.lede{font-size:19px;line-height:1.55;color:var(--body)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:56px;padding:0 30px;border-radius:999px;background:var(--teal);color:#fff;font-size:17px;font-weight:600;white-space:nowrap}
.btn:hover{background:var(--deep);color:#fff}
.btn-white{background:#fff;color:var(--deep)}
.btn-white:hover{background:var(--mint);color:var(--deep)}
.arrow-link{display:inline-flex;align-items:center;gap:8px;font-size:17px;font-weight:600}
.tag{padding:5px 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.t-pri{background:#FBE3DF;color:#9B2C1F}.t-inv{background:#FBEFD6;color:#7A4E00}.t-mon{background:var(--mint);color:var(--deep)}

/* Header */
.hdr{border-bottom:1px solid var(--line);background:var(--page);position:relative;z-index:20}
.hdr-in{height:80px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.hdr-logo img{display:block;width:112px;height:63px}
.hdr-nav{display:flex;gap:40px;font-size:16px;font-weight:500}
.hdr-nav a{color:var(--ink)}
.hdr-nav a:hover{color:var(--teal)}
.hdr-nav a[aria-current="page"]{color:var(--teal);font-weight:600;box-shadow:inset 0 -2px 0 var(--teal);padding-bottom:4px}
.hdr-act{display:flex;align-items:center;gap:24px}
.mp{height:44px;padding:0 18px;display:flex;align-items:center;gap:10px;border-radius:999px;border:1.5px solid var(--teal);color:var(--teal);font-size:15px;font-weight:600;white-space:nowrap}
.mp:hover{background:var(--mint)}
.mp-sep{width:1px;height:18px;background:#B9D8D1}
.mp-login{font-weight:500;color:var(--body)}
.launch{height:44px;padding:0 22px;display:flex;align-items:center;border-radius:999px;background:var(--teal);color:#fff;font-size:15px;font-weight:600;white-space:nowrap}
.launch:hover{background:var(--deep);color:#fff}
.burger{display:none;width:44px;height:44px;border:0;background:transparent;align-items:center;justify-content:center;padding:0;cursor:pointer;color:var(--ink)}
.mnav{display:none;flex-direction:column;border-top:1px solid var(--line);background:#fff}
.mnav a{padding:15px 20px;font-size:16px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line)}
.mnav.open{display:flex}

/* Footer */
.ftr{background:var(--ink);color:#D4DCD9;padding:64px 0 40px}
.ftr-grid{display:flex;gap:96px;flex-wrap:wrap}
.ftr-brand{width:320px;display:flex;flex-direction:column;gap:14px}
.ftr-brand img{display:block;width:112px;height:63px}
.ftr-brand p{font-size:15px;line-height:1.5}
.ftr-col{display:flex;flex-direction:column;gap:12px;font-size:15px}
.ftr-col span{font-size:13px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#9FB0AB}
.ftr-col a{color:#fff}
.ftr-col a:hover{color:var(--mint)}
.ftr-fine{margin-top:40px;padding-top:24px;border-top:1px solid #33443F;font-size:13px;line-height:1.6;color:#9FB0AB}
.ftr-fine a{color:#9FB0AB;text-decoration:underline}

@media (max-width:1100px){
  .wrap{padding:0 40px}
  .wrap.wrap{padding-left:40px;padding-right:40px}
  .hdr-nav{gap:28px}
  .ftr-grid{gap:56px}
}
@media (max-width:900px){
  .hdr-nav,.mp{display:none}
  .burger{display:flex}
  .hdr-act{gap:6px}
  .hdr-in{height:64px}
  .hdr-logo img{width:86px;height:48px}
}
@media (max-width:640px){
  .wrap{padding:0 16px}
  .wrap.wrap{padding-left:16px;padding-right:16px}
  .launch{height:40px;padding:0 16px;font-size:14px}
  .ftr{padding:40px 0 32px}
  .ftr-brand{width:100%}
  .ftr-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}
  .ftr-brand{grid-column:1/-1}
  .lede{font-size:17px}
}

/* Scroll reveal: sections fade up as they come into view (site.js adds .js and .in). */
html.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
html.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.js .reveal{opacity:1;transform:none;transition:none}}

/* Carousel (phones): a row of tiles becomes a swipeable strip with dots (site.js builds the dots). */
.car-dots{display:none}
@media (max-width:640px){
  .car{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:14px!important;margin-left:-16px;margin-right:-16px;padding:4px 16px 14px;scroll-padding:0 16px}
  .car::-webkit-scrollbar{display:none}
  .car>*{flex:0 0 84%;scroll-snap-align:start}
  .car-dots{display:flex;justify-content:center;gap:2px;margin-top:4px}
  .car-dots button{width:28px;height:32px;border:0;background:transparent;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center}
  .car-dots button::after{content:"";width:8px;height:8px;border-radius:999px;background:#C9D6D1;transition:width .3s,background .3s}
  .car-dots button[aria-current="true"]::after{width:22px;background:var(--teal)}
}