/* a better finder attributes home page, 2026 refresh (index_2026.html, include abfa_index_2026.html).
   the abfr refresh's neutral look (styles/abfr12/index_2026.css) with the hero capture numbers, a six-card
   job grid and a captioned four-shot gallery: one 1100px column, white page with a cool-grey band every other
   section, the app icon's blue as the only accent, system display and text faces, no jquery, no web fonts.
   the hero capture carries its own macos window shadow and transparent margin, so it gets no card. */
/* layout: one 1100px column, white page with a cool-grey band every other section; the only accent is the app icon's blue */
:root{
  --bg:#ffffff; --bg2:#f3f5f9; --fg:#182030; --fg2:#4d586c; --line:#dde2ea;
  --accent:#1e5aa8; --accent-hover:#174a8b; --accent-ink:#ffffff; --accent-soft:#e7eef9;
  --ok:#2a7b4f; --shadow:0 18px 50px -24px rgba(24,32,48,.35);
  --disp:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#13171e; --bg2:#1a1f28; --fg:#e8ecf3; --fg2:#a4adbd; --line:#2a313d;
  --accent:#6ea3ec; --accent-hover:#8ab6f2; --accent-ink:#0d1b2e; --accent-soft:#1d2b40;
  --ok:#6fcf97; --shadow:0 18px 50px -24px rgba(0,0,0,.7); color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#13171e; --bg2:#1a1f28; --fg:#e8ecf3; --fg2:#a4adbd; --line:#2a313d;
  --accent:#6ea3ec; --accent-hover:#8ab6f2; --accent-ink:#0d1b2e; --accent-soft:#1d2b40;
  --ok:#6fcf97; --shadow:0 18px 50px -24px rgba(0,0,0,.7); color-scheme:dark }

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;min-width:320px}
h1,h2,h3{font-family:var(--disp);font-weight:700;line-height:1.12;letter-spacing:-.02em;text-wrap:balance;margin:0}
h1{font-size:clamp(30px,4.6vw,48px);font-weight:700;letter-spacing:-.025em}
h2{font-size:clamp(25px,3.2vw,36px)}
h3{font-size:19px}
p{margin:0}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hover);text-decoration:underline}
a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1100px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
section{padding-block:64px}
.band{background:var(--bg2)}
.eyebrow{font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.lead{font-size:19px;color:var(--fg2);max-width:62ch}
.muted{color:var(--fg2)}
.mono{font-family:var(--mono);font-size:.86em}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:600;font-size:16px;padding:13px 22px;border-radius:10px;border:1.5px solid transparent;cursor:pointer;line-height:1.2;white-space:nowrap}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-hover);color:var(--accent-ink)}
.btn-secondary{background:transparent;color:var(--accent);border-color:var(--accent)}
.btn-secondary:hover{background:var(--accent-soft);color:var(--accent-hover)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:26px}
.micro{font-size:13.5px;color:var(--fg2);margin-top:14px;line-height:1.55;max-width:46ch}

/* top bar */
.topbar{border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:env(safe-area-inset-top,0px);z-index:5}
.topbar .wrap{display:flex;align-items:center;gap:18px;min-height:60px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:700;font-size:17px;color:var(--fg)}
.brand img{width:34px;height:34px}
.brand:hover{text-decoration:none}
.topnav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
.topnav a{color:var(--fg2);font-size:15px;font-weight:500;padding:8px 10px;border-radius:8px}
.topnav a:hover{color:var(--fg);background:var(--bg2);text-decoration:none}
.topnav a.buy{color:var(--accent);font-weight:600}
.flags{display:flex;gap:6px;margin-left:8px;font-size:12px;color:var(--fg2);letter-spacing:.08em}
@media (max-width:760px){ .topnav a:not(.buy):not(.dl){display:none} }

/* hero: stacked, the window at 1:1 (1100 css px, the width of the content column) cut by the first screen on
   small laptops, as on the abfr page */
.hero{padding-block:36px 0;overflow-x:clip}
.hero .wrap{display:block}
.hero .copy{max-width:880px;margin-inline:auto;text-align:center}
.hero h1{font-size:clamp(30px,4.2vw,44px)}
.hero h1 .kicker{display:block;font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.hero .lead{margin:16px auto 0;max-width:62ch}
.hero .cta-row{justify-content:center;margin-top:24px}
.hero .micro{margin:12px auto 0;max-width:none;text-wrap:balance}
.shot{position:relative;border-radius:14px;overflow:hidden;box-shadow:var(--shadow);background:var(--bg2);border:1px solid var(--line)}
.shot img{width:100%;height:100%;object-fit:cover}
/* the capture (2424×1184 px) holds a 1100×480 pt window plus its own macos shadow in a transparent margin:
   4.62% left/right, 3.14% top, 6.11% bottom of the image width. no card around it. served at half its pixel
   size so the window is 1100 css px wide, exactly the content column; below 1212 px the image follows the
   viewport width. the window shows eight preview rows, the info pane and all chrome, so nothing is masked;
   only most of the shadow margin below it is trimmed so the trust strip follows closely */
.hero .shot{--w:min(1212px,100vw);width:var(--w);height:auto;margin:calc(28px - 0.0314*var(--w)) calc(50% - var(--w)/2) calc(18px - 0.0611*var(--w));aspect-ratio:auto;border-radius:0;overflow:visible;box-shadow:none;background:none;border:0}
.hero .shot img{display:block;width:100%;height:auto;object-fit:fill}

/* trust strip */
.trust{border-block:1px solid var(--line);background:var(--bg2);padding-block:16px}
.trust .wrap{display:flex;flex-wrap:wrap;gap:10px 34px;justify-content:center;font-size:15px;color:var(--fg2);font-variant-numeric:tabular-nums}
.trust b{color:var(--fg);font-weight:600}

/* cards */
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-top:34px}
.card{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:22px 22px 20px;display:flex;flex-direction:column;gap:10px;min-width:0}
.card h3{font-size:18px}
.card p{color:var(--fg2);font-size:15.5px}
.card .ex{font-family:var(--mono);font-size:13px;color:var(--fg);background:var(--bg2);border-radius:8px;padding:10px 12px;line-height:1.55;overflow-wrap:anywhere}
.band .card .ex{background:var(--accent-soft)}
.card .ex .to{color:var(--ok)}
.card a.more{margin-top:auto;font-size:15px;font-weight:600}
.contrast{margin-top:30px;font-size:17px;max-width:70ch;color:var(--fg2);border-left:3px solid var(--accent);padding-left:18px}
.contrast b{color:var(--fg);font-weight:600}

/* steps */
.steps{display:grid;gap:28px;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:36px}
.step{min-width:0}
.step .shot{aspect-ratio:3/2;margin-bottom:16px}
.step .n{font-family:var(--disp);font-weight:800;font-size:13px;letter-spacing:.14em;color:var(--accent);margin-bottom:6px}
.step p{color:var(--fg2);font-size:15.5px}
@media (max-width:820px){ .steps{grid-template-columns:1fr} }

/* capabilities */
.caps{display:grid;gap:22px 36px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-top:34px}
.cap{display:grid;grid-template-columns:40px 1fr;gap:14px;min-width:0}
.cap .ico{width:40px;height:40px;border-radius:10px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.cap .ico svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cap h3{font-size:17px;margin-bottom:4px}
.cap p{color:var(--fg2);font-size:15.5px}
/* four cropped action shots (700×467 css px, served @2x) in two columns, each with its caption */
.gallery{display:grid;gap:36px 32px;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:52px}
.gallery .shot{aspect-ratio:3/2;margin-bottom:14px}
.gallery h3{font-size:19px}
.gallery p{color:var(--fg2);font-size:15.5px;margin-top:6px}
.gallery p.link{margin-top:10px;font-weight:600;font-size:15px}
@media (max-width:820px){ .gallery{grid-template-columns:1fr} }

/* proof */
.proof{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:30px}
.quote{border:1px solid var(--line);border-radius:14px;padding:22px;background:var(--bg);min-width:0}
.quote .big{font-family:var(--disp);font-weight:800;font-size:34px;line-height:1;font-variant-numeric:tabular-nums}
.quote .big small{font-size:15px;font-weight:600;color:var(--fg2);margin-left:6px}
.quote q{font-family:var(--disp);font-weight:500;font-size:19px;line-height:1.35;display:block}
.quote .src{font-size:14px;color:var(--fg2);margin-top:10px}

/* upgrade */
.upgrade .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:center}
.upgrade ul{margin:18px 0 0;padding-left:20px;color:var(--fg2)}
.upgrade li{margin-bottom:6px}
.upgrade li b{color:var(--fg);font-weight:600}
.pricebox{border:1px solid var(--line);border-radius:14px;padding:24px;background:var(--bg)}
.pricebox .row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15.5px}
.pricebox .row:last-of-type{border-bottom:0}
.pricebox .row b{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.pricebox .row span{color:var(--fg2)}
@media (max-width:820px){ .upgrade .wrap{grid-template-columns:1fr} }

/* faq */
.faq{max-width:760px;margin-top:26px}
details{border-top:1px solid var(--line);padding:16px 0}
details:last-child{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font-weight:600;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--accent);font-family:var(--disp);font-weight:700;font-size:22px;line-height:1}
details[open] summary::after{content:"-"}
details p{color:var(--fg2);margin-top:10px;max-width:66ch;font-size:16px}

/* final */
.final{text-align:center;padding-block:72px}
.final .cta-row{justify-content:center}
.dl-list{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 28px;font-size:15px;margin-top:26px}

footer{border-top:1px solid var(--line);padding-block:36px;font-size:14px;color:var(--fg2)}
footer .wrap{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
footer h4{font-family:var(--disp);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg);margin:0 0 10px}
footer a{display:block;color:var(--fg2);padding:3px 0}
@media (prefers-reduced-motion:no-preference){ .btn{transition:background .15s,color .15s} }