/* ============================================================
     THEME  ·  EDIT FONTS, COLOURS & SIZES HERE
     Change a value once and it updates across the whole page.
     ============================================================ */
  :root{
    /* Fonts – to change a font, swap the name here AND update the
       Google Fonts <link> above to load it. */
    --font-display:'Fraunces',serif;        /* big headlines */
    --font-body:'Hanken Grotesk',sans-serif; /* everything else */

    /* Type scale – clamp(min, fluid, max). Bump these to resize headings. */
    --size-hero:clamp(2.9rem,6.2vw,5rem);
    --size-h2:clamp(2rem,4vw,3rem);
    --size-lead:1.3rem;
    --size-body:1.05rem;

    /* Colours */
    --yellow:#FFE600;
    --yellow-soft:#FFF06B;
    --ink:#0E1B2A;
    --ink-soft:#1f2d3d;
    --fmc-blue:#1B4D6B;
    --fmc-blue-deep:#143b52;
    --blue:#477BE2;        /* action/accent blue – buttons & links/labels on white */
    --blue-deep:#3461C0;   /* darker blue – button hover / stronger contrast */
    --paper:#FFFDF5;
    --coral:#FF6B5C;
    --mint:#16B98B;
    --shadow:rgba(14,27,42,.16);

    /* Organisation band ("Why it fits…") accents — SEPARATE from --yellow so
       they can be controlled independently of the card yellow. Default to the
       same value, but are their own source (Admin → Organisation band accents).
       Overridable at runtime via landing_config (render.ts themeOverride). */
    --accent-chip:#FFE600;        /* icon-tile background */
    --accent-chip-glyph:#0E1B2A;  /* icon glyph (stroke) */
    --accent-emphasis:#FFE600;    /* eyebrow label + inline-bold emphasis */
  }

  /* ---- Layout & base (design – usually leave this alone) ---- */
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    font-family:var(--font-body);
    color:var(--ink);
    background:var(--paper);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  .wrap{max-width:1180px;margin:0 auto;padding:0 28px}
  h1,h2,h3{font-family:var(--font-display);line-height:1.04;letter-spacing:-.01em}

  /* ---------- NAV ---------- */
  nav{position:sticky;top:0;z-index:50;background:var(--yellow);border-bottom:3px solid var(--ink)}
  .nav-in{display:flex;align-items:center;justify-content:space-between;height:72px;gap:14px}
  .brand{display:flex;align-items:center;gap:11px;font-family:var(--font-display);font-weight:900;font-size:1.4rem;letter-spacing:-.02em}
  .brand .dot{width:30px;height:30px;border-radius:9px;background:var(--ink);position:relative;flex:none}
  .brand .dot::before{content:"";position:absolute;inset:7px;border-radius:4px;background:var(--yellow)}
  .nav-links{display:flex;align-items:center;gap:18px}
  .nav-link{font-family:var(--font-body);font-weight:700;font-size:.95rem;color:var(--ink);text-decoration:none;white-space:nowrap}
  .nav-link:hover{text-decoration:underline}
  .nav-cta{
    background:var(--blue);color:#fff;
    font-family:var(--font-body);font-weight:700;font-size:.95rem;
    padding:11px 22px;border-radius:40px;text-decoration:none;
    transition:transform .2s ease, background .2s ease;white-space:nowrap;
  }
  .nav-cta:hover{transform:translateY(-2px);background:var(--blue-deep)}
  .nav-ghost{
    background:transparent;color:var(--ink);border:2px solid var(--ink);
    font-family:var(--font-body);font-weight:700;font-size:.95rem;
    padding:9px 18px;border-radius:40px;text-decoration:none;
    transition:transform .2s ease, background .2s ease, color .2s ease;white-space:nowrap;
  }
  .nav-ghost:hover{transform:translateY(-2px);background:var(--ink);color:#fff}
  .brand-logo{height:46px;width:auto;display:block;filter:drop-shadow(3px 4px 0 rgba(14,27,42,.25))}
  .foot-logo{height:52px;width:auto;display:block;filter:drop-shadow(3px 4px 0 rgba(14,27,42,.3))}

  /* ---------- HERO ---------- */
  .hero{background:var(--yellow);position:relative;overflow:hidden;padding:90px 0 120px}
  .hero::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:60px;background:var(--paper);clip-path:polygon(0 100%,100% 100%,100% 0,0 60%)}
  .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center;position:relative;z-index:2}
  .eyebrow{display:inline-flex;align-items:center;gap:9px;background:var(--blue-deep);color:#fff;font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;padding:7px 16px;border-radius:30px;margin-bottom:26px}
  .eyebrow .pulse{width:8px;height:8px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 0 var(--coral);animation:pulse 2.2s infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,107,92,.6)}70%{box-shadow:0 0 0 9px rgba(255,107,92,0)}100%{box-shadow:0 0 0 0 rgba(255,107,92,0)}}
  .hero h1{font-size:var(--size-hero);font-weight:900;color:var(--ink)}
  .hero h1 em{font-style:italic;font-weight:500}
  .hero .lead{font-size:var(--size-lead);font-weight:500;margin:26px 0 14px;max-width:30ch;color:var(--ink-soft)}
  .hero .sub{font-size:var(--size-body);color:var(--ink-soft);max-width:38ch;opacity:.85}
  .hero-ctas{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap}
  .hero-indiv{margin-top:18px;font-weight:600;color:var(--ink-soft)}
  .hero-indiv a{color:var(--blue);font-weight:700;text-decoration:underline}
  .btn-primary{background:var(--blue);color:#fff;font-weight:700;font-size:1.02rem;padding:16px 30px;border-radius:46px;text-decoration:none;transition:transform .2s ease,background .2s ease;display:inline-flex;align-items:center;justify-content:center;text-align:center}
  .btn-primary:hover{transform:translateY(-3px);background:var(--blue-deep)}
  .btn-ghost{background:transparent;color:var(--blue);font-weight:700;font-size:1.02rem;padding:16px 28px;border-radius:46px;text-decoration:none;border:2.5px solid var(--blue);transition:background .2s ease,color .2s ease;display:inline-flex;align-items:center;justify-content:center;text-align:center}
  .btn-ghost:hover{background:var(--blue);color:#fff}

  /* ---------- CARD MOCK ---------- */
  .cardmock{position:relative;aspect-ratio:1.6/1;background:var(--yellow-soft);border:3px solid var(--ink);border-radius:22px;box-shadow:14px 14px 0 var(--ink);padding:26px;display:flex;flex-direction:column;justify-content:space-between;transform:rotate(3deg);transition:transform .35s ease}
  .cardmock:hover{transform:rotate(0deg) scale(1.02)}
  .cardmock .cm-top{display:flex;justify-content:space-between;align-items:flex-start}
  .cm-logo{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:900;font-size:1rem;color:var(--blue)}
  .cm-logo img{height:26px;width:auto;display:block}
  .cm-qr{width:96px;height:96px;border-radius:10px;align-self:center;background:linear-gradient(var(--ink) 2px,transparent 2px) 0 0/100% 11px,linear-gradient(90deg,var(--ink) 2px,transparent 2px) 0 0/11px 100%;background-color:#fff;border:6px solid #fff;outline:3px solid var(--ink);position:relative}
  .cm-qr::before,.cm-qr::after{content:"";position:absolute;width:26px;height:26px;border:5px solid var(--ink);background:#fff}
  .cm-qr::before{top:4px;left:4px}.cm-qr::after{top:4px;right:4px}
  .cm-scan{text-align:center;font-family:var(--font-display);font-weight:900;font-size:1.15rem;color:var(--ink)}
  .cm-code{text-align:center;font-weight:700;letter-spacing:.05em;font-size:.92rem;color:var(--ink-soft)}
  .cm-tag{font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:var(--ink);text-align:center}

  /* ---------- TRUST STRIP ---------- */
  .strip{background:var(--paper);padding:36px 0 46px}
  .strip-in{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;align-items:center}
  .chip{display:inline-flex;align-items:center;gap:9px;background:#fff;border:2px solid var(--ink);border-radius:40px;padding:10px 20px;font-weight:600;font-size:.95rem;box-shadow:4px 4px 0 var(--shadow)}
  .chip svg{flex:none}

  /* ---------- SECTION SHELL ---------- */
  section{padding:84px 0}
  .sec-head{max-width:46ch;margin-bottom:54px}
  .sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
  .sec-tag{font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.82rem;color:var(--blue-deep);margin-bottom:14px}
  .sec-head h2{font-size:var(--size-h2);font-weight:900}
  .sec-head p{font-size:1.15rem;color:var(--ink-soft);margin-top:18px}

  /* ---------- FIT (why orgs) ---------- */
  .fit{background:var(--blue);color:#fff;clip-path:polygon(0 48px,100% 0,100% 100%,0 100%)}
  .fit .sec-tag{color:var(--accent-emphasis)}
  .fit .sec-head h2{color:#fff}
  .fit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
  .fit-card{background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.16);border-radius:20px;padding:34px 30px;transition:transform .25s ease,background .25s ease}
  .fit-card:hover{transform:translateY(-6px);background:rgba(255,255,255,.1)}
  .fit-ic{width:54px;height:54px;border-radius:14px;background:var(--accent-chip);color:var(--accent-chip-glyph);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
  .fit-ic svg [stroke]{stroke:var(--accent-chip-glyph)}
  .fit-card h3{font-size:1.35rem;font-weight:600;margin-bottom:12px;color:#fff}
  .fit-card p{color:rgba(255,255,255,.9);font-size:1.02rem}
  .fit-card strong{color:var(--accent-emphasis);font-weight:700}
  .fit-note{max-width:42ch;margin:48px auto 0;text-align:center;font-family:var(--font-display);font-weight:600;font-size:1.5rem;line-height:1.32;color:#fff}
  .fit-note strong{color:var(--accent-emphasis);font-weight:700}

  /* ---------- SUPPORT (carer relationship + Questions feature) ---------- */
  .support{background:var(--yellow)}
  .support-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:58px;align-items:center}
  .support .sec-tag{color:var(--blue-deep)}
  .support h2{font-size:var(--size-h2);font-weight:900;color:var(--ink)}
  .support h2 em{font-style:italic;font-weight:500}
  .support .lead{font-size:1.16rem;line-height:1.5;color:var(--ink-soft);margin-top:20px;max-width:46ch}
  .support .lead em{font-style:normal;font-weight:700;color:var(--ink)}
  .support-feature{margin-top:28px;background:#fff;border:3px solid var(--ink);border-radius:18px;box-shadow:8px 8px 0 var(--ink);padding:22px 24px;display:flex;gap:16px;align-items:flex-start;max-width:48ch}
  .support-feature .sf-ic{flex:none;width:46px;height:46px;border-radius:12px;background:var(--yellow);border:2.5px solid var(--ink);display:flex;align-items:center;justify-content:center}
  .support-feature h3{font-size:1.14rem;font-weight:700;margin-bottom:5px}
  .support-feature p{color:var(--ink-soft);font-size:1rem}
  .support-cta{margin-top:32px}
  .support-indiv{margin-top:18px;font-weight:600;color:var(--ink-soft)}
  .support-indiv a{color:var(--blue-deep);font-weight:700;text-decoration:underline}
  .support-visual{display:flex;justify-content:center}
  .support-shot{width:100%;max-width:330px;height:auto;border:3px solid var(--ink);border-radius:30px;box-shadow:14px 14px 0 var(--ink);background:#fff;display:block}

  /* ---------- WHAT CARER GETS ---------- */
  .gets-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center}
  .gets-list{list-style:none;display:flex;flex-direction:column;gap:4px}
  .gets-list li{display:flex;gap:18px;padding:20px 0;border-bottom:2px dashed rgba(14,27,42,.16);align-items:flex-start}
  .gets-list li:last-child{border-bottom:none}
  .gets-num{font-family:var(--font-display);font-weight:900;font-size:1.3rem;color:var(--fmc-blue);flex:none;width:42px;height:42px;border-radius:50%;background:var(--yellow);display:flex;align-items:center;justify-content:center}
  .gets-list h3{font-size:1.2rem;font-weight:600;margin-bottom:3px}
  .gets-list p{color:var(--ink-soft);font-size:1rem}
  .gets-visual{background:var(--yellow);border:3px solid var(--ink);border-radius:24px;box-shadow:12px 12px 0 var(--ink);padding:44px 38px}
  .gets-visual .big{font-family:var(--font-display);font-weight:900;font-size:2.6rem;line-height:1.05;color:var(--ink)}
  .gets-visual .big em{font-style:italic;font-weight:500}
  .gets-visual .lifeline{margin-top:8px;font-weight:600;color:var(--ink-soft)}
  .gets-visual .price{margin-top:26px;display:flex;align-items:baseline;gap:10px}
  .gets-visual .price .amt{font-family:var(--font-display);font-weight:900;font-size:2.2rem;color:var(--ink)}
  .gets-visual .price .note{font-weight:700;color:var(--ink-soft)}

  /* ---------- SCREENSHOTS / SEE IT ---------- */
  .see{background:var(--paper)}
  .shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px;align-items:start;max-width:760px;margin:0 auto}
  .shot{width:100%;height:auto;border:3px solid var(--ink);border-radius:26px;box-shadow:12px 12px 0 var(--ink);background:var(--yellow-soft)}
  .pdfwrap{margin-top:54px;display:grid;grid-template-columns:.8fr 1fr;gap:44px;align-items:center}
  .pdfwrap .pdf-img{width:100%;height:auto;border:3px solid var(--ink);border-radius:12px;box-shadow:10px 10px 0 var(--ink)}
  .pdfwrap h3{font-size:1.6rem;font-weight:600;margin-bottom:12px}
  .pdfwrap p{color:var(--ink-soft);margin-bottom:22px}
  .incl{margin:0 0 26px}
  .incl-title{font-weight:700;font-size:.95rem;color:var(--ink);margin-bottom:12px}
  .incl-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:9px 20px}
  .incl-list li{display:flex;gap:9px;align-items:center;font-size:.98rem;color:var(--ink-soft)}
  .incl-list li::before{content:"✓";color:var(--blue);font-weight:900;flex:none}

  /* ---------- HOW ---------- */
  .how{background:#fff;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)}
  .how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:20px}
  .how-step{padding:34px 30px;position:relative}
  .how-step:not(:last-child){border-right:2px dashed rgba(14,27,42,.18)}
  .how-step .n{font-family:var(--font-display);font-weight:900;font-size:1.1rem;color:var(--ink);background:var(--yellow);width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2.5px solid var(--ink);margin-bottom:18px}
  .how-step h3{font-size:1.3rem;font-weight:600;margin-bottom:10px}
  .how-step p{color:var(--ink-soft)}
  .how-foot{text-align:center;margin-top:44px;font-family:var(--font-display);font-weight:600;font-size:1.3rem;color:var(--blue)}

  /* ---------- PRICING ---------- */
  .pricing{background:var(--paper)}
  .price-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;align-items:stretch}
  .price-card{background:#fff;border:3px solid var(--ink);border-radius:24px;padding:40px 36px;box-shadow:10px 10px 0 var(--ink);display:flex;flex-direction:column}
  .price-card.feature{background:var(--yellow)}
  .price-kind{font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.82rem;color:var(--blue-deep);margin-bottom:14px}
  .price-card.feature .price-kind{color:var(--ink-soft)}
  .price-amt{font-family:var(--font-display);font-weight:900;font-size:3rem;line-height:1;color:var(--ink)}
  .price-amt .per{font-family:var(--font-body);font-size:1rem;font-weight:700;color:var(--ink-soft)}
  .price-sub{font-weight:600;color:var(--ink-soft);margin:14px 0 22px}
  .price-list{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:30px}
  .price-list li{display:flex;gap:10px;align-items:flex-start;font-size:1rem;color:var(--ink-soft)}
  .price-list li::before{content:"✓";color:var(--mint);font-weight:900;flex:none}
  .price-card .buy-btn{margin-top:auto;text-align:center}

  /* ---------- FINAL CTA ---------- */
  .final{background:var(--yellow);text-align:center;padding:100px 0}
  .final h2{font-size:clamp(2.4rem,5vw,4rem);font-weight:900;color:var(--ink)}
  .final h2 em{font-style:italic;font-weight:500}
  .final p{font-size:1.2rem;color:var(--ink-soft);margin:22px auto 38px;max-width:44ch}
  .final .btn-primary{font-size:1.15rem;padding:19px 42px}
  .final .small-or{margin-top:20px;font-weight:600;color:var(--ink-soft)}
  .final .small-or a{color:var(--blue-deep);font-weight:700;text-decoration:underline}

  /* ---------- FOOTER ---------- */
  footer{background:var(--blue);color:rgba(255,255,255,.85);padding:46px 0;font-size:.92rem}
  .foot-in{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px}
  .foot-brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:900;color:#fff;font-size:1.15rem}
  .foot-brand .dot{width:26px;height:26px;border-radius:7px;background:var(--yellow);position:relative}
  .foot-brand .dot::before{content:"";position:absolute;inset:6px;border-radius:3px;background:var(--ink)}
  footer a{color:var(--yellow);text-decoration:none}

  /* ---------- REVEAL ANIMATION ---------- */
  .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
  .reveal.in{opacity:1;transform:none}

  /* ---------- RESPONSIVE ---------- */
  @media(max-width:900px){
    .hero-grid,.gets-grid,.eco-box,.pdfwrap,.support-grid{grid-template-columns:1fr;gap:42px}
    .support-visual{order:-1}
    .fit-grid,.how-grid,.price-grid{grid-template-columns:1fr}
    .how-step:not(:last-child){border-right:none;border-bottom:2px dashed rgba(14,27,42,.18)}
    .cardmock{transform:rotate(2deg);max-width:420px;margin:0 auto}
    .nav-links{gap:12px}
  }
  @media(max-width:520px){
    .wrap{padding:0 20px}
    .nav-cta{padding:9px 16px;font-size:.85rem}
    .nav-ghost{padding:8px 14px;font-size:.85rem}
    .nav-link{display:none}        /* hide the text link on tiny screens, keep the button */
    .hero{padding:60px 0 90px}
    section{padding:60px 0}
  }
  @media(max-width:370px){
    /* very small phones: shrink the logo + both nav buttons so the
       "My Care Card" + "Partner with us" pills don't overflow. */
    .wrap{padding:0 14px}
    .nav-links{gap:8px}
    .brand-logo{height:36px}
    .nav-cta{padding:8px 12px;font-size:.78rem}
    .nav-ghost{padding:7px 11px;font-size:.78rem}
  }

  /* ---------- FAQ ---------- */
  .faq{background:var(--paper)}
  .faq-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
  .faq-item{background:#fff;border:2px solid var(--ink);border-radius:20px;overflow:hidden}
  .faq-item summary{list-style:none;cursor:pointer;padding:20px 24px;font-family:var(--font-body);font-weight:700;font-size:1.08rem;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:16px}
  .faq-item summary::-webkit-details-marker{display:none}
  .faq-item summary::after{content:'+';font-weight:700;font-size:1.5rem;line-height:1;color:var(--blue);transition:transform .2s ease}
  .faq-item[open] summary::after{transform:rotate(45deg)}
  .faq-a{padding:0 24px 22px;color:var(--ink-soft);font-size:var(--size-body);line-height:1.65}
  .faq-a p{margin:0}