/* © TechNext Pte. Ltd. (technext.asia). All rights reserved. This design and code are not licensed for copying, reuse or AI training. */
/* /free-website-with-odoo (22 Oct 2026): the BIR question-hook lander, in the glass system. Everything is scoped under .fw-fx (body class).
   Loaded after home-fx.css (glass tokens, .fx-hero, .fx-chips, .fx-tag, .fx-close), get-started-fx.css (focused header, the form, .gs-n steps)
   and industry-fx.css (the live sample Odoo panel, .ixf-*). Markup: _src/pages/free-website-with-odoo.html + _src/fw_needs.py.
   Behaviour: assets/js/pages/fw-needs.js. Motion: transform / opacity, house ease, paused off-screen; reduced motion shows final states. */

.fw-fx { --fw-edge: #DDE6F4; --fw-ease: cubic-bezier(.16,1,.3,1); }
.fw-fx .fx-sec--alt, .fw-fx .fw-hero { --fw-edge: var(--fx-edge); }

/* ---------------------------------------------------------------- over the calm layer (calm.css pads sections, whitens them and hides their pseudo-elements with !important) */
body.fw-fx main > section.fx-hero:not(.ixw-hero) { padding: 44px 0 72px !important; background: none !important; }
body.fw-fx main > section.fx-sec:not(.ixw-hero) { padding: 96px 0 !important; position: relative; }
body.fw-fx main > section.fx-sec > .container { position: relative; }
body.fw-fx main > section.fx-sec--alt:not(.ixw-hero) { background: linear-gradient(180deg, #F5F8FE 0%, #FBFCFE 100%) !important; }
body.fw-fx main > section.fx-sec--alt:not(.ixw-hero)::before { content: "" !important; display: block !important; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--fx-grid) 1px, transparent 1px), linear-gradient(90deg, var(--fx-grid) 1px, transparent 1px); background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); }
body.fw-fx main > section.fx-close-sec:not(.ixw-hero) { padding: 24px 0 96px !important; background: #fff !important; }
body.fw-fx main .sec-head h2 { font-size: clamp(1.9rem, 1.2rem + 2vw, 2.85rem) !important; line-height: 1.1 !important; letter-spacing: -.03em; }
body.fw-fx main .faq details { background: var(--fx-glass) !important; border: 1px solid var(--fw-edge) !important; border-radius: 18px !important; box-shadow: 0 12px 26px -24px rgba(30,70,145,.5) !important;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
body.fw-fx main .faq details[open] { border-color: rgba(49,103,202,.35) !important; box-shadow: var(--fx-depth) !important; }
body.fw-fx main .faq summary { background: none !important; min-height: 56px; }
.fw-fx .fx-faq { max-width: 860px; }
.fw-fx .faq { max-width: none; }
.fw-fx .sec-head .lead { max-width: 60ch; }

/* ---------------------------------------------------------------- shared: ticks and the glass material */
.fw-list { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 11px; }
.fw-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--body); }
.fw-list .ic { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--blue); stroke-width: 2.6; }
.fw-free-card, .fw-colcard, .fw-col, .fw-tier, .fw-rules li, .fw-who-box, .fw-note, .fw-flow, .fw-check-list label, .fw-score, .fw-now, .fw-then {
  background: var(--fx-glass); border: 1px solid var(--fw-edge); box-shadow: var(--fx-depth); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }

/* ---------------------------------------------------------------- hero */
.fw-hero-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.fw-copy { padding-top: 18px; }   /* starts level with the panel: no empty band above the deadline pill */
.fw-copy, .fw-side { min-width: 0; }
.fw-deadline { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 8px 16px 8px 12px; border-radius: 999px; max-width: 100%;
  background: var(--fx-glass); border: 1px solid var(--fx-edge); box-shadow: 0 1px 2px rgba(31,31,61,.05), 0 10px 24px -18px rgba(30,70,145,.4);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 600 14px/1.35 var(--font-body); color: var(--body); }
.fw-deadline .ic { flex: none; width: 18px; height: 18px; color: var(--blue); }
.fw-deadline b { color: var(--ink); font-variant-numeric: tabular-nums; }
.fw-fx .fw-hero h1 { max-width: none; margin: 0; font: 800 clamp(1.85rem, 1rem + 2vw, 2.65rem)/1.08 var(--font-display); letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
.fw-q { display: block; }
.fw-hero h1 em { position: relative; display: block; width: fit-content; max-width: 100%; margin-top: .5em; padding-bottom: .3em; font: 700 1.28rem/1.3 var(--font-display); font-style: normal; letter-spacing: -.01em; color: var(--blue); text-wrap: balance; }
.fw-hero h1 em::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 4px; background: rgba(49,103,202,.22); transform-origin: left; animation: fxUnder 1.1s .35s var(--fx-ease) both; }
.fw-fx .fw-hero-lead { margin: 14px 0 0; max-width: 56ch; font-size: 1.02rem; line-height: 1.58; color: var(--body); text-wrap: pretty; }
.fw-hero-lead [data-fw="lead"] { display: block; }
.fw-offer { display: block; margin-top: .5em; font-size: .95rem; color: var(--ink); font-weight: 600; }

.fw-pick { min-width: 0; margin: 26px 0 0; padding: 0; border: 0; }
.fw-pick legend { padding: 0; margin: 0 0 10px; font: 650 15px/1.35 var(--font-body); color: var(--ink); }
.fw-act { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; }

.fw-side { display: grid; gap: 14px; align-content: start; }
.fw-stage { display: grid; }
.fw-pane { grid-area: 1 / 1; display: flex; min-width: 0; }
.fw-pane[hidden] { display: flex !important; visibility: hidden; }   /* site.css hides [hidden] with !important; every pane keeps its place instead, so the stage holds the tallest one and nothing jumps */
.fw-pane > .ixf-panel { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.fw-pane .ixf-chips { margin-top: auto; padding-top: 10px; gap: 6px; }
/* compact record: the tallest need (the coverage table) still fits beside the copy on a laptop screen */
.fw-pane > .ixf-panel { padding: 16px 16px 14px; }
.fw-pane .ixf-bar { margin: 10px 0; }
.fw-pane .ixf-k { padding: 10px 12px 9px; }
.fw-pane .ixf-k dd { font-size: 20px; }
.fw-pane .ixf-tbl th { padding: 7px 12px 5px; }
.fw-pane .ixf-tbl td { padding: 6px 12px; }
.fw-pane .ixf-bars { padding: 10px 12px 8px; gap: 9px; }
.fw-pane .ixf-wire { height: 16px; margin: 0; }
.fw-pane .ixf-post { padding: 9px 12px; }
.fw-pane .ixf-post-h { margin-bottom: 4px; }
.fw-pane .ixf-led li { padding: 3px 0; }
.fw-pair { display: grid; gap: 10px; }
.fw-now, .fw-then { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 12px; align-items: baseline; margin: 0; padding: 14px 18px; border-radius: 16px; font: 400 14.5px/1.5 var(--font-body); color: var(--body); }
.fw-now b, .fw-then b { font: 700 13px/1.5 var(--font-body); color: var(--body); }
.fw-then { border-color: rgba(49,103,202,.32); background: linear-gradient(170deg, rgba(255,255,255,.95), rgba(234,240,251,.9)); box-shadow: 0 0 0 1px rgba(49,103,202,.1), var(--fx-depth); color: var(--ink); }
.fw-then b { color: var(--blue-700); }

/* ---------------------------------------------------------------- claim: the form */
.fw-claim-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; align-items: start; }
.fw-claim-copy { position: sticky; top: calc(var(--header-h, 72px) + 28px); }
.fw-claim-copy h2, .fw-split-copy h2 { margin: 0; font: 800 clamp(1.9rem, 1.2rem + 2vw, 2.85rem)/1.1 var(--font-display); letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
.fw-claim-copy .lead, .fw-split-copy .lead { margin: 16px 0 0; max-width: 46ch; font-size: 1.08rem; line-height: 1.65; color: var(--body); }
.fw-claim-copy .gs-ticks { margin-top: 26px; }
.fw-fx .gs-form-h { margin: 0 0 18px; font-size: 1.25rem; }

/* ---------------------------------------------------------------- self-check */
.fw-check { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.fw-check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fw-check-list li { position: relative; }
.fw-check-list label { display: flex; gap: 14px; align-items: flex-start; padding: 15px 18px; border-radius: 16px; cursor: pointer; font-size: 15px; line-height: 1.5; color: var(--body);
  box-shadow: 0 12px 26px -24px rgba(30,70,145,.5); transition: border-color .25s var(--fw-ease), background-color .25s var(--fw-ease), box-shadow .25s var(--fw-ease); }
.fw-check-list label:hover { border-color: var(--blue-300); }
.fw-check-list b { color: var(--ink); }
.fw-check-list input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.fw-box { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border: 2px solid #B9C4DB; border-radius: 7px; background: #fff; color: transparent;
  transition: background-color .2s var(--fw-ease), border-color .2s var(--fw-ease), color .2s var(--fw-ease), transform .3s var(--fw-ease); }
.fw-box .ic { width: 15px; height: 15px; stroke-width: 3; }
.fw-check-list input:checked + .fw-box { background: var(--blue); border-color: var(--blue); color: #fff; transform: scale(1.06); }
.fw-check-list label:has(input:checked) { border-color: rgba(49,103,202,.5); background: linear-gradient(170deg, rgba(255,255,255,.95), rgba(234,240,251,.92)); box-shadow: 0 0 0 1px rgba(49,103,202,.12), var(--fx-depth); }
.fw-check-list input:focus-visible + .fw-box { outline: 3px solid var(--blue); outline-offset: 3px; }
.fw-score { position: sticky; top: calc(var(--header-h, 72px) + 24px); padding: 26px; border-radius: 22px; text-align: center; }
.fw-score-k { margin: 0; font: 700 13px/1 var(--font-body); color: var(--body); }
.fw-score .fw-score-n { margin: 10px 0 14px; font: 800 3.4rem/1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; transition: color .3s var(--fw-ease); }
.fw-score .fw-score-n small { margin-left: 4px; font-size: 1.2rem; color: var(--body); letter-spacing: 0; }
.fw-meter { height: 8px; border-radius: 99px; background: var(--blue-100); overflow: hidden; }
.fw-meter span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--blue); transition: width .4s var(--fw-ease), background-color .3s var(--fw-ease); }
.fw-score-msg { min-height: 6.4em; margin: 14px 0 18px; font-size: 14.5px; line-height: 1.5; color: var(--body); }
.fw-check.is-high .fw-score-n { color: var(--fx-amber); }
.fw-check.is-high .fw-meter span { background: var(--fx-amber); }
.fw-score-btn { width: 100%; justify-content: center; }

/* ---------------------------------------------------------------- what the BIR asks */
.fw-rules { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.fw-rules li { padding: 24px; border-radius: 22px; transition: transform .4s var(--fw-ease), box-shadow .4s var(--fw-ease); }
.fw-rules li:hover { transform: translateY(-3px); box-shadow: var(--fx-depth-h); }
.fw-rules .gs-n { margin-bottom: 14px; }
.fw-rules h3 { margin: 0 0 6px; font: 800 1.12rem/1.3 var(--font-display); color: var(--ink); letter-spacing: -.01em; }
.fw-rules p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--body); }
.fw-who { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.fw-who-box, .fw-note { padding: 28px; border-radius: 24px; }
.fw-who-box h3, .fw-note h3 { margin: 0; font: 800 1.2rem/1.3 var(--font-display); color: var(--ink); letter-spacing: -.01em; }
.fw-who-box .small { margin: 16px 0 0; font-size: 14px; line-height: 1.55; color: var(--body); }
.fw-note { border-color: rgba(49,103,202,.35); box-shadow: 0 0 0 1px rgba(49,103,202,.1), var(--fx-depth-h); }
.fw-note p { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--body); }

/* ---------------------------------------------------------------- Odoo 20 and what we add */
.fw-split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: center; }
.fw-links { margin: 24px 0 0; }
.fw-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.fw-colcard { padding: 26px 26px 28px; border-radius: 24px; }
.fw-colcard h3 { display: flex; align-items: center; gap: 10px; margin: 0; font: 800 1.12rem/1.3 var(--font-display); color: var(--ink); letter-spacing: -.01em; }
.fw-colcard .oi { flex: none; width: 28px; height: 28px; }
.fw-logo { display: block; width: auto; height: 22px; flex: none; }
.fw-colcard--tn { border-color: rgba(49,103,202,.4); box-shadow: 0 0 0 1px rgba(49,103,202,.1), var(--fx-depth-h); }

/* ---------------------------------------------------------------- what comes with your Odoo */
.fw-free { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.fw-free-card { padding: 26px 28px 30px; border-radius: 24px; transition: transform .4s var(--fw-ease), box-shadow .4s var(--fw-ease); }
.fw-free-card:hover { transform: translateY(-4px); box-shadow: var(--fx-depth-h); }
.fw-free-card h3 { margin: 20px 0 6px; font: 800 1.35rem/1.3 var(--font-display); color: var(--ink); letter-spacing: -.02em; }
.fw-free-card > p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--body); }
.fw-pv { position: relative; display: flex; align-items: center; gap: 14px; min-height: 104px; padding: 14px 16px; border-radius: 16px; background: linear-gradient(135deg, #F3F7FE, #fff); border: 1px solid #E3E9F5; overflow: hidden; }
.fw-sw { display: flex; gap: 6px; }
.fw-sw i { width: 28px; height: 28px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); animation: fwSw 3.6s var(--fw-ease) infinite; }
.fw-sw i:nth-child(2) { animation-delay: .25s; } .fw-sw i:nth-child(3) { animation-delay: .5s; } .fw-sw i:nth-child(4) { animation-delay: .75s; }
@keyframes fwSw { 0%, 70%, 100% { transform: none; } 35% { transform: translateY(-5px); } }
.fw-aa { display: grid; gap: 2px; }
.fw-aa b { font: 800 30px/1 var(--font-display); color: var(--ink); }
.fw-aa small { font-size: 12px; color: var(--body); }
.fw-mk { margin-left: auto; }
.fw-mk .ic { width: 34px; height: 34px; color: var(--blue); animation: fwSpin 12s linear infinite; }
@keyframes fwSpin { to { transform: rotate(360deg); } }
.fw-pv--site { display: grid; gap: 8px; align-content: center; }
.fw-bar { display: flex; align-items: center; gap: 5px; }
.fw-bar i { width: 8px; height: 8px; border-radius: 50%; background: #D5DAE5; }
.fw-bar em { margin-left: 8px; padding: 2px 10px; border-radius: 999px; background: #fff; font: 500 12px/1.4 var(--font-body); font-style: normal; color: var(--body); }
.fw-lines { display: grid; gap: 5px; }
.fw-lines b { height: 7px; width: 70%; border-radius: 4px; background: #D5DCEC; }
.fw-lines b.s { width: 44%; }
.fw-pv .fw-lead { position: absolute; right: 12px; bottom: 10px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 999px; background: #fff; border: 1px solid var(--blue-300); box-shadow: 0 10px 22px -14px rgba(49,103,202,.6);
  font: 600 12px/1.3 var(--font-body); color: var(--ink); animation: fwLead 5s var(--fw-ease) infinite; }
.fw-pv .fw-lead .oi { width: 20px; height: 20px; }
.fw-pv .fw-lead em { font-style: normal; }
@keyframes fwLead { 0%, 12% { opacity: 0; transform: translateY(10px); } 25%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-4px); } }

/* ---------------------------------------------------------------- the website-to-BIR-reports flow */
.fw-why { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.fw-why h2 { margin: 0; font: 800 clamp(1.9rem, 1.2rem + 2vw, 2.85rem)/1.1 var(--font-display); letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
.fw-why .lead { margin: 16px 0 0; font-size: 1.08rem; line-height: 1.65; color: var(--body); max-width: 46ch; }
.fw-flow { list-style: none; margin: 0; padding: 14px 26px; border-radius: 24px; }
.fw-flow li { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 18px; align-items: start; padding: 16px 0; }
.fw-flow li .oi { width: 26px; height: 26px; margin-top: 1px; }
.fw-flow li:not(:last-child)::after { content: ""; position: absolute; left: 13px; top: 48px; bottom: -12px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, transparent, var(--blue), transparent) 0 -60% / 100% 50% no-repeat, var(--fx-line); animation: fwFlow 2.6s var(--fw-ease) infinite; }
.fw-flow li:nth-child(2)::after { animation-delay: .4s; } .fw-flow li:nth-child(3)::after { animation-delay: .8s; } .fw-flow li:nth-child(4)::after { animation-delay: 1.2s; }
@keyframes fwFlow { to { background-position: 0 160%, 0 0; } }
.fw-flow b { display: block; font: 700 1.04rem/1.35 var(--font-display); color: var(--ink); }
.fw-flow small { display: block; margin-top: 3px; font-size: 13px; color: var(--body); }

/* ---------------------------------------------------------------- one team vs four hires */
.fw-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.fw-col { border-radius: 24px; padding: 28px; }
.fw-col h3 { margin: 0 0 16px; font: 800 1.2rem/1.3 var(--font-display); color: var(--ink); }
.fw-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 13px; }
.fw-col li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--body); }
.fw-col .ic { flex: none; width: 18px; height: 18px; margin-top: 2px; stroke-width: 2.6; }
.fw-col--diy { background: rgba(246,247,250,.7); border-style: dashed; border-color: #D5DBE8; box-shadow: none; }
.fw-col--diy .ic { color: #7B849A; }
.fw-col--tn { border-color: rgba(49,103,202,.4); box-shadow: 0 0 0 1px rgba(49,103,202,.1), var(--fx-depth-h); }
.fw-col--tn .ic { color: var(--blue); }

/* ---------------------------------------------------------------- TechNext Care */
.fw-care { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.fw-tier { position: relative; display: flex; flex-direction: column; padding: 28px; border-radius: 24px; transition: transform .4s var(--fw-ease), box-shadow .4s var(--fw-ease); }
.fw-tier:hover { transform: translateY(-4px); box-shadow: var(--fx-depth-h); }
.fw-tier h3 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; font: 800 1.35rem/1.3 var(--font-display); color: var(--ink); letter-spacing: -.02em; }
.fw-tier-sub { margin: 4px 0 0; font: 600 15px/1.4 var(--font-body); color: var(--blue-700); }
.fw-most { background: var(--blue); color: #fff; font-size: 12px; }
.fw-tier--pick { border-color: rgba(49,103,202,.4); background: linear-gradient(170deg, rgba(255,255,255,.95), rgba(234,240,251,.9)); box-shadow: 0 0 0 1px rgba(49,103,202,.12), var(--fx-depth-h); }
.fw-glow { opacity: 1; }

/* ---------------------------------------------------------------- steps */
.fw-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.fw-steps h3 { font-size: 1.1rem; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1000px) {
  .fw-hero-in { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .fw-side { max-width: 680px; }
  .fw-fx .fw-hero-lead { max-width: none; }
  .fw-claim-grid, .fw-split, .fw-why { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .fw-claim-copy { position: static; }
  .fw-claim-copy .lead, .fw-split-copy .lead, .fw-why .lead { max-width: 60ch; }
  .fw-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fw-who { grid-template-columns: minmax(0, 1fr); }
  .fw-care { grid-template-columns: minmax(0, 1fr); }
  .fw-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .fw-check { grid-template-columns: minmax(0, 1fr); }
  .fw-score { position: static; }
  .fw-score-msg { min-height: 0; }
}
@media (max-width: 767px) {
  body.fw-fx main > section.fx-hero:not(.ixw-hero) { padding: 24px 0 48px !important; }
  body.fw-fx main > section.fx-sec:not(.ixw-hero) { padding: 64px 0 !important; }
  body.fw-fx main > section.fx-close-sec:not(.ixw-hero) { padding: 16px 0 56px !important; }
  .fw-hero-in { gap: 28px; }
  .fw-deadline { margin-bottom: 18px; font-size: 13.5px; }
  .fw-hero h1 em { font-size: 1.12rem; }
  .fw-fx .fw-hero-lead { font-size: 1rem; }
  .fw-pick { margin-top: 22px; }
  .fw-act { margin-top: 22px; }
  .fw-now, .fw-then { grid-template-columns: 62px minmax(0, 1fr); gap: 10px; padding: 13px 16px; }
}
@media (max-width: 720px) {
  .fw-free, .fw-compare, .fw-cols { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .fw-free-card, .fw-col, .fw-tier, .fw-colcard, .fw-who-box, .fw-note { padding: 22px 18px; }
  .fw-rules { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .fw-rules li { padding: 20px 18px; }
  .fw-steps { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .fw-flow { padding: 8px 18px; }
  .fw-check-list label { padding: 14px 14px; gap: 12px; }
  .fw-score { padding: 22px 18px; }
}
@media (max-width: 480px) {
  .fw-act .btn { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .fw-hero h1 em::after, .fw-sw i, .fw-mk .ic, .fw-pv .fw-lead, .fw-flow li::after { animation: none !important; }
  .fw-pv .fw-lead { opacity: 1; transform: none; }
  .fw-free-card, .fw-tier, .fw-rules li, .fw-box, .fw-meter span, .fw-check-list label, .fw-score .fw-score-n { transition: none; }
  .fw-free-card:hover, .fw-tier:hover, .fw-rules li:hover { transform: none; }
}

/* phones: status steps and record sub-lines wrap instead of ending in an ellipsis */
@media (max-width: 600px) {
  .fw-pane .ixf-seg { display: flex; align-items: center; justify-content: center; min-height: 40px; padding-top: 5px; padding-bottom: 5px; line-height: 1.15; white-space: normal; overflow: visible; text-overflow: clip; }
  .fw-pane .ixf-t small, .fw-pane .ixf-post-h small { white-space: normal; overflow: visible; text-overflow: clip; }
}

/* phones: panes collapse (the stage follows the picked need instead of holding the tallest one); smaller KPI figures */
@media (max-width: 600px) {
  .fw-pane[hidden] { display: none !important; }
  .fw-pane .ixf-k dd { font-size: 17px; }
  .fw-pane .ixf-k dt { font-size: 12px; }
}

/* ---------------------------------------------------------------- the three-step lead form (22 Oct 2026) */
.fw-form .fw-fsub { margin: 0 0 18px; font-size: 14.5px; }
.fw-req { margin-left: 2px; color: #B42318; font-weight: 700; }
.fw-progress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 10px; padding: 0; list-style: none; }
.fw-progress button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 0; border: 0; background: none; cursor: pointer; text-align: left; font: 600 13px/1.25 var(--font-body); color: var(--body); }
.fw-progress button:disabled { cursor: default; color: #6B6F86; }
.fw-progress button span { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid #C9D4EA; background: #fff; font: 700 12.5px/1 var(--font-body); color: var(--body); transition: background .3s var(--fx-ease), border-color .3s var(--fx-ease), color .3s var(--fx-ease); }
.fw-progress li.is-on button { color: var(--ink); }
.fw-progress li.is-on button span { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 6px 14px -6px rgba(49,103,202,.7); }
.fw-progress li.is-done button span { background: var(--blue-050); border-color: var(--blue); color: var(--blue-700); }
.fw-progress button:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 8px; }
.fw-bar { height: 4px; margin: 0 0 22px; border-radius: 4px; background: #E3E9F5; overflow: hidden; }
.fw-bar i { display: block; width: 33.4%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), #6FA0F5); transition: width .5s var(--fx-ease); }
.fw-step { min-width: 0; margin: 0; padding: 0; border: 0; }
.fw-step-h { display: block; margin: 0 0 14px; padding: 0; font: 800 1.05rem/1.3 var(--font-display); color: var(--ink); }
.fw-form:not(.is-steps) .fw-step + .fw-step { margin-top: 10px; padding-top: 18px; border-top: 1px solid #E3E9F5; }
.fw-form.is-steps .fw-step-h { display: none; }   /* the progress row names the step */
.fw-form.is-steps .fw-step:not(.is-cur) { display: none; }
.fw-form.is-steps .fw-step.is-cur { animation: fwStepIn .45s var(--fx-ease) both; }
@keyframes fwStepIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.fw-form:not(.is-steps) .fw-progress, .fw-form:not(.is-steps) .fw-bar, .fw-form:not(.is-steps) .fw-back, .fw-form:not(.is-steps) .fw-next { display: none; }
.fw-err { display: flex; gap: 6px; margin: 2px 0 0; font: 600 12.5px/1.35 var(--font-body); color: #B42318; }
.fw-form .field.is-err input, .fw-form .field.is-err select, .fw-form .field.is-err textarea { border-color: #B42318; box-shadow: 0 0 0 3px rgba(180,35,24,.12); }
.fw-hint { margin: -6px 0 14px; font-size: 12.5px; line-height: 1.45; color: var(--body); }
.fw-mini { min-width: 0; margin: 0 0 14px; padding: 0; border: 0; }
.fw-mini legend { margin-bottom: 8px; padding: 0; font: 600 13.5px/1.4 var(--font-body); color: var(--ink); }
.fw-mini .fx-chips { gap: 8px; }
.fw-consent { display: grid !important; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; font: 400 13.5px/1.5 var(--font-body) !important; color: var(--body) !important; cursor: pointer; }
.fw-consent input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--blue); }
.fw-consent a { color: var(--blue-700); }
.fw-nav { display: flex; flex-wrap: nowrap; gap: 10px; align-items: center; }
.fw-nav .fw-next, .fw-nav .gs-submit { flex: 1 1 auto; width: auto; justify-content: center; }   /* Back and Send share one row */
.fw-nav .fw-back { flex: none; }
.fw-form.is-sent .fw-step, .fw-form.is-sent .fw-progress, .fw-form.is-sent .fw-bar { display: none; }
@media (max-width: 600px) {
  .fw-progress { gap: 4px; }
  .fw-progress button { flex-direction: column; align-items: flex-start; gap: 4px; font-size: 12px; }
  .fw-nav { flex-wrap: wrap; }
  .fw-nav .fw-back { order: 2; flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .fw-form.is-steps .fw-step.is-cur { animation: none; } .fw-bar i { transition: none; } }
/* form first (owner 22 Oct 2026): the form is the hero's right column; the live panel sits in the next section */
.fw-side--form { min-width: 0; scroll-margin-top: 96px; }
.fw-side--form .fw-form { margin: 0; }
.fw-answer .fw-side { min-width: 0; }
@media (min-width: 961px) { .fw-hero-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); } }

/* /bir-call (Google Ads variant B, 28 Oct 2026): no BIR notice bar; on one-column screens the form follows the H1 straight away */
.fw-fast .bn { display: none; }
@media (max-width: 1000px) {
  .fw-fast .fw-copy { display: contents; }
  .fw-fast .fw-deadline { order: 1; }
  .fw-fast .fw-hero-in > .fw-copy > h1 { order: 2; margin-bottom: 0; }
  .fw-fast .fw-side--form { order: 3; }
  .fw-fast .fw-hero-lead { order: 4; }
  .fw-fast .fw-pick { order: 5; }
  .fw-fast .fw-act { order: 6; }
  .fw-fast .fw-hero-in { row-gap: 18px; }
}