/* ==========================================================================
   GUIA DOS MARKETPLACES — "O RASTREIO"
   Site-locked to guiadosmarketplaces.com.br. Not a fleet template.

   THE DIRECTION
   A guide for every side of a Brazilian marketplace order, in the idiom of the
   one object everybody knows: the parcel. Kraft cardboard behind the title,
   white labels on top of it, black print — and two Brazilian details:

     Verde        the "entregue" dot: links, labels, primary actions, the top
                  line and the footer
     Amarelo      a strip of packing tape: on the tracking slip, across each
                  platform box, under the wordmark. Never text on white
     Papelão      kraft: the title page and the head of each platform box

   Four voices of type, each with one job:
     Jost                    headlines — geometric, the modernist poster face
                             of Brazilian signage
     Source Sans 3           reading copy and the interface
     IBM Plex Mono           tracking codes, every label, number and caption
     Barlow Semi Condensed   the shipping label, nowhere else

   THE RULES
   No decorative gradients, no glows, no flag. One soft shadow in the whole
   design: the tracking slip, because paper lies on the cardboard. Hierarchy
   comes from type size and rule weight: a 2px ink rule opens a list, 1px rules
   divide it. Numbers are tabular. Light theme only, painted explicitly on every
   surface.
   ========================================================================== */
:root{
  /* Palette — the layout overrides the base tokens from template fields. */
  --verde:       #0B7A4B;
  --verde-deep:  #06472D;
  --amarelo:     #F4C430;
  --kraft:       #E8D7B6;
  --alert:       #C2412A;
  --paper:       #F8F2E7;
  --ink:         #1E1A15;
  --rule:        #E4D8C2;

  --white:        #FFFDF8;
  --verde-tint:   color-mix(in srgb, var(--verde) 7%, #FFFDF8);
  --verde-soft:   color-mix(in srgb, var(--verde) 16%, #FFFDF8);
  --amarelo-tint: color-mix(in srgb, var(--amarelo) 26%, #FFFDF8);
  --amarelo-lite: color-mix(in srgb, var(--amarelo) 78%, #FFFFFF);  /* text on deep green ≥8:1 */
  --tape:         color-mix(in srgb, var(--amarelo) 70%, transparent);
  --kraft-deep:   color-mix(in srgb, var(--kraft) 62%, #7A5524);     /* rules and marks  */
  --kraft-ink:    color-mix(in srgb, var(--kraft) 18%, #5A3E12);     /* text on paper ≥6:1 */
  --kraft-rule:   color-mix(in srgb, var(--kraft) 70%, #A57A3C);
  --ink-2:        color-mix(in srgb, var(--ink) 86%, #FFFFFF);       /* body copy        */
  --ink-3:        color-mix(in srgb, var(--ink) 68%, #FFFFFF);       /* secondary ≥5:1   */
  --ink-4:        color-mix(in srgb, var(--ink) 50%, #FFFFFF);       /* large/decor only */
  --rule-2:       color-mix(in srgb, var(--rule) 55%, #FFFFFF);
  --rule-strong:  color-mix(in srgb, var(--rule) 55%, #9C8461);
  --board-ink:    #F3EEE2;
  --foot-ink:     #D5E3DA;
  --foot-mute:    #A7C1B2;
  --foot-rule:    rgba(243,238,226,.16);

  --font-display: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --font-body:    "Source Sans 3", system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-label:   "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sign:    "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif;

  --container:  1280px;
  --read:       720px;
  --measure:    68ch;
  --radius:     4px;
  --base-size:  18px;
  --base-lh:    1.68;

  --ease:       cubic-bezier(.2,.6,.3,1);
  --t:          150ms;
}

html, body{ overflow-x:hidden; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--base-size);
  line-height:var(--base-lh);
  font-kerning:normal;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{ max-width:100%; height:auto; }
svg{ display:block; }
a{ color:var(--verde); text-decoration:none; }
a:hover{ color:var(--verde-deep); }
:focus-visible{ outline:2px solid var(--verde); outline-offset:3px; }
::selection{ background:var(--amarelo-tint); color:var(--ink); }

.container{
  max-width:var(--container); margin-inline:auto;
  padding-inline:clamp(16px,4vw,48px); position:relative;
}
.container .container{ max-width:none; padding-inline:0; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--verde-deep); color:#fff; padding:.7rem 1.1rem; font-weight:700;
}
.skip-link:focus{ left:0; }

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* --- The tracking voice: one rule for every label, caption and small number. --- */

.label, .lk-desc, .finder-label, .finder-terms span, .tp-facts span,
.band-more, .gd-tag, .gd-go, .foot-h, .foot-top-link,
.toc-h, .breadcrumb, .post-card-meta, .result-meta, .results-count, .pl-eyebrow,
.eyebrow, .post-cat, .card-tag, .pc-tag, .post-links h2, .chip, .section-cap,
.stat .l, .article-body thead th, .article-body .pro-tip::before,
.article-body .related-inline-link::before, .pagination, .src-org, .plat-n, .step-status{
  font-family:var(--font-label);
  font-weight:500;
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1.35;
}

/* --- Type ---------------------------------------------------------------- */

h1,h2,h3,h4{
  font-family:var(--font-display); font-weight:600;
  letter-spacing:-.01em; margin:0; color:var(--ink);
}
p{ margin:0 0 1rem; }
.muted{ color:var(--ink-3); }
.accent{ color:var(--verde); font-style:normal; }
.center{ text-align:center; }
.display{ font-family:var(--font-display); font-weight:600; letter-spacing:-.012em; }
.lead{ font-size:1.12rem; line-height:1.6; color:var(--ink-2); max-width:var(--measure); }
.eyebrow{ display:inline-block; color:var(--verde); margin-bottom:.6rem; }

/* --- The brand mark: a shipping label --------------------------------------
   White sticker, black border and print, a barcode on the left, the service
   tag in green. The label keeps its own white and black wherever it is stuck —
   on the white header and on the green footer alike. */

.etq{ width:196px; height:42px; flex:none; }
.etq-lg{ width:236px; height:50px; }
.etq-paper{ fill:#FFFFFF; stroke:#141414; stroke-width:1.6; }
.etq-bar{ fill:#141414; }
.etq-cut{ stroke:#141414; stroke-width:1; stroke-dasharray:2 2.4; }
.etq-small{ font-family:var(--font-label); font-weight:600; font-size:9.6px; letter-spacing:1.8px; fill:#141414; }
.etq-name{ font-family:var(--font-sign); font-weight:700; font-size:23px; letter-spacing:.3px; fill:#141414; }
.etq-tag{ fill:var(--verde); }
.etq-tagtxt{ font-family:var(--font-sign); font-weight:700; font-size:15px; letter-spacing:.5px; fill:#FFFFFF; }

/* --- The top line: cream lettering on deep green, a strip of yellow ------- */

.topline{ background:var(--verde-deep); color:var(--board-ink); border-bottom:3px solid var(--amarelo); }
.topline-in{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  min-height:34px;
}
.topline-what, .topline-asof{
  font-family:var(--font-label); font-weight:500; font-size:.7rem;
  letter-spacing:.08em; text-transform:uppercase; line-height:1.3;
}
.topline-asof{ white-space:nowrap; color:var(--amarelo-lite); }
.topline-asof time{ font-variant-numeric:tabular-nums; }

.lk-text{
  display:flex; flex-direction:column; gap:.22rem; min-width:0;
  padding-left:.9rem; border-left:1px solid var(--rule);
}
.lk-name{
  font-family:var(--font-display); font-weight:600; font-size:1.38rem;
  line-height:1; letter-spacing:-.012em; color:var(--ink); white-space:nowrap;
}
.lk-desc{ font-size:.62rem; letter-spacing:.08em; color:var(--ink-3); max-width:22ch; }
.lk-img{ height:42px; width:auto; }

/* ==========================================================================
   HEADER
   ========================================================================== */

.site-header{
  position:sticky; top:0; z-index:60;
  background:var(--white);
  border-bottom:1px solid var(--rule);
  transition:box-shadow var(--t) var(--ease);
}
.site-header.is-scrolled{ box-shadow:0 1px 0 var(--rule), 0 6px 18px rgba(30,26,21,.06); }
.nav{ display:flex; align-items:center; gap:clamp(16px,2.4vw,36px); min-height:78px; }
.nav-brand{ display:inline-flex; align-items:center; gap:.9rem; color:var(--ink); flex:none; }
.nav-brand:hover{ color:var(--ink); }

.nav-links{ display:flex; align-items:center; gap:.1rem; margin-left:auto; }
.nav-link{
  position:relative; padding:.55rem .75rem;
  font-size:.98rem; font-weight:600; color:var(--ink-2);
  transition:color var(--t) var(--ease);
}
.nav-link::after{
  content:""; position:absolute; left:.75rem; right:.75rem; bottom:.15rem; height:3px;
  background:var(--amarelo); transform:scaleX(0); transform-origin:left;
  transition:transform var(--t) var(--ease);
}
.nav-link:hover{ color:var(--verde-deep); }
.nav-link:hover::after{ transform:scaleX(1); }

.nav-tail{ display:flex; align-items:center; gap:.6rem; flex:none; }
.nav-search{
  display:flex; align-items:center;
  border:1px solid var(--rule); background:var(--paper); border-radius:var(--radius);
  transition:border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.nav-search:focus-within{ border-color:var(--verde); background:var(--white); }
.nav-search input{
  width:190px; border:0; background:transparent; outline:none;
  font:inherit; font-size:.95rem; color:var(--ink); padding:.55rem .1rem .55rem .8rem;
}
.nav-search input::placeholder{ color:var(--ink-3); }
.nav-search button{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border:0; background:transparent; color:var(--ink-2); cursor:pointer;
}
.nav-search button svg{ width:18px; height:18px; }
.nav-search button:hover{ color:var(--verde); }

.nav-toggle{
  display:none; width:44px; height:44px; padding:0;
  background:var(--white); border:1px solid var(--rule); border-radius:var(--radius);
  cursor:pointer; align-items:center; justify-content:center;
}
.nav-burger, .nav-burger::before, .nav-burger::after{
  display:block; width:18px; height:2px; background:var(--ink);
  transition:transform var(--t) var(--ease), background var(--t) var(--ease);
}
.nav-burger{ position:relative; }
.nav-burger::before, .nav-burger::after{ content:""; position:absolute; left:0; }
.nav-burger::before{ top:-6px; }
.nav-burger::after{ top:6px; }
.site-header.is-open .nav-burger{ background:transparent; }
.site-header.is-open .nav-burger::before{ transform:translateY(6px) rotate(45deg); }
.site-header.is-open .nav-burger::after{ transform:translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   HOME — the title page, on cardboard
   ========================================================================== */

.title-page{
  background-color:var(--kraft);
  /* the flutes of corrugated board, barely there */
  background-image:repeating-linear-gradient(90deg, rgba(110,76,28,.05) 0 1px, transparent 1px 9px);
  padding:clamp(40px,6vw,88px) 0 clamp(52px,6vw,92px);
  border-bottom:1px solid var(--kraft-rule);
}
.tp-grid{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(32px,5vw,88px); align-items:center;
}

/* The wordmark: the site title, letter for letter, in three weights. The last
   word sits on a strip of yellow tape. */
.tp-title{ margin:0 0 1.4rem; font-weight:600; color:var(--ink); }
.tp-main{
  display:block;
  font-size:clamp(2.45rem,4.9vw,4.25rem); line-height:1.04; letter-spacing:-.02em;
  text-wrap:balance;
}
.tp-wordmark{
  font-size:clamp(2.6rem,6.2vw,5.4rem); line-height:1.02; letter-spacing:-.025em;
  overflow-wrap:anywhere;
}
.wm{ display:inline; }
.wm-first{ font-weight:400; }
.wm-mid{ font-weight:500; color:var(--verde); margin-inline:.1em .06em; }
.wm-last{
  font-weight:700; padding-inline:.04em;
  background:linear-gradient(180deg, transparent 58%, var(--tape) 58% 90%, transparent 90%);
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.tp-lead{
  font-size:clamp(1.08rem,1.5vw,1.26rem); line-height:1.6;
  color:var(--ink-2); max-width:54ch; margin:0 0 2rem;
}

.finder{ max-width:640px; margin:0; }
.finder-label{ display:block; color:var(--ink); margin-bottom:.6rem; }
.finder-row{
  display:flex; background:var(--white);
  border:1.5px solid var(--ink); border-radius:var(--radius);
  transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.finder-row:focus-within{ border-color:var(--verde); box-shadow:0 0 0 3px color-mix(in srgb, var(--verde) 18%, transparent); }
.finder-input{
  flex:1; min-width:0; border:0; outline:none; background:transparent;
  font:inherit; font-size:1.06rem; color:var(--ink); padding:.95rem 1.1rem;
}
.finder-input::placeholder{ color:var(--ink-3); }
.finder-go{
  display:inline-flex; align-items:center; gap:.65rem; flex:none;
  border:0; border-left:1.5px solid var(--ink); background:var(--verde); color:#fff;
  padding:0 1.5rem; cursor:pointer; border-radius:0 2px 2px 0;
  font-family:var(--font-body); font-weight:700; font-size:1.02rem;
  transition:background var(--t) var(--ease);
}
.finder-go svg{ width:20px; height:10px; }
.finder-go:hover{ background:var(--verde-deep); }
.finder-terms{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.35rem .9rem;
  margin:1rem 0 0; font-size:.98rem;
}
.finder-terms span{ color:var(--kraft-ink); }
.finder-terms a{ color:var(--ink); border-bottom:1px solid var(--kraft-deep); padding-bottom:1px; }
.finder-terms a:hover{ color:var(--verde-deep); border-bottom-color:var(--verde); }

.tp-facts{
  display:flex; flex-wrap:wrap; gap:.6rem 0; margin:2.1rem 0 0;
  padding-top:1.1rem; border-top:1px solid var(--kraft-rule); max-width:640px;
}
.tp-facts span{ color:var(--kraft-ink); padding-right:1.3rem; margin-right:1.3rem; border-right:1px solid var(--kraft-rule); }
.tp-facts span:last-child{ border-right:0; margin-right:0; padding-right:0; }
.tp-facts strong{
  font-family:var(--font-display); font-weight:600; font-size:1.6rem;
  letter-spacing:0; text-transform:none; color:var(--ink);
  margin-right:.35rem; font-variant-numeric:tabular-nums lining-nums;
}

/* --- The tracking slip -----------------------------------------------------
   The page everyone refreshes after buying: a code, a date, and the history of
   the order, newest at the bottom. White paper taped to the cardboard. Every
   status is a step on a line; the last one is delivered. Every line is a link. */

.slip{ margin:0; justify-self:center; width:100%; max-width:450px; }
.slip-paper{
  position:relative;
  background:#FFFFFF; color:var(--ink);
  padding:1.9rem clamp(1.15rem,2vw,1.65rem) 1.4rem;
  border-radius:3px;
  box-shadow:0 1px 0 rgba(30,26,21,.10), 0 18px 32px rgba(70,48,14,.16);
}
.slip-paper p{ margin:0; }
.slip-tape{
  position:absolute; top:-15px; left:50%; width:138px; height:32px;
  transform:translateX(-50%) rotate(-2.5deg);
  background:var(--tape);
  clip-path:polygon(3% 0, 97% 4%, 100% 30%, 98% 62%, 100% 100%, 2% 96%, 0 66%, 2% 34%);
}
.slip-head{ padding-bottom:.85rem; border-bottom:1px dashed var(--ink-4); }
.slip-brand{
  font-family:var(--font-label); font-weight:600; font-size:.74rem; letter-spacing:.2em; color:var(--ink-3);
}
.slip-title{
  margin-top:.3rem !important; font-family:var(--font-display); font-weight:600;
  font-size:1.42rem; line-height:1.18; letter-spacing:-.01em;
}
.slip-meta{
  display:flex; justify-content:space-between; gap:1rem; margin-top:.55rem !important;
  font-family:var(--font-label); font-size:.72rem; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.slip-meta + .slip-meta{ margin-top:.15rem !important; }
.slip-code{ color:var(--ink); font-weight:600; letter-spacing:.14em; }

.track{ list-style:none; margin:0; padding:1.1rem 0 .2rem; }
.step{ position:relative; padding:0 0 1.05rem 2.05rem; }
.step::before{
  content:""; position:absolute; left:.55rem; top:1.15rem; bottom:-.05rem; width:2px;
  background:var(--verde-soft);
}
.step.is-last::before{ display:none; }
.step-dot{
  position:absolute; left:0; top:.12rem; width:1.15rem; height:1.15rem; border-radius:50%;
  background:#fff; border:2px solid var(--verde);
}
.step-dot::after{ content:""; position:absolute; inset:3px; border-radius:50%; background:var(--verde); }
.is-last .step-dot{
  top:-.05rem; left:-.12rem; width:1.4rem; height:1.4rem;
  display:flex; align-items:center; justify-content:center;
  background:var(--verde); color:#fff; border-color:var(--verde);
}
.is-last .step-dot::after{ display:none; }
.is-last .step-dot svg{ width:.85rem; height:.85rem; }
.step-status{ color:var(--verde-deep); font-weight:600; font-size:.74rem; letter-spacing:.09em; }
.is-last .step-status{ color:var(--verde); }
.step-links{ list-style:none; margin:.35rem 0 0; padding:0; }
.step-links li{ margin:0; }
.step-links a{
  display:inline-block; padding:.16rem 0; color:var(--ink);
  font-size:.99rem; line-height:1.38;
}
.step-links a:hover{ color:var(--verde-deep); text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:3px; }

.slip-foot{ padding-top:.85rem; border-top:1px dashed var(--ink-4); }
.slip-total{
  display:flex; justify-content:space-between; gap:1rem;
  font-family:var(--font-label); font-weight:600; font-size:.86rem; text-transform:uppercase; letter-spacing:.05em;
  font-variant-numeric:tabular-nums;
}
.slip-barcode{
  width:66%; height:34px; margin:.85rem auto 0;
  background:repeating-linear-gradient(90deg,
    var(--ink) 0 2px, #0000 2px 4px, var(--ink) 4px 5px, #0000 5px 8px,
    var(--ink) 8px 11px, #0000 11px 12px, var(--ink) 12px 13px, #0000 13px 16px,
    var(--ink) 16px 18px, #0000 18px 21px, var(--ink) 21px 22px, #0000 22px 23px);
}
.slip-cap{ display:block; margin:1.4rem 0 0; }
.slip-cap-title{ display:block; font-family:var(--font-display); font-weight:600; font-size:1.06rem; line-height:1.3; }
.slip-cap-legend{ display:block; margin-top:.25rem; font-size:.94rem; color:var(--kraft-ink); line-height:1.5; }

/* ==========================================================================
   HOME — bands
   ========================================================================== */

section{ position:relative; }
.band{ padding:clamp(52px,6.5vw,96px) 0; border-bottom:1px solid var(--rule); }
.band.sides, .band.guides, .band.principles{ background:var(--white); }
.band.questions, .band.latest, .band.sources{ background:var(--paper); }
.band.sources{ border-bottom:0; }

.band-head{ margin-bottom:clamp(26px,3vw,42px); max-width:780px; }
.band-head-row{
  max-width:none; display:grid; grid-template-columns:minmax(0,1fr) auto;
  column-gap:2rem; align-items:end;
}
.band-head-row .label, .band-head-row .band-note{ grid-column:1 / -1; }
.band-head-row .band-note{ order:3; }
.label{ display:flex; align-items:center; gap:.6rem; margin:0 0 .75rem; color:var(--verde); letter-spacing:.12em; }
.label::before{ content:""; width:28px; height:3px; background:var(--amarelo); flex:none; }
.band-title{
  font-size:clamp(1.9rem,3.3vw,2.75rem); line-height:1.12; letter-spacing:-.016em;
  margin:0; text-wrap:balance;
}
.band-note{ margin:.85rem 0 0; color:var(--ink-3); font-size:1.04rem; max-width:62ch; }
.band-more{ color:var(--verde); white-space:nowrap; padding-bottom:.35rem; }
.band-more:hover{ color:var(--verde-deep); }

/* --- The four sides of the counter ---------------------------------------- */

.side-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(16px,1.8vw,26px);
}
.side{
  display:flex; flex-direction:column; min-width:0;
  padding:1.5rem 1.4rem 1.3rem; background:var(--white);
  border:1px solid var(--rule); border-top:4px solid var(--kraft-deep); border-radius:0 0 var(--radius) var(--radius);
}
.side-icon{ display:block; width:44px; height:44px; color:var(--verde); margin-bottom:.9rem; }
.side-icon svg{ width:44px; height:44px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.side-h{ font-size:1.38rem; line-height:1.2; margin:0 0 .45rem; }
.side-p{ margin:0 0 1rem; min-height:calc(3 * 1.52em); color:var(--ink-3); font-size:.98rem; line-height:1.52; }
.side-links{ list-style:none; margin:0; padding:0; border-top:2px solid var(--ink); }
.side-links li{ border-bottom:1px solid var(--rule); }
.side-links li:last-child{ border-bottom:0; }
.side-links a{
  display:flex; justify-content:space-between; align-items:center; gap:.8rem;
  padding:.62rem 0; color:var(--ink); font-weight:600; font-size:1rem; line-height:1.35;
}
.side-links a span{ color:var(--ink-4); transition:transform var(--t) var(--ease), color var(--t) var(--ease); }
.side-links a:hover{ color:var(--verde-deep); }
.side-links a:hover span{ color:var(--verde); transform:translateX(3px); }

/* --- Common questions ---------------------------------------------------- */

.diag-grid{
  display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(28px,4vw,76px); align-items:start;
}
.diag-grid .band-head{ margin-bottom:0; }
.symptoms{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:2rem;
  border-top:2px solid var(--ink);
}
.symptoms li{ display:flex; border-bottom:1px solid var(--rule); }
.symptoms a{
  flex:1; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  position:relative; padding:.95rem 0 .95rem 2.2rem;
  color:var(--ink); font-weight:600; font-size:1.04rem; line-height:1.35;
}
.symptoms a::before{
  content:"?"; position:absolute; left:0; top:50%; width:22px; height:22px; margin-top:-11px;
  display:flex; align-items:center; justify-content:center;
  background:var(--amarelo); border-radius:50%; color:var(--ink);
  font-family:var(--font-display); font-weight:700; font-size:.86rem; line-height:1;
}
.sy-go{ color:var(--ink-4); transition:transform var(--t) var(--ease), color var(--t) var(--ease); }
.symptoms a:hover{ color:var(--verde-deep); }
.symptoms a:hover .sy-go{ color:var(--verde); transform:translateX(4px); }

/* --- The platforms: one box each -------------------------------------------
   A white box with a kraft flap on top and a strip of tape across it: the name
   of the platform and its count on the flap, its topics inside, with the
   number of answers each. A theme split in parts lists the parts beside it. */

.band.plats{ background:var(--kraft); background-image:repeating-linear-gradient(90deg, rgba(110,76,28,.045) 0 1px, transparent 1px 9px); border-bottom:1px solid var(--kraft-rule); }
.plats .label{ color:var(--verde-deep); }
.plats .band-note{ color:var(--kraft-ink); }
.plat-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:clamp(18px,2vw,28px); align-items:start;
}
.plat{
  min-width:0; background:var(--white); border:1px solid var(--kraft-rule); border-radius:var(--radius);
  box-shadow:0 1px 0 rgba(90,62,18,.10);
  scroll-margin-top:110px;
}
.plat-head{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:.3rem;
  padding:1.05rem 1.25rem .95rem; overflow:hidden;
  background:color-mix(in srgb, var(--kraft) 70%, #FFFFFF);
  border-bottom:1px solid var(--kraft-rule); border-radius:var(--radius) var(--radius) 0 0;
}
.plat-head::before{
  content:""; position:absolute; top:0; bottom:0; right:9%; width:44px;
  background:var(--tape); transform:skewX(-6deg); pointer-events:none;
}
.plat-name{ position:relative; font-size:1.55rem; line-height:1.1; letter-spacing:-.012em; }
.plat-n{ position:relative; flex:none; color:var(--kraft-ink); letter-spacing:.04em; }
.plat-n strong{ font-family:var(--font-label); font-weight:600; font-size:.92rem; color:var(--ink); font-variant-numeric:tabular-nums; }
.plat-themes{ list-style:none; margin:0; padding:.35rem 1.25rem .5rem; }
/* A platform with many topics takes the whole row, its topics in columns. */
.plat.is-wide{ grid-column:1 / -1; }
.plat.is-wide .plat-themes{ columns:3 260px; column-gap:2.2rem; }
.plat.is-wide .plat-themes li{ break-inside:avoid; }
.plat.is-wide .plat-themes li:last-child{ border-bottom:1px solid var(--rule-2); }
.plat.is-wide .plat-all{ max-width:420px; margin-left:auto; }
.plat-themes li{
  display:grid; grid-template-columns:auto minmax(12px,1fr) auto; align-items:baseline; column-gap:.5rem;
  padding:.5rem 0; border-bottom:1px solid var(--rule-2);
}
.plat-themes li:last-child{ border-bottom:0; }
.plat-themes li::after{ content:""; grid-column:2; grid-row:1; border-bottom:1px dotted var(--ink-4); transform:translateY(-.3em); }
.pt-main{ grid-column:1; grid-row:1; color:var(--ink); font-weight:600; font-size:1rem; line-height:1.38; }
.pt-main:hover{ color:var(--verde-deep); text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:3px; }
.pt-parts{ grid-column:1; grid-row:2; display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.25rem; }
.pt-parts a{
  display:inline-flex; align-items:center; justify-content:center; min-width:1.6rem; height:1.45rem; padding:0 .35rem;
  border:1px solid var(--rule); border-radius:3px; color:var(--ink-3);
  font-family:var(--font-label); font-size:.72rem; font-variant-numeric:tabular-nums;
}
.pt-parts::before{ content:"Partes"; align-self:center; margin-right:.1rem; font-family:var(--font-label); font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-4); }
.pt-parts a:hover{ border-color:var(--verde); color:var(--verde); }
.pt-n{ grid-column:3; grid-row:1; color:var(--verde-deep); font-family:var(--font-label); font-weight:500; font-size:.84rem; font-variant-numeric:tabular-nums; }
.plat-all{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  margin:0 1.25rem 1.1rem; padding:.7rem .9rem; border-radius:3px;
  background:var(--verde-tint); color:var(--verde-deep); font-weight:600; font-size:.96rem;
}
.plat-all span{ font-family:var(--font-label); font-size:.84rem; font-variant-numeric:tabular-nums; }
.plat-all:hover{ background:var(--verde); color:#fff; }

/* --- How this guide is written ------------------------------------------- */

.pr-list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:2px solid var(--ink);
}
.pr-list li{ padding:1.6rem 1.6rem 1.7rem; border-right:1px solid var(--rule); }
.pr-list li:first-child{ padding-left:0; }
.pr-list li:last-child{ border-right:0; padding-right:0; }
.pr-no{
  display:inline-block; margin-bottom:.8rem; padding:.1rem .45rem;
  background:var(--amarelo); color:var(--ink);
  font-family:var(--font-label); font-weight:600; font-size:.86rem; line-height:1.4;
  font-variant-numeric:tabular-nums;
}
.pr-h{ font-size:1.24rem; line-height:1.26; margin:0 0 .5rem; }
.pr-p{ margin:0; color:var(--ink-3); font-size:.99rem; line-height:1.56; }

/* --- The main guides ----------------------------------------------------- */

.gd-grid{
  display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);
  gap:clamp(28px,4vw,72px); padding-top:1.9rem; border-top:2px solid var(--ink);
}
.gd-tag{ color:var(--verde); margin:0 0 .8rem; }
.gd-lead-title{ font-size:clamp(1.85rem,3.1vw,2.6rem); line-height:1.1; letter-spacing:-.016em; margin:0; text-wrap:balance; }
.gd-lead-title a{ color:var(--ink); }
.gd-lead-title a:hover{ color:var(--verde-deep); }
.gd-lead-ex{ margin:1.05rem 0 0; color:var(--ink-2); font-size:1.1rem; line-height:1.62; max-width:54ch; }
.gd-go{
  display:inline-block; margin-top:1.4rem; padding:.85rem 1.25rem;
  background:var(--verde); color:#fff; font-size:.78rem; font-weight:600; border-radius:var(--radius);
  transition:background var(--t) var(--ease);
}
.gd-go:hover{ background:var(--verde-deep); color:#fff; }
.gd-side{ border-left:1px solid var(--rule); padding-left:clamp(22px,3vw,48px); min-width:0; }
.gd-med{ padding:0 0 1.25rem; margin:0 0 1.25rem; border-bottom:1px solid var(--rule); }
.gd-med h3{ font-size:1.26rem; line-height:1.28; margin:0; }
.gd-med h3 a{ color:var(--ink); }
.gd-med h3 a:hover{ color:var(--verde-deep); }
.gd-med p{ margin:.45rem 0 0; color:var(--ink-3); font-size:.98rem; line-height:1.52; }
.gd-med:last-child{ padding-bottom:0; margin-bottom:0; border-bottom:0; }
.gd-list{
  list-style:none; margin:clamp(28px,3.4vw,48px) 0 0; padding:0; counter-reset:gd;
  columns:3 300px; column-gap:clamp(28px,3.4vw,60px); border-top:1px solid var(--rule);
}
.gd-list li{ counter-increment:gd; break-inside:avoid; border-bottom:1px solid var(--rule-2); }
.gd-list a{
  display:grid; grid-template-columns:2.3rem minmax(0,1fr); gap:.5rem;
  padding:.72rem 0; color:var(--ink-2); font-size:1.02rem; line-height:1.4;
}
.gd-list a::before{
  content:counter(gd, decimal-leading-zero);
  font-family:var(--font-label); font-weight:500; font-size:.86rem; line-height:1.65;
  color:var(--kraft-ink); font-variant-numeric:tabular-nums;
}
.gd-list a:hover{ color:var(--verde-deep); }

/* --- Official sources: the notice and the list ---------------------------- */

.src-grid{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(28px,4vw,72px); align-items:start;
}
.notice{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(16px,2vw,26px);
  align-items:start; padding:clamp(22px,2.8vw,34px);
  background:var(--white); border:1px solid var(--rule); border-top:4px solid var(--verde);
}
.notice-sign{ width:52px; height:52px; }
.ns-plate{ fill:var(--verde); }
.ns-mark{ fill:#fff; }
.notice-h{ font-size:1.55rem; line-height:1.2; margin:0 0 .6rem; text-wrap:balance; }
.notice-p{ margin:0; color:var(--ink-2); font-size:1.04rem; line-height:1.64; }

.src-h{ margin:0; padding-bottom:.8rem; border-bottom:2px solid var(--ink); font-size:1.36rem; line-height:1.2; }
.src-list{ list-style:none; margin:0; padding:0; }
.src-list li{ border-bottom:1px solid var(--rule); }
.src-list a{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.15rem 1rem; align-items:center;
  padding:.8rem 0; color:var(--ink);
}
.src-name{ font-weight:600; font-size:1.06rem; line-height:1.3; }
.src-org{ grid-column:1; color:var(--ink-3); text-transform:none; letter-spacing:0; font-size:.78rem; }
.src-go{
  grid-column:2; grid-row:1 / span 2; color:var(--ink-4); font-size:1.15rem;
  transition:transform var(--t) var(--ease), color var(--t) var(--ease);
}
.src-list a:hover .src-name{ color:var(--verde-deep); text-decoration:underline; text-underline-offset:3px; }
.src-list a:hover .src-go{ color:var(--verde); transform:translate(2px,-2px); }
.src-note{ margin:.9rem 0 0; font-size:.9rem; line-height:1.5; color:var(--ink-3); }

/* --- Latest: the engine's own band, restyled ---------------------------- */

.latest .section{ padding:0; }
.latest .section-head{ margin-bottom:clamp(26px,3vw,40px); }
.latest .section-head::before{
  content:"Novo"; display:block; margin:0 0 .75rem; padding-left:calc(28px + .6rem);
  background:linear-gradient(var(--amarelo),var(--amarelo)) no-repeat left center / 28px 3px;
  color:var(--verde); font-family:var(--font-label); font-weight:500; font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase; line-height:1.35;
}
.latest .section-head h2{ font-size:clamp(1.9rem,3.3vw,2.75rem); line-height:1.12; letter-spacing:-.016em; }

/* ==========================================================================
   CARDS — post grid, pillar grid, generic cards
   ========================================================================== */

.post-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  gap:clamp(18px,2vw,28px);
}
.post-card{
  display:flex; flex-direction:column; min-width:0;
  background:var(--white); border:1px solid var(--rule); border-top:4px solid var(--kraft-deep);
  border-radius:0 0 var(--radius) var(--radius);
  transition:border-top-color var(--t) var(--ease);
}
.post-card:hover{ border-top-color:var(--verde); }
/* The archive has no photography: these images are generated cards that
   re-print the headline. Hidden, never fetched (display:none on the link). */
.post-card-media{ display:none; }
.post-card-body{ padding:1.2rem 1.3rem 1.3rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.post-cat{ color:var(--kraft-ink); }
.post-card-title{ font-size:1.2rem; line-height:1.28; margin:0; }
.post-card-title a{ color:var(--ink); }
.post-card-title a:hover{ color:var(--verde-deep); }
.post-card-excerpt{ margin:0; font-size:.97rem; line-height:1.52; color:var(--ink-3); }
.post-card-meta{ margin-top:auto; padding-top:.7rem; color:var(--ink-3); font-size:.72rem; }

.card-grid, .pillar-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  gap:clamp(18px,2vw,28px);
}
.card, .pillar-card{
  display:block; padding:1.3rem 1.35rem 1.4rem;
  background:var(--white); border:1px solid var(--rule); border-top:4px solid var(--kraft-deep);
  border-radius:0 0 var(--radius) var(--radius);
  color:var(--ink); transition:border-top-color var(--t) var(--ease);
}
.card:hover, .pillar-card:hover{ border-top-color:var(--verde); color:var(--ink); }
.card-tag, .pc-tag{ display:block; color:var(--kraft-ink); margin-bottom:.6rem; }
.card h3, .pillar-card h3{ font-size:1.18rem; line-height:1.3; margin:0; }
.pc-arrow{ display:inline-block; margin-top:.8rem; color:var(--ink-4); }
.card:hover .pc-arrow, .pillar-card:hover .pc-arrow{ color:var(--verde); }
.blk-more{ margin-top:1.8rem; }

/* ==========================================================================
   BUTTONS · CHIPS · PAGINATION
   ========================================================================== */

.btn{
  display:inline-flex; align-items:center; gap:.5rem; padding:.8rem 1.25rem;
  font-family:var(--font-label); font-size:.86rem; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase;
  border:1.5px solid transparent; border-radius:var(--radius); cursor:pointer;
  transition:background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.btn--accent{ background:var(--verde); color:#fff; }
.btn--accent:hover{ background:var(--verde-deep); color:#fff; }
.btn--ghost{ background:transparent; border-color:var(--ink); color:var(--ink); }
.btn--ghost:hover{ border-color:var(--verde); color:var(--verde); }
.btn-row{ display:flex; flex-wrap:wrap; gap:.7rem; }

.chip-row{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.chip{
  display:inline-block; padding:.45rem .75rem; border-radius:3px;
  border:1px solid var(--rule); background:var(--white); color:var(--ink-2);
  transition:border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.chip:hover{ color:var(--verde); border-color:var(--verde); }

.pagination{
  display:flex; align-items:center; justify-content:center; gap:1rem;
  margin-top:3rem; padding-top:1.6rem; border-top:1px solid var(--rule); color:var(--ink-3);
}
.pagination a{ padding:.65rem 1.05rem; border:1.5px solid var(--ink); border-radius:var(--radius); color:var(--ink); }
.pagination a:hover{ border-color:var(--verde); color:var(--verde); }
.pagination span{ font-variant-numeric:tabular-nums; }

/* ==========================================================================
   GENERIC PAGE SHELL — list, search, topic, legal, about/contact, 404
   ========================================================================== */

.page-shell{ padding:clamp(28px,4vw,52px) 0 clamp(60px,7vw,100px); }

.breadcrumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .5rem;
  margin-bottom:1.6rem; color:var(--ink-3); font-size:.72rem;
}
.breadcrumb a{ color:var(--ink-3); }
.breadcrumb a:hover{ color:var(--verde); }
.breadcrumb [aria-hidden="true"]{ color:var(--kraft-deep); }
.breadcrumb [aria-current="page"], .breadcrumb > span:last-child{
  color:var(--ink-4); max-width:46ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Page titles. A topic arrives in lower case from the archive; its first letter
   is capitalised here (the platform's own spelling is put right in the layout). */
.page-shell h1.display{ font-size:clamp(2.1rem,4.2vw,3.2rem); line-height:1.08; letter-spacing:-.018em; margin:0; text-wrap:balance; }
.page-shell h1.display::first-letter{ text-transform:uppercase; }
.page-shell .section{ padding:clamp(32px,4vw,52px) 0 0; }
.page-shell .section-head h2{ font-size:clamp(1.45rem,2.4vw,1.85rem); }

.results-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  margin-bottom:1.6rem; padding-bottom:1.1rem; border-bottom:2px solid var(--ink);
}
.results-head h1{ font-size:clamp(1.8rem,3.4vw,2.5rem); margin:0; }
.results-count{ color:var(--ink-3); }
.results-list{ display:flex; flex-direction:column; }
.result{ display:block; padding:1.3rem 0; border-bottom:1px solid var(--rule); color:var(--ink); }
.result h2{ font-size:1.3rem; line-height:1.28; margin:0; color:var(--ink); }
.result:hover h2{ color:var(--verde-deep); }
.result p{ margin:.45rem 0 0; font-size:.98rem; line-height:1.55; color:var(--ink-3); max-width:76ch; }
.result-meta{ display:flex; gap:.9rem; margin-top:.6rem; color:var(--ink-4); font-size:.72rem; }

.topic-index{ margin-top:2.6rem; }
.topic-index-head{ margin-bottom:1.1rem; padding-bottom:.8rem; border-bottom:2px solid var(--ink); }
.topic-index-head p{ margin:.35rem 0 0; color:var(--ink-3); font-size:.95rem; }
.topic-index-list{ columns:2 320px; column-gap:2.5rem; }
.topic-index-list a{
  display:block; break-inside:avoid; padding:.7rem 0;
  border-bottom:1px solid var(--rule-2); color:var(--ink-2); font-size:1rem; line-height:1.4;
}
.topic-index-list a:hover{ color:var(--verde-deep); }

/* ==========================================================================
   ARTICLE — one answer
   ========================================================================== */

.article{ padding-bottom:1rem; }
.article-hero{
  margin-bottom:clamp(26px,4vw,44px); padding-bottom:clamp(20px,3vw,30px);
  border-bottom:2px solid var(--ink);
}
.article-hero-grid{ display:block; }
.article-hero-copy h1{
  font-size:clamp(2.1rem,4.2vw,3.3rem); line-height:1.07; letter-spacing:-.018em;
  margin:.2rem 0 0; max-width:24ch; text-wrap:balance;
}
.post-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
  margin-top:1.1rem; font-size:.98rem; color:var(--ink-3);
}
.post-meta [aria-hidden="true"]{ color:var(--kraft-deep); }
.post-meta time{ font-variant-numeric:tabular-nums; }
.post-meta strong{ color:var(--ink); font-weight:600; }
.article-lead{ margin:1.2rem 0 0; font-size:1.22rem; line-height:1.56; color:var(--ink-2); max-width:60ch; }

/* The generated hero card re-prints the title; hidden, never fetched. The
   <img> stays in the DOM, so og:image and the schema ImageObject are intact. */
.article-hero-media{ display:none; }

.article-shell{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(28px,4vw,64px); align-items:start; }
.article-shell:has(.toc){ grid-template-columns:236px minmax(0,1fr); }
.article-shell:not(:has(.toc)){ justify-items:center; }
.article-main{ min-width:0; max-width:var(--read); width:100%; overflow-wrap:break-word; contain:inline-size; }

/* --- On this page (TOC) ------------------------------------------------- */

.toc{ position:sticky; top:108px; }
.toc-h{ margin:0 0 .4rem; padding-bottom:.6rem; color:var(--ink); border-bottom:2px solid var(--ink); }
.toc ol{ list-style:none; margin:0; padding:0; counter-reset:toc; }
.toc li{ counter-increment:toc; border-bottom:1px solid var(--rule-2); }
.toc a{
  display:grid; grid-template-columns:1.7rem minmax(0,1fr); gap:.3rem;
  padding:.62rem 0; font-size:.95rem; line-height:1.4; color:var(--ink-2);
}
.toc a::before{
  content:counter(toc); font-family:var(--font-label); font-weight:500; font-size:.84rem; line-height:1.6;
  color:var(--verde); font-variant-numeric:tabular-nums;
}
.toc a:hover{ color:var(--verde-deep); }
.article-rail{ min-width:0; }

/* --- Body ---------------------------------------------------------------- */

.article-body{ font-size:1rem; line-height:var(--base-lh); color:var(--ink-2); }
.article-body > *:first-child{ margin-top:0; }
.article-body p{ margin:0 0 1.15rem; }
.article-body h2{
  margin:2.7rem 0 1rem; padding-top:1.3rem; border-top:1px solid var(--rule);
  font-size:clamp(1.55rem,2.5vw,1.95rem); line-height:1.18; letter-spacing:-.014em;
}
.article-body > h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.article-body h3{ margin:2rem 0 .6rem; font-size:1.3rem; line-height:1.28; }
.article-body h4{ margin:1.5rem 0 .45rem; font-family:var(--font-body); font-weight:700; font-size:1.05rem; letter-spacing:0; }
.article-body a{
  color:var(--verde); text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:3px; text-decoration-color:color-mix(in srgb, var(--verde) 40%, transparent);
}
.article-body a:hover{ color:var(--verde-deep); text-decoration-color:currentColor; }
.article-body strong{ color:var(--ink); font-weight:650; }

/* Lists: a small green tick-box for a point, a monospace numeral for a step. */
.article-body ul, .article-body ol{ list-style:none; margin:0 0 1.35rem; padding:0; }
.article-body ul > li{ position:relative; padding-left:1.45rem; margin-bottom:.5rem; }
.article-body ul > li::before{
  content:""; position:absolute; left:.1rem; top:.58em; width:.5em; height:.5em;
  background:var(--verde); border-radius:2px;
}
.article-body ol{ counter-reset:step; }
.article-body ol > li{ counter-increment:step; position:relative; padding-left:2.2rem; margin-bottom:.6rem; }
.article-body ol > li::before{
  content:counter(step) "."; position:absolute; left:0; top:0;
  font-family:var(--font-label); font-weight:600; font-size:.9em; line-height:1.87;
  color:var(--verde); font-variant-numeric:tabular-nums;
}

/* Worth knowing */
.article-body .pro-tip{
  margin:1.7rem 0; padding:1rem 1.2rem 1.05rem;
  background:var(--amarelo-tint); border-left:4px solid var(--amarelo); color:var(--ink);
}
.article-body .pro-tip::before{ content:"Bom saber"; display:block; margin-bottom:.35rem; color:var(--kraft-ink); }

/* "Veja também". The engine prints "→ " as a text node before the link;
   font-size:0 retires it without touching the DOM. */
.article-body .related-inline-link{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem .8rem;
  margin:1.5rem 0; padding:.8rem 1rem; font-size:0;
  background:var(--paper); border:1px solid var(--rule); border-radius:3px;
}
.article-body .related-inline-link::before{ content:"Veja também"; font-size:.72rem; color:var(--ink-3); }
.article-body .related-inline-link a{ font-size:1rem; font-weight:600; text-decoration:none; }
.article-body .related-inline-link a:hover{ text-decoration:underline; }

.article-body blockquote{
  margin:1.8rem 0; padding:.2rem 0 .2rem 1.3rem;
  border-left:4px solid var(--amarelo); color:var(--ink);
  font-family:var(--font-display); font-size:1.22rem; line-height:1.5;
}
.article-body blockquote p:last-child{ margin-bottom:0; }
.article-body img{ border:1px solid var(--rule); }
.article-body hr{ border:0; border-top:1px solid var(--rule); margin:2.4rem 0; }
.article-body code{
  font-family:var(--font-mono); font-size:.86em; padding:.12em .38em;
  background:var(--paper); border:1px solid var(--rule); color:var(--ink);
}
.article-body pre{ margin:1.5rem 0; padding:1rem 1.2rem; overflow-x:auto; background:var(--paper); border:1px solid var(--rule); }
.article-body pre code{ padding:0; border:0; background:transparent; }

/* Tables: a green head, hairline rows. */
.table-wrap{ margin:1.8rem 0; overflow-x:auto; border:1px solid var(--rule); border-radius:3px; }
.article-body table{ width:100%; border-collapse:collapse; font-size:.96rem; font-variant-numeric:tabular-nums; }
.article-body th, .article-body td{ padding:.72rem .95rem; text-align:left; vertical-align:top; border-bottom:1px solid var(--rule-2); }
.article-body thead th{ background:var(--verde-deep); color:var(--board-ink); font-size:.72rem; white-space:nowrap; }
.article-body tbody tr:nth-child(even) td{ background:color-mix(in srgb, var(--paper) 60%, #fff); }
.article-body tbody tr:last-child td{ border-bottom:0; }

/* --- Inline CTA, FAQ, further reading ----------------------------------- */

.inline-cta{
  display:flex; align-items:center; justify-content:space-between; gap:1.2rem; flex-wrap:wrap;
  margin:2.2rem 0; padding:1.3rem 1.4rem;
  background:var(--paper); border:1px solid var(--rule); border-left:4px solid var(--verde);
}
.inline-cta-body{ display:flex; flex-direction:column; gap:.3rem; min-width:0; }
.inline-cta-body strong{ font-family:var(--font-display); font-size:1.12rem; color:var(--ink); }
.inline-cta-body span{ font-size:.96rem; color:var(--ink-3); }

.faq{ margin-top:3rem; padding-top:1.3rem; border-top:2px solid var(--ink); }
.faq h2{ font-size:1.75rem; margin:0 0 .8rem; }
.faq-item{ border-bottom:1px solid var(--rule); }
.faq-item summary{
  list-style:none; cursor:pointer; position:relative;
  padding:1rem 2.6rem 1rem 0; font-weight:600; font-size:1.06rem; line-height:1.42; color:var(--ink);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; position:absolute; right:.25rem; top:.62rem;
  font-family:var(--font-label); font-weight:500; font-size:1.55rem; line-height:1; color:var(--verde);
}
.faq-item[open] summary::after{ content:"–"; }
.faq-item summary:hover{ color:var(--verde-deep); }
.faq-a{ padding:0 0 1.1rem; }
.faq-a p{ margin:0 0 .8rem; font-size:1rem; line-height:1.68; color:var(--ink-2); }
.faq-a p:last-child{ margin-bottom:0; }

.post-links{ margin-top:3rem; padding-top:1.3rem; border-top:1px solid var(--rule); }
.post-links h2{ margin:0 0 1rem; color:var(--ink); }
.pillar-link{
  display:flex; align-items:center; gap:1rem; padding:1.1rem 1.25rem;
  background:var(--white); border:1px solid var(--rule); border-left:4px solid var(--verde); color:var(--ink);
  transition:background var(--t) var(--ease);
}
.pillar-link:hover{ background:var(--verde-tint); color:var(--ink); }
.pl-eyebrow{ display:block; margin-bottom:.25rem; color:var(--verde); }
.pl-title{ display:block; font-family:var(--font-display); font-weight:600; font-size:1.2rem; line-height:1.3; }
.pl-arrow{ margin-left:auto; color:var(--verde); font-size:1.2rem; transition:transform var(--t) var(--ease); }
.pillar-link:hover .pl-arrow{ transform:translateX(4px); }

/* ==========================================================================
   BLOCKS — the Pages studio's own components
   ========================================================================== */

.blk{ padding:clamp(44px,6vw,80px) 0; }
.blk-space{ padding:0; }
.section{ padding:clamp(44px,6vw,80px) 0; }
.section-head{ margin-bottom:1.8rem; }
.section-cap{ color:var(--ink-3); }

.blk-hero .hero, .hero{ padding:clamp(40px,6vw,88px) 0; }
.hero-inner{ display:grid; gap:clamp(24px,3vw,48px); align-items:center; }
.hero h1{ font-size:clamp(2.2rem,5vw,3.8rem); line-height:1.06; letter-spacing:-.02em; text-wrap:balance; }
.hero .lead{ margin-top:1.1rem; color:var(--ink-3); }
.hero-media img{ border:1px solid var(--rule); }

.blk-prose, .blk-text{ font-size:1.02rem; line-height:1.72; color:var(--ink-2); }
.blk-prose h2, .blk-text h2{ font-size:1.8rem; margin:2rem 0 .9rem; }

.feat{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(26px,3.4vw,56px); align-items:center; }
.feat-copy h2{ font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:.9rem; }
.feat-media img{ border:1px solid var(--rule); }
.blk-feat-title{ margin-bottom:.9rem; }

.cols{ display:grid; gap:clamp(20px,2.4vw,36px); }
.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.cols-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.col{ padding:1.4rem 1.45rem; background:var(--white); border:1px solid var(--rule); border-top:4px solid var(--kraft-deep); min-width:0; }
.col h3{ font-size:1.18rem; margin-bottom:.5rem; }
.col p{ margin:0; font-size:.97rem; line-height:1.6; color:var(--ink-3); }

.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); border-top:2px solid var(--ink); }
.stat{ padding:1.4rem 1.4rem 1.4rem 0; border-right:1px solid var(--rule); }
.stat:last-child{ border-right:0; }
.stat .n{
  display:block; font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.9rem,3.4vw,2.6rem); line-height:1; font-variant-numeric:tabular-nums lining-nums; color:var(--ink);
}
.stat .l{ display:block; margin-top:.5rem; color:var(--ink-3); }
.sec-stat-band{ border-top:0; }

.blk-quote blockquote, .sec-quote blockquote{
  margin:0; padding:0 0 0 1.4rem; border-left:4px solid var(--amarelo);
  font-family:var(--font-display); font-size:clamp(1.3rem,2.4vw,1.8rem);
  font-weight:400; line-height:1.38; color:var(--ink); max-width:36ch;
}
.cite{ display:block; margin-top:.9rem; font-size:.9rem; color:var(--ink-3); }

.cta, .cta-band, .sec-cta-band{
  padding:clamp(32px,4.4vw,60px) clamp(24px,4vw,54px);
  background:var(--paper); border:1px solid var(--rule); border-top:4px solid var(--verde); text-align:center;
}
.cta h2, .cta-band h2{ font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:.8rem; }
.cta p, .cta-band p{ color:var(--ink-3); max-width:56ch; margin-inline:auto; }
.cta .btn-row, .cta-band .btn-row{ justify-content:center; margin-top:1.5rem; }

.blk-divider hr, hr{ border:0; border-top:1px solid var(--rule); margin:0; }
.blk-figure figcaption{ margin-top:.7rem; font-size:.9rem; color:var(--ink-3); }
.blk-notfound .lead{ margin-inline:auto; }

/* ==========================================================================
   FOOTER — deep green, a strip of yellow on top
   ========================================================================== */

.site-footer{
  background:var(--verde-deep); color:var(--foot-ink);
  padding:clamp(52px,6vw,84px) 0 clamp(28px,3vw,40px);
  border-top:4px solid var(--amarelo);
}
.site-footer :focus-visible{ outline-color:var(--amarelo-lite); }
.foot-top{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);
  gap:clamp(32px,4vw,76px); padding-bottom:clamp(8px,1vw,16px);
}
.foot-brand-col{ min-width:0; }
.foot-brand{ display:inline-flex; align-items:center; gap:.9rem; color:#fff; }
.foot-brand:hover{ color:#fff; }
.foot-brand .lk-text{ display:none; }
.foot-tag{ margin:1.3rem 0 0; font-family:var(--font-display); font-weight:500; font-size:1.32rem; line-height:1.35; color:#fff; }
.foot-about{ margin:.8rem 0 0; font-size:.97rem; line-height:1.62; color:var(--foot-mute); max-width:46ch; }

.foot-cols{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) minmax(0,1fr); gap:clamp(20px,2.4vw,40px); min-width:0; }
.foot-col{ min-width:0; }
.foot-h{ margin:0 0 .9rem; padding-bottom:.6rem; color:var(--amarelo-lite); border-bottom:1px solid var(--foot-rule); font-size:.72rem; letter-spacing:.12em; }
.foot-col ul, .foot-col ol{ list-style:none; margin:0; padding:0; }
.foot-col li{ break-inside:avoid; }
.foot-col li a{ display:block; padding:.3rem 0; font-size:.97rem; line-height:1.45; color:var(--foot-ink); }
.foot-col li a span{ font-family:var(--font-label); font-size:.78rem; color:var(--amarelo-lite); font-variant-numeric:tabular-nums; margin-left:.25rem; }
.foot-col li a:hover{ color:#fff; text-decoration:underline; text-decoration-color:var(--amarelo); text-underline-offset:3px; }

.foot-disclosure{
  margin:clamp(22px,2.4vw,32px) 0 0; padding:1rem 1.2rem;
  border:1px solid var(--foot-rule); font-size:.9rem; line-height:1.6; color:var(--foot-ink); max-width:100ch;
}
.foot-disclosure a{ color:#fff; text-decoration:underline; text-underline-offset:3px; }

.foot-base{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  margin-top:clamp(22px,2.4vw,32px); padding-top:1.2rem; border-top:1px solid var(--foot-rule);
}
.foot-copy{ margin:0; font-size:.92rem; color:var(--foot-mute); font-variant-numeric:tabular-nums; }
.foot-top-link{ color:var(--foot-ink); }
.foot-top-link:hover{ color:#fff; }
.foot-note{ margin:1.1rem 0 0; font-size:.85rem; line-height:1.6; color:var(--foot-mute); max-width:104ch; }

/* ==========================================================================
   MOTION
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width:1180px){
  .tp-grid{ grid-template-columns:minmax(0,1fr); }
  .slip{ justify-self:start; margin-top:.6rem; }
  .foot-top{ grid-template-columns:minmax(0,1fr); }
  .lk-text{ display:none; }
  .side-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pr-list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pr-list li{ padding-left:1.6rem; border-bottom:1px solid var(--rule); }
  .pr-list li:nth-child(2n+1){ padding-left:0; }
  .pr-list li:nth-child(2n){ border-right:0; }
}

@media (max-width:1040px){
  .diag-grid{ grid-template-columns:minmax(0,1fr); gap:1.6rem; }
  .gd-grid{ grid-template-columns:minmax(0,1fr); }
  .gd-side{ border-left:0; padding-left:0; border-top:1px solid var(--rule); padding-top:1.5rem; }
  .src-grid{ grid-template-columns:minmax(0,1fr); }
}

/* The article collapses to one column; both shell selectors are restated
   because `.article-shell:has(.toc)` outranks a bare class. */
@media (max-width:1000px){
  .article-shell, .article-shell:has(.toc){ grid-template-columns:minmax(0,1fr); }
  .article-shell:not(:has(.toc)){ justify-items:stretch; }
  .article-main{ max-width:none; }
  .toc{ position:static; order:-1; margin-bottom:1.2rem; }
  .toc ol{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); column-gap:1.6rem; }
  .article-rail{ order:-2; }
  .foot-cols{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:920px){
  .nav{ min-height:68px; }
  .nav-toggle{ display:inline-flex; }
  .nav-search input{ display:none; }
  .nav-search{ background:var(--white); }
  .nav-links{
    position:absolute; left:0; right:0; top:100%;
    display:none; flex-direction:column; align-items:stretch; gap:0; margin:0;
    padding:.4rem clamp(16px,4vw,48px) 1.1rem;
    background:var(--white); border-bottom:1px solid var(--rule);
  }
  .site-header.is-open .nav-links{ display:flex; }
  .nav-link{ padding:.9rem 0; border-bottom:1px solid var(--rule-2); font-size:1.05rem; }
  .nav-link::after{ display:none; }
  .nav-tail{ margin-left:auto; }
  .feat, .cols-3, .cols-4, .cols-2{ grid-template-columns:minmax(0,1fr); }
}

@media (max-width:760px){
  .symptoms{ grid-template-columns:minmax(0,1fr); }
  .band-head-row{ grid-template-columns:minmax(0,1fr); }
  .band-more{ padding:.8rem 0 0; }
  .results-head{ flex-direction:column; gap:.4rem; }
  .stats{ grid-template-columns:minmax(0,1fr); }
  .stat{ padding:1.1rem 0; border-right:0; border-bottom:1px solid var(--rule); }
  .notice{ grid-template-columns:minmax(0,1fr); }
  .notice-sign{ width:44px; height:44px; }
  .side-grid{ grid-template-columns:minmax(0,1fr); }

  /* Stacked table rows; the engine stamps data-label on each cell. */
  .article-body table, .article-body thead, .article-body tbody,
  .article-body tr, .article-body td{ display:block; width:100%; }
  .article-body thead{ display:none; }
  .article-body tr{ border-bottom:1px solid var(--rule); padding:.4rem 0; }
  .article-body tr:last-child{ border-bottom:0; }
  .article-body tbody tr:nth-child(even) td{ background:transparent; }
  .article-body td{ border-bottom:0; padding:.4rem .95rem; }
  .article-body td[data-label]::before{
    content:attr(data-label); display:block; margin-bottom:.15rem;
    font-family:var(--font-label); font-weight:600; font-size:.7rem;
    letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3);
  }
}

@media (max-width:720px){
  .topline-asof{ display:none; }
  .topline-in{ min-height:30px; padding-block:.35rem; }
  .topline-what{ font-size:.62rem; letter-spacing:.05em; }
}

@media (max-width:600px){
  .etq{ width:160px; height:34px; }
  .etq-lg{ width:208px; height:44px; }
  .pr-list{ grid-template-columns:minmax(0,1fr); }
  .pr-list li, .pr-list li:nth-child(2n+1){ padding:1.3rem 0; border-right:0; }
  .finder-row{ flex-wrap:wrap; }
  .finder-input{ flex:1 1 100%; }
  .finder-go{ flex:1 1 100%; justify-content:center; padding:.9rem 1rem; border-left:0; border-top:1.5px solid var(--ink); border-radius:0 0 2px 2px; }
  /* Three figures in a row, each over its label. */
  .tp-facts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 .9rem; }
  .tp-facts span{ display:flex; flex-direction:column; gap:.2rem; padding:0; margin:0; border-right:0; font-size:.64rem; }
  .tp-facts strong{ margin:0; }
  .plat-grid{ grid-template-columns:minmax(0,1fr); }
  .post-grid, .card-grid, .pillar-grid{ grid-template-columns:minmax(0,1fr); }
  .foot-cols{ grid-template-columns:minmax(0,1fr); gap:1.8rem; }
  .inline-cta{ flex-direction:column; align-items:stretch; }
  .topic-index-list{ columns:1; }
  .slip-paper{ padding-inline:1rem; }

  /* On a phone the newest-articles band stacks into one long column; six cards
     are enough there. The rest stay in the document and in /blog. */
  .is-home .latest .post-grid > .post-card:nth-child(n+7){ display:none; }
}