/* ================================ THE SYSTEM ================================
   The product's one picture, drawn for the web (2026-09-16): the free practice
   flows into Osmia AI, and Osmia AI opens the paid rooms. The app's paywall
   draws it compact and vertical; here it breathes. On a wide screen it reads
   left to right — five ink chips, dotted honey trails gathering into the honey
   seal with the bee, trails leaving it to six honey chips. On a phone it reads
   top to bottom, the way the paywall does, with two short funnels. The words
   are HTML (they wrap and translate); the trails are SVG whose geometry
   tools/aisystem.py computes from the chip height and gap, so the two never
   disagree. Tokens, the label role, the veil, the buttons and the motion beats
   are styles.css's; nothing here redefines a shared part.

   Two expressions on the site: the landing's second movement (`.ai--landing`,
   40px chips — the SYSTEM, early: seven lived things in, the seal's three
   jobs stacked, four rooms out; the editorial rebuild of 2026-09-18) and the
   Pricing page's opening (`.ai--pricing`, 44px chips, the columns' captions,
   the offer under it — the paywall's free/paid model). Same grammar,
   different words, size and company. The landing's close reuses only the
   chips (landing.css `.tiers`): the free practice and what Osmia AI opens,
   two rows, no trails.
   ============================================================================ */

/* --- the figure: a five-track grid on a wide screen; the geometry comes in from the fragment --- */
.ai { position: relative; width: 100%; max-width: 1040px; margin: 40px auto 0; display: grid; grid-template-columns: auto var(--ai-link, 120px) auto var(--ai-link, 120px) auto; grid-template-rows: auto var(--ai-row, 290px); column-gap: 0; row-gap: 14px; align-items: center; justify-content: center; }
.ai--pricing { max-width: 1120px; }

/* the column heads: the site's one label, centred over its column; Pricing adds a caption under each */
.ai__k { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; text-align: center; white-space: nowrap; }
.ai__k--in { grid-area: 1 / 1; } .ai__k--out { grid-area: 1 / 5; }
.ai__cap { font: 400 var(--fs-caption)/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.ai__k--out .ai__cap { color: var(--honey-deep); }

/* the chips: one height, one radius, one glyph and one name. Ink on paper for what is yours; honey on a
   honey wash for what Osmia AI opens. The lists stretch every chip to the column's widest, so the
   trails leave and arrive at one straight edge whatever the language. */
.ai__chips { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-rows: var(--ai-chip, 40px); row-gap: var(--ai-gap, 10px); align-self: center; }
.ai__chips--in { grid-area: 2 / 1; } .ai__chips--out { grid-area: 2 / 5; }
.ai__chips li { display: flex; align-items: center; gap: 8px; height: var(--ai-chip, 40px); padding: 0 16px 0 12px; border-radius: var(--radius-pill); border: 1px solid var(--rule-strong); background: color-mix(in oklab, var(--cream) 90%, transparent); font: 500 15px/1 var(--sans); letter-spacing: -.004em; color: var(--ink); white-space: nowrap; transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.ai--pricing .ai__chips li { font-size: 16px; padding: 0 18px 0 13px; gap: 9px; }
.ai__chips--out li { border-color: color-mix(in oklab, var(--honey-deep) 46%, transparent); background: color-mix(in oklab, var(--honey) 14%, var(--cream)); color: var(--honey-deep); }
/* the glyph: the app's own function icon, drawn as a mask in the chip's colour (a chip's segment is its one word) */
.ai__c::before { content: ""; flex: none; width: 17px; height: 17px; background: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.ai--pricing .ai__c::before { width: 18px; height: 18px; }
/* the bee mark, the app's own, wherever the intelligence itself is named: Chat's chip and the seal */
.ai__c--chat::before { -webkit-mask-image: url("assets/bee.svg"); mask-image: url("assets/bee.svg"); }
/* --- glyphs (written by tools/aisystem.py; do not edit by hand) --- */
.ai__c--direction::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4 L13.4 10.6 L20 12 L13.4 13.4 L12 20 L10.6 13.4 L4 12 L10.6 10.6 Z'/%3E%3Ccircle cx='18.5' cy='5.5' r='.9' fill='%23000' stroke='none'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4 L13.4 10.6 L20 12 L13.4 13.4 L12 20 L10.6 13.4 L4 12 L10.6 10.6 Z'/%3E%3Ccircle cx='18.5' cy='5.5' r='.9' fill='%23000' stroke='none'/%3E%3C/svg%3E"); }
.ai__c--intention::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 10 L12 3.8 M12 10 L8.4 4.2 M12 10 L15.6 4.2 M12 10 L6.2 6 M12 10 L17.8 6 M12 10 L4.8 8.6 M12 10 L19.2 8.6'/%3E%3Ccircle cx='12' cy='3' r='.7' fill='%23000' stroke='none'/%3E%3Ccircle cx='8' cy='3.6' r='.7' fill='%23000' stroke='none'/%3E%3Ccircle cx='16' cy='3.6' r='.7' fill='%23000' stroke='none'/%3E%3Ccircle cx='5.6' cy='5.5' r='.7' fill='%23000' stroke='none'/%3E%3Ccircle cx='18.4' cy='5.5' r='.7' fill='%23000' stroke='none'/%3E%3Ccircle cx='4.1' cy='8.5' r='.7' fill='%23000' stroke='none'/%3E%3Ccircle cx='19.9' cy='8.5' r='.7' fill='%23000' stroke='none'/%3E%3Cpath d='M12 10 v8.6'/%3E%3Cellipse cx='12' cy='18.9' rx='1.1' ry='1.8' fill='%23000' stroke='none'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 10 L12 3.8 M12 10 L8.4 4.2 M12 10 L15.6 4.2 M12 10 L6.2 6 M12 10 L17.8 6 M12 10 L4.8 8.6 M12 10 L19.2 8.6'/%3E%3Ccircle cx='12' cy='3' r='.7' fill='%23000' stroke='none'/%3E%3Ccircle cx='8' cy='3.6' r='.7' fill='%23000' stroke='none'/%3E%3Ccircle cx='16' cy='3.6' r='.7' fill='%23000' stroke='none'/%3E%3Ccircle cx='5.6' cy='5.5' r='.7' fill='%23000' stroke='none'/%3E%3Ccircle cx='18.4' cy='5.5' r='.7' fill='%23000' stroke='none'/%3E%3Ccircle cx='4.1' cy='8.5' r='.7' fill='%23000' stroke='none'/%3E%3Ccircle cx='19.9' cy='8.5' r='.7' fill='%23000' stroke='none'/%3E%3Cpath d='M12 10 v8.6'/%3E%3Cellipse cx='12' cy='18.9' rx='1.1' ry='1.8' fill='%23000' stroke='none'/%3E%3C/svg%3E"); }
.ai__c--reflection::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 4 C11.8 6.6, 8.4 11.8, 7.1 18 C13.1 16.8, 17 12.6, 18 4 Z'/%3E%3Cpath d='M7.6 17.6 C10.8 13, 14 8.6, 17.7 4.4'/%3E%3Cpath d='M4.5 20.8 H14.5'/%3E%3Ccircle cx='6.3' cy='19.2' r='.8' fill='%23000' stroke='none'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 4 C11.8 6.6, 8.4 11.8, 7.1 18 C13.1 16.8, 17 12.6, 18 4 Z'/%3E%3Cpath d='M7.6 17.6 C10.8 13, 14 8.6, 17.7 4.4'/%3E%3Cpath d='M4.5 20.8 H14.5'/%3E%3Ccircle cx='6.3' cy='19.2' r='.8' fill='%23000' stroke='none'/%3E%3C/svg%3E"); }
.ai__c--history::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5.5' y='4' width='13' height='16.5' rx='2'/%3E%3Cpath d='M9 4 v16.5'/%3E%3Cpath d='M14 4 v5 l2 -1.6 2 1.6 v-5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5.5' y='4' width='13' height='16.5' rx='2'/%3E%3Cpath d='M9 4 v16.5'/%3E%3Cpath d='M14 4 v5 l2 -1.6 2 1.6 v-5'/%3E%3C/svg%3E"); }
.ai__c--practices::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 10.8 C11.5 7.4, 13.4 5.2, 15.8 5.6 C15.5 8.2, 14 10, 12 10.8 Z'/%3E%3Cpath d='M13.2 12 C16.6 11.5, 18.8 13.4, 18.4 15.8 C15.8 15.5, 14 14, 13.2 12 Z'/%3E%3Cpath d='M12 13.2 C12.5 16.6, 10.6 18.8, 8.2 18.4 C8.5 15.8, 10 14, 12 13.2 Z'/%3E%3Cpath d='M10.8 12 C7.4 12.5, 5.2 10.6, 5.6 8.2 C8.2 8.5, 10 10, 10.8 12 Z'/%3E%3Cpath d='M12 13.2 V21.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 10.8 C11.5 7.4, 13.4 5.2, 15.8 5.6 C15.5 8.2, 14 10, 12 10.8 Z'/%3E%3Cpath d='M13.2 12 C16.6 11.5, 18.8 13.4, 18.4 15.8 C15.8 15.5, 14 14, 13.2 12 Z'/%3E%3Cpath d='M12 13.2 C12.5 16.6, 10.6 18.8, 8.2 18.4 C8.5 15.8, 10 14, 12 13.2 Z'/%3E%3Cpath d='M10.8 12 C7.4 12.5, 5.2 10.6, 5.6 8.2 C8.2 8.5, 10 10, 10.8 12 Z'/%3E%3Cpath d='M12 13.2 V21.5'/%3E%3C/svg%3E"); }
.ai__c--patterns::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 5 h11 M6.5 19 h11'/%3E%3Cpath d='M9 5 v14 M15 5 v14'/%3E%3Cpath d='M9 9 h6 M9 12 h6 M9 15 h6'/%3E%3Cpath d='M15 12 C18.6 12.8, 19.6 15.6, 18 18.6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 5 h11 M6.5 19 h11'/%3E%3Cpath d='M9 5 v14 M15 5 v14'/%3E%3Cpath d='M9 9 h6 M9 12 h6 M9 15 h6'/%3E%3Cpath d='M15 12 C18.6 12.8, 19.6 15.6, 18 18.6'/%3E%3C/svg%3E"); }
.ai__c--atlas::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='5.5' r='2.2'/%3E%3Ccircle cx='5.5' cy='17.5' r='2.2'/%3E%3Ccircle cx='18.5' cy='17.5' r='2.2'/%3E%3Ccircle cx='18.5' cy='17.5' r='.9' fill='%23000' stroke='none'/%3E%3Cpath d='M10.9 7.4 L6.6 15.6 M13.1 7.4 L17.4 15.6 M7.7 17.5 H16.3' stroke-dasharray='1.6 2.2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='5.5' r='2.2'/%3E%3Ccircle cx='5.5' cy='17.5' r='2.2'/%3E%3Ccircle cx='18.5' cy='17.5' r='2.2'/%3E%3Ccircle cx='18.5' cy='17.5' r='.9' fill='%23000' stroke='none'/%3E%3Cpath d='M10.9 7.4 L6.6 15.6 M13.1 7.4 L17.4 15.6 M7.7 17.5 H16.3' stroke-dasharray='1.6 2.2'/%3E%3C/svg%3E"); }
.ai__c--journal::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5 H14.5 L18.5 7.5 V20.5 H6.5 Z'/%3E%3Cpath d='M14.5 3.5 V7.5 H18.5'/%3E%3Cpath d='M9.5 12 H15.5 M9.5 15.5 H13.2'/%3E%3Ccircle cx='15.6' cy='15.5' r='.85' fill='%23000' stroke='none'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5 H14.5 L18.5 7.5 V20.5 H6.5 Z'/%3E%3Cpath d='M14.5 3.5 V7.5 H18.5'/%3E%3Cpath d='M9.5 12 H15.5 M9.5 15.5 H13.2'/%3E%3Ccircle cx='15.6' cy='15.5' r='.85' fill='%23000' stroke='none'/%3E%3C/svg%3E"); }
.ai__c--cycle::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='7.5' opacity='.45'/%3E%3Cpath d='M12 4.5 A7.5 7.5 0 0 1 18.4 8.2' stroke-width='2.2'/%3E%3Ccircle cx='18.4' cy='8.2' r='1.7' fill='%23000' stroke='none'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='7.5' opacity='.45'/%3E%3Cpath d='M12 4.5 A7.5 7.5 0 0 1 18.4 8.2' stroke-width='2.2'/%3E%3Ccircle cx='18.4' cy='8.2' r='1.7' fill='%23000' stroke='none'/%3E%3C/svg%3E"); }
.ai__c--suggestions::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 19 C 6 12, 10 9.5, 16.2 7.6' stroke-dasharray='1.6 2.6'/%3E%3Ccircle cx='18.2' cy='6.8' r='2' fill='%23000' stroke='none'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 19 C 6 12, 10 9.5, 16.2 7.6' stroke-dasharray='1.6 2.6'/%3E%3Ccircle cx='18.2' cy='6.8' r='2' fill='%23000' stroke='none'/%3E%3C/svg%3E"); }
.ai__c--daylight::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.4 V8.4 M6.4 8.7 L7.8 10.1 M17.6 8.7 L16.2 10.1'/%3E%3Cpath d='M7.5 14.8 A4.5 4.5 0 0 1 16.5 14.8'/%3E%3Cpath d='M4 15.5 C8 13.6, 16 13.6, 20 15.5'/%3E%3Cpath d='M4 19.5 C9 17.8, 15 17.8, 20 19.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.4 V8.4 M6.4 8.7 L7.8 10.1 M17.6 8.7 L16.2 10.1'/%3E%3Cpath d='M7.5 14.8 A4.5 4.5 0 0 1 16.5 14.8'/%3E%3Cpath d='M4 15.5 C8 13.6, 16 13.6, 20 15.5'/%3E%3Cpath d='M4 19.5 C9 17.8, 15 17.8, 20 19.5'/%3E%3C/svg%3E"); }
/* --- /glyphs --- */

/* THE SEAL: Osmia AI, the centre of the picture. A honey-edged capsule on a warm wash, the bee, the name
   and its two verbs; a soft honey glow behind it — the one lit thing in the figure. */
.ai__seal { position: relative; grid-area: 2 / 3; justify-self: center; margin: 0; display: grid; grid-template-columns: var(--ai-bee, 36px) auto; grid-template-rows: auto auto; column-gap: 14px; row-gap: 4px; align-items: center; padding: 15px 28px 15px 22px; border-radius: var(--radius-pill); border: 1.5px solid color-mix(in oklab, var(--honey-deep) 58%, transparent); background: color-mix(in oklab, var(--honey) 17%, var(--cream)); color: var(--honey-deep); white-space: nowrap; text-align: left; }
.ai__seal::before { content: ""; position: absolute; inset: -44% -18%; z-index: -1; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, color-mix(in oklab, var(--honey) 30%, transparent) 0%, color-mix(in oklab, var(--honey) 14%, transparent) 55%, transparent 100%); }
.ai__seal::after { content: ""; grid-area: 1 / 1 / 3 / 2; width: var(--ai-bee, 36px); height: var(--ai-bee, 36px); background: var(--honey-deep); -webkit-mask: url("assets/bee.svg") center / contain no-repeat; mask: url("assets/bee.svg") center / contain no-repeat; } /* the bee, beside both lines */
.ai__seal b { grid-area: 1 / 2; align-self: end; font: 500 var(--fs-label)/1 var(--sans); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--honey-deep); }
.ai__seal > span { grid-area: 2 / 2; align-self: start; font: 400 var(--fs-fine)/1.3 var(--sans); color: var(--ink-2); }
.ai--pricing .ai__seal { --ai-bee: 42px; padding: 18px 32px 18px 24px; column-gap: 16px; }
.ai--pricing .ai__seal > span { font-size: var(--fs-small); }
/* the landing's seal: the name, then the three jobs one under the other — the bee beside all four lines */
.ai__seal--three { grid-template-rows: auto auto auto auto; row-gap: 2px; padding: 16px 30px 17px 22px; }
.ai__seal--three::after { grid-area: 1 / 1 / 5 / 2; }
.ai__seal--three b { grid-area: 1 / 2; align-self: end; margin-bottom: 4px; }
.ai__seal--three > span { grid-area: auto / 2; align-self: start; }

/* THE TRAILS: the bee's dotted trail (the paywall's own stroke), honey, one per chip, gathering into the
   seal and leaving it. Non-scaling strokes: the box may be stretched sideways on a narrower desk. */
.ai__link { grid-row: 2; display: block; width: var(--ai-link, 120px); height: var(--ai-row, 290px); overflow: visible; }
.ai__link--in { grid-column: 2; } .ai__link--out { grid-column: 4; }
.ai__trail path { fill: none; stroke: var(--honey-deep); stroke-opacity: .55; stroke-width: 1.3; stroke-linecap: round; stroke-dasharray: 1.8 3.6; vector-effect: non-scaling-stroke; transition: stroke-opacity var(--dur-short) var(--ease-out), stroke-width var(--dur-short) var(--ease-out); }
.ai__draw path { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.ai__funnel { display: none; }

/* --- under the pointer: a chip and its own trail answer together, so the relationship is the thing that lights --- */
@media (hover: hover) {
  .ai__chips li:hover { border-color: var(--rule-ink); background: color-mix(in oklab, var(--cream) 98%, transparent); }
  .ai__chips--out li:hover { border-color: var(--honey-deep); background: color-mix(in oklab, var(--honey) 22%, var(--cream)); }
  .ai:has(.ai__chips--in li:nth-child(1):hover) .ai__link--in path:nth-child(1), .ai:has(.ai__chips--in li:nth-child(2):hover) .ai__link--in path:nth-child(2),
  .ai:has(.ai__chips--in li:nth-child(3):hover) .ai__link--in path:nth-child(3), .ai:has(.ai__chips--in li:nth-child(4):hover) .ai__link--in path:nth-child(4),
  .ai:has(.ai__chips--in li:nth-child(5):hover) .ai__link--in path:nth-child(5),
  .ai:has(.ai__chips--in li:nth-child(6):hover) .ai__link--in path:nth-child(6), .ai:has(.ai__chips--in li:nth-child(7):hover) .ai__link--in path:nth-child(7),
  .ai:has(.ai__chips--out li:nth-child(1):hover) .ai__link--out path:nth-child(1), .ai:has(.ai__chips--out li:nth-child(2):hover) .ai__link--out path:nth-child(2),
  .ai:has(.ai__chips--out li:nth-child(3):hover) .ai__link--out path:nth-child(3), .ai:has(.ai__chips--out li:nth-child(4):hover) .ai__link--out path:nth-child(4),
  .ai:has(.ai__chips--out li:nth-child(5):hover) .ai__link--out path:nth-child(5), .ai:has(.ai__chips--out li:nth-child(6):hover) .ai__link--out path:nth-child(6) { stroke-opacity: 1; stroke-width: 1.8; }
}

/* --- THE ENTRANCE (once, with JavaScript and motion; visuals.js marks the figure .is-in when a third of it is on
   screen). What you share is already there; the trails draw toward Osmia AI, the seal comes to light, the trails
   leave it, and what opens rises after the centre. Nothing waits to be read: without .motion, or without
   JavaScript, the picture simply stands. --- */
.js.motion .ai[data-enter]:not(.is-in) .ai__draw path { stroke-dashoffset: 1; }
.js.motion .ai[data-enter]:not(.is-in) :is(.ai__seal, .ai__k--out, .ai__chips--out li) { opacity: 0; }
.js.motion .ai.is-in .ai__link--in .ai__draw path, .js.motion .ai.is-in .ai__funnel--in .ai__draw path { animation: aiDraw .9s cubic-bezier(.3, 0, .4, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
.js.motion .ai.is-in .ai__seal { animation: aiLight .7s var(--ease-out) .45s both; }
.js.motion .ai.is-in .ai__link--out .ai__draw path, .js.motion .ai.is-in .ai__funnel--out .ai__draw path { animation: aiDraw .9s cubic-bezier(.3, 0, .4, 1) both; animation-delay: calc(1s + var(--i, 0) * 70ms); }
.js.motion .ai.is-in .ai__k--out { animation: aiRise .5s var(--ease-out) 1.25s both; }
.js.motion .ai.is-in .ai__chips--out li { animation: aiRise .55s var(--ease-out) both; animation-delay: calc(1.35s + var(--n, 0) * 70ms); }
.ai__chips--out li:nth-child(1) { --n: 0; } .ai__chips--out li:nth-child(2) { --n: 1; } .ai__chips--out li:nth-child(3) { --n: 2; }
.ai__chips--out li:nth-child(4) { --n: 3; } .ai__chips--out li:nth-child(5) { --n: 4; } .ai__chips--out li:nth-child(6) { --n: 5; }
@keyframes aiDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes aiLight { from { opacity: 0; scale: .97; } to { opacity: 1; scale: 1; } }
@keyframes aiRise { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }

/* ================================ THE PLANS ================================ */
/* The landing's two plans under the system: what you pay, glanceable, no selector — the choice is made in the
   app. Two quiet cards of one kind; the year's carries the honey edge and its tag. */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: 100%; max-width: 640px; margin: 48px auto 0; text-align: left; }
.plan { position: relative; margin: 0; padding: 20px 22px 22px; border-radius: var(--radius-card); border: 1px solid var(--rule-strong); background: color-mix(in oklab, var(--cream) 96%, transparent); }
.plan--best { border: 1.5px solid var(--honey-deep); padding: 19.5px 21.5px 21.5px; }
.plan__name { margin: 0; font: 500 var(--fs-label)/1 var(--sans); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3); }
/* the year's tag sits on the card's top edge, the way the paywall's does: the filled pill, the site's button colours */
.plan__tag { position: absolute; top: -12px; right: 16px; font: 500 12px/1 var(--sans); letter-spacing: .02em; text-transform: none; color: var(--ink); padding: 6px 10px; border-radius: var(--radius-pill); background: var(--honey); white-space: nowrap; }
.plan__price { margin: 16px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font: 500 clamp(30px, 2.6vw, 36px)/1 var(--sans); letter-spacing: -.025em; color: var(--ink); }
.plan__lead { flex-basis: 100%; margin-bottom: 6px; font: 400 var(--fs-fine)/1.3 var(--sans); letter-spacing: 0; color: var(--ink-2); } /* "First month", the line above the month's amount, inside the same segment as its figure */
.plan__per { font: 500 16px/1 var(--sans); letter-spacing: -.005em; color: var(--ink-2); }
.plan__then { margin: 8px 0 0; font: 400 var(--fs-fine)/1.3 var(--sans); color: var(--ink-2); }
.plan--best .plan__price { margin-top: 46.5px; } /* the year's amount sits on the month's baseline: one row of figures */
.money { white-space: nowrap; }
.plans__note { margin: 16px auto 0; font: 400 var(--fs-caption)/1.4 var(--sans); color: var(--ink-3); text-align: center; }

/* ================================ THE MOVEMENTS ================================ */
/* the landing's closing movement and the Pricing opening: one centred column of words, the figure at the
   frame's width, the plans or the offer under it, the one action */
.mv--ai { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; align-items: start; min-height: 0; padding-top: var(--mv-top); padding-bottom: var(--mv-bottom); row-gap: 0; }
.mv--ai .col { max-width: 40rem; }
.mv--ai .folio { justify-content: center; }
.mv--ai .folio::after { content: ""; width: 34px; height: 1px; background: var(--rule-ink); }
.mv--ai .lede { margin: 22px auto 0; max-width: 34rem; }
.mv--ai .ctas { justify-content: center; margin-top: 28px; }
/* the landing's system movement, second on the page: the words, then the picture, then the two paragraphs and the
   closing line under it at the reading measure — the picture carries the explanation, the prose confirms it */
#osmia-ai.mv--ai { padding-top: clamp(64px, 10vh, 112px); padding-bottom: clamp(64px, 10vh, 112px); }
#osmia-ai .ai { margin-top: 40px; }
#osmia-ai .col--after { margin-top: 40px; max-width: 38rem; } /* 2026-09-18 polish: 52 → 40 above, 34 → 26 before the line, the measure a step wider — the same words, less column */
#osmia-ai .col--after > p { margin-top: 18px; }
#osmia-ai .col--after > p:first-child { margin-top: 0; }
#osmia-ai .col--after > .statement { margin-top: 26px; }
/* Pricing: the opening is a document opening — the folio, the head, one sentence — then the picture, then the offer */
#pricing.mv--ai { padding-top: 15vh; padding-bottom: 8vh; }
#pricing.mv--ai .ai { margin-top: 44px; }
#pricing.mv--ai .offer { width: 100%; max-width: 470px; margin-top: 52px; text-align: left; }

/* ================================ NARROW ================================ */
@media (max-width: 1100px) {
  .ai { --ai-link: 84px !important; } /* the trails' box narrows; the strokes do not (non-scaling) */
  .ai--pricing .ai__chips li { font-size: 15px; }
}
/* PHONES AND SMALL TABLETS: the picture turns and reads downward, the way the paywall does. The chips wrap in
   centred rows; two short funnels take the trails' place; the plans stand side by side until 340px. */
@media (max-width: 880px) {
  .ai { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 32px; max-width: 30rem; }
  .ai__k { white-space: normal; }
  .ai__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; }
  .ai__chips li, .ai--pricing .ai__chips li { height: 38px; padding: 0 14px 0 11px; font-size: 14px; gap: 7px; } /* one phone size for both expressions: three chips to a row */
  .ai--pricing .ai__c::before { width: 17px; height: 17px; }
  .ai__chips--out { max-width: 340px; } /* six chips wrap 3 + 3, not 4 + 2 */
  .ai__link { display: none; }
  .ai__funnel { display: block; width: min(100%, 360px); height: auto; overflow: visible; margin: -2px 0; }
  .ai__seal, .ai--pricing .ai__seal { --ai-bee: 32px; padding: 12px 22px 12px 16px; column-gap: 12px; } /* one phone seal for both expressions */
  .ai__seal--three { padding: 13px 22px 14px 16px; }
  .ai--landing .ai__chips--in { max-width: 400px; } /* the landing's seven wrap 3 + 3 + 1 at most, never a lone word per row */
  .ai__seal > span, .ai--pricing .ai__seal > span { font-size: var(--fs-fine); white-space: normal; }
  .plans { gap: 10px; margin-top: 36px; }
  .plan { padding: 16px 16px 18px; border-radius: 18px; }
  .plan--best { padding: 15.5px 15.5px 17.5px; }
  .plan__price { font-size: 28px; }
  .plan__per { font-size: 15px; }
  .mv--ai .ctas { margin-top: 24px; width: 100%; max-width: 30rem; }
  .mv--ai .ctas .btn { width: 100%; justify-content: center; }
  #osmia-ai.mv--ai { padding-top: clamp(48px, 8vh, 80px); padding-bottom: clamp(56px, 9vh, 96px); }
  #osmia-ai .col--after { margin-top: 32px; }
  #pricing.mv--ai { padding: 13vh 24px 7vh; } /* the site's phone gutter */
  #pricing.mv--ai .offer { margin-top: 40px; }
}
@media (max-width: 400px) {
  .ai__seal { padding: 11px 18px 11px 14px; column-gap: 10px; }
  .ai__seal > span, .ai--pricing .ai__seal > span { font-size: var(--fs-caption); }
  .ai__chips li, .ai--pricing .ai__chips li { padding: 0 11px 0 9px; gap: 6px; font-size: 13.5px; } /* Journal · Cycle · Suggestions hold one row at 360 */
  .plan { padding: 14px 13px 16px; }
  .plan--best { padding: 13.5px 12.5px 15.5px; }
  .plan__price { font-size: 26px; }
}
@media (max-width: 340px) {
  .plans { grid-template-columns: 1fr; }
  .plan--best .plan__price { margin-top: 16px; }
}

/* --- reduced motion: the entrance never runs (it is gated on .motion); the chips' colour answer stays --- */
@media (prefers-reduced-motion: reduce) {
  .ai__trail path { transition: none; }
}