/* Public home top, v2 (owner request 20/10/2026): the hero keeps only the "Marketing para ..." headline and the site/@
   field; right below, the "Flicko em ação" band (src/flicko-home-show.js); then "Como o Flicko aprende" (3 steps).
   Loaded after flicko-tokens.css. Transform / opacity only in the show; glass + tokens of Studio D in the cards. */

/* ---------- hero: content height, centred, never a 100vh empty block ---------- */
.fk-hero-v2{min-height:0!important}
.fk-hero-v2-body{flex:0 0 auto!important;justify-content:center!important;gap:32px!important;padding-top:clamp(40px,7vh,72px)!important;padding-bottom:clamp(40px,7vh,72px)!important}
/* acabamento 20/10/2026: the "Flicko em ação" band reads as part of the first screen (the stage keeps its own headroom for the
   caption and the hops, so the field does not need the full bottom padding above it) */
@media(min-width:769px){.fk-hero-v2-body{padding-bottom:clamp(8px,1.5vh,16px)!important}}
.fk-hero-v2-body>div:first-child{min-height:0!important;gap:0!important}
.fk-hero-v2 .fk-hero-scene::after{height:40%}
@media(max-width:767px){.fk-hero-v2-body{gap:24px!important;padding-top:32px!important;padding-bottom:32px!important}}
/* the headline is an h1 now (it was a p): keep the user-agent h1 margins and size out of it */
h1.fk-hero-typewriter{font-size:inherit;margin:0}

/* ---------- "Flicko em ação" band ---------- */
.fk-show{position:relative;padding:0 16px}
.fk-show-host{position:relative;max-width:1040px;margin:0 auto;height:var(--fk-show-h,300px)}
.fk-show-stage{position:absolute;inset:0;overflow:hidden;contain:layout paint;
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent)}
.fk-show-floor{position:absolute;left:0;right:0;top:var(--fk-show-floor,280px);height:1px;background:linear-gradient(90deg,transparent,var(--fk-line) 12%,var(--fk-line) 88%,transparent)}
/* "the day passes" (QA 21/10/2026): a soft dusk glow that reaches zero alpha before every edge of the stage (closest-side
   ellipse), never an opaque box. The old opaque gradient with a 28 px radius read as a dark block with a straight top edge,
   heavy in light theme and over the hero glows in dark theme. */
.fk-show-wash{position:absolute;inset:0;background:radial-gradient(closest-side at 50% 62%,rgba(26,47,158,.16),rgba(26,47,158,.07) 55%,rgba(26,47,158,0));opacity:0;pointer-events:none}
html.dark .fk-show-wash{background:radial-gradient(closest-side at 50% 62%,rgba(91,118,255,.16),rgba(91,118,255,.06) 55%,rgba(91,118,255,0))}
.fk-show-actor{position:absolute;left:0;top:200px;transform:translate(-50%,-50%);line-height:0}
.fk-show-card,.fk-show-cal,.fk-show-tap{position:absolute;left:0;top:0;opacity:0;will-change:transform;pointer-events:none}
.fk-show-card svg,.fk-show-cal svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fk-show-card-b{opacity:0}
.fk-show-tap{width:34px;height:34px;border-radius:50%;background:rgba(26,16,36,.20);box-shadow:0 0 0 2px rgba(26,16,36,.12)}
.fk-show-say{position:absolute;top:10px;left:50%;translate:-50% 0;margin:0;max-width:240px;padding:8px 14px;border-radius:14px;background:var(--fk-surface);color:var(--fk-text);
 font-family:var(--fk-font-text);font-size:15px;font-weight:700;line-height:1.25;white-space:nowrap;box-shadow:var(--fk-elev-2),0 0 0 1px var(--fk-border);opacity:0;transform:translateY(4px) scale(.96);transition:opacity 125ms linear,transform 250ms var(--fk-ease-flick)}
.fk-show-say::after{content:"";position:absolute;left:calc(50% + var(--tail,0px) - 6px);bottom:-5px;width:12px;height:12px;background:inherit;transform:rotate(45deg);border-radius:2px;box-shadow:1px 1px 0 0 var(--fk-border)}
.fk-show-say.on{opacity:1;transform:none}
.fk-show-say:empty{display:none}
html.dark .fk-show-tap{background:rgba(255,255,255,.28);box-shadow:0 0 0 2px rgba(255,255,255,.18)}
@media(prefers-reduced-motion:reduce){.fk-show-say{transition:none}}

/* ---------- "Como o Flicko aprende" ---------- */
.fk-learn{position:relative;max-width:1100px;margin:0 auto;padding:clamp(40px,7vw,88px) 24px clamp(48px,8vw,104px)}
.fk-learn-head{max-width:640px;margin:0 auto 40px;text-align:center}
.fk-learn-eyebrow{margin:0 0 12px;font-family:var(--fk-font-text);font-size:.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fk-text-brand)}
.fk-learn-title{margin:0 0 16px;font-family:var(--fk-font-display);font-size:clamp(1.875rem,3.6vw,2.75rem);font-weight:800;line-height:1.08;letter-spacing:-.03em;color:var(--fk-text);text-wrap:balance}
.fk-learn-lead{margin:0;font-family:var(--fk-font-text);font-size:1.125rem;line-height:1.55;color:var(--fk-text-soft);text-wrap:pretty}
.fk-learn-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none;counter-reset:fk-step}
.fk-learn-step{position:relative;display:flex;flex-direction:column;gap:14px;min-width:0;padding:20px 22px 24px;border-radius:var(--fk-radius-lg);background:var(--fk-glass-fill);border:1px solid var(--fk-glass-border);box-shadow:var(--fk-glass-highlight),var(--fk-glass-shadow);-webkit-backdrop-filter:var(--fk-glass-blur);backdrop-filter:var(--fk-glass-blur)}
.fk-learn-num{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--fk-primary);color:var(--fk-on-primary);font-family:var(--fk-font-display);font-size:.9375rem;font-weight:800}
.fk-learn-step h3{text-wrap:balance;margin:0;font-family:var(--fk-font-display);font-size:1.3125rem;font-weight:800;line-height:1.2;letter-spacing:-.02em;color:var(--fk-text)}
.fk-learn-step p{margin:0;font-family:var(--fk-font-text);font-size:1rem;line-height:1.55;color:var(--fk-text-soft)}
/* the small illustration on top of each step: icon chips of the Flicko icon system (no network logos) */
.fk-learn-art{position:relative;display:flex;flex-wrap:wrap;align-content:center;align-items:center;gap:8px;min-height:128px;box-sizing:border-box;padding:14px;border-radius:var(--fk-radius-md);background:var(--fk-surface);box-shadow:inset 0 0 0 1px var(--fk-border)}
.fk-chip{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 11px 0 9px;border-radius:999px;background:var(--fk-surface-alt);color:var(--fk-text);font-family:var(--fk-font-text);font-size:.8125rem;font-weight:600;line-height:1;white-space:nowrap}
.fk-chip svg{width:16px;height:16px;flex:none;stroke-width:2.25}
.fk-chip--brand{background:color-mix(in srgb,var(--fk-brand-mark) 14%,var(--fk-surface));color:var(--fk-text-brand)}
.fk-chip--ok{background:color-mix(in srgb,var(--fk-success) 14%,var(--fk-surface));color:var(--fk-success-ink,var(--fk-success))}
.fk-learn-arrow{color:var(--fk-text-muted);display:inline-flex}
.fk-learn-flow{display:flex;align-items:center;gap:4px;width:100%;flex-wrap:nowrap}
/* D16 (acabamento): each chip travels with the "›" after it, so a narrow card wraps between steps and never starts a line with
   an arrow nor pushes "Publicado" out of the box. On one line when it fits. */
.fk-learn-flow{flex-wrap:wrap;row-gap:8px}
.fk-learn-pair{display:inline-flex;flex:none;align-items:center;gap:4px;white-space:nowrap}
.fk-learn-flow .fk-chip{padding:0 9px 0 7px;font-size:.75rem;gap:5px}
.fk-learn-flow .fk-learn-arrow svg{width:13px;height:13px}
.fk-learn-arrow svg{width:16px;height:16px;stroke-width:2.25}
.fk-learn-mem{display:flex;align-items:center;gap:8px;width:100%;font-family:var(--fk-font-text);font-size:.875rem;font-weight:700;color:var(--fk-text)}
.fk-learn-mem svg{width:18px;height:18px}
.fk-learn-mem .fk-learn-edit{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:.75rem;font-weight:600;color:var(--fk-text-muted)}
.fk-learn-mem .fk-learn-edit svg{width:14px;height:14px}
/* D16 (acabamento 20/10/2026): side by side, the 4 parts of every card (art, number, title, text) share the rows of the list
   (subgrid), so the illustration boxes get the height of the tallest and the numbers and titles sit on one line. */
@media(min-width:900px){
 .fk-learn-steps{grid-template-rows:repeat(4,auto);row-gap:0}
 .fk-learn-step{display:grid;grid-row:span 4;grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr);row-gap:14px;align-content:start}
 .fk-learn-step>.fk-learn-num{justify-self:start}
}
@media(max-width:899px){.fk-learn-steps{grid-template-columns:1fr;max-width:560px;margin:0 auto}.fk-learn-art{min-height:0}}
@media(max-width:479px){.fk-learn-flow{flex-wrap:wrap;row-gap:8px}}