@font-face{font-family: 'Geist';src: url('/assets/fonts/geist-latin.woff2') format('woff2');font-weight: 100 900;font-style: normal;font-display: swap;unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family: 'Geist';src: url('/assets/fonts/geist-latin-ext.woff2') format('woff2');font-weight: 100 900;font-style: normal;font-display: swap;unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family: 'Geist Mono';src: url('/assets/fonts/geist-mono-latin.woff2') format('woff2');font-weight: 100 900;font-style: normal;font-display: swap;unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} :root{--ink: #0f1011;--ink-2: #2c2e30;--muted: #64676a;--faint: #95989b;--paper: #f7f7f5;--mist: #ececea;--mist-2: #e4e4e1;--white: #ffffff;--line: rgba(15, 16, 17, .12);--line-soft: rgba(15, 16, 17, .07);--night: #111213;--night-2: #1b1c1e;--night-3: #26282b;--night-ink: #f2f2ef;--night-muted: #a3a6a9;--night-line: rgba(255, 255, 255, .12);--tab: #e2b13c;--tab-deep: #b8871a;--tab-soft: #f7ebc9;--leaf: #1f4d3a;--leaf-soft: #e3ece6;--danger: #a1321d;--font: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;--mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;--fs-xxs: .6875rem;--fs-xs: .75rem;--fs-sm: .875rem;--fs-base: 1.0625rem;--fs-md: 1.1875rem;--fs-lg: 1.375rem;--fs-xl: clamp(1.5rem, 1.1rem + 1.1vw, 1.875rem);--fs-2xl: clamp(1.875rem, 1.2rem + 2vw, 2.75rem);--fs-3xl: clamp(2.25rem, 1.3rem + 3.3vw, 4rem);--fs-4xl: clamp(2.75rem, 1.2rem + 5.4vw, 5.75rem);--fs-statement: clamp(1.625rem, .9rem + 2.6vw, 3.25rem);--w: 1240px;--w-text: 720px;--gutter: clamp(16px, 4vw, 48px);--sp-section: clamp(80px, 10vw, 160px);--sp-block: clamp(40px, 5vw, 72px);--r-xs: 4px;--r-sm: 8px;--r-md: 14px;--r-lg: 22px;--shadow-1: 0 1px 2px rgba(15, 16, 17, .05), 0 10px 30px -14px rgba(15, 16, 17, .18);--shadow-2: 0 2px 4px rgba(15, 16, 17, .04), 0 30px 80px -30px rgba(15, 16, 17, .35);--ease: cubic-bezier(.2, .7, .1, 1);--header-h: 64px;} *, *::before, *::after{box-sizing: border-box;} html{-webkit-text-size-adjust: 100%;text-size-adjust: 100%;scroll-behavior: smooth;scroll-padding-top: calc(var(--header-h) + 24px);} @media (prefers-reduced-motion: reduce){html{scroll-behavior: auto;}} body{margin: 0;background: var(--paper);color: var(--ink);font-family: var(--font);font-size: var(--fs-base);line-height: 1.55;letter-spacing: -.011em;font-feature-settings: 'ss01', 'cv11';-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-rendering: optimizeLegibility;overflow-x: hidden;} img, svg, video{display: block;max-width: 100%;height: auto;} svg.arr{width: 14px;height: 14px;flex: none;} svg.chev{width: 9px;height: 9px;flex: none;} a{color: inherit;text-decoration-thickness: 1px;text-underline-offset: .18em;} a:hover{text-decoration-color: var(--tab-deep);} h1, h2, h3, h4{margin: 0;font-weight: 600;letter-spacing: -.035em;line-height: 1.04;text-wrap: balance;} h1{font-size: var(--fs-4xl);letter-spacing: -.045em;} h2{font-size: var(--fs-3xl);} h3{font-size: var(--fs-xl);letter-spacing: -.025em;line-height: 1.15;font-weight: 500;} h4{font-size: var(--fs-md);letter-spacing: -.02em;line-height: 1.25;font-weight: 600;} p{margin: 0 0 1em;text-wrap: pretty;} p:last-child{margin-bottom: 0;} em{font-style: normal;} strong{font-weight: 600;} small{font-size: var(--fs-sm);} ul, ol{padding-left: 1.2em;} hr{border: 0;border-top: 1px solid var(--line);margin: var(--sp-block) 0;} ::selection{background: var(--tab-soft);color: var(--ink);} :focus-visible{outline: 2px solid var(--ink);outline-offset: 3px;border-radius: 3px;} .on-dark :focus-visible, .announce :focus-visible, .cta-band :focus-visible, .tile.dark :focus-visible{outline-color: var(--tab);} button{font: inherit;color: inherit;} input, select, textarea{font: inherit;color: inherit;} .visually-hidden{position: absolute !important;width: 1px;height: 1px;overflow: hidden;clip: rect(0 0 0 0);clip-path: inset(50%);white-space: nowrap;} .skip-link{position: absolute;left: 12px;top: -60px;z-index: 100;background: var(--ink);color: var(--white);padding: 10px 14px;border-radius: var(--r-xs);text-decoration: none;} .skip-link:focus{top: 12px;} .img-missing{display: block;width: 100%;aspect-ratio: 4/3;background: linear-gradient(135deg, var(--mist), var(--mist-2));} img.lineart{mix-blend-mode: multiply;} .on-dark img.lineart{filter: invert(1);mix-blend-mode: screen;} .js .reveal{opacity: 0;filter: blur(8px);transform: translateY(14px);transition: opacity .9s var(--ease), filter .9s var(--ease), transform .9s var(--ease);} .js .reveal.in{opacity: 1;filter: none;transform: none;} .js .reveal[data-d="1"]{transition-delay: .08s;} .js .reveal[data-d="2"]{transition-delay: .16s;} .js .reveal[data-d="3"]{transition-delay: .24s;} .js .reveal[data-d="4"]{transition-delay: .32s;} @media (prefers-reduced-motion: reduce){.js .reveal{opacity: 1;filter: none;transform: none;transition: none;}} .wrap{width: min(100% - 2 * var(--gutter), var(--w));margin-inline: auto;} .wrap-wide{width: min(100% - 2 * var(--gutter), 1440px);margin-inline: auto;} .wrap-text{width: min(100% - 2 * var(--gutter), var(--w-text));margin-inline: auto;} .section{padding-block: var(--sp-section);position: relative;} .section.tight{padding-block: calc(var(--sp-section) * .6);} .section + .section.bg-same{padding-top: 0;} .bg-paper{background: var(--paper);} .bg-mist{background: var(--mist);} .bg-white{background: var(--white);} .bg-night, .on-dark{background: var(--night);color: var(--night-ink);} .on-dark .muted, .bg-night .muted{color: var(--night-muted);} .muted{color: var(--muted);} .center{text-align: center;} .grid{display: grid;gap: clamp(16px, 2vw, 28px);} .g2{grid-template-columns: repeat(2, minmax(0, 1fr));} .g3{grid-template-columns: repeat(3, minmax(0, 1fr));} .g4{grid-template-columns: repeat(4, minmax(0, 1fr));} @media (max-width: 1080px){.g4{grid-template-columns: repeat(2, minmax(0, 1fr));} .g3{grid-template-columns: repeat(2, minmax(0, 1fr));}} @media (max-width: 680px){.g2, .g3, .g4{grid-template-columns: minmax(0, 1fr);}} .side-grid{grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);gap: clamp(24px, 5vw, 80px);} @media (max-width: 860px){.side-grid{grid-template-columns: minmax(0, 1fr);gap: 0;}} .announce{background: var(--night);color: var(--night-ink);font: 500 var(--fs-xxs)/1.3 var(--mono);letter-spacing: .14em;text-transform: uppercase;} .announce a{display: flex;align-items: center;justify-content: center;gap: .6em;min-height: 32px;padding: 7px var(--gutter);text-decoration: none;text-align: center;} .announce a:focus-visible{outline-offset: -4px;} .announce a:hover{color: var(--tab);} .announce svg.arr{width: 12px;height: 12px;} .site-header{position: sticky;top: 0;z-index: 50;background: rgba(247, 247, 245, .82);-webkit-backdrop-filter: saturate(1.4) blur(14px);backdrop-filter: saturate(1.4) blur(14px);border-bottom: 1px solid transparent;transition: border-color .3s, background .3s;} .site-header.scrolled{border-bottom-color: var(--line-soft);background: rgba(247, 247, 245, .9);} .hdr{display: flex;align-items: center;gap: 28px;height: var(--header-h);width: min(100% - 2 * var(--gutter), 1440px);margin-inline: auto;} .logo{display: inline-flex;align-items: center;gap: 9px;text-decoration: none;color: var(--ink);font-weight: 650;font-size: 1.0625rem;letter-spacing: -.035em;white-space: nowrap;} .logo svg{width: 26px;height: 26px;flex: none;} .logo .dot{color: var(--tab-deep);} .nav{display: flex;align-items: center;gap: 2px;margin-right: auto;} .nav > li{list-style: none;position: relative;} .nav, .nav ul{margin: 0;padding: 0;} .nav-link{display: inline-flex;align-items: center;gap: 5px;height: 38px;padding: 0 12px;border-radius: var(--r-xs);background: none;border: 0;font: 500 var(--fs-xs)/1 var(--font);letter-spacing: .08em;text-transform: uppercase;color: var(--ink-2);text-decoration: none;cursor: pointer;} .nav-link:hover, .nav-link[aria-expanded="true"], .nav-link[aria-current="page"]{color: var(--ink);background: rgba(15, 16, 17, .05);} .nav-link .chev{width: 9px;height: 9px;opacity: .55;transition: transform .25s var(--ease);} .nav-link[aria-expanded="true"] .chev{transform: rotate(180deg);} .mega{position: absolute;top: calc(100% + 10px);left: -12px;min-width: 340px;padding: 10px;background: var(--white);border: 1px solid var(--line-soft);border-radius: var(--r-md);box-shadow: var(--shadow-2);opacity: 0;visibility: hidden;transform: translateY(-6px);transition: opacity .2s, transform .25s var(--ease), visibility .2s;} .mega.open{opacity: 1;visibility: visible;transform: none;} .mega.cols-2{min-width: 600px;} .mega-inner{display: grid;gap: 4px;} .mega.cols-2 .mega-inner{grid-template-columns: 1fr 1fr;} .mega.has-feature{min-width: 640px;} .mega.has-feature .mega-inner{grid-template-columns: 1fr 230px;gap: 10px;} .mega a.mi{display: grid;gap: 3px;padding: 11px 12px;border-radius: var(--r-sm);text-decoration: none;} .mega a.mi:hover{background: var(--paper);} .mega .mi b{font-weight: 550;font-size: .9375rem;letter-spacing: -.015em;} .mega .mi span{font-size: var(--fs-sm);color: var(--muted);line-height: 1.35;} .mega .mega-all{grid-column: 1 / -1;margin-top: 4px;padding: 11px 12px;border-top: 1px solid var(--line-soft);font-size: var(--fs-sm);font-weight: 550;text-decoration: none;display: flex;justify-content: space-between;align-items: center;} .mega .feature{display: flex;flex-direction: column;justify-content: flex-end;min-height: 100%;border-radius: var(--r-sm);overflow: hidden;position: relative;text-decoration: none;color: var(--white);} .mega .feature img{position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;} .mega .feature::after{content: '';position: absolute;inset: 0;background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, .65));} .mega .feature span{position: relative;z-index: 1;padding: 14px;font-size: var(--fs-sm);line-height: 1.35;} .mega .feature b{display: block;font-size: 1rem;font-weight: 600;} .hdr-actions{display: flex;align-items: center;gap: 8px;margin-left: auto;} .hdr > nav{min-width: 0;} .lang{position: relative;} .lang-btn{display: inline-flex;align-items: center;gap: 6px;height: 36px;padding: 0 10px;border: 0;background: none;border-radius: var(--r-xs);font: 500 var(--fs-xs)/1 var(--mono);letter-spacing: .08em;color: var(--ink-2);cursor: pointer;} .lang-btn:hover{background: rgba(15, 16, 17, .05);} .lang-btn svg{width: 15px;height: 15px;opacity: .7;} .lang .mega{left: auto;right: 0;min-width: 190px;} .lang .mega > a{display: flex;justify-content: space-between;padding: 9px 12px;border-radius: var(--r-sm);text-decoration: none;font-size: var(--fs-sm);} .lang .mega > a:hover{background: var(--paper);} .lang .mega > a[aria-current="true"]{font-weight: 600;} .lang .mega > a span{font-family: var(--mono);color: var(--muted);font-size: var(--fs-xxs);} .lang-note{margin: 0;font-size: var(--fs-xs);line-height: 1.45;color: var(--muted);} .lang .lang-note{margin-top: 6px;padding: 10px 12px 4px;border-top: 1px solid var(--line-soft);max-width: 200px;} .burger{display: none;width: 40px;height: 40px;border: 0;border-radius: var(--r-xs);background: none;cursor: pointer;align-items: center;justify-content: center;} .burger span{display: block;width: 18px;height: 1.5px;background: var(--ink);position: relative;transition: transform .3s;} .burger span::before, .burger span::after{content: '';position: absolute;left: 0;width: 18px;height: 1.5px;background: var(--ink);transition: transform .3s, top .3s;} .burger span::before{top: -6px;} .burger span::after{top: 6px;} .menu-open .burger span{background: transparent;} .menu-open .burger span::before{top: 0;transform: rotate(45deg);} .menu-open .burger span::after{top: 0;transform: rotate(-45deg);} .mobile-nav{display: none;} @media (max-width: 1280px){.hdr-actions .btn.secondary{display: none;}} @media (max-width: 1200px){.nav{display: none;} .burger{display: inline-flex;} .hdr{gap: 12px;} .hdr-actions{margin-left: auto;} .mobile-nav{display: block;position: absolute;top: 100%;left: 0;right: 0;height: calc(100vh - var(--header-h));height: calc(100dvh - var(--header-h));z-index: 49;background: var(--paper);overflow-y: auto;overscroll-behavior: contain;padding: 12px var(--gutter) 48px;transform: translateY(-8px);opacity: 0;visibility: hidden;transition: opacity .25s, transform .3s var(--ease), visibility .25s;} .menu-open .mobile-nav{opacity: 1;visibility: visible;transform: none;} .mobile-nav details{border-bottom: 1px solid var(--line);} .mobile-nav summary, .mobile-nav > a{display: flex;justify-content: space-between;align-items: center;padding: 18px 0;font-size: 1.25rem;font-weight: 550;letter-spacing: -.03em;list-style: none;cursor: pointer;text-decoration: none;} .mobile-nav > a{border-bottom: 1px solid var(--line);} .mobile-nav summary::-webkit-details-marker{display: none;} .mobile-nav summary::after{content: '+';font-weight: 300;font-size: 1.5rem;} .mobile-nav details[open] summary::after{content: '–';} .mobile-nav details a{display: block;padding: 9px 0 9px 2px;color: var(--ink-2);text-decoration: none;} .mobile-nav details div{padding-bottom: 14px;} .mobile-nav .m-ctas{display: grid;gap: 10px;margin-top: 28px;} .mobile-nav .m-lang{display: flex;gap: 8px;margin-top: 22px;} .mobile-nav .lang-note{margin-top: 12px;} body.menu-open{overflow: hidden;}} @media (max-width: 520px){.hdr-actions .btn.primary{display: none;} .logo{font-size: 1rem;}} .crumbs{display: flex;flex-wrap: wrap;gap: 8px;list-style: none;padding: 0;margin: 0 0 28px;font: 500 var(--fs-xxs)/1.4 var(--mono);letter-spacing: .1em;text-transform: uppercase;color: var(--muted);} .crumbs a{text-decoration: none;} .crumbs a:hover{color: var(--ink);} .crumbs li + li::before{content: '/';margin-right: 8px;color: var(--faint);} .on-dark .crumbs{color: var(--night-muted);} .site-footer{background: var(--night);color: var(--night-ink);padding: clamp(64px, 8vw, 112px) 0 32px;} .ft{display: grid;grid-template-columns: minmax(260px, 1.2fr) 2.4fr;gap: 56px;} .ft-brand .logo{color: var(--night-ink);margin-bottom: 22px;} .ft-brand .logo .dot{color: var(--tab);} .ft-brand p{font-size: var(--fs-xl);line-height: 1.2;letter-spacing: -.03em;color: var(--night-ink);max-width: 18ch;margin-bottom: 26px;} .ft-cols{display: grid;grid-template-columns: repeat(4, minmax(0, 1fr));gap: 28px;} .ft-cols h2{font-size: var(--fs-sm);font-weight: 600;letter-spacing: -.01em;margin-bottom: 16px;color: var(--night-ink);} .ft-cols ul{list-style: none;padding: 0;margin: 0;display: grid;gap: 10px;} .ft-cols a{color: var(--night-muted);text-decoration: none;font-size: var(--fs-sm);} .ft-cols a:hover{color: var(--night-ink);} .ft-bottom{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 18px;margin-top: 72px;padding-top: 24px;border-top: 1px solid var(--night-line);font-size: var(--fs-xs);color: var(--night-muted);} .ft-bottom ul{display: flex;flex-wrap: wrap;gap: 6px 18px;list-style: none;padding: 0;margin: 0;} .ft-bottom a{color: var(--night-muted);text-decoration: none;} .ft-bottom a:hover{color: var(--night-ink);} .ft-legal{max-width: 70ch;line-height: 1.5;} .ft-langs{display: flex;gap: 6px;} .ft-langs a{border: 1px solid var(--night-line);border-radius: var(--r-xs);padding: 6px 10px;font-family: var(--mono);letter-spacing: .08em;} .ft-langs a[aria-current="true"]{border-color: var(--night-ink);color: var(--night-ink);} @media (max-width: 960px){.ft{grid-template-columns: 1fr;} .ft-cols{grid-template-columns: repeat(2, minmax(0, 1fr));}} .btn{display: inline-flex;align-items: center;justify-content: center;gap: .55em;min-height: 42px;padding: 0 18px;border-radius: var(--r-xs);border: 1px solid transparent;font: 500 .9375rem/1 var(--font);letter-spacing: -.01em;text-decoration: none;cursor: pointer;white-space: nowrap;transition: background .2s, color .2s, border-color .2s, transform .2s var(--ease);} .btn:active{transform: translateY(1px);} .btn.primary{background: var(--ink);color: var(--white);} .btn.primary:hover{background: #2a2c2e;} .btn.secondary{background: transparent;color: var(--ink);border-color: rgba(15, 16, 17, .28);} .btn.secondary:hover{border-color: var(--ink);background: rgba(15, 16, 17, .03);} .btn.tab{background: var(--tab);color: var(--ink);} .btn.tab:hover{background: #ecbf52;} .btn.lg{min-height: 50px;padding: 0 24px;font-size: 1rem;} .btn.sm{min-height: 36px;padding: 0 14px;font-size: var(--fs-sm);} .btn .arr{width: 14px;height: 14px;transition: transform .25s var(--ease);} .btn:hover .arr{transform: translateX(3px);} .on-dark .btn.primary, .bg-night .btn.primary, .cta-band .btn.primary{background: var(--night-ink);color: var(--night);} .on-dark .btn.primary:hover, .cta-band .btn.primary:hover{background: #fff;} .on-dark .btn.secondary, .bg-night .btn.secondary, .cta-band .btn.secondary{color: var(--night-ink);border-color: rgba(255, 255, 255, .32);} .on-dark .btn.secondary:hover, .cta-band .btn.secondary:hover{border-color: var(--night-ink);background: rgba(255, 255, 255, .05);} .btn-row{display: flex;flex-wrap: wrap;gap: 10px;align-items: center;} .btn-row .btn{max-width: 100%;white-space: normal;text-align: center;line-height: 1.2;padding-block: 8px;} .center .btn-row, .btn-row.center{justify-content: center;} .link-arrow{display: inline-flex;align-items: center;gap: .5em;font-weight: 550;text-decoration: none;font-size: .9375rem;} .link-arrow .arr{width: 14px;height: 14px;transition: transform .25s var(--ease);} .link-arrow:hover .arr{transform: translateX(4px);} .eyebrow{display: inline-flex;align-items: center;gap: .8em;margin-bottom: 22px;font: 500 var(--fs-xxs)/1.4 var(--mono);letter-spacing: .16em;text-transform: uppercase;color: var(--muted);} .eyebrow.brackets{display: inline-block;text-wrap: balance;} .eyebrow.brackets::before{content: '[';margin-right: .8em;} .eyebrow.brackets::after{content: ']';margin-left: .8em;} .eyebrow.slash::before{content: '//';letter-spacing: 0;color: var(--faint);} .on-dark .eyebrow, .bg-night .eyebrow{color: var(--night-muted);} .chip{display: inline-flex;align-items: center;gap: 6px;height: 22px;padding: 0 9px;border: 1px solid currentColor;border-radius: 999px;font: 500 10px/1 var(--mono);letter-spacing: .1em;text-transform: uppercase;color: var(--ink-2);white-space: nowrap;} .chip.demo{border-color: #6b4c05;color: #6b4c05;} .chip.solid{background: var(--ink);color: var(--white);border-color: var(--ink);} .chip.gold{background: var(--tab);color: var(--ink);border-color: var(--tab);} .on-dark .chip{color: var(--night-ink);} .note{font-size: var(--fs-sm);color: var(--muted);} .kbd-num{font-family: var(--mono);font-size: var(--fs-xs);color: var(--muted);letter-spacing: .08em;} .tick{width: 18px;height: 18px;flex: none;color: var(--leaf);} .cross{width: 18px;height: 18px;flex: none;color: var(--muted);} .shead{display: grid;gap: 16px;margin-bottom: var(--sp-block);max-width: 860px;} .shead.center{margin-inline: auto;justify-items: center;} .shead .lead{font-size: var(--fs-md);color: var(--muted);max-width: 60ch;line-height: 1.5;} .on-dark .shead .lead{color: var(--night-muted);} .shead.split{max-width: none;grid-template-columns: 1.15fr 1fr;align-items: end;gap: 40px;} .shead.split .eyebrow{grid-column: 1 / -1;margin-bottom: 0;} @media (max-width: 860px){.shead.split{grid-template-columns: 1fr;gap: 18px;}} .lead{font-size: var(--fs-md);line-height: 1.5;} .card{position: relative;display: flex;flex-direction: column;background: var(--white);border: 1px solid var(--line-soft);border-radius: var(--r-md);overflow: hidden;text-decoration: none;transition: border-color .25s, transform .35s var(--ease), box-shadow .35s var(--ease);} a.card:hover{border-color: var(--line);transform: translateY(-3px);box-shadow: var(--shadow-1);} .card .media{position: relative;aspect-ratio: 4/3;overflow: hidden;background: var(--mist);} .card .media img{width: 100%;height: 100%;object-fit: cover;transition: transform .8s var(--ease);} a.card:hover .media img{transform: scale(1.035);} .card .media.art{background: var(--paper);display: grid;place-items: center;padding: 18px;} .card .media.art img{object-fit: contain;width: 100%;height: 100%;} .card .body{display: flex;flex-direction: column;gap: 10px;padding: 22px 22px 24px;flex: 1;} .card .body h3{font-size: var(--fs-lg);line-height: 1.15;} .card .body p{color: var(--muted);font-size: .9688rem;line-height: 1.5;margin: 0;} .card .body .foot{margin-top: auto;padding-top: 14px;display: flex;justify-content: space-between;align-items: center;font-size: .9375rem;font-weight: 550;} .card .body .foot .arr{width: 15px;height: 15px;transition: transform .25s var(--ease);} a.card:hover .foot .arr{transform: translateX(4px);} .card .chip{align-self: flex-start;} .card.flat{background: transparent;border: 0;border-radius: 0;} .on-dark .card{background: var(--night-2);border-color: var(--night-line);} .on-dark .card .body p{color: var(--night-muted);} .rows{border-top: 1px solid var(--line);} .row{display: grid;grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) 28px;gap: 32px;align-items: start;padding: 30px 8px;border-bottom: 1px solid var(--line);text-decoration: none;transition: background .25s;} .row h3{font-size: var(--fs-xl);font-weight: 450;letter-spacing: -.03em;} .row p{margin: 4px 0 0;color: var(--muted);font-size: .9688rem;max-width: 52ch;} .row .arr{width: 16px;height: 16px;margin-top: 10px;opacity: .55;transition: transform .25s var(--ease), opacity .25s;} a.row:hover{background: rgba(255, 255, 255, .55);} a.row:hover .arr{transform: translate(3px, -3px);opacity: 1;} .row .num{font-family: var(--mono);font-size: var(--fs-xs);color: var(--muted);letter-spacing: .1em;display: block;margin-bottom: 10px;} .on-dark .rows, .on-dark .row{border-color: var(--night-line);} .on-dark .row p{color: var(--night-muted);} @media (max-width: 760px){.row{grid-template-columns: 1fr 22px;gap: 10px 16px;padding: 24px 2px;} .row p{grid-column: 1 / 2;} .row .arr{grid-row: 1;grid-column: 2;}} .field{display: grid;gap: 7px;} .field label{font-size: var(--fs-sm);font-weight: 550;} .field .hint{font-size: var(--fs-xs);color: var(--muted);} .input, .select, .textarea{width: 100%;min-height: 48px;padding: 12px 14px;border: 1px solid rgba(15, 16, 17, .2);border-radius: var(--r-sm);background: var(--white);font-size: 1rem;transition: border-color .2s, box-shadow .2s;} .textarea{min-height: 120px;resize: vertical;} .input:focus, .select:focus, .textarea:focus{outline: none;border-color: var(--ink);box-shadow: 0 0 0 3px rgba(226, 177, 60, .35);} .field.error .input, .field.error .select, .field.error .textarea{border-color: var(--danger);} .field .err{display: none;color: var(--danger);font-size: var(--fs-xs);} .field.error .err{display: block;} .field.error .check{color: var(--danger);} .field.error .check input{outline: 2px solid var(--danger);outline-offset: 2px;} .check{display: flex;gap: 10px;align-items: flex-start;font-size: var(--fs-sm);color: var(--ink-2);} .check input{width: 18px;height: 18px;margin-top: 2px;accent-color: var(--ink);} .form-grid{display: grid;grid-template-columns: 1fr 1fr;gap: 18px;} .form-grid .full{grid-column: 1 / -1;} @media (max-width: 640px){.form-grid{grid-template-columns: 1fr;}} .hp{position: absolute;left: -9999px;width: 1px;height: 1px;overflow: hidden;} .form-status{display: none;padding: 14px 16px;border-radius: var(--r-sm);font-size: var(--fs-sm);} .form-status.ok{display: block;background: var(--leaf-soft);color: var(--leaf);} .form-status.bad{display: block;background: #f8e3dd;color: var(--danger);} .faq{border-top: 1px solid var(--line);} .faq details{border-bottom: 1px solid var(--line);} .faq summary{display: flex;justify-content: space-between;gap: 24px;align-items: center;padding: 24px 4px;cursor: pointer;list-style: none;font-size: var(--fs-md);font-weight: 500;letter-spacing: -.02em;} .faq summary::-webkit-details-marker{display: none;} .faq summary .pm{position: relative;width: 14px;height: 14px;flex: none;} .faq summary .pm::before, .faq summary .pm::after{content: '';position: absolute;left: 0;top: 6.5px;width: 14px;height: 1.5px;background: currentColor;transition: transform .3s var(--ease);} .faq summary .pm::after{transform: rotate(90deg);} .faq details[open] summary .pm::after{transform: rotate(0deg);} .faq .ans{padding: 0 4px 26px;color: var(--ink-2);max-width: 72ch;} .faq .ans p{margin-bottom: .8em;} .on-dark .faq, .on-dark .faq details{border-color: var(--night-line);} .on-dark .faq .ans{color: var(--night-muted);} .table-wrap{overflow-x: auto;border: 1px solid var(--line-soft);border-radius: var(--r-md);background: var(--white);} .ctable{width: 100%;border-collapse: collapse;font-size: .9375rem;min-width: 620px;} .ctable th, .ctable td{padding: 16px 18px;text-align: left;vertical-align: top;border-bottom: 1px solid var(--line-soft);} .ctable thead th{font: 500 var(--fs-xxs)/1.3 var(--mono);letter-spacing: .12em;text-transform: uppercase;color: var(--muted);background: var(--paper);} .ctable thead th.us{color: var(--ink);background: var(--tab-soft);} .ctable td.us{background: rgba(247, 235, 201, .35);font-weight: 500;} .ctable tbody th{font-weight: 550;width: 28%;} .ctable tr:last-child td, .ctable tr:last-child th{border-bottom: 0;} .ctable .yes, .ctable .no{display: inline-flex;gap: 6px;align-items: flex-start;} .sources{margin-top: 14px;font-size: var(--fs-xs);color: var(--muted);} .sources a{color: inherit;} @media (max-width: 640px){.ctable.stack, .ctable.stack tbody, .ctable.stack tr, .ctable.stack th, .ctable.stack td{display: block;min-width: 0;} .ctable.stack{min-width: 0;} .ctable.stack thead{display: none;} .ctable.stack tbody th{width: auto;border-bottom: 0;padding-bottom: 6px;} .ctable.stack td{border-bottom: 0;padding-top: 4px;padding-bottom: 4px;} .ctable.stack td::before{content: attr(data-col);display: block;font: 500 10px/1.4 var(--mono);letter-spacing: .1em;text-transform: uppercase;color: var(--muted);} .ctable.stack tr{border-bottom: 1px solid var(--line-soft);padding-bottom: 12px;}} .stats{display: grid;grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));border-top: 1px solid var(--line);} .stat{padding: 30px 28px 6px 0;} .stat + .stat{border-left: 1px solid var(--line);padding-left: 28px;} .stat b{display: block;font-size: var(--fs-3xl);font-weight: 600;letter-spacing: -.05em;line-height: 1;} .stat span{display: block;margin-top: 12px;color: var(--muted);font-size: .9688rem;max-width: 26ch;} .on-dark .stats, .on-dark .stat + .stat{border-color: var(--night-line);} .on-dark .stat span{color: var(--night-muted);} @media (max-width: 760px){.stats{grid-template-columns: 1fr;} .stat + .stat{border-left: 0;border-top: 1px solid var(--line);padding-left: 0;}} .bigquote{margin: 0;} .bigquote blockquote{margin: 0;font-size: var(--fs-2xl);line-height: 1.18;letter-spacing: -.035em;font-weight: 450;text-wrap: balance;} .bigquote figcaption{margin-top: 26px;display: flex;align-items: center;gap: 14px;font-size: var(--fs-sm);color: var(--muted);} .bigquote figcaption b{color: var(--ink);font-weight: 600;display: block;} .bigquote figcaption::before{content: '';width: 28px;height: 1px;background: var(--line);} .carousel{position: relative;} .c-track{display: grid;grid-auto-flow: column;grid-auto-columns: min(78vw, 820px);gap: 24px;overflow-x: auto;scroll-snap-type: x mandatory;scroll-padding-inline: max(var(--gutter), calc((100vw - var(--w)) / 2));padding: 4px max(var(--gutter), calc((100vw - var(--w)) / 2)) 28px;scrollbar-width: none;overscroll-behavior-x: contain;} .c-track::-webkit-scrollbar{display: none;} .c-card{scroll-snap-align: start;display: grid;grid-template-rows: auto 1fr;background: var(--white);border: 1px solid var(--line-soft);border-radius: var(--r-md);overflow: hidden;text-decoration: none;} .c-card .media{position: relative;aspect-ratio: 16/7;overflow: hidden;background: var(--mist);} .c-card .media img{width: 100%;height: 100%;object-fit: cover;transition: transform .9s var(--ease);} .c-card:hover .media img{transform: scale(1.03);} .c-card .pill{position: absolute;right: 18px;bottom: 18px;display: inline-flex;align-items: center;gap: 8px;padding: 9px 16px;border: 1px solid rgba(255, 255, 255, .7);border-radius: 999px;color: var(--white);font-size: var(--fs-sm);background: rgba(0, 0, 0, .55);-webkit-backdrop-filter: blur(6px);backdrop-filter: blur(6px);white-space: nowrap;} .c-card .pill svg{width: 11px;height: 11px;} .c-card .cbody{display: grid;grid-template-columns: 1fr 1fr;gap: 28px;padding: 24px 24px 26px;} .c-card h3{font-size: var(--fs-xl);font-weight: 450;margin: 14px 0 10px;} .c-card .cbody p{color: var(--ink-2);font-size: .9375rem;margin: 0;} .c-card .aside{font-style: italic;color: var(--muted);font-size: .9375rem;line-height: 1.55;display: flex;flex-direction: column;} .c-card .aside .who{margin-top: auto;padding-top: 18px;font-style: normal;font-size: var(--fs-sm);} .c-card .aside .who::before{content: '';display: block;width: 24px;height: 1px;background: var(--line);margin-bottom: 12px;} .c-card .aside .who b{display: block;color: var(--ink);font-weight: 600;} .c-card .brandmark{margin-top: 26px;font-weight: 600;letter-spacing: -.02em;color: var(--muted);font-size: 1.0625rem;} .c-nav{display: flex;gap: 8px;justify-content: flex-end;margin-top: 4px;} .c-nav button{width: 44px;height: 44px;border-radius: 50%;border: 1px solid var(--line);background: var(--white);cursor: pointer;display: grid;place-items: center;} .c-nav button:hover{border-color: var(--ink);} .c-nav button:disabled{opacity: .35;cursor: default;} .c-nav svg{width: 15px;height: 15px;} @media (max-width: 760px){.c-card .cbody{grid-template-columns: 1fr;gap: 14px;} .c-track{grid-auto-columns: 86vw;}} .frame{border-radius: var(--r-md);overflow: hidden;background: var(--mist);} .frame img{width: 100%;height: 100%;object-fit: cover;} .frame.tall{aspect-ratio: 4/5;} .frame.wide{aspect-ratio: 16/9;} .frame.std{aspect-ratio: 4/3;} .caption{margin-top: 10px;font-size: var(--fs-xs);color: var(--muted);font-family: var(--mono);letter-spacing: .06em;} .notice{display: flex;gap: 12px;align-items: flex-start;padding: 16px 18px;border: 1px solid var(--line);border-radius: var(--r-sm);background: var(--white);font-size: var(--fs-sm);color: var(--ink-2);} .notice.gold{background: var(--tab-soft);border-color: rgba(184, 135, 26, .35);} .notice svg{width: 18px;height: 18px;flex: none;margin-top: 1px;} .demo-ribbon{display: inline-flex;gap: 8px;align-items: center;padding: 7px 12px;border-radius: 999px;background: var(--tab-soft);color: #6b4c05;font-size: var(--fs-xs);font-weight: 550;} .prose{font-size: 1.0625rem;line-height: 1.7;color: var(--ink-2);} .prose > * + *{margin-top: 1.05em;} .prose h2{font-size: var(--fs-2xl);color: var(--ink);margin-top: 2.1em;scroll-margin-top: calc(var(--header-h) + 24px);} .prose h3{font-size: var(--fs-lg);color: var(--ink);margin-top: 1.8em;font-weight: 600;} .prose h4{margin-top: 1.5em;} .prose p, .prose ul, .prose ol{margin-bottom: 0;} .prose ul, .prose ol{padding-left: 1.25em;} .prose li + li{margin-top: .45em;} .prose a{color: var(--ink);text-decoration-color: var(--tab-deep);} .prose blockquote{margin: 1.6em 0;padding: 4px 0 4px 22px;border-left: 2px solid var(--tab);color: var(--ink);font-size: 1.125rem;} .prose table{width: 100%;border-collapse: collapse;font-size: .9375rem;display: block;overflow-x: auto;} .prose th, .prose td{text-align: left;padding: 10px 12px;border-bottom: 1px solid var(--line);vertical-align: top;} .prose thead th{font: 500 var(--fs-xxs)/1.3 var(--mono);letter-spacing: .1em;text-transform: uppercase;color: var(--muted);} .prose .callout{padding: 18px 20px;border-radius: var(--r-sm);background: var(--white);border: 1px solid var(--line-soft);} .prose .callout.gold{background: var(--tab-soft);border-color: rgba(184, 135, 26, .3);} .prose figure{margin: 2em 0;} .prose figure img{border-radius: var(--r-md);} .prose figcaption{font-size: var(--fs-xs);color: var(--muted);margin-top: 8px;} .prose code{font-family: var(--mono);font-size: .875em;background: var(--mist);padding: .1em .35em;border-radius: 4px;} .prose hr{margin: 2.4em 0;} .toc{position: sticky;top: calc(var(--header-h) + 28px);font-size: var(--fs-sm);} .toc b{display: block;font: 500 var(--fs-xxs)/1.4 var(--mono);letter-spacing: .14em;text-transform: uppercase;color: var(--muted);margin-bottom: 14px;} .toc ol{list-style: none;padding: 0;margin: 0;display: grid;gap: 9px;counter-reset: toc;} .toc a{color: var(--muted);text-decoration: none;display: block;line-height: 1.35;} .toc a:hover, .toc a.active{color: var(--ink);} .hero{padding: clamp(56px, 8vw, 112px) 0 0;text-align: center;} .hero h1{max-width: 15ch;margin-inline: auto;} .hero h1 em, .page-hero h1 em, .shead h2 em, .section h2 em{color: var(--muted);} .on-dark h1 em, .on-dark h2 em, .bg-night h2 em{color: var(--night-muted);} .hero .lead{max-width: 58ch;margin: 26px auto 0;color: var(--ink-2);font-size: clamp(1.0625rem, .95rem + .4vw, 1.25rem);} .hero .btn-row{justify-content: center;margin-top: 34px;} .hero .hero-note{margin-top: 18px;font-size: var(--fs-sm);color: var(--muted);} .hero .stage-wrap{margin-top: clamp(48px, 6vw, 80px);padding-bottom: clamp(56px, 7vw, 96px);} .page-hero{padding: clamp(40px, 6vw, 88px) 0 clamp(48px, 6vw, 96px);} .page-hero h1{font-size: clamp(2.5rem, 1.3rem + 4.2vw, 5rem);max-width: 18ch;} .page-hero .lead{margin-top: 24px;max-width: 60ch;color: var(--ink-2);font-size: clamp(1.0625rem, .95rem + .4vw, 1.25rem);} .page-hero .btn-row{margin-top: 32px;} .page-hero.has-art .wrap{display: grid;grid-template-columns: 1.1fr .9fr;gap: clamp(32px, 5vw, 80px);align-items: center;} .page-hero.has-art .art{display: grid;place-items: center;} .page-hero.has-art .art img{max-height: 420px;width: auto;} .page-hero .hero-media{margin-top: clamp(40px, 5vw, 72px);} .page-hero .hero-media .frame{aspect-ratio: 21/9;} .page-hero.center{text-align: center;} .page-hero.center h1, .page-hero.center .lead{margin-inline: auto;} .page-hero.center .btn-row, .page-hero.center .crumbs{justify-content: center;} @media (max-width: 900px){.page-hero.has-art .wrap{grid-template-columns: 1fr;} .page-hero.has-art .art img{max-height: 260px;} .page-hero .hero-media .frame{aspect-ratio: 4/3;}} .stage{position: relative;border-radius: var(--r-lg);overflow: hidden;aspect-ratio: 16/8.2;background: var(--mist);box-shadow: var(--shadow-2);isolation: isolate;text-align: left;} .stage > .bg{position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;transform: scale(1.02);} .stage::after{content: '';position: absolute;inset: 0;background: linear-gradient(90deg, rgba(10, 10, 10, .28), rgba(10, 10, 10, .05) 60%, rgba(10, 10, 10, .2));z-index: 0;} .bw{position: absolute;z-index: 1;left: 5.5%;top: 9%;width: 61%;aspect-ratio: 16/10.4;background: var(--white);border-radius: 12px;overflow: hidden;box-shadow: 0 30px 80px -24px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .06);font-size: clamp(7px, .82vw, 12px);} .bw-bar{display: flex;align-items: center;gap: 1em;height: 2.7em;padding: 0 1.1em;background: #f1f1ef;border-bottom: 1px solid #e3e3e0;} .bw-dots{display: flex;gap: .45em;} .bw-dots i{width: .8em;height: .8em;border-radius: 50%;background: #d9d9d5;display: block;} .bw-url{flex: 1;max-width: 46%;height: 1.65em;margin: 0 auto;border-radius: 1em;background: #fff;border: 1px solid #e3e3e0;display: flex;align-items: center;justify-content: center;font-family: var(--mono);font-size: .86em;color: var(--muted);letter-spacing: .02em;} .bw-site{position: absolute;inset: 2.7em 0 0 0;display: grid;grid-template-rows: auto 1fr;} .bw-nav{display: flex;align-items: center;gap: 1.7em;padding: 1.3em 2em;border-bottom: 1px solid #efefec;} .bw-nav .brand{font-weight: 650;letter-spacing: -.03em;font-size: 1.32em;margin-right: auto;color: #2b1f14;} .bw-nav span{color: #5c5f62;font-size: 1em;} .bw-nav .shop-tab{position: relative;padding: .45em .95em;border-radius: .35em;background: var(--tab);color: var(--ink);font-weight: 600;transform: translateY(-.4em) scale(.85);opacity: 0;transition: opacity .55s var(--ease), transform .55s var(--ease);} .stage[data-step="1"] .shop-tab, .stage[data-step="2"] .shop-tab, .stage[data-step="3"] .shop-tab, .stage[data-step="4"] .shop-tab, .stage.static .shop-tab{opacity: 1;transform: none;} .bw-nav .cart{display: inline-flex;align-items: center;gap: .35em;opacity: 0;transition: opacity .4s;color: var(--ink);font-weight: 600;} .bw-nav .cart svg{width: 1.35em;height: 1.35em;flex: none;} .bw-nav .cart b{display: inline-grid;place-items: center;min-width: 1.6em;height: 1.6em;padding: 0 .4em;border-radius: 1em;background: var(--ink);color: #fff;font-size: .85em;} .stage[data-step="2"] .cart, .stage[data-step="3"] .cart, .stage[data-step="4"] .cart, .stage.static .cart{opacity: 1;} .bw-page{position: relative;overflow: hidden;} .bw-home, .bw-shop{position: absolute;inset: 0;padding: 2em;transition: opacity .6s var(--ease), transform .6s var(--ease);} .bw-home{display: grid;grid-template-columns: 1.1fr 1fr;gap: 2em;align-items: center;} .bw-home h4{font-size: 2.5em;line-height: 1.02;letter-spacing: -.04em;color: #2b1f14;font-weight: 600;} .bw-home p{color: #6b6e70;font-size: 1.05em;margin-top: .7em;} .bw-home .ph{aspect-ratio: 4/3.2;border-radius: .7em;overflow: hidden;} .bw-home .ph img{width: 100%;height: 100%;object-fit: cover;} .bw-shop{opacity: 0;transform: translateY(1.2em);} .stage[data-step="2"] .bw-home, .stage[data-step="3"] .bw-home, .stage[data-step="4"] .bw-home, .stage.static .bw-home{opacity: 0;transform: translateY(-1em);} .stage[data-step="2"] .bw-shop, .stage[data-step="3"] .bw-shop, .stage[data-step="4"] .bw-shop, .stage.static .bw-shop{opacity: 1;transform: none;} .bw-shop h5{margin: 0 0 1.1em;font-size: 1.45em;letter-spacing: -.03em;font-weight: 600;display: flex;justify-content: space-between;align-items: baseline;} .bw-shop h5 small{font-size: .62em;font-weight: 500;color: #8a8c8e;letter-spacing: .02em;} .bw-grid{display: grid;grid-template-columns: repeat(3, 1fr);gap: 1.2em;} .bw-item{border: 1px solid #efefec;border-radius: .7em;overflow: hidden;background: #fff;} .bw-item .ph{aspect-ratio: 1;background: #f4f3ef;} .bw-item .ph img{width: 100%;height: 100%;object-fit: cover;} .bw-item .meta{padding: .75em .85em .85em;display: grid;gap: .25em;} .bw-item .meta b{font-weight: 600;font-size: 1.02em;letter-spacing: -.02em;} .bw-item .meta span{display: flex;justify-content: space-between;align-items: center;color: #6b6e70;} .bw-item .add{font-style: normal;padding: .3em .7em;border-radius: .35em;background: var(--ink);color: #fff;font-weight: 600;font-size: .9em;transition: background .3s, transform .3s;} .stage[data-step="2"] .bw-item:nth-child(2) .add{animation: tap .9s .3s var(--ease) both;} @keyframes tap{40%{transform: scale(.88);background: var(--tab);color: var(--ink);} 100%{transform: none;}} .phone{position: absolute;z-index: 2;right: 7%;top: 13%;width: 21.5%;aspect-ratio: 9/18.8;background: #0d0d0e;border-radius: 2.2em;padding: .55em;box-shadow: 0 40px 90px -20px rgba(0, 0, 0, .6);font-size: clamp(6.5px, .78vw, 11.5px);transform: translateY(1.5em);opacity: 0;transition: opacity .6s var(--ease), transform .7s var(--ease);} .stage[data-step="3"] .phone, .stage[data-step="4"] .phone, .stage.static .phone{opacity: 1;transform: none;} .phone-screen{height: 100%;border-radius: 1.75em;background: #fbfbfa;overflow: hidden;display: flex;flex-direction: column;padding: 2.4em 1.2em 1.4em;gap: .9em;} .phone-screen .ttl{font-weight: 650;font-size: 1.25em;letter-spacing: -.03em;} .phone-screen .line{display: flex;justify-content: space-between;gap: .6em;font-size: 1em;color: #45484a;padding-bottom: .65em;border-bottom: 1px solid #ecece9;} .phone-screen .slot{padding: .7em .8em;border-radius: .7em;border: 1px solid #e6e6e2;font-size: .95em;color: #45484a;display: grid;gap: .2em;} .phone-screen .slot b{color: var(--ink);} .phone-screen .total{display: flex;justify-content: space-between;font-weight: 650;font-size: 1.1em;margin-top: auto;} .phone-screen .pay{height: 3.1em;border-radius: .8em;background: var(--ink);color: #fff;display: grid;place-items: center;font-weight: 600;font-size: 1.05em;position: relative;overflow: hidden;} .phone-screen .pay .ok{position: absolute;inset: 0;display: grid;place-items: center;background: var(--leaf);opacity: 0;transition: opacity .4s;} .stage[data-step="4"] .phone-screen .pay .ok, .stage.static .pay .ok{opacity: 1;} .phone-screen .methods{display: flex;gap: .45em;justify-content: center;} .phone-screen .methods i{font-style: normal;font-size: .82em;padding: .3em .6em;border: 1px solid #e3e3df;border-radius: .4em;color: #5d6062;} .toast{position: absolute;z-index: 3;left: 9%;bottom: 8%;display: flex;gap: .9em;align-items: center;padding: 1em 1.3em 1em 1em;border-radius: 1em;background: rgba(255, 255, 255, .96);box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .45);font-size: clamp(8px, .85vw, 13px);opacity: 0;transform: translateY(1.2em);transition: opacity .6s var(--ease), transform .6s var(--ease);} .stage[data-step="4"] .toast, .stage.static .toast{opacity: 1;transform: none;} .toast .ico{width: 2.6em;height: 2.6em;border-radius: .7em;background: var(--tab);display: grid;place-items: center;} .toast .ico svg{width: 1.3em;height: 1.3em;} .toast b{display: block;font-size: 1.05em;letter-spacing: -.02em;} .toast span{color: #5f6264;} .stage-caption{display: flex;justify-content: space-between;gap: 16px;margin-top: 16px;font: 500 var(--fs-xxs)/1.4 var(--mono);letter-spacing: .12em;text-transform: uppercase;color: var(--muted);} .stage-steps{display: flex;gap: 18px;} .stage-caption .anim-toggle{margin-right: auto;} .stage-steps span{opacity: .45;transition: opacity .3s;} .stage-steps span.on{opacity: 1;color: var(--ink);} @media (max-width: 760px){.stage{aspect-ratio: 4/5;} .bw{left: 5%;top: 6%;width: 90%;aspect-ratio: 16/12.6;font-size: 7.5px;} .phone{right: 6%;top: auto;bottom: 6%;width: 38%;font-size: 7px;} .toast{left: 5%;bottom: 5%;font-size: 9px;} .stage-caption{flex-direction: column;align-items: center;} .stage-caption .anim-toggle{margin-right: 0;} .stage-steps{flex-wrap: wrap;justify-content: center;gap: 10px;}} .marquee{overflow: hidden;-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);} .marquee-track{display: flex;gap: clamp(36px, 5vw, 72px);width: max-content;animation: marquee 40s linear infinite;} .marquee:hover .marquee-track, .marquee.paused .marquee-track{animation-play-state: paused;} .anim-toggle{font: 500 var(--fs-xxs)/1 var(--mono);letter-spacing: .12em;text-transform: uppercase;background: none;border: 1px solid var(--line);border-radius: 999px;padding: 7px 11px;color: var(--muted);cursor: pointer;} .anim-toggle:hover{color: var(--ink);border-color: var(--ink);} .marquee-track span{font-size: clamp(1.125rem, .9rem + .7vw, 1.5rem);font-weight: 600;letter-spacing: -.035em;color: #6d7073;white-space: nowrap;} @keyframes marquee{to{transform: translateX(-50%);}} @media (prefers-reduced-motion: reduce){.marquee-track{animation: none;flex-wrap: wrap;justify-content: center;width: auto;}} .logos-label{text-align: center;margin-bottom: 26px;} .statement p.st{font-size: var(--fs-statement);line-height: 1.16;letter-spacing: -.04em;font-weight: 550;max-width: 24ch;text-wrap: balance;margin: 0;} .statement.wide p.st{max-width: 30ch;} @supports (animation-timeline: view()){.statement p.st{color: transparent;background: linear-gradient(100deg, var(--ink) 0 50%, #c3c5c7 50% 100%);background-size: 210% 100%;background-position: 100% 0;-webkit-background-clip: text;background-clip: text;animation: fillText linear both;animation-timeline: view();animation-range: entry 15% cover 52%;} .on-dark .statement p.st, .statement.on-dark p.st{background-image: linear-gradient(100deg, var(--night-ink) 0 50%, #4a4c4f 50% 100%);} @keyframes fillText{to{background-position: 0 0;}}} @media (prefers-reduced-motion: reduce){.statement p.st{animation: none !important;color: inherit !important;background: none !important;}} .statement .btn-row{margin-top: 40px;} .statement .sub{margin-top: 28px;max-width: 56ch;color: var(--muted);font-size: var(--fs-md);} .steps{display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: clamp(16px, 2vw, 28px);} .step{background: var(--white);border: 1px solid var(--line-soft);border-radius: var(--r-md);padding: 26px 26px 30px;display: flex;flex-direction: column;} .step .art{aspect-ratio: 4/3;display: grid;place-items: center;margin: -6px -6px 18px;} .step .art img{width: 92%;height: auto;} .step .n{font: 500 var(--fs-xxs)/1 var(--mono);letter-spacing: .14em;color: var(--muted);margin-bottom: 14px;} .step h3{font-size: var(--fs-lg);margin-bottom: 10px;} .step p{color: var(--muted);margin: 0;font-size: .9688rem;} .step .when{margin-top: auto;padding-top: 18px;font-size: var(--fs-xs);font-family: var(--mono);letter-spacing: .06em;color: var(--ink-2);} @media (max-width: 900px){.steps{grid-template-columns: 1fr;} .step .art{aspect-ratio: 16/8;} .step .art img{width: auto;max-height: 180px;}} .bento{display: grid;grid-template-columns: repeat(6, minmax(0, 1fr));gap: clamp(14px, 1.6vw, 22px);} .tile{grid-column: span 2;background: var(--white);border: 1px solid var(--line-soft);border-radius: var(--r-md);padding: 26px;display: flex;flex-direction: column;gap: 10px;min-height: 280px;overflow: hidden;position: relative;} .tile.w3{grid-column: span 3;} .tile.w4{grid-column: span 4;} .tile.w6{grid-column: span 6;} .tile h3{font-size: var(--fs-lg);} .tile p{color: var(--muted);font-size: .9688rem;margin: 0;max-width: 46ch;} .tile .viz{margin-top: auto;padding-top: 20px;} .tile.dark{background: var(--night);color: var(--night-ink);border-color: var(--night);} .tile.dark p{color: var(--night-muted);} .tile.gold{background: var(--tab-soft);border-color: rgba(184, 135, 26, .25);} .tile .art{position: absolute;right: -4%;bottom: -6%;width: 54%;opacity: .95;pointer-events: none;} @media (max-width: 960px){.bento{grid-template-columns: repeat(2, minmax(0, 1fr));} .tile, .tile.w3, .tile.w4{grid-column: span 1;} .tile.w6{grid-column: span 2;}} @media (max-width: 620px){.bento{grid-template-columns: 1fr;} .tile, .tile.w3, .tile.w4, .tile.w6{grid-column: span 1;}} .viz-swatches{display: flex;gap: 8px;} .viz-swatches i{width: 34px;height: 34px;border-radius: 50%;border: 1px solid var(--line-soft);} .viz-pills{display: flex;flex-wrap: wrap;gap: 8px;} .viz-pills span{padding: 8px 12px;border-radius: 999px;border: 1px solid var(--line);background: var(--paper);font-size: var(--fs-sm);font-weight: 500;} .on-dark .viz-pills span, .tile.dark .viz-pills span{background: var(--night-2);border-color: var(--night-line);} .viz-toggles{display: grid;gap: 8px;} .viz-toggles div{display: flex;justify-content: space-between;align-items: center;padding: 10px 12px;border: 1px solid var(--line-soft);border-radius: var(--r-sm);background: var(--paper);font-size: var(--fs-sm);} .viz-toggles i{width: 30px;height: 18px;border-radius: 99px;background: var(--ink);position: relative;} .viz-toggles i::after{content: '';position: absolute;right: 2px;top: 2px;width: 14px;height: 14px;border-radius: 50%;background: #fff;} .viz-toggles i.off{background: var(--mist-2);} .viz-toggles i.off::after{right: auto;left: 2px;} .viz-mail{border: 1px solid var(--line-soft);border-radius: var(--r-sm);background: var(--paper);padding: 14px;font-size: var(--fs-sm);display: grid;gap: 6px;} .viz-mail .from{display: flex;justify-content: space-between;color: var(--muted);font-size: var(--fs-xs);} .viz-mail b{font-size: .9375rem;} .viz-mail .ln{display: flex;justify-content: space-between;color: var(--ink-2);} .viz-price{display: flex;align-items: center;gap: 10px;font-size: var(--fs-xl);font-weight: 600;letter-spacing: -.03em;} .viz-price s{color: var(--muted);font-weight: 400;font-size: .8em;} .viz-price .caret{width: 2px;height: 1.1em;background: var(--ink);animation: blink 1s steps(1) infinite;} @keyframes blink{50%{opacity: 0;}} .viz-chat{display: grid;gap: 8px;font-size: var(--fs-sm);max-width: 560px;} .viz-chat span{max-width: 82%;padding: 10px 13px;border-radius: 14px;background: var(--night-2);} .viz-chat span.me{justify-self: end;background: var(--tab);color: var(--ink);} .price-hero{display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));border: 1px solid var(--line);border-radius: var(--r-lg);background: var(--white);overflow: hidden;} .price-hero > div{padding: clamp(26px, 3vw, 40px);} .price-hero > div + div{border-left: 1px solid var(--line);} .price-hero .k{font: 500 var(--fs-xxs)/1.4 var(--mono);letter-spacing: .14em;text-transform: uppercase;color: var(--muted);} .price-hero .v{margin-top: 18px;font-size: clamp(3rem, 2rem + 4vw, 5.5rem);font-weight: 600;letter-spacing: -.06em;line-height: .95;} .price-hero .d{margin-top: 14px;color: var(--muted);font-size: .9688rem;max-width: 28ch;} .price-hero .hl{background: var(--night);color: var(--night-ink);} .price-hero .hl .k, .price-hero .hl .d{color: var(--night-muted);} .price-hero .hl .v{color: var(--tab);} .price-hero .cap{display: inline-flex;margin-top: 16px;padding: 7px 11px;border: 1px solid var(--night-line);border-radius: 999px;font: 500 var(--fs-xxs)/1 var(--mono);letter-spacing: .12em;text-transform: uppercase;color: var(--night-ink);} @media (max-width: 820px){.price-hero{grid-template-columns: 1fr;} .price-hero > div + div{border-left: 0;border-top: 1px solid var(--line);}} .calc{display: grid;grid-template-columns: 1fr 1fr;gap: 0;border: 1px solid var(--line);border-radius: var(--r-lg);overflow: hidden;background: var(--white);} .calc .in{padding: clamp(24px, 3vw, 40px);display: grid;gap: 26px;align-content: start;} .calc .out{padding: clamp(24px, 3vw, 40px);background: var(--paper);border-left: 1px solid var(--line);display: grid;gap: 14px;align-content: start;} .calc label{display: flex;justify-content: space-between;font-size: var(--fs-sm);font-weight: 550;margin-bottom: 10px;} .calc label output{font-family: var(--mono);font-weight: 500;} .calc input[type="range"]{width: 100%;accent-color: var(--ink);} .calc .line{display: flex;justify-content: space-between;gap: 12px;padding: 12px 0;border-bottom: 1px solid var(--line-soft);font-size: .9688rem;} .calc .line span:last-child{font-family: var(--mono);} .calc .line.total{border-bottom: 0;font-weight: 600;font-size: 1.125rem;padding-top: 16px;} .calc .line.total span:last-child{font-family: var(--font);font-size: var(--fs-xl);letter-spacing: -.03em;} .calc .fine{font-size: var(--fs-xs);color: var(--muted);margin-top: 6px;} @media (max-width: 820px){.calc{grid-template-columns: 1fr;} .calc .out{border-left: 0;border-top: 1px solid var(--line);}} .tiles{display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: clamp(14px, 1.6vw, 22px);} .tiles.four{grid-template-columns: repeat(4, minmax(0, 1fr));} .tile-img{position: relative;display: block;aspect-ratio: 4/5;border-radius: var(--r-md);overflow: hidden;text-decoration: none;color: var(--white);background: var(--night-2);} .tile-img img{position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;transition: transform .9s var(--ease);} .tile-img:hover img{transform: scale(1.045);} .tile-img::after{content: '';position: absolute;inset: 0;background: linear-gradient(180deg, rgba(0, 0, 0, .05) 40%, rgba(0, 0, 0, .7));} .tile-img .cap{position: absolute;inset: auto 0 0 0;z-index: 1;padding: 22px;display: grid;gap: 6px;} .tile-img .cap b{font-size: var(--fs-lg);font-weight: 550;letter-spacing: -.03em;line-height: 1.1;} .tile-img .cap span{font-size: var(--fs-sm);opacity: .85;line-height: 1.4;} .tile-img .chip{position: absolute;top: 16px;left: 16px;z-index: 1;color: var(--white);background: rgba(0, 0, 0, .2);-webkit-backdrop-filter: blur(6px);backdrop-filter: blur(6px);border-color: rgba(255, 255, 255, .55);} @media (max-width: 1000px){.tiles, .tiles.four{grid-template-columns: repeat(2, minmax(0, 1fr));}} @media (max-width: 560px){.tiles, .tiles.four{grid-template-columns: 1fr;} .tile-img{aspect-ratio: 4/3.4;}} .wrap.split{display: grid;grid-template-columns: 1fr 1fr;gap: clamp(32px, 6vw, 96px);align-items: center;} .wrap.split.rev .split-media{order: 2;} .split-media .frame{aspect-ratio: 4/3.6;} .split-media.art{display: grid;place-items: center;} .split-media.art img{max-height: 440px;width: auto;} .wrap.split h2{font-size: var(--fs-2xl);margin-bottom: 18px;} .wrap.split .text > p{color: var(--ink-2);font-size: var(--fs-md);} .wrap.split ul.ticks{list-style: none;padding: 0;margin: 24px 0 0;display: grid;gap: 12px;} .wrap.split ul.ticks li{display: flex;gap: 12px;align-items: flex-start;} .wrap.split .btn-row{margin-top: 30px;} @media (max-width: 900px){.wrap.split{grid-template-columns: 1fr;} .wrap.split.rev .split-media{order: 0;}} .checklist{display: grid;grid-template-columns: 1fr 1fr;gap: 0 48px;border-top: 1px solid var(--line);list-style: none;padding: 0;margin: 0;} .checklist li{display: flex;gap: 14px;padding: 20px 0;border-bottom: 1px solid var(--line);} .checklist li b{display: block;font-weight: 600;letter-spacing: -.015em;margin-bottom: 3px;} .checklist li span{color: var(--muted);font-size: .9375rem;} @media (max-width: 760px){.checklist{grid-template-columns: 1fr;}} .cta-band{position: relative;overflow: hidden;background: var(--night);color: var(--night-ink);text-align: center;padding: clamp(96px, 12vw, 180px) 0;isolation: isolate;} .cta-band .tex{position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;opacity: .55;z-index: -1;} .cta-band h2{font-size: clamp(2.5rem, 1.4rem + 4.4vw, 5.25rem);max-width: 16ch;margin-inline: auto;letter-spacing: -.05em;} .cta-band p{margin: 22px auto 0;max-width: 54ch;color: var(--night-muted);font-size: var(--fs-md);} .cta-band .btn-row{justify-content: center;margin-top: 36px;} .founding{display: grid;grid-template-columns: 1.2fr .8fr;gap: 0;border-radius: var(--r-lg);overflow: hidden;border: 1px solid var(--line);background: var(--white);} .founding .l{padding: clamp(28px, 4vw, 56px);} .founding .r{background: var(--paper);border-left: 1px solid var(--line);padding: clamp(28px, 4vw, 56px);display: grid;align-content: center;justify-items: center;text-align: center;gap: 14px;} .founding .r img{max-width: 260px;} .founding h2{font-size: var(--fs-2xl);margin-bottom: 16px;} .founding p{color: var(--ink-2);} .founding ul{margin: 22px 0 0;padding: 0;list-style: none;display: grid;gap: 12px;} .founding li{display: flex;gap: 12px;} .founding .counter{font-size: var(--fs-3xl);font-weight: 600;letter-spacing: -.05em;line-height: 1;} .founding .counter + span{color: var(--muted);font-size: var(--fs-sm);max-width: 24ch;} @media (max-width: 860px){.founding{grid-template-columns: 1fr;} .founding .r{border-left: 0;border-top: 1px solid var(--line);}} .tquote{background: var(--white);border: 1px solid var(--line-soft);border-radius: var(--r-md);padding: 28px;display: flex;flex-direction: column;gap: 22px;} .tquote blockquote{margin: 0;font-size: var(--fs-md);line-height: 1.5;letter-spacing: -.015em;} .tquote .who{margin-top: auto;font-size: var(--fs-sm);color: var(--muted);} .tquote .who b{display: block;color: var(--ink);} .scenario{background: var(--white);border: 1px dashed rgba(15, 16, 17, .25);border-radius: var(--r-md);padding: 26px;display: flex;flex-direction: column;gap: 12px;} .scenario .chip{align-self: flex-start;} .brand-asset .pv img{height: 80px;width: auto;max-width: 100%;object-fit: contain;} .scenario h3{font-size: var(--fs-lg);} .scenario p{color: var(--ink-2);font-size: .9688rem;margin: 0;} .scenario .math{margin-top: auto;padding-top: 14px;border-top: 1px solid var(--line-soft);font-family: var(--mono);font-size: var(--fs-xs);color: var(--muted);letter-spacing: .02em;line-height: 1.6;} .contact-cards{display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 18px;} .contact-card{background: var(--white);border: 1px solid var(--line-soft);border-radius: var(--r-md);padding: 26px;display: grid;gap: 8px;align-content: start;} .contact-card .k{font: 500 var(--fs-xxs)/1.4 var(--mono);letter-spacing: .14em;text-transform: uppercase;color: var(--muted);} .contact-card a{font-size: var(--fs-md);font-weight: 550;letter-spacing: -.02em;word-break: break-word;} .contact-card p{color: var(--muted);font-size: var(--fs-sm);margin: 0;} @media (max-width: 860px){.contact-cards{grid-template-columns: 1fr;}} .form-card{background: var(--white);border: 1px solid var(--line-soft);border-radius: var(--r-lg);padding: clamp(24px, 4vw, 48px);box-shadow: var(--shadow-1);} .two-col{display: grid;grid-template-columns: .9fr 1.1fr;gap: clamp(32px, 6vw, 96px);align-items: start;} @media (max-width: 960px){.two-col{grid-template-columns: 1fr;}} .side-list{list-style: none;padding: 0;margin: 28px 0 0;display: grid;gap: 18px;} .side-list li{display: flex;gap: 14px;} .side-list li b{display: block;} .side-list li span{color: var(--muted);font-size: .9375rem;} .side-list .n{font-family: var(--mono);font-size: var(--fs-xs);color: var(--muted);padding-top: 3px;min-width: 22px;} .brand-assets{display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 18px;} .brand-asset{border: 1px solid var(--line-soft);border-radius: var(--r-md);overflow: hidden;background: var(--white);text-decoration: none;} .brand-asset .pv{aspect-ratio: 16/10;display: grid;place-items: center;background: var(--paper);} .brand-asset .pv.dark{background: var(--night);} .brand-asset .pv img{max-width: 70%;max-height: 60%;} .brand-asset .lbl{padding: 14px 16px;display: flex;justify-content: space-between;font-size: var(--fs-sm);} .swatches{display: grid;grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));gap: 14px;} .swatch{border-radius: var(--r-md);overflow: hidden;border: 1px solid var(--line-soft);background: var(--white);} .swatch i{display: block;aspect-ratio: 16/9;} .swatch div{padding: 12px 14px;font-size: var(--fs-sm);} .swatch code{font-family: var(--mono);color: var(--muted);font-size: var(--fs-xs);} @media (max-width: 760px){.brand-assets{grid-template-columns: 1fr;} .swatches{grid-template-columns: repeat(2, 1fr);}} .doc-hero{padding: clamp(40px, 6vw, 80px) 0 clamp(28px, 4vw, 48px);} .doc-hero h1{font-size: clamp(2.25rem, 1.3rem + 3.4vw, 4.25rem);max-width: 22ch;} .doc-hero .lead{margin-top: 20px;max-width: 62ch;color: var(--ink-2);} .doc-meta{display: flex;flex-wrap: wrap;gap: 8px 22px;margin-top: 26px;font: 500 var(--fs-xxs)/1.4 var(--mono);letter-spacing: .12em;text-transform: uppercase;color: var(--muted);} .doc-cover{margin-bottom: clamp(36px, 5vw, 64px);} .doc-cover .frame{aspect-ratio: 21/9;} .doc-layout{display: grid;grid-template-columns: 230px minmax(0, 1fr);gap: clamp(32px, 6vw, 96px);padding-bottom: var(--sp-section);} .doc-layout .prose{max-width: 720px;} .doc-layout.notoc{grid-template-columns: minmax(0, 1fr);} .doc-layout.notoc .prose{margin-inline: auto;} @media (max-width: 980px){.doc-layout{grid-template-columns: minmax(0, 1fr);} .toc{position: static;border: 1px solid var(--line-soft);border-radius: var(--r-md);padding: 18px 20px;background: var(--white);} .toc ol{gap: 0;} .toc a{padding-block: 11px;}} .doc-foot{margin-top: 56px;padding-top: 26px;border-top: 1px solid var(--line);display: flex;flex-wrap: wrap;justify-content: space-between;gap: 14px;font-size: var(--fs-sm);color: var(--muted);} .legal-badge{display: inline-flex;gap: 8px;align-items: center;padding: 8px 12px;border-radius: var(--r-xs);background: var(--white);border: 1px solid var(--line);font-size: var(--fs-xs);color: var(--ink-2);} .related{display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 18px;} @media (max-width: 860px){.related{grid-template-columns: 1fr;}} .demo-intro{display: grid;grid-template-columns: 1fr auto;gap: 20px;align-items: end;} @media (max-width: 760px){.demo-intro{grid-template-columns: 1fr;}} .store{--s-accent: #2b1f14;--s-bg: #ffffff;--s-soft: #f6f4f0;border-radius: var(--r-lg);overflow: hidden;box-shadow: var(--shadow-2);background: var(--s-bg);border: 1px solid var(--line-soft);} .store-chrome{display: flex;align-items: center;gap: 12px;height: 40px;padding: 0 16px;background: #f1f1ef;border-bottom: 1px solid #e3e3e0;} .store-chrome .bw-dots i{width: 10px;height: 10px;} .store-chrome .bw-url{font-size: 12px;height: 26px;max-width: 420px;} .store-head{display: flex;align-items: center;gap: 26px;padding: 18px clamp(16px, 3vw, 32px);border-bottom: 1px solid #eeece8;flex-wrap: wrap;} .store-head .sname{font-weight: 650;font-size: 1.25rem;letter-spacing: -.035em;color: var(--s-accent);margin-right: auto;} .store-head nav{display: flex;gap: 20px;flex-wrap: wrap;font-size: var(--fs-sm);color: #5f6164;} .store-head nav .on{color: var(--ink);font-weight: 600;background: var(--tab);padding: 5px 10px;border-radius: 5px;} @media (max-width: 760px){.store-head{gap: 12px 16px;} .store-head nav{order: 3;flex-basis: 100%;gap: 8px 16px;align-items: center;}} .store-cartbtn{display: inline-flex;align-items: center;gap: 8px;height: 40px;padding: 0 14px;border-radius: 6px;border: 1px solid #e3e1dc;background: #fff;cursor: pointer;font-size: var(--fs-sm);font-weight: 600;} .store-cartbtn svg{width: 18px;height: 18px;flex: none;} .store-cartbtn b{display: inline-grid;place-items: center;min-width: 22px;height: 22px;padding: 0 6px;border-radius: 99px;background: var(--ink);color: #fff;font-size: 12px;} .store-banner{display: grid;grid-template-columns: 1.1fr 1fr;min-height: 260px;background: var(--s-soft);} .store-banner .txt{padding: clamp(22px, 4vw, 48px);display: flex;flex-direction: column;justify-content: center;gap: 12px;} .store-banner h2{font-size: clamp(1.75rem, 1.1rem + 2vw, 2.75rem);color: var(--s-accent);} .store-banner p{color: #5c5e60;max-width: 46ch;margin: 0;} .store-banner .ph{position: relative;overflow: hidden;} .store-banner .ph img{position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;} @media (max-width: 760px){.store-banner{grid-template-columns: 1fr;} .store-banner .ph{aspect-ratio: 16/9;}} .store-body{padding: clamp(18px, 3vw, 36px);} .store-filters{display: flex;gap: 8px;flex-wrap: wrap;margin-bottom: 22px;} .store-filters button{height: 34px;padding: 0 14px;border-radius: 99px;border: 1px solid #e3e1dc;background: #fff;cursor: pointer;font-size: var(--fs-sm);} .store-filters button[aria-pressed="true"]{background: var(--ink);color: #fff;border-color: var(--ink);} .store-grid{display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 18px;} @media (max-width: 900px){.store-grid{grid-template-columns: repeat(2, minmax(0, 1fr));}} @media (max-width: 520px){.store-grid{grid-template-columns: 1fr;}} .sp{border: 1px solid #eeece8;border-radius: 12px;overflow: hidden;display: flex;flex-direction: column;background: #fff;} .sp .ph{aspect-ratio: 1;background: var(--s-soft);overflow: hidden;} .sp .ph img{width: 100%;height: 100%;object-fit: cover;} .sp .ph.etchph{display: grid;place-items: center;padding: 12%;} .sp .ph.etchph img{object-fit: contain;} .drawer .it img.lineart, .drawer .it img[src*='/etch/']{object-fit: contain;background: var(--paper);padding: 4px;mix-blend-mode: multiply;} .sp .inf{padding: 14px 16px 16px;display: grid;gap: 6px;flex: 1;} .sp .inf b{font-weight: 600;letter-spacing: -.02em;} .sp .inf p{font-size: var(--fs-sm);color: #6b6d70;margin: 0;} .sp .row2{display: flex;justify-content: space-between;align-items: center;margin-top: auto;padding-top: 8px;} .sp .price{font-weight: 600;} .sp .tag{justify-self: start;font-size: 11px;font-family: var(--mono);letter-spacing: .06em;padding: 3px 7px;border-radius: 4px;background: var(--tab-soft);color: #6b4c05;} .sp button.addbtn{height: 34px;padding: 0 14px;border-radius: 6px;border: 0;background: var(--ink);color: #fff;font-weight: 600;font-size: var(--fs-sm);cursor: pointer;} .sp button.addbtn:hover{background: #2c2e30;} .sp button.addbtn.added{background: var(--leaf);} .store-foot{display: flex;flex-wrap: wrap;gap: 10px 26px;padding: 16px clamp(16px, 3vw, 32px);border-top: 1px solid #eeece8;font-size: var(--fs-xs);color: var(--muted);background: #fcfcfb;} .drawer{position: fixed;inset: 0;z-index: 80;display: none;} .drawer.open{display: block;} .drawer .scrim{position: absolute;inset: 0;background: rgba(10, 10, 10, .45);} .drawer .panel{position: absolute;top: 0;right: 0;bottom: 0;width: min(440px, 100%);background: #fff;display: flex;flex-direction: column;box-shadow: -30px 0 80px -30px rgba(0, 0, 0, .5);animation: slidein .35s var(--ease);} @keyframes slidein{from{transform: translateX(30px);opacity: 0;}} .drawer .ph-head{display: flex;justify-content: space-between;align-items: center;padding: 20px 22px;border-bottom: 1px solid var(--line-soft);} .drawer .ph-head h2{font-size: var(--fs-lg);} .drawer .x{width: 40px;height: 40px;border-radius: 50%;border: 1px solid var(--line);background: #fff;cursor: pointer;font-size: 18px;} .drawer .items{flex: 1;overflow-y: auto;padding: 8px 22px;} .drawer .it{display: grid;grid-template-columns: 56px 1fr auto;gap: 12px;align-items: center;padding: 14px 0;border-bottom: 1px solid var(--line-soft);font-size: var(--fs-sm);} .drawer .it img{width: 56px;height: 56px;border-radius: 8px;object-fit: cover;} .drawer .qty{display: inline-flex;align-items: center;gap: 8px;margin-top: 4px;} .drawer .qty button{width: 32px;height: 32px;border-radius: 50%;border: 1px solid var(--line);background: #fff;cursor: pointer;} .drawer .empty{padding: 40px 0;color: var(--muted);text-align: center;} .drawer .checkout{padding: 18px 22px 22px;border-top: 1px solid var(--line-soft);display: grid;gap: 12px;} .drawer .fulfil{display: grid;grid-auto-flow: column;grid-auto-columns: minmax(0, 1fr);gap: 6px;} .drawer .fulfil button{padding: 10px 6px;border-radius: 8px;border: 1px solid var(--line);background: #fff;cursor: pointer;font-size: var(--fs-xs);font-weight: 550;} .drawer .fulfil button[aria-pressed="true"]{border-color: var(--ink);background: var(--paper);} .drawer .slot{font-size: var(--fs-sm);color: var(--ink-2);} .drawer select{min-height: 42px;} .drawer .tot{display: flex;justify-content: space-between;font-weight: 600;font-size: 1.0625rem;} .drawer .paid{display: none;padding: 26px 22px;text-align: center;gap: 10px;} .drawer.done .paid{display: grid;} .drawer.done .checkout, .drawer.done .items{display: none;} .drawer .paid .big{font-size: var(--fs-2xl);font-weight: 600;letter-spacing: -.04em;} .drawer .paid:focus{outline: none;} .demo-facts{display: grid;grid-template-columns: repeat(4, minmax(0, 1fr));gap: 0;border-top: 1px solid var(--line);margin-top: 40px;} .demo-facts div{padding: 20px 20px 4px 0;} .demo-facts div + div{border-left: 1px solid var(--line);padding-left: 20px;} .demo-facts b{display: block;font-size: var(--fs-lg);letter-spacing: -.03em;} .demo-facts span{color: var(--muted);font-size: var(--fs-sm);} @media (max-width: 860px){.demo-facts{grid-template-columns: 1fr 1fr;} .demo-facts div:nth-child(3){border-left: 0;padding-left: 0;}} .nf{min-height: 70vh;display: grid;place-items: center;text-align: center;padding: 80px var(--gutter);} .nf .code{font: 500 var(--fs-xs)/1 var(--mono);letter-spacing: .2em;color: var(--muted);} .nf h1{font-size: var(--fs-3xl);margin: 20px auto 16px;max-width: 18ch;} .nf p{color: var(--muted);} .nf .btn-row{justify-content: center;margin-top: 28px;} .nf img{width: 260px;margin: 0 auto 24px;} .demo-ribbon svg{width: 16px;height: 16px;flex: none;} .drawer .it b{display: block;} @media (max-width: 760px){.btn.sm, .lang-btn, .hdr .logo, .ft-brand .logo{min-height: 40px;} .lang-btn{height: 40px;} .sp button.addbtn, .store-filters button{height: 40px;} .ft-cols ul{gap: 0;} .ft-cols a, .ft-bottom ul a{display: inline-block;padding-block: 11px;} .ft-bottom ul{row-gap: 0;} .doc-foot a, .contact-card a, .shead .link-arrow{padding-block: 9px;margin-block: -9px;} .anim-toggle, .ft-langs a, .drawer .qty button{position: relative;} .anim-toggle::after, .ft-langs a::after, .drawer .qty button::after{content: '';position: absolute;inset: -7px -2px;} .calc input[type="range"]{height: 40px;}} @media print{.announce, .skip-link, .site-header nav, .hdr-actions, .mobile-nav, .site-footer .ft, .ft-bottom ul, .ft-langs, .cta-band, .drawer, .anim-toggle{display: none !important;} body{background: #fff;} .site-header{position: static;background: none;-webkit-backdrop-filter: none;backdrop-filter: none;} .site-footer{background: none;color: var(--muted);padding: 16px 0 0;} .ft-bottom{margin-top: 0;border-color: var(--line);color: var(--muted);} .js .reveal{opacity: 1 !important;filter: none !important;transform: none !important;} .doc-layout{padding-bottom: 0;} .prose h2, .prose h3{break-after: avoid;} .prose table, .prose figure, .callout{break-inside: avoid;}}