/* ========================================================================== Beacon Studio - site stylesheet This file has two parts: 1. Hand-written component styles (below) - edit these freely. 2. A generated block of Tailwind utility classes (bg-*, text-*, flex, etc.) at the very bottom - this was compiled once from the classes used in index.html/privacy.html and isn't meant to be hand-edited. If you add a brand-new Tailwind class to the HTML that isn't already used somewhere on the site, it won't have a matching rule here - use one of the classes already in the HTML, or add a plain CSS rule up here instead. ========================================================================== */ :root { scroll-behavior: smooth; /* One motion system (A11): every reveal/hover/sweep added in this pass consumes these tokens instead of declaring its own timing. Pre-existing hardcoded transitions elsewhere (.btn-cross base state, .pricing-factor-card's reduced-motion fallback) predate this and are unchanged. */ --easeStandard: cubic-bezier(0.22, 1, 0.36, 1); --durationBase: 0.3s; --durationSlow: 0.6s; /* Fixed header is ~90px/5.6rem tall at rest - clear it (plus breathing room) so anchor-link and skip-link jumps don't land a section heading underneath it. */ scroll-padding-top: 8rem; } * { box-sizing: border-box; } ::selection { background-color: #adff2f; color: #111110; } /* ─── Sticky header shrink ─────────────────────────────── Padding/height are ordinarily off-limits for transitions (layout thrash), but this is a single fixed-position chrome element toggled once per scroll-threshold crossing, not a per-item or per-frame animation - the standard "shrinking header" pattern needs the box itself to get shorter, which a transform-only approach can't do without leaving a dead gap. */ .c-navBar { padding-block: 1.5rem; transition: padding-block var(--durationBase) var(--easeStandard); } #main-nav.is-scrolled .c-navBar { padding-block: 0.875rem; } .c-navLogo { transform-origin: left center; transition: transform var(--durationBase) var(--easeStandard); } #main-nav.is-scrolled .c-navLogo { /* Floor, not a stylistic choice: the logo is a link, and 0.82 pushed its 28px resting height under the 24px WCAG 2.2 AA target-size minimum (SC 2.5.8). 0.88 clears it with margin. */ transform: scale(0.88); } @media (prefers-reduced-motion: reduce) { .c-navBar, .c-navLogo { transition: none; } } /* ─── Scroll-reveal ──────────────────────────────────────── */ [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity var(--durationSlow) var(--easeStandard), transform var(--durationSlow) var(--easeStandard); } [data-reveal].is-visible { opacity: 1; transform: translateY(0); } [data-reveal="delay-1"] { transition-delay: 0.1s; } [data-reveal="delay-2"] { transition-delay: 0.2s; } [data-reveal="delay-3"] { transition-delay: 0.3s; } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } } /* ─── Mobile nav ─────────────────────────────────────────── */ /* [data-js] is set by an inline script at the top of (see index.html) - this hides the mobile menu panel until JS has run, so it doesn't sit open below the header for users without JS. */ [data-js] [data-mobile-nav] { display: none; } [data-js] [data-mobile-nav].is-open { display: flex; } /* ─── Parallax background image ─────────────────────────── */ /* background-position-y is driven by JS (see js/home.js); this sets the static base */ .parallax-bg { background-size: cover; background-position: center; background-repeat: no-repeat; will-change: background-position; } /* ─── Eyebrow heading dash ───────────────────────────────── */ /* The short line beside small uppercase eyebrow headings (e.g. "What it costs"). currentColor keeps it locked to whatever text colour its own heading uses. */ .e-headingDash { background-color: currentColor; } /* ─── Pricing cards grid ─────────────────────────────────── */ /* Hairline-grid technique from the ideas scratchpad: the grid's own 1px gap plus a hairline background colour draws the dividing lines between cards - no per-card border needed. */ .c-pricingCards { display: grid; grid-template-columns: 1fr; gap: 1px; background-color: #e5e4e0; border: 1px solid #e5e4e0; } @media (width >= 768px) { .c-pricingCards { grid-template-columns: repeat(3, 1fr); } } /* ─── Pricing factor card ────────────────────────────────── */ /* The three "what affects the price" cards in the Pricing section. Flat and static, matching the ideas scratchpad's own idea-card treatment - no shadow, no radius, no hover animation: the quality signal is in the mono index and hairline grid, not in a lift-on-hover effect. */ .pricing-factor-card { position: relative; background-color: #f4f4f0; padding: 2.5rem 2rem; } /* ─── Cross-corner button ───────────────────────────────── */ /* Corner marks are drawn with ::before/::after (bottom-left / top-right) and two child spans (top-left / bottom-right). On hover/focus the marks spread outward and the button fills with colour - see the variant blocks below. */ .btn-cross { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; transition: background-color 0.2s ease, color 0.2s ease; } .btn-cross::before, .btn-cross::after, .btn-cross .bracket-tl, .btn-cross .bracket-br { content: ''; position: absolute; width: 10px; height: 10px; border-style: solid; transition: transform var(--durationBase) var(--easeStandard); } .btn-cross .bracket-tl, .btn-cross::before { top: -4px; } .btn-cross .bracket-br, .btn-cross::after { bottom: -4px; } .btn-cross::before { left: -4px; border-width: 2px 0 0 2px; } .btn-cross::after { right: -4px; border-width: 0 2px 2px 0; } .btn-cross .bracket-tl { right: -4px; border-width: 2px 2px 0 0; } .btn-cross .bracket-br { left: -4px; border-width: 0 0 2px 2px; } /* Brackets spread outward on hover/keyboard focus */ .btn-cross:hover::before, .btn-cross:focus-visible::before { transform: translate(-3px, -3px); } .btn-cross:hover::after, .btn-cross:focus-visible::after { transform: translate(3px, 3px); } .btn-cross:hover .bracket-tl, .btn-cross:focus-visible .bracket-tl { transform: translate(3px, -3px); } .btn-cross:hover .bracket-br, .btn-cross:focus-visible .bracket-br { transform: translate(-3px, 3px); } .btn-cross--green-border::before, .btn-cross--green-border::after, .btn-cross--green-border .bracket-tl, .btn-cross--green-border .bracket-br { border-color: #111110; } .btn-cross--green-border:hover, .btn-cross--green-border:focus-visible { background-color: #c8ff6a; color: #111110; } .btn-cross--grey-bg::before, .btn-cross--grey-bg::after, .btn-cross--grey-bg .bracket-tl, .btn-cross--grey-bg .bracket-br { border-color: #111110; } .btn-cross--grey-bg:hover, .btn-cross--grey-bg:focus-visible { background-color: #c8ff6a; } /* The hero CTA's arrow icon is lime by default - force it dark on hover so it doesn't disappear into the button's own lime hover-fill. */ .btn-cross--grey-bg:hover .btn-cross__arrow, .btn-cross--grey-bg:focus-visible .btn-cross__arrow { color: #111110; } .btn-cross--black-border::before, .btn-cross--black-border::after, .btn-cross--black-border .bracket-tl, .btn-cross--black-border .bracket-br { border-color: #111110; } .btn-cross--black-border:hover, .btn-cross--black-border:focus-visible { background-color: #111110; color: #ffffff; } @media (prefers-reduced-motion: reduce) { .btn-cross::before, .btn-cross::after, .btn-cross .bracket-tl, .btn-cross .bracket-br { transition: none; } } /* ─── Intro / pitch statement (line-reveal animation target) ────────── */ /* JS (js/home.js) splits this into per-line wrappers on load */ .intro-impact-text { font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif; font-size: clamp(2.5rem, 6vw, 5.5rem); line-height: 1.05; letter-spacing: -0.04em; font-weight: 800; color: #ffffff; } .intro-impact-text strong { color: #c8ff6a; font-weight: 800; } [data-anim-high] .line { display: block; position: relative; } .high-line-reveal { position: absolute; inset: 0; background-color: #c8ff6a; transform-origin: right center; z-index: 5; pointer-events: none; } /* ─── JS-only content gate ──────────────────────────────── */ /* Same pattern as [data-js] [data-mobile-nav] above - hides content that only makes sense once JS has run (e.g. a live clock), so users without JS never see a dead placeholder. */ [data-js-only] { display: none; } [data-js] [data-js-only] { display: inline; } /* ─── Mono metadata layer (A1) ──────────────────────────── */ /* System monospace stack - zero added font weight, no new webfont request. Used for anything that reads as data rather than prose: dates, indices, coordinates, footer legal text. */ .e-metaMono { font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; } /* ─── Accent-fill link sweep (A10) ──────────────────────── */ /* Inline prose links only - nav/footer nav links keep their existing colour-swap treatment. */ .e-link { color: inherit; text-decoration: none; background-image: linear-gradient(#c8ff6a, #c8ff6a); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 2px; transition: background-size var(--durationBase) var(--easeStandard), color var(--durationBase) var(--easeStandard); } .e-link:hover, .e-link:focus-visible { background-size: 100% 100%; color: #111110; } @media (prefers-reduced-motion: reduce) { .e-link { transition: none; } } /* ─── Ghost index numerals (A7) ──────────────────────────── */ /* Replaces the small boxed 01/02/03 markers in "How it works" with large outlined numerals. Registering --fillLevel lets the browser transition it smoothly like any other animatable property - a plain custom property would otherwise jump between values with no interpolation. */ @property --fillLevel { syntax: ''; inherits: false; initial-value: 0%; } .e-ghostNumeral { display: block; font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif; font-weight: 800; font-size: clamp(4rem, 9vw, 7rem); line-height: 1; color: transparent; -webkit-text-stroke: 2px #d6d5d0; user-select: none; --fillLevel: 0%; background: linear-gradient(to top, #c8ff6a 0%, #c8ff6a var(--fillLevel), transparent var(--fillLevel)); -webkit-background-clip: text; background-clip: text; transition: --fillLevel 0.6s var(--easeStandard); } /* Water-filling-up effect: the lime fill rises from the baseline, clipped to the glyph shape. The grey stroke stays visible throughout since -webkit-text-stroke ignores the fill. Hover keeps working as a manual replay; the scroll-triggered version below is what fires 01 -> 02 -> 03 in sequence as the "How it works" section comes into view, reusing the existing [data-reveal] is-visible hook rather than adding a second observer. */ .c-stepItem:hover .e-ghostNumeral { --fillLevel: 100%; } .c-stepItem.is-visible .e-ghostNumeral { --fillLevel: 100%; } .c-stepItem[data-reveal="delay-1"].is-visible .e-ghostNumeral { transition-delay: var(--durationBase); } .c-stepItem[data-reveal="delay-2"].is-visible .e-ghostNumeral { transition-delay: var(--durationSlow); } @media (prefers-reduced-motion: reduce) { .e-ghostNumeral { transition: none; } } /* ─── Grid crosshair marks (A6) ──────────────────────────── */ /* Small mono "+" glyphs at each corner of a grid item - marks the grid itself as foreground, rather than framing a whole section. Purely decorative. */ .e-gridCrosshairs { position: relative; padding: 1.5rem; } .e-gridCrosshairs__mark { position: absolute; font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; font-size: 1.125rem; line-height: 1; color: #d6d5d0; } .e-gridCrosshairs__mark--tl { top: -0.45em; left: -0.3em; } .e-gridCrosshairs__mark--tr { top: -0.45em; right: -0.3em; } .e-gridCrosshairs__mark--bl { bottom: -0.45em; left: -0.3em; } .e-gridCrosshairs__mark--br { bottom: -0.45em; right: -0.3em; } /* ─── Pricing factor card index (A1 card corners) ───────── */ .c-pricingFactorCard__index { position: absolute; top: 1rem; right: 1rem; color: #a8a29e; } /* ─── Selected work hover-reveal list (A5 / B1) ─────────── */ .c-workList { border-block-start: 1px solid #292524; } .c-workList__row { border-block-end: 1px solid #292524; } .c-workList__link { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.75rem; padding-inline: 0.5rem; text-decoration: none; color: inherit; transition: background-color var(--durationBase) var(--easeStandard), padding-inline var(--durationBase) var(--easeStandard), color var(--durationBase) var(--easeStandard); } .c-workList__link:hover, .c-workList__link:focus-visible { background-color: #c8ff6a; color: #111110; padding-inline: 1.5rem; } .c-workList__name { font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif; font-weight: 800; font-size: clamp(1.5rem, 3vw, 2.25rem); letter-spacing: -0.02em; } .c-workList__meta { color: #a8a29e; flex-shrink: 0; } .c-workList__link:hover .c-workList__meta, .c-workList__link:focus-visible .c-workList__meta { color: #111110; } .c-workList__arrow { flex-shrink: 0; transform: translateX(-6px); opacity: 0; transition: transform var(--durationBase) var(--easeStandard), opacity var(--durationBase) var(--easeStandard); } .c-workList__link:hover .c-workList__arrow, .c-workList__link:focus-visible .c-workList__arrow { transform: translateX(0); opacity: 1; } @media (prefers-reduced-motion: reduce) { .c-workList__link, .c-workList__arrow { transition: none; } } /* ─── Recently ticker marquee (A8) ───────────────────────── */ /* HARD LIMIT: one marquee on the whole page. Real text lives in both tracks; the second is aria-hidden so screen readers only announce the list once. */ .c-marquee { display: flex; overflow: hidden; border-block: 1px solid #292524; padding-block: 1rem; } .c-marquee__track { display: flex; flex-shrink: 0; gap: 3rem; padding-inline-end: 3rem; animation: marqueeScroll 24s linear infinite; } .c-marquee:hover .c-marquee__track, .c-marquee:focus-within .c-marquee__track { animation-play-state: paused; } .c-marquee__item { white-space: nowrap; color: #d6d5d0; } @keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-100%); } } @media (prefers-reduced-motion: reduce) { .c-marquee__track { animation: none; } } /* ─── Availability status line (A3) ──────────────────────── */ .c-availability { display: inline-flex; align-items: center; gap: 0.5rem; } .c-availability__dot { width: 8px; height: 8px; border-radius: 50%; background-color: #c8ff6a; box-shadow: 0 0 0 0 rgb(200 255 106 / 60%); animation: availabilityPulse 2s var(--easeStandard) infinite; } @keyframes availabilityPulse { 0% { box-shadow: 0 0 0 0 rgb(200 255 106 / 60%); } 70% { box-shadow: 0 0 0 8px rgb(200 255 106 / 0%); } 100% { box-shadow: 0 0 0 0 rgb(200 255 106 / 0%); } } @media (prefers-reduced-motion: reduce) { .c-availability__dot { animation: none; } } /* ─── Footer giant wordmark (A4) ─────────────────────────── */ /* Static - no hover or scroll animation. The very last element in the footer, breaking out of the footer's own horizontal padding so it bleeds to the true screen edges. */ .c-siteFooter { container: siteFooter / inline-size; } /* Negative margins equal to the footer's own px-6/lg:px-10 pull this wrapper out to the true viewport edges. Also clips the wordmark so the translateY bleed below actually crops rather than adding blank space - the wrapper's height comes from the (unshifted) text's own line-height. */ .e-footerWordmarkClip { overflow: hidden; margin-inline: -1.5rem; } @media (width >= 1024px) { .e-footerWordmarkClip { margin-inline: -2.5rem; } } .e-footerWordmark { display: block; width: 100%; font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif; font-weight: 800; font-size: clamp(3rem, 27cqi, 41rem); line-height: 0.85; letter-spacing: -0.04em; color: #ffffff; text-align: center; white-space: nowrap; cursor: default; user-select: none; /* Shifts the glyph down by 15% of its own box height; the clip above crops the resulting bottom overhang, so roughly the bottom 15% of the mark bleeds off-screen. */ transform: translateY(15%); } .e-footerWordmark__accent { color: #c8ff6a; } /* ─── Field error text (B10) ─────────────────────────────── */ .e-fieldError { margin-block-start: 0.5rem; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 0.875rem; color: #dc2626; } /* ─── Questions accordion (FAQ) ─────────────────────────── */ /* Progressive-enhancement disclosure list. The markup ships every panel open so it still reads without JS; [data-js] (set in ) plus js/home.js then collapse all but the first and drive single-open toggling. Visual language follows the accordion-05 reference: oversized uppercase headings, muted when closed, solid when open, no chevron. Contrast note: the reference's ~20%-opacity closed headings fail SC 1.4.3, so the muted state uses #6b6b66 (~5:1) and the open state adds a non-colour cue (the lime rule below). */ .m-questions { max-width: 48rem; border-block-start: 1px solid #e0e0dc; } .m-questions__item { border-block-end: 1px solid #e0e0dc; } .m-questions__heading { margin: 0; } .m-questions__trigger { --questionTitleSize: clamp(1.5rem, 1rem + 3vw, 3rem); display: flex; align-items: flex-start; gap: 1rem; width: 100%; padding-block: 1.5rem; padding-inline: 0; border: 0; background: none; text-align: left; color: #111110; transition: color var(--durationBase) var(--easeStandard); } [data-js] .m-questions__item:not(.is-open) .m-questions__trigger { color: #6b6b66; } [data-js] .m-questions__item:not(.is-open) .m-questions__trigger:hover, [data-js] .m-questions__item:not(.is-open) .m-questions__trigger:focus-visible { color: #111110; } .m-questions__trigger:focus-visible { outline: 2px solid #111110; outline-offset: 3px; } .m-questions__index { flex-shrink: 0; color: inherit; line-height: 1; /* Cap-align the small numeral with the oversized title: the title's line box carries ascender space above its capitals that the 11px numeral does not, so nudge it down by a fraction of the title size (scales with the fluid clamp). */ margin-block-start: calc(var(--questionTitleSize) * 0.16); } .m-questions__title { font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif; font-weight: 700; font-size: var(--questionTitleSize); line-height: 1.05; letter-spacing: -0.01em; text-transform: uppercase; } .m-questions__item.is-open .m-questions__title { font-weight: 800; } /* Supplementary open-state cue, echoing .e-headingDash - the expanded panel and the darker heading already carry the state, so this short lime rule is decoration only. */ .m-questions__item.is-open .m-questions__title::after { content: ""; display: block; width: 3rem; height: 3px; margin-block-start: 0.6rem; background-color: #c8ff6a; } /* grid-template-rows 1fr->0fr is the accessible way to animate a disclosure open/close without measuring height in JS. Height-class transitions are normally avoided here (see the sticky- header note above), but this is a single user-triggered toggle on one item at a time, not a per-frame effect. Engines that don't interpolate grid tracks simply jump between states. */ .m-questions__panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--durationBase) var(--easeStandard); } [data-js] .m-questions__item:not(.is-open) .m-questions__panel { grid-template-rows: 0fr; } .m-questions__panelInner { overflow: hidden; min-height: 0; } .m-questions__answer { max-width: 60ch; padding-block: 0 1.75rem; padding-inline: 2rem 0; font-family: Inter, ui-sans-serif, system-ui, sans-serif; line-height: 1.65; color: #6b6b66; } @media (prefers-reduced-motion: reduce) { .m-questions__trigger, .m-questions__panel { transition: none; } } /* ─── Blog: article + listing (Bn) ────────────────────────── Long-form pages under /blog/ (the post template and the /blog/ index). These pages load nav.js + footer.js only, never home.js, so there is no [data-reveal] here and nothing animates on load - content is visible at rest. The only motion is the hover underline sweep on links, each of which carries its own prefers-reduced-motion guard. */ .m-article { max-width: 44rem; /* about 68 characters at the body size below - the readable measure */ margin-inline: auto; padding-inline: 1.5rem; } @media (width >= 992px) { .m-article { padding-inline: 2.5rem; } } .m-articleCrumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 2.5rem; padding: 0; list-style: none; color: #6b6b66; } .m-article__header { margin-block-end: 3rem; padding-block-end: 2rem; border-block-end: 1px solid #e0e0dc; } .m-article__header h1 { font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif; font-weight: 800; font-size: clamp(2rem, 1.4rem + 3vw, 3.25rem); line-height: 1.08; letter-spacing: -0.02em; color: #111110; } .m-article__meta { margin-block-start: 1rem; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 0.875rem; color: #6b6b66; } .m-article__body { font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 1.0625rem; line-height: 1.7; color: #111110; } /* Flow spacing for the post body: it is rich text, so the elements cannot carry classes. The direct-child owl is the sanctioned prose-flow pattern (see frontend-standards). */ .m-article__body > * + * { margin-block-start: 1.5rem; } /* Lede: the opening paragraph (also the standfirst on the /blog/ index) runs a step larger. */ .m-article__body > p:first-child { font-size: 1.1875rem; line-height: 1.6; } .m-article__body h2 { font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif; font-weight: 700; font-size: clamp(1.375rem, 1.1rem + 1.4vw, 1.75rem); line-height: 1.2; letter-spacing: -0.01em; color: #111110; margin-block-start: 3.25rem; } .m-article__body h3 { font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif; font-weight: 700; font-size: 1.1875rem; line-height: 1.3; color: #111110; margin-block-start: 2.25rem; } /* Deepest level a post should use: a small uppercase label, clearly subordinate to h3. */ .m-article__body h4 { font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-weight: 600; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.08em; color: #6b6b66; margin-block-start: 2rem; } /* Tighten the gap between a heading and the paragraph directly beneath it. */ .m-article__body h2 + p, .m-article__body h3 + p, .m-article__body h4 + p { margin-block-start: 0.75rem; } .m-article__body a { color: #111110; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; transition: text-decoration-color var(--durationBase) var(--easeStandard); } .m-article__body a:hover, .m-article__body a:focus-visible { text-decoration-color: #c8ff6a; text-decoration-thickness: 3px; } .m-article__body a:focus-visible { outline: 2px solid #111110; outline-offset: 3px; } /* Tailwind's Preflight zeroes list-style on ul/ol - restore the markers the body copy needs. */ .m-article__body ul, .m-article__body ol { padding-inline-start: 1.25rem; } .m-article__body ul { list-style: disc; } .m-article__body ol { list-style: decimal; } .m-article__body li + li { margin-block-start: 0.5rem; } /* Nested lists: the owl only reaches direct children of .m-article__body. */ .m-article__body li > ul, .m-article__body li > ol { margin-block-start: 0.5rem; } .m-article__body li::marker { color: #6b6b66; } .m-article__body blockquote { margin-inline: 0; padding-inline-start: 1.25rem; border-inline-start: 3px solid #c8ff6a; font-size: 1.125rem; line-height: 1.6; color: #6b6b66; } .m-article__body blockquote p + p { margin-block-start: 0.75rem; } .m-article__body blockquote cite { display: block; margin-block-start: 0.75rem; font-size: 0.875rem; font-style: normal; color: #6b6b66; } .m-article__body strong { font-weight: 600; } .m-article__body em { font-style: italic; } /* Inline code: a subtle chip. em-relative so it also holds up inside a heading. */ .m-article__body code { font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; font-size: 0.875em; background-color: #e8e8e2; padding: 0.1em 0.35em; border-radius: 3px; } /* Code block: dark card that scrolls on overflow rather than widening the column. */ .m-article__body pre { font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; font-size: 0.875rem; line-height: 1.6; color: #f4f4f0; background-color: #111110; padding: 1rem 1.25rem; border-radius: 6px; overflow-x: auto; } .m-article__body pre code { font-size: inherit; background: none; padding: 0; border-radius: 0; } /* Section break: a short lime bar, echoing the eyebrow dash and the FAQ open-state cue. */ .m-article__body hr { border: 0; inline-size: 3rem; block-size: 3px; margin-block: 3.5rem; margin-inline: auto; background-color: #c8ff6a; } .m-article__body img { display: block; inline-size: 100%; block-size: auto; border-radius: 6px; } .m-article__body figure { margin-inline: 0; } .m-article__body figcaption { margin-block-start: 0.6rem; font-size: 0.8125rem; line-height: 1.5; color: #6b6b66; } /* Tables sit at column width; a wide one scrolls inside itself (rich text has no wrapper). */ .m-article__body table { display: block; inline-size: max-content; max-inline-size: 100%; overflow-x: auto; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.5; } .m-article__body th, .m-article__body td { text-align: start; padding: 0.6rem 0.85rem; border-block-end: 1px solid #e0e0dc; } .m-article__body thead th { font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif; font-weight: 700; border-block-end: 2px solid #111110; } .m-article__body tbody tr:last-child td { border-block-end: 0; } @media (prefers-reduced-motion: reduce) { .m-article__body a { transition: none; } } .m-article__cta { margin-block-start: 3.5rem; padding-block-start: 2rem; border-block-start: 1px solid #e0e0dc; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 1rem; line-height: 1.7; color: #6b6b66; } .m-article__cta a { color: #111110; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; } .m-article__cta a:hover { text-decoration-color: #c8ff6a; text-decoration-thickness: 3px; } /* ─── Listing on /blog/ (Bn) ─────────────────────────────── The ghost numeral and divider-free rhythm carry over from the homepage .m-writingList, adapted to the light page: summaries and dates stay visible (this is the index, not a teaser), and the hover stays light - a lime underline sweep on the title. The homepage "Writing" teaser uses .m-writingList instead. */ .m-articleList { max-width: 44rem; margin-inline: auto; margin-block-start: 3.5rem; padding: 0; list-style: none; } .m-articleList__item { padding-block: 2.75rem; } .m-articleList__item:first-child { padding-block-start: 0.5rem; } /* Light-ground ghost numeral: lighter stroke than the dark homepage version, no water-fill (nothing on these pages triggers it) - a static outline that chunks the list. */ .m-articleList__numeral { margin-block-end: 0.4rem; font-size: clamp(2.5rem, 6vw, 4rem); background: none; -webkit-text-stroke-color: #d6d5d0; } .m-articleList__title { font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif; font-weight: 700; font-size: clamp(1.375rem, 1.1rem + 1.4vw, 1.75rem); line-height: 1.2; letter-spacing: -0.01em; } .m-articleList__title a { color: #111110; text-decoration: none; background-image: linear-gradient(#c8ff6a, #c8ff6a); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 2px; transition: background-size var(--durationBase) var(--easeStandard); } .m-articleList__title a:hover, .m-articleList__title a:focus-visible { background-size: 100% 2px; } .m-articleList__title a:focus-visible { outline: 2px solid #111110; outline-offset: 3px; } .m-articleList__date { display: block; margin-block-start: 0.6rem; font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; color: #6b6b66; } .m-articleList__summary { margin-block-start: 0.85rem; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 1rem; line-height: 1.65; color: #6b6b66; } @media (prefers-reduced-motion: reduce) { .m-articleList__title a { transition: none; } } /* ─── Homepage "Writing" list (Bn) ───────────────────────── Editorial entries for the #writing section on the dark ground. Deliberately NOT the accordion pattern directly above it: no hairline dividers, and the index is an oversized outlined numeral stacked above each title (reusing .e-ghostNumeral) rather than a small marker beside it. Each entry is one block link; on hover or keyboard focus the row fills lime, the numeral goes solid dark, the summary slides open and the arrow slides in. The summary height transition is user-triggered, one at a time, not per-frame (same reasoning as the .m-questions accordion). */ .m-writingList { margin: 0; padding: 0; list-style: none; max-width: 60rem; } .m-writingList__link { --writingTitleSize: clamp(1.25rem, 1rem + 2.4vw, 2.25rem); position: relative; display: block; padding-block: 1.75rem; padding-inline: 0.5rem; text-decoration: none; color: #f4f4f0; transition: background-color var(--durationBase) var(--easeStandard), padding-inline var(--durationBase) var(--easeStandard), color var(--durationBase) var(--easeStandard); } .m-writingList__link:hover, .m-writingList__link:focus-visible { background-color: #c8ff6a; color: #111110; padding-inline: 1.25rem; } .m-writingList__link:focus-visible { outline: 2px solid #111110; outline-offset: -2px; } /* Oversized outlined index, stacked above the title. Darker stroke than the light-ground "How it works" numerals so it reads as a ghost on #111110, and no lime water-fill here (it would vanish on the lime hover ground) - it goes solid dark on hover instead. */ .m-writingList__numeral { margin-block-end: 0.35rem; font-size: clamp(3rem, 7vw, 5rem); background: none; -webkit-text-stroke-color: #44443f; transition: color var(--durationBase) var(--easeStandard), -webkit-text-stroke-color var(--durationBase) var(--easeStandard); } .m-writingList__link:hover .m-writingList__numeral, .m-writingList__link:focus-visible .m-writingList__numeral { color: #111110; -webkit-text-stroke-color: #111110; } .m-writingList__body { display: flex; flex-direction: column; gap: 0.4rem; /* Reserve the top-right corner for the hover arrow so a long wrapped title never runs under it. */ padding-inline-end: 2.5rem; } .m-writingList__title { font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif; font-weight: 800; font-size: var(--writingTitleSize); line-height: 1.1; letter-spacing: -0.02em; } .m-writingList__date { font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; color: #a8a29e; } .m-writingList__link:hover .m-writingList__date, .m-writingList__link:focus-visible .m-writingList__date { color: #3f3f3a; } /* Collapsed by default; grid-rows 0fr -> 1fr avoids measuring height in JS. */ .m-writingList__summary { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--durationBase) var(--easeStandard); max-width: 42rem; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 0.9375rem; line-height: 1.6; color: #111110; } .m-writingList__summary > span { display: block; overflow: hidden; min-height: 0; } .m-writingList__link:hover .m-writingList__summary, .m-writingList__link:focus-visible .m-writingList__summary { grid-template-rows: 1fr; padding-block-start: 0.6rem; } .m-writingList__arrow { position: absolute; inset-block-start: 1.9rem; inset-inline-end: 0.5rem; font-size: 1.5rem; transform: translateX(-8px); opacity: 0; transition: transform var(--durationBase) var(--easeStandard), opacity var(--durationBase) var(--easeStandard); } .m-writingList__link:hover .m-writingList__arrow, .m-writingList__link:focus-visible .m-writingList__arrow { transform: translateX(0); opacity: 1; } .m-writingList__more { display: inline-flex; align-items: center; gap: 0.6rem; margin-block-start: 3rem; font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif; font-weight: 800; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em; color: #f4f4f0; text-decoration: none; } .m-writingList__more span { color: #c8ff6a; transition: transform var(--durationBase) var(--easeStandard); } .m-writingList__more:hover span, .m-writingList__more:focus-visible span { transform: translateX(6px); } .m-writingList__more:focus-visible { outline: 2px solid #c8ff6a; outline-offset: 4px; } @media (prefers-reduced-motion: reduce) { .m-writingList__link, .m-writingList__numeral, .m-writingList__arrow, .m-writingList__summary, .m-writingList__more span { transition: none; } } /* ========================================================================== Generated Tailwind utility classes below this line - do not hand-edit. ========================================================================== */ *,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}:root{scroll-behavior:smooth}*{box-sizing:border-box}::-moz-selection{background-color:#adff2f;color:#111110}::selection{background-color:#adff2f;color:#111110}.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.left-1\/2{left:50%}.left-1\/4{left:25%}.left-3\/4{left:75%}.right-0{right:0}.top-0{top:0}.-z-10{z-index:-10}.z-0{z-index:0}.z-10{z-index:10}.z-20{z-index:20}.z-50{z-index:50}.m-0{margin:0}.mx-auto{margin-left:auto;margin-right:auto}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-16{margin-bottom:4rem}.mb-2{margin-bottom:.5rem}.mb-20{margin-bottom:5rem}.mb-24{margin-bottom:6rem}.mb-3{margin-bottom:.75rem}.mb-32{margin-bottom:8rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mt-12{margin-top:3rem}.mt-16{margin-top:4rem}.mt-2{margin-top:.5rem}.mt-24{margin-top:6rem}.mt-3{margin-top:.75rem}.mt-6{margin-top:1.5rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.grid{display:grid}.hidden{display:none}.aspect-video{aspect-ratio:16 / 9}.h-12{height:3rem}.h-52{height:13rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-9{height:2.25rem}.h-\[3px\]{height:3px}.h-full{height:100%}.h-px{height:1px}.min-h-\[90vh\]{min-height:90vh}.min-h-screen{min-height:100vh}.w-12{width:3rem}.w-20{width:5rem}.w-24{width:6rem}.w-32{width:8rem}.w-52{width:13rem}.w-6{width:1.5rem}.w-auto{width:auto}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.max-w-3xl{max-width:48rem}.max-w-5xl{max-width:64rem}.max-w-6xl{max-width:72rem}.max-w-7xl{max-width:80rem}.max-w-\[860px\]{max-width:860px}.max-w-md{max-width:28rem}.max-w-screen-2xl{max-width:1536px}.max-w-xl{max-width:36rem}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.-translate-x-4{--tw-translate-x: -1rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-4{--tw-translate-y: -1rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-110{--tw-scale-x: 1.1;--tw-scale-y: 1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.resize-none{resize:none}.list-inside{list-style-position:inside}.list-disc{list-style-type:disc}.list-none{list-style-type:none}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0{gap:0px}.gap-12{gap:3rem}.gap-16{gap:4rem}.gap-2{gap:.5rem}.gap-20{gap:5rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-x-16{-moz-column-gap:4rem;column-gap:4rem}.gap-y-12{row-gap:3rem}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.border{border-width:1px}.border-0{border-width:0px}.border-b{border-bottom-width:1px}.border-b-4{border-bottom-width:4px}.border-b-\[5px\]{border-bottom-width:5px}.border-l{border-left-width:1px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-primary{--tw-border-opacity: 1;border-color:rgb(173 255 47 / var(--tw-border-opacity, 1))}.border-primary-container{--tw-border-opacity: 1;border-color:rgb(200 255 106 / var(--tw-border-opacity, 1))}.border-stone-100{--tw-border-opacity: 1;border-color:rgb(245 245 244 / var(--tw-border-opacity, 1))}.border-stone-200{--tw-border-opacity: 1;border-color:rgb(231 229 228 / var(--tw-border-opacity, 1))}.border-stone-900{--tw-border-opacity: 1;border-color:rgb(28 25 23 / var(--tw-border-opacity, 1))}.border-surface-container{--tw-border-opacity: 1;border-color:rgb(234 234 229 / var(--tw-border-opacity, 1))}.border-surface-dim{--tw-border-opacity: 1;border-color:rgb(224 224 220 / var(--tw-border-opacity, 1))}.\!bg-hero-grey{--tw-bg-opacity: 1 !important;background-color:rgb(252 249 248 / var(--tw-bg-opacity, 1))!important}.bg-\[\#0a0a0a\]{--tw-bg-opacity: 1;background-color:rgb(10 10 10 / var(--tw-bg-opacity, 1))}.bg-hero-grey{--tw-bg-opacity: 1;background-color:rgb(252 249 248 / var(--tw-bg-opacity, 1))}.bg-hero-grey\/80{background-color:#fcf9f8cc}.bg-hero-grey\/95{background-color:#fcf9f8f2}.bg-on-surface{--tw-bg-opacity: 1;background-color:rgb(17 17 16 / var(--tw-bg-opacity, 1))}.bg-primary-container{--tw-bg-opacity: 1;background-color:rgb(200 255 106 / var(--tw-bg-opacity, 1))}.bg-primary-container\/0{background-color:#c8ff6a00}.bg-primary\/10{background-color:#adff2f1a}.bg-stone-100{--tw-bg-opacity: 1;background-color:rgb(245 245 244 / var(--tw-bg-opacity, 1))}.bg-stone-200{--tw-bg-opacity: 1;background-color:rgb(231 229 228 / var(--tw-bg-opacity, 1))}.bg-stone-800{--tw-bg-opacity: 1;background-color:rgb(41 37 36 / var(--tw-bg-opacity, 1))}.bg-stone-900{--tw-bg-opacity: 1;background-color:rgb(28 25 23 / var(--tw-bg-opacity, 1))}.bg-stone-950{--tw-bg-opacity: 1;background-color:rgb(12 10 9 / var(--tw-bg-opacity, 1))}.bg-surface-container{--tw-bg-opacity: 1;background-color:rgb(234 234 229 / var(--tw-bg-opacity, 1))}.bg-surface-container-lowest{--tw-bg-opacity: 1;background-color:rgb(244 244 240 / var(--tw-bg-opacity, 1))}.bg-transparent{background-color:transparent}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0{padding:0}.p-12{padding:3rem}.p-2{padding:.5rem}.p-4{padding:1rem}.px-0{padding-left:0;padding-right:0}.px-1{padding-left:.25rem;padding-right:.25rem}.px-12{padding-left:3rem;padding-right:3rem}.px-16{padding-left:4rem;padding-right:4rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-24{padding-top:6rem;padding-bottom:6rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-32{padding-top:8rem;padding-bottom:8rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-1{padding-bottom:.25rem}.pb-32{padding-bottom:8rem}.pb-40{padding-bottom:10rem}.pl-8{padding-left:2rem}.pt-12{padding-top:3rem}.pb-12{padding-bottom:3rem}.pt-24{padding-top:6rem}.pt-32{padding-top:8rem}.pt-4{padding-top:1rem}.pt-40{padding-top:10rem}.pt-8{padding-top:2rem}.font-body{font-family:Inter,ui-sans-serif,system-ui,sans-serif}.font-headline{font-family:Manrope,ui-sans-serif,system-ui,sans-serif}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-6xl{font-size:3.75rem;line-height:1}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[9rem\]{font-size:9rem}.text-display-md{font-size:clamp(2rem,4.5vw,4rem);line-height:1;letter-spacing:-.01em;font-weight:700}.text-display-xl{font-size:clamp(3.5rem,11vw,10.5rem);line-height:.85;letter-spacing:-.07em;font-weight:800}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-black{font-weight:900}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-light{font-weight:300}.font-medium{font-weight:500}.uppercase{text-transform:uppercase}.italic{font-style:italic}.not-italic{font-style:normal}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-tight{line-height:1.25}.tracking-\[-0\.08em\]{letter-spacing:-.08em}.tracking-\[0\.2em\]{letter-spacing:.2em}.tracking-\[0\.3em\]{letter-spacing:.3em}.tracking-\[0\.4em\]{letter-spacing:.4em}.tracking-\[0\.5em\]{letter-spacing:.5em}.tracking-tighter{letter-spacing:-.05em}.tracking-widest{letter-spacing:.1em}.text-on-primary-container,.text-on-surface{--tw-text-opacity: 1;color:rgb(17 17 16 / var(--tw-text-opacity, 1))}.text-on-surface-variant{--tw-text-opacity: 1;color:rgb(107 107 102 / var(--tw-text-opacity, 1))}.text-primary{--tw-text-opacity: 1;color:rgb(173 255 47 / var(--tw-text-opacity, 1))}.text-primary-container{--tw-text-opacity: 1;color:rgb(200 255 106 / var(--tw-text-opacity, 1))}.text-red-500{--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity, 1))}.text-stone-100{--tw-text-opacity: 1;color:rgb(245 245 244 / var(--tw-text-opacity, 1))}.text-stone-300{--tw-text-opacity: 1;color:rgb(214 211 209 / var(--tw-text-opacity, 1))}.text-stone-400{--tw-text-opacity: 1;color:rgb(168 162 158 / var(--tw-text-opacity, 1))}.text-stone-500{--tw-text-opacity: 1;color:rgb(120 113 108 / var(--tw-text-opacity, 1))}.text-stone-600{--tw-text-opacity: 1;color:rgb(87 83 78 / var(--tw-text-opacity, 1))}.text-stone-700{--tw-text-opacity: 1;color:rgb(68 64 60 / var(--tw-text-opacity, 1))}.text-surface-container-lowest{--tw-text-opacity: 1;color:rgb(244 244 240 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.underline{text-decoration-line:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-10{opacity:.1}.opacity-5{opacity:.05}.mix-blend-overlay{mix-blend-mode:overlay}.outline-none{outline:2px solid transparent;outline-offset:2px}.grayscale{--tw-grayscale: grayscale(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.\!backdrop-blur-none{--tw-backdrop-blur: !important;backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)!important}.backdrop-blur-\[32px\]{--tw-backdrop-blur: blur(32px);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-1000{transition-duration:1s}.duration-300{transition-duration:.3s}[data-js] [data-mobile-nav]{display:none}[data-js] [data-mobile-nav].is-open{display:flex}.hero-gradient-overlay{background:linear-gradient(180deg,#fcf9f866,#fcf9f8d9 60%,#fcf9f8)}.parallax-bg{background-size:cover;background-position:center;background-repeat:no-repeat;will-change:background-position}.pricing-card-featured{background-color:#fff;box-shadow:0 20px 60px -20px #00000026}.m-aboutPhoto__badge{position:absolute;right:-1rem;bottom:-1rem;width:5rem;height:5rem}.btn-cross{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem}.btn-cross:before,.btn-cross:after,.btn-cross .bracket-tl,.btn-cross .bracket-br{content:"";position:absolute;width:10px;height:10px;border-style:solid}.btn-cross .bracket-tl,.btn-cross:before{top:-4px}.btn-cross .bracket-br,.btn-cross:after{bottom:-4px}.btn-cross:before{left:-4px;border-width:2px 0 0 2px}.btn-cross:after{right:-4px;border-width:0 2px 2px 0}.btn-cross .bracket-tl{right:-4px;border-width:2px 2px 0 0}.btn-cross .bracket-br{left:-4px;border-width:0 0 2px 2px}.btn-cross--green-border:before,.btn-cross--green-border:after,.btn-cross--green-border .bracket-tl,.btn-cross--green-border .bracket-br{border-color:#111110}.btn-cross--grey-bg:before,.btn-cross--grey-bg:after,.btn-cross--grey-bg .bracket-tl,.btn-cross--grey-bg .bracket-br{border-color:#111110}.btn-cross--black-border:before,.btn-cross--black-border:after,.btn-cross--black-border .bracket-tl,.btn-cross--black-border .bracket-br{border-color:#111110}.placeholder\:text-stone-300::-moz-placeholder{--tw-text-opacity: 1;color:rgb(214 211 209 / var(--tw-text-opacity, 1))}.placeholder\:text-stone-300::placeholder{--tw-text-opacity: 1;color:rgb(214 211 209 / var(--tw-text-opacity, 1))}.hover\:text-on-surface:hover{--tw-text-opacity: 1;color:rgb(17 17 16 / var(--tw-text-opacity, 1))}.hover\:text-primary:hover{--tw-text-opacity: 1;color:rgb(173 255 47 / var(--tw-text-opacity, 1))}.hover\:text-primary-container:hover{--tw-text-opacity: 1;color:rgb(200 255 106 / var(--tw-text-opacity, 1))}.focus\:not-sr-only:focus{position:static;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip:auto;white-space:normal}.focus\:absolute:focus{position:absolute}.focus\:left-4:focus{left:1rem}.focus\:top-4:focus{top:1rem}.focus\:z-\[100\]:focus{z-index:100}.focus\:border-primary:focus{--tw-border-opacity: 1;border-color:rgb(173 255 47 / var(--tw-border-opacity, 1))}.focus\:bg-primary-container:focus{--tw-bg-opacity: 1;background-color:rgb(200 255 106 / var(--tw-bg-opacity, 1))}.focus\:px-4:focus{padding-left:1rem;padding-right:1rem}.focus\:py-2:focus{padding-top:.5rem;padding-bottom:.5rem}.focus\:font-headline:focus{font-family:Manrope,ui-sans-serif,system-ui,sans-serif}.focus\:text-sm:focus{font-size:.875rem;line-height:1.25rem}.focus\:font-bold:focus{font-weight:700}.focus\:text-on-primary-container:focus{--tw-text-opacity: 1;color:rgb(17 17 16 / var(--tw-text-opacity, 1))}.focus-visible\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.focus-visible\:ring-2:focus-visible{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus-visible\:ring-primary:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(173 255 47 / var(--tw-ring-opacity, 1))}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width: 2px}.group:hover .group-hover\:translate-x-2{--tw-translate-x: .5rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:scale-105{--tw-scale-x: 1.05;--tw-scale-y: 1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:bg-primary-container\/10{background-color:#c8ff6a1a}.group:hover .group-hover\:text-primary-container{--tw-text-opacity: 1;color:rgb(200 255 106 / var(--tw-text-opacity, 1))}.group:hover .group-hover\:grayscale-0{--tw-grayscale: grayscale(0);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}@media (min-width: 768px){.md\:-my-4{margin-top:-1rem;margin-bottom:-1rem}.md\:flex{display:flex}.md\:hidden{display:none}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:items-end{align-items:flex-end}.md\:gap-12{gap:3rem}.md\:text-2xl{font-size:1.5rem;line-height:2rem}.md\:text-8xl{font-size:6rem;line-height:1}.md\:text-xl{font-size:1.25rem;line-height:1.75rem}.md\:last\:border-r-0:last-child{border-right-width:0px}}@media (min-width: 1024px){.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:gap-32{gap:8rem}.lg\:px-10{padding-left:2.5rem;padding-right:2.5rem}.lg\:py-32{padding-top:8rem;padding-bottom:8rem}.lg\:py-20{padding-top:5rem;padding-bottom:5rem}.lg\:pt-40{padding-top:10rem}}