/* Articles — gallery cards (reuse .story-card) + article-detail extras.
   Reuses assets.css tokens and stories.css story-card/prose/cta primitives. */

/* --- Gallery cards: the same framed blueprint window + sticker tilt as the
   story cards. Articles have no stat numbers, so the framed window holds the
   article headline as its bold hook (where stats sit on story cards). --- */
.article-grid { align-items: start; }

.ac-hook { padding: 30px 26px 36px; }
.ac-hook h3 {
  font-family: 'Saira', sans-serif;
  font-weight: 800;
  font-size: clamp(22px, 2.7vw, 31px);
  text-transform: uppercase;
  line-height: 1.1;
  letter-spacing: -0.6px;
  color: #fff;
  margin: 0;
  text-wrap: balance;
  transition: color .26s ease;
}
.story-card:hover .ac-hook h3 { color: var(--sky); }

/* --- Empty gallery state --- */
.gallery-empty {
  text-align: center;
  padding: 48px 0 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.gallery-empty p { max-width: 42ch; color: var(--soft); margin: 0; }

/* --- Article detail: wider reading column + smaller hero headline --- */
.article-body .prose { max-width: 860px; }
/* Breathing room between the hero and the dashed section divider that sits
   at the top of the body section. */
.article-hero { padding-bottom: 48px; }
.article-hero h1 {
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.06;
  letter-spacing: -0.8px;
  max-width: 840px;
}
/* Author byline (E-E-A-T) under the hero dek. */
.article-byline { margin-top: 16px; color: var(--faint); font-size: .95rem; }
.article-byline a { color: var(--sky); text-decoration: none; }
.article-byline a:hover { text-decoration: underline; }
/* Subheadings clearly smaller than the H1 (was ~38px, close to the H1). */
.article-body .prose h2 { font-size: clamp(20px, 2.4vw, 27px); }
.article-body .prose > :first-child { margin-top: 0; }
/* Lists: the global *{margin:0;padding:0} reset zeroes list spacing, so a
   paragraph after a list blended into the bullets. Restore symmetric gaps. */
.article-body .prose ul { margin: 20px 0; padding-left: 1.3em; }
.article-body .prose li { font-size: 17px; line-height: 1.7; color: var(--soft); margin-bottom: 10px; }
.article-body .prose li:last-child { margin-bottom: 0; }
.article-body .prose li strong { color: #fff; font-weight: 600; }
.article-fig { margin: 28px 0; }
.article-fig img { width: 100%; height: auto; border-radius: 12px; display: block; }
.article-body blockquote {
  margin: 28px 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--sky);
  font-family: 'Saira', sans-serif;
  font-size: 1.25rem;
  line-height: 1.45;
  color: #fff;
}

/* H3 subheadings (FAQ blocks etc.) — global reset zeroes margins, restore. */
.article-body .prose h3 {
  font-family: 'Saira', sans-serif;
  font-weight: 700;
  font-size: clamp(17px, 2vw, 21px);
  text-transform: uppercase;
  letter-spacing: -0.3px;
  color: #fff;
  margin: 28px 0 12px;
}

/* Data tables (price comparisons etc.) — horizontal scroll on narrow screens. */
.table-wrap { overflow-x: auto; margin: 22px 0; }
.article-body .prose table { width: 100%; border-collapse: collapse; font-size: 16px; min-width: 480px; }
.article-body .prose th,
.article-body .prose td { border: 1px solid rgba(255,255,255,.22); padding: 10px 14px; text-align: left; color: var(--soft); line-height: 1.5; }
.article-body .prose th { color: #fff; font-weight: 600; background: rgba(255,255,255,.06); font-family: 'Saira', sans-serif; letter-spacing: .2px; }
.article-body .prose td strong { color: #fff; font-weight: 600; }

/* Inline ROI calculator (article body). Reuses the offer page's pricing-panel
   language from cap/capabilities.css: 2px line-art border, Saira header bar
   with a white number badge, and a tinted highlight row for the key figures. */
.calc-hand { display: block; margin: 30px 0 -4px; }
.calc-hand .harrow { fill: none; stroke: currentColor; margin-left: 4px; }
.calc {
  margin: 14px 0 26px;
  border: 2px solid rgba(255,255,255,.48);
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  overflow: hidden;
}
.calc-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 18px;
  border-bottom: 2px solid rgba(255,255,255,.28);
  font-family: 'Saira', sans-serif;
  font-weight: 800;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: #fff;
}
.calc-head .sn {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #fff;
  color: var(--bg-deep);
  font-family: 'Saira', sans-serif;
  font-weight: 800;
  font-size: 13px;
  display: grid;
  place-items: center;
}
.calc-head-2 { border-top: 2px solid rgba(255,255,255,.28); border-bottom: none; background: rgba(255,255,255,.06); }

.calc-body { padding: 2px 18px 12px; }
.calc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 14px 0;
  border-bottom: 1px dashed rgba(255,255,255,.2);
}
.calc-row:last-child { border-bottom: none; }
.calc-row label { font-size: 15.5px; color: var(--soft); line-height: 1.45; flex: 1 1 220px; }
.calc-input { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.calc-input input {
  width: 98px;
  font-family: 'Saira', sans-serif;
  font-weight: 800;
  font-size: 20px;
  color: #fff;
  background: rgba(255,255,255,.07);
  border: 2px solid rgba(255,255,255,.4);
  border-radius: 10px;
  padding: 7px 11px;
  text-align: right;
  transition: border-color .18s ease, background .18s ease;
}
.calc-input input:hover { border-color: rgba(255,255,255,.62); }
.calc-input input:focus { outline: none; border-color: var(--sky); background: rgba(155,212,242,.14); }
/* Spinners fight the right-aligned Saira numerals — drop them. */
.calc-input input::-webkit-outer-spin-button,
.calc-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc-input input { -moz-appearance: textfield; appearance: textfield; }
.calc-unit {
  font-family: 'Saira', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .3px;
  color: var(--faint);
  white-space: nowrap;
  min-width: 44px;
}

/* No bottom padding: the last highlight row sits flush on the panel edge. */
.calc-out { padding: 4px 18px 0; }
.calc-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,.13);
  font-size: 15.5px;
  color: #D6DEEF;
}
.calc-line:last-child { border-bottom: none; }
.calc-line b { font-family: 'Saira', sans-serif; font-weight: 800; font-size: 19px; color: #fff; white-space: nowrap; }
/* Key figures: same tint the offer table gives its "YOU SAVE" row. */
.calc-hl {
  margin: 0 -18px;
  padding: 12px 18px;
  background: rgba(199,236,255,.12);
  border-bottom-color: rgba(255,255,255,.22);
}
.calc-hl span { color: var(--sky); font-weight: 600; }
.calc-hl b { font-size: 24px; }

@media (max-width: 600px) {
  .ac-hook { padding: 24px 20px 28px; }
  .calc-head { padding: 12px 15px; font-size: 14px; }
  .calc-body { padding: 2px 15px 10px; }
  .calc-out { padding: 4px 15px 0; }
  .calc-row { gap: 8px; padding: 13px 0; }
  .calc-row label { flex: 1 1 100%; }
  .calc-input { width: 100%; }
  .calc-input input { flex: 1 1 auto; width: auto; }
  .calc-hl { margin: 0 -15px; padding: 12px 15px; }
  .calc-line b { font-size: 17px; }
  .calc-hl b { font-size: 21px; }
}