/* Hallmark · macrostructure: Bento Grid · tone: playful · anchor hue: sky-cyan · theme: Hum · enrichment: E4 floating screenshot · nav: N1 · footer: Ft5 · contrast: pass (40–41) · slop: pass (42–57) · mobile: pass (34, 49, 50–57) */
@import url("tokens.css");

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.65; overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
h1, h2, h3, p, figure, blockquote { margin: 0; }
h1, h2, h3 { font-family: var(--font-display); font-style: normal; letter-spacing: -0.045em; line-height: 0.98; overflow-wrap: anywhere; min-width: 0; }
h1 { font-size: var(--text-display); font-weight: 900; }
h2 { font-size: var(--text-xl); font-weight: 900; }
h3 { font-size: clamp(1.8rem, 3.4vw, 3rem); font-weight: 900; }
h1 span, h2 span, h3 span { color: var(--color-coral); }

.skip-link { position: fixed; top: var(--space-sm); left: var(--space-sm); z-index: 100; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-paper); transform: translateY(-180%); transition: transform var(--dur-fast) var(--ease-out); }
.skip-link:focus { transform: translateY(0); }
.section-shell { width: min(100% - (var(--page-gutter) * 2), 86rem); margin-inline: auto; }

.site-header { position: fixed; z-index: 20; top: 0; left: 0; width: 100%; padding: var(--space-md) var(--page-gutter) 0; pointer-events: none; }
.site-nav { width: 100%; min-height: 3.5rem; margin-inline: auto; padding: 0 0 var(--space-sm); display: flex; align-items: center; gap: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); background: color-mix(in oklch, var(--color-paper) 82%, transparent); pointer-events: auto; transition: background var(--dur-base) var(--ease-out); }
.site-nav.is-scrolled { background: color-mix(in oklch, var(--color-paper) 96%, transparent); }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-xs); flex: 0 0 auto; font-family: var(--font-display); font-weight: 900; font-size: 1rem; line-height: 1; letter-spacing: -0.04em; white-space: nowrap; }
.wordmark small { display: block; margin-top: 0.18rem; color: var(--color-muted); font-family: var(--font-body); font-size: 0.57rem; font-weight: 600; letter-spacing: 0.01em; }
.wordmark-mark { display: block; width: 2.2rem; height: 2.2rem; object-fit: contain; transform: rotate(-4deg); }
.nav-links { display: flex; align-items: center; gap: var(--space-lg); margin-left: auto; color: var(--color-ink-soft); font-size: var(--text-sm); font-weight: 600; }
.nav-links a, .footer-links a, .text-link { transition: color var(--dur-fast) var(--ease-out); }
.nav-links a:hover, .footer-links a:hover, .text-link:hover { color: var(--color-coral); }

.button { min-height: 3rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; padding: 0.7rem 1.2rem; border: var(--rule-hair) solid transparent; border-radius: var(--radius-pill); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer; transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.button:hover { color: var(--color-coral); }
.button:active { transform: translateY(1px); box-shadow: none; }
.button:disabled, .button[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.button--small { min-height: 2.7rem; padding-inline: 1rem; font-size: 0.8rem; }
.button--accent { background: var(--color-accent); color: var(--color-accent-ink); }
.button--accent:hover { background: var(--color-yellow); color: var(--color-ink); }
.button--outline { border-color: var(--color-rule); background: var(--color-paper); color: var(--color-ink); }
.button--outline:hover { border-color: var(--color-cyan); background: var(--color-paper-blue); }
.button--dark { background: var(--color-ink); color: var(--color-paper); }
.button--dark:hover { background: var(--color-coral); color: var(--color-paper); }
.text-link { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--color-ink-soft); font-size: var(--text-sm); font-weight: 700; white-space: nowrap; }
.text-link span { color: var(--color-coral); font-size: 1.2em; }

.hero { min-height: 47rem; display: grid; grid-template-columns: minmax(0, 0.98fr) minmax(0, 1.02fr); align-items: center; gap: clamp(2rem, 6vw, 7rem); padding-top: 8.5rem; padding-bottom: var(--space-4xl); }
.hero-copy { position: relative; z-index: 2; max-width: 41rem; }
.eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: var(--space-lg); color: var(--color-muted); font-size: 0.71rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.eyebrow-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--color-coral); box-shadow: 0 0 0 0.25rem var(--color-paper-pink); }
.hero h1 { max-width: 12ch; font-size: clamp(3.7rem, 7vw, 6.4rem); overflow-wrap: normal; }
.hero-lede { max-width: 34rem; margin-top: var(--space-xl); color: var(--color-ink-soft); font-size: var(--text-lg); line-height: 1.55; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); margin-top: var(--space-2xl); }
.hero-note { display: flex; align-items: center; gap: 0.5rem; margin-top: var(--space-2xl); color: var(--color-muted); font-size: var(--text-sm); }
.tiny-star { width: 0.9rem; height: 0.9rem; background: var(--color-yellow); clip-path: polygon(50% 0%, 61% 37%, 100% 50%, 61% 63%, 50% 100%, 39% 63%, 0% 50%, 39% 37%); }
.hero-art { position: relative; min-height: 38rem; display: grid; place-items: center; }
.hero-art::before { content: ""; position: absolute; inset: 8% 4% 3% 14%; border-radius: 52% 48% 56% 44% / 44% 55% 45% 56%; background: var(--color-paper-mint); transform: rotate(5deg); }
.hero-art::after { content: ""; position: absolute; width: 12rem; height: 5rem; right: 4%; bottom: 7%; border-radius: 50%; background: var(--color-paper-warm); transform: rotate(-12deg); }
.hero-art img { position: relative; z-index: 1; width: min(56%, 23rem); height: 35rem; object-fit: cover; object-position: top center; border: var(--rule-hair) solid var(--color-white); border-radius: var(--radius-lg); box-shadow: 0 30px 60px -34px var(--color-ink-40); transform: rotate(3.5deg); }
.art-sun { position: absolute; z-index: 0; top: 6%; right: 13%; width: 6.5rem; height: 6.5rem; border-radius: 50%; background: var(--color-yellow); opacity: 0.72; }
.art-sun::after { content: ""; position: absolute; inset: -1rem; background: var(--color-yellow); clip-path: polygon(50% 0%, 61% 37%, 100% 50%, 61% 63%, 50% 100%, 39% 63%, 0% 50%, 39% 37%); opacity: 0.55; }
.art-caption { position: absolute; z-index: 2; top: 10%; left: 2%; padding: 0.7rem 1rem; border-radius: var(--radius-sm); background: var(--color-paper); color: var(--color-muted); font-family: var(--font-display); font-size: 0.85rem; font-weight: 800; line-height: 1.05; transform: rotate(-8deg); }
.art-sticker { position: absolute; z-index: 3; display: grid; place-items: center; width: 6.9rem; height: 6.9rem; border-radius: 48% 52% 46% 54%; font-family: var(--font-display); font-size: 0.82rem; font-weight: 800; line-height: 1; text-align: center; }
.art-sticker--top { top: 24%; right: 1%; gap: 0.1rem; background: var(--color-coral); color: var(--color-paper); transform: rotate(10deg); }
.art-sticker--bottom { bottom: 12%; left: 4%; display: flex; gap: 0.35rem; background: var(--color-lilac); color: var(--color-ink); transform: rotate(-9deg); }
.sticker-heart { position: relative; width: 1.45rem; height: 1.25rem; background: var(--color-coral); border-radius: 0.18rem; transform: rotate(-45deg) scale(0.78); }.sticker-heart::before, .sticker-heart::after { content: ""; position: absolute; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: var(--color-coral); }.sticker-heart::before { top: -0.72rem; left: 0; }.sticker-heart::after { top: 0; left: 0.72rem; }

.intro-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); align-items: end; gap: var(--space-3xl); padding-top: var(--space-4xl); padding-bottom: var(--space-2xl); }
.section-heading .eyebrow { margin-bottom: var(--space-md); }
.section-intro { max-width: 31rem; color: var(--color-ink-soft); font-size: var(--text-lg); line-height: 1.55; }

.bento-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(13rem, auto); gap: var(--space-md); padding-bottom: var(--space-4xl); }
.bento-card { position: relative; min-width: 0; min-height: 15rem; display: flex; flex-direction: column; padding: clamp(1.35rem, 3vw, 2.6rem); border-radius: var(--radius-lg); overflow: clip; }
.bento-card--feature { grid-column: span 2; grid-row: span 2; min-height: 34rem; }
.bento-card--tool { grid-column: span 2; }
.bento-card--quote { grid-column: span 1; }
.bento-card--story { grid-column: span 1; }
.bento-card--wide { grid-column: span 4; min-height: 14rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); align-items: center; gap: var(--space-2xl); }
.bento-card--mint { background: var(--color-paper-mint); }
.bento-card--yellow { background: var(--color-yellow); }
.bento-card--pink { background: var(--color-paper-pink); }
.bento-card--blue { background: var(--color-paper-blue); }
.bento-card--paper { border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-warm); }
.card-topline { display: flex; align-items: center; justify-content: space-between; margin-bottom: auto; }
.card-kicker { color: var(--color-muted); font-size: 0.69rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.card-icon { position: relative; display: grid; width: 2.25rem; height: 2.25rem; place-items: center; border-radius: 50%; background: var(--color-white); color: var(--color-coral); box-shadow: 0 8px 20px -16px var(--color-ink-40); }.card-icon::before { content: ""; display: block; }.bento-card--feature .card-icon::before { width: 1rem; height: 1rem; background: var(--color-coral); clip-path: polygon(50% 0%, 61% 37%, 100% 50%, 61% 63%, 50% 100%, 39% 63%, 0% 50%, 39% 37%); }.bento-card--tool .card-icon::before { width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--color-cyan); }.bento-card--story .card-icon::before { width: 1rem; height: 0.8rem; border: 0.17rem solid var(--color-coral); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.bento-card h3 { margin-top: var(--space-xl); }
.bento-card p { max-width: 32rem; margin-top: var(--space-md); color: var(--color-ink-soft); font-size: var(--text-sm); line-height: 1.55; }
.bento-card .text-link { margin-top: auto; padding-top: var(--space-xl); }
.swatch-row { display: flex; gap: 0.5rem; margin-top: var(--space-2xl); }
.swatch-row span { width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 0.3rem solid color-mix(in oklch, var(--color-white) 70%, transparent); }
.swatch-row span:nth-child(1) { background: var(--color-coral); }.swatch-row span:nth-child(2) { background: var(--color-cyan); }.swatch-row span:nth-child(3) { background: var(--color-lilac); }.swatch-row span:nth-child(4) { background: var(--color-mint); }.swatch-row span:nth-child(5) { background: var(--color-ink); }
.quote-mark { color: var(--color-coral); font-family: var(--font-display); font-size: 5rem; font-weight: 900; line-height: 0.5; }
.bento-card blockquote { margin-top: var(--space-lg); font-family: var(--font-display); font-size: clamp(1.45rem, 2.3vw, 2.2rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.08; }
.bento-card blockquote span { color: var(--color-coral); }
.quote-signoff { margin-top: auto; padding-top: var(--space-xl); font-size: var(--text-xs) !important; }
.line-art { position: absolute; right: 1rem; bottom: 1rem; width: 58%; height: 44%; }
.beaver-face, .rabbit-face { position: absolute; display: grid; place-items: center; border: 0.22rem solid var(--color-ink); background: var(--color-paper); }
.beaver-face { right: 5%; bottom: 8%; width: 9rem; height: 7.5rem; border-radius: 47% 47% 44% 44%; transform: rotate(7deg); }
.rabbit-face { left: 0; bottom: 10%; width: 7rem; height: 6.2rem; border-radius: 49% 49% 46% 46%; transform: rotate(-9deg); }
.rabbit-face::before, .rabbit-face::after { content: ""; position: absolute; top: -4.2rem; width: 2.4rem; height: 4.6rem; border: 0.22rem solid var(--color-ink); border-radius: 52% 52% 42% 42%; background: var(--color-paper); }
.rabbit-face::before { left: 0.5rem; transform: rotate(-10deg); }.rabbit-face::after { right: 0.5rem; transform: rotate(10deg); }
.beaver-face i, .rabbit-face i { position: absolute; top: 40%; width: 0.75rem; height: 1rem; border-radius: 50%; background: var(--color-ink); }.beaver-face i:first-child, .rabbit-face i:first-child { left: 27%; }.beaver-face i:nth-child(2), .rabbit-face i:nth-child(2) { right: 27%; }
.beaver-face b, .rabbit-face b { position: absolute; bottom: 21%; width: 2.2rem; height: 1rem; border-bottom: 0.22rem solid var(--color-ink); border-radius: 0 0 50% 50%; }
.leaf-cluster { position: absolute; right: 7%; bottom: -0.5rem; width: 9rem; height: 6rem; transform: rotate(-8deg); }
.leaf-cluster span { position: absolute; bottom: 0; width: 3rem; height: 5rem; border: 0.18rem solid var(--color-mint); border-radius: 100% 0 100% 0; transform-origin: bottom left; }.leaf-cluster span:nth-child(1) { left: 0; transform: rotate(-35deg); }.leaf-cluster span:nth-child(2) { left: 2.5rem; height: 6rem; transform: rotate(2deg); }.leaf-cluster span:nth-child(3) { left: 5rem; transform: rotate(35deg); }

.peek { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 8vw, 9rem); padding-top: var(--space-2xl); padding-bottom: var(--space-4xl); }
.peek-visual { min-height: 34rem; display: grid; place-items: center; padding: var(--space-xl); border-radius: var(--radius-xl); background: var(--color-paper-mint); }
.peek-visual img { width: min(100%, 19rem); height: 31rem; object-fit: cover; object-position: top; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); transform: rotate(-4deg); }
.peek-copy { max-width: 35rem; }.peek-copy > p:not(.eyebrow) { margin-top: var(--space-xl); color: var(--color-ink-soft); font-size: var(--text-lg); line-height: 1.55; }.peek-copy .button { margin-top: var(--space-2xl); }

.closing-cta { position: relative; display: grid; place-items: center; min-height: 31rem; margin-bottom: var(--space-4xl); padding: var(--space-3xl) var(--space-xl); border-radius: var(--radius-xl); background: var(--color-paper-blue); color: var(--color-ink); text-align: center; overflow: clip; }
.closing-cta .eyebrow { color: var(--color-ink-soft); }.closing-cta h2 span { color: var(--color-coral); }.closing-cta .button { margin-top: var(--space-xl); }.cta-orbit { position: absolute; width: 4.4rem; height: 4.4rem; opacity: 0.55; }.cta-orbit--one { top: 11%; left: 11%; transform: rotate(-15deg); }.cta-orbit--one::before { content: ""; position: absolute; inset: 0; background: var(--color-cyan); clip-path: polygon(50% 0%, 61% 37%, 100% 50%, 61% 63%, 50% 100%, 39% 63%, 0% 50%, 39% 37%); }.cta-orbit--two { right: 13%; bottom: 9%; transform: rotate(12deg); }.cta-orbit--two::before { content: ""; position: absolute; left: 1rem; top: 1.15rem; width: 1.8rem; height: 1.5rem; background: var(--color-coral); border-radius: 0.18rem; transform: rotate(-45deg); }.cta-orbit--two::after { content: ""; position: absolute; left: 1rem; top: 0.45rem; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--color-coral); box-shadow: 0.9rem 0 0 var(--color-coral); }

.site-footer { padding-bottom: var(--space-xl); }.footer-statement { max-width: 22ch; padding-bottom: var(--space-2xl); font-family: var(--font-display); font-size: clamp(2.5rem, 6vw, 5.4rem); font-weight: 900; letter-spacing: -0.065em; line-height: 0.9; }.footer-statement span { color: var(--color-coral); }.footer-meta { display: flex; align-items: end; justify-content: space-between; gap: var(--space-xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }.footer-links { display: flex; align-items: center; flex-wrap: wrap; justify-content: end; gap: var(--space-lg); color: var(--color-muted); font-size: var(--text-xs); font-weight: 600; }

.legal-page, .support-page { background: var(--color-paper-warm); }.legal-main, .support-main { padding-top: 10rem; padding-bottom: var(--space-4xl); }.legal-intro { max-width: 50rem; padding-bottom: var(--space-3xl); }.legal-intro h1, .support-hero h1 { max-width: 10ch; font-size: clamp(4rem, 10vw, 8rem); }.legal-updated { margin-top: var(--space-lg); color: var(--color-muted); font-size: var(--text-sm); }.legal-layout { display: grid; grid-template-columns: minmax(12rem, 0.4fr) minmax(0, 1fr); gap: var(--space-3xl); padding-top: var(--space-2xl); border-top: var(--rule-hair) solid var(--color-rule); }.legal-aside { align-self: start; position: sticky; top: 6rem; color: var(--color-muted); font-size: var(--text-sm); line-height: 1.5; }.legal-aside .text-link { margin-top: var(--space-lg); }.legal-copy { max-width: 48rem; }.legal-copy section + section { margin-top: var(--space-2xl); }.legal-copy h2 { font-size: clamp(1.6rem, 2.4vw, 2.25rem); }.legal-copy p { margin-top: var(--space-md); color: var(--color-ink-soft); }.legal-copy a, .faq-list a { color: var(--color-cyan-deep); text-decoration: underline; text-decoration-color: var(--color-cyan); text-underline-offset: 0.17em; }

.support-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.65fr); align-items: center; gap: var(--space-3xl); padding: var(--space-2xl) 0 var(--space-4xl); }.support-hero > div:first-child { max-width: 42rem; }.support-hero > div:first-child > p:not(.eyebrow) { max-width: 31rem; margin-top: var(--space-xl); color: var(--color-ink-soft); font-size: var(--text-lg); }.support-hero .button { margin-top: var(--space-2xl); }.support-orb { position: relative; min-height: 22rem; display: grid; place-items: center; border-radius: 49% 51% 43% 57% / 55% 44% 56% 45%; background: var(--color-paper-blue); transform: rotate(6deg); }
.support-orb__leaf { width: 3rem; height: 3rem; background: var(--color-yellow); clip-path: polygon(50% 0%, 61% 37%, 100% 50%, 61% 63%, 50% 100%, 39% 63%, 0% 50%, 39% 37%); }
.support-orb__face { position: relative; display: grid; place-items: center; width: 10rem; height: 8rem; border: 0.3rem solid var(--color-ink); border-radius: 48% 48% 46% 46%; background: var(--color-paper); color: var(--color-ink); }
.support-orb__face b { position: absolute; bottom: 1.35rem; width: 2.9rem; height: 1.2rem; border-bottom: 0.27rem solid var(--color-ink); border-radius: 0 0 50% 50%; }
.support-orb__face::before, .support-orb__face::after { content: ""; position: absolute; top: 2.35rem; width: 0.7rem; height: 0.9rem; border-radius: 50%; background: var(--color-ink); }.support-orb__face::before { left: 3.15rem; }.support-orb__face::after { right: 3.15rem; }
.support-orb__face { font-size: 0; letter-spacing: 0; padding-left: 0; }
.faq-section { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-3xl); padding-top: var(--space-3xl); border-top: var(--rule-hair) solid var(--color-rule); }.faq-list { border-top: var(--rule-hair) solid var(--color-rule); }.faq-list details { border-bottom: var(--rule-hair) solid var(--color-rule); }.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding: var(--space-lg) 0; list-style: none; cursor: pointer; font-family: var(--font-display); font-size: clamp(1.3rem, 2.3vw, 2rem); font-weight: 800; letter-spacing: -0.04em; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary::after { content: "+"; color: var(--color-coral); font-family: var(--font-body); font-size: 1.6rem; font-weight: 400; }.faq-list details[open] summary::after { content: "–"; }.faq-list details p { max-width: 40rem; padding: 0 3rem var(--space-lg) 0; color: var(--color-ink-soft); }

@media (max-width: 56rem) {
  .hero { grid-template-columns: minmax(0, 1fr); padding-top: 8rem; gap: var(--space-2xl); }.hero-copy { max-width: 42rem; }.hero-art { min-height: 35rem; }.hero-art img { width: min(58%, 22rem); }.intro-band, .peek, .faq-section { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }.bento-card--feature { min-height: 29rem; }.legal-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }.legal-aside { position: static; max-width: 34rem; }.support-hero { grid-template-columns: minmax(0, 1fr) minmax(12rem, 0.7fr); }
}

@media (max-width: 42rem) {
  :root { --page-gutter: 1rem; }.site-header { padding-top: 0.6rem; }.site-nav { gap: var(--space-sm); }.nav-links { display: none; }.wordmark { font-size: 0.9rem; }.wordmark-mark { width: 1.9rem; height: 1.9rem; }.site-nav .button { margin-left: auto; }.hero { min-height: auto; padding-top: 7rem; padding-bottom: var(--space-3xl); }.hero h1 { font-size: clamp(3.4rem, 16vw, 6rem); }.hero-lede { margin-top: var(--space-lg); }.hero-actions { align-items: stretch; flex-direction: column; gap: var(--space-md); }.hero-actions .button, .hero-actions .text-link { width: fit-content; }.hero-note { margin-top: var(--space-xl); }.hero-art { min-height: 30rem; }.hero-art img { width: min(64%, 18rem); height: 28rem; border-width: 0.55rem; border-radius: 2rem; }.art-caption { left: 0; top: 8%; }.art-sticker--top { right: 0; top: 21%; }.art-sticker--bottom { left: 0; bottom: 9%; }.intro-band { padding-top: var(--space-3xl); }.bento-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: var(--space-sm); padding-bottom: var(--space-3xl); }.bento-card { grid-column: span 2 !important; min-height: 15rem; padding: 1.35rem; }.bento-card--feature { min-height: 27rem; }.bento-card--wide { display: flex; min-height: 19rem; }.line-art { width: 70%; height: 42%; }.peek { padding-bottom: var(--space-3xl); }.peek-visual { min-height: 27rem; padding: var(--space-lg); }.peek-visual img { width: min(68%, 17rem); height: 25rem; }.closing-cta { min-height: 25rem; margin-bottom: var(--space-3xl); padding-inline: var(--space-lg); }.footer-meta { align-items: start; flex-direction: column; }.footer-links { justify-content: start; gap: var(--space-sm) var(--space-lg); }.legal-main, .support-main { padding-top: 7.5rem; }.legal-intro h1, .support-hero h1 { font-size: clamp(3.9rem, 17vw, 6rem); }.support-hero { grid-template-columns: minmax(0, 1fr); padding-bottom: var(--space-3xl); }.support-orb { min-height: 15rem; max-width: 20rem; }.faq-section { padding-top: var(--space-2xl); }.faq-list summary { padding-block: var(--space-md); font-size: 1.3rem; }.faq-list details p { padding-right: 0; }
}

@media (max-width: 20rem) {
  .site-nav .button { padding-inline: 0.7rem; font-size: 0.7rem; }.site-nav .button span { display: none; }.hero h1 { font-size: 3.2rem; }.hero-art img { width: 66%; }.art-sticker { width: 5.8rem; height: 5.8rem; font-size: 0.7rem; }.art-sticker--top { right: -0.2rem; }.art-sticker--bottom { left: -0.2rem; }.swatch-row span { width: 1.75rem; height: 1.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}