/* ================================ PRICING ================================ THE OPENING (2026-09-16): what am I paying for, before the price. The folio, one head and one sentence, centred; the product's one picture at its largest (system.css, `.ai--pricing`: the free practice flows into Osmia AI, Osmia AI opens the paid rooms — the inventory the comparison table used to be); then THE OFFER, the page's only box — one product, the chosen cadence's amount at display size, its equivalents and terms under it, two billing rhythms as rows of the same kind (native radios; the chosen row's pane shows by :has, no script), the one action, the two quiet lines. Then the form and what stays yours. Tokens, type, buttons, links, forms, the veil and the stage are styles.css's; the picture and the movement's shape are system.css's. Prices are proportional figures in the one face; the amount charged is always the strongest number on the page. */ /* --- the page's type: the opening head a step under the story tier (the picture is the page's largest thing), the chapters at the document scale --- */ #pricing h1 { font-size: clamp(36px, 3.6vw, 52px); line-height: 1.04; letter-spacing: -.02em; } #pricing .lede { margin-top: 18px; } .mv--read h2 { font-size: var(--fs-h2-doc); } .money { white-space: nowrap; } /* an amount and its symbol never part at a line's end; the figures are proportional (the grotesk's tabular set spaces the decimal point) */ /* the in-page anchors land with their heads clear of the nav (Lenis reads no scroll-margin; the native jump on touch does) */ #billing-options, #intelligence { scroll-margin-top: 96px; } #ownership { scroll-margin-top: 40px; } #waitlist { scroll-margin-top: 80px; } /* THE OFFER: the page's one box — an opaque pale surface, a clear 1px edge, the site's card corner, no shadow */ .offer { background: color-mix(in oklab, var(--cream) 97%, transparent); border: 1px solid var(--rule-strong); border-radius: var(--radius-card); padding: 24px 28px 24px; } .offer__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .offer__name { font: var(--w-medium) 16px/1.25 var(--sans); letter-spacing: -.005em; color: var(--ink); margin: 0; } .offer__same { margin: 4px 0 0; font: 400 var(--fs-fine)/1.4 var(--sans); color: var(--ink-3); } /* the commercial moment: the chosen cadence's amount and terms. The three panes stand in the page; the chosen row's pane shows (:has, so no script is needed; a browser without :has shows all three). */ .offer__panes { margin-top: 18px; min-height: 132px; } /* both panes are three lines now; the box does not jump between them */ .offer__pane { display: none; } /* the chosen pane settles in over the short beat (display none → block restarts the keyframes); the panes' shared min-height means nothing below it moves */ @keyframes paneIn { from { opacity: 0; } to { opacity: 1; } } .offer__pane { animation: paneIn var(--dur-short) var(--ease-out); } .offer:has(input[name="cadence"][value="yearly"]:checked) .offer__pane[data-cadence="yearly"], .offer:has(input[name="cadence"][value="monthly"]:checked) .offer__pane[data-cadence="monthly"] { display: block; } @supports not selector(:has(a)) { .offer__pane { display: block; } .offer__pane + .offer__pane { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule-soft); } } .offer__price { margin: 0; display: flex; align-items: baseline; gap: 10px; font: var(--w-medium) clamp(46px, 4.4vw, 60px)/1 var(--sans); letter-spacing: -.03em; color: var(--ink); } .offer__per { font: 500 20px/1 var(--sans); letter-spacing: -.01em; color: var(--ink-2); } .offer__equiv { margin: 10px 0 0; font: 400 16px/1.4 var(--sans); color: var(--ink-2); } .offer__seq { margin: 8px 0 0; font: 500 var(--fs-small)/1.45 var(--sans); color: var(--ink); text-wrap: pretty; } .offer__cmp { margin: 8px 0 0; font: 500 var(--fs-fine)/1.45 var(--sans); color: var(--honey-deep); } .offer__note { margin: 4px 0 0; font: 400 var(--fs-caption)/1.45 var(--sans); color: var(--ink-3); text-wrap: pretty; } /* three rhythms, one kind of row: the mark, the name (the year's tag), the amount; the chosen row in ink */ .cad { margin-top: 18px; border-top: 1px solid var(--rule); } .cad__row { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--rule-soft); cursor: pointer; } .cad__row input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .cad__mark { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid color-mix(in oklab, var(--ink) 40%, transparent); position: relative; flex: none; transition: border-color var(--dur-micro) var(--ease-out); } .cad__mark::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--honey-deep); opacity: 0; transition: opacity var(--dur-micro) var(--ease-out); } .cad__name, .cad__amt { transition: color var(--dur-micro) var(--ease-out); } .cad__name { font: 500 16px/1.3 var(--sans); color: var(--ink-2); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .cad__tag { font: 500 12px/1 var(--sans); letter-spacing: .02em; color: var(--honey-deep); } .cad__tag--quiet { color: var(--ink-3); } /* the introductory month, stated on the row without shouting; Best value keeps the honey */ .cad__amt { font: 500 var(--fs-small)/1.3 var(--sans); color: var(--ink-2); white-space: nowrap; } .cad__row:has(input:checked) .cad__name, .cad__row:has(input:checked) .cad__amt { color: var(--ink); font-weight: var(--w-semi); } /* the one Semibold on the site: the billing you have chosen */ .cad__row:has(input:checked) .cad__mark { border-color: var(--honey-deep); } .cad__row:has(input:checked) .cad__mark::after { opacity: 1; } @media (hover: hover) { .cad__row:hover:not(:has(input:checked)) .cad__mark { border-color: color-mix(in oklab, var(--ink) 70%, transparent); } } .cad__row:active:not(:has(input:checked)) .cad__mark { border-color: var(--ink); } /* the press, on a phone too */ @media (prefers-reduced-motion: reduce) { .offer__pane { animation: none; } } .cad__row:has(input:focus-visible) { outline: 2px solid var(--honey-deep); outline-offset: 2px; border-radius: 4px; } /* the year's early thank-you, one line; the one action; the status */ .offer__ff { margin: 14px 0 0; font-size: var(--fs-fine); line-height: 1.45; text-wrap: pretty; color: var(--ink-2); } .offer__ff .link { margin-top: 0; font-size: var(--fs-fine); line-height: 1.45; display: inline; color: var(--ink); white-space: nowrap; } .offer__act { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; margin-top: 20px; } .offer__act p { margin: 0; font: 400 var(--fs-fine)/1.4 var(--sans); color: var(--ink-2); max-width: 15rem; } /* a guest buying (forms.js adds the email field): the field takes the row, the button the next, the note the one after */ /* EMAIL, THEN SUBSCRIBE (2026-09-30, the UI launch pass): the field and the button make one row, the pill field and the pill button at one height with the one-line form's 10px between them - they stood as a full-width field over a lone button; the note takes the next row */ .offer__act:has(.buy-form) { column-gap: 10px; } .offer__act .buy-form { flex: 1 1 12rem; max-width: none; margin: 0; } /* the country list (2026-10-09) takes its own row above the email field and the button */ .offer__act .buy-country { flex: 0 0 100%; } .offer__act:has(.buy-form) p { flex-basis: 100%; max-width: none; } .offer .avail { margin: 14px 0 0; font: 400 var(--fs-caption)/1.45 var(--sans); color: var(--ink-3); } /* the consent and the tax line at reading weight: fine print that informs, not a second voice beside the button */ /* THE OFFER BESIDE A PERSON (2026-10-02, the founder): the box and the photograph of a woman using Osmia as one pair on the page's axis - two tracks at the box's width, the photograph as tall as the box (cover). The photograph is the site's print: one soft corner, a faint shadow, its own colours. Below 881px the photograph follows the box, at its width, upright. */ .offer-pair { width: 100%; max-width: 470px; margin-top: 52px; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 28px; text-align: left; } #pricing.mv--ai .offer-pair > .offer { margin-top: 0; } .offer-pair__pic { margin: 0; aspect-ratio: 4 / 5; border-radius: var(--radius-pic); box-shadow: var(--shadow-pic); } .offer-pair__pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; border-radius: inherit; } @media (min-width: 881px) { .offer-pair { max-width: calc(470px * 2 + 40px); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; align-items: stretch; } .offer-pair__pic { position: relative; aspect-ratio: auto; } /* the box sets the row's height; the photograph fills it */ .offer-pair__pic img { position: absolute; inset: 0; } } /* ============================ THE FORM, AND WHAT STAYS YOURS ============================ */ .mv--door { padding-top: 7vh; padding-bottom: 18vh; } .mv--door .col > .form { margin-left: 0; margin-right: 0; margin-top: 28px; } .mv--door .col > .form + .fine, .mv--door .col > .waitform__status + .fine { margin-top: 18px; } .mv--door .col > .fine + .fine { margin-top: 6px; } .mv--door .fine { color: var(--ink-2); } /* one step darker: the golden hour's clouds pass behind it on a phone */ .waitform__line { margin-top: 16px; font-size: var(--fs-small); color: var(--ink-2); } .stays { margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--rule); max-width: 34rem; } .mv--door .col > .stays:first-child { margin-top: 0; } /* the section is "What stays yours" alone since the waitlist form left (2026-10-01) */ /* ONE COLUMN BESIDE THE SUN (2026-09-30, the UI launch pass): the head, the form, the two notes and what stays yours end on one edge. The 52rem reading column let each stop where it liked - the form at 520px, the notes at 700, the rule at 544 - four right edges under one head. The column is the head's own width now, and each part fills it. */ @media (min-width: 881px) { /* 2026-10-01 (osmia-54's geometry probe): with the waitlist form gone, "What stays yours" is the offer's footnote - it sits under the offer, on its axis and at its width, not alone at the left frame */ .mv--door { justify-items: center; padding-top: 0; } .mv--door .col { width: 100%; max-width: 470px; } .mv--door .col > :is(.form, .fine, .stays) { max-width: none; } } .stays__k { margin: 0; font: var(--w-medium) 15px/1.3 var(--sans); letter-spacing: -.005em; color: var(--ink); } .stays p + p { margin-top: 6px; font-size: var(--fs-small); line-height: 1.5; color: var(--ink-2); } /* the bee is ambient: at the far right on a desktop (the movements say so), not on the page on a phone */ @media (max-width: 880px) { #bee { display: none; } } /* ================================ NARROW ================================ */ @media (max-width: 1100px) { .offer { padding: 22px 22px 22px; } } @media (max-width: 880px) { .offer { padding: 20px 18px 20px; border-radius: 18px; } .offer__panes { min-height: 0; } .offer__price { font-size: 44px; } .offer__act p { max-width: none; } .mv--door { padding-inline: 24px; padding-bottom: 14vh; } /* the site's phone gutter (was 20px, 4px off every other page's edge) */ } @media (max-width: 600px) { .offer__act .buy-form { flex-basis: 100%; } .offer__act:has(.buy-form) > .btn { flex: 1 1 100%; justify-content: center; } /* on a phone the field and the button stack, full width, as every one-line form does */ } @media (max-width: 400px) { .offer__price { font-size: 40px; } .offer__per { font-size: 18px; } } /* without JavaScript the offer cannot open Stripe: its button and waiting lines give way to the