/* home.css: the home page (index.html), after tokens.css and the foundation style.css.
   layers, in cascade order: base > objects > components > overrides > reduced motion.
   the "round 3" overrides near the end deliberately repeat earlier selectors and some use
   !important; they keep their place, since they win by order. utilities.css loads after this. */

/* ===== base: element defaults and type roles ===== */
html { overflow-x: clip; }   /* in-page links glide by script, on the zen curve (see the end of the page) */
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--face) !important; font-size: 17px; line-height: 1.7; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, li { font-family: var(--face); color: inherit; }
p { margin: 0 0 1.6rem; text-wrap: pretty; }
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); transition: text-decoration-color 0.4s var(--ease), opacity 150ms var(--ease); }
/* press feedback lives on pointer down, for everything that acts: in fast (60 ms), out a touch slower (150 ms). the browser's own tap flash is off so the press is ours */
a, button, summary, [tabindex] { -webkit-tap-highlight-color: transparent; }
summary { transition: opacity 150ms var(--ease); }
a:active, button:active, summary:active { opacity: 0.55; transition-duration: 60ms; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 5px; border-radius: 2px; }
/* small links reach a 44 px tap target without moving the layout */
footer a, .dhyan-go a, .part > p:only-child > a { display: inline-block; padding: 12px 0; margin: -12px 0; }
[hidden] { display: none !important; }

/* the display voice: every large line is newsreader */
.big, .mid, .hero .lede, .dhyan-word, .techs b, .ways b, .k-claim, .k-what { font-family: var(--serif); }
.big { font-size: clamp(30px, 5.4vw, 44px); line-height: 1.28; font-weight: 400; letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
.big + .big { margin-top: 0.9rem; }
.it { font-style: italic; }
.soft { color: var(--quiet); }
footer { font-size: 14px; letter-spacing: 0.01em; }
.eyebrow { font-size: 14px; letter-spacing: 0.01em; color: var(--quiet); margin: 0 0 2.2rem; }

/* the line that joins every part to the whole: drawn once, from the left, as it arrives */
.line { height: 1px; width: 100vw; background: currentColor; opacity: 0.4; margin: 16vh 0; transform-origin: left center; transition: transform 1.6s var(--ease); }
.js .line:not(.on) { transform: scaleX(0); }

/* ===== objects: reusable structure ===== */
/* the column that hangs off the left gutter; .wide for grids and timelines */
.col { max-width: 29rem; margin-left: var(--gutter); padding-right: 28px; }
.wide { max-width: 44rem; }

/* the vertical side label: a chapter name standing in the margin */
.chapter { color: var(--quiet); font-size: 15px; letter-spacing: 0.004em; margin-bottom: 8vh !important; }
/* research: the chapter stands in the margin, turned on its side, read from the foot up. large and quiet; on a phone it lies down again */
.chapter.vert { position: absolute; left: calc(var(--gutter) - 4.4rem); top: 18vh; margin: 0 !important; transform-origin: 0 0; transform: rotate(-90deg) translateX(-100%); font-size: clamp(30px, 3.6vw, 48px); font-weight: 300; line-height: 1; letter-spacing: -0.02em; color: rgba(25,25,24,0.2); white-space: nowrap; pointer-events: none; }
.vert-wrap { position: relative; margin-top: 14vh; }
.chapter.vert.vert-local { top: 0; }
@media (max-width: 760px) {
  .chapter.vert { position: static; transform: none; font-size: 15px; font-weight: 400; letter-spacing: 0.004em; color: var(--quiet); margin: 0 0 8vh var(--gutter) !important; }
}

/* the card: one lean way to follow the build, used on the form slate and at the end. a hairline, small type, a line-drawn arrow. hover only brightens the line; the press is a scale */
.follow { display: grid; grid-template-columns: auto auto auto; align-items: baseline; column-gap: 0.6rem; width: fit-content; max-width: 100%; padding: 0.9rem 1.1rem; border: 1px solid rgba(255,255,255,0.18); border-radius: 6px; color: #fff; text-decoration: none;
  transition: border-color 0.5s var(--ease), transform 150ms var(--ease); }
.follow:active { transform: scale(0.98); transition-duration: 60ms; opacity: 1; }
.follow:focus-visible { outline: 1px solid currentColor; outline-offset: 5px; }
.follow-kick { grid-column: 1; white-space: nowrap; font-size: 18px; line-height: 1.25; letter-spacing: -0.02em; color: rgba(255,255,255,0.46); }
.follow-line { grid-column: 2; font-family: var(--sans); font-size: 18px; line-height: 1.25; font-weight: 400; letter-spacing: -0.02em; }
.follow-go { grid-column: 3; grid-row: 1; align-self: center; margin-left: 0.2rem; width: 18px; height: 18px; color: rgba(255,255,255,0.55); transition: color 0.5s var(--ease); }

/* meaning and values: the lineage on one hairline. each idea a dot, the last one, ours, in teal and still open */
.timeline { list-style: none; margin: 3.2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2.4rem 1.4rem; }
.timeline li { position: relative; padding-top: 1.6rem; border-top: 1px solid rgba(25,25,24,0.18); }
.timeline li::before { content: ''; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.timeline .tl-y { display: block; font-size: 12px; letter-spacing: 0.04em; color: var(--quiet); }
.timeline .tl-t { display: block; margin: 0.35rem 0 0.4rem; font-family: var(--serif); font-size: 19px; line-height: 1.2; color: var(--ink); text-decoration: none; transition: opacity 0.4s var(--ease); }
.timeline .tl-l { display: block; font-size: 13px; line-height: 1.5; color: var(--quiet); }
.timeline .tl-a { display: block; margin: -0.1rem 0 0.4rem; font-size: 12px; line-height: 1.4; color: var(--quiet); }
.timeline .tl-next { border-top: 1px dashed var(--teal); }
.timeline .tl-next::before { background: var(--teal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--teal) 20%, transparent); }
.timeline .tl-next .tl-y, .timeline .tl-next .tl-t { color: var(--teal); }
@media (hover: hover) { .timeline a.tl-t:hover { opacity: 0.6; } }
@media (max-width: 760px) { .timeline { grid-template-columns: 1fr; gap: 0; }
  .timeline li { border-top: 0; border-left: 1px solid rgba(25,25,24,0.18); padding: 0 0 1.6rem 1.4rem; }
  .timeline li::before { top: 0.3rem; left: -4px; }
  .timeline .tl-next { border-top: 0; border-left: 1px dashed var(--teal); padding-bottom: 0; } }

/* ===== components: the home page's own sections, in page order ===== */

/* hero: the monolith */
.hero { position: relative; height: 100svh; min-height: 520px; overflow: hidden; background: var(--ink); color: var(--paper); }
.hero video { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
.hero.use-film video { display: block; } .hero.use-film .scene { display: none; }
.hero .scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero .scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(25,25,24,0.15) 35%, rgba(25,25,24,0.78)); }
.hero:not(.use-film) .scrim { background: linear-gradient(180deg, rgba(13,18,28,0.25) 0%, rgba(13,18,28,0) 40%, rgba(25,25,24,0) 75%, rgba(25,25,24,0.55) 100%); }
.hero .col { position: absolute; left: 0; bottom: max(8vh, 56px); margin-left: var(--gutter); max-width: 34rem; }
/* the logo, as on the first holon site */
.hero .logo { font-family: "Gilroy-ExtraBold", "Helvetica Neue", sans-serif !important; font-weight: 800; font-size: clamp(32px, 4.2vw, 54px); line-height: 1; letter-spacing: -0.03em; color: #fff; margin: 0 0 2.2rem !important; }
.one-logo { font-family: "Gilroy-ExtraBold", "Helvetica Neue", sans-serif; font-weight: 800; font-size: clamp(40px, 4.6vw, 60px); line-height: 1; letter-spacing: -0.03em; color: var(--ink); margin: 0; }   /* one, the society layer, set as its logo like k. */
/* the dot breathes: k's teal, at k's resting breath (7 s on the zen curve), never gone */
.k-mark { font-family: "Gilroy-ExtraBold", "Helvetica Neue", sans-serif !important; font-weight: 800; font-style: normal; letter-spacing: -0.03em; text-transform: lowercase; }
.logo .dot, .k-mark .dot, .one-logo .dot { color: var(--teal); animation: breath 7s var(--ease) infinite, blues 21s var(--ease) infinite; }   /* k. is the logo: its dot breathes through the blues, as in the hero */
.k-scroll-copy .k-mark { color: #fff; }
@keyframes breath { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
/* three blues, one per breath: k teal, sky, deep */
@keyframes blues { 0%, 100% { color: var(--teal); } 33.3% { color: var(--sky); } 66.6% { color: var(--deep); } }
.hero .lede { font-size: clamp(28px, 3.7vw, 44px); line-height: 1.3; max-width: 36rem; margin: 0; text-wrap: balance; }
.pillars { font-family: var(--sans); font-size: clamp(17px, 1.6vw, 21px); line-height: 1.6; margin: 1.4rem 0 0; }
.hero .pillars { opacity: 0.5; }
.hero .pillars a { transition: opacity 0.4s var(--ease); }
.hero .pillars a:active { transition-duration: 60ms; }
.hero .stackline { margin: 0.6rem 0 0; font-size: 14px; letter-spacing: 0.02em; opacity: 0.6; }
.hero .stackline a { color: var(--paper); text-decoration: none; margin-right: 0.5em; }
.hero .pillars a { color: var(--paper); text-decoration: none; margin-right: 0.35em; }
/* the drawn scene, used only when the film is off: the sun rises once, the moon follows */
.hero .scene .sun { transform: translateY(70px); animation: rise 9s var(--ease) 0.3s forwards; }
.hero .scene .moon { opacity: 0; animation: appear 6s var(--ease) 2.5s forwards; }
@keyframes rise { to { transform: translateY(0); } }
@keyframes appear { to { opacity: 0.92; } }

main.paper { position: relative; padding: 18vh 0 4vh; }
#alignment { padding-bottom: 16vh; }   /* the one section ends straight onto the holon slate: give it room */

/* the curve: machine capability against a flat human line (after ai 2027). scroll tells it: the words turn, then the line draws. native scroll, the stage simply holds still */
.acc { position: relative; background: var(--paper); }
.acc-stick { position: relative; height: 74svh; min-height: 480px; overflow: hidden; }
/* the tall wrapper is the scroll distance; the stage sits centred in the viewport while the story plays */
.acc.scroll { height: 260svh; }
.acc.scroll .acc-stick { position: sticky; top: max(0px, min(13svh, calc((100svh - 480px) / 2))); }
.acc-chart { position: absolute; left: var(--gutter); right: max(28px, 6vw); top: 6vh; height: 54svh; }
.acc-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.acc-svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.p-main { stroke: var(--deep); stroke-width: 2; }
.p-slow { stroke: var(--quiet); stroke-width: 1.4; }
.p-human { stroke: transparent; }
.tick { position: absolute; top: 100%; transform: translateX(-50%); margin-top: 1rem; font-size: 11px; letter-spacing: 0.02em; color: var(--quiet); }
.tick.major { color: var(--ink); font-size: 14px; letter-spacing: 0.01em; }
.ev { position: absolute; width: 0; height: 0; opacity: 0; transform: scale(0.6); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.ev.on { opacity: 1; transform: none; }
.ev i { position: absolute; left: 0; top: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--deep); }
/* where each tick and event sits on the chart: x as a share of the chart width, y as a share of its height */
.tick.t-2026 { left: 12.188%; }
.tick.t-2027 { left: 28.75%; }
.tick.t-apr { left: 45.25%; }
.tick.t-jul { left: 61.312%; }
.tick.t-oct { left: 77.562%; }
.tick.t-2028 { left: 93.25%; }
.ev.ev-1 { left: 45.938%; top: 76.0%; }
.ev.ev-2 { left: 67.5%; top: 64.7%; }
.ev.ev-3 { left: 80.938%; top: 50.9%; }
/* the axis arrives with the line, after the words */
.acc-chart .tick { opacity: 0; transition: opacity 1.2s var(--ease); }
.acc-chart.drawn .tick { opacity: 1; }
/* the words come first and stay: they sit on the chart, in the calm upper left where the curve is still flat; a soft pool of paper keeps them clear of the line */
.acc-copy { position: absolute; left: 0; top: 11vh; margin-left: calc(var(--gutter) - 2.5rem); max-width: 46rem; padding: 3vh 3rem 3vh 2.5rem; background: radial-gradient(ellipse at 45% 50%, var(--paper) 40%, transparent 72%); opacity: 0; transform: translateY(14px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.acc-copy.on { opacity: 1; transform: none; }

/* rolling text: one line that turns over in place. the outgoing phrase lifts and softens, the next rises in */
.roll { display: inline-grid; vertical-align: baseline; }
p.roll { display: grid; }
.roll-w { grid-area: 1 / 1; opacity: 0; transform: translateY(0.55em); filter: blur(3px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), filter 0.9s var(--ease); }
.roll-w.on { opacity: 1; transform: none; filter: none; }
.roll-w.out { opacity: 0; transform: translateY(-0.55em); filter: blur(3px); }
.roll-w.reset { transition: none; }

/* human alignment: one argument in three scales. big > mid > sub, then the items */
.mid { font-size: clamp(27px, 3.4vw, 36px); line-height: 1.3; font-weight: 400; letter-spacing: -0.01em; margin: 0 0 1.4rem; text-wrap: balance; }
.mid.sans { font-family: var(--sans); font-size: clamp(23px, 2.8vw, 30px); line-height: 1.25; letter-spacing: -0.018em; }
.mid + .mid.it { margin-top: 0.6rem; }
.part { margin-top: 14vh; }
/* attention tech: the states */
.techs { list-style: none; margin: 1.2rem 0 0; padding: 0; max-width: 36rem; }
.techs li { display: grid; grid-template-columns: 11rem 1fr; gap: 0 1.6rem; padding: 1rem 0; border-top: 1px solid rgba(25,25,24,0.12); font-size: 17px; line-height: 1.65; }
.techs b { font-weight: 400; font-size: 1.15em; line-height: 1.45; }
.techs span { color: var(--quiet); }

/* attention tech: four states as tiles. one lifts at a time to show how the state is described from the inside */
.states { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 2.4rem; max-width: 44rem; }
/* a tile is something you touch: it lifts in 600 ms on the zen curve, presses to 0.98 on pointer down, and every move starts from where it is (transitions, never keyframes). the shadow is a layer whose opacity fades, so only transform and opacity ever animate */
.st { position: relative; display: grid; min-height: 13.5rem; padding: 1.4rem 1.5rem; border-radius: 6px; background: #fff; border: 1px solid rgba(25,25,24,0.08); cursor: default; outline: none;
  transition: transform 0.6s var(--ease); }
.st > * { grid-area: 1 / 1; }
.st::after { content: ''; position: absolute; inset: -1px; border-radius: 6px; box-shadow: 0 18px 40px -22px rgba(25,25,24,0.35); opacity: 0; transition: opacity 0.6s var(--ease); pointer-events: none; }
.st-name { font-family: var(--serif); font-size: 24px; line-height: 1.2; margin: 0; align-self: start; transition: opacity 0.5s var(--ease); }
.st-line { font-size: 15px; line-height: 1.5; color: var(--quiet); margin: 0; align-self: end; transition: opacity 0.5s var(--ease); }
.st-q { margin: 0; padding: 0; align-self: center; opacity: 0; transform: translateY(6px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); pointer-events: none; }
.st-q p { font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 1.4; margin: 0; }
.st-q cite::before { content: none; }
.st-q cite { display: block; margin-top: 0.8rem; font-style: normal; font-size: 13px; color: var(--quiet); }
.st.up { transform: translateY(-6px); }
.st.up::after { opacity: 1; }
.st.up .st-line { opacity: 0; }
.st.up .st-name { opacity: 0.35; }
.st.up .st-q.on { opacity: 1; transform: none; transition-delay: 0.15s; pointer-events: auto; }
.st-q cite a { display: inline-flex; align-items: center; gap: 4px; padding: 10px 0; margin: -10px 0; color: var(--quiet); text-decoration: none; transition: color 0.4s var(--ease); }
.st-q cite svg { width: 12px; height: 12px; }
@media (hover: hover) { .st-q cite a:hover { color: var(--ink); } }
.st:active { transform: scale(0.98); transition-duration: 100ms; }
.st.up:active { transform: translateY(-6px) scale(0.98); }
.st:focus-visible { box-shadow: 0 0 0 2px var(--teal); }
@media (min-width: 761px) { .states .st { padding: 1.2rem 1.1rem; } .states .st-name { font-size: 21px; } .states .st-line { font-size: 14px; } .states .st-q p { font-size: 15px; } .states .st-q cite { font-size: 12px; } .states .st.up .st-name { opacity: 0; } }
@media (max-width: 760px) { .states { grid-template-columns: 1fr; } .st { min-height: 12rem; } }
@media (prefers-reduced-motion: reduce) {
  .st { display: block; min-height: 0; }
  .st-line { margin-top: 0.4rem; }
  .st-q { opacity: 1; transform: none; margin-top: 1rem; }
}
/* join, inside the slate: two ways in, the gathering, and k instead of a form */
.join { margin-top: 18vh; }
.ways-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-top: 3.2rem; max-width: 44rem; }
.way { border-top: 1px solid rgba(255,255,255,0.18); padding-top: 1.2rem; }
.way p { margin: 0; }
.way-name { font-family: var(--serif); font-size: 28px; line-height: 1.2; color: #fff; }
.way-price { color: var(--sky); margin: 0.3rem 0 1rem !important; }
.way p:last-child { color: rgba(255,255,255,0.6); }
.clearing { margin: 4rem 0 0; max-width: 44rem; color: rgba(255,255,255,0.6); }
.slate.fin { background: var(--night); }
.clearing b { font-weight: 400; color: #fff; }
.foot-slate footer { margin-top: 4vh; padding-bottom: 0; }
.foot-slate footer a { color: rgba(255,255,255,0.46); }
@media (max-width: 760px) { .ways-2 { grid-template-columns: 1fr; gap: 2rem; } }
/* strategy: the thesis is one line until opened */
#strategy { padding: 18vh 0 16vh; }
.thesis { margin-top: 3rem; border-top: 1px solid rgba(25,25,24,0.12); }
.thesis summary { list-style: none; cursor: pointer; padding: 1.2rem 0; font-size: 17px; color: var(--quiet); display: flex; justify-content: space-between; }
.thesis summary::-webkit-details-marker { display: none; }
.thesis summary::after { content: '+'; transition: transform 0.4s var(--ease); }
html:not(.js) .thesis[open] summary::after, .thesis.is-open summary::after { transform: rotate(45deg); }
.thesis ol { margin: 0; padding: 0 0 0 1.4rem; font-family: var(--serif); font-size: clamp(21px, 2vw, 26px); line-height: 1.4; }
.thesis { --gap: 0.4rem; }
/* a fold: the panel's height and opacity open on the zen curve (400 ms) and close the same way. a transition, so a second tap mid-way turns it round from where it is */
.js details.fold > .in { display: grid; grid-template-rows: 0fr; margin-top: 0; opacity: 0; transition: grid-template-rows 0.4s var(--ease), opacity 0.4s var(--ease); }
.js details.fold.is-open > .in { grid-template-rows: 1fr; opacity: 1; }
.js details.fold > .in > .in-b { min-height: 0; min-width: 0; }
.js details.fold.moving > .in > .in-b { overflow: hidden; }
/* the gap above the panel travels inside the clip, so it closes with it */
.js details.fold > .in > .in-b::before { content: ''; display: block; height: var(--gap, 1.2rem); }
.thesis li { margin: 0 0 1rem; padding-left: 0.4rem; }
.thesis li::marker { color: var(--teal); }
/* the human flourishing stack: society, technologies, individual form */
#stack { padding: 24vh 0 16vh; }
.stack-grid { display: grid; grid-template-columns: minmax(0, 32rem); margin-left: var(--gutter); padding-right: 28px; }
.layers { list-style: none; margin: 2.4rem 0 0; padding: 0; }
.layers li { border-bottom: 1px solid rgba(25,25,24,0.12); }
.layers li:last-child { border-bottom: 0; }
.layers .layer { display: grid; grid-template-columns: 2.2rem 1fr; column-gap: 1rem; padding: 1rem 0; text-decoration: none; color: inherit; }
.layers b, .layers span { grid-column: 2; }
.layers i { grid-row: span 2; font-style: normal; color: var(--quiet); font-size: 15px; padding-top: 0.35rem; }
.layers b { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.2; }
.layers span { color: var(--quiet); font-size: 16px; }
.layers em { display: block; font-style: normal; color: var(--ink); margin-top: 0.4rem; }
@media (max-width: 760px) { .stack-grid { margin-left: 0; padding: 0 20px; } }
/* stack title, the strategy line beneath it, the thesis always shown */
.thesis-min { margin-top: 4.8rem; --thesis-accent: var(--deep); }
.thesis-min > .thesis-label, .sec-label { font: 500 13px/1.5 var(--sans); letter-spacing: 0.06em; color: var(--quiet); margin: 0 0 1rem; }
.thesis-min > .thesis-intro { margin: 0 0 1.2rem; font-family: var(--sans); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; letter-spacing: -0.01em; color: var(--ink); }
.thesis-min ol { list-style: none; counter-reset: thesis; margin: 0; padding: 0; }
.thesis-min li { counter-increment: thesis; display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); padding: 1.1rem 0; border-top: 1px solid rgba(25,25,24,0.12); font-family: var(--sans); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; letter-spacing: -0.01em; color: var(--ink); }
.thesis-min li::before { content: counter(thesis, decimal-leading-zero); font: 500 12px/1.5 var(--sans); letter-spacing: 0.04em; color: var(--thesis-accent); padding-top: 0.3rem; }
.thesis-min strong { display: block; font-weight: 400; color: var(--quiet); }
/* meet k: the form label on the slate, and the waitlist */
#flourishing { position: relative; }
#flourishing .chapter.vert { color: rgba(255,255,255,0.14); }
.k-scroll-stage { position: relative; height: 170svh; }
.k-scroll-copy { position: sticky; top: 14svh; }
.k-scroll-copy .roll-w, .scroll-copy .roll-w { transition: none; filter: none; }
.dhyan-stage { position: relative; height: 190svh; }   /* dhyān turns with the scroll, like the form's words */
.dhyan-stage > .scroll-copy { position: sticky; top: 22svh; }
.waitlist { margin-top: 4rem; max-width: 36rem; }
/* the stack, once passed, floats as one compact pill, bottom centre: society, technologies, individual form. reads on paper and slate alike */
.stack-nav { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40; display: flex; flex-direction: row; padding: 4px; border-radius: 999px;
  background: rgba(243,243,241,0.82); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 0 0 1px rgba(25,25,24,0.08), 0 10px 30px -12px rgba(25,25,24,0.35);
  transform: translate(-50%, 6px); opacity: 0; pointer-events: none; transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.stack-nav.on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.stack-nav a { padding: 10px 16px; border-radius: 999px; font-size: 14px; line-height: 1; color: var(--quiet); text-decoration: none; white-space: nowrap; transition: background-color 0.4s var(--ease), color 0.4s var(--ease), opacity 150ms var(--ease); }
.stack-nav a.here { background: var(--ink); color: var(--paper); }
@media (max-width: 420px) { .stack-nav a { padding: 10px 12px; font-size: 13px; } }
/* the site menu lives in the empty left column, bottom: manifesto, research, dhyān, privacy. white over a slate. phones keep it in the footer */
.site-nav { position: fixed; left: 24px; bottom: max(28px, env(safe-area-inset-bottom)); z-index: 40; display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 2px;
  transform: translateY(6px); opacity: 0; pointer-events: none; transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), color 0.4s var(--ease); }
.site-nav.on { transform: none; opacity: 1; pointer-events: auto; }
.site-nav a { padding: 5px 0; font-size: 12px; line-height: 1.3; letter-spacing: 0.02em; color: var(--quiet); text-decoration: none; white-space: nowrap; transition: color 0.4s var(--ease), opacity 150ms var(--ease); }
.site-nav.dark a { color: rgba(255,255,255,0.46); }
.foot-phone { display: none; }
/* ask your agent: a small card that hands a visitor's own agent the deep context in /llms.txt. opens and closes on the zen curve; line icons only */
.agent-open { font: inherit; background: none; border: 0; padding: 5px 0; margin: 0 0 6px; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; letter-spacing: 0.02em; text-align: left; transition: color 0.4s var(--ease), opacity 150ms var(--ease); }
.agent-open svg { width: 13px; height: 13px; }
.site-nav.dark .agent-open { color: #fff; }
.agent-open:active { opacity: 0.55; transition-duration: 60ms; }
.agent-sheet { position: fixed; inset: auto auto max(28px, env(safe-area-inset-bottom)) 24px; margin: 0; width: min(21rem, calc(100vw - 32px)); padding: 1.3rem 1.3rem 0.9rem; border: 1px solid rgba(25,25,24,0.12); border-radius: 10px; background: var(--paper); color: var(--ink); box-shadow: 0 24px 60px -28px rgba(25,25,24,0.45);
  opacity: 0; transform: translateY(8px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), overlay 0.5s allow-discrete, display 0.5s allow-discrete; }
.agent-sheet:popover-open { opacity: 1; transform: none; }
@starting-style { .agent-sheet:popover-open { opacity: 0; transform: translateY(8px); } }
.agent-sheet::backdrop { background: rgba(25,25,24,0); }
.agent-sheet h2 { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 0.4rem; }
.agent-sheet p { font-size: 14px; line-height: 1.5; color: var(--quiet); margin: 0 0 0.9rem; }
.agent-sheet ul { list-style: none; margin: 0; padding: 0; }
.agent-sheet li { border-top: 1px solid rgba(25,25,24,0.1); }
.agent-sheet li a, .agent-sheet li button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.75rem 0; font: inherit; font-size: 15px; color: var(--ink); background: none; border: 0; text-decoration: none; cursor: pointer; transition: opacity 150ms var(--ease); }
.agent-sheet li svg { width: 15px; height: 15px; color: var(--quiet); flex: none; transition: color 0.4s var(--ease); }
.agent-sheet li a:active, .agent-sheet li button:active { opacity: 0.55; transition-duration: 60ms; }
.agent-close { position: absolute; top: 0.7rem; right: 0.7rem; width: 32px; height: 32px; display: grid; place-items: center; background: none; border: 0; color: var(--quiet); cursor: pointer; border-radius: 999px; }
.agent-close svg { width: 14px; height: 14px; }
.foot-phone .agent-open { font-size: 14px; color: rgba(255,255,255,0.78); margin: 0 0 0.6rem; }
@media (hover: hover) { .agent-sheet li a:hover svg, .agent-sheet li button:hover svg { color: var(--ink); } .agent-open:hover { opacity: 0.7; } }
@media (max-width: 760px) { .agent-sheet { inset: auto 16px max(16px, env(safe-area-inset-bottom)) 16px; width: auto; } }
@media (prefers-reduced-motion: reduce) { .agent-sheet, .agent-open { transition: none; } }
@media (max-width: 760px) { .site-nav { display: none; } .foot-phone { display: block; } }
@media (prefers-reduced-motion: reduce) { .stack-nav, .stack-nav a, .site-nav, .site-nav a { transition: none; } }
#flourishing .waitlist .k-voice { align-items: flex-start; text-align: left; margin: 0 0 3.6rem; }
.waitlist .eyebrow { margin-bottom: 1rem; }
.waitlist .k-def { margin: 0 0 2rem; max-width: 28rem; }
.waitlist .wl { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.2rem; row-gap: 0.5rem; max-width: none; margin: 0; border-bottom: 1px solid rgba(255,255,255,0.3); padding-bottom: 0.75rem; align-items: end; }
.wl-label { grid-column: 1 / -1; font: 400 13px/1.5 var(--sans); color: rgba(255,255,255,0.46); }
.waitlist .wl input[type=email] { min-width: 0; width: 100%; padding: 0.65rem 0; font-size: 18px; border: 0; }
.waitlist .wl:focus-within { border-bottom-color: var(--sky); }
.waitlist .wl .act { min-height: 44px; padding: 0.65rem 0; color: var(--sky); text-decoration: none; font-size: 15px; white-space: nowrap; }
.waitlist .wl .act span { display: inline-block; margin-left: 0.5rem; }
.waitlist .msg { color: rgba(255,255,255,0.6); font-size: 14px; margin-top: 1rem; }
@media (max-width: 760px) { .waitlist .wl { column-gap: 0.75rem; } .waitlist .wl .act { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .k-scroll-stage, .dhyan-stage { height: auto; } .k-scroll-copy, .dhyan-stage > .scroll-copy { position: static; } }
/* The proposed hardware stack: an open shelf, using k's existing slate and type. */
.hardware { margin-top: 4rem; max-width: 64rem; }
.hardware-title { margin: clamp(6rem, 16vh, 10rem) 0 1.6rem; }   /* a .mid.sans heading; wide air after meet k */
.hardware-intro { max-width: 32rem; margin-bottom: 3rem; }
.hardware-parts { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.6rem; }
.hardware-parts li { min-width: 0; }
.hardware-object { display: block; width: 100%; height: 150px; color: var(--paper); overflow: visible; }
.hardware-object .detail { opacity: 0.46; }
.hardware-index { display: block; font-family: var(--sans); font-size: 13px; letter-spacing: 0.06em; color: rgba(255,255,255,0.46); margin: 1.4rem 0 0.7rem; }
.hardware-parts h3 { font-family: var(--sans); font-size: 17px; font-weight: 500; line-height: 1.4; color: var(--paper); margin: 0 0 0.55rem; }
.hardware-parts p { font-size: 14px; line-height: 1.6; margin: 0; }
.hardware-note { font-size: 13px; line-height: 1.7; color: rgba(255,255,255,0.6); max-width: 38rem; margin: 3rem 0 0; }
.hardware + .waitlist { margin-top: 5rem; }
@media (max-width: 1000px) {
  .hardware-parts { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2.4rem; }
}
@media (max-width: 600px) {
  .hardware-parts { grid-template-columns: 1fr; gap: 0; }
  .hardware-parts li { display: grid; grid-template-columns: 100px minmax(0, 1fr); column-gap: 1.4rem; padding: 1.5rem 0; }
  .hardware-parts li + li { border-top: 1px solid rgba(255,255,255,0.15); }
  .hardware-object { height: 100px; grid-row: 1 / 4; align-self: center; }
  .hardware-index { margin: 0 0 0.45rem; }
  .hardware-intro { margin-bottom: 1.4rem; }
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
/* attention: paragraph left, the states right */
.att-grid { display: grid; grid-template-columns: minmax(0, 27rem) minmax(0, 28rem); gap: 3.2rem; align-items: start; margin-left: var(--gutter); padding-right: max(28px, 6vw); }
#form-layer .vert-wrap { margin-top: 3rem; }
.att-grid .states { margin-top: 0; }
.states-more { font-size: 14px; color: var(--quiet); margin: 1.2rem 0 0; }
.states-title { font-size: 14px; color: var(--quiet); margin: 0.4rem 0 1rem; }
.st-q { border: 0 !important; }
@media (max-width: 900px) { .att-grid { grid-template-columns: 1fr; gap: 2.4rem; } }
/* the .org map's readiness lines */
.techs.layer { max-width: 40rem; }
/* dhyān: its own room. one word that turns over, one line under it, one way in */
#dhyan { padding: 16vh 0 4vh; }
.dhyan-word { font-size: clamp(40px, 6.4vw, 76px); line-height: 1.08; font-weight: 400; letter-spacing: -0.022em; margin: 0; }
.dhyan-word .is { font-style: italic; color: var(--quiet); }
.dhyan-line { margin: 2.2rem 0 0; }
.dhyan-go { margin: 3.2rem 0 0; }

/* k's world */
.slate { background: var(--slate); color: rgba(255,255,255,0.78); padding: 20vh 0; }
.slate .soft, .slate .eyebrow { color: rgba(255,255,255,0.46); }
.slate a { color: rgba(255,255,255,0.78); }
/* meet k: two couplets about you and k, then the dot opens what k is, then the words. one column from the gutter, read down */
#flourishing { padding-top: 22vh; }
.k-col { margin-left: var(--gutter); padding-right: 28px; }
.k-claim { font-size: clamp(36px, 5vw, 76px); line-height: 1.06; font-weight: 400; letter-spacing: -0.022em; color: #fff; margin: 0; text-wrap: balance; }
.k-claim span { display: block; }
.k-claim .k-soft { color: rgba(255,255,255,0.46); }
.k-claim + .k-claim { margin-top: 3.4rem; }
.k-voice { display: flex; flex-direction: column; align-items: flex-start; margin-top: 7rem; }
.k-copy { max-width: 32rem; margin-top: 4.4rem; }
.k-copy p { margin: 0; }
.k-what { font-size: clamp(28px, 2.6vw, 38px); line-height: 1.18; letter-spacing: -0.012em; color: #fff; text-wrap: balance; }
.k-pillars, .k-rsi { font-size: 18px; line-height: 1.6; }
.k-pillars { color: rgba(255,255,255,0.46); margin-top: 0.7rem !important; }
.k-eternal { font-size: 15px; line-height: 1.6; letter-spacing: 0.004em; color: rgba(255,255,255,0.46); margin-top: 3.2rem !important; }
.k-eternal span { display: block; }
.k-rsi { color: rgba(255,255,255,0.78); margin-top: 0.6rem !important; }

/* the voice: the logo's dot, grown up. press lives on the wrapper; breath, voice and ear live on the layers inside, driven by one loop */
.meet { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; color: inherit; font: inherit; font-size: 16px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.meet-dot { position: relative; width: 104px; height: 104px; transition: transform 160ms var(--ease); }
.meet:active { opacity: 1; }  /* the dot carries its own press */
.meet:active .meet-dot { transform: scale(0.96); transition-duration: 60ms; }
.meet-glow { position: absolute; inset: -46%; border-radius: 50%; background: radial-gradient(circle, rgba(47,163,155,0.6) 0%, rgba(47,163,155,0.18) 38%, rgba(47,163,155,0) 68%); opacity: 0.35; will-change: transform, opacity; pointer-events: none; }
.meet-ring { position: absolute; inset: -8px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.8); opacity: 0; will-change: transform, opacity; pointer-events: none; }
.meet-core { position: absolute; inset: 0; border-radius: 50%; background: var(--teal); will-change: transform, opacity; display: grid; place-items: center; }
/* the mic shows only before the first tap. after that the dot alone is k */
.meet-core svg { width: 22px; height: 22px; color: rgba(255,255,255,0.92); transition: opacity 400ms var(--ease), transform 400ms var(--ease); }
.meet.live .meet-core svg { opacity: 0; transform: scale(0.8); }
/* getting ready: one quiet arc turns around the dot while k's voice and ears load */
.meet-load { position: absolute; inset: -14px; width: calc(100% + 28px); height: calc(100% + 28px); opacity: 0; transition: opacity 0.8s var(--ease); pointer-events: none; overflow: visible; }
.meet-load circle { fill: none; stroke: rgba(255,255,255,0.7); stroke-width: 1.2; stroke-linecap: round; stroke-dasharray: 60 302; transform-origin: 50% 50%; animation: kturn 2.4s var(--ease) infinite; }
.meet.loading .meet-load { opacity: 1; }
@keyframes kturn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .meet-load circle { animation: none; stroke-dasharray: none; stroke: rgba(255,255,255,0.35); } }
.meet-word { color: rgba(255,255,255,0.78); text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; text-decoration-color: rgba(255,255,255,0.3); transition: text-decoration-color 0.4s var(--ease); }
.meet-note, .meet-privacy { max-width: 18rem; text-align: left; color: rgba(255,255,255,0.46); font-size: 15px; letter-spacing: 0.004em; margin: 1rem 0 0; min-height: 1.6em; opacity: 0; transition: opacity 0.6s var(--ease); }
/* the privacy line takes no room until it is needed; height and opacity arrive on the same curve */
.meet-privacy { display: grid; grid-template-rows: 0fr; margin-top: 0; min-height: 0; transition: grid-template-rows 0.9s var(--ease), opacity 0.9s var(--ease); }
.meet-privacy > span { overflow: hidden; min-height: 0; }
.meet-privacy.on { grid-template-rows: 1fr; margin-top: 0.4rem; }
.meet-note.on, .meet-privacy.on { opacity: 1; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* we are holon: beats of one story. a faint numeral opens the first and the last */
.dc { margin-top: 18vh; }
.dc.first, .beat.first { margin-top: 0; }
.beat { margin-top: 14vh; }
.dc-mw { font-family: "Gilroy-ExtraBold", "Helvetica Neue", sans-serif !important; font-size: clamp(56px, 9vw, 120px); line-height: 1; letter-spacing: -0.03em; color: rgba(255,255,255,0.12); margin: 0 0 2rem; }
.dc-phrase { font-size: clamp(40px, 6.4vw, 92px); line-height: 1.04; max-width: 14ch; margin-bottom: 1rem; }
.footnote { font-size: 14px; letter-spacing: 0.01em; margin-top: 2.4rem; }
.slate .footnote a { color: inherit; }
.dc-sub { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(20px, 2vw, 26px); line-height: 1.3; color: rgba(255,255,255,0.5); margin: 0 0 3.2rem; }

/* quiet fields: a single hairline to write on */
.field { display: flex; gap: 1.2rem; align-items: baseline; max-width: 29rem; margin-top: 2.4rem; flex-wrap: wrap; }
.field input, .field textarea, .field select { flex: 1 1 12rem; margin: 0; height: auto; padding: 0.35rem 0; background: transparent; border: 0; border-bottom: 1px solid currentColor; border-radius: 0; box-shadow: none; color: inherit; font: inherit; font-size: 16px; opacity: 0.9; }
.field input::placeholder, .field textarea::placeholder { color: inherit; opacity: 0.45; }
.field input:focus, .field textarea:focus, .field select:focus { background: transparent; box-shadow: none; border-bottom-color: currentColor; opacity: 1; }
.field textarea { flex-basis: 100%; min-height: 3.2rem; resize: vertical; }
.field select { flex: 0 1 11rem; appearance: none; cursor: pointer; }
.field select option { color: #000; }
.act { background: none; border: 0; padding: 0.35rem 0; font: inherit; font-size: 16px; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; }
.act[disabled] { opacity: 0.5; cursor: default; }
/* the answer fades in where the form was answered */
.msg { opacity: 0.6; margin: 1rem 0 0; font-size: 15px; letter-spacing: 0.004em; transition: opacity 0.5s var(--ease); }
@starting-style { .msg { opacity: 0; } }
.hp { position: absolute; left: -200vw; width: 1px; height: 1px; opacity: 0; }  /* the honeypot: off the page, never in the tab order */

.ways { list-style: none; margin: 2.4rem 0 0; padding: 0; max-width: 29rem; }
.ways li { margin: 0 0 1.4rem; font-size: 17px; line-height: 1.65; }
.ways b { font-weight: 400; font-style: italic; font-size: 1.15em; line-height: 1.45; }

footer { margin: 16vh 0 0; padding-bottom: 10vh; color: var(--quiet); }
footer a { color: var(--quiet); }

/* hover only where there is a pointer that hovers; touch keeps the press */
@media (hover: hover) and (pointer: fine) {
  a:hover { text-decoration-color: currentColor; color: inherit; }
  .hero .pillars a:hover { opacity: 0.7; }
  .meet:hover .meet-word { text-decoration-color: rgba(255,255,255,0.7); }
  .act:hover { text-decoration-thickness: 2px; }
  .follow:hover { border-color: rgba(255,255,255,0.5); }
  .follow:hover .follow-go { color: #fff; }
  .stack-nav a:not(.here):hover { color: var(--ink); }
  .site-nav a:hover { color: var(--ink); }
  .site-nav.dark a:hover { color: #fff; }
}

@media (max-width: 760px) {
  :root { --gutter: 28px; }
  .acc-chart { left: 20px; right: 20px; top: 24svh; height: 40svh; }
  .tick:not(.major) { display: none; }
  .acc-copy { top: 9vh; }
  .techs li { grid-template-columns: 1fr; }
  .k-claim + .k-claim { margin-top: 2.4rem; }
  .k-voice { margin-top: 4.8rem; }
  .k-copy { margin-top: 3.6rem; }
  .meet-note { min-height: 0; }
  .line { margin: 11vh 0; }
}
/* reduced motion: nothing travels. state still reads, through opacity alone */
@media (prefers-reduced-motion: reduce) {
  .logo .dot, .k-mark .dot, .one-logo .dot { animation: none; opacity: 1; }
  .hero .scene .sun { animation: none; transform: none; }
  .hero .scene .moon { animation: none; opacity: 0.92; }
  .js .line:not(.on), .line { transform: none; transition: none; }
  .ev, .acc-copy { opacity: 1; transform: none; transition: none; }
  .roll-w { transition: none; transform: none; filter: none; }
  .meet-dot, .meet-note, .meet-privacy { transition: none; }
  .meet-core svg, .meet.live .meet-core svg { transform: none; transition: opacity 200ms var(--ease); }
  /* nothing travels, but state still arrives: a short cross-fade in place of every move */
  html .k-voice, html .k-voice.wait { transform: none; transition: opacity 0.6s var(--ease); }
  .st, .st::after, .st-q, .st-name, .st-line { transition: none; transform: none; }
  .js details.fold > .in { transition: opacity 0.2s var(--ease); }
  .thesis summary::after { transition: none; }
  a, summary { transition: opacity 0.2s var(--ease); }
}
  /* the second couplet steps back: quiet sans, set to the right edge of the headline */
.k-aside { font-family: "Inter", "Helvetica Neue", sans-serif !important; font-size: 16px; line-height: 1.6; font-weight: 400; letter-spacing: 0.005em; color: rgba(255,255,255,0.56); text-align: right; max-width: 44rem; margin: 1.6rem 0 0; }
.k-aside > span { display: block; }
.k-aside > span + span { color: rgba(255,255,255,0.4); }
@media (max-width: 760px) { .k-aside { font-size: 15px; } }
/* holon: wholes within wholes, a silent loop behind the words, faded into the design system's dark blue */
#tokens { background: var(--night); }
.holon-stage { position: relative; min-height: 86svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: 14vh 0; }
.holon-stage .holon-bg { position: absolute; top: 0; bottom: 0; left: 38%; width: 62%; height: 100%; object-fit: cover; filter: brightness(0.7);   /* the network lives on the right; the words sit on clean night. 0.7 takes the clip's own ground (#212936) down to --night, so no box shows */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%), linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 34%), linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%); mask-composite: intersect; }
.holon-stage #holon { position: relative; z-index: 1; }
@media (max-width: 760px) {   /* phones: the words first, the network under them */
  .holon-stage { justify-content: flex-start; padding-bottom: 52svh; }
  .holon-stage .holon-bg { left: 0; width: 100%; top: auto; height: 56svh; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 75%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 75%, transparent 100%); }
}
.holon-stage #holon .big { text-shadow: 0 0 40px rgba(23,29,39,0.9); }
/* Scroll rearranges the original letters; brackets finish the thought last. */
#curve { color: var(--ink); }
#curve .p-main { stroke: var(--quiet); }
#curve .ev i { background: var(--quiet); }
#curve .acc-copy { margin-left: var(--gutter); padding: 0; top: 9vh; width: min(42rem, calc(100vw - var(--gutter) - 28px)); max-width: none; background: none; }
.acc-story { position: relative; font-family: var(--serif); font-size: clamp(32px, 4.2vw, 56px); line-height: 1.12; letter-spacing: -0.025em; }
.acc-source-later .acc-machine { font-family: inherit; font-size: 1em; font-weight: inherit; letter-spacing: inherit; }
.acc-source-later + .acc-source-later .acc-machine { color: inherit; }
.acc-source { margin: 0; font: inherit !important; letter-spacing: inherit; }
.acc-source + .acc-source { margin-top: 0.26em; }
.acc-source-later { position: absolute; inset: 0 auto auto 0; width: 100%; }
/* the second line speaks in sans, light and gray: "ai for a different nervous system." */
.acc-source-later + .acc-source-later { top: 5.2em; margin-top: 0; font-size: 0.56em !important; white-space: nowrap; color: var(--quiet-heavy); font-family: "Gilroy-ExtraBold", "Helvetica Neue", sans-serif !important; font-weight: 800 !important; letter-spacing: -0.02em; }   /* top in its own, smaller em: same place as 2.9em of the story */
@media (max-width: 760px) { .acc-source-later + .acc-source-later { font-size: 0.5em !important; top: 5.8em; } }
.acc-story { min-height: 4.2em; }
.acc-word { display: inline-block; white-space: nowrap; }
.acc-letter { display: inline-block; position: relative; transform-origin: top left; }
.acc-serif-face { display: inline-block; }
.acc-sans-face { position: absolute; left: 0; top: 0; font-family: "Gilroy-ExtraBold", "Helvetica Neue", sans-serif; font-weight: 800; opacity: 0; }
.acc-human { color: var(--ink); }
.acc-machine { color: var(--quiet); }
.acc-target { position: absolute; inset: 0 auto auto 0; display: flex; align-items: baseline; white-space: nowrap; gap: 0.14em; font-family: "Gilroy-ExtraBold", "Helvetica Neue", sans-serif; font-weight: 800; font-size: 1.28em; letter-spacing: -0.03em; }
.acc-target-word { display: inline-flex; }
.acc-target-word.acc-machine { font-family: inherit; font-size: 1em; font-weight: inherit; letter-spacing: inherit; }
.acc-plus { font-family: "Gilroy-ExtraBold", "Helvetica Neue", sans-serif; font-size: 0.62em; font-weight: 700; color: var(--sky-ink); align-self: center; }
.acc-bracket { font-family: "Gilroy-ExtraBold", "Helvetica Neue", sans-serif; font-size: 0.78em; font-weight: 800; color: var(--deep); }
.acc-bracket:first-child { margin-right: -0.06em; }
.acc-bracket:last-child { margin-left: -0.06em; }
.acc-target-letter { visibility: hidden; }
.acc-symbol { opacity: 0; }
.acc-story:not(.ready) .acc-source + .acc-source { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .acc-story:not(.ready) .acc-source { display: none; }
  .acc-story:not(.ready) .acc-target-letter { visibility: visible; }
  .acc-story:not(.ready) .acc-symbol { opacity: 1; }
}
/* meet k, round 3: a quieter headline, a larger left-set aside, the dot with what k is beside it */
.k-claim { font-size: clamp(30px, 3.6vw, 54px) !important; }
.k-aside { font-family: var(--serif) !important; font-size: clamp(30px, 3.6vw, 54px) !important; line-height: 1.06 !important; letter-spacing: -0.022em; text-align: left !important; max-width: none; margin-top: 3.4rem !important; color: #fff !important; text-wrap: balance; }
.k-aside > span + span { color: rgba(255,255,255,0.5) !important; font-family: var(--sans); letter-spacing: -0.03em; margin-top: 1.6em; }
.k-aside > .k-ours { color: rgba(255,255,255,0.46) !important; font-family: var(--serif); letter-spacing: -0.022em; margin-top: 0; }   /* the couplet's answer, in the claim's soft voice */
.k-aside > .k-sub { font-size: clamp(18px, 1.7vw, 24px); line-height: 1.4; letter-spacing: -0.01em; margin-top: 0.4em; }   /* what k is, then what it is for, each on its own line */
.k-aside > .k-sub + .k-sub { margin-top: 0.1em; }
.k-aside > .k-meet { margin-top: 3.6em; margin-bottom: 0.55em; }   /* meet k stands alone: wide air above, a clear breath before its lines */
.k-aside > .roll.k-sub { display: grid; }
.k-dot-row { display: flex; align-items: center; gap: 2rem; }
.k-dot-row .k-def { margin: 0; }
.k-def { font-family: "Inter", "Helvetica Neue", sans-serif !important; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; color: rgba(255,255,255,0.78); max-width: 22rem; margin: 1.8rem 0 0; }
@media (max-width: 760px) { .k-dot-row { gap: 1.2rem; } .k-def { font-size: 16px; } }
/* the dot waits for k's lines to finish, then arrives once */
#flourishing .k-voice { align-items: center; text-align: center; margin-right: var(--gutter); }
#flourishing .k-voice .meet { align-items: center; }
/* the privacy line: quiet subtext, set to the right */
#flourishing .meet-privacy { align-self: flex-end; text-align: right; max-width: 22rem; font-size: 12px; line-height: 1.5; color: rgba(255,255,255,0.32); margin-top: 2.4rem; }
#flourishing .meet-privacy.on { margin-top: 2.4rem; }
.k-voice.wait { opacity: 0; transform: translateY(10px); pointer-events: none; }
.k-voice { transition: opacity 1.4s var(--ease), transform 1.4s var(--ease); }
/* the form: two lines and the dot between them, centred */
.form-plain { display: flex; flex-direction: column; align-items: center; gap: 4.8rem; margin-top: 18vh; }
.form-line { margin: 0; padding: 0 28px; text-align: center; font-family: var(--serif); font-size: clamp(24px, 2.6vw, 40px); line-height: 1.12; letter-spacing: -0.018em; color: #fff; text-wrap: balance; }
.form-line .k-soft { font-style: italic; color: rgba(255,255,255,0.5); }
.form-plain .k-voice, #flourishing .form-plain .k-voice { margin: 0; }
.form-plain .meet-note { text-align: center; }
@media (max-width: 760px) { #flourishing .form-plain .k-voice { margin-right: 0; } #flourishing .form-plain .k-dot-row { flex-direction: column; gap: 1.4rem; } #flourishing .form-plain .k-def { text-align: center; max-width: 16rem; } }