/* ==========================================================================
   FactFlow — home page. Requires base.css.
   MOBILE-FIRST: base rules are the 320px layout; min-width queries build up.
   Breakpoints: 375 / 425 / 768 / 1024 / 1440.
   ========================================================================== */

/* ==========================================================================
   hero
   ========================================================================== */

.eyebrow{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--false);margin-bottom:var(--sp-3);
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;line-height:1.5;
}
@media(min-width:425px){ .eyebrow{font-size:11px;margin-bottom:var(--sp-4)} }
.dot{width:7px;height:7px;border-radius:50%;background:var(--false);animation:pulse 1.6s infinite;flex:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

.hero{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-5);
  padding-block:var(--sp-5) var(--sp-4);
  align-items:center;
}
@media(min-width:768px){ .hero{gap:34px;padding-block:40px var(--sp-5)} }
@media(min-width:1024px){
  .hero{grid-template-columns:repeat(2,minmax(0,1fr));gap:52px;padding-block:64px 40px}
}

h1{
  font-family:var(--serif);
  font-size:clamp(38px,10vw,74px);
  line-height:.98;letter-spacing:-.025em;font-weight:500;
}
h1 em{font-style:italic;color:var(--false)}

.lede{
  font-family:var(--serif);
  font-size:clamp(18px,4.6vw,22px);
  line-height:1.45;margin-top:var(--sp-4);
  max-width:26em;color:var(--ink-2);
}
.lede b{font-weight:600}

/* ==========================================================================
   product demo screen
   ========================================================================== */

.screen{
  background:var(--ink);border-radius:6px;
  padding:9px;min-width:0;max-width:100%;
  box-shadow:0 24px 60px -22px rgba(18,22,28,.55);
}
@media(min-width:425px){ .screen{padding:12px} }

.screen-bar{display:flex;align-items:center;gap:6px;padding:0 4px 10px}
.screen-bar i{width:8px;height:8px;border-radius:50%;background:#3A414C;display:block;flex:none}
@media(min-width:425px){ .screen-bar{gap:7px;padding-bottom:11px} .screen-bar i{width:9px;height:9px} }

.screen-url{
  margin-left:6px;font-family:var(--mono);font-size:9px;color:#7C838F;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
@media(min-width:425px){ .screen-url{margin-left:8px;font-size:10px} }

/* 9px is the floor here — it reads as browser chrome, but must stay legible */
.live-tag{
  margin-left:auto;font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:#E8544F;
  border:1px solid #6A2B2B;padding:2px 5px;border-radius:2px;white-space:nowrap;flex:none;
}
@media(min-width:425px){ .live-tag{letter-spacing:.1em;padding:2px 7px} }

.stage{
  background:#0A0D11;border-radius:3px;
  padding:13px;display:flex;flex-direction:column;gap:9px;
}
@media(min-width:768px){ .stage{padding:16px;min-height:236px} }

.speech{
  font-family:var(--serif);font-size:14px;color:#C9CDD4;line-height:1.5;
  padding-bottom:10px;border-bottom:1px solid #232A33;
}
@media(min-width:425px){ .speech{font-size:15px} }
.speech u{text-decoration:none;border-bottom:2px solid var(--false);padding-bottom:1px}
.speech .who{
  display:block;font-family:var(--mono);font-size:9px;letter-spacing:.1em;
  color:#5F6772;text-transform:uppercase;margin-bottom:7px;
}

.card{
  background:#151A21;border-left:3px solid #2C333D;border-radius:2px;
  padding:11px 12px;opacity:0;transform:translateY(8px);
}
.card.in{animation:slidein .45s ease forwards}
@keyframes slidein{to{opacity:1;transform:none}}
.card .claim{font-family:var(--serif);font-size:13.5px;color:#E4E7EB;line-height:1.4}
@media(min-width:425px){ .card{padding:11px 13px} .card .claim{font-size:14px} }
.card .meta{font-family:var(--mono);font-size:10px;color:#727A85;margin-top:7px;line-height:1.5}

.vd{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;
  padding:3px 8px;border-radius:2px;margin-bottom:8px;
}
.vd svg{width:11px;height:11px;flex:none}
.vd.checking{background:#1B2733;color:#7FB0DE}
.vd.f{background:var(--false);color:#fff}
.vd.t{background:var(--true);color:#fff}
.vd.m{background:var(--misl);color:#fff}
.card.stamped{border-left-color:var(--false)}
.stampfx{animation:stamp .4s cubic-bezier(.2,1.6,.4,1)}
@keyframes stamp{0%{transform:scale(1.35);opacity:.4}60%{transform:scale(.97)}100%{transform:scale(1)}}

.src{
  font-family:var(--mono);font-size:10px;color:#8A929D;line-height:1.6;
  margin-top:6px;padding-top:6px;border-top:1px solid #232A33;overflow-wrap:anywhere;
}
.src b{color:#C9CDD4;font-weight:500}

/* ==========================================================================
   signup blocks
   ========================================================================== */

.offer{
  background:var(--ink);color:var(--paper);border-radius:4px;
  padding:var(--sp-4) var(--sp-3);
  margin-top:var(--sp-3);
}
@media(min-width:425px){ .offer{padding:28px 24px;margin-top:var(--sp-4)} }
@media(min-width:1024px){ .offer{padding:38px 40px} }

.offer h3{
  font-family:var(--serif);font-size:clamp(23px,5.6vw,30px);
  font-weight:500;letter-spacing:-.02em;line-height:1.15;
}
.offer p{color:#A8AEB7;margin-top:12px;font-size:15px;max-width:34em}
@media(min-width:768px){ .offer p{font-size:16px} }
.offer .terms{
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:#7C838F;
  margin-top:var(--sp-3);text-transform:uppercase;line-height:1.6;
}
@media(min-width:425px){ .offer .terms{font-size:11px} }

/* form: stacked on phones, inline from 425px up */
.form{
  display:flex;flex-direction:column;gap:9px;
  margin-top:var(--sp-4);width:100%;max-width:470px;
}
@media(min-width:425px){ .form{flex-direction:row;align-items:stretch} }

.form input{
  flex:1;min-width:0;width:100%;
  background:#1E242D;border:1px solid #333B46;border-radius:2px;
  padding:13px 15px;color:#fff;font-family:var(--sans);
  font-size:16px; /* 16px minimum — anything smaller triggers iOS focus zoom */
  min-height:var(--tap);
}
.form input::placeholder{color:#6E7681}
.form input:focus{outline:2px solid #4F5B6B}
.form input[aria-invalid="true"]{border-color:var(--false)}

.form button{
  background:var(--false);color:#fff;border:0;border-radius:2px;
  padding:13px 24px;min-height:var(--tap);
  font-family:var(--sans);font-weight:600;font-size:15px;
  cursor:pointer;white-space:nowrap;
}
.form button:hover{background:#9C1E24}

.done{font-family:var(--mono);font-size:13px;color:#7FD8A0;margin-top:14px;display:none}
.err{font-family:var(--mono);font-size:13px;color:var(--false);margin-top:14px;display:none}
.form button:disabled{opacity:.6;cursor:wait}
.form button.busy::after{
  content:"";display:inline-block;width:12px;height:12px;margin-left:8px;
  vertical-align:-1px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:ffspin .7s linear infinite;
}
@keyframes ffspin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){ .form button.busy::after{animation:none} }

/* ==========================================================================
   sections and type
   ========================================================================== */

section{padding-block:var(--sp-6);border-top:1px solid var(--rule)}
@media(min-width:768px){ section{padding-block:var(--sp-7)} }

.sec-label{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:var(--sp-4);
}
@media(min-width:425px){ .sec-label{font-size:11px;margin-bottom:26px} }

h2{
  font-family:var(--serif);
  font-size:clamp(26px,6.4vw,48px);
  line-height:1.08;letter-spacing:-.02em;font-weight:500;max-width:17em;
}
h2 em{font-style:italic;color:var(--false)}

.sub{
  font-size:clamp(15px,3.6vw,18px);color:var(--ink-2);
  margin-top:var(--sp-3);max-width:var(--measure);
}
@media(min-width:768px){ .sub{margin-top:18px} }

.sub-serif{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(17px,4.2vw,20px);color:var(--ink-2);
  margin-top:var(--sp-3);max-width:36em;
}

.gap-line{
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(22px,5.6vw,40px);color:var(--false);
  margin-top:var(--sp-5);letter-spacing:-.01em;line-height:1.2;
}

.verdict-line{
  font-family:var(--mono);font-size:clamp(14px,3.4vw,20px);
  margin-top:var(--sp-3);color:var(--ink);line-height:1.7;
}
.vx{
  display:inline-block;background:var(--false);color:#fff;font-weight:600;
  letter-spacing:.08em;padding:5px 12px;border-radius:2px;margin-right:6px;
}

/* ==========================================================================
   card grids — all stack on mobile, pair up on tablet, full width on desktop
   ========================================================================== */

.grid3{
  display:grid;grid-template-columns:1fr;
  margin-top:var(--sp-5);
  border:1px solid var(--rule);background:var(--paper-2);
}
.grid3>div{padding:var(--sp-4) var(--sp-3);border-bottom:1px solid var(--rule)}
.grid3>div:last-child{border-bottom:0}
@media(min-width:425px){ .grid3>div{padding:22px 20px} }
@media(min-width:1024px){
  .grid3{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:38px}
  .grid3>div{padding:26px;border-bottom:0;border-right:1px solid var(--rule)}
  .grid3>div:last-child{border-right:0}
}
.nope{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--false);
  text-transform:uppercase;margin-bottom:var(--sp-2);
}
.grid3 h4{font-family:var(--serif);font-size:clamp(20px,4.6vw,22px);font-weight:500;margin-bottom:9px}
.grid3 p{font-size:15px;color:var(--muted);line-height:1.55}

.diff{
  display:grid;grid-template-columns:1fr;
  margin-top:var(--sp-5);
  border:1px solid var(--rule);background:var(--paper-2);
}
.diff>div{padding:18px var(--sp-3);border-bottom:1px solid var(--rule)}
.diff>div:last-child{border-bottom:0}
@media(min-width:425px){
  .diff{grid-template-columns:repeat(2,minmax(0,1fr))}
  .diff>div{padding:20px 18px;border-right:1px solid var(--rule)}
  .diff>div:nth-child(2n){border-right:0}
}
@media(min-width:1024px){
  .diff{grid-template-columns:repeat(5,minmax(0,1fr));margin-top:38px}
  .diff>div{border-bottom:0;border-right:1px solid var(--rule)}
  .diff>div:nth-child(2n){border-right:1px solid var(--rule)}
  .diff>div:last-child{border-right:0}
}
.diff b{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--true);display:block;margin-bottom:8px;
}
.diff p{font-size:13.5px;color:var(--muted);line-height:1.5}

.sources{
  display:grid;grid-template-columns:1fr;
  margin-top:var(--sp-5);
  border:1px solid var(--rule);background:var(--paper-2);
}
.sources div{padding:12px;border-bottom:1px solid var(--rule)}
.sources div:last-child{border-bottom:0}
@media(min-width:375px){
  .sources{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sources div{border-right:1px solid var(--rule)}
  .sources div:nth-child(2n){border-right:0}
}
@media(min-width:768px){
  .sources{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sources div{border-right:1px solid var(--rule)}
  .sources div:nth-child(2n){border-right:1px solid var(--rule)}
  .sources div:nth-child(3n){border-right:0}
}
@media(min-width:1024px){
  .sources{grid-template-columns:repeat(6,minmax(0,1fr));margin-top:34px}
  .sources div{padding:13px 12px;border-right:1px solid var(--rule)}
  .sources div:nth-child(2n),.sources div:nth-child(3n){border-right:1px solid var(--rule)}
  .sources div:nth-child(6n){border-right:0}
}
.sources b{font-family:var(--mono);font-size:12px;font-weight:600;display:block}
.sources span{font-size:11px;color:var(--muted);line-height:1.3;display:block;margin-top:3px}
.more{font-family:var(--mono);font-size:12px;color:var(--muted);background:var(--paper)}

.stat{
  display:grid;grid-template-columns:1fr;
  margin-top:var(--sp-5);
  border:1px solid var(--rule);background:var(--paper-2);
}
.stat div{padding:20px var(--sp-3);border-bottom:1px solid var(--rule)}
.stat div:last-child{border-bottom:0}
@media(min-width:425px){ .stat div{padding:22px 20px} }
@media(min-width:768px){
  .stat{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:34px}
  .stat div{padding:24px 26px;border-bottom:0;border-right:1px solid var(--rule)}
  .stat div:last-child{border-right:0}
}
.stat b{
  font-family:var(--serif);font-size:clamp(34px,8vw,44px);font-weight:500;
  line-height:1;display:block;letter-spacing:-.02em;
}
.stat span{
  font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);display:block;margin-top:9px;line-height:1.5;
}

/* ==========================================================================
   dark band, pull quote, precedent
   ========================================================================== */

.dark{background:var(--ink);color:var(--paper);border-top:0}
.dark .sec-label{color:#7C838F}
.pull{
  font-family:var(--serif);font-size:clamp(20px,5.2vw,38px);
  line-height:1.25;font-style:italic;max-width:22em;margin-inline:auto;text-align:center;
}
.pull-src{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:#7C838F;text-align:center;margin-top:var(--sp-3);line-height:1.6;
}
.dark .center-note{text-align:center;max-width:34em;margin:var(--sp-5) auto 0;color:#A8AEB7}

.bloomberg{
  font-family:var(--serif);font-size:clamp(19px,4.8vw,34px);
  line-height:1.3;font-style:italic;max-width:24em;
}
.bloomberg b{font-style:normal;font-weight:600}

/* ==========================================================================
   timeline
   ========================================================================== */

.tl{
  display:grid;grid-template-columns:1fr;
  margin-top:var(--sp-5);border-top:2px solid var(--ink);
}
.tl div{padding:18px 0;border-bottom:1px solid var(--rule)}
.tl div:last-child{border-bottom:0}
@media(min-width:768px){
  .tl{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:34px}
  .tl div{padding:20px 22px 0 0;border-bottom:0}
}
.tl b{
  font-family:var(--mono);font-size:11px;letter-spacing:.11em;color:var(--false);
  display:block;margin-bottom:7px;
}
.tl h5{font-family:var(--serif);font-size:clamp(19px,4.4vw,21px);font-weight:500;margin-bottom:5px}
.tl p{font-size:14px;color:var(--muted);line-height:1.6}

/* ==========================================================================
   inline legal links
   ========================================================================== */

.legal-links{
  font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin-top:var(--sp-3);
}
.legal-links a{
  color:var(--muted);text-decoration:none;border-bottom:1px solid var(--rule);
  display:inline-block;padding:4px 0;
}
.legal-links a:hover{color:var(--ink)}

/* ==========================================================================
   preference adaptations
   ========================================================================== */

@media(hover:none){
  .form button{padding:15px 24px}
}

@media(prefers-reduced-motion:reduce){
  .card{opacity:1;transform:none}
}