/* ============================================================
   RAGING AXE — NATIVE APP PAGE SKIN
   ------------------------------------------------------------
   The custom-frontend native routes /services/[slug] (service /
   experience / membership detail) and the native /blog index render
   APP markup that reuses the tenant's bucket CSS for its look. Those
   pages were authored against the Unity bucket's token names
   (--f-display, --blood, --paper-white, --concrete-*) and the app
   re-asserts a few font/color rules with !important using those exact
   names. We bridge those names to RA's --ra-* palette (scoped to the
   page roots so nothing leaks into the rest of the site) and style the
   structure in RA's gritty electric-green idiom — sharp edges, green
   hairlines, green glow, Anton impact display.

   Loaded via account-chrome.html (the chrome injected on native pages).
   ============================================================ */

/* --- Token bridge: Unity-flavored names → RA palette (scoped) --- */
.xp-wrap, .blog-root{
  --f-display: var(--ra-display);   /* Anton */
  --f-mono:    var(--ra-mono);      /* JetBrains Mono */
  --f-body:    var(--ra-body);      /* Inter */
  --blood:        var(--ra-green);          /* electric-green accent */
  --paper-white:  var(--ra-text);           /* #F4F6F4 */
  --concrete-900: var(--ra-base);           /* #0A0B0A canvas */
  --concrete-800: var(--ra-surface-1);      /* #121413 */
  --concrete-700: var(--ra-surface-2);      /* #1A1D1B */
  --concrete-600: var(--ra-green-line);     /* rgba(34,224,106,.30) green hairline */
  --concrete-500: rgba(34,224,106,0.55);    /* brighter green on hover */
  --nav-h: 72px;
}

/* === Experience / service DETAIL page (.xp-*) ==================== */
.xp-wrap{ max-width:1180px; margin:0 auto; padding:calc(var(--nav-h,72px) + 56px) var(--gutter,24px) 96px; color:var(--ra-text); }
.xp-crumb{ font-family:var(--ra-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ra-muted); display:flex; gap:10px; flex-wrap:wrap; }
.xp-crumb a{ color:inherit; text-decoration:none; }
.xp-crumb a:hover{ color:var(--ra-green); }
.xp-hero{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,72px); align-items:end; margin-top:28px; padding-bottom:clamp(42px,6vw,72px); border-bottom:1px solid var(--ra-line-strong); }
@media (max-width:880px){ .xp-hero{ grid-template-columns:1fr; } }
.xp-hero h1{ font-family:var(--ra-display); font-weight:400; font-size:clamp(48px,7vw,96px); line-height:.9; letter-spacing:var(--ls-mega,-0.02em); text-transform:uppercase; margin:0 0 18px; }
.xp-lead{ font-size:17px; line-height:1.6; color:var(--ra-muted); max-width:560px; }
.xp-specs{ display:flex; gap:0; margin-top:30px; border:1px solid var(--ra-line-strong); border-radius:var(--r-2,6px); overflow:hidden; max-width:560px; background:var(--ra-surface-1); }
.xp-spec{ flex:1; padding:16px 20px; border-right:1px solid var(--ra-line); }
.xp-spec:last-child{ border-right:0; }
.xp-spec .k{ display:block; font-family:var(--ra-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ra-green); margin-bottom:6px; }
.xp-spec .v{ font-family:var(--ra-display); font-size:24px; text-transform:uppercase; }
.xp-media{ aspect-ratio:4/3; background:var(--ra-surface-2) center/cover no-repeat; border:1px solid var(--ra-line-strong); border-radius:var(--r-3,12px); box-shadow:var(--shadow-3); }
.xp-ctas{ display:flex; align-items:center; gap:22px; margin-top:34px; flex-wrap:wrap; }
/* CTA mirrors RA's .btn--green: green gradient pill, dark text, green glow. */
.xp-book{ display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:18px 32px; background:var(--ra-grad-green); color:var(--ra-base); font-family:var(--ra-mono); font-weight:600; font-size:12px; letter-spacing:.18em; text-transform:uppercase; text-decoration:none; cursor:pointer; border:0; border-radius:var(--r-pill,999px); box-shadow:var(--glow-green); transition:transform var(--dur-fast,120ms) var(--ease), box-shadow var(--dur-base,180ms) var(--ease); }
.xp-book:hover{ transform:translateY(-2px); box-shadow:var(--glow-green-lg); }
/* Win the app's `.xp-wrap .xp-book{ color:var(--paper-white)!important }` so
   the green CTA keeps dark, legible text (doubled class → higher specificity). */
.xp-wrap .xp-book.xp-book{ color:var(--ra-base) !important; }
.xp-book .dot{ width:8px; height:8px; border-radius:999px; background:var(--ra-base); }
.xp-layout{ display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:clamp(34px,5vw,70px); align-items:stretch; margin-top:clamp(48px,6vw,72px); }
@media (max-width:980px){ .xp-layout{ grid-template-columns:1fr; } }
.xp-main{ min-width:0; }
.xp-sec{ margin-bottom:clamp(54px,7vw,86px); max-width:760px; }
.xp-sec h2{ font-family:var(--ra-display); font-weight:400; font-size:clamp(34px,5vw,64px); line-height:.96; letter-spacing:var(--ls-display,-0.01em); text-transform:uppercase; margin:0 0 20px; }
.xp-sec .accent{ color:var(--ra-green); }
.xp-eyebrow{ font-family:var(--ra-mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--ra-green); display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.xp-eyebrow::before{ content:""; width:24px; height:2px; background:var(--ra-green); }
.xp-desc{ font-size:16px; line-height:1.8; color:var(--ra-muted); }
.xp-desc h3{ font-family:var(--ra-display); font-weight:400; font-size:clamp(22px,2.6vw,30px); line-height:1.05; text-transform:uppercase; letter-spacing:.01em; color:var(--ra-text); margin:36px 0 14px; }
.xp-desc h3:first-child{ margin-top:0; }
.xp-desc h4{ font-family:var(--ra-mono); font-weight:600; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--ra-green); margin:28px 0 10px; }
.xp-desc p{ margin:0 0 16px; }
.xp-desc p:last-child{ margin-bottom:0; }
.xp-desc strong{ color:var(--ra-text); font-weight:600; }
.xp-desc ul{ margin:0 0 16px; padding:0; list-style:none; display:grid; gap:8px; }
.xp-desc li{ position:relative; padding-left:22px; }
.xp-desc li::before{ content:""; position:absolute; left:0; top:9px; width:9px; height:6px; border-left:2px solid var(--ra-green); border-bottom:2px solid var(--ra-green); transform:rotate(-45deg); }
.xp-cards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
@media (max-width:680px){ .xp-cards{ grid-template-columns:1fr; } }
.xp-info-card{ display:flex; gap:14px; min-height:124px; padding:24px; border:1px solid var(--ra-line); border-radius:var(--r-2,6px); background:var(--ra-surface-1); transition:border-color var(--dur-base,180ms) var(--ease), transform var(--dur-base,180ms) var(--ease); }
.xp-info-card:hover{ border-color:var(--ra-green-line); transform:translateY(-2px); }
.xp-info-card::before{ content:""; width:12px; height:8px; margin-top:7px; flex:none; border-left:2px solid var(--ra-green); border-bottom:2px solid var(--ra-green); transform:rotate(-45deg); }
.xp-info-card h4{ margin:0 0 8px; font-family:var(--ra-display); font-weight:400; font-size:18px; line-height:1.2; text-transform:uppercase; }
.xp-info-card p{ margin:0; color:var(--ra-muted); font-size:14px; line-height:1.6; }
.xp-bullets{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 26px; }
@media (max-width:680px){ .xp-bullets{ grid-template-columns:1fr; } }
.xp-bullet{ display:flex; align-items:flex-start; gap:13px; min-width:0; padding:6px 0; color:var(--ra-muted); font-size:15px; line-height:1.55; }
.xp-bullet::before{ content:""; width:10px; height:7px; margin-top:8px; flex:none; border-left:2px solid var(--ra-green); border-bottom:2px solid var(--ra-green); transform:rotate(-45deg); }
.xp-bullet p{ margin:0; color:inherit; }
.xp-gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.xp-gallery__item{ aspect-ratio:1; border:1px solid var(--ra-line); border-radius:var(--r-2,6px); background:var(--ra-surface-2) center/cover no-repeat; }
.xp-gallery__item:first-child{ grid-column:span 2; grid-row:span 2; aspect-ratio:auto; }
@media (max-width:680px){ .xp-gallery{ grid-template-columns:repeat(2,1fr); } .xp-gallery__item:first-child{ grid-column:span 2; } }

/* sticky booking / price card */
.xp-booking{ position:sticky; top:calc(var(--nav-h,72px) + 22px); border:1px solid var(--ra-green-line); border-radius:var(--r-3,12px); background:var(--ra-surface-1); padding:30px; box-shadow:var(--glow-green), var(--shadow-3); }
@media (max-width:980px){ .xp-booking{ position:static; } }
.xp-booking__price{ font-family:var(--ra-display); font-size:clamp(44px,5vw,64px); line-height:.9; margin:14px 0 20px; text-transform:uppercase; }
.xp-booking__price small{ font-family:var(--ra-mono); font-size:11px; letter-spacing:.16em; color:var(--ra-muted); }
.xp-booking__specs{ display:grid; margin:0 0 24px; }
.xp-booking__spec{ display:flex; justify-content:space-between; gap:18px; padding:13px 0; border-bottom:1px solid var(--ra-line); }
.xp-booking__spec .k{ font-family:var(--ra-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ra-green); }
.xp-booking__spec .v{ text-align:right; font-size:14px; font-weight:600; }
.xp-booking .xp-book{ width:100%; }
.xp-fine{ margin:14px auto 0; max-width:30ch; text-align:center; font-family:var(--ra-mono); font-size:10px; letter-spacing:.12em; color:var(--ra-faint); line-height:1.55; }

/* --- Service-pack extras (.svc-*) the app injects inside .xp-wrap --- */
/* The billing-toggle active pill + step-number badge are green fills; the app
   forces light text on them, so re-assert dark text at higher specificity. */
.xp-wrap .svc-toggle{ border-radius:var(--r-2,6px); }
.xp-wrap .svc-toggle button.is-active{ background:var(--ra-grad-green); color:var(--ra-base); border-radius:var(--r-1,3px); }
.xp-wrap .svc-card{ border-radius:var(--r-2,6px); overflow:hidden; }
.xp-wrap .svc-card:hover{ border-color:var(--ra-green-line); }
.xp-wrap .svc-steps li{ border-radius:var(--r-2,6px); }
.xp-wrap .svc-steps .n{ background:var(--ra-grad-green); color:var(--ra-base); border-radius:var(--r-1,3px); }
.xp-wrap .svc-pack-chip{ border-radius:var(--r-pill,999px); }

/* === Native /blog — RA GRITTY SKIN (scoped to .blog-root) ======== */
.blog-root{ color:var(--ra-text); }
.blog-root .blog-link{ font-family:var(--ra-mono); text-transform:uppercase; letter-spacing:.16em; color:var(--ra-green); text-decoration:none; }
.blog-root .blog-link:hover{ color:var(--ra-green-bright); }
.blog-root .blog-post-title{ font-family:var(--ra-display); font-weight:400; text-transform:uppercase; letter-spacing:var(--ls-mega,-0.02em); color:var(--ra-text); line-height:.92; }
.blog-root .blog-body{ font-family:var(--ra-body); font-weight:400; color:var(--ra-muted); }

/* search */
.blog-root .blog-search{ background:var(--ra-surface-2); border:1px solid var(--ra-line-strong); border-radius:var(--r-2,6px); color:var(--ra-text); font-family:var(--ra-mono); font-size:12px; letter-spacing:.04em; }
.blog-root .blog-search:focus{ border-color:var(--ra-green-line); outline:none; }
.blog-root .blog-search::placeholder{ color:var(--ra-faint); text-transform:uppercase; letter-spacing:.14em; font-size:11px; }
.blog-root .blog-search-icon{ color:var(--ra-green); }

/* filter chips */
.blog-root .blog-filter{ font-family:var(--ra-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; padding:8px 14px; border:1px solid var(--ra-line-strong); border-radius:var(--r-pill,999px); color:var(--ra-muted); background:transparent; transition:color var(--dur-base,180ms) var(--ease), border-color var(--dur-base,180ms) var(--ease); }
.blog-root .blog-filter:hover{ color:var(--ra-text); }
.blog-root .blog-filter.active{ color:var(--ra-green); border-color:var(--ra-green); }

/* card */
.blog-root .blog-card{ border:1px solid var(--ra-line); border-radius:var(--r-2,6px); overflow:hidden; background:var(--ra-surface-1); box-shadow:none; transition:border-color var(--dur-base,180ms) var(--ease), transform var(--dur-base,180ms) var(--ease), box-shadow var(--dur-base,180ms) var(--ease); }
.blog-root .blog-card:hover{ border-color:var(--ra-green-line); transform:translateY(-3px); box-shadow:var(--glow-green); }
.blog-root .bc-media{ border-bottom:1px solid var(--ra-line); background:var(--ra-base); }
.blog-root .bc-media img{ transition:transform .7s var(--ease); }
.blog-root .blog-card:hover .bc-media img{ transform:scale(1.05); }
.blog-root .bc-media-empty{ color:var(--ra-faint); }

/* category tag (top-left) + Featured stamp (top-right) */
.blog-root .b-tag{ font-family:var(--ra-mono); font-size:9px; letter-spacing:.24em; text-transform:uppercase; padding:5px 10px; border:1px solid var(--ra-line-strong); border-radius:var(--r-1,3px); background:rgba(10,11,10,.7); color:var(--ra-text); }
.blog-root .b-feat{ font-family:var(--ra-mono); font-size:9px; letter-spacing:.24em; text-transform:uppercase; padding:5px 10px; border-radius:var(--r-1,3px); color:var(--ra-base); background:var(--ra-grad-green); border:0; }

/* body */
.blog-root .bc-body{ padding:22px 22px 24px; }
.blog-root .bc-eyebrow, .blog-root .blog-meta-text{ font-family:var(--ra-mono); font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:var(--ra-green); }
.blog-root .bc-title{ font-family:var(--ra-display); font-weight:400; font-size:clamp(20px,2vw,26px); line-height:1; text-transform:uppercase; letter-spacing:var(--ls-display,-0.01em); color:var(--ra-text); margin:0 0 10px; }
.blog-root .bc-excerpt{ font-family:var(--ra-body); font-weight:400; font-size:13.5px; line-height:1.55; color:var(--ra-muted); margin:0; }
.blog-root .bc-foot{ border-top:1px solid var(--ra-line); margin-top:20px; padding-top:18px; }
.blog-root .bc-meta{ color:var(--ra-faint); }
.blog-root .bc-read{ font-family:var(--ra-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ra-green); transition:letter-spacing var(--dur-base,180ms) var(--ease); }
.blog-root .blog-card:hover .bc-read{ letter-spacing:.32em; }

/* empty state */
.blog-root .blog-empty{ border:1px solid var(--ra-line-strong); border-radius:var(--r-2,6px); background:var(--ra-surface-1); }