/* Shared styles of the guide pages (Site 1.6.0). The base rules repeat the landing pages so both look alike. */
/* ── Manrope Variable, three subsets ─────────────────────────────── */
@font-face{font-family:"Manrope Variable";font-style:normal;font-display:swap;font-weight:200 800;src:url(/site/fonts/manrope-cyrillic-wght-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Manrope Variable";font-style:normal;font-display:swap;font-weight:200 800;src:url(/site/fonts/manrope-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Manrope Variable";font-style:normal;font-display:swap;font-weight:200 800;src:url(/site/fonts/manrope-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ── Tokens: the app's obsidian manuscript ───────────────────────── */
:root{
  --void:#070609;--paper:#0C0B0F;--paper-bright:#15131A;
  --ink:#F5EFE5;--ink-soft:#D8D0C4;--muted:#B5AC9F;
  --acid:#F0CE57;--on-acid:#17130A;
  --heart:#E77769;--head:#8298F0;--life:#72B896;--fate:#AC8AC8;
  --line:rgba(245,239,229,.14);--line-2:rgba(245,239,229,.26);
  --gold-1:rgba(240,206,87,.24);--gold-2:rgba(240,206,87,.55);
  --halo:rgba(8,8,7,.78);
  --font:"Manrope Variable","Avenir Next",system-ui,sans-serif;
  --mono:"SFMono-Regular","Roboto Mono","Liberation Mono",monospace;
  --gutter:clamp(16px,4.4vw,56px);--max:1280px;
  --head-h:64px;--ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:dark;background:var(--void);-webkit-text-size-adjust:100%;scroll-padding-top:84px}
@media (max-width:899px){html{scroll-padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}}
body{margin:0;min-width:320px;background:var(--void);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:750;text-wrap:balance;letter-spacing:-.035em}
p,li,dd,figcaption,summary,td,th{text-wrap:pretty}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
table{border-collapse:collapse}
a,button,summary,label{-webkit-tap-highlight-color:transparent}
:where(a,button,summary,[tabindex]):focus-visible{outline:3px solid var(--head);outline-offset:3px;border-radius:2px}
main:focus{outline:none}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:0}
.nw{white-space:nowrap}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{width:100%;max-width:calc(var(--max) + 2*var(--gutter));margin-inline:auto;padding-inline:max(var(--gutter),env(safe-area-inset-left)) max(var(--gutter),env(safe-area-inset-right))}
.skip{position:absolute;left:var(--gutter);top:-100px;z-index:100;display:inline-flex;align-items:center;min-height:48px;padding:0 16px;background:var(--acid);color:var(--on-acid);font-weight:750;text-decoration:none;border-radius:4px}
.skip:focus{top:12px}
.ring{flex:none;display:inline-block;width:12px;height:12px;border:2px solid var(--acid);border-radius:50%}

/* ── Buttons and links ───────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:14px;min-height:58px;padding:14px 18px 14px 22px;border:1px solid var(--acid);border-radius:5px;background:var(--acid);color:var(--on-acid);font-size:17px;font-weight:750;line-height:1.2;letter-spacing:-.01em;text-decoration:none;transition:background-color .16s,transform .16s}
.btn:hover{background:#F5D96F}
.btn:active{transform:translateY(1px);background:#D8B83D}
.btn svg{flex:none;width:20px;height:20px}
.btn--sm{min-height:44px;padding:10px 14px 10px 16px;font-size:15px;gap:10px}
.btn--sm svg{width:16px;height:16px}
.btn--ghost{background:transparent;color:var(--acid)}
.btn--ghost:hover{background:rgba(240,206,87,.08)}
.btn--ghost:active{background:rgba(240,206,87,.14)}
.link{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--ink);font-weight:650;text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:5px;text-decoration-thickness:1px;transition:text-decoration-color .16s}
.link:hover{text-decoration-color:var(--ink)}
.link svg{width:16px;height:16px;flex:none}

/* ── Header: sticky, opaque, shrinks ─────────────────────────────── */
.site-header{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--line)}
.site-header__in{display:flex;align-items:center;gap:12px;height:var(--head-h);transition:height .24s var(--ease)}
.brand{display:flex;align-items:center;gap:10px;min-height:44px;margin-right:auto;text-decoration:none}
.brand img{width:40px;height:40px;transition:width .24s var(--ease),height .24s var(--ease)}
.brand__name{display:grid;white-space:nowrap;font-size:16px;font-weight:750;line-height:1.1;letter-spacing:-.03em}
.brand__name small{margin-top:3px;color:var(--muted);font-size:11px;font-weight:650;letter-spacing:.16em}
.site-header.is-compact{--head-h:54px}
.site-header.is-compact .brand img{width:32px;height:32px}
.header-cta{display:none}
.lang-menu{position:relative}
.lang-menu summary{display:flex;align-items:center;gap:6px;min-width:44px;min-height:44px;padding:0 10px;border:1px solid var(--line-2);border-radius:5px;color:var(--ink-soft);font-size:14px;font-weight:700;letter-spacing:.06em;list-style:none;cursor:pointer;transition:color .16s,border-color .16s}
.lang-menu summary::-webkit-details-marker{display:none}
.lang-menu summary svg{width:16px;height:16px;flex:none}
.lang-menu summary:hover,.lang-menu[open] summary{color:var(--ink);border-color:var(--ink-soft)}
.lang-menu ul{position:absolute;top:calc(100% + 6px);right:0;z-index:60;min-width:188px;padding:6px 0;border:1px solid var(--line-2);border-radius:4px;background:var(--paper-bright)}
.lang-menu a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;padding:0 16px;color:var(--ink-soft);font-size:16px;text-decoration:none}
.lang-menu a:hover{color:var(--ink);background:var(--paper)}
.lang-menu a[aria-current]{color:var(--acid);font-weight:700}
.lang-menu a small{color:var(--muted);font-size:12px;font-weight:650;letter-spacing:.08em}
@media (max-width:419px){.site-header__in{gap:8px}.site-header .brand img{width:32px;height:32px}.lang-menu summary{padding:0 8px}}
@media (max-width:379px){.lang-menu summary svg{display:none}}
@media (min-width:900px){.header-cta{display:inline-flex}.site-header{--head-h:72px}.site-header.is-compact{--head-h:58px}}

/* ── Folio markers: numbered like palm lines ─────────────────────── */
.folio{display:flex;align-items:center;gap:10px;color:var(--muted);font-family:var(--mono);font-size:14px;line-height:1.3;letter-spacing:.06em;text-transform:uppercase}
.folio__mark{flex:none;width:44px;height:14px;color:var(--acid)}
.folio b{color:var(--acid);font-weight:600}
.eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;color:var(--muted);font-family:var(--mono);font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.eyebrow b{color:var(--acid);font-weight:600}
/* ── 07 FAQ ──────────────────────────────────────────────────────── */
.faq{margin-top:36px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{position:relative;display:flex;align-items:center;min-height:64px;padding:16px 48px 16px 0;cursor:pointer;list-style:none;font-size:clamp(18px,.5vw + 16px,21px);font-weight:700;line-height:1.35;letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before,.faq summary::after{content:"";position:absolute;right:12px;top:50%;width:16px;height:2px;background:var(--acid);transition:transform .2s var(--ease)}
.faq summary::after{transform:rotate(90deg)}
.faq details[open] summary::after{transform:rotate(0)}
.faq details > div{padding:0 0 22px;max-width:44em}
/* ── Footer ──────────────────────────────────────────────────────── */
.foot{padding-block:48px 40px;border-top:1px solid var(--line);background:var(--paper)}
.foot__grid{display:grid;gap:28px}
.foot .brand{margin:0}
.foot nav ul{display:flex;flex-wrap:wrap;gap:0 24px}
.foot nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-soft);text-decoration:none;font-size:15px}
.foot nav a:hover{color:var(--ink)}
.foot__legal{display:grid;gap:10px;color:var(--muted);font-size:14px;line-height:1.6;max-width:52em}
.foot__meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-family:var(--mono);font-size:14px}
.foot__meta{align-items:center}
.foot__meta a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-soft);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:4px}
.foot__meta a:hover{color:var(--ink);text-decoration-color:currentColor}
.foot__legal p:last-child{text-wrap:balance}
@media (min-width:360px) and (max-width:374px){:lang(pt) .site-header .brand__name{font-size:15px}:lang(pt) .site-header .brand{gap:8px}}
@media (min-width:900px){.foot__grid{grid-template-columns:auto 1fr;align-items:start;column-gap:64px}.foot nav ul{justify-content:flex-end}.foot__legal,.foot__meta{grid-column:1 / -1}}

.langs ul{display:flex;flex-wrap:wrap;gap:0 20px}
.langs a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-soft);text-decoration:none;font-size:15px}
.langs a:hover{color:var(--ink)}
.langs a[aria-current]{color:var(--acid);font-weight:700}
@media (min-width:900px){.langs{grid-column:1 / -1}}
/* ── Mobile dock ─────────────────────────────────────────────────── */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:45;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom,0px));background:var(--paper);border-top:1px solid var(--gold-1);transition:transform .3s var(--ease),visibility 0s}
.dock .btn{width:100%;min-height:52px;padding-block:10px}
.dock .btn .mono{margin-left:auto;font-size:15px;font-weight:600;opacity:.85}
.dock.is-hidden{transform:translateY(calc(100% + 2px));visibility:hidden;transition:transform .3s var(--ease),visibility 0s .3s}
.foot{padding-bottom:calc(40px + 76px + env(safe-area-inset-bottom,0px))}
@media (min-width:900px){.dock{display:none}.foot{padding-bottom:40px}}

/* ── Guide: breadcrumbs ──────────────────────────────────────────── */
.crumbs{padding-top:20px}
.crumbs ol{display:flex;flex-wrap:nowrap;white-space:nowrap;align-items:center;gap:0 8px;color:var(--muted);font-family:var(--mono);font-size:14px}
.crumbs li{display:flex;align-items:center;gap:8px}
.crumbs li+li::before{content:"/";color:var(--line-2)}
.crumbs li:last-child{min-width:0}
.crumbs li:last-child span{overflow:hidden;text-overflow:ellipsis}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-soft);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:4px}
.crumbs a:hover{color:var(--ink)}

/* ── Guide: opening ──────────────────────────────────────────────── */
.g-hero{display:grid;gap:28px;padding-block:12px clamp(40px,6vw,72px)}
.g-hero h1{font-size:clamp(36px,6.4vw + 8px,72px);line-height:1.04;letter-spacing:-.052em;max-width:14em}
.g-hero .lede{max-width:38em;margin-top:18px;color:var(--ink-soft);font-size:clamp(17px,.6vw + 14px,20px);line-height:1.6}
.g-meta{margin-top:14px;color:var(--muted);font-family:var(--mono);font-size:14px;line-height:1.5}
.g-toc{border-top:1px solid var(--line)}
.g-toc h2{margin:14px 0 4px;color:var(--muted);font-family:var(--mono);font-size:14px;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.g-toc ol{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));column-gap:24px}
.g-toc li{border-bottom:1px solid var(--line)}
.g-toc a{display:flex;align-items:center;gap:12px;min-height:48px;color:var(--ink-soft);text-decoration:none;font-size:16px}
.g-toc a:hover{color:var(--ink)}
@media (min-width:960px){.g-hero{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);column-gap:64px;align-items:start}.g-hero__text{grid-column:1}.g-hero .palm-map{grid-column:2;grid-row:1 / span 2}.g-toc{grid-column:1}}

/* ── Guide: the palm map ─────────────────────────────────────────── */
.palm-map{margin:0;padding:18px;border:1px solid var(--line-2);border-radius:4px;background:var(--paper)}
.palm-map svg{width:min(100%,360px);height:auto;margin-inline:auto;-webkit-mask-image:linear-gradient(#000 80%,transparent);mask-image:linear-gradient(#000 80%,transparent)}
.palm-map .ln--edge{stroke-width:3}
.palm-map .hand{fill:var(--paper-bright);stroke:var(--line-2);stroke-width:1.5}
.palm-map .ln{fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.palm-map .ln--halo{stroke:var(--halo);stroke-width:8}
.palm-map .tag circle{fill:var(--paper);stroke-width:2}
.palm-map .tag text{fill:var(--ink);font-family:var(--mono);font-size:13px;font-weight:700;text-anchor:middle;dominant-baseline:central}
.palm-map figcaption{margin-top:14px}
.palm-map ol{display:grid;gap:2px}
.palm-map li{display:flex;align-items:center;gap:10px;font-size:15px;line-height:1.4}
.palm-map li a{display:flex;align-items:center;gap:10px;min-height:44px;color:var(--ink-soft);text-decoration:none}
.palm-map li a:hover{color:var(--ink)}
.palm-map li b{flex:none;display:grid;place-items:center;width:26px;height:26px;border:2px solid var(--c);border-radius:50%;color:var(--ink);font-family:var(--mono);font-size:13px}
.palm-map .note{margin-top:10px;color:var(--muted);font-size:14px;line-height:1.5}

/* ── Guide: sections ─────────────────────────────────────────────── */
.g-sec{padding-block:clamp(44px,6vw,80px);border-top:1px solid var(--line)}
.g-sec > .wrap > *{max-width:36rem}
.g-sec h2{font-size:clamp(28px,3.4vw + 14px,52px);line-height:1.08;letter-spacing:-.045em}
.g-sec h3{margin-top:30px;font-size:clamp(19px,.6vw + 16px,22px);line-height:1.3;letter-spacing:-.025em}
.g-sec p{margin-top:14px;color:var(--ink-soft);font-size:17px;line-height:1.7}
.g-sec p strong{color:var(--ink)}
.g-sec .kicker{display:flex;align-items:center;gap:12px;margin-bottom:14px;color:var(--muted);font-family:var(--mono);font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.g-sec .kicker b{display:grid;place-items:center;width:30px;height:30px;border:2px solid var(--c,var(--acid));border-radius:50%;color:var(--ink);font-size:14px;letter-spacing:0}
.g-sec .kicker::after{content:"";flex:1;height:2px;max-width:120px;background:var(--c,var(--acid));border-radius:1px}
.facts{display:grid;margin-top:20px;border-top:1px solid var(--line)}
.facts > div{display:grid;gap:4px;padding:14px 0;border-bottom:1px solid var(--line)}
.facts dt{color:var(--muted);font-family:var(--mono);font-size:14px;letter-spacing:.04em;text-transform:uppercase}
.facts dd{margin:0;color:var(--ink);font-size:17px;line-height:1.55}
@media (min-width:700px){.facts > div{grid-template-columns:170px minmax(0,1fr);gap:20px}}
.vars{display:grid;margin-top:16px}
.vars li{position:relative;padding:12px 0 12px 22px;border-bottom:1px solid var(--line);color:var(--ink-soft);font-size:17px;line-height:1.6}
.vars li::before{content:"";position:absolute;left:2px;top:22px;width:8px;height:8px;border-radius:50%;background:var(--c,var(--acid))}
.vars li strong{color:var(--ink);font-weight:700}
.vars cite,.src-note{display:block;margin-top:2px;color:var(--muted);font-family:var(--mono);font-size:13px;font-style:normal;letter-spacing:.02em}
.cards{display:grid;gap:14px;margin-top:22px}
@media (min-width:860px){.g-sec .cards{max-width:none;grid-template-columns:1fr 1fr}}
.qcard{margin:0;padding:18px 18px 16px;border:1px solid var(--line);border-radius:4px;background:var(--paper-bright)}
.qcard blockquote{margin:0;color:var(--ink);font-size:clamp(17px,.5vw + 15px,19px);font-weight:650;line-height:1.45;letter-spacing:-.01em}
.qcard p{margin-top:10px;font-size:16px;line-height:1.55}
.qcard figcaption{margin-top:12px;color:var(--muted);font-family:var(--mono);font-size:13px;line-height:1.5;letter-spacing:.02em}
.qcard figcaption a{display:inline-block;padding-block:12px;margin-block:-12px;color:var(--ink-soft);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.callout{margin-top:24px;padding:16px 18px;border:1px solid var(--gold-1);border-radius:4px;background:var(--paper)}
.callout h3{margin:0;font-size:18px}
.callout p{margin-top:8px;font-size:16px}
.tips{display:grid;gap:0;margin-top:18px;counter-reset:tip}
.tips li{counter-increment:tip;display:grid;grid-template-columns:36px minmax(0,1fr);padding:12px 0;border-bottom:1px solid var(--line);color:var(--ink-soft);font-size:17px;line-height:1.6}
.tips li::before{content:counter(tip);color:var(--acid);font-family:var(--mono);font-size:15px;line-height:1.75}
.books{display:grid;margin-top:18px}
.books li{padding:12px 0;border-bottom:1px solid var(--line);color:var(--ink-soft);font-size:16px;line-height:1.5}
.books a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:4px}
.g-cta{padding-block:clamp(48px,7vw,88px);border-top:1px solid var(--line);background:var(--paper)}
.g-cta h2{font-size:clamp(28px,3.4vw + 14px,52px);line-height:1.08;letter-spacing:-.045em;max-width:14em}
.g-cta p{max-width:36em;margin-top:14px;color:var(--ink-soft);font-size:17px;line-height:1.6}
.g-cta .btn{margin-top:24px;width:min(100%,420px)}
.g-cta .link{margin-top:12px}
.g-sec .faq{max-width:46rem;margin-top:24px}
@media (max-width:359px){.g-hero h1{font-size:32px}.g-sec h2,.g-cta h2{font-size:27px}}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media (min-width:600px) and (max-width:959px){.palm-map{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);column-gap:28px;align-items:center}.palm-map figcaption{margin-top:0}}
@media (max-width:599px){.palm-map ol{grid-template-columns:1fr 1fr;column-gap:12px}}
@media (max-width:399px){.palm-map{padding:12px 6px}}
/* The dock: one line, hidden next to the final call (guide.js), and gone on a phone held sideways. */
.dock .btn{white-space:nowrap}
@media (max-width:359px){.dock .btn{font-size:16px}}
@media (max-height:500px) and (max-width:899px){.dock{display:none}.foot{padding-bottom:40px}.header-cta{display:inline-flex}}