/*
  You Said It Connect
  Shared site stylesheet

  Edit this file to update styling across the entire site.
*/
/* Source: faqs/index.html */
:root {
      --connect-pink: #ee4266;
      --connect-pink-dark: #d93658;
      --connect-blue: #55b7c9;
      --connect-dark: #27272a;
      --connect-copy: #646464;
      --connect-light-blue: #eef9fb;
      --connect-light-pink: #fff2f5;
      --connect-white: #ffffff;
      --connect-border: #ece7e8;
      --connect-shadow: 0 12px 32px rgba(30, 30, 30, 0.08);
      --connect-width: 1180px;
      --heading-font: var(--e-global-typography-primary-font-family, "Poppins", Arial, sans-serif);
      --body-font: var(--e-global-typography-text-font-family, "Poppins", Arial, sans-serif);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--connect-dark);
      background: #fff;
      font-family: var(--body-font);
      font-size: 16px;
      line-height: 1.65;
    }

    img { max-width: 100%; display: block; }
    a { color: inherit; text-decoration: none; }
    h1, h2, h3 {
      margin: 0;
      color: var(--connect-dark);
      font-family: var(--heading-font);
      line-height: 1.2;
    }
    p { margin: 0; color: var(--connect-copy); }

    .connect-container {
      width: min(var(--connect-width), calc(100% - 40px));
      margin: 0 auto;
    }

    .connect-header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(255,255,255,.97);
      border-bottom: 1px solid #ececec;
      backdrop-filter: blur(12px);
    }

    .connect-nav {
      min-height: 118px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 34px;
    }

    .connect-logo {
      display: flex;
      align-items: center;
      padding: 10px 0;
      flex: 0 0 auto;
    }

    .connect-logo img {
      width: auto;
      height: 84px;
      max-width: none;
    }

    .connect-menu {
      display: flex;
      align-items: center;
      gap: 36px;
      margin-left: auto;
    }

    .connect-menu a,
    .connect-sign-in {
      font-size: 16px;
      font-weight: 500;
      white-space: nowrap;
    }

    .connect-menu a:hover,
    .connect-sign-in:hover {
      color: var(--connect-pink);
    }

    .connect-header-actions {
      display: flex;
      align-items: center;
      gap: 22px;
    }

    .connect-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      padding: 0 30px;
      border: 2px solid var(--connect-pink);
      border-radius: 6px;
      background: var(--connect-pink);
      color: #fff;
      font-weight: 700;
      transition: .2s ease;
    }

    .connect-button:hover {
      background: var(--connect-pink-dark);
      border-color: var(--connect-pink-dark);
      transform: translateY(-2px);
    }

    .connect-mobile-menu {
      display: none;
      position: relative;
      width: 44px;
      height: 44px;
      padding: 0;
      border: 0;
      background: transparent;
      cursor: pointer;
    }

    .connect-mobile-menu-lines,
    .connect-mobile-menu-lines::before,
    .connect-mobile-menu-lines::after {
      position: absolute;
      left: 50%;
      width: 25px;
      height: 2px;
      border-radius: 5px;
      background: currentColor;
      transform: translateX(-50%);
      transition: .2s;
    }

    .connect-mobile-menu-lines {
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .connect-mobile-menu-lines::before,
    .connect-mobile-menu-lines::after { content: ""; }
    .connect-mobile-menu-lines::before { top: -8px; }
    .connect-mobile-menu-lines::after { top: 8px; }

    .guide-hero {
      padding: 74px 0 70px;
      background: var(--connect-light-blue);
    }

    .guide-breadcrumbs {
      margin-bottom: 24px;
      color: var(--connect-copy);
      font-size: 14px;
    }

    .guide-breadcrumbs a {
      color: var(--connect-pink);
      font-weight: 700;
    }

    .guide-eyebrow {
      display: inline-flex;
      margin-bottom: 14px;
      padding: 7px 12px;
      border: 1px solid #f0d8df;
      border-radius: 999px;
      background: #fff;
      color: var(--connect-pink);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .guide-hero h1 {
      max-width: 880px;
      margin-bottom: 18px;
      font-size: clamp(42px, 5vw, 66px);
      letter-spacing: -.035em;
    }

    .guide-hero .lead {
      max-width: 820px;
      font-size: 19px;
    }

    .guide-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 20px;
      margin-top: 26px;
      color: var(--connect-dark);
      font-size: 14px;
      font-weight: 600;
    }

    .guide-meta span::before {
      content: "✓";
      margin-right: 7px;
      color: var(--connect-pink);
    }

    .guide-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 280px;
      gap: 50px;
      align-items: start;
      padding: 74px 0 90px;
    }

    .guide-sidebar {
      position: sticky;
      top: 145px;
      padding: 24px;
      border: 1px solid var(--connect-border);
      border-radius: 20px;
      background: #fff;
      box-shadow: 0 8px 24px rgba(30,30,30,.05);
    }

    .guide-sidebar h3 {
      margin-bottom: 14px;
      font-size: 19px;
    }

    .guide-sidebar a {
      display: block;
      padding: 10px 0;
      border-bottom: 1px solid var(--connect-border);
      color: var(--connect-copy);
      font-size: 14px;
    }

    .guide-sidebar a:last-child { border-bottom: 0; }
    .guide-sidebar a:hover { color: var(--connect-pink); }

    .guide-section {
      margin-bottom: 58px;
      scroll-margin-top: 150px;
    }

    .guide-section h2 {
      margin-bottom: 18px;
      font-size: clamp(30px, 3.5vw, 42px);
      letter-spacing: -.025em;
    }

    .guide-section > p {
      max-width: 820px;
      font-size: 17px;
    }

    .summary-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
      margin-top: 28px;
    }

    .summary-card {
      padding: 24px;
      border: 1px solid var(--connect-border);
      border-radius: 20px;
      background: #fff;
    }

    .summary-card strong {
      display: block;
      margin-bottom: 8px;
      font-size: 17px;
    }

    .summary-card p { font-size: 14px; }

    .checklist {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 15px;
      margin-top: 25px;
    }

    .check-item {
      display: flex;
      gap: 12px;
      padding: 18px;
      border-radius: 16px;
      background: var(--connect-light-pink);
    }

    .check-item::before {
      content: "✓";
      flex: 0 0 26px;
      display: grid;
      place-items: center;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: var(--connect-pink);
      color: #fff;
      font-size: 13px;
      font-weight: 700;
    }

    .check-item strong {
      display: block;
      margin-bottom: 4px;
    }

    .check-item p { font-size: 14px; }

    .steps {
      display: grid;
      gap: 24px;
      margin-top: 30px;
    }

    .step-card {
      display: grid;
      grid-template-columns: 74px minmax(0, 1fr);
      gap: 22px;
      padding: 28px;
      border: 1px solid var(--connect-border);
      border-radius: 24px;
      background: #fff;
      box-shadow: 0 8px 24px rgba(30,30,30,.045);
    }

    .step-number {
      display: grid;
      place-items: center;
      width: 64px;
      height: 64px;
      border-radius: 17px;
      background: linear-gradient(135deg, var(--connect-pink), var(--connect-pink-dark));
      color: #fff;
      font-size: 27px;
      font-weight: 700;
      box-shadow: 0 10px 20px rgba(238,66,102,.22);
    }

    .step-content h3 {
      margin-bottom: 9px;
      font-size: clamp(23px, 2.6vw, 29px);
    }

    .step-content > p {
      margin-bottom: 18px;
      font-size: 16px;
    }

    .screenshot {
      margin-top: 18px;
    }

    .screenshot img {
      width: 100%;
      border: 1px solid var(--connect-border);
      border-radius: 17px;
      background: #fff;
      box-shadow: 0 9px 24px rgba(30,30,30,.07);
      cursor: zoom-in;
    }

    .screenshot--medium { max-width: 760px; }
    .screenshot--small { max-width: 520px; }

    .screenshot figcaption {
      margin-top: 9px;
      color: var(--connect-copy);
      font-size: 13px;
    }

    .note {
      margin-top: 18px;
      padding: 18px 20px;
      border-left: 4px solid var(--connect-blue);
      border-radius: 0 14px 14px 0;
      background: var(--connect-light-blue);
    }

    .note strong {
      display: block;
      margin-bottom: 4px;
    }

    .note p { font-size: 14px; }

    .tips-panel {
      padding: 30px;
      border: 1px solid #f1d7e0;
      border-radius: 24px;
      background: var(--connect-light-pink);
    }

    .tips-panel h2 {
      margin-bottom: 24px;
      font-size: clamp(28px, 3vw, 36px);
    }

    .tips-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }

    .tip-card {
      padding: 21px;
      border: 1px solid #eadfe2;
      border-radius: 17px;
      background: #fff;
    }

    .tip-card strong {
      display: block;
      margin-bottom: 7px;
    }

    .tip-card p { font-size: 15px; }

    .complete-panel {
      padding: 32px;
      border-radius: 24px;
      background: var(--connect-dark);
      color: #fff;
    }

    .complete-panel h2,
    .complete-panel p { color: #fff; }

    .complete-panel h2 { margin-bottom: 12px; }
    .complete-panel p { opacity: .86; }

    .complete-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-top: 22px;
    }

    .complete-list span {
      padding: 13px 15px;
      border-radius: 12px;
      background: rgba(255,255,255,.09);
      font-size: 14px;
      font-weight: 600;
    }

    .complete-list span::before {
      content: "✓";
      margin-right: 8px;
      color: #fff;
    }

    .connect-final-cta {
      padding: 72px 0;
      background: var(--connect-pink);
      text-align: center;
    }

    .connect-final-cta h2,
    .connect-final-cta p { color: #fff; }

    .connect-final-cta h2 {
      margin-bottom: 14px;
      font-size: clamp(32px, 4vw, 48px);
    }

    .connect-final-cta p {
      max-width: 680px;
      margin: 0 auto 25px;
      opacity: .92;
    }

    .connect-final-cta .connect-button {
      border-color: #fff;
      background: #fff;
      color: var(--connect-pink);
    }

    .connect-footer {
      padding: 55px 0 28px;
      border-top: 1px solid #ececec;
      background: #fff;
    }

    .connect-footer-grid {
      display: grid;
      grid-template-columns: 1.6fr 1fr 1fr;
      gap: 50px;
    }

    .connect-footer-logo {
      width: auto;
      height: 84px;
      max-width: none;
      margin-bottom: 20px;
    }

    .connect-footer p,
    .connect-footer a { color: #666; }

    .connect-footer-links { display: grid; gap: 8px; }
    .connect-footer a:hover { color: var(--connect-pink); }

    .connect-copyright {
      margin-top: 38px;
      padding-top: 22px;
      border-top: 1px solid #ececec;
      color: #888;
      font-size: 13px;
    }

    .image-modal {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: rgba(15,15,15,.9);
    }

    .image-modal.is-open { display: flex; }
    .image-modal img {
      max-width: min(1500px, 96vw);
      max-height: 92vh;
      border-radius: 12px;
    }

    .image-modal button {
      position: absolute;
      top: 16px;
      right: 20px;
      border: 0;
      background: transparent;
      color: #fff;
      font-size: 40px;
      cursor: pointer;
    }

    @media (max-width: 950px) {
      .connect-nav { min-height: 96px; }
      .connect-logo img { height: 68px; }
      .connect-menu {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        display: grid;
        gap: 0;
        padding: 10px 20px 20px;
        border-top: 1px solid #ececec;
        border-bottom: 1px solid #ececec;
        background: #fff;
        box-shadow: 0 16px 28px rgba(30,30,30,.1);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        pointer-events: none;
        transition: .2s ease;
      }
      .connect-menu.is-open {
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
      }
      .connect-menu a {
        padding: 15px 4px;
        border-bottom: 1px solid #f1eeee;
        font-weight: 600;
      }
      .connect-sign-in { display: none; }
      .connect-mobile-menu { display: block; }
      .guide-layout { grid-template-columns: 1fr; }
      .guide-sidebar { position: static; order: -1; }
      .summary-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 700px) {
      .connect-container { width: min(100% - 26px, var(--connect-width)); }
      .guide-hero { padding: 52px 0 56px; }
      .guide-layout { padding: 54px 0 68px; }
      .step-card {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 15px;
        padding: 21px 18px;
      }
      .step-number {
        width: 50px;
        height: 50px;
        border-radius: 14px;
        font-size: 22px;
      }
      .checklist,
      .tips-grid,
      .complete-list {
        grid-template-columns: 1fr;
      }
      .connect-footer-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 480px) {
      .connect-nav { min-height: 84px; }
      .connect-logo img { height: 60px; }
      .connect-header .connect-button { display: none; }
      .step-card { grid-template-columns: 1fr; }
    }
  
.help-hero{padding:76px 0;background:var(--connect-light-blue);text-align:center}.help-hero h1{font-size:clamp(44px,6vw,70px);margin-bottom:16px}.help-hero p{max-width:720px;margin:auto;font-size:18px}
.help-search{max-width:650px;margin:28px auto 0;position:relative}.help-search input{width:100%;min-height:58px;padding:0 20px;border:1px solid var(--connect-border);border-radius:14px;font:inherit;box-shadow:0 8px 24px rgba(30,30,30,.06)}
.help-section{padding:76px 0}.help-heading{max-width:700px;margin-bottom:32px}.help-heading h2{font-size:40px;margin-bottom:10px}
.help-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.help-card{display:flex;flex-direction:column;padding:28px;border:1px solid var(--connect-border);border-radius:22px;background:#fff;box-shadow:0 8px 24px rgba(30,30,30,.05);transition:.2s}.help-card:hover{transform:translateY(-5px);box-shadow:0 16px 36px rgba(30,30,30,.1)}.help-card>span{color:var(--connect-pink);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}.help-icon{display:grid;place-items:center;width:54px;height:54px;margin:18px 0;border-radius:15px;background:var(--connect-light-pink);color:var(--connect-pink);font-size:22px;font-weight:700}.help-card h3{margin-bottom:10px;font-size:24px}.help-card p{flex:1;margin-bottom:20px}.help-card strong{color:var(--connect-pink)}
@media(max-width:950px){.help-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.help-grid{grid-template-columns:1fr}}

.help-card > span {
  margin-bottom: 12px;
}

.help-card h3 {
  margin-top: 0;
}

.help-card {
  padding-top: 26px;
}

.legal-hero{padding:72px 0 62px;background:var(--connect-light-blue)}
.legal-hero h1{max-width:900px;margin:10px 0 16px;font-size:clamp(42px,5.5vw,68px);letter-spacing:-.035em}
.legal-hero p{max-width:780px;font-size:18px}.legal-update{margin-top:20px;color:var(--connect-dark);font-size:14px;font-weight:600}
.legal-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:48px;align-items:start;padding:72px 0 90px}
.legal-content h2{scroll-margin-top:145px;margin:48px 0 14px;font-size:32px}.legal-content h2:first-child{margin-top:0}
.legal-content h3{margin:26px 0 9px;font-size:21px}.legal-content p{margin-bottom:14px}.legal-content ul{margin:10px 0 20px;padding-left:23px;color:var(--connect-copy)}
.legal-content li{margin-bottom:7px}.legal-content a{color:var(--connect-pink);text-decoration:underline;text-underline-offset:3px}
.legal-sidebar{position:sticky;top:145px;padding:24px;border:1px solid var(--connect-border);border-radius:20px;background:#fff;box-shadow:0 8px 24px rgba(30,30,30,.05)}
.legal-sidebar h3{margin-bottom:12px;font-size:19px}.legal-sidebar a{display:block;padding:9px 0;border-bottom:1px solid var(--connect-border);color:var(--connect-copy);font-size:14px}
.legal-sidebar a:last-child{border-bottom:0}.legal-note{margin:24px 0;padding:20px;border-left:4px solid var(--connect-blue);border-radius:0 15px 15px 0;background:var(--connect-light-blue)}
.legal-company{padding:22px;border:1px solid var(--connect-border);border-radius:18px;background:var(--connect-light-pink)}
.faq-grid{display:grid;gap:14px}.faq-item{border:1px solid var(--connect-border);border-radius:18px;background:#fff;overflow:hidden}
.faq-question{width:100%;display:flex;justify-content:space-between;gap:20px;padding:20px 22px;border:0;background:#fff;text-align:left;color:var(--connect-dark);font:inherit;font-weight:700;cursor:pointer}
.faq-answer{display:none;padding:0 22px 21px}.faq-item.is-open .faq-answer{display:block}
@media(max-width:950px){.legal-layout{grid-template-columns:1fr}.legal-sidebar{position:static;order:-1}}

/* Unified Connect site header */
.connect-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  width: 100% !important;
  background: rgba(255,255,255,.97) !important;
  border-bottom: 1px solid #ececec !important;
  backdrop-filter: blur(12px);
  transition: box-shadow .2s ease;
}

.connect-header.is-scrolled {
  box-shadow: 0 8px 24px rgba(30,30,30,.08);
}

.connect-header .connect-nav {
  min-height: 104px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 30px !important;
}

.connect-header .connect-logo {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  padding: 8px 0 !important;
}

.connect-header .connect-logo img {
  width: auto !important;
  height: 72px !important;
  max-width: none !important;
  object-fit: contain !important;
  transform: none !important;
}

.connect-header .connect-menu {
  display: flex !important;
  align-items: center !important;
  gap: 30px !important;
  margin-left: auto !important;
}

.connect-header .connect-menu a,
.connect-header .connect-sign-in {
  position: relative;
  color: var(--connect-dark, #27272a) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

.connect-header .connect-menu a:hover,
.connect-header .connect-sign-in:hover,
.connect-header .connect-menu a.is-active {
  color: var(--connect-pink, #ee4266) !important;
}

.connect-header .connect-menu a.is-active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -10px;
  left: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--connect-pink, #ee4266);
}

.connect-header .connect-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  flex: 0 0 auto !important;
}

.connect-header .connect-button {
  min-height: 46px !important;
  padding: 0 27px !important;
  border-radius: 6px !important;
  font-size: 15px !important;
}

.connect-mobile-menu {
  display: none;
  position: relative;
  z-index: 110;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--connect-dark, #27272a);
  cursor: pointer;
}

.connect-mobile-menu-lines,
.connect-mobile-menu-lines::before,
.connect-mobile-menu-lines::after {
  position: absolute;
  left: 50%;
  width: 25px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform: translateX(-50%);
  transition: transform .22s ease, top .22s ease, opacity .18s ease;
}

.connect-mobile-menu-lines {
  top: 50%;
  transform: translate(-50%, -50%);
}

.connect-mobile-menu-lines::before,
.connect-mobile-menu-lines::after {
  content: "";
}

.connect-mobile-menu-lines::before { top: -8px; }
.connect-mobile-menu-lines::after { top: 8px; }

.connect-mobile-menu[aria-expanded="true"] .connect-mobile-menu-lines {
  background: transparent;
}

.connect-mobile-menu[aria-expanded="true"] .connect-mobile-menu-lines::before {
  top: 0;
  transform: translateX(-50%) rotate(45deg);
}

.connect-mobile-menu[aria-expanded="true"] .connect-mobile-menu-lines::after {
  top: 0;
  transform: translateX(-50%) rotate(-45deg);
}

@media (max-width: 1050px) {
  .connect-header .connect-menu { gap: 22px !important; }
  .connect-header .connect-menu a,
  .connect-header .connect-sign-in { font-size: 14px !important; }
  .connect-header .connect-logo img { height: 66px !important; }
}

@media (max-width: 950px) {
  .connect-header .connect-nav {
    min-height: 88px !important;
    position: relative !important;
  }

  .connect-header .connect-logo img {
    height: 56px !important;
  }

  .connect-header .connect-menu {
    position: absolute !important;
    top: calc(100% + 1px) !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 105 !important;
    display: grid !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 10px 20px 20px !important;
    border-top: 1px solid #ececec !important;
    border-bottom: 1px solid #ececec !important;
    background: #fff !important;
    box-shadow: 0 16px 28px rgba(30,30,30,.10) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-8px) !important;
    pointer-events: none !important;
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease !important;
  }

  .connect-header .connect-menu.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }

  .connect-header .connect-menu a {
    display: block !important;
    padding: 15px 4px !important;
    border-bottom: 1px solid #f1eeee !important;
    font-size: 16px !important;
    font-weight: 600 !important;
  }

  .connect-header .connect-menu a:last-child {
    border-bottom: 0 !important;
  }

  .connect-header .connect-menu a.is-active::after {
    display: none !important;
  }

  .connect-header .connect-sign-in {
    display: none !important;
  }

  .connect-mobile-menu {
    display: block !important;
  }

  body.connect-menu-open {
    overflow: hidden;
  }
}

@media (max-width: 650px) {
  .connect-header .connect-nav {
    min-height: 78px !important;
  }

  .connect-header .connect-logo img {
    height: 48px !important;
  }

  .connect-header .connect-header-actions {
    gap: 10px !important;
  }

  .connect-header .connect-button {
    display: none !important;
  }
}

/* Unified footer */
.connect-footer {
  background: #fff !important;
  color: var(--connect-dark, #27272a) !important;
  border-top: 1px solid #ececec !important;
}

.connect-footer-logo {
  width: auto !important;
  height: 72px !important;
  max-width: none !important;
  object-fit: contain !important;
}
@media (max-width: 950px) {
  .connect-footer-logo { height: 56px !important; }
}
@media (max-width: 650px) {
  .connect-footer-logo { height: 48px !important; }
}

/* Source: guides/how-to-connect-ebay.html */
:root {
      --connect-pink: #ee4266;
      --connect-pink-dark: #d93658;
      --connect-blue: #55b7c9;
      --connect-dark: #27272a;
      --connect-copy: #646464;
      --connect-light-blue: #eef9fb;
      --connect-light-pink: #fff2f5;
      --connect-white: #ffffff;
      --connect-border: #ece7e8;
      --connect-shadow: 0 12px 32px rgba(30, 30, 30, 0.08);
      --connect-width: 1180px;
      --heading-font: var(--e-global-typography-primary-font-family, "Poppins", Arial, sans-serif);
      --body-font: var(--e-global-typography-text-font-family, "Poppins", Arial, sans-serif);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--connect-dark);
      background: #fff;
      font-family: var(--body-font);
      font-size: 16px;
      line-height: 1.65;
    }

    img { max-width: 100%; display: block; }
    a { color: inherit; text-decoration: none; }
    h1, h2, h3 {
      margin: 0;
      color: var(--connect-dark);
      font-family: var(--heading-font);
      line-height: 1.2;
    }
    p { margin: 0; color: var(--connect-copy); }

    .connect-container {
      width: min(var(--connect-width), calc(100% - 40px));
      margin: 0 auto;
    }

    .connect-header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(255,255,255,.97);
      border-bottom: 1px solid #ececec;
      backdrop-filter: blur(12px);
    }

    .connect-nav {
      min-height: 118px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 34px;
    }

    .connect-logo {
      display: flex;
      align-items: center;
      padding: 10px 0;
      flex: 0 0 auto;
    }

    .connect-logo img {
      width: auto;
      height: 84px;
      max-width: none;
    }

    .connect-menu {
      display: flex;
      align-items: center;
      gap: 36px;
      margin-left: auto;
    }

    .connect-menu a,
    .connect-sign-in {
      font-size: 16px;
      font-weight: 500;
      white-space: nowrap;
    }

    .connect-menu a:hover,
    .connect-sign-in:hover {
      color: var(--connect-pink);
    }

    .connect-header-actions {
      display: flex;
      align-items: center;
      gap: 22px;
    }

    .connect-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      padding: 0 30px;
      border: 2px solid var(--connect-pink);
      border-radius: 6px;
      background: var(--connect-pink);
      color: #fff;
      font-weight: 700;
      transition: .2s ease;
    }

    .connect-button:hover {
      background: var(--connect-pink-dark);
      border-color: var(--connect-pink-dark);
      transform: translateY(-2px);
    }

    .connect-mobile-menu {
      display: none;
      position: relative;
      width: 44px;
      height: 44px;
      padding: 0;
      border: 0;
      background: transparent;
      cursor: pointer;
    }

    .connect-mobile-menu-lines,
    .connect-mobile-menu-lines::before,
    .connect-mobile-menu-lines::after {
      position: absolute;
      left: 50%;
      width: 25px;
      height: 2px;
      border-radius: 5px;
      background: currentColor;
      transform: translateX(-50%);
      transition: .2s;
    }

    .connect-mobile-menu-lines {
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .connect-mobile-menu-lines::before,
    .connect-mobile-menu-lines::after { content: ""; }
    .connect-mobile-menu-lines::before { top: -8px; }
    .connect-mobile-menu-lines::after { top: 8px; }

    .guide-hero {
      padding: 74px 0 70px;
      background: var(--connect-light-blue);
    }

    .guide-breadcrumbs {
      margin-bottom: 24px;
      color: var(--connect-copy);
      font-size: 14px;
    }

    .guide-breadcrumbs a {
      color: var(--connect-pink);
      font-weight: 700;
    }

    .guide-eyebrow {
      display: inline-flex;
      margin-bottom: 14px;
      padding: 7px 12px;
      border: 1px solid #f0d8df;
      border-radius: 999px;
      background: #fff;
      color: var(--connect-pink);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .guide-hero h1 {
      max-width: 880px;
      margin-bottom: 18px;
      font-size: clamp(42px, 5vw, 66px);
      letter-spacing: -.035em;
    }

    .guide-hero .lead {
      max-width: 820px;
      font-size: 19px;
    }

    .guide-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 20px;
      margin-top: 26px;
      color: var(--connect-dark);
      font-size: 14px;
      font-weight: 600;
    }

    .guide-meta span::before {
      content: "✓";
      margin-right: 7px;
      color: var(--connect-pink);
    }

    .guide-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 280px;
      gap: 50px;
      align-items: start;
      padding: 74px 0 90px;
    }

    .guide-sidebar {
      position: sticky;
      top: 145px;
      padding: 24px;
      border: 1px solid var(--connect-border);
      border-radius: 20px;
      background: #fff;
      box-shadow: 0 8px 24px rgba(30,30,30,.05);
    }

    .guide-sidebar h3 {
      margin-bottom: 14px;
      font-size: 19px;
    }

    .guide-sidebar a {
      display: block;
      padding: 10px 0;
      border-bottom: 1px solid var(--connect-border);
      color: var(--connect-copy);
      font-size: 14px;
    }

    .guide-sidebar a:last-child { border-bottom: 0; }
    .guide-sidebar a:hover { color: var(--connect-pink); }

    .guide-section {
      margin-bottom: 58px;
      scroll-margin-top: 150px;
    }

    .guide-section h2 {
      margin-bottom: 18px;
      font-size: clamp(30px, 3.5vw, 42px);
      letter-spacing: -.025em;
    }

    .guide-section > p {
      max-width: 820px;
      font-size: 17px;
    }

    .summary-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
      margin-top: 28px;
    }

    .summary-card {
      padding: 24px;
      border: 1px solid var(--connect-border);
      border-radius: 20px;
      background: #fff;
    }

    .summary-card strong {
      display: block;
      margin-bottom: 8px;
      font-size: 17px;
    }

    .summary-card p { font-size: 14px; }

    .checklist {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 15px;
      margin-top: 25px;
    }

    .check-item {
      display: flex;
      gap: 12px;
      padding: 18px;
      border-radius: 16px;
      background: var(--connect-light-pink);
    }

    .check-item::before {
      content: "✓";
      flex: 0 0 26px;
      display: grid;
      place-items: center;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: var(--connect-pink);
      color: #fff;
      font-size: 13px;
      font-weight: 700;
    }

    .check-item strong {
      display: block;
      margin-bottom: 4px;
    }

    .check-item p { font-size: 14px; }

    .steps {
      display: grid;
      gap: 24px;
      margin-top: 30px;
    }

    .step-card {
      display: grid;
      grid-template-columns: 74px minmax(0, 1fr);
      gap: 22px;
      padding: 28px;
      border: 1px solid var(--connect-border);
      border-radius: 24px;
      background: #fff;
      box-shadow: 0 8px 24px rgba(30,30,30,.045);
    }

    .step-number {
      display: grid;
      place-items: center;
      width: 64px;
      height: 64px;
      border-radius: 17px;
      background: linear-gradient(135deg, var(--connect-pink), var(--connect-pink-dark));
      color: #fff;
      font-size: 27px;
      font-weight: 700;
      box-shadow: 0 10px 20px rgba(238,66,102,.22);
    }

    .step-content h3 {
      margin-bottom: 9px;
      font-size: clamp(23px, 2.6vw, 29px);
    }

    .step-content > p {
      margin-bottom: 18px;
      font-size: 16px;
    }

    .screenshot {
      margin-top: 18px;
    }

    .screenshot img {
      width: 100%;
      border: 1px solid var(--connect-border);
      border-radius: 17px;
      background: #fff;
      box-shadow: 0 9px 24px rgba(30,30,30,.07);
      cursor: zoom-in;
    }

    .screenshot--medium { max-width: 760px; }
    .screenshot--small { max-width: 520px; }

    .screenshot figcaption {
      margin-top: 9px;
      color: var(--connect-copy);
      font-size: 13px;
    }

    .note {
      margin-top: 18px;
      padding: 18px 20px;
      border-left: 4px solid var(--connect-blue);
      border-radius: 0 14px 14px 0;
      background: var(--connect-light-blue);
    }

    .note strong {
      display: block;
      margin-bottom: 4px;
    }

    .note p { font-size: 14px; }

    .tips-panel {
      padding: 30px;
      border: 1px solid #f1d7e0;
      border-radius: 24px;
      background: var(--connect-light-pink);
    }

    .tips-panel h2 {
      margin-bottom: 24px;
      font-size: clamp(28px, 3vw, 36px);
    }

    .tips-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }

    .tip-card {
      padding: 21px;
      border: 1px solid #eadfe2;
      border-radius: 17px;
      background: #fff;
    }

    .tip-card strong {
      display: block;
      margin-bottom: 7px;
    }

    .tip-card p { font-size: 15px; }

    .complete-panel {
      padding: 32px;
      border-radius: 24px;
      background: var(--connect-dark);
      color: #fff;
    }

    .complete-panel h2,
    .complete-panel p { color: #fff; }

    .complete-panel h2 { margin-bottom: 12px; }
    .complete-panel p { opacity: .86; }

    .complete-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-top: 22px;
    }

    .complete-list span {
      padding: 13px 15px;
      border-radius: 12px;
      background: rgba(255,255,255,.09);
      font-size: 14px;
      font-weight: 600;
    }

    .complete-list span::before {
      content: "✓";
      margin-right: 8px;
      color: #fff;
    }

    .connect-final-cta {
      padding: 72px 0;
      background: var(--connect-pink);
      text-align: center;
    }

    .connect-final-cta h2,
    .connect-final-cta p { color: #fff; }

    .connect-final-cta h2 {
      margin-bottom: 14px;
      font-size: clamp(32px, 4vw, 48px);
    }

    .connect-final-cta p {
      max-width: 680px;
      margin: 0 auto 25px;
      opacity: .92;
    }

    .connect-final-cta .connect-button {
      border-color: #fff;
      background: #fff;
      color: var(--connect-pink);
    }

    .connect-footer {
      padding: 55px 0 28px;
      border-top: 1px solid #ececec;
      background: #fff;
    }

    .connect-footer-grid {
      display: grid;
      grid-template-columns: 1.6fr 1fr 1fr;
      gap: 50px;
    }

    .connect-footer-logo {
      width: auto;
      height: 84px;
      max-width: none;
      margin-bottom: 20px;
    }

    .connect-footer p,
    .connect-footer a { color: #666; }

    .connect-footer-links { display: grid; gap: 8px; }
    .connect-footer a:hover { color: var(--connect-pink); }

    .connect-copyright {
      margin-top: 38px;
      padding-top: 22px;
      border-top: 1px solid #ececec;
      color: #888;
      font-size: 13px;
    }

    .image-modal {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: rgba(15,15,15,.9);
    }

    .image-modal.is-open { display: flex; }
    .image-modal img {
      max-width: min(1500px, 96vw);
      max-height: 92vh;
      border-radius: 12px;
    }

    .image-modal button {
      position: absolute;
      top: 16px;
      right: 20px;
      border: 0;
      background: transparent;
      color: #fff;
      font-size: 40px;
      cursor: pointer;
    }

    @media (max-width: 950px) {
      .connect-nav { min-height: 96px; }
      .connect-logo img { height: 68px; }
      .connect-menu {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        display: grid;
        gap: 0;
        padding: 10px 20px 20px;
        border-top: 1px solid #ececec;
        border-bottom: 1px solid #ececec;
        background: #fff;
        box-shadow: 0 16px 28px rgba(30,30,30,.1);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        pointer-events: none;
        transition: .2s ease;
      }
      .connect-menu.is-open {
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
      }
      .connect-menu a {
        padding: 15px 4px;
        border-bottom: 1px solid #f1eeee;
        font-weight: 600;
      }
      .connect-sign-in { display: none; }
      .connect-mobile-menu { display: block; }
      .guide-layout { grid-template-columns: 1fr; }
      .guide-sidebar { position: static; order: -1; }
      .summary-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 700px) {
      .connect-container { width: min(100% - 26px, var(--connect-width)); }
      .guide-hero { padding: 52px 0 56px; }
      .guide-layout { padding: 54px 0 68px; }
      .step-card {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 15px;
        padding: 21px 18px;
      }
      .step-number {
        width: 50px;
        height: 50px;
        border-radius: 14px;
        font-size: 22px;
      }
      .checklist,
      .tips-grid,
      .complete-list {
        grid-template-columns: 1fr;
      }
      .connect-footer-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 480px) {
      .connect-nav { min-height: 84px; }
      .connect-logo img { height: 60px; }
      .connect-header .connect-button { display: none; }
      .step-card { grid-template-columns: 1fr; }
    }
  
/* Unified Connect site header */
.connect-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  width: 100% !important;
  background: rgba(255,255,255,.97) !important;
  border-bottom: 1px solid #ececec !important;
  backdrop-filter: blur(12px);
  transition: box-shadow .2s ease;
}

.connect-header.is-scrolled {
  box-shadow: 0 8px 24px rgba(30,30,30,.08);
}

.connect-header .connect-nav {
  min-height: 104px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 30px !important;
}

.connect-header .connect-logo {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  padding: 8px 0 !important;
}

.connect-header .connect-logo img {
  width: auto !important;
  height: 72px !important;
  max-width: none !important;
  object-fit: contain !important;
  transform: none !important;
}

.connect-header .connect-menu {
  display: flex !important;
  align-items: center !important;
  gap: 30px !important;
  margin-left: auto !important;
}

.connect-header .connect-menu a,
.connect-header .connect-sign-in {
  position: relative;
  color: var(--connect-dark, #27272a) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

.connect-header .connect-menu a:hover,
.connect-header .connect-sign-in:hover,
.connect-header .connect-menu a.is-active {
  color: var(--connect-pink, #ee4266) !important;
}

.connect-header .connect-menu a.is-active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -10px;
  left: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--connect-pink, #ee4266);
}

.connect-header .connect-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  flex: 0 0 auto !important;
}

.connect-header .connect-button {
  min-height: 46px !important;
  padding: 0 27px !important;
  border-radius: 6px !important;
  font-size: 15px !important;
}

.connect-mobile-menu {
  display: none;
  position: relative;
  z-index: 110;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--connect-dark, #27272a);
  cursor: pointer;
}

.connect-mobile-menu-lines,
.connect-mobile-menu-lines::before,
.connect-mobile-menu-lines::after {
  position: absolute;
  left: 50%;
  width: 25px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform: translateX(-50%);
  transition: transform .22s ease, top .22s ease, opacity .18s ease;
}

.connect-mobile-menu-lines {
  top: 50%;
  transform: translate(-50%, -50%);
}

.connect-mobile-menu-lines::before,
.connect-mobile-menu-lines::after {
  content: "";
}

.connect-mobile-menu-lines::before { top: -8px; }
.connect-mobile-menu-lines::after { top: 8px; }

.connect-mobile-menu[aria-expanded="true"] .connect-mobile-menu-lines {
  background: transparent;
}

.connect-mobile-menu[aria-expanded="true"] .connect-mobile-menu-lines::before {
  top: 0;
  transform: translateX(-50%) rotate(45deg);
}

.connect-mobile-menu[aria-expanded="true"] .connect-mobile-menu-lines::after {
  top: 0;
  transform: translateX(-50%) rotate(-45deg);
}

@media (max-width: 1050px) {
  .connect-header .connect-menu { gap: 22px !important; }
  .connect-header .connect-menu a,
  .connect-header .connect-sign-in { font-size: 14px !important; }
  .connect-header .connect-logo img { height: 66px !important; }
}

@media (max-width: 950px) {
  .connect-header .connect-nav {
    min-height: 88px !important;
    position: relative !important;
  }

  .connect-header .connect-logo img {
    height: 56px !important;
  }

  .connect-header .connect-menu {
    position: absolute !important;
    top: calc(100% + 1px) !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 105 !important;
    display: grid !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 10px 20px 20px !important;
    border-top: 1px solid #ececec !important;
    border-bottom: 1px solid #ececec !important;
    background: #fff !important;
    box-shadow: 0 16px 28px rgba(30,30,30,.10) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-8px) !important;
    pointer-events: none !important;
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease !important;
  }

  .connect-header .connect-menu.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }

  .connect-header .connect-menu a {
    display: block !important;
    padding: 15px 4px !important;
    border-bottom: 1px solid #f1eeee !important;
    font-size: 16px !important;
    font-weight: 600 !important;
  }

  .connect-header .connect-menu a:last-child {
    border-bottom: 0 !important;
  }

  .connect-header .connect-menu a.is-active::after {
    display: none !important;
  }

  .connect-header .connect-sign-in {
    display: none !important;
  }

  .connect-mobile-menu {
    display: block !important;
  }

  body.connect-menu-open {
    overflow: hidden;
  }
}

@media (max-width: 650px) {
  .connect-header .connect-nav {
    min-height: 78px !important;
  }

  .connect-header .connect-logo img {
    height: 48px !important;
  }

  .connect-header .connect-header-actions {
    gap: 10px !important;
  }

  .connect-header .connect-button {
    display: none !important;
  }
}

/* Unified footer */
.connect-footer {
  background: #fff !important;
  color: var(--connect-dark, #27272a) !important;
  border-top: 1px solid #ececec !important;
}

.connect-footer-logo {
  width: auto !important;
  height: 72px !important;
  max-width: none !important;
  object-fit: contain !important;
}
@media (max-width: 950px) {
  .connect-footer-logo { height: 56px !important; }
}
@media (max-width: 650px) {
  .connect-footer-logo { height: 48px !important; }
}

/* Source: guides/index.html */
:root {
      --connect-pink: #ee4266;
      --connect-pink-dark: #d93658;
      --connect-blue: #55b7c9;
      --connect-dark: #27272a;
      --connect-copy: #646464;
      --connect-light-blue: #eef9fb;
      --connect-light-pink: #fff2f5;
      --connect-white: #ffffff;
      --connect-border: #ece7e8;
      --connect-shadow: 0 12px 32px rgba(30, 30, 30, 0.08);
      --connect-width: 1180px;
      --heading-font: var(--e-global-typography-primary-font-family, "Poppins", Arial, sans-serif);
      --body-font: var(--e-global-typography-text-font-family, "Poppins", Arial, sans-serif);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--connect-dark);
      background: #fff;
      font-family: var(--body-font);
      font-size: 16px;
      line-height: 1.65;
    }

    img { max-width: 100%; display: block; }
    a { color: inherit; text-decoration: none; }
    h1, h2, h3 {
      margin: 0;
      color: var(--connect-dark);
      font-family: var(--heading-font);
      line-height: 1.2;
    }
    p { margin: 0; color: var(--connect-copy); }

    .connect-container {
      width: min(var(--connect-width), calc(100% - 40px));
      margin: 0 auto;
    }

    .connect-header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(255,255,255,.97);
      border-bottom: 1px solid #ececec;
      backdrop-filter: blur(12px);
    }

    .connect-nav {
      min-height: 118px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 34px;
    }

    .connect-logo {
      display: flex;
      align-items: center;
      padding: 10px 0;
      flex: 0 0 auto;
    }

    .connect-logo img {
      width: auto;
      height: 84px;
      max-width: none;
    }

    .connect-menu {
      display: flex;
      align-items: center;
      gap: 36px;
      margin-left: auto;
    }

    .connect-menu a,
    .connect-sign-in {
      font-size: 16px;
      font-weight: 500;
      white-space: nowrap;
    }

    .connect-menu a:hover,
    .connect-sign-in:hover {
      color: var(--connect-pink);
    }

    .connect-header-actions {
      display: flex;
      align-items: center;
      gap: 22px;
    }

    .connect-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      padding: 0 30px;
      border: 2px solid var(--connect-pink);
      border-radius: 6px;
      background: var(--connect-pink);
      color: #fff;
      font-weight: 700;
      transition: .2s ease;
    }

    .connect-button:hover {
      background: var(--connect-pink-dark);
      border-color: var(--connect-pink-dark);
      transform: translateY(-2px);
    }

    .connect-mobile-menu {
      display: none;
      position: relative;
      width: 44px;
      height: 44px;
      padding: 0;
      border: 0;
      background: transparent;
      cursor: pointer;
    }

    .connect-mobile-menu-lines,
    .connect-mobile-menu-lines::before,
    .connect-mobile-menu-lines::after {
      position: absolute;
      left: 50%;
      width: 25px;
      height: 2px;
      border-radius: 5px;
      background: currentColor;
      transform: translateX(-50%);
      transition: .2s;
    }

    .connect-mobile-menu-lines {
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .connect-mobile-menu-lines::before,
    .connect-mobile-menu-lines::after { content: ""; }
    .connect-mobile-menu-lines::before { top: -8px; }
    .connect-mobile-menu-lines::after { top: 8px; }

    .guide-hero {
      padding: 74px 0 70px;
      background: var(--connect-light-blue);
    }

    .guide-breadcrumbs {
      margin-bottom: 24px;
      color: var(--connect-copy);
      font-size: 14px;
    }

    .guide-breadcrumbs a {
      color: var(--connect-pink);
      font-weight: 700;
    }

    .guide-eyebrow {
      display: inline-flex;
      margin-bottom: 14px;
      padding: 7px 12px;
      border: 1px solid #f0d8df;
      border-radius: 999px;
      background: #fff;
      color: var(--connect-pink);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .guide-hero h1 {
      max-width: 880px;
      margin-bottom: 18px;
      font-size: clamp(42px, 5vw, 66px);
      letter-spacing: -.035em;
    }

    .guide-hero .lead {
      max-width: 820px;
      font-size: 19px;
    }

    .guide-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 20px;
      margin-top: 26px;
      color: var(--connect-dark);
      font-size: 14px;
      font-weight: 600;
    }

    .guide-meta span::before {
      content: "✓";
      margin-right: 7px;
      color: var(--connect-pink);
    }

    .guide-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 280px;
      gap: 50px;
      align-items: start;
      padding: 74px 0 90px;
    }

    .guide-sidebar {
      position: sticky;
      top: 145px;
      padding: 24px;
      border: 1px solid var(--connect-border);
      border-radius: 20px;
      background: #fff;
      box-shadow: 0 8px 24px rgba(30,30,30,.05);
    }

    .guide-sidebar h3 {
      margin-bottom: 14px;
      font-size: 19px;
    }

    .guide-sidebar a {
      display: block;
      padding: 10px 0;
      border-bottom: 1px solid var(--connect-border);
      color: var(--connect-copy);
      font-size: 14px;
    }

    .guide-sidebar a:last-child { border-bottom: 0; }
    .guide-sidebar a:hover { color: var(--connect-pink); }

    .guide-section {
      margin-bottom: 58px;
      scroll-margin-top: 150px;
    }

    .guide-section h2 {
      margin-bottom: 18px;
      font-size: clamp(30px, 3.5vw, 42px);
      letter-spacing: -.025em;
    }

    .guide-section > p {
      max-width: 820px;
      font-size: 17px;
    }

    .summary-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
      margin-top: 28px;
    }

    .summary-card {
      padding: 24px;
      border: 1px solid var(--connect-border);
      border-radius: 20px;
      background: #fff;
    }

    .summary-card strong {
      display: block;
      margin-bottom: 8px;
      font-size: 17px;
    }

    .summary-card p { font-size: 14px; }

    .checklist {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 15px;
      margin-top: 25px;
    }

    .check-item {
      display: flex;
      gap: 12px;
      padding: 18px;
      border-radius: 16px;
      background: var(--connect-light-pink);
    }

    .check-item::before {
      content: "✓";
      flex: 0 0 26px;
      display: grid;
      place-items: center;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: var(--connect-pink);
      color: #fff;
      font-size: 13px;
      font-weight: 700;
    }

    .check-item strong {
      display: block;
      margin-bottom: 4px;
    }

    .check-item p { font-size: 14px; }

    .steps {
      display: grid;
      gap: 24px;
      margin-top: 30px;
    }

    .step-card {
      display: grid;
      grid-template-columns: 74px minmax(0, 1fr);
      gap: 22px;
      padding: 28px;
      border: 1px solid var(--connect-border);
      border-radius: 24px;
      background: #fff;
      box-shadow: 0 8px 24px rgba(30,30,30,.045);
    }

    .step-number {
      display: grid;
      place-items: center;
      width: 64px;
      height: 64px;
      border-radius: 17px;
      background: linear-gradient(135deg, var(--connect-pink), var(--connect-pink-dark));
      color: #fff;
      font-size: 27px;
      font-weight: 700;
      box-shadow: 0 10px 20px rgba(238,66,102,.22);
    }

    .step-content h3 {
      margin-bottom: 9px;
      font-size: clamp(23px, 2.6vw, 29px);
    }

    .step-content > p {
      margin-bottom: 18px;
      font-size: 16px;
    }

    .screenshot {
      margin-top: 18px;
    }

    .screenshot img {
      width: 100%;
      border: 1px solid var(--connect-border);
      border-radius: 17px;
      background: #fff;
      box-shadow: 0 9px 24px rgba(30,30,30,.07);
      cursor: zoom-in;
    }

    .screenshot--medium { max-width: 760px; }
    .screenshot--small { max-width: 520px; }

    .screenshot figcaption {
      margin-top: 9px;
      color: var(--connect-copy);
      font-size: 13px;
    }

    .note {
      margin-top: 18px;
      padding: 18px 20px;
      border-left: 4px solid var(--connect-blue);
      border-radius: 0 14px 14px 0;
      background: var(--connect-light-blue);
    }

    .note strong {
      display: block;
      margin-bottom: 4px;
    }

    .note p { font-size: 14px; }

    .tips-panel {
      padding: 30px;
      border: 1px solid #f1d7e0;
      border-radius: 24px;
      background: var(--connect-light-pink);
    }

    .tips-panel h2 {
      margin-bottom: 24px;
      font-size: clamp(28px, 3vw, 36px);
    }

    .tips-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }

    .tip-card {
      padding: 21px;
      border: 1px solid #eadfe2;
      border-radius: 17px;
      background: #fff;
    }

    .tip-card strong {
      display: block;
      margin-bottom: 7px;
    }

    .tip-card p { font-size: 15px; }

    .complete-panel {
      padding: 32px;
      border-radius: 24px;
      background: var(--connect-dark);
      color: #fff;
    }

    .complete-panel h2,
    .complete-panel p { color: #fff; }

    .complete-panel h2 { margin-bottom: 12px; }
    .complete-panel p { opacity: .86; }

    .complete-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-top: 22px;
    }

    .complete-list span {
      padding: 13px 15px;
      border-radius: 12px;
      background: rgba(255,255,255,.09);
      font-size: 14px;
      font-weight: 600;
    }

    .complete-list span::before {
      content: "✓";
      margin-right: 8px;
      color: #fff;
    }

    .connect-final-cta {
      padding: 72px 0;
      background: var(--connect-pink);
      text-align: center;
    }

    .connect-final-cta h2,
    .connect-final-cta p { color: #fff; }

    .connect-final-cta h2 {
      margin-bottom: 14px;
      font-size: clamp(32px, 4vw, 48px);
    }

    .connect-final-cta p {
      max-width: 680px;
      margin: 0 auto 25px;
      opacity: .92;
    }

    .connect-final-cta .connect-button {
      border-color: #fff;
      background: #fff;
      color: var(--connect-pink);
    }

    .connect-footer {
      padding: 55px 0 28px;
      border-top: 1px solid #ececec;
      background: #fff;
    }

    .connect-footer-grid {
      display: grid;
      grid-template-columns: 1.6fr 1fr 1fr;
      gap: 50px;
    }

    .connect-footer-logo {
      width: auto;
      height: 84px;
      max-width: none;
      margin-bottom: 20px;
    }

    .connect-footer p,
    .connect-footer a { color: #666; }

    .connect-footer-links { display: grid; gap: 8px; }
    .connect-footer a:hover { color: var(--connect-pink); }

    .connect-copyright {
      margin-top: 38px;
      padding-top: 22px;
      border-top: 1px solid #ececec;
      color: #888;
      font-size: 13px;
    }

    .image-modal {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: rgba(15,15,15,.9);
    }

    .image-modal.is-open { display: flex; }
    .image-modal img {
      max-width: min(1500px, 96vw);
      max-height: 92vh;
      border-radius: 12px;
    }

    .image-modal button {
      position: absolute;
      top: 16px;
      right: 20px;
      border: 0;
      background: transparent;
      color: #fff;
      font-size: 40px;
      cursor: pointer;
    }

    @media (max-width: 950px) {
      .connect-nav { min-height: 96px; }
      .connect-logo img { height: 68px; }
      .connect-menu {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        display: grid;
        gap: 0;
        padding: 10px 20px 20px;
        border-top: 1px solid #ececec;
        border-bottom: 1px solid #ececec;
        background: #fff;
        box-shadow: 0 16px 28px rgba(30,30,30,.1);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        pointer-events: none;
        transition: .2s ease;
      }
      .connect-menu.is-open {
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
      }
      .connect-menu a {
        padding: 15px 4px;
        border-bottom: 1px solid #f1eeee;
        font-weight: 600;
      }
      .connect-sign-in { display: none; }
      .connect-mobile-menu { display: block; }
      .guide-layout { grid-template-columns: 1fr; }
      .guide-sidebar { position: static; order: -1; }
      .summary-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 700px) {
      .connect-container { width: min(100% - 26px, var(--connect-width)); }
      .guide-hero { padding: 52px 0 56px; }
      .guide-layout { padding: 54px 0 68px; }
      .step-card {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 15px;
        padding: 21px 18px;
      }
      .step-number {
        width: 50px;
        height: 50px;
        border-radius: 14px;
        font-size: 22px;
      }
      .checklist,
      .tips-grid,
      .complete-list {
        grid-template-columns: 1fr;
      }
      .connect-footer-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 480px) {
      .connect-nav { min-height: 84px; }
      .connect-logo img { height: 60px; }
      .connect-header .connect-button { display: none; }
      .step-card { grid-template-columns: 1fr; }
    }
  
.help-hero{padding:76px 0;background:var(--connect-light-blue);text-align:center}.help-hero h1{font-size:clamp(44px,6vw,70px);margin-bottom:16px}.help-hero p{max-width:720px;margin:auto;font-size:18px}
.help-search{max-width:650px;margin:28px auto 0;position:relative}.help-search input{width:100%;min-height:58px;padding:0 20px;border:1px solid var(--connect-border);border-radius:14px;font:inherit;box-shadow:0 8px 24px rgba(30,30,30,.06)}
.help-section{padding:76px 0}.help-heading{max-width:700px;margin-bottom:32px}.help-heading h2{font-size:40px;margin-bottom:10px}
.help-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.help-card{display:flex;flex-direction:column;padding:28px;border:1px solid var(--connect-border);border-radius:22px;background:#fff;box-shadow:0 8px 24px rgba(30,30,30,.05);transition:.2s}.help-card:hover{transform:translateY(-5px);box-shadow:0 16px 36px rgba(30,30,30,.1)}.help-card>span{color:var(--connect-pink);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}.help-icon{display:grid;place-items:center;width:54px;height:54px;margin:18px 0;border-radius:15px;background:var(--connect-light-pink);color:var(--connect-pink);font-size:22px;font-weight:700}.help-card h3{margin-bottom:10px;font-size:24px}.help-card p{flex:1;margin-bottom:20px}.help-card strong{color:var(--connect-pink)}
@media(max-width:950px){.help-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.help-grid{grid-template-columns:1fr}}

.help-card > span {
  margin-bottom: 12px;
}

.help-card h3 {
  margin-top: 0;
}

.help-card {
  padding-top: 26px;
}

/* Unified Connect site header */
.connect-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  width: 100% !important;
  background: rgba(255,255,255,.97) !important;
  border-bottom: 1px solid #ececec !important;
  backdrop-filter: blur(12px);
  transition: box-shadow .2s ease;
}

.connect-header.is-scrolled {
  box-shadow: 0 8px 24px rgba(30,30,30,.08);
}

.connect-header .connect-nav {
  min-height: 104px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 30px !important;
}

.connect-header .connect-logo {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  padding: 8px 0 !important;
}

.connect-header .connect-logo img {
  width: auto !important;
  height: 72px !important;
  max-width: none !important;
  object-fit: contain !important;
  transform: none !important;
}

.connect-header .connect-menu {
  display: flex !important;
  align-items: center !important;
  gap: 30px !important;
  margin-left: auto !important;
}

.connect-header .connect-menu a,
.connect-header .connect-sign-in {
  position: relative;
  color: var(--connect-dark, #27272a) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

.connect-header .connect-menu a:hover,
.connect-header .connect-sign-in:hover,
.connect-header .connect-menu a.is-active {
  color: var(--connect-pink, #ee4266) !important;
}

.connect-header .connect-menu a.is-active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -10px;
  left: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--connect-pink, #ee4266);
}

.connect-header .connect-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  flex: 0 0 auto !important;
}

.connect-header .connect-button {
  min-height: 46px !important;
  padding: 0 27px !important;
  border-radius: 6px !important;
  font-size: 15px !important;
}

.connect-mobile-menu {
  display: none;
  position: relative;
  z-index: 110;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--connect-dark, #27272a);
  cursor: pointer;
}

.connect-mobile-menu-lines,
.connect-mobile-menu-lines::before,
.connect-mobile-menu-lines::after {
  position: absolute;
  left: 50%;
  width: 25px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform: translateX(-50%);
  transition: transform .22s ease, top .22s ease, opacity .18s ease;
}

.connect-mobile-menu-lines {
  top: 50%;
  transform: translate(-50%, -50%);
}

.connect-mobile-menu-lines::before,
.connect-mobile-menu-lines::after {
  content: "";
}

.connect-mobile-menu-lines::before { top: -8px; }
.connect-mobile-menu-lines::after { top: 8px; }

.connect-mobile-menu[aria-expanded="true"] .connect-mobile-menu-lines {
  background: transparent;
}

.connect-mobile-menu[aria-expanded="true"] .connect-mobile-menu-lines::before {
  top: 0;
  transform: translateX(-50%) rotate(45deg);
}

.connect-mobile-menu[aria-expanded="true"] .connect-mobile-menu-lines::after {
  top: 0;
  transform: translateX(-50%) rotate(-45deg);
}

@media (max-width: 1050px) {
  .connect-header .connect-menu { gap: 22px !important; }
  .connect-header .connect-menu a,
  .connect-header .connect-sign-in { font-size: 14px !important; }
  .connect-header .connect-logo img { height: 66px !important; }
}

@media (max-width: 950px) {
  .connect-header .connect-nav {
    min-height: 88px !important;
    position: relative !important;
  }

  .connect-header .connect-logo img {
    height: 56px !important;
  }

  .connect-header .connect-menu {
    position: absolute !important;
    top: calc(100% + 1px) !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 105 !important;
    display: grid !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 10px 20px 20px !important;
    border-top: 1px solid #ececec !important;
    border-bottom: 1px solid #ececec !important;
    background: #fff !important;
    box-shadow: 0 16px 28px rgba(30,30,30,.10) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-8px) !important;
    pointer-events: none !important;
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease !important;
  }

  .connect-header .connect-menu.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }

  .connect-header .connect-menu a {
    display: block !important;
    padding: 15px 4px !important;
    border-bottom: 1px solid #f1eeee !important;
    font-size: 16px !important;
    font-weight: 600 !important;
  }

  .connect-header .connect-menu a:last-child {
    border-bottom: 0 !important;
  }

  .connect-header .connect-menu a.is-active::after {
    display: none !important;
  }

  .connect-header .connect-sign-in {
    display: none !important;
  }

  .connect-mobile-menu {
    display: block !important;
  }

  body.connect-menu-open {
    overflow: hidden;
  }
}

@media (max-width: 650px) {
  .connect-header .connect-nav {
    min-height: 78px !important;
  }

  .connect-header .connect-logo img {
    height: 48px !important;
  }

  .connect-header .connect-header-actions {
    gap: 10px !important;
  }

  .connect-header .connect-button {
    display: none !important;
  }
}

/* Unified footer */
.connect-footer {
  background: #fff !important;
  color: var(--connect-dark, #27272a) !important;
  border-top: 1px solid #ececec !important;
}

.connect-footer-logo {
  width: auto !important;
  height: 72px !important;
  max-width: none !important;
  object-fit: contain !important;
}
@media (max-width: 950px) {
  .connect-footer-logo { height: 56px !important; }
}
@media (max-width: 650px) {
  .connect-footer-logo { height: 48px !important; }
}

/* Source: index.html */
:root {
      --connect-pink: #ee4266;
      --connect-pink-dark: #d93658;
      --connect-blue: #55b7c9;
      --connect-dark: #27272a;
      --connect-copy: #646464;
      --connect-light-blue: #eef9fb;
      --connect-light-pink: #fff2f5;
      --connect-cream: #fffaf4;
      --connect-white: #ffffff;
      --connect-border: #ece7e8;
      --connect-shadow: 0 12px 32px rgba(30, 30, 30, 0.08);
      --connect-radius: 24px;
      --connect-width: 1180px;

      --heading-font: var(--e-global-typography-primary-font-family, "Poppins", Arial, sans-serif);
      --body-font: var(--e-global-typography-text-font-family, "Poppins", Arial, sans-serif);
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behaviour: smooth;
    }

    body {
      margin: 0;
      color: var(--connect-dark);
      background: var(--connect-white);
      font-family: var(--body-font);
      font-size: 16px;
      line-height: 1.65;
    }

    img {
      max-width: 100%;
      display: block;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    .connect-container {
      width: min(var(--connect-width), calc(100% - 40px));
      margin: 0 auto;
    }

    .connect-section {
      padding: 88px 0;
    }

    .connect-section--blue {
      background: var(--connect-light-blue);
    }

    .connect-section--pink {
      background: var(--connect-light-pink);
    }

    .connect-section--cream {
      background: var(--connect-cream);
    }

    .connect-kicker {
      display: inline-block;
      margin-bottom: 14px;
      color: var(--connect-pink);
      font-weight: 700;
      font-size: 14px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    h1,
    h2,
    h3,
    h4 {
      margin: 0 0 18px;
      color: var(--connect-dark);
      font-family: var(--heading-font);
      font-weight: 700;
      line-height: 1.18;
    }

    h1 {
      font-size: clamp(42px, 5.4vw, 72px);
      letter-spacing: -0.035em;
    }

    h2 {
      font-size: clamp(32px, 4vw, 50px);
      letter-spacing: -0.025em;
    }

    h3 {
      font-size: 23px;
    }

    p {
      margin: 0 0 18px;
      color: var(--connect-copy);
    }

    .connect-lead {
      max-width: 700px;
      font-size: 19px;
      line-height: 1.65;
    }

    .connect-heading {
      max-width: 780px;
      margin: 0 auto 46px;
      text-align: center;
    }

    .connect-heading p {
      max-width: 680px;
      margin-right: auto;
      margin-left: auto;
    }

    .connect-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 52px;
      padding: 13px 26px;
      border: 2px solid var(--connect-pink);
      border-radius: 8px;
      background: var(--connect-pink);
      color: #fff;
      font-weight: 700;
      font-size: 15px;
      transition: 0.2s ease;
    }

    .connect-button:hover {
      background: var(--connect-pink-dark);
      border-color: var(--connect-pink-dark);
      transform: translateY(-2px);
    }

    .connect-button--outline {
      background: transparent;
      color: var(--connect-pink);
    }

    .connect-button--outline:hover {
      color: #fff;
    }

    .connect-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 13px;
      margin-top: 28px;
    }

    /* Header */
    .connect-header {
      position: sticky;
      top: 0;
      z-index: 20;
      background: rgba(255, 255, 255, 0.96);
      border-bottom: 1px solid #f0eded;
      backdrop-filter: blur(12px);
    }

    .connect-nav {
      min-height: 90px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 25px;
    }

    .connect-logo img {
      width: 224px;
      height: auto;
    }

    .connect-menu {
      display: flex;
      align-items: center;
      gap: 28px;
      font-size: 14px;
      font-weight: 600;
    }

    .connect-menu a:hover {
      color: var(--connect-pink);
    }

    .connect-mobile-menu {
      display: none;
      border: 0;
      background: transparent;
      font-size: 26px;
      cursor: pointer;
    }

    /* Hero */
    .connect-hero {
      position: relative;
      overflow: hidden;
      padding: 84px 0 90px;
      background: var(--connect-light-blue);
    }

    .connect-hero::before {
      content: "";
      position: absolute;
      width: 430px;
      height: 430px;
      top: -230px;
      right: -130px;
      border-radius: 50%;
      background: rgba(238, 66, 102, 0.12);
    }

    .connect-hero::after {
      content: "";
      position: absolute;
      width: 340px;
      height: 340px;
      bottom: -210px;
      left: -150px;
      border-radius: 50%;
      background: rgba(85, 183, 201, 0.24);
    }

    .connect-hero-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1.02fr 0.98fr;
      gap: 62px;
      align-items: center;
    }

    .connect-hero h1 span {
      color: var(--connect-pink);
    }

    .connect-hero-image {
      position: relative;
    }

    .connect-hero-image > img {
      width: 100%;
      border-radius: 26px;
      box-shadow: var(--connect-shadow);
    }

    .connect-price-note {
      position: absolute;
      left: -26px;
      bottom: 24px;
      padding: 17px 21px;
      border-radius: 14px;
      background: #fff;
      box-shadow: var(--connect-shadow);
      font-size: 14px;
      color: var(--connect-copy);
    }

    .connect-price-note strong {
      display: block;
      color: var(--connect-pink);
      font-size: 24px;
      line-height: 1.15;
    }

    .connect-ticks {
      display: flex;
      flex-wrap: wrap;
      gap: 12px 22px;
      margin-top: 26px;
      color: var(--connect-dark);
      font-size: 14px;
      font-weight: 600;
    }

    .connect-ticks span::before {
      content: "✓";
      display: inline-grid;
      place-items: center;
      width: 21px;
      height: 21px;
      margin-right: 7px;
      border-radius: 50%;
      background: var(--connect-pink);
      color: #fff;
      font-size: 12px;
    }

    /* Trust row */
    .connect-trust {
      padding: 28px 0;
      background: var(--connect-pink);
      color: #fff;
    }

    .connect-trust-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
    }

    .connect-trust-item {
      padding: 5px 24px;
      text-align: center;
      border-right: 1px solid rgba(255, 255, 255, 0.25);
    }

    .connect-trust-item:last-child {
      border-right: 0;
    }

    .connect-trust-item strong {
      display: block;
      margin-bottom: 2px;
      font-size: 16px;
    }

    .connect-trust-item span {
      font-size: 13px;
      opacity: 0.9;
    }

    /* Cards */
    .connect-grid-3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }

    .connect-grid-4 {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 22px;
    }

    .connect-card {
      height: 100%;
      padding: 30px;
      border: 1px solid var(--connect-border);
      border-radius: var(--connect-radius);
      background: #fff;
      box-shadow: 0 7px 24px rgba(30, 30, 30, 0.045);
    }

    .connect-card--centre {
      text-align: center;
    }

    .connect-card-icon {
      display: inline-grid;
      place-items: center;
      width: 58px;
      height: 58px;
      margin-bottom: 20px;
      border-radius: 16px;
      background: var(--connect-light-pink);
      color: var(--connect-pink);
      font-size: 25px;
      font-weight: 700;
    }

    /* Sizes */
    .connect-size-visual {
      min-height: 180px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 22px;
    }

    .connect-paper {
      position: relative;
      border: 1px solid #e7dfe1;
      background: linear-gradient(145deg, #fff, #f4f0f1);
      box-shadow: 0 14px 24px rgba(0, 0, 0, 0.1);
    }

    .connect-paper::after {
      content: "YOUR DESIGN";
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      color: var(--connect-pink);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.08em;
    }

    .connect-paper--square {
      width: 145px;
      height: 145px;
    }

    .connect-paper--a5 {
      width: 112px;
      height: 158px;
    }

    .connect-paper--a6 {
      width: 92px;
      height: 130px;
    }

    .connect-size-card .connect-price {
      margin-top: 12px;
      color: var(--connect-pink);
      font-size: 20px;
      font-weight: 700;
    }

    .connect-small {
      color: #858585;
      font-size: 13px;
    }

    /* How it works */
    .connect-step {
      position: relative;
      padding-top: 34px;
    }

    .connect-step-number {
      position: absolute;
      top: -12px;
      left: 28px;
      display: grid;
      place-items: center;
      width: 46px;
      height: 46px;
      border-radius: 50%;
      background: var(--connect-pink);
      color: #fff;
      font-weight: 700;
    }

    /* Split sections */
    .connect-split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 58px;
      align-items: center;
    }

    .connect-split-image img {
      width: 100%;
      border-radius: 26px;
      box-shadow: var(--connect-shadow);
    }

    .connect-feature-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
      margin-top: 28px;
    }

    .connect-feature {
      padding: 21px;
      border: 1px solid var(--connect-border);
      border-radius: 18px;
      background: #fff;
    }

    .connect-feature strong {
      display: block;
      margin-bottom: 4px;
      color: var(--connect-dark);
    }

    .connect-feature span {
      color: var(--connect-copy);
      font-size: 14px;
    }

    /* Integration cards */
    .connect-integration-card {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 125px;
      font-size: 22px;
      font-weight: 700;
    }

    .connect-integration-card small {
      display: block;
      margin-top: 5px;
      color: var(--connect-copy);
      font-size: 13px;
      font-weight: 400;
    }

    /* Comparison */
    .connect-compare {
      overflow: hidden;
      border: 1px solid var(--connect-border);
      border-radius: 22px;
      background: #fff;
      box-shadow: var(--connect-shadow);
    }

    .connect-compare-row {
      display: grid;
      grid-template-columns: 1.15fr repeat(3, 1fr);
      border-bottom: 1px solid var(--connect-border);
    }

    .connect-compare-row:last-child {
      border-bottom: 0;
    }

    .connect-compare-cell {
      padding: 18px 20px;
      border-right: 1px solid var(--connect-border);
      color: var(--connect-copy);
    }

    .connect-compare-cell:last-child {
      border-right: 0;
    }

    .connect-compare-head {
      background: var(--connect-pink);
      color: #fff;
      font-weight: 700;
    }

    .connect-compare-head .connect-compare-cell {
      color: #fff;
      border-color: rgba(255, 255, 255, 0.25);
    }

    /* FAQs */
    .connect-faq {
      max-width: 850px;
      margin: 0 auto;
    }

    .connect-faq details {
      padding: 20px 0;
      border-bottom: 1px solid var(--connect-border);
    }

    .connect-faq summary {
      position: relative;
      padding-right: 36px;
      cursor: pointer;
      list-style: none;
      color: var(--connect-dark);
      font-weight: 700;
    }

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

    .connect-faq summary::after {
      content: "+";
      position: absolute;
      right: 0;
      color: var(--connect-pink);
      font-size: 24px;
      line-height: 1;
    }

    .connect-faq details[open] summary::after {
      content: "−";
    }

    .connect-faq details p {
      padding-top: 14px;
    }

    /* CTA */
    .connect-final-cta {
      padding: 76px 0;
      background: var(--connect-pink);
      color: #fff;
      text-align: center;
    }

    .connect-final-cta h2,
    .connect-final-cta p {
      color: #fff;
    }

    .connect-final-cta p {
      max-width: 680px;
      margin-right: auto;
      margin-left: auto;
      opacity: 0.92;
    }

    .connect-final-cta .connect-buttons {
      justify-content: center;
    }

    .connect-final-cta .connect-button {
      border-color: #fff;
      background: #fff;
      color: var(--connect-pink);
    }

    .connect-final-cta .connect-button:hover {
      background: var(--connect-light-pink);
      color: var(--connect-pink-dark);
    }

    /* Footer */
    

    .connect-footer-grid {
      display: grid;
      grid-template-columns: 1.6fr 1fr 1fr;
      gap: 50px;
    }

    .connect-footer-logo {
      width: 220px;
      margin-bottom: 18px;
    }

    .connect-footer p,
    .connect-footer a {
      color: #c6c6c6;
    }

    .connect-footer a:hover {
      color: #fff;
    }

    .connect-footer-links {
      display: grid;
      gap: 8px;
    }

    .connect-copyright {
      margin-top: 38px;
      padding-top: 22px;
      border-top: 1px solid #454549;
      color: #a9a9a9;
      font-size: 13px;
    }

    @media (max-width: 950px) {
      .connect-menu {
        display: none;
      }

      .connect-mobile-menu {
        display: block;
      }

      .connect-hero-grid,
      .connect-split {
        grid-template-columns: 1fr;
      }

      .connect-hero-image {
        margin-top: 15px;
      }

      .connect-grid-4 {
        grid-template-columns: repeat(2, 1fr);
      }

      .connect-grid-3 {
        grid-template-columns: 1fr;
      }

      .connect-trust-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .connect-trust-item:nth-child(2) {
        border-right: 0;
      }

      .connect-feature-list {
        grid-template-columns: 1fr 1fr;
      }

      .connect-footer-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width: 650px) {
      .connect-container {
        width: min(100% - 26px, var(--connect-width));
      }

      .connect-section {
        padding: 66px 0;
      }

      .connect-nav .connect-button {
        display: none;
      }

      .connect-logo img {
        width: 185px;
      }

      .connect-hero {
        padding: 58px 0 72px;
      }

      h1 {
        font-size: 42px;
      }

      h2 {
        font-size: 32px;
      }

      .connect-price-note {
        position: static;
        width: max-content;
        margin-top: 14px;
      }

      .connect-grid-4,
      .connect-trust-grid,
      .connect-feature-list {
        grid-template-columns: 1fr;
      }

      .connect-trust-item {
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.25);
      }

      .connect-trust-item:last-child {
        border-bottom: 0;
      }

      .connect-compare {
        overflow-x: auto;
      }

      .connect-compare-row {
        min-width: 730px;
      }

      .connect-footer-grid {
        grid-template-columns: 1fr;
      }
    }
  

    /* Conversion-focused additions */
    .connect-hero-proof {
      margin-top: 14px;
      color: var(--connect-copy);
      font-size: 13px;
      font-weight: 600;
    }

    .connect-hero-proof span + span::before {
      content: "•";
      margin: 0 8px;
      color: var(--connect-pink);
    }

    .connect-quick-fit {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
      margin-top: 34px;
    }

    .connect-fit-card {
      padding: 24px;
      border: 1px solid var(--connect-border);
      border-radius: 20px;
      background: #fff;
      text-align: left;
    }

    .connect-fit-card strong {
      display: block;
      margin-bottom: 6px;
      color: var(--connect-dark);
      font-size: 18px;
    }

    .connect-inline-cta {
      margin-top: 42px;
      padding: 30px;
      border-radius: 22px;
      background: var(--connect-pink);
      color: #fff;
      text-align: center;
    }

    .connect-inline-cta h3,
    .connect-inline-cta p {
      color: #fff;
    }

    .connect-inline-cta p {
      margin-bottom: 16px;
      opacity: .92;
    }

    .connect-inline-cta .connect-button {
      border-color: #fff;
      background: #fff;
      color: var(--connect-pink);
    }

    .connect-pricing-box {
      padding: 38px;
      border: 2px solid var(--connect-pink);
      border-radius: 26px;
      background: #fff;
      box-shadow: var(--connect-shadow);
    }

    .connect-price-large {
      margin: 8px 0 2px;
      color: var(--connect-pink);
      font-size: clamp(42px, 6vw, 64px);
      font-weight: 700;
      line-height: 1;
    }

    .connect-price-large small {
      font-size: 18px;
      color: var(--connect-copy);
      font-weight: 600;
    }

    .connect-price-list {
      display: grid;
      gap: 10px;
      margin: 24px 0;
      padding: 0;
      list-style: none;
    }

    .connect-price-list li::before {
      content: "✓";
      display: inline-grid;
      place-items: center;
      width: 22px;
      height: 22px;
      margin-right: 9px;
      border-radius: 50%;
      background: var(--connect-light-pink);
      color: var(--connect-pink);
      font-size: 12px;
      font-weight: 700;
    }

    .connect-testimonial-meta {
      margin-top: 14px;
      color: var(--connect-copy);
      font-size: 14px;
      font-weight: 600;
    }

    .connect-mobile-cta {
      display: none;
    }

    @media (max-width: 760px) {
      body { padding-bottom: 74px; }
      .connect-quick-fit { grid-template-columns: 1fr; }
      .connect-mobile-cta {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 30;
        display: block;
        padding: 10px 13px;
        background: rgba(255,255,255,.97);
        border-top: 1px solid var(--connect-border);
        box-shadow: 0 -8px 24px rgba(0,0,0,.08);
      }
      .connect-mobile-cta .connect-button { width: 100%; }
    }

    /* Premium conversion refinements */
    .connect-size-card {
      position: relative;
      overflow: hidden;
      transition: transform .22s ease, box-shadow .22s ease;
    }

    .connect-size-card:hover,
    .connect-price-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 16px 38px rgba(30,30,30,.10);
    }

    .connect-size-price {
      display: inline-flex;
      align-items: baseline;
      gap: 5px;
      margin-top: 15px;
      color: var(--connect-pink);
      font-size: 30px;
      font-weight: 700;
      line-height: 1;
    }

    .connect-size-price small {
      color: var(--connect-copy);
      font-size: 14px;
      font-weight: 600;
    }

    .connect-size-note {
      margin-top: 9px;
      color: var(--connect-copy);
      font-size: 13px;
    }

    .connect-pricing-intro {
      max-width: 760px;
      margin: 0 auto 42px;
      text-align: center;
    }

    .connect-pricing-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
      align-items: stretch;
    }

    .connect-price-card {
      position: relative;
      display: flex;
      flex-direction: column;
      min-height: 100%;
      padding: 34px 30px;
      border: 1px solid var(--connect-border);
      border-radius: 24px;
      background: #fff;
      box-shadow: 0 8px 26px rgba(30,30,30,.055);
      transition: transform .22s ease, box-shadow .22s ease;
    }

    .connect-price-card--featured {
      border: 2px solid var(--connect-pink);
    }

    .connect-price-badge {
      position: absolute;
      top: -14px;
      left: 50%;
      transform: translateX(-50%);
      padding: 7px 14px;
      border-radius: 999px;
      background: var(--connect-pink);
      color: #fff;
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
    }

    .connect-price-card h3 {
      margin-bottom: 8px;
      text-align: center;
    }

    .connect-price-amount {
      margin: 12px 0 4px;
      color: var(--connect-pink);
      font-size: 48px;
      font-weight: 700;
      line-height: 1;
      text-align: center;
    }

    .connect-price-vat {
      margin-bottom: 20px;
      color: var(--connect-copy);
      font-size: 14px;
      font-weight: 600;
      text-align: center;
    }

    .connect-price-card .connect-price-list {
      flex: 1;
      margin-top: 10px;
    }

    .connect-pricing-footer {
      margin-top: 28px;
      text-align: center;
      color: var(--connect-copy);
      font-size: 14px;
    }

    .connect-pricing-reassurance {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px 22px;
      margin: 26px 0 0;
      color: var(--connect-dark);
      font-size: 14px;
      font-weight: 600;
    }

    .connect-pricing-reassurance span::before {
      content: "✓";
      margin-right: 7px;
      color: var(--connect-pink);
      font-weight: 700;
    }

    .connect-compare-fulfilment {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      margin-top: 40px;
    }

    .connect-compare-panel {
      padding: 32px;
      border-radius: 24px;
      border: 1px solid var(--connect-border);
      background: #fff;
    }

    .connect-compare-panel--connect {
      border: 2px solid var(--connect-pink);
      box-shadow: var(--connect-shadow);
    }

    .connect-compare-panel h3 {
      margin-bottom: 22px;
    }

    .connect-compare-list {
      display: grid;
      gap: 14px;
      padding: 0;
      margin: 0;
      list-style: none;
    }

    .connect-compare-list li {
      display: flex;
      gap: 11px;
      align-items: flex-start;
      color: var(--connect-copy);
    }

    .connect-compare-list li::before {
      flex: 0 0 24px;
      width: 24px;
      height: 24px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      font-size: 12px;
      font-weight: 700;
    }

    .connect-compare-panel--manual .connect-compare-list li::before {
      content: "–";
      background: #f2f2f2;
      color: #777;
    }

    .connect-compare-panel--connect .connect-compare-list li::before {
      content: "✓";
      background: var(--connect-light-pink);
      color: var(--connect-pink);
    }

    .connect-visual-flow {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 12px;
      align-items: stretch;
      margin-top: 34px;
    }

    .connect-flow-step {
      position: relative;
      padding: 22px 16px;
      border-radius: 18px;
      background: #fff;
      border: 1px solid var(--connect-border);
      text-align: center;
    }

    .connect-flow-step:not(:last-child)::after {
      content: "→";
      position: absolute;
      top: 50%;
      right: -18px;
      transform: translateY(-50%);
      color: var(--connect-pink);
      font-size: 22px;
      font-weight: 700;
      z-index: 2;
    }

    .connect-flow-step strong {
      display: block;
      margin-bottom: 5px;
    }

    .connect-flow-step span {
      color: var(--connect-copy);
      font-size: 13px;
    }

    @media (max-width: 900px) {
      .connect-pricing-grid,
      .connect-compare-fulfilment {
        grid-template-columns: 1fr;
      }

      .connect-visual-flow {
        grid-template-columns: 1fr;
      }

      .connect-flow-step:not(:last-child)::after {
        content: "↓";
        top: auto;
        right: 50%;
        bottom: -22px;
        transform: translateX(50%);
      }
    }

    /* Simplified header */
    .connect-header .connect-nav {
      min-height: 76px;
    }

    .connect-header .connect-menu {
      gap: 24px;
    }

    .connect-header .connect-menu a {
      font-size: 14px;
    }

    .connect-header-actions {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .connect-sign-in {
      color: var(--connect-dark);
      font-size: 14px;
      font-weight: 600;
    }

    .connect-sign-in:hover {
      color: var(--connect-pink);
    }

    /* Live calculator */
    .connect-calculator-wrap {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 34px;
      align-items: stretch;
      margin-top: 42px;
    }

    .connect-calculator-controls,
    .connect-calculator-result {
      padding: 34px;
      border: 1px solid var(--connect-border);
      border-radius: 26px;
      background: #fff;
      box-shadow: 0 10px 30px rgba(30,30,30,.06);
    }

    .connect-calculator-controls h3,
    .connect-calculator-result h3 {
      margin-bottom: 24px;
    }

    .connect-field {
      margin-bottom: 24px;
    }

    .connect-field:last-child {
      margin-bottom: 0;
    }

    .connect-field label {
      display: block;
      margin-bottom: 9px;
      color: var(--connect-dark);
      font-size: 14px;
      font-weight: 700;
    }

    .connect-select,
    .connect-number {
      width: 100%;
      min-height: 52px;
      padding: 12px 14px;
      border: 1px solid #ddd5d7;
      border-radius: 10px;
      background: #fff;
      color: var(--connect-dark);
      font: inherit;
    }

    .connect-select:focus,
    .connect-number:focus {
      outline: 2px solid rgba(238,66,102,.18);
      border-color: var(--connect-pink);
    }

    .connect-range {
      width: 100%;
      accent-color: var(--connect-pink);
    }

    .connect-range-output {
      display: flex;
      justify-content: space-between;
      margin-top: 8px;
      color: var(--connect-copy);
      font-size: 13px;
    }

    .connect-range-output strong {
      color: var(--connect-pink);
      font-size: 17px;
    }

    .connect-calculator-result {
      display: flex;
      flex-direction: column;
      justify-content: center;
      border: 2px solid var(--connect-pink);
      background: linear-gradient(145deg, #fff, var(--connect-light-pink));
    }

    .connect-result-label {
      color: var(--connect-copy);
      font-size: 14px;
      font-weight: 600;
    }

    .connect-result-total {
      margin: 7px 0 3px;
      color: var(--connect-pink);
      font-size: clamp(48px, 7vw, 72px);
      font-weight: 700;
      line-height: 1;
    }

    .connect-result-vat {
      margin-bottom: 24px;
      color: var(--connect-copy);
      font-size: 14px;
    }

    .connect-result-breakdown {
      overflow: hidden;
      margin: 0 0 24px;
      border: 1px solid var(--connect-border);
      border-radius: 15px;
      background: #fff;
    }

    .connect-result-row {
      display: flex;
      justify-content: space-between;
      gap: 18px;
      padding: 13px 16px;
      border-bottom: 1px solid var(--connect-border);
      color: var(--connect-copy);
      font-size: 14px;
    }

    .connect-result-row:last-child {
      border-bottom: 0;
    }

    .connect-result-row strong {
      color: var(--connect-dark);
      white-space: nowrap;
    }

    .connect-calculator-note {
      margin-bottom: 0;
      color: var(--connect-copy);
      font-size: 12px;
      line-height: 1.55;
    }

    .connect-calculator-benefits {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 18px;
      margin-top: 22px;
      color: var(--connect-dark);
      font-size: 13px;
      font-weight: 600;
    }

    .connect-calculator-benefits span::before {
      content: "✓";
      margin-right: 6px;
      color: var(--connect-pink);
    }

    @media (max-width: 950px) {
      .connect-header-actions .connect-sign-in {
        display: none;
      }

      .connect-calculator-wrap {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 650px) {
      .connect-header-actions .connect-button {
        display: none;
      }

      .connect-calculator-controls,
      .connect-calculator-result {
        padding: 25px 20px;
      }

      .connect-result-total {
        font-size: 52px;
      }
    }

    /* Profit calculator additions */
    .connect-profit-summary {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      margin-bottom: 24px;
    }

    .connect-profit-stat {
      padding: 16px;
      border: 1px solid var(--connect-border);
      border-radius: 14px;
      background: rgba(255,255,255,.82);
    }

    .connect-profit-stat span {
      display: block;
      margin-bottom: 4px;
      color: var(--connect-copy);
      font-size: 12px;
      font-weight: 600;
    }

    .connect-profit-stat strong {
      display: block;
      color: var(--connect-dark);
      font-size: 21px;
      line-height: 1.2;
    }

    .connect-profit-stat--highlight {
      border-color: rgba(238,66,102,.35);
      background: var(--connect-light-pink);
    }

    .connect-profit-stat--highlight strong {
      color: var(--connect-pink);
    }

    .connect-profit-warning {
      display: none;
      margin: 0 0 18px;
      padding: 12px 14px;
      border-radius: 10px;
      background: #fff1f1;
      color: #a33;
      font-size: 13px;
      font-weight: 600;
    }

    .connect-field-help {
      display: block;
      margin-top: 7px;
      color: var(--connect-copy);
      font-size: 12px;
      line-height: 1.45;
    }

    @media (max-width: 480px) {
      .connect-profit-summary {
        grid-template-columns: 1fr;
      }
    }

    /* Refined, less busy hero */
    .connect-hero {
      padding: 76px 0 82px;
    }

    .connect-hero-grid {
      grid-template-columns: .92fr 1.08fr;
      gap: 70px;
    }

    .connect-hero-copy {
      max-width: 610px;
    }

    .connect-hero h1 {
      max-width: 620px;
      font-size: clamp(44px, 5vw, 68px);
      line-height: 1.08;
    }

    .connect-hero .connect-lead {
      max-width: 590px;
      font-size: 18px;
    }

    .connect-hero .connect-ticks {
      display: grid;
      grid-template-columns: repeat(2, max-content);
      gap: 11px 22px;
      margin-top: 24px;
    }

    .connect-hero .connect-buttons {
      margin-top: 26px;
    }

    .connect-hero-image {
      max-width: 660px;
      margin-left: auto;
    }

    .connect-hero-image > img {
      border-radius: 22px;
    }

    .connect-hero .connect-price-note {
      display: none;
    }

    .connect-hero::before {
      width: 340px;
      height: 340px;
      top: -210px;
      right: -120px;
      opacity: .65;
    }

    .connect-hero::after {
      display: none;
    }

    .connect-hero-subnote {
      margin-top: 14px;
      color: var(--connect-copy);
      font-size: 13px;
    }

    /* Delivery charge controls */
    .connect-inline-toggle {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-top: 10px;
      color: var(--connect-copy);
      font-size: 13px;
      line-height: 1.45;
    }

    .connect-inline-toggle input {
      width: 18px;
      height: 18px;
      margin: 1px 0 0;
      accent-color: var(--connect-pink);
    }

    .connect-total-customer-pays {
      margin: 0 0 18px;
      padding: 14px 16px;
      border-radius: 13px;
      background: rgba(255,255,255,.82);
      border: 1px solid var(--connect-border);
    }

    .connect-total-customer-pays span {
      display: block;
      color: var(--connect-copy);
      font-size: 12px;
      font-weight: 600;
    }

    .connect-total-customer-pays strong {
      display: block;
      margin-top: 3px;
      color: var(--connect-dark);
      font-size: 25px;
    }

    @media (max-width: 950px) {
      .connect-hero-grid {
        grid-template-columns: 1fr;
        gap: 42px;
      }

      .connect-hero-copy {
        max-width: none;
      }

      .connect-hero-image {
        max-width: 760px;
        margin: 0 auto;
      }
    }

    @media (max-width: 650px) {
      .connect-hero {
        padding: 54px 0 66px;
      }

      .connect-hero .connect-ticks {
        grid-template-columns: 1fr;
      }

      .connect-hero h1 {
        font-size: 41px;
      }
    }

    /* Header resized to match the existing Connect site */
    .connect-header {
      background: #fff;
      border-bottom: 1px solid #ececec;
    }

    .connect-header .connect-nav {
      min-height: 124px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 34px;
    }

    .connect-logo {
      display: flex;
      align-items: center;
      padding: 10px 0;
      flex: 0 0 auto;
    }

    .connect-logo img {
      width: auto;
      height: 84px;
      max-width: none;
      transform: translateY(-2px);
    }

    .connect-header .connect-menu {
      display: flex;
      align-items: center;
      gap: 36px;
      margin-left: auto;
    }

    .connect-header .connect-menu a,
    .connect-sign-in {
      color: var(--connect-dark);
      font-size: 16px;
      font-weight: 500;
      white-space: nowrap;
    }

    .connect-header .connect-menu a:hover,
    .connect-sign-in:hover {
      color: var(--connect-pink);
    }

    .connect-header-actions {
      display: flex;
      align-items: center;
      gap: 22px;
      flex: 0 0 auto;
    }

    .connect-header .connect-button {
      min-height: 48px;
      padding: 0 30px;
      border-radius: 5px;
      font-size: 15px;
    }

    @media (max-width: 1100px) {
      .connect-header .connect-menu {
        gap: 24px;
      }

      .connect-header .connect-menu a,
      .connect-sign-in {
        font-size: 15px;
      }

      .connect-logo img {
        height: 76px;
      }
    }

    @media (max-width: 950px) {
      .connect-header .connect-nav {
        min-height: 102px;
      }

      .connect-header .connect-menu {
        display: none;
      }

      .connect-logo img {
        height: 68px;
      }
    }

    @media (max-width: 650px) {
      .connect-header .connect-nav {
        min-height: 84px;
      }

      .connect-logo img {
        height: 60px;
      }

      .connect-header-actions {
        gap: 12px;
      }
    }

.connect-footer{
  padding:55px 0 28px;
  background:#ffffff;
  color:#27272a;
  border-top:1px solid #ececec;
}
.connect-footer h3{color:#27272a!important;}
.connect-footer p,
.connect-footer a{color:#666!important;}
.connect-footer a:hover{color:var(--connect-pink)!important;}
.connect-copyright{
  border-top:1px solid #ececec;
  color:#888;
}


.connect-footer-logo{
  width:auto !important;
  height:84px !important;
  max-width:none !important;
  object-fit:contain;
  margin-bottom:22px;
}

@media (max-width:1100px){
  .connect-footer-logo{
    height:76px !important;
  }
}

@media (max-width:950px){
  .connect-footer-logo{
    height:68px !important;
  }
}

@media (max-width:650px){
  .connect-footer-logo{
    height:60px !important;
  }
}


    /* Working mobile navigation */
    .connect-mobile-menu {
      position: relative;
      z-index: 32;
      width: 44px;
      height: 44px;
      padding: 0;
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: var(--connect-dark);
      cursor: pointer;
    }

    .connect-mobile-menu-lines,
    .connect-mobile-menu-lines::before,
    .connect-mobile-menu-lines::after {
      position: absolute;
      left: 50%;
      width: 25px;
      height: 2px;
      border-radius: 5px;
      background: currentColor;
      transform: translateX(-50%);
      transition: transform .22s ease, top .22s ease, opacity .18s ease;
    }

    .connect-mobile-menu-lines {
      top: 50%;
      transform: translate(-50%, -50%);
    }

    .connect-mobile-menu-lines::before,
    .connect-mobile-menu-lines::after {
      content: "";
    }

    .connect-mobile-menu-lines::before {
      top: -8px;
    }

    .connect-mobile-menu-lines::after {
      top: 8px;
    }

    .connect-mobile-menu[aria-expanded="true"] .connect-mobile-menu-lines {
      background: transparent;
    }

    .connect-mobile-menu[aria-expanded="true"] .connect-mobile-menu-lines::before {
      top: 0;
      transform: translateX(-50%) rotate(45deg);
    }

    .connect-mobile-menu[aria-expanded="true"] .connect-mobile-menu-lines::after {
      top: 0;
      transform: translateX(-50%) rotate(-45deg);
    }

    @media (max-width: 950px) {
      .connect-header {
        position: sticky;
        top: 0;
        overflow: visible;
      }

      .connect-header .connect-nav {
        position: relative;
      }

      .connect-header .connect-menu {
        position: absolute;
        top: calc(100% + 1px);
        right: 0;
        left: 0;
        z-index: 30;
        display: grid;
        gap: 0;
        margin: 0;
        padding: 10px 20px 20px;
        border-top: 1px solid #ececec;
        border-bottom: 1px solid #ececec;
        background: #fff;
        box-shadow: 0 16px 28px rgba(30,30,30,.10);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        pointer-events: none;
        transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
      }

      .connect-header .connect-menu.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
      }

      .connect-header .connect-menu a {
        display: block;
        padding: 15px 4px;
        border-bottom: 1px solid #f1eeee;
        font-size: 16px;
        font-weight: 600;
      }

      .connect-header .connect-menu a:last-child {
        border-bottom: 0;
      }

      body.connect-menu-open {
        overflow: hidden;
      }
    }

    @media (min-width: 951px) {
      .connect-mobile-menu {
        display: none !important;
      }
    }

/* Unified Connect site header */
.connect-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  width: 100% !important;
  background: rgba(255,255,255,.97) !important;
  border-bottom: 1px solid #ececec !important;
  backdrop-filter: blur(12px);
  transition: box-shadow .2s ease;
}

.connect-header.is-scrolled {
  box-shadow: 0 8px 24px rgba(30,30,30,.08);
}

.connect-header .connect-nav {
  min-height: 104px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 30px !important;
}

.connect-header .connect-logo {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  padding: 8px 0 !important;
}

.connect-header .connect-logo img {
  width: auto !important;
  height: 72px !important;
  max-width: none !important;
  object-fit: contain !important;
  transform: none !important;
}

.connect-header .connect-menu {
  display: flex !important;
  align-items: center !important;
  gap: 30px !important;
  margin-left: auto !important;
}

.connect-header .connect-menu a,
.connect-header .connect-sign-in {
  position: relative;
  color: var(--connect-dark, #27272a) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

.connect-header .connect-menu a:hover,
.connect-header .connect-sign-in:hover,
.connect-header .connect-menu a.is-active {
  color: var(--connect-pink, #ee4266) !important;
}

.connect-header .connect-menu a.is-active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -10px;
  left: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--connect-pink, #ee4266);
}

.connect-header .connect-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  flex: 0 0 auto !important;
}

.connect-header .connect-button {
  min-height: 46px !important;
  padding: 0 27px !important;
  border-radius: 6px !important;
  font-size: 15px !important;
}

.connect-mobile-menu {
  display: none;
  position: relative;
  z-index: 110;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--connect-dark, #27272a);
  cursor: pointer;
}

.connect-mobile-menu-lines,
.connect-mobile-menu-lines::before,
.connect-mobile-menu-lines::after {
  position: absolute;
  left: 50%;
  width: 25px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform: translateX(-50%);
  transition: transform .22s ease, top .22s ease, opacity .18s ease;
}

.connect-mobile-menu-lines {
  top: 50%;
  transform: translate(-50%, -50%);
}

.connect-mobile-menu-lines::before,
.connect-mobile-menu-lines::after {
  content: "";
}

.connect-mobile-menu-lines::before { top: -8px; }
.connect-mobile-menu-lines::after { top: 8px; }

.connect-mobile-menu[aria-expanded="true"] .connect-mobile-menu-lines {
  background: transparent;
}

.connect-mobile-menu[aria-expanded="true"] .connect-mobile-menu-lines::before {
  top: 0;
  transform: translateX(-50%) rotate(45deg);
}

.connect-mobile-menu[aria-expanded="true"] .connect-mobile-menu-lines::after {
  top: 0;
  transform: translateX(-50%) rotate(-45deg);
}

@media (max-width: 1050px) {
  .connect-header .connect-menu { gap: 22px !important; }
  .connect-header .connect-menu a,
  .connect-header .connect-sign-in { font-size: 14px !important; }
  .connect-header .connect-logo img { height: 66px !important; }
}

@media (max-width: 950px) {
  .connect-header .connect-nav {
    min-height: 88px !important;
    position: relative !important;
  }

  .connect-header .connect-logo img {
    height: 56px !important;
  }

  .connect-header .connect-menu {
    position: absolute !important;
    top: calc(100% + 1px) !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 105 !important;
    display: grid !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 10px 20px 20px !important;
    border-top: 1px solid #ececec !important;
    border-bottom: 1px solid #ececec !important;
    background: #fff !important;
    box-shadow: 0 16px 28px rgba(30,30,30,.10) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-8px) !important;
    pointer-events: none !important;
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease !important;
  }

  .connect-header .connect-menu.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }

  .connect-header .connect-menu a {
    display: block !important;
    padding: 15px 4px !important;
    border-bottom: 1px solid #f1eeee !important;
    font-size: 16px !important;
    font-weight: 600 !important;
  }

  .connect-header .connect-menu a:last-child {
    border-bottom: 0 !important;
  }

  .connect-header .connect-menu a.is-active::after {
    display: none !important;
  }

  .connect-header .connect-sign-in {
    display: none !important;
  }

  .connect-mobile-menu {
    display: block !important;
  }

  body.connect-menu-open {
    overflow: hidden;
  }
}

@media (max-width: 650px) {
  .connect-header .connect-nav {
    min-height: 78px !important;
  }

  .connect-header .connect-logo img {
    height: 48px !important;
  }

  .connect-header .connect-header-actions {
    gap: 10px !important;
  }

  .connect-header .connect-button {
    display: none !important;
  }
}

/* Unified footer */
.connect-footer {
  background: #fff !important;
  color: var(--connect-dark, #27272a) !important;
  border-top: 1px solid #ececec !important;
}

.connect-footer-logo {
  width: auto !important;
  height: 72px !important;
  max-width: none !important;
  object-fit: contain !important;
}
@media (max-width: 950px) {
  .connect-footer-logo { height: 56px !important; }
}
@media (max-width: 650px) {
  .connect-footer-logo { height: 48px !important; }
}

/* Shared component safeguards */
.connect-header .connect-logo img,
.connect-footer-logo {
  object-fit: contain;
}

[hidden] {
  display: none !important;
}


/* Help Centre search and category filters */
.help-search {
  margin-bottom: 0;
}

.help-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 22px auto 0;
}

.help-filter {
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid var(--connect-border, #ece7e8);
  border-radius: 999px;
  background: #fff;
  color: var(--connect-dark, #27272a);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}

.help-filter:hover {
  border-color: var(--connect-pink, #ee4266);
  color: var(--connect-pink, #ee4266);
  transform: translateY(-1px);
}

.help-filter.is-active {
  border-color: var(--connect-pink, #ee4266);
  background: var(--connect-pink, #ee4266);
  color: #fff;
}

.help-card[hidden] {
  display: none !important;
}

.help-no-results {
  margin-top: 28px;
  padding: 32px 24px;
  border: 1px solid var(--connect-border, #ece7e8);
  border-radius: 20px;
  background: var(--connect-light-pink, #fff2f5);
  text-align: center;
}

.help-no-results h3 {
  margin-bottom: 7px;
  font-size: 23px;
}

.help-no-results p {
  margin-bottom: 18px;
}

.help-no-results button {
  min-height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 6px;
  background: var(--connect-pink, #ee4266);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 650px) {
  .help-filters {
    justify-content: flex-start;
  }

  .help-filter {
    flex: 1 1 calc(50% - 10px);
    padding: 0 12px;
  }
}


/* Final approved header logo sizing */
.connect-header .connect-logo img {
  height: 88px !important;
}

.connect-header .connect-nav {
  min-height: 118px !important;
}

@media (max-width: 1050px) {
  .connect-header .connect-logo img {
    height: 78px !important;
  }
}

@media (max-width: 950px) {
  .connect-header .connect-logo img {
    height: 66px !important;
  }

  .connect-header .connect-nav {
    min-height: 98px !important;
  }
}

@media (max-width: 650px) {
  .connect-header .connect-logo img {
    height: 58px !important;
  }

  .connect-header .connect-nav {
    min-height: 86px !important;
  }
}

/* Match footer branding to the approved header scale */
.connect-footer-logo {
  height: 88px !important;
}

@media (max-width: 1050px) {
  .connect-footer-logo {
    height: 78px !important;
  }
}

@media (max-width: 950px) {
  .connect-footer-logo {
    height: 66px !important;
  }
}

@media (max-width: 650px) {
  .connect-footer-logo {
    height: 58px !important;
  }
}


/* Full-text Help Centre search */
.help-search-hint {
  margin-top: 8px;
  color: #8a8a8a;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: .2px;
}

.full-search-summary {
  margin: 0 0 18px;
  color: var(--connect-copy, #646464);
  font-size: 15px;
}

.full-search-summary strong {
  color: var(--connect-dark, #27272a);
}

.full-search-results {
  display: grid;
  gap: 15px;
  margin-bottom: 40px;
}

.full-search-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  padding: 22px 24px;
  border: 1px solid var(--connect-border, #ece7e8);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 7px 22px rgba(30,30,30,.045);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.full-search-result:hover {
  transform: translateY(-2px);
  border-color: rgba(238,66,102,.45);
  box-shadow: 0 13px 30px rgba(30,30,30,.08);
}

.full-search-result-category {
  display: inline-flex;
  margin-bottom: 7px;
  color: var(--connect-pink, #ee4266);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.full-search-result h3 {
  margin: 0 0 6px;
  font-size: 21px;
}

.full-search-result-section {
  margin-bottom: 7px;
  color: var(--connect-dark, #27272a);
  font-size: 14px;
  font-weight: 600;
}

.full-search-result p {
  margin: 0;
  color: var(--connect-copy, #646464);
  font-size: 14px;
  line-height: 1.55;
}

.full-search-result-action {
  color: var(--connect-pink, #ee4266);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.full-search-result mark {
  padding: 0 2px;
  border-radius: 3px;
  background: #ffe1e8;
  color: inherit;
}

.help-search-clear {
  margin-left: 7px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--connect-pink, #ee4266);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 650px) {
  .full-search-result {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .full-search-result-action {
    justify-self: start;
  }
}


/* Final search helper text styling */
.help-search-hint {
  margin-top: 6px !important;
  color: #9a9a9a !important;
  font-size: 9px !important;
  line-height: 1.4 !important;
  letter-spacing: .15px !important;
}


/* Greeting Card Association trust section */
.connect-gca-trust {
  padding: 68px 0;
  background: #fff;
}

.connect-gca-card {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(230px, .75fr);
  gap: 48px;
  align-items: center;
  padding: 38px 44px;
  border: 1px solid var(--connect-border, #ece7e8);
  border-radius: 24px;
  background: linear-gradient(135deg, #fff 0%, var(--connect-light-pink, #fff2f5) 100%);
  box-shadow: 0 10px 30px rgba(30,30,30,.045);
}

.connect-gca-copy {
  max-width: 700px;
}

.connect-gca-copy h2 {
  margin: 8px 0 13px;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.18;
}

.connect-gca-copy p {
  max-width: 650px;
  margin-bottom: 15px;
}

.connect-gca-copy a {
  color: var(--connect-pink, #ee4266);
  font-size: 14px;
  font-weight: 700;
}

.connect-gca-copy a::after {
  content: " →";
}

.connect-gca-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 150px;
  padding: 18px 24px;
  border-radius: 18px;
  background: rgba(255,255,255,.72);
}

.connect-gca-logo-wrap img {
  width: min(100%, 300px);
  height: auto;
  opacity: .78;
  filter: saturate(.82);
  transition: opacity .2s ease, filter .2s ease;
}

.connect-gca-logo-wrap:hover img {
  opacity: .92;
  filter: saturate(1);
}

@media (max-width: 820px) {
  .connect-gca-card {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 32px 28px;
    text-align: center;
  }

  .connect-gca-copy {
    margin: 0 auto;
  }

  .connect-gca-copy p {
    margin-right: auto;
    margin-left: auto;
  }

  .connect-gca-logo-wrap {
    min-height: 125px;
  }

  .connect-gca-logo-wrap img {
    width: min(100%, 245px);
  }
}

@media (max-width: 520px) {
  .connect-gca-trust {
    padding: 50px 0;
  }

  .connect-gca-card {
    padding: 27px 20px;
  }

  .connect-gca-logo-wrap {
    padding: 16px;
  }

  .connect-gca-logo-wrap img {
    width: min(100%, 215px);
  }
}


/* Testimonial carousel */
.connect-reviews {
  padding: 78px 0;
  background: var(--connect-light-blue, #eef9fb);
}

.connect-reviews-heading {
  max-width: 760px;
  margin: 0 auto 34px;
  text-align: center;
}

.connect-reviews-heading h2 {
  margin: 8px 0 12px;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.15;
}

.connect-review-carousel {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  gap: 18px;
  align-items: center;
  max-width: 940px;
  margin: 0 auto;
}

.connect-review-viewport {
  overflow: hidden;
  border-radius: 24px;
}

.connect-review-track {
  position: relative;
  min-height: 310px;
}

.connect-review-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 310px;
  padding: 42px 48px;
  border: 1px solid var(--connect-border, #ece7e8);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(30,30,30,.06);
  opacity: 0;
  visibility: hidden;
  transform: translateX(24px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
}

.connect-review-slide.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.connect-review-stars {
  margin-bottom: 18px;
  color: var(--connect-pink, #ee4266);
  font-size: 19px;
  letter-spacing: 4px;
}

.connect-review-slide blockquote {
  margin: 0;
}

.connect-review-slide blockquote p {
  margin: 0;
  color: var(--connect-dark, #27272a);
  font-size: clamp(20px, 2.6vw, 29px);
  line-height: 1.48;
}

.connect-review-author {
  display: grid;
  gap: 2px;
  margin-top: 24px;
}

.connect-review-author strong {
  color: var(--connect-dark, #27272a);
  font-size: 16px;
}

.connect-review-author span {
  color: var(--connect-copy, #646464);
  font-size: 14px;
}

.connect-review-arrow {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0 0 5px;
  border: 1px solid var(--connect-border, #ece7e8);
  border-radius: 50%;
  background: #fff;
  color: var(--connect-dark, #27272a);
  font: inherit;
  font-size: 36px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}

.connect-review-arrow:hover {
  border-color: var(--connect-pink, #ee4266);
  background: var(--connect-pink, #ee4266);
  color: #fff;
  transform: translateY(-2px);
}

.connect-review-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
}

.connect-review-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #d7cfd1;
  cursor: pointer;
  transition: width .2s ease, border-radius .2s ease, background .2s ease;
}

.connect-review-dot.is-active {
  width: 25px;
  border-radius: 999px;
  background: var(--connect-pink, #ee4266);
}

@media (max-width: 720px) {
  .connect-review-carousel {
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    gap: 9px;
  }

  .connect-review-arrow {
    width: 42px;
    height: 42px;
  }

  .connect-review-slide {
    min-height: 350px;
    padding: 32px 28px;
  }
}

@media (max-width: 520px) {
  .connect-reviews {
    padding: 58px 0;
  }

  .connect-review-carousel {
    display: block;
  }

  .connect-review-arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 38px;
    height: 38px;
    transform: translateY(-50%);
  }

  .connect-review-arrow:hover {
    transform: translateY(-50%);
  }

  .connect-review-arrow--prev {
    left: -5px;
  }

  .connect-review-arrow--next {
    right: -5px;
  }

  .connect-review-viewport {
    margin: 0 24px;
  }

  .connect-review-slide {
    min-height: 390px;
    padding: 30px 24px;
  }

  .connect-review-slide blockquote p {
    font-size: 20px;
  }
}


/* Updated homepage hero image */
.connect-new-hero-image {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center !important;
}


/* Final homepage hero image positioning */
.connect-hero-visual,
.hero-visual,
.hero-media,
.hero-image-wrap {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
}

.connect-new-hero-image,
.connect-hero-visual img,
.hero-visual img,
.hero-media img,
.hero-image-wrap img {
  display: block !important;
  width: 108% !important;
  max-width: 760px !important;
  height: auto !important;
  margin: 0 auto !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  object-fit: contain !important;
  transform: translateY(-80px) !important;
}

@media (max-width: 1050px) {
  .connect-new-hero-image,
  .connect-hero-visual img,
  .hero-visual img,
  .hero-media img,
  .hero-image-wrap img {
    width: 104% !important;
    transform: translateY(-55px) !important;
  }
}

@media (max-width: 820px) {
  .connect-new-hero-image,
  .connect-hero-visual img,
  .hero-visual img,
  .hero-media img,
  .hero-image-wrap img {
    width: 100% !important;
    max-width: 680px !important;
    transform: translateY(-20px) !important;
  }
}

@media (max-width: 650px) {
  .connect-new-hero-image,
  .connect-hero-visual img,
  .hero-visual img,
  .hero-media img,
  .hero-image-wrap img {
    transform: translateY(0) !important;
  }
}


/* Updated print and packing image */
.connect-production-picture {
  display: block !important;
  width: 100% !important;
  max-width: 720px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.connect-production-image {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  object-fit: contain !important;
}


/* Customer story business logo and link */
.connect-review-logo {
  display: block;
  width: min(100%, 220px);
  margin: 0 0 18px;
}

.connect-review-logo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.connect-review-author a {
  display: inline-flex;
  margin-top: 7px;
  color: var(--connect-pink, #ee4266);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.connect-review-author a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 650px) {
  .connect-review-logo {
    width: min(100%, 180px);
    margin-bottom: 15px;
  }
}


/* House of 143 testimonial layout */
.connect-review-logo {
  display: none !important;
}

.connect-review-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-top: 25px;
}

.connect-review-identity {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.connect-review-avatar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 52px;
  padding: 4px;
  border: 1px solid var(--connect-border, #ece7e8);
  border-radius: 10px;
  background: #fff;
}

.connect-review-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.connect-review-footer .connect-review-author {
  margin-top: 0;
}

.connect-review-source {
  flex: 0 0 auto;
  color: var(--connect-copy, #646464);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.connect-review-source:hover {
  color: var(--connect-pink, #ee4266);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 650px) {
  .connect-review-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 15px;
  }

  .connect-review-avatar {
    width: 60px;
    height: 46px;
  }
}


/* Testimonial business link */
.connect-review-business {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  color: var(--connect-pink, #ee4266);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity .2s ease;
}

.connect-review-business:hover {
  opacity: .9;
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* Performance optimisation */
.connect-hero-picture {
  display: block;
  width: 100%;
}

.connect-hero-picture .connect-new-hero-image {
  width: 108% !important;
  max-width: 760px !important;
  height: auto !important;
}

/* Let the browser defer rendering of clearly below-fold homepage sections. */
@supports (content-visibility: auto) {
  .connect-reviews,
  .connect-gca-trust,
  .connect-final-cta,
  .connect-footer {
    content-visibility: auto;
    contain-intrinsic-size: 800px;
  }
}


/* Feedback updates: balanced fulfilment flow */
.connect-visual-flow {
  grid-template-columns: repeat(5, minmax(0, 168px)) !important;
  justify-content: space-between !important;
  gap: 28px !important;
}

.connect-flow-step {
  min-height: 126px;
  padding: 22px 13px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.connect-flow-step span {
  display: block;
  min-height: 38px;
  line-height: 1.45;
}

.connect-flow-step:not(:last-child)::after {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  right: -29px !important;
  border-radius: 50%;
  background: var(--connect-pink);
  color: #fff !important;
  font-size: 19px !important;
  font-weight: 900 !important;
  line-height: 1;
}

/* Customer story link alignment */
.connect-review-footer {
  align-items: center !important;
}

.connect-review-author {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.connect-review-business,
.connect-review-source {
  line-height: 1.35;
}

@media (max-width: 900px) {
  .connect-visual-flow {
    grid-template-columns: minmax(0, 420px) !important;
    justify-content: center !important;
    gap: 32px !important;
  }

  .connect-flow-step:not(:last-child)::after {
    right: 50% !important;
    bottom: -30px !important;
  }
}

@media (max-width: 650px) {
  .connect-review-footer {
    display: grid !important;
    grid-template-columns: 60px minmax(0, 1fr) !important;
    column-gap: 14px !important;
    row-gap: 7px !important;
    align-items: center !important;
  }

  .connect-review-identity {
    display: contents !important;
  }

  .connect-review-avatar {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .connect-review-author {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  .connect-review-source {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    margin: 0 !important;
  }
}


/* Stronger original-style fulfilment arrows */
.connect-flow-step {
  position: relative !important;
}

.connect-flow-step:not(:last-child)::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  right: -38px !important;
  bottom: auto !important;
  width: 48px !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: var(--connect-pink, #ee4266) !important;
  color: transparent !important;
  font-size: 0 !important;
  transform: translateY(-50%) !important;
  z-index: 2 !important;
}

.connect-flow-step:not(:last-child)::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  right: -39px !important;
  width: 11px !important;
  height: 11px !important;
  border-top: 3px solid var(--connect-pink, #ee4266) !important;
  border-right: 3px solid var(--connect-pink, #ee4266) !important;
  transform: translateY(-50%) rotate(45deg) !important;
  z-index: 3 !important;
}

@media (max-width: 900px) {
  .connect-flow-step:not(:last-child)::after {
    top: auto !important;
    right: 50% !important;
    bottom: -31px !important;
    width: 3px !important;
    height: 34px !important;
    transform: translateX(50%) !important;
  }

  .connect-flow-step:not(:last-child)::before {
    top: auto !important;
    right: calc(50% - 4px) !important;
    bottom: -32px !important;
    width: 11px !important;
    height: 11px !important;
    border-top: 0 !important;
    border-right: 3px solid var(--connect-pink, #ee4266) !important;
    border-bottom: 3px solid var(--connect-pink, #ee4266) !important;
    transform: rotate(45deg) !important;
  }
}


/* Final accessibility and interaction polish */
.connect-skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 10000;
  padding: 11px 16px;
  border-radius: 6px;
  background: var(--connect-dark, #27272a);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .18s ease;
}

.connect-skip-link:focus {
  transform: translateY(0);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(238, 66, 102, .42);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Defer rendering of sections well below the first viewport. */
@supports (content-visibility: auto) {
  .connect-pricing,
  .connect-calculator-section,
  .connect-reviews,
  .connect-gca-trust,
  .connect-faq-section,
  .connect-final-cta,
  .connect-footer {
    content-visibility: auto;
    contain-intrinsic-size: 720px;
  }
}


/* Five-step process: corrected mobile connector positioning */
@media (max-width: 900px) {
  .connect-visual-flow {
    display: grid !important;
    grid-template-columns: minmax(0, 420px) !important;
    justify-content: center !important;
    gap: 46px !important;
  }

  .connect-flow-step {
    width: 100% !important;
    margin: 0 auto !important;
  }

  .connect-flow-step:not(:last-child)::after {
    content: "" !important;
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: 3px !important;
    height: 34px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    background: var(--connect-pink, #ee4266) !important;
    transform: translateX(-50%) !important;
  }

  .connect-flow-step:not(:last-child)::before {
    content: "" !important;
    position: absolute !important;
    top: calc(100% + 23px) !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: 11px !important;
    height: 11px !important;
    margin: 0 !important;
    border: 0 !important;
    border-right: 3px solid var(--connect-pink, #ee4266) !important;
    border-bottom: 3px solid var(--connect-pink, #ee4266) !important;
    transform: translateX(-50%) rotate(45deg) !important;
  }
}


/* Final mobile fulfilment connector: one-piece down arrow */
@media (max-width: 900px) {
  .connect-visual-flow {
    gap: 42px !important;
  }

  .connect-flow-step:not(:last-child)::before {
    content: none !important;
    display: none !important;
  }

  .connect-flow-step:not(:last-child)::after {
    content: "↓" !important;
    position: absolute !important;
    top: calc(100% + 4px) !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    display: block !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: var(--connect-pink, #ee4266) !important;
    font-family: Arial, sans-serif !important;
    font-size: 38px !important;
    font-weight: 500 !important;
    line-height: 32px !important;
    text-align: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    transform: translateX(-50%) !important;
    z-index: 3 !important;
  }
}


/* Guide image aspect-ratio fix */
.connect-guide-image,
.screenshot img,
.guide-screenshot img {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* Cross-device font consistency */
:root {
  --connect-font-primary: "Poppins", "Avenir Next", Avenir, "Segoe UI", Arial, sans-serif;
}

html,
body,
button,
input,
select,
textarea,
summary {
  font-family: var(--connect-font-primary) !important;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.connect-header,
.connect-nav,
.connect-button,
.connect-section,
.connect-footer,
.connect-card,
.connect-review-slide,
.connect-faq,
.connect-guide,
.help-centre {
  font-family: var(--connect-font-primary) !important;
}

@media (max-width: 900px) {
  .connect-flow-step:not(:last-child)::after {
    font-family: Arial, "Segoe UI Symbol", sans-serif !important;
  }
}


/* Integration availability labels */
.platform-status-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #f2f2f2;
  color: var(--connect-copy, #646464);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

.platform-status-back {
  background: var(--connect-light-pink, #fff2f5);
  color: var(--connect-pink, #ee4266);
}

.platform-coming-soon-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0 auto;
  border-radius: 12px;
  background: var(--connect-light-pink, #fff2f5);
  color: var(--connect-pink, #ee4266);
  font-size: 20px;
  font-weight: 800;
}

.platform-coming-soon-card {
  opacity: .9;
}


/* Clean SVG platform integration cards */
.connect-integration-card--logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 245px;
  padding: 30px 24px;
}

.connect-integration-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 70px;
  margin-bottom: 14px;
}

.connect-integration-logo-svg {
  display: block;
  width: auto;
  max-width: 190px;
  height: 58px;
  object-fit: contain;
}

.connect-integration-card--logo h3 {
  margin: 0 0 8px;
  font-size: 24px;
  line-height: 1.2;
}

.connect-integration-description {
  min-height: 44px;
  margin: 0;
  color: var(--connect-copy, #646464);
  font-size: 15px;
  line-height: 1.45;
}

.connect-integration-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  padding: 6px 13px;
  border-radius: 999px;
  background: #f0f0f0;
  color: #5f5f5f;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.connect-integration-status--back {
  background: var(--connect-light-pink, #fff2f5);
  color: var(--connect-pink, #ee4266);
}

@media (max-width: 650px) {
  .connect-integration-card--logo {
    min-height: 220px;
    padding: 24px 18px;
  }

  .connect-integration-logo-svg {
    max-width: 155px;
    height: 50px;
  }

  .connect-integration-card--logo h3 {
    font-size: 21px;
  }

  .connect-integration-description {
    min-height: 42px;
    font-size: 14px;
  }
}


/* Text-only platform integration cards */
.connect-integration-card--text-only {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 205px;
  padding: 30px 24px;
}

.connect-integration-card--text-only h3 {
  margin: 0 0 10px;
  font-size: 25px;
  line-height: 1.2;
}

.connect-integration-card--text-only .connect-integration-description {
  min-height: 44px;
  margin: 0;
  color: var(--connect-copy, #646464);
  font-size: 15px;
  line-height: 1.45;
}

.connect-integration-card--text-only .connect-integration-status {
  margin-top: 16px;
}

.connect-integration-status--soon {
  background: #fff;
  border: 1px solid var(--connect-border, #dedede);
  color: #666;
}

@media (max-width: 650px) {
  .connect-integration-card--text-only {
    min-height: 185px;
    padding: 24px 18px;
  }

  .connect-integration-card--text-only h3 {
    font-size: 21px;
  }

  .connect-integration-card--text-only .connect-integration-description {
    min-height: 42px;
    font-size: 14px;
  }
}


/* Refined integration availability text */
.connect-integration-card--text-only {
  min-height: 205px;
}

.connect-integration-card--text-only .connect-integration-description {
  min-height: 44px;
  margin-bottom: 0;
}

.connect-integration-note {
  display: block;
  margin-top: 14px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

.connect-integration-note--back {
  color: var(--connect-pink, #ee4266);
}

.connect-integration-note--soon {
  color: #777;
}

@media (max-width: 650px) {
  .connect-integration-card--text-only {
    min-height: 185px;
  }

  .connect-integration-note {
    margin-top: 12px;
    font-size: 11px;
  }
}

/* 404 page */
.connect-404-inner{max-width:760px;margin:0 auto;padding:100px 0;text-align:center}.connect-404-inner h1{margin-bottom:18px}.connect-404-inner p{max-width:620px;margin:0 auto 28px}


/* Terms legal-layout guard */
.legal-layout > .legal-content {
  min-width: 0;
}

.legal-layout > .legal-sidebar {
  align-self: start;
}

@media (max-width: 900px) {
  .legal-layout {
    grid-template-columns: 1fr !important;
  }

  .legal-layout > .legal-sidebar {
    order: -1;
    position: static;
  }
}

/* ==========================================================
   You Said It Connect — Brand Guidelines Homepage Demo
   Keeps the existing HTML layout, wording and imagery.
   ========================================================== */

:root {
  --brand-amaranth: #E42F57;
  --brand-orange: #FE6E1F;
  --brand-padua: #ADE5CC;
  --brand-boston-blue: #419FB8;
  --brand-mine-shaft: #1F1F1F;
  --brand-early-dawn: #FFF9EA;

  --connect-pink: var(--brand-amaranth);
  --connect-blue: var(--brand-boston-blue);
  --connect-mint: var(--brand-padua);
  --connect-orange: var(--brand-orange);
  --connect-dark: var(--brand-mine-shaft);
  --connect-copy: #454545;
  --connect-cream: var(--brand-early-dawn);
  --connect-light-pink: #FFF1F4;
  --connect-border: rgba(31,31,31,.12);
  --connect-shadow: 0 16px 40px rgba(31,31,31,.09);
}

html {
  background: var(--brand-early-dawn);
}

body,
button,
input,
select,
textarea {
  font-family: "Quicksand", Arial, sans-serif !important;
}

body {
  color: var(--brand-mine-shaft);
  background:
    radial-gradient(circle at 11% 8%, rgba(173,229,204,.17), transparent 22%),
    radial-gradient(circle at 92% 20%, rgba(254,110,31,.08), transparent 20%),
    var(--brand-early-dawn);
}

.brand-demo-note {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9000;
  padding: 8px 13px;
  border: 2px solid var(--brand-amaranth);
  border-radius: 999px;
  color: var(--brand-amaranth);
  background: rgba(255,249,234,.96);
  box-shadow: 0 8px 24px rgba(31,31,31,.12);
  font-size: 12px;
  font-weight: 700;
}

.connect-header {
  background: rgba(255,249,234,.96);
  border-bottom: 1px solid rgba(31,31,31,.08);
  backdrop-filter: blur(12px);
}

.connect-menu a,
.connect-sign-in {
  font-weight: 700;
  color: var(--brand-mine-shaft);
}

.connect-menu a::after {
  height: 4px;
  border-radius: 99px;
  background: var(--brand-orange);
}

.connect-menu a:hover,
.connect-menu a.is-active,
.connect-sign-in:hover {
  color: var(--brand-amaranth);
}

.connect-button {
  border-radius: 11px 11px 11px 2px;
  background: var(--brand-amaranth);
  box-shadow: 0 8px 0 rgba(228,47,87,.14);
  font-weight: 700;
}

.connect-button:hover {
  background: #cc244a;
  transform: translateY(-2px) rotate(-.3deg);
}

.connect-button--outline {
  color: var(--brand-amaranth);
  background: transparent;
  border: 2px solid var(--brand-amaranth);
  box-shadow: none;
}

.connect-button--outline:hover {
  color: #fff;
  background: var(--brand-amaranth);
}

.connect-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 5px 18px 7px;
  border-radius: 6px 6px 6px 1px;
  color: var(--brand-mine-shaft);
  background: var(--brand-padua);
  font-family: "Amatic SC", "Quicksand", sans-serif !important;
  font-size: 27px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: none;
}

.connect-hero .connect-kicker {
  color: #fff;
  background: var(--brand-amaranth);
}

h1,
h2,
.connect-inline-cta h3 {
  font-family: "Amatic SC", "Quicksand", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
}

.connect-hero h1 {
  max-width: 690px;
  font-size: clamp(56px, 6.1vw, 95px);
  line-height: .9;
  text-transform: uppercase;
}

.connect-hero h1 span {
  color: var(--brand-amaranth);
}

.connect-heading h2,
.connect-split h2,
.connect-reviews-heading h2 {
  font-size: clamp(45px, 4.5vw, 69px);
  line-height: .95;
}

.connect-lead,
.connect-hero p,
.connect-heading p {
  font-weight: 500;
}

.connect-hero {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(115deg, rgba(255,249,234,.97), rgba(255,249,234,.82)),
    radial-gradient(circle at 86% 15%, rgba(173,229,204,.45), transparent 30%);
}

.connect-hero::before {
  content: "";
  position: absolute;
  top: 7%;
  right: 3%;
  width: 72px;
  height: 72px;
  background: var(--brand-orange);
  clip-path: polygon(50% 0,61% 34%,98% 23%,69% 52%,100% 72%,63% 68%,58% 100%,42% 70%,10% 90%,30% 57%,0 41%,37% 39%);
  transform: rotate(10deg);
  opacity: .96;
}

.connect-hero::after {
  content: "★";
  position: absolute;
  right: 8%;
  bottom: 10%;
  color: var(--brand-boston-blue);
  font-size: 44px;
  transform: rotate(14deg);
}

.connect-hero-grid {
  align-items: center;
}

.connect-hero-image {
  position: relative;
}

.connect-hero-image::before {
  content: "";
  position: absolute;
  inset: 7% 4% 2% 4%;
  z-index: 0;
  border-radius: 48% 52% 43% 57% / 53% 40% 60% 47%;
  background: rgba(173,229,204,.38);
  transform: rotate(-3deg);
}

.connect-hero-picture {
  position: relative;
  z-index: 1;
}

.connect-new-hero-image {
  filter: drop-shadow(0 20px 22px rgba(31,31,31,.14));
}

.connect-ticks span::before {
  background: var(--brand-padua);
  color: var(--brand-mine-shaft);
}

.connect-trust {
  background: var(--brand-padua);
  border-top: 0;
  border-bottom: 0;
}

.connect-trust-item {
  position: relative;
}

.connect-trust-item:not(:last-child)::after {
  background: rgba(31,31,31,.15);
}

.connect-section {
  position: relative;
  overflow: hidden;
}

.connect-section--cream {
  background: var(--brand-early-dawn);
}

.connect-section--blue {
  background: rgba(65,159,184,.14);
}

.connect-section--pink {
  background: rgba(228,47,87,.08);
}

.connect-section--blue::before,
.connect-section--pink::after {
  content: "";
  position: absolute;
  width: 145px;
  height: 145px;
  border-radius: 28% 72% 50% 50% / 48% 43% 57% 52%;
  opacity: .14;
  pointer-events: none;
}

.connect-section--blue::before {
  left: -62px;
  top: 70px;
  background: var(--brand-boston-blue);
  transform: rotate(20deg);
}

.connect-section--pink::after {
  right: -55px;
  bottom: 45px;
  background: var(--brand-amaranth);
  transform: rotate(-20deg);
}

.connect-card,
.connect-fit-card,
.connect-review-slide,
.connect-compare-panel,
.connect-size-card {
  border: 1px solid rgba(31,31,31,.09);
  border-radius: 22px 22px 22px 5px;
  background: rgba(255,255,255,.91);
  box-shadow: 0 12px 30px rgba(31,31,31,.07);
}

.connect-card:hover,
.connect-fit-card:hover {
  transform: translateY(-4px) rotate(-.25deg);
}

.connect-card:nth-child(even):hover,
.connect-fit-card:nth-child(even):hover {
  transform: translateY(-4px) rotate(.25deg);
}

.connect-card-icon {
  border-radius: 12px 12px 12px 2px;
  color: #fff;
  background: var(--brand-boston-blue);
}

.connect-card:nth-child(2n) .connect-card-icon {
  background: var(--brand-orange);
}

.connect-card:nth-child(3n) .connect-card-icon {
  background: var(--brand-amaranth);
}

.connect-card:nth-child(4n) .connect-card-icon {
  color: var(--brand-mine-shaft);
  background: var(--brand-padua);
}

.connect-review-stars {
  color: var(--brand-orange);
}

.connect-review-arrow {
  color: #fff;
  background: var(--brand-amaranth);
  border-radius: 50% 50% 50% 12%;
}

.connect-review-dot.is-active {
  background: var(--brand-amaranth);
}

.connect-visual-flow {
  position: relative;
}

.connect-flow-step {
  border-color: rgba(31,31,31,.12);
  border-radius: 16px 16px 16px 3px;
  background: rgba(255,249,234,.96);
}

.connect-flow-step strong {
  color: var(--brand-amaranth);
}

.connect-flow-step:not(:last-child)::after,
.connect-flow-step:not(:last-child)::before {
  color: var(--brand-orange);
  border-color: var(--brand-orange);
  background: var(--brand-orange);
}

.connect-inline-cta {
  color: var(--brand-mine-shaft);
  background: var(--brand-padua);
  border-radius: 26px 26px 26px 7px;
}

.connect-compare-panel--connect {
  border-color: rgba(228,47,87,.3);
  background: rgba(255,249,234,.98);
}

.connect-compare-panel--connect h3 {
  color: var(--brand-amaranth);
}

.connect-integration-note--back {
  color: var(--brand-amaranth);
}

.connect-integration-note--soon {
  color: var(--brand-boston-blue);
}

.connect-size-price,
.connect-calculator-result strong {
  color: var(--brand-amaranth);
}

.connect-calculator-section {
  background:
    radial-gradient(circle at 8% 16%, rgba(254,110,31,.12), transparent 24%),
    radial-gradient(circle at 94% 75%, rgba(65,159,184,.15), transparent 24%),
    var(--brand-early-dawn);
}

.connect-gca-trust {
  background: rgba(173,229,204,.28);
}

.connect-faq details {
  border-radius: 15px 15px 15px 3px;
}

.connect-final-cta {
  background:
    linear-gradient(135deg, var(--brand-amaranth), #ca2148);
}

.connect-final-cta h2 {
  font-family: "Amatic SC", "Quicksand", sans-serif !important;
  font-size: clamp(48px, 5vw, 72px);
}

.connect-footer {
  color: rgba(255,255,255,.88);
  background: var(--brand-mine-shaft);
}

.brand-doodle {
  position: absolute;
  pointer-events: none;
}

.brand-doodle--hero {
  right: -25px;
  bottom: 22px;
  width: 126px;
  height: 72px;
  border-bottom: 10px solid var(--brand-amaranth);
  border-right: 10px solid var(--brand-amaranth);
  border-radius: 0 0 75% 0;
  transform: rotate(-7deg);
}

.brand-doodle--hero::after {
  content: "";
  position: absolute;
  right: -6px;
  bottom: -17px;
  width: 24px;
  height: 24px;
  border-right: 9px solid var(--brand-amaranth);
  border-bottom: 9px solid var(--brand-amaranth);
  transform: rotate(18deg);
}

.brand-doodle--reviews {
  top: -14px;
  right: 5%;
  width: 52px;
  height: 52px;
  background: var(--brand-orange);
  clip-path: polygon(50% 0,62% 34%,100% 25%,70% 53%,100% 75%,61% 69%,51% 100%,40% 68%,4% 86%,30% 56%,0 39%,38% 39%);
}

.brand-doodle--flow {
  left: 7%;
  bottom: -10px;
  width: 84px;
  height: 40px;
  border-bottom: 8px solid var(--brand-boston-blue);
  border-radius: 0 0 70% 60%;
  transform: rotate(7deg);
}

@media (max-width: 900px) {
  .connect-hero h1 {
    font-size: clamp(53px, 12vw, 76px);
  }

  .connect-heading h2,
  .connect-split h2,
  .connect-reviews-heading h2 {
    font-size: clamp(42px, 10vw, 59px);
  }

  .brand-doodle--hero {
    display: none;
  }
}

@media (max-width: 650px) {
  .brand-demo-note {
    right: 10px;
    bottom: 10px;
    font-size: 10px;
  }

  .connect-kicker {
    font-size: 23px;
  }

  .connect-hero::before {
    width: 46px;
    height: 46px;
  }

  .connect-hero::after {
    font-size: 30px;
  }

  .connect-card,
  .connect-fit-card,
  .connect-review-slide,
  .connect-compare-panel {
    border-radius: 17px 17px 17px 4px;
  }
}


/* ==========================================================
   Boston Blue dominant Connect colourway
   ========================================================== */

:root {
  --connect-primary: var(--brand-boston-blue);
  --connect-primary-dark: #337F93;
  --connect-primary-soft: rgba(65,159,184,.12);
  --connect-primary-softer: rgba(65,159,184,.07);
}

/* Header and navigation */
.connect-menu a::after {
  background: var(--brand-boston-blue);
}

.connect-menu a:hover,
.connect-menu a.is-active,
.connect-sign-in:hover {
  color: var(--brand-boston-blue);
}

/* Buttons */
.connect-button {
  background: var(--brand-amaranth);
  box-shadow: 0 8px 0 rgba(228,47,87,.14);
}

.connect-button--outline {
  color: var(--brand-boston-blue);
  border-color: var(--brand-boston-blue);
}

.connect-button--outline:hover {
  color: #fff;
  background: var(--brand-boston-blue);
}

/* Kicker and headings */
.connect-kicker {
  color: #fff;
  background: var(--brand-boston-blue);
}

.connect-hero .connect-kicker {
  color: #fff;
  background: var(--brand-boston-blue);
}

.connect-hero h1 span {
  color: var(--brand-amaranth);
}

/* Hero treatment */
.connect-hero {
  background:
    linear-gradient(115deg, rgba(255,249,234,.98), rgba(255,249,234,.86)),
    radial-gradient(circle at 86% 15%, rgba(65,159,184,.28), transparent 31%);
}

.connect-hero-image::before {
  background: rgba(65,159,184,.18);
}

.connect-hero::after {
  color: var(--brand-boston-blue);
}

.connect-ticks span::before {
  color: #fff;
  background: var(--brand-boston-blue);
}

/* Main trust strip */
.connect-trust {
  color: #fff;
  background: var(--brand-boston-blue);
}

.connect-trust-item span,
.connect-trust-item strong {
  color: #fff;
}

.connect-trust-item:not(:last-child)::after {
  background: rgba(255,255,255,.28);
}

/* Section backgrounds */
.connect-section--blue {
  background: rgba(65,159,184,.12);
}

.connect-section--pink {
  background: rgba(65,159,184,.055);
}

.connect-section--cream {
  background:
    radial-gradient(circle at 10% 12%, rgba(65,159,184,.07), transparent 22%),
    var(--brand-early-dawn);
}

.connect-section--blue::before {
  background: var(--brand-boston-blue);
}

.connect-section--pink::after {
  background: var(--brand-boston-blue);
}

/* Cards and icons */
.connect-card-icon {
  background: var(--brand-boston-blue);
}

.connect-card:nth-child(2n) .connect-card-icon {
  background: var(--brand-amaranth);
}

.connect-card:nth-child(3n) .connect-card-icon {
  background: var(--brand-orange);
}

.connect-card:nth-child(4n) .connect-card-icon {
  color: #fff;
  background: var(--brand-boston-blue);
}

/* Reviews */
.connect-review-arrow {
  background: var(--brand-boston-blue);
}

.connect-review-dot.is-active {
  background: var(--brand-boston-blue);
}

/* Process flow */
.connect-flow-step strong {
  color: var(--brand-boston-blue);
}

.connect-flow-step:not(:last-child)::after,
.connect-flow-step:not(:last-child)::before {
  color: var(--brand-boston-blue);
  border-color: var(--brand-boston-blue);
  background: var(--brand-boston-blue);
}

/* CTA panels */
.connect-inline-cta {
  color: #fff;
  background: var(--brand-boston-blue);
}

.connect-inline-cta .connect-button--outline {
  color: #fff;
  border-color: #fff;
}

.connect-inline-cta .connect-button--outline:hover {
  color: var(--brand-boston-blue);
  background: #fff;
}

.connect-compare-panel--connect {
  border-color: rgba(65,159,184,.35);
  background: rgba(255,255,255,.96);
}

.connect-compare-panel--connect h3 {
  color: var(--brand-boston-blue);
}

/* Integration statuses */
.connect-integration-note--back {
  color: var(--brand-amaranth);
}

.connect-integration-note--soon {
  color: var(--brand-boston-blue);
}

/* Calculator and price emphasis */
.connect-size-price {
  color: var(--brand-boston-blue);
}

.connect-calculator-result strong {
  color: var(--brand-amaranth);
}

.connect-calculator-section {
  background:
    radial-gradient(circle at 8% 16%, rgba(65,159,184,.14), transparent 25%),
    radial-gradient(circle at 94% 75%, rgba(228,47,87,.08), transparent 24%),
    var(--brand-early-dawn);
}

/* Trust and FAQ */
.connect-gca-trust {
  background: rgba(65,159,184,.12);
}

.connect-faq details[open] {
  border-color: rgba(65,159,184,.28);
}

.connect-faq summary::after {
  color: var(--brand-boston-blue);
}

/* Final CTA */
.connect-final-cta {
  background:
    linear-gradient(135deg, var(--brand-boston-blue), #337F93);
}

.connect-final-cta .connect-button {
  color: var(--brand-boston-blue);
  background: #fff;
  box-shadow: none;
}

.connect-final-cta .connect-button:hover {
  color: #fff;
  background: var(--brand-amaranth);
}

/* Footer */
.connect-footer a:hover {
  color: var(--brand-boston-blue);
}

/* Decorative doodles */
.brand-doodle--hero {
  border-color: var(--brand-boston-blue);
}

.brand-doodle--hero::after {
  border-color: var(--brand-boston-blue);
}

.brand-doodle--reviews {
  background: var(--brand-boston-blue);
}

.brand-doodle--flow {
  border-color: var(--brand-boston-blue);
}

/* Keep Padua as a restrained supporting colour */
.connect-card:nth-child(5n) {
  box-shadow:
    inset 0 5px 0 rgba(173,229,204,.8),
    0 12px 30px rgba(31,31,31,.07);
}

.connect-fit-card:nth-child(2n) {
  box-shadow:
    inset 0 5px 0 rgba(173,229,204,.75),
    0 12px 30px rgba(31,31,31,.07);
}

.connect-review-slide::before {
  content: "";
  position: absolute;
  top: 0;
  left: 28px;
  width: 66px;
  height: 5px;
  border-radius: 0 0 8px 8px;
  background: var(--brand-padua);
}


/* ==========================================================
   Requested demo refinements
   ========================================================== */

/* Keep the top Calculate Your Profit CTA as a clean outline button. */
.connect-hero .connect-button--outline {
  color: var(--brand-boston-blue) !important;
  background: transparent !important;
  border: 2px solid var(--brand-boston-blue) !important;
  box-shadow: none !important;
}

.connect-hero .connect-button--outline:hover {
  color: #fff !important;
  background: var(--brand-boston-blue) !important;
}

/* Remove the stray doodle beneath the main hero image/copy. */
.brand-doodle--hero {
  display: none !important;
}

/* Remove the coloured top strips from fit and supporting cards. */
.connect-fit-card,
.connect-card,
.connect-card:nth-child(5n),
.connect-fit-card:nth-child(2n) {
  box-shadow: 0 12px 30px rgba(31,31,31,.07) !important;
}

.connect-review-slide::before {
  content: none !important;
  display: none !important;
}

/* Replace the diamond process connectors with clean directional arrows. */
.connect-flow-step:not(:last-child)::before {
  content: none !important;
  display: none !important;
}

.connect-flow-step:not(:last-child)::after {
  content: "→" !important;
  position: absolute !important;
  top: 50% !important;
  right: -42px !important;
  left: auto !important;
  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--brand-boston-blue) !important;
  font-family: "Quicksand", Arial, sans-serif !important;
  font-size: 34px !important;
  font-weight: 700 !important;
  line-height: 30px !important;
  text-align: center !important;
  transform: translateY(-50%) !important;
}

/* Card-size prices should use the main Amaranth conversion colour. */
.connect-size-price {
  color: var(--brand-amaranth) !important;
}

/* Pricing cards: make the final two Get Started buttons legible. */
.connect-pricing-grid .connect-button--outline {
  color: #fff !important;
  background: var(--brand-amaranth) !important;
  border-color: var(--brand-amaranth) !important;
  box-shadow: 0 8px 0 rgba(228,47,87,.14) !important;
}

.connect-pricing-grid .connect-button--outline:hover {
  color: #fff !important;
  background: #cc244a !important;
  border-color: #cc244a !important;
}

@media (max-width: 900px) {
  .connect-flow-step:not(:last-child)::after {
    content: "↓" !important;
    top: calc(100% + 5px) !important;
    right: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    font-size: 32px !important;
    line-height: 30px !important;
  }
}


/* ==========================================================
   Decorative element containment fixes
   ========================================================== */

/* Remove the stray clipped blue doodle from the five-step section. */
.brand-doodle--flow {
  display: none !important;
}

/* Keep the reviews star fully inside its section and away from the edge. */
.connect-reviews-heading {
  position: relative;
  overflow: visible;
}

.brand-doodle--reviews {
  top: 14px !important;
  right: 44px !important;
  width: 44px !important;
  height: 44px !important;
  transform: rotate(8deg);
}

/* Prevent decorative elements from leaking into neighbouring sections. */
#how-it-works,
.connect-reviews,
.connect-reviews-section {
  overflow: hidden;
}

@media (max-width: 900px) {
  .brand-doodle--reviews {
    top: 14px !important;
    right: 30px !important;
    width: 38px !important;
    height: 38px !important;
  }
}

@media (max-width: 650px) {
  .brand-doodle--reviews {
    top: 16px !important;
    right: 18px !important;
    width: 32px !important;
    height: 32px !important;
  }
}


/* ==========================================================
   Full-site brand refinements for internal pages
   ========================================================== */

.connect-brand-site .guide-hero,
.connect-brand-site .legal-hero,
.connect-brand-site .connect-page-hero {
  background:
    radial-gradient(circle at 92% 18%, rgba(65,159,184,.18), transparent 27%),
    radial-gradient(circle at 8% 85%, rgba(254,110,31,.07), transparent 22%),
    var(--brand-early-dawn);
}

.connect-brand-site .guide-hero h1,
.connect-brand-site .legal-hero h1,
.connect-brand-site .connect-page-hero h1 {
  font-family: "Amatic SC", "Quicksand", sans-serif !important;
  font-size: clamp(50px, 6vw, 82px);
  line-height: .95;
  text-transform: uppercase;
}

.connect-brand-site .guide-eyebrow {
  display: inline-flex;
  padding: 5px 17px 7px;
  border-radius: 7px 7px 7px 2px;
  color: #fff;
  background: var(--brand-boston-blue);
  font-family: "Amatic SC", "Quicksand", sans-serif !important;
  font-size: 25px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .04em;
}

.connect-brand-site .guide-card,
.connect-brand-site .guide-content,
.connect-brand-site .legal-content,
.connect-brand-site .legal-sidebar,
.connect-brand-site .help-card {
  border-radius: 20px 20px 20px 5px;
}

.connect-brand-site .guide-card:hover,
.connect-brand-site .help-card:hover {
  transform: translateY(-3px) rotate(-.2deg);
}

.connect-brand-site .guide-card:nth-child(even):hover,
.connect-brand-site .help-card:nth-child(even):hover {
  transform: translateY(-3px) rotate(.2deg);
}

.connect-brand-site .guide-category,
.connect-brand-site .guide-filter.is-active {
  color: #fff;
  background: var(--brand-boston-blue);
  border-color: var(--brand-boston-blue);
}

.connect-brand-site .guide-filter:hover {
  color: var(--brand-boston-blue);
  border-color: var(--brand-boston-blue);
}

.connect-brand-site .legal-sidebar a:hover,
.connect-brand-site .legal-sidebar a.is-active {
  color: var(--brand-boston-blue);
}

.connect-brand-site .legal-content h2,
.connect-brand-site .guide-content h2 {
  color: var(--brand-boston-blue);
}

.connect-brand-site .guide-content blockquote {
  border-left-color: var(--brand-orange);
  background: rgba(254,110,31,.07);
}

.connect-brand-site .guide-content code,
.connect-brand-site .legal-content code {
  color: var(--brand-amaranth);
  background: rgba(228,47,87,.07);
}

.connect-brand-site .connect-back-link {
  color: var(--brand-boston-blue);
}

.connect-brand-site .connect-back-link:hover {
  color: var(--brand-amaranth);
}

.connect-brand-site .guide-search input:focus,
.connect-brand-site input:focus,
.connect-brand-site select:focus,
.connect-brand-site textarea:focus {
  border-color: var(--brand-boston-blue);
  box-shadow: 0 0 0 3px rgba(65,159,184,.15);
}

.connect-brand-site .guide-content img,
.connect-brand-site .screenshot img {
  border-radius: 16px 16px 16px 4px;
  box-shadow: 0 12px 32px rgba(31,31,31,.10);
}

.connect-brand-site .connect-empty-state {
  border-radius: 20px 20px 20px 5px;
  background: rgba(65,159,184,.08);
}

@media (max-width: 650px) {
  .connect-brand-site .guide-hero h1,
  .connect-brand-site .legal-hero h1,
  .connect-brand-site .connect-page-hero h1 {
    font-size: clamp(44px, 14vw, 64px);
  }
}


/* ==========================================================
   FINAL SHARED YOU SAID IT DESIGN SYSTEM
   Connect + Marketplace typography, FAQ and footer consistency
   ========================================================== */
:root {
  --ysi-font-primary: "Poppins", "Avenir Next", Avenir, "Segoe UI", Arial, sans-serif;
  --ysi-font-display: "Amatic SC", var(--ysi-font-primary);
  --ysi-ink: #1f1f1f;
  --ysi-copy: #555;
}

html body,
body button,
body input,
body select,
body textarea {
  font-family: var(--ysi-font-primary) !important;
}

body p,
body li,
body label,
body input,
body select,
body textarea {
  font-family: var(--ysi-font-primary) !important;
}

.connect-heading h2,
.section-heading h2,
.connect-split h2,
.connect-reviews-heading h2,
.calculator-intro h2,
.connect-final-cta h2,
.final-cta h2,
.connect-gca-copy h2 {
  font-family: var(--ysi-font-display) !important;
  font-weight: 700 !important;
  line-height: .98 !important;
}

.connect-lead,
.hero-copy .lead,
.connect-copy-match {
  font-family: var(--ysi-font-primary) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  color: var(--ysi-copy) !important;
}

.connect-heading p,
.section-heading p,
.connect-reviews-heading p,
.calculator-intro > p {
  font-family: var(--ysi-font-primary) !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  color: var(--ysi-copy) !important;
}

.connect-card h3,
.connect-fit-card h3,
.connect-size-card h3,
.designer-card h3,
.quick-card h3 {
  font-family: var(--ysi-font-primary) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: var(--ysi-ink) !important;
}

.connect-card p,
.connect-fit-card p,
.connect-size-card p,
.designer-card p,
.quick-card p {
  font-family: var(--ysi-font-primary) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: var(--ysi-copy) !important;
}

.connect-faq summary,
.connect-style-faq summary {
  font-family: var(--ysi-font-primary) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  color: var(--ysi-ink) !important;
}

.connect-faq details p,
.connect-style-faq details p {
  font-family: var(--ysi-font-primary) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: var(--ysi-copy) !important;
}

/* Exact shared white footer */
.connect-footer {
  padding: 55px 0 28px !important;
  color: var(--ysi-ink) !important;
  background: #fff !important;
  border-top: 1px solid #ececec !important;
}

.connect-footer > .connect-container,
.connect-footer > .container {
  width: min(1180px, calc(100% - 40px)) !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.connect-footer-grid {
  display: grid !important;
  grid-template-columns: 1.6fr 1fr 1fr !important;
  gap: 50px !important;
  align-items: start !important;
}

.connect-footer-logo {
  display: block !important;
  width: auto !important;
  height: 84px !important;
  max-width: none !important;
  margin: 0 0 20px !important;
  object-fit: contain !important;
}

.connect-footer h3,
.connect-footer h3[style] {
  margin: 0 0 14px !important;
  color: var(--ysi-ink) !important;
  font-family: var(--ysi-font-primary) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

.connect-footer p {
  max-width: 490px !important;
  margin: 0 !important;
  color: #666 !important;
  font-family: var(--ysi-font-primary) !important;
  font-size: 15px !important;
  line-height: 1.72 !important;
}

.connect-footer-links {
  display: grid !important;
  gap: 8px !important;
}

.connect-footer a {
  margin: 0 !important;
  color: #666 !important;
  font-family: var(--ysi-font-primary) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
}

.connect-footer a:hover {
  color: #E42F57 !important;
}

.connect-copyright {
  margin-top: 38px !important;
  padding-top: 22px !important;
  border-top: 1px solid #ececec !important;
  color: #888 !important;
  font-family: var(--ysi-font-primary) !important;
  font-size: 13px !important;
}

/* Remove the decorative marks that were clipping or appearing as stray lines. */
.brand-mark-section::before,
.brand-mark-section::after,
.brand-doodle,
.brand-doodle::before,
.brand-doodle::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 950px) {
  .connect-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .connect-footer-logo {
    height: 68px !important;
  }
}

@media (max-width: 650px) {
  .connect-lead,
  .hero-copy .lead,
  .connect-copy-match {
    font-size: 16px !important;
  }

  .connect-heading p,
  .section-heading p,
  .connect-reviews-heading p,
  .calculator-intro > p {
    font-size: 16px !important;
  }

  .connect-card h3,
  .connect-fit-card h3,
  .connect-size-card h3,
  .designer-card h3,
  .quick-card h3 {
    font-size: 19px !important;
  }

  .connect-footer {
    padding: 45px 0 24px !important;
  }

  .connect-footer > .connect-container,
  .connect-footer > .container {
    width: min(100% - 28px, 1180px) !important;
  }

  .connect-footer-logo {
    height: 58px !important;
  }

  .connect-footer h3,
  .connect-footer h3[style] {
    font-size: 17px !important;
  }

  .connect-footer p,
  .connect-footer a {
    font-size: 14px !important;
  }
}


/* ==========================================================
   FINAL BUTTON SHADOW REMOVAL
   ========================================================== */
.connect-button,
.connect-button:hover,
.connect-button:focus,
.connect-button:active,
.connect-final-cta .connect-button,
.connect-final-cta .connect-button:hover,
.connect-inline-cta .connect-button,
.connect-inline-cta .connect-button:hover,
.connect-header .connect-button,
.connect-header .connect-button:hover,
button,
button:hover {
  box-shadow: none !important;
}