/* Shared rules of the site design on every page: states set by JS, the language
   switcher, the private-beta modal, and the pages outside the export (pricing,
   legal, 404). Loaded after the page CSS and responsive.css. */

@font-face{font-family:"Plus Jakarta Sans";src:url("/fonts/plus-jakarta-sans-variable.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
/* Arial-metric stand-in while Plus Jakarta Sans loads, so the swap does not move text.
   Measured in Chrome from plus-jakarta-sans-variable.woff2 against Arial/Liberation Sans
   on the page copy: size-adjust = width ratio at that weight; the overrides are the real
   font's ascent (1.038 em), descent (0.222 em) and line gap (0) divided by size-adjust. */
@font-face{font-family:"Plus Jakarta Sans Fallback";src:local("Arial"),local("Liberation Sans");font-weight:100 549;size-adjust:104.83%;ascent-override:99.02%;descent-override:21.18%;line-gap-override:0%}
@font-face{font-family:"Plus Jakarta Sans Fallback";src:local("Arial Bold"),local("Liberation Sans Bold"),local("Arial"),local("Liberation Sans");font-weight:550 900;size-adjust:100.75%;ascent-override:103.03%;descent-override:22.03%;line-gap-override:0%}

[hidden],.hidden{display:none!important}
body.pv-lock{overflow:hidden}
img{height:auto}
.pg-reset{display:none}
.nav.rv.nav-enter{transition-delay:.05s}
.logo-sm img{height:20px;width:auto}
input.chat-text{font:inherit;color:#fff;background:none;border:0;outline:0;width:100%}
input.chat-text::placeholder{color:rgba(255,255,255,.42);opacity:1}

/* proof blocks (rendered only when proof.json has entries) */
.band .sub+.btn{margin-top:48px}
.proof-testimonials:has(+#faq){padding-top:0}
.stats-row .stat:nth-child(1){transition-delay:.1s}
.stats-row .stat:nth-child(2){transition-delay:.2s}
.stats-row .stat:nth-child(3){transition-delay:.3s}
.stats-row .stat:nth-child(4){transition-delay:.4s}
.quotes .q-card:nth-child(1){transition-delay:.05s}
.quotes .q-card:nth-child(2){transition-delay:.2s}
.quotes .q-card:nth-child(3){transition-delay:.35s}

/* post viewer cards: keyboard focus shows the same state as hover */
.og-cell:focus-visible{outline:3px solid var(--pink);outline-offset:4px}
.og-cell:focus-visible .og-view{opacity:1}

/* language switcher */
.nav-lang .dd-panel{min-width:170px;left:auto;right:-14px;transform:translate(0,8px)}
.nav-lang:hover .dd-panel,.nav-lang:focus-within .dd-panel{transform:none}
.nav-lang .dd-panel a.now{background:#f7f6fd;color:var(--pink-deep)}
.nav-links>a.now{color:var(--ink)}
.nav-links>a.now::after{width:100%}

/* footer private-beta trigger */
.footer-beta{background:none;border:0;padding:0;font:inherit;font-size:14px;font-weight:600;color:var(--fs-text-600);cursor:pointer}
.footer-beta:hover{color:var(--ink)}

/* private-beta modal */
.bm{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:16px}
.bm-backdrop{position:absolute;inset:0;background:rgba(7,0,21,.6)}
.bm-card{position:relative;width:100%;max-width:440px;background:#fff;border-radius:28px;padding:40px 32px 32px;box-shadow:0 30px 70px -20px rgba(7,0,21,.45);text-align:center}
.bm-close{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:0;background:var(--fs-bg-3);color:var(--fs-text-600);font-size:20px;line-height:1;cursor:pointer}
.bm-close:hover{background:var(--fs-border)}
.bm-badge{display:inline-block;padding:6px 12px;border-radius:var(--fs-r-pill);background:var(--pink-pale);color:var(--pink-deep);font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.bm-card h2{font-family:var(--display);font-size:28px;line-height:1.15;color:var(--ink);margin:16px 0 8px}
.bm-sub{font-size:15px;line-height:1.6;color:var(--fs-text-500);margin-bottom:22px}
.bm-form{display:flex;flex-direction:column;gap:12px;text-align:left}
.bm-form label{font-size:13px;font-weight:700;color:var(--fs-text-700)}
.bm-form input{height:48px;border-radius:14px;border:1px solid var(--fs-border-strong);padding:0 16px;font:inherit;font-size:15px;color:var(--ink)}
.bm-form input:focus{outline:2px solid var(--fs-indigo-500);outline-offset:1px}
.bm-form .btn{margin-top:4px;width:100%}
.bm-error{font-size:13px;color:#b91c1c}
.bm-success{display:flex;flex-direction:column;align-items:center;gap:10px}
.bm-check{width:56px;height:56px;border-radius:50%;background:var(--pink-pale);color:var(--pink-deep);display:flex;align-items:center;justify-content:center;font-size:26px}

/* pages outside the export */
.page-shell .shell-hero{padding:128px 40px 64px;color:#fff;text-align:center}
.shell-hero-inner{position:relative;max-width:760px;margin:0 auto}
.shell-hero-inner .weyebrow{color:var(--fs-magenta-100)}
.shell-hero h1{font-family:var(--display);font-size:clamp(34px,5vw,60px);line-height:1.08;letter-spacing:-.02em;margin:14px 0 16px}
.shell-hero-inner p{font-size:18px;line-height:1.6;color:rgba(255,255,255,.78)}
.plans-loading{position:relative;margin-top:40px;color:rgba(255,255,255,.7);font-size:15px}
.plan-grid{position:relative;max-width:1192px;margin:48px auto 0;text-align:left;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.plan-grid .price-card{padding:36px 28px}
.plan-grid .price-card small{font-size:15px;font-weight:500;color:var(--fs-text-500);letter-spacing:0;margin-left:4px}
.plans-unavailable{position:relative;max-width:560px;margin:40px auto 0;padding:32px;border-radius:28px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
/* loading, skeleton, cards and unavailable share one grid cell: the skeleton keeps the
   cards' height until they arrive, and the unavailable panel fills that height */
.plans-area{position:relative;display:grid;grid-template-columns:minmax(0,1fr);max-width:1192px;margin:0 auto}
.plans-area>*{grid-area:1/1;margin-left:0;margin-right:0}
.plans-area>.plans-loading{align-self:start}
.plan-skeleton{visibility:hidden}
.plans-area>.plans-unavailable{max-width:none;margin-top:48px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.plans-area>.plans-unavailable>*{max-width:496px}
.plans-unavailable h2{font-size:24px;margin-bottom:8px}
.plans-unavailable p{color:rgba(255,255,255,.78);line-height:1.6}

.calc-card{max-width:760px;margin:0 auto;background:#fff;border-radius:32px;padding:40px;box-shadow:inset 0 0 0 1px var(--fs-border),var(--fs-shadow-card);display:flex;flex-direction:column;gap:28px}
.calc-prompt{font-size:18px;font-weight:700;color:var(--ink)}
.calc-step{display:flex;flex-direction:column;gap:12px}
.calc-label{font-size:15px;font-weight:700;color:var(--fs-text-700)}
.calc-options{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.segment-option,.cost-option{display:flex;flex-direction:column;gap:4px;align-items:flex-start;text-align:left;padding:16px;border-radius:18px;border:0;background:var(--fs-bg-2);box-shadow:inset 0 0 0 1px var(--fs-border);font:inherit;font-size:15px;font-weight:700;color:var(--ink);cursor:pointer;transition:box-shadow .2s var(--fs-ease),background .2s}
.cost-option span{font-size:13px;font-weight:500;color:var(--fs-text-500)}
.segment-option:hover,.cost-option:hover{background:#f7f6fd}
.segment-option.selected,.cost-option.selected{background:var(--pink-pale);box-shadow:inset 0 0 0 2px var(--pink)}
.calc-slider{display:flex;align-items:center;gap:16px}
.calc-slider input{flex:1;accent-color:var(--pink)}
.calc-slider output{min-width:72px;text-align:right;font-weight:800;color:var(--ink)}
.calc-tip{font-size:13px;line-height:1.55;color:var(--fs-text-500)}
.calc-results{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding-top:28px;border-top:1px solid var(--fs-border)}
.calc-annual{font-family:var(--display);font-size:clamp(40px,6vw,64px);line-height:1;color:var(--pink-deep)}
.calc-annual-label{font-size:14px;font-weight:700;color:var(--fs-text-500)}
.calc-primal{font-size:16px;line-height:1.6;color:var(--fs-text-700);max-width:52ch}
.calc-toggle{background:none;border:0;font:inherit;font-size:14px;font-weight:700;color:var(--fs-indigo-700);cursor:pointer;text-decoration:underline}
.calc-breakdown{width:100%;display:flex;flex-direction:column;gap:8px;text-align:left}
.calc-breakdown>div{display:flex;justify-content:space-between;gap:16px;font-size:14px;color:var(--fs-text-600)}
.calc-breakdown dd{font-weight:700;color:var(--ink);white-space:nowrap}
.calc-breakdown .net{padding-top:8px;border-top:1px solid var(--fs-border);font-weight:800}
.calc-breakdown .net dd{color:var(--fs-success)}
.calc-breakdown .net dd.neg{color:#b91c1c}
.calc-plan{display:flex;flex-direction:column;align-items:center;gap:2px;padding:16px 24px;border-radius:20px;background:#f7f6fd}
.calc-plan strong{font-size:20px;color:var(--ink)}
.calc-plan span:not(.weyebrow){font-size:14px;color:var(--fs-text-600)}
.calc-trial{font-size:13px;color:var(--fs-text-500)}

.stat-row{max-width:1192px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:center}
.stat-row>div{display:flex;flex-direction:column;gap:6px;padding:28px;border-radius:24px;background:var(--fs-bg-2)}
.stat-row b{font-family:var(--display);font-size:40px;color:var(--pink-deep)}
.stat-row span{font-size:14px;line-height:1.5;color:var(--fs-text-600)}
.feature-list{max-width:760px;margin:0 auto;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.feature-list li{padding:16px 18px 16px 44px;border-radius:16px;background:var(--fs-bg-2);font-size:15px;line-height:1.5;color:var(--fs-text-700);position:relative}
.feature-list li::before{content:"";position:absolute;left:18px;top:21px;width:12px;height:7px;border-left:2.5px solid var(--pink);border-bottom:2.5px solid var(--pink);transform:rotate(-45deg)}
.faq-contact{max-width:760px;margin:32px auto 0;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.faq-contact span{color:var(--fs-text-500);font-size:14px}
.faq-contact .btn{margin-top:10px}

.legal-doc{max-width:760px;margin:0 auto;padding:128px 20px 80px;color:var(--fs-text-700);font-size:16px;line-height:1.7}
.legal-doc h1{font-family:var(--display);font-size:clamp(32px,4vw,48px);line-height:1.1;color:var(--ink);margin-bottom:24px}
.legal-doc h2{font-size:22px;color:var(--ink);margin:36px 0 12px}
.legal-doc h3{font-size:18px;color:var(--ink);margin:24px 0 8px}
.legal-doc p,.legal-doc ul,.legal-doc ol{margin-bottom:14px}
.legal-doc ul,.legal-doc ol{padding-left:24px}
.legal-doc table{width:100%;border-collapse:collapse;margin-bottom:16px;font-size:14px}
.legal-doc th,.legal-doc td{border:1px solid var(--fs-border);padding:8px 10px;text-align:left;vertical-align:top}
.legal-doc a{text-decoration:underline}
.notfound{padding-bottom:96px}
.notfound .btn{position:relative;margin-top:28px}

@media (max-width:760px){
  .page-shell .shell-hero{padding:112px 20px 48px}
  .calc-card{padding:28px 20px}
  .calc-options,.stat-row,.feature-list{grid-template-columns:1fr}
  .bm-card{padding:36px 20px 24px}
}

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

.footer-links .footer-social{gap:18px}
.footer-links .footer-social a{font-size:13px;font-weight:600;color:var(--fs-text-400)}
.footer-links .footer-social a:hover{color:var(--ink)}
/* footer: link columns + bottom bar (logo left, social icons right) */
.footer-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 32px;max-width:1322px;margin:0 auto;padding:48px 20px 28px}
.footer-col{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.footer-col h3{margin:0 0 4px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fs-text-400)}
.footer-col a,.footer-col .footer-beta{font-size:14px;font-weight:600;color:var(--fs-text-500);text-decoration:none;background:none;border:0;padding:0;cursor:pointer;font-family:inherit;text-align:left}
.footer-col a:hover,.footer-col .footer-beta:hover{color:var(--ink)}
.footer-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px 24px;max-width:1322px;margin:0 auto;padding:22px 20px 36px;border-top:1px solid var(--fs-border-soft)}
.footer-bar .logo-sm img{height:20px;width:auto;display:block}
.footer-bar .fine{font-size:13px;color:var(--fs-text-400);flex:1 1 auto}
.footer-social{display:flex;align-items:center;gap:20px;margin-left:auto}
.footer-social a{display:inline-flex;color:var(--fs-text-400);transition:color .2s}
.footer-social a:hover,.footer-social a:focus-visible{color:var(--ink)}
@media (max-width:760px){.footer-cols{grid-template-columns:repeat(2,minmax(0,1fr));padding:40px 20px 20px}.footer-bar{flex-direction:column;align-items:flex-start}.footer-social{margin-left:0}}
/* hero headline: both lines bold, larger (Valerio 2026-09-25) */
.hero-h1:has(.roll-track){font-weight:700;font-size:64px;line-height:1.06;letter-spacing:-.03em}
.hero-h1:has(.roll-track) b{font-weight:800}
@media (min-width:641px) and (max-width:1023px){.hero-h1:has(.roll-track){font-size:clamp(40px,6.2vw,56px)}}
@media (max-width:640px){.hero-h1:has(.roll-track){font-size:clamp(34px,10vw,44px);line-height:1.08}}
/* hero subline: the "not the usual AI generator" sentence on its own centred line, never broken mid-sentence */
.hero-kick{text-align:center}
.hero-kick .hero-not{display:block;width:max-content;max-width:100vw;margin:6px 0 0 50%;transform:translateX(-50%);white-space:nowrap}
@media (max-width:640px){.hero-kick .hero-not{font-size:clamp(10px,3vw,13px);letter-spacing:.08em}}
/* header: pink start CTA next to Login on desktop; on small screens the whole .nav-cta hides (menu script injects its own CTA and puts Login in the menu) */
.nav-cta .nav-start{white-space:nowrap}
.rnav-needed .nav-cta{display:none}
.rnav-login{margin-top:6px;border-top:1px solid var(--fs-border-soft,#ECE9F5);padding-top:14px}
/* "The result" scene on phones: stack reel, bubbles and follower counter instead of the desktop side-by-side collage */
@media (max-width:640px){
  .ha-stage{min-height:400px}
  .res2{flex-direction:column;align-items:stretch;justify-content:center;gap:12px;width:100%;height:auto}
  .res2-reel{flex:none;width:116px;height:150px;margin:0 auto;border-radius:16px}
  .res2-bubbles{position:static;width:100%;display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:-34px}
  .res2-bub{position:relative;left:auto!important;top:auto!important;bottom:auto!important;--r:0deg;max-width:100%;font-size:12px;padding:6px 12px 6px 6px}
  .res2-bub img{width:24px;height:24px}
  .res2-fol{flex:none;align-items:center;text-align:center;gap:4px}
  .res2-fol b{font-size:clamp(32px,10vw,42px)}
  .res2-fol svg{width:70%;height:40px;margin:0 auto}
}
/* audience + industry hero form on phones (2026-09-25): the one-row pill from
   responsive.css only sized a <button>, but these eight pages use an a.btn at
   desktop size, so a long label ("Take It Off My Plate →", "Criar minha
   campanha →") took ~80% of the pill and left the field 7-20% wide (0 px at
   320). Stack the form inside one rounded box: field on top, full-width button
   below. Scoped to .lt-hero, so the home hero keeps its one-row pill; tablet
   and desktop are untouched (the pill is 460px there and the field keeps room). */
@media (max-width:640px){
  .hero-card.lt-hero .chat-input{flex-direction:column;align-items:stretch;height:auto;gap:6px;padding:6px;border-radius:28px}
  .hero-card.lt-hero .chat-input input{flex:0 0 auto;width:100%;height:48px;padding:0 14px;font-size:16px}
  .hero-card.lt-hero .chat-input .btn:not(#_){flex:0 0 auto;width:100%;max-width:100%;height:auto;min-height:48px;padding:12px 16px;border-radius:22px;font-size:16px;line-height:1.2;white-space:normal;text-align:center}
}
/* phones: home hero form stacks like the audience pages (input on top, full-width button); beats responsive.css's row rule */
@media (max-width:640px){
  .hero-card .hero-inner .chat-input{flex-direction:column;align-items:stretch;height:auto;padding:8px;gap:8px;border-radius:28px}
  .hero-card .hero-inner .chat-input input{flex:0 0 auto;width:100%;min-width:0;height:48px;padding:0 14px;font-size:16px}
  .hero-card .hero-inner .chat-input .btn:not(#_){flex:0 0 auto;width:100%;max-width:100%;height:auto;min-height:48px;padding:12px 16px;border-radius:22px;font-size:16px;line-height:1.2;white-space:normal;text-align:center}
}
/* audience + industry pages, phone QA pass 2 (2026-09-25). Phones only; tablet and desktop keep their rules. */
@media (max-width:640px){
  /* 1. post preview popup: the column was min(400px,92vw) = 362px inside a 345px box (the .pv overlay has 24px
     padding), so the box scrolled sideways and clipped the close button that sat outside its corner.
     Size the column to the box and put the close button inside it. */
  .pv-wrap{width:100%;max-width:400px;grid-template-columns:minmax(0,1fr)}
  .pv-x{top:8px;right:8px}
  /* 2. post cards: responsive.css's .og-pill size lost to vertical.css's .og-cell span (12.5px), so the pill sat on
     the stats line and the Reel / 1/5 badge sat on the username. Beat it on specificity, park the pill under the
     caption (the caption no longer needs the right-hand gutter), and keep the username clear of the badge. */
  .og-cell .og-pill{font-size:9px}
  .og-grid .og-cap{padding:26px 12px 32px 12px}
  .og-cell .og-badge{font-size:10.5px;padding:3px 8px}
  .og-grid .og-top{padding-right:52px}
  .og-grid .og-cell:not(:has(.og-badge)) .og-top{padding-right:12px}
  .og-top .h{min-width:0}
  .og-top .h b,.og-top .h span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* 3. how-it-works step 1: the typed brief did not shrink, pushing the arrow out of the pill; the
     "Reading your brand" label sat on the site card. Ellipsize the brief; move the label into the gap between the
     pill (ends at 68px) and the card (now starts at 92px). */
  .sv-input span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sv-site{top:92px}
  .sv-read{top:75px;white-space:nowrap}
  /* 4. agencies case-study header: avatar squashed, name and "5 posts / week" pill wrapped word by word.
     Put the status pills on their own row under the client name. */
  .cshead{flex-wrap:wrap;row-gap:10px}
  .cshead .cava{flex-shrink:0}
  .cshead .cn{flex:1;min-width:0}
  .cshead .cstat{margin-left:0;width:100%}
  .cshead .cstat span{white-space:nowrap}
  /* 5. brands & teams stepper: step 2 chips needed ~446px in a ~300px frame (Engage, Sell cut off), now 2 x 2
     (tighter chips and a lower ghost card keep the taller row from pushing the idea card onto it); step 5
     "Regenerate" broke onto two lines. The ghost card's fixed 320px width is fixed in brands-teams.css. */
  .lrow2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
  .lc{min-width:0;padding:8px 10px}
  .ideacard.ghost{bottom:4px}
  .ideacard:not(.ghost){z-index:1}
  .apr .abtn{white-space:nowrap}
  /* 6. B2B & SaaS before/after: the long file name set the grid column wider than the box. */
  .imgx{grid-template-columns:minmax(0,1fr)}
  .imgx-doc .dt{overflow-wrap:anywhere}
  /* 8. dossier stat row: 2 x 2 instead of 3 + a lone "3 platforms"; no one-word last lines in headings */
  .camp-bar .stats{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px}
  .step3 h3,.shell-hero h1{text-wrap:balance}
}

/* agencies: margin section is copy only (calculator removed 2026-09-25); center the column */
.mcalc:not(:has(.calcbox)){grid-template-columns:1fr;max-width:720px;text-align:center}
.mcalc:not(:has(.calcbox)) .copy{align-items:center}
.mcalc:not(:has(.calcbox)) .copy p{max-width:56ch}

/* About: "that works" in brand pink (Valerio, 2026-09-25) */
.h1-pink{color:var(--pink)}