/* ================================================================
   FEATURES
================================================================ */
/* ============================================================
   FEATURES PAGE — sections-specific styles
   Inherits: tokens.css + landing.css + pricing.css (nav, btn, faq, finalcta, footer, role)
============================================================ */

/* ============================================================
   v3 — Wynde-inspired varied-layout sections
   (.fhero2, .fsay, .fstrip, .fbig, .ftwo, .fpanel, .fthree, .fstat)
   Mockup internals (.ft__shot--*, .ft__panel-*, .ft__ocrplate, etc.)
   are reused unchanged from the v1 styles below.
============================================================ */

/* ----- 01 · SPLIT HERO with layered mockups ----- */
.fhero2 {
  position: relative;
  padding: 80px 0 100px;
  overflow: hidden;
  background: var(--bg-app);
}
.fhero2__bg { position: absolute; inset: 0; pointer-events: none; }
.fhero2__grid {
  position: absolute; inset: 0;
  background-image: url("../assets/hero/bg-hero.png");
  background-image: -webkit-image-set(
    url("../assets/hero/bg-hero.avif") type("image/avif"),
    url("../assets/hero/bg-hero.webp") type("image/webp"),
    url("../assets/hero/bg-hero.png")  type("image/png")
  );
  background-image: image-set(
    url("../assets/hero/bg-hero.avif") type("image/avif"),
    url("../assets/hero/bg-hero.webp") type("image/webp"),
    url("../assets/hero/bg-hero.png")  type("image/png")
  );
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  opacity: 0.85;
  mask-image: radial-gradient(ellipse 95% 85% at 50% 35%, black 35%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 95% 85% at 50% 35%, black 35%, transparent 85%);
}
@media (max-width: 768px) {
  .fhero2__grid {
    background-image: url("../assets/hero/bg-hero-mobile.png");
    background-image: -webkit-image-set(
      url("../assets/hero/bg-hero-mobile.avif") type("image/avif"),
      url("../assets/hero/bg-hero-mobile.webp") type("image/webp"),
      url("../assets/hero/bg-hero-mobile.png")  type("image/png")
    );
    background-image: image-set(
      url("../assets/hero/bg-hero-mobile.avif") type("image/avif"),
      url("../assets/hero/bg-hero-mobile.webp") type("image/webp"),
      url("../assets/hero/bg-hero-mobile.png")  type("image/png")
    );
  }
}
.fhero2__halo {
  position: absolute; border-radius: 50%;
  filter: blur(110px);
  opacity: 0.32;
}
.fhero2__halo--cyan {
  width: 520px; height: 520px;
  background: var(--blue-300);
  top: -200px; left: -140px;
}
.fhero2__halo--orange {
  width: 460px; height: 460px;
  background: var(--orange-300);
  top: 40px; right: -120px;
}

.fhero2__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 56px;
  align-items: center;
}
.fhero2__copy { max-width: 560px; }
.fhero2__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body);
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--blue-700);
  background: var(--blue-50);
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--blue-200);
  margin-bottom: 22px;
}
@media (max-width: 640px) {
  .fhero2__eyebrow {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 10px 18px;
  }
}
.fhero2__eyebrow__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue-500);
  box-shadow: 0 0 0 3px rgba(0,181,226,0.2);
}
.fhero2__head {
  font-family: var(--font-display);
  font-size: clamp(38px, 4.8vw, 64px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--fg-strong);
  margin: 0 0 22px;
  text-wrap: balance;
}
.fhero2__head__hot {
  background: linear-gradient(135deg, #00B5E2 0%, #FF8A1F 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  font-style: italic;
  font-weight: 700;
  padding-bottom: 0.2em;
  padding-right: 0.4em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.fhero2__sub {
  font-size: 17px;
  line-height: 1.6;
  color: var(--fg-muted);
  max-width: 500px;
  margin: 0 0 28px;
  text-wrap: pretty;
}
.fhero2__ctas {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-bottom: 14px;
}
.fhero2__micro {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--fg-muted); font-size: 13px;
  margin: 0; text-align: left;
}
@media (max-width: 640px) {
  .fhero2__micro { align-items: flex-start; }
  .fhero2__copy--centered .fhero2__micro { display: flex; align-items: center; justify-content: center; text-align: center; }
  .fhero2__copy--centered .fhero2__micro .micro__dot { display: none; }
}

/* layered mockup stack */
.fhero2__stack {
  position: relative;
  width: 100%;
  min-height: 440px;
  perspective: 1200px;
}
.fhero2__card {
  position: absolute;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  transition: transform 280ms var(--ease-out);
}
.fhero2__card--plan {
  top: 8px; right: 0;
  width: 78%;
  padding: 14px;
  transform: rotate(1.5deg);
  z-index: 1;
}
.fhero2__card--plan:hover { transform: rotate(0.5deg) translateY(-4px); }
.fhero2__card__hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 4px 10px;
  margin-bottom: 4px;
  border-bottom: 1px dashed var(--border-subtle);
}
.fhero2__card__crumb {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--fg-default);
}
.fhero2__card__pill {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--blue-700);
  background: var(--blue-50);
  border: 1px solid var(--blue-200);
  padding: 2px 8px;
  border-radius: 999px;
}
.fhero2__card--plan svg { display: block; width: 100%; height: auto; border-radius: 8px; }
.fhero2__card__ft {
  display: flex; gap: 12px; padding: 10px 4px 0;
  border-top: 1px dashed var(--border-subtle);
  margin-top: 4px;
}
.fhero2__legend {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--fg-muted);
}
.fhero2__legend i {
  width: 8px; height: 8px; border-radius: 50%;
}

.fhero2__card--wo {
  bottom: 12px; right: 24px;
  width: 64%;
  padding: 16px 18px;
  transform: rotate(-2deg);
  z-index: 3;
  box-shadow: 0 24px 48px rgba(15,22,32,0.18), 0 8px 16px rgba(15,22,32,0.08);
}
.fhero2__card--wo:hover { transform: rotate(-0.5deg) translateY(-4px); }
.fhero2__wo__eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--fg-muted);
  margin-bottom: 6px;
}
.fhero2__wo__title {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--fg-strong);
  margin: 0 0 10px;
  line-height: 1.2;
}
.fhero2__wo__meta {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 12px;
}
.fhero2__wo__chip {
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--neutral-100);
  color: var(--fg-default);
  border: 1px solid var(--border-default);
}
.fhero2__wo__chip--orange {
  background: var(--orange-50);
  color: var(--orange-700);
  border-color: var(--orange-200);
}
.fhero2__wo__row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11.5px;
  padding: 6px 0;
  border-top: 1px dashed var(--border-subtle);
  gap: 12px;
}
.fhero2__wo__row:first-of-type { border-top: 0; }
.fhero2__wo__lbl {
  color: var(--fg-muted);
  font-weight: 600;
}
.fhero2__wo__val {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600;
  color: var(--fg-strong);
}
.fhero2__wo__val--mono {
  font-family: var(--font-mono);
  font-size: 11px;
}
.fhero2__wo__val--link {
  color: var(--blue-700);
  font-family: var(--font-mono);
  font-size: 11px;
}
.fhero2__av {
  width: 18px; height: 18px;
  border-radius: 50%;
  color: white;
  font-size: 8px;
  font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  margin-right: -6px;
  border: 1.5px solid #fff;
}

.fhero2__card--dash {
  top: 48px; left: -28px;
  width: 38%;
  padding: 14px 16px;
  transform: rotate(-4deg);
  z-index: 2;
  background: linear-gradient(180deg, var(--bg-surface), var(--neutral-25));
  display: grid;
  gap: 8px;
}
.fhero2__card--dash:hover { transform: rotate(-1.5deg) translateY(-4px); }
.fhero2__dash__lbl {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-muted);
}
.fhero2__dash__num {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--fg-strong);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.fhero2__dash__bars {
  display: flex; align-items: flex-end; gap: 4px;
  height: 44px;
  margin: 2px 0;
}
.fhero2__dash__bars span {
  flex: 1;
  height: var(--h);
  background: var(--c);
  border-radius: 3px 3px 0 0;
  opacity: 0.9;
}
.fhero2__dash__badge {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  color: var(--success);
  background: var(--success-bg);
  border: 1px solid rgba(22,163,74,0.3);
  padding: 2px 7px;
  border-radius: 999px;
  width: fit-content;
}

@media (max-width: 960px) {
  .fhero2__inner { grid-template-columns: 1fr; gap: 48px; }
  .fhero2__stack { min-height: 360px; max-width: 480px; margin: 0 auto; }
}
@media (max-width: 720px) {
  .fhero2 { padding: 48px 0 36px; }
  .fhero2__stack { min-height: 320px; }
  .fhero2__card--plan { width: 86%; }
  .fhero2__card--wo { width: 72%; right: 8px; }
  .fhero2__card--dash { width: 44%; left: -8px; }
}

/* ----- 02 · STATEMENT band ----- */
.fsay {
  padding: 96px 0 72px;
  background: var(--bg-app);
  border-top: 1px solid var(--border-subtle);
}
.fsay .container {
  max-width: 1440px;
}
.fsay__head {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--fg-strong);
  max-width: 1100px;
  margin: 0 0 56px;
  text-wrap: balance;
}
.fsay__jump-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin: 0 0 12px;
}
.fsay__jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid var(--border-subtle);
  padding-top: 28px;
}
.fsay__jump a {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-default);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  padding: 7px 14px 7px 10px;
  border-radius: 999px;
  text-decoration: none;
  transition: color 160ms var(--ease-out), background 160ms var(--ease-out), border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
  box-shadow: 0 1px 2px rgba(15,22,32,0.05);
}
.fsay__jump a span {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--fg-subtle);
  background: var(--neutral-100);
  border: 1px solid var(--border-subtle);
  padding: 1px 5px;
  border-radius: 4px;
  min-width: 22px; text-align: center;
  transition: color 160ms var(--ease-out), background 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.fsay__jump a:hover {
  color: var(--blue-700);
  background: var(--blue-50);
  border-color: var(--blue-200);
  box-shadow: 0 2px 8px rgba(0,181,226,0.12);
}
.fsay__jump a:hover span {
  color: var(--blue-600);
  border-color: var(--blue-200);
  background: white;
}

@media (max-width: 640px) {
  .fsay {
    padding: 48px 0 40px;
  }
  .fsay__head {
    margin: 0 0 32px;
  }
}

/* ----- 03 · INDUSTRIES strip ----- */
.fstrip {
  padding: 32px 0;
  background: var(--bg-app);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.fstrip .container {
  display: flex; align-items: center; gap: 28px;
  flex-wrap: wrap;
}
.fstrip__lbl {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg-muted);
}
.fstrip__list {
  display: flex; flex-wrap: wrap; gap: 28px;
  list-style: none; padding: 0; margin: 0;
}
.fstrip__list li {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--neutral-400);
  letter-spacing: -0.01em;
  transition: color 180ms var(--ease-out);
}
.fstrip__list li:hover { color: var(--fg-strong); }

/* ----- shared "ft2" numbered eyebrow tag ----- */
.ft2__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body);
  font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--blue-700);
  background: transparent;
  border: 1.5px solid var(--blue-300);
  padding: 5px 12px 5px 5px;
  border-radius: 999px;
  margin-bottom: 22px;
  width: fit-content;
}
.ft2__eyebrow__no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 800;
  color: white;
  background: var(--blue-500);
  border-radius: 999px;
  letter-spacing: 0;
}
.ft2__eyebrow--orange {
  color: var(--orange-700);
  border-color: var(--orange-300);
}
.ft2__eyebrow--orange .ft2__eyebrow__no { background: var(--orange-500); }
.ft2__eyebrow--invert {
  color: rgba(255,255,255,0.9);
  border-color: rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.06);
}
.ft2__eyebrow--invert .ft2__eyebrow__no { background: rgba(255,255,255,0.95); color: var(--blue-700); }
.ft2__eyebrow--invert-orange .ft2__eyebrow__no { color: var(--orange-700); }

/* ----- 04 · FBIG single feature: headline + checklist + mockup below ----- */
.fbig {
  padding: 100px 0 80px;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-subtle);
}
.fbig__head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 64px;
  align-items: start;
  margin-bottom: 56px;
}
.fbig__copy { max-width: 560px; }
.fbig__title {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.028em;
  color: var(--fg-strong);
  margin: 0 0 22px;
  text-wrap: balance;
}
.fbig__title__hot {
  background: linear-gradient(135deg, #00B5E2 0%, #FF8A1F 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  font-style: italic;
  font-weight: 700;
  padding-bottom: 0.2em;
  padding-right: 0.4em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.fbig__body { display: grid; gap: 14px; }
.fbig__body p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--fg-default);
  margin: 0;
  text-wrap: pretty;
}
.fbig__body strong { color: var(--fg-strong); font-weight: 700; }

.fbig__checks {
  display: grid;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  align-self: end;
}
.fbig__checks li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: center;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--fg-default);
  padding: 4px 0;
  border-bottom: 1px dashed var(--border-subtle);
  padding-bottom: 10px;
}
.fbig__checks li:last-child { border-bottom: 0; }
.fbig__tick {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--blue-50);
  border: 1.5px solid var(--blue-300);
  position: relative;
  flex-shrink: 0;
}
.fbig__tick::after {
  content: "";
  position: absolute; left: 6px; top: 7px;
  width: 8px; height: 4px;
  border-left: 2px solid var(--blue-700);
  border-bottom: 2px solid var(--blue-700);
  transform: rotate(-45deg);
}

.fbig__visual {
  margin: 0;
  display: grid; gap: 14px;
  justify-items: center;
}
.fbig__visual figcaption {
  font-size: 13px;
  color: var(--fg-muted);
  text-align: center;
  font-style: italic;
}

/* big plan mockup */
.ft__shot--planbig {
  padding: 28px;
  background: linear-gradient(180deg, var(--neutral-25), var(--bg-app));
}

@media (max-width: 880px) {
  .fbig__head { grid-template-columns: 1fr; gap: 32px; }
  .fbig { padding: 72px 0 56px; }
}

/* ----- 05/09 · FTWO 2-up card grid ----- */
.ftwo {
  padding: 80px 0;
  background: var(--bg-app);
}
.ftwo__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}
.ftwo__card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 20px;
  padding: 24px 24px 28px;
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-rows: 280px auto;
  align-content: start;
  gap: 22px;
  transition: box-shadow 280ms var(--ease-out), transform 280ms var(--ease-out);
}
.ftwo__card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Feature section highlight — triggered via JS when a jump-nav link is clicked */
@keyframes feat-flash {
  0%       { box-shadow: 0 0 0 0   rgba(0,181,226,0),    var(--shadow-sm); }
  12%      { box-shadow: 0 0 0 7px rgba(0,181,226,0.50), var(--shadow-md); }
  28%      { box-shadow: 0 0 0 0   rgba(0,181,226,0),    var(--shadow-sm); }
  40%      { box-shadow: 0 0 0 7px rgba(0,181,226,0.38), var(--shadow-md); }
  56%      { box-shadow: 0 0 0 0   rgba(0,181,226,0),    var(--shadow-sm); }
  68%      { box-shadow: 0 0 0 7px rgba(0,181,226,0.24), var(--shadow-md); }
  100%     { box-shadow: 0 0 0 0   rgba(0,181,226,0),    var(--shadow-sm); }
}
@keyframes feat-flash-panel {
  0%   { filter: brightness(1)    saturate(1); }
  12%  { filter: brightness(1.10) saturate(1.15); }
  28%  { filter: brightness(1)    saturate(1); }
  40%  { filter: brightness(1.08) saturate(1.10); }
  56%  { filter: brightness(1)    saturate(1); }
  68%  { filter: brightness(1.05) saturate(1.06); }
  100% { filter: brightness(1)    saturate(1); }
}
.feat--highlight {
  animation: feat-flash 2400ms ease-out forwards;
}
.feat--highlight-panel {
  animation: feat-flash-panel 2400ms ease-out forwards;
}
.ftwo__visual {
  background: var(--neutral-25);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 280px;
}
.ftwo__visual > .ft__shot {
  width: 100%;
  height: 100%;
  border: 0;
  box-shadow: none;
  background: transparent;
  border-radius: 0;
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ftwo__visual .ft__shot--split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: stretch;
}
.ftwo__visual .ft__shot__photo { aspect-ratio: auto; height: 100%; }
.ftwo__visual .ft__shot--mobile {
  padding: 12px;
  background: linear-gradient(180deg, var(--neutral-50), var(--bg-app));
  border-radius: 10px;
  height: 100%;
  align-items: center;
}
.ftwo__visual .ft__phone { transform: scale(0.85); transform-origin: center; }
.ftwo__visual .ft__shot--ocr {
  height: 100%;
  align-items: center;
  background: linear-gradient(180deg, var(--neutral-50), var(--bg-app));
  border-radius: 10px;
}
.ftwo__visual .ft__shot--report {
  height: 100%;
  background: linear-gradient(180deg, var(--neutral-50), var(--bg-app));
  border-radius: 10px;
  padding: 16px;
}
.ftwo__copy { padding: 0 4px; }
.ftwo__copy .ft2__eyebrow { margin-bottom: 14px; }
.ftwo__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.022em;
  color: var(--fg-strong);
  line-height: 1.2;
  margin: 0 0 12px;
  text-wrap: balance;
}
.ftwo__copy p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fg-default);
  margin: 0 0 10px;
  text-wrap: pretty;
}
.ftwo__copy p:last-child { margin: 0; }
.ftwo__copy strong { color: var(--fg-strong); font-weight: 700; }

@media (max-width: 880px) {
  .ftwo__grid { grid-template-columns: 1fr; gap: 20px; }
  .ftwo { padding: 56px 0; }
}

/* ----- 06/08 · FPANEL big colored feature panel ----- */
.fpanel {
  padding: 24px 0;
  background: var(--bg-app);
}
.fpanel .container {
  position: relative;
  border-radius: 28px;
  padding: 64px 56px;
  overflow: hidden;
  isolation: isolate;
}
.fpanel--cyan .container {
  background:
    radial-gradient(ellipse 80% 60% at 80% 10%, rgba(255,138,31,0.22), transparent 60%),
    radial-gradient(ellipse 70% 60% at 0% 100%, rgba(0,181,226,0.5), transparent 60%),
    linear-gradient(135deg, #084A63 0%, #075E7C 50%, #0F1620 100%);
  color: #fff;
}
.fpanel--dark .container {
  background:
    radial-gradient(ellipse 70% 60% at 90% 90%, rgba(255,138,31,0.32), transparent 60%),
    radial-gradient(ellipse 60% 50% at 10% 10%, rgba(0,181,226,0.18), transparent 60%),
    linear-gradient(135deg, #1F2733 0%, #0F1620 70%);
  color: #fff;
}
.fpanel::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
}

.fpanel__layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 56px;
  align-items: center;
  z-index: 1;
}
.fpanel__layout--reverse { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
.fpanel__layout--reverse .fpanel__copy { order: 2; }
.fpanel__layout--reverse .fpanel__visual { order: 1; }

.fpanel__copy { max-width: 520px; }
.fpanel__title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.1vw, 40px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0 0 22px;
  text-wrap: balance;
}
.fpanel__copy p {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255,255,255,0.82);
  margin: 0 0 14px;
  text-wrap: pretty;
}
.fpanel__copy p:last-child { margin: 0; }
.fpanel__copy strong { color: #fff; font-weight: 700; }

.fpanel__visual {
  background: var(--bg-surface);
  border-radius: 16px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.35), 0 8px 20px rgba(0,0,0,0.2);
  overflow: hidden;
}
.fpanel__visual > .ft__shot {
  border: 0;
  box-shadow: none;
  border-radius: 16px;
}

@media (max-width: 880px) {
  .fpanel__layout, .fpanel__layout--reverse {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .fpanel__layout--reverse .fpanel__copy,
  .fpanel__layout--reverse .fpanel__visual { order: unset; }
  .fpanel .container { padding: 40px 28px; }
}

/* ----- 07 · FTHREE 3-up card grid ----- */
.fthree {
  padding: 80px 0;
  background: var(--bg-surface);
}
.fthree__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.fthree__card {
  background: var(--bg-app);
  border: 1px solid var(--border-default);
  border-radius: 18px;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 280ms var(--ease-out), transform 280ms var(--ease-out);
}
.fthree__card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.fthree__visual {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  padding: 0;
  height: 240px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.fthree__visual > .ft__shot {
  width: 100%;
  height: 100%;
  border: 0;
  box-shadow: none;
  background: transparent;
  border-radius: 0;
  padding: 16px;
  overflow: hidden;
}
.fthree__card .ft2__eyebrow {
  margin: 20px 20px 12px;
}
.fthree__title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--fg-strong);
  line-height: 1.2;
  margin: 0 20px 10px;
  text-wrap: balance;
}
.fthree__card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-default);
  margin: 0 20px 10px;
  text-wrap: pretty;
}
.fthree__card p:last-of-type { margin-bottom: 22px; }
.fthree__card strong { color: var(--fg-strong); font-weight: 700; }
.fthree__card code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--orange-700);
  background: var(--orange-50);
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid var(--orange-200);
}

@media (max-width: 1080px) {
  .fthree__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .fthree__grid { grid-template-columns: 1fr; }
  .fthree { padding: 56px 0; }
}

/* ----- 10 · FSTAT single feature with stat pills ----- */
.fstat {
  padding: 96px 0;
  background: var(--bg-app);
  border-top: 1px solid var(--border-subtle);
}
.fstat__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
.fstat__copy { max-width: 540px; }
.fstat__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--fg-strong);
  margin: 0 0 20px;
  text-wrap: balance;
}
.fstat__title__hot {
  background: linear-gradient(135deg, #00B5E2 0%, #FF8A1F 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  font-style: italic;
  font-weight: 700;
  padding-bottom: 0.2em;
  padding-right: 0.4em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.fstat__copy p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--fg-default);
  margin: 0 0 14px;
  text-wrap: pretty;
}
.fstat__copy strong { color: var(--fg-strong); font-weight: 700; }

.fstat__pills {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  border-top: 1px dashed var(--border-default);
  padding-top: 24px;
}
.fstat__pills li {
  display: grid;
  gap: 4px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  padding: 14px 16px;
}
.fstat__pills b {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--fg-strong);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.fstat__pills span {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
}

.fstat__visual > .ft__shot {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  padding: 18px;
}

@media (max-width: 880px) {
  .fstat__layout { grid-template-columns: 1fr; gap: 32px; }
  .fstat { padding: 64px 0; }
}

/* ============================================================
   v1 — legacy section styles (kept for ft__shot mockup internals)
============================================================ */


/* ============================================================
   FEATURES HERO
============================================================ */
.fhero {
  position: relative;
  padding: 72px 0 60px;
  overflow: hidden;
  background: var(--bg-app);
}
.fhero__bg { position: absolute; inset: 0; pointer-events: none; }
.fhero__grid {
  position: absolute; inset: 0;
  background-image: url("../assets/hero/bg-hero.png");
  background-image: -webkit-image-set(
    url("../assets/hero/bg-hero.avif") type("image/avif"),
    url("../assets/hero/bg-hero.webp") type("image/webp"),
    url("../assets/hero/bg-hero.png")  type("image/png")
  );
  background-image: image-set(
    url("../assets/hero/bg-hero.avif") type("image/avif"),
    url("../assets/hero/bg-hero.webp") type("image/webp"),
    url("../assets/hero/bg-hero.png")  type("image/png")
  );
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  opacity: 0.6;
  mask-image: radial-gradient(ellipse 95% 85% at 50% 35%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 95% 85% at 50% 35%, black 30%, transparent 80%);
}
@media (max-width: 768px) {
  .fhero__grid {
    background-image: url("../assets/hero/bg-hero-mobile.png");
    background-image: -webkit-image-set(
      url("../assets/hero/bg-hero-mobile.avif") type("image/avif"),
      url("../assets/hero/bg-hero-mobile.webp") type("image/webp"),
      url("../assets/hero/bg-hero-mobile.png")  type("image/png")
    );
    background-image: image-set(
      url("../assets/hero/bg-hero-mobile.avif") type("image/avif"),
      url("../assets/hero/bg-hero-mobile.webp") type("image/webp"),
      url("../assets/hero/bg-hero-mobile.png")  type("image/png")
    );
  }
}
.fhero__halo {
  position: absolute; border-radius: 50%;
  filter: blur(80px);
  opacity: 0.4;
}
.fhero__halo--cyan {
  width: 460px; height: 460px;
  background: var(--blue-300);
  top: -160px; left: -120px;
}
.fhero__halo--orange {
  width: 460px; height: 460px;
  background: var(--orange-300);
  bottom: -180px; right: -120px;
}
.fhero__inner {
  position: relative;
  text-align: center;
  max-width: 920px;
  padding-top: 24px;
}
.fhero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body);
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--blue-700);
  background: var(--blue-50);
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--blue-200);
  margin-bottom: 22px;
  white-space: nowrap;
}
.fhero__eyebrow__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue-500);
  box-shadow: 0 0 0 3px rgba(0,181,226,0.2);
}
.fhero__head {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.6vw, 56px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.028em;
  color: var(--fg-strong);
  margin: 0 0 22px;
  text-wrap: balance;
}
.fhero__head__hot {
  background: linear-gradient(135deg, #00B5E2 0%, #FF8A1F 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  font-style: italic;
  font-weight: 700;
  padding-bottom: 0.2em;
  padding-right: 0.4em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.fhero__sub {
  font-size: 18px;
  line-height: 1.6;
  color: var(--fg-muted);
  max-width: 720px;
  margin: 0 auto 28px;
  text-wrap: pretty;
}
.fhero__ctas {
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: center; margin-bottom: 14px;
}
.fhero__micro {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--fg-muted); font-size: 13px;
  margin: 0 auto;
  justify-content: center;
}
.fhero__jump {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px dashed var(--border-default);
}
.fhero__jump__label {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--fg-muted);
  margin-right: 6px;
}
.fhero__jump a {
  display: inline-flex;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg-default);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  padding: 5px 12px;
  border-radius: 999px;
  text-decoration: none;
  transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out), background 180ms var(--ease-out);
  white-space: nowrap;
}
.fhero__jump a:hover {
  color: var(--blue-700);
  border-color: var(--blue-300);
  background: var(--blue-50);
}

/* ============================================================
   FEATURE SECTIONS — alternating layout
============================================================ */
.ft {
  position: relative;
  padding: 80px 0;
  background: var(--bg-app);
  overflow: hidden;
}
.ft + .ft { border-top: 1px solid var(--border-subtle); }
.ft--orange { background: var(--bg-app); }
.ft--blue { background: var(--bg-surface); }

.ft__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 72px;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
}
.ft--reverse .ft__layout {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}
.ft--reverse .ft__copy { order: 2; }
.ft--reverse .ft__visual { order: 1; }
@media (max-width: 960px) {
  .ft__layout, .ft--reverse .ft__layout { grid-template-columns: 1fr; gap: 40px; }
  .ft--reverse .ft__copy, .ft--reverse .ft__visual { order: unset; }
}

.ft__copy { max-width: 520px; }
.ft__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body);
  font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--blue-700);
  background: transparent;
  border: 1.5px solid var(--blue-300);
  padding: 5px 12px 5px 5px;
  border-radius: 999px;
  margin-bottom: 22px;
  white-space: nowrap;
}
.ft__eyebrow__no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 800;
  color: white;
  background: var(--blue-500);
  border-radius: 999px;
  letter-spacing: 0;
}
.ft__eyebrow--orange {
  color: var(--orange-700);
  border-color: var(--orange-300);
}
.ft__eyebrow--orange .ft__eyebrow__no { background: var(--orange-500); }

.ft__head {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--fg-strong);
  margin: 0 0 20px;
  text-wrap: balance;
}
.ft__head__hot {
  background: linear-gradient(135deg, #00B5E2 0%, #FF8A1F 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  font-style: italic;
  font-weight: 700;
  padding-bottom: 0.2em;
  padding-right: 0.4em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.ft__body { display: grid; gap: 16px; }
.ft__body p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--fg-default);
  margin: 0;
  text-wrap: pretty;
}
.ft__body strong { color: var(--fg-strong); font-weight: 700; }
.ft__body code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--orange-700);
  background: var(--orange-50);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--orange-200);
}

.ft__visual {
  margin: 0;
  display: grid; gap: 14px;
  justify-items: center;
}
.ft__visual figcaption {
  font-size: 13px;
  color: var(--fg-muted);
  text-align: center;
  font-style: italic;
}
.ft__shot {
  width: 100%;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  padding: 20px;
  overflow: hidden;
}
.ft__shot > svg,
.ft__shot__photo > svg { display: block; width: 100%; height: auto; }

/* --- 2. Interactive plan SVG already covers most styling --- */

/* --- 3. Annotation tool: split photo + panel --- */
.ft__shot--split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 14px;
  padding: 16px;
}
.ft__shot__photo {
  border-radius: 10px;
  overflow: hidden;
  background: #1f2733;
  aspect-ratio: 6/5;
}
.ft__shot__panel {
  display: grid; gap: 8px;
  align-content: start;
}
.ft__panel-row {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: var(--neutral-50);
  border: 1px solid var(--border-default);
  border-radius: 8px;
}
.ft__panel-no {
  width: 24px; height: 24px;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
  color: white;
  background: var(--orange-500);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.ft__panel-row b { display: block; font-size: 12px; color: var(--fg-strong); font-weight: 700; }
.ft__panel-row span { display: block; font-size: 10.5px; color: var(--fg-muted); }
.ft__panel-row--ghost {
  border-style: dashed;
  background: transparent;
}
.ft__panel-row--ghost .ft__panel-no { background: var(--neutral-300); }

/* --- 4. OCR --- */
.ft__shot--ocr {
  display: flex; align-items: center; gap: 24px; justify-content: center;
  padding: 28px 20px;
  background: linear-gradient(180deg, var(--neutral-50), var(--bg-app));
}
.ft__ocrplate {
  position: relative;
  width: 200px;
  background: linear-gradient(160deg, #b1bac4, #6e7782);
  color: #1c222b;
  border-radius: 8px;
  padding: 14px 18px;
  font-family: var(--font-mono);
  font-size: 10px;
  display: grid; gap: 4px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 6px 14px rgba(15,22,32,0.18);
  letter-spacing: 0.04em;
  transform: rotate(-3deg);
}
.ft__ocrplate__brand {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 800;
  letter-spacing: 0.2em;
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
  margin-bottom: 3px;
}
.ft__ocrplate__line { color: #2b323d; text-shadow: 0 1px 0 rgba(255,255,255,0.25); }
.ft__ocrplate__line--sub { font-size: 9px; opacity: 0.7; }
.ft__ocrplate__bolt {
  position: absolute;
  width: 5px; height: 5px;
  background: radial-gradient(circle at 30% 30%, #c6cdd5, #555c66);
  border-radius: 50%;
}
.ft__ocrplate__scan {
  position: absolute;
  border: 2px solid var(--orange-500);
  border-radius: 3px;
  background: rgba(255,138,31,0.08);
  pointer-events: none;
  box-shadow: 0 0 0 2px rgba(255,138,31,0.1);
}
.ft__ocrform {
  width: 200px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  padding: 12px;
  box-shadow: var(--shadow-md);
  display: grid; gap: 8px;
  position: relative;
}
.ft__ocrform__row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px;
  color: var(--fg-muted);
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--border-subtle);
}
.ft__ocrform__row:last-of-type { border-bottom: 0; padding-bottom: 0; }
.ft__ocrform__val {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 700;
  color: var(--fg-strong);
}
.ft__ocrform__pulse {
  position: absolute;
  top: 50%; left: -8px;
  width: 8px; height: 60%;
  background: linear-gradient(180deg, transparent, var(--orange-500), transparent);
  border-radius: 4px;
  filter: blur(3px);
  transform: translateY(-50%);
}

/* --- 5. Dashboard --- */
.ft__shot--dash {
  padding: 22px;
  display: grid; gap: 18px;
}
.ft__dash-counters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.ft__dashstat {
  background: var(--neutral-50);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  padding: 12px 14px;
  display: grid; gap: 4px;
  position: relative;
}
.ft__dashstat__label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fg-muted);
}
.ft__dashstat__num {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 900;
  color: var(--fg-strong);
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.ft__dashstat__badge {
  font-family: var(--font-mono);
  font-size: 9.5px; font-weight: 700;
  color: var(--orange-700);
  background: var(--orange-50);
  border: 1px solid var(--orange-200);
  padding: 2px 6px;
  border-radius: 999px;
  width: fit-content;
}
.ft__dashstat__badge--blue { color: var(--blue-700); background: var(--blue-50); border-color: var(--blue-200); }
.ft__dashstat__badge--green { color: var(--success); background: var(--success-bg); border-color: rgba(22,163,74,0.3); }
.ft__dash-chart {
  background: var(--neutral-50);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  padding: 14px;
  display: grid; gap: 10px;
}
.ft__dash-chart__label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fg-muted);
}
.ft__dashbars {
  display: flex; align-items: flex-end; gap: 6px;
  height: 100px;
}
.ft__dashbars span {
  flex: 1;
  height: var(--h);
  background: var(--c);
  border-radius: 4px 4px 0 0;
  opacity: 0.85;
}

/* --- 6. Timeline / Gantt --- */
.ft__shot--gantt {
  padding: 18px;
  display: grid; gap: 8px;
}
.ft__gantt__hd {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--fg-muted);
  padding: 0 0 6px;
  border-bottom: 1px solid var(--border-default);
  text-align: center;
  letter-spacing: 0.04em;
}
.ft__gantt__today {
  color: var(--orange-700);
  font-weight: 700;
}
.ft__gantt__row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 12px;
  align-items: center;
}
.ft__gantt__lbl {
  font-size: 11px;
  color: var(--fg-default);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ft__gantt__bar {
  height: 18px;
  background: var(--c);
  margin-left: var(--s);
  width: var(--w);
  border-radius: 4px;
  position: relative;
  opacity: 0.85;
}
.ft__gantt__bar--link::after {
  content: "🔗";
  position: absolute;
  right: 4px; top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
}

/* --- 7. Activity log --- */
.ft__shot--log { padding: 18px; }
.ft__log__tabs {
  display: flex; gap: 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-default);
  margin-bottom: 12px;
}
.ft__log__tab {
  font-size: 11px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 6px;
  color: var(--fg-muted);
}
.ft__log__tab--active {
  background: var(--blue-50);
  color: var(--blue-700);
}
.ft__log__list {
  list-style: none;
  display: grid; gap: 14px;
  padding: 0; margin: 0;
}
.ft__log__list li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
}
.ft__log__av {
  width: 28px; height: 28px;
  border-radius: 50%;
  color: white;
  font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.ft__log__body p {
  font-size: 12.5px;
  color: var(--fg-default);
  margin: 0 0 2px;
  line-height: 1.4;
}
.ft__log__body b { font-weight: 700; color: var(--fg-strong); }
.ft__log__quote {
  font-size: 12px !important;
  color: var(--fg-muted) !important;
  background: var(--neutral-50);
  padding: 6px 10px;
  border-radius: 6px;
  border-left: 2px solid var(--blue-400);
  margin: 4px 0 !important;
  font-style: italic;
}
.ft__log__time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-subtle);
}
.ft__chip {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
}
.ft__chip--orange {
  color: var(--orange-700);
  background: var(--orange-50);
  border: 1px solid var(--orange-200);
}

/* --- 8. Notifications --- */
.ft__shot--notif { padding: 18px; }
.ft__notif__tabs {
  display: flex; gap: 6px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-default);
  margin-bottom: 12px;
}
.ft__notif__tab {
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
  color: var(--fg-muted);
  border: 1px solid transparent;
}
.ft__notif__tab--active {
  background: var(--orange-50);
  color: var(--orange-700);
  border-color: var(--orange-200);
}
.ft__notif__tab b {
  font-family: var(--font-mono);
  font-weight: 700;
}
.ft__notif__list {
  list-style: none;
  display: grid; gap: 10px;
  padding: 0; margin: 0;
}
.ft__notif__list li {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  gap: 12px;
  padding: 10px 12px;
  background: var(--neutral-50);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  align-items: center;
}
.ft__notif__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-top: 6px;
}
.ft__notif__dot--orange { background: var(--orange-500); }
.ft__notif__dot--blue { background: var(--blue-500); }
.ft__notif__dot--violet { background: #8B5CF6; }
.ft__notif__list b {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--fg-strong);
}
.ft__notif__list span {
  display: block;
  font-size: 11px;
  color: var(--fg-muted);
}
.ft__notif__time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-subtle);
  white-space: nowrap;
}

/* --- 9. Mobile/Offline phones --- */
.ft__shot--mobile {
  display: flex; gap: 16px; justify-content: center;
  padding: 28px 20px;
  background: linear-gradient(180deg, var(--neutral-50), var(--bg-app));
}
.ft__phone {
  position: relative;
  width: 168px;
  background: var(--bg-inverse);
  color: #fff;
  border-radius: 22px;
  padding: 26px 12px 16px;
  box-shadow: 0 10px 24px rgba(15,22,32,0.25);
  border: 3px solid #1F2733;
  display: grid; gap: 10px;
  align-content: start;
}
.ft__phone__notch {
  position: absolute;
  top: 6px; left: 50%; transform: translateX(-50%);
  width: 50px; height: 12px;
  background: #000;
  border-radius: 999px;
}
.ft__phone__bar {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 9.5px;
  color: rgba(255,255,255,0.6);
}
.ft__phone__chip {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255,138,31,0.2);
  color: #FFB55C;
}
.ft__phone__chip--sync {
  background: rgba(0,181,226,0.2);
  color: #6DC4E0;
}
.ft__phone__sig { font-family: var(--font-mono); font-size: 9px; }
.ft__phone__map {
  background:
    radial-gradient(circle at 40% 30%, rgba(0,181,226,0.4), transparent 40%),
    radial-gradient(circle at 70% 70%, rgba(255,138,31,0.3), transparent 40%),
    #2a3140;
  border-radius: 8px;
  height: 130px;
  background-size: 100%;
  position: relative;
}
.ft__phone__map::before, .ft__phone__map::after {
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid #fff;
}
.ft__phone__map::before { left: 38%; top: 32%; background: #FF8A1F; }
.ft__phone__map::after { left: 64%; top: 58%; background: #00B5E2; }
.ft__phone__pill {
  text-align: center;
  font-size: 10px;
  background: rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 6px;
  color: rgba(255,255,255,0.8);
}
.ft__phone__progress {
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  overflow: hidden;
}
.ft__phone__progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--blue-500), var(--orange-500));
  border-radius: 999px;
}
.ft__phone__rows { display: grid; gap: 6px; }
.ft__phone__row {
  display: flex; align-items: center; gap: 8px;
  font-size: 10px;
  color: rgba(255,255,255,0.85);
}
.ft__phone__tick {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--success);
  position: relative;
}
.ft__phone__tick::after {
  content: "";
  position: absolute; left: 3px; top: 4px;
  width: 5px; height: 2.5px;
  border-left: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(-45deg);
}
.ft__phone__tick--prog {
  background: var(--orange-500);
  animation: ft-spin 1.4s linear infinite;
}
.ft__phone__tick--prog::after { display: none; }
.ft__phone__row--prog { color: rgba(255,255,255,0.55); }
@keyframes ft-spin {
  to { transform: rotate(360deg); }
}

/* --- 10. Multi-site --- */
.ft__shot--sites { padding: 18px; }
.ft__sites__bar {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-default);
  font-size: 12px;
}
.ft__sites__crumb {
  color: var(--fg-muted);
  font-weight: 600;
}
.ft__sites__sep { color: var(--neutral-300); }
.ft__sites__site {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--fg-strong);
  font-weight: 700;
}
.ft__sites__list {
  list-style: none;
  display: grid; gap: 6px;
  padding: 0; margin: 0;
}
.ft__sites__row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 12px;
  padding: 8px 10px;
  background: var(--neutral-50);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  align-items: center;
}
.ft__sites__row--active {
  background: var(--blue-50);
  border-color: var(--blue-300);
}
.ft__sites__row--more {
  border-style: dashed;
  color: var(--fg-muted);
  font-size: 11.5px;
  background: transparent;
}
.ft__sites__icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.ft__sites__icon--yacht::before { content: "⛵"; }
.ft__sites__icon--ship::before { content: "🚢"; }
.ft__sites__icon--building::before { content: "🏢"; }
.ft__sites__icon--factory::before { content: "🏭"; }
.ft__sites__icon--plus { color: var(--fg-muted); }
.ft__sites__row b { display: block; font-size: 12px; color: var(--fg-strong); }
.ft__sites__row span { display: block; font-size: 10.5px; color: var(--fg-muted); }
.ft__sites__check {
  color: var(--success);
  font-weight: 800;
  font-size: 14px;
}

/* --- 11. Reports --- */
.ft__shot--report {
  display: grid; gap: 14px;
  padding: 24px;
  background: linear-gradient(180deg, var(--neutral-50), var(--bg-app));
  justify-items: center;
}
.ft__report__page {
  width: 220px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  padding: 14px 16px;
  box-shadow: var(--shadow-md);
  transform: rotate(-1.5deg);
}
.ft__report__hd {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 10px;
}
.ft__report__logo {
  width: 28px; height: 28px;
  border-radius: 7px;
  background: linear-gradient(135deg, #00B5E2 0%, #FF8A1F 100%);
  color: white;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 11px; font-weight: 800;
}
.ft__report__title {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 700;
  color: var(--fg-strong);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.ft__report__title span {
  font-size: 9.5px; font-weight: 500;
  color: var(--fg-muted);
  letter-spacing: 0;
}
.ft__report__body { display: grid; gap: 6px; }
.ft__report__row {
  display: block;
  height: 5px;
  width: 100%;
  background: var(--neutral-100);
  border-radius: 2px;
}
.ft__report__photo {
  display: block;
  height: 38px;
  background:
    linear-gradient(135deg, #3a4252, #1f2733);
  border-radius: 4px;
  margin: 4px 0;
}
.ft__report__sig {
  display: block;
  height: 14px; width: 60%;
  margin-top: 8px;
  background: repeating-linear-gradient(85deg, var(--neutral-300) 0 8px, transparent 8px 12px);
  border-radius: 2px;
  transform: rotate(-3deg);
}
.ft__report__formats {
  display: flex; gap: 6px;
}
.ft__report__chip {
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 700;
  padding: 4px 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 6px;
  color: var(--fg-muted);
}
.ft__report__chip--orange {
  color: var(--orange-700);
  background: var(--orange-50);
  border-color: var(--orange-200);
}

/* --- 12. Grouping / filtering --- */
.ft__shot--group { padding: 18px; }
.ft__group__filters {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-default);
}
.ft__group__chip {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  color: var(--fg-muted);
}
.ft__group__chip--active {
  background: var(--orange-50);
  color: var(--orange-700);
  border-color: var(--orange-300);
}
.ft__group__chip--add {
  border-style: dashed;
  color: var(--fg-subtle);
}
.ft__group__list { display: grid; gap: 4px; }
.ft__group__head {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 8px 4px 4px;
}
.ft__group__head b {
  font-family: var(--font-mono);
  color: var(--fg-default);
  margin-left: 4px;
}
.ft__group__caret {
  display: inline-block;
  width: 0; height: 0;
  margin-right: 4px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--fg-muted);
  vertical-align: middle;
}
.ft__sites__caret {
  display: inline-block;
  width: 0; height: 0;
  margin-left: 4px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--fg-muted);
  vertical-align: middle;
}
.ft__group__row {
  display: grid;
  grid-template-columns: 8px 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: var(--neutral-50);
  border: 1px solid var(--border-default);
  border-radius: 6px;
  font-size: 12px;
  color: var(--fg-default);
}
.ft__group__pri {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--neutral-300);
}
.ft__group__pri--orange { background: var(--orange-500); }
.ft__group__pri--blue { background: var(--blue-500); }

/* ============================================================
   ROLE CARDS (shared with pricing, re-declared here since
   features.html doesn't load pricing.css)
============================================================ */
.roles__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1240px;
  margin: 0 auto;
}
@media (max-width: 1040px) {
  .roles__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .roles__grid { grid-template-columns: 1fr; }
}
.role {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  box-shadow: var(--shadow-xs);
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.role:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.role__hd {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 10px;
}
.role__badge {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.role--admin .role__badge {
  background: var(--orange-50);
  color: var(--orange-700);
  border: 1px solid var(--orange-200);
}
.role--normal .role__badge {
  background: var(--blue-50);
  color: var(--blue-700);
  border: 1px solid var(--blue-200);
}
.role--guest .role__badge {
  background: var(--neutral-100);
  color: var(--neutral-700);
  border: 1px solid var(--neutral-200);
}
.role--site .role__badge {
  background: #E8FFF4;
  color: #0D7A4E;
  border: 1px solid #9AEDC9;
}
.role__hd h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--fg-strong);
}
.role p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--fg-muted);
  margin: 0;
  text-wrap: pretty;
}
.role__list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.role__list li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 12px;
  color: var(--fg-muted);
  line-height: 1.45;
}
.role__list li svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--orange-600);
}
.role--normal .role__list li svg { color: var(--blue-600); }
.role--guest .role__list li svg { color: var(--neutral-500); }
.role--site .role__list li svg { color: #0D7A4E; }

/* ============================================================
   PERMISSIONS GRID
============================================================ */
.perms {
  position: relative;
  padding: 120px 0 100px;
  background: var(--bg-app);
  overflow: hidden;
}
.perms__bg {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(15,22,32,0.05) 1px, transparent 0);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 85% 70% at 50% 50%, black 25%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 50%, black 25%, transparent 80%);
  pointer-events: none;
}
.perms .container { position: relative; }
.perms__head {
  text-align: center;
  margin: 0 auto 48px;
  max-width: 760px;
}
.perms__head .bighead { margin: 18px 0 16px; }
.perms__intro {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--fg-muted);
  margin: 0 auto;
  max-width: 620px;
}

.perms__grid {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 20px;
  padding: 8px;
  margin-top: 32px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.perms__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-family: var(--font-body);
}
.perms__col--cap { width: 52%; }
.perms__col--role { width: 16%; }

.perms__table thead th {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  text-align: center;
  padding: 16px 12px;
  background: var(--neutral-50);
  border-bottom: 1px solid var(--border-default);
}
.perms__table thead th:first-child {
  text-align: left;
  background: transparent;
  padding-left: 20px;
  letter-spacing: 0.06em;
  color: var(--fg-strong);
}
.perms__table thead th:nth-child(2) { border-top-left-radius: 14px; }
.perms__table thead th:last-child { border-top-right-radius: 14px; }

.perms__rolehd {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--fg-strong);
}
.perms__rolehd::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 2px;
}
.perms__rolehd--admin::before { background: var(--orange-500); }
.perms__rolehd--normal::before { background: var(--blue-500); }
.perms__rolehd--guest::before { background: var(--neutral-400); }

.perms__table tbody th {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  padding: 14px 20px;
  color: var(--fg-default);
  border-bottom: 1px solid var(--border-subtle);
}
.perms__table tbody td {
  text-align: center;
  padding: 12px;
  border-bottom: 1px solid var(--border-subtle);
}
.perms__table tbody tr:last-child th,
.perms__table tbody tr:last-child td { border-bottom: 0; }
.perms__table tbody tr:hover { background: var(--neutral-25); }
.perms__table tbody tr:hover th { color: var(--fg-strong); }

.perms__table code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--orange-700);
  background: var(--orange-50);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--orange-200);
}

/* Permission cell markers */
.perms__table td .p-yes,
.perms__table td .p-no,
.perms__table td .p-partial {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  vertical-align: middle;
  position: relative;
}
.p-yes {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  vertical-align: middle;
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid rgba(22,163,74,0.25);
  position: relative;
}
.p-yes::after {
  content: "";
  display: block;
  width: 9px; height: 5px;
  border-left: 2px solid var(--success);
  border-bottom: 2px solid var(--success);
  transform: rotate(-45deg) translateY(-1px);
}
.p-no {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  vertical-align: middle;
  background: var(--neutral-100);
  border: 1px solid var(--neutral-200);
  position: relative;
}
.p-no::after {
  content: "";
  display: block;
  width: 9px; height: 2px;
  background: var(--neutral-400);
  border-radius: 1px;
}
.p-partial {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  vertical-align: middle;
  background: var(--orange-50);
  border: 1px solid var(--orange-200);
  position: relative;
}
.p-partial::after {
  content: "";
  display: block;
  width: 8px; height: 4px;
  border-left: 2px solid var(--orange-500);
  border-bottom: 2px solid var(--orange-500);
  transform: rotate(-45deg) translate(-1px,-1px);
  opacity: 0.85;
}

.perms__legend {
  display: flex; flex-wrap: wrap; gap: 20px; justify-content: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-muted);
  margin: 20px 0 8px;
  padding: 18px 0 0;
  border-top: 1px dashed var(--border-subtle);
}
.perms__legendi {
  display: inline-flex; align-items: center; gap: 8px;
}
.perms__legend .p-yes, .perms__legend .p-no, .perms__legend .p-partial {
  width: 18px; height: 18px;
}

@media (max-width: 720px) {
  .perms__col--cap { width: 50%; }
  .perms__col--role { width: 16.66%; }
  .perms__table thead th,
  .perms__table tbody th,
  .perms__table tbody td { padding: 10px 8px; font-size: 12.5px; }
  .perms__rolehd { font-size: 12px; font-weight: 400; }
  .perms__rolehd::before { display: none; }
}

.perms__close {
  margin: 36px auto 0;
  text-align: center;
  max-width: 720px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-default);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--orange-500);
  border-radius: 0 12px 12px 0;
  padding: 18px 24px;
  text-wrap: pretty;
}
.perms__close strong { color: var(--orange-700); font-weight: 700; }

@media (max-width: 720px) {
  .fhero { padding: 56px 0 40px; }
  .ft { padding: 56px 0; }
  .perms { padding: 80px 0; }
  .ft__shot--mobile { flex-wrap: wrap; }
  .perms__table thead th,
  .perms__table tbody th,
  .perms__table tbody td { padding: 8px 10px; font-size: 12px; }
}

/* ============================================================
   IMAGE-BASED PRODUCT SHOTS (real screenshots replacing svg mocks)
============================================================ */
.ft__shot--img {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: visible !important;
}
.ft__shot--img img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* Section 04 — Interactive plan: image bleeds flush to the bottom of the
   white .fbig section so its lower edge meets the gray section that follows. */
.fbig { padding-bottom: 0; }
.fbig__visual--bleed { margin: 0; gap: 0; width: 100%; }
.fbig__visual--bleed figcaption { display: none; }
.fbig__visual--bleed .ft__shot--planbig.ft__shot--img {
  width: 100%;
  height: auto;
  display: block !important;
}
.fbig__visual--bleed .ft__shot--planbig.ft__shot--img img {
  width: 100%;
  height: auto;
  display: block;
}

/* Section 05 — Annotation + OCR cards: replace the split/ocr svg mocks
   with screenshots. Keep the 280px panel height; contain the image. */
.ftwo__visual > .ft__shot--img.ft__shot--imgwide {
  padding: 0 !important;
}
.ftwo__visual > .ft__shot--img.ft__shot--imgwide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Sections 06 & 08 — colored panels (Dashboard + Gantt) carry screenshots
   directly on the panel background, with a drop shadow instead of a surface card. */
.fpanel__visual:has(> .ft__shot--img) {
  background: transparent !important;
  padding: 0 !important;
  overflow: visible !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
}
.fpanel__visual > .ft__shot--img {
  width: 100%;
  height: auto !important;
  display: block !important;
}
.fpanel__visual > .ft__shot--img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  filter: drop-shadow(0 22px 48px rgba(0,0,0,0.32));
}

/* Section 10 — Multi-site image: sits flat on the surface with a soft shadow. */
.fstat__visual > .ft__shot--img {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: 100%;
  height: auto !important;
  display: block !important;
}
.fstat__visual > .ft__shot--img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  filter: drop-shadow(0 16px 36px rgba(15,22,32,0.14));
}


/* ============================================================
   Centered features hero (no side mockup stack)
============================================================ */
.fhero2__inner--centered {
  display: block;
  text-align: center;
  padding-top: 16px;
  padding-bottom: 32px;
}
.fhero2__copy--centered {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.fhero2__copy--centered .fhero2__eyebrow {
  margin: 0 auto 32px;
}
.fhero2__copy--centered .fhero2__head {
  text-wrap: balance;
}
.fhero2__copy--centered .fhero2__sub {
  margin-left: auto;
  margin-right: auto;
}
.fhero2__copy--centered .fhero2__ctas {
  justify-content: center;
}
.fhero2__copy--centered .fhero2__micro {
  justify-content: center;
}