/*
 * IntoneSwift Clone — Test Page Stylesheet
 * Hand-coded (no Elementor, no GSAP). Scoped under .isw-page.
 * Content/images/structure are post 10015's own top-level container order
 * (0-7), which is also its actual render order. Component vocabulary
 * (mint statement bar, vertical-tabs mac-frame, scroll-linked drift) is
 * reused from includes/gladius-test/** and includes/audit-assurance-test/**
 * per the established site-wide pattern — see each section file's own
 * header comment for exactly which component it ports.
 */

body.page-id-15551 .rkch-spacer, body.page-id-10015 .rkch-spacer { display: none !important; height: 0 !important; }

.isw-page {
  --isw-primary: #233963;
  --isw-text: #1E2E4C;
  --isw-white: #FFFFFF;
  --isw-bg-light: #F6F9FB;
  --isw-mint: #D2FFEC;
  --isw-neutral-9: #F4F6F9;
  --isw-neutral-6: #A5ABB3;
  --isw-primary-80: #4F6182;
  --isw-primary-30: #BDC4D1;
  --isw-primary-20: #D3D7E0;
  --isw-accent5-25: #E6F9FC;
  --isw-accent5-5: #F5FEFF;
  --isw-accent: #6AC2B7;
  --isw-gradient-teal-green: linear-gradient(90deg, #6AC2B7 0%, #8AD6C0 50%, #8ADBBB 75%, #86DCAF 87.5%, #84DDA5 93.75%, #95E091 96.88%, #9FDD5F 100%);
  --isw-card-shadow: 0 10px 35px 0 rgba(35, 57, 99, 0.12);
  --isw-radius: 24px;

  position: relative;
  font-family: "Public Sans", sans-serif;
  color: var(--isw-text);
  background: var(--isw-bg-light);
}

.isw-page * { box-sizing: border-box; }
.isw-page img { max-width: 100%; height: auto; display: block; }

.isw-page section { padding: 96px 4vw; position: relative; z-index: 1; }
@media (max-width: 767px) { .isw-page section { padding: 56px 20px; } }

.isw-inner { max-width: 1280px; margin: 0 auto; position: relative; z-index: 1; }

.isw-page h1, .isw-page h2, .isw-page h3, .isw-page h4 {
  font-family: "Public Sans", sans-serif;
  color: var(--isw-text);
  font-weight: 700;
  margin: 0;
}
.isw-page p { margin: 0; line-height: 1.55; }

.isw-h2 {
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.2;
  font-weight: 700;
  text-wrap: balance;
}

.isw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  border: 2px solid var(--isw-primary);
  background: #fff;
  color: var(--isw-primary);
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease;
}
.isw-btn:hover, .isw-btn:focus-visible { background: var(--isw-primary); color: #fff; }

/* ===== SECTION-BLOCKS-MARKER: per-section CSS appended below this line ===== */
/* =====================================================================
   Section 0 — Hero (post 10015 container a7e7952).
   VIDEO background, not a static image — background_background:video,
   background_video_link 2025/11/Untitled-design-5.mp4. The poster JPG
   (background_image) is only Elementor's poster/fallback; it happens to be
   the exact same shared file Gladius's hero uses (verified live data, not
   a mistake). Real 50% black scrim: background_overlay_color #00000080.

   Unlike Gladius's hero (one centred wordmark + short tagline), Swift's
   hero also carries a second, independent content block: a headline +
   subtext anchored near the bottom-left of the viewport. That block
   (.isw-hero-headline) is deliberately NOT wrapped in .isw-inner — it needs
   its own absolute bottom-left position and width cap, which .isw-inner's
   auto-centred max-width would fight — and lives as a sibling of the
   centred .isw-hero-inner wordmark row, in source order after it so mobile
   flow (stack below the wordmark) falls out naturally once flex-direction
   switches to column.
   ===================================================================== */
.isw-hero {
  position: relative;
  min-height: 100vh;
  padding: 160px 4vw 120px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.isw-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
/* Real value from the live container (background_overlay_color #00000080).
   The white wordmark and headline both need it to stay legible over moving
   footage. */
.isw-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
  pointer-events: none;
}
/* Reduced-motion users keep the poster and never fetch the video file. */
@media (prefers-reduced-motion: reduce) {
  .isw-hero-video { display: none; }
}
.isw-hero-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.isw-hero-mark { width: min(720px, 82vw); height: auto; }

/* Bottom-left headline block — independent of the centred wordmark above. */
.isw-hero-headline {
  position: absolute;
  left: 80px;
  right: 80px;
  bottom: 90px;
  z-index: 2;
  max-width: 1280px;
  text-align: left;
}
.isw-hero-headline-title {
  margin: 0 0 14px;
  color: #fff;
  font-weight: 800;
  text-transform: capitalize;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.3;
}
/* This heading is an <h1> (the page had none). As a <p> it picked up
   line-height 1.55 from `.isw-page p` below, while colour and weight came from
   the class. As an <h1> it instead matches `.isw-page h1` above, which is
   specificity (0,1,1) and so BEATS the single class (0,1,0) -- that silently
   repainted it var(--isw-text) navy at weight 700 on a dark video background,
   i.e. nearly invisible. This selector is (0,2,1) so it wins, and it restores
   the exact values the <p> rendered with: #fff / 800 / 1.55. */
.isw-page h1.isw-hero-headline-title {
  color: #fff;
  font-weight: 800;
  line-height: 1.55;
}
.isw-hero-headline-sub {
  color: #fff;
  font-weight: 400;
  font-size: clamp(14px, 1.4vw, 20px);
  line-height: 1.5;
  max-width: 960px;
}

@media (max-height: 520px) and (orientation: landscape) {
  .isw-hero { min-height: auto; padding: 96px 4vw 56px !important; }
}

/* Tablet: keep the headline off the viewport edge without a fixed px gutter. */
@media (max-width: 1024px) {
  .isw-hero-headline { left: 5vw; right: 5vw; bottom: 60px; }
}

/* Mobile: drop out of absolute positioning entirely and join the wordmark's
   flex column so nothing overlaps or clips at narrow widths. */
@media (max-width: 767px) {
  .isw-hero {
    flex-direction: column;
    padding: 96px 20px 56px !important;
    gap: 32px;
  }
  .isw-hero-headline {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    max-width: none;
    text-align: center;
    padding: 0;
  }
  .isw-hero-headline-sub { max-width: none; }
}

/* =====================================================================
   Section 1 — "Data Integration Dashboard" floating mockup panels
   (post 10015 container 1a91ed8b). FULL WIDTH (Elementor
   content_width:full) — deliberately NOT wrapped in .isw-inner; the four
   tiles are positioned as percentages of the full section width, not a
   1280px-capped column. Padding is zeroed here to override the shared
   ".isw-page section" 96px/4vw rule so the panels track the true
   viewport edge to edge; overflow-x:clip (not hidden) allows the tiles'
   deliberate vertical bleed (e.g. tile b's bottom:-4%) while still
   preventing a horizontal scrollbar from full-bleed positioning.

   No JS here: initIswDashboard() in swift-test.js already finds
   .isw-dash-panels / .isw-dash-tile / [data-tile-from] and drives the
   scroll-linked drift (same mechanic as Gladius's break-chain collage).
   This block only sets each tile's static starting position; the script
   writes transform/opacity on top of it.
   ===================================================================== */
.isw-page section.isw-dash {
  min-height: 100vh;
  background: var(--isw-bg-light);
  position: relative;
  overflow-x: clip;
  padding: 0;
}

/* Establishes its OWN explicit min-height (rather than height:100%) so the
   tiles' percentage top/bottom offsets resolve against a real box height
   regardless of how the parent section's min-height computes. */
.isw-dash-panels {
  position: relative;
  width: 100%;
  min-height: 100vh;
}

.isw-dash-tile {
  position: absolute;
  display: block;
  background-repeat: no-repeat;
  will-change: transform, opacity;
}

.isw-dash-tile--a {
  left: 35%;
  bottom: 56%;
  width: 40%;
  height: 254px;
  background-size: contain;
  background-position: center center;
}
/* background-size:auto is intentional — this image renders at its native
   pixel size, not scaled to the box, matching the live container's own
   background_size:initial setting. */
.isw-dash-tile--b {
  left: 4%;
  bottom: -4%;
  width: 53.135%;
  height: 357px;
  background-size: auto;
  background-position: center center;
}
.isw-dash-tile--c {
  right: 31%;
  top: 29%;
  width: 12%;
  height: 134px;
  background-size: cover;
  background-position: center center;
}
.isw-dash-tile--d {
  left: -2%;
  bottom: 0%;
  width: 14%;
  height: 116px;
  background-size: cover;
  background-position: center center;
}

@media (max-width: 1024px) {
  .isw-page section.isw-dash { min-height: auto; }
  .isw-dash-panels {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 20px 0;
    min-height: 0;
  }
  .isw-dash-tile {
    position: static;
    width: 100% !important;
    height: 180px;
    /* each tile keeps its own desktop background-size/position rule above */
  }
}



/* =====================================================================
   Section 2 — "The Complete Data Management Solution."
   Ports Gladius's "Key Benefits" full-bleed navy facet-pattern card grid
   (.igl-benefits in gladius-test.css) renamed isw-. The facet PNG's URL
   is supplied per-instance via the --isw-solution-facet custom property
   set inline on the section (built with home_url() in the PHP file), so
   this static stylesheet only ever references var(--isw-solution-facet).
   Only one left-aligned heading here (no head-row paragraph), and 8
   cards instead of 10 — left in natural 3-column grid flow (3+3+2), so
   the last row's third cell sits empty; that is the design, not a gap
   to fill or force-stretch, exactly as Gladius's own 10-card version
   leaves its 10th card alone on a row.
   ===================================================================== */
.isw-page section.isw-solution {
  position: relative;
  background: var(--isw-text);
  overflow: hidden;
}
.isw-solution::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--isw-solution-facet);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  opacity: 0.16;
  pointer-events: none;
}
.isw-page .isw-solution-heading {
  margin: 0 0 48px;
  font-size: 42px;
  font-weight: 600;
  line-height: 1.1;
  color: #fff;
  text-align: left;
}
.isw-solution-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 26px;
}
.isw-solution-card {
  min-height: 114px;
  padding: 15px;
  border: 1px solid var(--isw-primary-20);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  background: transparent;
  transition: border-color 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
}
.isw-solution-card:hover, .isw-solution-card:focus-within {
  border-color: var(--isw-accent);
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-3px);
}
.isw-page .isw-solution-card h3 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: -0.5px;
  color: #fff;
}
.isw-page .isw-solution-card p { font-size: 14px; line-height: 20px; color: #fff; }

@media (max-width: 1100px) { .isw-solution-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  .isw-page .isw-solution-heading { font-size: 30px; margin-bottom: 32px; }
}
@media (max-width: 640px) {
  .isw-solution-grid { grid-template-columns: 1fr; gap: 16px; }
}


/* =====================================================================
   Section 3 — "Complex Data Migrations Become Faster, Safer, and More
   Transparent" heading beside a numbered steps list (post 10015 container
   1127137). Numbered-step card pattern (flat #F4F6F9 card, oversized 64px
   number hanging 40px above the card's top edge, 32px title, 16px body)
   ported from includes/gladius-test/css/gladius-test.css's .igl-chain /
   .igl-step block, renamed "igl-" -> "isw-". Unlike Gladius there is no
   lead sentence above the steps, so there is no .isw-migrations-lead rule.

   CONTENT NOTE: steps 004-005 (.isw-step--dt-only) are desktop/tablet-only
   on the live page (hide_mobile flags) — hidden at max-width:1024px so
   mobile visitors see only steps 001-003, all within a single <ol>.
   ===================================================================== */
.isw-page section.isw-migrations { background: #fff; padding: 100px 4vw; }
.isw-migrations-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 160px;
}
.isw-page .isw-migrations-title {
  flex: 0 1 469px;
  margin: 0;
  font-size: 42px;
  font-weight: 700;
  line-height: 1.2;
}
.isw-migrations-col { flex: 0 1 644px; min-width: 0; }
.isw-migrations-steps {
  list-style: none;
  margin: 0;
  padding: 36px 0 0;
  display: flex;
  flex-direction: column;
  gap: 66px;
}
.isw-step {
  position: relative;
  min-height: 158px;
  padding: 36px 30px 30px;
  background: var(--isw-neutral-9);
}
.isw-step-num {
  position: absolute;
  left: 30px;
  top: -40px;
  font-size: 64px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--isw-neutral-6);
  pointer-events: none;
}
.isw-page .isw-step-title {
  margin: 0 0 10px;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;
}
.isw-page .isw-step-text {
  max-width: 584px;
  font-size: 16px;
  line-height: 1.5;
}

@media (max-width: 1100px) {
  .isw-migrations-grid { flex-direction: column; align-items: stretch; gap: 40px; }
  .isw-page .isw-migrations-title { flex: none; font-size: 32px; }
  .isw-migrations-col { flex: none; }
}
@media (max-width: 1024px) {
  .isw-step--dt-only { display: none; }
}
@media (max-width: 767px) {
  .isw-page section.isw-migrations { padding: 56px 20px; }
  .isw-page .isw-migrations-title { font-size: 27px; }
  .isw-migrations-steps { gap: 52px; padding-top: 30px; }
  .isw-step { min-height: 0; padding: 28px 20px 22px; }
  .isw-step-num { left: 20px; top: -32px; font-size: 48px; }
  .isw-page .isw-step-title { font-size: 23px; }
}

/* =====================================================================
   Section 4 — mint statement bar (post 10015 container 40ae7a43).
   Same reusable component as .igl-intro (gladius-test) / .aat-unlock
   (audit-assurance): #D2FFEC mint ground, percentage padding (4% 5%,
   scales cleanly to 320px with no media query needed for the padding
   itself), copy left, white bordered button right, row layout collapsing
   to a stacked column under 900px. Per-page difference: heading is 29px
   (not Gladius's 40px) — this instance's own measured live size.
   ===================================================================== */
.isw-page section.isw-mint-bar {
  background: var(--isw-mint);
  padding: 4% 5%;
}
.isw-mint-bar-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.isw-mint-bar-copy { max-width: 783px; }
.isw-page .isw-mint-bar-h2 {
  margin: 0 0 32px;
  font-size: 29px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--isw-text);
}
.isw-page p.isw-mint-bar-sub {
  max-width: 682px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--isw-text);
}
.isw-mint-bar-btn { flex: 0 0 auto; }

@media (max-width: 900px) {
  .isw-mint-bar-inner { flex-direction: column; align-items: flex-start; gap: 24px; }
  .isw-page .isw-mint-bar-h2 { font-size: 24px; margin-bottom: 20px; }
  .isw-page p.isw-mint-bar-sub { font-size: 17px; }
}


/* =====================================================================
   Section 5 — "What Sets Us Apart" / "IntoneSwift® vs Generic Data
   Migration Tools" (post 10015 container 16c57e30).

   Head row is Gladius's section-4-differentiators.php head-row shape
   (.igl-diff-head) ported under isw- names: 42px heading pinned to a
   ~495px flex column opposite a right-aligned ~300px blurb, both aligned
   in one row.

   Below it, 3 cards side by side (stack to 1 column under 900px). Each
   card is two stacked/overlapping parts: a fixed-height white "logo
   panel" (real IntoneSwift logo on card 1; a shared decorative backdrop
   PNG + the competitor's wordmark as real bold text on cards 2-3), and a
   floating "stat card" pulled UP into the panel's bottom edge with a
   negative margin-top so it visually overlaps by 40px.

   HOVER MOTION (ported from includes/audit-assurance-test/**'s "Why It
   Matters to You?" cards, .aat-why-card/.aat-why-img/.aat-why-panel — the
   one section on this site whose design deliberately diverges from live
   to add interactivity): on hover/focus the logo/backdrop scales up
   inside its own clipped box, the stat card lifts further upward, and
   its tagline — which is clamped to one line at rest — expands to its
   full text. Same non-animatable-clamp trick: -webkit-line-clamp only
   ever supplies the rest-state ellipsis; max-height is what transitions.
   The tagline was chosen as the clamped field (not the larger stat-desc
   above it) because it is the SAME literal live copy Why-It-Matters
   already clamps successfully at a comparable box width — reusing a
   validated pairing of content-length and technique, not a fresh guess.
   Card height changed from min-height to a fixed height with overflow
   visible (matching Why-It-Matters exactly) so the hover growth spills
   below the card's own box instead of resizing the grid row underneath
   the other two cards.
   ===================================================================== */
.isw-page section.isw-cmp { background: var(--isw-bg-light); padding: 100px 4vw; }

.isw-cmp-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  margin-bottom: 54px;
}
.isw-page .isw-cmp-head .isw-h2 {
  flex: 0 1 495px;
  margin: 0;
  font-size: 42px;
  font-weight: 700;
  line-height: 1.2;
}
.isw-page p.isw-cmp-sub {
  flex: 0 1 300px;
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  text-align: right;
}

.isw-cmp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.isw-cmp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 506px;
  overflow: visible; /* hover growth spills below the box, grid row stays fixed */
}
.isw-cmp-card:focus-visible { outline: 2px solid var(--isw-primary); outline-offset: 3px; }

/* Logo panel — fixed height, white ground, white 8px border (a mat around
   the centered mark), overflow hidden so the backdrop PNG never spills
   even when the content inside scales up on hover. */
.isw-cmp-logo {
  position: relative;
  z-index: 1;
  height: 268px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 8px solid #fff;
  box-shadow: 0 1px 3px 0 rgba(35, 57, 99, 0.3);
  overflow: hidden;
}
.isw-cmp-logo-img {
  width: 70%;
  min-height: 186px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  transform-origin: 50% 30%;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
/* Cards 2-3: same 70%/186px box as the real logo, but filled with the
   shared decorative backdrop (background-size:contain) and the
   competitor's wordmark set as real bold uppercase text on top of it —
   no real Hevo/Fivetran logo asset was available. */
.isw-cmp-logo-backdrop {
  position: relative;
  width: 70%;
  min-height: 186px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  transform-origin: 50% 30%;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.isw-page .isw-cmp-wordmark {
  position: relative;
  z-index: 1;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--isw-primary);
  text-align: center;
}

/* Floating stat card — overlaps up into the logo panel's bottom edge via
   negative margin-top rather than absolute positioning, so it reflows
   cleanly at every breakpoint with no offset math to redo. The hover
   lift is a further TRANSFORM on top of this resting margin, not a
   change to the margin itself — transform doesn't trigger layout, so it
   animates smoothly and never fights the resting overlap. */
.isw-cmp-stat {
  position: relative;
  z-index: 2;
  margin: -40px 0 0;
  padding: 16px 16px 20px;
  background: #fff;
  border: 1px solid #EBEEF2;
  border-radius: 8px;
  box-shadow:
    0 -10px 52.8px 0 rgba(0, 0, 0, 0.18),
    0 35px 90px 0 rgba(35, 57, 99, 0.14);
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.45s ease,
              padding-bottom 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.isw-page p.isw-cmp-stat-line {
  margin: 0 0 10px;
  font-size: 16px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
}
.isw-page p.isw-cmp-stat-desc {
  margin: 0 0 10px;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.35;
}
/* Clamped to ONE line at rest, same technique as .aat-page p.aat-why-desc:
   -webkit-line-clamp only supplies the rest-state ellipsis (it cannot be
   animated); max-height is the property that actually transitions open. */
.isw-page p.isw-cmp-stat-tag {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--isw-primary-80);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  max-height: 1.5em;
  transition: max-height 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---- hover / focus ---- */
.isw-cmp-card:hover .isw-cmp-logo-img,
.isw-cmp-card:focus-within .isw-cmp-logo-img,
.isw-cmp-card:hover .isw-cmp-logo-backdrop,
.isw-cmp-card:focus-within .isw-cmp-logo-backdrop {
  transform: scale(1.18);
}
.isw-cmp-card:hover .isw-cmp-stat,
.isw-cmp-card:focus-within .isw-cmp-stat {
  transform: translateY(-20px);
  padding-bottom: 32px;
  box-shadow:
    0 -14px 60px 0 rgba(0, 0, 0, 0.22),
    0 40px 100px 0 rgba(35, 57, 99, 0.18);
}
.isw-cmp-card:hover p.isw-cmp-stat-tag,
.isw-cmp-card:focus-within p.isw-cmp-stat-tag {
  -webkit-line-clamp: 8;
  max-height: 9em;
}

/* Touch has no hover — a permanently-clamped tagline would be
   unreadable, the same trap the Why-It-Matters cards guard against. */
@media (hover: none) {
  .isw-cmp-card { height: auto; overflow: visible; }
  .isw-cmp-stat { transform: none; }
  .isw-page p.isw-cmp-stat-tag { -webkit-line-clamp: unset; max-height: none; overflow: visible; }
}
@media (prefers-reduced-motion: reduce) {
  .isw-cmp-logo-img, .isw-cmp-logo-backdrop, .isw-cmp-stat, .isw-page p.isw-cmp-stat-tag { transition: none; }
}

@media (max-width: 1100px) {
  .isw-cmp-card { height: auto; }
}
@media (max-width: 900px) {
  .isw-cmp-head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 36px; }
  .isw-page .isw-cmp-head .isw-h2 { flex: none; font-size: 30px; }
  .isw-page p.isw-cmp-sub { flex: none; max-width: none; text-align: left; }
  .isw-cmp-grid { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 640px) {
  .isw-page section.isw-cmp { padding: 56px 20px; }
  .isw-cmp-logo { height: 220px; }
  .isw-cmp-logo-img, .isw-cmp-logo-backdrop { min-height: 150px; }
  .isw-page .isw-cmp-wordmark { font-size: 26px; letter-spacing: 2px; }
  .isw-cmp-stat { margin-top: -30px; }
  .isw-page p.isw-cmp-stat-desc { font-size: 20px; }
}


/* =====================================================================
   Section 6 — "Real Transformation with IntoneSwift®".
   Same component as Gladius's section 6 "What Sets Us Apart"
   (.igl-apart-window + its 4-tab vertical accordion): a macOS browser
   window over a navy frame, a title band, and below it a 4-tab vertical
   accordion whose inactive rails hold a fixed width while the open pane
   takes the remainder (active width recomputed from tab COUNT by
   initIswVerticalTabs() in swift-test.js).

   This page's own real rail/pane split is 10% / 70% (3 collapsed rails at
   10% + one open pane at 70% = 100%) — different from Gladius's
   10.94% / 67.19%, so it is redeclared here rather than reusing Gladius's
   numbers.

   Titlebar is simpler than Gladius's: one centered heading only, no
   eyebrow line and no intro paragraph, so `.isw-tf-titlebar` has no
   eyebrow/intro rules to port.
   ===================================================================== */
:root { --isw-rail-w: 10%; --isw-pane-w: 70%; }

/* Per-tab accents — same shared 4-color palette (lilac / cream / cyan /
   blush) used on Gladius's and the homepage's version of this component. */
.isw-page {
  --isw-tab-01-head: #F5E6F9; --isw-tab-01-body: #FEFAFF;
  --isw-tab-02-head: #FFF5E6; --isw-tab-02-body: #FFFBF5;
  --isw-tab-03-head: #E6F9FC; --isw-tab-03-body: #F5FEFF;
  --isw-tab-04-head: #FFE6E6; --isw-tab-04-body: #FFF5F5;
}
.isw-tab-01 .isw-vtab-head { background: var(--isw-tab-01-head); }
.isw-tab-01 .isw-vtab-body { background: var(--isw-tab-01-body); }
.isw-tab-02 .isw-vtab-head { background: var(--isw-tab-02-head); }
.isw-tab-02 .isw-vtab-body { background: var(--isw-tab-02-body); }
.isw-tab-03 .isw-vtab-head { background: var(--isw-tab-03-head); }
.isw-tab-03 .isw-vtab-body { background: var(--isw-tab-03-body); }
.isw-tab-04 .isw-vtab-head { background: var(--isw-tab-04-head); }
.isw-tab-04 .isw-vtab-body { background: var(--isw-tab-04-body); }

.isw-tf-window {
  position: relative;
  background: var(--isw-text);
  border: 8px solid var(--isw-text);
  border-radius: var(--isw-radius);
  overflow: hidden;
  box-shadow: var(--isw-card-shadow);
}
.isw-page .isw-tf-chrome { display: block; width: 100%; height: auto; }

/* Left-aligned, NOT centered — confirmed against both the live page and
   Figma's own `left-[32px]` anchor for this heading. An earlier pass
   guessed centered since the titlebar has no other content to balance
   against, but live runs the heading flush left like every other
   titlebar in this component family. */
.isw-tf-titlebar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 186px;
  padding: 24px 33px;
  background: var(--isw-neutral-9);
  border-bottom: 1px solid var(--isw-primary-30);
  text-align: left;
}
.isw-page .isw-tf-title {
  margin: 0;
  font-size: 42px;
  font-weight: 700;
  line-height: 1.25;
}

.isw-vtabs {
  display: flex;
  width: 100%;
  min-height: 518px; /* floor only — actual height stretches to whichever tab's real content (paragraph + shots-container) is tallest, via flex align-items:stretch */
  overflow: hidden;
  background: var(--isw-neutral-9);
}
.isw-vtab { position: relative; display: flex; min-width: 0; }

@media (min-width: 1024.02px) {
  .isw-vtab { width: var(--isw-rail-w); transition: width 1s ease-in-out; }
  .isw-vtab.is-open { width: var(--isw-pane-w); }
}

.isw-vtab-rail {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-shrink: 0;
  width: 100%;
  min-height: 518px;
  margin: 0;
  padding: 30px 8px;
  font: inherit;
  color: inherit;
  text-align: center;
  background: var(--isw-neutral-9);
  border: 1px solid var(--isw-primary-30);
  border-top: 0;
  cursor: pointer;
  appearance: none;
}
.isw-vtab.is-open .isw-vtab-rail { display: none; }
.isw-vtab:first-child .isw-vtab-rail { border-bottom-left-radius: var(--isw-radius); }
.isw-vtab:last-child .isw-vtab-rail { border-bottom-right-radius: var(--isw-radius); }
/* Darken the rail edge that touches the open pane, same as Gladius. */
.isw-vtab.is-open + .isw-vtab .isw-vtab-rail { border-left-color: #657592; }

.isw-vtab-rail-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  font-weight: 600;
  color: var(--isw-text);
}
.isw-vtab-rail .isw-vtab-num { font-size: 32px; line-height: 1; }
.isw-vtab-rail .isw-vtab-name {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  font-size: 32px;
}
@supports (writing-mode: sideways-lr) {
  .isw-vtab-rail .isw-vtab-name { writing-mode: sideways-lr; transform: none; }
}

.isw-vtab-pane {
  position: relative;
  width: 100%;
  max-width: 0;
  height: 0;
  overflow: hidden;
  background: var(--isw-accent5-5);
  transition: max-width 1s ease-in-out, opacity 0.5s ease-in-out;
}
.isw-vtab-pane.is-open { max-width: 100%; height: auto; }

.isw-vtab-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 78px;
  padding: 0 31px;
  background: var(--isw-accent5-25);
  border: 1px solid var(--isw-primary-30);
  border-top: 0;
}
.isw-page .isw-vtab-head h3 {
  margin: 0;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.isw-vtab-head .isw-vtab-num { font-size: 32px; font-weight: 600; color: var(--isw-text); }

/* Real fix (found by comparing against live's own computed layout, not
   just its extracted percentages): the shots block is NOT an absolute
   overlay inset by a guessed pixel constant. Live's own `f5a55b3`
   container sits in NORMAL FLOW immediately after the paragraph — its own
   top edge is exactly the paragraph's bottom edge (measured live:
   text bottom 264.2px === shots-container top 264px) — and is a fixed
   440px (566px for tab 4) tall box in its own right, matching Elementor's
   real `min_height` on that container. The body itself is NOT a fixed
   440px box; it is auto-height, sized to paragraph + shots stacked.
   An earlier version absolutely-overlaid the shots at a guessed
   `inset:104px` (borrowed from Gladius, whose numbers happened to
   tolerate the approximation) — that guess only approximated Swift's
   real geometry for tab 1's first shot and was off by 100+ px for
   shots further down, cutting one shot into another. */
.isw-vtab-body {
  position: relative;
  padding: 40px 23px;
  background: var(--isw-accent5-5);
  border: 1px solid var(--isw-primary-30);
  border-top: 0;
  overflow: hidden;
}
.isw-page p.isw-vtab-text {
  position: relative;
  z-index: 2;
  max-width: 454px;
  font-size: 16px;
  line-height: 1.5;
}

/* Normal-flow block, NOT absolutely positioned — sits right after
   .isw-vtab-text with no forced gap, matching live exactly. Its own
   height (440px / 566px for tab 4) is the containing block for each
   shot's --t/--b percentage, which is what live's real _offset_y /
   _offset_y_end percentages are measured against. */
.isw-vtab-shots { position: relative; height: 440px; z-index: 1; pointer-events: none; }
.isw-tab-04 .isw-vtab-shots { height: 566px; }
.isw-vtab-shot {
  display: block;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
@media (min-width: 1024.02px) {
  .isw-vtab-shot {
    position: absolute;
    left: var(--l, auto);
    right: var(--r, auto);
    top: var(--t, auto);
    bottom: var(--b, auto);
    width: var(--w, auto);
    height: var(--h, auto);
    will-change: transform, opacity;
  }
}

@media (max-width: 1024px) {
  .isw-tf-window { border-width: 4px; border-radius: 16px; }
  .isw-page .isw-tf-chrome { display: none; }
  .isw-tf-titlebar {
    min-height: 0;
    padding: 32px 20px;
    border-top-left-radius: 0;
  }
  .isw-page .isw-tf-title { font-size: 27px; }

  .isw-vtabs { flex-direction: column; min-height: 0; }
  .isw-vtab { width: 100%; flex-direction: column; }
  .isw-vtab-rail {
    align-items: center;
    min-height: 0;
    padding: 16px 20px;
    border-radius: 0 !important;
  }
  .isw-vtab.is-open .isw-vtab-rail { display: flex; }
  .isw-vtab-rail-inner { flex-direction: row; gap: 14px; align-items: center; }
  .isw-vtab-rail .isw-vtab-name {
    writing-mode: horizontal-tb;
    transform: none;
    white-space: normal;
    font-size: 18px;
    text-align: left;
  }
  .isw-vtab-rail .isw-vtab-num { font-size: 20px; }

  /* Plain accordion below 1025px: a closed pane is display:none, so it
     leaves the a11y tree on its own and needs no width transition. */
  .isw-vtab-pane { display: none; max-width: 100%; height: auto; }
  .isw-vtab-pane.is-open { display: block; }
  .isw-vtab-head { display: none; }
  .isw-vtab-body { padding: 20px; }
  .isw-vtab-shots {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 18px;
  }
  .isw-vtab-shot {
    width: 100%;
    aspect-ratio: var(--ar, 4 / 3);
    border-radius: 6px;
    background-size: cover;
  }

  /* The pane's own header is hidden in the accordion, so the open RAIL has
     to carry the tab accent or every panel reads the same neutral grey. */
  .isw-tab-01.is-open .isw-vtab-rail { background: var(--isw-tab-01-head); }
  .isw-tab-02.is-open .isw-vtab-rail { background: var(--isw-tab-02-head); }
  .isw-tab-03.is-open .isw-vtab-rail { background: var(--isw-tab-03-head); }
  .isw-tab-04.is-open .isw-vtab-rail { background: var(--isw-tab-04-head); }
}


/* ===== Section 7: Final CTA ===== */
.isw-page section.isw-cta-section { background: var(--isw-bg-light); padding: 40px 4vw 100px; }
@media (max-width: 640px) { .isw-page section.isw-cta-section { padding: 24px 20px 56px; } }