/* Lio, the website guide (/guide). Ported from docs/lio/lio-demo.html and
   scoped under .iso-app: every stylesheet in this directory ships site-wide,
   so nothing here may leak. Core colours and fonts point at the brand tokens
   from the Tailwind @theme; the auxiliary navy shades are Lio's own. The
   demo's dark palette is the page's only theme: the owner compared both and
   chose it, so there are no light/dark blocks, just these values. The stage
   sits under the sticky 64px nav, hence the 4rem offsets. */

.iso-app {
  --navy: var(--color-brand-navy, #091435);
  --navy-900: var(--color-brand-navy-deep, #060d24);
  --navy-700: #15204a;
  --navy-600: #25315f;
  --blue: var(--color-brand-blue, #8eb8df);
  --blue-300: var(--color-brand-on-navy, #b7d2ec);
  --blue-100: var(--color-brand-blue-faint, #edf4fb);
  --orange: var(--color-brand-orange, #f09124);
  --on-dark-3: var(--color-brand-on-navy-dim, #8c97b5);
  --f-display: var(--font-display, "Funnel Display", system-ui, sans-serif);
  --f-body: var(--font-body, "Figtree", system-ui, sans-serif);
  --ease: cubic-bezier(.16,1,.3,1);
  --ground: var(--navy-900);
  --ground-2: var(--navy);
  --card: #101a40;
  --ink: #ffffff;
  --ink-2: var(--blue-300);
  --ink-3: var(--on-dark-3);
  --line: var(--navy-600);
  --soft: var(--navy-700);
  --focus: rgba(142,184,223,.6);
  --offer-bg: var(--navy-700);
  --offer-line: var(--navy-600);
  --shadow-md: 0 4px 10px rgba(0,0,0,.3);
  --shadow-lg: 0 18px 40px rgba(0,0,0,.4);
  background: var(--ground);
  color: var(--ink);
  font: 400 1rem/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.iso-app *, .iso-app *::before, .iso-app *::after { box-sizing: border-box }
.iso-app [hidden] { display: none !important }
.iso-app img { max-width: 100% }
.iso-app button, .iso-app input, .iso-app textarea { font: inherit; color: inherit }
.iso-app button { cursor: pointer }
.iso-app :focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus) }
.iso-app a { color: inherit }

.iso-app .app { display: grid; grid-template-columns: minmax(380px,460px) minmax(0,1fr); min-height: calc(100vh - 4rem) }

/* ───────── Stage: Lio and the conversation ───────── */
.iso-app .stage { position: sticky; top: 4rem; align-self: start; height: calc(100vh - 4rem); height: calc(100dvh - 4rem); display: flex; flex-direction: column; background: var(--navy); color: #fff; border-right: 1px solid var(--navy-600); overflow: hidden; isolation: isolate }
/* The site's pattern.svg carries no fill of its own (it paints black), so it
   rides as a mask over brand blue, the way xv-shape colours its shapes. */
.iso-app .stage::before, .iso-app.lio-door::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .09; background: var(--blue); -webkit-mask: var(--iso-pattern) center top/560px; mask: var(--iso-pattern) center top/560px }
.iso-app .stage-top { display: flex; align-items: center; gap: 12px; padding: 18px 20px 0 }
.iso-app .stage-tools { margin-left: auto; display: flex; gap: 6px }
.iso-app .tool { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--navy-600); background: transparent; color: var(--blue-300); font: 600 .82rem/1 var(--f-body); white-space: nowrap; transition: border-color .22s, color .22s, background .22s }
.iso-app .tool.bare { width: 36px; padding: 0; justify-content: center }
.iso-app .tool:hover { border-color: var(--blue); color: #fff }
.iso-app .tool[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: var(--navy) }
.iso-app .tool svg, .iso-app .icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none }

.iso-app .avatar { flex: none; height: clamp(170px, 29vh, 290px); display: flex; justify-content: center; padding-top: 4px }
.iso-app .lio { height: 100%; width: auto; overflow: visible; cursor: pointer }
.iso-app .f-top { fill: var(--navy-600) }
.iso-app .f-left { fill: var(--navy-700) }
.iso-app .f-right { fill: #1c2a5c }
.iso-app .f-top, .iso-app .f-left, .iso-app .f-right { stroke: var(--blue); stroke-width: 2.5; stroke-linejoin: round }
.iso-app .lio-shadow { fill: var(--navy-900); opacity: .85; transform-box: fill-box; transform-origin: center }
.iso-app #lioAll { transform-box: fill-box; transform-origin: center }
.iso-app .eye { fill: #fff; transform-box: fill-box; transform-origin: center; transition: transform .07s linear }
.iso-app .lio.listening .eye { transform: scale(1.12) }
.iso-app .lio.blink .eye { transform: scaleY(.08) }
.iso-app .eye-happy, .iso-app .eye-calm { fill: none; stroke: #fff; stroke-width: 4.5; stroke-linecap: round; display: none }
.iso-app .lio.calm .eye { display: none }
.iso-app .lio.calm .eye-calm { display: block }
.iso-app .lio.happy .eye, .iso-app .lio.happy .eye-calm { display: none }
.iso-app .lio.happy .eye-happy { display: block }
.iso-app .halo { fill: var(--blue); fill-opacity: .06; stroke: var(--blue); stroke-width: 1.5; stroke-linejoin: round; transform-box: fill-box; transform-origin: center }
.iso-app .halo.h1 { stroke-opacity: .55 }
.iso-app .halo.h2 { stroke-opacity: .32 }
.iso-app .halo.h3 { stroke-opacity: .17 }
.iso-app .spark { fill: none; stroke: var(--blue); stroke-width: 1.5; opacity: 0 }
.iso-app #lioHead, .iso-app #handL { transform-box: fill-box; transform-origin: center }
.iso-app .mouth-fill { fill: var(--navy-900) }
.iso-app .mouth-line { fill: none; stroke: #fff; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round }
.iso-app .ring { fill: none; stroke: var(--orange); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center }
.iso-app .lio.listening #orb path { fill: var(--orange); stroke: var(--orange) }
.iso-app #orb path { transition: fill .22s, stroke .22s }
.iso-app #handR { transform-box: fill-box; transform-origin: center }
@media (prefers-reduced-motion: no-preference) {
  .iso-app #lioAll { animation: lio-float 4.5s ease-in-out infinite alternate }
  .iso-app #handL, .iso-app #handR { animation: lio-drift 4.5s ease-in-out infinite alternate }
  .iso-app .halo { animation: lio-breathe 4.5s ease-in-out infinite alternate }
  .iso-app .halo.h2 { animation-delay: -.8s }
  .iso-app .halo.h3 { animation-delay: -1.6s }
  .iso-app .spark { animation: lio-ascend 11s linear infinite }
  .iso-app .spark.s2 { animation-delay: -2s }
  .iso-app .spark.s3 { animation-delay: -4.5s }
  .iso-app .spark.s4 { animation-delay: -6s }
  .iso-app .spark.s5 { animation-delay: -8s }
  .iso-app .spark.s6 { animation-delay: -9.5s }
  .iso-app .lio.welcome #lioHead { animation: lio-nod 1.5s var(--ease) 1 }
  .iso-app .lio.welcome #handL { animation: lio-openL 1.5s var(--ease) 1 }
  .iso-app .lio.welcome #handR { animation: lio-openR 1.5s var(--ease) 1 }
  .iso-app .lio.listening .ring { animation: lio-ping 1.5s var(--ease) infinite }
  .iso-app .lio.listening .ring2 { animation-delay: .75s }
  .iso-app .lio.thinking #orb { animation: lio-bob .7s ease-in-out infinite alternate }
  /* Tap Lio and he performs: a little dance, a spin (the mirror flip reads
     as a full turn on an isometric body), a jump the shadow reacts to, or a
     head wiggle. One at a time, picked at random in the controller. */
  .iso-app .lio.move-dance #lioAll { animation: lio-groove 1.6s var(--ease) 1 }
  .iso-app .lio.move-dance #lioHead { animation: lio-groove-head 1.6s var(--ease) 1 }
  .iso-app .lio.move-dance #handL { animation: lio-groove-hl 1.6s var(--ease) 1 }
  .iso-app .lio.move-dance #handR { animation: lio-groove-hr 1.6s var(--ease) 1 }
  .iso-app .lio.move-spin #lioAll { animation: lio-spin 1.1s var(--ease) 1 }
  .iso-app .lio.move-jump #lioAll { animation: lio-jump 1.2s var(--ease) 1 }
  .iso-app .lio.move-jump .lio-shadow { animation: lio-jump-shadow 1.2s var(--ease) 1 }
  .iso-app .lio.move-wiggle #lioHead { animation: lio-wiggle 1.2s var(--ease) 1 }
  .iso-app .lio.move-wiggle #orb { animation: lio-bob .6s ease-in-out 2 alternate }
  @keyframes lio-groove { 0%, 100% { transform: none } 12%, 37%, 62%, 87% { transform: translateY(-10px) } 25%, 50%, 75% { transform: translateY(2px) } }
  @keyframes lio-groove-head { 0%, 100% { transform: none } 20% { transform: rotate(-8deg) } 45% { transform: rotate(8deg) } 70% { transform: rotate(-6deg) } }
  @keyframes lio-groove-hl { 0%, 100% { transform: none } 12%, 62% { transform: translate(-10px, -70px) } 37%, 87% { transform: translateY(6px) } }
  @keyframes lio-groove-hr { 0%, 100% { transform: none } 12%, 62% { transform: translateY(6px) } 37%, 87% { transform: translate(10px, -70px) } }
  @keyframes lio-spin { 0%, 100% { transform: none } 20% { transform: translateY(4px) scaleX(1) } 35% { transform: translateY(-18px) scaleX(.1) } 50% { transform: translateY(-24px) scaleX(-1) } 65% { transform: translateY(-18px) scaleX(.1) } 80% { transform: translateY(4px) scaleX(1) } }
  @keyframes lio-jump { 0%, 100% { transform: none } 18% { transform: translateY(8px) scaleY(.92) } 45% { transform: translateY(-34px) } 75% { transform: translateY(6px) scaleY(.95) } }
  @keyframes lio-jump-shadow { 0%, 100% { transform: none; opacity: .85 } 45% { transform: scale(.72); opacity: .4 } }
  @keyframes lio-wiggle { 0%, 100% { transform: none } 15%, 45%, 75% { transform: rotate(-7deg) } 30%, 60%, 90% { transform: rotate(7deg) } }
  @keyframes lio-float { to { transform: translateY(-7px) } }
  @keyframes lio-drift { to { transform: translateY(5px) } }
  @keyframes lio-breathe { from { transform: scale(.97) } to { transform: scale(1.05) } }
  @keyframes lio-ascend { 0% { transform: translateY(0); opacity: 0 } 15% { opacity: .55 } 70% { opacity: .3 } 100% { transform: translateY(-190px); opacity: 0 } }
  @keyframes lio-nod { 0%, 100% { transform: none } 35%, 55% { transform: translateY(8px) } }
  @keyframes lio-openL { 0%, 100% { transform: none } 35%, 60% { transform: translate(-14px,-30px) } }
  @keyframes lio-openR { 0%, 100% { transform: none } 35%, 60% { transform: translate(14px,-30px) } }
  @keyframes lio-ping { from { transform: scale(1); opacity: .7 } to { transform: scale(2.8); opacity: 0 } }
  @keyframes lio-bob { to { transform: translateY(-9px) } }
}
.iso-app .lio.listening .ring { opacity: .5 }

.iso-app .status { min-height: 2.7em; padding: 2px 24px 0; text-align: center; font: 500 .8rem/1.35 var(--f-body); color: var(--on-dark-3); margin: 0 }
.iso-app .status b { color: var(--orange); font-weight: 600 }

.iso-app .thread { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding: 10px 20px 8px; display: flex; flex-direction: column; gap: 12px; scrollbar-width: thin; scrollbar-color: var(--navy-600) transparent }
.iso-app .thread > :first-child { margin-top: auto }
.iso-app .msg { max-width: 94%; font-size: .95rem; line-height: 1.5; overflow-wrap: anywhere }
.iso-app .msg.lio { align-self: flex-start; color: var(--blue-300) }
.iso-app .msg.lio.now { max-width: 100%; font: 700 clamp(1.25rem, 1.1rem + .6vw, 1.55rem)/1.22 var(--f-display); letter-spacing: -.01em; color: #fff; text-wrap: pretty }
.iso-app .msg.lio.now.long { font-size: clamp(1.05rem, 1rem + .25vw, 1.2rem); line-height: 1.3 }
.iso-app .msg.lio.now .w { opacity: .3; transition: opacity .22s }
.iso-app .msg.lio.now .w.lit { opacity: 1 }
/* Lio preparing a line: three dots where it will land, so a wait never looks
   stuck. They take no room and stay hidden for a moment, so a line that is
   ready at once never flashes them. */
.iso-app .thread.thinking::after { content: ""; flex: none; align-self: flex-start; width: 36px; height: 0; margin-top: -12px; opacity: 0; color: var(--blue-300); background: radial-gradient(circle closest-side, currentColor 88%, transparent) 0 / calc(100% / 3) 100% space; animation: lio-wait-in 0s .25s forwards }
.iso-app[data-track=""] .thread.thinking::after { align-self: center }
@keyframes lio-wait-in { to { height: 9px; margin-top: 0; opacity: 1 } }
@media (prefers-reduced-motion: no-preference) {
  .iso-app .thread.thinking::after { animation: lio-wait-in 0s .25s forwards, lio-wait 1.2s steps(3) .25s infinite }
  @keyframes lio-wait { from { clip-path: inset(0 67% 0 0) } to { clip-path: inset(0 -34% 0 0) } }
}
.iso-app .msg.me { align-self: flex-end; background: var(--navy-700); border: 1px solid var(--navy-600); border-radius: 16px 16px 4px 16px; padding: 8px 14px; color: #fff }

.iso-app .chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 20px 0 }
.iso-app .chips:empty { display: none }
.iso-app .chips.many { gap: 6px }
.iso-app .chips.many .chip { padding: 8px 12px; font-size: .82rem }
.iso-app .chip { font: 600 .88rem/1.1 var(--f-body); padding: 10px 15px; border-radius: 999px; border: 1.5px solid var(--navy-600); background: var(--navy); color: #fff; transition: border-color .22s, color .22s, background .22s, transform .14s }
.iso-app .chip:hover { border-color: var(--blue); color: var(--blue) }
.iso-app .chip:active { transform: scale(.97) }
.iso-app .chip[aria-pressed="true"], .iso-app .chip.primary { background: var(--blue); border-color: var(--blue); color: var(--navy) }
.iso-app .chip.primary:hover { background: #fff; border-color: #fff; color: var(--navy) }

.iso-app .composer { padding: 12px 20px 18px }
.iso-app .composer form { display: flex; align-items: center; gap: 6px; background: var(--navy-900); border: 1.5px solid var(--navy-600); border-radius: 999px; padding: 5px; transition: border-color .22s, box-shadow .22s }
.iso-app .composer form:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(142,184,223,.3) }
.iso-app .composer input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: #fff; padding: 8px 10px; font-size: 1rem }
.iso-app .composer input::placeholder { color: var(--on-dark-3) }
.iso-app .composer input:focus-visible { box-shadow: none }
.iso-app .icon-btn { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 0; display: grid; place-items: center; transition: background .22s, color .22s, transform .14s }
.iso-app .icon-btn:active { transform: scale(.95) }
.iso-app .mic { background: var(--navy-700); color: var(--blue) }
.iso-app .mic:hover { color: #fff }
.iso-app .mic.on { background: var(--orange); color: var(--navy) }
.iso-app .send { background: var(--blue); color: var(--navy) }
.iso-app .send:hover { background: #fff }
/* Ticked tap-all-that-apply choices go with the chat's own send button: it
   turns orange, grows a label and nudges once, because a separate done chip
   went unnoticed. */
.iso-app .send-lbl { display: none }
.iso-app .send.ready { width: auto; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px 0 18px; border-radius: 999px; background: var(--orange); font: 700 .92rem/1 var(--f-body) }
.iso-app .send.ready:hover { background: #f6a94f }
.iso-app .send.ready .send-lbl { display: inline }
@media (prefers-reduced-motion: no-preference) {
  .iso-app .send.ready { animation: lio-nudge 1.2s var(--ease) 1 }
  @keyframes lio-nudge { 0% { box-shadow: 0 0 0 0 rgba(240,145,36,.6) } 100% { box-shadow: 0 0 0 14px rgba(240,145,36,0) } }
}
.iso-app .jump { display: none }
/* Keep Lio on your phone: shown by home_screen_controller after the first
   answer, in a browser tab on a phone or an iPad; never from the icon. */
.iso-app .keep { display: flex; align-items: center; gap: 10px; margin: 0 20px 18px; padding: 8px 6px 8px 16px; border: 1.5px solid var(--navy-600); border-radius: 999px; color: var(--blue-300); font: 500 .85rem/1.35 var(--f-body) }
.iso-app .keep p { margin: 0; flex: 1; min-width: 0 }
.iso-app .keep .keep-row { display: flex; align-items: center; gap: 10px }
.iso-app .keep p span { white-space: nowrap; color: #fff; font-weight: 600 }
.iso-app .keep svg { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none }
.iso-app .keep-install { margin-left: auto; height: 36px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--blue); color: var(--navy); font: 600 .85rem/1 var(--f-body) }
.iso-app .keep-close { width: 36px; height: 36px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--on-dark-3); border-radius: 999px }
.iso-app .keep-close:hover { color: #fff }

/* ───────── Desk: sketch, brief, recommendation ───────── */
.iso-app .desk { min-width: 0; padding: 44px clamp(16px, 4vw, 60px) 40px; display: flex; flex-direction: column; gap: 34px }
.iso-app .eyebrow { font: 600 .75rem/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); display: inline-flex; align-items: center; gap: 9px }
.iso-app .eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--orange) }
.iso-app h1 { font: 700 clamp(1.9rem, 1.2rem + 2.2vw, 3rem)/1.06 var(--f-display); letter-spacing: -.018em; margin: 14px 0 0; max-width: 19ch; text-wrap: balance }
.iso-app .lead { font-size: 1.1rem; line-height: 1.6; color: var(--ink-2); max-width: 58ch; margin: 16px 0 0; text-wrap: pretty }

.iso-app .browser { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--card); box-shadow: var(--shadow-lg) }
.iso-app .browser-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--ground-2); border-bottom: 1px solid var(--line) }
.iso-app .dots { display: flex; gap: 6px }
.iso-app .dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line) }
.iso-app .url { flex: 1; min-width: 0; font: 500 .8rem/1 var(--f-body); color: var(--ink-3); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.iso-app .tag { font: 600 .68rem/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; padding: 5px 8px; border-radius: 4px; white-space: nowrap; background: var(--soft); color: var(--ink-2) }
.iso-app .caption { font-size: .85rem; color: var(--ink-3); margin: 12px 2px 0 }

/* the visitor's site, in miniature: its own palette per "feel" */
.iso-app .site { container-type: inline-size;
  --s-bg: #fff; --s-ink: #14171f; --s-muted: #5b6270; --s-line: #e4e7ec; --s-card: #fff; --s-tint: #e6edfd; --s-accent: #2f5bea; --s-on: #fff; --s-head: "Figtree", system-ui, sans-serif; --s-hw: 700; --s-r: .5em;
  background: var(--s-bg); color: var(--s-ink); transition: background .42s var(--ease), color .42s var(--ease) }
.iso-app .site[data-vibe="calm"] { --s-bg: #f2f5ef; --s-ink: #1f2d24; --s-muted: #56655b; --s-line: #d6dfd2; --s-card: #fbfcfa; --s-tint: #d5e4d4; --s-accent: #2f6b4a; --s-on: #fff; --s-head: "Newsreader", Georgia, serif; --s-hw: 600; --s-r: 1.3em }
.iso-app .site[data-vibe="bold"] { --s-bg: #101010; --s-ink: #fff; --s-muted: #a8a8a8; --s-line: #2c2c2c; --s-card: #1a1a1a; --s-tint: #262626; --s-accent: #ffd400; --s-on: #101010; --s-head: "Archivo", "Arial Black", sans-serif; --s-hw: 800; --s-r: 0em }
.iso-app .site[data-vibe="warm"] { --s-bg: #f8eee1; --s-ink: #2e1f1a; --s-muted: #6d574c; --s-line: #e4d2bc; --s-card: #fffaf3; --s-tint: #ecd8bf; --s-accent: #8c3b2e; --s-on: #fff; --s-head: "Fraunces", Georgia, serif; --s-hw: 600; --s-r: .35em }
.iso-app .site-in { font-size: 1.5cqw; font-family: "Figtree", system-ui, sans-serif; line-height: 1.5 }
.iso-app .s-nav { display: flex; align-items: center; gap: 2em; padding: 1.4em 2.8em; border-bottom: 1px solid var(--s-line) }
.iso-app .s-brand { font: var(--s-hw) 1.3em/1.1 var(--s-head); letter-spacing: -.01em; overflow-wrap: anywhere }
.iso-app .s-links { display: flex; gap: 1.7em; margin-left: auto; font-size: .92em; color: var(--s-muted) }
.iso-app .s-login { font-size: .85em; font-weight: 600; border: 1px solid var(--s-line); padding: .45em .95em; border-radius: var(--s-r); white-space: nowrap }
.iso-app .s-links + .s-login { margin-left: 0 }
.iso-app .s-hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 2.6em; align-items: center; padding: 3.8em 2.8em }
.iso-app .s-hero h2 { font: var(--s-hw) 3.1em/1.04 var(--s-head); letter-spacing: -.02em; margin: 0; text-wrap: balance; overflow-wrap: anywhere }
.iso-app .s-hero p { font-size: 1.12em; line-height: 1.55; color: var(--s-muted); margin: 1em 0 0; max-width: 32em }
.iso-app .s-btn { display: inline-block; margin-top: 1.5em; background: var(--s-accent); color: var(--s-on); font-weight: 600; font-size: .98em; line-height: 1; padding: .85em 1.5em; border-radius: var(--s-r) }
.iso-app .s-btn.sm { margin-top: 0; font-size: .85em; padding: .7em 1.1em }
.iso-app .s-art { aspect-ratio: 4/3; max-width: 100%; border-radius: calc(var(--s-r) * 1.6); background: var(--s-tint); position: relative; overflow: hidden }
.iso-app .s-art::before { content: ""; position: absolute; left: 12%; bottom: 0; width: 34%; height: 62%; background: var(--s-accent); border-radius: var(--s-r) var(--s-r) 0 0 }
.iso-app .s-art::after { content: ""; position: absolute; right: 14%; bottom: 0; width: 26%; height: 38%; background: var(--s-ink); opacity: .85; border-radius: var(--s-r) var(--s-r) 0 0 }
.iso-app .s-sec { padding: 2.8em; border-top: 1px solid var(--s-line) }
.iso-app .s-sec h3 { font: var(--s-hw) 1.7em/1.1 var(--s-head); letter-spacing: -.01em; margin: 0 0 1em }
.iso-app .s-new { display: inline-block; margin-bottom: .9em; font-size: .72em; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: .45em .8em; border-radius: var(--s-r); background: var(--s-accent); color: var(--s-on) }
.iso-app .s-quote { font: var(--s-hw) 1.55em/1.32 var(--s-head); letter-spacing: -.005em; margin: 0; max-width: 32em; text-wrap: balance; overflow-wrap: anywhere }
.iso-app .g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2em }
.iso-app .g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1em }
.iso-app .s-card { background: var(--s-card); border: 1px solid var(--s-line); border-radius: var(--s-r); padding: 1.3em }
.iso-app .s-card b { display: block; font-weight: 600; font-size: 1.02em }
.iso-app .sk { display: block; height: .55em; border-radius: 1em; background: var(--s-line); margin-top: .8em }
.iso-app .sk.short { width: 55% }
.iso-app .sk.price { width: 30%; background: var(--s-accent); opacity: .55 }
.iso-app .tile { aspect-ratio: 4/3; border-radius: var(--s-r); background: var(--s-tint) }
.iso-app .tile:nth-child(even) { background: var(--s-accent); opacity: .75 }
.iso-app .s-card .tile { margin-bottom: 1em; opacity: 1; background: var(--s-tint) }
.iso-app .s-book { display: flex; flex-wrap: wrap; align-items: center; gap: 1em 2em }
.iso-app .pills { display: flex; flex-wrap: wrap; gap: .6em }
.iso-app .pill { font-size: .9em; font-weight: 600; padding: .55em 1em; border: 1px solid var(--s-line); border-radius: var(--s-r); background: var(--s-card) }
.iso-app .pill.on { background: var(--s-ink); color: var(--s-bg); border-color: var(--s-ink) }
.iso-app .s-row { display: grid; grid-template-columns: 7em 1fr; gap: 1.2em; align-items: center; padding: .9em 0; border-top: 1px solid var(--s-line) }
.iso-app .s-row:first-of-type { border-top: 0; padding-top: 0 }
.iso-app .s-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; max-width: 36em }
.iso-app .s-field { height: 2.8em; border: 1px solid var(--s-line); border-radius: var(--s-r); background: var(--s-card) }
.iso-app .s-field.tall { grid-column: 1/-1; height: 6em }
.iso-app .s-nodes { display: flex; flex-wrap: wrap; align-items: center; gap: .8em }
.iso-app .s-node { font-size: .9em; font-weight: 600; padding: .8em 1.1em; border: 1px solid var(--s-line); border-radius: var(--s-r); background: var(--s-card) }
.iso-app .s-node.me { background: var(--s-accent); color: var(--s-on); border-color: var(--s-accent) }
.iso-app .s-wire { width: 2.4em; height: 2px; background: var(--s-muted); opacity: .5 }
.iso-app .s-foot { display: flex; justify-content: space-between; gap: 1em; padding: 1.6em 2.8em; border-top: 1px solid var(--s-line); font-size: .85em; color: var(--s-muted) }
@container (max-width: 560px) {
  .iso-app .site-in { font-size: 2.9cqw }
  .iso-app .s-links { display: none }
  .iso-app .s-login { margin-left: auto }
  .iso-app .s-hero { grid-template-columns: 1fr; padding: 2.8em 2em }
  .iso-app .s-art { display: none }
  .iso-app .s-hero h2 { font-size: 2.5em }
  .iso-app .s-nav, .iso-app .s-foot { padding-inline: 2em }
  .iso-app .s-sec { padding: 2.4em 2em }
  .iso-app .g3 { grid-template-columns: 1fr 1fr }
  .iso-app .g3 > :nth-child(3) { display: none }
  .iso-app .g4 { grid-template-columns: 1fr 1fr }
}
@media (prefers-reduced-motion: no-preference) {
  .iso-app .s-sec.enter { animation: lio-rise .42s var(--ease) both }
  .iso-app .card.enter { animation: lio-rise .42s var(--ease) both }
  @keyframes lio-rise { from { opacity: 0; transform: translateY(14px) } }
}

.iso-app .pair { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: 24px; align-items: start }
.iso-app .card { border: 1px solid var(--line); border-radius: 16px; background: var(--card); padding: 26px; box-shadow: var(--shadow-md) }
.iso-app .card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px }
.iso-app .card h2 { font: 700 1.4rem/1.12 var(--f-display); letter-spacing: -.01em; margin: 0 }
.iso-app .count { font: 600 .8rem/1 var(--f-body); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap }
.iso-app .brief dl { margin: 0 }
.iso-app .brief .row { display: grid; grid-template-columns: 7.2rem minmax(0,1fr); gap: 12px; padding: 11px 0; border-top: 1px solid var(--line) }
.iso-app .brief dt { font: 600 .8rem/1.5 var(--f-body); color: var(--ink-3) }
.iso-app .brief dd { margin: 0; font-size: .95rem; line-height: 1.45; overflow-wrap: anywhere }
.iso-app .brief dd.empty { color: var(--ink-3) }

.iso-app .offer { background: var(--offer-bg); border-color: var(--offer-line); color: #fff }
.iso-app .offer .eyebrow { color: var(--blue-300) }
.iso-app .offer h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-top: 14px }
.iso-app .price { font: 700 1.15rem/1 var(--f-display); color: var(--blue); margin: 10px 0 0; font-variant-numeric: tabular-nums }
.iso-app .offer p { color: #c7d2e8; font-size: .98rem; margin: 14px 0 0; max-width: 52ch }
.iso-app .offer .wait { color: var(--blue-300) }
.iso-app .offer h3 { font: 600 .75rem/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-3); margin: 22px 0 10px }
.iso-app .offer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: .95rem; color: #fff }
.iso-app .offer li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start }
.iso-app .offer li::before { content: ""; width: 8px; height: 8px; margin-top: .5em; border: 2px solid var(--blue); transform: rotate(45deg) }
.iso-app .offer li span { color: var(--on-dark-3) }
.iso-app .steer { border: 1px solid var(--navy-600); background: var(--navy-900); border-radius: 10px; padding: 12px 14px; margin-top: 16px; font-size: .92rem; color: #c7d2e8 }
.iso-app .meter { height: 6px; border-radius: 6px; background: var(--navy-600); overflow: hidden; margin-top: 18px }
.iso-app .meter i { display: block; height: 100%; width: 0; background: var(--blue); border-radius: 6px; transition: width .42s var(--ease) }
.iso-app .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px }
.iso-app .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 .95rem/1 var(--f-body); padding: 14px 22px; border-radius: 999px; border: 1.5px solid transparent; text-decoration: none; transition: background .22s, border-color .22s, color .22s, transform .14s }
.iso-app .btn:active { transform: scale(.98) }
.iso-app .btn.go { background: var(--orange); color: var(--navy) }
.iso-app .btn.go:hover { background: #f6a94f }
.iso-app .btn.ghost { border-color: var(--navy-600); color: #fff; background: transparent }
.iso-app .btn.ghost:hover { border-color: var(--blue); color: var(--blue) }
.iso-app .sent { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--navy-600) }
.iso-app .sent h3 { margin-top: 0 }
.iso-app .sent p { color: #c7d2e8 }
.iso-app .offer .note { margin-top: 22px; padding: 12px 14px; border: 1px solid var(--navy-600); border-radius: 10px; background: var(--navy-900); color: var(--blue-300); font-size: .92rem }

/* ───────── The buy-now order page ───────── */
.iso-app.order-page { min-height: calc(100vh - 4rem); padding: 44px 16px 64px }
.iso-app .order-wrap { max-width: 560px; margin: 0 auto }
.iso-app .order-back { display: inline-block; font: 600 .85rem/1 var(--f-body); color: var(--blue); text-decoration: none; margin-bottom: 16px }
.iso-app .order-back:hover { color: #fff }
.iso-app .order-card .price .was { color: var(--on-dark-3); text-decoration: line-through; margin-right: 8px }
.iso-app .order-form { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--navy-600); display: grid; gap: 14px }
.iso-app .order-form label { display: block; font: 600 .8rem/1 var(--f-body); color: var(--blue-300); margin-bottom: 7px }
.iso-app .order-form input[type="text"], .iso-app .order-form input[type="email"] { width: 100%; background: var(--navy-900); border: 1px solid var(--navy-600); border-radius: 8px; color: #fff; padding: 12px 13px; font-size: .98rem; outline: 0; transition: border-color .22s, box-shadow .22s }
.iso-app .order-form input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(142,184,223,.35) }
.iso-app .order-form .fine { font-size: .82rem; color: var(--on-dark-3); margin: 0 }
.iso-app .order-form .fine a { text-decoration: underline }
.iso-app .order-form .err { margin: 0; font-size: .9rem; color: #f6a94f }
.iso-app .order-form .actions { margin-top: 4px }

/* ───────── The front door and the short tracks: Lio alone, centred ─────────
   Until the visitor picks the website track there is nothing to show beside
   him, so the stage takes the whole width and the conversation sits in one
   centred column. data-track comes from the server on first paint and from
   the controller after that; the move to the two-column layout rides a view
   transition where the browser has one. */
.iso-app .stage { view-transition-name: lio-stage }
.iso-app .desk { view-transition-name: lio-desk }
.iso-app:not([data-track="website"]) .app { grid-template-columns: minmax(0,1fr) }
.iso-app:not([data-track="website"]) .desk { display: none }
.iso-app:not([data-track="website"]) .stage { border-right: 0; align-items: center; justify-content: center }
.iso-app:not([data-track="website"]) .stage > * { width: 100%; max-width: 600px }
.iso-app:not([data-track="website"]) .stage-top { position: absolute; top: 0; right: 0; max-width: none }
.iso-app:not([data-track="website"]) .thread { flex: 0 1 auto }
.iso-app[data-track=""] .avatar { height: clamp(190px, 34vh, 340px) }
.iso-app[data-track=""] .thread { max-width: 760px }
.iso-app[data-track=""] .msg.lio.now { align-self: center; text-align: center; text-wrap: balance; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem) }
.iso-app[data-track=""] .chips { justify-content: center }

/* ───────── Lio's door on the homepage ─────────
   The same first question as /guide, as a band between sections; each chip
   is a link into the guide on that track. No controller runs here, so the
   blink the guide drives from JavaScript is a keyframe instead. */
.iso-app.lio-door { position: relative; isolation: isolate; overflow: hidden; background: var(--navy); padding: 64px 16px 80px; display: flex; flex-direction: column; align-items: center; text-align: center }
.iso-app.lio-door h2 { font: 700 clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem)/1.22 var(--f-display); letter-spacing: -.01em; margin: 22px 0 0; max-width: 760px; text-wrap: balance }
.iso-app.lio-door .chips { justify-content: center; padding: 22px 0 0 }
.iso-app.lio-door .chip { display: inline-block; text-decoration: none }
@media (prefers-reduced-motion: no-preference) {
  .iso-app.lio-door .eye { animation: lio-blink-idle 5.2s infinite }
  @keyframes lio-blink-idle { 0%, 95%, 100% { transform: none } 97.5% { transform: scaleY(.08) } }
}

@media (max-width: 1180px) { .iso-app .pair { grid-template-columns: 1fr } }
@media (max-width: 900px) {
  .iso-app .app { display: block }
  .iso-app .stage { position: relative; top: 0; height: auto; border-right: 0; border-bottom: 1px solid var(--navy-600) }
  /* The door and the short tracks are the phone's whole screen: the stage is
     exactly the viewport under the nav, the thread scrolls inside it, and
     nothing sits below (the page has no footer), so the keyboard has no page
     to drag when it lifts the field. Lio shrinks before anything else. */
  .iso-app:not([data-track="website"]) .app { background: var(--navy) }
  .iso-app:not([data-track="website"]) .stage { height: calc(100vh - 4rem); height: calc(100dvh - 4rem); border-bottom: 0; justify-content: flex-end }
  .iso-app:not([data-track="website"]) .avatar { flex: 0 1 auto; height: clamp(150px, 30vh, 260px); min-height: 72px; transition: height .25s var(--ease) }
  .iso-app:not([data-track="website"]) .jump { display: none }
  .iso-app .stage-top, .iso-app .chips, .iso-app .composer, .iso-app .thread { padding-inline: 16px }
  .iso-app .keep { margin-inline: 16px }
  .iso-app .avatar { height: 180px }
  .iso-app .thread { max-height: 36vh; min-height: 96px }
  .iso-app .chips, .iso-app .composer { flex: none }
  /* The keyboard is up (keyboard_fit_controller): the stage is the visible
     part of the screen, Lio is small, the conversation takes the rest. */
  .iso-app .stage.kb { justify-content: flex-end }
  .iso-app .stage.kb .avatar { height: 72px; min-height: 0 }
  .iso-app .stage.kb .status, .iso-app .stage.kb .keep, .iso-app .stage.kb .jump { display: none }
  .iso-app .stage.kb .thread { flex: 1 1 auto; max-height: none; min-height: 48px }
  .iso-app .tool span { display: none }
  .iso-app .tool { padding: 0; width: 36px; justify-content: center }
  .iso-app .jump { display: block; margin: 0 16px 16px; text-align: center; font: 600 .85rem/1 var(--f-body); color: var(--blue); text-decoration: none; padding: 12px; border: 1.5px solid var(--navy-600); border-radius: 999px }
  .iso-app .desk { padding-top: 32px }
}