@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --ink: #111411;
  --dark: #101310;
  --dark-alt: #181d17;
  --paper: #f6f5f0;
  --white: #fff;
  --lime: #b9f65b;
  --green: #75a63a;
  --muted: #a4ada0;
  --line: #333b30;
  --body-font: 'DM Sans', sans-serif;
  --display-font: 'Space Grotesk', sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: var(--dark); color: var(--paper); font-family: var(--body-font); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
body.modal-open { overflow: hidden; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
img, video { display: block; max-width: 100%; }
img { height: auto; }
button { color: inherit; }
button:disabled { cursor: default; }
[hidden] { display: none !important; }
::selection { background: var(--lime); color: var(--ink); }
:focus-visible { outline: 3px solid var(--green); outline-offset: 5px; }
h1, h2, h3, h4, p, figure { margin: 0; }
h1, h2, h3, h4 { font-family: var(--display-font); font-weight: 700; }
h1 { font-size: clamp(2.4rem, 4.4vw, 4.1rem); line-height: 1.065; letter-spacing: -.058em; }
h2 { font-size: clamp(2.25rem, 4vw, 3.55rem); line-height: 1.05; letter-spacing: -.052em; }
h3 { font-size: 1.3rem; line-height: 1.25; letter-spacing: -.025em; }
button svg { width: 24px; height: 24px; }
.container { width: min(1240px, calc(100% - 80px)); margin-inline: auto; }
.section { padding-block: 108px; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 38px; }
.kicker, .eyebrow { font-family: var(--display-font); font-size: 11px; font-weight: 600; letter-spacing: .16em; line-height: 1.5; text-transform: uppercase; margin-bottom: 22px; }
.kicker { color: var(--muted); }
.section-description { color: var(--muted); max-width: 460px; font-size: 17px; line-height: 1.6; margin-top: 23px; }
.lime-text { color: var(--lime); }
.outline-text { color: transparent; -webkit-text-stroke: 1px #a9b2a5; }
.btn { display: inline-flex; justify-content: space-between; align-items: center; gap: 35px; min-height: 58px; padding: 15px 26px; border-radius: 6px; font-weight: 700; line-height: 1.3; transition: background .2s, transform .2s, box-shadow .2s; border: 1px solid transparent; }
.btn span[aria-hidden] { font-size: 23px; font-weight: 400; line-height: 1; }
.btn:hover { transform: translateY(-2px); }
.btn-lime { background: var(--lime); color: var(--ink); }
.btn-lime:hover { background: #ceff87; box-shadow: 0 5px 22px #b9f65b20; }
.btn-dark { background: var(--ink); color: var(--paper); }
.btn-dark:hover { background: #2b3627; }
.text-link { font-size: 14px; font-weight: 700; border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.text-link span { padding-left: 24px; }
.copy { font-size: 17px; line-height: 1.8; }
.copy p + p { margin-top: 22px; }
.copy strong { font-weight: 700; }
.status-dot { width: 6px; height: 6px; background: var(--lime); border-radius: 50%; display: inline-block; flex: 0 0 6px; }
.round-button { display: inline-flex; justify-content: center; align-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: transparent; font-size: 22px; color: inherit; transition: background .2s, color .2s; }
.round-button:hover { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.gallery-controls { display: flex; gap: 10px; }
.skip-link { position: fixed; top: -80px; left: 12px; z-index: 100; padding: 10px 20px; background: var(--lime); color: var(--ink); }
.skip-link:focus { top: 12px; }
.site-header { position: sticky; top: 0; z-index: 30; background: #101310f5; backdrop-filter: blur(14px); border-bottom: 1px solid #ffffff12; }
.header-inner { width: min(1360px, calc(100% - 80px)); min-height: 80px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 26px; }
.wordmark { display: inline-flex; align-items: center; font-family: var(--display-font); font-size: 31px; font-weight: 700; letter-spacing: -.075em; line-height: 1; }
.brand-slash { display: block; width: 12px; height: 25px; background: var(--lime); transform: skew(-18deg); margin-right: 9px; }
.wordmark-dot { align-self: flex-start; font-family: var(--body-font); font-size: 9px; letter-spacing: 0; padding: 1px 0 0 4px; }
.desktop-nav { display: flex; align-items: center; gap: 30px; font-size: 12px; font-weight: 500; color: #bec5ba; }
.desktop-nav a:hover { color: var(--lime); }
.header-actions { display: flex; align-items: center; gap: 20px; }
.header-buy { display: flex; align-items: center; gap: 24px; min-height: 42px; padding: 8px 17px; border: 1px solid #65745b; border-radius: 5px; font-size: 12px; font-weight: 700; }
.header-buy:hover { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.menu-toggle { display: none; width: 40px; height: 42px; border: 0; background: transparent; padding: 10px 4px; }
.menu-toggle span { display: block; width: 25px; height: 1px; background: var(--paper); margin: 7px 0; transition: transform .2s; }
.mobile-navigation { padding: 12px 24px 24px; border-top: 1px solid var(--line); }
.mobile-navigation a { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 13px 0; font-size: 16px; }
.mobile-navigation a span { color: var(--muted); font-size: 10px; }
.hero { overflow: hidden; background: radial-gradient(ellipse at 82% 18%, #39462433, transparent 48%), var(--dark); }
.hero-layout { display: grid; grid-template-columns: 1.08fr 1fr; align-items: center; gap: 70px; padding-block: 80px 82px; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--lime); margin-bottom: 28px; }
.hero-description { color: #b9c0b5; max-width: 440px; font-size: 16px; line-height: 1.7; margin-top: 25px; }
.hero-cta { min-width: 216px; margin-top: 30px; }
.hero-proof { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.avatar-stack { display: flex; padding-left: 7px; }
.avatar-stack img { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--dark); object-fit: cover; margin-left: -7px; }
.hero-proof p { max-width: 150px; font-size: 11px; line-height: 1.4; color: var(--muted); }
.hero-proof strong { display: block; font-weight: 600; color: #e1e6dc; }
.hero-visual { position: relative; padding: 36px 27px 50px; min-width: 0; transform: rotate(1.5deg); }
.visual-caption { position: absolute; top: 8px; left: 29px; right: 27px; display: flex; justify-content: space-between; align-items: center; font-family: var(--display-font); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: #c4cdbc; }
.visual-caption span:last-child { color: var(--lime); }
.hero-video-frame { border: 1px solid #4b5b40; padding: 15px; background: #1c2219; box-shadow: 0 30px 70px #0004; aspect-ratio: .9; position: relative; }
.hero-video-frame video { width: 100%; height: 100%; background: #111; object-fit: contain; }
.hero-video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #b9f65be8; color: var(--ink); border: 0; border-radius: 50%; width: 62px; height: 62px; display: grid; place-items: center; box-shadow: 0 5px 20px #0004; }
.hero-video-play svg { fill: currentColor; margin-left: 3px; }
.hero-floating-card { position: absolute; width: 37%; height: 41%; padding: 7px; border: 1px solid #58684c; background: #1e251c; box-shadow: 0 14px 36px #0006; }
.hero-floating-card img { width: 100%; height: 100%; object-fit: contain; }
.hero-floating-one { left: -27px; bottom: 10px; transform: rotate(-10deg); }
.hero-floating-two { right: -27px; top: 23px; transform: rotate(10deg); }
.visual-footnote { display: flex; align-items: center; gap: 7px; font-size: 10px; position: absolute; right: 33px; bottom: 18px; letter-spacing: .06em; text-transform: uppercase; }
.visual-footnote a { display: inline-grid; place-items: center; border: 1px solid #70855d; border-radius: 50%; width: 26px; height: 26px; font-size: 14px; margin-left: 20px; }
.hero-bottom-strip { display: flex; align-items: center; justify-content: center; gap: 33px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: #c4cebc; font-family: var(--display-font); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; padding: 17px 24px; }
.hero-bottom-strip i { width: 4px; height: 4px; background: var(--lime); transform: rotate(45deg); }
.collection-section { padding-bottom: 50px; }
.collection-heading h2 { font-size: clamp(2.7rem, 5.5vw, 5rem); }
.collection-heading .section-description { max-width: 450px; }
.design-track { --card-width: 310px; display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #5c6b50 transparent; padding: 6px max(40px, calc((100vw - 1240px) / 2)) 20px; scroll-padding-left: max(40px, calc((100vw - 1240px) / 2)); }
.design-card { flex: 0 0 var(--card-width); width: var(--card-width); aspect-ratio: .85; background: #1d231b; border: 1px solid #343e2e; border-radius: 4px; overflow: hidden; scroll-snap-align: start; }
.art-button { position: relative; display: block; padding: 0; border: 0; }
.design-card img { width: 100%; height: 100%; object-fit: contain; padding: 8px; transition: transform .45s; }
.art-button:hover img { transform: scale(1.025); }
.art-button::after { content: '+'; display: grid; place-items: center; position: absolute; right: 13px; bottom: 13px; height: 29px; width: 29px; background: #101310b8; border: 1px solid #ffffff35; color: #f6f5f0; border-radius: 50%; font-size: 19px; line-height: 1; opacity: 0; transition: opacity .2s; }
.art-button:hover::after, .art-button:focus-visible::after { opacity: 1; }
.second-track { margin-top: 1px; --card-width: 270px; padding-left: max(90px, calc((100vw - 1240px) / 2 + 110px)); }
.second-track .design-card { aspect-ratio: .9; background: #252a20; }
.collection-footer { border-top: 1px solid var(--line); padding-top: 23px; margin-top: 27px; display: flex; align-items: center; justify-content: space-between; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.collection-footer p { color: var(--muted); }
.tiny-plus { color: var(--lime); padding-right: 14px; font-size: 17px; }
.problem-section { background: var(--paper); color: var(--ink); }
.problem-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: start; }
.problem-section .kicker { color: #6a7560; }
.problem-intro h2 { font-size: clamp(2.1rem, 3.8vw, 3.3rem); }
.problem-intro h2 span { color: #6a8f38; }
.problem-intro .copy { color: #646b60; margin-top: 30px; font-size: 16px; }
.problem-intro .copy strong { color: #232a1e; }
.problem-cards { border-top: 1px solid #d3d7cb; }
.problem-card { display: flex; gap: 20px; padding: 28px 0; border-bottom: 1px solid #d3d7cb; }
.problem-number { font-family: var(--display-font); color: #8f9987; font-size: 11px; margin-top: 5px; }
.problem-card h3 { font-size: 19px; }
.problem-card p { font-size: 14px; line-height: 1.6; color: #72796b; margin-top: 9px; }
.difference-bottom { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding-top: 43px; border-top: 1px solid #d3d7cb; margin-top: 55px; }
.difference-bottom p { font-size: 18px; line-height: 1.7; }
.difference-bottom p span { font-size: 14px; color: #6a7361; }
.workflow-section { background: #eaece4; color: var(--ink); }
.workflow-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.workflow-panel, .mockup-panel { min-width: 0; }
.workflow-panel { background: var(--dark); color: var(--paper); padding: 40px; border-radius: 8px; align-self: start; position: sticky; top: 110px; }
.workflow-panel h2 { font-size: 42px; }
.workflow-panel .section-description { font-size: 15px; }
.mockup-panel { padding: 0 12px 0 26px; }
.mockup-heading .kicker { color: #6a7560; }
.mockup-heading h2 { font-size: 42px; }
.mockup-heading .section-description { color: #717a68; font-size: 15px; margin-top: 15px; }
.laptop { margin: 45px -17px 20px; position: relative; }
.laptop-display { aspect-ratio: 1.65; border: 8px solid #30362c; border-bottom-width: 14px; border-radius: 12px 12px 3px 3px; overflow: hidden; }
.laptop-display img { width: 100%; height: 100%; object-fit: contain; background: #101010; }
.laptop-camera { position: absolute; top: 3px; left: calc(50% - 2px); border-radius: 50%; background: #89957c; width: 4px; height: 4px; }
.laptop-bottom { background: linear-gradient(#6b7462, #30362c); height: 10px; margin: 0 -10px; border-radius: 2px 2px 50% 50%; }
.shirt-stage { position: relative; aspect-ratio: 1; margin-top: 10px; }
.shirt-base { height: 100%; width: 100%; object-fit: contain; }
.shirt-print-area { position: absolute; top: 25%; left: 33%; width: 34%; height: 42%; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.shirt-print-area img { width: 100%; height: 100%; object-fit: contain; transform: scale(var(--print-scale, 1)) translateY(var(--print-y, -8px)); }
.mockup-arrow-controls { display: flex; align-items: center; gap: 22px; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; background: #f6f5f0de; border-radius: 35px; padding: 6px; box-shadow: 0 3px 20px #2430180c; }
.mockup-arrow-controls .round-button { width: 37px; height: 37px; font-size: 17px; border-color: #d7ddce; }
.mockup-arrow-controls span { font-size: 10px; letter-spacing: .1em; white-space: nowrap; }
.mockup-thumbnails { display: flex; gap: 8px; overflow-x: auto; padding: 20px 0 10px; scrollbar-width: thin; scrollbar-color: #a0ae91 transparent; }
.mockup-thumb { flex: 0 0 60px; height: 63px; border: 1px solid #d0d5c8; border-radius: 3px; background: #171d14; padding: 4px; opacity: .6; }
.mockup-thumb.is-active { border: 2px solid #759f37; opacity: 1; }
.mockup-thumb img { width: 100%; height: 100%; object-fit: contain; }
.lifestyle-gallery { display: flex; gap: 20px; margin-top: 90px; }
.lifestyle-card { flex: 1 1 0; min-width: 0; border-radius: 5px; overflow: hidden; background: #d7dccd; }
.lifestyle-card img { width: 100%; height: auto; }
.bestsellers-layout { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 90px; }
.bestsellers-copy h2 { font-size: clamp(3rem, 5vw, 4.8rem); }
.bestsellers-copy .section-description { max-width: 360px; }
.phone-direction { width: 130px; margin: 28px 0 0 190px; transform: rotate(5deg); }
.phone-direction svg { width: 100%; fill: none; stroke: var(--lime); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.phone-showcase { position: relative; display: flex; justify-content: center; }
.phone-frame { width: 345px; height: 650px; position: relative; padding: 12px; border: 2px solid #65725c; border-radius: 49px; background: #080b07; box-shadow: 0 30px 100px #0007, 0 0 0 6px #1c2318; z-index: 1; }
.phone-scroll { height: 100%; overflow-y: auto; border-radius: 36px; background: #e5e8df; padding: 40px 10px 35px; scrollbar-width: none; overscroll-behavior: contain; }
.phone-scroll::-webkit-scrollbar { display: none; }
.phone-scroll .art-button { background: #f0f2ec; border-radius: 9px; width: 100%; margin-bottom: 11px; overflow: hidden; }
.phone-scroll .art-button img { width: 100%; height: auto; object-fit: contain; }
.phone-scroll .art-button::after { opacity: 1; width: 25px; height: 25px; font-size: 16px; right: 10px; bottom: 10px; }
.phone-notch { position: absolute; z-index: 2; top: 12px; left: calc(50% - 47px); width: 94px; height: 24px; background: #080b07; border-radius: 0 0 18px 18px; }
.phone-home-indicator { width: 96px; height: 4px; border-radius: 3px; position: absolute; bottom: 18px; left: calc(50% - 48px); z-index: 2; background: #101310; }
.phone-orbit { position: absolute; top: 50%; left: 50%; width: 500px; height: 500px; transform: translate(-50%, -50%); border: 1px solid #3c4d2d; border-radius: 50%; opacity: .5; }
.orbit-two { width: 615px; height: 615px; opacity: .25; }
.payoff-section { color: var(--ink); background: var(--lime); text-align: center; }
.payoff-content { max-width: 900px; }
.payoff-content .kicker { color: #4d6b2c; }
.payoff-content h2 { font-size: clamp(2.3rem, 4.9vw, 4.4rem); }
.payoff-content h2 span { color: #4c6e25; }
.payoff-content .copy { max-width: 580px; margin: 30px auto 0; font-size: 16px; color: #3d5528; }
.payoff-arrow { display: block; font-size: 22px; margin: 25px 0 18px; }
.payoff-content .btn { min-width: 260px; }

/* Shared dialogs and mobile conversion controls. */
dialog { border: 1px solid #4b5940; color: var(--paper); background: var(--dark); padding: 0; max-width: calc(100vw - 30px); max-height: calc(100dvh - 30px); border-radius: 12px; box-shadow: 0 30px 120px #0007; }
dialog::backdrop { background: #030603d9; backdrop-filter: blur(5px); }
.modal-close, [data-close-modal] { position: absolute; right: 14px; top: 12px; z-index: 5; width: 40px; height: 40px; border: 1px solid #ffffff30; border-radius: 50%; background: #101310db; color: #fff; font-size: 25px; line-height: 1; }
.lightbox { width: min(1000px, calc(100vw - 24px)); background: #151b12; overflow: hidden; }
.lightbox-inner { height: min(85dvh, 880px); padding: 34px 60px; display: flex; align-items: center; justify-content: center; }
.lightbox-inner img { max-height: 100%; width: 100%; object-fit: contain; }
.lightbox-nav { position: absolute; top: calc(50% - 24px); z-index: 5; background: #111a10aa; border-color: #8c9a7a; }
.lightbox-prev { left: 12px; }.lightbox-next { right: 12px; }
.video-modal { width: min(980px, calc(100vw - 30px)); padding: 50px 10px 10px; }
.video-embed { aspect-ratio: 16 / 9; }.video-embed iframe { display: block; border: 0; width: 100%; height: 100%; }
.mobile-buybar { display: none; }

@media (min-width: 1600px) { .design-track { --card-width: 350px; } .second-track { --card-width: 310px; } }
@media (max-width: 1100px) {
  .hero-layout { gap: 38px; } .hero-floating-one { left: -10px; }.hero-floating-two { right: -10px; }
  .hero-visual { padding-inline: 15px; } .desktop-nav { gap: 20px; }
  .problem-layout { gap: 55px; } .workflow-panel { padding: 30px; }.mockup-panel { padding-left: 0; }
  .bestsellers-layout { gap: 60px; } .phone-orbit { width: 420px; height: 420px; }.orbit-two { width: 510px; height: 510px; }
}
@media (max-width: 800px) {
  .container { width: calc(100% - 48px); } .header-inner { width: calc(100% - 48px); min-height: 68px; }
  .desktop-nav { display: none; }.menu-toggle { display: block; }.header-buy { min-height: 39px; padding-inline: 13px; gap: 15px; }
  .header-actions { gap: 16px; } .wordmark { font-size: 29px; }.brand-slash { height: 24px; }
  .section { padding-block: 72px; } .hero-layout { grid-template-columns: 1fr; gap: 45px; max-width: 640px; padding-block: 52px 44px; }
  .hero-copy h1 { max-width: 620px; font-size: clamp(2.5rem, 7vw, 3.8rem); }
  .hero-description { max-width: 500px; }.hero-proof p { max-width: none; }.hero-proof strong { display: inline; }
  .hero-visual { width: 85%; max-width: 450px; margin: 0 auto; padding: 32px 15px 45px; }.hero-video-frame { aspect-ratio: 1; }
  .hero-floating-one { left: -25px; bottom: 17px; }.hero-floating-two { right: -25px; top: 18px; }
  .visual-caption { left: 15px; right: 15px; top: 4px; }.visual-footnote { bottom: 9px; right: 20px; }
  .hero-bottom-strip { gap: 16px; font-size: 8px; letter-spacing: .04em; padding: 15px 20px; }.hero-bottom-strip i { width: 3px; height: 3px; flex-shrink: 0; }
  .collection-heading h2 { font-size: 52px; }.collection-heading .section-description { font-size: 15px; max-width: 360px; }
  .design-track { --card-width: 285px; padding-inline: 24px; scroll-padding-left: 24px; gap: 13px; }.second-track { --card-width: 255px; padding-left: 65px; }
  .collection-section { padding-bottom: 40px; }.collection-footer { margin-top: 18px; }
  .problem-layout { grid-template-columns: 1fr; gap: 35px; }.problem-intro h2 { max-width: 620px; font-size: 42px; }.problem-intro .copy { max-width: 580px; margin-top: 25px; }
  .problem-cards { display: grid; grid-template-columns: 1fr 1fr; border-top: 0; gap: 0 28px; }.problem-card { border-top: 1px solid #d3d7cb; border-bottom: 0; }.problem-card h3 { font-size: 17px; }
  .difference-bottom { margin-top: 24px; align-items: flex-start; }.difference-bottom p { max-width: 330px; font-size: 16px; }.difference-bottom .btn { white-space: nowrap; gap: 24px; }
  .workflow-layout { grid-template-columns: 1fr; gap: 54px; }.workflow-panel { position: static; max-width: 650px; }.workflow-panel h2, .mockup-heading h2 { font-size: 42px; }.laptop { margin: 35px 5px 15px; }
  .mockup-panel { padding: 0; }.shirt-stage { max-width: 520px; margin-inline: auto; }.mockup-thumbnails { max-width: 600px; margin-inline: auto; }
  .lifestyle-gallery { gap: 14px; margin-top: 60px; overflow-x: auto; width: 100%; padding-inline: 24px; scroll-snap-type: x mandatory; scrollbar-width: none; }.lifestyle-card { flex: 0 0 74vw; scroll-snap-align: center; max-width: 400px; }
  .bestsellers-layout { grid-template-columns: 1fr; gap: 42px; }.bestsellers-copy h2 { font-size: 52px; }.bestsellers-copy .section-description { max-width: 400px; }.phone-direction { display: none; }
  .phone-orbit { width: 450px; height: 450px; }.orbit-two { width: 570px; height: 570px; }.bestsellers-section { overflow: hidden; }
  .payoff-content h2 { font-size: 43px; }.payoff-content .copy { font-size: 16px; }
}
@media (max-width: 520px) {
  .container { width: calc(100% - 40px); }.header-inner { width: calc(100% - 40px); }.header-buy { font-size: 11px; gap: 12px; }.header-actions { gap: 9px; }
  .hero-layout { padding-top: 35px; gap: 38px; }.eyebrow { font-size: 10px; margin-bottom: 22px; letter-spacing: .12em; }.hero-copy h1 { font-size: 37px; line-height: 1.08; letter-spacing: -.05em; }
  .hero-description { font-size: 15px; line-height: 1.7; margin-top: 22px; }.hero-cta { margin-top: 25px; width: 100%; }.hero-proof { margin-top: 20px; }.hero-proof p { font-size: 10px; }
  .hero-visual { width: 90%; padding-inline: 12px; }.hero-video-frame { padding: 9px; }.visual-caption { left: 12px; right: 12px; font-size: 7px; }.hero-floating-card { width: 39%; height: 41%; padding: 4px; }.hero-floating-two { right: -20px; }.hero-floating-one { left: -19px; }
  .visual-footnote { font-size: 8px; right: 14px; }.visual-footnote a { margin-left: 12px; }
  .hero-bottom-strip { flex-wrap: wrap; gap: 9px 14px; line-height: 1.7; font-size: 8px; }.hero-bottom-strip span:last-child { width: 100%; text-align: center; }.hero-bottom-strip i:nth-of-type(2) { display: none; }
  .section { padding-block: 60px; }.kicker { font-size: 9px; margin-bottom: 18px; }.section-head { gap: 12px; margin-bottom: 27px; }.collection-heading h2 { font-size: 39px; }.collection-heading .section-description { font-size: 14px; margin-top: 19px; max-width: 260px; }
  .gallery-controls { gap: 6px; padding-bottom: 2px; }.gallery-controls .round-button { width: 35px; height: 35px; font-size: 17px; }.collection-heading { align-items: center; }.design-track { --card-width: 77vw; padding-left: 20px; padding-right: 20px; scroll-padding-left: 20px; gap: 12px; }.second-track { --card-width: 68vw; padding-left: 46px; }
  .design-card { aspect-ratio: .87; }.collection-footer { font-size: 8px; margin-top: 20px; padding-top: 20px; }.collection-footer .text-link { font-size: 10px; }.text-link span { padding-left: 10px; }.tiny-plus { padding-right: 7px; }
  .problem-intro h2 { font-size: 34px; line-height: 1.13; }.problem-intro .copy { font-size: 15px; line-height: 1.8; }.problem-cards { grid-template-columns: 1fr; gap: 0; }.problem-card { padding-block: 24px; gap: 15px; }.problem-card h3 { font-size: 18px; }.problem-card p { font-size: 14px; }
  .difference-bottom { flex-direction: column; padding-top: 30px; gap: 24px; }.difference-bottom p { max-width: none; font-size: 18px; line-height: 1.65; }.difference-bottom p span { display: block; font-size: 14px; margin-top: 9px; }.difference-bottom p br { display: none; }.difference-bottom .btn { width: 100%; }
  .workflow-panel { padding: 28px 22px 22px; }.workflow-panel h2, .mockup-heading h2 { font-size: 35px; }.workflow-panel .section-description, .mockup-heading .section-description { font-size: 14px; }.laptop { margin: 30px 0 20px; }.laptop-display { border-width: 5px; border-bottom-width: 8px; border-radius: 6px 6px 1px 1px; }.laptop-camera { top: 1px; width: 3px; height: 3px; }.laptop-bottom { height: 6px; margin-inline: -7px; }
  .shirt-stage { margin-top: 15px; }.mockup-thumb { flex-basis: 58px; height: 58px; }.mockup-arrow-controls { gap: 18px; }.mockup-arrow-controls .round-button { width: 34px; height: 34px; }.mockup-thumbnails { padding-top: 20px; }
  .lifestyle-gallery { padding-inline: 20px; margin-top: 40px; gap: 12px; }.lifestyle-card { flex-basis: 82vw; }
  .bestsellers-copy h2 { font-size: 46px; }.bestsellers-copy .section-description { font-size: 15px; }.bestsellers-layout { gap: 34px; }.phone-frame { width: min(315px, calc(100vw - 65px)); height: 595px; border-radius: 43px; padding: 10px; }.phone-scroll { border-radius: 31px; padding-top: 37px; }.phone-notch { top: 10px; height: 22px; }.phone-orbit { width: 360px; height: 360px; }.orbit-two { width: 450px; height: 450px; }
  .payoff-content h2 { font-size: 35px; }.payoff-content h2 br { display: none; }.payoff-content .copy { font-size: 15px; line-height: 1.75; margin-top: 25px; }.payoff-content .btn { width: 100%; }.payoff-arrow { margin-top: 22px; }
  .lightbox-inner { height: 78dvh; padding: 52px 25px 25px; }.lightbox-nav { width: 35px; height: 35px; font-size: 18px; top: auto; bottom: 9px; }.lightbox-prev { left: 12px; }.lightbox-next { right: 12px; }
  .mobile-buybar { position: fixed; left: 10px; right: 10px; bottom: calc(9px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 20px; padding: 10px 12px 10px 18px; border: 1px solid #566749; background: #172012f5; backdrop-filter: blur(15px); color: var(--paper); z-index: 25; border-radius: 8px; box-shadow: 0 10px 50px #0005; transform: translateY(150%); transition: transform .3s; }
  .mobile-buybar.is-visible { transform: translateY(0); }.mobile-buybar .mobile-price { line-height: 1.1; min-width: 59px; font-family: var(--display-font); font-size: 25px; font-weight: 700; }.mobile-price s { color: var(--muted); font-size: 11px; margin-left: 4px; font-weight: 400; }.mobile-buybar .btn { flex: 1; padding: 10px 14px; font-size: 12px; min-height: 43px; gap: 5px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

/* The offer, proof and supporting content. */
.muted { color: var(--muted); }
.bonuses { background: var(--paper); color: var(--ink); }
.bonuses > .container > .section-head { display: block; max-width: 780px; margin-bottom: 42px; }
.bonuses .kicker { color: #78856d; }
.bonuses h2 { font-size: 43px; line-height: 1.13; }
#bonus-date { color: #6a8f38; }
.bonus-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 22px; }
.bonus-card { position: relative; padding: 34px; background: #fff; border: 1px solid #dce1d3; border-radius: 7px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.bonus-card:nth-child(1) { grid-column: 1 / 8; }.bonus-card:nth-child(2) { grid-column: 8 / 13; }.bonus-card:nth-child(3) { grid-column: 1 / 7; }.bonus-card:nth-child(4) { grid-column: 7 / 13; }
.bonus-index { font-family: var(--display-font); font-size: 10px; letter-spacing: .1em; font-weight: 600; color: #5c7d33; background: #ecf5df; align-self: flex-start; padding: 6px 10px; border-radius: 3px; margin-bottom: 24px; }
.bonus-card h3 { font-size: 26px; line-height: 1.17; max-width: 420px; margin-bottom: 18px; }
.bonus-card .copy { font-size: 14px; line-height: 1.75; color: #767e6e; }
.feature-list { list-style: none; padding: 0; margin: 22px 0; font-size: 13px; }
.feature-list li { position: relative; padding-left: 23px; line-height: 1.6; margin: 11px 0; }
.feature-list li::before { content: '✓'; position: absolute; left: 0; top: 0; color: #6c9538; font-weight: 700; }
.bonus-gallery { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #c1cbb4 transparent; margin: 8px -8px 24px; padding: 4px 8px 14px; scroll-snap-type: x mandatory; }
.bonus-gallery .art-button { flex: 0 0 190px; height: 230px; padding: 10px; background: #182013; border: 1px solid #323f26; border-radius: 4px; scroll-snap-align: start; }
.bonus-gallery img { width: 100%; height: 100%; object-fit: contain; }
.bonus-card:nth-child(3) .bonus-gallery { margin-top: 5px; }
.bonus-card:nth-child(3) .bonus-gallery .art-button { flex: 1 0 100%; height: 290px; background: #e5e8df; padding: 0; }
.bonus-price { margin-top: auto; display: flex; align-items: center; gap: 12px; border-top: 1px solid #e1e5d9; padding-top: 20px; }
.old-price, .price-old { text-decoration: line-through; color: #97a08c; font-weight: 400; }
.bonus-price .old-price { font-size: 15px; }.bonus-price .new-price { font-family: var(--display-font); color: #5b812e; font-size: 24px; font-weight: 700; }
.bonus-card:nth-child(2)::after, .bonus-card:nth-child(4)::after { font-family: var(--display-font); position: absolute; right: 15px; bottom: 50px; font-size: 190px; line-height: 1; letter-spacing: -.08em; color: #83966e0d; pointer-events: none; }
.bonus-card:nth-child(2)::after { content: '02'; }.bonus-card:nth-child(4)::after { content: '04'; }
.bonus-total { display: flex !important; align-items: center; justify-content: space-between; gap: 20px; max-width: none !important; border-top: 1px solid #cdd5c3; margin: 42px 0 0 !important; padding-top: 30px; }
.bonus-total h2 { font-size: 24px; letter-spacing: -.025em; }.bonus-total h3 { font-size: 18px; color: #6a8f38; }
.reviews .section-head { display: block; position: relative; padding-right: 120px; }
.reviews .section-head > .eyebrow { color: var(--lime); font-size: 15px; letter-spacing: .15em; margin-bottom: 16px; }
.reviews .section-head h2 { max-width: 650px; }.reviews .section-head .copy { font-size: 15px; margin-top: 18px; }
.review-controls { position: absolute; right: 0; bottom: 0; }
.review-track { display: flex; overflow-x: auto; gap: 18px; padding-bottom: 25px; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #566749 transparent; }
.review-card { flex: 0 0 360px; background: #1b2217; border: 1px solid #35422b; border-radius: 6px; padding: 28px; scroll-snap-align: start; }
.review-person { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.review-person img { width: 42px; height: 42px; object-fit: cover; border-radius: 50%; }
.review-person strong { font-size: 13px; font-weight: 600; }.review-person span { display: block; color: #89977d; font-size: 10px; margin-top: 3px; }
.review-card .eyebrow { color: var(--lime); font-size: 11px; margin-bottom: 15px; letter-spacing: .1em; }
.review-card .copy { font-size: 15px; line-height: 1.75; color: #d3dccb; }
.verified { font-size: 10px; color: #9dba83; padding-top: 22px; margin-top: 24px; border-top: 1px solid #34402b; }
.videos { background: #191f16; padding-top: 65px; }.videos .section-head { justify-content: center; text-align: center; }.videos h2 { font-size: 43px; }.videos h2 span { color: var(--lime); }
.video-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.video-card { overflow: hidden; border-radius: 7px; border: 1px solid #4b5c3b; background: #0e130c; }
.video-trigger { position: relative; padding: 0; border: 0; width: 100%; background: transparent; aspect-ratio: 16 / 9; }
.video-trigger img { width: 100%; height: 100%; object-fit: contain; opacity: .8; transition: opacity .3s; }.video-trigger:hover img { opacity: 1; }
.video-trigger > span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; padding-left: 4px; width: 60px; height: 60px; color: var(--ink); background: var(--lime); font-size: 20px; border-radius: 50%; box-shadow: 0 7px 24px #0004; }
.pricing-section { background: radial-gradient(ellipse at 10% 30%, #30432270, transparent 60%), #101710; }
.pricing-section > .container { display: grid; grid-template-columns: 1fr .9fr; gap: 110px; align-items: center; }
.pricing-section .section-head { display: block; margin: 0; min-width: 0; }.pricing-section h2 { font-size: 74px; line-height: 1; max-width: 440px; }.pricing-section h2 span { color: var(--lime); }
.pricing-art { display: flex; height: 235px; align-items: center; margin-top: 70px; padding-inline: 10px; }
.pricing-art-card { width: 37%; flex: 0 0 37%; height: 100%; background: #222d1b; border: 1px solid #536742; padding: 5px; transform: rotate(-10deg); border-radius: 4px; box-shadow: 0 14px 40px #0005; }
.pricing-art-card:nth-child(2) { transform: rotate(1deg); margin-left: -6%; z-index: 1; }.pricing-art-card:nth-child(3) { transform: rotate(11deg); margin-left: -6%; }
.pricing-art-card img { width: 100%; height: 100%; object-fit: contain; }
.pricing-card { background: var(--paper); color: var(--ink); border: 1px solid var(--lime); border-radius: 10px; padding: 42px; position: relative; }
.pricing-card > .eyebrow { background: var(--lime); color: var(--ink); border-radius: 3px; padding: 7px 12px; display: inline-block; margin-bottom: 26px; letter-spacing: .12em; font-size: 9px; }
.pricing-card h3 { font-size: 35px; }.pricing-card > .muted { font-size: 14px; margin-top: 9px; color: #7f8b73; }
.pricing-card .price { display: inline-block; font-family: var(--display-font); font-weight: 700; font-size: 88px; line-height: 1; letter-spacing: -.075em; margin-top: 30px; }
.pricing-card > .price-old { display: inline-block; margin-left: 16px; font-size: 25px; }
.pricing-feature-list { border-top: 1px solid #d8decf; padding-top: 20px; margin-top: 28px; margin-bottom: 26px; font-size: 14px; }
.pricing-feature-list li { margin: 13px 0; padding-left: 27px; }.pricing-feature-list li::before { color: #658c33; }
.bonus-badge { background: #e2edcf; border: 1px dashed #7c9f4c; border-radius: 3px; color: #4a6d25; font-size: 11px; font-weight: 700; padding: 9px; margin-top: 20px; text-align: center; }
.trust-badges { text-align: center; padding: 19px 0 24px; border-top: 1px solid #d8decf; }.trust-badges p:first-child { color: #8b967e; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }.trust-badges p:last-child { color: #555f4c; font-size: 11px; font-weight: 700; margin-top: 10px; }
.pricing-card > .btn { width: 100%; background: var(--ink); color: var(--paper); justify-content: center; }
.offer-tools { border-top: 1px solid #d8decf; margin-top: 24px; padding-top: 13px; }
.offer-tools button { width: 100%; display: flex; justify-content: space-between; gap: 10px; border: 0; background: transparent; color: #6b7d5a; padding: 9px 0; font-size: 10px; text-align: left; }
.offer-tools button:hover { color: var(--ink); }.offer-tools button span { font-size: 15px; }
.faq-section { background: var(--paper); color: var(--ink); }.faq-section > .container { display: grid; grid-template-columns: .8fr 1.2fr; gap: 100px; align-items: start; }.faq-section .section-head { margin: 0; }.faq-section h2 { font-size: 46px; }.faq-section h2 span { color: #72963f; }
.faq-list { border-top: 1px solid #cbd4c1; }.faq-item { border-bottom: 1px solid #cbd4c1; padding: 24px 0; }.faq-item summary { list-style: none; display: flex; justify-content: space-between; gap: 25px; font-weight: 600; font-size: 16px; cursor: pointer; line-height: 1.5; }.faq-item summary::-webkit-details-marker { display: none; }.faq-item summary::after { content: '+'; color: #6d913d; font-size: 24px; font-weight: 400; flex-shrink: 0; line-height: 1; }.faq-item[open] summary::after { content: '−'; }.faq-answer { margin-top: 18px; color: #77836c; font-size: 14px; line-height: 1.8; padding-right: 25px; }
.guarantee-box { text-align: center; max-width: 860px; margin: auto; padding: 50px 60px; border: 1px solid #3a4b2e; border-radius: 8px; background: #192214; }.guarantee-seal { width: 70px; height: 70px; display: grid; place-items: center; color: var(--lime); border: 1px solid #749951; border-radius: 50%; font-size: 32px; margin: 0 auto 28px; }.guarantee-box h2 { font-size: 39px; margin-bottom: 25px; }.guarantee-box .copy { font-size: 14px; max-width: 610px; margin-inline: auto; line-height: 1.8; }.guarantee-box .copy + .copy { margin-top: 18px; }.guarantee-box strong { color: #dce7d4; }
.footer { border-top: 1px solid #303e26; padding: 30px 40px; display: flex; justify-content: space-between; gap: 20px; color: #77866b; font-size: 10px; }
.popup { width: 480px; }.popup-content { padding: 48px 38px 32px; text-align: center; }.popup h2 { font-size: 32px; letter-spacing: -.04em; line-height: 1.1; }.popup h2 span { color: var(--lime); }.popup .copy { font-size: 13px; line-height: 1.8; margin-top: 20px; }.popup .eyebrow { justify-content: center; color: var(--lime); font-size: 9px; }.popup .btn { width: 100%; justify-content: center; font-size: 13px; }.popup p.muted:last-child { font-size: 9px; margin-top: 16px; }
.wheel-container { position: relative; width: 280px; margin: 30px auto 24px; }.wheel { width: 100%; aspect-ratio: 1; border: 6px solid #36472b; border-radius: 50%; overflow: hidden; position: relative; background: conic-gradient(#212a1b 0deg 45deg, var(--lime) 45deg 90deg, #212a1b 90deg 135deg, var(--lime) 135deg 180deg, #212a1b 180deg 225deg, var(--lime) 225deg 270deg, #212a1b 270deg 315deg, var(--lime) 315deg 360deg); transition: transform 4s cubic-bezier(.12,.8,.1,1); }.wheel::after { content: '+'; position: absolute; inset: calc(50% - 21px); background: #14200c; border: 2px solid #72994d; border-radius: 50%; display: grid; place-items: center; color: var(--lime); font-size: 24px; }.wheel-segment { position: absolute; inset: 0; transform: rotate(calc(45deg * (var(--i) - .5))); }.wheel-segment span { position: absolute; left: 50%; top: 24%; transform: translate(-50%, -50%) rotate(90deg); white-space: nowrap; font-size: 8px; font-weight: 700; line-height: 1; }.wheel-segment:nth-child(even) span { color: #18270d; }.wheel-arrow { position: absolute; z-index: 2; left: calc(50% - 11px); top: -5px; border-left: 11px solid transparent; border-right: 11px solid transparent; border-top: 25px solid #fff; }
.offer-price-box { margin: 26px 0; font-family: var(--display-font); display: flex; gap: 22px; align-items: center; justify-content: center; }.offer-price-box .price-old { font-size: 25px; }.offer-price-box .price-new { font-size: 66px; line-height: 1; letter-spacing: -.06em; color: var(--lime); }.price-arrow { color: #a9ba9b; font-size: 25px; }
.success-bar-bottom { position: fixed; z-index: 42; bottom: 0; left: 0; right: 0; background: var(--lime); color: var(--ink); border-top: 1px solid #638332; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -5px 30px #0003; }.success-bar-bottom .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; }.success-bar-bottom span { font-size: 12px; }.success-bar-bottom .btn { min-height: 39px; padding: 10px 18px; background: var(--ink); color: var(--paper); font-size: 10px; }.coupon-active .mobile-buybar { display: none; }
@media (max-width: 1100px) { .pricing-section > .container { gap: 70px; }.pricing-section h2 { font-size: 64px; }.pricing-card { padding: 34px; }.faq-section > .container { gap: 60px; }.bonus-card { padding: 28px; } }
@media (max-width: 800px) {
  .bonuses h2 { font-size: 37px; }.bonus-grid { grid-template-columns: 1fr 1fr; gap: 16px; }.bonus-card:nth-child(n) { grid-column: auto; }.bonus-card:nth-child(1) { grid-column: 1 / -1; }.bonus-card:nth-child(3) { grid-column: 1 / -1; }.bonus-card:nth-child(4) { grid-column: 1 / -1; }.bonus-card:nth-child(2) { grid-column: 1 / -1; }.bonus-card h3 { font-size: 25px; max-width: none; }.bonus-gallery .art-button { flex-basis: 230px; height: 260px; }.bonus-card:nth-child(3) .bonus-gallery .art-button { height: 340px; }.bonus-total h2 { font-size: 21px; }.bonus-total h3 { font-size: 15px; }
  .review-card { flex-basis: 340px; }.reviews .section-head h2 { font-size: 41px; }.reviews .section-head { padding-right: 80px; }.review-controls { gap: 5px; }.review-controls .round-button { width: 35px; height: 35px; font-size: 17px; }.video-grid { gap: 16px; }.video-trigger > span { width: 48px; height: 48px; font-size: 17px; }
  .pricing-section > .container { grid-template-columns: 1fr; gap: 38px; max-width: 580px; }.pricing-section h2 { font-size: 55px; max-width: 450px; }.pricing-art { display: none; }.pricing-card { padding: 40px; }.pricing-section .section-head { text-align: center; }.pricing-section h2 { margin: auto; }
  .faq-section > .container { grid-template-columns: 1fr; gap: 34px; }.faq-section h2 { font-size: 40px; max-width: 420px; }.guarantee-box { padding: 42px 32px; }.guarantee-box h2 { font-size: 35px; }.footer { padding-inline: 24px; }
}
@media (max-width: 520px) {
  .bonuses > .container > .section-head { margin-bottom: 28px; }.bonuses h2 { font-size: 31px; line-height: 1.14; }.bonus-grid { gap: 16px; }.bonus-card { padding: 26px 23px; }.bonus-index { font-size: 9px; margin-bottom: 21px; }.bonus-card h3 { font-size: 23px; }.bonus-card .copy { font-size: 14px; }.feature-list { font-size: 13px; margin-block: 18px; }.feature-list li { margin-block: 10px; }.bonus-gallery { margin-left: -9px; margin-right: -23px; padding-left: 9px; padding-right: 23px; }.bonus-gallery .art-button { flex-basis: 225px; height: 270px; }.bonus-card:nth-child(3) .bonus-gallery { margin-right: -9px; }.bonus-card:nth-child(3) .bonus-gallery .art-button { height: 290px; }.bonus-price { padding-top: 18px; }.bonus-total { display: block !important; padding-top: 25px; margin-top: 30px !important; }.bonus-total h2 { font-size: 23px; }.bonus-total h3 { margin-top: 12px; font-size: 16px; }
  .reviews .section-head { padding-right: 0; }.reviews .section-head > .eyebrow { font-size: 13px; }.reviews .section-head h2 { font-size: 36px; max-width: 320px; }.reviews .section-head .copy { font-size: 14px; max-width: 285px; }.review-controls { position: static; margin-top: 23px; }.review-track { gap: 12px; margin-right: -20px; padding-right: 20px; }.review-card { flex-basis: 82vw; padding: 25px; }.review-card .copy { font-size: 14px; }.review-person { margin-bottom: 22px; }.review-person img { width: 40px; height: 40px; }.verified { margin-top: 20px; padding-top: 18px; }
  .videos h2 { font-size: 34px; }.video-grid { grid-template-columns: 1fr; gap: 18px; }.video-trigger > span { width: 55px; height: 55px; }.pricing-section h2 { font-size: 46px; max-width: 350px; }.pricing-section > .container { gap: 29px; }.pricing-card { padding: 30px 26px; }.pricing-card > .eyebrow { margin-bottom: 23px; }.pricing-card h3 { font-size: 31px; }.pricing-card .price { font-size: 82px; margin-top: 25px; }.pricing-card > .price-old { font-size: 23px; }.pricing-feature-list { padding-top: 17px; margin-top: 24px; }.pricing-feature-list li { margin-block: 12px; }.pricing-card > .btn { min-height: 56px; }.offer-tools { margin-top: 23px; }.offer-tools button { font-size: 10px; padding-block: 11px; }
  .faq-section h2 { font-size: 35px; max-width: 300px; }.faq-section > .container { gap: 25px; }.faq-item { padding-block: 23px; }.faq-item summary { font-size: 15px; gap: 18px; }.faq-answer { font-size: 14px; padding-right: 12px; margin-top: 16px; }.guarantee-box { padding: 35px 24px; }.guarantee-seal { width: 61px; height: 61px; font-size: 28px; margin-bottom: 24px; }.guarantee-box h2 { font-size: 31px; line-height: 1.12; }.guarantee-box .copy { font-size: 13px; }.footer { flex-direction: column; gap: 8px; padding: 27px 20px 105px; font-size: 9px; }
  .popup-content { padding: 54px 23px 26px; }.popup h2 { font-size: 29px; }.popup .copy { font-size: 12px; }.wheel-container { width: min(260px, 70vw); margin-top: 25px; }.wheel-segment span { font-size: 7px; }.popup .btn { min-height: 52px; font-size: 12px; }.offer-price-box { margin-block: 23px; }.offer-price-box .price-new { font-size: 60px; }.success-bar-bottom .container { gap: 12px; }.success-bar-bottom span { font-size: 9px; max-width: 240px; line-height: 1.6; }.success-bar-bottom .btn { white-space: nowrap; padding-inline: 13px; font-size: 9px; }
}

/* Original black-ink prints need a pale canvas; transparent artwork is never cropped. */
.art-button.light-art, .mockup-thumb.light-art { background: #e9ecdf; border-color: #d4dcc8; }
.hero-video-frame { background: #e9ecdf; }
.hero-video-frame video { background: #e9ecdf; }
.lightbox-inner.light-art { background: #e9ecdf; }

.shirt-print-area { left: 26%; width: 48%; height: 40%; }

@media (max-width: 520px) { .art-button::after { opacity: 1; } }

.laptop-display .motion-visual { width: 100%; height: 100%; object-fit: contain; background: #101010; }