
:root{--public-hero-size:88px;--public-hero-word-width:833px;--public-hero-word-height:96px}
@media(max-width:1023px){:root{--public-hero-size:72px;--public-hero-word-width:682px;--public-hero-word-height:78px}}
@media(max-width:767px){:root{--public-hero-size:54px;--public-hero-word-width:439px;--public-hero-word-height:59px}}
@media(max-width:479px){:root{--public-hero-size:42px;--public-hero-word-width:342px;--public-hero-word-height:46px}}
@media(max-width:359px){:root{--public-hero-size:33px;--public-hero-word-width:270px;--public-hero-word-height:36px}}
.tw-caret{animation:public-caret .8s steps(2,jump-none) infinite!important}
@keyframes public-caret{to{opacity:0}}
@media(prefers-reduced-motion:reduce){.tw-caret{animation:none!important}}
/* Hero entry field, measured on the live frame 425:52 (19/10/2026): 560x70 glass field, 120x48 button, caption 16px below. */
.public-hero-form{display:flex;align-items:center;gap:8px;width:100%;min-height:70px;box-sizing:border-box;padding:10px 10px 10px 20px;border-radius:20px;background:linear-gradient(180deg,rgb(var(--glass-rgb)/.72),rgb(var(--glass-rgb)/.5));border:1px solid rgb(var(--ink-rgb)/.12);box-shadow:0 8px 30px rgba(22,48,79,.08),0 1px 0 rgba(255,255,255,.7) inset;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.public-hero-form:focus-within{border-color:color-mix(in srgb,var(--color-focus) 60%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-focus) 22%,transparent),0 8px 30px rgba(22,48,79,.08)}
.public-hero-input{flex:1;min-width:0;height:48px;border:0;background:transparent;font-family:var(--font-sans);font-size:1rem;color:var(--color-ink);outline:none}
.public-hero-input::placeholder{color:var(--color-muted);opacity:.85}
.public-hero-input[aria-invalid="true"]{color:var(--color-danger)}
.public-hero-submit{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex-shrink:0;min-width:120px;height:48px;padding:0 18px;border:0;border-radius:12px;background:var(--color-ink);color:var(--color-cream);font-family:var(--font-sans);font-size:.9375rem;font-weight:600;cursor:pointer;box-shadow:0 2px 8px rgba(26,26,26,.2),inset 0 1px 0 rgba(255,255,255,.14);transition:transform .25s cubic-bezier(.34,1.56,.64,1),filter .2s}
.public-hero-submit:hover{transform:scale(1.03);filter:brightness(1.1)}
.public-hero-submit:active{transform:scale(.97)}
.public-hero-submit:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.public-hero-caption{margin:0;font-family:var(--font-sans);font-size:.9375rem;color:var(--color-ink-soft);text-align:center;text-shadow:var(--hero-caption-shadow)}
.public-hero-error{margin:-4px 0 0;font-family:var(--font-sans);font-size:.875rem;font-weight:500;color:var(--color-danger);text-align:center}
@media(max-width:479px){.public-hero-form{padding-left:14px}.public-hero-submit{min-width:96px;padding:0 14px}}
@media(prefers-reduced-motion:reduce){.public-hero-submit{transition:none}.public-hero-submit:hover,.public-hero-submit:active{transform:none}}
/* Cookie banner, live frame 425:6227: 368px card, bottom-right, Decline (text) + Accept all (dark). */
.public-cookie-banner{position:fixed;right:16px;bottom:16px;z-index:60;width:min(368px,calc(100vw - 32px));box-sizing:border-box;padding:24px 16px 16px;border-radius:20px;background:linear-gradient(180deg,rgb(var(--glass-rgb)/.96),rgb(var(--glass-rgb)/.9));border:1px solid rgb(var(--ink-rgb)/.12);box-shadow:0 18px 50px rgba(22,48,79,.16);font-family:var(--font-sans);color:var(--color-ink)}
.public-cookie-title{margin:0 0 8px;font-size:1rem;font-weight:600}
.public-cookie-text{margin:0 0 16px;font-size:.9375rem;line-height:1.55;color:var(--color-ink-soft)}
.public-cookie-actions{display:flex;align-items:center;gap:12px}
.public-cookie-decline{min-height:40px;padding:0 12px;border:0;background:transparent;font:inherit;font-size:.9375rem;font-weight:500;color:var(--color-ink);cursor:pointer;border-radius:10px}
.public-cookie-decline:hover{background:rgb(var(--ink-rgb)/.08)}
.public-cookie-accept{flex:1;min-height:40px;border:0;border-radius:12px;background:var(--color-ink);color:var(--color-cream);font:inherit;font-size:.9375rem;font-weight:600;cursor:pointer}
.public-cookie-decline:focus-visible,.public-cookie-accept:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
/* Hero error state (live: the glass gets .is-error, aria-invalid on the field). */
.public-hero-form.is-error{border-color:color-mix(in srgb,var(--color-danger) 55%,transparent)}

.public-try-now{display:inline-flex;align-items:center;gap:6px;height:40px;padding:8px 18px;border-radius:12px;background:rgb(26,26,26);color:rgb(242,239,227);font-family:var(--font-sans);font-size:14px;font-weight:500;line-height:1;white-space:nowrap;text-decoration:none;box-shadow:0 2px 8px rgba(26,26,26,.2),inset 0 1px rgba(255,255,255,.14);transition:transform 250ms cubic-bezier(.34,1.56,.64,1)}
.public-try-now:hover{transform:scale(1.03)}
.public-try-now:active{transform:scale(.97)}
.public-try-now:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.public-try-now-compact{height:44px;padding:0 14px}
@media(pointer:fine){.public-try-now-compact{height:40px}}
@media(prefers-reduced-motion:reduce){.public-try-now{transition:none}.public-try-now:hover,.public-try-now:active{transform:none}}

[data-flicko-pendente]{display:none!important}

span.logo-wordmark.flicko-text-wordmark{width:auto!important;height:auto!important;font-family:var(--font-sans);font-size:20px;font-weight:600;line-height:1;letter-spacing:-.02em;color:currentColor;white-space:nowrap}
/* Returning users: "Entrar" next to the primary "Experimente agora". */
.public-login-link{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;color:var(--color-ink-soft,rgb(64,64,64));font-family:var(--font-sans);font-size:14px;font-weight:500;line-height:1;white-space:nowrap;text-decoration:none;border-radius:8px}
.public-login-link:hover{color:var(--color-ink,rgb(26,26,26))}
.public-login-link:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
@media(pointer:fine){.public-login-link{min-height:40px}}
.public-login-link[hidden]{display:none}

@media(max-width:419px){header span.logo-wordmark.flicko-text-wordmark{display:none!important}.public-login-link{padding:0}}
/* Diagramação 20/10/2026 (business_logic/qa/diagramacao/RELATORIO.md). */
/* Suite ("O que o Flicko faz"): chips + carousel at every width since 21/10/2026 (src/flicko-showcase.css); the
   desktop two-column rule for the old text accordion (D01) left with it. */
/* Section titles in glass cards (pricing "Escolha quanto o Flicko faz por mês."): no single-word last line. */
#main-content .vellum-glass h2{text-wrap:balance}
/* Pricing cards side by side: Max has no "Para uma marca" pill, so its rows (name, price, CTA) sat 34px above Pro's. */
@media(min-width:1024px){
 #main-content [class*="tier-card-max-"]>[class^="tier-name-"]{margin-top:42px!important}
 #main-content [class*="tier-card-"]>[class^="tier-subtitle-"]+div{min-height:60px}
}
/* Below 1280px the Max card keeps 30px of top padding (44px above), so its name needs 14px more to meet Pro's row. */
@media(min-width:1024px) and (max-width:1279px){#main-content [class*="tier-card-max-"]>[class^="tier-name-"]{margin-top:56px!important}}
/* Mobile pass 20/10/2026 (business_logic/qa/mobile/MAPA.md, diagramação D15): at 360-479px the button left ~120-150px to the
   field and the placeholder read "suaempresa.com ou (". On phones the button goes under the field, full width. */
@media(max-width:479px){.public-hero-form{flex-wrap:wrap;padding:8px}.public-hero-input{flex:1 1 100%;padding:0 10px}.public-hero-submit{flex:1 1 100%;width:100%}}
/* Mobile pass (D15): on phones the cookie card took ~220px of the screen over the hero and the "Flicko em ação" band. It becomes
   a compact bar docked to the bottom edge (title inline, two-line text, buttons in one row), clear of the safe area. */
@media(max-width:600px){
 .public-cookie-banner{left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));width:auto;padding:12px 14px;border-radius:16px;background:rgb(var(--glass-rgb)/.99)}
 .public-cookie-title{display:inline;margin:0 6px 0 0;font-size:.875rem}
 .public-cookie-text{display:inline;margin:0;font-size:.8125rem;line-height:1.4}
 .public-cookie-actions{margin-top:10px;gap:8px}
 .public-cookie-decline,.public-cookie-accept{min-height:44px}
}
/* Acabamento 20/10/2026 (RELATORIO.md D10, D11). */
/* D10 "Você, sua equipe e sua empresa…": the week strip is centred under the copy, so the eyebrow, title and text centre on the
   same axis (as the pricing heading does). Phones keep their own layout (mobile CSS owns <=768px). */
@media(min-width:769px){
 section[aria-labelledby="personal-brands-heading"]>div>div:first-child{text-align:center}
 section[aria-labelledby="personal-brands-heading"]>div>div:first-child>h2,
 section[aria-labelledby="personal-brands-heading"]>div>div:first-child p.mt-4{margin-inline:auto}
}
/* D11 final CTA "Deixe o Flicko cuidar do seu feed.": balanced lines, never "feed." alone (the mascot column is untouched). */
div:has(>.fk-cta-mascot)>.fk-cta-mascot~div h2{text-wrap:balance}
