/* Wonib website (October 2026). Motion is easy ease (owner's choice): --ease, in and out, no steps. Built on tokens.css: Paper and White, Ink for words, Lime for the one live thing,
   Instrument Sans for words and IBM Plex Mono for numbers. Everything on 16 px; square blocks; steps, not glides.
   */
html { scroll-behavior: auto; }
:root { --ease: cubic-bezier(0.33, 0, 0.67, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --site-w: 1392px; --site-pad: 24px; }
/* Type and spacing scale with the screen: 15 px on a small phone, 17 px on a laptop, up to 24 px on a TV. */
/* The website is always light; it no longer loads pages.css or theme.js (the app's appearance choice is the app's). */
.site { color-scheme: light; }
.site b, .site strong { font-weight: 600; } /* no 700 on the website: one font file fewer */
.site { font-size: clamp(15px, 0.35vw + 13px, 24px); }
.site { margin: 0; background: var(--wn-paper); color: var(--wn-ink); font-family: var(--wn-font); font-weight: 400; line-height: 1.55; -webkit-font-smoothing: antialiased; padding-left: env(safe-area-inset-left, 0); padding-right: env(safe-area-inset-right, 0); overflow-x: clip; }
.site a { color: inherit; }
.site :focus-visible { outline: 2px solid var(--wn-ink); outline-offset: 2px; }
.mono { font-family: var(--wn-mono); font-variant-numeric: tabular-nums; }
/* Below-the-fold sections are laid out only as they come near (owner, 27 Oct 2026, phones): the browser skips their
   layout at load. Scroll-driven sections (zoom, the week, the voice) stay out of this, they measure their own boxes. */
.site :is(.how, .live, .agencies, .plans-section, .plans-teaser, .faq, .values, .cta, .story, .feature) { content-visibility: auto; contain-intrinsic-size: auto 800px; }
/* Hierarchy (owner, 26 Oct 2026): one type scale, in em of the page size (15–24 px), so every level keeps its place on
   every screen. Eyebrow (the kicker: mono, caps, Ink, a block before it) → h2 → lead → body → small. */
.site { --t-eyebrow: clamp(13px, 0.8em, 17px); --t-small: clamp(14px, 0.875em, 18px); --t-lead: clamp(18px, 1.2em, 25px); --t-h3: clamp(19px, 1.3em, 27px); --t-h2: clamp(30px, 2.3em + 0.8vw, 64px); --t-stat: clamp(40px, 3.2em, 80px); }
.small { font-size: var(--t-small); line-height: 1.5; color: var(--wn-slate); }
.kicker { margin: 0 0 20px; display: inline-flex; align-items: center; gap: 10px; font: 500 var(--t-eyebrow)/1.3 var(--wn-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--wn-ink); }
.kicker::before { content: ''; flex: none; width: 0.6em; height: 0.6em; background: currentColor; }
.site h1, .site h2, .site h3 { margin: 0; font-weight: 600; letter-spacing: -0.025em; text-wrap: balance; }
.site h1 { font-size: clamp(36px, 7.5vw, 9em); line-height: 0.95; letter-spacing: -0.04em; overflow-wrap: anywhere; }
.site h2 { font-size: var(--t-h2); line-height: 1.04; letter-spacing: -0.03em; max-width: 22ch; }
.site h3 { font-size: var(--t-h3); line-height: 1.2; letter-spacing: -0.015em; }
.lead { font-size: var(--t-lead); line-height: 1.45; max-width: 44ch; color: var(--wn-ink); text-wrap: pretty; }
/* The run from heading to content: 16 px heading → lead or note, 40 px before the section's grid. */
.site section > h2 + .lead, .site section > h2 + .example, .site section > h2 + p.small, .cta h2 + .lead { margin-top: 16px; }
.site .tiles, .site .grid4, .site .steps3, .site .numgrid, .site .chapters, .site .teaser, .site .accordion, .site .about-grid { margin-top: 40px; }
.cta h2, .zoom-caption h2 { margin-left: auto; margin-right: auto; }
.big { font: 600 clamp(28px, 4vw, 56px)/1.1 var(--wn-font); letter-spacing: -0.03em; margin: 0; }
.site section { padding: 64px var(--site-pad); max-width: var(--site-w); margin: 0 auto; box-sizing: border-box; }
@media (max-width: 760px) { .site section { padding: 48px 16px; } }
/* Buttons (owner, 26 Oct 2026): every button fills Lime on hover with Ink text, the same for all. On Paper and White a
   button is White with an Ink hairline (primary: Ink with Paper text); on Ink and Deep the primary is Paper with Ink text
   and the secondary is a Paper outline, so no button can sink into its surface. The Lime button (the one Lime thing on a
   page) fills Ink. */
.site .btn { will-change: background-position; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 12px 18px; border: 0; font: 500 var(--t-small)/20px var(--wn-font); text-decoration: none; cursor: pointer; white-space: nowrap; background-color: var(--wn-white); color: var(--wn-ink); box-shadow: inset 0 0 0 1px var(--wn-line-strong); background-image: var(--wn-wipe-lime); background-size: 220% 100%; background-repeat: no-repeat; background-position: 100% 0; transition: background-position 700ms cubic-bezier(.65, 0, .35, 1), color 300ms cubic-bezier(.65, 0, .35, 1) 150ms; }
.site button.btn { box-sizing: content-box; }
.site .btn[hidden] { display: none; }
.site { --wn-wipe-paper: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20220%2040%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20fill=%22%23F5F4EC%22%20d=%22M0%200H112V10H108V20H104V30H100V40H0Z%20M114%2010h4v10h-4z%20M109%2020h4v10h-4z%20M106%2030h4v10h-4z%22/%3E%3C/svg%3E"); }
.site .btn:is(:hover, :focus-visible) { background-position: 0 0; color: var(--wn-on-lime); box-shadow: none; }
.site .btn.primary { background-color: var(--wn-ink); color: var(--wn-paper); box-shadow: none; }
.site .btn.primary:is(:hover, :focus-visible) { color: var(--wn-on-lime); }
.site .btn.lime { background-color: var(--wn-lime); color: var(--wn-on-lime); box-shadow: none; background-image: var(--wn-wipe-strong); }
.site .btn.lime:is(:hover, :focus-visible) { color: var(--wn-paper); }
.site :is(.hero.cine, .ink, .agencies, .plan.ink, .tile.ink) .btn.primary { background-color: var(--wn-paper); color: var(--wn-ink); }
.site :is(.hero.cine, .ink, .agencies, .plan.ink, .tile.ink) .btn.secondary { background-color: transparent; color: var(--wn-paper); box-shadow: inset 0 0 0 1px rgba(245, 244, 236, 0.55); }
.site :is(.hero.cine, .ink, .agencies, .plan.ink, .tile.ink) .btn:is(:hover, :focus-visible) { color: var(--wn-on-lime); box-shadow: none; }
/* The Lime button on an Ink surface fills Paper (it filled Ink, and vanished into the section). */
.site :is(.hero.cine, .ink, .agencies, .plan.ink, .tile.ink) .btn.lime { background-image: var(--wn-wipe-paper); }
.site :is(.hero.cine, .ink, .agencies, .plan.ink, .tile.ink) .btn.lime:is(:hover, :focus-visible) { color: var(--wn-ink); }
.site .card.lime .btn { background-image: var(--wn-wipe-strong); } .site .card.lime .btn:is(:hover, :focus-visible) { color: var(--wn-paper); }
/* Top bar */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 32px; min-height: 64px; padding: env(safe-area-inset-top, 0) var(--site-pad) 0; background: var(--wn-white); border-bottom: 1px solid var(--wn-line); }
.logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; min-height: 44px; }
.word { display: inline-block; width: 80px; height: 22px; vertical-align: middle; color: inherit; }
.menu { display: flex; gap: 24px; }
.menu a, .acts .login { text-decoration: none; font: 500 var(--t-small)/20px var(--wn-font); padding: 8px 0; border-bottom: 2px solid transparent; transition: border-color 300ms var(--ease); }
.menu a[aria-current="page"], .menu a:hover, .acts .login:hover { border-bottom-color: var(--wn-ink); }
@media (min-width: 1100px) { .top .menu a[aria-current="page"], .top .menu a:hover, .top .acts .login:hover { border-bottom-color: transparent; } }
.acts { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.burger { display: none; margin-left: auto; width: 44px; height: 44px; border: 0; background: transparent; flex-direction: column; justify-content: center; gap: 5px; align-items: center; cursor: pointer; }
.burger i { display: block; width: 22px; height: 2px; background: var(--wn-ink); }
@media (max-width: 1100px) {
  .menu, .acts { display: none; }
  .burger { display: flex; }
  .top.open { flex-wrap: wrap; height: auto; padding-bottom: 16px; }
  .top.open .menu, .top.open .acts { display: flex; flex-direction: column; align-items: stretch; width: 100%; gap: 8px; margin: 0; }
  .top.open .menu a, .top.open .acts a { padding: 12px 0; min-height: 44px; box-sizing: border-box; display: flex; align-items: center; }
}
/* Hero: the promise, with one word swiping up and the limit counting. */
.hero { position: relative; overflow: hidden; padding-top: 96px; padding-bottom: 96px; min-height: 70vh; display: flex; flex-direction: column; justify-content: center; }
.hero h1 { max-width: 14ch; position: relative; z-index: 1; }
.hero .lead { margin: 32px 0 0; position: relative; z-index: 1; }
.hero-acts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; position: relative; z-index: 1; }
.flip { display: inline-block; position: relative; padding: 0.06em 0.14em 0.04em; margin: -0.06em 0 -0.04em; line-height: 1.12; background: var(--wn-lime); color: var(--wn-on-lime); vertical-align: top; overflow: hidden; will-change: transform; max-width: 100%; white-space: nowrap; box-sizing: content-box; text-align: left; }
/* The headline is always three lines, so the flipping word never moves the others. */
[data-kinetic] .line { display: block; }
/* The word in the Lime block swipes up (owner, 26 Oct 2026): the old word leaves upward, the new one rises in from
   below, inside the block. The block keeps the width of the widest word, so the headline never moves. */
.flip-word { display: inline-block; backface-visibility: hidden; }
.flip.out .flip-word { animation: flip-out 420ms var(--ease) forwards; }
.flip.in .flip-word { animation: flip-in 700ms var(--ease-out) forwards; }
@keyframes flip-out { to { transform: translate3d(0, -110%, 0); } }
@keyframes flip-in { from { transform: translate3d(0, 110%, 0); } to { transform: none; } }
.dust { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
[data-kinetic] .line { display: inline-block; }
.hero h1[data-kinetic] .line, .hero h1[data-chars] .line { display: block; } /* the promise is three lines from the first paint, so the Lime word cannot jump to its own line when the fonts arrive */
.site.js [data-kinetic]:not(.on) { opacity: 0; } /* opacity, not visibility: screen readers must still find every heading */
.site.js [data-kinetic] .kw { display: inline-block; clip-path: inset(-0.4em -0.15em -0.3em -0.15em); vertical-align: top; }
.site.js [data-kinetic] .k { display: inline-block; transform: translate3d(0, 130%, 0); opacity: 0; backface-visibility: hidden; }
.site.js [data-kinetic].on .k { animation: rise 1100ms var(--ease-out) both; animation-delay: calc(var(--i) * 55ms); will-change: transform, opacity; }
@keyframes rise { 0% { opacity: 0; transform: translate3d(0, 130%, 0); } 35% { opacity: 1; } 100% { opacity: 1; transform: translate3d(0, 0, 0); } }
.limit { position: relative; z-index: 1; margin-top: 64px; max-width: 420px; display: flex; flex-direction: column; gap: 8px; }
.limit-row { display: flex; justify-content: space-between; font: 500 13px/16px var(--wn-mono); color: var(--wn-slate); }
.stepbar { height: 16px; background: var(--wn-white); display: flex; overflow: hidden; }
.stepbar i { display: block; height: 100%; width: var(--w, 0); background: var(--wn-ink); transform-origin: left; transform: scaleX(0); transition: transform 1.8s var(--ease-out); }
.stepbar.on i { transform: scaleX(1); }
/* The stair: where two surfaces meet, they meet in steps. */
/* Cards, tiles, grids */
.card { background: var(--wn-white); padding: 32px; box-sizing: border-box; }
.card.ink, .tile.ink, section.ink { background: var(--wn-deep); color: var(--wn-on-deep); }
.card.lime { background: var(--wn-lime); color: var(--wn-on-lime); }
.steps3 { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.steps3 li { display: flex; flex-direction: column; gap: 12px; min-height: 280px; } .steps3 h3 { margin: 0; }
.steps3 .num { font: 500 var(--t-eyebrow)/1.3 var(--wn-mono); letter-spacing: 0.08em; color: var(--wn-ink); }
.steps3 p { margin: 0; }
.blocks { margin-top: auto; display: flex; gap: 4px; }
.blocks i { width: 16px; height: 16px; background: var(--wn-paper); }
.reveal.in .blocks i { background: var(--wn-lime); animation: fillin 600ms var(--ease) both; animation-delay: calc(var(--i, 0) * 140ms); }
@keyframes fillin { from { background: var(--wn-paper); transform: scaleY(0.2); } to { background: var(--wn-lime); transform: none; } }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(236px, auto); gap: 16px; margin-top: 32px; }
.tile { position: relative; overflow: hidden; background: var(--wn-white); padding: 24px 24px 112px; box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; }
.tile.wide { grid-column: span 2; }
.tile.review { grid-column: 4; grid-row: 1 / span 2; }
.tile h3 { margin: 0; }
.tile .face { margin: 0; position: absolute; left: 24px; right: 24px; bottom: 24px; max-height: 72px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; transition: transform 1000ms var(--ease-out), opacity 600ms var(--ease-out); will-change: transform, opacity; backface-visibility: hidden; }
.tile .face.b { font: 600 56px/1 var(--wn-mono); letter-spacing: -0.03em; transform: translate3d(0, 110%, 0); opacity: 0; }
.tile.flipped .face.a { transform: translate3d(0, -110%, 0); opacity: 0; }
.tile.flipped .face.b { transform: translate3d(0, 0, 0); opacity: 1; }
.tile .face.a { font-size: var(--t-small); line-height: 1.45; color: var(--wn-slate); max-height: calc(3 * 1.45em); }
.tile.ink .face.a { color: rgba(245, 244, 236, 0.75); }
.tile.ink .pi, .card.ink .pi { color: var(--wn-lime); }
.tile.review { padding-bottom: 24px; min-height: 236px; height: auto; } .tile.review p { margin: 0; position: static; display: block; max-height: none; }
.checks { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.checks li { display: flex; align-items: center; gap: 10px; font-size: var(--t-small); }
.checks .pi { color: var(--wn-lime); flex: none; }
.plan .checks .pi { color: var(--wn-ink); } .plan.ink .checks .pi { color: var(--wn-lime); }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.grid4 .card { display: flex; flex-direction: column; gap: 12px; min-height: 220px; } .grid4 .card .pi { margin-bottom: 8px; } .grid4 .card p { margin: 0; color: var(--wn-slate); font-size: var(--t-small); } .grid4 h3 { margin: 0; }
/* The voice section (owner, 26 Oct 2026, after annnimate.com's "Inline Image Headline", written from scratch, no GSAP):
   the four lines rise in one after another; then a pill-shaped photo opens inside each line, pushing the words apart. */
/* With scripts, a slot starts closed and opens once the lines are in; the open state carries the transition, so nothing animates on load. */
.agencies { position: relative; overflow: hidden; }
.agencies .lead { color: var(--wn-on-deep); }
.agencies .kicker { color: rgba(245, 244, 236, 0.9); }
.agencies > * { position: relative; }
.agencies { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.agencies-photo { margin: 0; } .agencies-photo img { width: 100%; height: auto; display: block; }
.band { margin: 0 auto; max-width: var(--site-w); padding: 0 var(--site-pad); box-sizing: border-box; } .band img { width: 100%; height: auto; display: block; }
@media (max-width: 1100px) { .agencies { grid-template-columns: minmax(0, 1fr); } }
.agencies .btn { margin-top: 24px; }
.cta { text-align: center; } .cta .lead { margin: 16px auto 0; } .cta .hero-acts { justify-content: center; }
/* Product */
.head { padding-top: 96px; }
.head .lead { margin-top: 24px; }
.feature-list { display: flex; flex-direction: column; gap: 16px; }
.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.feature.swap .feature-art { order: 2; }
.feature-art { position: relative; align-self: center; background: var(--wn-white); overflow: hidden; }
.feature-art .pi { position: relative; color: var(--wn-ink); transition: transform 550ms var(--ease); }
.feature.in .feature-art .pi { animation: rise 800ms var(--ease-out) both; }
.feature-text { background: var(--wn-white); padding: 32px; display: flex; flex-direction: column; gap: 12px; }
.feature-text .num { font: 500 var(--t-eyebrow)/1.3 var(--wn-mono); letter-spacing: 0.08em; color: var(--wn-ink); }
.feature-text p { margin: 0; }
/* Pricing */
/* Pricing (owner, 26 Oct 2026, after annnimate.com's "Pricing", written from scratch): five currencies and an own-keys
   switch; every price rolls to its new number digit by digit, a chip pops in, and each plan name carries a slow sheen. */
.plans-section { padding-top: 0; }
.switchbar { position: sticky; top: 64px; z-index: 5; background: var(--wn-paper); padding: 16px 0; margin-bottom: 16px; }
.switches { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
@media (max-width: 760px) { .switchbar { position: static; } }
.currency { display: inline-flex; flex-wrap: wrap; }
.cur { min-height: 44px; padding: 12px 16px; border: 0; background: var(--wn-white); color: var(--wn-ink); font: 500 14px/20px var(--wn-mono); cursor: pointer; transition: background 300ms var(--ease), color 300ms var(--ease); }
.cur.on { background: var(--wn-ink); color: var(--wn-paper); }
.own-switch { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 16px 8px 8px; border: 0; background: var(--wn-white); color: var(--wn-ink); font: 500 14px/20px var(--wn-mono); cursor: pointer; }
.own-switch .knob { position: relative; width: 36px; height: 20px; border-radius: 999px; background: var(--wn-line-strong); transition: background 300ms var(--ease); }
.own-switch .knob::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--wn-white); transition: transform 300ms var(--ease); }
.own-switch[aria-checked="true"] .knob { background: var(--wn-ink); } .own-switch[aria-checked="true"] .knob::after { transform: translateX(16px); }
.rate-note { margin: 10px 0 0; color: var(--wn-slate); max-width: 70ch; }
.price .sym { display: inline-block; transition: transform 240ms var(--ease), opacity 240ms var(--ease); } .price .sym.swap { transform: translateY(-0.35em); opacity: 0; }
.price .roll { display: inline-flex; height: 1em; overflow: hidden; vertical-align: top; }
.price .col { display: inline-block; width: 1ch; height: 1em; overflow: hidden; transition: width 500ms var(--ease); }
.price .col.blank { width: 0; }
.price .stack { display: block; transform: translate3d(0, calc(var(--k, 0) * -1em), 0); transition: transform 800ms var(--ease) calc(var(--j, 0) * 45ms); }
.price .stack i { display: block; height: 1em; font-style: normal; }
.plan .per { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-height: 22px; }
.chip { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--wn-ink); color: var(--wn-paper); font: 500 12px/18px var(--wn-mono); transform: scale(0.6); opacity: 0; transition: transform 500ms var(--ease-out), opacity 300ms var(--ease); }
.chip.on { transform: none; opacity: 1; } .plan.ink .chip { background: var(--wn-paper); color: var(--wn-ink); }
.shimmer { position: relative; display: inline-block; }
.shimmer .sheen { position: absolute; inset: 0; color: transparent; pointer-events: none; background: linear-gradient(100deg, transparent 42%, rgba(103, 118, 112, 0.55) 50%, transparent 58%) 0 0 / 300% 100% no-repeat; -webkit-background-clip: text; background-clip: text; animation: sheen 5s var(--ease) infinite; }
.plan.ink .shimmer .sheen { background-image: linear-gradient(100deg, transparent 42%, rgba(245, 244, 236, 0.5) 50%, transparent 58%); }
@keyframes sheen { 0% { background-position: 100% 0; } 55%, 100% { background-position: -100% 0; } }
/* The plan cards share one set of rows (subgrid, owner 27 Oct 2026), so names, prices, lines, facts and buttons sit on the
   same lines across the row whatever wraps; each row has its own breathing space. */
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; gap: 16px; scroll-margin-top: 160px; }
.plan { display: grid; grid-row: span 8; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
.plan > h2 { grid-row: 1; margin: 0; }
.plan > .tagline { grid-row: 2; margin: 8px 0 0; }
.plan > .price { grid-row: 3; margin: 28px 0 0; align-self: end; }
.plan > .per { grid-row: 4; margin: 10px 0 0; }
.plan > .own { grid-row: 5; margin: 6px 0 0; }
.plan > .facts { grid-row: 6; margin: 24px 0 0; }
.plan > .checks { grid-row: 7; margin: 24px 0 0; }
.plan > .btn { grid-row: 8; margin: 32px 0 0; justify-self: start; }
.plan .price.talk { font-size: clamp(28px, 2em, 40px); line-height: 1.1; }
.chip { white-space: nowrap; }
@media (max-width: 1280px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .plans { grid-template-columns: minmax(0, 1fr); } }
@supports not (grid-template-rows: subgrid) { .plan { display: flex; flex-direction: column; } .plan > .btn { margin-top: auto; } }
.plan .price { font: 600 clamp(40px, 3em, 64px)/1 var(--wn-mono); letter-spacing: -0.03em; }
.plan.ink .small { color: rgba(245, 244, 236, 0.7); }
.facts { list-style: none; margin: 16px 0 0; padding: 16px 0; border-top: 1px solid var(--wn-line); border-bottom: 1px solid var(--wn-line); display: flex; flex-direction: column; gap: 4px; font-size: var(--t-small); }
.plan.ink .facts { border-color: rgba(245, 244, 236, 0.2); }

/* FAQ accordion (owner, 26 Oct 2026, after annnimate.com's "Accordion", written from scratch, no GSAP): one open at a
   time; the panel's height eases (grid rows 0fr → 1fr), the plus turns into a minus, the answer arrives line by line. */
.accordion { margin-top: 24px; }
.acc { background: var(--wn-white); margin-top: 8px; }
.acc-h { margin: 0; font-size: 1em; }
.acc-btn { width: 100%; min-height: 44px; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; border: 0; background: none; color: inherit; font: 600 clamp(17px, 1.05em, 22px)/1.4 var(--wn-font); text-align: left; cursor: pointer; }
.acc-btn:focus-visible { outline: 2px solid var(--wn-ink); outline-offset: -2px; }
.acc-ico { position: relative; flex: none; width: 16px; height: 16px; }
.acc-ico::before, .acc-ico::after { content: ''; position: absolute; left: 0; top: 7px; width: 16px; height: 2px; background: currentColor; transition: transform 500ms var(--ease); }
.acc-ico::after { transform: rotate(90deg); }
.acc.open .acc-ico::before, .acc.open .acc-ico::after { transform: rotate(180deg); }
.acc-panel { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 600ms var(--ease), visibility 0s linear 600ms; }
.acc.open .acc-panel { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 600ms var(--ease), visibility 0s; }
.acc-inner { min-height: 0; overflow: hidden; }
.acc-inner p { margin: 0; padding: 0 24px 24px; }
.site.js .awm { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.site.js .aw { display: inline-block; transform: translate3d(0, 110%, 0); opacity: 0; }
.site.js .acc.open .aw { transform: none; opacity: 1; transition: transform 600ms var(--ease-out) calc(120ms + var(--l, 0) * 70ms), opacity 400ms var(--ease-out) calc(120ms + var(--l, 0) * 70ms); }
/* About, contact, legal */
.about-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; counter-reset: none; }
.about-grid .card { display: flex; flex-direction: column; gap: 12px; min-height: 240px; } .about-grid .card p { margin: 0; }
.about-grid .num { font: 500 var(--t-eyebrow)/1.3 var(--wn-mono); letter-spacing: 0.08em; } .about-grid h3 { margin: 4px 0 0; }
.about-grid .traits { font: 600 clamp(24px, 2em, 44px)/1.1 var(--wn-font); letter-spacing: -0.03em; margin: 4px 0 8px; }
.about-grid .card { transition: background 400ms var(--ease), color 400ms var(--ease); }
.about-grid .card:is(:hover, :focus-within) { background: var(--wn-lime); color: var(--wn-on-lime); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; }
.contact-form { display: flex; flex-direction: column; gap: 16px; }
.contact-form label { display: flex; flex-direction: column; gap: 6px; font: 600 13px/18px var(--wn-font); }
.contact-form input, .contact-form textarea { font: 400 16px/1.4 var(--wn-font); padding: 12px; border: 1px solid var(--wn-line-strong); background: var(--wn-paper); color: var(--wn-ink); border-radius: 0; }
.contact-form .hp { position: absolute; left: -9999px; }
.contact-form .btn { align-self: flex-start; }
.form-msg { margin: 0; min-height: 1.4em; }
/* Contact as a multi-step form (owner, 26 Oct 2026, after annnimate.com's "Multi-Step Form", written from scratch): three
   steps, a block progress bar, Back and Next; a step slides out to the left and the next slides in from the right. Without
   scripts the whole form shows at once. */
.steps-bar { display: flex; align-items: center; gap: 12px; margin: 0; }
.steps-bar .mono { font-size: var(--t-eyebrow); letter-spacing: 0.08em; text-transform: uppercase; }
.steps-bar .pips { display: flex; gap: 6px; } .steps-bar .pips i { display: block; width: 24px; height: 8px; background: var(--wn-line); transition: background 400ms var(--ease); } .steps-bar .pips i.on { background: var(--wn-ink); }
.step { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.step legend { padding: 0; font-weight: 600; font-size: var(--t-h3); margin-bottom: 8px; }
.steps-track { position: relative; overflow: hidden; }
.steps-track .step:not(:first-child) { display: none; } .step-nav [type="submit"] { display: none; } /* from the first paint, so nothing jumps when the script arrives */
.site.js .steps-track .step { display: none; }
.site.js .steps-track .step.on { display: flex; animation: step-in 520ms var(--ease-out) both; }
.site.js .steps-track .step.on.back { animation-name: step-in-back; }
.site.js .step-nav [type="submit"]:not([hidden]) { display: inline-flex; }
@keyframes step-in { from { transform: translate3d(40px, 0, 0); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes step-in-back { from { transform: translate3d(-40px, 0, 0); opacity: 0; } to { transform: none; opacity: 1; } }
.step-nav { display: flex; gap: 12px; align-items: center; }

.summary { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .summary li { display: grid; grid-template-columns: minmax(0, 1fr) 2fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--wn-line); } .summary li:last-child { border-bottom: 1px solid var(--wn-line); } .summary b { font-weight: 600; } .summary span { overflow-wrap: anywhere; }
.contact-grid aside p { margin: 12px 0 0; }
.legal h2 { font-size: clamp(20px, 1.3em, 28px); margin-top: 40px; }
.legal p { max-width: 70ch; }
/* Footer */
.foot { border-top: 1px solid var(--wn-line); padding: 48px var(--site-pad) calc(48px + env(safe-area-inset-bottom, 0)); max-width: var(--site-w); margin: 0 auto; box-sizing: border-box; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; }
.foot-brand .word { display: block; }
.foot .tag { margin: 16px 0 4px; font-weight: 600; }
.foot-links { display: flex; flex-direction: column; gap: 8px; } .foot-links a { text-decoration: none; }
.foot-links a:hover { text-decoration: underline; }
/* Reveal on scroll: steps in, then stays. */
.site.js .reveal { opacity: 0; transform: translateY(24px); will-change: transform, opacity; }
.site.js .reveal.in { opacity: 1; transform: translate3d(0, 0, 0); transition: opacity 900ms var(--ease-out), transform 1100ms var(--ease-out); }
/* Phones and tablets */
@media (max-width: 1100px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tile.review { grid-column: 1 / -1; grid-row: auto; } .grid4, .plans, .about-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .steps3, .tiles, .grid4, .plans, .about-grid, .contact-grid, .feature, .foot-grid { grid-template-columns: minmax(0, 1fr); } .tile.wide { grid-column: auto; } .feature.swap .feature-art { order: 0; } .hero { min-height: auto; padding-top: 64px; } .top { gap: 16px; } }
@media (prefers-reduced-motion: reduce) { .site *, .site *::before, .site *::after { animation: none !important; transition: none !important; } .site.js [data-kinetic]:not(.on) { opacity: 1; } .site.js [data-kinetic] .k { transform: none; opacity: 1; } .site.js .reveal { opacity: 1; transform: none; } .site.js .aw { transform: none; opacity: 1; } .shimmer .sheen { display: none; } .tile .face.b { display: none; } .stepbar i { transform: none; } }

/* The Get started pop-up: one choice at a time. */
.start { border: 0; padding: 32px; width: min(440px, calc(100vw - 32px)); max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto; box-sizing: border-box; background: var(--wn-white); color: var(--wn-ink); position: relative; }
.start::backdrop { background: rgba(18, 46, 39, 0.6); }
.start h2 { font-size: clamp(24px, 1.6em, 32px); margin: 0 0 8px; width: calc(100% - 56px); } .start > p { margin: 0 0 24px; }
.start-close { position: absolute; top: 12px; right: 12px; margin: 0; }
.start-close .x { width: 44px; height: 44px; border: 0; background: var(--wn-paper); font: 500 20px/1 var(--wn-mono); cursor: pointer; color: var(--wn-ink); transition: background 300ms var(--ease), color 300ms var(--ease), transform 400ms var(--ease); }
.start-close .x:is(:hover, :focus-visible), .book-x:is(:hover, :focus-visible) { background: var(--wn-ink); color: var(--wn-paper); transform: rotate(90deg); }
.providers { display: flex; flex-direction: column; gap: 8px; } .providers .btn { width: 100%; justify-content: center; }
.start .or { text-align: center; margin: 16px 0; font-size: var(--t-small); color: var(--wn-slate); }
.start-email { display: flex; flex-direction: column; gap: 12px; } .start-email label { display: flex; flex-direction: column; gap: 6px; font: 600 13px/18px var(--wn-font); }
.start-email input { font: 400 16px/1.4 var(--wn-font); padding: 12px; border: 1px solid var(--wn-line-strong); background: var(--wn-paper); color: var(--wn-ink); border-radius: 0; }
.start .form-msg { margin: 12px 0 0; }
/* By the numbers: true because they are capabilities. */
.numbers { margin-top: 40px; } .numbers .example { margin: 0 0 12px; }
.numgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.numgrid li { display: flex; flex-direction: column; gap: 6px; padding: 20px; }
.numgrid .n { font: 600 clamp(32px, 2.4em, 56px)/1 var(--wn-mono); letter-spacing: -0.03em; } .numgrid .t { font-size: var(--t-small); color: var(--wn-ink); }
.live .example { margin: 16px 0 0; }
/* The story */
.story { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 32px; }
.story .kicker { grid-column: 1 / -1; margin: 0; }
.story-text p { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; margin: 0 0 24px; text-wrap: pretty; }
.story-text p:first-child::first-letter { font: 600 3.2em/0.8 var(--wn-font); float: left; margin: 0.08em 0.08em 0 0; }
.instance { align-self: start; position: sticky; top: 96px; display: flex; flex-direction: column; gap: 12px; }
.instance .kicker { color: rgba(245, 244, 236, 0.9); margin: 0; } .instance h2 { font-size: clamp(22px, 1.5em, 32px); } .instance p { margin: 0; }
.foot-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
@media (max-width: 1100px) { .numgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .story { grid-template-columns: minmax(0, 1fr); } .instance { position: static; } }
@media (max-width: 760px) { .numgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-grid { grid-template-columns: minmax(0, 1fr); } }

/* Every size (owner, 27 Oct 2026). Phones in landscape, tablets, laptops, large monitors and TVs. */
@media (max-width: 480px) { :root { --site-pad: 16px; } .hero { padding-top: 48px; padding-bottom: 48px; } .hero-acts .btn { width: 100%; } .cta .hero-acts .btn { width: auto; } .tiles { grid-auto-rows: minmax(220px, auto); } .numgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .numgrid .n { font-size: 36px; } .plan .price { font-size: 44px; } .start { padding: 24px; } }
@media (max-height: 520px) and (orientation: landscape) { .hero { min-height: auto; padding-top: 32px; padding-bottom: 32px; } .limit { margin-top: 32px; } }
@media (min-width: 761px) and (max-width: 1100px) { .plans { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin-left: auto; margin-right: auto; } .steps3 li { min-height: 240px; } }
@media (min-width: 1800px) { :root { --site-w: 1720px; --site-pad: 48px; } .tiles { grid-auto-rows: minmax(280px, auto); } }
@media (min-width: 2400px) { :root { --site-w: 2200px; --site-pad: 64px; } .tiles { grid-auto-rows: minmax(340px, auto); } .word { width: 102px; height: 28px; } .menu a, .acts .login { font-size: 1.05em; } .site .btn { font-size: 1em; min-height: 56px; padding: 16px 24px; } }
@media (hover: none) and (pointer: coarse) { .site .btn, .menu a, .cur, .faq summary, .foot-links a { min-height: 44px; } .foot-links a { display: inline-flex; align-items: center; } .tile .face { transition-duration: 500ms; } }
@media (prefers-contrast: more) { .site .btn.primary { outline: 2px solid var(--wn-ink); outline-offset: -2px; } }
@media print { .top, .foot, .start, .hero-acts, .cta { display: none; } .site { background: #fff; } .card, .tile { border: 1px solid #ccc; } }

/* Cinematic (owner, 27 Oct 2026): a full-bleed hero with the media behind an Ink panel, parallax layers, reveals that
   fade and rise, a lightbox gallery, a sticky bar after the hero. */
.site section.hero.cine { max-width: none; padding: 0; width: 100%; min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; background: var(--wn-deep); color: var(--wn-on-deep); overflow: hidden; }
/* The panel sits at a top margin worked out from the viewport alone (roughly centring a 900 px panel), not centred in
   the hero: when the fonts arrive the panel grows a little, and centring moved it, a 0.3 layout shift. */
.hero.cine .hero-panel { margin-top: clamp(0px, calc(50svh - 470px), 30vh); }
.hero-media { position: absolute; top: -40vh; left: 0; right: 0; height: calc(152vh + 240px); /* sized in vh, not %: when the fonts arrive the hero grows a little, and a picture sized from the hero's height grew with it, which counted as a 0.3 layout shift. The hero clips the extra. */ z-index: 0; will-change: transform; backface-visibility: hidden; }
.hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; object-position: 72% center; display: block; }
@media (min-width: 1600px) { .hero-media img, .hero-media video { object-fit: contain; object-position: right center; } }
@media (max-width: 760px) { .hero-media img, .hero-media video { object-position: 80% center; } }
.hero-panel { position: relative; z-index: 1; margin: 0 auto; width: 100%; max-width: var(--site-w); padding: 112px var(--site-pad) 96px; box-sizing: border-box; will-change: transform; }
.hero-panel > * { position: relative; }
.hero-panel::before { content: ''; position: absolute; left: calc(var(--site-pad) - 32px); right: 44%; top: 80px; bottom: 64px; background: var(--wn-deep); opacity: 0.94; z-index: -1; }
.hero.cine h1, .hero.cine .lead { color: var(--wn-on-deep); }
.hero.cine .kicker { color: rgba(245, 244, 236, 0.9); }
.hero.cine .limit-row, .hero.cine .limit .small { color: rgba(245, 244, 236, 0.7); }
.hero.cine .stepbar { background: rgba(245, 244, 236, 0.18); } .hero.cine .stepbar i { background: var(--wn-paper); }
.scroll-cue { position: absolute; z-index: 1; right: var(--site-pad); bottom: 24px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px; color: rgba(245, 244, 236, 0.8); text-decoration: none; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }
.scroll-cue svg { animation: cue 1.8s var(--ease) infinite; }
@keyframes cue { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
/* Reveals: fade and rise, with a gentle stagger inside grids. */
.site.js .reveal { transform: translate3d(0, 32px, 0); backface-visibility: hidden; }
.site.js :is(.tiles, .grid4, .steps3, .plans, .about-grid, .numgrid) > .reveal.in:nth-child(2) { transition-delay: 80ms; }
.site.js :is(.tiles, .grid4, .steps3, .plans, .about-grid, .numgrid) > .reveal.in:nth-child(3) { transition-delay: 160ms; }
.site.js :is(.tiles, .grid4, .steps3, .plans, .about-grid, .numgrid) > .reveal.in:nth-child(4) { transition-delay: 240ms; }
/* The gallery */
/* A week with Wonib as a horizontal case study (owner, 27 Oct 2026, after annnimate.com's "Horizontal Case Study",
   written from scratch): the section pins and scrolling down walks sideways along a strip: an intro, five day panels
   whose two stills hang from one top hairline at different heights, and a closing line. Each panel reveals once as it
   slides in (the still wipes up into its frame and settles from a soft zoom, the words rise); the stills drift a little
   slower than the strip; a counter and the hairline keep your place. Phones and reduced motion stack it in a column. */
.site section.week { max-width: none; padding: 0; width: 100%; position: relative; }
.week-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.week-bar { position: absolute; left: var(--site-pad); right: var(--site-pad); top: 72px; display: flex; align-items: center; gap: 16px; z-index: 2; }
.week-count { font-size: var(--t-eyebrow); letter-spacing: 0.08em; } .week-count b { font-weight: 500; }
.week-line { flex: 1; height: 1px; background: var(--wn-line-strong); position: relative; } .week-line i { position: absolute; left: 0; top: -1px; height: 3px; width: 0; background: var(--wn-ink); }
.week-track { position: absolute; left: 0; top: 0; height: 100%; display: flex; align-items: stretch; gap: clamp(32px, 3.5vw, 56px); padding: 112px var(--site-pad) 64px; box-sizing: border-box; will-change: transform; }
.week-intro { flex: none; width: min(32vw, 440px); display: flex; flex-direction: column; justify-content: center; }
.week-intro .example { margin-top: 16px; }
.week-day { flex: none; width: min(54vw, 780px); display: flex; flex-direction: column; }
.week-head { margin: 0 0 20px; display: grid; gap: 6px; max-width: 34ch; font-size: var(--t-small); line-height: 1.45; }
.week-head .mono { font-size: var(--t-eyebrow); letter-spacing: 0.08em; text-transform: uppercase; color: var(--wn-ink); }
.week-head .mono::before { content: ''; display: inline-block; width: 0.6em; height: 0.6em; background: currentColor; margin-right: 10px; vertical-align: 0; }
.week-stills { position: relative; flex: 1; min-height: 0; }
.week-still { position: absolute; margin: 0; top: 0; will-change: transform; }
.week-still.s0 { left: 0; width: 54%; } .week-still.s1 { right: 0; width: 58%; top: 40%; }
.week-still .work-item { box-shadow: 0 24px 60px rgba(18, 46, 39, 0.12); }
.site.js .week-still .work-item { clip-path: inset(100% 0 0 0); } .site.js .week-still img { transform: scale(1.08); }
.site.js .week-day.in .week-still .work-item { clip-path: inset(0 0 0 0); transition: clip-path 900ms var(--ease-out); }
.site.js .week-day.in .week-still img { transform: none; transition: transform 1400ms var(--ease-out); }
.site.js .week-day.in .week-still.s1 .work-item { transition-delay: 140ms; } .site.js .week-day.in .week-still.s1 img { transition-delay: 140ms; }
.site.js .week-head > span { display: block; transform: translate3d(0, 24px, 0); opacity: 0; }
.site.js .week-day.in .week-head > span { transform: none; opacity: 1; transition: transform 700ms var(--ease-out), opacity 500ms var(--ease-out); }
.site.js .week-day.in .week-head .week-txt { transition-delay: 90ms; }
.week-end { flex: none; width: min(38vw, 520px); display: flex; flex-direction: column; justify-content: center; gap: 24px; }
.week-end .big { margin: 0; font-size: clamp(26px, 2.4vw, 44px); max-width: none; } .week-end .btn { align-self: flex-start; }
.site.js .week.pinned .week-day.reveal { opacity: 1; transform: none; } /* the strip reveals its own panels */
@media (max-width: 760px), (prefers-reduced-motion: reduce) {
  .site section.week { padding: 48px 16px; } .week-pin { position: static; height: auto; overflow: visible; } .week-bar { display: none; }
  .week-track { position: static; display: grid; gap: 40px; padding: 0; transform: none !important; }
  .week-intro, .week-day, .week-end { width: auto; }
  .week-stills { display: grid; gap: 12px; } .week-still { position: static; width: auto; transform: none !important; }
  .week-still.s0, .week-still.s1 { width: auto; }
}
.work-item { display: block; width: 100%; padding: 0; border: 0; background: var(--wn-white); cursor: zoom-in; text-align: left; color: inherit; font: inherit; }
.work-item img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 1400ms var(--ease-out); will-change: transform; backface-visibility: hidden; }
.work-item:is(:hover, :focus-visible) img { transform: scale(1.03); }
.lightbox { border: 0; padding: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; background: var(--wn-deep); color: var(--wn-on-deep); }
.lightbox::backdrop { background: var(--wn-deep); }
.lightbox[open] figure { animation: lb-in 560ms var(--ease-out) both; }
.lightbox.closing figure { animation: lb-out 320ms var(--ease) both; }
@keyframes lb-out { to { transform: scale(0.9); opacity: 0; } }
@keyframes lb-in { from { opacity: 0; transform: scale(0.88); } to { opacity: 1; transform: none; } }
.lightbox figure { margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 72px var(--site-pad) 32px; box-sizing: border-box; }
.lightbox img { max-width: 100%; max-height: calc(100dvh - 180px); width: auto; height: auto; object-fit: contain; background: var(--wn-white); }
.lightbox figcaption { display: none; }
.lb-bar { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 12px var(--site-pad); margin: 0; }
.lb-bar .x { width: 44px; height: 44px; border: 0; background: rgba(245, 244, 236, 0.12); color: var(--wn-on-deep); font: 500 20px/1 var(--wn-mono); cursor: pointer; transition: background 300ms var(--ease), color 300ms var(--ease), transform 400ms var(--ease); }
.lb-bar .x:is(:hover, :focus-visible) { transform: rotate(90deg); }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border: 0; background: rgba(245, 244, 236, 0.12); color: var(--wn-on-deep); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lb-nav.prev { left: 8px; } .lb-nav.next { right: 8px; }
.lb-nav:is(:hover, :focus-visible), .lb-bar .x:is(:hover, :focus-visible) { background: var(--wn-lime); color: var(--wn-on-lime); }
/* The sticky bar */
.book { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--wn-white); border-top: 1px solid var(--wn-line); padding: 12px var(--site-pad) calc(12px + env(safe-area-inset-bottom, 0)); transform: translateY(110%); transition: transform 600ms var(--ease-out); }
.book.on { transform: none; }
.book[hidden] { display: none; }
.book-form { display: flex; align-items: center; gap: 16px; max-width: var(--site-w); margin: 0 auto; }
.book-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.book-field { flex: 0 1 320px; } .book-field input { width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 12px; border: 1px solid var(--wn-line-strong); background: var(--wn-paper); color: var(--wn-ink); font: 400 16px/1.4 var(--wn-font); border-radius: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.book-x { width: 46px; height: 46px; border: 0; background: var(--wn-paper); color: var(--wn-ink); font: 500 20px/1 var(--wn-mono); cursor: pointer; flex: none; transition: background 300ms var(--ease), color 300ms var(--ease), transform 400ms var(--ease); }
body.book-on { padding-bottom: 88px; }
@media (max-width: 1100px) { .hero-panel::before { right: 16%; } }
@media (max-width: 760px) { .hero-panel { padding: 120px var(--site-pad) 88px; } .hero-panel::before { left: 0; right: 0; top: 96px; bottom: 32px; } .book-form { flex-wrap: wrap; } .book-text { flex-basis: 100%; } .book-field { flex: 1 1 160px; } body.book-on { padding-bottom: 148px; } .scroll-cue { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero-media, .hero-panel { transform: none !important; } .scroll-cue svg { animation: none; } .work-item img { transition: none; } }
/* The photographs (October 2026). */
.hero-media img { opacity: 1; }
.hero-panel::before { opacity: 0.94; }
.step-photo { margin: -32px -32px 8px; aspect-ratio: 16 / 10; overflow: hidden; }
.step-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feature-art picture { display: block; } .feature-art img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; }
.feature { align-items: stretch; } .feature-text { justify-content: center; }
.feature-ico { position: absolute; left: 16px; bottom: 16px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--wn-lime); color: var(--wn-on-lime); }
.story-photo { grid-column: 1; margin: 0; }
.story-photo img { width: 100%; height: auto; display: block; }
.aside-photo { margin: -32px -32px 16px; aspect-ratio: 16 / 10; overflow: hidden; }
.aside-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 480px) { .step-photo, .aside-photo { margin: -24px -24px 8px; } .card { padding: 24px; } }
/* Lenis smooth scroll (its own stylesheet, inlined) */
html.lenis, html.lenis body { height: auto; } .lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-smooth iframe { pointer-events: none; }
/* The WebGL accent in the hero: a field of blocks that lights near the pointer. Off under reduced motion. */
/* Plans on the home page */
.teaser { list-style: none; margin: 32px 0 24px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.teaser .card { display: flex; flex-direction: column; gap: 8px; }
.teaser .price { font: 600 clamp(32px, 2.4em, 52px)/1 var(--wn-mono); letter-spacing: -0.03em; margin: 8px 0 0; } .teaser .price .small { font: 500 var(--t-small)/1 var(--wn-mono); }
.teaser .card.ink .small { color: rgba(245, 244, 236, 0.7); }
@media (max-width: 760px) { .teaser { grid-template-columns: minmax(0, 1fr); } }
/* Phones: the photograph above the words, nothing covered. */
@media (max-width: 760px) {
  .hero.cine { min-height: auto; align-items: start; }
  .hero-media { position: relative; inset: auto; height: 46svh; height: 46vh; min-height: 260px; transform: none !important; }
  .hero-media img, .hero-media video { object-fit: cover; object-position: 70% 30%; }
  .hero-panel { padding: 40px var(--site-pad) 72px; transform: none !important; }
  .hero-panel::before { display: none; }
}

/* Zoom through the word (owner, 27 Oct 2026; fixed 26 Oct): the word grows with the scroll until you pass through the
   gap between two letters. The picture is there from the start, seen through the gap as it widens; the line arrives
   once the word has gone. */
.site section.zoom { max-width: none; padding: 0; height: 200vh; position: relative; width: 100%; }
.zoom-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--wn-deep); }
.zoom-photo { position: absolute; inset: 0; } .zoom-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.zoom-caption { position: absolute; left: var(--site-pad); right: var(--site-pad); bottom: max(10vh, 104px); box-sizing: border-box; width: auto; max-width: 760px; margin: 0 auto; padding: 24px 32px; background: rgba(18, 46, 39, 0.72); text-align: center; color: var(--wn-on-deep); opacity: 0; transform: translateY(24px); transition: opacity 800ms var(--ease-out) 200ms, transform 1000ms var(--ease-out) 200ms; }
.zoom-caption .kicker { color: rgba(245, 244, 236, 0.9); } .zoom-caption h2 { color: var(--wn-on-deep); max-width: 22ch; margin: 0 auto; text-shadow: 0 0 0 transparent; }
.zoom-stage.through .zoom-caption { opacity: 1; transform: none; }
.zoom-word { position: absolute; inset: 0; width: 100%; height: 100%; }
.zoom-paper { fill: var(--wn-paper); }
.zoom-text { fill: var(--wn-ink); }
.zoom-stage.done .zoom-word { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .zoom { height: auto; } .zoom-stage { position: relative; height: 70vh; } .zoom-word { display: none; } .zoom-caption { opacity: 1; transform: none; } }

/* The account pages in the website's frame (sign-in, sign-up, invite, confirm): one card, the site's own form look. */
.frame { min-height: calc(100vh - 69px - 240px); display: grid; place-items: start center; padding-top: 48px; padding-bottom: 48px; }
.frame-card { width: min(100%, 460px); padding: 36px; }
.frame-card h1 { font-size: clamp(26px, 1.8em, 36px); margin: 0 0 6px; }
.frame-card p { margin: 0 0 20px; color: var(--wn-slate); } .frame-card p.err { color: var(--wn-ink); background: var(--wn-paper); border: 1px solid var(--wn-ink); padding: 10px 12px; margin: 14px 0 0; }
.frame-card .err { color: var(--wn-ink); background: var(--wn-paper); border: 1px solid var(--wn-ink); padding: 10px 12px; margin: 0 0 14px; font-size: var(--t-small); }
.frame-card label { display: block; font: 600 13px/18px var(--wn-font); margin: 0 0 6px; }
.frame-card input, .frame-card select { width: 100%; box-sizing: border-box; font: 400 16px/1.4 var(--wn-font); padding: 12px; border: 1px solid var(--wn-line-strong); background: var(--wn-paper); color: var(--wn-ink); margin: 0 0 14px; }
.frame-card input:focus-visible, .frame-card select:focus-visible { outline: 2px solid var(--wn-ink); outline-offset: 0; }
.frame-card button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 12px 18px; border: 0; font: 500 var(--t-small)/20px var(--wn-font); cursor: pointer; background-color: var(--wn-ink); color: var(--wn-paper); background-image: var(--wn-wipe-lime); background-size: 220% 100%; background-position: 100% 0; transition: background-position 420ms var(--ease), color 300ms var(--ease); }
.frame-card button:is(:hover, :focus-visible) { background-position: 0 0; color: var(--wn-on-lime); }
.frame-card a { color: var(--wn-ink); }
.frame-card form > p:last-child, .frame-card .box > p:last-child { margin: 16px 0 0; }
.frame-card .staging { display: block; }

#trial address { font-style: normal; margin-top: 16px; color: var(--wn-on-lime); opacity: 0.85; }

/* ---------- Solutions (owner, 27 Oct 2026) ---------- */
/* The film opener, after "Breakout Media": the film is a full-screen video clipped to a box beside the heading; as you
   scroll, the clip opens to every edge and covers the copy. Clip-path only, so it is paint work, never layout. */
.site section.breakout { max-width: none; padding: 0; width: 100%; height: 230vh; position: relative; background: var(--wn-paper); }
.bo-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.bo-copy { position: absolute; left: var(--site-pad); top: 50%; transform: translateY(-50%); width: min(44vw, 620px); z-index: 1; }
.bo-copy h1 { margin: 0; } .bo-copy .lead { margin: 20px 0 0; } .bo-more { margin: 28px 0 0; } .bo-more a { color: var(--wn-ink); text-decoration: none; border-bottom: 1px solid currentColor; }
/* The film's box: its four edges are set by site.js from these starting insets towards 0 (an absolutely placed box, so
   its size changes lay out nothing else). The video always covers its box, so the frame is never cropped oddly. */
.bo-film { position: absolute; z-index: 2; background: var(--wn-deep); --bo-t: 18vh; --bo-r: var(--site-pad); --bo-b: 18vh; --bo-l: 52vw; top: var(--bo-t); right: var(--bo-r); bottom: var(--bo-b); left: var(--bo-l); overflow: hidden; cursor: pointer; }
.breakout.open .bo-film { cursor: default; }
.bo-film video { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.bo-play { position: absolute; z-index: 3; width: 64px; height: 64px; border: 0; padding: 0; cursor: pointer; background: var(--wn-lime); left: 24px; bottom: 24px; transition: transform 300ms var(--ease), opacity 300ms var(--ease); }
.bo-play span { display: block; width: 0; height: 0; margin: 0 auto; border-left: 18px solid var(--wn-ink); border-top: 11px solid transparent; border-bottom: 11px solid transparent; transform: translateX(3px); }
.bo-play:is(:hover, :focus-visible) { transform: scale(1.08); }
.breakout.open .bo-play { opacity: 0; pointer-events: none; }
@media (max-width: 760px) {
  .site section.breakout { height: 190vh; }
  .bo-copy { top: 96px; transform: none; width: auto; right: var(--site-pad); }
  .bo-film { --bo-t: 58vh; --bo-r: 16px; --bo-b: 10vh; --bo-l: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .site section.breakout { height: auto; } .bo-pin { position: relative; height: auto; overflow: visible; padding: 120px 0 48px; }
  .bo-copy { position: static; transform: none; width: auto; padding: 0 var(--site-pad); }
  .bo-film { position: relative; inset: auto; margin: 40px var(--site-pad) 0; aspect-ratio: 16 / 9; } .bo-play { display: none; }
}
/* The ten solutions as cards that stack: each sticks a little lower than the last and the one beneath settles back. */
.site section.stack { padding-top: 48px; padding-bottom: 96px; }
.stack-card { position: sticky; top: calc(88px + var(--i) * 12px); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0; min-height: min(72vh, 640px); margin-bottom: 32px; transform-origin: 50% 0; will-change: transform; overflow: hidden; }
.stack-card::after { content: ''; position: absolute; inset: 0; background: var(--wn-deep); opacity: var(--dim, 0); pointer-events: none; }
.stack-card.white { background: var(--wn-white); } .stack-card.ink { background: var(--wn-deep); color: var(--wn-on-deep); } .stack-card.lime { background: var(--wn-lime); color: var(--wn-on-lime); }
.stack-art { position: relative; overflow: hidden; } .stack-art picture, .stack-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.stack-text { padding: clamp(28px, 4vw, 64px); display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.stack-text h2 { margin: 0; font-size: clamp(32px, 3.4vw, 64px); line-height: 1; letter-spacing: -0.03em; }
.stack-text p { margin: 0; font-size: var(--t-lead); line-height: 1.45; max-width: 40ch; }
.stack-text .num { font: 500 var(--t-eyebrow)/1.3 var(--wn-mono); letter-spacing: 0.08em; }
.stack-card.ink .num, .stack-card.ink p { color: rgba(245, 244, 236, 0.9); }
@media (max-width: 900px) { .stack-card { grid-template-columns: minmax(0, 1fr); min-height: 0; } .stack-art { aspect-ratio: 16 / 10; } }
@media (max-width: 760px), (prefers-reduced-motion: reduce) { .stack-card { position: relative; top: 0; transform: none !important; } .stack-card::after { display: none; } }

/* ---------- Contact: the hello wall (owner, 27 Oct 2026) ---------- */
.site section.hello { max-width: none; width: 100%; box-sizing: border-box; background: var(--wn-deep); color: var(--wn-on-deep); padding: clamp(48px, 8vh, 96px) var(--site-pad) clamp(56px, 9vh, 112px); text-align: center; overflow: hidden; }
.hello-word { margin: 0 auto; height: 1.3em; font-size: clamp(64px, 15vw, 260px); line-height: 1.1; font-weight: 600; letter-spacing: -0.04em; overflow: hidden; position: relative; color: var(--wn-lime); }
.hw-in { display: flex; flex-direction: column; align-items: center; }
.hw-text { display: block; white-space: nowrap; unicode-bidi: isolate; }
.hw-lang { display: block; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(245, 244, 236, 0.8); margin-top: -0.2em; font-weight: 500; }
.hello-word.out .hw-in { animation: hw-out 420ms var(--ease) forwards; } .hello-word.in .hw-in { animation: hw-in 700ms var(--ease-out) forwards; }
@keyframes hw-out { to { transform: translate3d(0, -100%, 0); } } @keyframes hw-in { from { transform: translate3d(0, 100%, 0); } to { transform: none; } }
.hello .lead { margin: 24px auto 0; color: var(--wn-on-deep); } .hello-note { margin: 14px auto 0; color: rgba(245, 244, 236, 0.75); }
.page-contact .contact-grid { margin-top: -48px; position: relative; z-index: 1; }
.contact-form.lime { background: var(--wn-lime); color: var(--wn-on-lime); }
.contact-form.lime input, .contact-form.lime textarea { background: var(--wn-white); border-color: var(--wn-ink); }
.contact-form.lime .steps-bar .pips i { background: rgba(18, 46, 39, 0.25); } .contact-form.lime .steps-bar .pips i.on { background: var(--wn-ink); }
.contact-form.lime .small, .contact-form.lime .mono { color: var(--wn-on-lime); }
#trial { background: var(--wn-white); color: var(--wn-ink); } #trial address { color: var(--wn-slate); opacity: 1; }
@media (max-width: 760px) { .page-contact .contact-grid { margin-top: -32px; } .hw-lang { font-size: 11px; } }

/* "The way it speaks" (owner, 27 Oct 2026, after annnimate.com's "Rectangle Text Reveal", written from scratch): each
   line sits behind an Ink rectangle; on entering view the rectangles wipe away to the right, one line after another,
   while the words slide out from behind them. The last line's rectangle is Lime. */
.voice { text-align: center; padding-top: clamp(80px, 12vh, 160px); padding-bottom: clamp(80px, 12vh, 160px); }
.voice .kicker { justify-content: center; margin-bottom: 32px; }
.rtr { display: flex; flex-direction: column; align-items: center; gap: 0.18em; }
.voice .big { font-size: clamp(30px, 4.4vw, 84px); line-height: 1.08; letter-spacing: -0.035em; margin: 0; }
.rtr-line { position: relative; display: inline-block; padding: 0.02em 0.12em 0.08em; overflow: hidden; }
.rtr-text { display: inline-block; }
.rtr-box { position: absolute; inset: 0; background: var(--wn-ink); transform-origin: 100% 50%; transform: scaleX(0); pointer-events: none; }
.rtr-line.last .rtr-box { background: var(--wn-lime); }
.site.js .rtr-text { transform: translate3d(-0.6em, 0, 0); opacity: 0; }
.site.js .rtr-box { transform: scaleX(1); }
.site.js .rtr.in .rtr-box { transform: scaleX(0); transition: transform 900ms cubic-bezier(0.87, 0, 0.13, 1) calc(150ms + var(--i) * 160ms); }
.site.js .rtr.in .rtr-text { transform: none; opacity: 1; transition: transform 1000ms var(--ease-out) calc(450ms + var(--i) * 160ms), opacity 300ms linear calc(450ms + var(--i) * 160ms); }
.site.js .rtr.reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .site.js .rtr-box { transform: scaleX(0); } .site.js .rtr-text { transform: none; opacity: 1; } }

/* ---------- The mosaic cover and the composing hero (owner, 27 Oct 2026) ---------- */
/* The cover is Deep at the first paint. site.js takes it over (.live: transparent, the canvas draws the tiles and
   clears them); without scripts the fallback animation fades it after 1.2 s. */
.mosaic { position: fixed; inset: 0; z-index: 90; pointer-events: none; background: var(--wn-deep); animation: mosaic-fallback 300ms ease 1.2s forwards; }
.mosaic canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mosaic.live { background: transparent; animation: none; }
.mosaic.gone { visibility: hidden; }
@keyframes mosaic-fallback { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .mosaic { display: none; } }
@media print { .mosaic { display: none; } }
/* The composing grid (see COMPOSE in site.js). Times are from the moment site.js adds .go, as the mosaic starts to
   clear (it is gone by about 0.55 s). */
.cg-lines { position: absolute; left: 0; right: 0; top: 0; height: 100vh; height: 100svh; pointer-events: none; }
.cg-lines { z-index: 2; }
.cg-lines b { position: absolute; display: block; background: var(--wn-lime); opacity: 0; }
.cg-lines .v { top: 0; bottom: 0; left: var(--x); width: 1px; transform-origin: 50% 0; }
.cg-lines .h { left: 0; right: 0; top: var(--y); height: 1px; transform-origin: 0 50%; }
.hero.go .cg-lines .v { animation: cg-v 3400ms var(--ease-out) calc(380ms + var(--n) * 70ms) both; }
.hero.go .cg-lines .h { animation: cg-h 3400ms var(--ease-out) calc(300ms + var(--n) * 90ms) both; }
@keyframes cg-v { 0% { opacity: 0.85; transform: scaleY(0); } 22% { opacity: 0.85; transform: scaleY(1); } 70% { opacity: 0.6; transform: scaleY(1); } 100% { opacity: 0; transform: scaleY(1); } }
@keyframes cg-h { 0% { opacity: 0.85; transform: scaleX(0); } 22% { opacity: 0.85; transform: scaleX(1); } 70% { opacity: 0.6; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }
/* The panel wipes in from the left; the kicker, the letters, the Lime block, the lead, the buttons and the counter follow. */
.hero.go .hero-panel::before { animation: cg-wipe 760ms cubic-bezier(0.7, 0, 0.2, 1) 820ms both; }
@keyframes cg-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.hero.go .hero-panel .kicker { animation: cg-rise 700ms var(--ease-out) 1250ms both; }
.hero h1 .cw { display: inline-block; white-space: nowrap; } .hero h1 .ch { display: inline-block; white-space: pre; }
.hero.go h1 .ch { animation: cg-char 760ms var(--ease-out) calc(1350ms + var(--c) * 34ms) both; }
@keyframes cg-char { from { transform: translate3d(0, 0.6em, 0) scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
.hero.go .flip { animation: cg-block 680ms cubic-bezier(0.7, 0, 0.2, 1) var(--flip-at, 1700ms) both; }
@keyframes cg-block { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.hero.go .lead { animation: cg-rise 800ms var(--ease-out) 2250ms both; } .hero.go .hero-acts { animation: cg-rise 800ms var(--ease-out) 2380ms both; } .hero.go .limit { animation: cg-rise 800ms var(--ease-out) 2500ms both; }
@keyframes cg-rise { from { transform: translate3d(0, 28px, 0); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cg-lines { display: none; } }

/* ---------- The Journal (owner, 27 Oct 2026): a magazine front page and long-form articles ---------- */
.page-journal main { overflow-x: clip; }
.j-head { padding-top: clamp(56px, 10vh, 120px); }
.site .j-title { font-size: clamp(56px, 11vw, 200px); line-height: 0.92; letter-spacing: -0.05em; margin: 0; max-width: 12ch; }
.j-head .lead { margin-top: 24px; }
.j-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.j-filter button { min-height: 44px; padding: 10px 18px; border: 1px solid var(--wn-ink); background: transparent; color: var(--wn-ink); font: 500 var(--t-small)/20px var(--wn-font); cursor: pointer; transition: background 250ms var(--ease), color 250ms var(--ease); }
.j-filter button .mono { font-size: 12px; margin-left: 6px; opacity: 0.7; }
.j-filter button.on, .j-filter button:is(:hover, :focus-visible) { background: var(--wn-ink); color: var(--wn-paper); }
.j-feed { margin: 16px 0 0; } .j-feed a { color: var(--wn-slate); }
.j-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; font-size: var(--t-eyebrow); letter-spacing: 0.06em; text-transform: uppercase; color: var(--wn-slate); }
.j-kind { padding: 2px 8px; background: var(--wn-ink); color: var(--wn-paper); } .j-kind.news { background: var(--wn-lime); color: var(--wn-on-lime); }
/* The featured story: the cover grows from a framed band to the full width as it scrolls in (GSAP). */
.site section.j-feature, .j-feature { max-width: none; padding: 0; margin-top: clamp(40px, 7vh, 88px); }
.j-feature-link { display: block; color: inherit; text-decoration: none; }
.j-feature-art { padding: 0 var(--site-pad); }
.j-feature-frame { overflow: hidden; aspect-ratio: 16 / 8; background: var(--wn-deep); will-change: clip-path; }
.j-feature-img, .j-art-img { width: 100%; height: 118%; object-fit: cover; display: block; will-change: transform; }
.j-feature-text { max-width: var(--site-w); margin: 0 auto; padding: 32px var(--site-pad) 0; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px 48px; align-items: end; }
.j-feature-text .j-meta { grid-column: 1 / -1; }
.j-feature-text h2 { margin: 0; font-size: clamp(36px, 5vw, 92px); line-height: 0.98; letter-spacing: -0.04em; max-width: 16ch; }
.j-feature-text .lead { margin: 0; }
.j-read { grid-column: 1 / -1; font-weight: 600; border-bottom: 2px solid var(--wn-lime); justify-self: start; padding-bottom: 2px; }
.j-feature-link:hover h2, .j-card-link:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
/* The grid: a twelve-column magazine rhythm; each card rises in and its picture drifts a little inside the frame. */
.j-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 56px 24px; margin-top: clamp(64px, 10vh, 120px); align-items: start; }
.j-card { grid-column: span 6; } .j-card.w7 { grid-column: span 7; } .j-card.w5 { grid-column: span 5; margin-top: 96px; } .j-card.w4 { grid-column: span 4; } .j-card.w6 { grid-column: span 6; } .j-card.w4:nth-child(3n+2) { margin-top: 64px; }
.j-card-link { display: grid; gap: 12px; color: inherit; text-decoration: none; }
.j-card-art { overflow: hidden; aspect-ratio: 4 / 3; background: var(--wn-white); }
.j-card.w7 .j-card-art { aspect-ratio: 16 / 10; } .j-card.w5 .j-card-art { aspect-ratio: 4 / 5; }
.j-card-art img { width: 100%; height: 120%; object-fit: cover; display: block; transition: transform 900ms var(--ease-out); }
.j-card-link:hover .j-card-art img { transform: scale(1.04); }
.j-nocover { display: block; width: 100%; height: 100%; background: var(--wn-deep) linear-gradient(135deg, transparent 0 60%, var(--wn-lime) 60% 64%, transparent 64%); }
.j-card h3 { margin: 4px 0 0; font-size: clamp(22px, 1.9vw, 34px); line-height: 1.1; letter-spacing: -0.02em; }
.j-ex { margin: 0; color: var(--wn-slate); }
.j-card.hide, .j-feature.hide { display: none; }
.j-empty { text-align: center; padding-top: 80px; padding-bottom: 80px; } .j-empty h2 { margin: 0 auto; }
@media (max-width: 900px) { .j-feature-text { grid-template-columns: minmax(0, 1fr); } .j-card, .j-card.w7, .j-card.w5, .j-card.w4, .j-card.w6 { grid-column: span 6; margin-top: 0; } .j-card.w4:nth-child(3n+2) { margin-top: 0; } }
@media (max-width: 600px) { .j-grid { gap: 40px; } .j-card, .j-card.w7, .j-card.w5, .j-card.w4, .j-card.w6 { grid-column: 1 / -1; } .j-feature-frame { aspect-ratio: 4 / 3; } }
/* The article: a reading bar, a big title, the cover drifting behind, a sticky outline beside the text. */
.j-progress { position: fixed; left: 0; right: 0; top: 0; height: 4px; z-index: 30; pointer-events: none; } .j-progress i { display: block; height: 100%; background: var(--wn-lime); transform-origin: 0 50%; transform: scaleX(0); }
.j-art-head { max-width: var(--site-w); margin: 0 auto; padding: clamp(48px, 9vh, 112px) var(--site-pad) 0; }
.j-back { color: var(--wn-ink); text-decoration: none; border-bottom: 1px solid currentColor; }
.j-art-head h1 { font-size: clamp(42px, 6.4vw, 120px); line-height: 0.96; letter-spacing: -0.045em; margin: 20px 0 0; max-width: 18ch; }
.j-art-head .lead { margin-top: 24px; max-width: 54ch; } .j-by { margin: 16px 0 0; color: var(--wn-slate); }
.j-art-cover { margin: clamp(40px, 6vh, 72px) 0 0; padding: 0 var(--site-pad); } .j-art-frame { overflow: hidden; aspect-ratio: 16 / 8; background: var(--wn-deep); }
.j-art-body { max-width: var(--site-w); margin: 0 auto; padding: clamp(48px, 7vh, 88px) var(--site-pad) 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 68ch) minmax(0, 0.4fr); gap: 48px; }
.j-toc { position: sticky; top: 96px; align-self: start; } .j-toc p { margin: 0 0 12px; font-size: var(--t-eyebrow); letter-spacing: 0.08em; text-transform: uppercase; }
.j-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: t; } .j-toc li { counter-increment: t; } .j-toc a { color: var(--wn-slate); text-decoration: none; font-size: var(--t-small); display: grid; grid-template-columns: 2.2em 1fr; } .j-toc a::before { content: counter(t, decimal-leading-zero); font: 500 12px/1.6 var(--wn-mono); } .j-toc a.on, .j-toc a:hover { color: var(--wn-ink); }
.j-prose { font-size: clamp(17px, 1.08em, 21px); line-height: 1.7; }
.j-prose h2 { font-size: clamp(28px, 2.4vw, 44px); line-height: 1.1; margin: 1.8em 0 0.5em; scroll-margin-top: 96px; } .j-prose h3 { margin: 1.6em 0 0.4em; scroll-margin-top: 96px; }
.j-prose p { margin: 0 0 1.1em; } .j-prose a { color: var(--wn-ink); text-decoration-color: var(--wn-lime); text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.j-prose blockquote { margin: 1.6em 0; padding: 0 0 0 24px; border-left: 4px solid var(--wn-lime); font-size: 1.25em; line-height: 1.4; font-weight: 600; letter-spacing: -0.01em; } .j-prose blockquote p { margin: 0; }
.j-prose ul, .j-prose ol { padding-left: 1.3em; margin: 0 0 1.2em; } .j-prose li { margin: 0.3em 0; }
.j-prose code { font: 0.9em var(--wn-mono); background: var(--wn-white); padding: 0.1em 0.35em; } .j-prose pre { background: var(--wn-deep); color: var(--wn-on-deep); padding: 20px; overflow-x: auto; } .j-prose pre code { background: none; padding: 0; color: inherit; }
.j-prose hr { border: 0; height: 8px; width: 48px; background: var(--wn-ink); margin: 2.4em 0; }
.j-fig { margin: 1.8em 0; } .j-fig img { width: 100%; height: auto; display: block; } .j-fig figcaption { font-size: var(--t-small); color: var(--wn-slate); margin-top: 8px; }
.j-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--wn-line-strong); } .j-share p { margin: 0; font-size: var(--t-eyebrow); letter-spacing: 0.08em; text-transform: uppercase; }
.j-share a, .j-share button { color: var(--wn-ink); font: 500 var(--t-small)/1 var(--wn-font); background: none; border: 0; padding: 12px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; }
.j-more { margin-top: clamp(64px, 10vh, 120px); } .j-more h2 { font-size: clamp(32px, 3.6vw, 64px); } .j-more-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 32px; } .j-more .j-card { grid-column: auto; margin-top: 0; }
@media (max-width: 1100px) { .j-art-body { grid-template-columns: minmax(0, 1fr); } .j-toc { position: static; border-left: 4px solid var(--wn-lime); padding-left: 16px; } .j-toc-gap { display: none; } }
@media (max-width: 760px) { .j-more-row { grid-template-columns: minmax(0, 1fr); } .j-art-frame { aspect-ratio: 4 / 3; } }
/* Before GSAP takes over, nothing is hidden: without scripts the pages simply show. */
.j-split-line { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; } .j-split-line > span { display: inline-block; }

/* ---------- The Journal editor (owner only) ---------- */
.je { max-width: 1400px; margin: 0 auto; padding: 32px var(--site-pad) 96px; }
.je-bar { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; } .je-bar h1 { margin: 0; font-size: clamp(36px, 4vw, 64px); } .je-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.je-msg { min-height: 1.4em; margin: 16px 0; } .je-msg.err { color: #9b1c1c; }
.je-rows { display: grid; gap: 8px; } .je-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 16px; align-items: center; padding: 16px 20px; background: var(--wn-white); border: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; width: 100%; }
.je-row:hover, .je-row:focus-visible { outline: 2px solid var(--wn-ink); } .je-row b { font-weight: 600; } .je-row .mono { font-size: 12px; color: var(--wn-slate); }
.je-pill { font: 500 12px/1 var(--wn-mono); padding: 5px 8px; background: var(--wn-paper); } .je-pill.pub { background: var(--wn-lime); }
.je-cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; } .je-main, .je-side { display: grid; gap: 16px; align-content: start; }
.je label, .je-label { display: grid; gap: 6px; font: 600 13px/18px var(--wn-font); } .je .small { font-weight: 400; color: var(--wn-slate); }
.je input:not([type=radio]):not([type=file]), .je textarea { font: 400 16px/1.5 var(--wn-font); padding: 12px; border: 1px solid var(--wn-line-strong); background: var(--wn-white); color: var(--wn-ink); width: 100%; box-sizing: border-box; }
.je-title-l input { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; } .je textarea[name=body] { font: 400 15px/1.65 var(--wn-mono); min-height: 480px; resize: vertical; }
.je-tools { display: flex; flex-wrap: wrap; gap: 6px; } .je-tools button, .je-up { padding: 8px 12px; border: 1px solid var(--wn-line-strong); background: var(--wn-white); font: 500 13px/1 var(--wn-font); cursor: pointer; display: inline-block; }
.je fieldset { border: 0; padding: 0; margin: 0; display: flex; gap: 16px; align-items: center; } .je legend { font: 600 13px/18px var(--wn-font); float: left; margin-right: 8px; } .je-radio { display: inline-flex !important; grid-auto-flow: column; align-items: center; gap: 6px; font-weight: 400 !important; }
.je-slug { display: flex; align-items: center; border: 1px solid var(--wn-line-strong); background: var(--wn-white); } .je-slug .mono { padding-left: 12px; font-size: 12px; color: var(--wn-slate); white-space: nowrap; } .je-slug input { border: 0 !important; padding-left: 2px !important; }
.je-drop { border: 1px dashed var(--wn-line-strong); background: var(--wn-white); min-height: 160px; display: grid; place-items: center; text-align: center; color: var(--wn-slate); font-size: 13px; overflow: hidden; } .je-drop.over { border-color: var(--wn-ink); background: var(--wn-paper); } .je-drop img { width: 100%; height: 100%; object-fit: cover; max-height: 220px; }
.je-pick { justify-self: start; } .je-link { background: none; border: 0; padding: 4px 0; color: var(--wn-ink); text-decoration: underline; cursor: pointer; font: 500 13px var(--wn-font); justify-self: start; }
.je-snip { display: grid; gap: 2px; padding: 12px; background: var(--wn-white); } .je-snip-url { font-size: 12px; color: var(--wn-slate); } .je-snip-t { color: #1a0dab; font-size: 18px; line-height: 1.3; } .je-snip-d { font-size: 13px; color: #4d5156; }
.je-danger { display: grid; gap: 4px; padding-top: 8px; border-top: 1px solid var(--wn-line-strong); }
.je-state { font-size: 12px; color: var(--wn-slate); }
.je-preview { margin-top: 48px; padding: 32px; background: var(--wn-white); } .je-preview .j-prose { max-width: 68ch; }
@media (max-width: 1000px) { .je-cols { grid-template-columns: minmax(0, 1fr); } }

/* The hero on the grid (owner, 27 Oct 2026). On screens at least 1000 × 620 the hero is exactly one screen below the
   header and is a 6 × 4 grid inside a side margin (--gx); the hairlines are that grid: seven verticals (both margins
   and every column edge) and three horizontals. Everything is placed on it:
   - the panel's dark field ends exactly on column line 3 (it bleeds to the left edge of the screen);
   - text is flush with column line 0; the kicker hangs from the top edge, the promise stands on row line 2, the lead
     hangs from row line 2, the buttons stand on row line 3, the counter sits on the bottom edge (all by one gutter, --gy);
   - the Lime block is exactly one, two or three columns wide (site.js rounds it up to the next column line);
   - each button is exactly one column wide, the two side by side from column line 0 to column line 2;
   - the lead is three columns wide, the counter two.
   Below that size the hero keeps its free layout and no hairlines are drawn. */
.cg-lines { top: 0; bottom: 0; height: auto; }
.cg-lines .v { left: calc(var(--gx, 0px) + (100% - 2 * var(--gx, 0px)) * var(--c) / 6); }
@media (max-width: 999px), (max-height: 619px) { .cg-lines { display: none; } }
@media (min-width: 1000px) and (min-height: 620px) {
  .site { --hdr: clamp(64px, calc(1.876vw + 41px), 100px); } .site .top { min-height: var(--hdr); box-sizing: border-box; } /* the header's height, known to the hero */
  .site section.hero.cine { --gx: clamp(24px, 3vw, 64px); --gy: clamp(14px, 2.2vh, 28px); height: calc(100vh - var(--hdr) - var(--tl, 0px)); height: calc(100svh - var(--hdr) - var(--tl, 0px)); min-height: 0; padding: 0 var(--gx); box-sizing: border-box; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); column-gap: 0; align-items: stretch; }
  .hero.cine .hero-panel { grid-column: 1 / 4; grid-row: 1 / 5; margin: 0; max-width: none; width: auto; padding: 0; display: grid; grid-template-rows: subgrid; grid-template-columns: subgrid; }
  .hero.cine .hero-panel::before { left: calc(-1 * var(--gx)); right: 0; top: 0; bottom: 0; }
  .hero.cine .hero-panel .kicker { grid-column: 1 / 4; grid-row: 1; align-self: start; margin: var(--gy) var(--gy) 0 0; }
  .hero.cine h1 { grid-column: 1 / 4; grid-row: 1 / 3; align-self: end; margin: 0 0 var(--gy); max-width: none; font-size: min(calc((100svh - var(--hdr)) * 0.125), calc((100vw - 2 * var(--gx)) / 2 / 6.2), 150px); line-height: 0.95; }
  .hero.cine .lead { grid-column: 1 / 4; grid-row: 3; align-self: start; margin: var(--gy) var(--gy) 0 0; max-width: none; font-size: clamp(16px, min(1.25vw, 2.2vh), 22px); }
  .hero.cine .hero-acts { grid-column: 1 / 3; grid-row: 4; align-self: start; margin: 0; display: grid; grid-template-columns: subgrid; gap: 0; }
  .hero.cine .hero-acts .btn { width: 100%; box-sizing: border-box; justify-content: flex-start; min-height: clamp(52px, 7vh, 72px); padding-left: var(--gy); padding-right: var(--gy); }
  .hero.cine .limit { grid-column: 1 / 3; grid-row: 4; align-self: end; margin: 0 var(--gy) var(--gy) 0; max-width: none; }
  .hero.cine .scroll-cue { grid-column: 6; grid-row: 4; }
}
/* The counter needs the last row to itself beside the buttons: shown on the grid only on screens tall enough. */
@media (min-width: 1000px) and (min-height: 620px) and (max-height: 959px) { .hero.cine .limit { display: none; } }

/* ---------- Blogs (owner, 27 Oct 2026): the Journal became Blogs, with more to see and an easier read ---------- */
.b-head { padding-top: clamp(40px, 8vh, 96px); padding-bottom: 0; }
.site .b-title { font-size: clamp(96px, 24vw, 420px); line-height: 0.8; letter-spacing: -0.065em; margin: 12px 0 0 -0.04em; max-width: none; }
.b-title .bc { display: inline-block; }
.b-sub { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px 48px; align-items: end; margin-top: clamp(40px, 0.2em + 6vh, 96px); } .site .b-title { padding-bottom: 0.14em; }
.b-sub .lead { margin: 0; } .b-sub .j-filter { margin: 0; justify-content: flex-end; align-items: center; } .b-sub .j-feed { color: var(--wn-slate); margin-left: 8px; }
@media (max-width: 760px) { .b-sub { grid-template-columns: minmax(0, 1fr); } .b-sub .j-filter { justify-content: flex-start; } }
/* A slow marquee of what the blogs cover. */
.b-marquee { margin-top: clamp(32px, 6vh, 72px); border-top: 1px solid var(--wn-ink); border-bottom: 1px solid var(--wn-ink); overflow: hidden; background: var(--wn-lime); color: var(--wn-on-lime); }
.b-track { display: flex; width: max-content; align-items: center; gap: 28px; padding: 14px 0; animation: b-marquee 38s linear infinite; font: 600 clamp(20px, 2.2vw, 36px)/1 var(--wn-font); letter-spacing: -0.02em; white-space: nowrap; }
.b-track i { display: inline-block; width: 0.4em; height: 0.4em; background: var(--wn-ink); }
@keyframes b-marquee { to { transform: translate3d(-50%, 0, 0); } }
.b-marquee:hover .b-track { animation-play-state: paused; }
.b-latest { padding: 2px 8px; border: 1px solid currentColor; }
/* Every story: an index of big rows; on a pointer device the cover follows the cursor over a row. */
.b-index { margin-top: clamp(80px, 12vh, 140px); position: relative; }
.b-index-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-bottom: 2px solid var(--wn-ink); padding-bottom: 16px; }
.b-index-head h2 { margin: 0; font-size: clamp(36px, 4.4vw, 80px); }
.b-rows { list-style: none; margin: 0; padding: 0; }
.b-row { border-bottom: 1px solid var(--wn-line-strong); }
.b-row a { display: grid; grid-template-columns: 3.2em 5.5em minmax(0, 1fr) auto 2em; gap: 16px; align-items: center; padding: clamp(18px, 2.6vh, 30px) 0; color: var(--wn-ink); text-decoration: none; position: relative; }
.b-row a::before { content: ''; position: absolute; inset: 0; background: var(--wn-lime); transform: scaleY(0); transform-origin: 50% 100%; transition: transform 450ms var(--ease-out); z-index: -1; }
.b-row a:is(:hover, :focus-visible)::before { transform: scaleY(1); }
.b-n, .b-d { font-size: 13px; color: var(--wn-slate); } .b-row a:hover .b-n, .b-row a:hover .b-d { color: var(--wn-ink); }
.b-t { font-size: clamp(22px, 2.6vw, 44px); font-weight: 600; line-height: 1.05; letter-spacing: -0.025em; transition: transform 450ms var(--ease-out); }
.b-row a:hover .b-t { transform: translateX(12px); }
.b-go { font-size: 24px; text-align: right; transition: transform 450ms var(--ease-out); } .b-row a:hover .b-go { transform: translateX(6px); }
.b-row.hide { display: none; }
.b-peek { position: fixed; left: 0; top: 0; width: clamp(220px, 22vw, 360px); aspect-ratio: 4 / 3; pointer-events: none; z-index: 25; overflow: hidden; opacity: 0; transform: translate3d(-50%, -50%, 0) scale(0.6); }
.b-peek img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (hover: none), (max-width: 900px) { .b-peek { display: none; } }
@media (max-width: 760px) { .b-row a { grid-template-columns: 2.4em minmax(0, 1fr) 1.5em; } .b-row .j-kind, .b-row .b-d { display: none; } }
/* The article: a Lime drop cap, quotes that are highlighted as they arrive, pictures that open, and the next story. */
.j-prose > p:first-of-type::first-letter { float: left; font-size: 3.4em; line-height: 0.82; font-weight: 600; padding: 0.06em 0.1em 0 0.08em; margin: 0.06em 0.14em 0 0; background: var(--wn-lime); color: var(--wn-on-lime); }
.j-prose blockquote p { display: inline; background: linear-gradient(var(--wn-lime), var(--wn-lime)) 0 88% / 0% 0.42em no-repeat; transition: background-size 1100ms var(--ease-out); }
.j-prose blockquote.on p, .site:not(.js) .j-prose blockquote p { background-size: 100% 0.42em; }
.b-next { display: grid; gap: 16px; margin: clamp(64px, 10vh, 120px) auto 0; max-width: var(--site-w); padding: clamp(40px, 7vh, 80px) var(--site-pad); background: var(--wn-deep); color: var(--wn-on-deep); text-decoration: none; position: relative; overflow: hidden; }
.b-next .kicker { color: rgba(245, 244, 236, 0.85); } .b-next .j-meta { color: rgba(245, 244, 236, 0.7); }
.site .b-next-t { font-size: clamp(36px, 6vw, 112px); font-weight: 600; line-height: 0.98; letter-spacing: -0.045em; max-width: 18ch; }
.b-next-bar { position: absolute; left: 0; right: 0; top: 0; height: 6px; background: rgba(245, 244, 236, 0.15); } .b-next-bar i { display: block; height: 100%; background: var(--wn-lime); transform-origin: 0 50%; transform: scaleX(0); }
.b-next:hover .b-next-t { text-decoration: underline; text-decoration-color: var(--wn-lime); text-decoration-thickness: 4px; text-underline-offset: 0.1em; }

/* Write with Wonib, in the blogs editor (owner only). */
.je-ai { background: var(--wn-white); border: 2px solid var(--wn-lime); padding: 16px 20px; margin: 0 0 24px; }
.je-ai summary { cursor: pointer; font-size: 16px; } .je-ai summary b { font-weight: 600; } .je-ai[open] summary { margin-bottom: 16px; }
.je-ai-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-bottom: 16px; } .je-ai-wide { grid-column: 1 / -1; }
.je select { font: 400 15px/1.4 var(--wn-font); padding: 10px; border: 1px solid var(--wn-line-strong); background: var(--wn-white); }
@media (max-width: 760px) { .je-ai-grid { grid-template-columns: 1fr; } }
/* The Solutions opener sits on the same content column as every other section (owner, 27 Oct 2026): its copy starts
   where the column's text starts, and the film's box ends where the column ends, at every screen width. */
.bo-pin { --col-edge: calc(max(0px, (100vw - var(--site-w)) / 2) + var(--site-pad)); }
.bo-copy { left: var(--col-edge); }
.bo-film { --bo-r: var(--col-edge); }
@media (max-width: 760px) { .bo-copy { left: var(--site-pad); right: var(--site-pad); } .bo-film { --bo-r: 16px; } }

/* Blogs, calmer (owner, 28 Oct 2026): one reading line. The featured story stacks (meta, title, summary, link) in one
   column; recent stories sit in three equal columns with the same picture shape, aligned tops and no offsets; the
   cursor preview is smaller; stories without a picture show a typographic cover instead of a reused photograph. */
.j-feature-text { display: block; max-width: 880px; margin: 0; padding: 28px var(--site-pad) 0 calc(max(0px, (100vw - var(--site-w)) / 2) + var(--site-pad)); }
.j-feature-text > * + * { margin-top: 14px; } .j-feature-text h2 { max-width: 22ch; } .j-feature-text .lead { max-width: 60ch; } .j-read { display: inline-block; margin-top: 18px; }
.j-sec-h { font-size: clamp(28px, 2.6vw, 44px); margin: 0 0 24px; padding-bottom: 14px; border-bottom: 2px solid var(--wn-ink); }
.j-recent { margin-top: clamp(72px, 10vh, 120px); }
.j-grid.even { margin-top: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 28px; align-items: start; }
.j-grid.even .j-card { grid-column: auto; margin-top: 0; }
.j-grid.even .j-card-art { aspect-ratio: 3 / 2; } .j-grid.even .j-card-art img { height: 110%; }
.j-grid.even .j-card h3 { font-size: clamp(20px, 1.5vw, 26px); } .j-grid.even .j-ex { font-size: var(--t-small); line-height: 1.5; }
@media (max-width: 1000px) { .j-grid.even { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .j-grid.even { grid-template-columns: minmax(0, 1fr); } }
.b-peek { width: clamp(150px, 13vw, 210px); }
.j-typecover { position: relative; display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 100%; min-height: 100%; background: var(--wn-deep); color: var(--wn-on-deep); padding: clamp(14px, 2vw, 24px); box-sizing: border-box; overflow: hidden; }
.j-typecover .mono { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(245, 244, 236, 0.8); }
.j-typecover i { display: block; width: 22%; aspect-ratio: 1; background: var(--wn-lime); align-self: flex-end; }
.j-feature-frame .j-typecover i { width: 9%; }
.j-feature { --jc: calc(max(0px, (100vw - var(--site-w)) / 2) + var(--site-pad)); }
.j-feature-art { padding: 0 var(--jc); } .j-feature-text { padding-left: var(--jc); padding-right: var(--jc); }

/* ---------- Pages for reach (owner, 28 Oct 2026): solutions, use cases, comparisons, tools, help, changelog ---------- */
.xp-head { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; align-items: center; padding-top: clamp(56px, 9vh, 112px); }
.xp-head h1 { margin: 8px 0 0; max-width: 18ch; } .xp-head .lead { margin-top: 20px; max-width: 58ch; } .xp-head .hero-acts { margin-top: 28px; }
.xp-head .kicker a { color: inherit; }
.xp-mark { aspect-ratio: 4 / 3; background: var(--wn-deep); color: var(--wn-on-deep); display: flex; flex-direction: column; justify-content: space-between; padding: 24px; }
.xp-mark .mono { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; } .xp-mark i { width: 22%; aspect-ratio: 1; background: var(--wn-lime); align-self: flex-end; }
.xp-tool { grid-template-columns: minmax(0, 1fr); } .xp-tool h1 { max-width: 24ch; }
@media (max-width: 860px) { .xp-head { grid-template-columns: minmax(0, 1fr); } .xp-mark { display: none; } }
.xp-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; } .xp-two h2, .xp-faq h2, .xp-links h2 { font-size: clamp(26px, 2.4vw, 40px); margin: 0 0 20px; }
@media (max-width: 760px) { .xp-two { grid-template-columns: minmax(0, 1fr); } }
.xp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .xp-steps li { display: grid; grid-template-columns: 3em 1fr; gap: 12px; align-items: baseline; padding: 16px; background: var(--wn-white); font-size: var(--t-lead); } .xp-steps .mono { font-size: 13px; color: var(--wn-slate); }
.xp-faq { max-width: 860px; } .xp-faq h3 { margin: 28px 0 6px; font-size: var(--t-h3); } .xp-faq p { margin: 0; color: var(--wn-slate); max-width: 64ch; }
.xp-links ul { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--wn-ink); }
.xp-links li a { display: grid; grid-template-columns: minmax(0, 1fr) 2em; gap: 4px 16px; padding: 18px 0; border-bottom: 1px solid var(--wn-line-strong); color: var(--wn-ink); text-decoration: none; position: relative; }
.xp-links li a span { grid-column: 1; color: var(--wn-slate); font-size: var(--t-small); } .xp-links li a i { grid-column: 2; grid-row: 1 / span 2; align-self: center; text-align: right; font-style: normal; font-size: 22px; transition: transform 300ms var(--ease-out); }
.xp-links li a b { font-size: clamp(19px, 1.6vw, 26px); font-weight: 600; } .xp-links li a:hover i { transform: translateX(6px); } .xp-links li a:hover b { text-decoration: underline; text-decoration-color: var(--wn-lime); text-decoration-thickness: 3px; }
.xp-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .xp-points .card { padding: 28px; } .xp-points h3 { margin: 0 0 8px; } .xp-points p { margin: 0; color: var(--wn-slate); }
@media (max-width: 860px) { .xp-points { grid-template-columns: minmax(0, 1fr); } }
.xp-table { border-top: 2px solid var(--wn-ink); margin-top: 8px; } .xp-tr { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--wn-line-strong); } .xp-tr.th { font: 500 12px/1 var(--wn-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--wn-slate); }
.xp-help { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 68ch); gap: 48px; } @media (max-width: 900px) { .xp-help { grid-template-columns: minmax(0, 1fr); } }
.xp-log { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--wn-ink); } .xp-log li { padding: 0 0 36px 28px; position: relative; } .xp-log li::before { content: ''; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; background: var(--wn-lime); }
.xp-log time { font-size: 13px; color: var(--wn-slate); } .xp-log h2 { margin: 6px 0; font-size: clamp(22px, 2vw, 32px); } .xp-log p { margin: 0; max-width: 64ch; }
.stack-more { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
/* The free tools. */
.tool { background: var(--wn-white); padding: clamp(20px, 3vw, 36px); display: grid; gap: 20px; }
.tool label { display: grid; gap: 8px; font: 600 13px/18px var(--wn-font); } .tool select, .tool textarea { font: 400 16px/1.5 var(--wn-font); padding: 12px; border: 1px solid var(--wn-line-strong); background: var(--wn-paper); color: var(--wn-ink); }
.tool-row { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 20px; align-items: end; } .tool-out { margin: 0; color: var(--wn-slate); font-size: 13px; }
.tool-stage { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; align-items: start; }
.sz-frame { position: relative; max-width: 100%; margin: 0 auto; width: 100%; background: var(--wn-deep); touch-action: none; cursor: grab; }
.sz-frame canvas { width: 100%; height: 100%; display: block; } .sz-safe { position: absolute; border: 2px dashed var(--wn-lime); pointer-events: none; }
.tool-side { display: grid; gap: 12px; align-content: start; } .tool-file { justify-self: start; } .tool-drop { display: grid !important; place-items: center; min-height: 180px; border: 2px dashed var(--wn-line-strong); background: var(--wn-paper); cursor: pointer; text-align: center; font-weight: 400 !important; } .tool-drop.over { border-color: var(--wn-ink); }
@media (max-width: 860px) { .tool-row, .tool-stage { grid-template-columns: minmax(0, 1fr); } }
.ct-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .ct-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; } .ct-list i { grid-column: 1 / -1; height: 6px; background: var(--wn-paper); } .ct-list s { display: block; height: 100%; width: 0; background: var(--wn-ink); transition: width 200ms; } .ct-list li.over s { background: #B42318; } .ct-list li.over b { color: #B42318; }
.cl-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; } .cl-list li { display: grid; } .cl-list .sw { display: flex; align-items: flex-end; padding: 10px; aspect-ratio: 4 / 3; font: 500 13px var(--wn-mono); } .cl-list button { border: 0; background: var(--wn-paper); padding: 10px; text-align: left; cursor: pointer; font-size: 14px; }

.tool, .tool-stage > *, .tool-row > * { min-width: 0; } .tool select { max-width: 100%; width: 100%; } .tool-side { grid-template-columns: minmax(0, 1fr); }

.xp-conn ol { margin: 8px 0 0; padding-left: 1.2em; display: grid; gap: 8px; } .xp-code { font: 13px/1.5 var(--wn-mono); background: var(--wn-paper); padding: 2px 6px; word-break: break-all; }

.xp-tr4 { grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); } .xp-pre { background: var(--wn-deep); color: var(--wn-on-deep); padding: 16px 20px; overflow-x: auto; font: 13px/1.6 var(--wn-mono); margin: 16px 0; } .xp-pre code { background: none; color: inherit; padding: 0; }
@media (max-width: 760px) { .xp-tr4 { grid-template-columns: minmax(0, 1fr); } .xp-tr4.th { display: none; } }

/* The Get started pop-up (owner, 28 Oct 2026): fixed to the screen, centred where you are (the browser had been placing it
   at the top of the page and scrolling there); its buttons never wider than the box. */
dialog.start, dialog.start[open] { position: fixed; inset: 0; margin: auto; }
.start .providers .btn, .start .start-email .btn, .start .start-email input { box-sizing: border-box; width: 100%; min-width: 0; }
.start .providers .btn { white-space: normal; text-align: center; }

/* Languages (owner, 28 Oct 2026): a small menu beside Login, and the four languages in the footer. */
.langs { position: relative; } .langs summary { list-style: none; cursor: pointer; font: 500 13px/1 var(--wn-mono); letter-spacing: 0.08em; padding: 10px 8px; color: var(--wn-ink); }
.langs summary::-webkit-details-marker { display: none; } .langs summary::after { content: ' ▾'; font-size: 10px; }
.langs-menu { position: absolute; right: 0; top: calc(100% + 6px); background: var(--wn-white); border: 1px solid var(--wn-line-strong); display: grid; min-width: 150px; z-index: 30; box-shadow: 0 8px 24px rgba(18, 46, 39, 0.12); }
.langs-menu a { padding: 12px 16px; color: var(--wn-ink); text-decoration: none; } .langs-menu a:hover, .langs-menu a:focus-visible { background: var(--wn-paper); } .langs-menu a[aria-current] { font-weight: 600; }
.foot-langs { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 16px; grid-column: 1 / -1; } .foot-langs a { color: inherit; opacity: 0.8; } .foot-langs a[aria-current] { opacity: 1; font-weight: 600; text-decoration: underline; }
html[lang="hi"] .site { --wn-font: 'Instrument Sans', 'Noto Sans Devanagari', system-ui, sans-serif; }
/* Language links: full-size targets; on small screens the header menu leaves languages to the footer. */
.langs summary { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; box-sizing: border-box; }
.langs-menu a { min-height: 44px; box-sizing: border-box; display: flex; align-items: center; }
.foot-langs a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0 4px; box-sizing: border-box; }
@media (max-width: 1099px) { .top .langs { display: none; } }
/* The hello wall (owner, 29 Oct 2026): room under every script. Arabic, Urdu and Devanagari reach well below the line,
   so the word gets a taller line and the language label sits clearly beneath it. */
.hello-word { height: calc(1.72em + 36px); }
.hw-text { line-height: 1.3; padding-bottom: 0.06em; }
.hw-lang { margin-top: 14px; }

/* Who it's for (owner, 29 Oct 2026): three doors on the home page. */
.who-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.who-card { display: grid; gap: 8px; padding: 28px; background: var(--wn-white); color: var(--wn-ink); text-decoration: none; border-top: 4px solid var(--wn-lime); transition: transform 300ms var(--ease-out); }
.who-card h3 { margin: 0; font-size: clamp(22px, 2vw, 30px); } .who-card p { margin: 0; color: var(--wn-slate); } .who-card span { font-size: 22px; justify-self: end; }
.who-card:hover, .who-card:focus-visible { transform: translateY(-4px); }
@media (max-width: 860px) { .who-grid { grid-template-columns: minmax(0, 1fr); } }

/* One workspace (owner, 29 Oct 2026): promises instead of figures, which change. */
.pros-h { margin: 8px 0 24px; font-size: clamp(24px, 2.4vw, 40px); }
.pros { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pros li { display: grid; gap: 8px; align-content: start; padding: 24px; border-top: 4px solid var(--wn-lime); }
.pros b { font-size: clamp(18px, 1.5vw, 22px); font-weight: 600; line-height: 1.25; } .pros span { color: var(--wn-slate); }
@media (max-width: 1000px) { .pros { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pros { grid-template-columns: minmax(0, 1fr); } }

/* Connect (owner, 29 Oct 2026): the header menu, the hub, the tabs, the illustrated chat and the prompt cards. */
.nav-conn { position: relative; } .nav-conn summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; } .nav-conn summary::-webkit-details-marker { display: none; } .nav-conn summary::after { content: ' ▾'; font-size: 10px; margin-left: 4px; }
.nav-conn-menu { position: absolute; left: -12px; top: calc(100% + 8px); width: 320px; background: var(--wn-deep); color: var(--wn-on-deep); padding: 12px; display: grid; gap: 2px; z-index: 40; box-shadow: 0 16px 40px rgba(18, 46, 39, 0.25); }
.nav-conn-menu p { margin: 4px 8px 8px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; }
.nav-conn-menu a { display: grid; gap: 2px; padding: 10px 12px; color: inherit; text-decoration: none; } .nav-conn-menu a span { font-size: 13px; opacity: 0.75; } .nav-conn-menu a:hover, .nav-conn-menu a:focus-visible { background: rgba(245, 244, 236, 0.08); }
.nav-conn-menu a b { font-weight: 600; } .nav-conn-menu .nav-conn-all { color: var(--wn-lime); font-weight: 600; border-top: 1px solid rgba(245, 244, 236, 0.15); margin-top: 6px; }
.cp-head { align-items: start; } .cp-head .kicker a { color: inherit; }
.cp-copy { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-top: 24px; padding: 10px 10px 10px 16px; background: var(--wn-deep); color: var(--wn-on-deep); }
.cp-copy .mono { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; } .cp-copy code { font: 14px/1.4 var(--wn-mono); overflow-x: auto; white-space: nowrap; }
@media (max-width: 640px) { .cp-copy { grid-template-columns: minmax(0, 1fr); } }
.cp-chat { background: var(--wn-white); border: 1px solid var(--wn-line-strong); padding: 0 0 16px; font-size: 15px; }
.cp-bar { font-size: 12px; letter-spacing: 0.06em; padding: 12px 16px; border-bottom: 1px solid var(--wn-line-strong); color: var(--wn-slate); }
.cp-me { margin: 16px 16px 12px auto; max-width: 80%; background: var(--wn-paper); padding: 12px 14px; }
.cp-you { margin: 0 16px; border-left: 4px solid var(--wn-lime); padding: 4px 0 4px 14px; } .cp-you p { margin: 6px 0; } .cp-you .mono { font-size: 12px; color: var(--wn-slate); } .cp-ok { color: var(--wn-ink) !important; }
.cp-tabs { display: flex; gap: 4px; overflow-x: auto; padding: 0 var(--site-pad); max-width: var(--site-w); margin: 0 auto; border-bottom: 1px solid var(--wn-line-strong); }
.cp-tabs a { padding: 14px 16px; white-space: nowrap; color: var(--wn-slate); text-decoration: none; border-bottom: 3px solid transparent; } .cp-tabs a[aria-current] { color: var(--wn-ink); border-bottom-color: var(--wn-lime); font-weight: 600; }
.cp-tools { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.cp-tools a { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 20px; background: var(--wn-white); color: var(--wn-ink); text-decoration: none; border-top: 4px solid var(--wn-lime); } .cp-tools span { grid-column: 1; color: var(--wn-slate); font-size: 14px; } .cp-tools i { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; }
.cp-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 24px; } .cp-filter button { min-height: 44px; padding: 10px 16px; border: 1px solid var(--wn-ink); background: transparent; color: var(--wn-ink); font: 500 14px var(--wn-font); cursor: pointer; } .cp-filter button[aria-pressed="true"] { background: var(--wn-ink); color: var(--wn-paper); }
.cp-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1000px) { .cp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .cp-grid { grid-template-columns: minmax(0, 1fr); } }
.cp-card { display: grid; gap: 10px; align-content: start; padding: 24px; background: var(--wn-white); } .cp-card h3 { margin: 0; } .cp-card h3 a { color: inherit; } .cp-card p { margin: 0; color: var(--wn-slate); } .cp-cat { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.cp-prompt { margin: 0; padding: 12px 14px; background: var(--wn-paper); font: 14px/1.5 var(--wn-mono); border-left: 4px solid var(--wn-lime); } .cp-prompt.big { font-size: 16px; padding: 18px 20px; }
.cp-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
@media (min-width: 1100px) { .nav-conn-m { display: none !important; } }
@media (max-width: 1099px) { .nav-conn { display: none; } }
.cp-card[hidden] { display: none; }

/* The header (owner, 29 Oct 2026): a Deep strip on top with the three promises; the bar below gets a Lime underline
   that wipes in on hover, a Lime reading line along its bottom, and on scroll turns into a floating Deep panel. */
.site { --tl: 32px; }
.topline { box-sizing: border-box; height: 32px; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 8px var(--site-pad); background: var(--wn-deep); color: var(--wn-on-deep); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.topline.hide { display: none; } .topline span { display: inline-flex; align-items: center; gap: 10px; } .topline i { width: 8px; height: 8px; background: var(--wn-lime); display: inline-block; }
.topline a { color: var(--wn-lime); text-decoration: none; min-height: 44px; margin: -10px 0; display: inline-flex; align-items: center; } .topline a:hover { text-decoration: underline; }
@media (max-width: 760px) { .topline a { display: none; } .topline { justify-content: center; font-size: 11px; } }
.top { position: sticky; top: 0; transition: background 300ms var(--ease), color 300ms var(--ease), margin 300ms var(--ease), box-shadow 300ms var(--ease); }
.top-progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--wn-lime); transform-origin: 0 50%; transform: scaleX(var(--read, 0)); pointer-events: none; }
@media (min-width: 1100px) {
  .top.scrolled { margin: 8px var(--site-pad) 0; background: var(--wn-deep); color: var(--wn-on-deep); border-bottom-color: transparent; box-shadow: 0 12px 32px rgba(18, 46, 39, 0.22); top: 8px; }
  .top.scrolled .menu > a, .top.scrolled .nav-conn summary, .top.scrolled .login, .top.scrolled .langs summary { color: var(--wn-on-deep); }
  .top.scrolled .logo { color: var(--wn-lime); }
  .top.scrolled .acts .btn.primary { background: var(--wn-lime); color: var(--wn-on-lime); }
}
@media (prefers-reduced-motion: reduce) { .top, .top .menu > a::after { transition: none; } }
.top .nav-conn summary { font: 500 var(--t-small)/20px var(--wn-font); padding: 8px 0; color: inherit; }
/* The footer site map: six columns of links, each a full-size target. */
.foot-map { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(245, 244, 236, 0.15); }
.foot-map div { display: grid; align-content: start; } .foot-map .foot-h { margin: 0 0 4px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; }
.foot-map a { display: flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; } .foot-map a:hover { text-decoration: underline; }
@media (max-width: 1100px) { .foot-map { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { .foot-map { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .topline { font-size: 12px; } }

/* The header, as a grid (owner, 29 Oct 2026). The bar is drawn like the hero's composing grid: every menu item is a cell
   between hairlines, the full height of the bar. On hover the cell fills with Lime in chunky steps (the mosaic, in
   miniature) while the label rolls up and a copy rolls in: one movement, no lines. The current page carries a Lime
   square, like the kickers. On scroll the bar floats as a Deep panel and the cells keep their hairlines. */
@media (min-width: 1100px) {
  .top { align-items: stretch; padding-top: 0; padding-bottom: 0; gap: 0; }
  .top .logo { padding-right: 28px; margin-right: 0; border-right: 1px solid var(--wn-line); align-self: stretch; }
  .top .menu { gap: 0; align-self: stretch; align-items: stretch; }
  .top .menu > a, .top .nav-conn > summary { position: relative; display: flex; align-items: center; gap: 8px; padding: 0 18px; min-height: 64px; height: 100%; box-sizing: border-box; border: 0; border-right: 1px solid var(--wn-line); color: var(--wn-ink); overflow: hidden; isolation: isolate; font: 500 var(--t-small)/20px var(--wn-font); }
  .top .nav-conn { display: flex; align-self: stretch; } .top .nav-conn > summary::after { content: '+'; font: 500 13px/1 var(--wn-mono); margin-left: 2px; transition: transform 300ms var(--ease-out); } .top .nav-conn[open] > summary::after { transform: rotate(45deg); }
  .top .menu > a::before, .top .nav-conn > summary::before { content: ''; position: absolute; inset: 0; background: var(--wn-lime); transform: scaleY(0); transform-origin: 50% 100%; transition: transform 360ms steps(5, end); z-index: -1; }
  .top .menu > a:hover::before, .top .menu > a:focus-visible::before, .top .nav-conn > summary:hover::before, .top .nav-conn[open] > summary::before { transform: scaleY(1); }
  .top .menu > a:hover, .top .nav-conn > summary:hover, .top .nav-conn[open] > summary { color: var(--wn-on-lime); }
  .nl { position: relative; display: inline-block; overflow: hidden; height: 20px; } .nl > span { display: block; transition: transform 420ms var(--ease-out); } .nl > span + span { position: absolute; left: 0; top: 100%; }
  .top .menu > a:hover .nl > span, .top .menu > a:focus-visible .nl > span, .top .nav-conn > summary:hover .nl > span { transform: translateY(-100%); }
  .top .menu > a[aria-current="page"]::after, .top .nav-conn > summary[aria-current="page"] > .nl::before { content: ''; position: absolute; left: 8px; top: 50%; width: 5px; height: 5px; margin-top: -3px; background: var(--wn-lime); }
  .top .menu > a[aria-current="page"] { padding-left: 22px; }
  .top .acts { align-self: stretch; gap: 0; } .top .acts .langs, .top .acts .login { display: flex; align-items: center; padding: 0 16px; border-left: 1px solid var(--wn-line); }
  .top .acts .login { border-bottom: 0; } .top .acts .login:hover { background: var(--wn-paper); } .top .acts .btn.primary { align-self: stretch; display: flex; align-items: center; }
  .top.scrolled .logo, .top.scrolled .menu > a, .top.scrolled .nav-conn > summary, .top.scrolled .acts .langs, .top.scrolled .acts .login { border-color: rgba(245, 244, 236, 0.14); }
  .top.scrolled .menu > a, .top.scrolled .nav-conn > summary { color: var(--wn-on-deep); }
  .top.scrolled .menu > a:hover, .top.scrolled .nav-conn > summary:hover, .top.scrolled .nav-conn[open] > summary { color: var(--wn-on-lime); }
  .top.scrolled .acts .login:hover { background: rgba(245, 244, 236, 0.08); }
}
@media (prefers-reduced-motion: reduce) { .nl > span, .top .menu > a::before, .top .nav-conn > summary::before { transition: none; } }
@media (min-width: 1100px) { .top .nav-conn[open] > summary { background: var(--wn-lime); } }
details.nav-conn:not([open]) > .nav-conn-menu, details.langs:not([open]) > .langs-menu { display: none; }
/* Butter-smooth fill (owner, 29 Oct 2026): the Lime rises from the bottom in one continuous, eased motion instead of
   steps, on its own compositor layer; it sinks back a little faster when the pointer leaves. The label roll follows
   the same curve, so fill and text move as one. */
@media (min-width: 1100px) {
  .top .menu > a::before, .top .nav-conn > summary::before { transition: transform 560ms cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; backface-visibility: hidden; }
  .top .menu > a:not(:hover):not(:focus-visible)::before, .top .nav-conn:not([open]) > summary:not(:hover)::before { transition-duration: 420ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  .nl > span { transition: transform 560ms cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; }
  .top .menu > a, .top .nav-conn > summary { transition: color 360ms cubic-bezier(0.22, 1, 0.36, 1); }
  .top .nav-conn[open] > summary { background: transparent; } .top .nav-conn[open] > summary::before { transform: scaleY(1); }
}

/* ---------- The footer (owner, 29 Oct 2026): a Deep stage with a closing call, a ticker, the site map as a grid of
   cells that fill with Lime like the header, a side column (brand, languages, follow, Raipur time), a giant Wonib
   wordmark that composes itself out of mosaic cells as it scrolls in, and a quiet legal line. ---------- */
.site .ft { background: var(--wn-deep); color: var(--wn-on-deep); padding: 0; margin-top: clamp(64px, 10vh, 120px); overflow: hidden; }
.ft a { color: inherit; }
.ft-cta { border-bottom: 1px solid rgba(245, 244, 236, 0.14); }
.ft-cta-in { max-width: var(--site-w); margin: 0 auto; padding: clamp(56px, 9vh, 112px) var(--site-pad) clamp(40px, 6vh, 72px); box-sizing: border-box; }
.ft-k { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(245, 244, 236, 0.8); } .ft-k i { width: 8px; height: 8px; background: var(--wn-lime); }
.ft-cta-h { margin: 20px 0 0; font-size: clamp(40px, 6.4vw, 112px); line-height: 0.98; letter-spacing: -0.045em; max-width: 16ch; color: var(--wn-on-deep); }
.ft-cta-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 32px; }
.ft-mail { display: inline-grid; gap: 2px; text-decoration: none; font-size: clamp(18px, 1.6vw, 24px); font-weight: 600; min-height: 44px; align-content: center; }
.ft-mail .mono { font-size: 12px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; } .ft-mail:hover { color: var(--wn-lime); }
.ft-ticker { background: var(--wn-lime); color: var(--wn-on-lime); overflow: hidden; border-top: 1px solid rgba(245, 244, 236, 0.14); }
.ft-ticker > div { display: flex; width: max-content; align-items: center; gap: 24px; padding: 12px 0; animation: ft-tick 42s linear infinite; font: 600 clamp(16px, 1.4vw, 22px)/1 var(--wn-font); white-space: nowrap; }
.ft-ticker i { width: 7px; height: 7px; background: var(--wn-deep); display: inline-block; } @keyframes ft-tick { to { transform: translate3d(-50%, 0, 0); } }
.ft-body { max-width: var(--site-w); margin: 0 auto; padding: clamp(48px, 7vh, 88px) var(--site-pad) 32px; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr); gap: 48px; }
.site .ft .ft-map { grid-column: auto; margin: 0; padding: 0; border: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid rgba(245, 244, 236, 0.14); border-left: 1px solid rgba(245, 244, 236, 0.14); }
.ft-map > div { padding: 20px 0 16px; border-right: 1px solid rgba(245, 244, 236, 0.14); border-bottom: 1px solid rgba(245, 244, 236, 0.14); }
.ft-map .foot-h { padding: 0 20px; margin-bottom: 8px; color: var(--wn-lime); opacity: 1; }
.ft-map a { position: relative; isolation: isolate; padding: 0 20px; justify-content: space-between; transition: color 360ms cubic-bezier(0.22, 1, 0.36, 1); }
.ft-map a::before { content: ''; position: absolute; inset: 2px 8px; background: var(--wn-lime); transform: scaleX(0); transform-origin: 0 50%; transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1); z-index: -1; }
.ft-map a::after { content: '→'; opacity: 0; transform: translateX(-8px); transition: opacity 360ms, transform 520ms cubic-bezier(0.22, 1, 0.36, 1); }
.ft-map a:hover, .ft-map a:focus-visible { color: var(--wn-on-lime); text-decoration: none; } .ft-map a:hover::before, .ft-map a:focus-visible::before { transform: scaleX(1); } .ft-map a:hover::after, .ft-map a:focus-visible::after { opacity: 1; transform: none; }
.ft-side { display: grid; gap: 28px; align-content: start; } .ft-brand .word { width: 104px; height: 28px; color: var(--wn-lime); } .ft-brand p { margin: 12px 0 0; opacity: 0.8; font-size: var(--t-small); }
.ft-h { margin: 0 0 8px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; }
.ft .foot-langs { margin: 0; gap: 4px 16px; } .ft-social { display: grid; } .ft-social a { display: flex; align-items: center; min-height: 44px; text-decoration: none; } .ft-social a:hover { color: var(--wn-lime); }
.ft-clock { margin: 0; font-size: 12px; letter-spacing: 0.08em; opacity: 0.75; }
.ft-giant { position: relative; max-width: var(--site-w); margin: 0 auto; padding: 0 var(--site-pad); box-sizing: border-box; color: var(--wn-lime); }
.ft-giant svg { display: block; width: 100%; height: auto; }
.ft-cells { position: absolute; inset: 0 var(--site-pad); display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(4, 1fr); pointer-events: none; }
.ft-cells i { background: var(--wn-deep); margin: -0.5px; }
.ft-giant.in .ft-cells i { animation: ft-cell 900ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--o) * 22ms) both; }
@keyframes ft-cell { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.2); } }
.site:not(.js) .ft-cells, .ft-giant.done .ft-cells { display: none; }
.ft-base { max-width: var(--site-w); margin: 0 auto; padding: 24px var(--site-pad) 32px; box-sizing: border-box; display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: center; justify-content: space-between; border-top: 1px solid rgba(245, 244, 236, 0.14); }
.ft-base p { margin: 0; font-size: 12px; opacity: 0.7; } .ft-legal { display: flex; gap: 20px; } .ft-legal a { min-height: 44px; display: inline-flex; align-items: center; font-size: var(--t-small); }
.ft-top { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid rgba(245, 244, 236, 0.3); text-decoration: none; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; transition: background 360ms, color 360ms; } .ft-top:hover { background: var(--wn-lime); color: var(--wn-on-lime); border-color: var(--wn-lime); }
@media (max-width: 1000px) { .ft-body { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .site .ft .ft-map { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ft-cells { grid-template-columns: repeat(6, 1fr); } }
@media (prefers-reduced-motion: reduce) { .ft-ticker > div { animation: none; } .ft-cells { display: none; } .ft-map a::before, .ft-map a::after { transition: none; } }

.site .ft { max-width: none; width: auto; margin-left: 0; margin-right: 0; border: 0; padding: 0 0 env(safe-area-inset-bottom, 0); }
.site .ft section.ft-cta { max-width: none; padding: 0; margin: 0; }
.ft-legal a { min-width: 44px; justify-content: center; } .ft .foot-langs a, .ft-map a { min-width: 44px; }

.book { transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), opacity 420ms; } .book.book-away { transform: translateY(110%); opacity: 0; pointer-events: none; }

/* Signed-in pages: a compact footer, and full-size small links. */
.site .ft.ft-bare { margin-top: 48px; } .ft-bare .ft-body { padding-top: 32px; }
.tl { display: inline-flex; align-items: center; min-height: 44px; }

/* Sign-in, sign-up and owner pages on phones: the card never wider than the screen. */
.frame-card { max-width: 100%; min-width: 0; box-sizing: border-box; } .frame { min-width: 0; } @media (max-width: 520px) { .frame-card { width: 100%; padding-left: 16px; padding-right: 16px; } }

/* Dropdowns on sign-in, sign-up, account and owner pages look like dropdowns (owner, 29 Oct 2026): a visible box,
   a chevron, the same height as the text fields. */
.frame-card select, .je select, .box select { -webkit-appearance: none; appearance: none; width: 100%; box-sizing: border-box; min-height: 48px; font: inherit; color: var(--wn-ink); padding: 12px 44px 12px 14px; border: 1px solid var(--wn-line-strong); border-radius: 2px; background: var(--wn-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23122E27' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 16px center; cursor: pointer; }
.frame-card select:hover, .box select:hover { border-color: var(--wn-ink); } .frame-card select:focus-visible, .box select:focus-visible { outline: 2px solid var(--wn-ink); outline-offset: 2px; }

/* Wide signed-in pages (Social accounts, Site pictures, New accounts): the card uses the page width. */
.frame-wide .frame-card { width: min(100%, 1200px); }
/* Sections inside a framed card are parts of one card, not page sections: no page padding, modest headings. */
.site .frame-card section { padding: 0; margin: 24px 0 0; max-width: none; }
.site .frame-card h2 { font-size: clamp(20px, 1.8vw, 26px); line-height: 1.2; margin: 0 0 8px; letter-spacing: -0.01em; }
.site .frame-card input[type=file] { width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid var(--wn-line-strong); background: var(--wn-white); font: inherit; }
.site .frame-card [hidden] { display: none !important; }
/* Hero buttons (owner, 30 Oct 2026): a clear gap between them; each still starts on its column line. */
@media (min-width: 1000px) and (min-height: 620px) { .hero.cine .hero-acts .btn { width: calc(100% - 12px); } }
.xp-photo { margin: 0; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--wn-deep); }
.xp-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.xp-photo figcaption { position: absolute; left: 16px; top: 16px; padding: 6px 10px; background: var(--wn-deep); color: var(--wn-on-deep); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.xp-photo::after { content: ''; position: absolute; right: 16px; bottom: 16px; width: 18%; aspect-ratio: 1; background: var(--wn-lime); }