:root{--teal:#0F766E;--teal-dark:#0B3B37;--coral:#FF7A59;--cream:#FFF8EF;--paper:#FFFFFF;--ink:#1F2A29;--muted:#4F5F5C;--line:#E6DACB}
*{box-sizing:border-box}
html{font-size:100%}
body{margin:0;background:var(--cream);color:var(--ink);font:1rem/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-text-size-adjust:100%}
a{color:var(--teal)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--teal-dark);outline-offset:3px}
.wrap{max-width:68rem;margin:0 auto;padding:0 1.25rem}
.banner{background:var(--teal-dark);color:#fff;padding:.5rem 1.25rem;text-align:center;font-size:.9375rem}
header.top{display:flex;align-items:center;gap:.75rem;padding:1rem 0}
header.top img{width:40px;height:40px;border-radius:10px}
header.top strong{font-size:1.25rem;color:var(--teal-dark)}
.hero{display:grid;gap:2rem;padding:.5rem 0 3rem}
h1{font-size:2.125rem;line-height:1.15;margin:0 0 .75rem;color:var(--teal-dark);font-weight:800}
h2{font-size:1.5rem;line-height:1.25;margin:0 0 .75rem;color:var(--teal-dark)}
.sub{font-size:1.1875rem;color:var(--muted);margin:0 0 1.25rem;max-width:34rem}
form.signup{display:flex;flex-direction:column;gap:.75rem;max-width:30rem}
form.signup label{font-weight:600}
input[type=email]{font:inherit;padding:.875rem 1rem;border:2px solid var(--teal);border-radius:12px;background:#fff;min-height:48px;width:100%}
button.cta{font:inherit;font-weight:700;background:var(--coral);color:var(--teal-dark);border:0;border-radius:12px;min-height:52px;padding:.75rem 1.25rem;cursor:pointer}
button.cta:hover{background:#ff8d70}
.trust{font-size:.9375rem;color:var(--muted);margin:.5rem 0 0;max-width:30rem}
.thanks{background:var(--paper);border:2px solid var(--teal);border-radius:16px;padding:1.25rem;max-width:30rem}
.thanks p{margin:0 0 .5rem}
[hidden]{display:none!important}
/* the note card: the page's one signature element */
.note{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:1.5rem;box-shadow:0 2px 0 var(--line);transform:rotate(-1.5deg);max-width:24rem;position:relative}
.note::before{content:"";position:absolute;top:-10px;right:28px;width:44px;height:20px;background:var(--coral);border-radius:4px;transform:rotate(4deg)}
.note h3{margin:0 0 .75rem;font-size:1.0625rem;color:var(--teal-dark)}
.note dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.375rem 1rem}
.note dt{color:var(--muted)}
.note dd{margin:0;font-weight:600}
.note p{margin:1rem 0 0;padding-top:.75rem;border-top:1px dashed var(--line);font-style:italic}
section.band{padding:2.5rem 0;border-top:1px solid var(--line)}
ul.inside{padding-left:1.25rem;margin:0;max-width:40rem}
ul.inside li{margin:.5rem 0}
.app{display:flex;gap:1rem;align-items:center;max-width:40rem}
.app img{width:72px;height:72px;border-radius:16px;flex:none}
.app p{margin:0}
footer{padding:2rem 0 3rem;border-top:1px solid var(--line);color:var(--muted);font-size:.9375rem}
footer p{margin:.25rem 0}
@media(min-width:56rem){h1{font-size:3rem}.hero{grid-template-columns:1.2fr .8fr;align-items:center;padding:2rem 0 4rem}.note{justify-self:center}}
@media(prefers-reduced-motion:no-preference){.note{transition:transform .2s}.note:hover{transform:rotate(0)}}
/* guide */
article{max-width:42rem;margin:0 auto;padding:1rem 1.25rem 3rem}
article h1{font-size:2rem}
article h2{margin-top:2rem}
pre{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:1rem;overflow-x:auto;font-size:.9375rem;line-height:1.5}
.bridge{background:var(--paper);border:2px solid var(--teal);border-radius:16px;padding:1.25rem;margin-top:2rem}
@media print{body{background:#fff}.noprint{display:none}}