{} *{} {}
     


      #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; } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; background: radial-gradient(1100px 500px 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; padding: 24px 16px 80px; } .shell { max-width: 680px; margin: 0 auto; } .masthead { margin: 24px 4px 28px; } .split-mark { display: flex; height: 10px; width: 132px; border-radius: 6px; overflow: hidden; margin-bottom: 18px; } .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); } h1 { font-family: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif; font-weight: 800; font-size: clamp(30px, 6vw, 44px); line-height: 1.05; margin: 0 0 10px; letter-spacing: -0.5px; } .tagline { font-size: 16px; line-height: 1.55; max-width: 54ch; color: #33525f; margin: 0; } .card { background: #fff; border-radius: 18px; padding: 24px 22px; margin-bottom: 18px; box-shadow: 0 1px 0 rgba(18,48,62,.08), 0 8px 24px rgba(18,48,62,.05); } .eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--freezer); margin-bottom: 6px; } h2 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 600; font-size: 24px; margin: 0 0 8px; } .intro { font-size: 15px; line-height: 1.55; color: #3c5a67; margin: 0 0 12px; } .diagram-wrap { display: flex; justify-content: center; margin: 8px 0 16px; } .q { margin: 20px 0 0; padding: 2px 6px; border-radius: 10px; } .q-missing { background: #fdeeee; outline: 2px solid #d76a6a; } .q-label { display: block; font-weight: 600; font-size: 15.5px; margin-bottom: 10px; line-height: 1.4; } .optional { font-weight: 400; color: #6b8794; font-size: 13px; } .opts { display: flex; flex-wrap: wrap; gap: 8px; } .opt { border: 1.5px solid #b9cfd8; background: #f6fafb; color: var(--ink); padding: 8px 14px; border-radius: 999px; font-size: 14px; cursor: pointer; font-family: inherit; transition: background 120ms ease, border-color 120ms ease; } .opt:hover { border-color: var(--freezer); } .opt:focus-visible, .submit:focus-visible { outline: 3px solid var(--freezer); outline-offset: 2px; } .opt-on { background: var(--freezer); border-color: var(--freezer); color: #fff; font-weight: 600; } textarea { width: 100%; border: 1.5px solid #b9cfd8; border-radius: 10px; padding: 10px 12px; font-size: 15px; font-family: inherit; background: #f6fafb; color: var(--ink); resize: vertical; } textarea:focus { outline: none; border-color: var(--freezer); } .submit { width: 100%; padding: 15px; border-radius: 14px; border: none; background: var(--freezer-deep); color: #fff; font-size: 17px; font-weight: 700; cursor: pointer; font-family: inherit; } .submit:hover { background: var(--freezer); } .submit:disabled { opacity: .6; cursor: default; } .fineprint { text-align: center; font-size: 12.5px; color: #6b8794; margin-top: 10px; } .err { background: #fdeeee; border: 1.5px solid #d76a6a; color: #7a2323; border-radius: 10px; padding: 10px 14px; font-size: 14px; margin-bottom: 12px; display: none; } .thanks { text-align: center; padding: 60px 10px; display: none; } .thanks h2 { font-size: 30px; } .hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; } @media (prefers-reduced-motion: reduce) { .opt { transition: none; } }