/* Approved Main.dc.html styles, extracted into reusable classes for CSP. */
@font-face {font-family: 'Archivo'; src: url('/css/fonts/Archivo-Variable.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;}
@font-face {font-family: 'Titan One'; src: url('/css/fonts/TitanOne-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap;}

body{margin:0;background:#FDF3DE;color:#0F1E3D;font-family:'Archivo','Helvetica Neue',Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:#024291}a:hover{color:#B3240B}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid #EC2F11;outline-offset:3px}
@keyframes mos-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mos-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes mos-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.mos-track-on{animation:mos-marquee 46s linear infinite}
.mos-float-on{animation:mos-float 5s ease-in-out infinite}
.mos-spin-on{animation:mos-spin 28s linear infinite}
.mos-btn{transition:transform .12s ease,box-shadow .12s ease}
.mos-btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 #0F1E3D !important}
.mos-btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 #0F1E3D !important}
.mos-card{transition:transform .2s ease}
.mos-card:hover{transform:translateY(-6px) rotate(-.5deg)}
.mos-nav:hover{background:#024291;color:#FDF3DE}
.mos-field:focus{outline:none;box-shadow:5px 5px 0 #EC2F11 !important}
@media (prefers-reduced-motion: reduce){.mos-track-on,.mos-float-on,.mos-spin-on{animation:none}}

.page-1 { width: 100%; background: #FDF3DE; color: #0F1E3D; overflow: hidden; }
.ticker-1 { background: #024291; color: #FDF3DE; height: 44px; display: flex; align-items: center; overflow: hidden; }
.ticker-2 { display: flex; width: max-content; white-space: nowrap; }
.ticker-3 { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 26px; border-right: 2px dashed #3767AE; font-stretch: 125%; font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.ticker-4 { color: #EC2F11; font-weight: 900; }
.ticker-5 { color: #FFB4A3; font-weight: 900; }
.header-1 { background: #FDF3DE; border-bottom: 3px solid #0F1E3D; }
.header-2 { max-width: 1320px; margin: 0 auto; padding: 14px 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.header-3 { display: flex; align-items: center; flex: none; }
.header-4 { height: 52px; width: auto; display: block; }
.header-5 { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 auto; }
.header-6 { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; text-decoration: none; color: #0F1E3D; font-stretch: 125%; font-weight: 800; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; }
.header-7 { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 20px; background: #D22A0F; color: #FFFAEF; border: 3px solid #0F1E3D; border-radius: 14px; box-shadow: 4px 4px 0 #0F1E3D; text-decoration: none; font-stretch: 125%; font-weight: 900; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; }
.hero-1 { position: relative; }
.hero-2 { max-width: 1320px; margin: 0 auto; padding: 72px 32px 104px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(500px, 100%), 1fr)); gap: 64px 56px; align-items: center; }
.hero-3 { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.hero-4 { display: inline-flex; align-self: flex-start; flex-wrap: wrap; align-items: center; gap: 10px; background: #024291; color: #FDF3DE; border-radius: 999px; padding: 6px 16px 6px 6px; }
.hero-5 { background: #EC2F11; color: #FFFAEF; border-radius: 999px; padding: 5px 11px; font-stretch: 125%; font-weight: 900; font-size: 11px; letter-spacing: .08em; }
.hero-6 { font-stretch: 125%; font-weight: 800; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.hero-7 { margin: 0; font-family: 'Titan One', 'Arial Rounded MT Bold', sans-serif; font-weight: 400; font-size: clamp(48px, 5.8vw, 88px); line-height: 1.02; letter-spacing: -.005em; -webkit-text-stroke: 3px #0F1E3D; paint-order: stroke fill; text-shadow: 2px 2px 0 #0F1E3D, 3px 3px 0 #0F1E3D, 4px 4px 0 #0F1E3D, 5px 5px 0 #0F1E3D, 6px 6px 0 #0F1E3D, 7px 7px 0 #0F1E3D; text-wrap: balance; }
.hero-8 { color: #FFFAEF; }
.hero-9 { color: #EC2F11; }
.hero-10 { color: #2B6CC4; }
.hero-11 { margin: 0; max-width: 560px; font-size: 19px; line-height: 1.55; font-weight: 500; color: #2C3858; text-wrap: pretty; }
.hero-12 { display: flex; flex-wrap: wrap; gap: 16px; }
.hero-13 { display: inline-flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 28px; background: #D22A0F; color: #FFFAEF; border: 3px solid #0F1E3D; border-radius: 18px; box-shadow: 6px 6px 0 #0F1E3D; text-decoration: none; font-stretch: 125%; font-weight: 900; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; }
.hero-14 { display: inline-flex; align-items: center; min-height: 60px; padding: 0 26px; background: #FFFAEF; color: #0F1E3D; border: 3px solid #0F1E3D; border-radius: 18px; box-shadow: 6px 6px 0 #0F1E3D; text-decoration: none; font-stretch: 125%; font-weight: 900; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; }
.hero-15 { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.hero-16 { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
.hero-art-1 { position: relative; width: 100%; max-width: 600px; aspect-ratio: 1 / 1; justify-self: center; }
.hero-art-2 { position: absolute; inset: 0; border: 3px solid #0F1E3D; border-radius: 40px; box-shadow: 14px 14px 0 #024291; overflow: hidden; background: radial-gradient(rgba(2,66,145,.14) 1.8px, transparent 2.1px) 0 0 / 14px 14px, #FDF3DE; }
.hero-art-3 { position: absolute; left: 50%; top: 47%; width: 82%; height: auto; transform: translate(-50%, -50%); mix-blend-mode: multiply; }
.hero-art-4 { position: absolute; left: 0; right: 0; bottom: 0; height: 46px; background: #0F1E3D; color: #FDF3DE; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-stretch: 125%; font-weight: 800; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.stickers-1 { position: absolute; top: -22px; left: -26px; transform: rotate(-12deg); }
.stickers-2 { position: relative; width: 112px; height: 112px; border-radius: 50%; background: #EC2F11; color: #FFFAEF; border: 3px solid #0F1E3D; box-shadow: 5px 5px 0 #0F1E3D; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.stickers-3 { position: absolute; inset: 7px; border: 2px dashed #FFFAEF; border-radius: 50%; }
.stickers-4 { font-family: 'Titan One', sans-serif; font-size: 22px; line-height: 1; }
.stickers-5 { font-stretch: 125%; font-weight: 800; font-size: 9px; letter-spacing: .12em; }
.stickers-6 { position: absolute; top: 22%; right: -30px; transform: rotate(10deg); }
.stickers-7 { position: relative; width: 100px; height: 100px; border-radius: 50%; background: #FFFAEF; border: 3px solid #0F1E3D; box-shadow: 5px 5px 0 #0F1E3D; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; animation-delay: 1.1s; }
.stickers-8 { position: absolute; inset: 7px; border: 2px dashed #0F1E3D; border-radius: 50%; }
.stickers-9 { font-family: 'Titan One', sans-serif; font-size: 20px; line-height: 1; color: #024291; }
.stickers-10 { position: absolute; bottom: 18%; left: -32px; transform: rotate(8deg); }
.stickers-11 { position: relative; width: 100px; height: 100px; border-radius: 50%; background: #024291; color: #FFFAEF; border: 3px solid #0F1E3D; box-shadow: 5px 5px 0 #0F1E3D; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; animation-delay: 2.2s; }
.stickers-12 { font-family: 'Titan One', sans-serif; font-size: 20px; line-height: 1; }
.stickers-13 { position: absolute; bottom: -24px; right: 8%; transform: rotate(-6deg); }
.stickers-14 { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; background: #FFFAEF; border: 3px solid #0F1E3D; box-shadow: 5px 5px 0 #EC2F11; font-family: 'Titan One', sans-serif; font-size: 19px; color: #0F1E3D; animation-delay: .6s; }
.stickers-15 { height: 30px; background: repeating-conic-gradient(#024291 0% 25%, #FDF3DE 0% 50%) 0 0 / 30px 30px; border-top: 3px solid #0F1E3D; border-bottom: 3px solid #0F1E3D; }
.apps-1 { background: radial-gradient(rgba(15,30,61,.16) 1.6px, transparent 1.9px) 0 0 / 14px 14px, #EC2F11; border-bottom: 3px solid #0F1E3D; }
.apps-2 { max-width: 1320px; margin: 0 auto; padding: 56px 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px 48px; }
.apps-3 { display: flex; flex-direction: column; gap: 10px; max-width: 500px; }
.apps-4 { font-stretch: 125%; font-weight: 900; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #FFFAEF; }
.apps-5 { margin: 0; font-family: 'Titan One', sans-serif; font-weight: 400; font-size: clamp(34px, 3.4vw, 48px); line-height: 1.04; color: #FFFAEF; -webkit-text-stroke: 2px #0F1E3D; paint-order: stroke fill; text-shadow: 2px 2px 0 #0F1E3D, 3px 3px 0 #0F1E3D, 4px 4px 0 #0F1E3D; text-wrap: balance; }
.apps-6 { margin: 0; font-size: 15px; line-height: 1.5; font-weight: 600; color: #FFFAEF; }
.apps-7 { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 16px; max-width: 680px; }
.apps-8 { display: flex; align-items: center; gap: 12px; padding: 7px 20px 7px 7px; background: #FFFAEF; border: 3px solid #0F1E3D; border-radius: 999px; box-shadow: 4px 4px 0 #0F1E3D; transform: rotate(-3deg); }
.apps-9 { width: 46px; height: 46px; border-radius: 50%; background: #EC2F11; color: #FFFAEF; border: 3px solid #0F1E3D; display: flex; align-items: center; justify-content: center; font-family: 'Titan One', sans-serif; font-size: 20px; }
.apps-10 { display: flex; flex-direction: column; line-height: 1.1; }
.apps-11 { font-family: 'Titan One', sans-serif; font-size: 20px; }
.apps-12 { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #B3240B; }
.apps-13 { display: flex; align-items: center; gap: 12px; padding: 7px 20px 7px 7px; background: #FFFAEF; border: 3px solid #0F1E3D; border-radius: 999px; box-shadow: 4px 4px 0 #0F1E3D; transform: rotate(2deg); }
.apps-14 { width: 46px; height: 46px; border-radius: 50%; background: #024291; color: #FFFAEF; border: 3px solid #0F1E3D; display: flex; align-items: center; justify-content: center; font-family: 'Titan One', sans-serif; font-size: 20px; }
.apps-15 { display: flex; align-items: center; gap: 12px; padding: 7px 20px 7px 7px; background: #FFFAEF; border: 3px solid #0F1E3D; border-radius: 999px; box-shadow: 4px 4px 0 #0F1E3D; transform: rotate(-1.5deg); }
.apps-16 { width: 46px; height: 46px; border-radius: 50%; background: #FDF3DE; color: #0F1E3D; border: 3px solid #0F1E3D; display: flex; align-items: center; justify-content: center; font-family: 'Titan One', sans-serif; font-size: 20px; }
.apps-17 { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #4A5470; }
.apps-18 { display: flex; align-items: center; gap: 12px; padding: 7px 20px 7px 7px; background: #FFFAEF; border: 3px solid #0F1E3D; border-radius: 999px; box-shadow: 4px 4px 0 #0F1E3D; transform: rotate(2.5deg); }
.apps-19 { display: flex; align-items: center; gap: 12px; padding: 7px 20px 7px 7px; background: #FFFAEF; border: 3px solid #0F1E3D; border-radius: 999px; box-shadow: 4px 4px 0 #0F1E3D; transform: rotate(-2deg); }
.apps-20 { display: flex; align-items: center; gap: 12px; padding: 7px 20px 7px 7px; background: #FFFAEF; border: 3px solid #0F1E3D; border-radius: 999px; box-shadow: 4px 4px 0 #0F1E3D; transform: rotate(1.5deg); }
.how-it-works-1 { background: radial-gradient(rgba(253,243,222,.08) 1.6px, transparent 1.9px) 0 0 / 14px 14px, #024291; color: #FDF3DE; position: relative; }
.how-it-works-2 { position: relative; max-width: 1320px; margin: 0 auto; padding: 110px 32px 120px; display: flex; flex-direction: column; gap: 56px; }
.how-it-works-3 { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.how-it-works-4 { font-stretch: 125%; font-weight: 900; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #FFB4A3; }
.how-it-works-5 { margin: 0; font-family: 'Titan One', sans-serif; font-weight: 400; font-size: clamp(44px, 5vw, 72px); line-height: 1; color: #FFFAEF; text-shadow: 2px 2px 0 #EC2F11, 3px 3px 0 #EC2F11, 4px 4px 0 #EC2F11, 5px 5px 0 #EC2F11, 6px 6px 0 #EC2F11; text-wrap: balance; }
.how-it-works-6 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 36px; }
.how-it-works-7 { background: #FDF3DE; color: #0F1E3D; border: 3px solid #0F1E3D; border-radius: 30px; overflow: hidden; display: flex; flex-direction: column; transform: rotate(-1.5deg); box-shadow: 10px 10px 0 #EC2F11; }
.how-it-works-8 { position: relative; border-bottom: 3px solid #0F1E3D; display: flex; justify-content: center; padding: 24px 24px 12px; background: #FDF3DE; }
.how-it-works-9 { width: 62%; height: auto; display: block; mix-blend-mode: multiply; }
.how-it-works-10 { position: absolute; top: 14px; left: 18px; font-family: 'Titan One', sans-serif; font-size: 64px; line-height: .9; color: #EC2F11; -webkit-text-stroke: 3px #0F1E3D; paint-order: stroke fill; text-shadow: 3px 3px 0 #0F1E3D, 5px 5px 0 #0F1E3D; }
.how-it-works-11 { padding: 24px 28px 30px; display: flex; flex-direction: column; gap: 12px; }
.how-it-works-12 { margin: 0; font-family: 'Titan One', sans-serif; font-weight: 400; font-size: 27px; line-height: 1.08; }
.how-it-works-13 { margin: 0; font-size: 16px; line-height: 1.5; font-weight: 600; color: #2C3858; }
.how-it-works-14 { background: #FDF3DE; color: #0F1E3D; border: 3px solid #0F1E3D; border-radius: 30px; overflow: hidden; display: flex; flex-direction: column; transform: rotate(1deg); box-shadow: 10px 10px 0 #FFFAEF; }
.how-it-works-15 { width: 64%; height: auto; display: block; mix-blend-mode: multiply; }
.how-it-works-16 { position: absolute; top: 14px; left: 18px; font-family: 'Titan One', sans-serif; font-size: 64px; line-height: .9; color: #2B6CC4; -webkit-text-stroke: 3px #0F1E3D; paint-order: stroke fill; text-shadow: 3px 3px 0 #0F1E3D, 5px 5px 0 #0F1E3D; }
.how-it-works-17 { background: #FDF3DE; color: #0F1E3D; border: 3px solid #0F1E3D; border-radius: 30px; overflow: hidden; display: flex; flex-direction: column; transform: rotate(-.8deg); box-shadow: 10px 10px 0 #EC2F11; }
.how-it-works-18 { position: absolute; top: 14px; left: 18px; font-family: 'Titan One', sans-serif; font-size: 64px; line-height: .9; color: #FFFAEF; -webkit-text-stroke: 3px #0F1E3D; paint-order: stroke fill; text-shadow: 3px 3px 0 #0F1E3D, 5px 5px 0 #0F1E3D; }
.how-it-works-19 { height: 30px; background: repeating-conic-gradient(#0F1E3D 0% 25%, #FDF3DE 0% 50%) 0 0 / 30px 30px; border-top: 3px solid #0F1E3D; border-bottom: 3px solid #0F1E3D; }
.what-you-get-1 { background: #FDF3DE; }
.what-you-get-2 { max-width: 1320px; margin: 0 auto; padding: 104px 32px 112px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(480px, 100%), 1fr)); gap: 56px; align-items: center; }
.what-you-get-3 { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.what-you-get-4 { display: flex; flex-direction: column; gap: 8px; }
.what-you-get-5 { font-stretch: 125%; font-weight: 900; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #B3240B; }
.what-you-get-6 { margin: 0; font-family: 'Titan One', sans-serif; font-weight: 400; font-size: clamp(52px, 5.6vw, 84px); line-height: .98; color: #EC2F11; -webkit-text-stroke: 3px #0F1E3D; paint-order: stroke fill; text-shadow: 2px 2px 0 #0F1E3D, 3px 3px 0 #0F1E3D, 4px 4px 0 #0F1E3D, 5px 5px 0 #0F1E3D, 6px 6px 0 #0F1E3D; }
.what-you-get-7 { display: flex; flex-direction: column; gap: 18px; }
.what-you-get-8 { display: flex; gap: 18px; align-items: flex-start; background: #FFFAEF; border: 3px solid #0F1E3D; border-radius: 22px; box-shadow: 6px 6px 0 #0F1E3D; padding: 22px 24px; }
.what-you-get-9 { flex: none; width: 52px; height: 52px; border-radius: 14px; background: #EC2F11; border: 3px solid #0F1E3D; display: flex; align-items: center; justify-content: center; }
.what-you-get-10 { display: flex; flex-direction: column; gap: 6px; }
.what-you-get-11 { margin: 0; font-family: 'Titan One', sans-serif; font-weight: 400; font-size: 24px; line-height: 1.1; }
.what-you-get-12 { margin: 0; font-size: 15px; line-height: 1.5; font-weight: 500; color: #2C3858; }
.what-you-get-13 { flex: none; width: 52px; height: 52px; border-radius: 14px; background: #024291; border: 3px solid #0F1E3D; display: flex; align-items: center; justify-content: center; }
.what-you-get-14 { flex: none; width: 52px; height: 52px; border-radius: 14px; background: #FDF3DE; border: 3px solid #0F1E3D; display: flex; align-items: center; justify-content: center; }
.sample-sheet-1 { margin: 0; position: relative; justify-self: center; width: 100%; max-width: 560px; }
.sample-sheet-2 { background: #FFFAEF; border: 3px solid #0F1E3D; border-radius: 10px; box-shadow: 14px 14px 0 #EC2F11; transform: rotate(1.5deg); padding: 30px 32px 34px; display: flex; flex-direction: column; gap: 18px; background-image: repeating-linear-gradient(transparent 0 43px, rgba(2,66,145,.12) 43px 45px); }
.sample-sheet-3 { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 8px; padding-bottom: 12px; border-bottom: 3px solid #0F1E3D; }
.sample-sheet-4 { display: flex; flex-direction: column; gap: 4px; }
.sample-sheet-5 { font-stretch: 125%; font-weight: 900; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #B3240B; }
.sample-sheet-6 { font-family: 'Titan One', sans-serif; font-size: 30px; line-height: 1; color: #024291; }
.sample-sheet-7 { font-stretch: 125%; font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.sample-sheet-8 { display: flex; align-items: center; gap: 14px; min-height: 30px; }
.sample-sheet-9 { flex: none; width: 24px; height: 24px; border: 3px solid #0F1E3D; border-radius: 6px; background: #FFFAEF; }
.sample-sheet-10 { flex: 1; font-weight: 700; font-size: 18px; }
.sample-sheet-11 { font-family: 'Titan One', sans-serif; font-size: 22px; color: #024291; }
.sample-sheet-12 { flex: none; width: 24px; height: 24px; border: 3px solid #0F1E3D; border-radius: 6px; background: #EC2F11; }
.sample-sheet-13 { flex: none; width: 24px; height: 24px; border: 3px solid #0F1E3D; border-radius: 6px; background: #024291; }
.sample-sheet-14 { position: absolute; top: -26px; right: -14px; transform: rotate(8deg); background: #024291; color: #FFFAEF; border: 3px solid #0F1E3D; border-radius: 999px; box-shadow: 4px 4px 0 #0F1E3D; padding: 10px 18px; font-stretch: 125%; font-weight: 900; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.who-it-s-for-1 { background: radial-gradient(rgba(2,66,145,.12) 1.6px, transparent 1.9px) 0 0 / 14px 14px, #F6E3BE; border-top: 3px solid #0F1E3D; border-bottom: 3px solid #0F1E3D; }
.who-it-s-for-2 { max-width: 1320px; margin: 0 auto; padding: 104px 32px 112px; display: flex; flex-direction: column; gap: 44px; }
.who-it-s-for-3 { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; }
.who-it-s-for-4 { display: flex; flex-direction: column; gap: 10px; }
.who-it-s-for-5 { font-stretch: 125%; font-weight: 900; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #024291; }
.who-it-s-for-6 { margin: 0; font-family: 'Titan One', sans-serif; font-weight: 400; font-size: clamp(44px, 5vw, 76px); line-height: 1; color: #FFFAEF; -webkit-text-stroke: 3px #0F1E3D; paint-order: stroke fill; text-shadow: 2px 2px 0 #024291, 3px 3px 0 #024291, 4px 4px 0 #024291, 5px 5px 0 #024291, 6px 6px 0 #024291; text-wrap: balance; }
.who-it-s-for-7 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 28px; }
.who-it-s-for-8 { background: #FFFAEF; border: 3px solid #0F1E3D; border-radius: 26px; box-shadow: 8px 8px 0 #0F1E3D; padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.who-it-s-for-9 { width: 60px; height: 60px; border-radius: 50%; background: #EC2F11; border: 3px solid #0F1E3D; display: flex; align-items: center; justify-content: center; }
.who-it-s-for-10 { margin: 0; font-family: 'Titan One', sans-serif; font-weight: 400; font-size: 26px; line-height: 1.05; }
.who-it-s-for-11 { width: 60px; height: 60px; border-radius: 50%; background: #024291; border: 3px solid #0F1E3D; display: flex; align-items: center; justify-content: center; }
.who-it-s-for-12 { width: 60px; height: 60px; border-radius: 50%; background: #FDF3DE; border: 3px solid #0F1E3D; display: flex; align-items: center; justify-content: center; }
.who-it-s-for-13 { margin: 0; align-self: flex-start; display: flex; align-items: center; gap: 12px; padding: 14px 20px; border: 2.5px dashed #0F1E3D; border-radius: 16px; font-weight: 700; font-size: 15px; color: #0F1E3D; background: #FDF3DE; }
.faq-1 { max-width: 1000px; margin: 0 auto; padding: 104px 32px 112px; display: flex; flex-direction: column; gap: 36px; }
.faq-2 { margin: 0; font-family: 'Titan One', sans-serif; font-weight: 400; font-size: clamp(48px, 5vw, 76px); line-height: 1; color: #2B6CC4; -webkit-text-stroke: 3px #0F1E3D; paint-order: stroke fill; text-shadow: 2px 2px 0 #0F1E3D, 3px 3px 0 #0F1E3D, 4px 4px 0 #0F1E3D, 5px 5px 0 #0F1E3D, 6px 6px 0 #0F1E3D; }
.faq-3 { display: flex; flex-direction: column; gap: 16px; }
.faq-4 { margin: 0; }
.faq-5 { width: 100%; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 22px; background: transparent; border: 0; cursor: pointer; text-align: left; color: #0F1E3D; font-family: 'Titan One', sans-serif; font-weight: 400; font-size: 21px; line-height: 1.2; }
.faq-6 { flex: none; width: 36px; height: 36px; border-radius: 50%; background: #EC2F11; color: #FFFAEF; border: 2.5px solid #0F1E3D; display: flex; align-items: center; justify-content: center; font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 20px; line-height: 1; }
.faq-7 { margin: 0; padding: 0 22px 22px; font-size: 16px; line-height: 1.55; font-weight: 500; color: #2C3858; max-width: 780px; }
.faq-8 { flex: none; width: 36px; height: 36px; border-radius: 50%; background: #FFFAEF; color: #0F1E3D; border: 2.5px solid #0F1E3D; display: flex; align-items: center; justify-content: center; font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 20px; line-height: 1; }
.faq-9 { margin: 0; font-size: 15px; font-weight: 600; color: #2C3858; }
.faq-10 { font-weight: 800; }
.waitlist-1 { background: radial-gradient(rgba(15,30,61,.16) 1.6px, transparent 1.9px) 0 0 / 14px 14px, #EC2F11; border-top: 3px solid #0F1E3D; }
.waitlist-2 { max-width: 1320px; margin: 0 auto; padding: 104px 32px 120px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); gap: 48px 64px; align-items: start; }
.waitlist-3 { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.waitlist-4 { margin: 0; font-family: 'Titan One', sans-serif; font-weight: 400; font-size: clamp(52px, 6vw, 92px); line-height: .98; color: #FFFAEF; -webkit-text-stroke: 3px #0F1E3D; paint-order: stroke fill; text-shadow: 2px 2px 0 #0F1E3D, 3px 3px 0 #0F1E3D, 4px 4px 0 #0F1E3D, 5px 5px 0 #0F1E3D, 6px 6px 0 #0F1E3D, 7px 7px 0 #0F1E3D; text-wrap: balance; }
.waitlist-5 { margin: 0; max-width: 480px; font-size: 18px; line-height: 1.55; font-weight: 600; color: #FFFAEF; }
.waitlist-6 { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.waitlist-7 { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 15px; color: #FFFAEF; }
.waitlist-8 { background: #FFFAEF; border: 3px solid #0F1E3D; border-radius: 30px; box-shadow: 12px 12px 0 #0F1E3D; padding: 34px 34px 32px; min-width: 0; }
.waitlist-9 { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 12px 0; }
.waitlist-10 { width: 72px; height: 72px; border-radius: 50%; background: #EC2F11; border: 3px solid #0F1E3D; box-shadow: 4px 4px 0 #0F1E3D; display: flex; align-items: center; justify-content: center; }
.waitlist-11 { margin: 0; font-family: 'Titan One', sans-serif; font-weight: 400; font-size: 34px; line-height: 1.05; color: #024291; }
.waitlist-12 { margin: 0; font-size: 16px; line-height: 1.55; font-weight: 600; color: #2C3858; }
.waitlist-13 { min-height: 44px; padding: 0 4px; background: transparent; border: 0; color: #024291; text-decoration: underline; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 15px; cursor: pointer; }
.footer-1 { background: #024291; color: #FDF3DE; position: relative; overflow: hidden; }
.footer-2 { max-width: 1320px; margin: 0 auto; padding: 80px 32px 40px; display: flex; flex-direction: column; gap: 56px; position: relative; }
.footer-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 40px; }
.footer-4 { display: flex; flex-direction: column; gap: 18px; grid-column: span 2; min-width: 0; }
.footer-5 { align-self: flex-start; background: #FDF3DE; border: 3px solid #0F1E3D; border-radius: 18px; box-shadow: 6px 6px 0 #EC2F11; padding: 14px 22px; }
.footer-6 { width: 240px; max-width: 100%; height: auto; display: block; }
.footer-7 { margin: 0; max-width: 420px; font-size: 16px; line-height: 1.55; font-weight: 600; }
.footer-8 { display: flex; flex-direction: column; gap: 12px; }
.footer-9 { color: #FDF3DE; text-decoration: none; font-weight: 600; font-size: 16px; min-height: 28px; }
.footer-10 { font-family: 'Titan One', sans-serif; font-size: clamp(56px, 10.5vw, 160px); line-height: 1; color: transparent; -webkit-text-stroke: 2px #EC2F11; white-space: nowrap; letter-spacing: .01em; }
.footer-11 { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 24px; border-top: 2px dashed #3767AE; font-size: 13px; font-weight: 600; color: #D5DEEE; }

/* Shared behavior and responsive adaptations of the fluid approved layout. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { min-width: 320px; }
button, input, select { font: inherit; }
button:disabled { cursor: wait; opacity: .7; }
svg { flex-shrink: 0; }
picture { display: contents; }
.picture-logo { display: block; }
.skip { position: absolute; z-index: 10; top: 8px; left: 8px; padding: 12px 18px; background: #FFFAEF; border: 3px solid #0F1E3D; transform: translateY(-160%); }
.skip:focus { transform: none; }
.faq-item { background: #FDF3DE; border: 3px solid #0F1E3D; border-radius: 20px; box-shadow: 4px 4px 0 #0F1E3D; overflow: hidden; }
.faq-item.is-open { background: #FFFAEF; box-shadow: 6px 6px 0 #EC2F11; }
.faq-item button [aria-hidden] { background: #FFFAEF; color: #0F1E3D; }
.faq-item.is-open button [aria-hidden] { background: #EC2F11; color: #FFFAEF; }
#waitlist-form { display: flex; flex-direction: column; gap: 22px; }
.form-field, #other-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
#waitlist-form label { font-stretch: 125%; font-weight: 900; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.mos-field { width: 100%; min-width: 0; height: 56px; padding: 0 16px; border-radius: 14px; border: 3px solid #0F1E3D; background: #FDF3DE; color: #0F1E3D; font-size: 16px; font-weight: 600; box-shadow: 3px 3px 0 #0F1E3D; }
.hint { margin: 0; font-size: 13px; line-height: 1.5; font-weight: 600; color: #4A5470; }
.error, #form-error { margin: 0; color: #B3240B; font-size: 14px; line-height: 1.5; font-weight: 700; }
#form-error { margin-top: 22px; }
.waitlist-submit, .button { align-self: flex-start; display: inline-flex; align-items: center; min-height: 58px; padding: 0 28px; background: #024291; color: #FFFAEF; border: 3px solid #0F1E3D; border-radius: 16px; box-shadow: 6px 6px 0 #0F1E3D; font-stretch: 125%; font-weight: 900; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; text-decoration: none; }
.wrap { max-width: 1000px; margin: 0 auto; padding: 80px 32px 104px; }
.prose { font-size: 17px; line-height: 1.65; overflow-wrap: anywhere; }
.prose h1 { font-family: 'Titan One', sans-serif; font-weight: 400; font-size: clamp(44px, 5vw, 72px); line-height: 1.08; color: #FFFAEF; -webkit-text-stroke: 3px #0F1E3D; paint-order: stroke fill; text-shadow: 3px 3px 0 #024291, 5px 5px 0 #024291; }
.prose h2 { font-family: 'Titan One', sans-serif; font-weight: 400; color: #024291; line-height: 1.15; margin-top: 40px; }
/* Use the design's darker button red on surfaces with small cream text (4.94:1).
   Decorative red headings, shadows and accents keep the original #EC2F11. */
.hero-5, .stickers-2 { background: #D22A0F; }
.apps-1, .waitlist-1 { background-color: #D22A0F; }
@media (max-width: 600px) {
  header > div { padding: 14px 20px !important; gap: 14px !important; }
  header nav { order: 3; flex-basis: 100% !important; }
  header nav a { padding-inline: 9px !important; font-size: 11px !important; }
  header picture img { max-width: 190px; height: auto !important; }
  header .mos-btn { font-size: 11px !important; padding-inline: 12px !important; }
  main section > div { padding-left: 24px !important; padding-right: 24px !important; }
  .hero > div { padding-top: 48px !important; padding-bottom: 80px !important; }
  #how > div, #get > div, #shops > div, #faq > div, #waitlist > div { padding-top: 72px !important; padding-bottom: 80px !important; }
  #get article { padding: 20px 16px; gap: 12px; }
  #get figure > div { padding: 26px 20px; }
  #get figcaption { right: 0; font-size: 10px; }
  #waitlist > div > div:last-child { padding: 26px 20px; box-shadow: 8px 8px 0 #0F1E3D; }
  footer > div { padding: 64px 24px 32px !important; }
  footer > div > div:first-child { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  footer > div > div[aria-hidden] { font-size: clamp(28px, 8.4vw, 56px); }
  .wrap { padding: 56px 24px 80px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .mos-card:hover { transform: none; }
}

@media (max-width: 600px) {
  .stickers-1 { left: -10px; transform: rotate(-12deg) scale(.8); }
  .stickers-6 { right: -10px; }
  .stickers-10 { left: -10px; }
  .hero-art-4 { padding-inline: 12px; font-size: 9px; }
}
/* A two-color focus ring stays visible on both cream and colored sections. */
:focus-visible, .mos-field:focus-visible { outline: 3px solid #0F1E3D; outline-offset: 3px; box-shadow: 0 0 0 6px #FFFAEF !important; }

/* Hero fits one screen with the ticker and header (owner, 25/10/2026). */
.hero-2 { padding: clamp(28px, 4vh, 48px) 32px clamp(40px, 6vh, 64px); gap: 40px 56px; }
.hero-3 { gap: 20px; }
.hero-7 { font-size: clamp(40px, min(4.4vw, 7.2vh), 68px); }
.hero-11 { font-size: 17px; }
.hero-art-1 { max-width: min(520px, calc(100svh - 220px)); }
@media (min-width: 601px) {
  .hero-4 { flex-wrap: nowrap; white-space: nowrap; }
}