/* FI-FI product pages: structural parity with the existing BR product pages.
   This file does not invent artwork. It only supplies the BR base layout around
   the original BR integration styles and crops the existing FI screenshots. */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body.fi-br-product{margin:0;min-height:100svh;font-family:Inter,Sora,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--deck-ink,var(--ink,#eef6ff));overflow-x:hidden}

/* Korean BR page has its color system inline in the original BR HTML.
   FI-FI loads the shared BR assets without that inline block, so reproduce the
   same dark Korean palette here instead of falling back to the browser white. */
body.it-ko-site.fi-br-product{
  --bg:#050a16;--ink:#f7fbff;--muted:#b9c8dc;--c:#cd2e3a;--c2:#0047a0;--gold:#9fc1ff;
  --deck-bg:#050a16;--deck-ink:#f7fbff;--deck-muted:#b9c8dc;--deck-a:#0047a0;--deck-b:#cd2e3a;
  --deck-line:#9fc1ff;--deck-hi:#dce8ff;--deck-neon:#5c8cff;--deck-border:rgba(255,255,255,.10);
  --deck-cta:linear-gradient(90deg,#071a3d,#0047a0 48%,#cd2e3a);
  --deck-cta-shadow:0 10px 24px rgba(0,0,0,.35),0 8px 20px rgba(0,71,160,.30),0 0 16px rgba(205,46,58,.14),inset 0 0 0 1px rgba(255,255,255,.18);
  background:radial-gradient(1100px 580px at 8% -10%,rgba(0,71,160,.30),transparent 56%),radial-gradient(900px 520px at 100% 0%,rgba(205,46,58,.18),transparent 54%),radial-gradient(720px 520px at 100% 100%,rgba(159,193,255,.10),transparent 58%),linear-gradient(180deg,#081326 0%,#050a16 58%,#02040a 100%)!important;
  color:#f7fbff!important;
}
body.fi-br-product a{text-decoration:none}
body.fi-br-product a:hover{opacity:.96}
body.fi-br-product #site-header{position:sticky;top:0;z-index:2147483000;isolation:isolate;pointer-events:auto}
body.fi-br-product #site-header *{pointer-events:auto}
body.fi-br-product .wrap{max-width:1180px;margin:0 auto;padding:clamp(12px,3vw,22px)}
body.fi-br-product .banner{position:relative;margin:12px 0 0;overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:20px;box-shadow:0 20px 50px rgba(0,0,0,.45)}
body.fi-br-product .banner img{display:block;width:100%;height:clamp(160px,24vw,320px);object-fit:cover}
body.fi-br-product .banner::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 48%,rgba(0,0,0,.28))}
body.fi-br-product .fallback-nav{max-width:1180px;margin:10px auto 0;padding:10px 14px;border:1px solid color-mix(in srgb,var(--deck-line,#37d6ff) 28%,transparent);border-radius:14px;background:rgba(8,13,27,.92);color:var(--deck-ink,#eef6ff);font-weight:800}
body.fi-br-product .fallback-nav a{color:inherit}
body.fi-br-product main.fi-br-main{max-width:1180px;margin:0 auto;padding:clamp(16px,3vw,36px)}
body.fi-br-product h1,body.fi-br-product h2,body.fi-br-product h3{font-family:Sora,Inter,sans-serif;line-height:1.15}
body.fi-br-product h1{margin:0 0 10px;font-size:clamp(28px,3.4vw,48px);font-weight:900;letter-spacing:.1px;text-shadow:0 0 12px color-mix(in srgb,var(--deck-neon,#37d6ff) 34%,transparent),0 0 28px color-mix(in srgb,var(--deck-a,#6e79ff) 20%,transparent)}
body.fi-br-product h2{font-size:clamp(20px,2.2vw,28px);font-weight:900}
body.fi-br-product h3{font-size:clamp(18px,2vw,22px);font-weight:900}
body.fi-br-product p{line-height:1.6}

/* Exact BR cultural-hero geometry. */
body.fi-br-product .hero{position:relative;min-height:clamp(410px,36vw,500px);padding:26px;overflow:hidden;border:1px solid color-mix(in srgb,var(--deck-line,#37d6ff) 34%,transparent);border-radius:26px;background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0));box-shadow:0 24px 64px rgba(0,0,0,.45);isolation:isolate}
body.fi-br-product .hero::after{content:"";position:absolute;inset:-1px;z-index:2;border-radius:28px;pointer-events:none;box-shadow:0 0 48px color-mix(in srgb,var(--deck-neon,#37d6ff) 28%,transparent),0 0 130px color-mix(in srgb,var(--deck-a,#6e79ff) 20%,transparent),inset 0 0 72px color-mix(in srgb,var(--deck-a,#6e79ff) 10%,transparent)}
body.fi-br-product .hero-head{position:relative;z-index:3;display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;width:100%;max-width:min(760px,70%)}
body.fi-br-product .flag{display:grid;place-items:center;width:64px;height:64px;overflow:hidden;border-radius:14px;background:#fff;box-shadow:0 8px 22px rgba(0,0,0,.45)}
body.fi-br-product .flag svg{display:block;width:100%;height:100%}
body.fi-br-product .flag .disc{width:36px;height:36px;border-radius:50%;background:#e60012}
body.fi-br-product .badge{display:inline-flex;align-items:center;gap:.55rem;padding:.4rem .7rem;border:1px solid rgba(255,255,255,.84);border-radius:999px;background:rgba(248,251,255,.94);color:#071020;font-weight:900}
body.fi-br-product .sub{margin:.5rem 0;color:var(--deck-muted,var(--muted,#a8bbd0));line-height:1.65}
body.fi-br-product .price{display:flex;gap:10px;align-items:baseline;margin-top:10px}
body.fi-br-product .price .old{opacity:.6;text-decoration:line-through}
body.fi-br-product .price .new{color:var(--deck-hi,var(--gold,#ffd84d));font-size:1.2rem;font-weight:900;text-shadow:0 0 18px color-mix(in srgb,var(--deck-line,#ffd84d) 55%,transparent)}
body.fi-br-product .cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
body.fi-br-product .btn{display:inline-flex;align-items:center;justify-content:center;min-width:220px;padding:14px 18px;border:0;border-radius:14px;color:#fff;background:var(--deck-cta,linear-gradient(90deg,#012169,#c8102e 58%,#d7b56d));box-shadow:var(--deck-cta-shadow,0 14px 28px rgba(0,0,0,.3));font-weight:900;text-decoration:none}
body.fi-br-product .btn.ghost{color:var(--deck-hi,#eef6ff);background:color-mix(in srgb,var(--deck-bg,#050813) 78%,transparent);border:1px solid color-mix(in srgb,var(--deck-line,#37d6ff) 44%,transparent);box-shadow:none}
body.fi-br-product .dl-buy-meta{margin:12px 0 0;color:var(--deck-muted,var(--itc-muted,#9fb3d8));font-size:.82rem}

/* Inline BR building blocks used by DE/JA and shared by the localized pages. */
body.fi-br-product .grid{display:grid;gap:clamp(14px,2vw,22px)}
body.fi-br-product .cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
body.fi-br-product .cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
body.fi-br-product .card{position:relative;padding:16px;border:1px solid color-mix(in srgb,var(--deck-line,#37d6ff) 24%,rgba(255,255,255,.08));border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008));box-shadow:0 16px 40px rgba(0,0,0,.35);overflow:hidden}
body.fi-br-product .glow{position:absolute;inset:-2px;border-radius:20px;pointer-events:none;background:linear-gradient(135deg,color-mix(in srgb,var(--deck-a,#37d6ff) 22%,transparent),transparent 60%),linear-gradient(315deg,color-mix(in srgb,var(--deck-line,#ffd84d) 10%,transparent),transparent 55%);filter:blur(8px);opacity:.85}
body.fi-br-product .feature{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start}
body.fi-br-product .mini,body.fi-br-product .small{color:var(--deck-muted,var(--itc-muted,#9fb3d8));font-size:.92rem;line-height:1.55}
body.fi-br-product .levels .step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;padding:12px;border:1px dashed color-mix(in srgb,var(--deck-line,#37d6ff) 28%,transparent);border-radius:14px;background:rgba(255,255,255,.02)}
body.fi-br-product .itc-trust,body.fi-br-product .itc-product-intro,body.fi-br-product .dl-product-depth,body.fi-br-product .itc-collection{position:relative;z-index:1}
body.fi-br-product .itc-product-intro{margin-top:22px}
body.fi-br-product .itc-product-intro h2 span,body.fi-br-product .itc-collection h2 span{color:var(--deck-hi,var(--itc-gold,#ffd84d))}
body.fi-br-product footer{margin:24px 0 10px;padding-bottom:120px;text-align:center;color:var(--deck-hi,var(--itc-gold,#ffd84d));font-weight:900}

/* FI screenshots are full phone screenshots. Keep them untouched and mask only
   the top phone/Anki chrome and the Android review bar, matching the approved EN crop. */
body.fi-br-product{--fi-shot-mask:#03050a}
body.it-es-site.fi-br-product{--fi-shot-mask:#0b0305}
body.it-de-site.fi-br-product{--fi-shot-mask:#030303}
body.it-ja-site.fi-br-product{--fi-shot-mask:#03050a}
body.it-ko-site.fi-br-product{--fi-shot-mask:#03050a}
body.fi-br-product .dl-es-card-process__screen,
body.fi-br-product .dl-de-card-process__screen,
body.fi-br-product .dl-ja-card-process__screen,
body.fi-br-product .dl-ko-card-process__screen{position:relative!important;display:grid!important;height:clamp(500px,55vw,640px)!important;min-height:0!important;aspect-ratio:auto!important;overflow:hidden!important;place-items:center!important;background:var(--fi-shot-mask)!important}
body.fi-br-product .dl-es-card-process__screen img,
body.fi-br-product .dl-de-card-process__screen img,
body.fi-br-product .dl-ja-card-process__screen img,
body.fi-br-product .dl-ko-card-process__screen img{position:absolute!important;inset:0!important;display:block!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;object-position:center!important;transform:none!important}
body.fi-br-product .dl-es-card-process__screen::before,
body.fi-br-product .dl-de-card-process__screen::before,
body.fi-br-product .dl-ja-card-process__screen::before,
body.fi-br-product .dl-ko-card-process__screen::before,
body.fi-br-product .dl-es-card-process__screen::after,
body.fi-br-product .dl-de-card-process__screen::after,
body.fi-br-product .dl-ja-card-process__screen::after,
body.fi-br-product .dl-ko-card-process__screen::after{content:""!important;position:absolute!important;left:0!important;right:0!important;z-index:8!important;display:block!important;background:var(--fi-shot-mask)!important;pointer-events:none!important}
body.fi-br-product .dl-es-card-process__screen::before,
body.fi-br-product .dl-de-card-process__screen::before,
body.fi-br-product .dl-ja-card-process__screen::before,
body.fi-br-product .dl-ko-card-process__screen::before{top:0!important;height:15.2%!important}
body.fi-br-product .dl-es-card-process__screen::after,
body.fi-br-product .dl-de-card-process__screen::after,
body.fi-br-product .dl-ja-card-process__screen::after,
body.fi-br-product .dl-ko-card-process__screen::after{bottom:0!important;height:10.5%!important}

/* Ensure the BR vertical level paths win over the old FI five-column layout. */
body.fi-br-product .dl-es-level-path,body.fi-br-product .dl-de-level-path,body.fi-br-product .dl-ja-level-path,body.fi-br-product .dl-ko-level-path{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}

@media(max-width:940px){body.fi-br-product .cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}body.fi-br-product .cols-2{grid-template-columns:1fr}}
@media(max-width:720px){
  body.fi-br-product .hero{min-height:560px;padding:18px 14px;align-items:flex-end}
  body.fi-br-product .hero-head{grid-template-columns:1fr;gap:12px;align-items:flex-start;max-width:none}
  body.fi-br-product .flag{width:48px;height:48px;border-radius:12px}
  body.fi-br-product .btn{width:100%;min-width:0;padding:12px 14px}
  body.fi-br-product .dl-es-card-process__screen,
  body.fi-br-product .dl-de-card-process__screen,
  body.fi-br-product .dl-ja-card-process__screen,
  body.fi-br-product .dl-ko-card-process__screen{height:min(138vw,600px)!important}
  body.fi-br-product footer{padding-bottom:154px}
}
@media(max-width:620px){body.fi-br-product .cols-3{grid-template-columns:1fr}}