/* 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 { 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 }
.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 }

/* ───────── 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 }

@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) }
  .iso-app .stage-top, .iso-app .chips, .iso-app .composer, .iso-app .thread { padding-inline: 16px }
  .iso-app .avatar { height: 180px }
  .iso-app .thread { max-height: 36vh; min-height: 96px }
  .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 }
}