/* ═══════════════════════════════════════════════════════════════════
   HEC — FILM INCENTIVE INTELLIGENCE
   ───────────────────────────────────────────────────────────────────
   One section, on /film-financing only, which is why it is a separate
   stylesheet: the other twenty pages never download it.

   It invents no colours, no type scale and no spacing. Everything here
   resolves to the tokens in hec.css — the navy family for surfaces, the
   brand teal for labels, --gut and --pad-y for rhythm — so the section
   reads as part of the site rather than as a tool embedded in it.

   The one rule worth stating before the code: STATUS IS NEVER COLOUR
   ALONE. A verified state and an unverified one differ in fill, in
   hatching, in their accessible name and in the words in the panel. A
   reader who cannot separate the two tones still reads the difference.
   ═══════════════════════════════════════════════════════════════════ */

.fi{padding:clamp(46px,6vw,86px) 0}
.fi-in{max-width:var(--max,1500px);margin-inline:auto;padding-inline:var(--gut)}

/* ── the section head ─────────────────────────────────────────────── */
.fi-head{max-width:72ch}
.fi-head .t-label{display:block;margin-bottom:var(--gap-lab)}
.fi-lede{margin:var(--gap-body) 0 0;font-size:clamp(1rem,1.1vw,1.125rem);
  color:var(--t2);line-height:1.62;max-width:56ch}
.fi-provenance{margin:clamp(14px,1.6vw,20px) 0 0;font-size:clamp(12px,.9vw,13.5px);
  letter-spacing:.06em;color:var(--t3)}
.fi-provenance b{font-weight:600;color:var(--t2)}

/* ── the toolbar ──────────────────────────────────────────────────── */
.fi-tools{margin-top:clamp(26px,3.4vw,44px);display:flex;flex-wrap:wrap;
  gap:clamp(10px,1.2vw,16px);align-items:flex-end}
.fi-field{display:flex;flex-direction:column;gap:7px;min-width:0}
.fi-field label{font-size:11px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--t3)}
.fi-search{flex:1 1 260px}
.fi-input,.fi-select{
  font-family:var(--body);font-size:.9375rem;font-weight:300;color:var(--text);
  background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:2px;
  padding:11px 13px;width:100%;min-height:44px;
  transition:border-color .22s var(--ease),background .22s var(--ease)}
.fi-select{appearance:none;padding-right:34px;
  background-image:linear-gradient(45deg,transparent 50%,var(--t2) 50%),
    linear-gradient(135deg,var(--t2) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.fi-input:hover,.fi-select:hover{border-color:rgba(245,246,248,.22)}
.fi-input:focus-visible,.fi-select:focus-visible{outline:none;
  border-color:var(--brand-teal);background:rgba(104,207,197,.06)}
.fi-input::placeholder{color:var(--t3)}
.fi-reset{align-self:flex-end;min-height:44px;padding:11px 16px;cursor:pointer;
  font-family:var(--body);font-size:.8125rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--t2);background:none;
  border:1px solid var(--line);border-radius:2px;
  transition:color .22s var(--ease),border-color .22s var(--ease)}
.fi-reset:hover{color:var(--text);border-color:rgba(245,246,248,.28)}
.fi-reset:focus-visible{outline:2px solid var(--brand-teal);outline-offset:2px}

.fi-count{margin:clamp(14px,1.6vw,18px) 0 0;font-size:13px;color:var(--t3)}
.fi-count b{font-weight:600;color:var(--t2)}

/* ── map and panel ────────────────────────────────────────────────── */
.fi-stage{margin-top:clamp(18px,2.2vw,26px);display:grid;gap:clamp(18px,2vw,28px);
  grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);align-items:start}
@media (max-width:1080px){.fi-stage{grid-template-columns:1fr}}
/* Side by side, the panel is the taller column by a long way, and a map that
   scrolls out of view while its own panel is still being read is a map you
   have to scroll back to. Sticky only where there are two columns: stacked,
   there is nothing to stay level with. */
@media (min-width:1081px){
  .fi-left{position:sticky;top:calc(var(--bar-h) + 16px)}
}

.fi-mapwrap{position:relative;border:1px solid var(--line);border-radius:3px;
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(104,207,197,.055) 0%,transparent 62%),
    var(--n1);
  padding:clamp(10px,1.4vw,20px)}
.fi-map{display:block;width:100%;height:auto;overflow:visible}

/* A state. Thin stroke, flat fill, no drop shadows — the map is a chart,
   not an illustration. */
.fi-st{fill:#132236;stroke:#0C1523;stroke-width:.7;stroke-linejoin:round;
  cursor:pointer;transition:fill .18s var(--ease),stroke .18s var(--ease)}
/* A state whose record has been read from its official source. */
.fi-st.is-verified{fill:#1D3A4C}
/* A state nobody has verified yet is hatched as well as darker, so the
   difference survives both a colourblind reader and a monochrome print. */
.fi-st.is-pending{fill:url(#fiHatch)}
.fi-st.is-inactive{fill:#101A28}
.fi-st:hover{fill:#2A5468}
.fi-st.is-verified:hover{fill:#2F6B7E}
.fi-st.is-selected,.fi-st.is-selected:hover{fill:var(--brand-teal);stroke:#0C1523}
/* Comparison marks the edge rather than the fill, so a state can be both
   selected and in the comparison and still read as both. */
.fi-st.is-compared{stroke:var(--gold-l);stroke-width:1.6}
.fi-st:focus{outline:none}
.fi-st:focus-visible{outline:none;stroke:var(--brand-teal);stroke-width:2.2}
.fi-lbl{fill:rgba(245,246,248,.5);font-family:var(--body);font-size:9px;
  font-weight:600;letter-spacing:.04em;text-anchor:middle;pointer-events:none;
  user-select:none}
.fi-st.is-selected + .fi-lbl,.fi-lbl.is-on{fill:rgba(2,11,24,.85)}
.fi-st.is-dimmed{opacity:.28}
.fi-lbl.is-dimmed{opacity:.2}

.fi-legend{display:flex;flex-wrap:wrap;gap:6px 22px;margin:clamp(12px,1.4vw,18px) 2px 0;
  font-size:12px;color:var(--t3)}
.fi-legend span{display:inline-flex;align-items:center;gap:8px}
.fi-key{width:15px;height:11px;border:1px solid rgba(245,246,248,.2);border-radius:1px}
.fi-key--v{background:#1D3A4C}
.fi-key--p{background:#132236;background-image:repeating-linear-gradient(
  45deg,rgba(245,246,248,.17) 0 1px,transparent 1px 5px)}
.fi-key--x{background:#101A28}
.fi-key--s{background:var(--brand-teal)}

/* ── the state panel ──────────────────────────────────────────────── */
.fi-panel{border:1px solid var(--line);border-radius:3px;background:var(--n2);
  padding:clamp(18px,2.1vw,28px);min-height:340px}
.fi-panel:focus-visible{outline:2px solid var(--brand-teal);outline-offset:2px}
.fi-empty{color:var(--t3);font-size:.9375rem;line-height:1.6}
.fi-empty b{display:block;margin-bottom:8px;font-family:var(--display);
  font-weight:600;font-size:1.0625rem;color:var(--t2);letter-spacing:.01em}

.fi-ptop{display:flex;gap:14px;align-items:flex-start;justify-content:space-between}
.fi-pname{margin:0;font-family:var(--display);font-weight:600;letter-spacing:-.01em;
  font-size:clamp(1.375rem,2vw,1.75rem);color:var(--text)}
.fi-pprog{margin:6px 0 0;font-size:.9375rem;color:var(--t2);line-height:1.5}
/* 44px, because it is a tap target on a phone and 34 is not one. */
.fi-close{flex:none;width:44px;height:44px;display:grid;place-items:center;cursor:pointer;
  color:var(--t2);background:none;border:1px solid var(--line);border-radius:2px;
  font-size:17px;line-height:1;transition:color .2s var(--ease),border-color .2s var(--ease)}
.fi-close:hover{color:var(--text);border-color:rgba(245,246,248,.28)}
.fi-close:focus-visible{outline:2px solid var(--brand-teal);outline-offset:2px}

/* The freshness chip. The dot is a second, redundant signal; the word is
   the one that carries the meaning. */
.fi-status{display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  padding:6px 11px;border:1px solid var(--line);border-radius:2px;
  font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--t2)}
.fi-dot{width:7px;height:7px;border-radius:50%;background:var(--t3)}
.fi-status.is-current{color:var(--brand-teal);border-color:rgba(104,207,197,.34)}
.fi-status.is-current .fi-dot{background:var(--brand-teal)}
.fi-status.is-review,.fi-status.is-change{color:var(--gold-l);border-color:rgba(238,196,81,.34)}
.fi-status.is-review .fi-dot,.fi-status.is-change .fi-dot{background:var(--gold-l)}

.fi-rows{margin:clamp(16px,2vw,22px) 0 0;padding:0;border-top:1px solid var(--line)}
.fi-row{padding:12px 0;border-bottom:1px solid var(--line)}
.fi-row dt{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brand-teal)}
.fi-row dd{margin:6px 0 0;font-size:.9375rem;line-height:1.58;color:var(--t2)}
.fi-row dd.is-pending{color:var(--t3);font-style:italic}
.fi-blist{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.fi-blist li{padding-left:15px;position:relative}
.fi-blist li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:1px;
  background:var(--brand-teal)}
.fi-blist b{display:block;font-weight:600;color:var(--t2)}
.fi-blist span{color:var(--t3);font-size:.875rem}

.fi-src{margin-top:clamp(16px,2vw,22px);padding-top:clamp(14px,1.8vw,18px);
  border-top:1px solid var(--line)}
.fi-srclink{display:inline-flex;align-items:center;gap:9px;font-size:.9375rem;
  font-weight:600;color:var(--brand-teal);text-decoration:none;
  border-bottom:1px solid rgba(104,207,197,.3);padding-bottom:2px;
  transition:border-color .22s var(--ease)}
.fi-srclink:hover{border-bottom-color:var(--brand-teal)}
.fi-srclink:focus-visible{outline:2px solid var(--brand-teal);outline-offset:3px}
.fi-srcmore{margin:12px 0 0;padding:0;list-style:none;display:flex;
  flex-direction:column;gap:7px}
.fi-srcmore a{font-size:.8125rem;color:var(--t2);text-decoration:none;
  border-bottom:1px solid transparent}
.fi-srcmore a:hover{color:var(--text);border-bottom-color:var(--line)}
.fi-srcmore em{font-style:normal;color:var(--t3)}
.fi-checked{margin:12px 0 0;font-size:12px;color:var(--t3);line-height:1.55}

.fi-pacts{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(16px,2vw,22px)}
.fi-act{cursor:pointer;min-height:44px;padding:11px 15px;font-family:var(--body);
  font-size:.8125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--t2);background:none;border:1px solid var(--line);border-radius:2px;
  transition:color .22s var(--ease),border-color .22s var(--ease)}
.fi-act:hover{color:var(--text);border-color:rgba(245,246,248,.28)}
.fi-act:focus-visible{outline:2px solid var(--brand-teal);outline-offset:2px}
.fi-act.is-on{color:var(--gold-l);border-color:rgba(238,196,81,.42)}
.fi-act[disabled]{opacity:.4;cursor:not-allowed}

/* The rail of states too small to label. Same control as the panel actions,
   with its caption sitting on the same baseline. */
#fiRail{align-items:center;gap:8px}
#fiRail .fi-hint{margin-right:4px}
#fiRail .fi-act{padding:9px 11px;letter-spacing:.1em;min-height:40px}

/* ── results list, for search and for keyboards ───────────────────── */
.fi-results{margin-top:clamp(16px,2vw,22px);border-top:1px solid var(--line)}
.fi-results ul{margin:0;padding:0;list-style:none;
  display:grid;gap:0;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr))}
.fi-hit{display:flex;width:100%;gap:12px;align-items:baseline;text-align:left;
  padding:13px 4px;min-height:44px;cursor:pointer;color:var(--t2);background:none;
  border:0;border-bottom:1px solid var(--line);font-family:var(--body);
  font-size:.9375rem;transition:color .2s var(--ease),background .2s var(--ease)}
.fi-hit:hover{color:var(--text);background:rgba(255,255,255,.02)}
.fi-hit:focus-visible{outline:2px solid var(--brand-teal);outline-offset:-2px}
.fi-hit b{font-weight:400}
.fi-hit i{font-style:normal;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--t3);margin-left:auto;white-space:nowrap}
.fi-hit.is-verified i{color:var(--brand-teal)}
.fi-none{padding:18px 4px;color:var(--t3);font-size:.9375rem}

/* ── comparison ───────────────────────────────────────────────────── */
.fi-compare{margin-top:clamp(34px,4.4vw,60px)}
.fi-sub{margin:0;font-family:var(--display);font-weight:600;letter-spacing:-.01em;
  font-size:clamp(1.25rem,1.8vw,1.625rem);color:var(--text)}
.fi-note{margin:8px 0 0;font-size:.875rem;color:var(--t3);max-width:60ch;line-height:1.6}
.fi-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.fi-chip{display:inline-flex;align-items:center;gap:10px;padding:9px 12px;
  border:1px solid rgba(238,196,81,.34);border-radius:2px;font-size:.875rem;
  color:var(--t2)}
.fi-chip button{cursor:pointer;background:none;border:0;color:var(--t3);
  font-size:15px;line-height:1;padding:4px;min-width:24px;min-height:24px}
.fi-chip button:hover{color:var(--text)}
.fi-chip button:focus-visible{outline:2px solid var(--brand-teal);outline-offset:1px}

.fi-tablewrap{margin-top:18px;overflow-x:auto;border:1px solid var(--line);
  border-radius:3px;background:var(--n1)}
.fi-table{width:100%;border-collapse:collapse;min-width:640px}
.fi-table th,.fi-table td{padding:13px 16px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line);font-size:.875rem;line-height:1.55;color:var(--t2)}
.fi-table thead th{font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text);background:rgba(255,255,255,.025)}
.fi-table tbody th{font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brand-teal);white-space:nowrap}
.fi-table td.is-pending{color:var(--t3);font-style:italic}
.fi-table tr:last-child th,.fi-table tr:last-child td{border-bottom:0}

/* ── the estimator ────────────────────────────────────────────────── */
.fi-est{margin-top:clamp(34px,4.4vw,60px);border:1px solid var(--line);border-radius:3px;
  background:var(--n2);padding:clamp(20px,2.6vw,36px)}
/* Bottom-aligned: one label wraps to two lines at some widths, and without
   this its input drops half a line below the others in the same row. */
.fi-grid{margin-top:clamp(18px,2.2vw,26px);display:grid;gap:clamp(12px,1.4vw,18px);
  grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));align-items:end}
.fi-grid .fi-field label{min-height:2.2em;display:flex;align-items:flex-end}
.fi-hint{font-size:12px;color:var(--t3)}
.fi-out{margin-top:clamp(20px,2.4vw,30px);padding-top:clamp(18px,2.2vw,24px);
  border-top:1px solid var(--line)}
.fi-figs{display:grid;gap:clamp(14px,1.8vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.fi-fig dt{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brand-teal)}
.fi-fig dd{margin:9px 0 0;font-family:var(--display);font-weight:600;
  letter-spacing:-.015em;font-size:clamp(1.5rem,2.6vw,2.125rem);color:var(--text);
  font-variant-numeric:tabular-nums}
.fi-basis{margin:clamp(16px,2vw,22px) 0 0;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:8px}
.fi-basis li{padding-left:15px;position:relative;font-size:.8125rem;color:var(--t3);
  line-height:1.6}
.fi-basis li::before{content:'';position:absolute;left:0;top:.66em;width:6px;height:1px;
  background:var(--t3)}
.fi-cannot{margin:0;font-size:.9375rem;color:var(--t2);line-height:1.62;max-width:60ch}

/* ── disclaimer ───────────────────────────────────────────────────── */
.fi-disclaimer{margin-top:clamp(28px,3.4vw,44px);padding-top:clamp(18px,2.2vw,26px);
  border-top:1px solid var(--line)}
.fi-disclaimer p{margin:0;font-size:.875rem;line-height:1.66;color:var(--t3);max-width:78ch}

/* ── the section works before, and without, its script ────────────── */
.fi-boot{padding:clamp(20px,2.6vw,32px) 0;color:var(--t3);font-size:.9375rem}
.fi[data-ready] .fi-boot{display:none}
.fi:not([data-ready]) .fi-stage,
.fi:not([data-ready]) .fi-tools,
.fi:not([data-ready]) .fi-count,
.fi:not([data-ready]) .fi-compare,
.fi:not([data-ready]) .fi-est{display:none}

@media (prefers-reduced-motion:reduce){
  .fi-st,.fi-input,.fi-select,.fi-act,.fi-reset,.fi-hit,.fi-close,.fi-srclink{transition:none}
}

@media (max-width:640px){
  .fi-tools{gap:12px}
  .fi-search{flex-basis:100%}
  .fi-field{flex:1 1 100%}
  .fi-panel{min-height:0}
  .fi-ptop{gap:10px}
}

/* ═══════════════════════════════════════════════════════════════════
   STATE INTELLIGENCE PAGES
   ───────────────────────────────────────────────────────────────────
   /film-financing/incentives/ and the fifty pages below it. These
   reuse the section styles above wholesale — .fi-rows, .fi-table,
   .fi-src, .fi-field, .fi-out and the rest are the same components
   the map's panel uses, so a figure looks the same wherever a reader
   meets it. What follows is only the page-level furniture those
   components sit in.
   ═══════════════════════════════════════════════════════════════════ */

.fis{padding-bottom:clamp(40px,5vw,72px)}
/* These pages begin with their breadcrumbs, and the site bar is fixed. A
   plain padding put the trail underneath it at every width — present in the
   DOM, read by a crawler, invisible to a reader. The bar's own height is a
   token; use it. */
.fis-hero{padding-top:calc(var(--bar-h) + clamp(18px,3vw,40px))}
.fis-sec{padding:clamp(30px,3.6vw,52px) 0 0}
.fis .t-sec{font-family:var(--display);font-weight:800;letter-spacing:-.01em;
  font-size:clamp(1.25rem,2vw,1.75rem);margin:0 0 var(--gap-body);color:var(--text)}
.fis-note{max-width:72ch;color:var(--t2)}
/* --t3 is 2.95:1 on this background: fine for a separator, not for a
   sentence. Anything carrying meaning on these pages uses --t2 at 7:1. */
.fis-quiet{font-size:.875rem;color:var(--t2)}
.fis-prose p{max-width:72ch}
.fis-prose p + p{margin-top:.9em}

/* ── breadcrumbs ──────────────────────────────────────────────────── */
.fis-crumbs{margin-bottom:clamp(14px,1.8vw,22px)}
.fis-crumbs ol{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;
  font-size:12px;letter-spacing:.04em;color:var(--t3)}
.fis-crumbs li + li::before{content:"/";margin-right:8px;color:var(--t3);opacity:.6}
.fis-crumbs a{color:var(--t2);text-decoration:none;border-bottom:1px solid transparent}
.fis-crumbs a:hover{color:var(--text);border-bottom-color:var(--line)}
.fis-crumbs a:focus-visible{outline:2px solid var(--brand-teal);outline-offset:3px}
.fis-crumbs [aria-current]{color:var(--t2)}

/* ── the headline figures ─────────────────────────────────────────── */
.fis-status{display:grid;gap:1px;margin:clamp(22px,3vw,34px) 0 0;padding:0;
  background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.fis-stat{margin:0;background:var(--n2);padding:16px 18px}
/* The grid's own colour is the 1px rule between cells, so a row that does not
   divide evenly — five figures across three columns on the index — leaves a
   lit rectangle that reads as an empty card. The last cell runs to the end of
   its row instead. A row that already fills is unaffected. */
.fis-stat:last-child{grid-column:auto/-1}
.fis-stat dt{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--t2)}
.fis-stat dd{margin:7px 0 0;font-size:.9375rem;line-height:1.5;color:var(--text)}

/* ── calculator and actions ───────────────────────────────────────── */
.fis-calc{margin-top:clamp(14px,1.8vw,20px)}
.fis-actions{margin:clamp(18px,2.2vw,26px) 0 0}

/* ── filming locations ────────────────────────────────────────────── */
.fis-locs{display:grid;gap:clamp(10px,1.4vw,16px);margin:clamp(14px,1.8vw,20px) 0 0;
  padding:0;list-style:none;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.fis-loc a{display:flex;flex-direction:column;gap:6px;height:100%;
  border:1px solid var(--line);border-radius:3px;background:var(--n2);
  padding:16px 18px;text-decoration:none;transition:border-color .3s var(--ease)}
.fis-loc a:hover{border-color:var(--gold-l)}
.fis-loc a:focus-visible{outline:2px solid var(--brand-teal);outline-offset:2px}
.fis-loc-name{font-weight:600;color:var(--text)}
.fis-loc-where{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--t3)}
.fis-loc-note{font-size:.875rem;line-height:1.55;color:var(--t2)}

/* ── ecosystem pathways ───────────────────────────────────────────── */
.fis-pathlist{display:grid;gap:clamp(10px,1.4vw,16px);margin:clamp(14px,1.8vw,20px) 0 0;
  padding:0;list-style:none;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.fis-pathlist a{display:flex;flex-direction:column;gap:6px;height:100%;
  border:1px solid var(--line);border-radius:3px;background:var(--n2);
  padding:18px 20px;text-decoration:none;transition:border-color .3s var(--ease)}
.fis-pathlist a:hover{border-color:var(--gold-l)}
.fis-pathlist a:focus-visible{outline:2px solid var(--brand-teal);outline-offset:2px}
.fis-pathlist b{font-weight:600;color:var(--text)}
.fis-pathlist span{font-size:.875rem;line-height:1.55;color:var(--t2)}

/* ── the fifty-state directory ────────────────────────────────────── */
.fis-dir{display:grid;gap:1px;margin:clamp(16px,2vw,24px) 0 0;padding:0;list-style:none;
  background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.fis-dir a{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  background:var(--n2);padding:14px 18px;text-decoration:none;
  transition:background .3s var(--ease)}
.fis-dir a:hover{background:var(--n1)}
.fis-dir a:focus-visible{outline:2px solid var(--brand-teal);outline-offset:-2px}
.fis-dir-name{font-size:.9375rem;color:var(--text)}
/* Status is a word first. The tint only ever agrees with the word. */
.fis-dir-status{font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--t2);text-align:right;flex:0 0 auto}
.fis-dir-status[data-status="active"]{color:var(--brand-teal)}

/* ── disclaimer ───────────────────────────────────────────────────── */
.fis-disclaimer{margin:0;padding-top:clamp(18px,2.2vw,26px);border-top:1px solid var(--line);
  font-size:.875rem;line-height:1.66;color:var(--t2);max-width:78ch}

@media (max-width:640px){
  .fis-status{grid-template-columns:1fr}
  .fis-dir{grid-template-columns:1fr}
  .fis-calc .fi-field{flex:1 1 100%}
}

/* ── the way through to the national platform ─────────────────────── */
/* Added in Phase 4.2. Nothing here restyles the existing section: these
   are the entry points that were missing between the map and the fifty
   state pages below it. */
.fi-coverage{margin:clamp(14px,1.6vw,20px) 0 0;display:flex;align-items:baseline;gap:12px;
  flex-wrap:wrap}
.fi-coverage b{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,2.4vw,2rem);
  letter-spacing:-.01em;color:var(--text);line-height:1}
.fi-coverage span{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--t2)}

/* Four of them, so the track has to let four fit before it wraps — at 190px
   a tablet got three and left the fourth alone above two lit empty cells.
   The last-child span is the belt to that braces: whatever the column count,
   the final card finishes its row. */
.fi-caps{display:grid;gap:1px;margin:clamp(16px,2vw,24px) 0 0;padding:0;list-style:none;
  background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(158px,1fr))}
.fi-caps li:last-child{grid-column:auto/-1}
.fi-caps li{background:var(--n2);padding:14px 16px;font-size:.875rem;line-height:1.55;
  color:var(--t2)}
.fi-caps b{display:block;font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text);margin-bottom:6px}

.fi-explore{margin:clamp(18px,2.2vw,26px) 0 0;display:flex;flex-wrap:wrap;gap:14px 20px;
  align-items:center}
.fi-explore-note{flex:1 1 320px;font-size:.875rem;line-height:1.55;color:var(--t2);
  max-width:58ch}

/* A quieter link than .enter, for the deep links inside the panel, the
   estimate and the comparison headings. */
.fi-textlink{color:var(--text);text-decoration:none;font-size:.875rem;
  border-bottom:1px solid var(--line);transition:border-color .3s var(--ease)}
.fi-textlink:hover{border-bottom-color:var(--brand-teal)}
.fi-textlink:focus-visible{outline:2px solid var(--brand-teal);outline-offset:3px}
.fi-deep{margin:clamp(12px,1.6vw,16px) 0 0}
/* A secondary link beside a button is still something a thumb has to hit. */
.fi-bridge-cta .fi-textlink{display:inline-flex;align-items:center;min-height:44px}
.fi-table thead th .fi-textlink{color:var(--text)}

.fi-bridge{margin-top:clamp(26px,3.2vw,40px);padding-top:clamp(20px,2.4vw,28px);
  border-top:1px solid var(--line)}
.fi-bridge-head{font-family:var(--display);font-weight:800;letter-spacing:-.01em;
  font-size:clamp(1.125rem,1.7vw,1.5rem);color:var(--text);margin:0 0 var(--gap-body)}
.fi-bridge p{margin:0;font-size:.9375rem;line-height:1.62;color:var(--t2);max-width:72ch}
.fi-bridge-cta{margin:clamp(18px,2.2vw,24px) 0 0;display:flex;flex-wrap:wrap;gap:14px 22px;
  align-items:center}

@media (max-width:640px){
  .fi-caps{grid-template-columns:1fr}
  .fi-explore,.fi-bridge-cta{gap:12px}
  .fi-explore .enter,.fi-bridge-cta .enter{width:100%;justify-content:center}
}

/* ═══════════════════════════════════════════════════════════════════
   PUBLIC SHOWCASE AND SUBSCRIPTION PRODUCT
   ───────────────────────────────────────────────────────────────────
   /film-financing shows the map, the benefits and the way in;
   /film-incentive-intelligence/ is the product. Both reuse the
   components above — the same map, panel, rows and caps — so the
   preview and the product read as one piece of HEC technology.
   ═══════════════════════════════════════════════════════════════════ */

/* ── the showcase on /film-financing ──────────────────────────────── */
.fi-benefits-h{margin-top:clamp(34px,4.4vw,60px)}
.fi-benefits{margin-top:clamp(14px,1.8vw,20px)}
.fi-cta{margin-top:clamp(26px,3.2vw,40px);padding:clamp(22px,2.8vw,34px);
  border:1px solid var(--line);border-radius:3px;background:var(--n2)}
.fi-cta-copy{margin:0;font-size:clamp(1rem,1.1vw,1.125rem);line-height:1.6;color:var(--t2);
  max-width:64ch}
.fi-cta-row{margin:clamp(16px,2vw,22px) 0 0;display:flex;flex-wrap:wrap;gap:14px 22px;
  align-items:center}
.fi-cta-row .fi-textlink,.fis-cta .fi-textlink,.fii-gate-cta .fi-textlink,.fi-lock-cta .fi-textlink{
  display:inline-flex;align-items:center;min-height:44px}
.fi-cta-note{margin:clamp(12px,1.6vw,16px) 0 0;font-size:.875rem;line-height:1.6;color:var(--t2);
  max-width:72ch}

/* The preview panel's way through to the product. */
.fi-lock{margin-top:clamp(16px,2vw,22px);padding-top:clamp(14px,1.8vw,18px);
  border-top:1px solid var(--line)}
.fi-lock p{margin:0;font-size:.9375rem;line-height:1.6;color:var(--t2)}
.fi-lock-cta{margin-top:clamp(14px,1.8vw,18px) !important;display:flex;flex-wrap:wrap;
  gap:12px 20px;align-items:center}

/* ── the public state pages' product block ────────────────────────── */
.fis-facets li{color:var(--t2)}
.fis-cta{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center}

/* ── the product ──────────────────────────────────────────────────── */
.fii-hero .t-page{margin-top:var(--gap-lab)}
.fii-app{margin-top:clamp(22px,3vw,36px)}
.fii-gate{max-width:78ch;padding:clamp(22px,3vw,40px);border:1px solid var(--line);
  border-radius:3px;background:var(--n2)}
.fii-gate-h{margin:0;font-family:var(--display);font-weight:800;letter-spacing:-.01em;
  font-size:clamp(1.375rem,2.2vw,1.875rem);line-height:1.15;color:var(--text)}
.fii-gate-sub{margin:10px 0 0;font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brand-teal)}
.fii-gate-copy{margin:clamp(12px,1.6vw,16px) 0 0;font-size:.9375rem;line-height:1.62;
  color:var(--t2);max-width:64ch}
.fii-gate-caps{margin-top:clamp(16px,2vw,22px)}
.fii-gate-cta{margin:clamp(18px,2.2vw,26px) 0 0;display:flex;flex-wrap:wrap;gap:14px 22px;
  align-items:center}
.fii-gate-note{margin:clamp(14px,1.8vw,18px) 0 0;font-size:.875rem;line-height:1.6;color:var(--t2)}
.fii-work{padding-top:0}
.fii-work .fi-tools{margin-top:0}

/* A state name that opens the state, styled as the text link it reads as. */
.fi-headbtn{background:none;border:0;border-bottom:1px solid var(--line);padding:0;
  cursor:pointer;font:inherit;font-size:.875rem;text-align:left;min-height:32px}
.fi-table thead th .fi-headbtn{font-size:11px;letter-spacing:.18em;text-transform:uppercase}

/* Filming locations inside the product's state panel. */
.fi-locs{margin-top:clamp(16px,2vw,22px);padding-top:clamp(14px,1.8vw,18px);
  border-top:1px solid var(--line)}
.fi-locs-h{margin:0 0 10px;font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--t2)}
.fi-locs .fi-blist span{display:block}
/* A deep link on its own line is a target, not a word in a sentence. */
.fi-deep .fi-textlink,.fi-locs .fi-textlink{display:inline-flex;align-items:center;min-height:44px}

@media (max-width:640px){
  .fi-cta-row,.fii-gate-cta,.fis-cta{gap:12px}
  .fi-cta-row .enter,.fii-gate-cta .enter,.fis-cta .enter,.fi-lock-cta .enter{
    width:100%;justify-content:center}
}