/*
Theme Name:  FixForesight
Theme URI:   https://fixforesight.com
Author:      FixForesight
Description: Ads-first starter theme for a US home-repair and appliance cost site. Five working calculators as core shortcodes, server-rendered symptom checker, per-page SEO (focus keyword, FAQ schema, breadcrumb schema, sitemap, generated share images) and a one-click content seeder. Zero plugins, zero external requests, system fonts, inline SVG art.
Version:     3.0.0
Requires at least: 6.4
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fixforesight
Tags: one-column, custom-logo, custom-menu, featured-images, translation-ready, block-styles, wide-blocks, full-width-template
*/

/* ================================================================== *
 * 1. Tokens
 * ================================================================== */
:root {
	--ink:        #0b1417;
	--ink-2:      #35464d;
	--ink-3:      #6c8189;
	--line:       #e2e9eb;
	--line-2:     #eff4f5;
	--bg:         #f4f7f8;
	--card:       #ffffff;
	--brand:      #07394a;
	--brand-2:    #0e5e75;
	--brand-3:    #1487a3;
	--teal-glow:  #35c0d8;
	--accent:     #e0671f;
	--accent-2:   #f59e0b;
	--good:       #17795a;
	--good-bg:    #e6f5ee;
	--bad:        #a32c2c;
	--bad-bg:     #fdeeee;
	--warn-bg:    #fff6e6;
	--warn-line:  #f2d9a6;
	--r-sm: 8px;
	--r:    12px;
	--r-lg: 18px;
	--r-xl: 26px;
	--sh-1: 0 1px 2px rgba(11,20,23,.05), 0 2px 6px rgba(11,20,23,.04);
	--sh-2: 0 6px 18px rgba(11,20,23,.07), 0 1px 3px rgba(11,20,23,.05);
	--sh-3: 0 22px 50px rgba(7,57,74,.16), 0 3px 10px rgba(11,20,23,.07);
	--ring: 0 0 0 1px rgba(14,94,117,.10), 0 0 0 6px rgba(20,135,163,.07);
	--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	--maxw: 1180px;
	--readw: 730px;
	--gutter: 22px;   /* single source of truth: anything that bleeds past the wrap uses this */
	/* inline SVG textures — zero extra requests, no CDN, still crisp at any DPR */
	--grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M0 0h60v60H0z' fill='none'/%3E%3Cpath d='M0 .5h60M.5 0v60' stroke='%2307394a' stroke-opacity='.08'/%3E%3C/svg%3E");
	--dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='2' cy='2' r='1.4' fill='%23ffffff' fill-opacity='.18'/%3E%3C/svg%3E");
	--hatch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M0 14 14 0' stroke='%2307394a' stroke-opacity='.07' stroke-width='2'/%3E%3C/svg%3E");
}

/* ================================================================== *
 * 2. Reset
 * ================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0; color: var(--ink); font-family: var(--sans);
	font-size: 17px; line-height: 1.62; background: var(--bg);
	background-image: var(--grid); background-size: 60px 60px;
	-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; height: auto; display: block; }
input, select, textarea, button { font: inherit; color: inherit; }
a { color: var(--brand-2); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
h1, h2, h3, h4 { font-weight: 750; line-height: 1.14; letter-spacing: -.025em; margin: 0 0 .55em; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 1.2rem + 3.2vw, 3.4rem); }
h2 { font-size: clamp(1.55rem, 1.1rem + 1.6vw, 2.15rem); }
h3 { font-size: 1.2rem; letter-spacing: -.015em; }
p { margin: 0 0 1.15em; }
.ff-lede { font-size: clamp(1.06rem, 1rem + .3vw, 1.24rem); color: var(--ink-2); line-height: 1.55; }

/* ================================================================== *
 * 3. Layout
 * ================================================================== */
.ff-wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.ff-read { max-width: var(--readw); margin-inline: auto; }
.ff-skip { position: absolute; left: -9999px; background: var(--brand); color: #fff; padding: 12px 18px; z-index: 100; border-radius: 0 0 var(--r) 0; }
.ff-skip:focus { left: 0; }
.ff-kicker {
	display: inline-flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 800;
	letter-spacing: .13em; text-transform: uppercase; color: var(--brand-2);
	background: rgba(20,135,163,.09); border: 1px solid rgba(20,135,163,.2);
	padding: 6px 14px; border-radius: 999px; margin-bottom: 20px;
}
.ff-kicker::before { content: ""; width: 15px; height: 15px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(224,103,31,.18); }

/* ================================================================== *
 * 4. Header
 * ================================================================== */
.ff-head {
	position: sticky; top: 0; z-index: 40;
	background: rgba(255,255,255,.93); backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset;
}
/* Old Android WebView renders backdrop-filter as nothing at all; without this
   fallback the header text sits on a see-through bar. Flat, readable > blurry. */
@supports not ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) {
	.ff-head { background: rgba(255,255,255,.99); }
}
.ff-head-in { display: flex; align-items: center; gap: 26px; min-height: 72px; padding-block: 6px; padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px); }

.ff-brand { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 1.2rem; letter-spacing: -.035em; color: var(--ink); text-decoration: none; }
.ff-brand:hover { color: var(--ink); }
.ff-mark { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; background: linear-gradient(150deg, var(--brand-3), var(--brand) 78%); display: grid; place-items: center; box-shadow: 0 4px 12px rgba(7,57,74,.28); }
.ff-mark svg { width: 19px; height: 19px; }
.ff-brand small { display: block; font-size: .6rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3); margin-top: 1px; }
.ff-nav { margin-left: auto; display: flex; gap: 2px; align-items: center; }
/* wp_nav_menu (and the fallback) both print ul > li > a, so the flex row has to
   live on the ul or the whole menu collapses into one indented bulleted block. */
.ff-nav ul { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; list-style: none; margin: 0; padding: 0; }
.ff-nav li { margin: 0; }
.ff-nav a { color: var(--ink-2); text-decoration: none; font-size: .93rem; font-weight: 550; padding: 9px 13px; border-radius: var(--r-sm); position: relative; white-space: nowrap; }
.ff-nav a:hover { background: var(--line-2); color: var(--brand); }
.ff-nav .current-menu-item > a, .ff-nav a.current-menu-item { color: var(--brand); font-weight: 650; }
.ff-nav .current-menu-item > a::after, .ff-nav a.current-menu-item::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--accent); }
/* The last primary menu item is treated as the call to action, so a freshly
   seeded site already has one without anyone editing a menu in wp-admin.
   Owners can also type "ff-cta" into a menu item's CSS Classes box to pick it. */
.ff-cta, .ff-nav > ul > li:last-child > a { background: linear-gradient(160deg, var(--accent), #c85215); color: #fff !important; font-weight: 650 !important; padding: 10px 17px; border-radius: var(--r-sm); box-shadow: 0 4px 14px rgba(224,103,31,.3); }
.ff-cta:hover, .ff-nav > ul > li:last-child > a:hover { background: linear-gradient(160deg, #ef7529, var(--accent)); color: #fff !important; }
.ff-cta::after, .ff-nav > ul > li:last-child > a::after { display: none !important; }
.ff-burger { display: none; margin-left: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 12px; min-width: 46px; min-height: 46px; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.ff-burger span { display: block; width: 20px; height: 2px; background: var(--ink); margin: 4px 0; border-radius: 2px; transition: transform .18s; }

/* ================================================================== *
 * 5. Hero — layered SVG scene, all inline
 * ================================================================== */
.ff-hero {
	position: relative; overflow: hidden; color: #fff;
	background: radial-gradient(74% 118% at 84% 6%, #1691ad 0%, #0d5265 34%, #07394a 66%, #052b38 100%);
	padding: clamp(46px, 6vw, 84px) 0 clamp(54px, 7vw, 100px);
	border-bottom: 1px solid rgba(255,255,255,.1);
}
.ff-hero::before {
	content: ""; position: absolute; inset: 0; background-image: var(--dots); background-size: 26px 26px;
	opacity: .5; mask-image: radial-gradient(80% 70% at 70% 10%, #000 10%, transparent 75%);
	-webkit-mask-image: radial-gradient(80% 70% at 70% 10%, #000 10%, transparent 75%);
}
.ff-hero::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 70px;
	background: var(--bg); mask-image: linear-gradient(180deg, transparent, #000 65%);
	-webkit-mask-image: linear-gradient(180deg, transparent, #000 65%);
	border-radius: 45% 45% 0 0 / 22px 22px 0 0;
}
.ff-hero-in { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: clamp(26px,4vw,54px); align-items: center; }
.ff-hero h1 { color: #fff; margin-bottom: .32em; text-shadow: 0 2px 24px rgba(4,26,34,.45); max-width: 20ch; }
.ff-hero .ff-kicker { color: #a8e8f5; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22); }
.ff-hero .ff-kicker::before { box-shadow: 0 0 0 3px rgba(255,255,255,.16); }
.ff-hero .ff-lede { color: #dcecf1; max-width: 46ch; text-shadow: 0 1px 12px rgba(4,26,34,.45); }
.ff-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.ff-btn { display: inline-flex; align-items: center; gap: 9px; padding: 14px 23px; border-radius: var(--r-sm); font-weight: 680; text-decoration: none; border: 1px solid transparent; transition: transform .14s, box-shadow .14s, background .14s; }
.ff-btn:hover { transform: translateY(-2px); box-shadow: var(--sh-3); }
.ff-btn-a { background: linear-gradient(160deg, var(--accent-2), var(--accent)); color: #231000; }
.ff-btn-a:hover { color: #231000; }
.ff-btn-b { background: rgba(255,255,255,.09); color: #fff; border-color: rgba(255,255,255,.3); backdrop-filter: blur(3px); }
.ff-btn-b:hover { background: rgba(255,255,255,.17); color: #fff; }
.ff-btn svg { width: 16px; height: 16px; }

/* the house-cutaway art */
.ff-art { position: relative; }
.ff-art svg { width: 100%; height: auto; filter: drop-shadow(0 26px 44px rgba(0,0,0,.3)); }
.ff-art-tag {
	position: absolute; z-index: 3; background: #fff; color: var(--ink); border-radius: 10px; padding: 8px 12px;
	box-shadow: var(--sh-3); font-size: .8rem; line-height: 1.25; min-width: 96px;
	border: 1px solid rgba(255,255,255,.7);
}
.ff-art-tag b { display: block; font-size: 1.02rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ff-art-tag span { color: var(--ink-3); font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; }
.ff-art-tag.t1 { top: 6%; right: -2%; animation: ff-float 7s ease-in-out infinite; }
.ff-art-tag.t2 { bottom: 22%; left: -4%; animation: ff-float 9s ease-in-out .8s infinite; }
.ff-art-tag.t3 { bottom: 2%; right: 8%; animation: ff-float 8s ease-in-out 1.6s infinite; }
@keyframes ff-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* ================================================================== *
 * 6. Sections & content
 * ================================================================== */
.ff-main { padding: clamp(30px, 4vw, 54px) 0 70px; }
.ff-prose > *:first-child { margin-top: 0; }
.ff-prose h2 { margin-top: 2em; padding-top: .45em; position: relative; }
.ff-prose h2::before { content: ""; position: absolute; top: 0; left: 0; width: 42px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.ff-prose h3 { margin-top: 1.7em; }
.ff-prose li { margin-bottom: .42em; }
.ff-prose ul, .ff-prose ol { padding-left: 1.3em; }
.ff-prose ol { counter-reset: li; list-style: none; padding-left: 2.1em; }
.ff-prose ol > li { counter-increment: li; position: relative; }
.ff-prose ol > li::before { content: counter(li); position: absolute; left: -2.1em; top: .1em; width: 1.55em; height: 1.55em; border-radius: 50%; background: var(--brand); color: #fff; font-size: .74rem; font-weight: 700; display: grid; place-items: center; }
.ff-prose blockquote { margin: 1.6em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--accent); color: var(--ink-2); font-size: 1.05rem; }
.ff-note { font-size: .86rem; color: var(--ink-3); margin: .5rem 0 0; }
.ff-src { font-size: .78rem; color: var(--ink-3); margin: 12px 0 0; }
.ff-srcbox { position: relative; background: linear-gradient(180deg,#f8fbfb,#f2f7f8); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; margin: 2em 0; font-size: .9rem; overflow: hidden; }
.ff-srcbox::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, var(--brand-3), var(--accent)); }
.ff-srcbox ul { margin: 8px 0 0; padding-left: 1.15em; }
.ff-srcbox li { margin-bottom: 4px; }

/* ================================================================== *
 * 7. Tools
 * ================================================================== */
.ff-tool {
	position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl);
	padding: clamp(18px, 2.4vw, 28px); margin: 1.9em 0; box-shadow: var(--sh-2); overflow: hidden;
}
.ff-tool::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--brand-3), var(--teal-glow) 40%, var(--accent)); opacity: .9; }
.ff-tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 14px; }
.ff-field { display: flex; flex-direction: column; gap: 6px; }
.ff-field label { font-size: .73rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
/* font-size is an absolute 16px floor on purpose: iOS Safari zooms the whole
   page when a focused control computes below 16px, and the zoom never unwinds. */
.ff-field input, .ff-field select {
	background: linear-gradient(180deg,#fff,#fbfdfd); border: 1px solid #cddade; border-radius: var(--r-sm);
	padding: 12px 12px; width: 100%; font-size: 1rem; min-height: 46px; font-weight: 520;
	font-variant-numeric: tabular-nums;
	transition: border-color .14s, box-shadow .14s;
}
.ff-field input:hover, .ff-field select:hover { border-color: var(--brand-3); }
.ff-field input:focus, .ff-field select:focus { border-color: var(--brand-2); box-shadow: var(--ring); outline: none; }
.ff-field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2335464d' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
.ff-field input:disabled { background: var(--line-2); color: var(--ink-3); }
.ff-hint { font-size: .76rem; color: var(--ink-3); }
.ff-tool .ff-result { margin-top: 22px; padding-top: 20px; border-top: 1px dashed var(--line); }
.ff-result-row { display: flex; flex-wrap: wrap; gap: 18px 34px; justify-content: space-between; align-items: flex-start; }
.ff-result-main, .ff-result-side { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.ff-result-label { width: 100%; font-size: .71rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.ff-big { font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.6rem); font-weight: 780; letter-spacing: -.035em; font-variant-numeric: tabular-nums; color: var(--brand); }
.ff-dash { color: var(--ink-3); font-weight: 300; }
.ff-verdict { font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 12px; }
.ff-verdict-repair { color: var(--good); }
.ff-verdict-replace { color: var(--bad); }
.ff-bar { position: relative; height: 30px; background: var(--line-2); border-radius: 8px; overflow: hidden; margin: 0 0 14px; border: 1px solid var(--line); }
.ff-bar-fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--good), #2aa06f); transition: width .35s cubic-bezier(.2,.8,.25,1); }
.ff-bar-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35)); }
.ff-bar-cap { position: absolute; inset: 0; display: grid; place-items: center; font-size: .73rem; font-weight: 700; color: var(--ink-2); letter-spacing: .02em; }
.ff-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-top: 16px; }
.ff-stats > div { background: linear-gradient(180deg,#fff,#fbfdfd); padding: 13px 15px; }
.ff-stats b { display: block; font-size: 1.34rem; font-variant-numeric: tabular-nums; letter-spacing: -.03em; color: var(--brand); }
.ff-stats span { font-size: .7rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.ff-pill { display: inline-flex; align-items: center; gap: 5px; font-size: .71rem; font-weight: 750; padding: 4px 10px; border-radius: 999px; background: var(--line-2); color: var(--ink-2); border: 1px solid var(--line); letter-spacing: .01em; }
.ff-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ff-pill-low { background: var(--good-bg); color: var(--good); border-color: #c4e6d7; }
.ff-pill-medium { background: var(--warn-bg); color: #8a5a12; border-color: var(--warn-line); }
.ff-pill-high { background: var(--bad-bg); color: var(--bad); border-color: #f2cfcb; }
.ff-callout { position: relative; border-radius: var(--r); padding: 14px 16px 14px 46px; margin: 16px 0 0; font-size: .95rem; background: var(--line-2); border: 1px solid var(--line); }
.ff-callout strong { display: block; margin-bottom: 2px; }
.ff-callout::before { content: "\2713"; position: absolute; left: 14px; top: 13px; width: 19px; height: 19px; border-radius: 50%;
	background: var(--brand-2); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; opacity: 1; }
.ff-callout-stop { background: var(--bad-bg); border-color: #f2cfcb; color: #6b1d1d; }
.ff-callout-stop::before { content: "!"; background: var(--bad); }
.ff-tool-symptom .ff-callout { margin-top: 12px; }
/* Underlined text button, but still a button: it needs a real hit area at every
   width (WCAG 2.2 asks 24x24 minimum, and 44 is the comfortable number on touch). */
.ff-printbtn { display: inline-flex; align-items: center; min-height: 32px; background: none; border: 0; padding: 4px 2px; color: var(--brand-2); cursor: pointer; font-size: .86rem; text-decoration: underline; text-underline-offset: 2px; }
.ff-printbtn:hover { color: var(--accent); }

/* ================================================================== *
 * 8. Tables & generated charts
 * ================================================================== */
.ff-fig { position: relative; margin: 2em 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-1); }
.ff-fig figcaption { padding: 16px 19px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg,#fff,#f9fbfb); font-size: 1rem; font-weight: 600; }
.ff-fig .ff-note { padding: 0 19px 15px; margin: 0; }
.ff-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* added by ff-tools.js only when the table really does overflow: a shadow on the
   scrolling edge plus a note, so a hidden last column is never silent */
.ff-table-scroll.is-scrollable { background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.92)) right / 26px 100% no-repeat; }
.ff-swipehint { text-align: right; padding: 0 18px; font-size: .76rem; }
.ff-swipehint::before { content: "\2192"; display: inline-block; margin-right: 6px; color: var(--brand-3); font-weight: 800; }
.ff-table { width: 100%; border-collapse: collapse; font-size: .94rem; }
.ff-table th, .ff-table td { padding: 12px 17px; text-align: left; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.ff-table thead th { font-size: .71rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); background: #f7fafa; border-bottom: 1px solid var(--line); white-space: nowrap; font-weight: 800; }
.ff-table tbody tr:last-child td { border-bottom: 0; }
.ff-table tbody tr:hover { background: #f6fbfc; }
.ff-table .ff-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* table links are short words in a tight cell; pad the hit area out to 44px
   without letting that padding move a single glyph (negative margin undoes it) */
.ff-table td a { display: inline-block; padding: 12px 10px; margin: -12px -10px; }
.ff-table tr.is-lead td { background: linear-gradient(90deg, #eefaf4, transparent 70%); box-shadow: inset 3px 0 0 var(--good); }
.ff-part { display: block; font-size: .76rem; color: var(--ink-3); font-family: var(--mono); margin-top: 3px; }
.ff-prob { display: inline-block; width: 52px; height: 7px; background: var(--line); border-radius: 4px; margin-right: 8px; vertical-align: middle; overflow: hidden; }
.ff-prob i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand-2), var(--brand-3)); border-radius: 4px; transition: width .4s ease; }
.ff-save { color: var(--good); }
.ff-chart { display: block; width: 100%; height: auto; background: linear-gradient(180deg,#fbfdfd,#f5f9fa); }
.ff-chartwrap { padding: 4px 0 0; }
figure.ff-chartfig { margin: 1.6em 0; }
figure.ff-chartfig img, figure.ff-chartfig svg { border-radius: var(--r); border: 1px solid var(--line); }
figure.ff-chartfig figcaption { font-size: .82rem; color: var(--ink-3); padding: 9px 0 0; border: 0; background: none; font-weight: 500; text-align: center; }

/* ================================================================== *
 * 9. Next-step module (the pages/session lever)
 * ================================================================== */
.ff-next { position: relative; margin-top: 2.8em; background: linear-gradient(165deg, #07394a, #0e5e75 90%); border-radius: var(--r-xl); padding: 22px; box-shadow: var(--sh-2); overflow: hidden; }
.ff-next::before { content: ""; position: absolute; inset: 0; background-image: var(--dots); background-size: 22px 22px; opacity: .35; }
.ff-next-label { position: relative; font-size: .71rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: #8fdcec; margin: 0 0 13px; }
.ff-next-grid { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.ff-next-card { display: block; text-decoration: none; color: #fff; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16); border-radius: var(--r); padding: 14px 16px; transition: transform .15s, background .15s, border-color .15s; backdrop-filter: blur(2px); }
.ff-next-card:hover { transform: translateY(-3px); background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.34); color: #fff; }
.ff-next-t { display: block; font-weight: 700; margin-bottom: 3px; letter-spacing: -.015em; }
.ff-next-d { display: block; font-size: .87rem; color: rgba(255,255,255,.72); }

/* ================================================================== *
 * 10. Card grids, hubs, archives
 * ================================================================== */
.ff-sec { position: relative; padding: clamp(40px, 5vw, 72px) 0; }
.ff-sec-alt { background: var(--card); border-block: 1px solid var(--line); }
.ff-sec-alt::before { content: ""; position: absolute; inset: 0; background-image: var(--hatch); background-size: 14px 14px; opacity: .5; pointer-events: none; }
.ff-sec > .ff-wrap { position: relative; z-index: 1; }
.ff-sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 28px; }
.ff-sec-head h2 { margin: 0; }
.ff-sec-head p { margin: 5px 0 0; color: var(--ink-3); max-width: 58ch; }
.ff-grid { display: grid; gap: 15px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 232px), 1fr)); }
.ff-card {
	position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
	padding: 22px 20px 20px; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 7px;
	box-shadow: var(--sh-1); transition: transform .16s, box-shadow .16s, border-color .16s; overflow: hidden;
}
.ff-card::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--brand-3), var(--accent)); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.ff-card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: #c9dfe6; color: inherit; }
.ff-card:hover::after { transform: scaleX(1); }
.ff-card h3 { margin: 0; font-size: 1.08rem; }
.ff-card p { margin: 0; font-size: .92rem; color: var(--ink-3); flex: 1; line-height: 1.5; }
.ff-card-tag { font-size: .69rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--brand-2); }
.ff-card-arrow { position: absolute; right: 18px; bottom: 16px; color: var(--brand-3); opacity: 0; transform: translateX(-6px); transition: opacity .18s, transform .18s; }
.ff-card:hover .ff-card-arrow { opacity: 1; transform: translateX(0); }
.ff-steps { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); counter-reset: ff-s; }
.ff-step { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 20px 20px 60px; box-shadow: var(--sh-1); }
.ff-step::before { counter-increment: ff-s; content: counter(ff-s); position: absolute; left: 18px; top: 18px; width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(150deg, var(--brand-3), var(--brand)); color: #fff; display: grid; place-items: center; font-size: .84rem; font-weight: 800; box-shadow: 0 3px 9px rgba(7,57,74,.25); }
.ff-step h3 { font-size: 1rem; margin: 0 0 4px; }
.ff-step p { margin: 0; font-size: .91rem; color: var(--ink-3); }
.ff-trust { display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: .85rem; color: var(--ink-3); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 20px; }
.ff-trust b { color: var(--brand); font-size: 1.12rem; font-variant-numeric: tabular-nums; letter-spacing: -.02em; margin-right: 5px; }

/* hub / index listing */
.ff-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.ff-list li { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 17px 20px; transition: border-color .15s, box-shadow .15s, transform .15s; }
.ff-list li:hover { border-color: #c9dfe6; box-shadow: var(--sh-2); transform: translateY(-2px); }
.ff-list h2 { font-size: 1.12rem; margin: 0 0 5px; }
.ff-list h2 a { text-decoration: none; color: inherit; }
.ff-list h2 a:hover { color: var(--brand-2); }
.ff-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ff-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: .87rem; text-decoration: none; color: var(--ink-2); font-weight: 550; transition: all .14s; }
.ff-chip:hover { border-color: var(--brand-3); background: #f0f9fb; color: var(--brand); transform: translateY(-1px); }
.ff-chip b { font-variant-numeric: tabular-nums; color: var(--brand-2); font-weight: 700; }

/* ================================================================== *
 * 11. FAQ, breadcrumbs, meta
 * ================================================================== */
.ff-faq { margin: 2.4em 0 0; }
.ff-faq details { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 9px; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.ff-faq details[open] { border-color: #bfdbe4; box-shadow: var(--sh-1); }
.ff-faq summary { cursor: pointer; padding: 15px 44px 15px 18px; font-weight: 650; list-style: none; position: relative; letter-spacing: -.01em; }
.ff-faq summary::-webkit-details-marker { display: none; }
.ff-faq summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--brand-2); border-bottom: 2px solid var(--brand-2); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.ff-faq details[open] summary::after { transform: translateY(-20%) rotate(225deg); }
.ff-faq .ff-faq-a { padding: 0 18px 16px; color: var(--ink-2); font-size: .95rem; }
.ff-faq .ff-faq-a p:last-child { margin-bottom: 0; }
.ff-crumb { font-size: .82rem; color: var(--ink-3); margin-bottom: 15px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.ff-crumb a { color: var(--ink-3); text-decoration: none; }
/* crumbs are flex items, so their box really is one line tall - pad the tap area */
.ff-crumb a { padding: 9px 3px; }
.ff-crumb a:hover { color: var(--brand-2); text-decoration: underline; }
.ff-crumb span[aria-current] { color: var(--ink-2); font-weight: 600; }
.ff-crumb .ff-sep { opacity: .5; }
.ff-updated { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--ink-2); background: var(--card); border: 1px solid var(--line); padding: 6px 13px; border-radius: 999px; margin-bottom: 16px; box-shadow: var(--sh-1); }
.ff-updated::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px var(--good-bg); }
.ff-updated.is-stale::before { background: var(--accent-2); box-shadow: 0 0 0 3px var(--warn-bg); }
.ff-entry-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; font-size: .86rem; color: var(--ink-3); border-block: 1px solid var(--line); padding: 13px 0; margin: 0 0 26px; }
.ff-avatar { width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(150deg, var(--brand-3), var(--brand)); color: #fff; display: inline-grid; place-items: center; font-size: .78rem; font-weight: 800; margin-right: 9px; }
.ff-empty { text-align: center; padding: 60px 22px; background: var(--card); border: 1px dashed var(--line); border-radius: var(--r-lg); }
.ff-search { display: flex; gap: 8px; max-width: 460px; margin: 18px auto 0; }
.ff-search input { flex: 1; padding: 12px 15px; border: 1px solid #cddade; border-radius: var(--r-sm); background: #fff; }
.ff-search button { padding: 12px 20px; border: 0; border-radius: var(--r-sm); background: var(--brand); color: #fff; font-weight: 650; cursor: pointer; }
.ff-pages { display: flex; gap: 6px; margin-top: 2em; font-size: .9rem; }
.ff-pages a, .ff-pages span { padding: 7px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); text-decoration: none; }

/* ================================================================== *
 * 12. Disclosure / notice
 * ================================================================== */
.ff-disc { position: relative; background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: var(--r); padding: 13px 16px 13px 44px; font-size: .88rem; color: #6b4b12; margin: 0 0 24px; }
.ff-disc::before { content: "!"; position: absolute; left: 15px; top: 12px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent-2); color: #3d2600; font-weight: 800; font-size: .74rem; display: grid; place-items: center; }
.ff-disc b { color: #8a5a12; }
.ff-legal-strip { background: var(--line-2); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 18px; font-size: .86rem; color: var(--ink-2); margin: 2.2em 0 0; }
.ff-legal-strip a { font-weight: 650; }

/* --- ad containers: a wide or fixed-height unit must never break the layout --- */
.ff-ad { overflow: hidden; max-width: 100%; margin: 1.8em auto; text-align: center; }
.ff-ad ins, .ff-ad iframe, .ff-ad img { max-width: 100% !important; display: block; margin-inline: auto; }

/* progressive enhancement: tools work without JS, only live recalc needs it */
/* --- illustrations --- */
.ff-art { margin: 1.6em 0; }
.ff-art-photo { position: relative; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #fff; box-shadow: var(--sh-1); }
.ff-art-photo picture img { width: 100%; display: block; }
.ff-art-photo figcaption { position: static; margin: 0; padding: 10px 18px 11px; font-size: .79rem; line-height: 1.45; color: #cfe7ee; text-align: center;
	background: var(--brand); }
.ff-art-photo:hover picture img { transform: scale(1.012); }
.ff-art-photo picture img { transition: transform .5s cubic-bezier(.2,.8,.2,.8); }
.ff-art-diagram svg, .ff-art-banner svg { width: 100%; height: auto; border-radius: var(--r-lg); display: block; }
.ff-art figcaption.ff-note { margin-top: 8px; text-align: center; }
.ff-js-only { display: none; }
html.ff-js .ff-js-only { display: block; }
.ff-noscript { font-size: .84rem; color: var(--ink-3); margin: .4rem 0 0; }

/* ================================================================== *
 * 13. Footer
 * ================================================================== */
.ff-foot { position: relative; background: radial-gradient(120% 130% at 15% -20%, #0e5e75, #052b38 70%); color: rgba(255,255,255,.72); padding: 52px 0 calc(26px + env(safe-area-inset-bottom, 0px)); margin-top: 44px; font-size: .92rem; overflow: hidden; }
.ff-foot::before { content: ""; position: absolute; inset: 0; background-image: var(--dots); background-size: 24px 24px; opacity: .3; }
.ff-foot > .ff-wrap { position: relative; z-index: 1; }
.ff-foot a { color: rgba(255,255,255,.86); text-decoration: none; }
.ff-foot a:hover { color: #fff; text-decoration: underline; }
.ff-foot-grid { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.ff-foot h4 { color: #8fdcec; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 13px; }
.ff-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ff-foot-bot { border-top: 1px solid rgba(255,255,255,.13); margin-top: 32px; padding-top: 18px; font-size: .8rem; display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: space-between; }

/* ================================================================== *
 * 14. Motion, responsive, print
 * ================================================================== */
@media (max-width: 940px) {
	.ff-hero-in { grid-template-columns: 1fr; }
	.ff-art { max-width: 460px; margin-inline: auto; }
	.ff-art-tag.t2 { left: 2%; bottom: -3%; }
}
/* 861-1060px: brand + tagline + five labels cannot share a row, so the tagline
   goes before the menu wraps onto a second line inside the header. */
@media (max-width: 1060px) and (min-width: 861px) {
	.ff-brand small { display: none; }
	.ff-nav a { padding: 9px 10px; font-size: .88rem; }
	.ff-head-in { gap: 16px; }
}
/* Nav collapses to a drawer at 860, not 760: at 780px in landscape a row of five
   labels is already too tight, and a drawer that works is better than a menu
   that wraps. The drawer is anchored to the header itself (sticky = positioned),
   so it can never sit under a header that grew past its 72px minimum. */
@media (max-width: 860px) {
	/* Anchor the drawer to the header itself (sticky = positioned), so it can
	   never sit under a header that grew taller than its 72px minimum. */
	.ff-nav { position: absolute; top: calc(100% + 1px); left: 0; right: 0; margin: 0; display: none; background: #fff; border-bottom: 1px solid var(--line); border-radius: 0 0 var(--r-lg) var(--r-lg); padding: 8px 22px 18px; box-shadow: var(--sh-3); max-height: 76vh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
	.ff-nav.is-open { display: block; }
	.ff-nav ul { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; }
	.ff-nav a { padding: 14px 4px; min-height: 46px; box-sizing: content-box; border-bottom: 1px solid var(--line-2); font-size: 1rem; display: flex; align-items: center; }
	.ff-nav .current-menu-item > a::after, .ff-nav a.current-menu-item::after { display: none; }
	.ff-cta, .ff-nav > ul > li:last-child > a { text-align: center; margin-top: 10px; border-bottom: 0 !important; color: #fff !important; justify-content: center; padding: 13px 17px; }
	.ff-burger { display: block; }
	.ff-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
	.ff-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
	.ff-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}
@media (max-width: 760px) {
	body { font-size: 16px; }
	.ff-tool-grid { grid-template-columns: 1fr; }
	.ff-field label { font-size: .78rem; letter-spacing: .05em; }
	.ff-result-row { flex-direction: column; gap: 15px; }
	.ff-stats { grid-template-columns: 1fr 1fr; }
	.ff-tool, .ff-next { border-radius: var(--r-lg); }
	/* tap comfort: discrete controls reach 44px, prose links stay inline */
	.ff-printbtn { min-height: 44px; padding: 8px 4px; }
	.ff-chip { padding: 10px 15px; }
	.ff-pages a, .ff-pages span { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; }
	.ff-foot ul { gap: 0; }
	.ff-foot ul a { display: flex; align-items: center; min-height: 44px; }
	.ff-foot-bot a { display: inline-flex; align-items: center; min-height: 34px; }
	:root { --gutter: 18px; }
	#ff-main { scroll-margin-top: 84px; }
}
@media (hover: none) and (pointer: coarse) {
	/* no hover on a touchscreen: the affordance has to live in the base state */
	.ff-card-arrow { opacity: .75; transform: none; }
	.ff-card:active, .ff-list li:active, .ff-next-card:active, .ff-chip:active { transform: scale(.995); background: #f4fafb; }
	.ff-btn, .ff-burger, .ff-printbtn, .ff-chip { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
	html { scroll-behavior: auto; }
	.ff-art-tag { animation: none !important; }
}
@media print {
	.ff-head, .ff-foot, .ff-next, .ff-cta, .ff-printbtn, .ff-tool-grid input, .ff-tool-grid select { display: none !important; }
	body { background: #fff; color: #000; font-size: 11.5pt; }
	.ff-tool, .ff-fig { box-shadow: none; border: 1px solid #999; break-inside: avoid; }
	.ff-hero { background: #fff !important; color: #000; }
	.ff-hero h1, .ff-hero .ff-lede { color: #000; text-shadow: none; }
}