:root {
      --brand-blue: #059BD8;
      --brand-yellow: #F9ED2E;
      --brand-cyan: #2EC3E4;
      --brand-gold: #F7D24F;
      --brand-indigo: #283679;
      --brand-navy: #042742;
      --brand-black: #000000;
      --brand-white: #ffffff;

      --navy: var(--brand-navy);
      --yellow: var(--brand-yellow);
      --blue: var(--brand-blue);
      --cyan: var(--brand-cyan);
      --gold: var(--brand-gold);
      --indigo: var(--brand-indigo);
      --white: var(--brand-white);
      --ink: var(--brand-navy);
      --muted: #526a7b;
      --soft: #eef8fc;
      --line: rgba(4, 39, 66, 0.16);
      --shadow: 0 24px 70px rgba(4, 39, 66, 0.18);
      --radius-xl: 34px;
      --radius-lg: 24px;
      --radius-md: 16px;
      --container: 1180px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: auto; overflow-anchor: none; }

    body {
      margin: 0;
      font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--ink);
      background: var(--white);
      line-height: 1.55;
    }

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

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

    .skip-link {
      position: absolute;
      left: 16px;
      top: 12px;
      z-index: 100;
      padding: 10px 14px;
      background: var(--yellow);
      color: var(--navy);
      border-radius: 999px;
      transform: translateY(-140%);
      transition: transform 180ms ease;
      font-weight: 800;
    }

    .skip-link:focus { transform: translateY(0); }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 30;
      background: rgba(4, 39, 66, 0.94);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    .topbar-inner {
      min-height: 78px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }

    .brand-lockup {
      display: flex;
      align-items: center;
      gap: 14px;
      text-decoration: none;
    }

    .brand-lockup img {
      width: 126px;
      height: auto;
      filter: brightness(0) invert(1);
    }

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

    .nav-actions a:not(.button) {
      color: rgba(255, 255, 255, 0.86);
      text-decoration: none;
      font-weight: 800;
      font-size: 0.95rem;
    }

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 50px;
      padding: 13px 22px;
      border-radius: 999px;
      border: 2px solid transparent;
      font-weight: 800;
      text-decoration: none;
      text-align: center;
      cursor: pointer;
      white-space: nowrap;
      transition: transform 180ms ease, box-shadow 180ms ease;
    }

    .button:hover,
    .button:focus-visible {
      transform: translateY(-2px);
      box-shadow: 0 18px 34px rgba(4, 39, 66, 0.2);
    }

    .button-primary { background: var(--yellow); color: var(--navy); box-shadow: 0 12px 28px rgba(4, 39, 66, 0.18); }
    .button-secondary { background: var(--navy); color: var(--white); border-color: var(--navy); }
    .button-outline { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, 0.5); }

    .hero {
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(circle at 88% 6%, rgba(249, 237, 46, 0.42), transparent 28rem),
        linear-gradient(135deg, #042742 0%, #059BD8 58%, #283679 100%);
      color: var(--white);
      padding: 74px 0 66px;
    }

    .hero:before,
    .hero:after {
      content: "";
      position: absolute;
      border-radius: 999px;
      pointer-events: none;
    }

    .hero:before {
      width: 420px;
      height: 420px;
      left: -190px;
      bottom: -170px;
      background: rgba(255, 255, 255, 0.07);
    }

    .hero:after {
      width: 250px;
      height: 250px;
      right: 8%;
      bottom: 8%;
      background: rgba(249, 237, 46, 0.16);
    }

    .hero-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 0.92fr 1.08fr;
      gap: 44px;
      align-items: center;
    }

    .eyebrow {
      display: inline-flex;
      width: fit-content;
      padding: 8px 14px;
      border-radius: 999px;
      background: rgba(249, 237, 46, 0.14);
      color: var(--yellow);
      border: 1px solid rgba(249, 237, 46, 0.42);
      font-weight: 800;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      font-size: 0.8rem;
    }

    .hero h1 {
      margin: 22px 0 18px;
      font-size: clamp(3rem, 7vw, 6.3rem);
      line-height: 0.96;
      letter-spacing: -0.06em;
      max-width: 850px;
      text-wrap: balance;
      font-weight: 800;
    }

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

    .hero-copy {
      max-width: 690px;
      margin: 0 0 30px;
      font-size: clamp(1.12rem, 2vw, 1.38rem);
      color: rgba(255, 255, 255, 0.88);
      text-wrap: pretty;
    }

    .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

    .hero-image-card {
      background: var(--white);
      border-radius: var(--radius-xl);
      padding: 14px;
      box-shadow: var(--shadow);
      transform: rotate(1deg);
    }

    .hero-image-card img {
      width: 100%;
      aspect-ratio: 1.55 / 1;
      object-fit: cover;
      object-position: center;
      border-radius: 24px;
    }

    .section { padding: 82px 0; }
    .section-soft { background: var(--soft); }

    .section-header {
      max-width: 820px;
      margin: 0 auto 38px;
      text-align: center;
    }

    .section-header h2,
    .content-card h2,
    .widget-copy h2,
    .final-cta h2 {
      margin: 0 0 14px;
      color: var(--navy);
      font-size: clamp(2.15rem, 5vw, 4.1rem);
      line-height: 1.02;
      letter-spacing: -0.055em;
      text-wrap: balance;
      font-weight: 800;
    }

    .section-header p,
    .content-card p,
    .widget-copy p,
    .final-cta p {
      margin: 0;
      color: var(--muted);
      font-size: 1.08rem;
      text-wrap: pretty;
    }

    .quick-card {
      display: grid;
      grid-template-columns: 0.9fr 1.1fr;
      gap: 30px;
      align-items: center;
      background: var(--yellow);
      color: var(--navy);
      border-radius: var(--radius-xl);
      padding: 34px;
      box-shadow: 0 20px 48px rgba(4, 39, 66, 0.14);
    }

    .quick-card h2 {
      margin: 0 0 12px;
      font-size: clamp(2.2rem, 5vw, 4.3rem);
      line-height: 0.98;
      letter-spacing: -0.06em;
      text-wrap: balance;
      font-weight: 800;
    }

    .quick-card p { margin: 0 0 24px; font-weight: 800; text-wrap: pretty; }

    .steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }

    .step {
      background: var(--white);
      border-radius: 20px;
      padding: 20px;
      border: 1px solid rgba(4, 39, 66, 0.12);
    }

    .step b {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border-radius: 999px;
      background: var(--navy);
      color: var(--yellow);
      margin-bottom: 12px;
    }

    .step span { display: block; font-weight: 800; }

    .image-cover {
      width: 100%;
      min-height: 370px;
      height: 100%;
      object-fit: cover;
      object-position: center;
      border-radius: 26px;
      box-shadow: 0 16px 38px rgba(4, 39, 66, 0.14);
    }

    .split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 32px;
      align-items: center;
    }

    .content-card {
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: var(--radius-xl);
      padding: 34px;
      box-shadow: 0 16px 42px rgba(4, 39, 66, 0.08);
    }

    .content-card.dark {
      background: var(--navy);
      color: var(--white);
      border-color: rgba(255, 255, 255, 0.12);
    }

    .content-card.dark h2,
    .content-card.dark p { color: var(--white); }
    .content-card.dark p { color: rgba(255, 255, 255, 0.86); }

    .content-card p + p { margin-top: 16px; }

    .quote {
      margin: 22px 0 0;
      padding: 22px 0 0;
      border-top: 5px solid var(--yellow);
      font-size: 1.18rem;
      font-weight: 800;
      color: var(--navy);
      text-wrap: pretty;
    }

    .quote cite {
      display: block;
      margin-top: 12px;
      font-style: normal;
      color: var(--muted);
    }

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

    .small-card {
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      padding: 28px;
      box-shadow: 0 14px 34px rgba(4, 39, 66, 0.06);
    }

    .small-card h3 {
      margin: 0 0 10px;
      color: var(--navy);
      font-size: 1.35rem;
      line-height: 1.12;
      text-wrap: balance;
      font-weight: 800;
    }

    .small-card p {
      margin: 0;
      color: var(--muted);
      font-weight: 600;
      text-wrap: pretty;
    }

    .founders {
      background: var(--navy);
      color: var(--white);
      position: relative;
      overflow: hidden;
    }

    .founders:after {
      content: "";
      position: absolute;
      width: 390px;
      height: 390px;
      right: -150px;
      bottom: -180px;
      border-radius: 999px;
      background: rgba(249, 237, 46, 0.18);
    }

    .founders .content-card {
      position: relative;
      z-index: 1;
      max-width: 920px;
      margin: 0 auto;
      border-left: 10px solid var(--yellow);
    }

    .story-photo {
      display: grid;
      grid-template-columns: 0.9fr 1.1fr;
      gap: 28px;
      align-items: stretch;
    }

    .story-photo .image-cover { min-height: 520px; }

    .trust-card {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 24px;
      align-items: center;
      background: var(--navy);
      color: var(--white);
      border-radius: var(--radius-xl);
      padding: 30px;
      box-shadow: var(--shadow);
    }

    .trust-card img {
      width: 112px;
      background: var(--white);
      border-radius: 18px;
      padding: 12px;
    }

    .trust-card h3 {
      margin: 0 0 8px;
      font-size: clamp(1.7rem, 4vw, 3rem);
      line-height: 1;
      letter-spacing: -0.045em;
      color: var(--white);
      text-wrap: balance;
      font-weight: 800;
    }

    .trust-card p { margin: 0; color: rgba(255, 255, 255, 0.86); font-weight: 600; }

    .widget-section {
      scroll-margin-top: 96px;
      padding: 82px 0 96px;
      background: linear-gradient(180deg, #f5f8fb 0%, #ffffff 100%);
    }

    .widget-layout {
      display: grid;
      grid-template-columns: 0.78fr 1.22fr;
      gap: 30px;
      align-items: start;
    }

    .widget-copy {
      position: sticky;
      top: 104px;
      background: var(--navy);
      color: var(--white);
      border-radius: var(--radius-xl);
      padding: 34px;
      box-shadow: var(--shadow);
    }

    .widget-copy h2,
    .widget-copy p { color: var(--white); }
    .widget-copy p { color: rgba(255, 255, 255, 0.86); }

    .widget-points {
      display: grid;
      gap: 14px;
      margin: 26px 0 0;
    }

    .point {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      color: rgba(255, 255, 255, 0.9);
      font-weight: 700;
      text-wrap: pretty;
    }

    .tick {
      width: 26px;
      height: 26px;
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      border-radius: 999px;
      background: var(--yellow);
      color: var(--navy);
      font-weight: 800;
      line-height: 1;
      margin-top: 1px;
    }

    .widget-direct {
      width: 100%;
      height: 1450px;
      min-height: 1450px;
      max-height: 1450px;
      border: 0;
      display: block;
      overflow: hidden;
      background: transparent;
      overflow-anchor: none;
    }

    @media (max-width: 980px) {
      .widget-direct {
        height: 1600px;
        min-height: 1600px;
        max-height: 1600px;
      }
    }

    @media (max-width: 720px) {
      .widget-direct {
        height: 1800px;
        min-height: 1800px;
        max-height: 1800px;
      }
    }


    .faq-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 18px;
    }

    details {
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 18px 20px;
      box-shadow: 0 10px 28px rgba(4, 39, 66, 0.05);
    }

    summary {
      cursor: pointer;
      color: var(--navy);
      font-weight: 800;
      font-size: 1.04rem;
    }

    details p {
      margin: 14px 0 0;
      color: var(--muted);
      font-weight: 600;
      text-wrap: pretty;
    }

    .final-cta {
      background: var(--yellow);
      color: var(--navy);
      text-align: center;
      padding: 70px 0;
    }

    .final-cta h2 {
      max-width: 980px;
      margin-left: auto;
      margin-right: auto;
      color: var(--navy);
    }

    .final-cta p {
      max-width: 760px;
      margin: 0 auto 26px;
      color: var(--navy);
      font-weight: 800;
    }

    footer {
      background: #042742;
      color: rgba(255, 255, 255, 0.84);
      padding: 34px 0;
      font-size: 0.95rem;
    }

    .footer-inner {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 24px;
      align-items: center;
    }

    .footer-inner img {
      width: 116px;
      filter: brightness(0) invert(1);
    }

    .footer-inner p { margin: 0; }
    .mobile-sticky-cta { display: none; }
    @media (max-width: 980px) {
      .hero-grid,
      .quick-card,
      .split,
      .story-photo,
      .widget-layout {
        grid-template-columns: 1fr;
      }

      .widget-copy { position: static; }
      .hero-image-card { transform: none; }

      .card-grid,
      .steps,
      .faq-grid {
        grid-template-columns: 1fr;
      }
    }
/*
  TLC for Kids brand alignment v32:
  Colours: #059BD8, #F9ED2E, #2EC3E4, #F7D24F, #283679, #042742, #000000, #ffffff.
  Typography: Montserrat loaded from Google Fonts.
  Widget behaviour: unchanged from v31.
*/


.topbar .button-primary {
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
}

.topbar .button-primary:hover,
.topbar .button-primary:focus-visible {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22);
}


/* TLC v36 dual widget layout:
   Top widget is displayed after the hero.
   Bottom widget is displayed after the trust card and is the only #friend-widget anchor.
   Widget iframe loading remains user-intent based to prevent page snapping. */


/* v42 hero cleanup: remove decorative circle artwork. */
.hero {
  background: linear-gradient(135deg, #042742 0%, #059BD8 58%, #283679 100%) !important;
}

.hero:before,
.hero:after {
  display: none !important;
  content: none !important;
}


/* TLC v43 stable finite widget integration:
   Both widget iframes use fixed, capped heights and no external resize helper.
   This prevents runaway height growth and removes the resize loop that caused endless page length.
   overflow-anchor is disabled only around widget sections to reduce browser scroll anchoring jumps. */
.widget-section {
  overflow-anchor: none;
}

.widget-layout {
  min-width: 0;
}

.widget-direct {
  overscroll-behavior: contain;
}