/* ═══════════════════════════════════════════════════════════════
   Rime website — base layer.
   Resets, icon font class, keyframes and the utility classes that
   replace the design prototype's runtime-only style hooks
   (style-hover / style-before / style-after / onMouseEnter).
   Desktop layout itself lives in inline styles (kept verbatim from
   the design source so css/responsive.css keeps matching them).
   ═══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: #ECEEF0; font-family: 'Onest', sans-serif; }
::selection { background: #EC7B56; color: #fff; }
a { color: inherit; text-decoration: none; }
button { font-family: 'Onest', sans-serif; }
input::placeholder, textarea::placeholder { color: rgba(31,38,51,0.35); }

.rime-link { color: rgba(31,38,51,0.62); transition: color .15s ease; }
.rime-link:hover { color: #1F2633; }

/* Material Symbols Rounded — icon glyph class (font loaded in tokens/fonts.css) */
.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ── keyframes (union of every .dc surface's animation set) ── */
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes barGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rowSlide { from { opacity:0; transform:translateX(14px); } to { opacity:1; transform:translateX(0); } }
@keyframes countReveal { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes phoneScroll { 0%,30%{ transform:translateY(0); } 50%,80%{ transform:translateY(-130px); } 95%,100%{ transform:translateY(0); } }
@keyframes marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes msgIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes chartDraw { to { stroke-dashoffset:0; } }
@keyframes typingDot { 0%,100% { opacity:0.35; transform:translateY(0); } 50% { opacity:1; transform:translateY(-2px); } }
@keyframes caretBlink { 0%,100% { opacity:1; } 50% { opacity:0; } }
@keyframes fadeUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes pulseDot { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.4; transform:scale(0.8); } }
.fade-up { animation: fadeUp 0.5s ease both; }

/* ── hover utilities (replace inline onMouseEnter/onMouseLeave) ── */
.lift { transition: transform .2s ease, box-shadow .2s ease; }
.lift:hover { transform: translateY(-3px); }

.hv-dim { transition: opacity .15s ease; }
.hv-dim:hover { opacity: 0.8; }

.hv-row { transition: background .15s ease; }
.hv-row:hover { background: #F8F9FA !important; }

.hv-panel { transition: background .15s ease; }
.hv-panel:hover { background: #F6F7F8 !important; }

/* dropdown / mobile-nav menu items */
.hv-menu { transition: background .15s ease; }
.hv-menu:hover { background: #F4F5F7; }

/* logo marquee entries: greyed until hovered */
.hv-logo { filter: grayscale(1); opacity: 0.45; transition: opacity .2s ease, filter .2s ease; cursor: default; }
.hv-logo:hover { opacity: 1; filter: grayscale(0); }

.copy-btn { transition: background .15s ease; }
.copy-btn:hover { background: rgba(255,255,255,0.12) !important; }

/* form focus ring (replaces inline onFocus/onBlur handlers) */
.rime-input { transition: border-color .15s ease, box-shadow .15s ease; }
.rime-input:focus { border-color: rgba(74,181,247,0.7) !important; box-shadow: 0 0 0 3px rgba(74,181,247,0.12) !important; }

/* ── corner ticks (replace style-before / style-after on package cards) ──
   Set --tick to the accent color on the element. */
.corner-ticks { position: relative; }
.corner-ticks::before {
  content: ''; position: absolute; top: 12px; left: 12px; width: 13px; height: 13px;
  border-top: 1.5px solid var(--tick, #262626); border-left: 1.5px solid var(--tick, #262626); opacity: 0.65;
}
.corner-ticks::after {
  content: ''; position: absolute; bottom: 12px; right: 12px; width: 13px; height: 13px;
  border-bottom: 1.5px solid var(--tick, #262626); border-right: 1.5px solid var(--tick, #262626); opacity: 0.65;
}

/* package-card hover: hairline turns accent + deep lift (replaces style-hover) */
.pkg-card { transition: transform .2s ease, box-shadow .2s ease; }
.pkg-card:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 0.5px var(--tick, #262626), 0 14px 36px rgba(31,38,51,0.10) !important;
}