{} *{} /*endBaseStyles*/
     


      #IE-warning {
        display: none;
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 9999;
        background: white;
      }
      .IE-warning-message {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
      }
    



 :root { --frost: #eef4f6; --ink: #12303e; --freezer: #1b6e93; --freezer-deep: #10465e; --ice: #cfe7ee; --fridge: #f0b45c; --drinks: #8fd6c5; --muted: #3c5a67; } * { box-sizing: border-box; } body { margin: 0; background: radial-gradient(1200px 600px at 85% -10%, #dcecf2 0%, transparent 60%), var(--frost); color: var(--ink); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; line-height: 1.55; } .shell { max-width: 960px; margin: 0 auto; padding: 0 20px; } /* ---------- header ---------- */ header { padding: 22px 0 0; display: flex; align-items: center; justify-content: space-between; } .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); } .split-mark { display: flex; height: 10px; width: 96px; border-radius: 6px; overflow: hidden; } .split-mark span:nth-child(1) { flex: 10; background: var(--drinks); } .split-mark span:nth-child(2) { flex: 25; background: var(--fridge); } .split-mark span:nth-child(3) { flex: 65; background: var(--freezer); } .brand strong { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 17px; letter-spacing: -.2px; } .header-cta { text-decoration: none; font-weight: 700; font-size: 14px; color: var(--ink); border: 2px solid var(--ink); border-radius: 999px; padding: 8px 16px; } .header-cta:hover { background: var(--ink); color: #fff; } /* ---------- hero ---------- */ .hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 36px; align-items: center; padding: 64px 0 56px; } .kicker { font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--freezer); margin-bottom: 14px; } h1 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: clamp(38px, 6.4vw, 62px); line-height: 1.02; letter-spacing: -1px; margin: 0 0 18px; } h1 em { font-style: normal; color: var(--freezer); } .lede { font-size: 18px; color: var(--muted); max-width: 46ch; margin: 0 0 28px; } .cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .cta { display: inline-block; text-decoration: none; background: var(--freezer-deep); color: #fff; font-weight: 700; font-size: 17px; padding: 15px 28px; border-radius: 14px; } .cta:hover { background: var(--freezer); } .cta-note { font-size: 13.5px; color: #6b8794; } .cta:focus-visible, .header-cta:focus-visible { outline: 3px solid var(--freezer); outline-offset: 2px; } /* hero visual: today vs proposed */ .visual { display: flex; gap: 22px; justify-content: center; } .unit { text-align: center; } .unit-caption { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-top: 10px; color: var(--muted); } .fridge-box { width: 132px; height: 236px; border: 3px solid var(--ink); border-radius: 14px; padding: 6px; display: flex; flex-direction: column; gap: 5px; background: #fff; } .seg { border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; } .seg-fridge { background: var(--fridge); color: #5c3a10; } .seg-freezer { background: var(--freezer); color: #eaf6fb; } .seg-drinks { background: var(--drinks); color: #0d3b3f; } .today .seg-fridge { flex: 65; } .today .seg-freezer { flex: 35; } .proposed .seg-drinks { flex: 10; } .proposed .seg-fridge { flex: 25; } .proposed .seg-freezer { flex: 65; } .arrow { align-self: center; font-size: 26px; color: var(--freezer); font-weight: 800; } /* ---------- sections ---------- */ section { padding: 30px 0; } .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .card { background: #fff; border-radius: 18px; padding: 24px 22px; box-shadow: 0 1px 0 rgba(18,48,62,.08), 0 8px 24px rgba(18,48,62,.05); } .card h3 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 600; font-size: 19px; margin: 0 0 8px; } .card p { font-size: 14.5px; color: var(--muted); margin: 0; } .chip { display: inline-flex; width: 34px; height: 34px; border-radius: 10px; margin-bottom: 12px; align-items: center; justify-content: center; font-size: 17px; } .chip-1 { background: var(--ice); } .chip-2 { background: #fbe8cd; } .chip-3 { background: #d9f2ea; } .how { background: #fff; border-radius: 22px; padding: 36px 32px; margin: 26px 0; box-shadow: 0 1px 0 rgba(18,48,62,.08), 0 8px 24px rgba(18,48,62,.05); } .how h2, .why h2 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: clamp(24px, 4vw, 32px); letter-spacing: -.4px; margin: 0 0 10px; } .how p { color: var(--muted); max-width: 62ch; } .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 22px; } .step { border-top: 3px solid var(--ice); padding-top: 12px; } .step b { display: block; font-size: 15px; margin-bottom: 4px; } .step span { font-size: 13.5px; color: var(--muted); } .step:nth-child(1) { border-color: var(--drinks); } .step:nth-child(2) { border-color: var(--fridge); } .step:nth-child(3) { border-color: var(--freezer); } .closer { text-align: center; padding: 46px 0 30px; } .closer h2 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: clamp(26px, 5vw, 40px); letter-spacing: -.6px; margin: 0 0 16px; } footer { padding: 26px 0 40px; text-align: center; font-size: 12.5px; color: #6b8794; } @media (max-width: 720px) { .hero { grid-template-columns: 1fr; padding: 44px 0 36px; text-align: center; } .lede { margin-left: auto; margin-right: auto; } .cta-row { justify-content: center; } .cards, .steps { grid-template-columns: 1fr; } .visual { margin-top: 8px; } } 

 /* Groove injects empty anchor elements into sections; stop them occupying grid cells */ section > a[data-gp-block-anchor] { display: none; }