/* MihiraCare AI — redesign preview.
   The site is one scrolling page of 1440 x 900 screens, each scaled to fit the window (site.js).
   One type family (Archivo): condensed width for display, normal width for text.
   Colours: ink + rose on a light page, or ink + rose on a dark page. Nothing else.
   The app screenshots in "Inside the app" are the one exception: they are the app. */

:root {
  --bg: #FBF8F7;            /* matches the background of the Meet Mira 4K image */
  --surface: #FFFFFF;
  --ink: #1D191B;
  --ink-soft: #5B5357;
  --ink-faint: #958B8F;
  --line: #E8E1E0;
  --line-strong: #D6CBCA;
  --rose: #B84E69;
  --on-rose: #FFFFFF;
  /* home motion: Mira's bubbles are a rose tint; the doctor's message is black */
  --mira-bub: #F6E9EC; --doc-bub: #1D191B; --doc-ink: #FFFFFF; --doc-edge: #1D191B;
  /* home motion, raised look: lit from above, a thick lower edge, a soft shadow beneath */
  --card-grad: linear-gradient(180deg, #FFFFFF, #F8F1F0);
  --mira-grad: linear-gradient(180deg, #FBF0F3, #F2DFE4);
  --doc-grad: linear-gradient(180deg, #3D3539, #141113);
  --raise: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -3px 6px rgba(120,80,90,.07), 0 4px 0 -1px #E5D9D8, 0 7px 10px -3px rgba(60,30,40,.16), 0 30px 46px -22px rgba(60,30,40,.4);
  --raise-doc: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -3px 6px rgba(0,0,0,.4), 0 4px 0 -1px #000000, 0 7px 10px -3px rgba(30,15,20,.3), 0 30px 46px -22px rgba(30,15,20,.6);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141113; --surface: #1C181A; --ink: #F3EEEF; --ink-soft: #BDB3B6; --ink-faint: #85797D;
    --line: #2B2427; --line-strong: #3B3236; --rose: #E68AA1; --on-rose: #1D0E13; --mira-bub: #2E2127; --doc-bub: #000000; --doc-ink: #F3EEEF; --doc-edge: #3B3236;
    --card-grad: linear-gradient(180deg, #2C2529, #1C181A); --mira-grad: linear-gradient(180deg, #3C2B33, #2A1E24); --doc-grad: linear-gradient(180deg, #211C1F, #000000);
    --raise: inset 0 1px 0 rgba(255,255,255,.1), inset 0 -3px 6px rgba(0,0,0,.35), 0 4px 0 -1px #0B090A, 0 8px 12px -3px rgba(0,0,0,.6), 0 30px 46px -20px rgba(0,0,0,.9);
    --raise-doc: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -3px 6px rgba(0,0,0,.5), 0 4px 0 -1px #060505, 0 8px 12px -3px rgba(0,0,0,.6), 0 30px 46px -20px rgba(0,0,0,.9);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #141113; --surface: #1C181A; --ink: #F3EEEF; --ink-soft: #BDB3B6; --ink-faint: #85797D;
  --line: #2B2427; --line-strong: #3B3236; --rose: #E68AA1; --on-rose: #1D0E13; --mira-bub: #2E2127; --doc-bub: #000000; --doc-ink: #F3EEEF; --doc-edge: #3B3236;
    --card-grad: linear-gradient(180deg, #2C2529, #1C181A); --mira-grad: linear-gradient(180deg, #3C2B33, #2A1E24); --doc-grad: linear-gradient(180deg, #211C1F, #000000);
    --raise: inset 0 1px 0 rgba(255,255,255,.1), inset 0 -3px 6px rgba(0,0,0,.35), 0 4px 0 -1px #0B090A, 0 8px 12px -3px rgba(0,0,0,.6), 0 30px 46px -20px rgba(0,0,0,.9);
    --raise-doc: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -3px 6px rgba(0,0,0,.5), 0 4px 0 -1px #060505, 0 8px 12px -3px rgba(0,0,0,.6), 0 30px 46px -20px rgba(0,0,0,.9);
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* One free-scrolling page: it stops wherever the visitor stops (no snapping). */
html { scroll-behavior: smooth; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body {
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
.display { font-stretch: 62%; font-weight: 800; letter-spacing: -0.01em; line-height: 0.88; }
.eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-soft); }
.rose { color: var(--rose); }

/* ---------- the one-screen stages ---------- */
.page { position: relative; }
/* Every screen keeps its top 96px clear for the fixed nav, so a screen reached from
   the nav shows whole beneath it. */
.frame { position: relative; width: 100%; height: calc(900px * var(--s, 1)); overflow: hidden; }
/* A thin line between screens, like the footer's, across the content area. */
.frame + .frame::before { content: ""; position: absolute; top: 0; height: 1px; z-index: 3; background: var(--line);
  left: calc(var(--m, 64px) * var(--s, 1)); right: calc(var(--m, 64px) * var(--s, 1)); }
.stage {
  /* --sw (site.js) is the stage width in design pixels: 1440 on a 16:10 window,
     wider on a wider one, so the page fills the window instead of leaving side
     bands. Left-hand content stays anchored left; right-hand content anchors right. */
  position: absolute; top: 0; left: 0; width: var(--sw, 1440px); height: 900px;
  transform: scale(var(--s, 1)); transform-origin: top left;
}

/* ---------- nav: fixed at the top, scaled like the screens ---------- */
.navbar { position: fixed; top: 0; left: 0; right: 0; height: calc(96px * var(--s, 1)); z-index: 50; background: var(--bg);
  transition: box-shadow .2s ease; }
.navbar.scrolled { box-shadow: 0 1px 0 var(--line); }
.nav-stage { position: absolute; top: 0; left: 0; width: var(--sw, 1440px); height: 96px;
  transform: scale(var(--s, 1)); transform-origin: top left; }
.nav { position: absolute; top: 0; left: 0; right: 0; height: 96px; padding: 0 var(--m, 64px); z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.brand .wordmark { flex-shrink: 0; }
.brand-logo { width: 52px; height: 52px; display: block; flex: none; border-radius: 50%; box-shadow: 0 0 0 1px var(--line-strong), 0 2px 6px -2px rgba(60,30,40,.18); }
.wordmark { font-size: 27px; font-weight: 700; letter-spacing: -0.015em; white-space: nowrap; }
.wordmark .care { color: var(--rose); }
.nav-links { display: flex; gap: 32px; font-size: 15.5px; font-weight: 500; white-space: nowrap; }
.nav-links a { color: var(--ink-soft); padding: 6px 0; border-bottom: 1.5px solid transparent; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); border-color: var(--rose); }
.nav-right { display: flex; align-items: center; gap: 22px; }
.login { font-size: 15.5px; font-weight: 500; color: var(--ink-soft); }
.login:hover { color: var(--ink); }

.btn { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 26px; white-space: nowrap;
  border-radius: 999px; background: var(--rose); color: var(--on-rose); font-weight: 600; font-size: 16px;
  transition: transform .15s ease, filter .15s ease; }
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; }

/* light / dark switch */
.switch { position: relative; width: 60px; height: 32px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--surface); cursor: pointer; padding: 0; flex: none; }
.switch .knob { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--ink); color: var(--bg); display: grid; place-items: center; transition: transform .2s ease; }
.switch .knob svg { width: 14px; height: 14px; }
.switch[aria-checked="true"] .knob { transform: translateX(28px); }
.switch .i-moon { display: none; }
.switch[aria-checked="true"] .i-sun { display: none; }
.switch[aria-checked="true"] .i-moon { display: block; }
.switch:focus-visible, .btn:focus-visible, a:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }

/* ---------- screen 1: home ----------
   One band from y 150 to 790: captions + phones on the right, the copy centred on
   the left, and Mira sitting on the baseline at 790 between them. */
.hero-copy { position: absolute; left: var(--m, 64px); top: 96px; width: 660px; height: 804px;
  display: flex; flex-direction: column; justify-content: center; }
.tagline { font-size: 30px; font-weight: 700; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.lead { font-size: 22px; line-height: 1.55; margin: 34px 0 40px; color: var(--ink); max-width: 600px; }
.lead b { font-weight: 700; }
.powered { font-size: 13px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-soft); margin: 0; }
.greet-row { display: flex; align-items: center; gap: 32px; margin: 26px 0 44px; }
.trust { display: flex; font-size: 13.5px; color: var(--ink-soft); }
.trust span { display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; border-left: 1px solid var(--line-strong); }
.trust span:first-child { padding-left: 0; border-left: 0; }
.trust svg { width: 16px; height: 16px; color: var(--ink); }

/* The intro: MihiraCare -> the "hi" jumps out and "Care" folds away -> Mira (turns pink,
   links to Meet Mira); "hi" lands below and greets each name. Then AI swaps to IA and
   expands to Intelligent Assistant. --wi / --wa are the widths of I and A (site.js). */
.wm { font-size: 136px; margin: 12px 0 0; display: flex; align-items: baseline; white-space: nowrap; }
.wm-mira { color: inherit; transition: color .5s ease; }
.wm-mira:hover { text-decoration: underline; text-decoration-thickness: .05em; text-underline-offset: .08em; }
.wm .g-hi, .wm .g-care, .wm .rest { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom;
  transform-origin: center bottom;
  transition: max-width .6s cubic-bezier(.5,0,.15,1), transform .55s cubic-bezier(.34,1.5,.5,1), opacity .45s ease, color .3s ease; }
.wm .g-hi { max-width: 1.2em; }
.wm .g-care { max-width: 2.4em; color: var(--rose); }
.wm.s1 .g-hi { transform: translateY(-.55em) scale(1.06) rotate(-6deg); color: var(--rose); }
.wm.s2 .g-hi { transform: translateY(1.4em) rotate(-16deg); opacity: 0; max-width: 0; }
.wm.s2 .g-care { max-width: 0; opacity: 0; transform: translateY(.2em); }
.wm.s2 .wm-mira { color: var(--rose); }
.wm .g-ai { margin-left: .2em; display: inline-flex; align-items: baseline; transition: font-size .6s cubic-bezier(.5,0,.15,1), margin .6s ease; }
.wm .w { display: inline-flex; align-items: baseline; }
.wm .w-i { position: relative; z-index: 1; }
.wm .w b { font-weight: inherit; }
.wm .w-i { transform: translateX(var(--wa, .3em)); }
.wm .w-a { transform: translateX(calc(-1 * var(--wi, .2em))); }
/* room below the baseline so the expanding words keep their descenders (the g) */
.wm .rest { max-width: 0; opacity: 0; padding-bottom: .3em; margin-bottom: -.3em; }
.wm.s3 .w-i { animation: hop-i .75s cubic-bezier(.5,0,.3,1) forwards; }
.wm.s3 .w-a { animation: hop-a .75s cubic-bezier(.5,0,.3,1) forwards; }
@keyframes hop-i { 0% { transform: translateX(var(--wa)); } 50% { transform: translate(calc(var(--wa) / 2), -.42em); } 100% { transform: none; } }
@keyframes hop-a { 0% { transform: translateX(calc(-1 * var(--wi))); } 50% { transform: translate(calc(var(--wi) / -2), .12em) scale(.94); } 100% { transform: none; } }
.wm.s4 .g-ai { font-size: .4em; margin-left: .45em; }
.wm.s4 .rest { max-width: 8em; opacity: 1; transition-delay: .25s; }
/* fixed width, so Book a demo stays put while the names change */
.greeting { font-size: 30px; font-weight: 700; min-height: 1.3em; display: flex; gap: .35em; width: 7.8em; flex: none;
  opacity: 0; transform: translateY(-6px); }
.greet-in .greeting { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s cubic-bezier(.34,1.4,.5,1); }
.greeting .g-hi-2 { color: var(--rose); display: inline-block; transform: translateY(-1em); opacity: 0; }
.greet-in .greeting .g-hi-2 { transform: none; opacity: 1; transition: transform .6s cubic-bezier(.34,1.55,.45,1), opacity .4s ease; }
.greeting .greet-name { transition: opacity .3s ease, transform .3s ease; }
.greeting .greet-name.out { opacity: 0; transform: translateY(4px); }

/* The home motion, in the air beside the copy (no phone): Mira hops onto each of
   Priya's action items and ticks it, as she does in the app; then Dr. Aarti asks for
   Priya's monthly review and Mira answers with a summary and the report. One 600 x 640
   box, scaled by --ak (site.js); site.js runs the timeline by setting classes. */
.hero-art { position: absolute; inset: 0; pointer-events: none; }
.air-wrap { position: absolute; right: var(--m, 64px); top: var(--at, 176px); width: calc(600px * var(--ak, 1)); height: calc(640px * var(--ak, 1)); }
.air { position: absolute; left: 0; top: 0; width: 600px; height: 640px; transform: scale(var(--ak, 1)); transform-origin: top left; }
.sc { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .6s ease, transform .7s cubic-bezier(.4,0,.2,1), visibility 0s linear .7s; }
.air[data-scene="tick"] .sc-tick, .air[data-scene="doc"] .sc-doc { opacity: 1; visibility: visible; transform: none; transition: opacity .5s ease, visibility 0s; }
.sc.gone { opacity: 0 !important; transform: translateY(-28px) !important; }
.sc.snap, .sc.snap * { transition: none !important; }

/* scene 1: action items */
.air-label { position: absolute; left: 150px; top: 96px; margin: 0; font-size: 14px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft);
  opacity: 0; transition: opacity .5s ease; }
.air-label b { color: var(--ink); }
.sc-tick.in .air-label { opacity: 1; }
.item { position: absolute; left: 150px; width: 430px; height: 84px; opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .6s cubic-bezier(.3,1.3,.5,1); }
.sc-tick.in .item { opacity: 1; transform: none; transition-delay: calc(var(--i) * 140ms); }
.item-in { height: 100%; display: flex; align-items: center; gap: 18px; padding: 0 24px; border-radius: 22px;
  background: var(--card-grad); border: 1px solid var(--line); box-shadow: var(--raise);
  animation: drift 5.2s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -1.7s); }
@keyframes drift { from { transform: perspective(900px) rotateX(5deg) rotateY(-6deg) translateY(-4px); } to { transform: perspective(900px) rotateX(3deg) rotateY(-3deg) translateY(5px); } }
@keyframes bob { from { translate: 0 -3px; } to { translate: 0 4px; } }
.ck { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 2px solid var(--line-strong); display: grid; place-items: center;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.14), 0 1px 0 rgba(255,255,255,.6);
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease; }
.ck svg { width: 24px; height: 24px; fill: none; stroke: var(--on-rose); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ck path { stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .35s ease .08s; }
.it { display: flex; flex-direction: column; min-width: 0; }
.it b { font-size: 19px; font-weight: 700; line-height: 1.25; transition: color .3s ease; }
.it small { font-size: 15px; color: var(--ink-soft); line-height: 1.35; }
.item.done .ck { background: linear-gradient(180deg, color-mix(in srgb, var(--rose) 82%, #fff), var(--rose)); border-color: var(--rose); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 3px 6px -1px rgba(60,30,40,.4); animation: pop .45s cubic-bezier(.3,1.6,.5,1); }
.item.done .ck path { stroke-dashoffset: 0; }
.item.done .it b { color: var(--ink-faint); text-decoration: line-through; text-decoration-color: var(--rose); text-decoration-thickness: 2px; }
@keyframes pop { 0% { transform: scale(.7); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
.spark { position: absolute; width: 0; height: 0; z-index: 6; pointer-events: none; }
.spark i { position: absolute; left: -8px; top: -10px; font-style: normal; font-size: 16px; line-height: 1; color: var(--rose); }
/* Mira: 150px, sitting point at (75, 135); site.js moves her with transforms */
.walker { position: absolute; left: 0; top: 0; width: 150px; height: 150px; z-index: 5; transform-origin: 75px 135px; opacity: 0; transition: opacity .4s ease; }
.sc-tick.in .walker { opacity: 1; }
.walker img, .m-face img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: opacity .3s ease; }
.walker .p2, .m-face .p2 { opacity: 0; }
.walker.cheer .p1, .m-face.talk .p1 { opacity: 0; }
.walker.cheer .p2, .m-face.talk .p2 { opacity: 1; }
.air-say { position: absolute; left: 196px; top: 506px; padding: 12px 18px; border-radius: 18px 18px 18px 4px; font-size: 17px; font-weight: 600;
  background: var(--mira-grad); box-shadow: var(--raise); color: var(--ink); opacity: 0; transform: translateY(10px) scale(.96); transform-origin: left bottom;
  transition: opacity .35s ease, transform .45s cubic-bezier(.3,1.5,.5,1); }
.sc-tick.said .air-say { opacity: 1; transform: none; }

/* scene 2: the doctor asks, Mira answers */
.bub { position: absolute; border-radius: 20px; font-size: 16.5px; line-height: 1.45; }
.bub .by { display: block; font-size: 13px; font-weight: 700; margin-bottom: 2px; opacity: .72; }
.bub .t { display: block; text-align: right; font-size: 11.5px; opacity: .55; margin-top: 4px; }
.bub-doc { right: 0; top: 24px; width: 400px; padding: 12px 18px 10px; border-bottom-right-radius: 5px;
  background: var(--doc-grad); color: var(--doc-ink); border: 1px solid var(--doc-edge); box-shadow: var(--raise-doc);
  animation: bob 4.6s ease-in-out infinite alternate;
  opacity: 0; transform: perspective(900px) rotateX(2deg) rotateY(-5deg) translateY(16px); transition: opacity .45s ease, transform .55s cubic-bezier(.3,1.3,.5,1); }
.sc-doc.s1 .bub-doc { opacity: 1; transform: perspective(900px) rotateX(2deg) rotateY(-5deg); }
.m-face { position: absolute; left: 0; top: 168px; width: 104px; height: 104px; opacity: 0; transform: translateY(12px) scale(.9);
  transition: opacity .4s ease, transform .5s cubic-bezier(.3,1.5,.5,1); }
.sc-doc.s2 .m-face { opacity: 1; transform: none; }
.m-col { position: absolute; left: 108px; top: 168px; width: 492px; }
.bub-typing { position: absolute; left: 0; top: 30px; display: flex; gap: 6px; padding: 15px 18px; border-bottom-left-radius: 5px; background: var(--mira-grad); box-shadow: var(--raise);
  opacity: 0; transition: opacity .3s ease; }
.bub-typing i { width: 9px; height: 9px; border-radius: 50%; background: var(--rose); animation: dot 1.1s ease-in-out infinite; }
.bub-typing i:nth-child(2) { animation-delay: .15s; } .bub-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-6px); opacity: 1; } }
.sc-doc.s2 .bub-typing { opacity: 1; }
.sc-doc.s3 .bub-typing { opacity: 0; }
.bub-mira { position: relative; width: 440px; padding: 12px 18px 12px; border-bottom-left-radius: 5px; background: var(--mira-grad); box-shadow: var(--raise); color: var(--ink);
  animation: bob 5.2s ease-in-out -1.4s infinite alternate;
  opacity: 0; transform: perspective(900px) rotateX(2deg) rotateY(4deg) translateY(10px); transition: opacity .4s ease, transform .5s cubic-bezier(.3,1.3,.5,1); }
.bub-mira .by { color: var(--rose); opacity: 1; }
.bub-mira ul { margin: 4px 0 0; padding-left: 18px; }
.bub-mira li { opacity: 0; transform: translateX(-6px); transition: opacity .35s ease, transform .35s ease; transition-delay: calc(250ms + var(--i) * 220ms); }
.sc-doc.s3 .bub-mira { opacity: 1; transform: perspective(900px) rotateX(2deg) rotateY(4deg); }
.sc-doc.s3 .bub-mira li { opacity: 1; transform: none; }
.report { margin-top: 18px; width: 492px; padding: 16px 20px 14px; border-radius: 20px; background: var(--card-grad); border: 1px solid var(--line-strong);
  box-shadow: var(--raise); animation: bob 5.8s ease-in-out -2.6s infinite alternate;
  opacity: 0; transform: perspective(1100px) rotateX(3deg) rotateY(3deg) translateY(26px) scale(.97); transition: opacity .45s ease, transform .6s cubic-bezier(.3,1.25,.5,1); }
.sc-doc.s4 .report { opacity: 1; transform: perspective(1100px) rotateX(3deg) rotateY(3deg); }
.report > * { opacity: 0; transition: opacity .4s ease; transition-delay: calc(200ms + var(--i) * 260ms); }
.sc-doc.s4 .report > * { opacity: 1; }
.r-head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.r-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--rose); background: var(--mira-bub); flex: none; }
.r-ico svg { width: 20px; height: 20px; }
.r-ttl { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.r-ttl b { font-size: 15.5px; line-height: 1.3; }
.r-ttl small { font-size: 12.5px; color: var(--ink-soft); }
.r-tag { font-size: 12px; font-weight: 700; color: var(--rose); border: 1px solid var(--rose); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.r-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 12px 0; }
.r-stats span { display: flex; flex-direction: column; }
.r-stats b { font-size: 22px; font-weight: 800; font-stretch: 75%; line-height: 1.1; }
.r-stats small { font-size: 12.5px; color: var(--ink-soft); }
.r-chart { position: relative; padding: 2px 0 10px; }
.r-chart small { display: block; font-size: 12.5px; color: var(--ink-soft); margin-bottom: 4px; }
.r-chart svg { display: block; width: 100%; height: 54px; overflow: visible; }
.r-grid { stroke: var(--line); stroke-width: 1; fill: none; }
.r-line { fill: none; stroke: var(--rose); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 320; stroke-dashoffset: 320; }
.sc-doc.s4 .r-line { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s ease .75s; }
.r-chart circle { fill: var(--rose); }
.r-chart em { position: absolute; right: 0; top: 0; font-style: normal; font-size: 13px; font-weight: 700; color: var(--rose); }
.r-foot { padding-top: 10px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-soft); }

/* The opening, so the eye has one place to look. Only the wordmark and "hi" show, at
   the centre of the screen, with nothing behind them, while the words change. Then they
   travel to their place in the copy (site.js), the rest of the page comes in, and only
   then does the motion on the right begin. position: fixed inside a scaled stage is
   relative to the stage, so --icx, --iwy, --igy (site.js) are in stage pixels. */
.intro-on .navbar, .intro-on .tagline, .intro-on .lead, .intro-on .powered, .intro-on .greet-row .btn, .intro-on .trust, .intro-on .hero-art { opacity: 0; pointer-events: none; }
.intro-on .frame:not(#home) { visibility: hidden; }
.intro-on .wm { position: fixed; z-index: 5; margin: 0; left: var(--icx, 50vw); top: var(--iwy, 38vh);
  transform: translateX(-50%) scale(var(--iz, 1)); transform-origin: 50% 0; }
.intro-on .greeting { position: fixed; z-index: 5; left: var(--icx, 50vw); top: var(--igy, 56vh); width: 5.9em;
  transform: translate(-50%, -6px) scale(var(--iz, 1)); transform-origin: 50% 0; }
.intro-on .greet-in .greeting { transform: translateX(-50%) scale(var(--iz, 1)); }
.greeting { white-space: nowrap; }
/* Mira says hi above the wordmark during the opening, then hops over to the action
   items and becomes the Mira who ticks them (site.js). Her point of balance, (75, 135)
   of her 150px box, is where --ihx/--ihy put her and what she scales around. */
.hello { display: none; position: absolute; z-index: 6; left: var(--ihx, 45vw); top: var(--ihy, 10vh); width: 150px; height: 150px;
  transform: scale(var(--hz, 1)); transform-origin: 75px 135px; pointer-events: none; transition: opacity .35s ease; }
.intro-on .hello, .hello.go { display: block; }
.hello.out { opacity: 0; }
.hello img { width: 100%; height: 100%; display: block; transform-origin: 50% 90%; }
.intro-on .hello img { animation: hello-in .7s cubic-bezier(.3,1.6,.5,1) .2s both, wave 1.1s ease-in-out .9s infinite alternate; }
@keyframes hello-in { from { opacity: 0; transform: translateY(30px) scale(.6); } }
@keyframes wave { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes fade { from { opacity: 0; } }
.intro-rise .navbar { animation: fade .7s ease .55s both; }
.intro-rise .tagline { animation: rise .7s cubic-bezier(.2,.7,.3,1) .35s both; }
.intro-rise .lead { animation: rise .7s cubic-bezier(.2,.7,.3,1) .5s both; }
.intro-rise .powered { animation: rise .7s cubic-bezier(.2,.7,.3,1) .65s both; }
.intro-rise .greet-row .btn { animation: rise .7s cubic-bezier(.2,.7,.3,1) .95s both; }
.intro-rise .trust { animation: rise .7s cubic-bezier(.2,.7,.3,1) 1.1s both; }

/* ---------- screen 2: Meet Mira ---------- */
.mm-copy { position: absolute; left: var(--m, 64px); top: 96px; height: 804px; width: var(--mmw, 450px);
  display: flex; flex-direction: column; justify-content: center; }
.mm-title { font-size: 128px; margin: 0 0 14px; white-space: nowrap; }
.mm-copy .eyebrow { font-size: 15px; letter-spacing: .24em; white-space: nowrap; margin-bottom: 28px; }
.mm-def { font-size: 21px; line-height: 1.6; margin: 0; color: var(--ink); }
.mm-def b { font-weight: 700; }
/* The owner's 4K artwork. Two exports of it, line art untouched: -clear is the image
   with its background made transparent; -dark turns the black and grey ink light for
   dark mode and keeps every coloured line and dot in its original colour. In both, the
   old Mira is cut out and the app's big-heart Mira sits in her place. */
.feat { position: absolute; right: var(--m, 64px); top: calc(50% + 48px); transform: translateY(-50%);
  /* as tall as the room allows: up to 80% of the screen (10% above, 10% below) */
  width: min(calc(var(--cw, 1312px) - var(--mmw, 450px) - 32px), 1240px); height: auto; aspect-ratio: 16 / 9; }
.feat img { position: absolute; display: block; }
.feat .art-light, .feat .art-dark { inset: 0; width: 100%; height: 100%; }
.feat .feat-mira { left: -1.1%; top: 41.9%; width: 32.2%; height: auto; }
/* Line art comes in a light and a dark export; show the one for the theme. */
.art-dark { display: none !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .art-light { display: none !important; } :root:not([data-theme="light"]) .art-dark { display: block !important; } }
:root[data-theme="dark"] .art-light { display: none !important; }
:root[data-theme="dark"] .art-dark { display: block !important; }

/* ---------- screen 3: what Mira does for each of them ----------
   The owner's line art, cut into three. At rest all three stand in a row, as drawn.
   Hover (or focus) one: it rises, the other two sink away, and its points come in
   where they stood, with a Mira pose. data-focus on .care is set by site.js. */
.care-head { position: absolute; left: var(--m, 64px); top: 124px; right: var(--m, 64px); }
.mira-link { color: var(--rose); }
.mira-link:hover { text-decoration: underline; text-decoration-thickness: .05em; text-underline-offset: .08em; }
.care-title { font-size: 66px; margin: 0 0 10px; white-space: nowrap; }
.scene { position: absolute; left: var(--m, 64px); top: 226px; width: 1312px; height: 600px;
  transform: scale(var(--k, 1)); transform-origin: top left; }
.who { position: absolute; top: 30px; height: 551px; padding: 0; border: 0; background: none; cursor: pointer;
  border-radius: 24px; transition: transform .55s cubic-bezier(.3,1.3,.5,1), opacity .4s ease; }
.who img { width: 100%; height: 100%; display: block; pointer-events: none; }
.who:focus-visible { outline: 2px solid var(--rose); outline-offset: 6px; }
.who-patient { left: 0; width: 381px; }
.who-doctor { left: 388px; width: 423px; }
.who-hospital { left: 825px; width: 487px; }
.care[data-focus] .who { opacity: 0; transform: translateY(70px); pointer-events: none; transition: transform .45s ease, opacity .3s ease; }
.care[data-focus="patient"] .who-patient,
.care[data-focus="doctor"] .who-doctor,
.care[data-focus="hospital"] .who-hospital { opacity: 1; transform: translateY(-14px) scale(1.04); pointer-events: auto; }

.pts { position: absolute; top: 50px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, visibility 0s linear .3s; }
.care[data-focus="patient"] .pts[data-for="patient"],
.care[data-focus="doctor"] .pts[data-for="doctor"],
.care[data-focus="hospital"] .pts[data-for="hospital"] { opacity: 1; visibility: visible; transition: opacity .3s ease; }
.pts h3 { margin: 0 0 22px; font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.pts h3 em { display: block; font-style: normal; font-weight: 400; color: var(--ink-soft); font-size: 19px; margin-top: 4px; }
.pts ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.pts ul.two-col { grid-template-columns: 1fr 1fr; gap: 22px 36px; }
.pts li { position: relative; padding-left: 22px; opacity: 0; transform: translateY(14px); transition: opacity .35s ease, transform .45s cubic-bezier(.3,1.2,.5,1); }
.pts li::before { content: ""; position: absolute; left: 0; top: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--rose); }
.pts li b { display: block; font-size: 19px; font-weight: 700; line-height: 1.3; }
.pts li span { display: block; font-size: 17px; line-height: 1.45; color: var(--ink-soft); margin-top: 2px; }
.care[data-focus] .pts[data-for] li { transition-delay: calc(120ms + var(--i) * 70ms); }
.care[data-focus="patient"] .pts[data-for="patient"] li,
.care[data-focus="doctor"] .pts[data-for="doctor"] li,
.care[data-focus="hospital"] .pts[data-for="hospital"] li { opacity: 1; transform: none; }
.pts-mira { position: absolute; width: 210px; height: 210px; opacity: 0; transform: translateY(16px) scale(.85);
  transition: opacity .35s ease .5s, transform .5s cubic-bezier(.3,1.5,.5,1) .5s; }
.care[data-focus] .pts[data-for] .pts-mira { }
.care[data-focus="patient"] .pts-patient .pts-mira,
.care[data-focus="doctor"] .pts-doctor-r .pts-mira,
.care[data-focus="hospital"] .pts-hospital .pts-mira { opacity: 1; transform: none; }

.pts-patient { left: 456px; width: 856px; height: 540px; }
.pts-patient ul { width: 520px; }
.pts-patient .pts-mira { right: 0; bottom: 0; width: 260px; height: 260px; }
.pts-doctor-l { left: 0; width: 360px; }
.pts-doctor-r { left: 851px; top: 98px; width: 461px; height: 480px; }
.pts-doctor-r ul { width: 300px; }
.pts-doctor-r .pts-mira { right: -10px; bottom: 0; }
.pts-hospital { left: 0; width: 790px; height: 540px; }
.pts-hospital .pts-mira { left: 0; bottom: -20px; width: 180px; height: 180px; }
.pts-hospital ul.two-col { margin-bottom: 0; }

/* ---------- screen 4: pricing ---------- */
.pr-copy { position: absolute; left: var(--m, 64px); top: 96px; height: 804px; width: 600px;
  display: flex; flex-direction: column; justify-content: center; }
.pr-title { font-size: 120px; margin: 0 0 24px; }
.pr-lead { font-size: 22px; line-height: 1.5; margin: 0 0 40px; max-width: 540px; }
.pr-how { list-style: none; margin: 0; padding: 28px 0 0; border-top: 1px solid var(--line); display: grid; gap: 20px; }
.pr-how li { position: relative; padding-left: 22px; }
.pr-how li::before { content: ""; position: absolute; left: 0; top: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--rose); }
.pr-how b { display: block; font-size: 19px; font-weight: 700; }
.pr-how span { display: block; font-size: 17px; color: var(--ink-soft); line-height: 1.45; margin-top: 2px; }
.pr-card { position: absolute; right: var(--m, 64px); top: 198px; width: clamp(592px, calc(var(--cw, 1312px) - 720px), 720px); height: 600px; padding: 48px 52px;
  border: 1px solid var(--line-strong); border-radius: 32px; background: var(--surface); }
.pr-price { display: flex; align-items: flex-start; gap: 6px; color: var(--ink); }
.pr-cur { font-size: 72px; font-weight: 700; margin-top: 14px; }
/* Until the price is announced: a thin blank line on the rupee sign's baseline. */
.pr-price:has(.pr-blank) { align-items: baseline; }
.pr-blank { display: inline-block; width: 170px; border-bottom: 3px solid currentColor; margin-left: 8px; }
.pr-num { font-size: 132px; }
.pr-unit { margin: 10px 0 30px; font-size: 20px; font-weight: 600; line-height: 1.4; }
.pr-unit span { font-weight: 400; color: var(--ink-soft); font-size: 17px; }
.pr-inc { list-style: none; margin: 0 0 34px; padding: 26px 0 0; border-top: 1px solid var(--line); display: grid; gap: 14px; }
.pr-inc li { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; line-height: 1.4; }
.pr-inc svg { width: 20px; height: 20px; flex: none; color: var(--rose); margin-top: 1px; }
.pr-mira { position: absolute; right: -36px; bottom: -40px; width: 210px; height: 210px; }

/* ---------- screen 5: contact, the app, footer ---------- */
.ct-copy { position: absolute; left: var(--m, 64px); top: 128px; width: 640px; }
.ct-title { font-size: 60px; line-height: 1.12; margin: 0 0 34px; }
/* the two words that matter keep the larger size, in pink. line-height 1 on them, and
   1.12 on the line, leaves room between rows so descenders (g, y, j) clear the next line. */
.ct-key { font-size: 76px; line-height: 1; color: var(--rose); }
.ct-mail { font-size: 26px; font-weight: 700; color: var(--rose); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; }
.ct-get { margin-top: 44px; }
.ct-get p { margin: 0 0 14px; font-size: 13px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-soft); }
.stores { display: flex; gap: 14px; }
.store { display: inline-flex; align-items: center; gap: 12px; height: 58px; padding: 0 22px 0 18px; border-radius: 14px;
  background: var(--ink); color: var(--bg); transition: transform .15s ease; }
.store:hover { transform: translateY(-2px); }
.store svg { width: 26px; height: 26px; }
.store span { display: flex; flex-direction: column; font-size: 19px; font-weight: 700; line-height: 1.05; }
.store small { font-size: 11px; font-weight: 500; letter-spacing: .02em; }
.ct-form-wrap { position: absolute; right: var(--m, 64px); top: 128px; width: clamp(576px, calc(var(--cw, 1312px) - 740px), 680px); }
.ct-form { padding: 40px 44px; border: 1px solid var(--line-strong); border-radius: 32px; background: var(--surface);
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; }
.ct-form h3 { grid-column: 1 / -1; margin: 0 0 14px; font-size: 26px; font-weight: 700; }
.fld label { display: block; font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.fld input { width: 100%; height: 50px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-strong);
  background: var(--bg); color: var(--ink); font: inherit; font-size: 16px; }
.fld input:focus { outline: 2px solid var(--rose); outline-offset: 1px; border-color: transparent; }
.fld input[aria-invalid="true"] { border-color: var(--rose); }
.fld-err { min-height: 20px; margin: 4px 0 6px; font-size: 13.5px; color: var(--rose); }
.ct-form .btn { grid-column: 1 / -1; justify-self: start; margin-top: 8px; border: 0; cursor: pointer; font-family: inherit; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ct-sent { grid-column: 1 / -1; margin: 12px 0 0; font-size: 15px; color: var(--ink-soft); }
.ct-sent strong { color: var(--rose); font-weight: 700; }
.ct-sent.ct-fail { color: var(--rose); }
.ct-form .btn:disabled { opacity: .6; cursor: progress; }
.ct-mira { position: absolute; right: -36px; bottom: -64px; width: 150px; height: 150px; }

.foot { position: absolute; left: var(--m, 64px); right: var(--m, 64px); bottom: 24px; padding-top: 24px; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 260px 1fr auto; align-items: start; gap: 14px 40px; }
.foot .brand-logo { width: 40px; height: 40px; }
.foot .wordmark { font-size: 21px; }
.foot-cols { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0 64px; }
.foot-cols nav { display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; }
.foot-cols h4 { margin: 0 0 4px; font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); }
.foot-cols a { color: var(--ink-soft); }
.foot-cols a:hover { color: var(--ink); text-decoration: underline; }
.socials { display: flex; gap: 10px; }
.socials a { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; color: var(--ink); }
.socials a:hover { color: var(--rose); border-color: var(--rose); }
.socials svg { width: 19px; height: 19px; }
.foot-legal { grid-column: 1 / -1; margin: 0; font-size: 13.5px; color: var(--ink-faint); }

/* store buttons: the apps are in pilot testing, so they show a note instead of a link */
button.store { border: 0; cursor: pointer; font: inherit; }
.ct-get .store-note { margin: 14px 0 0; text-transform: none; letter-spacing: normal; font-weight: 400; max-width: 460px; font-size: 15px; line-height: 1.5; color: var(--ink);
  padding: 10px 14px; border-left: 3px solid var(--rose); background: var(--surface); border-radius: 0 10px 10px 0; }

/* ---------- screen: inside the app ----------
   Seven real screens per profile. Every slide sits in a fixed slot; the centre one
   is bright and large, the rest are dimmed. Click a screen (or an arrow) and the
   whole row slides along, like a slideshow, until that screen is in the centre (site.js). */
.tour-head { position: absolute; left: var(--m, 64px); right: var(--m, 64px); top: 116px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.tour-title { font-size: 72px; margin: 0; }
.tour-switch { display: inline-flex; padding: 5px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); }
.tour-switch button { border: 0; background: none; font: inherit; font-size: 16px; font-weight: 600; color: var(--ink-soft);
  padding: 12px 24px; border-radius: 999px; cursor: pointer; transition: background .2s ease, color .2s ease; }
.tour-switch button[aria-selected="true"] { background: var(--rose); color: var(--on-rose); }
.tour-switch button:focus-visible, .deck-arrow:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }
.deck { position: absolute; left: 0; right: 0; top: 196px; height: 590px; }
.slide { position: absolute; left: 50%; top: 0; width: 272px; height: 590px; margin: 0 0 0 -136px;
  border-radius: 36px; overflow: hidden; background: var(--surface);
  border: 1px solid var(--line-strong); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 24px 48px -28px rgba(0,0,0,.3);
  transform-origin: 50% 100%; will-change: transform, opacity; }
.slide img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.deck-arrow { position: absolute; top: 463px; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer; z-index: 20;
  transition: color .15s ease, border-color .15s ease, transform .15s ease; }
.deck-arrow:hover { color: var(--rose); border-color: var(--rose); }
.deck-arrow:active { transform: scale(.96); }
.deck-arrow svg { width: 22px; height: 22px; }
.deck-arrow.prev { left: var(--m, 64px); }
.deck-arrow.next { right: var(--m, 64px); }
.deck-cap { position: absolute; left: 50%; top: 798px; transform: translateX(-50%); width: 640px; text-align: center; }
.deck-cap b { display: block; font-size: 22px; font-weight: 700; }
.deck-cap span { display: block; font-size: 17px; color: var(--ink-soft); margin-top: 4px; }
.deck-cap i { display: block; font-style: normal; font-size: 13px; color: var(--ink-faint); margin-top: 6px; letter-spacing: .08em; }

/* ---------- phones & small screens: stop scaling, let it flow ---------- */
@media (max-width: 899px) {
  .mm-copy .eyebrow { white-space: normal; font-size: 12.5px; }
  .stage.tour { display: flex; flex-direction: column; align-items: stretch; }
  .tour-head { position: static; flex-direction: column; align-items: flex-start; padding-top: 40px; }
  .tour-title { font-size: 56px; }
  .deck { position: relative; top: auto; height: 470px; margin-top: 28px; overflow: hidden; }
  .slide { width: 216px; height: 468px; margin-left: -108px; }
  .deck-arrow { top: auto; position: absolute; }
  .tour .deck-arrow.prev { left: 0; top: 330px; } .tour .deck-arrow.next { right: 0; top: 330px; }
  .deck-cap { position: static; transform: none; width: auto; margin-top: 16px; }
  html { scroll-snap-type: none; }
  .frame { height: auto; overflow: visible; }
  .stage { position: static; width: auto; height: auto; transform: none; padding: 0 16px 40px; }
  .navbar { height: 64px; }
  .nav-stage { position: static; width: auto; height: 64px; transform: none; }
  .nav { position: static; height: 64px; padding: 0 16px; gap: 10px; }
  .page { padding-top: 64px; }
  .frame { scroll-margin-top: 64px; }
  .frame + .frame::before { left: 16px; right: 16px; }
  .nav-links, .login { display: none; }
  .nav-right { gap: 10px; }
  .nav-right .btn { height: 40px; padding: 0 14px; font-size: 14px; }
  .nav-right .btn svg { display: none; }
  .switch { width: 52px; height: 28px; }
  .switch .knob { width: 20px; height: 20px; }
  .switch[aria-checked="true"] .knob { transform: translateX(24px); }
  .brand { gap: 8px; }
  .brand-logo { width: 36px; height: 36px; }
  .wordmark { font-size: 17px; }
  .hero-copy, .mm-copy { position: static; width: auto; height: auto; padding-top: 28px; }
  .wm { font-size: 64px; }
  .greeting { font-size: 24px; }
  .tagline { font-size: 22px; }
  .mm-title { font-size: 86px; }
  .lead { font-size: 18px; }
  .trust { flex-wrap: wrap; row-gap: 8px; }
  .trust span { border-left: 0; padding: 0 16px 0 0; }
  .hero-art { position: relative; inset: auto; width: auto; height: auto; margin-top: 28px; }
  .air-wrap { position: relative; right: auto; top: auto; width: 100%; max-width: 600px; overflow: hidden; margin: 0 auto; }
  .greet-row { flex-wrap: wrap; gap: 16px; }
  .mm-copy { display: block; }
  .mm-def { margin-top: 18px; }
  .feat { position: relative; left: auto; right: auto; top: auto; transform: none; max-width: none; width: 100%; height: auto; aspect-ratio: 16 / 9; margin-top: 24px; }
}
@media (max-width: 899px) {
  .pricing, .contact { display: flex; flex-direction: column; }
  .pr-copy, .pr-card, .ct-copy, .ct-form-wrap, .foot { position: static; width: auto; height: auto; }
  .pr-copy { padding-top: 40px; }
  .pr-title { font-size: 72px; }
  .pr-card { margin-top: 32px; padding: 32px 24px; }
  .pr-num { font-size: 96px; }
  .pr-cur { font-size: 56px; }
  .pr-blank { width: 130px; }
  .pr-mira { position: static; display: block; margin: 16px auto 0; width: 140px; height: 140px; }
  .ct-copy { padding-top: 40px; }
  .ct-title { font-size: 40px; }
  .ct-key { font-size: 50px; }
  .ct-mail { font-size: 20px; word-break: break-all; }
  .stores { flex-wrap: wrap; }
  .ct-form-wrap { margin-top: 32px; }
  .ct-form { grid-template-columns: 1fr; padding: 28px 20px; }
  .ct-mira { position: static; display: block; margin: 16px auto 0; width: 140px; height: 140px; }
  .foot { margin-top: 32px; grid-template-columns: 1fr; justify-items: start; }
  .foot-cols { grid-template-columns: 1fr 1fr; gap: 20px; }
  .stage.care { display: flex; flex-direction: column; }
  .care-head { position: static; padding-top: 32px; }
  .care-title { font-size: 44px; white-space: normal; }
  .scene { position: static; width: auto; height: auto; transform: none; display: contents; }
  .who, .pts { position: static; margin-left: 0; width: 100% !important; height: auto; opacity: 1 !important; visibility: visible !important;
    transform: none !important; pointer-events: auto; cursor: default; }
  .who { margin: 28px auto 0; max-width: 240px; }
  .pts li { opacity: 1; transform: none; }
  .pts ul, .pts-patient ul, .pts-doctor-r ul { width: auto; }
  .pts ul.two-col { grid-template-columns: 1fr; }
  .pts h3 { margin-top: 12px; font-size: 22px; }
  .pts-mira { position: static; display: block; opacity: 1; transform: none; width: 140px !important; height: 140px !important; margin: 8px auto 0; }
  .who-patient { order: 1; } .pts-patient { order: 2; } .who-doctor { order: 3; } .pts-doctor-l { order: 4; }
  .pts-doctor-r { order: 5; margin-top: 18px; } .who-hospital { order: 6; } .pts-hospital { order: 7; }
}
@media (max-width: 899px) {
  .hello { position: fixed; left: calc(50% - 60px); width: 120px; height: 120px; transform: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- v54 (6 Nov 2026): less text, more picture ---------- */
/* Small capitals labels get their own face: a mono, so they read as labels. */
.eyebrow, .tagline, .powered, .ct-get p, .foot-cols h4, .air-label, .role small {
  font-family: "DM Mono", ui-monospace, Menlo, monospace; font-weight: 500; }
.tagline { font-size: 27px; letter-spacing: .02em; }

/* Line icons, drawn with the current colour; a disc is the rose-tinted round holder. */
.ic { display: inline-grid; place-items: center; flex: none; font-style: normal; }
.ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ic.disc { width: 52px; height: 52px; border-radius: 50%; padding: 13px; background: var(--mira-bub); color: var(--rose); }

/* What Mira does: each point is a tile, icon + label; its line shows on hover or focus. */
.care[data-focus="patient"] .pts[data-for="patient"],
.care[data-focus="doctor"] .pts[data-for="doctor"],
.care[data-focus="hospital"] .pts[data-for="hospital"] { pointer-events: auto; }
.pts ul.tiles { display: grid; gap: 14px; }
.pts-patient ul.tiles { width: 600px; grid-template-columns: repeat(3, 1fr); }
.pts-hospital ul.tiles { width: 790px; grid-template-columns: repeat(3, 1fr); }
.pts-doctor-l ul.tiles, .pts-doctor-r ul.tiles { grid-template-columns: 1fr; }
.pts-doctor-r ul.tiles { width: 300px; }
.pts li.tile { position: relative; height: 132px; padding: 18px 18px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface);
  display: flex; flex-direction: column; justify-content: space-between; outline: none; cursor: default;
  transition: opacity .35s ease, transform .45s cubic-bezier(.3,1.2,.5,1), translate .25s ease, border-color .25s ease, box-shadow .25s ease; }
.pts-doctor-l li.tile, .pts-doctor-r li.tile { height: 118px; flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px; }
.care[data-focus] .pts[data-for] li.tile { transition-delay: calc(120ms + var(--i) * 70ms), calc(120ms + var(--i) * 70ms), 0s, 0s, 0s; }
.pts li.tile::before { content: none; }
.pts li.tile b { font-size: 19px; line-height: 1.25; transition: opacity .15s ease; }
.pts li.tile .hint { position: absolute; left: 18px; right: 18px; bottom: 16px; margin: 0; font-size: 15px; line-height: 1.4; color: var(--ink-soft);
  opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .25s ease; }
.pts-doctor-l li.tile .hint, .pts-doctor-r li.tile .hint { left: 86px; bottom: auto; top: 50%; transform: translateY(-40%); }
.pts li.tile:hover, .pts li.tile:focus-visible { translate: 0 -4px; border-color: var(--rose); box-shadow: 0 18px 30px -18px rgba(60,30,40,.35); }
.pts li.tile:hover b, .pts li.tile:focus-visible b { opacity: 0; }
.pts li.tile:hover .hint, .pts li.tile:focus-visible .hint { opacity: 1; transform: none; }
.pts-doctor-l li.tile:hover .hint, .pts-doctor-r li.tile:hover .hint,
.pts-doctor-l li.tile:focus-visible .hint, .pts-doctor-r li.tile:focus-visible .hint { transform: translateY(-50%); }

/* How Mira works: one loop. site.js steps through it; the active path runs rose. */
.how-head { position: absolute; left: var(--m, 64px); top: 112px; }
.how-title { font-size: 96px; margin: 0; }
.flow { position: absolute; top: 236px; left: calc((var(--sw, 1440px) - 1312px) / 2); width: 1312px; height: 640px; }
.wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wires path { fill: none; stroke: var(--line-strong); stroke-width: 2; transition: stroke .3s ease; }
.wires path.on { stroke: var(--rose); stroke-width: 2.5; stroke-dasharray: 6 12; animation: run .5s linear infinite; }
@keyframes run { to { stroke-dashoffset: -36; } }
.node { position: absolute; display: flex; align-items: center; gap: 18px; padding: 20px 24px; border-radius: 22px;
  background: var(--card-grad); box-shadow: var(--raise); border: 1px solid var(--line);
  transition: border-color .3s ease, translate .3s ease; }
.node.on { border-color: var(--rose); translate: 0 -3px; }
.node b { display: block; font-size: 20px; line-height: 1.2; }
.node small { display: block; font-size: 15px; color: var(--ink-soft); margin-top: 3px; line-height: 1.35; }
.node.warn .ic.disc { background: var(--rose); color: var(--on-rose); }
.node.doc { background: var(--doc-grad); box-shadow: var(--raise-doc); border-color: var(--doc-edge); color: var(--doc-ink); }
.node.doc.on { border-color: var(--rose); }
.node.doc small { color: rgba(255,255,255,.7); }
.node.doc .ic.disc { background: rgba(255,255,255,.12); color: #fff; }
.n-her { left: 0; top: 250px; width: 310px; }
.n-q { left: 816px; top: 0; width: 496px; }
.n-up { left: 816px; top: 120px; width: 496px; }
.n-med { left: 816px; top: 240px; width: 496px; }
.n-warn { left: 816px; top: 360px; width: 496px; }
.n-doc { left: 816px; top: 518px; width: 444px; }
.n-ft { left: 330px; top: 518px; width: 382px; }
.f-mira { position: absolute; left: 400px; top: 140px; width: 270px; height: 330px; text-align: center; }
.f-mira img { position: absolute; left: 0; top: 0; width: 270px; height: 270px; opacity: 0; transition: opacity .35s ease; }
.f-mira img.on { opacity: 1; animation: bob 2.2s ease-in-out infinite alternate; }
.f-mira b { position: absolute; left: 0; right: 0; top: 262px; font-stretch: 62%; font-weight: 800; font-size: 40px; color: var(--rose); }

/* Meet Mira: two roles as two cards, and one safety line. */
.mm-roles { display: grid; gap: 14px; }
.role { display: flex; gap: 18px; align-items: center; padding: 18px 20px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); }
.role small { display: block; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.role b { display: block; font-size: 23px; line-height: 1.2; margin-top: 3px; }
.role em { display: block; font-style: normal; font-size: 16px; color: var(--ink-soft); margin-top: 2px; }
.mm-safe { display: flex; gap: 10px; align-items: center; margin: 18px 0 0; font-size: 15px; line-height: 1.45; color: var(--ink-soft); }
.mm-safe .ic { width: 22px; height: 22px; color: var(--rose); }

/* Pricing: the rules as three icon columns, what's included as four chips. */
.pr-how { grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pr-how li { padding-left: 0; }
.pr-how li::before { content: none; }
.pr-how .ic.disc { margin-bottom: 14px; }
.pr-how span { font-size: 15px; margin-top: 3px; }
.pr-inc { grid-template-columns: 1fr 1fr; gap: 16px 22px; }
.pr-inc li { align-items: center; font-weight: 600; }
.pr-inc .ic.chip { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--mira-bub); color: var(--rose); margin: 0; }
.pr-inc .ic.chip svg { width: 100%; height: 100%; margin: 0; color: inherit; }

@media (max-width: 899px) {
  .tagline { font-size: 19px; }
  .pts ul.tiles, .pts-patient ul.tiles, .pts-hospital ul.tiles, .pts-doctor-r ul.tiles { width: auto; grid-template-columns: 1fr; gap: 10px; }
  .pts li.tile, .pts-doctor-l li.tile, .pts-doctor-r li.tile { height: auto; display: grid; grid-template-columns: 52px 1fr; column-gap: 14px; align-items: center; padding: 14px 16px; }
  .pts li.tile .ic { grid-row: 1 / 3; }
  .pts li.tile b, .pts li.tile:hover b { font-size: 17px; opacity: 1; align-self: end; }
  .pts li.tile .hint, .pts li.tile:hover .hint, .pts-doctor-l li.tile .hint, .pts-doctor-r li.tile .hint { position: static; opacity: 1; transform: none !important; font-size: 14px; margin-top: 2px; align-self: start; }
  .stage.how { display: flex; flex-direction: column; }
  .how-head { position: static; padding-top: 40px; }
  .how-title { font-size: 56px; }
  .flow { position: static; width: auto; height: auto; display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
  .wires { display: none; }
  .node, .node.on { position: static; width: auto !important; translate: none; padding: 14px 16px; }
  .f-mira { position: relative; left: auto; top: auto; width: 160px; height: 200px; margin: 0 auto; order: 1; }
  .f-mira img { width: 160px; height: 160px; }
  .f-mira b { top: 154px; font-size: 30px; }
  .n-her { order: 0; } .n-q { order: 2; } .n-up { order: 3; } .n-med { order: 4; } .n-warn { order: 5; } .n-doc { order: 6; } .n-ft { order: 7; }
  .pr-how { grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
  .pr-inc { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* v56: in the grid tiles (patient, hospital) the line needs the whole tile, so on hover
   the icon steps aside and the line sits centred in the tile instead of over the icon. */
@media (min-width: 900px) {
  .pts-patient li.tile .ic, .pts-hospital li.tile .ic { transition: opacity .15s ease; }
  .pts-patient li.tile:hover .ic, .pts-patient li.tile:focus-visible .ic,
  .pts-hospital li.tile:hover .ic, .pts-hospital li.tile:focus-visible .ic { opacity: 0; }
  .pts-patient li.tile .hint, .pts-hospital li.tile .hint { top: 14px; bottom: 14px; display: flex; align-items: center; }
}

/* ---------- v59 (7 Nov 2026): Inside the app, drawn as web text ----------
   The real screenshots squeezed a 390pt phone into a 272px card, so their text was
   ~10px and unreadable. Each screen is now built here at the card's own size, in the
   app's layout, with the same people and messages. It follows light and dark mode. */
:root { --ph-bg: #F6F1EE; --ph-bar: #F3EDE9; --ph-card: #FFFFFF; --ph-field: #EFE6E1; --ph-mira: #F6E3E7;
  --ph-red: #C0392B; --ph-red-bg: #FBE6E3; --ph-blue: #3E6A9A; --ph-blue-bg: #E6EEF6; --ph-amber: #B7791F; --ph-amber-bg: #FBF0DC;
  --ph-green: #3F7F5A; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ph-bg: #141113; --ph-bar: #1A1618; --ph-card: #221D20; --ph-field: #2A2427;
  --ph-mira: #3A2730; --ph-red: #F08A7E; --ph-red-bg: #3A1F22; --ph-blue: #8FB3DA; --ph-blue-bg: #1D2733; --ph-amber: #E2B25A; --ph-amber-bg: #33291A;
  --ph-green: #7CC39A; } }
:root[data-theme="dark"] { --ph-bg: #141113; --ph-bar: #1A1618; --ph-card: #221D20; --ph-field: #2A2427;
  --ph-mira: #3A2730; --ph-red: #F08A7E; --ph-red-bg: #3A1F22; --ph-blue: #8FB3DA; --ph-blue-bg: #1D2733; --ph-amber: #E2B25A; --ph-amber-bg: #33291A;
  --ph-green: #7CC39A; }

.ph { position: absolute; left: 0; top: 0; width: 272px; height: 590px; transform-origin: top left; display: flex; flex-direction: column;
  background: var(--ph-bg); color: var(--ink); font-size: 13px; line-height: 1.38; text-align: left; overflow: hidden; }
.ph b { font-weight: 700; }
.ph small { display: block; font-size: 11.5px; color: var(--ink-soft); line-height: 1.35; }
.pi { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ph .pav { width: 28px; height: 28px; flex: none; border-radius: 50%; object-fit: cover; background: #fff; } /* beats .slide img */
.pbody { flex: 1; min-height: 0; overflow: hidden; padding: 26px 12px 8px; display: flex; flex-direction: column; gap: 8px; }

/* chat head, date lines, bubbles */
.phead { display: flex; align-items: center; gap: 9px; margin: -26px -12px 2px; padding: 22px 14px 9px; background: var(--ph-bar); border-bottom: 1px solid var(--line); }
.phead b { display: block; font-size: 14px; line-height: 1.2; }
.phead small { display: flex; align-items: center; gap: 5px; }
.pdot { width: 7px; height: 7px; border-radius: 50%; background: var(--ph-green); }
.phead.pt { flex-wrap: nowrap; gap: 7px; }
.phead.pt .pi { width: 16px; height: 16px; }
.phead.pt b { white-space: nowrap; }
.plink { margin-left: auto; font-style: normal; font-size: 10.5px; color: var(--rose); white-space: nowrap; }
.pchips { display: flex; gap: 4px; flex-wrap: nowrap; }
.pchips span { display: inline-flex; align-items: center; gap: 3px; padding: 3px 7px; white-space: nowrap; border-radius: 999px; background: var(--ph-mira); color: var(--rose); font-size: 11.5px; font-weight: 600; }
.pchips .pi { width: 13px; height: 13px; }
.pday { display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 600; color: var(--ink-faint); }
.pday::before, .pday::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.pmsg { display: flex; align-items: flex-end; gap: 6px; }
.pmsg p { margin: 0; padding: 7px 11px; border-radius: 16px; max-width: 84%; }
.pmsg p > b:first-child { display: block; font-size: 11.5px; font-weight: 600; }
.pmsg.her { justify-content: flex-end; }
.pmsg.her p { background: var(--ph-card); border: 1px solid var(--line); border-bottom-right-radius: 5px; }
.pmsg.mira .pav { width: 20px; height: 20px; }
.pmsg.mira p { background: var(--ph-mira); border-bottom-left-radius: 5px; }
.pmsg.mira p > b:first-child { color: var(--rose); }
.pmsg.doc p { background: var(--doc-bub); color: var(--doc-ink); border-bottom-left-radius: 5px; max-width: 90%; }
.pmsg.doc p > b:first-child { color: #E9A6B6; }
.pphoto { display: flex !important; align-items: center; gap: 8px; }
.pphoto .pi { width: 26px; height: 26px; color: var(--rose); }
.pphoto b { display: block; font-size: 13px !important; }
.pack { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border: 1.5px solid var(--ph-blue); border-radius: 999px;
  color: var(--ph-blue); font-size: 12px; font-weight: 700; }
.pack .pi { width: 13px; height: 13px; }
.pflagged { display: flex; flex-direction: column; gap: 8px; margin: 0 -12px; padding: 8px 12px; background: var(--ph-red-bg); }

/* input row, To Mira, draft note, bottom tabs */
.ptomira { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; margin: 6px 10px 0; padding: 3px 10px 3px 3px;
  border: 1px solid var(--line-strong); border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--ph-card); }
.ptomira .pav { width: 18px; height: 18px; }
.pinput { display: flex; align-items: center; gap: 7px; padding: 7px 10px; }
.pplus, .psend { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; }
.pplus { border: 1.5px solid var(--rose); color: var(--rose); }
.psend { background: var(--rose); color: var(--on-rose); }
.pplus .pi, .psend .pi { width: 15px; height: 15px; }
.psend .pi { fill: currentColor; stroke: none; }
.pfield { flex: 1; min-width: 0; padding: 7px 12px; border-radius: 16px; background: var(--ph-field); color: var(--ink-faint); font-size: 12.5px; }
.pfield.filled { color: var(--ink); }
.pdraft { display: flex; align-items: center; gap: 7px; padding: 7px 10px; background: var(--ph-blue-bg); color: var(--ph-blue); font-size: 11px; line-height: 1.3; }
.pdraft .pav { width: 20px; height: 20px; }
.pdraft b { font-size: 11.5px; }
.ptabs { display: flex; justify-content: space-around; padding: 7px 4px 12px; border-top: 1px solid var(--line); background: var(--ph-bar); }
.ptab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--ink-soft); min-width: 40px; }
.ptab b { font-size: 9.5px; font-weight: 600; }
.ptab .pi { width: 19px; height: 19px; }
.ptab .pav { width: 19px; height: 19px; }
.ptab.on { color: var(--rose); }
.pbadge { position: absolute; top: -5px; left: calc(50% + 3px); min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; background: var(--ph-red);
  color: #fff; font-style: normal; font-size: 9px; font-weight: 700; line-height: 15px; text-align: center; }

/* home screens, cards and lists */
.phome-top { display: flex; align-items: center; gap: 7px; }
.phome-top > span:first-child { flex: 1; min-width: 0; }
.pbig { display: block; font-size: 20px; line-height: 1.15; letter-spacing: -.01em; }
.pround { position: relative; width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--ph-card); border: 1px solid var(--line); }
.pround .pi { width: 16px; height: 16px; }
.pround .pbadge { top: -4px; left: auto; right: -4px; }
.pini { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--ph-mira); color: var(--rose);
  font-size: 11.5px; font-weight: 700; font-style: normal; border: 0; }
.pini .pi { width: 15px; height: 15px; }
.pini.amber { background: var(--ph-amber-bg); color: var(--ph-amber); }
.pini.blue { background: var(--ph-blue-bg); color: var(--ph-blue); }
.pbar { height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.pbar i { display: block; height: 100%; background: var(--ph-green); }
.pbar-l { margin-top: -5px; text-align: right; font-size: 11px; color: var(--ink-soft); }
.pcard { background: var(--ph-card); border: 1px solid var(--line); border-radius: 16px; padding: 10px 12px; }
.pmira-card { display: flex; align-items: center; gap: 10px; }
.pmira-card .pav { width: 38px; height: 38px; }
.pmira-card p { margin: 0; }
.pmira-card p b { display: block; color: var(--rose); font-size: 12px; }
.prow { display: flex; align-items: center; gap: 10px; }
.prow > span:nth-child(2) { flex: 1; min-width: 0; }
.prow b { display: block; font-size: 13px; }
.psq { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--ph-blue-bg); color: var(--ph-blue); }
.pcap { font-size: 10px !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.pcap.rose { color: var(--rose); margin-top: 6px; }
.pcap.ink { color: var(--ink); font-size: 12px !important; letter-spacing: 0; text-transform: none; }
.plist { display: flex; flex-direction: column; gap: 2px; }
.plist-h { display: flex; align-items: center; justify-content: space-between; }
.plist-h b { font-size: 14px; }
.pring { width: 28px; height: 28px; border-radius: 50%; border: 2.5px solid var(--ph-green); display: grid; place-items: center; font-size: 9px; font-weight: 700; }
.pitem { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; border-top: 1px solid var(--line); font-size: 12.5px; }
.pitem:first-of-type { border-top: 0; }
.pitem .pi { width: 17px; height: 17px; margin-top: 1px; color: var(--ink-faint); }
.pitem .pi.ok { color: var(--ph-green); }
.pitem.done span { color: var(--ink-faint); text-decoration: line-through; }
.psearch { display: flex; align-items: center; gap: 7px; padding: 8px 11px; border-radius: 12px; background: var(--ph-card); border: 1px solid var(--line);
  color: var(--ink-faint); font-size: 12.5px; }
.psearch .pi { width: 15px; height: 15px; }
.pprow { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.pprow:last-child { border-bottom: 0; }
.pprow > span:nth-child(2) { flex: 1; min-width: 0; }
.pprow small { font-weight: 600; }
.pprow small.red { color: var(--ph-red); } .pprow small.blue { color: var(--ph-blue); }
.pprow small.amber { color: var(--ph-amber); } .pprow small.green { color: var(--ph-green); }
.pnum { width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--rose); color: var(--on-rose); font-style: normal;
  font-size: 10px; font-weight: 700; display: grid; place-items: center; }
.pchev { width: 14px; height: 14px; color: var(--ink-faint); }
.arow { align-items: flex-start; }
.arow em { display: block; font-style: normal; font-size: 12.5px; margin-top: 1px; }
.arow small { font-weight: 400 !important; }
.ptitle small { font-size: 12px; margin-top: 2px; }
.prow-t { display: flex; align-items: center; justify-content: space-between; }
.ppill { padding: 5px 11px; border-radius: 999px; background: var(--ph-mira); color: var(--rose); font-size: 12px; font-weight: 700; }
.pseg { display: flex; padding: 3px; border-radius: 12px; background: var(--ph-field); }
.pseg span { flex: 1; text-align: center; padding: 6px 2px; font-size: 12px; font-weight: 600; color: var(--ink-soft); border-radius: 10px; }
.pseg span.on { background: var(--ph-card); color: var(--rose); }
.pseg i { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--rose); color: var(--on-rose);
  font-style: normal; font-size: 9.5px; margin-left: 2px; }
.pflag { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 16px; background: var(--ph-red-bg); border: 1px solid var(--ph-red); }
.pflag-h { display: flex; align-items: center; gap: 5px; color: var(--ph-red); font-size: 13.5px; }
.pflag-h .pi { width: 16px; height: 16px; }
.pflag span { display: flex; gap: 6px; align-items: flex-start; font-size: 12.5px; }
.pred { width: 10px; height: 10px; flex: none; margin-top: 4px; border-radius: 50%; background: var(--ph-red); }
.psheet { margin: auto -12px -8px; padding: 12px 12px 14px; border-radius: 18px 18px 0 0; background: var(--ph-card); border-top: 1px solid var(--line-strong);
  box-shadow: 0 -10px 24px -14px rgba(0,0,0,.3); display: flex; flex-wrap: wrap; gap: 6px; }
.psheet-h { width: 100%; display: flex; align-items: center; justify-content: space-between; }
.psheet-h b { display: flex; align-items: center; gap: 5px; color: var(--ph-amber); font-size: 12.5px; }
.psheet-h .pi { width: 15px; height: 15px; color: var(--ink-soft); }
.psheet p { margin: 0; font-size: 12.5px; width: 100%; }
.pedit { width: 100%; padding: 7px 10px; border: 2px solid var(--ph-blue); border-radius: 10px; font-size: 12.5px; }
.pbtn { padding: 6px 12px; border: 1.5px solid var(--rose); border-radius: 999px; color: var(--rose); font-size: 12px; font-weight: 700; }
.pbtn.fill { background: var(--rose); color: var(--on-rose); }
.pweek { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.pdays { display: flex; justify-content: space-between; }
.pdays span { display: flex; flex-direction: column; align-items: center; padding: 5px 6px; border-radius: 10px; font-size: 10.5px; color: var(--ink-soft); }
.pdays span b { font-size: 13px; color: var(--ink); }
.pdays span.on { background: var(--rose); color: var(--on-rose); }
.pdays span.on b { color: var(--on-rose); }
.pvisit { display: flex; align-items: center; gap: 10px; }
.ptime { display: flex; flex-direction: column; align-items: center; padding-right: 10px; border-right: 1px solid var(--line); color: var(--rose); font-size: 11px; }
.ptime b { font-size: 15px; }
.pvisit b { display: block; }

@media (max-width: 899px) {
  .deck { height: 552px; }
  .slide { width: 252px; height: 547px; margin-left: -126px; }
  .ph { transform: scale(.9265); }
  .tour .deck-arrow.prev, .tour .deck-arrow.next { top: 380px; width: 40px; height: 40px; }
  .tour .deck-arrow.prev { left: -6px; } .tour .deck-arrow.next { right: -6px; }
}