/* home-v2.css — draft homepage (home-v2.html). Builds on main.css; everything is scoped to body.v2. */

/* ================= TOKENS ================= */
.v2{
  --v2-blue: #1f5fd1;
  --v2-blue-soft: rgba(31,95,209,.10);
  --v2-gradient: linear-gradient(135deg, #0b2a5b 0%, #123f8c 55%, #2a6fdb 100%);
  --v2-gold: #ddaf24;                 /* brand gold, same as the dots on index.html */
  --v2-section-pad: 104px;

  /* Per-section accent; feature rows override these (see FEATURE ACCENTS) */
  --accent: var(--v2-blue);
  --accent-soft: var(--v2-blue-soft);
  --accent-glow: rgba(42,111,219,.22);
  --accent-tint: #e8f0ff;

  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

/* ================= STEP COLORS =================
   Used by the How It Works page (getting-started.css) and the homepage tiles that link to it. The hero has its
   own five (.hero-tone-N, below).
   One tone per step: brand blue (set up), green (documents), brand gold (review and send). Navy is for the
   unnumbered "Along the way" section. Blue, green and navy pass 4.5:1 as text on white; gold is too light, so its
   text uses --accent-ink. No purple, orange, or red.
   Optional per tone: --accent-ink (text color, defaults to --accent) and --accent-on (text on an --accent fill, defaults to white). */
.gs-tone-1{ /* brand blue */
  --accent: #1f5fd1;
  --accent-soft: rgba(31,95,209,.12);
  --accent-glow: rgba(31,95,209,.26);
  --accent-tint: #eaf1fe;
}

.gs-tone-2{ /* green */
  --accent: #008542;
  --accent-soft: rgba(0,133,66,.12);
  --accent-glow: rgba(0,133,66,.26);
  --accent-tint: #e3f8e8;
}

.gs-tone-3{ /* brand gold */
  --accent: #ddaf24;
  --accent-soft: rgba(221,175,36,.18);
  --accent-glow: rgba(221,175,36,.38);
  --accent-tint: #fdf6dc;
  --accent-ink: #8a6a00;              /* gold text on white or tint (5:1) */
}

.gs-tone-navy{
  --accent: #0b2a5b;
  --accent-soft: rgba(11,42,91,.10);
  --accent-glow: rgba(11,42,91,.22);
  --accent-tint: #eef2f8;
}

/* Hero step colors: five steps, so a wider stride than the six gs-tones (brand blue to brand gold in even
   OKLCH hue steps, about 43° apart, matched lightness). Each passes 4.5:1 as text on white; gold uses a deeper
   ink for text; its number stays white like the other four. Hero only, so the How It Works page keeps its six. */
.hero-tone-1{ /* brand blue */
  --accent: #1f5fd1;
  --accent-soft: rgba(31,95,209,.12);
  --accent-glow: rgba(31,95,209,.26);
  --accent-tint: #eaf1fe;
}

.hero-tone-2{ /* ocean */
  --accent: #007d99;
  --accent-soft: rgba(0,125,153,.12);
  --accent-glow: rgba(0,125,153,.26);
  --accent-tint: #e3f5fa;
}

.hero-tone-3{ /* teal */
  --accent: #00836b;
  --accent-soft: rgba(0,131,107,.12);
  --accent-glow: rgba(0,131,107,.26);
  --accent-tint: #dcf6ef;
}

.hero-tone-4{ /* green */
  --accent: #4d7c0f;
  --accent-soft: rgba(77,124,15,.12);
  --accent-glow: rgba(77,124,15,.26);
  --accent-tint: #eef7dc;
}

.hero-tone-5{ /* brand gold */
  --accent: #ddaf24;
  --accent-soft: rgba(221,175,36,.22);
  --accent-glow: rgba(221,175,36,.40);
  --accent-tint: #fdf6dc;
  --accent-ink: #8a6a00;
}

/* ================= SHARED WITH THE HOW IT WORKS PAGE (getting-started.html) ================= */
/* Line icons (inline SVG, 24×24 viewBox) */
.gs-ico{
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Switching-cost reassurance under the hero buttons */
.gs-assure{
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
}

.gs-assure li{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-2);
}

.gs-assure .gs-ico{
  width: 18px;
  height: 18px;
  stroke-width: 2.5;
  color: #008542;
}

/* One colored tile per step, linking to that step on the How It Works page */
.gs-tiles{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

.gs-tile{
  position: relative;
  height: 100%;
  box-sizing: border-box;
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 18px 16px 20px;
  border-radius: 16px;
  text-decoration: none;
  background: var(--accent-tint);
  border: 1px solid var(--accent-soft);
  border-top: 4px solid var(--accent);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.gs-tile:hover,
.gs-tile:focus-visible{
  transform: translateY(-3px);
  background: #fff;
  box-shadow: 0 16px 32px var(--accent-glow);
}

.gs-tile__num{
  width: 36px;
  height: 36px;
  margin-bottom: 10px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 800;
  color: var(--accent-on, #fff);
  background: var(--accent);
  box-shadow: 0 6px 14px var(--accent-glow);
}

.gs-tile b{
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--ink);
}

.gs-tile small{
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}

.gs-tile__arrow{
  position: absolute;
  top: 24px;
  right: 16px;
  width: 18px;
  height: 18px;
  color: var(--accent-ink, var(--accent));
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .15s ease, transform .15s ease;
}

.gs-tile:hover .gs-tile__arrow,
.gs-tile:focus-visible .gs-tile__arrow{
  opacity: 1;
  transform: none;
}

/* Homepage: three bigger tiles, each with a full sentence */
.gs-tiles--three{
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.gs-tiles--three .gs-tile{
  gap: 8px;
  padding: 24px 24px 26px;
}

.gs-tiles--three .gs-tile b{
  padding-right: 24px;
  font-size: 19px;
  letter-spacing: -.2px;
}

.gs-tiles--three .gs-tile small{
  font-size: 15px;
  line-height: 1.5;
}

.v2-hiw__foot{
  margin: 20px 0 0;
  font-size: 15px;
  color: var(--muted);
}

.v2-hiw__foot a{
  margin-left: 6px;
  font-weight: 700;
  color: #1f5fd1;
}

/* ================= DRAFT RIBBON (remove at launch) ================= */
.draft-ribbon{
  background: #fff4d6;
  color: #6b4e00;
  border-bottom: 1px solid #f0d98a;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .4px;
  padding: 6px 16px;
}

/* ================= BUTTONS ================= */
.v2 .v2-btn{
  padding: 14px 26px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.v2 .v2-btn--light{
  background: #fff;
  color: #0b2a5b;
  border-color: #fff;
}

.v2 .v2-btn--outline{
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.45);
}

/* ================= 1. HERO ================= */
.v2-hero{
  padding: 72px 0 48px;
  text-align: center;
  /* Blue, green, and gold wash to match the step colors in the hero (no purple) */
  background:
    radial-gradient(900px 520px at 8% 0%, rgba(42,111,219,.24), transparent 65%),
    radial-gradient(700px 460px at 92% 4%, rgba(80,152,72,.14), transparent 65%),
    radial-gradient(600px 360px at 70% 40%, rgba(221,175,36,.10), transparent 70%),
    linear-gradient(180deg, #eaf1ff 0%, #ffffff 72%);
}

.v2-grad-text{
  background: linear-gradient(90deg, #123f8c 0%, #2a6fdb 50%, #5a3fd6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.v2-hero__title{
  max-width: 900px;
  margin: 0 auto;
  font-size: 64px;
  line-height: 1.06;
  letter-spacing: -2px;
  font-weight: 800;
  color: var(--ink);
  text-wrap: balance;
}

.v2-hero__lead{
  max-width: 640px;
  margin: 24px auto 0;
  font-size: 19px;
  line-height: 1.6;
  color: var(--muted);
}

.v2-hero__cta{
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 36px;
}

.v2-hero__cta--left{ justify-content: flex-start; }

/* Home hero: old headline as the eyebrow, one sentence per line in the h1 */
.v2-hero .v2-hero__eyebrow{
  display: inline-block;
  margin: 0 0 22px;
  padding: 8px 18px;
  font-size: 16px;
  line-height: 1.4;
  background: rgba(42,111,219,.10);
  border: 1px solid rgba(42,111,219,.28);
  border-radius: 999px;
}

.v2-hero__line{ display: block; }

/* Light stage holding the hero animation. The page script sets .hero-tone-N and --i (1–5) to the active
   step: the tint fades between step colors and a soft glow slides toward that step. */
.v2-stage{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 48px auto 0;
  max-width: 1080px;
  padding: 28px;
  border-radius: 28px;
  text-align: left;
  background-color: var(--accent-tint);
  background-image: linear-gradient(170deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.75) 75%);
  border: 1px solid var(--accent-soft);
  box-shadow: 0 30px 80px rgba(11,42,91,.14);
  transition: background-color 1.2s ease, border-color 1.2s ease;
}

.v2-stage::before{
  content: "";
  position: absolute;
  z-index: -1;
  top: -30%;
  left: calc((var(--i, 1) - 1) / 4 * 60%);
  width: 40%;
  height: 90%;
  pointer-events: none;
  color: var(--accent-glow);
  background: radial-gradient(closest-side, currentColor, transparent);
  transition: left 1.2s ease, color 1.2s ease;
}

/* Steps carry their own tone; stop gold's ink color leaking in from the stage on step 5 */
.v2-stage [class*="hero-tone-"]:not(.hero-tone-5){ --accent-ink: initial; }

.v2-stage .v2-window{
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(11,42,91,.16);
}

/* ================= HERO STEPS =================
   Five steps of a return in the step colors, above the window. The active one lifts and its bar fills
   over that step's duration (--t, set by the page script). */
.v2-steps{
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.v2-steps li{
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0 10px;
  padding: 12px 12px 14px;
  border-radius: 14px;
  background: var(--accent-tint);
  border: 1px solid var(--accent-soft);
  transition: transform .4s ease, background-color .4s ease, box-shadow .4s ease;
}

.v2-steps li.is-active{
  transform: translateY(-3px);
  background: #fff;
  box-shadow: 0 14px 28px var(--accent-glow);
}

.v2-steps__num{
  grid-row: span 2;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--accent-on, #fff);
  background: var(--accent);
}

.v2-steps b{
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--ink);
}

.v2-steps small{
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--muted);
}

.v2-steps__bar{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}

.v2-steps li.is-done .v2-steps__bar{ transform: none; }
.v2-steps li.is-active .v2-steps__bar{ transform: none; transition: transform var(--t, 1.5s) linear; }

/* Steps can be hovered (or tapped) to hold the animation on them; a held step's bar shows full, without the timer */
.v2-steps li{ cursor: pointer; }
.v2-steps li:hover{ background: #fff; }
.v2-stage.is-held .v2-steps li.is-active .v2-steps__bar{ transition: none; }

.v2-stage__hint{
  margin: -8px 0 14px;
  font-size: 12.5px;
  font-weight: 600;
  text-align: right;
  color: var(--muted);
}

.v2-stage__hint--touch{ display: none; }
@media (hover: none){
  .v2-stage__hint--hover{ display: none; }
  .v2-stage__hint--touch{ display: inline; }
}

/* ================= HERO CAPTION =================
   One to three sentences on the active step, above the steps. Every caption sits in the same grid cell, so the
   box is as tall as the longest caption and the page never jumps as they change. */
.v2-caption{
  display: grid;
  margin: 0 0 18px;
  padding: 20px 24px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--accent-soft);
  border-left: 5px solid var(--accent);
  box-shadow: 0 14px 32px rgba(11,42,91,.10);
  transition: border-color .6s ease;
}

.v2-caption__item{
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .45s ease, transform .45s ease, visibility 0s .45s;
}

.v2-caption__item.is-active{
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .45s ease .1s, transform .45s ease .1s, visibility 0s;
}

.v2-caption__kicker{
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--accent-ink, var(--accent));
  transition: color .6s ease;
}

.v2-caption__item p{
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
  font-weight: 500;
  color: var(--ink-2);
}

/* ================= HERO ANIMATION (.flow) =================
   Labels, doc cards, and destinations never disappear. The page script adds s1…s5 to the window
   (.flow-run) as the return moves forward, then removes them all to reset, so only the data fades out
   between loops. The markup ships with every step class on, so the finished state shows without JS
   or with reduced motion. Within a step, --d staggers each item; the reset has no delay so everything
   clears together.
   1 Request: docs show "Requested", then turn into uploaded cards. 2 Extract: a dot travels in, values fill,
   the uncertain one is flagged. 3 Worksheets: the flagged value is edited. 4 Review: every value gets a check.
   5 Send: ProConnect lights up and the import is confirmed; the other programs stay listed beside it. */
.flow{
  display: grid;
  grid-template-columns: 1fr 56px 1.35fr 56px 1fr;
  align-items: center;
  padding: 32px;
  min-height: 320px;
  background:
    linear-gradient(rgba(11,42,91,.04) 1px, transparent 1px) 0 0 / 100% 40px,
    #fafbfe;
}

.flow__col{
  display: grid;
  gap: 12px;
  align-content: center;
}

.flow__title{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}

.flow-doc,
.flow-dest{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 8px 20px rgba(11,18,32,.06);
}

/* Source docs: grey "requested" placeholder, then the uploaded card (both within step 1; --up is when it arrives) */
.flow-doc{
  --up: calc(var(--d) + 2.2s);
  position: relative;
  display: flex;
  flex-direction: column;
  border-left: 4px solid #d5dde9;
  background: #f4f6fa;
  box-shadow: none;
  transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.flow-doc b{ font-size: 15px; color: var(--muted); transition: color .35s ease; }
.flow-doc span{ font-size: 13px; color: var(--muted); opacity: 0; transition: opacity .35s ease; }

.flow-run.s1 .flow-doc{
  border-left-color: #1f5fd1;
  background: #fff;
  box-shadow: 0 8px 20px rgba(11,18,32,.06);
  transition-delay: var(--up);
}

.flow-run.s1 .flow-doc b{ color: var(--ink); transition-delay: var(--up); }
.flow-run.s1 .flow-doc span{ opacity: 1; transition-delay: var(--up); }

.flow-tag{
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  display: grid;
  font-style: normal;
}

.flow-tag i{
  grid-area: 1 / 1;
  justify-self: end;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  border-radius: 999px;
  padding: 2px 8px;
  opacity: 0;
  transition: opacity .3s ease;
}

.flow-tag__req{ color: #1f5fd1; background: rgba(31,95,209,.10); }
.flow-tag__in{ color: #1f5fd1; background: rgba(31,95,209,.12); }

/* "Requested" shows, then hands over to "Uploaded" when the card arrives */
.flow-run.s1 .flow-tag__req{ animation: v2-req 2.2s var(--d) both; }
.flow-run.s1 .flow-tag__in{ opacity: 1; transition-delay: var(--up); }

.flow__col--sheet{
  gap: 0;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(11,18,32,.08);
}

.flow-row{
  display: grid;
  grid-template-columns: 1fr auto 60px;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  font-size: 14px;
  color: var(--ink-2);
}

/* Worksheet values: fade in with a brief highlight, like a value that was just filled */
.flow-row b{
  display: grid;
  margin: -2px -6px;
  padding: 2px 6px;
  border-radius: 6px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity .35s ease;
}

.flow-run.s2 .flow-row b{
  opacity: 1;
  transition-delay: var(--d);
  animation: v2-fill 1.6s var(--d) both;
}

/* The edited value: the extracted amount, swapped for the corrected one in step 3 */
.flow-row b > span{ grid-area: 1 / 1; justify-self: end; transition: opacity .3s ease; }
.flow-row b > .flow-new{ opacity: 0; }
.flow-run.s3 .flow-row b > .flow-old{ opacity: 0; transition-delay: .9s; }
.flow-run.s3 .flow-row b > .flow-new{ opacity: 1; transition-delay: .9s; }
.flow-run.s3 .flow-row--edit b{ animation: v2-edit 1.6s .9s both; }

.flow-row__state{
  display: grid;
  justify-items: end;
}

.flow-row__state > i,
.flow-badge,
.flow-status{
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 9px;
  color: #0f7a43;
  background: #dcf5e7;
}

.flow-row__state > i{ grid-area: 1 / 1; opacity: 0; transition: opacity .3s ease; }

/* Extract flags the uncertain value; Worksheets marks it edited; Review checks everything */
.flow-row__state > .flow-flag{ color: #8a5a00; background: #fff1cc; }
.flow-row__state > .flow-edit{ color: #00836b; background: rgba(0,131,107,.12); }

.flow-run.s2 .flow-flag{ opacity: 1; transition-delay: 1.8s; }
.flow-run.s3 .flow-flag{ opacity: 0; transition-delay: .9s; }
.flow-run.s3 .flow-edit{ opacity: 1; transition-delay: .9s; }
.flow-run.s4 .flow-edit{ opacity: 0; transition-delay: 0s; }

.flow-badge{ letter-spacing: .3px; text-transform: none; }

.flow-row__state > .flow-ok,
.flow-badge{
  opacity: 0;
  transform: scale(.7);
  transition: opacity .3s ease, transform .3s ease;
}

.flow-run.s4 .flow-row__state > .flow-ok,
.flow-run.s4 .flow-badge{
  opacity: 1;
  transform: none;
  transition-delay: var(--d);
}

/* Destinations: ProConnect dimmed until sent, then the import is confirmed */
.flow-dest{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  opacity: .5;
  transition: opacity .35s ease, border-color .35s ease;
}

.flow-dest::before{
  content: "✓";
  display: grid;
  place-items: center;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  border: 2px solid #c9d2e0;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  color: transparent;
  background: transparent;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}

.flow-run.s5 .flow-dest{
  opacity: 1;
  border-color: rgba(221,175,36,.6);
  transition-delay: var(--d);
}

.flow-run.s5 .flow-dest::before{
  color: #3d2e00;
  border-color: #ddaf24;
  background: #ddaf24;
  transition-delay: var(--d);
}

.flow-status{
  padding: 7px 12px;
  font-size: 12.5px;
  text-align: center;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease;
}

.flow-run.s5 .flow-status{
  opacity: 1;
  transform: none;
  transition-delay: 1.3s;
}

/* The other tax software programs, always shown */
.flow-soon{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 6px;
}

.flow-soon span{
  padding: 7px 8px;
  border: 1px dashed #c9d2e0;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
  color: var(--ink-2);
  background: #fff;
}

/* Connectors: a dot travels when values come in (step 2) and when the return is sent (step 5) */
.flow__link{
  position: relative;
  height: 2px;
  margin: 0 10px;
  background: repeating-linear-gradient(90deg, rgba(31,95,209,.35) 0 6px, transparent 6px 12px);
}

.flow__link::after{
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  opacity: 0;
}

.flow__link--in::after{ background: #007d99; box-shadow: 0 0 0 4px rgba(0,125,153,.2); }
.flow__link--out::after{ background: #ddaf24; box-shadow: 0 0 0 4px rgba(221,175,36,.3); }

.flow-run.s2 .flow__link--in::after,
.flow-run.s5 .flow__link--out::after{ animation: v2-travel .8s .05s both; }

@keyframes v2-req{
  0%{ opacity: 0; }
  12%, 88%{ opacity: 1; }
  100%{ opacity: 0; }
}

@keyframes v2-travel{
  0%{ left: 0; opacity: 0; }
  15%, 85%{ opacity: 1; }
  100%{ left: calc(100% - 10px); opacity: 0; }
}

@keyframes v2-fill{
  from{ background-color: rgba(0,125,153,.18); }
  to{ background-color: rgba(0,125,153,0); }
}

@keyframes v2-edit{
  from{ background-color: rgba(0,131,107,.22); }
  to{ background-color: rgba(0,131,107,0); }
}

/* ================= WINDOW FRAME (screenshot holder) ================= */
.v2-window{
  background: #fff;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
}

.v2-window__bar{
  display: flex;
  gap: 7px;
  padding: 12px 16px;
  background: #f1f4f9;
  border-bottom: 1px solid var(--border);
}

.v2-window__bar em{
  margin-left: 10px;
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.v2-window__bar span{
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: #d5dbe6;
}

.v2-window__body{
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px;
  text-align: center;
  color: var(--muted);
  background:
    linear-gradient(rgba(11,42,91,.04) 1px, transparent 1px) 0 0 / 100% 40px,
    #fafbfe;
}

.v2-window__body strong{
  color: var(--ink-2);
  font-size: 18px;
  font-weight: 700;
}

.v2-window--sm{ border-radius: 14px; }

.v2-window__img{
  display: block;
  width: 100%;
  height: auto;
}

/* ================= SECTIONS ================= */
.v2-section{
  padding: var(--v2-section-pad) 0;
  background: #fff;
}

.v2-section--soft{ background: #f6f8fc; }
.v2-section--tight{ padding: 40px 0 var(--v2-section-pad); }

/* Pulled up so the start of this section peeks above the fold under the hero */
#features{ padding-top: 56px; }

.v2-head{
  max-width: 720px;
  margin: 0 auto 56px;
  text-align: center;
}

.v2-eyebrow{
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--v2-blue);
  margin-bottom: 12px;
}

.v2-head h2{
  margin: 0;
  font-size: 44px;
  line-height: 1.12;
  letter-spacing: -1.2px;
  font-weight: 800;
  color: var(--ink);
  text-wrap: balance;
}

.v2-head p{
  margin: 16px 0 0;
  font-size: 18px;
  color: var(--muted);
}

/* Testimonials: a customer quote stands in as the section headline */
.v2-head .v2-pullquote{ font-weight: 700; }
.v2-head .v2-pullquote__by{ margin-top: 20px; font-size: 15px; font-weight: 600; color: var(--ink); }

/* ================= PLACEHOLDER BITS ================= */
.placeholder__tag{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: #6b4e00;
  background: #fff4d6;
  border: 1px solid #f0d98a;
  border-radius: 999px;
  padding: 2px 10px;
}

/* ================= VIDEO PLACEHOLDERS (testimonials, final CTA) ================= */
.v2-video-placeholder{
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  border-radius: 20px;
  background:
    radial-gradient(600px 300px at 50% 40%, rgba(255,255,255,.10), transparent 70%),
    var(--v2-gradient);
  color: rgba(255,255,255,.75);
}

.v2-video-placeholder strong{
  color: #fff;
  font-size: 19px;
  font-weight: 700;
}

.video-frame__play{
  width: 72px;
  height: 72px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #fff;
  color: #0b2a5b;
  font-size: 22px;
  padding-left: 5px;
  margin: 6px 0;
  box-shadow: 0 0 0 10px rgba(255,255,255,.15);
}

/* ================= CLIENT LOGO STRIP =================
   Track, fade edges, and scroll animation come from main.css (.clients-strip); this just frames it. */
.v2-clients{
  padding: 28px 0 8px;
  background: #fff;
}

.v2-clients__label{
  margin: 0;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
}

.v2 .clients-strip{ margin: 12px 0 0; }

/* ================= 2. FEATURES ================= */
.feature-rows{
  display: grid;
  gap: 112px;
}

/* How it works band: closes the feature rows and points to the How It Works page */
.v2-hiw{
  margin-top: 112px;
  padding: 32px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: 0 30px 80px rgba(11,42,91,.10);
}

.v2-hiw__head{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px 32px;
  margin-bottom: 24px;
}

.v2-hiw__head .v2-eyebrow{ margin-bottom: 8px; }

.v2-hiw__head h3{
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.5px;
  color: var(--ink);
}

.v2-hiw__head p{
  margin: 8px 0 0;
  max-width: 620px;
  font-size: 16px;
  color: var(--muted);
}

.feature-row{
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 72px;
  align-items: center;
}

.feature-row--flip .feature-row__copy{ order: 2; }

.feature-row__label{
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 4px 12px;
}

.feature-row__copy h3{
  margin: 16px 0 12px;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.8px;
  font-weight: 800;
  color: var(--ink);
  text-wrap: balance;
}

.feature-row__copy > p{
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 18px;
  text-wrap: pretty;
}

.v2-checks{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.v2-checks li{
  position: relative;
  padding-left: 34px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-2);
  text-wrap: pretty;
}

.v2-checks li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  background: var(--accent);
}

/* "Learn more" link under each feature row, to its Features page */
.feature-row__more{
  display: inline-block;
  margin-top: 24px;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
}

.feature-row__more + .feature-row__more{ display: table; margin-top: 10px; }
.feature-row__more::after{ content: " →"; }
.feature-row__more:hover{ text-decoration: underline; }

/* Tinted stage behind each feature screenshot */
.v2-shot{
  padding: 36px;
  border-radius: 24px;
  background:
    radial-gradient(500px 300px at 100% 0%, var(--accent-glow), transparent 70%),
    radial-gradient(400px 260px at 0% 100%, rgba(11,42,91,.08), transparent 70%),
    linear-gradient(135deg, var(--accent-tint) 0%, #f7f9fe 100%);
  border: 1px solid var(--accent-soft);
}

/* ================= FEATURE ACCENTS =================
   Each feature row gets its own accent so the section doesn't read as one long block of blue. */
.feature-row--accent-blue{
  --accent: #1f5fd1;
  --accent-soft: rgba(31,95,209,.12);
  --accent-glow: rgba(42,111,219,.28);
  --accent-tint: #e6efff;
}

.feature-row--accent-teal{
  --accent: #0f766e;
  --accent-soft: rgba(15,118,110,.12);
  --accent-glow: rgba(13,148,136,.28);
  --accent-tint: #e2f6f3;
}

.feature-row--accent-amber{
  --accent: #b45309;
  --accent-soft: rgba(180,83,9,.12);
  --accent-glow: rgba(221,175,36,.34);
  --accent-tint: #fff4e0;
}

/* Hero step 4 green (also Review in the hero), for the Review & Final Draft row */
.feature-row--accent-green{
  --accent: #4d7c0f;
  --accent-soft: rgba(77,124,15,.12);
  --accent-glow: rgba(77,124,15,.26);
  --accent-tint: #eef7dc;
}

/* Brand navy (middle stop of --v2-gradient), so it reads apart from the brighter blue row */
.feature-row--accent-navy{
  --accent: #123f8c;
  --accent-soft: rgba(18,63,140,.12);
  --accent-glow: rgba(18,63,140,.24);
  --accent-tint: #e8eef8;
}

/* Client email visual (used on feature-client-email.html): client reply → Themis hub → checklist change + staff alert.
   Reuses .int-hub (and its connectors), so it sets the same --int-gap / --int-line. */
.v2-mail{
  --int-gap: 44px;
  --int-line: rgba(18,63,140,.35);
  display: grid;
  gap: var(--int-gap);
  justify-items: center;
  padding: 8px 0;
}

.mail-msg{
  width: 100%;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(11,18,32,.08);
}

.mail-msg__head{
  display: grid;
  gap: 6px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.mail-msg__head div{
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 8px;
  min-width: 0;
}

.mail-msg__head span{ color: var(--muted); font-weight: 600; }

.mail-msg__head b{
  color: var(--ink);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The client's Themis address, shown as a pill so it reads as "the part Themis sees" */
.mail-msg__head .mail-msg__themis{
  justify-self: start;
  max-width: 100%;
  border-radius: 999px;
  padding: 1px 10px;
  font-size: 12px;
  color: var(--accent);
  background: var(--accent-soft);
}

.mail-msg__body{
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
}

/* Two results hang off a horizontal bus, like the integrations destinations */
.mail-results{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
}

.mail-results::before{
  content: "";
  position: absolute;
  top: calc(var(--int-gap) / -2);
  left: 25%;
  right: 25%;
  height: 2px;
  background: var(--int-line);
}

.mail-result{
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 14px 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(11,18,32,.06);
  text-align: center;
}

.mail-result::before{
  content: "";
  position: absolute;
  bottom: 100%;
  left: calc(50% - 1px);
  width: 2px;
  height: calc(var(--int-gap) / 2);
  background: var(--int-line);
}

.mail-result small{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--muted);
}

.mail-result b{
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.mail-result i{
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 9px;
  color: #0f7a43;
  background: #dcf5e7;
}

.mail-result .mail-result__alert{
  color: var(--accent);
  background: var(--accent-soft);
}

/* Integrations visual: approved worksheet → Themis hub → tax packages.
   Connectors are pseudo-elements; --int-gap is the vertical space they span. */
.v2-integrations{
  --int-gap: 44px;
  --int-line: rgba(18,63,140,.35);
  display: grid;
  gap: var(--int-gap);
  justify-items: center;
  padding: 8px 0;
}

.int-sheet{
  position: relative;
  width: 100%;
  padding: 18px 20px 8px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(11,18,32,.08);
}

.int-sheet__head{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}

.int-sheet__head em{
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.int-row{
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--border);
  font-size: 14px;
  color: var(--ink-2);
}

.int-row b{
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.int-row i{
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  border-radius: 999px;
  padding: 3px 9px;
  color: #0f7a43;
  background: #dcf5e7;
}

/* The held row stays behind: dimmed, and its pill reads as a flag */
.int-row--held > span,
.int-row--held b{ opacity: .5; }

.int-row--held i{
  color: #8a5a00;
  background: #fff1cc;
}

.int-hub{
  position: relative;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 16px 32px;
  border-radius: 16px;
  background: var(--v2-gradient);
  color: #fff;
  text-align: center;
  box-shadow: 0 14px 34px rgba(11,42,91,.25);
}

.int-hub strong{
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.3px;
}

.int-hub span{
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.78);
}

/* Vertical connectors above and below the hub */
.int-hub::before,
.int-hub::after{
  content: "";
  position: absolute;
  left: calc(50% - 1px);
  width: 2px;
  height: var(--int-gap);
  background: var(--int-line);
}

.int-hub::before{ bottom: 100%; }
.int-hub::after{ top: 100%; height: calc(var(--int-gap) / 2); }

/* Destinations hang off a horizontal bus halfway between hub and cards */
/* Six destinations in a 3×2 grid; only the top row hangs from the connector line */
.int-dests{
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
}

.int-dests::before{
  content: "";
  position: absolute;
  top: calc(var(--int-gap) / -2);
  left: 16.67%;
  right: 16.67%;
  height: 2px;
  background: var(--int-line);
}

.int-dest:nth-child(n+4)::before{ display: none; }

.int-dest{
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 6px;
  min-height: 92px;
  padding: 12px 8px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(11,18,32,.06);
  text-align: center;
}

.int-dest::before{
  content: "";
  position: absolute;
  bottom: 100%;
  left: calc(50% - 1px);
  width: 2px;
  height: calc(var(--int-gap) / 2);
  background: var(--int-line);
}

.int-dest b{
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.int-dest span{
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 9px;
  color: #0f7a43;
  background: #dcf5e7;
}

/* Excel is the catch-all, so it's styled as the "other" option */
.int-dest--excel{
  background: rgba(255,255,255,.6);
  border-style: dashed;
  border-color: rgba(18,63,140,.30);
}

.int-dest--excel span{
  color: var(--accent);
  background: var(--accent-soft);
}

/* ================= UI ILLUSTRATIONS (.ft-mock) =================
   Simplified Themis screens drawn in HTML/CSS. Synthetic data only. Used on the feature pages and the homepage
   Review row, so they live here rather than in features.css. */
.ft-mock{
  padding: 22px;
  background: #fafbfe;
  font-size: 13px;
  color: var(--ink-2);
}

.ft-mock__head{
  display: grid;
  gap: 2px;
  margin-bottom: 16px;
}

.ft-mock__head b{
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
}

.ft-mock__head small{
  font-size: 12px;
  color: var(--muted);
}

.ft-mock__brand{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -22px -22px 18px;
  padding: 14px 22px;
  color: #fff;
  background: #0b2a5b;
}

.ft-mock__brand i{
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  color: #0b2a5b;
  background: #ddaf24;
}

.ft-mock__brand b{ font-size: 14px; }

.ft-list{
  display: grid;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.ft-list__row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
}

.ft-list__row + .ft-list__row{ border-top: 1px solid var(--border); }

.ft-list__row > span{
  display: grid;
  min-width: 0;
}

.ft-list__row b{ color: var(--ink); }
.ft-list__row small{ font-size: 12px; color: var(--muted); }

.ft-list__row--total b{ font-weight: 800; }

.ft-pill{
  flex: none;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 10px;
}

.ft-pill--done{ color: #047857; background: #e1f5ec; }
.ft-pill--checking{ color: #1f5fd1; background: #e6efff; }
.ft-pill--waiting{ color: #8a6a00; background: #fdf6dc; }
.ft-pill--muted{ color: var(--muted); background: #eef1f6; }

.ft-num{
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.ft-mock__progress{
  margin: 0 0 14px;
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.ft-mock__progress div{
  height: 8px;
  border-radius: 999px;
  background: #e6eaf2;
  overflow: hidden;
}

.ft-mock__progress div::before{
  content: "";
  display: block;
  width: var(--p);
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.ft-mock__links{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.ft-mock__links span{
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
  background: #fff;
  border: 1px solid var(--border);
}

.ft-mock__sub{
  margin: 18px 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--accent);
}

.ft-mock__stats{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.ft-mock__stats div{
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: 10px;
}

.ft-mock__stats b{
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.ft-mock__stats span{
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}

/* ================= 3. TESTIMONIALS ================= */
/* Light blue wash that fades to white */
#testimonials{
  padding: 80px 0 88px;
  background: linear-gradient(180deg, #edf3ff 0%, #f6f9ff 45%, #fff 100%);
}

#testimonials .v2-head{ max-width: 800px; margin-bottom: 40px; }

/* Featured review on the left (two rows tall), supporting reviews on the right */
.reviews{
  display: grid;
  grid-template-columns: 1fr 1.9fr;
  gap: 20px;
  align-items: stretch;
}


.review-card{
  position: relative;
  margin: 0;
  background: #fff;
  border: 1px solid #dde5f1;
  border-radius: 18px;
  padding: 22px 24px;
  box-shadow: 0 1px 2px rgba(11,42,91,.04), 0 12px 32px rgba(11,42,91,.06);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.review-card:hover{
  transform: translateY(-3px);
  border-color: rgba(31,95,209,.35);
  box-shadow: 0 1px 2px rgba(11,42,91,.04), 0 18px 40px rgba(11,42,91,.10);
}

.review-card__stars{
  color: var(--v2-gold);
  font-size: 15px;
  letter-spacing: 2px;
  line-height: 1;
}

.review-card blockquote{
  flex: 1;
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-2);
}

.review-card blockquote p{ margin: 0; }

/* Short heading at the top of each supporting review */
.review-card .review-card__title{
  margin-bottom: 6px;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -.2px;
  font-weight: 700;
  color: var(--navy);
}

.review-card__who{
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 14px;
  border-top: 1px solid #edf1f7;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--muted);
}

.review-card__who strong{
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.review-card__size{ display: block; }

/* Headshot slot (not used until real customer photos are approved) */
.review-card__avatar{
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #e8f0ff;
  color: var(--navy);
  box-shadow: inset 0 0 0 1px rgba(31,95,209,.20);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .6px;
  object-fit: cover;
}

/* Featured review: pale blue card with an oversized quote mark as its one accent */
.review-card--featured{
  padding: 32px 36px 26px;
  gap: 16px;
  background: linear-gradient(160deg, #f6f9ff 0%, #eaf1ff 100%);
  border-color: rgba(31,95,209,.16);
}

.review-card__mark{
  display: block;
  height: 34px;
  margin-bottom: 14px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 88px;
  line-height: .9;
  color: var(--v2-blue);
}

.review-card--featured .review-card__stars{ margin-bottom: 14px; }

.review-card--featured .review-card__lead{
  margin: 0 0 16px;
  font-size: 30px;
  line-height: 1.25;
  letter-spacing: -.6px;
  font-weight: 800;
  color: var(--navy);
  text-wrap: balance;
}

/* Quote sits in the middle of any spare height so there's no gap above the author */
.review-card--featured blockquote{
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 18.5px;
  line-height: 1.65;
}

.review-card--featured .review-card__who{ border-top-color: rgba(31,95,209,.16); }

.review-card--featured .review-card__avatar{
  width: 52px;
  height: 52px;
  font-size: 16px;
  background: var(--navy);
  color: #fff;
  box-shadow: none;
}

/* Supporting reviews: 2x2 grid beside the featured card */
.reviews__cards{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* ================= 4. SECURITY ================= */
/* Compact navy band: heading on the left, 2x2 badges on the right (like the index.html banner) */
.v2-section--band{ padding: 36px 0; }

.trust-band{
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 2.2fr;
  gap: 40px;
  align-items: center;
}

.trust-band__head .v2-eyebrow{ margin-bottom: 8px; }

.trust-band__head h2{
  margin: 0;
  font-size: 32px;
  line-height: 1.12;
  letter-spacing: -.8px;
  font-weight: 800;
  text-wrap: balance;
}

.trust-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.trust-card{
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 18px;
}

.trust-card__icon{
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 17px;
}

.trust-card h3{
  margin: 0 0 2px;
  font-size: 16px;
  font-weight: 700;
}

.trust-card p{
  margin: 0;
  font-size: 14px;
}

/* Navy band (same look as the "Built for Enterprise Execution" banner on index.html) */
.v2-section--navy{
  position: relative;
  color: #fff;
  background:
    radial-gradient(700px 420px at 0% 0%, rgba(42,111,219,.35), transparent 70%),
    radial-gradient(600px 400px at 100% 100%, rgba(90,63,214,.28), transparent 70%),
    var(--navy);
}

.v2-section--navy .v2-eyebrow{ color: var(--v2-gold); }
.v2-section--navy .v2-head h2,
.v2-section--navy .trust-band__head h2{ color: #fff; }
.v2-section--navy .v2-head p{ color: rgba(255,255,255,.78); }

.v2-section--navy .trust-card{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.14);
  box-shadow: none;
  backdrop-filter: blur(8px);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.v2-section--navy .trust-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.11);
}

.v2-section--navy .trust-card__icon{
  background: rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.16);
  color: var(--v2-gold);
}

.v2-section--navy .trust-card h3{ color: #fff; }
.v2-section--navy .trust-card p{ color: rgba(255,255,255,.78); }

/* Give the CTA panel room to breathe when it follows a navy band */
.v2-section--navy + .v2-section--tight{ padding-top: var(--v2-section-pad); }

/* ================= 5. FINAL CTA ================= */
.cta-panel{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  border-radius: 28px;
  padding: 64px;
  color: #fff;
  background:
    radial-gradient(600px 400px at 100% 100%, rgba(143,182,255,.30), transparent 70%),
    radial-gradient(520px 360px at 0% 0%, rgba(90,63,214,.40), transparent 70%),
    var(--v2-gradient);
  box-shadow: 0 30px 80px rgba(11,42,91,.25);
}

.cta-panel__copy h2{
  margin: 0 0 14px;
  font-size: 40px;
  line-height: 1.12;
  letter-spacing: -1px;
  font-weight: 800;
}

.cta-panel__copy p{
  margin: 0;
  font-size: 18px;
  color: rgba(255,255,255,.8);
}

.cta-panel__video{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
}

/* ================= 6. FAQ & RESOURCES ================= */
.faq-layout{
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 32px;
  align-items: start;
}

.faq{
  display: grid;
  gap: 12px;
}

.faq details{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 0 24px;
}

.faq summary{
  cursor: pointer;
  list-style: none;
  padding: 20px 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.faq summary::-webkit-details-marker{ display: none; }

.faq summary::after{
  content: "+";
  color: var(--v2-blue);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

.faq details[open] summary::after{ content: "–"; }

.faq details p{ margin: 0 0 20px; }

.faq details a{
  color: var(--navy);
  font-weight: 700;
  text-underline-offset: 3px;
}

.resources__card{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px;
}

.resources__title{
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--v2-blue);
  margin-bottom: 14px;
}

.resources__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  font-weight: 600;
}

.resources__list a{
  color: var(--ink);
  text-decoration: none;
}

.resources__list a:hover{ color: var(--v2-blue); }

.resources__support{ margin-top: 28px; }

/* ================= REDUCED MOTION ================= */
@media (prefers-reduced-motion: reduce){
  /* Stop the logo scroll and show one wrapped set instead */
  .v2 .clients-strip__track{
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px var(--clients-gap);
    padding: 0 24px;
  }
  .v2 .clients-strip__item{ margin-right: 0; }
  .v2 .clients-strip__viewport::before,
  .v2 .clients-strip__viewport::after,
  .v2 .clients-strip__item--dup{ display: none; }

  /* Hero: the script doesn't run the loop, so it shows the finished return */
  .v2-stage,
  .v2-stage::before,
  .v2-stage *,
  .v2-stage *::before,
  .v2-stage *::after{ animation: none !important; transition: none !important; }

  .gs-tile,
  .gs-tile__arrow{ transition: none; }
  .gs-tile:hover,
  .gs-tile:focus-visible{ transform: none; }
}

/* ================= RESPONSIVE ================= */
@media (max-width:1279px){
  .feature-row,
  .trust-band,
  .cta-panel,
  .faq-layout{ grid-template-columns: 1fr; }

  .feature-row--flip .feature-row__copy{ order: 0; }
  .feature-row{ gap: 32px; }
  .feature-rows{ gap: 80px; }
  .v2-hiw{ margin-top: 80px; }
  .gs-tiles{ grid-template-columns: repeat(3, 1fr); }
  .trust-band{ gap: 20px; }
  .reviews{ grid-template-columns: 1fr; }
  .v2-hero__title{ font-size: 52px; }
  .v2-steps small{ display: none; }
}

@media (max-width:768px){
  .v2{ --v2-section-pad: 64px; }
  .ft-mock{ padding: 14px; }
  .ft-mock__brand{ margin: -14px -14px 14px; padding: 12px 14px; }
  .v2-hero{ padding-top: 48px; }
  .v2-hero__title{ font-size: 38px; letter-spacing: -1px; }
  .v2-hero__lead{ font-size: 17px; }
  /* Wraps to two lines on phones, so a rounded box instead of a full pill */
  .v2-hero .v2-hero__eyebrow{ margin-bottom: 16px; padding: 8px 14px; font-size: 13px; letter-spacing: .8px; border-radius: 14px; }
  .v2-stage{ margin-top: 48px; padding: 12px; border-radius: 20px; }
  .v2-window__bar em{ display: none; }
  .v2-window__body{ min-height: 200px; }

  /* Hero steps: 3 over 2, number over label. Six half-columns, each step spans two, so the second row is centered */
  .v2-steps{ grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 12px; }
  .v2-steps li{ grid-column: span 2; }
  .v2-steps li:nth-child(4){ grid-column: 2 / span 2; }
  .v2-steps li{ grid-template-columns: 1fr; justify-items: center; gap: 4px; padding: 10px 6px 12px; }
  .v2-steps__num{ grid-row: auto; width: 26px; height: 26px; font-size: 12px; }
  .v2-steps b{ font-size: 12.5px; }
  .flow-tag{ display: none; }
  .v2-caption{ padding: 14px 16px; margin-bottom: 12px; }
  .v2-caption__kicker{ font-size: 11.5px; }
  .v2-caption__item p{ font-size: 15px; }
  .v2-stage__hint{ margin: -4px 0 10px; text-align: center; }

  /* Hero animation stacks: docs row, worksheet, destinations row.
     minmax(0, …) and min-width: 0 keep the cards from running off the right edge. */
  .flow{ grid-template-columns: minmax(0, 1fr); gap: 20px; min-height: 0; padding: 20px 14px; }
  .flow > *,
  .flow__col > *{ min-width: 0; }
  .flow__link{ display: none; }
  .flow__col--docs{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .flow__col--dest{ gap: 8px; }
  .flow__col--docs .flow__title{ grid-column: 1 / -1; }
  .flow-soon{ grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 0; }
  .flow-soon span{ padding: 6px 4px; font-size: 11.5px; }
  .flow-doc span{ display: none; }
  .flow-doc,
  .flow-dest{ padding: 10px 8px; font-size: 13px; justify-content: center; text-align: center; }
  .flow-doc b{ font-size: 13px; }
  .flow__col--sheet{ padding: 14px; }
  .flow-row{ grid-template-columns: minmax(0, 1fr) auto 46px; gap: 8px; font-size: 13px; }
  .flow-row__state > i{ padding: 3px 7px; }

  /* Integrations visual: 2×2 destinations, pill drops under the label */
  .v2-integrations{ --int-gap: 32px; }
  .int-sheet{ padding: 14px 14px 4px; }
  .int-sheet__head em{ display: none; }
  .int-row{ grid-template-columns: 1fr auto; gap: 4px 8px; font-size: 13px; }
  .int-row i{ grid-column: 1; justify-self: start; }
  .int-dests{ grid-template-columns: 1fr 1fr; }
  .int-dests::before,
  .int-dest::before{ display: none; }
  .int-hub::after{ height: calc(var(--int-gap) * .75); }
  .int-dest{ min-height: 72px; }

  /* Client email visual: results stack, bus drops away */
  .v2-mail{ --int-gap: 32px; }
  .mail-msg{ padding: 14px; }
  .mail-msg__head div{ grid-template-columns: 56px minmax(0, 1fr); }
  .mail-results{ grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .mail-results::before,
  .mail-result::before{ display: none; }
  .gs-tiles{ grid-template-columns: 1fr 1fr; gap: 10px; }
  .gs-tile{ padding: 14px 12px 16px; }
  .gs-tile small{ display: none; }
  .gs-tiles--three{ grid-template-columns: 1fr; }
  .gs-tiles--three .gs-tile small{ display: block; }
  .v2-hiw{ padding: 20px 16px 16px; }
  .v2-hiw__head h3{ font-size: 24px; }
  .v2-head{ margin-bottom: 40px; }
  .v2-head h2{ font-size: 32px; }
  .feature-row__copy h3{ font-size: 26px; }
  .v2-shot{ padding: 18px; }
  .trust-grid{ grid-template-columns: 1fr; }
  .reviews__cards{ grid-template-columns: 1fr; }
  .review-card--featured{ padding: 26px 22px 22px; }
  .review-card--featured .review-card__lead{ font-size: 24px; }
  .review-card--featured blockquote{ font-size: 16.5px; }
  .trust-band__head h2{ font-size: 26px; }
  .cta-panel{ padding: 32px 24px; }
  .cta-panel__copy h2{ font-size: 30px; }
}