/* FixOffer shared look: the same warm off-white + orange identity, refined.
   Loaded after each page's own <style>, so these rules polish what's there. */
:root {
  --accent: #E8551E; --accent-hover: #D64A15; --accent-dark: #B83E10;
  --accent-soft: #FDEEE6; --accent-tint: #FFF8F5; --accent-ring: rgba(232, 85, 30, .18);
  --ink: #1C1B1A; --muted: #6B6560; --faint: #A9A29A;
  --line: #E9E4DD; --line-strong: #D8D2C9; --bg: #FAF8F5; --soft: #F4F1EC;
  --ok: #1F7A5C; --ok-bg: #E4F3EC; --warn-bg: #FDEEE6;
  --shadow-sm: 0 1px 2px rgba(28, 27, 26, .05);
  --shadow: 0 1px 2px rgba(28, 27, 26, .04), 0 8px 24px -12px rgba(28, 27, 26, .14);
  --ease: cubic-bezier(.2, .7, .2, 1);
}
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2 { letter-spacing: -0.02em; }

.card, .panel, .perk, .req { border-color: var(--line); box-shadow: var(--shadow-sm); }
.req { transition: border-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease); }
.req:hover { border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-1px); }

.btn { transition: background-color .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease), transform .08s var(--ease); }
.btn:active:not(:disabled) { transform: translateY(1px) scale(.99); }
.btn.primary { box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 6px 16px -8px rgba(232, 85, 30, .6); }
.btn.primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn.ghost:hover:not(:disabled), .btn.secondary:hover:not(:disabled) { border-color: var(--ink); }

.in { transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.in:hover { border-color: var(--line-strong); }
.in:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); }

/* Selected choices: a soft tint instead of a solid orange block. */
.pill, .toggle, .chipbtn, .tab { transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease); }
.pill:hover, .toggle:hover { border-color: var(--line-strong); }
.pill.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-dark); font-weight: 600; }
.toggle.on { background: var(--accent-tint); border-color: var(--accent); }

.badge { letter-spacing: .04em; align-self: flex-start; }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-dark); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }