/* Shared styles for FloatyNote SEO satellite pages. Brand-matched to the
   landing page but standalone — the landing page (index.html) is untouched. */
:root{
  --ink:#211c16; --ink-soft:#5d564c; --ink-faint:#8d857a;
  --paper:#faf7f1; --paper-deep:#f3eee4; --card:#fff;
  --note:#ffe89a; --note-deep:#ffd84d; --note-edge:#e8b931; --accent:#b07c10;
  --line:#e7e0d2; --radius:14px;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;
  --shadow:0 1px 2px rgba(33,28,22,.06),0 8px 24px rgba(33,28,22,.08);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:"Inter",-apple-system,BlinkMacSystemFont,sans-serif;background:var(--paper);color:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased}
::selection{background:var(--note-deep);color:var(--ink)}
a{color:var(--accent)}
.wrap{max-width:760px;margin:0 auto;padding:0 24px}
h1,h2,h3{line-height:1.18;letter-spacing:-.02em}

nav{position:sticky;top:0;z-index:50;background:rgba(250,247,241,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(231,224,210,.6)}
.nav-inner{max-width:1080px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;text-decoration:none;color:var(--ink)}
.logo-mark{width:30px;height:30px;border-radius:8px;background:linear-gradient(160deg,var(--note),var(--note-deep));box-shadow:inset 0 -2px 0 rgba(176,124,16,.25),0 2px 6px rgba(33,28,22,.12);display:grid;place-items:center;font-size:15px;transform:rotate(-4deg)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 22px;border-radius:999px;font-size:15px;font-weight:600;line-height:1;white-space:nowrap;text-decoration:none;transition:transform .2s,box-shadow .2s;cursor:pointer;border:none}
.btn-primary{background:var(--ink);color:var(--paper);box-shadow:0 2px 6px rgba(33,28,22,.25)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(33,28,22,.3)}
.btn-note{background:var(--note-deep);color:var(--ink);box-shadow:0 4px 14px rgba(255,216,77,.3)}
.btn-note:hover{transform:translateY(-2px)}

main{padding:56px 0 40px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--note-deep);border-radius:2px}
h1{font-size:clamp(30px,5vw,44px);font-weight:800;margin-bottom:18px}
.lede{font-size:19px;color:var(--ink-soft);margin-bottom:32px}
article h2{font-size:26px;font-weight:800;margin:40px 0 14px}
article h3{font-size:19px;font-weight:700;margin:28px 0 8px}
article p{margin-bottom:16px;color:var(--ink-soft);font-size:16.5px}
article p strong{color:var(--ink)}
article ul{margin:0 0 18px 22px;color:var(--ink-soft);font-size:16.5px}
article li{margin-bottom:8px}
kbd{font-family:var(--mono);font-size:12.5px;background:var(--paper-deep);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:1px 7px;color:var(--ink)}

.cta-box{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:var(--shadow);text-align:center;margin:40px 0}
.cta-box h2{margin:0 0 6px;font-size:22px}
.cta-box p{margin:0 0 18px;font-size:15px}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.cta-fine{font-size:13px;color:var(--ink-faint);margin-top:14px}

.faq{margin:32px 0}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:16.5px;padding:16px 30px 16px 0;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:50%;translate:0 -50%;font-size:22px;color:var(--ink-faint);transition:rotate .25s}
.faq details[open] summary::after{rotate:45deg}
.faq details p{padding:0 0 18px;font-size:15.5px}

.related{margin:40px 0;font-size:15px}
.related a{margin-right:18px;white-space:nowrap}
footer{border-top:1px solid var(--line);padding:28px 0 40px;font-size:13.5px;color:var(--ink-faint)}
footer a{color:var(--ink-soft);text-decoration:none}
.crumb{font-size:13.5px;color:var(--ink-faint);margin-bottom:20px}
.crumb a{color:var(--ink-soft);text-decoration:none}