@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600&family=Play:wght@400;700&display=swap');

:root{
  --oak:#644F3A!important;
  --ink:#473E37!important;
  --muted:#756A61!important;
  --green:#606A5B!important;
  --ivory:#F5F2EC!important;
  --paper:#FBF9F5!important;
  --line:rgba(71,62,55,.16)!important;
  --line-strong:rgba(71,62,55,.28)!important;
  --max:1380px!important;
  --reading:820px!important;
}

html{background:var(--ivory)!important}
body{
  margin:0!important;
  background:var(--ivory)!important;
  color:var(--ink)!important;
  font-family:"Instrument Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.shell{width:min(calc(100% - 44px),var(--max))!important;margin-inline:auto!important}
h1,h2,h3,.pullquote,.insight-number,.layer-number{
  font-family:"Instrument Sans",system-ui,sans-serif!important;
  color:var(--ink)!important;
}
a{color:inherit}

/* iCatuai origin marker: symbol in oak + Play wordmark text */
.site-header{
  position:sticky!important;
  top:0!important;
  z-index:30!important;
  height:84px!important;
  background:rgba(245,242,236,.92)!important;
  border-bottom:1px solid transparent!important;
  backdrop-filter:blur(14px)!important;
  box-shadow:none!important;
}
.site-header.scrolled{border-color:var(--line)!important;box-shadow:none!important}
.site-nav{height:100%!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:28px!important}
.brand{display:flex!important;align-items:center!important;gap:12px!important;text-decoration:none!important}
.brand-logo{
  width:33px!important;
  height:35px!important;
  flex:0 0 33px!important;
  display:block!important;
  background:var(--oak)!important;
  -webkit-mask:url("/favicon-v4.svg?v=11") center/contain no-repeat!important;
  mask:url("/favicon-v4.svg?v=11") center/contain no-repeat!important;
}
.brand-logo img{display:none!important}
.brand-copy{font-family:"Play",Arial,sans-serif!important;line-height:1!important}
.brand-copy strong{
  font-family:"Play",Arial,sans-serif!important;
  color:var(--oak)!important;
  font-size:23px!important;
  font-weight:400!important;
  letter-spacing:-.03em!important;
}
.nav-actions{display:flex!important;align-items:center!important;gap:14px!important}
.lang{
  display:flex!important;
  padding:2px!important;
  border:1px solid var(--line)!important;
  border-radius:999px!important;
  background:transparent!important;
}
.lang button{
  border:0!important;
  border-radius:999px!important;
  background:transparent!important;
  color:var(--muted)!important;
  padding:7px 10px!important;
  font-size:10px!important;
  font-weight:600!important;
  cursor:pointer!important;
}
.lang button.active{background:var(--oak)!important;color:var(--ivory)!important}
.back-link{
  min-height:auto!important;
  padding:0 0 5px!important;
  border:0!important;
  border-bottom:1px solid var(--oak)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--oak)!important;
  font-size:12px!important;
  font-weight:500!important;
  text-decoration:none!important;
}
.back-link:hover{transform:none!important;box-shadow:none!important}

/* Remove former blue/green/gradient language */
.gradient-text{
  background:none!important;
  color:var(--muted)!important;
  -webkit-text-fill-color:currentColor!important;
}
.eyebrow{
  display:block!important;
  margin:0 0 24px!important;
  color:var(--muted)!important;
  font-size:10px!important;
  font-weight:500!important;
  letter-spacing:.18em!important;
  text-transform:uppercase!important;
}
.eyebrow::before{display:none!important}

/* Hub */
.hub-hero{
  position:relative!important;
  padding:118px 0 98px!important;
  overflow:visible!important;
  background:transparent!important;
}
.hub-hero::after,.article-hero::after{display:none!important}
.hub-hero h1{
  margin:0!important;
  max-width:1120px!important;
  font-size:clamp(54px,6.4vw,94px)!important;
  line-height:.99!important;
  letter-spacing:-.045em!important;
  font-weight:600!important;
}
.hub-lead{
  margin:34px 0 0!important;
  max-width:760px!important;
  color:var(--muted)!important;
  font-size:clamp(20px,2vw,28px)!important;
  line-height:1.52!important;
  letter-spacing:-.028em!important;
}
.library{
  position:relative!important;
  padding:118px 0 130px!important;
  background:transparent!important;
  border-top:1px solid var(--line)!important;
}
.library::before{display:none!important}
.library-head{
  display:grid!important;
  grid-template-columns:1fr .72fr!important;
  align-items:end!important;
  gap:72px!important;
  margin-bottom:44px!important;
}
.library-head h2{
  margin:0!important;
  font-size:clamp(45px,5vw,78px)!important;
  line-height:.98!important;
  letter-spacing:-.06em!important;
  font-weight:600!important;
}
.library-head p{
  margin:0!important;
  max-width:450px!important;
  color:var(--muted)!important;
  font-size:16px!important;
  line-height:1.6!important;
}

/* Current hub cards become editorial rows */
.insight-grid{
  display:block!important;
  border-top:1px solid var(--line)!important;
}
.insight-card{
  position:relative!important;
  display:grid!important;
  grid-template-columns:170px 1fr!important;
  gap:30px 42px!important;
  align-items:start!important;
  min-height:0!important;
  padding:32px 0 36px!important;
  border:0!important;
  border-bottom:1px solid var(--line)!important;
  border-radius:0!important;
  background:transparent!important;
  overflow:visible!important;
  box-shadow:none!important;
  text-decoration:none!important;
  transition:none!important;
}
.insight-card:hover{
  transform:none!important;
  box-shadow:none!important;
  border-color:var(--line)!important;
  background:transparent!important;
}
.insight-card::before{display:none!important}
.insight-card .meta{
  grid-column:1!important;
  grid-row:1 / span 2!important;
  margin:5px 0 0!important;
  color:var(--muted)!important;
  font-size:9px!important;
  font-weight:500!important;
  letter-spacing:.12em!important;
  line-height:1.5!important;
  text-transform:uppercase!important;
}
.insight-card h3{
  grid-column:2!important;
  margin:0!important;
  max-width:900px!important;
  font-size:clamp(28px,3vw,46px)!important;
  line-height:1.08!important;
  letter-spacing:-.045em!important;
  font-weight:600!important;
}
.insight-card p{
  grid-column:2!important;
  margin:14px 0 0!important;
  max-width:800px!important;
  color:var(--muted)!important;
  font-size:16px!important;
  line-height:1.65!important;
}
.insight-card h3::after{
  content:"  →";
  color:var(--oak);
  font-size:.58em;
  vertical-align:.12em;
}

/* Support legacy row-based hub markup too */
.insight-list{border-top:1px solid var(--line)!important}
.insight-row{
  display:grid!important;
  grid-template-columns:90px 1fr auto!important;
  gap:34px!important;
  padding:36px 0!important;
  border-bottom:1px solid var(--line)!important;
}
.insight-number{
  background:none!important;
  color:var(--muted)!important;
  -webkit-text-fill-color:currentColor!important;
  font-size:18px!important;
  font-weight:500!important;
}
.meta{color:var(--muted)!important}
.actions{padding-top:0!important}
.button{
  min-height:auto!important;
  padding:0 0 5px!important;
  border:0!important;
  border-bottom:1px solid var(--oak)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--oak)!important;
  font-size:12px!important;
  font-weight:500!important;
}
.button:hover{transform:none!important;box-shadow:none!important}
.button.primary,.button.secondary{
  background:transparent!important;
  border:0!important;
  border-bottom:1px solid var(--oak)!important;
  color:var(--oak)!important;
}

/* Article */
.article-hero{
  position:relative!important;
  padding:116px 0 80px!important;
  background:transparent!important;
  border-bottom:1px solid var(--line)!important;
}
.article-hero h1{
  margin:0!important;
  max-width:1120px!important;
  font-size:clamp(48px,5.7vw,84px)!important;
  line-height:1.01!important;
  letter-spacing:-.042em!important;
  font-weight:600!important;
}
.article-lead{
  margin:30px 0 0!important;
  max-width:820px!important;
  color:var(--muted)!important;
  font-size:clamp(20px,2vw,27px)!important;
  line-height:1.55!important;
  letter-spacing:-.028em!important;
}
.byline{
  margin-top:34px!important;
  padding-top:18px!important;
  border-top:1px solid var(--line)!important;
  color:var(--muted)!important;
  font-size:10px!important;
  font-weight:500!important;
  letter-spacing:.11em!important;
  text-transform:uppercase!important;
}
.article-body{padding:84px 0 118px!important}
.article-reading{width:min(calc(100% - 44px),var(--reading))!important;margin:auto!important}
.copy{color:var(--ink)!important}
.copy p{
  margin:0 0 24px!important;
  color:var(--ink)!important;
  font-size:19px!important;
  line-height:1.72!important;
  letter-spacing:-.012em!important;
}
.copy h2{
  margin:72px 0 26px!important;
  font-size:clamp(32px,3.5vw,50px)!important;
  line-height:1.12!important;
  letter-spacing:-.028em!important;
  font-weight:600!important;
}
.copy h3{
  margin:44px 0 16px!important;
  font-size:25px!important;
  line-height:1.2!important;
  letter-spacing:-.03em!important;
  font-weight:600!important;
}
.copy strong{font-weight:600!important;color:var(--ink)!important}
.copy a{
  color:var(--oak)!important;
  text-decoration:underline!important;
  text-decoration-thickness:1px!important;
  text-underline-offset:3px!important;
}
.copy ul,.copy ol{
  margin:0 0 28px!important;
  padding-left:24px!important;
  color:var(--ink)!important;
}
.copy li{
  margin:10px 0!important;
  font-size:18px!important;
  line-height:1.65!important;
}
.pullquote{
  margin:54px 0!important;
  padding:28px 0!important;
  border-top:1px solid var(--line-strong)!important;
  border-bottom:1px solid var(--line)!important;
  background:transparent!important;
  color:var(--ink)!important;
  font-size:clamp(28px,3.4vw,45px)!important;
  line-height:1.2!important;
  letter-spacing:-.043em!important;
  font-weight:500!important;
}
.layers{
  margin-top:34px!important;
  border-top:1px solid var(--line)!important;
}
.layer{
  display:grid!important;
  grid-template-columns:58px 1fr!important;
  gap:22px!important;
  padding:26px 0!important;
  border:0!important;
  border-bottom:1px solid var(--line)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.layer-number{
  color:var(--muted)!important;
  font-size:11px!important;
  font-weight:500!important;
  letter-spacing:.1em!important;
}
.layer h3{margin:0 0 8px!important;font-size:18px!important}
.layer p{margin:0!important;color:var(--muted)!important;font-size:15px!important;line-height:1.6!important}
.closing{
  margin-top:80px!important;
  padding-top:34px!important;
  border-top:1px solid var(--line-strong)!important;
  background:transparent!important;
}
.closing h2{margin-top:0!important}
.closing p{color:var(--muted)!important;font-size:15px!important;line-height:1.65!important}

/* Common media/figure surfaces: preserve content, remove decorative card language */
figure,.figure,.visual,.evidence,.evidence-card,.note,.callout{
  border-radius:0!important;
  box-shadow:none!important;
}
img{max-width:100%;height:auto}
figcaption{color:var(--muted)!important;font-size:12px!important;line-height:1.5!important}

/* Footer */
.site-footer{
  padding:42px 0!important;
  background:transparent!important;
  border-top:1px solid var(--line)!important;
  color:var(--muted)!important;
}
.footer-inner{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:24px!important;
  font-size:12px!important;
}
.footer-inner span:first-child{
  font-family:"Play",Arial,sans-serif!important;
  color:var(--oak)!important;
  font-size:15px!important;
}

@media(max-width:900px){
  .library-head{grid-template-columns:1fr!important;gap:22px!important}
  .insight-card{grid-template-columns:1fr!important;gap:12px!important}
  .insight-card .meta,.insight-card h3,.insight-card p{grid-column:1!important;grid-row:auto!important}
  .insight-row{grid-template-columns:52px 1fr!important}
  .insight-row .actions{grid-column:2!important}
}
@media(max-width:700px){
  .shell,.article-reading{width:min(calc(100% - 28px),var(--max))!important}
  .site-header{height:76px!important}
  .brand-logo{width:29px!important;height:31px!important;flex-basis:29px!important}
  .brand-copy strong{font-size:21px!important}
  .back-link{display:none!important}
  .hub-hero{padding:96px 0 72px!important}
  .library{padding:86px 0 96px!important}
  .article-hero{padding:96px 0 62px!important}
  .article-body{padding:66px 0 92px!important}
  .copy p{font-size:18px!important}
  .pullquote{margin:44px 0!important}
  .footer-inner{flex-direction:column!important;align-items:flex-start!important}
}


/* Portuguese readability — longer words need more air, not smaller ambition */
html[lang="pt-BR"] .hub-hero h1{
  max-width:1080px!important;
  font-size:clamp(48px,5.5vw,84px)!important;
  line-height:1.08!important;
  letter-spacing:-.018em!important;
  text-wrap:balance!important;
}
html[lang="pt-BR"] .article-hero h1{
  max-width:1060px!important;
  font-size:clamp(42px,4.8vw,74px)!important;
  line-height:1.10!important;
  letter-spacing:-.015em!important;
  text-wrap:balance!important;
}
html[lang="pt-BR"] .insight-card h3{
  line-height:1.14!important;
  letter-spacing:-.022em!important;
  text-wrap:balance!important;
}
html[lang="pt-BR"] .article-lead{
  max-width:780px!important;
  line-height:1.62!important;
  letter-spacing:-.018em!important;
}
html[lang="pt-BR"] .copy p{
  letter-spacing:0!important;
}
html[lang="pt-BR"] .copy h2{
  line-height:1.18!important;
  letter-spacing:-.012em!important;
  text-wrap:balance!important;
}
html[lang="pt-BR"] .pullquote{
  line-height:1.28!important;
  letter-spacing:-.018em!important;
}
@media(max-width:700px){
  html[lang="pt-BR"] .hub-hero h1{
    font-size:clamp(40px,10.5vw,54px)!important;
    line-height:1.10!important;
    letter-spacing:-.012em!important;
  }
  html[lang="pt-BR"] .article-hero h1{
    font-size:clamp(36px,9.7vw,50px)!important;
    line-height:1.12!important;
    letter-spacing:-.010em!important;
  }
}
