/* Historinha — shared content-page brand system.
   Grounded in public/landing/landing.css so every marketing/legal/help page
   matches the main site exactly: Cormorant Garamond (display), Lora (serif
   body, for readability), Inter (letterspaced UI labels), the gold palette,
   and the small nuances (eyebrow tags, glass cards, gold hairlines). */

:root{
  --midnight:#0A0820; --plum:#2E1F3D;
  --gold:#ECC579; --gold-hi:#F6E3AC; --gold-lo:#C99A4A;
  --parchment:#F3E3C2; --moon:#E8E6EE; --ink:#2A1A08;
  --display:"Cormorant Garamond",Georgia,serif;
  --body:"Lora",Georgia,serif;
  --ui:"Inter",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --ease:cubic-bezier(.22,.7,.25,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh;
  background:linear-gradient(165deg,var(--midnight),#150F2A 52%,var(--plum));
  background-attachment:fixed;
  color:rgba(232,230,238,.86);
  font-family:var(--body); font-size:17px; line-height:1.72;
  padding:34px 20px 72px;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.wrap{width:min(768px,92vw); margin:0 auto}

/* top back-links */
.nav{margin-bottom:30px; font-family:var(--ui); font-size:13.5px; letter-spacing:.01em}
.nav a{color:rgba(236,197,121,.82); text-decoration:none; margin-right:20px}
.nav a:hover{color:var(--gold-hi)}

/* the signature landing eyebrow tag */
.eyebrow{
  font-family:var(--ui); font-size:11px; font-weight:600;
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold); opacity:.85; margin-bottom:14px;
}

/* headings */
h1{
  font-family:var(--display); font-weight:500;
  font-size:clamp(30px,5.4vw,45px); line-height:1.09; letter-spacing:.004em;
  color:#F8F1DD; margin:0 0 16px;
}
h2{
  font-family:var(--display); font-weight:600;
  font-size:clamp(22px,3vw,28px); line-height:1.15;
  color:#F4ECD6; margin:40px 0 10px;
}
h3{font-family:var(--display); font-weight:600; font-size:21px; color:#F4ECD6; margin:0 0 5px}

/* lede / subtitle */
.sub{
  font-family:var(--body); font-style:italic;
  font-size:clamp(17px,2.2vw,20px); line-height:1.5;
  color:rgba(242,232,207,.82); margin:0 0 12px; max-width:60ch;
}
.meta{font-family:var(--ui); font-size:12px; letter-spacing:.04em;
  color:rgba(236,197,121,.6); margin-bottom:26px}

p{margin:0 0 14px; max-width:66ch}
strong,b{color:var(--parchment); font-weight:600}
em{color:rgba(242,232,207,.94)}
a{color:var(--gold)}
ul,ol{max-width:66ch; padding-left:22px; margin:0 0 14px}
li{margin:7px 0}

/* glass panels */
.card{
  background:rgba(20,16,40,.5); border:1px solid rgba(236,197,121,.22);
  border-radius:18px; padding:18px 24px; margin:18px 0; backdrop-filter:blur(8px);
}
.card h2:first-child,.card h3:first-child{margin-top:2px}
.hh{color:var(--gold); font-weight:600}

/* gold CTA pill — landing .cta */
.cta{
  display:inline-block; margin-top:18px;
  font-family:var(--ui); font-weight:600; font-size:15px; letter-spacing:.01em;
  color:var(--ink); text-decoration:none; cursor:pointer;
  padding:13px 27px; border-radius:999px; border:none;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 55%,var(--gold-lo));
  box-shadow:0 1px 0 rgba(255,245,210,.6) inset,0 10px 30px rgba(212,163,90,.32);
  transition:transform .35s var(--ease),box-shadow .35s;
}
.cta:hover{transform:translateY(-2px);
  box-shadow:0 1px 0 rgba(255,245,210,.6) inset,0 16px 44px rgba(212,163,90,.5)}

/* comparison / benchmark tables */
.tablewrap{overflow-x:auto; margin:20px 0; border-radius:14px;
  border:1px solid rgba(236,197,121,.14)}
table{border-collapse:collapse; width:100%; min-width:520px;
  font-family:var(--body); font-size:15px}
th,td{padding:12px 14px; text-align:left;
  border-bottom:1px solid rgba(236,197,121,.13); vertical-align:top}
tbody tr:last-child td{border-bottom:none}
thead th{font-family:var(--ui); font-size:11.5px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:rgba(232,230,238,.58)}
thead th.hh{color:var(--gold)}
thead th.cg,thead th.col{color:rgba(232,230,238,.5)}
tbody tr:nth-child(odd){background:rgba(236,197,121,.03)}
.rowlbl{font-family:var(--body); color:rgba(242,232,207,.9)}
.cg{font-family:var(--ui); font-size:12px; color:rgba(232,230,238,.5)}
.y{color:var(--gold); font-weight:700}
.n{color:rgba(232,230,238,.4); font-weight:700}
.win td{background:rgba(236,197,121,.10)}
.win .rowlbl{color:var(--gold-hi); font-weight:600}

/* "por necessidade" rows (melhores-apps) */
.need{background:rgba(20,16,40,.42); border:1px solid rgba(236,197,121,.16);
  border-left:3px solid var(--gold); border-radius:12px;
  padding:12px 18px; margin:10px 0; font-family:var(--body); font-size:15.5px}
.need b{color:var(--parchment)}

/* app cards (melhores-apps) */
.app{background:rgba(20,16,40,.5); border:1px solid rgba(236,197,121,.2);
  border-radius:16px; padding:18px 22px 12px; margin-top:16px; backdrop-filter:blur(6px)}
.app.feat{border-color:rgba(236,197,121,.55); box-shadow:0 0 0 1px rgba(236,197,121,.18)}
.app h3{margin-bottom:2px}
.app p{margin-bottom:8px; font-size:15px}
.best{font-family:var(--ui); font-size:12px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin:0 0 8px}

/* FAQ / Q&A */
.q{font-family:var(--display); font-weight:600; font-size:19.5px;
  color:#F4ECD6; margin:18px 0 4px}
.a{font-family:var(--body); font-size:15.5px; color:rgba(232,230,238,.84); margin:0 0 14px}

/* promises (lgpd) */
.promises{list-style:none; padding:0; margin:0; max-width:none}
.promises li{position:relative; padding-left:26px; margin:12px 0; font-size:15.5px}
.promises li::before{content:"✦"; position:absolute; left:0; top:1px; color:var(--gold)}

/* small print / sources / notes */
.refs{list-style:none; padding:16px 0 0; margin:28px 0 0;
  border-top:1px solid rgba(236,197,121,.14); max-width:none}
.refs li{font-family:var(--ui); font-size:12.5px; color:rgba(232,230,238,.5);
  margin:5px 0; line-height:1.5}
.note{font-family:var(--ui); font-size:13.5px; color:rgba(232,230,238,.6)}
.note b{color:var(--moon)}
.fair{font-style:italic; color:rgba(242,232,207,.82)}
.disc,.fineprint{font-family:var(--ui); font-size:12.5px;
  color:rgba(232,230,238,.42); font-style:italic; margin-top:24px}
.more{font-family:var(--ui); font-size:14px; color:rgba(232,230,238,.6); margin-top:22px}
.more a{margin:0 4px}

footer{margin-top:44px; padding-top:22px;
  border-top:1px solid rgba(236,197,121,.12);
  font-family:var(--ui); font-size:12.5px; color:rgba(232,230,238,.45); text-align:center}