/* Propósitos App · blog article and legal pages. Same tokens and type as the app (design/tokens.json). */
:root{
  --canvas:#F6F2EA; --surface:#FFFFFF; --surface-muted:#F1ECE2; --surface-sunken:#EAE3D6;
  --ink:#1E2A28; --ink-soft:#34423F; --ink-muted:#56605D;
  --border:#E3DCCF; --border-input:#CFC6B6; --border-strong:#B9B1A3;
  --brand:#1F4D45; --brand-tint:#E7EFEA; --brand-on-dark:#D9E8E2;
  --attention:#B24A26; --attention-tint:#F6E6DE; --paused-border:#D9B872;
  --r-control:12px; --r-card:18px; --r-sheet:26px;
  /* category dots set by the article generator */
  --lilac:#2E5A87; --orange:#B24A26; --life:#6B5A3E;
  --serif:"Fraunces",Georgia,serif; --sans:"Instrument Sans","Helvetica Neue",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--canvas);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{background:var(--canvas);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--brand);color:#fff}
:focus-visible{outline:2px solid var(--focus,var(--brand));outline-offset:3px;border-radius:6px}
.cta-in{--focus:var(--brand-on-dark)}

/* nav: the app header (64px, white, hairline) */
.bn{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--border)}
.bn-in{display:flex;align-items:center;gap:6px;height:64px;padding:0 28px}
.brand{display:flex;align-items:center;gap:10px;margin-right:22px;font-family:var(--serif);font-weight:600;font-size:20px;line-height:1.2}
.brand .bapp{margin-left:.24em;font-weight:500;color:var(--ink-muted)}
.mark{display:grid;place-items:center;width:28px;height:28px}
.mark svg{width:100%;height:100%;overflow:visible}
.mk-c,.mk-core{fill:none;stroke:var(--brand);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.bn-links{display:flex}
.bn-links a{padding:9px 14px;border-radius:999px;font-size:14px;font-weight:500;color:var(--ink-soft);transition:background-color .2s,color .2s}
.bn-links a:hover{background:var(--brand-tint);color:var(--brand)}
.bn-in > .btn{margin-left:auto}
.btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:999px;background:var(--brand);color:#fff;font-weight:600;font-size:14px;white-space:nowrap;transition:background-color .2s}
.btn:hover{background:color-mix(in srgb,var(--brand) 90%,transparent)}
.btn i{display:grid;place-items:center;width:16px;height:16px}
.btn svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn-lg{height:48px;padding:0 24px;font-size:15px}
.btn-or{background:var(--surface);color:var(--brand)}.btn-or:hover{background:var(--brand-tint)}

/* article */
.art{max-width:760px;margin:0 auto;padding:clamp(48px,8vh,80px) 24px 0}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:13.5px;color:var(--ink-muted)}
.crumbs a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--border-strong)}
.crumbs a:hover{color:var(--ink)}
.kick{display:inline-flex;align-items:center;gap:9px;margin-top:32px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted)}
.kick i{width:7px;height:7px;border-radius:50%}
h1{margin-top:16px;font-family:var(--serif);font-weight:600;font-size:clamp(32px,4.6vw,52px);line-height:1.12;text-wrap:balance}
.lead{max-width:720px;margin-top:20px;font-size:clamp(17px,1.4vw,20px);line-height:1.6;color:var(--ink-soft);text-wrap:pretty}
.meta{margin-top:20px;font-size:14px;color:var(--ink-muted)}
.meta .sep{margin:0 .4em}
.hero-img{max-width:1100px;margin:clamp(32px,5vh,48px) auto 0;padding:0 24px}
.hero-img img{width:100%;aspect-ratio:16/8;object-fit:cover;border-radius:var(--r-card);background:var(--surface-sunken)}
.hero-img figcaption{margin-top:12px;font-size:12.5px;color:var(--ink-muted);text-align:right}
.hero-img figcaption a{text-decoration:underline;text-underline-offset:2px}

.body{max-width:760px;margin:0 auto;padding:clamp(36px,5vh,56px) 24px 0;font-size:17.5px;line-height:1.75;color:var(--ink-soft)}
.body > * + *{margin-top:20px}
.body h2{margin-top:52px;font-family:var(--serif);font-weight:600;font-size:clamp(24px,2.4vw,32px);line-height:1.2;color:var(--ink)}
.body h2 + *{margin-top:16px}
.body strong{color:var(--ink);font-weight:600}
.body a{color:var(--brand);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.body ul,.body ol{display:grid;gap:12px;padding-left:0;list-style:none}
.body ul li{position:relative;padding-left:24px}
.body ul li::before{content:"";position:absolute;left:3px;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--brand)}
.body ol{counter-reset:n}
.body ol li{position:relative;padding-left:40px;counter-increment:n}
.body ol li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:.05em;font-family:var(--serif);font-weight:600;font-size:18px;color:var(--brand)}
.formula{padding:20px 24px;border-radius:var(--r-card);background:var(--surface);border:1px solid var(--border);font-size:17px;line-height:1.55;color:var(--ink)}
.tbl{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface)}
.tbl table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.5}
.tbl th,.tbl td{padding:14px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border)}
.tbl tr:last-child td{border-bottom:0}
.tbl th{background:var(--surface-muted);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted)}
.tbl td:first-child{color:var(--ink);font-weight:500}

.faq{max-width:760px;margin:0 auto;padding:64px 24px 0}
.faq h2{font-family:var(--serif);font-weight:600;font-size:clamp(24px,2.4vw,32px);line-height:1.2}
.faq details{border-bottom:1px solid var(--border)}
.faq details:first-of-type{margin-top:18px;border-top:1px solid var(--border)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;font-size:17px;font-weight:600;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--surface-muted);font-size:20px;font-weight:400;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 48px 24px 0;font-size:16.5px;line-height:1.7;color:var(--ink-soft)}

.cta{max-width:1100px;margin:80px auto 0;padding:0 24px}
.cta-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px;padding:clamp(32px,5vw,52px);border-radius:var(--r-sheet);color:#fff;background:var(--brand)}
.cta h2{max-width:560px;font-family:var(--serif);font-weight:600;font-size:clamp(26px,2.8vw,36px);line-height:1.15}
.cta h2 span{color:var(--paused-border)}
.cta p{margin-top:12px;max-width:520px;font-size:16.5px;line-height:1.6;color:var(--brand-on-dark)}
.cta-btns{display:flex;flex-wrap:wrap;gap:12px}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 24px;border-radius:999px;border:1.5px solid rgba(217,232,226,.45);color:#fff;font-weight:600;font-size:15px;transition:background-color .2s,border-color .2s}
.btn-ghost:hover{background:rgba(255,255,255,.1);border-color:var(--brand-on-dark)}

.rel{max-width:1100px;margin:88px auto 0;padding:0 24px}
.rel > h2{font-family:var(--serif);font-weight:600;font-size:clamp(24px,2.4vw,32px);line-height:1.2}
.rel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:28px}
.rel-card .im{aspect-ratio:16/10;border-radius:var(--r-card);overflow:hidden;background:var(--surface-sunken)}
.rel-card img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.rel-card:hover img{transform:scale(1.05)}
.rel-card .kick{margin-top:18px}
.rel-card h3{margin-top:8px;font-family:var(--serif);font-weight:600;font-size:22px;line-height:1.2}
.rel-card p{margin-top:8px;font-size:15px;line-height:1.55;color:var(--ink-soft)}

.foot{margin-top:104px;padding:48px 24px 40px;background:var(--surface-muted)}
.foot-in{max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;font-size:14px;color:var(--ink-muted)}
.foot-in nav{display:flex;flex-wrap:wrap;gap:22px}
.foot-in nav a{font-weight:500;color:var(--ink)}
.foot-in nav a:hover{color:var(--brand)}

@media (min-width:1024px){.art h1{margin-right:-140px}}
@media (max-width:860px){.bn-links{display:none}.brand{margin-right:8px}}
@media (max-width:719px){
  .bn-in{padding:0 16px}
  .brand{font-size:18px;gap:8px}
  .btn{padding:0 16px;font-size:13.5px}
  .btn i{display:none}
  .body{font-size:16.5px}
  .hero-img img{aspect-ratio:4/3}
  .rel-grid{grid-template-columns:1fr}
  .cta-btns,.cta-btns a{width:100%}
  .btn-ghost{justify-content:center!important}
  .faq details p{padding-right:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* legal pages */
.ph{padding:1px 6px;border-radius:6px;background:var(--attention-tint);color:var(--attention);font-weight:600}
.legal .meta{padding-bottom:4px}
.legal .body h2{scroll-margin-top:96px}