/* =====================================================================
   Features & Packages pages (plan agreed 5 October 2026)
   /features/            one full-screen section per category (text one side, live sample the other)
   /features/<category>/ one full-screen section per item, with a tier filter
   /features/feature.html?slug=…  an item's own page
   /packages/            five project types, four tiers each
   Colours come only from the site theme, so the palette picker and Night mode apply everywhere.
   ===================================================================== */

/* ---------- page openers ---------- */
.fx-hero { padding: clamp(3.5rem, 9vh, 6rem) 0 1.6rem; }
.fx-hero h1 { margin: .5rem 0 .7rem; font-size: clamp(2.6rem, 6vw, 4.8rem); line-height: 1.02; }
.fx-hero h1 em { font-style: italic; color: var(--primary); }
.fx-hero p { max-width: 58ch; margin: 0; font-size: 1.15rem; color: var(--ink-muted); }
.fx-crumbs { margin-bottom: .9rem; }
.fx-crumbs a { color: inherit; }

/* ---------- jump bar (Features page) and tier filter (category pages): stay under the header ---------- */
.fx-bar {
  position: sticky; top: 76px; z-index: 30; display: flex; gap: .45rem; overflow-x: auto; scrollbar-width: none;
  margin: 1.4rem 0 0; padding: .6rem 0; border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 84%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.fx-bar::-webkit-scrollbar { display: none; }
.fx-bar { transition: top .45s var(--ease, ease); }
body:has(.masthead.is-hidden) .fx-bar { top: 10px; }   /* the header slides away on scroll: the bar moves up */
.fx-bar a, .fx-bar button {
  flex: none; padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
  font: 600 .78rem/1 var(--font-mono, ui-monospace, monospace); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-muted); text-decoration: none; cursor: pointer; transition: background .2s, color .2s, border-color .2s;
}
.fx-bar a:hover, .fx-bar button:hover { color: var(--ink); border-color: var(--primary); }
.fx-bar a[aria-current="true"], .fx-bar button[aria-pressed="true"] { color: #fff; background: var(--primary); border-color: var(--primary); }
.fx-bar button span { margin-left: .35rem; opacity: .7; }

/* ---------- full-screen sections ---------- */
.fx-sec {
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr); align-items: center; gap: clamp(2rem, 5vw, 5rem);
  min-height: calc(100svh - 140px); padding: clamp(3rem, 7vh, 5rem) 0; border-top: 1px solid var(--border);
  scroll-margin-top: 130px;
}
.fx-sec:first-child { border-top: 0; }
.fx-sec--flip .fx-sec__text { order: 2; }
.fx-sec[hidden] { display: none; }
.fx-sec__title { margin: .55rem 0 .6rem; font-size: clamp(2.3rem, 4.6vw, 3.8rem); line-height: 1.05; }
.fx-sec__title .fx-ico { margin-right: .35rem; font-size: .8em; }
.fx-sec__line { max-width: 40ch; margin: 0 0 1.1rem; font-size: 1.22rem; line-height: 1.5; color: var(--ink-muted); }
.fx-sec__inside { max-width: 46ch; margin: 0 0 1rem; line-height: 1.75; color: var(--ink); }
.fx-sec__inside span { color: var(--ink-faint); }
.fx-sec__meta { margin: 0 0 1.4rem; font: 600 .78rem/1.4 var(--font-mono, ui-monospace, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.fx-sec__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.2rem; }
.fx-sec__also { margin: 1rem 0 0; font-size: .92rem; }
/* "Add to estimate" as the main button (the shared .est-add style would make it a small white chip) */
.btn--primary.est-add:not(.is-added) { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--primary), var(--primary-deep)); }
.fx-incl { margin: 0 0 1.5rem; padding: 0; list-style: none; display: grid; gap: .45rem; }
.fx-incl li { display: flex; gap: .55rem; color: var(--ink); }
.fx-incl li::before { content: "✓"; color: var(--accent); font-weight: 700; }

/* ---------- tier chips ---------- */
.fx-tier {
  display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 999px;
  font: 700 .72rem/1 var(--font-mono, ui-monospace, monospace); letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-muted); background: var(--surface-sunk); border: 1px solid var(--border);
}
.fx-tier--premium { color: var(--primary-deep); background: var(--primary-tint); border-color: transparent; }
.fx-tier--luxury { color: #fff; background: linear-gradient(135deg, var(--gold), color-mix(in srgb, var(--gold) 60%, var(--ink))); border-color: transparent; }
.fx-tier--ultra { color: #fff; background: linear-gradient(135deg, var(--primary), var(--accent)); border-color: transparent; }
.fx-count { margin-left: .5rem; font: 600 .74rem/1 var(--font-mono, ui-monospace, monospace); letter-spacing: .06em; text-transform: uppercase; color: var(--primary); }

/* ---------- the visual side ---------- */
.fx-visual {
  position: relative; display: flex; flex-direction: column; min-height: min(64vh, 580px); overflow: hidden;
  border-radius: 26px; border: 1px solid var(--border);
  background: radial-gradient(120% 90% at 20% 10%, var(--primary-tint), transparent 60%), var(--surface-sunk);
  box-shadow: 0 40px 80px -60px color-mix(in srgb, var(--ink) 55%, transparent);
}
.fx-stage { flex: 1; display: grid; place-items: center; min-height: 0; padding: clamp(1.4rem, 3vw, 2.4rem); }
.fx-stage.demo-stage { padding: clamp(1.4rem, 3vw, 2.4rem); }
.fx-stage .bg3d { max-width: 100%; }
.fx-tabs { display: flex; flex-wrap: wrap; gap: .4rem; padding: .8rem; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 80%, transparent); }
.fx-tabs button {
  padding: .45rem .85rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); cursor: pointer;
  font: 600 .8rem/1 inherit; color: var(--ink-muted); transition: background .2s, color .2s;
}
.fx-tabs button[aria-selected="true"] { color: #fff; background: var(--primary); border-color: var(--primary); }
.fx-visual--picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fx-visual--picture .is-dark { display: none; }
[data-mode="dark"] .fx-visual--picture .is-dark { display: block; }
[data-mode="dark"] .fx-visual--picture.has-dark .is-light { display: none; }
.fx-play {
  position: absolute; left: 50%; bottom: 1.2rem; z-index: 2; transform: translateX(-50%);
  padding: .7rem 1.2rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--surface) 60%, transparent); cursor: pointer;
  font-weight: 700; color: var(--ink); background: color-mix(in srgb, var(--surface) 75%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 12px 30px -16px color-mix(in srgb, var(--ink) 60%, transparent);
}
.fx-play:hover { color: var(--primary-deep); }
.fx-soon, .fx-try { margin: auto; padding: 2rem; max-width: 36ch; }
.fx-soon__icon, .fx-try__icon { display: block; margin-bottom: .8rem; font-size: 4rem; line-height: 1; }
.fx-soon h3 { margin: .3rem 0 .8rem; font-size: 1.05rem; }
.fx-soon .fx-incl { margin-bottom: 1.2rem; }
.fx-soon__chip { display: inline-block; padding: .35rem .8rem; border-radius: 999px; font-size: .78rem; font-weight: 700; color: var(--primary-deep); background: var(--primary-tint); }
.fx-try p { margin: 0; font-size: 1.1rem; line-height: 1.55; color: var(--ink); }

/* ---------- item page ---------- */
.fx-detail-head { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: .6rem; }
.fx-detail-visual { margin: 1rem 0 2.6rem; }
.fx-detail-visual .fx-visual { min-height: 420px; }
.fx-related { margin: 0 0 1.2rem; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: .6rem; }
.fx-related a { display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); text-decoration: none; }
.fx-related a:hover { border-color: var(--primary); }
.fx-related b { margin-left: auto; font-weight: 600; color: var(--ink-muted); white-space: nowrap; }

/* ---------- packages ---------- */
/* project-type buttons: big, themed cards (Packages page only) */
.fx-bar.pk-types {
  position: static; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .9rem;
  overflow: visible; margin: 1.8rem 0 0; padding: 0; border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.fx-bar.pk-types button {
  display: grid; justify-items: start; gap: .3rem; padding: 1.1rem 1.2rem; border-radius: 20px; text-align: left;
  font: inherit; letter-spacing: 0; text-transform: none; color: var(--ink); background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 14px 30px -24px color-mix(in srgb, var(--ink) 50%, transparent);
  transition: transform .25s, box-shadow .25s, background .25s, color .25s, border-color .25s;
}
.fx-bar.pk-types button span { margin: 0; opacity: 1; }
.fx-bar.pk-types button:hover { transform: translateY(-3px); border-color: var(--primary); }
.fx-bar.pk-types button[aria-pressed="true"] {
  color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--primary), var(--primary-deep));
  box-shadow: 0 22px 40px -22px color-mix(in srgb, var(--primary) 70%, transparent);
}
.pk-type__icon { font-size: 1.9rem; line-height: 1; }
.pk-type__name { font-family: var(--font-display, Georgia, serif); font-size: 1.3rem; font-weight: 600; }
.pk-type__from { font-size: .84rem; color: var(--ink-faint); }
.fx-bar.pk-types button[aria-pressed="true"] .pk-type__from { color: rgba(255, 255, 255, .82); }
@media (max-width: 900px) { .fx-bar.pk-types { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .fx-bar.pk-types { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pk-intro { margin: 2.2rem 0 1.4rem; }
.pk-intro h2 { margin: 0 0 .3rem; font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
.pk-intro p { margin: 0; color: var(--ink-muted); }
.pk-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
.pk-col { position: relative; display: flex; flex-direction: column; padding: 1.5rem 1.3rem; border-radius: 22px; border: 1px solid var(--border); background: var(--surface); }
.pk-col--best { border: 2px solid var(--primary); box-shadow: 0 30px 60px -40px color-mix(in srgb, var(--primary) 70%, transparent); }
.pk-col > .fx-tier, .pk-care__col > .fx-tier { align-self: flex-start; }
.pk-best { position: absolute; top: -.8rem; left: 1.3rem; padding: .3rem .7rem; border-radius: 999px; font-size: .74rem; font-weight: 700; color: #fff; background: var(--primary); }
.pk-base { margin: .9rem 0 .2rem; font-weight: 600; color: var(--ink); }
.pk-price { margin: .6rem 0 0; font-family: var(--font-display, Georgia, serif); font-size: 2.3rem; line-height: 1; color: var(--ink); }
.pk-worth { margin: .45rem 0 1rem; font-size: .88rem; color: var(--ink-faint); }
.pk-worth s { margin-right: .4rem; }
.pk-save { display: inline-block; padding: .2rem .55rem; border-radius: 999px; font-weight: 700; color: var(--accent-deep); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.pk-list { flex: 1; margin: 0 0 1.3rem; padding: 0; list-style: none; display: grid; align-content: start; gap: .45rem; font-size: .92rem; }
.pk-list li { display: flex; gap: .5rem; }
.pk-list li::before { content: "✓"; color: var(--accent); font-weight: 700; }
.pk-list li.pk-list__all { font-weight: 700; color: var(--ink); }
.pk-list li.pk-list__all::before { content: "★"; color: var(--primary); }
.pk-list a { color: var(--ink); text-decoration: none; border-bottom: 1px dashed var(--border-strong); }
.pk-list a:hover { color: var(--primary-deep); }
.pk-col .btn { justify-content: center; }
.pk-care { margin: 4rem 0 1rem; }
.pk-care__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.pk-care__col { padding: 1.2rem; border-radius: 18px; border: 1px solid var(--border); background: var(--surface-sunk); }
.pk-care__price { margin: .5rem 0 .6rem; font-family: var(--font-display, Georgia, serif); font-size: 1.7rem; color: var(--ink); }
.pk-care__price small { font-size: .9rem; color: var(--ink-faint); }

/* ---------- tablets and phones ---------- */
@media (max-width: 1100px) { .pk-grid, .pk-care__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .fx-bar { top: 64px; }
  .fx-sec { grid-template-columns: 1fr; min-height: 0; gap: 1.6rem; padding: 3rem 0; }
  .fx-sec .fx-sec__text, .fx-sec--flip .fx-sec__text { order: 2; }
  .fx-visual { order: 1; min-height: 360px; }
}
@media (max-width: 600px) { .pk-grid, .pk-care__grid { grid-template-columns: 1fr; } .fx-visual { min-height: 320px; border-radius: 20px; } }