/* ============================================================================
   MediByte — Landing Site
   Design system + base + components
   "Clinical Warmth × Apple Editorial"
   Fonts: Bricolage Grotesque (display) · Geist (body) · Geist Mono (labels)
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand blue */
  --blue:        #1a5bff;
  --blue-bright: #3d7bff;
  --blue-deep:   #0b3dcc;
  --blue-ink:    #0a2a8a;
  --blue-tint:   #eaf0ff;
  --blue-tint-2: #dbe6ff;

  /* Accents */
  --cyan:  #36d3e8;
  --teal:  #16c4b0;
  --coral: #ff6a59;
  --gold:  #ffc24d;
  --green: #2fbf71;
  --violet:#7b6bff;

  /* Light surfaces (warm bone) */
  --bg:        #f4f1ea;
  --bg-2:      #ece6db;
  --surface:   #ffffff;
  --surface-2: #faf7f1;

  /* Ink — darker, more confident, WCAG-AA on bone */
  --ink:   #0a0b0e;
  --ink-2: #2f323b;
  --ink-3: #555a64;
  --ink-4: #6b7180;

  /* Night act */
  --night:      #070a14;
  --night-2:    #0b1124;
  --night-3:    #111a35;
  --night-ink:  #eaf0ff;
  --night-ink-2:#9fb0d8;

  /* Lines */
  --line:    rgba(10, 11, 14, 0.08);
  --line-2:  rgba(10, 11, 14, 0.045);
  --hair:    rgba(10, 11, 14, 0.10);
  --line-d:  rgba(255, 255, 255, 0.12);
  --line-d2: rgba(255, 255, 255, 0.06);

  /* Radii */
  --r-xs: 10px;
  --r-sm: 14px;
  --r:    20px;
  --r-lg: 28px;
  --r-xl: 38px;
  --r-2xl:52px;
  --r-pill: 999px;
  --r-phone: 13.5%;

  /* Shadow system (precise, hairline + soft elevation — Vercel/Linear school) */
  --sh-sm:  0 0 0 1px rgba(10,11,14,.045), 0 1px 2px rgba(10,11,14,.05), 0 4px 10px -4px rgba(10,11,14,.06);
  --sh-md:  0 0 0 1px rgba(10,11,14,.045), 0 2px 4px rgba(10,11,14,.04), 0 10px 26px -12px rgba(10,11,14,.14);
  --sh-lg:  0 0 0 1px rgba(10,11,14,.04), 0 4px 8px rgba(10,11,14,.04), 0 26px 56px -22px rgba(10,11,14,.20);
  --sh-device: 0 0 0 1px rgba(10,11,14,.06), 0 42px 80px -30px rgba(12,26,72,.42), 0 16px 36px -26px rgba(10,11,14,.34);
  --sh-blue: 0 14px 40px -14px rgba(26,91,255,.46);
  --ring-hair: inset 0 0 0 1px rgba(10,11,14,.07);

  /* Type */
  --font-display: "Bricolage Grotesque", "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Motion */
  --ease:     cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,.05,.36,1);

  /* Layout */
  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-y: clamp(72px, 11vw, 168px);
}

/* ----------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--ink-4) transparent;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  font-size: clamp(15px, 1.05vw, 17px);
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
html { overflow-x: clip; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
ul { list-style: none; padding: 0; }

::selection { background: var(--blue); color: #fff; }

:focus-visible {
  outline: 2.5px solid var(--blue);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Film grain + warm vignette overlay for premium texture */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ----------------------------------------------------------------------------
   3. TYPOGRAPHY
   -------------------------------------------------------------------------- */
.display, h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 0.98;
  text-wrap: balance;
}

h1, .h1 { font-size: clamp(2.7rem, 7vw, 5.6rem); }
h2, .h2 { font-size: clamp(2.1rem, 5vw, 4rem); }
h3, .h3 { font-size: clamp(1.4rem, 2.6vw, 2.1rem); letter-spacing: -0.03em; line-height: 1.05; }

p { text-wrap: pretty; }

.lead {
  font-size: clamp(1.05rem, 1.5vw, 1.32rem);
  line-height: 1.5;
  color: var(--ink-2);
  letter-spacing: -0.015em;
  font-weight: 400;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue-deep);
}
.eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 2px;
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(26,91,255,.14);
  transform: rotate(45deg);
}
.eyebrow--light { color: var(--cyan); }
.eyebrow--light::before { background: var(--cyan); box-shadow: 0 0 0 4px rgba(54,211,232,.16); }

.grad-blue { color: var(--blue-deep); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .grad-blue {
    background: linear-gradient(96deg, var(--blue) 0%, var(--blue-bright) 48%, #2aa7d8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}
.ink-soft { color: var(--ink-2); }
.serif-accent {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
}

/* ----------------------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--wide { max-width: 1340px; }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(48px, 7vw, 96px); }

.stack-sm > * + * { margin-top: 0.9rem; }
.stack > * + * { margin-top: 1.4rem; }
.center { text-align: center; }
.section__head { max-width: 760px; }
.section__head.center { margin-inline: auto; }
.section__head .lead { margin-top: 1.1rem; }
.section__head .eyebrow { margin-bottom: 1.1rem; }

/* ----------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.95em 1.5em;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 500;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background .3s var(--ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.985); }
.btn svg { width: 1.15em; height: 1.15em; }

.btn--primary {
  --btn-bg: linear-gradient(180deg, var(--blue-bright), var(--blue));
  --btn-fg: #fff;
  box-shadow: var(--sh-blue), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn--primary:hover { box-shadow: 0 24px 60px -14px rgba(26,91,255,.62), inset 0 1px 0 rgba(255,255,255,.4); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  box-shadow: inset 0 0 0 1.4px var(--line);
}
.btn--ghost:hover { box-shadow: inset 0 0 0 1.4px rgba(11,12,16,.28); background: rgba(11,12,16,.02); }

.btn--lg { padding: 1.12em 1.8em; font-size: 1.05rem; }

/* App Store badge button (custom built) */
.btn-app {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.7em 1.25em 0.72em;
  border-radius: 15px;
  background: var(--ink);
  color: #fff;
  box-shadow: var(--sh-md), inset 0 1px 0 rgba(255,255,255,.12);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
  will-change: transform;
}
.btn-app:hover { transform: translateY(-2px); box-shadow: var(--sh-lg); }
.btn-app svg { width: 26px; height: 26px; flex: none; }
.btn-app__txt { display: flex; flex-direction: column; line-height: 1.05; text-align: left; }
.btn-app__txt small { font-size: 0.64rem; letter-spacing: 0.02em; opacity: .82; font-weight: 400; }
.btn-app__txt b { font-size: 1.18rem; font-weight: 600; letter-spacing: -0.02em; font-family: var(--font-display); }
.btn-app--light { background: #fff; color: var(--ink); box-shadow: var(--sh-md); }

/* Text link with animated underline */
.tlink {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 500;
  color: var(--blue-deep);
}
.tlink::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease-out);
}
.tlink:hover::after { transform: scaleX(1); }
.tlink svg { width: 1em; height: 1em; transition: transform .35s var(--ease-out); }
.tlink:hover svg { transform: translateX(3px); }

/* ----------------------------------------------------------------------------
   6. CHIPS / TAGS / BADGES
   -------------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 0.9em;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--sh-sm), var(--ring-hair);
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--ink-2);
}
.chip svg { width: 1.05em; height: 1.05em; color: var(--blue); }
.chip--dark { background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--line-d); color: var(--night-ink-2); }
.chip--dark svg { color: var(--cyan); }

.pill-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* ----------------------------------------------------------------------------
   7. GLASS CARD
   -------------------------------------------------------------------------- */
.glass {
  background: linear-gradient(150deg, rgba(255,255,255,.9), rgba(255,255,255,.62));
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: var(--sh-md), inset 0 1px 0 rgba(255,255,255,.7);
  border-radius: var(--r-lg);
}
.glass--dark {
  background: linear-gradient(150deg, rgba(255,255,255,.085), rgba(255,255,255,.03));
  box-shadow: inset 0 0 0 1px var(--line-d), 0 30px 60px -30px rgba(0,0,0,.8);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

/* ----------------------------------------------------------------------------
   8. iPHONE DEVICE FRAME
   -------------------------------------------------------------------------- */
.device {
  position: relative;
  width: 100%;
  aspect-ratio: 1206 / 2622;
  border-radius: 46px;
  background: #050506;
  overflow: hidden;
  /* screen → thin black bezel → titanium rim → soft drop shadow */
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.07),
    0 0 0 9px #0b0c0e,
    0 0 0 12px #3c4047,
    0 0 0 12.5px #aeb3bb,
    0 34px 72px -26px rgba(12,26,72,.42),
    0 16px 34px -22px rgba(10,11,14,.4);
  isolation: isolate;
}
.device__screen {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  background: #fff;
}
@media (max-width: 560px) { .device { border-radius: 38px; } }
.device__screen img,
.device__screen video,
.device__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  background: #fff;
}
/* Dynamic Island — only for in-page content mocks (chat).
   Real screenshots already include their own status bar + island. */
.device__island {
  position: absolute;
  top: 2.5%;
  left: 50%;
  transform: translateX(-50%);
  width: 31%;
  aspect-ratio: 7 / 2.15;
  background: #000;
  border-radius: var(--r-pill);
  z-index: 3;
}
.device:has(.device__screen img) .device__island,
.device:has(.device__screen video) .device__island { display: none; }
/* Glass glare sweep */
.device__glare {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(125deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(255,255,255,.06) 100%);
}
/* side buttons */
.device__btn, .device__btn2, .device__pwr { display: none; }

.device--float { animation: float 7s var(--ease-in-out) infinite; }
.device--tilt { transition: transform .6s var(--ease-out); transform-style: preserve-3d; }

@keyframes float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-16px); }
}

/* ----------------------------------------------------------------------------
   9. PROGRESS RING
   -------------------------------------------------------------------------- */
.ring {
  --p: 75;
  --size: 84px;
  --tw: 9px;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(closest-side, var(--surface) calc(100% - var(--tw) - 1px), transparent calc(100% - var(--tw))),
    conic-gradient(var(--blue) calc(var(--p) * 1%), var(--blue-tint-2) 0);
  position: relative;
  flex: none;
}
.ring__val {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: calc(var(--size) * 0.27);
  letter-spacing: -0.04em;
  color: var(--ink);
}
.ring--cyan {
  background:
    radial-gradient(closest-side, var(--night-2) calc(100% - var(--tw) - 1px), transparent calc(100% - var(--tw))),
    conic-gradient(var(--cyan) calc(var(--p) * 1%), rgba(255,255,255,.12) 0);
}
.ring--cyan .ring__val { color: var(--night-ink); }

/* ----------------------------------------------------------------------------
   10. MASCOT
   -------------------------------------------------------------------------- */
.mascot {
  position: relative;
  filter: drop-shadow(0 30px 32px rgba(13,30,90,.28));
  animation: bob 6s var(--ease-in-out) infinite;
  will-change: transform;
}
.mascot--glow::after {
  content: "";
  position: absolute;
  inset: 6% 6% 0;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(54,211,232,.55), rgba(26,91,255,.2) 60%, transparent 72%);
  filter: blur(26px);
}
@keyframes bob {
  0%,100% { transform: translateY(0) rotate(-1deg); }
  50%     { transform: translateY(-14px) rotate(1deg); }
}

/* ----------------------------------------------------------------------------
   11. ECG vital line
   -------------------------------------------------------------------------- */
.ecg { width: 100%; height: 56px; overflow: visible; color: var(--blue); }
.ecg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(26,91,255,.45));
}
.ecg .ecg__trace {
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: ecg-draw 4.2s var(--ease) infinite;
}
@keyframes ecg-draw {
  0%   { stroke-dashoffset: 1400; }
  55%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -1400; }
}

/* ----------------------------------------------------------------------------
   12. BYTE particle field
   -------------------------------------------------------------------------- */
.bytes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.bytes span {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 2px;
  background: var(--blue);
  opacity: .0;
  animation: drift linear infinite;
}
.bytes span:nth-child(even) { border-radius: 50%; background: var(--cyan); }
@keyframes drift {
  0%   { opacity: 0; transform: translateY(20px) scale(.6); }
  12%  { opacity: .7; }
  88%  { opacity: .5; }
  100% { opacity: 0; transform: translateY(-120px) scale(1); }
}

/* ----------------------------------------------------------------------------
   13. REVEAL animations (JS-driven)
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
[data-delay="1"] { transition-delay: .08s; }
[data-delay="2"] { transition-delay: .16s; }
[data-delay="3"] { transition-delay: .24s; }
[data-delay="4"] { transition-delay: .32s; }
[data-delay="5"] { transition-delay: .40s; }
.reveal-scale { opacity: 0; transform: scale(.94) translateY(20px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.reveal-scale.in { opacity: 1; transform: none; }

html.reveal-fallback .reveal,
html.reveal-fallback .reveal-scale { opacity: 1 !important; transform: none !important; transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-scale { opacity: 1 !important; transform: none !important; }
  .device--float, .mascot, .bytes span, .ecg .ecg__trace { animation: none !important; }
}

/* Screenshot mode (?shot=1) — freeze animation for clean captures */
html.shot *, html.shot *::before, html.shot *::after { animation: none !important; transition: none !important; }

/* Decorative blobs */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  opacity: .42;
  z-index: 0;
  pointer-events: none;
}

/* Skip link */
.skip {
  position: fixed;
  top: -60px; left: 16px;
  z-index: 2000;
  padding: 11px 18px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: #fff;
  font-weight: 500;
  font-size: .9rem;
  transition: top .25s var(--ease-out);
}
.skip:focus-visible { top: 14px; outline-offset: 2px; }

/* Editorial section index (01 / 02 …) + kicker rule */
.kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.kicker__idx {
  font-family: var(--font-mono);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--blue-deep);
  padding: 4px 9px;
  border-radius: 7px;
  background: var(--blue-tint);
}
.kicker__rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--hair), transparent); }
.kicker .eyebrow { margin: 0; }
.section__head .kicker { margin-bottom: 22px; }
.center .kicker { justify-content: center; }
.center .kicker__rule { display: none; }

/* ---- Dr. MediByte chat mock (AI section device) ---- */
.chatmock {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #ffffff 0%, #f4f7fc 100%);
  font-family: var(--font-body);
  color: var(--ink);
}
.chatmock__head {
  display: flex; align-items: center; gap: 3cqw;
  padding: 15cqw 5cqw 4cqw;
  border-bottom: 1px solid rgba(10,11,14,.07);
  background: rgba(255,255,255,.85);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.chatmock__av {
  width: 11cqw; height: 11cqw; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, #3d7bff, #0b3dcc);
  display: grid; place-items: center;
  box-shadow: 0 1.5cqw 4cqw -1.5cqw rgba(26,91,255,.7);
}
.chatmock__av svg { width: 6.4cqw; height: 6.4cqw; color: #fff; }
.chatmock__who b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 4.4cqw; letter-spacing: -.02em; }
.chatmock__who span { font-size: 3.1cqw; color: var(--green); display: inline-flex; align-items: center; gap: 1.4cqw; }
.chatmock__who span::before { content:""; width: 2cqw; height: 2cqw; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 1.4cqw rgba(47,191,113,.18); }
.chatmock__body { flex: 1; padding: 5cqw 4.5cqw; display: flex; flex-direction: column; gap: 3.4cqw; overflow: hidden; }
.bub { max-width: 82%; padding: 3.3cqw 3.8cqw; font-size: 3.55cqw; line-height: 1.42; letter-spacing: -.01em; border-radius: 5cqw; }
.bub b { font-weight: 600; }
.bub--me { align-self: flex-end; background: linear-gradient(180deg, var(--blue-bright), var(--blue)); color: #fff; border-bottom-right-radius: 1.6cqw; box-shadow: 0 2cqw 5cqw -2cqw rgba(26,91,255,.5); }
.bub--ai { align-self: flex-start; background: #fff; color: var(--ink-2); border: 1px solid rgba(10,11,14,.07); border-bottom-left-radius: 1.6cqw; box-shadow: var(--sh-sm); }
.bub--ai .tag { display: inline-block; font-family: var(--font-mono); font-size: 2.7cqw; letter-spacing: .06em; color: var(--blue-deep); background: var(--blue-tint); padding: .7cqw 2cqw; border-radius: 2.4cqw; margin-bottom: 1.8cqw; }
.chatmock__typing { align-self: flex-start; display: inline-flex; gap: 1.6cqw; padding: 3.6cqw 4.2cqw; background: #fff; border: 1px solid rgba(10,11,14,.07); border-radius: 5cqw; box-shadow: var(--sh-sm); }
.chatmock__typing i { width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: var(--ink-4); animation: blink 1.2s infinite ease-in-out; }
.chatmock__typing i:nth-child(2){ animation-delay:.2s } .chatmock__typing i:nth-child(3){ animation-delay:.4s }
@keyframes blink { 0%,80%,100%{opacity:.3;transform:translateY(0)} 40%{opacity:1;transform:translateY(-1cqw)} }
.chatmock__input {
  margin: 0 4cqw 8cqw; padding: 3.4cqw 4cqw;
  display: flex; align-items: center; justify-content: space-between;
  background: #fff; border: 1px solid rgba(10,11,14,.08); border-radius: 9cqw;
  font-size: 3.4cqw; color: var(--ink-4); box-shadow: var(--sh-sm);
}
.chatmock__send { width: 8.6cqw; height: 8.6cqw; border-radius: 50%; background: linear-gradient(180deg,var(--blue-bright),var(--blue)); display: grid; place-items: center; flex: none; }
.chatmock__send svg { width: 4.4cqw; height: 4.4cqw; color: #fff; }
html.shot .chatmock__typing i { animation: none; }