/* Aladdin Lamp: shared styles for every standalone page (privacy, terms, and any new page).
   The color tokens below mirror the ones at the top of index.html. If you change the Home colors, change them here too,
   so every page keeps the same background. New pages: copy _page-template.html and link this file. */
:root{
  --bg:#F9F9FB;          /* page background, same as Home */
  --bg2:#EFEFF4;
  --line:#17161F;        /* hard ink lines */
  --hairline:#DCDCE5;
  --ink:#17161F;
  --ink2:#55555F;
  --ink3:#8A8A96;
  --accent:#4B44C9;
  --accent-sel:#3A3399;
  --font:'Bricolage Grotesque',system-ui,-apple-system,sans-serif;
  --mono:'Space Mono',ui-monospace,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font:16px/1.65 var(--mono)}
.page-head{display:flex;align-items:center;min-height:56px;padding:0 20px;border-bottom:1.5px solid var(--line)}
.page-head a{display:inline-flex;align-items:center;color:var(--ink)}
.page-head img{display:block;height:20px;width:auto}
main.page{max-width:680px;margin:0 auto;padding:48px 20px 96px}
.page h1{font:700 clamp(32px,6vw,44px)/1.05 var(--font);letter-spacing:-.03em;margin:0 0 8px}
.page h2{font:700 20px/1.2 var(--font);letter-spacing:-.01em;margin:36px 0 6px}
.page p{margin:0 0 14px}
.page .date{color:var(--ink2);font-size:14px}
.page a{color:var(--accent-sel);text-underline-offset:3px}
.page a:hover{color:var(--accent)}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.page-foot{display:flex;flex-wrap:wrap;gap:10px 18px;padding:14px 20px;border-top:1.5px solid var(--line);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.page-foot .foot-gap{flex:1;min-width:0}
.page-foot a{color:var(--ink2);text-underline-offset:3px}
.page-foot a:hover{color:var(--accent)}

/* ── Content pages (guides, designs, FAQ) ── */
.page-head .cta,.cta-block .cta{display:inline-flex;align-items:center;height:36px;padding:0 16px;background:var(--accent);color:#fff;font:400 11px var(--mono);text-transform:uppercase;letter-spacing:.1em;text-decoration:none}
.page-head .cta{margin-left:auto}
.page-head .cta:hover,.cta-block .cta:hover{background:var(--ink);color:#fff}
main.page.mid{max-width:820px}
main.page.wide{max-width:1040px}
.crumbs{margin:0 0 20px;font-size:12px;letter-spacing:.04em;color:var(--ink2)}
.crumbs a{color:var(--ink2)}
.page .lede{font-size:18px;line-height:1.6;margin:0 0 22px}
.page h3{font:700 17px/1.25 var(--font);margin:24px 0 6px}
.page ul,.page ol{margin:0 0 16px;padding-left:22px}
.page li{margin:0 0 8px}
.page strong{font-weight:700}
.page table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;margin:18px 0 24px;font-size:13px;line-height:1.45}
.page th,.page td{border:1.5px solid var(--line);padding:9px 11px;text-align:left;vertical-align:top}
.page th{background:var(--bg2);font-weight:400;font-size:11px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.note{margin:20px 0;padding:12px 16px;border:1.5px solid var(--line);border-left:4px solid var(--accent);background:var(--bg2);font-size:14px}
.note p{margin:0}
.cta-block{margin:40px 0 8px;padding:22px 24px;border:1.5px solid var(--line)}
.cta-block p{margin:0 0 14px}
.related{margin:32px 0 0;padding-top:20px;border-top:1.5px solid var(--line);font-size:14px}
.related h2{margin-top:0}
.related ul{list-style:none;padding:0}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));margin:20px 0 28px;border-top:1.5px solid var(--line);border-left:1.5px solid var(--line)}
.card{display:flex;flex-direction:column;border-right:1.5px solid var(--line);border-bottom:1.5px solid var(--line);color:var(--ink);text-decoration:none;min-width:0}
.card:hover{background:var(--bg2)}
.card img{display:block;width:100%;aspect-ratio:1/1;object-fit:contain;background:var(--bg)}
.card .meta{padding:12px 14px 16px;border-top:1.5px solid var(--line)}
.card h3{margin:0 0 4px;font:700 17px/1.2 var(--font)}
.card .tag{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
.card p{margin:8px 0 10px;font-size:13px;line-height:1.5;color:var(--ink2)}
.card .go{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-sel)}
.faq h2{margin-top:30px}
@media (max-width:600px){main.page{padding-top:32px}.page .lede{font-size:16px}}
.page a.card,.page a.card:hover{color:var(--ink);text-decoration:none}
.page a.card .go{color:var(--accent-sel)}
@media (max-width:600px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.card .meta{padding:10px 10px 12px}.card h3{font-size:15px}.card p{font-size:12px}}