@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;
  font-display:swap;src:url('fonts/cormorant-regular.woff') format('woff')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:700;
  font-display:swap;src:url('fonts/cormorant-bold.woff') format('woff')}

:root{
  /* Exact GoBe design-system values (GoBeColors.swift) */
  --paper:#E8DCC4; --paper-light:#F5EBD3; --paper-aged:#D6C49F;
  --cardboard:#B88C58; --cardboard-dark:#7E5A32;
  --ink:#2B241D; --ink-muted:#6F675A;
  --go:#5E8205; --go-bright:#90C808; --be:#2F7BFF; --be-dark:#154AA8;
  --stamp:#E89135; --red:#E84C3D;
  --border:rgba(126,90,50,.35); --border-soft:rgba(126,90,50,.25);
  --shadow:rgba(43,36,29,.16);
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Avenir Next','Avenir','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
/* barely-there paper fibre grain, matching the app's paperGrain() pass */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9999;
  opacity:.035; mix-blend-mode:multiply; background-image:url('grain.svg');
}
.wrap{max-width:700px; margin:0 auto; padding:38px 22px 80px}

header.site{position:relative; border-bottom:1px solid var(--border); padding-bottom:18px; margin-bottom:34px}
/* washi-tape strip taped over the header, like the app's card headers */
header.site::before{
  content:""; position:absolute; top:-14px; right:26px; width:76px; height:17px;
  background:var(--go-bright); opacity:.72; transform:rotate(-2.5deg);
  box-shadow:inset 0 0 0 .5px rgba(126,90,50,.4);
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 1px,transparent 1px 8px);
}
.brand{display:inline-flex; align-items:center; text-decoration:none}
.brand img{height:56px; width:auto; display:block}
nav.top{margin-top:13px; font-size:12px; text-transform:uppercase; letter-spacing:1.2px; font-weight:600}
nav.top a{color:var(--ink-muted); text-decoration:none; margin-right:20px; padding-bottom:3px; border-bottom:2px solid transparent}
nav.top a:hover{color:var(--ink)}
nav.top a.active{color:var(--ink); border-bottom-color:var(--go-bright)}

h1{font-family:var(--serif); font-weight:700; font-size:44px; line-height:1.08; letter-spacing:.2px; margin:0 0 10px}
h2{font-family:var(--serif); font-weight:700; font-size:27px; line-height:1.15; margin:40px 0 12px; color:var(--ink)}
p{margin:0 0 16px}
ul{margin:0 0 16px; padding-left:22px}
li{margin:0 0 9px}
a{color:var(--be)}
strong{font-weight:700}

/* Passport-style stamp, used for the "Last updated" line */
.stamp{display:inline-block; font-size:12px; font-weight:700; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--stamp); border:1.5px solid rgba(232,145,53,.55);
  border-radius:4px; padding:5px 10px; transform:rotate(-1.5deg); margin:0 0 26px}

/* paperLight card with warm printed edge + soft ink shadow */
.card{background:var(--paper-light); border:1px solid var(--border-soft);
  border-radius:26px; padding:26px 28px; margin:0 0 24px;
  box-shadow:0 16px 34px rgba(43,36,29,.14), 0 2px 0 rgba(255,255,255,.55) inset}
.card h2{margin-top:0}
.lede{font-size:20px; color:var(--ink-muted); margin:0 0 26px; line-height:1.45}

footer.site{border-top:1px solid var(--border); margin-top:56px; padding-top:20px; color:var(--ink-muted); font-size:13.5px; line-height:1.55}
footer.site a{color:var(--ink-muted)}

/* Chunky sticker CTA — white die-cut face, coloured under-edge, uppercase ink label */
.btn{display:inline-block; background:#fff; color:var(--ink)!important; text-decoration:none;
  text-transform:uppercase; letter-spacing:.09em; font-weight:700; font-size:13px;
  padding:14px 24px; border-radius:14px; border:1px solid var(--border-soft);
  box-shadow:0 4px 0 rgba(47,123,255,.38), 0 8px 14px var(--shadow); margin:8px 0 6px;
  transition:transform .08s ease, box-shadow .08s ease}
.btn:active{transform:translateY(3px); box-shadow:0 1px 0 rgba(47,123,255,.38), 0 3px 6px var(--shadow)}
.mono{font-family:var(--sans); font-size:15px; color:var(--ink-muted); letter-spacing:.3px}
.flush{margin:0}

/* ---------- Landing page ---------- */
.eyebrow{font-size:12px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:var(--go); margin:0 0 8px}
.wrap.home{max-width:940px}

.hero{display:grid; grid-template-columns:1fr minmax(220px,300px); gap:38px; align-items:center; margin:8px 0 20px}
.hero h1{font-size:clamp(38px,6vw,60px); margin:0 0 16px}
.hero p{font-size:20px; color:var(--ink-muted); line-height:1.5; margin:0 0 22px; max-width:36ch}
.hero-cta{display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center}
.hero-cta.center{justify-content:center}
/* secondary text link next to a chunky button — quiet, on-brand, not a raw blue link */
.hero-cta a:not(.btn){color:var(--ink); font-weight:600; font-size:15px; text-decoration:none;
  border-bottom:2px solid var(--go-bright); padding-bottom:2px; transition:border-color .12s ease}
.hero-cta a:not(.btn):hover{border-bottom-color:var(--ink)}
.note{font-size:13px; color:var(--ink-muted); letter-spacing:.4px; margin:14px 0 0}

/* Phone screenshot as a hand-placed sticker card */
.shot{display:block; width:100%; height:auto; border-radius:26px;
  border:5px solid #fff; box-shadow:0 20px 40px rgba(43,36,29,.22), 0 0 0 1px var(--border-soft);
  background:#fff}
.hero .shot{transform:rotate(2deg)}

.features{display:grid; gap:30px; margin:56px 0 12px}
.feature{display:grid; grid-template-columns:minmax(220px,300px) 1fr; gap:36px; align-items:center;
  background:var(--paper-light); border:1px solid var(--border-soft); border-radius:26px; padding:28px;
  box-shadow:0 16px 34px rgba(43,36,29,.12), 0 2px 0 rgba(255,255,255,.55) inset}
.feature.rev{grid-template-columns:1fr minmax(220px,300px)}
.feature.rev .feat-media{order:2}
.feature h2{margin:0 0 12px; font-size:30px}
.feature p{margin:0; font-size:17px; line-height:1.55; color:var(--ink)}
.feature .shot{transform:rotate(-1.5deg)}
.feature.rev .shot{transform:rotate(1.5deg)}

.values{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:48px 0 8px}
.value{background:#fff; border:1px solid var(--border-soft); border-radius:16px; padding:18px 16px;
  box-shadow:0 6px 14px var(--shadow)}
.value .vtitle{font-family:var(--serif); font-weight:700; font-size:22px; margin:0 0 4px}
.value p{margin:0; font-size:13.5px; color:var(--ink-muted); line-height:1.4}

/* ---------- Profile handoff (/u/) ---------- */
/* The page a shared profile link lands on when GoBe isn't installed to catch it.
   Deliberately shows no profile data — just the handoff. */
.handoff{text-align:center; margin:26px 0 8px}
.handoff h1{font-size:clamp(32px,5.4vw,46px); margin:0 0 14px}
.handoff .lede{max-width:40ch; margin:0 auto 26px}
.handoff .hero-cta{justify-content:center}
/* Die-cut sticker window holding the app mark, same language as the app's share artefact */
.handoff-mark{display:inline-block; background:#fff; border:5px solid #fff; border-radius:24px;
  box-shadow:0 16px 34px rgba(43,36,29,.2), 0 0 0 1px var(--border-soft);
  transform:rotate(-2deg); margin:0 0 26px; line-height:0}
.handoff-mark img{width:96px; height:96px; border-radius:20px; display:block}

.closer{text-align:center; margin:56px 0 8px}
.closer h2{font-size:34px; margin:0 0 10px}
.closer p{color:var(--ink-muted); font-size:18px; margin:0 auto 22px; max-width:44ch}

@media (max-width:720px){
  .hero{grid-template-columns:1fr; gap:26px}
  .hero .shot{max-width:280px; margin:0 auto}
  .feature,.feature.rev{grid-template-columns:1fr; gap:22px}
  .feature.rev .feat-media{order:0}
  .feature .shot{max-width:260px; margin:0 auto}
  .values{grid-template-columns:repeat(2,1fr)}
}