/* ==========================================================================
   Kwik L'IRIS — THE OPEN STUDIO (1.5.0): the website's one stylesheet
   White ground, one ink, one accent. The characters bring the colour.
   ========================================================================== */
:root {
  color-scheme: light;
  --bg: #FFFFFF;
  --bg-2: #F4F5F7;
  --bg-3: #ECEEF2;
  --ink: #0C0D11;
  --ink-2: #454A54;
  --ink-3: #7A808B;
  --line: #E4E6EB;
  --line-2: #D5D8DF;
  --accent: #5B45F0;
  --iris: var(--accent);   /* the house's violet, by its other name (1.8+) */
  --accent-2: #EEEBFF;
  --ok: #0E7A4E;
  --warn: #9A5B00;
  --r-s: 10px;
  --r-m: 16px;
  --r-l: 28px;
  --shadow: 0 1px 2px rgba(12, 13, 17, .04), 0 8px 24px rgba(12, 13, 17, .06);
  --max: 1200px;
  --gut: clamp(16px, 4vw, 32px);
  --f-display: 'Inter Tight', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-text: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.6 var(--f-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------------ type */
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 650; letter-spacing: -0.025em; line-height: 1.06; margin: 0; text-wrap: balance; }
.d1 { font-size: clamp(42px, 6.2vw, 84px); letter-spacing: -0.035em; line-height: 1.02; }
.hero .d1 { max-width: 12ch; }
.d2 { font-size: clamp(34px, 4.8vw, 60px); letter-spacing: -0.03em; }
.d3 { font-size: clamp(24px, 2.6vw, 32px); }
.d4 { font-size: 20px; letter-spacing: -0.015em; line-height: 1.25; }
.lead { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--ink-2); max-width: 36em; text-wrap: pretty; }
.eyebrow { font: 600 13px/1 var(--f-text); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.muted { color: var(--ink-3); }
.small { font-size: 14px; line-height: 1.5; }
.tnum { font-variant-numeric: tabular-nums; }
p { margin: 0; }
.prose p + p { margin-top: 1em; }
.prose { max-width: 42rem; }
.prose h2 { font-size: 26px; margin: 2.2em 0 .6em; }
.prose h3 { font-size: 20px; margin: 1.8em 0 .4em; }
.prose ul { padding-inline-start: 1.2em; margin: .8em 0; }
.prose li + li { margin-top: .35em; }
.prose a { color: var(--accent); }

/* ---------------------------------------------------------------- layout */
.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gut); }
.section { padding-block: clamp(64px, 9vw, 128px); }
.section.tight { padding-block: clamp(40px, 6vw, 72px); }
.section.grey { background: var(--bg-2); }
/* 1.11.0: what lies far below the screen is set when the reader nears it, not before. A page of Devanagari or Arabic costs
   three times a Latin one to set, and each face that arrives sets the page again: now only what is in view is set. */
main > .section ~ .section, .foot { content-visibility: auto; contain-intrinsic-block-size: auto 600px; }
.cast-card { content-visibility: auto; contain-intrinsic-block-size: auto 620px; }   /* the height only: a width here would become the least width of the card, wider than a phone */
/* the heights held are near the true ones, so the page's length barely changes as its parts are set */
.foot { contain-intrinsic-block-size: auto 350px; }
main > .section.tall { contain-intrinsic-block-size: auto 1230px; }
main > .section.vast { contain-intrinsic-block-size: auto 1660px; }
@media (max-width: 760px) { .foot { contain-intrinsic-block-size: auto 750px; } main > .section.tall { contain-intrinsic-block-size: auto 1680px; } main > .section.vast { contain-intrinsic-block-size: auto 3400px; } }
.stack { display: grid; gap: 16px; }
.stack-l { display: grid; gap: 28px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.center { text-align: center; }
.center .lead { margin-inline: auto; }
.head-block { display: grid; gap: 18px; max-width: 46rem; }
.center.head-block, .head-block.center { margin-inline: auto; justify-items: center; }

/* ------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 24px; border-radius: 999px;
  font: 600 16px/1 var(--f-text); text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: transform .15s ease, background .15s ease, box-shadow .15s ease; white-space: nowrap; }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #262833; }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: #4A35DD; }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--ink-3); }
.btn-s { height: 38px; padding: 0 16px; font-size: 14px; }
.btn-l { height: 56px; padding: 0 30px; font-size: 17px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.link { color: var(--accent); text-decoration: none; font-weight: 600; }
.link:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ nav */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgba(255, 255, 255, .86); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.nav.scrolled { border-bottom-color: var(--line); }
.nav-in { display: flex; align-items: center; gap: 28px; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 700 19px/1 var(--f-display); letter-spacing: -0.02em; }
.brand svg { width: 28px; height: 28px; }
.nav-links { display: flex; gap: 26px; margin-inline-start: 12px; }
.nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: var(--ink-2); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); }
.nav-cta { margin-inline-start: auto; display: flex; gap: 10px; align-items: center; }
.nav-cta .signin { font-size: 15px; font-weight: 500; text-decoration: none; color: var(--ink-2); padding: 0 8px; }
.nav-burger { display: none; margin-inline-start: 4px; width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; align-items: center; justify-content: center; cursor: pointer; }
.nav-sheet { display: none; }
@media (max-width: 900px) {
  .nav-links, .nav-cta .signin { display: none; }
  .nav-burger { display: inline-flex; }
  .nav-sheet.open { display: grid; gap: 4px; padding: 8px var(--gut) 20px; border-top: 1px solid var(--line); background: #fff; }
  .nav-sheet a { padding: 12px 0; text-decoration: none; font-size: 18px; font-weight: 500; border-bottom: 1px solid var(--line); }
}
@media (max-width: 420px) { .nav-cta .btn { padding: 0 14px; } }

/* ------------------------------------------------------------------ hero */
.hero { position: relative; overflow: hidden; background: radial-gradient(1200px 600px at 70% 30%, #F1EFFF 0%, rgba(241, 239, 255, 0) 60%), linear-gradient(#FFFFFF, #FAFAFB); }
.hero-in { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: center; padding-block: clamp(40px, 7vw, 96px) clamp(40px, 6vw, 80px); }
.hero-copy { display: grid; gap: 24px; align-content: center; }
.hero-note { font-size: 14px; color: var(--ink-3); display: flex; gap: 18px; flex-wrap: wrap; }
.hero-note span::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); margin-inline-end: 8px; vertical-align: middle; }
@media (max-width: 900px) { .hero-in { grid-template-columns: 1fr; } .hero-stage { order: -1; max-width: 420px; margin-inline: auto; width: 100%; } }

/* the character on its stage: the picture over the member's own iris */
.stage { position: relative; aspect-ratio: 4 / 5; width: 100%; max-width: 100%; user-select: none; }
.stage .owl-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 2; transition: opacity .35s ease; }
.stage .irises { position: absolute; inset: 0; z-index: 1; }
.stage .eye { position: absolute; border-radius: 50%; overflow: hidden; background: #140E0A; transform-origin: 0 0; }
.stage .pose { position: absolute; inset: 0; transform-origin: 50% 88%; transform: rotate(var(--tilt, 0deg)) translateY(var(--lift, 0%)); transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.stage .breath { position: absolute; inset: 0; transform-origin: 50% 84%; animation: kl-breathe var(--breath, 4.4s) ease-in-out .6s infinite; }
@keyframes kl-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.006, 1.017) translateY(-0.35%); } }
/* the voice moves the body: --voice is the level of the sound, 0 to 1, written every frame */
.stage[data-state="speaking"] .breath { animation: none; transform: scale(calc(1 + 0.014 * var(--voice, 0)), calc(1 + 0.026 * var(--voice, 0))) translateY(calc(-0.7% * var(--voice, 0))); }
.stage[data-state="laughing"] .breath { animation: kl-laugh .32s ease-in-out infinite; }
@keyframes kl-laugh { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.012, 1.03) translateY(-0.8%); } }
.stage[data-state="surprised"] .breath { animation: kl-breathe 3s ease-in-out infinite; }
/* the lids: --lid (upper) and --lid-lo (lower) close from 0 to 1; a blink closes the upper fully */
.stage .eye .lid { position: absolute; inset: -2%; border-radius: 50%; transform: translateY(calc(-102% + 102% * var(--lid, 0))); transition: transform 70ms ease-in; }
.stage .eye .lid-lo { transform: translateY(calc(102% - 102% * var(--lid-lo, 0))); }
.stage[data-state] .eye .lid { transition: transform .32s ease-out; }
.stage.blink .eye .lid:not(.lid-lo) { transform: translateY(0); transition: transform 70ms ease-in; }
.stage .eye .lid { background-image: radial-gradient(120% 90% at 50% 20%, rgba(255,255,255,.10), rgba(0,0,0,.10) 70%, rgba(0,0,0,.34) 100%); }
.stage .eye .lid-lo { background-image: radial-gradient(120% 90% at 50% 80%, rgba(255,255,255,.08), rgba(0,0,0,.08) 70%, rgba(0,0,0,.30) 100%); }
.stage[data-state="sleeping"] .glint, .stage[data-state="fond"] .glint { opacity: .5; }
.stage[data-state="surprised"] .glint { opacity: 1; filter: brightness(1.25); }
@media (prefers-reduced-motion: reduce) { .stage .pose { transition: none; } .stage[data-state="laughing"] .breath, .stage[data-state="speaking"] .breath { animation: none; transform: none; } }
.stage .glint { transition: opacity 80ms; }
.stage.blink .glint { opacity: .15; }
.stage .eye .iris-img { position: absolute; left: 50%; top: 50%; max-width: none; transform: translate(-50%, -50%); transition: transform .25s ease-out; will-change: transform; }
.stage .glint { position: absolute; z-index: 3; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .55) 0 7%, rgba(255, 255, 255, .0) 16%), radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, .12) 76%, rgba(0, 0, 0, .18) 100%); }
.stage .dressing { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.stage .dressing svg { width: 100%; height: 100%; display: block; }
.stage-shadow { display: none; }
.stage.loading .owl-img, .stage.loading .irises, .stage.loading .glints { opacity: 0; }
.stage.loading .breath { animation: none; }   /* 1.11.0: it begins to breathe once it is there, from rest, so the living picture takes the still's place without a start */
/* 1.11.0: the still stands a pixel proud of the stage on every side. The living picture that takes its place is drawn in the
   stage's own box, which a browser rounds up by a pixel; were the still not the larger of the two, the browser would count
   the same picture a second time, late, as the page's largest (measured: 3.3 s where the truth is 1.8 s). */
.stage .still { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: contain; z-index: 4; }
.stage.living .living-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; z-index: 2; }
.stage.living.loading .living-canvas { opacity: 0; }
.stage.living .living-canvas { transition: opacity .5s ease; }
.stage-host { position: relative; }
.stage-host:not(.stage) > img.still { width: 100%; height: auto; }   /* a host not yet a stage; on a stage the still fills the stage's own box, as the living picture will (1.11.0) */

/* ----------------------------------------------------------------- cards */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-l); padding: 28px; display: grid; gap: 12px; align-content: start; }
.card.grey { background: var(--bg-2); border-color: transparent; }
.step-n { width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font: 600 15px/1 var(--f-display); }
.tile { border-radius: var(--r-l); background: var(--bg-2); overflow: hidden; position: relative; }
.tile .stage { max-width: 100%; }
.tile-cap { padding: 16px 20px 20px; display: grid; gap: 4px; }
.swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line-2); }

/* features: a picture beside words */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.feature.flip > :first-child { order: 2; }
@media (max-width: 900px) { .feature { grid-template-columns: 1fr; } .feature.flip > :first-child { order: 0; } }
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; align-content: start; }
.checks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.checks li::before { content: ''; width: 20px; height: 20px; margin-top: 3px; border-radius: 50%; background: var(--accent-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%235B45F0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line-2); font-size: 14px; font-weight: 500; }
.chip .tag { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }

/* ----------------------------------------------------------------- plans */
.toggle { display: inline-flex; background: var(--bg-3); border-radius: 999px; padding: 4px; gap: 2px; }
.toggle button { border: 0; background: transparent; height: 38px; padding: 0 18px; border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.toggle button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: var(--shadow); }
.toggle .save { color: var(--ok); font-weight: 700; font-size: 12px; margin-inline-start: 6px; }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
@media (max-width: 960px) { .plans { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } }
.plan { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r-l); padding: 32px 28px; display: grid; gap: 20px; grid-template-rows: auto auto auto 1fr auto; }
.plan.popular { border: 2px solid var(--ink); box-shadow: var(--shadow); }
.plan .badge { position: absolute; top: -13px; inset-inline-start: 28px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; padding: 6px 12px; }
.plan .price { display: flex; align-items: baseline; gap: 6px; }
.plan .price b { font: 650 48px/1 var(--f-display); letter-spacing: -0.03em; }
.plan .price span { color: var(--ink-3); font-size: 15px; }
.plan .per { font-size: 14px; color: var(--ink-3); min-height: 1.5em; }
/* 1.11.0: the mark of a member's own plan sits in the card's corner; set in the card's flow it pushed the card's lines down as it arrived, and out of step with the cards beside it */
.plan .current { position: absolute; top: 36px; inset-inline-end: 28px; font-size: 13px; font-weight: 700; color: var(--ok); text-transform: uppercase; letter-spacing: .05em; }
/* THE PRICE BOOK (1.11.0): the Family plan sits beside the three, across the page; the line that says which money; Plus by the week */
.plan.family { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(210px, auto); grid-template-rows: auto; align-items: center; gap: 24px 40px; background: var(--bg-2); border-color: transparent; }
.plan.family .current { top: 18px; }
.plan.family .fam-buy { justify-items: stretch; }
.plan.family .price b { font-size: 40px; }
.plan.family .btn { background: #fff; }
@media (max-width: 960px) { .plan.family { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; width: 100%; } }
.region-line { line-height: 1.9; }
button.link { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; cursor: pointer; }
.plan .by-week { justify-self: center; font-size: 14.5px; margin-top: -8px; }
.modal .opt { display: grid; gap: 2px; justify-items: start; text-align: start; width: 100%; }
.modal .opt .money-name { display: block; }
.modal .opt .money-name::first-letter { text-transform: uppercase; }
.fam { display: grid; gap: 12px; margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--line); }
.fam > h3 { margin: 0; }
.fam .inline { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fam .plan-now + .plan-now { margin-top: 10px; }
.compare { width: 100%; border-collapse: collapse; font-size: 15px; }
.compare th, .compare td { padding: 14px 12px; border-bottom: 1px solid var(--line); text-align: center; }
.compare th:first-child, .compare td:first-child { text-align: start; color: var(--ink-2); }
.compare thead th { font: 650 16px/1.2 var(--f-display); color: var(--ink); }
.scroll-x { overflow-x: auto; }
.yes { color: var(--ok); font-weight: 700; }
.no { color: var(--ink-3); }

/* ------------------------------------------------------------------- faq */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding-block: 22px; padding-inline: 0 40px; position: relative; font: 600 18px/1.35 var(--f-display); letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; inset-inline-end: 4px; top: 18px; font: 400 26px/1 var(--f-text); color: var(--ink-3); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { padding: 0 0 22px; color: var(--ink-2); max-width: 44rem; }

/* ----------------------------------------------------------------- forms */
.field { display: grid; gap: 8px; }
.field label, .lbl { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.input { height: 50px; border: 1px solid var(--line-2); border-radius: 12px; padding: 0 16px; background: #fff; width: 100%; font-size: 16px; }
.input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(91, 69, 240, .14); }
.check { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: 15px; color: var(--ink-2); cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ink); }
.note { font-size: 14px; color: var(--ink-3); }
.err { color: #B42318; font-size: 14px; }
.okmsg { color: var(--ok); font-size: 15px; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: 13px; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.btn-google { background: #fff; color: var(--ink); border: 1px solid var(--line-2); width: 100%; }
.btn-google svg { width: 20px; height: 20px; }

/* --------------------------------------------------------------- dialogs */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(12, 13, 17, .42); }
.modal-box { background: #fff; border-radius: 24px; width: min(440px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 32px 28px; display: grid; gap: 18px; box-shadow: 0 20px 60px rgba(0, 0, 0, .18); position: relative; }
.modal-x { position: absolute; top: 14px; inset-inline-end: 14px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--bg-2); cursor: pointer; font-size: 20px; line-height: 1; }
/* one line is a pill; a longer one takes the width it needs (up to the screen less its gutters) and stays a soft rectangle (1.10.2) */
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 120; background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 23px; font-size: 15px; line-height: 1.45; box-shadow: var(--shadow); width: max-content; max-width: min(560px, calc(100vw - 32px)); display: flex; gap: 16px; align-items: center; }
body[data-page="create"] .toast { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }   /* above the studio's bar, so Back and Next stay in reach */
.toast button { border: 0; background: none; padding: 0; color: #C9BFFF; font: 600 15px/1 var(--f-text); cursor: pointer; white-space: nowrap; }

/* consent: a quiet bar */
.consent { position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 90; max-width: 640px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 12px 40px rgba(0, 0, 0, .12); padding: 16px 18px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 14px; color: var(--ink-2); }
.consent p { flex: 1 1 280px; }
.consent a { color: var(--accent); }

/* ---------------------------------------------------------------- footer */
.foot { border-top: 1px solid var(--line); padding-block: 56px 40px; background: #fff; }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.foot h4 { font: 600 14px/1 var(--f-text); margin-bottom: 14px; color: var(--ink); letter-spacing: 0; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot a { text-decoration: none; color: var(--ink-2); font-size: 15px; }
.foot a:hover { color: var(--ink); }
.foot-base { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between; font-size: 13px; color: var(--ink-3); }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-grid > :first-child { grid-column: 1 / -1; } }

/* ---------------------------------------------------------------- studio */
.studio { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, 460px); min-height: calc(100vh - 68px); background: var(--bg-2); }
.studio-stage { position: sticky; top: 68px; height: calc(100vh - 68px); display: grid; place-items: center; padding: 24px; background: radial-gradient(800px 500px at 50% 35%, #FFFFFF 0%, #F4F5F7 70%); }
.studio-stage .stage { height: min(78vh, 760px); width: auto; }
.studio-stage .plate { position: absolute; inset-inline-start: 24px; bottom: 24px; display: grid; gap: 2px; }
.studio-stage .plate b { font: 650 24px/1.1 var(--f-display); letter-spacing: -0.02em; }
.studio-stage .plate span { font-size: 14px; color: var(--ink-3); }
/* THE EXPRESSIONS (1.7): press one and the companion shows it, then settles */
.feel { position: absolute; inset-inline-end: 24px; bottom: 24px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 46%; z-index: 5; }
.feel button { font: 500 12.5px/1 var(--f-body); color: var(--ink-2); background: rgba(255,255,255,.72); border: 1px solid rgba(12,13,17,.08); backdrop-filter: blur(10px); height: 30px; padding: 0 11px; border-radius: 999px; cursor: pointer; transition: background .2s, color .2s; }
.feel button:hover, .feel button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
/* THE ESTATE (1.7): the Chow alive beside its card */
.estate-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); gap: clamp(20px, 3vw, 44px); align-items: center; padding: clamp(16px, 2.5vw, 32px); background: radial-gradient(900px 500px at 40% 30%, #FFFFFF 0%, #F4F5F7 70%); }
.estate-stage { position: relative; aspect-ratio: 1 / 1; min-height: 320px; }
.estate-stage .stage-host, .estate-stage .stage { position: absolute; inset: 0; aspect-ratio: auto; width: 100%; height: 100%; }
.estate-stage .stage-host > img.still { width: 100%; height: 100%; object-fit: contain; }
.estate-stage .feel { inset-inline-end: 12px; bottom: 12px; max-width: 70%; }
.estate-facts { margin: 0; padding-inline-start: 18px; color: var(--ink-2); font-size: 15px; display: grid; gap: 6px; }
.tag-live { background: var(--ok); color: #fff; }
.hero-card .d3 { font-size: 22px; }
.btn.busy { opacity: .6; pointer-events: none; }
@media (max-width: 900px) { .estate-hero { grid-template-columns: 1fr; } .estate-stage { min-height: 0; } .estate-stage .feel { max-width: 90%; } }
.studio-panel { background: #fff; border-inline-start: 1px solid var(--line); display: grid; grid-template-rows: auto 1fr auto; min-height: calc(100vh - 68px); }
.tabs { display: flex; gap: 0; padding: 14px 12px 0; border-bottom: 1px solid var(--line); overflow-x: auto; position: sticky; top: 68px; background: #fff; z-index: 5; }
.tabs button { flex: 1 0 auto; border: 0; background: none; padding: 12px 8px 14px; font-size: 15px; font-weight: 600; color: var(--ink-3); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.tabs .num { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--bg-3); font-size: 12px; margin-inline-end: 6px; }
.tabs button[aria-selected="true"] .num { background: var(--ink); color: #fff; }
.pane { padding: 24px; display: grid; gap: 28px; align-content: start; }
.opt-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.opt-h h3 { font-size: 17px; letter-spacing: -0.01em; }
.opt-h span { font-size: 14px; color: var(--ink-3); }
.opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.opt { border: 1.5px solid var(--line); background: #fff; border-radius: 14px; padding: 12px 10px; display: grid; gap: 6px; justify-items: center; text-align: center; cursor: pointer; font-size: 14px; font-weight: 500; position: relative; }
.opt:hover { border-color: var(--line-2); }
/* THE KIOSK (1.8): item cards */
.opt-items { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.opt .thumb { width: 72px; height: 72px; display: block; }
.opt .nm { font-size: 12.5px; line-height: 1.2; }
.opt .pr { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.opt .pr.free { color: var(--ok); font-weight: 600; } .opt .pr.mine { color: var(--iris); font-weight: 600; }
.opt[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.opt[disabled] { cursor: not-allowed; opacity: .55; }
.opt .sub { font-size: 12px; color: var(--ink-3); font-weight: 400; }
.opt .lock { position: absolute; top: 6px; inset-inline-end: 8px; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.opt-wide { grid-template-columns: 1fr; }
.opt-wide .opt { justify-items: start; text-align: start; grid-template-columns: 1fr auto; align-items: center; padding: 14px 16px; }
.opt-wide .opt .sub { grid-column: 1 / -1; }
.char-thumb { width: 64px; height: 64px; border-radius: 50%; background: var(--bg-2); display: grid; place-items: center; overflow: hidden; }
.char-thumb img { width: 120%; max-width: none; margin-top: 18%; }
.slider { display: grid; gap: 6px; }
.slider .ends { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-3); }
.slider input[type=range] { width: 100%; accent-color: var(--ink); }
.studio-bar { position: sticky; bottom: 0; background: #fff; border-top: 1px solid var(--line); padding: 16px 24px calc(16px + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; z-index: 5; }
.studio-bar .needs { font-size: 13px; color: var(--ink-3); }
.studio-bar .needs b { color: var(--ink); }
@media (max-width: 900px) {
  .studio { grid-template-columns: 1fr; }
  .studio-stage { position: sticky; top: 68px; height: 44vh; z-index: 4; padding: 8px; border-bottom: 1px solid var(--line); }
  .studio-stage .stage { height: calc(44vh - 16px); }
  .studio-stage .plate { inset-inline-start: 16px; bottom: 10px; max-width: calc(42% - 20px); }   /* 1.12.0: its line no longer runs under the feelings */
  .studio-stage .plate span { font-size: 12.5px; line-height: 1.3; }
  .studio-stage .plate b { font-size: 18px; }
  .studio-stage .feel { inset-inline-end: 10px; bottom: 10px; max-width: 58%; gap: 4px; }
  .feel button { height: 26px; padding: 0 9px; font-size: 11.5px; }
  .studio-panel { border-inline-start: 0; min-height: 0; }
  .tabs { top: calc(68px + 44vh); }
}
@media (max-width: 520px) {
  .tabs button { padding-inline: 6px; }
  .tabs button:not([aria-selected="true"]) .num { display: none; }
}

/* ------------------------------------------------------------------ talk */
.talk { display: grid; grid-template-columns: 320px minmax(0, 1fr); min-height: calc(100vh - 68px); }
.talk-side { border-inline-end: 1px solid var(--line); background: var(--bg-2); padding: 24px; display: grid; gap: 16px; align-content: start; position: sticky; top: 68px; height: calc(100vh - 68px); overflow: auto; }
.talk-side .stage { max-width: 240px; margin-inline: auto; }
.talk-main { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; height: calc(100svh - 68px); }
.msgs { padding: 32px var(--gut) 24px; display: grid; gap: 18px; align-content: end; max-width: 820px; width: 100%; margin: 0 auto; overflow-y: auto; }
.msg { max-width: 86%; padding: 12px 16px; border-radius: 20px; font-size: 16px; line-height: 1.55; white-space: pre-wrap; word-wrap: break-word; }
.msg.me { justify-self: end; background: var(--ink); color: #fff; border-end-end-radius: 6px; }
.msg.it { justify-self: start; background: var(--bg-2); border-end-start-radius: 6px; }
.msg.it.typing::after { content: '…'; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .2; } }
.care-card { border: 1px solid #F1C9C4; background: #FFF6F5; border-radius: 16px; padding: 16px; font-size: 15px; display: grid; gap: 6px; max-width: 86%; }
.composer { position: sticky; bottom: 0; background: linear-gradient(rgba(255, 255, 255, 0), #fff 30%); padding: 16px var(--gut) calc(16px + env(safe-area-inset-bottom, 0px)); }
.composer form { max-width: 820px; margin: 0 auto; display: flex; gap: 10px; align-items: flex-end; background: #fff; border: 1px solid var(--line-2); border-radius: 24px; padding-block: 8px; padding-inline: 18px 8px; box-shadow: var(--shadow); }
.composer textarea { flex: 1 1 0; min-width: 0; border: 0; resize: none; min-height: 28px; max-height: 180px; padding: 8px 0; font-size: 16px; line-height: 1.5; background: transparent; }
.composer textarea:focus { outline: none; }
.composer textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* one line, cut with three dots where the box is narrow */
/* THE MIND (1.9): what a reply leaned on, what was kept, the start of a sitting, a breath */
.msg-meta { justify-self: start; max-width: 86%; margin-top: -10px; font-size: 12.5px; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.msg-meta .pill { border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; background: #fff; }
.msg-meta .pill.kept { border-color: rgba(91,69,240,.25); color: var(--iris); }
.sitting { justify-self: center; text-align: center; max-width: 560px; font-size: 13px; color: var(--ink-3); padding: 2px 12px; }
.breath-note { justify-self: center; max-width: 560px; text-align: center; font-size: 14px; color: var(--ink-2); background: var(--sky, #F5F7FF); border: 1px solid rgba(91,69,240,.12); border-radius: 14px; padding: 10px 14px; }
.talk-side > * { min-width: 0; }
.days { border-top: 1px solid var(--line); padding-top: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
.days-h { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 8px; flex-wrap: wrap; }
.days h2 { font-size: 15px; letter-spacing: -0.01em; }
.days h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); margin: 6px 0 2px; font-weight: 600; }
.habits { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.habits li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 8px; align-items: center; font-size: 14px; }
.habits .tick { width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--line-2); background: #fff; cursor: pointer; display: grid; place-items: center; padding: 0; }
.habits .tick[aria-pressed="true"] { background: var(--iris); border-color: var(--iris); }
.habits .tick[aria-pressed="true"]::after { content: ''; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.habits .streak { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.habits .x { border: 0; background: none; color: var(--ink-3); cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 4px; }
.habit-add { display: flex; gap: 6px; } .habit-add input { flex: 1 1 0; width: 0; min-width: 0; border: 1px solid var(--line-2); border-radius: 10px; padding: 7px 10px; font: inherit; font-size: 14px; background: #fff; }
.threads { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; color: var(--ink-2); }
.threads li { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; } .threads button { border: 0; background: none; color: var(--ink-3); cursor: pointer; font-size: 12px; text-decoration: underline; padding: 0; }
/* DUSK (1.9): the talk page after nine at night when wind-down is on: the evening palette, the same house */
body.dusk { color-scheme: dark; --bg: #0F1222; --bg-2: #161A2C; --bg-3: #1E2338; --ink: #ECEDF6; --ink-2: #C2C6D8; --ink-3: #9198B2; --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.16); --accent-2: #2A2552; --shadow: 0 8px 24px rgba(0,0,0,.35); --sky: #1A1E33; }
body.dusk .nav { background: rgba(15,18,34,.86); }
body.dusk .brand svg { filter: invert(1) hue-rotate(180deg); }   /* the mark, light on the evening ground */
body.dusk .msg.me, body.dusk .btn-primary { background: #5B45F0; color: #fff; }
body.dusk .btn-primary:hover { background: #4A35DD; }
body.dusk .btn-ghost, body.dusk .composer form, body.dusk .composer .mic, body.dusk .habits .tick, body.dusk .habit-add input, body.dusk .msg-meta .pill, body.dusk .paywall { background: #1A1E33; color: var(--ink); }
body.dusk .composer { background: linear-gradient(rgba(15,18,34,0), #0F1222 30%); }
body.dusk .composer .mic svg { stroke: var(--ink); }
body.dusk .care-card { background: #2A1C24; border-color: #5A3440; color: var(--ink); }
body.dusk .breath-note { border-color: rgba(143,129,255,.25); }
body.dusk .stage .owl-img { filter: brightness(.92) saturate(.95); }
body.dusk .talk-side .stage-shadow { opacity: .5; }

/* THE VOICE (1.9): the mic and the captions */
.composer .add { width: 40px; height: 40px; margin-inline-start: -10px; border-radius: 50%; border: 0; background: transparent; display: grid; place-items: center; cursor: pointer; flex: none; padding: 0; color: var(--ink-2); }
.composer .add:hover { background: var(--bg-2); color: var(--ink); }
.composer .add svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.tray { max-width: 820px; margin: 0 auto 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.tray .chip-f { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding-block: 4px; padding-inline: 4px 6px; border-radius: 12px; background: #fff; border: 1px solid var(--line-2); box-shadow: var(--shadow); font-size: 13.5px; max-width: 260px; }
.tray .chip-f img, .tray .chip-f i { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; flex: none; background: var(--bg-2); display: grid; place-items: center; font: 700 10px/1 var(--f-text); font-style: normal; color: var(--ink-3); }
.tray .chip-f span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tray .chip-f.busy { opacity: .6; }
.tray .chip-f button { width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--bg-2); color: var(--ink-2); cursor: pointer; font-size: 15px; line-height: 1; flex: none; }
.msg-files { justify-self: end; display: flex; flex-wrap: wrap; gap: 6px; max-width: 86%; margin-top: -10px; }
.msg-files a { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 999px; background: var(--bg-2); color: var(--ink-2); font-size: 13px; text-decoration: none; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-files img { width: 120px; height: 90px; border-radius: 12px; object-fit: cover; }
body.dusk .tray .chip-f, body.dusk .msg-files a { background: #1A1E33; color: var(--ink); }
.composer .mic { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); background: #fff; display: grid; place-items: center; cursor: pointer; flex: none; padding: 0; }
.composer .mic svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; } .composer .mic svg rect { fill: none; }
.composer .mic[aria-pressed="true"] { background: var(--iris); border-color: var(--iris); box-shadow: 0 0 0 6px rgba(91,69,240,.14); }
.composer .mic[aria-pressed="true"] svg { stroke: #fff; }
.composer .mic.speaking { box-shadow: 0 0 0 calc(4px + 10px * var(--lvl, 0)) rgba(91,69,240,.16); transition: box-shadow .08s; }
.caption { max-width: 820px; margin: 0 auto 10px; text-align: center; font-size: 15px; color: var(--ink-2); min-height: 1.5em; }
.caption .heard { color: var(--ink-3); font-style: italic; }
.paywall { max-width: 820px; margin: 0 auto 12px; border: 1px solid var(--line); border-radius: 18px; padding: 18px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; background: #fff; }
.paywall p { flex: 1 1 260px; }
@media (max-width: 900px) {
  .talk { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: calc(100svh - 68px); min-height: 0; }   /* 1.11.0: never wider than the phone (the message row's least width had set the page's: 444 px on a 360 px screen) */
  .talk-main { height: auto; min-height: 0; }
  .talk-side { position: static; height: auto; border-inline-end: 0; border-bottom: 1px solid var(--line); grid-template-columns: 96px 1fr; align-items: center; padding: 12px 16px; }
  .talk-side .stage { max-width: 96px; }
  .talk-side .hide-m { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   HEAVEN (1.6): the Stage. Light, air, warmth and a whisper of gold.
   The home is the application: the nine on one stage, one line, one button.
   ========================================================================== */
:root { --sky: #F5F7FF; --dawn: #FFF6EC; --mist: #EEF1F8; --cloud: #F8F9FC; --sun: rgba(255, 226, 180, .55); --halo: rgba(120, 110, 255, .14);
  --gold: #C9A227; --gold-2: #F6EBC6; --glass: rgba(255, 255, 255, .66); --glass-line: rgba(255, 255, 255, .9);
  --glass-shadow: 0 24px 60px rgba(60, 50, 120, .10), 0 2px 6px rgba(12, 13, 17, .04); --f-soul: 'Instrument Serif', Georgia, 'Times New Roman', serif; --ease: cubic-bezier(.22, 1, .36, 1); }
.soul { font: italic 400 clamp(44px, 6.4vw, 92px) / 1.02 var(--f-soul); letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; margin: 0; }
.heaven { position: relative; overflow: hidden; background: linear-gradient(180deg, #FFFFFF 0%, var(--sky) 42%, var(--dawn) 100%); }
.heaven::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(52% 40% at 50% 34%, var(--sun) 0%, rgba(255, 226, 180, 0) 70%), radial-gradient(60% 30% at 50% 78%, var(--halo) 0%, rgba(120, 110, 255, 0) 70%); }
/* 1.11.0: the rings, the sun and the horizon are layers the size of the sky, each drawn in its place within itself. They
   were boxes placed by the sky's height (a half, two fifths, the last third of it); when a returning visitor's browser drew
   the top of the page before the rest had arrived, the sky grew and the three jumped (measured: 0.45 of the screen).
   A layer that only grows does not move; what is seen is the same. */
.heaven .rings { position: absolute; inset: 0; pointer-events: none;
  background: repeating-radial-gradient(circle at 50% calc(50% + 320px), rgba(91, 69, 240, .055) 0 1px, rgba(91, 69, 240, 0) 1px 64px);
  -webkit-mask: radial-gradient(circle 800px at 50% calc(50% + 320px), #000 30%, transparent 70%); mask: radial-gradient(circle 800px at 50% calc(50% + 320px), #000 30%, transparent 70%); }
.heaven .sun-disc { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle 280px at 50% 40%, rgba(255, 236, 200, .85), rgba(255, 236, 200, .35) 45%, rgba(255, 236, 200, 0) 100%); }
.heaven .horizon { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 66%, rgba(255, 255, 255, .55) 100%); }
.stage-wrap { position: relative; z-index: 2; display: grid; grid-template-rows: auto 1fr auto; min-height: calc(100vh - 68px); }
.stage-head { display: grid; gap: 14px; justify-items: center; text-align: center; padding: 18px 24px 0; }
.stage-head .eyebrow { margin: 0; }
.stage-head .lead { text-align: center; max-width: 44em; font-size: clamp(16px, 1.4vw, 19px); margin: 0; }
.stage-head .row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.btn-glass { background: var(--glass); color: var(--ink); border: 1px solid var(--glass-line); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: var(--glass-shadow); }
.btn-glass:hover { background: #fff; }
.cast-stage { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 0; padding: 6px 0 0; list-style: none; margin: 0; }
.who { position: relative; display: grid; justify-items: center; gap: 6px; margin: 0 -16px; padding: 0; background: none; border: 0; cursor: pointer; flex: 0 0 auto; transition: transform .32s var(--ease), opacity .32s; color: inherit; text-decoration: none; }
.who .pic { position: relative; height: var(--h, 168px); aspect-ratio: 4 / 5; transition: transform .32s var(--ease); }
.who .pic .stage, .who .pic .stage-host { position: absolute; inset: 0; aspect-ratio: auto; }   /* the still stands at full size before any script (it had no height until the stage woke) */
.who .pic .stage .owl-img, .who .pic img.still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.who .pic img.still { filter: drop-shadow(0 18px 24px rgba(60, 50, 120, .12)); }
.who:hover .pic, .who:focus-visible .pic { transform: translateY(-10px) scale(1.03); }
.who .plate { display: grid; justify-items: center; gap: 3px; min-height: 34px; }
.who .name { font: 600 13.5px/1 var(--f-display); letter-spacing: -0.01em; color: var(--ink-2); }
.who .soulword { font: italic 400 14px/1 var(--f-soul); color: var(--ink-3); }
.who[data-d="3"] .pic { --h: 192px; } .who[data-d="2"] .pic { --h: 224px; } .who[data-d="1"] .pic { --h: 268px; }
.who.centre .pic { --h: 350px; } .who.centre .name { font-size: 15px; color: var(--ink); }
.who[data-d="1"] { transform: translateY(-6px); } .who[data-d="2"] { transform: translateY(-14px); } .who[data-d="3"] { transform: translateY(-22px); } .who[data-d="4"] { transform: translateY(-30px); }
.who[data-d="4"] .pic { opacity: .96; }
/* the chosen one comes forward; the others step back */
.cast-stage.choosing .who { opacity: .35; transform: translateY(6px) scale(.92); }
.cast-stage.choosing .who.chosen { opacity: 1; transform: translateY(-14px) scale(1.12); z-index: 3; }
.stage-foot { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; align-items: center; padding: 14px 24px 22px; position: relative; z-index: 3; }
.chip-g { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); font: 500 14px/1 var(--f-text); color: var(--ink-2); box-shadow: 0 2px 10px rgba(60, 50, 120, .06); }
.chip-g i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .chip-g.gold i { background: var(--gold); }
.stage-hint { display: flex; justify-content: center; gap: 8px; align-items: center; font-size: 13px; color: var(--ink-3); padding: 0 24px 8px; position: relative; z-index: 2; }
.stage-hint kbd { font: 500 11.5px/1 var(--f-text); padding: 4px 7px; border: 1px solid var(--line-2); border-radius: 6px; background: #fff; }
.strip { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 26px var(--gut) 40px; max-width: 1240px; margin: 0 auto; }
.glass { background: var(--glass); border: 1px solid var(--glass-line); backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4); box-shadow: var(--glass-shadow); border-radius: var(--r-l); }
.strip .glass { padding: 22px 24px; display: grid; gap: 6px; }
.strip .glass h3 { font: 600 17px/1.2 var(--f-display); letter-spacing: -0.015em; margin: 0; }
.strip .glass p { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); margin: 0; }
.say { color: var(--ink-3); }
@media (max-width: 1100px) { .who { margin: 0 -10px; } .who .pic { --h: 130px; } .who[data-d="3"] .pic { --h: 150px; } .who[data-d="2"] .pic { --h: 175px; } .who[data-d="1"] .pic { --h: 210px; } .who.centre .pic { --h: 270px; } }
@media (max-width: 760px) {
  .stage-wrap { min-height: 0; }
  .stage-head .soul { font-size: 44px; max-width: 9ch; }
  .cast-stage { overflow-x: auto; justify-content: flex-start; padding: 14px 20px 0; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 2px; }
  .cast-stage::-webkit-scrollbar { display: none; }
  .who { margin: 0 -6px; scroll-snap-align: center; transform: none !important; }
  .who .pic { --h: 150px !important; } .who.centre .pic { --h: 220px !important; }
  .who .plate { display: none; } .who.centre .plate { display: grid; }
  .strip { grid-template-columns: 1fr; }
  .stage-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) { .who, .who .pic { transition: none; } }
/* the inner pages stand on the same ground: the first section opens on the sky */
body:not(.on-heaven) main > .section:first-child { background: linear-gradient(180deg, #FFFFFF 0%, var(--sky) 60%, #FFFFFF 100%); }
body:not(.on-heaven) main > .section:first-child .eyebrow { color: var(--ink-3); }
.cast-card .stage-host { aspect-ratio: 4 / 5; }
.cast-card .d3 { margin: 0; }

/* FIND YOUR COMPANION (1.9) */
.quiz { padding: clamp(20px, 4vw, 44px); min-height: 420px; }
.quiz-q { display: grid; gap: 16px; }
.quiz-q h2 { text-wrap: balance; }
.quiz-bar { height: 4px; border-radius: 4px; background: var(--bg-3); overflow: hidden; } .quiz-bar i { display: block; height: 100%; background: var(--accent); transition: width .3s ease; }
.quiz-a { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.quiz-a .opt { justify-items: start; text-align: start; padding: 16px; font-size: 16px; }
.quiz-a .opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.quiz-back { justify-self: start; background: none; border: 0; padding: 0; color: var(--ink-3); cursor: pointer; text-decoration: underline; font: inherit; font-size: 14px; }
.quiz-result { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(16px, 3vw, 40px); align-items: center; outline: none; }
.quiz-stage .stage { max-width: 340px; margin-inline: auto; }
@media (max-width: 760px) { .quiz-result { grid-template-columns: 1fr; } .quiz-stage .stage { max-width: 240px; } }

/* ==========================================================================
   THE FLOATING COMPANION (1.10): the member's companion at the edge of every page; its panel; its window on top
   ========================================================================== */
.buddy { --orb: 72px; position: fixed; z-index: 80; top: var(--buddy-y, auto); width: var(--orb); height: var(--orb); transition: top .35s var(--ease); }
.buddy[data-side="right"] { right: calc(16px + env(safe-area-inset-right, 0px)); }
.buddy[data-side="left"] { left: calc(16px + env(safe-area-inset-left, 0px)); }
.buddy.dragging { left: var(--buddy-x) !important; right: auto !important; transition: none; }
.buddy-orb { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 50%; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent;
  background: radial-gradient(120% 100% at 50% 28%, #FFFFFF 0%, var(--sky) 58%, #E6E2FF 100%);
  box-shadow: 0 0 0 3px #fff, 0 12px 30px rgba(40, 30, 110, .20), 0 2px 6px rgba(12, 13, 17, .08); transition: transform .25s var(--ease), box-shadow .25s, opacity .2s; }
.buddy-orb:hover { transform: scale(1.05); }
.buddy-orb:active { transform: scale(.97); }
.buddy-orb:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 50%; }
.buddy.dragging .buddy-orb { transform: scale(1.08); cursor: grabbing; box-shadow: 0 0 0 3px #fff, 0 20px 44px rgba(40, 30, 110, .28); }
.buddy-face { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; pointer-events: none; }
.buddy-stage { position: absolute; inset: 0; }
.buddy-stage .stage-host { position: absolute; max-width: none; }
.buddy-still { position: absolute; max-width: none; height: auto; }
.buddy-dot { position: absolute; right: 1px; top: 1px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px #fff; transform: scale(0); transition: transform .3s var(--ease); pointer-events: none; }
.buddy.news .buddy-dot { transform: scale(1); }
.buddy.thinking .buddy-orb { animation: buddy-think 1.6s ease-in-out infinite; }
@keyframes buddy-think { 0%, 100% { box-shadow: 0 0 0 3px #fff, 0 0 0 3px rgba(91, 69, 240, 0), 0 12px 30px rgba(40, 30, 110, .20); } 50% { box-shadow: 0 0 0 3px #fff, 0 0 0 10px rgba(91, 69, 240, .20), 0 12px 30px rgba(40, 30, 110, .20); } }
.buddy.popped .buddy-orb { box-shadow: 0 0 0 3px #fff, 0 0 0 7px var(--accent-2), 0 12px 30px rgba(40, 30, 110, .20); }

.buddy-panel { position: absolute; z-index: 1; width: min(360px, calc(100vw - 32px)); max-height: min(600px, var(--room, 560px)); display: flex; flex-direction: column;
  background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: saturate(1.4) blur(18px); backdrop-filter: saturate(1.4) blur(18px); color: var(--ink);
  border: 1px solid rgba(255, 255, 255, .9); border-radius: 24px; box-shadow: 0 24px 60px rgba(60, 50, 120, .18), 0 2px 6px rgba(12, 13, 17, .06); overflow: hidden; animation: buddy-in .28s var(--ease); }
.buddy[data-side="right"] .buddy-panel { right: 0; }
.buddy[data-side="left"] .buddy-panel { left: 0; }
.buddy[data-dir="up"] .buddy-panel { bottom: calc(100% + 14px); transform-origin: 50% 100%; }
.buddy[data-dir="down"] .buddy-panel { top: calc(100% + 14px); transform-origin: 50% 0; }
@keyframes buddy-in { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
.bp-grab { display: none; }
.bp-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-block: 12px 8px; padding-inline: 18px 10px; }
.bp-who { min-width: 0; display: grid; }
.bp-who b { font: 650 16px/1.2 var(--f-display); letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-who span { font-size: 12.5px; line-height: 1.3; color: var(--ink-3); }
.bp-tools { display: flex; gap: 2px; flex: none; }
.bp-tool { width: 34px; height: 34px; border-radius: 11px; border: 0; padding: 0; background: transparent; color: var(--ink-2); display: grid; place-items: center; cursor: pointer; transition: background .15s, color .15s; }
.bp-tool:hover { background: var(--bg-2); color: var(--ink); }
.bp-tool svg, .bp-ptt svg, .bp-send svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.bp-tool svg .fill { fill: currentColor; stroke: none; }
.bp-tool[data-act="speak"][aria-pressed="false"] .w1, .bp-tool[data-act="speak"][aria-pressed="false"] .w2, .bp-tool[data-act="speak"][aria-pressed="true"] .mute { display: none; }
.bp-tool[aria-pressed="true"] { background: var(--accent-2); color: var(--accent); }
.bp-stage { position: relative; height: 150px; margin: 0 10px; border-radius: 18px; overflow: hidden; display: grid; place-items: end center; flex: none;
  background: radial-gradient(55% 70% at 50% 72%, var(--halo), rgba(120, 110, 255, 0) 72%), linear-gradient(180deg, var(--sky) 0%, var(--dawn) 100%); }
.bp-host { width: 146px; margin-bottom: -16px; }
.bp-msgs { flex: 1 1 auto; min-height: 84px; overflow-y: auto; overscroll-behavior: contain; padding: 12px 14px 10px; display: flex; flex-direction: column; gap: 8px; }
.bp-sit { font-size: 11.5px; line-height: 1.45; color: var(--ink-3); text-align: center; padding: 0 6px 4px; margin: 0; }
.bp-msg { max-width: 86%; padding: 9px 13px; border-radius: 18px; font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.bp-msg.me { align-self: flex-end; background: var(--ink); color: #fff; border-end-end-radius: 6px; }
.bp-msg.it { align-self: flex-start; background: var(--bg-2); border-end-start-radius: 6px; }
.bp-msg.typing::after { content: '…'; animation: blink 1s infinite; }
.bp-msg a { color: var(--accent); }
.bp-note { align-self: center; max-width: 92%; text-align: center; font-size: 13px; line-height: 1.5; color: var(--ink-2); background: var(--sky); border: 1px solid rgba(91, 69, 240, .12); border-radius: 14px; padding: 9px 12px; margin: 0; }
.bp-note a { color: var(--accent); }
.bp-care { border: 1px solid #F1C9C4; background: #FFF6F5; border-radius: 14px; padding: 10px 12px; font-size: 13px; line-height: 1.45; display: grid; gap: 4px; }
.bp-cap { padding: 0 18px 6px; font-size: 13px; color: var(--ink-2); text-align: center; }
.bp-form { display: flex; gap: 6px; align-items: center; margin: 2px 10px 0; padding-block: 5px; padding-inline: 16px 5px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; flex: none; transition: border-color .15s, box-shadow .15s; }
.bp-form:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(91, 69, 240, .12); }
.bp-form input { flex: 1 1 0; width: 0; min-width: 0; border: 0; background: transparent; font-size: 15px; padding: 6px 0; outline: none; }
.bp-ptt, .bp-send { width: 36px; height: 36px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; cursor: pointer; flex: none; touch-action: none; transition: background .15s, box-shadow .15s, opacity .15s; }
.bp-send { background: var(--ink); color: #fff; }
.bp-send:disabled { opacity: .4; cursor: default; }
.bp-ptt { background: var(--bg-2); color: var(--ink); }
.bp-ptt.on { background: var(--accent); color: #fff; box-shadow: 0 0 0 6px rgba(91, 69, 240, .16); }
.bp-more { display: block; text-align: center; font-size: 13px; color: var(--ink-3); padding: 10px 0 13px; text-decoration: underline; text-underline-offset: 3px; flex: none; }
.bp-more:hover { color: var(--ink); }
.buddy-video { position: fixed; right: 0; bottom: 0; width: 2px; height: 2px; opacity: .01; pointer-events: none; }
/* the evening: late at night with wind-down on, its panel keeps the dusk palette */
.buddy.dusk .buddy-panel { --bg-2: #1E2338; --ink: #ECEDF6; --ink-2: #C2C6D8; --ink-3: #9198B2; --line-2: rgba(255, 255, 255, .16); --sky: #1A1E33; --dawn: #161A2C; --accent-2: #2A2552; --halo: rgba(143, 129, 255, .16);
  background: rgba(15, 18, 34, .95); border-color: rgba(255, 255, 255, .08); color-scheme: dark; }
.buddy.dusk .bp-msg.me, .buddy-pip.dusk .bp-msg.me { background: #5B45F0; }
.buddy.dusk .bp-form, .buddy-pip.dusk .bp-form { background: #1A1E33; }
.buddy.dusk .bp-care, .buddy-pip.dusk .bp-care { background: #2A1C24; border-color: #5A3440; }
.buddy.dusk .bp-send, .buddy-pip.dusk .bp-send { background: #5B45F0; }
/* on a phone: the panel is a sheet from the bottom, over a veil */
@media (max-width: 560px) {
  .buddy .buddy-panel { position: fixed; left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: auto; max-height: 84svh; border-radius: 24px 24px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); animation: buddy-sheet .32s var(--ease); }
  .buddy.open::before { content: ''; position: fixed; inset: 0; background: rgba(12, 13, 17, .32); animation: buddy-veil .2s ease; }
  .buddy.open .buddy-orb { opacity: 0; pointer-events: none; }
  .bp-grab { display: block; width: 38px; height: 4px; border-radius: 4px; background: var(--line-2); margin: 8px auto 0; flex: none; }
  .bp-head { padding-top: 6px; }
  .bp-stage { height: 168px; } .bp-host { width: 172px; margin-bottom: -20px; }
  .bp-form input { font-size: 16px; }
}
@keyframes buddy-sheet { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes buddy-veil { from { opacity: 0; } }
/* its own window on top of every other (Document Picture-in-Picture) */
body.buddy-pip { margin: 0; height: 100vh; overflow: hidden; background: var(--bg); }
.buddy-pip .buddy-panel { position: static; width: 100%; height: 100vh; max-height: none; border: 0; border-radius: 0; box-shadow: none; animation: none; -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg); }
.buddy-pip .bp-grab { display: none; }
.buddy-pip .bp-stage { height: 34vh; min-height: 120px; }
.buddy-pip .bp-host { width: calc(34vh * .92); min-width: 110px; margin-bottom: calc(34vh * -.1); }
@media print { .buddy { display: none; } }

/* Talk: the companion's notes on the member's devices; the letter */
.switches { display: grid; gap: 8px; margin-top: 8px; justify-items: start; }
.reach-note { max-width: 30em; line-height: 1.45; }
#tk-notes { display: grid; gap: 8px; }
#tk-notes .check { grid-template-columns: 18px 1fr; gap: 8px; font-size: 14px; align-items: center; }
#tk-notes .check input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
#tk-notes .letter-at { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
#tk-notes input[type="time"] { width: auto; height: auto; margin: 0; border: 1px solid var(--line-2); border-radius: 8px; padding: 2px 6px; font: inherit; font-size: 13.5px; background: #fff; color: var(--ink); }
#tk-notes input[type="time"]:disabled { opacity: .5; }
.devices { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.devices li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: baseline; }
.devices li > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.devices .x { border: 0; background: none; color: var(--ink-3); cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 4px; }
.linkish { justify-self: start; border: 0; background: none; padding: 0; color: var(--ink-3); font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.linkish:hover { color: var(--ink); }
.letter-card { justify-self: start; max-width: min(86%, 560px); display: grid; gap: 6px; padding: 16px 18px; border-radius: 20px; border-end-start-radius: 6px;
  background: linear-gradient(180deg, var(--sky, #F5F7FF), var(--dawn, #FFF6EC)); border: 1px solid rgba(91, 69, 240, .12); font-size: 15.5px; line-height: 1.55; }
.letter-card .eyebrow { margin: 0 0 2px; }
.letter-card .opener { font: italic 400 22px/1.2 var(--f-soul); color: var(--ink); }
body.dusk .letter-card { background: #1A1E33; border-color: rgba(143, 129, 255, .25); }
body.dusk #tk-notes input[type="time"] { background: #1A1E33; }

/* Talk: the switch that keeps the companion with you on every page */
.switch { display: inline-flex; gap: 10px; align-items: center; font-size: 14px; color: var(--ink-2); cursor: pointer; user-select: none; }
.switch input { appearance: none; -webkit-appearance: none; width: 36px; height: 22px; margin: 0; border-radius: 999px; background: var(--line-2); position: relative; cursor: pointer; flex: none; transition: background .2s; }
.switch input::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(12, 13, 17, .2); transition: transform .2s var(--ease); }
.switch input:checked { background: var(--accent); }
.switch input:checked::after { transform: translateX(14px); }
.switch input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ==========================================================================
   THREE LANGUAGES (1.10): Hindi in Devanagari, Arabic right to left. Inter keeps the Latin letters and the digits in
   all three, so the brand and the prices read the same; each script gets room for its marks, and Arabic is never
   letter-spaced (it would break the joins) nor set in capitals.
   ========================================================================== */
/* 1.11.0: THE FACES OF HINDI AND ARABIC. The first page a reader opens is set in their device's own Devanagari or Arabic
   face: nothing is fetched for it, nothing is set twice, nothing moves. Once the page stands, the house's faces are
   fetched quietly (site.js: warmFaces) and the browser is told it has them; from the next page on, the pages name them
   (the root carries data-faces, set by the one line in the head before anything is drawn), and they are there at the
   first drawing, from the browser's own store. None is ever swapped in late (fonts-hi.css · fonts-ar.css: optional).
   The word space is then the script's own ('KL Space': the space of its text face), so a line is broken once, by the face
   it is read in, and does not move if the Latin face arrives after it. The name of the house keeps its own. */
:root:lang(hi)[data-faces] { --f-text: 'KL Space', 'Inter', 'Noto Sans Devanagari', ui-sans-serif, system-ui, sans-serif; --f-display: 'KL Space', 'Inter Tight', 'Noto Sans Devanagari', 'Inter', ui-sans-serif, system-ui, sans-serif; --f-soul: 'Instrument Serif', 'Tiro Devanagari Hindi', Georgia, serif; }
:root:lang(ar)[data-faces] { --f-text: 'KL Space', 'Inter', 'IBM Plex Sans Arabic', ui-sans-serif, system-ui, sans-serif; --f-display: 'KL Space', 'Inter Tight', 'IBM Plex Sans Arabic', 'Inter', ui-sans-serif, system-ui, sans-serif; --f-soul: 'Instrument Serif', 'Amiri', Georgia, serif; }
:root:lang(hi) .brand, :root:lang(ar) .brand { font-family: 'Inter Tight', 'Inter', ui-sans-serif, system-ui, sans-serif; }
:root:lang(hi) body { line-height: 1.72; }
:root:lang(ar) body { line-height: 1.8; }
:root:lang(hi) :is(h1, h2, h3, h4, .d1, .d2, .d3, .d4, .soul, .lead, .eyebrow, .bp-who b, .faq summary),
:root:lang(ar) :is(h1, h2, h3, h4, .d1, .d2, .d3, .d4, .soul, .lead, .eyebrow, .bp-who b, .faq summary) { letter-spacing: 0; }
:root:lang(hi) :is(h1, h2, h3, h4, .d1, .d2, .d3, .d4) { line-height: 1.28; }
:root:lang(ar) :is(h1, h2, h3, h4, .d1, .d2, .d3, .d4) { line-height: 1.36; }
:root:lang(hi) .soul { line-height: 1.28; font-style: normal; }
:root:lang(ar) .soul { line-height: 1.4; font-style: normal; }
:root:lang(hi) .eyebrow, :root:lang(ar) .eyebrow { text-transform: none; font-size: 14px; }
:root:lang(ar) * { letter-spacing: 0 !important; }
:root:lang(hi) :is(.soulword, .letter-card .opener), :root:lang(ar) :is(.soulword, .letter-card .opener) { font-style: normal !important; }   /* neither script slants: no slanted face is kept for them */
/* right to left: the few things that point a way turn round */
[dir="rtl"] .bp-send svg, [dir="rtl"] .bp-tool[data-act="float"] svg { transform: scaleX(-1); }
[dir="rtl"] .switch input:checked::after { transform: translateX(-14px); }
[dir="rtl"] .faq summary::after { transform-origin: center; }
/* the language links: in the footer, and in the phone's menu */
.langs { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; }
.langs a { color: var(--ink-3); text-decoration: none; }
.langs a:hover, .langs a[aria-current="true"] { color: var(--ink); }
.langs a[aria-current="true"] { font-weight: 600; }
.langs-sheet { padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--line); }
/* an English page offers the visitor's own language, once */
.lang-offer { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 8px 16px; background: var(--sky); border-bottom: 1px solid rgba(91, 69, 240, .12); font-size: 15px; }
.lang-offer a { color: var(--accent); font-weight: 600; }
.lang-offer:lang(hi) { font-family: 'Noto Sans Devanagari', var(--f-text); }
.lang-offer:lang(ar) { font-family: 'IBM Plex Sans Arabic', var(--f-text); }
.lang-offer button { border: 0; background: none; color: var(--ink-3); font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 6px; }
.nav-sheet .langs a { padding: 6px 0; border: 0; font-size: 15px; font-weight: 500; }

/* ==========================================================================
   THE MEMBERS' ROOMS (1.10): the account, the Ledger, the Archive, the Vault and Succession.
   The website's sky over every room; white panels on it; the house's gold only on what is kept for good.
   ========================================================================== */
body.in-room { background: linear-gradient(180deg, #FFFFFF 0, var(--sky) 380px, #FAFBFE 900px, #FAFBFE 100%); }
.room-head { padding-block: 22px clamp(24px, 4vw, 40px); }
.rooms { display: flex; gap: 4px; padding: 4px; margin-block-end: clamp(24px, 4vw, 40px); background: var(--glass); border: 1px solid var(--glass-line); border-radius: 999px; box-shadow: 0 2px 10px rgba(60, 50, 120, .06);
  width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.rooms::-webkit-scrollbar { display: none; }
.rooms a { flex: none; display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 999px; text-decoration: none; font: 600 14.5px/1 var(--f-text); color: var(--ink-2); white-space: nowrap; }
.rooms a:hover { color: var(--ink); background: rgba(255, 255, 255, .7); }
.rooms a[aria-current="page"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(12, 13, 17, .06), 0 4px 14px rgba(60, 50, 120, .08); }
.room-head-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: end; }
.room-title { display: grid; gap: 12px; max-width: 44rem; }
.room-title .eyebrow { margin: 0; }
.soul-line { font: italic 400 clamp(22px, 2.4vw, 30px)/1.2 var(--f-soul); color: var(--ink-2); margin: 0; }
:root:lang(hi) .soul-line, :root:lang(ar) .soul-line { font-style: normal; line-height: 1.45; }
.room-title .lead { font-size: 17px; }
.room-body { padding-block: 0 clamp(56px, 8vw, 96px); min-height: 70vh; transition: opacity .28s var(--ease); }
/* a room is shown whole, once its words have arrived: nothing moves under the reader's eye while it fills */
.room-body.waking { visibility: hidden; opacity: 0; }
.room-grid { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 40px; align-items: start; }
.room-index { position: sticky; top: 92px; display: grid; gap: 2px; }
.room-index a { display: block; padding: 8px 14px; border-radius: 10px; text-decoration: none; font-size: 14.5px; font-weight: 500; color: var(--ink-3); border-inline-start: 2px solid transparent; }
.room-index a:hover { color: var(--ink); background: rgba(255, 255, 255, .7); }
.room-index a[aria-current="true"] { color: var(--ink); font-weight: 600; background: #fff; border-inline-start-color: var(--accent); }
.room-main { display: grid; gap: 20px; min-width: 0; }
.room-narrow { max-width: 860px; display: grid; gap: 20px; }

/* a panel: one subject, its heading, its rows */
.panel { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: clamp(20px, 3vw, 30px); display: grid; gap: 18px; scroll-margin-top: 92px; min-width: 0; box-shadow: 0 1px 2px rgba(12, 13, 17, .03); }
/* a long room draws only what is near the screen; the rest keeps its place until it is reached */
.room-main > .panel:nth-child(n+3) { content-visibility: auto; contain-intrinsic-size: auto 560px; }
.panel-h { display: grid; gap: 6px; }
.panel > div[id^="ac-"] { display: grid; gap: 16px; min-width: 0; }
#ac-imp-out:empty { display: none; }
#ac-imp-out { padding-block: 4px 12px; display: grid; gap: 10px; }
.panel-h .d4 { margin: 0; }
.panel-h p { max-width: 40rem; }
.panel h3 { font: 600 15px/1.3 var(--f-display); margin: 6px 0 0; }
.panel.quiet { background: rgba(255, 255, 255, .6); }
.sets { display: grid; }
.set { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: center; padding-block: 16px; border-top: 1px solid var(--line); }
.set:first-child { border-top: 0; padding-top: 0; }
.set:last-child { padding-bottom: 0; }
.set > .what { display: grid; gap: 3px; min-width: 0; }
.set > .what b, .set > .what label { font-weight: 600; font-size: 15.5px; color: var(--ink); }
.set > .what span { font-size: 14px; color: var(--ink-3); line-height: 1.5; }
.set > .how { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.set.wide { grid-template-columns: minmax(0, 1fr); }
.set.wide > .how { justify-content: flex-start; }
.set .input { height: 44px; width: auto; min-width: 0; }
.set input[type="time"].input { width: 9.5rem; }
.set .how select.input, .set .how .inline select.input { flex: 0 0 auto; width: auto; min-width: 5.5rem; }
.set .how .inline { justify-content: flex-end; flex-wrap: nowrap; }
.set.wide .how .inline { justify-content: flex-start; flex-wrap: wrap; }
select.input { padding-inline-end: 36px; appearance: none; -webkit-appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%237A808B' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat; background-size: 11px; background-position: right 14px center; cursor: pointer; }
[dir="rtl"] select.input { background-position: left 14px center; }
.inline { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.inline .input { flex: 1 1 12rem; }
/* a choice of a few: one pressed (radios that look like the plans toggle) */
.seg { display: inline-flex; flex-wrap: wrap; background: var(--bg-3); border-radius: 999px; padding: 4px; gap: 2px; }
.seg button { border: 0; background: transparent; height: 36px; padding: 0 16px; border-radius: 999px; font-size: 14.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.seg button[aria-checked="true"] { background: #fff; color: var(--ink); box-shadow: var(--shadow); }
.seg button:disabled { cursor: progress; }
/* choices with a line each */
.picks { display: grid; gap: 10px; }
.pick { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 16px; cursor: pointer; transition: border-color .15s, background .15s; }
.pick:hover { border-color: var(--ink-3); }
.pick:has(input:checked) { border-color: var(--ink); background: var(--bg-2); }
.pick input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--ink); }
.pick b { display: block; font-size: 15.5px; }
.pick span span { display: block; font-size: 14px; color: var(--ink-3); line-height: 1.5; margin-top: 2px; }
/* a quiet question before something that cannot be undone */
.ask { border: 1px solid #F1C9C4; background: #FFF8F7; border-radius: 16px; padding: 16px 18px; display: grid; gap: 12px; }
.ask p { font-size: 15px; color: var(--ink); }
.check.need span { color: #B42318; }
.btn-danger { background: #B42318; color: #fff; }
.btn-danger:hover { background: #962018; }
.linkish { border: 0; background: none; padding: 0; color: var(--accent); font: 600 14.5px/1.4 var(--f-text); cursor: pointer; text-align: start; }
.linkish:hover { text-decoration: underline; }
.pill-s { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--bg-2); color: var(--ink-2); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.pill-s.ok { background: #E7F5EE; color: var(--ok); }
.pill-s.warn { background: #FFF3E0; color: var(--warn); }
.pill-s.gold { background: var(--gold-2); color: #7A5E0E; }
.pill-s.iris { background: var(--accent-2); color: var(--accent); }
.empty { padding: 28px 20px; text-align: center; color: var(--ink-3); font-size: 15px; display: grid; gap: 10px; justify-items: center; border: 1px dashed var(--line-2); border-radius: 18px; }
.skeleton { height: 18px; border-radius: 8px; background: linear-gradient(90deg, var(--bg-2), var(--bg-3), var(--bg-2)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* the header's companion: the one they talk to, waiting */
.room-me { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; padding-block: 14px; padding-inline: 14px 20px; min-width: 300px; }
.room-me .pic { width: 96px; aspect-ratio: 4 / 5; position: relative; }
.room-me .pic > .stage-host, .room-me .pic > .stage { position: absolute; inset: 0; width: 100%; height: 100%; }
.room-me .pic img.still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.room-me b { font: 600 18px/1.2 var(--f-display); display: block; }
.room-me .small { margin: 2px 0 10px; }

/* your companions */
.co-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.co { position: relative; display: grid; gap: 10px; align-content: start; padding: 12px 12px 16px; border: 1px solid var(--line); border-radius: 20px; background: #fff; }
.co.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.co .pic { aspect-ratio: 1; border-radius: 14px; background: radial-gradient(70% 60% at 50% 42%, #fff 0%, var(--sky) 70%, var(--mist) 100%); position: relative; overflow: hidden; }
.co .pic { display: grid; place-items: end center; }
.co .pic > .stage-host, .co .pic > .stage { width: 76%; aspect-ratio: 4 / 5; position: relative; }
.co .pic img.still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(60, 50, 120, .14)); }
.co .pic .pill-s { position: absolute; top: 10px; inset-inline-start: 10px; }
.co-name { display: grid; gap: 2px; padding-inline: 4px; }
.co-name b { font: 600 17px/1.2 var(--f-display); overflow-wrap: anywhere; }
.co-name span { font-size: 13px; color: var(--ink-3); }
.co .acts { display: flex; flex-wrap: wrap; gap: 6px; padding-inline: 4px; }
.co .acts .btn { height: 38px; padding: 0 14px; font-size: 14px; flex: 1; }
.co-links { display: flex; flex-wrap: wrap; gap: 4px 10px; padding-inline: 4px; }
.co-links a, .co-links button { border: 0; background: none; padding: 0; color: var(--ink-3); font: 500 13.5px/1.6 var(--f-text); text-decoration: none; cursor: pointer; }
.co-links a:hover, .co-links button:hover { color: var(--ink); text-decoration: underline; }
.co-links button[data-act="drop"]:hover, .co-links button[data-a="drop"]:hover { color: #B42318; }
.co.new { place-content: center; justify-items: center; text-align: center; min-height: 240px; border-style: dashed; border-color: var(--line-2); color: var(--ink-2); text-decoration: none; background: rgba(255, 255, 255, .6); }
.co.new:hover { border-color: var(--ink-3); background: #fff; }
.co.new i { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-2); color: var(--accent); font: 400 26px/1 var(--f-text); font-style: normal; }
.co .ask { padding: 12px; gap: 8px; }
.co .ask p { font-size: 13.5px; }

/* the plan */
.plan-now { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 24px; align-items: center; padding: 18px 20px; border-radius: 18px; background: var(--bg-2); }
.panel .plan-now h3.d3 { margin: 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font: 650 clamp(24px, 2.4vw, 30px)/1.15 var(--f-display); letter-spacing: -0.02em; }
.plan-now p { color: var(--ink-2); font-size: 15px; }
.receipts { list-style: none; padding: 0; margin: 0; display: grid; }
.receipts li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14.5px; align-items: center; }
.receipts li:first-child { border-top: 0; }
.receipts b { font-variant-numeric: tabular-nums; }

/* rituals: the days they keep */
.days-kept { display: grid; gap: 8px; }
.day-row { display: grid; grid-template-columns: minmax(0, 1fr) 9.5rem 5.5rem 40px; gap: 8px; align-items: center; }
.day-row .input { height: 42px; width: 100%; }
.day-row .x, .devices .x { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2); background: #fff; color: var(--ink-3); cursor: pointer; font-size: 18px; line-height: 1; }
.day-row .x:hover, .devices .x:hover { color: var(--ink); border-color: var(--ink-3); }
.panel .devices { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.panel .devices li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; font-size: 14.5px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; }

/* the house's notes back */
.notes-back { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.notes-back li { display: grid; gap: 6px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; }
.notes-back .nh { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; color: var(--ink-3); flex-wrap: wrap; }
.notes-back .nh b { color: var(--ink); }
.notes-back .na { padding: 10px 14px; border-radius: 12px; background: var(--accent-2); font-size: 14.5px; }
textarea.input { height: auto; min-height: 120px; padding: 12px 16px; resize: vertical; line-height: 1.55; }
.panel.danger { border-color: #F1C9C4; }

/* the Ledger */
.ledger-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.search { position: relative; }
.search .input { padding-inline-start: 42px; height: 46px; }
.search svg { position: absolute; inset-inline-start: 15px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--ink-3); pointer-events: none; }
.cats { display: flex; flex-wrap: wrap; gap: 8px; }
.cats button { height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; font-size: 14px; font-weight: 500; color: var(--ink-2); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.cats button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.cats button i { font-style: normal; font-size: 12px; opacity: .7; font-variant-numeric: tabular-nums; }
.lines { list-style: none; padding: 0; margin: 0; display: grid; }
.lines > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; padding: 16px 4px; border-top: 1px solid var(--line); align-items: start; transition: opacity .4s var(--ease), transform .4s var(--ease); }
.lines > li:first-child { border-top: 0; }
.lines > li.going { opacity: 0; transform: translateX(12px); }
[dir="rtl"] .lines > li.going { transform: translateX(-12px); }
.lines .said { font-size: 16.5px; line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; }
.lines .why { font-size: 13.5px; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin-top: 6px; }
.lines .acts { display: flex; gap: 4px; }
.icon-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid transparent; background: none; color: var(--ink-3); cursor: pointer; display: grid; place-items: center; }
.icon-btn:hover { color: var(--ink); border-color: var(--line-2); background: #fff; }
.icon-btn svg { width: 17px; height: 17px; }
.lines .edit { grid-column: 1 / -1; display: grid; gap: 8px; }
.lines .edit .row { justify-content: flex-end; }
.asks { display: grid; gap: 10px; }
.asks li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; align-items: center; padding: 14px 16px; border-radius: 16px; background: var(--accent-2); list-style: none; }
.asks ul, ul.asks { padding: 0; margin: 0; }
.asks .row { flex-wrap: nowrap; }

/* the Archive */
.drop { display: grid; justify-items: center; gap: 10px; text-align: center; padding: clamp(24px, 4vw, 40px) 20px; border: 1.5px dashed var(--line-2); border-radius: 24px; background: rgba(255, 255, 255, .7); transition: border-color .15s, background .15s; }
.drop.over { border-color: var(--accent); background: var(--accent-2); }
.drop p { font-size: 14px; color: var(--ink-3); max-width: 34rem; }
.drop .btn { white-space: normal; height: auto; min-height: 48px; padding-block: 10px; text-align: center; }   /* 1.11.0: a long label breaks on a small phone instead of widening the page */
.meter { display: grid; gap: 8px; min-width: 260px; padding: 16px 18px; }
.meter .bar { height: 6px; border-radius: 6px; background: var(--bg-3); overflow: hidden; }
.meter .bar i { display: block; height: 100%; background: var(--accent); border-radius: 6px; }
.meter b { font: 600 15px/1.2 var(--f-display); }
.files { list-style: none; padding: 0; margin: 0; display: grid; }
.files > li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 4px; border-top: 1px solid var(--line); }
.files > li:first-child { border-top: 0; }
.files .th { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; background: var(--bg-2); display: grid; place-items: center; font: 700 11px/1 var(--f-text); letter-spacing: .06em; color: var(--ink-3); }
.files .nm { display: grid; gap: 4px; min-width: 0; }
.files .nm b { font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files .nm input.input { height: 38px; font-size: 15px; }
.files .nm span { font-size: 13px; color: var(--ink-3); }
.files .nm .switch { font-size: 13.5px; margin-top: 4px; }
.files .acts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.files .acts .btn { height: 34px; padding: 0 12px; font-size: 13.5px; }
.files .ask { grid-column: 1 / -1; }
.hits { display: grid; gap: 8px; }
.hits:empty, #ar-busy:empty { display: none; }
.files .co-links { padding-inline: 6px 0; }
.hits p { padding: 12px 14px; border-radius: 14px; background: var(--bg-2); font-size: 14.5px; }
.hits mark { background: var(--gold-2); color: inherit; border-radius: 3px; padding: 0 2px; }
.busy-line { font-size: 14px; color: var(--ink-3); padding: 8px 4px; }

/* the Vault: certificates */
.certs { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
.cert { position: relative; background: #fff; border-radius: 26px; padding: 30px 26px 24px; display: grid; gap: 14px; justify-items: center; text-align: center; border: 1px solid #EADFB8;
  box-shadow: inset 0 0 0 6px #fff, inset 0 0 0 7px rgba(201, 162, 39, .35), 0 18px 50px rgba(60, 50, 120, .08); }
.cert.lit { outline: 3px solid var(--accent); outline-offset: 4px; }
.cert.standing { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr); text-align: start; justify-items: start; align-items: center; gap: 18px 32px; }
.medal { position: relative; width: 132px; aspect-ratio: 1; border-radius: 50%; flex: none;
  background: conic-gradient(from 210deg, #8E6F1D, #C9A227 18%, #F3E3B0 32%, #C9A227 48%, #7A5E14 62%, #C9A227 80%, #F3E3B0 92%, #8E6F1D); box-shadow: 0 10px 26px rgba(122, 94, 20, .22), inset 0 2px 6px rgba(255, 248, 230, .6); }
.medal::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: #fff; box-shadow: inset 0 2px 8px rgba(0, 0, 0, .18); }
.medal img { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); border-radius: 50%; object-fit: cover; transform: scale(1.32); clip-path: circle(37.8% at 50% 50%); }
.medal.mark { display: grid; place-items: center; }
.medal.mark svg { position: relative; width: 46%; height: 46%; }
.cert .word { font: 600 12px/1 var(--f-text); letter-spacing: .16em; text-transform: uppercase; color: #8E6F1D; margin: 4px 0 0; }
:root:lang(hi) .cert .word, :root:lang(ar) .cert .word { letter-spacing: 0; text-transform: none; font-size: 13.5px; }
.cert h2 { font: italic 400 clamp(30px, 3vw, 38px)/1.1 var(--f-soul); letter-spacing: 0; margin: 0; overflow-wrap: anywhere; }
:root:lang(hi) .cert h2, :root:lang(ar) .cert h2 { font-style: normal; line-height: 1.35; }
.cert .sub { font-size: 14.5px; color: var(--ink-2); }
.cert dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 18px; margin: 6px 0 0; width: 100%; text-align: start; font-size: 14px; border-top: 1px solid var(--line); padding-top: 14px; }
.cert dt { color: var(--ink-3); font-weight: 500; }
.cert dd { margin: 0; color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.cert .reg, .reg-no { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; letter-spacing: .04em; direction: ltr; unicode-bidi: isolate; }
.reg-no { color: var(--ink, inherit); white-space: nowrap; }
.cert .seal { font-size: 13px; color: var(--ink-3); display: inline-flex; gap: 6px; align-items: center; }
.cert .seal::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.cert .acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.cert.standing .acts { justify-content: flex-start; }
.cert .acts .btn { height: 36px; padding: 0 14px; font-size: 14px; }

/* Succession */
.heir-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px 20px; align-items: center; padding: 20px; border-radius: 20px; background: linear-gradient(135deg, #fff 0%, var(--dawn) 100%); border: 1px solid #EADFB8; }
.heir-card .ini { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-2); color: #7A5E0E; font: 600 22px/1 var(--f-display); }
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: 14px; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: start; font-size: 15px; color: var(--ink-2); }
.steps li::before { content: counter(step); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-2); color: var(--ink); font: 600 14px/1 var(--f-text); }
.steps b { color: var(--ink); display: block; margin-bottom: 2px; }

@media (max-width: 960px) {
  .room-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .room-index { position: sticky; top: 68px; z-index: 6; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 10px var(--gut); margin-inline: calc(-1 * var(--gut)); background: rgba(250, 251, 254, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
  .room-index::-webkit-scrollbar { display: none; }
  .room-index a { flex: none; border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 14px; background: #fff; font-size: 14px; }
  .room-index a[aria-current="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }
  .panel { scroll-margin-top: 130px; }
  .room-head-in { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .room-me, .meter { min-width: 0; }
}
@media (max-width: 600px) {
  .rooms a { padding: 0 12px; font-size: 14px; }
  .set { grid-template-columns: minmax(0, 1fr); }
  .set > .how { justify-content: flex-start; }
  .plan-now { grid-template-columns: minmax(0, 1fr); }
  .ledger-bar { grid-template-columns: minmax(0, 1fr); }
  .day-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px; }
  .day-row input[type="text"] { grid-column: 1 / -1; }
  .files > li { grid-template-columns: 48px minmax(0, 1fr); }
  .files .th { width: 48px; height: 48px; }
  .files .acts { grid-column: 1 / -1; justify-content: flex-start; }
  .cert.standing { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .cert.standing .acts { justify-content: center; }
  .certs { grid-template-columns: minmax(0, 1fr); }
  .heir-card { grid-template-columns: auto minmax(0, 1fr); }
  .heir-card .acts { grid-column: 1 / -1; }
  .receipts li { grid-template-columns: minmax(0, 1fr) auto; }
  .receipts li em { grid-column: 1 / -1; }
}
@media print {
  body.in-room { background: #fff; }
  body.in-room .nav, body.in-room .rooms, body.in-room .foot, body.in-room .room-title .lead, body.in-room .no-print, .buddy, .toast { display: none !important; }
  body.printing-one .cert:not(.to-print) { display: none !important; }
  .cert { box-shadow: inset 0 0 0 6px #fff, inset 0 0 0 7px rgba(201, 162, 39, .5); break-inside: avoid; }
  .cert .acts { display: none; }
}

/* ==========================================================================
   THE MESSENGER (1.10.1): one L'IRIS reaches another. The sky behind; the people on glass, the conversation on
   white; the house's violet only on what is new and on what a companion helped write.
   ========================================================================== */
.nav-cta .msgr, .nav-sheet .msgr { display: inline-flex; align-items: center; gap: 6px; }
.msgr-dot { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font: 700 11px/1 var(--f-text); font-variant-numeric: tabular-nums; }
.nav-burger { position: relative; }
.nav-burger.news::after { content: ''; position: absolute; top: 8px; inset-inline-end: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px #fff; }
.room-body.mg { padding-block: 0; min-height: 0; }
.ic { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1px solid transparent; background: transparent; color: var(--ink-2); cursor: pointer; padding: 0; transition: background .15s, color .15s; }
.ic:hover { background: rgba(255, 255, 255, .9); color: var(--ink); border-color: var(--line); }
.ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ic svg circle { fill: currentColor; stroke: none; }
#mg-set svg circle { fill: #fff; stroke: currentColor; }
.handle-in { position: relative; direction: ltr; flex: 1 1 12rem; min-width: 0; }
.handle-in > span { position: absolute; inset-inline-start: 16px; top: 50%; transform: translateY(-50%); color: var(--ink-3); font-weight: 600; pointer-events: none; }
.handle-in .input, .set .handle-in .input { padding-inline-start: 34px; text-align: start; width: 100%; }   /* a handle is written left to right in every language: the box says so itself */

/* joining */
.mg-join { padding-block: clamp(24px, 5vw, 56px) clamp(48px, 8vw, 96px); }
.mg-join-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.mg-join-pic { display: grid; place-items: center; min-height: 320px; border-radius: 32px; background: radial-gradient(70% 60% at 50% 40%, #fff 0%, var(--sky) 62%, var(--mist) 100%); position: sticky; top: 92px; }
.mg-join-pic .pic { width: min(72%, 320px); aspect-ratio: 4 / 5; position: relative; }
.mg-join-pic .pic > .stage-host, .mg-join-pic .pic > .stage { position: absolute; inset: 0; width: 100%; height: 100%; }
.mg-join-pic .pic img.still, .mg-about .pic img.still, .mg-found .pic img.still, .mg-mine .pic img.still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 16px 22px rgba(60, 50, 120, .14)); }
.mg-join-words { display: grid; gap: 16px; max-width: 38rem; }
.mg-join-words .eyebrow { margin: 0; }
.mg-rules { list-style: none; margin: 4px 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; }
.mg-rules li { position: relative; padding-inline-start: 22px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.mg-rules b { display: block; }
.mg-join-words .d2 { font-size: clamp(32px, 4vw, 50px); }
.mg-join-words .lead { font-size: 17px; }
.mg-rules li::before { content: ''; position: absolute; inset-inline-start: 2px; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.mg-rules b { color: var(--ink); font-weight: 600; }
.mg-nobody { position: absolute; inset: 0; display: grid; place-items: center; color: var(--line-2); }
.mg-nobody svg { width: 40%; height: auto; }

/* the app: the people on glass, the conversation on white */
.mg-app { max-width: var(--max); margin: 0 auto; padding: 12px var(--gut) 20px; height: calc(100vh - 68px); height: calc(var(--vvh, 100dvh) - 68px - env(safe-area-inset-top, 0px)); display: grid; grid-template-columns: 352px minmax(0, 1fr); gap: 16px; }
.mg-side { min-height: 0; display: flex; flex-direction: column; background: var(--glass); border: 1px solid var(--glass-line); border-radius: 24px; box-shadow: 0 2px 10px rgba(60, 50, 120, .06); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); overflow-y: auto; overscroll-behavior: contain; }
.mg-side-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 18px 12px 10px 20px; padding-inline: 20px 12px; position: sticky; top: 0; z-index: 2; background: linear-gradient(rgba(250, 251, 255, .96) 70%, rgba(250, 251, 255, 0)); }
.mg-side-h h1 { font-size: 24px; }
.mg-tools { display: flex; gap: 2px; }
.mg-side h2 { font: 600 12.5px/1 var(--f-text); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin: 0; padding: 14px 20px 8px; }
:root:lang(hi) .mg-side h2, :root:lang(ar) .mg-side h2 { letter-spacing: 0; text-transform: none; font-size: 13.5px; }
.mg-side ul { list-style: none; margin: 0; padding: 0 8px; display: grid; gap: 2px; }
.mg-side nav { flex: 1 0 auto; }
.av, .mg-orb, .mg-comp > span { position: relative; display: block; flex: none; border-radius: 50%; overflow: hidden; background: radial-gradient(120% 100% at 50% 28%, #fff 0%, var(--sky) 58%, #E6E2FF 100%); box-shadow: 0 0 0 2px #fff, 0 2px 8px rgba(40, 30, 110, .12); }
.av { width: 48px; height: 48px; }
.av img, .mg-comp > span img, .orb-in img:not(.owl-img):not(.iris-img):not(.still) { position: absolute; max-width: none; height: auto; }
.av.none, .mg-comp > span.none, .orb-in.none { display: grid; place-items: center; color: var(--ink-3); }
.av.none svg, .orb-in.none svg { width: 54%; height: 54%; }
.mg-people a { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 18px; text-decoration: none; transition: background .15s; }
.mg-people a:hover { background: rgba(255, 255, 255, .75); }
.mg-people a[aria-current="true"] { background: #fff; box-shadow: 0 1px 2px rgba(12, 13, 17, .05), 0 6px 18px rgba(60, 50, 120, .08); }
.mg-people .mg-w, .mg-asks .mg-w, .mg-out .mg-w { display: grid; gap: 2px; min-width: 0; }
.mg-people .mg-w b { font: 600 15.5px/1.3 var(--f-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-people .last { font-size: 14px; line-height: 1.4; color: var(--ink-3); display: flex; gap: 4px; min-width: 0; white-space: nowrap; }
.mg-people .last > * { flex: none; }
/* the words keep their own direction and are cut at their own end, whichever way the page runs */
.mg-people .last > bdi, .mg-people .last > i { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mg-people .last .you { color: var(--ink-2); }
.mg-people a.new .mg-w b { font-weight: 700; }
.mg-people a.new .last { color: var(--ink); }
.mg-people a.ended .mg-w b, .mg-people a.ended .av { opacity: .6; }
.mg-people .meta { display: grid; gap: 6px; justify-items: end; align-self: start; padding-top: 3px; }
.mg-people time { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mg-people .dot { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: #fff; font: 700 11.5px/1 var(--f-text); font-variant-numeric: tabular-nums; }
.mg-none { text-align: center; padding: 28px 16px; display: grid; gap: 10px; justify-items: center; }
.mg-none p:first-child { font: 600 17px/1.3 var(--f-display); }
.mg-asks ul, .mg-out ul { gap: 8px; padding: 0 12px; }
.mg-asks li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px 12px; align-items: start; padding: 12px; border-radius: 18px; background: var(--accent-2); }
.mg-asks .av { width: 44px; height: 44px; }
.mg-asks .mg-w b { font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-asks q { quotes: none; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); margin-top: 4px; overflow-wrap: anywhere; }
.mg-asks .row, .mg-asks [data-ask] { grid-column: 1 / -1; gap: 8px; }
.mg-asks .linkish { margin-inline-start: auto; }
.mg-out li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 8px; }
.mg-out .av { width: 36px; height: 36px; }
.mg-out .mg-w b { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-quiet { padding: 18px 20px 20px; margin-top: auto; }
.mg-note { margin: 4px 12px 8px; padding: 14px 16px; border-radius: 16px; display: grid; gap: 8px; font-size: 14.5px; line-height: 1.5; justify-items: start; }
.mg-note.warn { background: #FFF6E5; border: 1px solid #F1DDB0; }
.mg-note.bad { background: #FFF8F7; border: 1px solid #F1C9C4; }

.mg-main { min-height: 0; min-width: 0; display: grid; background: #fff; border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 1px 2px rgba(12, 13, 17, .03), 0 12px 40px rgba(60, 50, 120, .06); overflow: hidden; }
.mg-welcome { overflow-y: auto; padding: clamp(20px, 4vw, 40px); display: grid; gap: 20px; align-content: start; justify-items: center; }
.mg-welcome > * { width: 100%; max-width: 560px; }
.mg-mine { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 18px; align-items: center; padding: 16px 20px; border-radius: 24px; background: linear-gradient(135deg, var(--sky), var(--dawn)); border: 1px solid rgba(91, 69, 240, .10); }
.mg-mine .pic { width: 104px; aspect-ratio: 4 / 5; position: relative; }
.mg-mine .pic > .stage-host, .mg-mine .pic > .stage, .mg-about .pic > .stage-host, .mg-about .pic > .stage, .mg-found .pic > .stage-host, .mg-found .pic > .stage { position: absolute; inset: 0; width: 100%; height: 100%; }
.mg-mine .words { display: grid; gap: 6px; min-width: 0; }
.mg-mine .eyebrow { margin: 0; }
.mg-mine h2 { overflow: hidden; text-overflow: ellipsis; }
.mg-codecard { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 20px; align-items: center; padding: 16px; border: 1px solid var(--line); border-radius: 24px; background: #fff; }
.mg-codecard .qr { width: 148px; aspect-ratio: 1; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.mg-codecard .qr svg { width: 100%; height: 100%; display: block; }
.mg-codecard .words { display: grid; gap: 8px; min-width: 0; }
.mg-codecard .eyebrow { margin: 0; }
.mg-codecard .code { font: 600 26px/1.1 var(--f-display); letter-spacing: .06em; }
.mg-how { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.mg-how li { display: grid; gap: 2px; padding-inline-start: 16px; border-inline-start: 2px solid var(--accent-2); }
.mg-how b { font-size: 15.5px; }
.mg-how span { font-size: 14.5px; line-height: 1.55; color: var(--ink-3); }

/* a conversation */
.mg-conv { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.mg-conv-h { display: flex; align-items: center; gap: 12px; padding: 12px 14px; padding-inline: 18px 12px; border-bottom: 1px solid var(--line); }
.mg-back { display: none; }
[dir="rtl"] .mg-back svg { transform: scaleX(-1); }
.mg-orb { width: 52px; height: 52px; padding: 0; border: 0; cursor: pointer; }
.mg-orb:focus-visible { outline-offset: 4px; border-radius: 50%; }
.orb-in { position: absolute; inset: 0; display: block; }
.orb-in .stage-host { position: absolute; max-width: none; }
.mg-who { min-width: 0; flex: 1; display: grid; gap: 1px; }
.mg-who h2 { font: 600 17.5px/1.25 var(--f-display); letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-who p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-more { position: relative; }
.mg-more .ic:hover { background: var(--bg-2); }
.mg-menu { position: absolute; inset-inline-end: 0; top: 46px; z-index: 20; min-width: 240px; padding: 6px; display: grid; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 16px 44px rgba(12, 13, 17, .14); }
.mg-menu button { text-align: start; border: 0; background: none; padding: 10px 12px; border-radius: 10px; font-size: 15px; cursor: pointer; color: var(--ink); }
.mg-menu button:hover, .mg-menu button:focus-visible { background: var(--bg-2); outline: none; }
.mg-menu button[data-k="block"], .mg-menu button[data-k="report"] { color: #B42318; }
.mg-log { overflow-y: auto; overscroll-behavior: contain; padding: 20px clamp(14px, 3vw, 28px) 12px; display: flex; flex-direction: column; gap: 3px; }
.mg-log > :first-child { margin-top: auto; }   /* a short conversation rests on the message box, as a long one does */
.mg-log > * { flex: none; }
.mg-log:focus-visible { outline-offset: -3px; }
.mg-log > .skeleton { margin-block: 6px; height: 40px; border-radius: 20px; }
.mg-first { align-self: center; text-align: center; max-width: 30rem; padding: 12px 8px 4px; }
.mg-older { align-self: center; margin-bottom: 8px; }
.mday { align-self: center; margin: 14px 0 8px; font-size: 12.5px; color: var(--ink-3); }
.mday span { padding: 4px 12px; border-radius: 999px; background: var(--bg-2); }
.mrow { display: grid; grid-template-columns: minmax(0, auto) 32px; column-gap: 4px; align-items: center; justify-content: start; max-width: 100%; }
.mrow.me { justify-content: end; grid-template-columns: 32px minmax(0, auto); }
.mrow.me .msg { grid-column: 2; grid-row: 1; }
.mrow.me .mm { grid-column: 1; grid-row: 1; }
.mrow .msg { max-width: min(560px, 100%); padding: 10px 15px; border-radius: 20px; font-size: 16px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--bg-2); border-end-start-radius: 6px; justify-self: start; }
.mrow.me .msg { background: var(--ink); color: #fff; border-end-start-radius: 20px; border-end-end-radius: 6px; justify-self: end; }
.mrow.comp .msg { box-shadow: inset 0 0 0 1.5px rgba(91, 69, 240, .35); }
.mrow.me.comp .msg { box-shadow: inset 0 0 0 2px #8F81FF; }
.mrow.taken .msg { background: transparent; color: var(--ink-3); border: 1px dashed var(--line-2); font-size: 14.5px; }
.mrow.pending .msg { opacity: .55; }
.mrow.failed .msg { background: #FFF8F7; color: var(--ink); border: 1px solid #F1C9C4; }
.mm { width: 32px; height: 32px; border-radius: 50%; border: 0; background: transparent; color: var(--ink-3); cursor: pointer; display: grid; place-items: center; padding: 0; opacity: 0; transition: opacity .15s, background .15s; }
.mm svg { width: 18px; height: 18px; fill: currentColor; }
.mrow:hover .mm, .mm:focus-visible, .mm[aria-expanded="true"] { opacity: 1; }
.mm:hover { background: var(--bg-2); color: var(--ink); }
/* under a finger the message itself is pressed; its three dots stay for a keyboard and a screen reader */
@media (hover: none) { .mm { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .mrow, .mrow.me { grid-template-columns: minmax(0, auto); } .mrow.me .msg { grid-column: 1; } .mrow .msg { cursor: pointer; -webkit-tap-highlight-color: transparent; } }
.mt { grid-column: 1 / -1; font-size: 12px; line-height: 1.4; color: var(--ink-3); padding: 2px 6px 8px; font-variant-numeric: tabular-nums; }
.mrow.me .mt { text-align: end; }
.mt .with { color: var(--accent); font-weight: 600; }
.mt .linkish { font-size: 12px; }
/* a run of messages from one side shows its time once, under the last (a pause of five minutes begins a new run) */
.mrow.me:not(.comp):not(.failed):not(.taken):has(+ .mrow.me:not(.gap)) .mt, .mrow.them:not(.comp):not(.taken):has(+ .mrow.them:not(.gap)) .mt { display: none; }
.macts { grid-column: 1 / -1; display: flex; gap: 6px; padding: 2px 4px 8px; }
.mrow.me .macts { justify-content: flex-end; }
.macts button { border: 1px solid var(--line-2); background: #fff; border-radius: 999px; height: 30px; padding: 0 12px; font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.macts button:hover { border-color: var(--ink-3); color: var(--ink); }
.macts button[data-m="report"] { color: #B42318; }
.mg-foot { position: relative; padding: 8px clamp(12px, 3vw, 24px) calc(14px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 8px; }
.mg-new { position: absolute; top: -40px; left: 50%; transform: translateX(-50%); height: 32px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--ink); color: #fff; font: 600 13px/1 var(--f-text); cursor: pointer; box-shadow: var(--shadow); white-space: nowrap; }
.mg-form { display: flex; gap: 8px; align-items: flex-end; background: #fff; border: 1px solid var(--line-2); border-radius: 26px; padding: 6px; box-shadow: var(--shadow); }
.mg-form:focus-within { border-color: var(--ink-3); }
.mg-form textarea { flex: 1; min-width: 0; border: 0; resize: none; min-height: 40px; max-height: 168px; padding: 8px 6px; font-size: 16px; line-height: 1.5; background: transparent; }
.mg-form textarea:first-of-type { padding-inline-start: 10px; }
.mg-form textarea:focus { outline: none; }
.mg-comp { width: 40px; height: 40px; flex: none; padding: 2px; border: 0; border-radius: 50%; background: none; cursor: pointer; transition: transform .2s var(--ease); }
.mg-comp:hover { transform: scale(1.08); }
.mg-comp:disabled { cursor: progress; }
.mg-comp:disabled > span { animation: mg-think 1.4s ease-in-out infinite; }
@keyframes mg-think { 50% { box-shadow: 0 0 0 5px rgba(91, 69, 240, .30), 0 2px 8px rgba(40, 30, 110, .16); } }
.mg-comp > span { width: 36px; height: 36px; box-shadow: 0 0 0 2px var(--accent-2), 0 2px 8px rgba(40, 30, 110, .16); }
.mg-send { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 0; background: var(--ink); color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; transition: background .15s, transform .15s; }
.mg-send:hover { background: #262833; }
.mg-send:active { transform: scale(.94); }
.mg-send svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mg-count { text-align: end; padding-inline: 12px; margin-top: -2px; }
.mg-ended { text-align: center; padding: 10px 12px 4px; }
.mg-with { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 4px 6px 4px 12px; padding-inline: 12px 6px; border-radius: 999px; background: var(--accent-2); color: var(--accent); font-size: 12.5px; font-weight: 600; }
.mg-with button { width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(91, 69, 240, .12); color: var(--accent); cursor: pointer; font-size: 15px; line-height: 1; padding: 0; }
.mg-draft .offer { display: grid; gap: 10px; padding: 14px 16px; border-radius: 20px; background: linear-gradient(180deg, var(--sky), var(--accent-2)); border: 1px solid rgba(91, 69, 240, .16); }
.mg-draft .offer .eyebrow { margin: 0; color: var(--accent); }
.mg-draft .offer .words { font-size: 16px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }
.mg-draft > p { padding: 4px 12px; }
#mg-care .care-card { max-width: none; }

/* a line at the foot of the screen stands clear of the message box */
body[data-page="messenger"] .toast { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }

/* the sheets */
.mg-sheet .modal-box { width: min(480px, 100%); gap: 16px; }
.mg-sheet .modal-box.wide { width: min(600px, 100%); }
.mg-sheet .modal-box > h2 { padding-inline-end: 36px; overflow-wrap: anywhere; }
.mg-sheet-b { display: grid; gap: 16px; min-width: 0; }
.mg-sheet .mg-codecard { border: 0; padding: 0; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.mg-sheet .mg-codecard .qr { width: min(220px, 70%); }
.mg-sheet .mg-codecard .row { justify-content: center; }
.mg-sheet .mg-codecard .eyebrow { display: none; }
.mg-about, .mg-found { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; align-items: center; }
.mg-found { align-items: start; padding: 16px; border-radius: 20px; background: var(--bg-2); }
.mg-about .pic, .mg-found .pic { width: 112px; aspect-ratio: 4 / 5; position: relative; border-radius: 18px; background: radial-gradient(70% 60% at 50% 42%, #fff 0%, var(--sky) 70%, var(--mist) 100%); }
.mg-quote { margin: 0; padding: 10px 14px; border-inline-start: 3px solid var(--line-2); background: var(--bg-2); border-radius: 0 12px 12px 0; font-size: 15px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 9em; overflow: auto; }
[dir="rtl"] .mg-quote { border-radius: 12px 0 0 12px; }
.mg-sheet fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.mg-sheet fieldset legend { padding: 0; margin-bottom: 8px; }
.mg-sheet .picks { gap: 6px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mg-sheet .picks legend { grid-column: 1 / -1; }
.mg-found .btn { justify-self: start; }
.mg-sheet .modal-box:focus { outline: none; }
.mg-sheet .pick { padding: 10px 14px; border-radius: 14px; }
.mg-sheet .pick b { font-size: 15px; font-weight: 500; }
.input.area { height: auto; padding: 12px 16px; resize: vertical; line-height: 1.5; }
.mg-blocked { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; width: 100%; }
.mg-blocked li { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: 15px; }
.mg-blocked .linkish { margin-inline-start: auto; }
.mg-sheet .set .how .inline { flex-wrap: nowrap; width: 100%; }

@media (max-width: 1100px) { .nav-cta .msgr { display: none; } }
@media (max-width: 900px) { .nav-sheet .msgr { justify-content: space-between; } }
@media (max-width: 820px) {
  .mg-app { grid-template-columns: minmax(0, 1fr); padding: 0; gap: 0; }
  .mg-side, .mg-main { border-radius: 0; border: 0; box-shadow: none; }
  .mg-side { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .mg-app[data-view="list"] .mg-main, .mg-app[data-view="conv"] .mg-side { display: none; }
  .mg-back { display: grid; margin-inline-start: -6px; }
  .mg-conv-h { padding-inline: 12px 8px; gap: 8px; }
  .mg-orb { width: 44px; height: 44px; }
  .mrow .msg { max-width: 100%; }
  .mrow { padding-inline-end: 12%; }
  .mrow.me { padding-inline: 12% 0; }
  .mg-join-in { grid-template-columns: minmax(0, 1fr); }
  .mg-join-pic { position: static; min-height: 0; padding: 14px; border-radius: 24px; }
  .mg-join-pic .pic { width: 128px; }
  .mg-rules { grid-template-columns: minmax(0, 1fr); }
  .mg-codecard { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .mg-codecard .row { justify-content: center; }
}
@media (max-width: 480px) {
  .mg-about, .mg-found { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; }
  .mg-about .pic, .mg-found .pic { width: 84px; }
  .mg-sheet .modal-box { padding: 26px 20px; }
  .mg-sheet .picks { grid-template-columns: minmax(0, 1fr); }
  .mg-sheet .set .how .inline { flex-wrap: wrap; }
}

/* ============================================================ THE GIFT (1.12.0, Phase 6 task 6.2)
   The Gift page (giving, and opening), the gifts in the account, the studio's gift note, the Diwali page. */
.gift-code { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; justify-content: center; }
.gift-code label { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.gift-code .input { width: 13.5rem; height: 42px; text-transform: uppercase; letter-spacing: .06em; font-variant-numeric: tabular-nums; text-align: center; }
.gift-code .input::placeholder { letter-spacing: .06em; color: var(--ink-3); opacity: .55; }
.gift-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
.gift-steps { display: grid; gap: 20px; min-width: 0; }
.gift-step { gap: 22px; padding: clamp(20px, 3vw, 32px); min-width: 0; }
.gift-step-h { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; align-items: start; }
.gift-step-h > div { display: grid; gap: 4px; }
.gift-step-h .d3 { font-size: clamp(22px, 2.2vw, 28px); }
.gift-part { display: grid; padding-top: 22px; border-top: 1px solid var(--line); min-width: 0; scroll-margin-top: 92px; }
.gift-part .opt-h { flex-wrap: wrap; }
.gift-part h4 { font: 600 14px/1.3 var(--f-text); color: var(--ink-2); }
.gift-plans { display: grid; gap: 14px; }
.gift-plan { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: 12px 18px; align-items: center; }
.gp-name { display: grid; gap: 2px; }
.gp-name b { font: 600 19px/1.2 var(--f-display); letter-spacing: -0.01em; }
.gp-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.gp-opts .opt { min-height: 88px; align-content: center; padding: 12px 6px; gap: 4px; }
.gp-opts .opt b { font: 600 18px/1.2 var(--f-display); letter-spacing: -0.01em; }
.gp-opts .opt .nm { font-size: 13px; color: var(--ink-2); }
.gp-opts .opt .sub { color: var(--ok); font-weight: 600; }
.gift-comp { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 18px; align-items: center; min-height: 130px; }
.gift-comp .pic { width: 104px; aspect-ratio: 4 / 5; border-radius: 18px; background: radial-gradient(70% 60% at 50% 42%, #fff 0%, var(--sky) 70%, var(--mist) 100%); position: relative; overflow: hidden; display: grid; place-items: end center; text-decoration: none; }
.gift-comp .pic > .stage-host { width: 86%; aspect-ratio: 4 / 5; position: relative; }
.gift-comp .pic img.still, .gift-card .pic img.still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(60, 50, 120, .14)); }
.gift-comp.none .pic { place-items: center; background: #fff; border: 1.5px dashed var(--line-2); }
.gift-comp.none .pic i { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-2); color: var(--accent); font: 400 24px/1 var(--f-text); font-style: normal; }
.gift-comp.out .pic { opacity: .55; }
.gc-words { display: grid; gap: 8px; min-width: 0; }
.gc-name { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gc-name b { font: 600 20px/1.2 var(--f-display); overflow-wrap: anywhere; }
.gc-acts { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
#gf-items .opt.worn { border-style: dashed; }
.gift-more { margin-top: 14px; }
.gift-more summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 14.5px; list-style: none; width: fit-content; }
.gift-more summary::-webkit-details-marker { display: none; }
.gift-more summary::after { content: ' +'; }
.gift-more[open] summary::after { content: ' –'; }
.gift-more .opt-h { margin: 18px 0 10px; }
.gift-names { gap: 14px; }
.picks-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pick-chip { display: inline-grid; gap: 1px; justify-items: start; align-content: center; min-height: 46px; padding: 6px 16px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); font: 600 14.5px/1.25 var(--f-text); cursor: pointer; text-align: start; }
.pick-chip span { font-size: 12.5px; font-weight: 400; color: var(--ink-3); }
.pick-chip:hover { border-color: var(--line-2); }
.pick-chip[aria-checked="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.gift-day { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gift-day.one { grid-template-columns: minmax(0, 1fr); max-width: 22rem; }
.gift-step .field .seg { max-width: 100%; }
.gift-count { justify-self: end; }
.gift-sum { position: sticky; top: 92px; min-width: 0; }
.gift-sum .card { gap: 16px; padding: 24px; }
.gift-lines { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; min-height: 112px; }
.gift-lines li { display: grid; grid-template-columns: minmax(0, 1fr) auto 24px; gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.4; }
.gift-lines li:first-child { border-top: 0; }
.gift-lines li.none { color: var(--ink-3); grid-template-columns: 1fr; }
.gift-lines .sub { display: block; font-size: 12.5px; color: var(--ink-3); }
.gift-lines b { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.gift-lines .x { width: 24px; height: 24px; border-radius: 50%; border: 0; background: var(--bg-2); cursor: pointer; line-height: 1; font-size: 15px; color: var(--ink-2); padding: 0; }
.gift-lines .x:hover { background: var(--bg-3); color: var(--ink); }
.gift-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; border-top: 1.5px solid var(--ink); font: 600 16px/1.2 var(--f-text); }
.gift-total b { font: 650 28px/1 var(--f-display); letter-spacing: -0.02em; }
.gift-sum .btn { width: 100%; height: auto; min-height: 56px; padding-block: 10px; white-space: normal; }
/* a gift being opened, or just given: the page is settled on it before it is first drawn (site/inline.mjs) */
#gf-open:empty { display: none; }
.gift-opening .gift-page #gf-make, .gift-opening .gift-page .head-block { display: none; }   /* a person opening a gift is not shown the giving of one */
.gift-opening #gf-open { display: grid; min-height: 440px; align-content: start; }
.gift-opening #gf-open:empty { display: grid; }
.gift-opening #gf-open:empty::before { content: ''; width: min(860px, 100%); min-height: 440px; margin-inline: auto; border-radius: var(--r-l); background: var(--bg-2); }
.gift-card { width: min(860px, 100%); margin-inline: auto; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(20px, 4vw, 44px); align-items: center; padding: clamp(22px, 4vw, 44px); }
.gift-card .pic { width: 100%; aspect-ratio: 4 / 5; border-radius: 22px; background: radial-gradient(70% 60% at 50% 42%, #fff 0%, var(--sky) 70%, var(--mist) 100%); position: relative; overflow: hidden; display: grid; place-items: end center; }
.gift-card .pic > .stage-host { width: 88%; aspect-ratio: 4 / 5; position: relative; }
.gift-card .pic .gift-box { width: 74%; height: auto; align-self: center; }
.gift-card.given .pic { background: #fff; border: 1px solid var(--line); place-items: center; }
.gift-card-words { display: grid; gap: 16px; min-width: 0; }
.gift-card-words .d2 { font-size: clamp(28px, 3.6vw, 44px); overflow-wrap: anywhere; }
.gift-card-words h2:focus { outline: none; }
.gift-card .eyebrow.ok { color: var(--ok); }
.gift-note { margin: 0; padding: 14px 18px; border-radius: 16px; background: var(--dawn); color: var(--ink); font-size: 17px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.gift-note::before { content: '“'; } .gift-note::after { content: '”'; }
.gift-codebox { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 10px; align-items: center; justify-items: start; }
.gift-codebox .code { grid-column: 1 / -1; }
.gift-codebox .code { font: 650 clamp(20px, 4.6vw, 28px)/1 var(--f-display); letter-spacing: .08em; padding: 14px 18px; border: 1.5px dashed var(--line-2); border-radius: 16px; background: var(--bg-2); user-select: all; font-variant-numeric: tabular-nums; }
.gift-qr { width: 78%; display: grid; gap: 8px; justify-items: center; text-align: center; }
.gift-qr svg { width: 100%; height: auto; display: block; }
/* the gifts in the account */
.gifts-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gifts-list > li { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; min-width: 0; }
.gl-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; align-items: center; }
.gl-top b { font-weight: 600; font-size: 15.5px; overflow-wrap: anywhere; }
.gl-meta { font-size: 13.5px; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 2px 14px; }
.gl-code { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.gl-code .code { font: 600 16px/1 var(--f-display); letter-spacing: .07em; padding: 8px 12px; border-radius: 10px; background: var(--bg-2); user-select: all; font-variant-numeric: tabular-nums; }
.gl-acts { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.gifts-list .gift-note { font-size: 15px; padding: 10px 14px; }
/* the studio, when a companion is made for someone else */
.gift-way { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; align-items: center; padding: 10px 14px; border-radius: 12px; background: var(--accent-2); color: var(--accent); font-size: 14px; font-weight: 600; margin: 0 0 4px; }
/* the Diwali page: the house's own drawings (diyas, a rangoli), a companion in a diya crown */
.diwali { position: relative; overflow: hidden; background: radial-gradient(80% 70% at 78% 18%, #FFEBC4 0%, rgba(255, 235, 196, 0) 62%), linear-gradient(180deg, var(--dawn) 0%, #FFFCF5 72%, #fff 100%); padding-block: clamp(32px, 5vw, 64px) 0; }
:root[dir="rtl"] .diwali { background: radial-gradient(80% 70% at 22% 18%, #FFEBC4 0%, rgba(255, 235, 196, 0) 62%), linear-gradient(180deg, var(--dawn) 0%, #FFFCF5 72%, #fff 100%); }   /* the glow follows the figure */
.diwali-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(16px, 4vw, 56px); align-items: center; }
.diwali-words { display: grid; gap: 20px; justify-items: start; min-width: 0; }
.diwali-words .d1 { font-size: clamp(40px, 6vw, 76px); text-wrap: balance; }
.diwali-words .eyebrow { color: #8A5A0A; }
#mo-count { min-height: 3em; min-height: 2lh; }   /* the count of days is written into it: two lines are kept at every width, so nothing about it moves */
.diwali-figure { position: relative; display: grid; place-items: center; min-width: 0; }
.diwali-figure .stage-host { width: min(340px, 74%); position: relative; z-index: 1; filter: drop-shadow(0 18px 24px rgba(120, 80, 10, .16)); }
.rangoli { position: absolute; width: min(452px, 100%); aspect-ratio: 1; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(-50%, -52%); opacity: .5; }
:root[dir="rtl"] .rangoli { transform: translate(50%, -52%); }
.diyas { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: flex-end; gap: 6px; padding-top: clamp(8px, 2vw, 20px); }
.diya { width: clamp(38px, 8.6vw, 88px); height: auto; flex: 0 1 auto; overflow: visible; display: block; }
.diya:nth-child(even) { width: clamp(30px, 6.6vw, 66px); }
.diya .flame { transform-box: fill-box; transform-origin: 50% 100%; animation: kl-flame 2.6s ease-in-out infinite; }
.diya:nth-child(2n) .flame { animation-duration: 3.1s; animation-delay: -.8s; }
.diya:nth-child(3n) .flame { animation-duration: 2.2s; animation-delay: -1.4s; }
.diya .glow { animation: kl-glow 3.4s ease-in-out infinite; }
@keyframes kl-flame { 0%, 100% { transform: scale(1) rotate(-1.5deg); } 35% { transform: scale(1.04, 1.1) rotate(2deg); } 70% { transform: scale(.97, .94) rotate(-2.5deg); } }
@keyframes kl-glow { 0%, 100% { opacity: .82; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .diya .flame, .diya .glow { animation: none; } }
.gift-idea { gap: 14px; }
.gift-idea .btn { justify-self: start; margin-top: 4px; }
.gift-idea .d3 { font-size: clamp(24px, 2.4vw, 30px); }
.decades { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; }
.decades li { display: grid; justify-items: center; gap: 8px; padding: 16px 10px; background: #fff; border: 1px solid var(--line); border-radius: 18px; text-align: center; font-size: 13.5px; font-weight: 500; line-height: 1.3; }
.decades .thumb { width: 84px; height: 84px; display: block; }
@media (max-width: 980px) {
  .gift-grid { grid-template-columns: minmax(0, 1fr); }
  .gift-sum { position: static; }
}
@media (max-width: 760px) {
  .gift-plan { grid-template-columns: minmax(0, 1fr); }
  .gift-day { grid-template-columns: minmax(0, 1fr); }
  .gift-comp { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; }
  .gift-comp .pic { width: 84px; }
  .gift-card { grid-template-columns: minmax(0, 1fr); }
  .gift-card .pic { width: min(170px, 46%); margin-inline: auto; }
  .gift-card.given .pic { order: 2; width: min(200px, 56%); }
  .gift-opening #gf-open, .gift-opening #gf-open:empty::before { min-height: 560px; }
  #gf-items .opt-items { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  #gf-items .opt { padding: 10px 4px; }
  #gf-items .opt .thumb { width: 56px; height: 56px; }
  #gf-items .opt .nm { font-size: 12px; overflow-wrap: anywhere; }
  .diwali-in { grid-template-columns: minmax(0, 1fr); }
  .diwali-figure .stage-host { width: min(230px, 58%); }
  .rangoli { width: min(340px, 88%); }
  .decades { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
}
:root:lang(hi) .gift-codebox .code, :root:lang(ar) .gift-codebox .code, :root:lang(hi) .gl-code .code, :root:lang(ar) .gl-code .code, :root:lang(hi) .gift-code .input, :root:lang(ar) .gift-code .input { font-family: 'Inter Tight', 'Inter', ui-sans-serif, system-ui, sans-serif; letter-spacing: .08em !important; }

/* ==========================================================================
   THE CONNECTION INDEX (1.13.0): the member's own numbers, under its switch in Account → Privacy
   ========================================================================== */
.ci-read { display: grid; gap: 10px; padding: 4px 0 2px; }
.ci-read[hidden] { display: none; }
.ci-h { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.ci { margin: 0; display: grid; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.ci > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 16px; border-top: 1px solid var(--line); }
.ci > div:first-child { border-top: 0; }
.ci dt { font-size: 14.5px; color: var(--ink-2); min-width: 0; }
.ci dd { margin: 0; font-size: 15.5px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }