/* ═══════════════════════════════════════════════════════════════
   HighRater AI — Premium Refinement Layer (v18)
   Loaded after each page's own styles. Elevates execution quality:
   typography, depth, motion, focus, and mobile precision.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Rendering quality ─────────────────────────────────────── */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body { letter-spacing: 0.001em; }

/* Large display type: tight, confident tracking (Apple-style) */
h1 { letter-spacing: -0.03em; }
h2 { letter-spacing: -0.022em; }
h3, .page-title { letter-spacing: -0.015em; }

/* Stats & prices align like an instrument panel */
.stat-value, .plan-price, [id^="stat-"], .text-4xl, .text-5xl {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ── 2. Selection, scrollbar, focus ───────────────────────────── */
::selection { background: rgba(95, 227, 239, 0.28); color: #ffffff; }

* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.14) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(95,227,239,0.35); }

/* Keyboard focus: visible, precise, never a browser-default blue box */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid rgba(95, 227, 239, 0.85);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ── 3. Depth system: layered shadows + inner light ───────────── */
/* Glass surfaces get a top inner highlight and true layered depth
   instead of a flat border — the "milled edge" effect. */
.glass, .glass-card {
  border-color: rgba(255,255,255,0.09) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 1px 2px rgba(0,0,0,0.35),
    0 12px 32px -8px rgba(0,0,0,0.45);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  backdrop-filter: saturate(150%) blur(16px);
}
.glass-sm {
  border-color: rgba(255,255,255,0.07) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 1px 2px rgba(0,0,0,0.3),
    0 8px 20px -6px rgba(0,0,0,0.4);
}

/* Cards lift gently on hover — pointer devices only */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .glass-card, .stat-card {
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
                border-color 0.35s ease;
  }
  .glass-card:hover, .stat-card:hover {
    transform: translateY(-2px);
    border-color: rgba(95,227,239,0.22) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.08),
      0 2px 4px rgba(0,0,0,0.35),
      0 20px 48px -12px rgba(0,0,0,0.55);
  }
}

/* ── 4. Buttons: precise motion, real press state ─────────────── */
.btn, .cta-fill, .cta-ghost, .paddle-button, button {
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
              background-color 0.22s ease,
              border-color 0.22s ease,
              color 0.22s ease,
              opacity 0.22s ease;
}
/* Primary gradient buttons: machined inner top-light */
.btn-primary, .cta-fill {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    0 1px 2px rgba(0,0,0,0.3),
    0 6px 16px -4px var(--tier-soft, rgba(95,227,239,0.35));
}
.btn-primary:hover, .cta-fill:hover {
  transform: translateY(-1px) !important;
  filter: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.32),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    0 2px 4px rgba(0,0,0,0.3),
    0 12px 28px -6px var(--tier-soft, rgba(95,227,239,0.45)) !important;
}
/* The press: everything premium clicks DOWN */
.btn:active, .cta-fill:active, .cta-ghost:active,
.paddle-button:active, button:active {
  transform: translateY(0) scale(0.985) !important;
  transition-duration: 0.06s;
}
.btn-ghost:hover {
  background: rgba(95,227,239,0.06);
}
button:disabled, .btn:disabled { transform: none !important; }

/* ── 5. Inputs: calm at rest, unmistakable in focus ───────────── */
input, textarea, select {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
input:hover:not(:focus), textarea:hover:not(:focus), select:hover:not(:focus) {
  border-color: rgba(255,255,255,0.16);
}
input:focus, textarea:focus, select:focus {
  border-color: rgba(95,227,239,0.7) !important;
  box-shadow: 0 0 0 3px rgba(95,227,239,0.15);
  background-color: rgba(255,255,255,0.06);
}
::placeholder { color: rgba(152,150,164,0.65); }

/* ── 6. Navigation: heavier glass, hairline base ──────────────── */
nav, .topbar {
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
}

/* ── 7. Tables & badges ───────────────────────────────────────── */
table { border-collapse: separate; border-spacing: 0; }
.badge { letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }

/* ── 8. Motion discipline ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── 9. Mobile precision ──────────────────────────────────────── */
@media (max-width: 768px) {
  /* iOS zooms any input under 16px — the #1 "cheap product" tell */
  input, textarea, select { font-size: 16px !important; }
  /* Comfortable tap targets */
  .btn, .cta-fill, .cta-ghost, .paddle-button { min-height: 44px; }
  .nav-item { min-height: 44px; }
  /* Backdrop blur is the #1 scroll-jank source on phones — remove it entirely.
     Near-solid dark backgrounds look virtually identical on this theme and
     scroll at full frame rate even on budget Androids. */
  .glass, .glass-card, .glass-sm, nav, .topbar, .pricing-card, .preview-panel {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .glass, .glass-card { background: rgba(13,15,26,0.92) !important; }
  .pricing-card { background: rgba(12,13,24,0.94) !important; }
  .preview-panel { background: rgba(10,12,22,0.94) !important; }
  /* Hover lifts don't exist on touch; keep cards planted */
  .glass-card:hover, .stat-card:hover { transform: none; }
}

/* Tap feedback on touch devices (replaces hover) */
@media (hover: none) {
  .btn:active, .cta-fill:active, .nav-item:active {
    background-color: rgba(95,227,239,0.10);
  }
}

/* ── 10. Page-specific signatures ─────────────────────────────── */

/* Landing: the recommended plan physically stands above the others */
@media (min-width: 768px) {
  .pricing-card:has(.tier-badge) {
    transform: translateY(-10px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.08),
      0 2px 4px rgba(0,0,0,0.35),
      0 28px 64px -16px rgba(95,227,239,0.28);
    border-color: rgba(95,227,239,0.35) !important;
  }
  .pricing-card:has(.tier-badge):hover { transform: translateY(-13px); }
}

/* Dashboard sidebar: active item gets a machined accent bar */
.nav-item { position: relative; }
.nav-item.active::before {
  content: '';
  position: absolute;
  left: -0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  border-radius: 99px;
  background: linear-gradient(180deg, #5FE3EF, #22B8C4);
  box-shadow: 0 0 8px rgba(95,227,239,0.5);
}

/* Demo: active tab reads as a solid, milled control */
.f-tab.active {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    inset 0 -1px 0 rgba(0,0,0,0.15),
    0 2px 8px -2px rgba(95,227,239,0.45);
}

/* ── 11. Icon system (replaces emojis) ────────────────────────── */
svg.ic { flex-shrink: 0; }
.feature-icon svg.ic { width: 1.4em; height: 1.4em; color: currentColor; }
.nav-icon svg.ic { width: 1.1em; height: 1.1em; }
.btn svg.ic, button svg.ic { margin-right: 0.1em; }

/* ── 12. Mobile safety net ────────────────────────────────────── */
/* No page should ever scroll sideways on a phone */
html, body { overflow-x: clip; }

/* ═══════════════════════════════════════════════════════════════
   PREMIUM PASS 2 (v25) — Apple-grade fine-tuning
   Small, precise refinements. Feel over flash.
   ═══════════════════════════════════════════════════════════════ */

/* ── 13. Optical type refinement ──────────────────────────────── */
/* Real premium products tune line-height and tracking per size.
   Big type = tighter; body = looser for readability. */
h1, .hero-h { line-height: 1.04; letter-spacing: -0.035em; }
h2 { line-height: 1.1; }
h3 { line-height: 1.2; }
p, li { line-height: 1.65; }           /* generous body leading reads as considered */
.eyebrow, .kicker, [class*="label"] {
  letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.72rem;
}
/* Balance headline wrapping so lines break evenly, not orphaned */
h1, h2, h3, .hero-h { text-wrap: balance; }
p { text-wrap: pretty; }

/* ── 14. Refined shadow language ──────────────────────────────── */
/* Apple shadows are soft, layered, and low-opacity — never one hard drop. */
:root {
  --shadow-sm: 0 1px 2px rgba(0,0,0,.28), 0 2px 6px -2px rgba(0,0,0,.32);
  --shadow-md: 0 2px 4px rgba(0,0,0,.3), 0 12px 28px -8px rgba(0,0,0,.45);
  --shadow-lg: 0 4px 8px rgba(0,0,0,.3), 0 32px 64px -16px rgba(0,0,0,.55);
  --ease-out: cubic-bezier(.2,.8,.2,1);
}

/* ── 15. Buttons: quieter, more confident ─────────────────────── */
/* Premium CTAs don't scream — subtle sheen, precise press, no big glow. */
.btn-primary, .cta-fill {
  background-image: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 40%), linear-gradient(135deg, var(--tier, #5FE3EF), var(--tier-deep, #22B8C4)) !important;
  font-weight: 600; letter-spacing: -0.01em;
}
/* Faint moving sheen on hover — the "expensive" tell */
.btn-primary::after, .cta-fill::after {
  content:''; position:absolute; inset:0; border-radius:inherit;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.22) 48%, transparent 60%);
  transform: translateX(-120%); transition: transform .6s var(--ease-out);
  pointer-events:none;
}
.btn-primary, .cta-fill { position: relative; overflow: hidden; }
@media (hover:hover){ .btn-primary:hover::after, .cta-fill:hover::after { transform: translateX(120%); } }

/* ── 16. Cards: calmer borders, richer depth ──────────────────── */
.glass-card, .stat-card, .glass {
  border-radius: 1.1rem;
}
/* Section rhythm: consistent vertical breathing room reads as premium */
section { position: relative; }

/* ── 17. Focus & selection polish ─────────────────────────────── */
:focus-visible { outline: 2px solid rgba(95,227,239,.9); outline-offset: 3px; }

/* ── 18. Links: understated underline that animates ───────────── */
.prose a, .footer a, a.text-link {
  text-decoration: none; background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size .3s var(--ease-out);
}
@media (hover:hover){ .prose a:hover, .footer a:hover, a.text-link:hover { background-size: 100% 1px; } }

/* ── 19. Numerals lock to a grid everywhere ───────────────────── */
.stat-value, .plan-price, .badge, td, th, [class*="price"], [class*="stat"] {
  font-variant-numeric: tabular-nums; font-feature-settings:"tnum" 1,"cv01" 1;
}

/* ── 20. Dashboard nav: refined active/hover feel ─────────────── */
.nav-item { transition: background .2s var(--ease-out), color .2s var(--ease-out), padding-left .2s var(--ease-out); }
@media (hover:hover){ .nav-item:hover { padding-left: 0.95rem; } }

/* ── 21. Reduced-motion respect (premium = accessible) ────────── */
@media (prefers-reduced-motion: reduce){
  .btn-primary::after, .cta-fill::after { display:none; }
}