/* CORE: shared phone-width styles for every /features/<page>.html (all 8 languages).
   The pages are inline-styled, so rules match the inline declarations by attribute
   and use !important — the only way an external sheet can override style="". */
/* Fixed-size decorations (bullet dots, icon squares) that sit inside an inline-styled flex
   row must never shrink when the neighbouring text wraps — otherwise a 6px dot renders as
   a 2px sliver on phones. Matches "width:Npx;height:Npx…" children of flex/inline-flex rows. */
[style*="display:flex"] > [style^="width:"][style*="px;height:"],
[style*="display:inline-flex"] > [style^="width:"][style*="px;height:"] { flex-shrink: 0 !important; }

/* Readability on every width: the pages were authored at 9–11px text with 25–40% white on near-black, which is
   below WCAG contrast and hard to read on a laptop. Lift sizes and alpha here (the phone block below goes further). */
[style*="font-size:7px"]  { font-size: 10px !important; }
[style*="font-size:8px"]  { font-size: 10.5px !important; }
[style*="font-size:9px"]  { font-size: 11.5px !important; }
[style*="font-size:10px"] { font-size: 12.5px !important; }
[style*="font-size:11px"] { font-size: 13px !important; }
[style*="font-size:12px"] { font-size: 14px !important; }
[style*="color:rgba(255,255,255,0.15)"] { color: rgba(255,255,255,0.42) !important; }
[style*="color:rgba(255,255,255,0.2)"]  { color: rgba(255,255,255,0.5) !important; }
[style*="color:rgba(255,255,255,0.25)"] { color: rgba(255,255,255,0.56) !important; }
[style*="color:rgba(255,255,255,0.3)"]  { color: rgba(255,255,255,0.6) !important; }
[style*="color:rgba(255,255,255,0.35)"] { color: rgba(255,255,255,0.64) !important; }
[style*="color:rgba(255,255,255,0.4)"]  { color: rgba(255,255,255,0.68) !important; }
[style*="color:rgba(255,255,255,0.45)"] { color: rgba(255,255,255,0.7) !important; }
/* section labels were 50% of their accent colour */
[style*="letter-spacing:2px;color:rgba(104,83,219,0.5)"] { color: #9d8ff5 !important; }
[style*="letter-spacing:2px;color:rgba(16,185,129,0.5)"] { color: #34d399 !important; }
[style*="letter-spacing:2px;color:rgba(245,158,11,0.5)"] { color: #fbbf24 !important; }
[style*="letter-spacing:2px;color:rgba(251,146,60,0.5)"] { color: #fb923c !important; }
[style*="letter-spacing:2px;color:rgba(34,197,94,0.5)"]  { color: #4ade80 !important; }
[style*="letter-spacing:2px;color:rgba(59,130,246,0.5)"] { color: #60a5fa !important; }
[style*="letter-spacing:2px;color:rgba(6,182,212,0.5)"]  { color: #22d3ee !important; }

/* Top bar: back to the index · language · CTA. Replaces the lone «← All features» link. */
.feat-nav { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: -16px -4px 24px; }
.feat-nav-r { display: flex; align-items: center; gap: 8px; }
.feat-back { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 7px 10px; border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px; font-size: 13px; color: rgba(255,255,255,0.7); text-decoration: none; }
.feat-back:hover { color: #c4b5fd; border-color: rgba(104,83,219,0.4); }
.feat-cta { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600;
  color: #fff; text-decoration: none; background: linear-gradient(135deg, #6853db, #8b5cf6); box-shadow: 0 6px 20px rgba(104,83,219,0.35); white-space: nowrap; }
.feat-cta:hover { filter: brightness(1.1); }
.lang-wrap { position: relative; display: inline-flex; }
.lang-btn { display: flex; align-items: center; gap: 5px; padding: 7px 10px; border: 1px solid rgba(255,255,255,0.12); border-radius: 8px;
  background: #111122; color: #fff; font: 500 12px -apple-system, BlinkMacSystemFont, 'Inter', sans-serif; cursor: pointer; }
.lang-arr { font-size: 8px; opacity: 0.6; }
.lang-drop { display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 200; min-width: 160px; padding: 4px;
  background: #111122; border: 1px solid rgba(255,255,255,0.15); border-radius: 10px; box-shadow: 0 16px 48px rgba(0,0,0,0.8); }
.lang-drop.open { display: block; }
.lang-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 6px; font-size: 13px; color: rgba(255,255,255,0.65);
  text-decoration: none; white-space: nowrap; }
.lang-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
.lang-item.active { background: rgba(104,83,219,0.15); color: #a78bfa; font-weight: 700; }

/* Previous / next feature at the bottom of the page */
.feat-back, .lang-btn, .feat-cta { box-sizing: border-box; height: 34px; padding-top: 0 !important; padding-bottom: 0 !important; line-height: 1; }

.feat-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.feat-pn a { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px;
  text-decoration: none; color: #fff; font-size: 14px; font-weight: 600; background: rgba(255,255,255,0.02); }
.feat-pn a span { font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.5); }
.feat-pn a.next { text-align: right; }
.feat-pn a:hover { border-color: rgba(104,83,219,0.4); }

/* Phone: CTA stays reachable at the bottom of the screen */
.feat-sticky { display: none; }

@media (max-width: 700px) {
  body { padding: 12px 8px 84px !important; }
  .feat-nav { margin: -12px 0 18px; }
  .feat-nav .feat-cta { display: none; }
  .feat-sticky { display: flex; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 50;
    align-items: center; justify-content: center; padding: 14px; border-radius: 12px; font-size: 15px; font-weight: 700; color: #fff;
    text-decoration: none; background: linear-gradient(135deg, #6853db, #8b5cf6); box-shadow: 0 10px 30px rgba(0,0,0,0.6); }
  .feat-pn { grid-template-columns: 1fr; }
  body > div { padding: 28px 16px !important; border-radius: 16px !important; }
  div[style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  div[style*="grid-template-columns:repeat(3,1fr)"],
  div[style*="grid-template-columns:repeat(2,1fr)"],
  div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
  [style*="font-size:7px"]  { font-size: 11px !important; }
  [style*="font-size:8px"]  { font-size: 12px !important; }
  [style*="font-size:9px"]  { font-size: 12px !important; }
  [style*="font-size:10px"] { font-size: 13px !important; }
  [style*="font-size:11px"] { font-size: 13px !important; }
  [style*="font-size:12px"] { font-size: 14px !important; }
  [style*="font-size:13px"] { font-size: 15px !important; }
  [style*="font-size:26px"] { font-size: 22px !important; }
  [style*="font-size:28px"] { font-size: 24px !important; }
  [style*="font-size:42px"] { font-size: 30px !important; }
}