:root {
  --navy: #041c4c; --navy-bg: #06265f; --purple: #8100f5;
  --orange: #ff7900; --cyan: #06bedd; --white: #fff;
  --muted: #3d4863; --lavender: #eddefc;
  --ice: #d5f7fc; --pale: #f0f6fa; --line: #c6d6e5;
  --wave: #1b4699; --hero-blue: #e6f6fc; --shadow: rgba(4,28,76,.08);
  --peach: #fdebdd;
  --u: min(.0630517vw, 1px);
  --display: 'Fredoka', 'Baloo 2', 'Arial Rounded MT Bold', sans-serif;
  --body: 'Roboto', Arial, sans-serif;
  --hand: 'Kalam', cursive;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; color: var(--navy); background: var(--white); font-family: var(--body); }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
button { border: 0; }
img, svg { display: block; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--purple); outline-offset: 4px; }
[hidden] { display: none !important; }
.icon { width: calc(26 * var(--u)); height: calc(26 * var(--u)); flex-shrink: 0; }
.icon, .step-icon { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.container { width: calc(1399 * var(--u)); margin-inline: auto; }
.skip-link { position: fixed; top: -100px; left: 14px; z-index: 100; padding: 14px; background: var(--white); }
.skip-link:focus { top: 14px; }
.announcement { height: calc(47 * var(--u)); display: flex; align-items: center; justify-content: center; gap: calc(24 * var(--u)); background: var(--navy-bg); color: var(--white); font-weight: 700; font-size: calc(16 * var(--u)); }
.announcement span { display: flex; align-items: center; gap: calc(12 * var(--u)); }
.announcement .icon { width: calc(30 * var(--u)); height: calc(30 * var(--u)); --icon-cutout: var(--navy-bg); }
.announcement i { font-style: normal; }
.site-header { height: calc(90 * var(--u)); display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 5; }
.brand { width: calc(306 * var(--u)); margin-left: calc(-6 * var(--u)); flex-shrink: 0; }
.brand img { width: 100%; height: auto; mix-blend-mode: multiply; }
.main-nav { display: flex; align-items: center; gap: calc(39 * var(--u)); margin-left: calc(95 * var(--u)); margin-right: auto; font-size: calc(16 * var(--u)); font-weight: 700; letter-spacing: calc(-.3 * var(--u)); }
.main-nav > a, .main-nav > button, .nav-trigger { white-space: nowrap; padding: calc(12 * var(--u)) 0; }
.main-nav button { background: transparent; }
.main-nav > a:hover, .main-nav > button:hover, .nav-trigger:hover { color: var(--purple); }
.nav-trigger { display: flex; align-items: center; gap: calc(5 * var(--u)); font-weight: 700; }
.nav-trigger .icon { width: calc(18 * var(--u)); height: calc(18 * var(--u)); transition: transform .2s; }
.nav-trigger[aria-expanded="true"] .icon { transform: rotate(180deg); }
.nav-dropdown { position: relative; }
@media (min-width: 1024px) { .nav-dropdown { margin-right: calc(-19 * var(--u)); } }
.dropdown-panel { position: absolute; top: 100%; left: -17px; min-width: 190px; padding: 10px; background: var(--white); border: 1px solid var(--line); box-shadow: 0 8px 24px var(--shadow); border-radius: 14px; }
.dropdown-panel > * { display: block; width: 100%; padding: 12px; text-align: left; border-radius: 8px; font-size: 15px; }
.dropdown-panel > *:hover { background: var(--pale); }
.button { display: inline-flex; justify-content: center; align-items: center; gap: calc(17 * var(--u)); height: calc(55 * var(--u)); padding: 0 calc(28 * var(--u)); border: 2px solid transparent; border-radius: calc(15 * var(--u)); background: var(--orange); color: var(--white); box-shadow: 0 2px 8px var(--shadow); font-size: calc(21 * var(--u)); font-weight: 700; letter-spacing: calc(-.4 * var(--u)); white-space: nowrap; transition: transform .18s, box-shadow .18s; }
.button:hover { transform: translateY(-2px); box-shadow: 0 5px 14px var(--shadow); }
.button:active { transform: translateY(0); }
.header-order { width: calc(206 * var(--u)); height: calc(51 * var(--u)); font-size: calc(18 * var(--u)); padding-inline: calc(20 * var(--u)); border-radius: calc(14 * var(--u)); transform: translateY(calc(-6 * var(--u))); }
.menu-toggle { display: none; }
.hero { height: calc(386 * var(--u)); position: relative; }
.hero-backdrop { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-backdrop:before { content: ''; position: absolute; width: calc(175 * var(--u)); height: calc(210 * var(--u)); border-radius: 50%; background: var(--hero-blue); left: calc(-105 * var(--u)); top: calc(-24 * var(--u)); transform: rotate(24deg); }
.hero-backdrop:after { content: ''; position: absolute; width: calc(790 * var(--u)); height: calc(200 * var(--u)); background: var(--hero-blue); border-radius: 50%; left: calc(50% - 640 * var(--u)); bottom: calc(-166 * var(--u)); transform: rotate(-7deg); }
.hero-inner { height: 100%; position: relative; }
.hero-copy { position: relative; z-index: 2; padding-top: calc(16 * var(--u)); width: calc(630 * var(--u)); }
h1, h2, h3, p { margin: 0; }
h1, h2, .product-title { font-family: var(--display); font-weight: 700; }
h1 { font-size: calc(70 * var(--u)); line-height: calc(58 * var(--u)); letter-spacing: calc(-2 * var(--u)); }
h1 > span { display: block; white-space: nowrap; }
.purple { color: var(--purple); position: relative; }
.purple:after { content: ''; position: absolute; bottom: calc(-16 * var(--u)); right: calc(61 * var(--u)); width: calc(137 * var(--u)); height: calc(8 * var(--u)); border-top: calc(7 * var(--u)) solid var(--orange); border-radius: 50%; transform: rotate(-1deg); }
.hero-copy > p { margin-top: calc(24 * var(--u)); font-size: calc(25 * var(--u)); line-height: calc(28 * var(--u)); font-weight: 600; letter-spacing: calc(-.5 * var(--u)); color: var(--muted); }
.hero-actions { display: flex; gap: calc(17 * var(--u)); margin-top: calc(17 * var(--u)); }
.hero-actions .button:first-child { width: calc(257 * var(--u)); }
.button-outline { width: calc(245 * var(--u)); border-color: var(--navy); background: var(--white); color: var(--navy); gap: calc(14 * var(--u)); padding-inline: calc(20 * var(--u)); }
.hero-art { position: absolute; width: calc(965 * var(--u)); height: calc(486 * var(--u)); top: calc(-39 * var(--u)); left: calc(526 * var(--u)); z-index: 1; mix-blend-mode: multiply; pointer-events: none; }
.products { position: relative; z-index: 2; padding-top: calc(14 * var(--u)); }
.section-heading { height: calc(52 * var(--u)); display: flex; align-items: flex-start; gap: calc(100 * var(--u)); }
.section-heading h2 { font-size: calc(36 * var(--u)); line-height: calc(40 * var(--u)); letter-spacing: calc(-.8 * var(--u)); }
.product-note { position: relative; font-family: var(--hand); font-size: calc(18 * var(--u)); font-weight: 700; line-height: calc(19 * var(--u)); transform: rotate(-10deg); margin-top: calc(-2 * var(--u)); }
.product-note svg { position: absolute; width: calc(30 * var(--u)); height: calc(40 * var(--u)); left: calc(90 * var(--u)); top: calc(15 * var(--u)); fill: none; stroke: var(--orange); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(22 * var(--u)); }
.product-card { display: flex; align-items: center; padding: 0; height: calc(132 * var(--u)); border-radius: calc(14 * var(--u)); overflow: hidden; text-align: left; transition: transform .18s; }
.product-card:hover { transform: translateY(-3px); }
.labels-card { background: var(--peach); }
.stickers-card { background: var(--lavender); }
.sleeves-card { background: var(--ice); }
.product-card > img { width: calc(240 * var(--u)); height: 100%; object-fit: fill; }
.product-card-copy { padding-left: calc(16 * var(--u)); }
.product-title { display: block; font-size: calc(28 * var(--u)); line-height: calc(25 * var(--u)); letter-spacing: calc(-.6 * var(--u)); }
.round-arrow { display: flex; align-items: center; justify-content: center; width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: 50%; color: var(--white); background: var(--orange); margin-top: calc(9 * var(--u)); }
.benefits { width: calc(1496 * var(--u)); height: calc(64 * var(--u)); margin: calc(11 * var(--u)) auto 0; display: grid; grid-template-columns: 360fr 349fr 370fr 417fr; background: var(--pale); border-radius: calc(17 * var(--u)); }
.benefits > div { display: flex; align-items: center; justify-content: center; gap: calc(24 * var(--u)); font-size: calc(18 * var(--u)); font-weight: 700; letter-spacing: calc(-.4 * var(--u)); position: relative; }
.benefits > div + div:before { content: ''; width: 1px; height: calc(31 * var(--u)); background: var(--line); position: absolute; left: 0; }
.badge { display: inline-flex; align-items: center; justify-content: center; width: calc(48 * var(--u)); height: calc(48 * var(--u)); border-radius: 50%; color: var(--white); flex-shrink: 0; font-size: calc(26 * var(--u)); font-weight: 800; }
.badge .icon { width: calc(31 * var(--u)); height: calc(31 * var(--u)); }
.purple-bg { background: var(--purple); --icon-cutout: var(--purple); }
.cyan-bg { background: var(--cyan); --icon-cutout: var(--cyan); }
.orange-bg { background: var(--orange); --icon-cutout: var(--orange); }
.process { width: calc(1440 * var(--u)); height: calc(89 * var(--u)); margin-inline: auto; display: flex; align-items: center; gap: calc(54 * var(--u)); }
.process > h2 { font-size: calc(30 * var(--u)); line-height: calc(36 * var(--u)); letter-spacing: calc(-.6 * var(--u)); white-space: nowrap; position: relative; }
.process > h2:after { content: ''; position: absolute; bottom: calc(-7 * var(--u)); left: calc(42 * var(--u)); width: calc(86 * var(--u)); height: calc(5 * var(--u)); border-top: calc(5 * var(--u)) solid var(--orange); border-radius: 50%; }
.process ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(36 * var(--u)); list-style: none; padding: 0; margin: 0; flex: 1; }
.process li { display: flex; align-items: center; gap: calc(12 * var(--u)); position: relative; }
.process li + li:before { content: ''; position: absolute; left: calc(-33 * var(--u)); top: calc(20 * var(--u)); width: calc(10 * var(--u)); height: calc(10 * var(--u)); border-top: 1.5px solid var(--muted); border-right: 1.5px solid var(--muted); transform: rotate(45deg); }
.step-icon { width: calc(44 * var(--u)); height: calc(44 * var(--u)); flex-shrink: 0; }
.process h3 { font-size: calc(20 * var(--u)); line-height: calc(23 * var(--u)); letter-spacing: calc(-.4 * var(--u)); font-weight: 800; white-space: nowrap; }
.process p { font-size: calc(14 * var(--u)); line-height: calc(18 * var(--u)); margin-top: calc(2 * var(--u)); white-space: nowrap; }
.closing-cta { height: calc(107 * var(--u)); background: var(--navy-bg); color: var(--white); position: relative; overflow: hidden; }
.closing-inner { width: calc(1250 * var(--u)); height: 100%; margin: auto; display: flex; align-items: center; gap: calc(30 * var(--u)); position: relative; z-index: 1; }
.closing-inner h2 { font-size: calc(46 * var(--u)); line-height: calc(54 * var(--u)); letter-spacing: calc(-.8 * var(--u)); white-space: nowrap; }
.closing-inner h2 span { position: relative; }
.closing-inner h2 span:after { content: ''; position: absolute; bottom: calc(1 * var(--u)); left: 0; right: 0; height: calc(5 * var(--u)); border-top: calc(7 * var(--u)) solid var(--orange); border-radius: 50%; transform: rotate(-3deg); }
.closing-inner .button { width: calc(240 * var(--u)); height: calc(57 * var(--u)); flex-shrink: 0; }
.footer-note { position: relative; font-family: var(--hand); font-size: calc(18 * var(--u)); line-height: calc(19 * var(--u)); font-weight: 700; transform: rotate(-10deg); flex-shrink: 0; width: calc(180 * var(--u)); align-self: flex-start; margin-top: calc(24 * var(--u)); }
.footer-note svg { position: absolute; width: calc(40 * var(--u)); height: calc(40 * var(--u)); left: calc(118 * var(--u)); top: calc(11 * var(--u)); fill: none; stroke: var(--white); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.small-brands { position: absolute; left: calc(1290 * var(--u)); top: 0; width: auto; font-size: calc(16 * var(--u)); line-height: calc(17 * var(--u)); }
.footer-wave { position: absolute; width: calc(430 * var(--u)); height: calc(240 * var(--u)); background: var(--wave); border-radius: 45%; left: calc(50% - 820 * var(--u)); top: calc(76 * var(--u)); transform: rotate(28deg); }
.footer-wave:after { content: ''; position: absolute; width: calc(330 * var(--u)); height: calc(145 * var(--u)); border: calc(28 * var(--u)) solid var(--wave); border-radius: 50%; top: calc(-130 * var(--u)); left: calc(-90 * var(--u)); transform: rotate(22deg); }
.closing-cta:after { content: ''; position: absolute; right: 5%; top: 0; width: calc(200 * var(--u)); height: 100%; background-image: radial-gradient(var(--wave) 3px, transparent 4px); background-size: calc(19 * var(--u)) calc(19 * var(--u)); opacity: .6; transform: rotate(-12deg); }
.modal { width: min(540px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; border: 1px solid var(--line); border-radius: 17px; padding: 32px; color: var(--navy); box-shadow: 0 8px 24px var(--shadow); }
.modal::backdrop { background: rgba(4,28,76,.65); backdrop-filter: blur(4px); }
body.dialog-open { overflow: hidden; }
.close-dialog { position: absolute; right: 14px; top: 14px; padding: 8px; border-radius: 50%; background: var(--pale); }
.close-dialog .icon { width: 24px; height: 24px; }
.eyebrow { display: block; font-size: 12px; font-weight: 800; color: var(--purple); margin: 8px 24px 8px 0; }
.modal h2 { font-size: 36px; line-height: 1.15; margin-bottom: 14px; }
.modal p { font-size: 16px; line-height: 1.5; }
.dialog-intro { margin-bottom: 22px; color: var(--muted); }
.modal label { display: block; font-weight: 700; margin: 17px 0 8px; font-size: 14px; }
.modal input, .modal select, .modal textarea { width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); color: var(--navy); }
.modal textarea { resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.optional { font-weight: 400; color: var(--muted); }
.website-field { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.modal .form-disclosure { font-size: 12px; color: var(--muted); margin: 14px 0; }
.modal .button { height: 51px; font-size: 18px; border-radius: 14px; padding: 0 22px; gap: 14px; }
.modal .button .icon { width: 24px; height: 24px; }
.submit-button { width: 100%; }
.modal .order-status { font-size: 14px; margin-top: 14px; }
.order-status.is-success { color: #167447; }
.order-status.is-error { color: #b42318; }
.order-status:empty { display: none; }
.info-modal > .button { margin-top: 24px; }
@media (min-width: 1587px) { .hero-art { left: 526px; } }
@media (min-width: 1024px) {
  h1 > span:nth-child(1) { transform: scaleX(1.045); transform-origin: left; }
  h1 > span:nth-child(2) { transform: scaleX(1.12); transform-origin: left; }
  h1 > span:nth-child(3) { transform: scaleX(1.076); transform-origin: left; }
  .closing-inner h2, .closing-inner > .button { position: relative; top: -5px; }
}
@media (min-width: 1024px) and (max-width: 1200px) { .main-nav { gap: calc(28 * var(--u)); margin-left: calc(35 * var(--u)); } }
@media (max-width: 1023px) {
  :root { --u: 1px; }
  .container { width: calc(100% - 48px); }
  .announcement { height: 38px; font-size: 12px; gap: 14px; }
  .announcement span { gap: 7px; }
  .announcement .icon { width: 22px; height: 22px; }
  .site-header { height: 88px; }
  .brand { width: 245px; margin-left: -6px; }
  .menu-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: var(--pale); border-radius: 14px; margin-left: auto; }
  .header-order { width: auto; height: 44px; font-size: 16px; margin-left: 14px; }
  .main-nav { display: none; position: absolute; top: 78px; left: 0; right: 0; margin: 0; padding: 17px 24px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 24px var(--shadow); align-items: stretch; flex-direction: column; gap: 0; font-size: 16px; }
  .main-nav.is-open { display: flex; }
  .main-nav > button { text-align: left; }
  .nav-trigger { width: 100%; justify-content: space-between; }
  .dropdown-panel { position: static; border: 0; box-shadow: none; background: var(--pale); }
  .hero { height: auto; }
  .hero-inner { display: flex; flex-direction: column; }
  .hero-copy { width: 100%; padding-top: 24px; }
  h1 { font-size: clamp(43px, 7.5vw, 70px); line-height: .88; letter-spacing: -1.5px; }
  .purple:after { left: 420px; right: auto; width: 130px; bottom: -16px; }
  .hero-copy > p { font-size: 22px; line-height: 28px; margin-top: 28px; }
  .hero-actions { margin-top: 22px; }
  .hero-art { position: relative; top: auto; left: auto; width: calc(100% + 30px); height: auto; margin: 4px -15px -8px; }
  .products { padding-top: 8px; }
  .section-heading { height: 62px; gap: 85px; align-items: center; }
  .section-heading h2 { font-size: 32px; }
  .product-grid { gap: 14px; }
  .product-card { height: 190px; display: flex; flex-direction: column; align-items: stretch; position: relative; }
  .product-card > img { width: 100%; height: 110px; object-fit: contain; object-position: left; }
  .product-card-copy { display: flex; align-items: center; justify-content: space-between; padding: 4px 17px 14px; }
  .product-title { font-size: 24px; line-height: 22px; }
  .round-arrow { width: 36px; height: 36px; margin: 0; }
  .benefits { width: calc(100% - 48px); height: auto; margin-top: 22px; padding: 14px; grid-template-columns: repeat(2, 1fr); gap: 17px; }
  .benefits > div { justify-content: flex-start; font-size: 15px; gap: 14px; }
  .benefits > div + div:before { display: none; }
  .badge { width: 44px; height: 44px; }
  .process { width: calc(100% - 48px); height: auto; margin: 28px auto 32px; display: block; }
  .process > h2 { font-size: 30px; display: inline-block; margin-bottom: 28px; }
  .process ol { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .process li + li:before { display: none; }
  .process h3 { font-size: 18px; }
  .process p { font-size: 14px; }
  .closing-cta { height: auto; min-height: 160px; padding: 28px 24px; }
  .closing-inner { width: 100%; flex-direction: column; gap: 17px; text-align: center; }
  .closing-inner h2 { font-size: 36px; line-height: 40px; white-space: normal; }
  .footer-note { display: none; }
  .closing-inner .button { height: 51px; font-size: 18px; }
}
@media (max-width: 768px) {
  .announcement { font-size: 11px; gap: 10px; }
  .announcement .icon { width: 19px; height: 19px; }
  .announcement span { gap: 5px; }
  .brand { width: 220px; }
  .header-order { font-size: 14px; padding-inline: 14px; }
  .header-order .icon { width: 20px; }
  .hero-actions .button { font-size: 18px; padding-inline: 17px; }
  .hero-actions .button:first-child { width: 230px; }
  .hero-actions .button-outline { width: 230px; }
  .purple:after { left: auto; right: 9%; width: 23%; }
  .product-note { font-size: 16px; }
  .section-heading { gap: 50px; }
  .product-card-copy { padding-inline: 12px; }
  .product-title { font-size: 22px; }
  .round-arrow { width: 31px; height: 31px; }
  .benefits > div { font-size: 14px; }
}
@media (max-width: 480px) {
  .container { width: calc(100% - 36px); }
  .announcement { height: 32px; font-size: 12px; }
  .announcement > span:not(:first-child), .announcement > i { display: none; }
  .site-header { height: 75px; }
  .brand { width: 204px; }
  .header-order { display: none; }
  .main-nav { top: 68px; }
  .hero-copy { padding-top: 18px; }
  h1 { font-size: clamp(34px, 8.5vw, 41px); line-height: .96; letter-spacing: -1px; }
  .purple:after { border-top-width: 4px; bottom: -13px; }
  .hero-copy > p { font-size: 17px; line-height: 23px; letter-spacing: -.3px; margin-top: 24px; }
  .desktop-break { display: none; }
  .hero-actions { gap: 10px; margin-top: 19px; }
  .hero-actions .button, .hero-actions .button:first-child, .hero-actions .button-outline { width: auto; flex: 1; height: 46px; font-size: 13px; padding-inline: 10px; gap: 7px; border-radius: 12px; letter-spacing: -.2px; }
  .hero-actions .icon { width: 19px; height: 19px; }
  .hero-art { width: calc(100% + 24px); margin: 17px -12px 0; }
  .products { padding-top: 14px; }
  .section-heading { height: 60px; justify-content: space-between; gap: 0; }
  .section-heading h2 { font-size: 28px; letter-spacing: -.8px; }
  .product-note { font-size: 13px; line-height: 15px; margin-right: 20px; }
  .product-note svg { left: 64px; top: 12px; width: 20px; height: 26px; }
  .product-grid { grid-template-columns: 1fr; gap: 14px; }
  .product-card { height: 132px; flex-direction: row; align-items: center; }
  .product-card > img { width: 57%; height: 132px; object-fit: cover; object-position: left; }
  .product-card-copy { padding-left: 12px; display: block; }
  .product-title { font-size: 27px; line-height: 25px; }
  .round-arrow { width: 36px; height: 36px; margin-top: 8px; }
  .benefits { width: calc(100% - 36px); padding: 17px 12px; gap: 17px 10px; }
  .benefits > div { gap: 8px; font-size: 12px; line-height: 16px; letter-spacing: -.2px; }
  .benefits .badge { width: 36px; height: 36px; }
  .benefits .badge .icon { width: 24px; height: 24px; }
  .process { width: calc(100% - 48px); margin-top: 25px; }
  .process ol { grid-template-columns: 1fr; gap: 24px; margin-top: 4px; }
  .process li { gap: 17px; }
  .process h3 { font-size: 20px; }
  .process p { font-size: 15px; white-space: normal; }
  .process p br { display: none; }
  .process .badge { width: 44px; height: 44px; }
  .step-icon { width: 40px; height: 40px; }
  .closing-inner h2 { font-size: 32px; line-height: 35px; }
  .modal { padding: 28px 22px; }
  .modal h2 { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *:before, *:after { transition: none !important; }
}