/* Shared styles for guide, privacy and 404 pages. Tokens mirror the homepage. */
:root {
    --paper: #fbf8f2;
    --paper-2: #f3eee3;
    --card: #ffffff;
    --ink: #1f2b33;
    --ink-2: #47545d;
    --muted: #66717a;
    --line: #e7dfd0;
    --line-2: #d8cdb8;
    --sky: #1b6f9c;
    --sky-deep: #135475;
    --sky-soft: #e1f0f7;
    --sky-tint: #c6e3f0;
    --ok: #1f7a4a;
    --ok-soft: #e2f3e8;
    --warn: #8a5a00;
    --warn-soft: #fbefd3;
    --shadow: 0 1px 2px rgba(83, 64, 30, .06), 0 10px 30px -12px rgba(83, 64, 30, .18);
    --r-lg: 28px;
    --r-md: 18px;
    --r-sm: 10px;
    --display: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;
    --body: 'Figtree', system-ui, -apple-system, sans-serif;
    --hand: 'Caveat', 'Bradley Hand', cursive;
    --mono: ui-monospace, 'SF Mono', Menlo, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    font-size: 17px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--sky); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--sky-deep); }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 8px; }
::selection { background: var(--sky-tint); color: var(--ink); }

/* ---------- header ---------- */
header.bar {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
    height: 68px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
header.bar .brand {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--display); font-weight: 800; font-size: 1.15rem;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-decoration: none;
}
header.bar .brand::before {
    content: ''; width: 34px; height: 34px; border-radius: 9px; flex: none;
    background: url(/images/app-icon-102.webp) center / cover no-repeat;
}
header.bar a.get {
    display: inline-flex; align-items: center; white-space: nowrap; flex: none;
    font-weight: 700; font-size: .92rem; line-height: 1.2;
    color: #fff; background: var(--sky);
    padding: 9px 16px; border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 8px 20px -8px rgba(27, 111, 156, .6);
    transition: background .2s, transform .15s;
}
header.bar a.get:hover { background: var(--sky-deep); color: #fff; transform: translateY(-1px); }

/* ---------- article ---------- */
article {
    max-width: 720px;
    margin: 0 auto;
    padding: 32px 24px 0;
}
.crumbs {
    font-size: .9rem;
    font-weight: 500;
    color: var(--muted);
    margin-bottom: 20px;
}
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.crumbs li + li::before { content: '›'; margin-right: 8px; color: var(--line-2); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--sky); }

h1, h2, h3 { font-family: var(--display); color: var(--ink); text-wrap: balance; }
p { text-wrap: pretty; }
article h1 {
    font-weight: 800;
    font-size: clamp(2.3rem, 6vw, 3.5rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
    font-variation-settings: "opsz" 96;
    margin-bottom: 18px;
}
.byline {
    font-size: .95rem;
    color: var(--muted);
    padding-bottom: 24px;
    margin-bottom: 32px;
    border-bottom: 2px dashed var(--line);
}
.byline a { color: var(--ink-2); font-weight: 600; text-decoration: none; }
.byline a:hover { color: var(--sky); }

.answer {
    background: var(--card);
    border-radius: var(--r-md);
    box-shadow: var(--shadow);
    border-left: 5px solid var(--sky);
    padding: 22px 24px;
    margin-bottom: 40px;
    font-size: 1.05rem;
    color: var(--ink);
}
.answer p { color: var(--ink); margin: 0; }
.answer p + p { margin-top: 12px; }
.answer strong { font-weight: 700; }

article h2 {
    font-weight: 800;
    font-size: clamp(1.6rem, 4vw, 2.1rem);
    line-height: 1.12;
    letter-spacing: -0.025em;
    font-variation-settings: "opsz" 72;
    margin: 52px 0 14px;
}
article h3 {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin: 30px 0 8px;
}
article p, article li { color: var(--ink-2); }
article p { margin-bottom: 18px; }
article p strong, article li strong { color: var(--ink); font-weight: 700; }
article ul, article ol.steps { margin: 0 0 22px 22px; }
article li { margin-bottom: 8px; }
article li::marker { color: var(--sky); }

code {
    font-family: var(--mono);
    font-size: .86em;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 1px 6px;
    color: var(--ink);
}
pre {
    background: #1f2b33;
    color: #e9eef1;
    border-radius: var(--r-md);
    padding: 18px 20px;
    overflow-x: auto;
    margin: 0 0 22px;
    font-size: 14px;
    line-height: 1.65;
}
pre code { background: none; border: none; padding: 0; font-size: inherit; color: inherit; }

.table-wrap {
    background: var(--card);
    border-radius: var(--r-md);
    box-shadow: var(--shadow);
    overflow-x: auto;
    margin: 0 0 24px;
}
table { width: 100%; border-collapse: collapse; min-width: 520px; font-size: 15px; line-height: 1.5; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--paper-2); vertical-align: top; }
tr:last-child th, tr:last-child td { border-bottom: none; }
thead th {
    font-size: .85rem;
    font-weight: 700;
    color: var(--muted);
    background: var(--paper-2);
}
tbody th { color: var(--ink); font-weight: 700; }
td { color: var(--ink-2); }

.note {
    background: var(--warn-soft);
    border-radius: var(--r-md);
    padding: 16px 20px;
    margin: 0 0 22px;
    color: var(--ink-2);
}
.note strong { color: var(--warn); }

.faq { margin-top: 8px; }
.faq h3 { margin-top: 26px; }

.cta {
    position: relative;
    margin: 56px 0 0;
    padding: 36px 28px;
    border-radius: var(--r-lg);
    background: var(--sky);
    color: #fff;
    text-align: center;
    box-shadow: var(--shadow);
}
.cta h2 { margin: 0 0 10px; color: #fff; }
.cta p { margin: 0 auto 22px; max-width: 46ch; color: rgba(255,255,255,.88); }
.cta .btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cta a.btn {
    font-size: 1rem;
    font-weight: 700;
    padding: 13px 22px;
    border-radius: 999px;
    text-decoration: none;
    transition: transform .15s, background .2s;
}
.cta a.btn:hover { transform: translateY(-1px); }
.cta a.primary { color: var(--sky-deep); background: #fff; }
.cta a.primary:hover { color: var(--ink); }
.cta a.ghost { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); }
.cta a.ghost:hover { color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }

.author {
    margin-top: 40px;
    padding: 22px 24px;
    background: var(--card);
    border-radius: var(--r-md);
    box-shadow: var(--shadow);
    font-size: 15px;
}
.author p { margin: 0; }

.related { margin-top: 40px; }
.related h2 { font-size: 1.5rem; margin: 0 0 12px; }
.related ul { list-style: none; margin: 0; }
.related li { border-top: 1px solid var(--line); padding: 12px 0; margin: 0; }
.related a { font-weight: 600; text-decoration: none; }
.related a:hover { text-decoration: underline; }

/* ---------- footer ---------- */
footer.foot {
    max-width: 1080px;
    margin: 72px auto 0;
    padding: 32px 24px 48px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 24px;
    font-size: .95rem;
    color: var(--muted);
}
footer.foot a { color: var(--ink-2); text-decoration: none; }
footer.foot a:hover { color: var(--sky); text-decoration: underline; }

/* ---------- 404 ---------- */
.lost {
    max-width: 560px;
    margin: 0 auto;
    padding: 12vh 24px 0;
    text-align: center;
}
.lost .hand { font-family: var(--hand); font-size: 1.6rem; color: var(--sky-deep); transform: rotate(-3deg); margin-bottom: 8px; }
.lost h1 {
    font-weight: 800;
    font-size: clamp(2.3rem, 7vw, 3.4rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
    margin-bottom: 14px;
}
.lost p { color: var(--ink-2); margin-bottom: 26px; }
.lost .btn {
    display: inline-flex; font-weight: 700; color: #fff; background: var(--sky);
    padding: 14px 24px; border-radius: 999px; text-decoration: none;
}
.lost .btn:hover { background: var(--sky-deep); color: #fff; }

@media (max-width: 600px) {
    body { font-size: 16px; }
    header.bar, article, .lost, footer.foot { padding-left: 16px; padding-right: 16px; }
    article { padding-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}