/* ==========================================================
   PHDwin vs. ComboCurve — comparison page
   ----------------------------------------------------------
   Base design width: 1920px. Content column: 1660px, so the
   first pixel of text lands at x=130 on a 1920 screen, exactly
   as in the Figma file.

   Breakpoints
     Desktop  1920+        padding 100 / 60
     Laptop   1024–1919    padding 100 / 60
     Tablet    768–1439    padding  80 / 40   (content left-aligned)
     Mobile     ≤767       padding  50 / 20   (content left-aligned)

   Fonts
     Avant     already registered by the theme (ITC Avant Garde Std)
     DM Sans   loaded from Google Fonts in functions.php

   Type scale
     Badge          DM Sans 600  18 / 16  uppercase
     H1             Avant   600  80 / 90
     H2             Avant   600  60 / 70
     Lede           DM Sans 400  20 / 30
     Card heading   Avant   600  40 / 70
     Card body      DM Sans 400  18 / 28

   Section backgrounds alternate grey / white, matching the design.

   Every rule is scoped to its section class and the whole page
   sits inside .phdwin-compare, so nothing here leaks into
   Elementor or the rest of the theme.
   ========================================================== */

:root{
  /* PHDwin */
  --deep-red:#AC202D;
  --label-red:#A40A18;
  --badge-bg:#F7E7EA;
  --left-card-bg:#F9EEEF;
  --tint-pink:#F9EEEF;
  --right-card-bg:#F3F3F3;

  /* ComboCurve */
  --teal:#1EC592;
  --teal-dark:#00A88F;

  /* Neutral */
  --black:#232323;
  --dark-text:#000000;
  --divider:#BFBFBF;
  --dash-border:#C3CCD4;
  --slate:#6B7785;
  --page-bg:#F3F3F3;
  --white:#FFFFFF;

  /* Pricing mock bars */
  --bar-r1:#AC202D; --bar-r2:#C5636C; --bar-r3:#DA9BA0;
  --bar-g1:#6B7785; --bar-g2:#97A0AA; --bar-g3:#BCC2C8;
}

.phdwin-compare *{ box-sizing:border-box; margin:0; padding:0; }
.phdwin-compare{
  font-family:'DM Sans', sans-serif;
  color:var(--dark-text);
  background:var(--white);
}
.phdwin-compare img{ max-width:100%; }
.phdwin-compare a{ text-decoration:none; }

/* ==========================================================
   SECTION 1 — HERO
   ========================================================== */
/* Avant is already loaded by the live theme; this local face is only so the
   preview matches. Remove it in WordPress — the site serves the real files. */






img{max-width:100%;}

/* =========================================================
   HERO — base is 1920px
   ========================================================= */
.hero-section{
  background:var(--page-bg);
  padding:100px 60px;
}
.hero-inner{
  /* Section is full-bleed; the content column matches the design's 1660px,
     which lands at x=130 on a 1920 screen. Below 1780 the 60px padding takes over. */
  max-width:1660px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,874fr) minmax(0,647fr);
  gap:140px;
  align-items:center;
}

/* ---- badge ---- */
.badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--badge-bg);
  color:var(--phdwin-red);
  font-family:'DM Sans',sans-serif;
  font-weight:600;
  font-size:18px;
  line-height:16px;
  text-transform:uppercase;
  padding:12px 22px;
  border-radius:999px;
  margin-bottom:20px;
}
.badge svg{width:18px;height:19px;flex-shrink:0;}

/* ---- headings ---- */
.hero-section h1{
  font-family:'Avant',sans-serif;
  font-weight:600;
  font-size:80px;
  line-height:90px;
  text-transform:capitalize;
  color:var(--black);
  margin-bottom:30px;
}
.subheading{
  font-family:'DM Sans',sans-serif;
  font-weight:600;
  font-size:24px;
  line-height:100%;
  color:var(--phdwin-red);
  margin-bottom:24px;
}

/* ---- body ---- */
.hero-copy{ max-width:100%; }
.hero-copy p{
  font-family:'DM Sans',sans-serif;
  font-weight:400;
  font-size:24px;
  line-height:140%;
  color:var(--dark-text);
  margin-bottom:16px;
}
.hero-copy p:last-child{ margin-bottom:0; }

/* ---- button ---- */
.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:240px;
  height:58px;
  background:var(--deep-red);
  color:var(--white);
  font-family:'DM Sans',sans-serif;
  font-weight:700;
  font-size:22px;
  line-height:100%;
  text-transform:uppercase;
  text-decoration:none;
  border-radius:10px;
  margin-top:50px;
  transition:background .2s ease;
}
.btn-primary:hover{ background:#8E1622; }
.btn-primary:focus-visible{ outline:3px solid var(--phdwin-red); outline-offset:3px; }

/* ---- chart card ---- */
.chart-card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:20px;
  padding:40px;
  box-shadow:0 6px 24px rgba(0,0,0,.05);
}
.chart-card img{ display:block; width:100%; height:auto; }

/* =========================================================
   LAPTOP  (1440–1919)  padding 100 / 60
   ========================================================= */
@media (max-width:1919px){
  .hero-inner{
    max-width:1240px;
    grid-template-columns:minmax(0,874fr) minmax(0,647fr);
    gap:80px;
  }
  .badge{ font-size:14px; line-height:14px; padding:9px 18px; margin-bottom:16px; }
  .badge svg{ width:15px;height:16px; }
  .hero-section h1{ font-size:58px; line-height:66px; margin-bottom:22px; }
  .subheading{ font-size:19px; margin-bottom:18px; }
  .hero-copy p{ font-size:17px; margin-bottom:12px; }
  .btn-primary{ width:190px; height:48px; font-size:16px; margin-top:36px; }
  .chart-card{ padding:28px; border-radius:16px; }
}

/* =========================================================
   TABLET  (768–1439)  padding 80 / 40
   ========================================================= */
@media (max-width:1439px){
  .hero-section{ padding:80px 40px; }
  .hero-inner{
    grid-template-columns:1fr;
    gap:40px;
    max-width:none;
  }
  .hero-section h1{ font-size:46px; line-height:54px; }
  .subheading{ font-size:18px; }
  .hero-copy{ max-width:none; }
  .hero-copy p{ font-size:16px; }
}

/* =========================================================
   MOBILE  (≤767)  padding 50 / 20
   ========================================================= */
@media (max-width:767px){
  .hero-section{ padding:50px 20px; }
  .hero-inner{ gap:32px; }
  .badge{ font-size:12px; line-height:12px; padding:8px 14px; }
  .hero-section h1{ font-size:34px; line-height:40px; margin-bottom:16px; }
  .subheading{ font-size:16px; margin-bottom:14px; }
  .hero-copy p{ font-size:15px; }
  .btn-primary{ width:100%; max-width:240px; height:46px; font-size:15px; margin-top:28px; }
  .chart-card{ padding:18px; border-radius:14px; }
}

/* ==========================================================
   SECTION 2 — AT A GLANCE TABLE
   ========================================================== */
/* =========================================================
   SECTION 2 — base 1920
   ========================================================= */
.comparison-section{
  background:var(--white);
  padding:100px 60px;
}
.comparison-section .section-inner{
  max-width:1660px;
  margin:0 auto;
}

.comparison-section .section-header{
  text-align:center;
  margin-bottom:44px;
}

.comparison-section .badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--badge-bg);
  color:var(--deep-red);
  font-family:'DM Sans',sans-serif;
  font-weight:600;
  font-size:18px;
  line-height:16px;
  text-transform:uppercase;
  padding:12px 22px;
  border-radius:999px;
  margin-bottom:20px;
}
.comparison-section .badge svg{ width:18px; height:19px; flex-shrink:0; }

.comparison-section h2{
  font-family:'Avant',sans-serif;
  font-weight:600;
  font-size:60px;
  line-height:70px;
  text-transform:capitalize;
  color:var(--black);
}

/* ---- table ---- */
.comparison-section .table-wrapper{
  border-radius:20px;
  overflow:hidden;
}
.comparison-section table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}

.comparison-section thead th{
  background:var(--deep-red);
  color:var(--white);
  font-family:'Avant',sans-serif;
  font-weight:600;
  font-size:28px;
  line-height:50px;
  text-transform:capitalize;
  text-align:left;
  padding:15px 33px;
}
.comparison-section thead th:nth-child(1){ width:25.3%; }
.comparison-section thead th:nth-child(2){ width:37.7%; padding-left:52px; padding-right:44px; }
.comparison-section thead th:nth-child(3){ width:37.0%; padding-left:52px; padding-right:44px; }

.comparison-section tbody th,
.comparison-section tbody td{
  font-family:'DM Sans',sans-serif;
  font-weight:500;
  font-size:20px;
  line-height:28px;
  color:var(--dark-text);
  text-align:left;
  vertical-align:middle;
  padding:18px 31px;
  border-bottom:1px solid var(--divider);
}
.comparison-section tbody th{ background:var(--col-grey); }
.comparison-section tbody td:nth-of-type(1){ background:var(--tint-pink); padding-left:52px; padding-right:44px; }
.comparison-section tbody td:nth-of-type(2){ background:var(--col-grey); padding-left:52px; padding-right:44px; }
.comparison-section tbody tr:last-child th,
.comparison-section tbody tr:last-child td{ border-bottom:none; }

/* =========================================================
   LAPTOP  (≤1919)  padding 100 / 60
   ========================================================= */
@media (max-width:1919px){
  .comparison-section .section-inner{ max-width:1240px; }
  .comparison-section .badge{ font-size:14px; line-height:14px; padding:9px 18px; margin-bottom:16px; }
  .comparison-section .badge svg{ width:15px; height:16px; }
  .comparison-section h2{ font-size:44px; line-height:52px; }
  .comparison-section .section-header{ margin-bottom:32px; }
  .comparison-section thead th{ font-size:21px; line-height:36px; padding:11px 24px; }
  .comparison-section thead th:nth-child(2),
  .comparison-section thead th:nth-child(3){ padding-left:38px; }
  .comparison-section tbody th,
  .comparison-section tbody td{ font-size:15px; line-height:21px; padding:14px 24px; }
  .comparison-section tbody td:nth-of-type(1),
  .comparison-section tbody td:nth-of-type(2){ padding-left:38px; }
  .comparison-section .table-wrapper{ border-radius:15px; }
}

/* =========================================================
   TABLET  (≤1439)  padding 80 / 40
   ========================================================= */
@media (max-width:1439px){
  .comparison-section{ padding:80px 40px; }
  .comparison-section .section-inner{ max-width:none; }
  .comparison-section .section-header{ text-align:left; }
  .comparison-section h2{ font-size:36px; line-height:44px; }
  .comparison-section thead th{ font-size:18px; line-height:30px; padding:10px 18px; }
  .comparison-section thead th:nth-child(2),
  .comparison-section thead th:nth-child(3){ padding-left:26px; }
  .comparison-section tbody th,
  .comparison-section tbody td{ font-size:14px; line-height:20px; padding:12px 18px; }
  .comparison-section tbody td:nth-of-type(1),
  .comparison-section tbody td:nth-of-type(2){ padding-left:26px; }
}

/* =========================================================
   MOBILE  (≤767)  padding 50 / 20
   The table collapses into one card per row: the feature name
   becomes the card header, and each value is labelled with the
   column it came from, so nothing scrolls sideways.
   ========================================================= */
@media (max-width:767px){
  .comparison-section{ padding:50px 20px; }
  .comparison-section .section-header{ text-align:left; margin-bottom:24px; }
  .comparison-section .badge{ font-size:12px; line-height:12px; padding:8px 14px; margin-bottom:14px; }
  .comparison-section .badge svg{ width:13px; height:14px; }
  .comparison-section h2{ font-size:26px; line-height:32px; }

  .comparison-section .table-wrapper{
    border-radius:0;
    overflow:visible;
  }
  .comparison-section table,
  .comparison-section tbody,
  .comparison-section tbody tr,
  .comparison-section tbody th,
  .comparison-section tbody td{
    display:block;
    width:100%;
  }
  .comparison-section thead{
    position:absolute;
    width:1px; height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
  }

  .comparison-section tbody tr{
    border-radius:14px;
    overflow:hidden;
    margin-bottom:16px;
    border:1px solid var(--divider);
  }
  .comparison-section tbody tr:last-child{ margin-bottom:0; }

  .comparison-section tbody th{
    background:var(--deep-red);
    color:var(--white);
    font-family:'Avant',sans-serif;
    font-weight:600;
    font-size:17px;
    line-height:24px;
    padding:12px 16px;
    border-bottom:none;
  }

  .comparison-section tbody td{
    font-size:14px;
    line-height:21px;
    padding:12px 16px 14px;
    border-bottom:1px solid var(--divider);
  }
  .comparison-section tbody td:last-child{ border-bottom:none; }
  .comparison-section tbody td:nth-of-type(1){ background:var(--tint-pink); padding-left:16px; padding-right:16px; }
  .comparison-section tbody td:nth-of-type(2){ background:var(--col-grey); padding-left:16px; padding-right:16px; }

  .comparison-section tbody td::before{
    content:attr(data-label);
    display:block;
    font-family:'DM Sans',sans-serif;
    font-weight:600;
    font-size:12px;
    line-height:16px;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--deep-red);
    margin-bottom:4px;
  }
  .comparison-section tbody td:nth-of-type(2)::before{ color:#00A88F; }
}

/* ==========================================================
   SECTION 3 — BUILT FOR THE WORK
   ========================================================== */
/* =========================================================
   SECTION 3 — base 1920
   ========================================================= */
.work-section{
  background:var(--page-bg);
  padding:100px 60px;
}
.work-section .section-inner{
  max-width:1660px;
  margin:0 auto;
}

.work-section .section-header{
  text-align:center;
  margin-bottom:46px;
}
.work-section .badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--badge-bg);
  color:var(--deep-red);
  font-weight:600;
  font-size:18px;
  line-height:16px;
  text-transform:uppercase;
  padding:12px 22px;
  border-radius:999px;
  margin-bottom:18px;
}
.work-section .badge svg{ width:18px; height:19px; flex-shrink:0; }

.work-section h2{
  font-family:'Avant',sans-serif;
  font-weight:600;
  font-size:60px;
  line-height:70px;
  text-align:center;
  text-transform:capitalize;
  color:var(--black);
}

/* ---- cards: both 805 x 509, 50px gutter ---- */
.work-section .cards-row{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:50px;
  align-items:stretch;
}
.work-section .work-card{
  min-height:509px;
  border-radius:30px;
  padding:37px 37px 32px;
  display:flex;
  flex-direction:column;
}
.work-section .work-card.left{
  background:var(--left-card-bg);
  border:1px solid rgba(172,32,45,.3);
}
.work-section .work-card.right{
  background:var(--white);
  border:0.3px solid transparent;
}

.work-section .work-card h3{
  font-family:'Avant',sans-serif;
  font-weight:600;
  font-size:40px;
  line-height:70px;
  text-transform:capitalize;
  color:var(--black);
  margin-bottom:6px;
}
.work-section .work-card p{
  font-family:'DM Sans',sans-serif;
  font-weight:400;
  font-size:18px;
  line-height:28px;
  color:var(--dark-text);
  margin-bottom:18px;
}
.work-section .work-card p:last-child{ margin-bottom:0; }

/* =========================================================
   LAPTOP  (≤1919)  padding 100 / 60
   ========================================================= */
@media (max-width:1919px){
  .work-section .section-inner{ max-width:1240px; }
  .work-section .badge{ font-size:14px; line-height:14px; padding:9px 18px; margin-bottom:14px; }
  .work-section .badge svg{ width:15px; height:16px; }
  .work-section h2{ font-size:44px; line-height:52px; }
  .work-section .section-header{ margin-bottom:34px; }
  .work-section .cards-row{ gap:38px; }
  .work-section .work-card{ min-height:0; padding:28px; border-radius:22px; }
  .work-section .work-card h3{ font-size:29px; line-height:44px; }
  .work-section .work-card p{ font-size:15px; line-height:23px; margin-bottom:14px; }
}

/* =========================================================
   TABLET  (≤1439)  padding 80 / 40
   ========================================================= */
@media (max-width:1439px){
  .work-section{ padding:80px 40px; }
  .work-section .section-inner{ max-width:none; }
  .work-section .section-header{ text-align:left; }
  .work-section h2{ font-size:36px; line-height:44px; text-align:left; }
  .work-section .cards-row{
    grid-template-columns:1fr;
    gap:24px;
  }
  .work-section .work-card{ padding:26px; }
  .work-section .work-card h3{ font-size:26px; line-height:38px; }
}

/* =========================================================
   MOBILE  (≤767)  padding 50 / 20
   ========================================================= */
@media (max-width:767px){
  .work-section{ padding:50px 20px; }
  .work-section .section-header{ text-align:left; margin-bottom:24px; }
  .work-section .badge{ font-size:12px; line-height:12px; padding:8px 14px; }
  .work-section .badge svg{ width:13px; height:14px; }
  .work-section h2{ font-size:26px; line-height:32px; text-align:left; }
  .work-section .cards-row{ gap:16px; }
  .work-section .work-card{ padding:20px; border-radius:18px; }
  .work-section .work-card h3{ font-size:22px; line-height:30px; margin-bottom:8px; }
  .work-section .work-card p{ font-size:14px; line-height:22px; margin-bottom:12px; }
}

/* ==========================================================
   SECTION 4 — CLOUD VS DATA CUSTODY
   ========================================================== */
/* =========================================================
   SECTION 4 — base 1920
   ========================================================= */
.custody-section{
  background:var(--white);
  padding:100px 60px;
}
.custody-section .section-inner{ max-width:1660px; margin:0 auto; }

.custody-section .section-header{ text-align:center; margin-bottom:44px; }
.custody-section .badge{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--badge-bg); color:var(--deep-red);
  font-weight:600; font-size:18px; line-height:16px;
  text-transform:uppercase; padding:12px 22px; border-radius:999px;
  margin-bottom:18px;
}
.custody-section .badge svg{ width:18px; height:19px; flex-shrink:0; }

.custody-section h2{
  font-family:'Avant',sans-serif;
  font-weight:600; font-size:60px; line-height:70px;
  text-transform:capitalize; color:var(--black);
  margin-bottom:14px;
}
.custody-section .lede{
  font-weight:400; font-size:20px; line-height:30px;
  text-align:center; color:var(--dark-text);
}
.custody-section .lede-red{
  font-weight:400; font-size:20px; line-height:30px;
  text-align:center; color:var(--deep-red);
}

/* ---- cards: 974 + 50 + 636 = 1660 ---- */
.custody-section .cards-row{
  display:grid;
  grid-template-columns:974fr 636fr;
  gap:50px;
  align-items:stretch;
}
.custody-section .approach-card{
  min-height:749px;
  border-radius:30px;
  padding:34px 36px;
  display:flex;
  flex-direction:column;
}
.custody-section .approach-card.left{
  background:var(--left-card-bg);
  border:1px solid rgba(172,32,45,.3);
}
.custody-section .approach-card.right{
  background:var(--right-card-bg);
}

.custody-section .approach-label{
  font-weight:500; font-size:24px; line-height:26px;
  color:var(--label-red);
  margin-bottom:6px;
}
.custody-section .approach-label.teal{ color:var(--teal); }

.custody-section .approach-card h3{
  font-family:'Avant',sans-serif;
  font-weight:600; font-size:40px; line-height:70px;
  text-transform:capitalize; color:var(--black);
  margin-bottom:8px;
}
.custody-section .approach-card p{
  font-weight:400; font-size:18px; line-height:28px;
  color:var(--dark-text);
  margin-bottom:22px;
}
.custody-section .approach-card p:last-child{ margin-bottom:0; }

.custody-section .diagram-img{
  width:100%; height:auto; display:block;
  margin:6px 0 22px;
}

.custody-section .icon-list{
  display:flex; flex-direction:column;
  gap:25px;
  margin-bottom:28px;
}
.custody-section .icon-row{ display:flex; align-items:center; gap:15px; }
.custody-section .icon-row svg{ width:56px; height:56px; flex-shrink:0; }
.custody-section .icon-row span{
  font-weight:400; font-size:18px; line-height:28px;
  color:var(--dark-text);
}

/* =========================================================
   LAPTOP  (≤1919)
   ========================================================= */
@media (max-width:1919px){
  .custody-section .section-inner{ max-width:1240px; }
  .custody-section .badge{ font-size:14px; line-height:14px; padding:9px 18px; margin-bottom:14px; }
  .custody-section .badge svg{ width:15px; height:16px; }
  .custody-section h2{ font-size:44px; line-height:52px; margin-bottom:10px; }
  .custody-section .lede,
  .custody-section .lede-red{ font-size:16px; line-height:24px; }
  .custody-section .section-header{ margin-bottom:32px; }
  .custody-section .cards-row{ gap:38px; }
  .custody-section .approach-card{ min-height:0; padding:26px 28px; border-radius:22px; }
  .custody-section .approach-label{ font-size:18px; line-height:22px; }
  .custody-section .approach-card h3{ font-size:29px; line-height:46px; }
  .custody-section .approach-card p{ font-size:15px; line-height:23px; margin-bottom:18px; }
  .custody-section .icon-row svg{ width:44px; height:44px; }
  .custody-section .icon-row span{ font-size:15px; line-height:23px; }
  .custody-section .icon-list{ gap:20px; }
}

/* =========================================================
   TABLET  (≤1439)  padding 80 / 40 — left aligned
   ========================================================= */
@media (max-width:1439px){
  .custody-section{ padding:80px 40px; }
  .custody-section .section-inner{ max-width:none; }
  .custody-section .section-header{ text-align:left; }
  .custody-section h2{ font-size:36px; line-height:44px; }
  .custody-section .lede,
  .custody-section .lede-red{ text-align:left; }
  .custody-section .cards-row{ grid-template-columns:1fr; gap:24px; }
  .custody-section .approach-card{ padding:26px; }
  .custody-section .approach-card h3{ font-size:26px; line-height:38px; }
}

/* =========================================================
   MOBILE  (≤767)  padding 50 / 20 — left aligned
   ========================================================= */
@media (max-width:767px){
  .custody-section{ padding:50px 20px; }
  .custody-section .section-header{ text-align:left; margin-bottom:24px; }
  .custody-section .badge{ font-size:12px; line-height:12px; padding:8px 14px; }
  .custody-section .badge svg{ width:13px; height:14px; }
  .custody-section h2{ font-size:26px; line-height:32px; }
  .custody-section .lede,
  .custody-section .lede-red{ font-size:14px; line-height:22px; }
  .custody-section .cards-row{ gap:16px; }
  .custody-section .approach-card{ padding:20px; border-radius:18px; }
  .custody-section .approach-label{ font-size:16px; line-height:20px; }
  .custody-section .approach-card h3{ font-size:22px; line-height:30px; }
  .custody-section .approach-card p{ font-size:14px; line-height:22px; margin-bottom:14px; }
  .custody-section .icon-row svg{ width:38px; height:38px; }
  .custody-section .icon-row span{ font-size:14px; line-height:22px; }
  .custody-section .icon-list{ gap:16px; }
}

/* ==========================================================
   SECTION 5 — DETERMINISTIC VS PROBABILISTIC
   ========================================================== */
/* =========================================================
   SECTION 5 — base 1920
   ========================================================= */
.engines-section{ background:var(--page-bg); padding:100px 60px; }
.engines-section .section-inner{ max-width:1660px; margin:0 auto; }

.engines-section .section-header{ text-align:center; margin-bottom:44px; }
.engines-section .badge{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--badge-bg); color:var(--deep-red);
  font-weight:600; font-size:18px; line-height:16px;
  text-transform:uppercase; padding:12px 22px; border-radius:999px;
  margin-bottom:18px;
}
.engines-section .badge svg{ width:18px; height:19px; flex-shrink:0; }
.engines-section h2{
  font-family:'Avant',sans-serif;
  font-weight:600; font-size:60px; line-height:70px;
  text-transform:capitalize; color:var(--black);
  margin-bottom:14px;
}
.engines-section .lede{
  font-weight:400; font-size:20px; line-height:30px;
  text-align:center; color:var(--dark-text);
  max-width:760px; margin:0 auto;
}

/* ---- cards: 835 + 50 + 775 = 1660 ---- */
.engines-section .engines-row{
  display:grid;
  grid-template-columns:835fr 775fr;
  gap:50px;
  align-items:start;
}
.engines-section .engine-card{
  min-height:782px;
  border-radius:30px;
  padding:70px;
  display:flex;
  flex-direction:column;
}
.engines-section .engine-card.left{
  background:var(--left-card-bg);
  border:1px solid rgba(172,32,45,.3);
}
.engines-section .engine-card.right{
  background:transparent;
}

.engines-section .engine-head{
  display:flex; align-items:center; gap:20px;
  margin-bottom:26px;
}
.engines-section .engine-head svg{ width:52px; height:52px; flex-shrink:0; }
.engines-section .engine-head h3{
  font-family:'Avant',sans-serif;
  font-weight:600; font-size:28px; line-height:40px;
  text-transform:capitalize; color:var(--black);
}

.engines-section .chart-block{ margin-bottom:26px; }
.engines-section .chart-area{ position:relative; padding-left:42px; }
.engines-section .axis-label{
  position:absolute; left:0; top:2px;
  font-weight:400; font-size:18px; line-height:100%;
}
.engines-section .axis-label.red{ color:var(--deep-red); }
.engines-section .axis-label.teal{ color:var(--teal); }
.engines-section .chart-img{ width:100%; height:auto; display:block; }
.engines-section .chart-caption{
  text-align:center;
  font-weight:400; font-size:18px; line-height:100%;
  margin-top:14px;
}
.engines-section .chart-caption.red{ color:var(--deep-red); }
.engines-section .chart-caption.teal{ color:var(--teal); }

.engines-section .engine-card p{
  font-weight:400; font-size:18px; line-height:28px;
  color:var(--dark-text);
}

/* =========================================================
   LAPTOP  (≤1919)
   ========================================================= */
@media (max-width:1919px){
  .engines-section .section-inner{ max-width:1240px; }
  .engines-section .badge{ font-size:14px; line-height:14px; padding:9px 18px; margin-bottom:14px; }
  .engines-section .badge svg{ width:15px; height:16px; }
  .engines-section h2{ font-size:44px; line-height:52px; margin-bottom:10px; }
  .engines-section .lede{ font-size:16px; line-height:24px; }
  .engines-section .section-header{ margin-bottom:32px; }
  .engines-section .engines-row{ gap:38px; }
  .engines-section .engine-card{ min-height:0; padding:34px; border-radius:22px; }
  .engines-section .engine-head{ gap:14px; margin-bottom:20px; }
  .engines-section .engine-head svg{ width:48px; height:48px; }
  .engines-section .engine-head h3{ font-size:22px; line-height:32px; }
  .engines-section .axis-label,
  .engines-section .chart-caption{ font-size:14px; }
  .engines-section .chart-area{ padding-left:32px; }
  .engines-section .engine-card p{ font-size:15px; line-height:23px; }
}

/* =========================================================
   TABLET  (≤1439)  padding 80 / 40 — left aligned
   ========================================================= */
@media (max-width:1439px){
  .engines-section{ padding:80px 40px; }
  .engines-section .section-inner{ max-width:none; }
  .engines-section .section-header{ text-align:left; }
  .engines-section h2{ font-size:36px; line-height:44px; }
  .engines-section .lede{ text-align:left; margin:0; max-width:none; }
  .engines-section .engines-row{ grid-template-columns:1fr; gap:24px; }
  .engines-section .engine-card{ padding:28px; }
  .engines-section .engine-head h3{ font-size:21px; line-height:30px; }
}

/* =========================================================
   MOBILE  (≤767)  padding 50 / 20 — left aligned
   ========================================================= */
@media (max-width:767px){
  .engines-section{ padding:50px 20px; }
  .engines-section .section-header{ text-align:left; margin-bottom:24px; }
  .engines-section .badge{ font-size:12px; line-height:12px; padding:8px 14px; }
  .engines-section .badge svg{ width:13px; height:14px; }
  .engines-section h2{ font-size:26px; line-height:32px; }
  .engines-section .lede{ font-size:14px; line-height:22px; }
  .engines-section .engines-row{ gap:16px; }
  .engines-section .engine-card{ padding:20px; border-radius:18px; }
  .engines-section .engine-head{ gap:12px; margin-bottom:16px; }
  .engines-section .engine-head svg{ width:40px; height:40px; }
  .engines-section .engine-head h3{ font-size:20px; line-height:28px; }
  .engines-section .chart-area{ padding-left:26px; }
  .engines-section .axis-label,
  .engines-section .chart-caption{ font-size:13px; }
  .engines-section .engine-card p{ font-size:14px; line-height:22px; }
}

/* ==========================================================
   SECTION 6 — LENDER / AUDITOR HANDOFF
   ========================================================== */
/* =========================================================
   SECTION 6 — base 1920
   ========================================================= */
.handoff-section{ background:var(--white); padding:100px 60px; }
.handoff-section .section-inner{ max-width:1660px; margin:0 auto; }

.handoff-section .section-header{ margin-bottom:46px; }
.handoff-section .badge{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--badge-bg); color:var(--deep-red);
  font-weight:600; font-size:18px; line-height:16px;
  text-transform:uppercase; padding:12px 22px; border-radius:999px;
  margin-bottom:16px;
}
.handoff-section .badge svg{ width:18px; height:19px; flex-shrink:0; }
.handoff-section h2{
  font-family:'Avant',sans-serif;
  font-weight:600; font-size:60px; line-height:70px;
  text-transform:capitalize; color:var(--black);
  margin-bottom:14px;
  max-width:1000px;
}
.handoff-section .lede{
  font-weight:400; font-size:20px; line-height:30px;
  color:var(--dark-text);
  max-width:900px;
}

/* ---- flow groups ---- */
.handoff-section .flow-group{ margin-bottom:46px; }
.handoff-section .flow-group:last-child{ margin-bottom:0; }

.handoff-section .flow-label{
  font-family:'Avant',sans-serif;
  font-weight:600; font-size:24px; line-height:70px;
  text-transform:capitalize;
}
.handoff-section .flow-label.red{ color:var(--deep-red); }
.handoff-section .flow-label.teal{ color:var(--teal); }

.handoff-section .flow-row{
  display:flex;
  align-items:center;
  margin-bottom:22px;
}

/* PHDwin row — boxes 294 / 264 / 294 / pill 300, arrows 40px clear each side */
.handoff-section .flow-box{
  height:114px;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  border-radius:14px;
  font-weight:700; font-size:20px; line-height:26px;
  flex-shrink:0;
  padding:10px 18px;
}
.handoff-section .flow-box.solid{
  width:294px;
  background:var(--deep-red);
  color:var(--white);
}
.handoff-section .flow-box.file{
  width:264px;
  background:var(--white);
  border:2.14px solid var(--deep-red);
  color:var(--deep-red);
  justify-content:space-between;
  gap:14px;
  padding:16px 22px;
}
.handoff-section .flow-box.file .doc-lines svg{ display:block; width:90px; height:61px; }
.handoff-section .flow-box.tint{
  width:294px;
  background:var(--tint-pink);
  border:2.14px solid var(--deep-red);
  color:var(--deep-red);
  flex-direction:column;
  gap:2px;
}
.handoff-section .flow-box.tint span{ font-weight:400; }

.handoff-section .flow-pill{
  width:300px; height:60px;
  display:flex; align-items:center; justify-content:center;
  border:1.61px solid var(--deep-red);
  border-radius:999px;
  color:var(--deep-red);
  font-weight:700; font-size:20px; line-height:26px;
  text-transform:uppercase;
  flex-shrink:0;
}

.handoff-section .flow-arrow{
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  width:158px;               /* 40px clear + 78px arrow + 40px clear */
}
.handoff-section .flow-arrow svg{ display:block; width:78px; height:22px; }

/* ComboCurve row — dashed boxes 284 / 413 / 284, gaps 92 and 6 */
.handoff-section .flow-row.combo{ align-items:center; }
.handoff-section .flow-box.dashed{
  height:208px;
  background:var(--white);
  border:1px dashed var(--dash-border);
  border-radius:14px;
  color:var(--slate);
  font-weight:400;
  font-size:20px;
  line-height:26px;
}
.handoff-section .flow-box.dashed.w1{ width:284px; }
.handoff-section .flow-box.dashed.w2{ width:413px; }
.handoff-section .flow-box.dashed.w3{ width:284px; }

/* dashed connector that bridges the gap between the boxes */
.handoff-section .flow-dash{
  flex-shrink:0;
  border-top:1px dashed var(--dash-border);
  align-self:center;
}
.handoff-section .flow-dash.g1{ width:92px; }
.handoff-section .flow-dash.g2{ width:6px; }

.handoff-section .platform-note{
  display:flex; align-items:center; gap:16px;
  flex-shrink:0;
  margin-left:46px;
}
.handoff-section .platform-note svg{ width:44px; height:44px; flex-shrink:0; }
.handoff-section .platform-note span{
  font-weight:700; font-size:20px; line-height:26px;
  text-transform:uppercase;
  color:var(--slate);
}

.handoff-section .flow-desc{
  font-weight:400; font-size:20px; line-height:30px;
  color:var(--dark-text);
}

/* =========================================================
   LAPTOP  (≤1919)
   ========================================================= */
@media (max-width:1919px){
  .handoff-section .section-inner{ max-width:1240px; }
  .handoff-section .badge{ font-size:14px; line-height:14px; padding:9px 18px; margin-bottom:14px; }
  .handoff-section .badge svg{ width:15px; height:16px; }
  .handoff-section h2{ font-size:44px; line-height:52px; }
  .handoff-section .lede{ font-size:16px; line-height:24px; }
  .handoff-section .section-header{ margin-bottom:34px; }
  .handoff-section .flow-group{ margin-bottom:34px; }
  .handoff-section .flow-label{ font-size:20px; line-height:52px; }
  .handoff-section .flow-box{ height:86px; font-size:15px; line-height:20px; border-radius:11px; }
  .handoff-section .flow-box.solid{ width:220px; }
  .handoff-section .flow-box.file{ width:198px; padding:12px 16px; }
  .handoff-section .flow-box.file .doc-lines svg{ width:66px; height:45px; }
  .handoff-section .flow-box.tint{ width:220px; }
  .handoff-section .flow-pill{ width:224px; height:45px; font-size:15px; }
  .handoff-section .flow-arrow{ width:110px; }
  .handoff-section .flow-arrow svg{ width:56px; }
  .handoff-section .flow-box.dashed{ height:150px; font-size:15px; }
  .handoff-section .flow-box.dashed.w1{ width:212px; }
  .handoff-section .flow-box.dashed.w2{ width:308px; }
  .handoff-section .flow-box.dashed.w3{ width:212px; }
  .handoff-section .flow-dash.g1{ width:66px; }
  .handoff-section .flow-dash.g2{ width:5px; }
  .handoff-section .platform-note{ margin-left:34px; gap:12px; }
  .handoff-section .platform-note svg{ width:34px; height:34px; }
  .handoff-section .platform-note span{ font-size:15px; }
  .handoff-section .flow-desc{ font-size:16px; line-height:24px; }
}

/* =========================================================
   TABLET  (≤1439)  padding 80 / 40 — rows wrap, left aligned
   ========================================================= */
@media (max-width:1439px){
  .handoff-section{ padding:80px 40px; }
  .handoff-section .section-inner{ max-width:none; }
  .handoff-section h2{ font-size:36px; line-height:44px; }
  /* A four-step horizontal flow does not survive this width: wrapping leaves
     arrows and connectors dangling at the end of a line. Stack it instead. */
  .handoff-section .flow-row{
    flex-direction:column;
    align-items:stretch;
    gap:14px;
  }
  .handoff-section .flow-box.solid,
  .handoff-section .flow-box.file,
  .handoff-section .flow-box.tint,
  .handoff-section .flow-pill,
  .handoff-section .flow-box.dashed.w1,
  .handoff-section .flow-box.dashed.w2,
  .handoff-section .flow-box.dashed.w3{
    width:100%; flex:none;
  }
  .handoff-section .flow-box{ height:auto; min-height:92px; }
  .handoff-section .flow-box.dashed{ height:auto; min-height:120px; }
  .handoff-section .flow-pill{ height:56px; }
  .handoff-section .flow-arrow{
    width:100%;
    height:34px;
    transform:rotate(90deg);
  }
  .handoff-section .flow-arrow svg{ width:52px; }
  /* connector runs vertically once the boxes are stacked */
  .handoff-section .flow-dash{
    width:0; height:20px;
    border-top:none;
    border-left:1px dashed var(--dash-border);
    align-self:center;
  }
  .handoff-section .platform-note{ margin-left:0; }
}

/* =========================================================
   MOBILE  (≤767)  padding 50 / 20 — flow stacks vertically
   ========================================================= */
@media (max-width:767px){
  .handoff-section{ padding:50px 20px; }
  .handoff-section .badge{ font-size:12px; line-height:12px; padding:8px 14px; }
  .handoff-section .badge svg{ width:13px; height:14px; }
  .handoff-section h2{ font-size:26px; line-height:32px; }
  .handoff-section .lede{ font-size:14px; line-height:22px; }
  .handoff-section .section-header{ margin-bottom:24px; }
  .handoff-section .flow-group{ margin-bottom:28px; }
  .handoff-section .flow-label{ font-size:18px; line-height:40px; }
  .handoff-section .flow-row{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }
  .handoff-section .flow-box.solid,
  .handoff-section .flow-box.file,
  .handoff-section .flow-box.tint,
  .handoff-section .flow-pill,
  .handoff-section .flow-box.dashed.w1,
  .handoff-section .flow-box.dashed.w2,
  .handoff-section .flow-box.dashed.w3{
    width:100%; flex:none;
  }
  .handoff-section .flow-dash{
    width:0; height:18px;
    border-top:none;
    border-left:1px dashed var(--dash-border);
    align-self:center;
  }
  .handoff-section .flow-box{ height:auto; min-height:72px; font-size:14px; line-height:20px; }
  .handoff-section .flow-box.dashed{ height:auto; min-height:90px; }
  .handoff-section .flow-pill{ height:52px; font-size:14px; }
  .handoff-section .flow-arrow{
    width:100%;
    transform:rotate(90deg);
    height:32px;
  }
  .handoff-section .flow-arrow svg{ width:44px; }
  .handoff-section .platform-note{ margin-left:0; gap:12px; }
  .handoff-section .platform-note svg{ width:32px; height:32px; }
  .handoff-section .platform-note span{ font-size:14px; }
  .handoff-section .flow-desc{ font-size:14px; line-height:22px; }
}

/* ==========================================================
   SECTION 7 — DATA STRATEGY
   ========================================================== */
/* =========================================================
   SECTION 7 — base 1920
   ========================================================= */
.strategy-section{ background:var(--page-bg); padding:100px 60px; }
.strategy-section .section-inner{ max-width:1660px; margin:0 auto; }

.strategy-section .section-header{ text-align:center; margin-bottom:42px; }
.strategy-section .badge{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--badge-bg); color:var(--deep-red);
  font-weight:600; font-size:18px; line-height:16px;
  text-transform:uppercase; padding:12px 22px; border-radius:999px;
  margin-bottom:18px;
}
.strategy-section .badge svg{ width:18px; height:19px; flex-shrink:0; }
.strategy-section h2{
  font-family:'Avant',sans-serif;
  font-weight:600; font-size:60px; line-height:70px;
  text-transform:capitalize; color:var(--black);
  margin-bottom:14px;
}
.strategy-section .lede{
  font-weight:400; font-size:20px; line-height:30px;
  text-align:center; color:var(--dark-text);
}

/* ---- cards: 812 + 48 + 808 = 1668 (fills the 1660 column) ---- */
.strategy-section .cards-row{
  display:grid;
  grid-template-columns:812fr 808fr;
  grid-template-rows:auto auto auto;
  gap:48px;
  align-items:stretch;
  margin-bottom:26px;
}
.strategy-section .strategy-card{
  border-radius:30px;
  padding:36px 40px 40px;
  display:grid;
  grid-template-rows:subgrid;
  grid-row:span 3;
  row-gap:0;
}
.strategy-section .strategy-card.left{
  background:var(--left-card-bg);
  border:1px solid rgba(172,32,45,.3);
}
.strategy-section .strategy-card.right{ background:var(--white); }

.strategy-section .card-head{
  display:flex; align-items:center; gap:18px;
  margin-bottom:16px;
}
.strategy-section .card-head svg{ width:64px; height:64px; flex-shrink:0; }
.strategy-section .card-head h3{
  font-family:'Avant',sans-serif;
  font-weight:600; font-size:30px; line-height:38px;
  text-transform:capitalize; color:var(--black);
}
.strategy-section .card-head h3.teal{ color:var(--teal); }
.strategy-section .card-head p{
  font-weight:400; font-size:18px; line-height:28px;
  color:var(--dark-text);
  margin-top:2px;
}

.strategy-section .card-desc{
  font-weight:400; font-size:18px; line-height:28px;
  color:var(--dark-text);
  margin-bottom:26px;
}

.strategy-section .group-label{
  font-family:'Avant',sans-serif;
  font-weight:600; font-size:20px; line-height:34px;
  text-transform:capitalize;
  margin-bottom:12px;
}
.strategy-section .group-label.red{ color:var(--deep-red); }
.strategy-section .group-label.teal{ color:var(--teal); }

.strategy-section .logo-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
}
.strategy-section .logo-tile{ width:100%; height:auto; display:block; }

.strategy-section .closing-note{
  font-family:'Avant',sans-serif;
  font-weight:600; font-size:20px; line-height:34px;
  /* the Figma layer carries text-transform:capitalize, but the design renders
     this line in sentence case, so the transform is intentionally omitted */
  color:var(--dark-text);
}

/* =========================================================
   LAPTOP  (≤1919)
   ========================================================= */
@media (max-width:1919px){
  .strategy-section .section-inner{ max-width:1240px; }
  .strategy-section .badge{ font-size:14px; line-height:14px; padding:9px 18px; margin-bottom:14px; }
  .strategy-section .badge svg{ width:15px; height:16px; }
  .strategy-section h2{ font-size:44px; line-height:52px; margin-bottom:10px; }
  .strategy-section .lede{ font-size:16px; line-height:24px; }
  .strategy-section .section-header{ margin-bottom:32px; }
  .strategy-section .cards-row{ gap:36px; }
  .strategy-section .strategy-card{ padding:28px 30px 30px; border-radius:22px; }
  .strategy-section .card-head{ gap:14px; }
  .strategy-section .card-head svg{ width:48px; height:48px; }
  .strategy-section .card-head h3{ font-size:23px; line-height:30px; }
  .strategy-section .card-head p,
  .strategy-section .card-desc{ font-size:15px; line-height:23px; }
  .strategy-section .group-label,
  .strategy-section .closing-note{ font-size:16px; line-height:26px; }
  .strategy-section .logo-grid{ gap:10px; }
}

/* =========================================================
   TABLET  (≤1439)  padding 80 / 40 — left aligned
   ========================================================= */
@media (max-width:1439px){
  .strategy-section{ padding:80px 40px; }
  .strategy-section .section-inner{ max-width:none; }
  .strategy-section .section-header{ text-align:left; }
  .strategy-section h2{ font-size:36px; line-height:44px; }
  .strategy-section .lede{ text-align:left; }
  .strategy-section .cards-row{
    grid-template-columns:1fr;
    grid-template-rows:none;
    gap:24px;
  }
  .strategy-section .strategy-card{
    display:block;
    grid-row:auto;
    padding:28px;
  }
}

/* =========================================================
   MOBILE  (≤767)  padding 50 / 20 — left aligned
   ========================================================= */
@media (max-width:767px){
  .strategy-section{ padding:50px 20px; }
  .strategy-section .section-header{ margin-bottom:24px; }
  .strategy-section .badge{ font-size:12px; line-height:12px; padding:8px 14px; }
  .strategy-section .badge svg{ width:13px; height:14px; }
  .strategy-section h2{ font-size:26px; line-height:32px; }
  .strategy-section .lede{ font-size:14px; line-height:22px; }
  .strategy-section .strategy-card{ padding:20px; border-radius:18px; }
  .strategy-section .card-head{ gap:12px; margin-bottom:12px; }
  .strategy-section .card-head svg{ width:40px; height:40px; }
  .strategy-section .card-head h3{ font-size:20px; line-height:26px; }
  .strategy-section .card-head p,
  .strategy-section .card-desc{ font-size:14px; line-height:22px; }
  .strategy-section .card-desc{ margin-bottom:18px; }
  .strategy-section .group-label,
  .strategy-section .closing-note{ font-size:15px; line-height:24px; }
  .strategy-section .logo-grid{ grid-template-columns:repeat(2,1fr); gap:8px; }
}

/* ==========================================================
   SECTION 8 — PRICING AND BUYING EXPERIENCE
   ========================================================== */
/* =========================================================
   SECTION 8 — base 1920
   ========================================================= */
.pricing-section{ background:var(--white); padding:100px 60px; }
.pricing-section .section-inner{ max-width:1660px; margin:0 auto; }

.pricing-section .section-header{ margin-bottom:40px; }
.pricing-section .badge{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--badge-bg); color:var(--deep-red);
  font-weight:600; font-size:18px; line-height:16px;
  text-transform:uppercase; padding:12px 22px; border-radius:999px;
  margin-bottom:16px;
}
.pricing-section .badge svg{ width:18px; height:19px; flex-shrink:0; }
.pricing-section h2{
  font-family:'Avant',sans-serif;
  font-weight:600; font-size:60px; line-height:70px;
  text-transform:capitalize; color:var(--black);
}

/* ---- outer cards: 808 + 49 + 805 ---- */
.pricing-section .cards-row{
  display:grid;
  grid-template-columns:808fr 805fr;
  gap:49px;
  align-items:stretch;
}
.pricing-section .price-card{
  border-radius:20px;
  padding:35px;
}
.pricing-section .price-card.left{ background:var(--left-card-bg); }
.pricing-section .price-card.right{ background:var(--right-card-bg); }

/* ---- mock panel + side note ---- */
.pricing-section .mock-row{
  display:flex; align-items:center; gap:36px;
  margin-bottom:28px;
}
.pricing-section .mock-box{
  width:410px; height:177px;
  flex-shrink:0;
  background:var(--white);
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
  padding:26px 28px;
}
.pricing-section .mock-label{
  font-weight:500; font-size:20px; line-height:26px;
  margin-bottom:20px;
}
.pricing-section .mock-label.red{ color:var(--deep-red); }
.pricing-section .mock-label.grey{ color:var(--slate); }

.pricing-section .bar{ border-radius:999px; margin-bottom:11px; }
.pricing-section .bar:last-child{ margin-bottom:0; }
.pricing-section .bar.b1{ width:186px; height:13px; }
.pricing-section .bar.b2{ width:239px; height:11px; }
.pricing-section .bar.b3{ width:146px; height:11px; }
.pricing-section .left  .bar.b1{ background:var(--bar-r1); }
.pricing-section .left  .bar.b2{ background:var(--bar-r2); }
.pricing-section .left  .bar.b3{ background:var(--bar-r3); }
.pricing-section .right .bar.b1{ background:var(--bar-g1); }
.pricing-section .right .bar.b2{ background:var(--bar-g2); }
.pricing-section .right .bar.b3{ background:var(--bar-g3); }

.pricing-section .mock-note{
  flex:1;
  text-align:center;
  font-weight:500; font-size:20px; line-height:26px;
}
.pricing-section .mock-note.red{ color:var(--deep-red); }
.pricing-section .mock-note.grey{ color:var(--slate); }

/* ---- brand + copy + button ---- */
.pricing-section .brand-label{
  font-family:'Avant',sans-serif;
  font-weight:600; font-size:24px; line-height:40px;
  text-transform:capitalize;
  margin-bottom:8px;
}
.pricing-section .brand-label.red{ color:var(--deep-red); }
.pricing-section .brand-label.teal{ color:var(--teal); }

.pricing-section .card-copy{
  font-weight:400; font-size:18px; line-height:28px;
  color:var(--dark-text);
  margin-bottom:28px;
}

.pricing-section .btn-wrap{ display:flex; align-items:flex-start; }
.pricing-section .btn-pricing{
  display:inline-flex; align-items:center; justify-content:center;
  width:357px; height:58px;
  background:var(--deep-red);
  color:var(--white);
  font-weight:700; font-size:22px; line-height:100%;
  text-transform:uppercase;
  text-decoration:none;
  border-radius:10px;
  transition:background .2s ease;
}
.pricing-section .btn-pricing:hover{ background:#8E1622; }
.pricing-section .btn-pricing:focus-visible{ outline:3px solid var(--deep-red); outline-offset:3px; }

/* =========================================================
   LAPTOP  (≤1919)
   ========================================================= */
@media (max-width:1919px){
  .pricing-section .section-inner{ max-width:1240px; }
  .pricing-section .badge{ font-size:14px; line-height:14px; padding:9px 18px; margin-bottom:14px; }
  .pricing-section .badge svg{ width:15px; height:16px; }
  .pricing-section h2{ font-size:44px; line-height:52px; }
  .pricing-section .section-header{ margin-bottom:30px; }
  .pricing-section .cards-row{ gap:36px; }
  .pricing-section .price-card{ padding:26px; border-radius:16px; }
  .pricing-section .mock-row{ gap:24px; margin-bottom:22px; }
  .pricing-section .mock-box{ width:306px; height:134px; padding:20px 21px; border-radius:11px; }
  .pricing-section .mock-label{ font-size:15px; line-height:20px; margin-bottom:15px; }
  .pricing-section .bar.b1{ width:139px; height:10px; }
  .pricing-section .bar.b2{ width:178px; height:8px; }
  .pricing-section .bar.b3{ width:109px; height:8px; }
  .pricing-section .bar{ margin-bottom:8px; }
  .pricing-section .mock-note{ font-size:15px; line-height:20px; }
  .pricing-section .brand-label{ font-size:18px; line-height:30px; }
  .pricing-section .card-copy{ font-size:15px; line-height:23px; margin-bottom:22px; }
  .pricing-section .btn-pricing{ width:266px; height:44px; font-size:16px; border-radius:8px; }
}

/* =========================================================
   TABLET  (≤1439)  padding 80 / 40
   ========================================================= */
@media (max-width:1439px){
  .pricing-section{ padding:80px 40px; }
  .pricing-section .section-inner{ max-width:none; }
  .pricing-section h2{ font-size:36px; line-height:44px; }
  .pricing-section .cards-row{
    grid-template-columns:1fr;
    gap:24px;
  }
  .pricing-section .price-card{ padding:26px; }
  .pricing-section .mock-box{ width:auto; flex:1 1 auto; max-width:410px; }
}

/* =========================================================
   MOBILE  (≤767)  padding 50 / 20
   ========================================================= */
@media (max-width:767px){
  .pricing-section{ padding:50px 20px; }
  .pricing-section .badge{ font-size:12px; line-height:12px; padding:8px 14px; }
  .pricing-section .badge svg{ width:13px; height:14px; }
  .pricing-section h2{ font-size:26px; line-height:32px; }
  .pricing-section .section-header{ margin-bottom:24px; }
  .pricing-section .price-card{ padding:20px; border-radius:16px; }
  .pricing-section .mock-row{
    flex-direction:column;
    align-items:stretch;
    gap:16px;
  }
  .pricing-section .mock-box{ width:100%; max-width:none; height:auto; padding:18px; }
  .pricing-section .mock-note{ text-align:left; font-size:14px; line-height:20px; }
  .pricing-section .mock-label{ font-size:14px; line-height:20px; }
  .pricing-section .brand-label{ font-size:18px; line-height:28px; }
  .pricing-section .card-copy{ font-size:14px; line-height:22px; margin-bottom:20px; }
  .pricing-section .btn-pricing{ width:100%; height:48px; font-size:15px; }
}

/* ==========================================================
   SECTION 9 — CONVERTING TO PHDWIN
   ========================================================== */
/* =========================================================
   SECTION 9 — base 1920
   Row geometry, straight from the Figma frame:
     box 1  294 @ 130      box 2  264 @ 582
     pair   314 @ 1004     box 5  294 @ 1476
     every gap 158 = 40 clear + 78 arrow + 40 clear
   The pair sits 20px apart and is centred on the main row.
   ========================================================= */
.convert-section{ background:var(--page-bg); padding:100px 60px; }
.convert-section .section-inner{ max-width:1660px; margin:0 auto; }

.convert-section .section-header{ margin-bottom:38px; }
.convert-section .badge{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--badge-bg); color:var(--deep-red);
  font-weight:600; font-size:18px; line-height:16px;
  text-transform:uppercase; padding:12px 22px; border-radius:999px;
  margin-bottom:16px;
}
.convert-section .badge svg{ width:18px; height:19px; flex-shrink:0; }
.convert-section h2{
  font-family:'Avant',sans-serif;
  font-weight:600; font-size:60px; line-height:70px;
  text-transform:capitalize; color:var(--black);
}

.convert-section .flow{
  display:flex;
  align-items:center;
  margin-bottom:34px;
}

.convert-section .node{
  height:114px;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  border-radius:14px;
  font-weight:400; font-size:20px; line-height:32px;
  flex-shrink:0;
  padding:10px 18px;
}
.convert-section .node.outline{
  width:294px;
  background:var(--white);
  border:2.14px solid var(--deep-red);
  color:var(--deep-red);
}
.convert-section .node.empty{
  width:264px;
  background:var(--tint-pink);
  border:2.14px solid var(--deep-red);
}
.convert-section .node.solid{
  width:294px;
  background:var(--deep-red);
  color:var(--white);
}
.convert-section .node.solid strong{ font-weight:700; display:block; }

.convert-section .arrow{
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  width:158px;
}
.convert-section .arrow svg{ display:block; width:78px; height:22px; }
.convert-section .arrow.short{ width:98px; }

/* ---- the parallel pair + bracket ---- */
.convert-section .parallel{
  position:relative;
  flex-shrink:0;
  padding-right:60px;
}
.convert-section .pair{
  display:flex; flex-direction:column;
  gap:20px;
  width:314px;
}
.convert-section .parallel .pair .node{ width:100%; }
.convert-section .parallel .pair .node.phdwin{
  background:var(--deep-red);
  color:var(--white);
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  border:none;
}
.convert-section .pair-caption{
  position:absolute;
  left:0; width:314px;
  text-align:center;
  font-weight:400; font-size:20px; line-height:32px;
  color:var(--deep-red);
  margin-top:12px;
}
/* bracket: joins the two boxes at their centres, then runs out to the arrow */
.convert-section .bracket{
  position:absolute;
  top:57px;            /* centre of the upper box */
  left:314px;
  width:60px;
  height:134px;        /* down to the centre of the lower box */
  border:2.14px solid var(--deep-red);
  border-left:none;
}

.convert-section .flow-desc{
  font-weight:400; font-size:20px; line-height:32px;
  color:var(--dark-text);
}

/* =========================================================
   LAPTOP  (≤1919)
   ========================================================= */
@media (max-width:1919px){
  .convert-section .section-inner{ max-width:1240px; }
  .convert-section .badge{ font-size:14px; line-height:14px; padding:9px 18px; margin-bottom:14px; }
  .convert-section .badge svg{ width:15px; height:16px; }
  .convert-section h2{ font-size:44px; line-height:52px; }
  .convert-section .section-header{ margin-bottom:28px; }
  .convert-section .node{ height:86px; font-size:15px; line-height:24px; border-radius:11px; }
  .convert-section .node.outline{ width:220px; }
  .convert-section .node.empty{ width:198px; }
  .convert-section .node.solid{ width:220px; }
  .convert-section .arrow{ width:110px; }
  .convert-section .arrow.short{ width:68px; }
  .convert-section .arrow svg{ width:56px; }
  .convert-section .pair{ width:235px; gap:15px; }
  .convert-section .parallel{ padding-right:45px; }
  .convert-section .bracket{ top:43px; left:235px; width:45px; height:101px; }
  .convert-section .pair-caption{ width:235px; font-size:15px; line-height:24px; margin-top:9px; }
  .convert-section .flow-desc{ font-size:16px; line-height:26px; }
  .convert-section .flow{ margin-bottom:44px; }
}

/* =========================================================
   TABLET  (≤1439)  padding 80 / 40 — flow stacks
   ========================================================= */
@media (max-width:1439px){
  .convert-section{ padding:80px 40px; }
  .convert-section .section-inner{ max-width:none; }
  .convert-section h2{ font-size:36px; line-height:44px; }
  .convert-section .flow{
    flex-direction:column;
    align-items:stretch;
    gap:14px;
    margin-bottom:26px;
  }
  .convert-section .node.outline,
  .convert-section .node.empty,
  .convert-section .node.solid{ width:100%; }
  .convert-section .node{ height:auto; min-height:92px; }
  .convert-section .node.empty{ min-height:70px; }
  .convert-section .arrow,
  .convert-section .arrow.short{
    width:100%; height:34px;
    transform:rotate(90deg);
  }
  .convert-section .arrow svg{ width:52px; }
  .convert-section .parallel{ padding-right:0; }
  .convert-section .pair{ width:100%; }
  .convert-section .pair-caption{ position:static; width:100%; }
  .convert-section .bracket{ display:none; }
}

/* =========================================================
   MOBILE  (≤767)  padding 50 / 20
   ========================================================= */
@media (max-width:767px){
  .convert-section{ padding:50px 20px; }
  .convert-section .badge{ font-size:12px; line-height:12px; padding:8px 14px; }
  .convert-section .badge svg{ width:13px; height:14px; }
  .convert-section h2{ font-size:26px; line-height:32px; }
  .convert-section .section-header{ margin-bottom:24px; }
  .convert-section .node{ min-height:76px; font-size:14px; line-height:22px; padding:10px 14px; }
  .convert-section .pair-caption{ font-size:14px; line-height:22px; }
  .convert-section .flow-desc{ font-size:14px; line-height:24px; }
}

/* ==========================================================
   SECTION 10 — THE BOTTOM LINE
   ========================================================== */
/* =========================================================
   SECTION 10 — base 1920
   Copy column 130–~900, image 746 wide at x=1044 (ends 1790).
   ========================================================= */
.bottomline-section{ background:var(--white); padding:100px 60px; }
.bottomline-section .section-inner{
  max-width:1660px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 746px;
  gap:168px;
  align-items:center;
}

.bottomline-section .badge{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--badge-bg); color:var(--deep-red);
  font-weight:600; font-size:18px; line-height:16px;
  text-transform:uppercase; padding:12px 22px; border-radius:999px;
  margin-bottom:16px;
}
.bottomline-section .badge svg{ width:18px; height:19px; flex-shrink:0; }

.bottomline-section h2{
  font-family:'Avant',sans-serif;
  font-weight:600; font-size:60px; line-height:70px;
  text-transform:capitalize; color:var(--black);
  margin-bottom:18px;
}

.bottomline-section .copy p{
  font-weight:400; font-size:20px; line-height:30px;
  color:var(--dark-text);
  margin-bottom:18px;
}
.bottomline-section .copy p:last-child{ margin-bottom:0; }

.bottomline-section .photo{
  width:746px; height:447px;
  object-fit:cover;
  display:block;
  border-radius:30px;
}

/* =========================================================
   LAPTOP  (≤1919)
   ========================================================= */
@media (max-width:1919px){
  .bottomline-section .section-inner{
    max-width:1240px;
    grid-template-columns:1fr 558px;
    gap:110px;
  }
  .bottomline-section .badge{ font-size:14px; line-height:14px; padding:9px 18px; margin-bottom:14px; }
  .bottomline-section .badge svg{ width:15px; height:16px; }
  .bottomline-section h2{ font-size:44px; line-height:52px; margin-bottom:14px; }
  .bottomline-section .copy p{ font-size:16px; line-height:24px; margin-bottom:14px; }
  .bottomline-section .photo{ width:558px; height:334px; border-radius:22px; }
}

/* =========================================================
   TABLET  (≤1439)  padding 80 / 40 — stacks, left aligned
   ========================================================= */
@media (max-width:1439px){
  .bottomline-section{ padding:80px 40px; }
  .bottomline-section .section-inner{
    max-width:none;
    grid-template-columns:1fr;
    gap:32px;
  }
  .bottomline-section h2{ font-size:36px; line-height:44px; }
  .bottomline-section .photo{ width:100%; height:auto; }
}

/* =========================================================
   MOBILE  (≤767)  padding 50 / 20
   ========================================================= */
@media (max-width:767px){
  .bottomline-section{ padding:50px 20px; }
  .bottomline-section .section-inner{ gap:24px; }
  .bottomline-section .badge{ font-size:12px; line-height:12px; padding:8px 14px; }
  .bottomline-section .badge svg{ width:13px; height:14px; }
  .bottomline-section h2{ font-size:26px; line-height:32px; }
  .bottomline-section .copy p{ font-size:14px; line-height:22px; margin-bottom:12px; }
  .bottomline-section .photo{ border-radius:18px; }
}

/* ==========================================================
   SECTION 11 — FREQUENTLY ASKED QUESTIONS
   ========================================================== */
/* =========================================================
   SECTION 11 — base 1920
   The accordion is 1101px wide and centred inside the
   1660px column, matching the Figma frame.
   ========================================================= */
.faq-section{ background:var(--page-bg); padding:100px 60px; }
.faq-section .section-inner{ max-width:1660px; margin:0 auto; }

.faq-section .section-header{ text-align:center; margin-bottom:36px; }
.faq-section .badge{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--badge-bg); color:var(--deep-red);
  font-weight:600; font-size:18px; line-height:16px;
  text-transform:uppercase; padding:12px 22px; border-radius:999px;
  margin-bottom:18px;
}
.faq-section .badge svg{ width:18px; height:19px; flex-shrink:0; }
.faq-section h2{
  font-family:'Avant',sans-serif;
  font-weight:600; font-size:60px; line-height:70px;
  text-transform:capitalize; color:var(--black);
}

.faq-section .faq-list{
  max-width:1101px;
  margin:0 auto;
  display:flex; flex-direction:column;
  gap:19px;
}

.faq-section .faq-item{
  background:var(--white);
  border-radius:12px;
  overflow:hidden;
  transition:background .25s ease;
}
.faq-section .faq-item.is-open{ background:var(--deep-red); }

.faq-section .faq-q{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  gap:28px;
  background:none; border:none; cursor:pointer;
  text-align:left;
  font-family:'Avant',sans-serif;
  font-weight:600; font-size:28px; line-height:44px;
  text-transform:capitalize;
  color:var(--black);
  padding:18px 34px;
  transition:color .25s ease;
}
.faq-section .faq-item.is-open .faq-q{ color:var(--white); padding-bottom:8px; }
.faq-section .faq-q:focus-visible{ outline:2px solid var(--deep-red); outline-offset:-4px; border-radius:12px; }
.faq-section .faq-item.is-open .faq-q:focus-visible{ outline-color:var(--white); }

/* +/- drawn in CSS so it inherits the item colour */
.faq-section .faq-icon{
  position:relative; flex-shrink:0;
  width:26px; height:26px;
}
.faq-section .faq-icon::before,
.faq-section .faq-icon::after{
  content:""; position:absolute; background:var(--black);
  transition:transform .25s ease, background .25s ease, opacity .25s ease;
}
.faq-section .faq-icon::before{ top:50%; left:0; width:26px; height:2px; transform:translateY(-50%); }
.faq-section .faq-icon::after{ left:50%; top:0; width:2px; height:26px; transform:translateX(-50%); }
.faq-section .faq-item.is-open .faq-icon::before{ background:var(--white); }
.faq-section .faq-item.is-open .faq-icon::after{ background:var(--white); opacity:0; transform:translateX(-50%) rotate(90deg); }

.faq-section .faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-section .faq-a-inner{
  padding:0 34px 22px;
  font-family:'DM Sans',sans-serif;
  font-weight:400; font-size:18px; line-height:28px;
  color:rgba(255,255,255,.92);
}

@media (prefers-reduced-motion: reduce){
  .faq-section .faq-item,
  .faq-section .faq-q,
  .faq-section .faq-a,
  .faq-section .faq-icon::before,
  .faq-section .faq-icon::after{ transition:none; }
}

/* =========================================================
   LAPTOP  (≤1919)
   ========================================================= */
@media (max-width:1919px){
  .faq-section .section-inner{ max-width:1240px; }
  .faq-section .badge{ font-size:14px; line-height:14px; padding:9px 18px; margin-bottom:14px; }
  .faq-section .badge svg{ width:15px; height:16px; }
  .faq-section h2{ font-size:44px; line-height:52px; }
  .faq-section .section-header{ margin-bottom:28px; }
  .faq-section .faq-list{ max-width:824px; gap:14px; }
  .faq-section .faq-q{ font-size:21px; line-height:33px; padding:13px 25px; gap:20px; }
  .faq-section .faq-icon{ width:20px; height:20px; }
  .faq-section .faq-icon::before{ width:20px; }
  .faq-section .faq-icon::after{ height:20px; }
  .faq-section .faq-a-inner{ padding:0 25px 16px; font-size:15px; line-height:23px; }
}

/* =========================================================
   TABLET  (≤1439)  padding 80 / 40 — left aligned
   ========================================================= */
@media (max-width:1439px){
  .faq-section{ padding:80px 40px; }
  .faq-section .section-inner{ max-width:none; }
  .faq-section .section-header{ text-align:left; }
  .faq-section h2{ font-size:36px; line-height:44px; }
  .faq-section .faq-list{ max-width:none; }
  .faq-section .faq-q{ font-size:19px; line-height:28px; padding:14px 22px; }
}

/* =========================================================
   MOBILE  (≤767)  padding 50 / 20
   ========================================================= */
@media (max-width:767px){
  .faq-section{ padding:50px 20px; }
  .faq-section .section-header{ margin-bottom:24px; }
  .faq-section .badge{ font-size:12px; line-height:12px; padding:8px 14px; }
  .faq-section .badge svg{ width:13px; height:14px; }
  .faq-section h2{ font-size:26px; line-height:32px; }
  .faq-section .faq-list{ gap:12px; }
  .faq-section .faq-q{ font-size:16px; line-height:24px; padding:14px 16px; gap:14px; }
  .faq-section .faq-icon{ width:16px; height:16px; }
  .faq-section .faq-icon::before{ width:16px; }
  .faq-section .faq-icon::after{ height:16px; }
  .faq-section .faq-a-inner{ padding:0 16px 16px; font-size:14px; line-height:22px; }
}