/* API-site components. Built on the TrueFixR homepage look: light blue/white, #2467e8 accent, DM Sans 300 headlines, pill buttons.
   Use these classes in page bodies. Page-specific CSS goes in src/css/<page>.css, never in this file. */
:root{--navy:#102e50;--blue:#2467e8;--blue-d:#1554cf;--ink2:#52677e;--ink3:#6b7c90;--line2:#dfe7f2;--soft:#f3f7fc;--soft2:#f7faff;--code-bg:#0d2038;--code-ink:#dbe7f7}
.shell{width:min(calc(100% - 48px),1180px);margin:auto}
.sec{padding:110px 0}.sec--soft{background:var(--soft);border-block:1px solid #e5edf7}.sec--tight{padding:70px 0}
.kicker2{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--blue);margin:0 0 18px;font-weight:500}
.h-title{font-size:clamp(2.4rem,4.6vw,4.4rem);font-weight:300;letter-spacing:-.06em;line-height:.98;margin:0 0 20px;color:var(--navy)}
.h-title span{color:var(--blue)}
.h-sub{font-size:19px;line-height:1.65;color:var(--ink2);max-width:680px;margin:0 0 8px}
.sec-head{margin-bottom:56px}.sec-head--center{text-align:center}.sec-head--center .h-sub{margin-inline:auto}
.page-hero{padding:150px 0 80px;background:linear-gradient(180deg,#f7faff 0%,#fff 100%);position:relative;overflow:hidden}
.page-hero:after{content:"";position:absolute;width:60vw;height:60vw;right:-22vw;top:-28vw;background:radial-gradient(circle,rgba(72,143,255,.10),transparent 63%);pointer-events:none}
.page-hero h1{font-size:clamp(3rem,6.2vw,5.6rem);font-weight:300;letter-spacing:-.065em;line-height:.96;margin:22px 0 22px;color:var(--navy);max-width:980px}
.page-hero h1 span{color:var(--blue)}
.page-hero .lead{font-size:19px;line-height:1.65;color:var(--ink2);max-width:640px;margin:0}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.cards--2{grid-template-columns:repeat(2,1fr)}.cards--4{grid-template-columns:repeat(4,1fr)}
.card{border:1px solid var(--line2);border-radius:18px;background:#fff;padding:28px;box-shadow:0 10px 36px rgba(25,76,144,.06);display:flex;flex-direction:column;gap:10px}
.card h3{font-size:22px;font-weight:500;letter-spacing:-.03em;margin:6px 0 2px;color:var(--navy)}.card p{font-size:15.5px;line-height:1.65;color:var(--ink2);margin:0}
.card .num{font-size:12px;letter-spacing:.16em;color:var(--blue);font-weight:600}
.card a.more{margin-top:auto;padding-top:12px;font-size:14px;color:#1a55aa;text-decoration:none;font-weight:500}.card a.more:hover{color:var(--blue)}
.badge{display:inline-flex;align-items:center;border:1px solid #cfdded;background:#fff;color:#1b4678;border-radius:99px;padding:5px 11px;font-size:12px;font-weight:500;letter-spacing:.02em}
.badge--blue{background:#eaf1ff;border-color:#c9dbff;color:#1659ce}.badge--get{background:#e8f7ee;border-color:#bfe6cd;color:#1d7a43}.badge--post{background:#fff4e5;border-color:#f5d9a8;color:#a15c00}
.callout{border:1px solid #cfe0f7;background:#f3f8ff;border-radius:14px;padding:18px 22px;color:#36587c;font-size:15.5px;line-height:1.65}.callout strong{color:var(--navy)}
.callout--warn{background:#fff9ed;border-color:#f3e2b7;color:#6d5214}
/* code */
.codewrap{border:1px solid #1d3b5f;border-radius:16px;background:var(--code-bg);overflow:hidden;box-shadow:0 18px 50px rgba(13,32,56,.18);margin:18px 0}
.codewrap__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px 10px 18px;border-bottom:1px solid rgba(255,255,255,.09);font-size:12px;color:#8fa9c8;letter-spacing:.06em}
.codewrap__bar .dots{display:flex;gap:6px}.codewrap__bar .dots i{width:9px;height:9px;border-radius:50%;background:#2a4a70;display:block}
.copy-btn{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#cfe0f7;border-radius:99px;padding:5px 12px;font:inherit;font-size:12px;cursor:pointer;min-height:30px}.copy-btn:hover{background:rgba(255,255,255,.14)}
pre.code{margin:0;padding:18px 20px;overflow:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px;line-height:1.7;color:var(--code-ink);tab-size:2}
pre.code .c{color:#7e98b8}pre.code .k{color:#7db4ff}pre.code .s{color:#9fe0b2}pre.code .n{color:#ffcf8a}
code.inline{font-family:ui-monospace,Menlo,monospace;font-size:.9em;background:#eaf1ff;color:#1654c0;border-radius:6px;padding:2px 7px}
/* tabs */
.tabs{margin:18px 0}.tabs__bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.tabs__btn{border:1px solid #cfdded;background:#fff;color:#456380;border-radius:99px;padding:9px 16px;font:inherit;font-size:14px;cursor:pointer;min-height:42px}
.tabs__btn[aria-selected="true"]{background:var(--blue);border-color:var(--blue);color:#fff}.tabs__panel[hidden]{display:none}
/* tables */
.tbl-wrap{overflow:auto;border:1px solid var(--line2);border-radius:16px;background:#fff}
table.tbl{width:100%;border-collapse:collapse;font-size:15px;min-width:560px}
.tbl th{background:var(--soft);text-align:left;padding:14px 18px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#56728f;font-weight:600;border-bottom:1px solid var(--line2)}
.tbl td{padding:15px 18px;border-bottom:1px solid #eaf0f8;color:#36587c;vertical-align:top;line-height:1.55}.tbl tr:last-child td{border-bottom:0}.tbl td strong{color:var(--navy)}
/* steps */
.steps2{counter-reset:s;display:grid;gap:18px}.step2{display:grid;grid-template-columns:54px 1fr;gap:18px;padding:24px 0;border-bottom:1px solid var(--line2)}
.step2:before{counter-increment:s;content:counter(s,decimal-leading-zero);color:var(--blue);font-size:13px;letter-spacing:.14em;font-weight:600;padding-top:7px}
.step2 h3{font-size:23px;font-weight:400;letter-spacing:-.03em;margin:0 0 8px;color:var(--navy)}.step2 p{margin:0;color:var(--ink2);font-size:16px;line-height:1.7}
/* price grid */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.price{border:1px solid var(--line2);border-radius:20px;background:#fff;padding:30px;display:flex;flex-direction:column;gap:6px}
.price .amt{font-size:46px;font-weight:300;letter-spacing:-.05em;color:var(--navy);line-height:1}.price .amt small{font-size:15px;letter-spacing:0;color:var(--ink3);font-weight:400}
.price h3{margin:0 0 4px;font-size:20px;font-weight:500;color:var(--navy);letter-spacing:-.02em}.price p{margin:6px 0 0;color:var(--ink2);font-size:15px;line-height:1.6}
.price--hl{border-color:#b9d0f5;box-shadow:0 24px 70px rgba(29,76,133,.12);background:linear-gradient(180deg,#f8fbff,#fff)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.video-frame{border:1px solid #d3e1f2;border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 24px 65px rgba(25,76,144,.14)}.video-frame video{display:block;width:100%;height:auto;background:#0d2038}
.video-frame__label{display:flex;justify-content:space-between;gap:12px;padding:14px 18px;font-size:12px;color:#527294;border-bottom:1px solid #e3ebf5;letter-spacing:.06em}.video-frame__label span:first-child{font-weight:600;color:#1b4678}
.kv{display:grid;grid-template-columns:200px 1fr;gap:10px 24px;font-size:15px}.kv dt{color:#56728f;font-weight:600}.kv dd{margin:0;color:var(--ink2)}
.toc{position:sticky;top:110px;font-size:14px}.toc a{display:block;text-decoration:none;color:#53677d;padding:7px 0 7px 14px;border-left:2px solid var(--line2)}.toc a:hover{color:var(--blue);border-color:var(--blue)}
.docs-grid{display:grid;grid-template-columns:240px 1fr;gap:56px;align-items:start}
.legacy-strip{background:#f3f7fc;border-top:1px solid #e3ebf5;padding:12px 0;font-size:13px;color:#6b7c90;text-align:center}.legacy-strip a{color:#1a55aa}
@media(max-width:900px){.cards,.cards--2,.cards--4,.price-grid{grid-template-columns:1fr}.split,.docs-grid{grid-template-columns:1fr;gap:34px}.toc{position:static}.sec{padding:76px 0}.page-hero{padding:128px 0 56px}.kv{grid-template-columns:1fr}}

/* ===== Animation kit (use these so every page "shows" the API working) ===== */
/* 1) Typing code: <pre class="code typed" data-typed>...</pre> types itself when scrolled into view (js/site.js). */
.typed .caret{display:inline-block;width:8px;height:1.05em;background:#7db4ff;vertical-align:-2px;margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
/* 2) Request -> API -> response flow. Markup:
<div class="flow" data-flow>
  <div class="flow__node flow__node--req"><b>Your app</b><code>GET /v1/data?dataset=address&amp;lat=32.78&amp;lon=-96.80</code></div>
  <div class="flow__wire"><i></i></div>
  <div class="flow__node flow__node--api"><b>TrueFixR API</b><span>checks storm history</span></div>
  <div class="flow__wire"><i></i></div>
  <div class="flow__node flow__node--res"><b>You get back</b><pre>{ ...real sample JSON... }</pre></div>
</div> */
.flow{display:grid;grid-template-columns:1fr 70px 1fr 70px 1.2fr;align-items:center;gap:0;margin:28px 0}
.flow__node{border:1px solid var(--line2);border-radius:16px;background:#fff;padding:18px;box-shadow:0 10px 36px rgba(25,76,144,.07);opacity:.35;transform:translateY(8px);transition:opacity .5s,transform .5s,box-shadow .5s,border-color .5s}
.flow__node b{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:8px}.flow__node code,.flow__node span{font-size:13px;color:#36587c;word-break:break-word}
.flow__node pre{margin:0;font-size:12px;line-height:1.55;color:#244767;white-space:pre-wrap;font-family:ui-monospace,Menlo,monospace}
.flow__node.on{opacity:1;transform:none;border-color:#b9d0f5;box-shadow:0 18px 50px rgba(36,103,232,.16)}
.flow__wire{height:2px;background:#dbe6f6;position:relative;margin:0 6px;overflow:hidden;border-radius:2px}.flow__wire i{position:absolute;inset:0;width:34%;background:linear-gradient(90deg,transparent,var(--blue),transparent);transform:translateX(-120%)}
.flow__wire.on i{animation:wire 1s ease-in-out forwards}@keyframes wire{to{transform:translateX(320%)}}
/* 3) Count-up numbers / pulse dot / fade-in list */
.pulse{display:inline-block;width:9px;height:9px;border-radius:50%;background:#22a45d;box-shadow:0 0 0 0 rgba(34,164,93,.5);animation:pulse 1.8s infinite;margin-right:8px}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(34,164,93,0)}100%{box-shadow:0 0 0 0 rgba(34,164,93,0)}}
.stagger>*{opacity:0;transform:translateY(14px);transition:opacity .6s,transform .6s}.stagger.in>*{opacity:1;transform:none}.stagger.in>*:nth-child(2){transition-delay:.1s}.stagger.in>*:nth-child(3){transition-delay:.2s}.stagger.in>*:nth-child(4){transition-delay:.3s}.stagger.in>*:nth-child(5){transition-delay:.4s}.stagger.in>*:nth-child(6){transition-delay:.5s}
.chat{border:1px solid var(--line2);border-radius:18px;background:#fff;padding:22px;display:grid;gap:14px;box-shadow:0 14px 44px rgba(25,76,144,.08)}
.chat__msg{max-width:86%;padding:13px 16px;border-radius:16px;font-size:15px;line-height:1.55;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s}.chat__msg.on{opacity:1;transform:none}
.chat__msg--user{justify-self:end;background:var(--blue);color:#fff;border-bottom-right-radius:5px}.chat__msg--ai{background:var(--soft);color:#244767;border-bottom-left-radius:5px}
.chat__tool{justify-self:start;font-family:ui-monospace,Menlo,monospace;font-size:12.5px;color:#1654c0;background:#eaf1ff;border:1px dashed #b9d0f5;border-radius:10px;padding:8px 12px;opacity:0;transition:opacity .5s}.chat__tool.on{opacity:1}
@media(max-width:900px){.flow{grid-template-columns:1fr;gap:6px}.flow__wire{width:2px;height:34px;margin:2px auto}.flow__wire i{width:100%;height:34%;transform:translateY(-120%)}.flow__wire.on i{animation:wirev 1s ease-in-out forwards}@keyframes wirev{to{transform:translateY(320%)}}}
@media(prefers-reduced-motion:reduce){.flow__node,.chat__msg,.chat__tool,.stagger>*{opacity:1;transform:none;transition:none}.typed .caret,.pulse{animation:none}}

/* ===== Nav dropdowns inside the pill ===== */
.nav-links{overflow:visible}.dd{position:relative}
.dd__btn{background:none;border:0;color:#64748b;font:inherit;font-size:13px;font-weight:500;padding:7px 14px;border-radius:100px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all .15s;white-space:nowrap}
.dd__btn:hover,.dd:focus-within .dd__btn,.dd:hover .dd__btn{color:#0f2744;background:#f8fafc}
.dd__menu{position:absolute;top:calc(100% + 14px);left:50%;transform:translate(-50%,6px);min-width:270px;background:rgba(255,255,255,.98);backdrop-filter:blur(16px);border:1px solid rgba(0,0,0,.07);border-radius:20px;box-shadow:0 18px 50px rgba(15,39,68,.16);padding:10px;display:grid;gap:2px;opacity:0;visibility:hidden;transition:opacity .18s,transform .18s,visibility .18s;z-index:1000}
.dd__menu--wide{min-width:320px}
.dd:hover .dd__menu,.dd:focus-within .dd__menu{opacity:1;visibility:visible;transform:translate(-50%,0)}
.dd__menu:before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.nav-links .dd__menu a{display:block;padding:11px 14px;border-radius:14px;color:#102e50;white-space:normal}.nav-links .dd__menu a:hover{background:#f1f6ff}
.dd__menu b{display:block;font-size:14px;font-weight:600;color:#102e50}.dd__menu span{display:block;font-size:12.5px;color:#6b7c90;margin-top:2px;font-weight:400}
.footer__links--4{grid-template-columns:repeat(4,1fr)!important}
@media(max-width:900px){.footer__links--4{grid-template-columns:1fr 1fr!important}}

/* wider pill so more links fit */
.nav-wrap{max-width:1000px!important}
@media(max-width:1060px){.nav-links a,.dd__btn{padding:7px 10px;font-size:12.5px}}

.powered-by{display:inline-block;margin:14px 0 0;padding:5px 14px;border:1px solid #bcd3fa;border-radius:999px;background:rgba(255,255,255,.7);font:400 13px/1.4 "DM Sans",system-ui,sans-serif;color:#36587c}
.powered-by a,.powered-by-foot{color:#2467e8;font-weight:500;text-decoration:none}
.powered-by a:hover,.powered-by-foot:hover{text-decoration:underline}
.powered-by a:focus-visible,.powered-by-foot:focus-visible{outline:2px solid #2467e8;outline-offset:3px;border-radius:4px}
.powered-by--dark{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4);color:#dbe8ff;margin:-8px 0 26px}
.powered-by--dark a{color:#fff;text-decoration:underline}
.powered-by--strip{display:block;width:fit-content;margin:18px auto 0}
.powered-by--left{margin:0 0 16px}
.powered-by-foot{font-size:13px}
.cta .powered-by{font-size:13px;color:#dbe8ff}