/* Shared look for shipmunk.ai's content pages: the landing's dark tokens, type and controls. */
@font-face { font-family:'DM Sans'; font-style:normal; font-weight:400; font-display:swap; src:url(/assets/fonts/dm-sans-400.woff2) format('woff2'); }
@font-face { font-family:'DM Sans'; font-style:normal; font-weight:500; font-display:swap; src:url(/assets/fonts/dm-sans-500.woff2) format('woff2'); }
@font-face { font-family:'DM Sans'; font-style:normal; font-weight:600; font-display:swap; src:url(/assets/fonts/dm-sans-600.woff2) format('woff2'); }
@font-face { font-family:'DM Sans'; font-style:normal; font-weight:700; font-display:swap; src:url(/assets/fonts/dm-sans-700.woff2) format('woff2'); }

:root {
  color-scheme:dark;
  --bg:#0A0A0B; --surface:#141416; --soft:rgba(255,255,255,0.035); --line:rgba(255,255,255,0.08);
  --ink:#F4F4F6; --ink2:#C9CAD0; --muted:#8E919A; --accent:#6C4CF1; --accent-ink:#A996FF;
  --accent-soft:#221A44; --edge:rgba(255,255,255,0.09); --hl:rgba(255,255,255,0.08);
  --ease:cubic-bezier(.22,.8,.2,1);
}
*, *::before, *::after { box-sizing:border-box; }
html { background:var(--bg); scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font:18px/1.6 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing:antialiased; }
a { color:var(--accent-ink); text-decoration:none; transition:color 220ms var(--ease), background-color 220ms var(--ease), border-color 220ms var(--ease); }
a:hover { color:#C6B9FF; }
a:focus-visible, summary:focus-visible { outline:2px solid #8B72F5; outline-offset:3px; border-radius:6px; }
h1, h2, h3 { text-wrap:balance; color:var(--ink); }
p, li { text-wrap:pretty; }
img { max-width:100%; height:auto; }
.skip { position:absolute; left:-9999px; top:8px; padding:8px 12px; background:var(--surface); border-radius:8px; }
.skip:focus { left:8px; z-index:20; }

/* Header and footer */
.site-head { max-width:1180px; margin:0 auto; padding:20px clamp(16px, 4vw, 32px); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 20px; }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); font-weight:700; font-size:19px; letter-spacing:-0.05em; }
.brand:hover { color:var(--ink); }
.site-nav { display:flex; flex-wrap:wrap; gap:4px; padding:5px; border-radius:12px; background:rgba(255,255,255,0.04); border:1px solid var(--edge); font-size:14.5px; }
.site-nav a { height:34px; padding:0 14px; border-radius:8px; color:var(--ink2); display:inline-flex; align-items:center; white-space:nowrap; }
.site-nav a:hover, .site-nav a[aria-current="page"] { background:var(--soft); color:var(--ink); }
.site-nav a[aria-current="page"] { box-shadow:inset 0 0 0 1px var(--line); }
.btn { height:44px; padding:0 20px; border-radius:10px; display:inline-flex; align-items:center; font-size:15px; font-weight:600; white-space:nowrap; }
.btn-primary { background:var(--accent); color:#fff; box-shadow:0 1px 0 rgba(255,255,255,0.35) inset, 0 8px 20px -8px rgba(108,76,241,0.6); }
.btn-primary:hover { background:#5638D6; color:#fff; }
.btn-ghost { border:1px solid var(--line); color:var(--ink); }
.btn-ghost:hover { border-color:var(--ink2); color:var(--ink); }
.site-foot { border-top:1px solid var(--line); margin-top:clamp(64px, 9vw, 120px); }
.site-foot .inner { max-width:1180px; margin:0 auto; padding:40px clamp(16px, 4vw, 32px) 56px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px 40px; font-size:14.5px; color:var(--muted); }
.site-foot nav { display:flex; flex-wrap:wrap; gap:10px 22px; }
.site-foot a { color:var(--ink2); }
.site-foot a:hover { color:var(--ink); }

/* Content */
main { display:block; }
.wrap { max-width:1180px; margin:0 auto; padding:0 clamp(16px, 4vw, 32px); }
.hero { padding:clamp(48px, 8vw, 104px) 0 clamp(32px, 5vw, 56px); max-width:860px; }
.eyebrow { display:inline-flex; align-items:center; height:28px; padding:0 12px; border-radius:8px; background:var(--surface); border:1px solid var(--line); font-size:12px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink2); }
.hero h1 { margin:20px 0 0; font-size:clamp(2.6rem, 6vw, 4.6rem); line-height:1; letter-spacing:-0.04em; }
.lede { margin:24px 0 0; font-size:clamp(1.1rem, 1.6vw, 1.3rem); color:var(--ink2); max-width:60ch; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.crumbs { font-size:14px; color:var(--muted); padding-top:8px; }
.crumbs a { color:var(--muted); }
.crumbs a:hover { color:var(--ink); }
.prose { max-width:760px; }
.prose h2 { margin:clamp(56px, 7vw, 88px) 0 0; font-size:clamp(1.8rem, 3.2vw, 2.6rem); line-height:1.1; letter-spacing:-0.03em; }
.prose h3 { margin:36px 0 0; font-size:1.3rem; line-height:1.25; letter-spacing:-0.01em; }
.prose p, .prose ul, .prose ol { margin:16px 0 0; color:var(--ink2); }
.prose li + li { margin-top:8px; }
.prose strong { color:var(--ink); font-weight:600; }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:16px; margin-top:28px; }
.card { padding:24px; border-radius:16px; background:linear-gradient(145deg, rgba(255,255,255,0.065), rgba(255,255,255,0.015)); border:1px solid var(--line); }
.card h3 { margin:0; font-size:1.15rem; }
.card p { margin:10px 0 0; font-size:16px; color:var(--ink2); }
.steps { list-style:none; padding:0; margin:28px 0 0; counter-reset:step; }
/* Links inside running text are underlined, not told apart by colour alone. */
.prose p a, .prose li a, .faq p a, .lede a, .cta p a { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.steps > li { position:relative; padding:0 0 28px 56px; counter-increment:step; }
.steps > li::before { content:counter(step, decimal-leading-zero); position:absolute; left:0; top:0; width:40px; height:40px; border-radius:10px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent-ink); font-weight:700; font-size:14px; }
.steps > li h3 { margin:6px 0 0; }
.steps > li p { margin:8px 0 0; }
.faq details { border-bottom:1px solid var(--line); padding:20px 0; }
.faq summary { cursor:pointer; list-style:none; font-weight:600; font-size:1.1rem; color:var(--ink); display:flex; justify-content:space-between; gap:16px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; color:var(--muted); font-weight:500; }
.faq details[open] summary::after { content:"–"; }
.faq details p { margin:12px 0 0; color:var(--ink2); }
.beta { display:inline-flex; align-items:center; height:22px; padding:0 9px; border-radius:999px; background:var(--accent-soft); border:1px solid color-mix(in oklab, #6C4CF1 45%, transparent); color:color-mix(in oklab, #6C4CF1 40%, var(--ink)); font:600 11px/1 'DM Sans', system-ui, sans-serif; letter-spacing:0.1em; text-transform:uppercase; white-space:nowrap; vertical-align:middle; }
.cta { margin-top:clamp(64px, 9vw, 112px); padding:clamp(32px, 5vw, 56px); border-radius:24px; background:var(--surface); border:1px solid var(--line); text-align:center; }
.cta h2 { margin:0; font-size:clamp(1.8rem, 3.6vw, 2.8rem); letter-spacing:-0.03em; line-height:1.1; }
.cta p { margin:14px auto 0; max-width:52ch; color:var(--ink2); }
.cta .actions { justify-content:center; }
.related { margin-top:56px; }
.related h2 { font-size:1.3rem; margin:0; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition:none !important; animation:none !important; } html { scroll-behavior:auto; } }