/* =============================================================================
   Lebanese Websites — design system & storefront styles
   Single shared stylesheet for the main pages (index, 404*, account, terms,
   privacy). *404 additionally inlines its own copy of the essentials.
   Dark-only monochrome theme: true black surfaces, white accent, platinum
   pricing, glass cards, aurora hero, spotlight + tilt micro-interactions.
   Token names are kept from the earlier mint era so nothing downstream
   breaks; every value is now strictly black / white / gray.
   ========================================================================== */

/* ---------- Design tokens ------------------------------------------------- */
:root {
  color-scheme: dark;

  /* Palette — dark only, monochrome */
  --bg:            #0A0A0A;   /* page background: near black */
  --surface:       #131313;   /* cards */
  --tint:          #0E0E0E;   /* alternate section background */
  --sand:          #131313;   /* raised panels */
  --ink:           #F4F4F4;   /* primary text */
  --ink-2:         #B9B9B9;   /* secondary text */
  --muted:         #8C8C8C;   /* meta / muted text */
  --cedar:         #34C88C;   /* primary accent — cedar green */
  --cedar-hi:      #4FDDA2;   /* brighter green for hovers */
  --cedar-ink:     #74E2B4;   /* accent text / links on dark */
  --cedar-tint:    rgba(52, 200, 140, 0.10);  /* green wash */
  --cedar-line:    rgba(52, 200, 140, 0.38);  /* green hairline */
  --gold:          #E8B84B;   /* prices — warm gold */
  --red:           #F0686A;   /* errors — real red */
  --ok:            #34C88C;   /* success — available / live */
  --price-grad:    linear-gradient(120deg, #F7E1A0 0%, #E8B84B 45%, #C8952F 100%);  /* gold price sheen */
  /* Per-tier metallic price sheens: Starter = silver, Standard = gold, Pro = diamond */
  --price-silver:  linear-gradient(120deg, #FBFBFD 0%, #D3D7DE 42%, #A2A8B4 70%, #E7E9ED 100%);
  --price-gold:    linear-gradient(120deg, #F7E1A0 0%, #E8B84B 45%, #C8952F 100%);
  --price-diamond: linear-gradient(120deg, #FFFFFF 0%, #C6EEF7 34%, #8FD8EC 62%, #E6FBFF 100%);
  --footer:        #060606;   /* footer background */
  --footer-accent: #FFFFFF;   /* accent on the footer */

  /* Lines */
  --line:   rgba(255, 255, 255, 0.07);
  --line-2: rgba(255, 255, 255, 0.13);

  /* Type */
  --f-head: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Radii */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;
  --pill: 999px;

  /* Shadows */
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.35);
  --shadow-card: 0 16px 40px -18px rgba(0, 0, 0, 0.65), 0 4px 12px -6px rgba(0, 0, 0, 0.4);
  --shadow-lg:   0 40px 90px -30px rgba(0, 0, 0, 0.8), 0 16px 34px -18px rgba(0, 0, 0, 0.55);
  --glow:        0 10px 34px -10px rgba(52, 200, 140, 0.32);

  /* Glass card fill */
  --glass: linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.012) 100%);

  /* Layout */
  --container: 1160px;
  --gutter: clamp(1.15rem, 4vw, 2rem);
  --nav-h: 66px;
}

/* ---------- Reset -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

/* The hidden attribute must always win, even over component display rules */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 14px);
  -webkit-text-size-adjust: 100%;
  scrollbar-color: #2C2C2C var(--bg);
}

body {
  font-family: var(--f-body);
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden; /* belt-and-suspenders against accidental h-scroll */
}

/* Ambient depth: two soft glows pinned to the viewport */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(55% 42% at 14% -6%, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0) 62%),
    radial-gradient(46% 38% at 88% 4%, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 60%);
}

/* Film-grain texture over everything, barely there */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}

img, svg, video { display: block; max-width: 100%; }
svg { height: auto; }

a { color: var(--cedar-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }

h1, h2, h3, h4 {
  font-family: var(--f-head);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}

button { font-family: inherit; }

::selection { background: #F2F2F2; color: #0A0A0A; }

/* Scrollbar (WebKit) */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: #2A2A2A;
  border-radius: 8px;
  border: 3px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: #3A3A3A; }

/* Focus — visible, high-contrast, consistent */
:focus-visible {
  outline: 3px solid var(--cedar);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Skip link ---------------------------------------------------- */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 300;
  background: var(--cedar);
  color: #0A0A0A;
  padding: 0.7rem 1.1rem;
  border-radius: var(--r-sm);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.18s ease;
}
.skip-link:focus-visible { top: 12px; }

/* Skip-link target is a non-interactive landmark — don't ring the whole page */
#main:focus,
#main:focus-visible { outline: none; }

/* ---------- Loading splash ------------------------------------------------ */
/* Hidden by default and only shown when JS is present (the head sets `.js`
   before paint). This guarantees the overlay can never trap a no-JS visitor —
   the page underneath stays fully usable if the script never runs. */
.site-splash { display: none; }
.js .site-splash {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  background:
    radial-gradient(60% 45% at 50% 40%, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 70%),
    var(--bg);
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
.site-splash.is-done { opacity: 0; visibility: hidden; }
.splash-inner { display: grid; justify-items: center; gap: 1.1rem; padding: 1.5rem; }
.splash-brand {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: clamp(1.35rem, 1.1rem + 2vw, 2rem);
  letter-spacing: -0.02em;
  color: var(--ink);
  opacity: 0;
  transform: translateY(10px);
  animation: splash-rise 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.05s forwards;
}
.splash-track {
  width: 128px;
  height: 3px;
  border-radius: var(--pill);
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.splash-fill {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: var(--pill);
  background: linear-gradient(90deg, #E6E6E6, #FFFFFF);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
  animation: splash-slide 1.05s ease-in-out infinite;
}
@keyframes splash-rise { to { opacity: 1; transform: none; } }
@keyframes splash-slide {
  0%   { transform: translateX(-115%); }
  100% { transform: translateX(355%); }
}

/* ---------- Layout helpers ---------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: clamp(3.25rem, 1.8rem + 6vw, 6.5rem);
}
.section--tint {
  background: var(--tint);
  border-block: 1px solid var(--line);
}
.section--sand { background: var(--sand); }

.section-head {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}
.section-head .section-lead { margin-top: 0.9rem; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--f-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cedar-ink);
  margin-bottom: 0.7rem;
}
.eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cedar);
  box-shadow: 0 0 10px rgba(52, 200, 140, 0.65);
  flex: none;
}

h1 { font-size: clamp(2.2rem, 1.35rem + 3.9vw, 3.8rem); }
h2 { font-size: clamp(1.85rem, 1.3rem + 2.4vw, 2.7rem); }
h3 { font-size: clamp(1.15rem, 1.02rem + 0.6vw, 1.4rem); }

/* Soft gradient sheen on big headings */
.section-head h2,
.hero h1 {
  background: linear-gradient(180deg, #FFFFFF 0%, #B4B4B4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-lead {
  font-size: clamp(1.05rem, 1rem + 0.5vw, 1.25rem);
  color: var(--ink-2);
  line-height: 1.55;
}

/* ---------- Buttons ------------------------------------------------------ */
.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 44px;
  padding: 0.72rem 1.35rem;
  border: 1.5px solid transparent;
  border-radius: var(--pill);
  font-family: var(--f-body);
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.18s ease, background-color 0.18s ease,
              border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease,
              filter 0.18s ease;
}
.btn:active { transform: translateY(1px) scale(0.99); }

.btn-primary {
  background: linear-gradient(180deg, #43D89E 0%, #2BAE7C 100%);
  border-color: transparent;
  color: #06140E;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 8px 26px -12px rgba(52, 200, 140, 0.45);
}
.btn-primary:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), var(--glow);
}
/* Sheen sweep across the primary button on hover (dark sheen on a white button) */
.btn-primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 55%;
  height: 100%;
  background: linear-gradient(105deg, transparent 0%, rgba(0, 0, 0, 0.10) 50%, transparent 100%);
  transform: skewX(-18deg);
  transition: left 0.5s ease;
  pointer-events: none;
}
.btn-primary:hover::before { left: 130%; }

.btn-ghost {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--line-2);
  color: var(--ink);
}
.btn-ghost:hover {
  border-color: var(--cedar-line);
  color: var(--cedar-ink);
  background: var(--cedar-tint);
  transform: translateY(-1px);
}

.btn-sm { min-height: 40px; padding: 0.5rem 1rem; font-size: 0.92rem; }
.btn-lg { min-height: 52px; padding: 0.95rem 1.7rem; font-size: 1.05rem; }
.btn-block { width: 100%; }

/* ---------- Cards -------------------------------------------------------- */
.card {
  background: var(--glass), var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
}

/* ---------- Reveal-on-scroll (progressive: only hides when JS is present) - */
.js .reveal {
  opacity: 0;
  transform: translateY(22px) scale(0.985);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal[data-delay="1"] { transition-delay: 0.09s; }
.js .reveal[data-delay="2"] { transition-delay: 0.18s; }
.js .reveal[data-delay="3"] { transition-delay: 0.27s; }

/* Touch devices can't hover, so the desktop spotlight/tilt never fire. Give
   cards a tactile press state instead, so the page still feels alive under a
   finger (the owner's "mobile felt boring" note). */
@media (hover: none) {
  .service-card:active,
  .demo-card:active,
  .tier-card:active {
    transform: translateY(-2px) scale(0.995);
    border-color: var(--cedar-line);
    transition: transform 0.12s ease, border-color 0.12s ease;
  }
}

/* =============================================================================
   Header / navigation
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(9, 9, 9, 0.6);
  backdrop-filter: saturate(1.5) blur(16px);
  -webkit-backdrop-filter: saturate(1.5) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}
.site-header.is-scrolled {
  border-bottom-color: var(--line);
  background: rgba(9, 9, 9, 0.85);
  box-shadow: 0 12px 32px -20px rgba(0, 0, 0, 0.9);
}

.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  min-height: var(--nav-h);
}
/* Pin each item to its own column so the right-hand actions stay hard-right
   even when the centre nav is hidden on mobile. */
.header-inner .brand { grid-column: 1; justify-self: start; }
.primary-nav { grid-column: 2; justify-self: center; }
.header-actions { grid-column: 3; justify-self: end; }

.brand {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: 1.16rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.brand-accent {
  background: linear-gradient(120deg, #FFFFFF 0%, #8F8F8F 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.primary-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(0.4rem, 1.6vw, 1.4rem);
  list-style: none;
  padding: 0;
}
.primary-nav a {
  position: relative;
  display: inline-block;
  padding: 0.5rem 0.35rem;
  color: var(--ink-2);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.16s ease;
}
.primary-nav a::after {
  content: "";
  position: absolute;
  left: 0.35rem;
  right: 0.35rem;
  bottom: 0.15rem;
  height: 2px;
  background: #FFFFFF;
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.55);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.primary-nav a:hover,
.primary-nav a[aria-current="true"] { color: var(--ink); }
.primary-nav a:hover::after,
.primary-nav a[aria-current="true"]::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: 0.6rem; }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  place-items: center;
}
.nav-toggle-bars { position: relative; display: block; width: 20px; height: 14px; }
.nav-toggle-bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.22s ease, opacity 0.18s ease, top 0.22s ease;
}
.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 6px; }
.nav-toggle-bars span:nth-child(3) { top: 12px; }

/* ---------- Mobile drawer ------------------------------------------------ */
.nav-drawer { display: none; }

@media (max-width: 768px) {
  .primary-nav,
  .header-actions .js-login { display: none; }
  .nav-toggle { display: grid; }

  .nav-drawer {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 100;
    visibility: hidden;
  }
  .nav-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.68);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.24s ease;
  }
  .nav-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: min(86vw, 340px);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1.1rem 1.15rem calc(1.15rem + env(safe-area-inset-bottom));
    background: linear-gradient(200deg, #151515 0%, #0C0C0C 100%);
    border-left: 1px solid var(--line);
    box-shadow: -30px 0 60px -20px rgba(0, 0, 0, 0.85);
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
    overflow-y: auto;
  }
  .nav-drawer.is-open { visibility: visible; }
  .nav-drawer.is-open .nav-drawer-backdrop { opacity: 1; }
  .nav-drawer.is-open .nav-drawer-panel { transform: translateX(0); }

  .nav-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.6rem;
    margin-bottom: 0.4rem;
    border-bottom: 1px solid var(--line);
  }
  .nav-close {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, 0.03);
    color: var(--ink);
    cursor: pointer;
  }
  .nav-drawer nav ul { list-style: none; padding: 0; }
  .nav-drawer nav a {
    display: block;
    padding: 0.85rem 0.5rem;
    border-radius: var(--r-sm);
    color: var(--ink);
    font-family: var(--f-head);
    font-weight: 600;
    font-size: 1.1rem;
    text-decoration: none;
    transition: background-color 0.16s ease, color 0.16s ease, padding-left 0.16s ease;
  }
  .nav-drawer nav a:hover {
    background: var(--cedar-tint);
    color: var(--cedar-ink);
    padding-left: 0.8rem;
  }
  .nav-drawer .js-login { margin-top: 0.6rem; }
}

body.nav-open { overflow: hidden; }

/* =============================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 1.5rem + 5vw, 5.5rem) clamp(2.5rem, 1.5rem + 4vw, 5rem);
  /* Faint dot grid that fades out downward. The fade is a background layer
     sitting OVER the dots but UNDER the content, so it never dims the copy
     or the CTA buttons (an element mask would have faded those too). */
  background-image:
    linear-gradient(180deg, transparent 0%, transparent 40%, var(--bg) 100%),
    radial-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1.4px);
  background-size: 100% 100%, 28px 28px;
}
/* Aurora blobs drifting slowly behind the content */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 46rem;
  height: 46rem;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}
.hero::before {
  top: -24rem;
  left: -14rem;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.09), transparent 70%);
  animation: aurora-a 16s ease-in-out infinite alternate;
}
.hero::after {
  top: -20rem;
  right: -16rem;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.06), transparent 70%);
  animation: aurora-b 20s ease-in-out infinite alternate;
}
@keyframes aurora-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(9rem, 5rem, 0) scale(1.15); }
}
@keyframes aurora-b {
  from { transform: translate3d(0, 0, 0) scale(1.1); }
  to   { transform: translate3d(-8rem, 6rem, 0) scale(0.95); }
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 1rem + 5vw, 3.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .hero-inner { grid-template-columns: 1.05fr minmax(0, 0.95fr); }
}

.hero-copy { max-width: 40rem; }
.hero h1 { margin-bottom: 1.1rem; }
.hero-price {
  background: var(--price-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-sub {
  font-size: clamp(1.08rem, 1rem + 0.6vw, 1.3rem);
  color: var(--ink-2);
  max-width: 34rem;
  line-height: 1.55;
}
.hero-sub .nowrap { white-space: nowrap; color: #FFFFFF; font-weight: 600; }
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.8rem;
}
/* On small phones the two CTAs stack and go full width for easy tapping */
@media (max-width: 480px) {
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
}

/* Staggered entrance for the hero copy (JS pages only) */
.js .hero-copy > * {
  opacity: 0;
  transform: translateY(16px);
  animation: hero-rise 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.js .hero-copy > *:nth-child(1) { animation-delay: 0.05s; }
.js .hero-copy > *:nth-child(2) { animation-delay: 0.15s; }
.js .hero-copy > *:nth-child(3) { animation-delay: 0.28s; }
.js .hero-copy > *:nth-child(4) { animation-delay: 0.4s; }
@keyframes hero-rise { to { opacity: 1; transform: none; } }

/* Browser mockup */
.hero-visual { position: relative; display: flex; justify-content: center; min-width: 0; }
/* Glow bed under the mock */
.hero-visual::before {
  content: "";
  position: absolute;
  inset: 8% -6% -4% -6%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.09), transparent 72%);
  filter: blur(30px);
  pointer-events: none;
}
/* Wrapper that hugs the mock so the "reopen" overlay lines up with the card
   even when the hero column is wider than the mock. */
.mock-frame { position: relative; width: 100%; max-width: 530px; }

.browser-mock {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 530px;                 /* +15% over the previous 460px */
  background: linear-gradient(180deg, #171717 0%, #101010 100%);
  border: 1px solid var(--line-2);
  border-radius: 15px;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
  overflow: hidden;
  transform-origin: center top;
  transform:
    perspective(1000px)
    rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.18s ease-out, box-shadow 0.35s ease;
  will-change: transform;

  /* Theme of the *rendered client site* inside the frame. The storefront
     chrome stays monochrome; only this preview carries colour, and
     js/hero-preview.js swaps these custom properties in time with the slug
     being typed above, so each brand "renders" its own little site. Sensible
     warm default for the first paint and for reduced-motion. */
  --mock-bg: #17130C;
  --mock-ink: #F5EDDD;
  --mock-ink-soft: rgba(255, 255, 255, 0.5);
  --mock-accent: #EDAF49;
  --mock-accent-2: #FFD98C;
  --mock-accent-soft: rgba(237, 175, 73, 0.18);
  --mock-surface: rgba(255, 255, 255, 0.06);
  --mock-line: rgba(255, 255, 255, 0.12);
}

.browser-bar {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.62rem 0.7rem 0.62rem 0.85rem;
  background: rgba(255, 255, 255, 0.035);
  border-bottom: 1px solid var(--line);
}
.url-bar {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  padding: 0.42rem 0.68rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--line);
  border-radius: var(--pill);
  font-size: 0.86rem;
  color: var(--muted);
  overflow: hidden;
  white-space: nowrap;
}
.url-bar .lock { flex: none; color: var(--cedar); }
.url-text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.url-slug { color: var(--cedar-ink); font-weight: 600; }
.caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  background: var(--cedar);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
  margin-left: 1px;
  animation: caret-blink 1.05s steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }

/* Windows-style caption buttons: minimise, maximise, close. Purely decorative
   window dressing (pointer-events off) so they read as a real window chrome. */
.win-controls { display: flex; align-items: center; gap: 3px; flex: none; margin-left: 0.2rem; pointer-events: none; }
.win-btn {
  width: 22px; height: 20px;
  display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 5px;
  background: transparent;
  color: rgba(255, 255, 255, 0.42);
}
.win-btn svg { display: block; width: 9px; height: 9px; }
.win-btn.win-close { color: rgba(255, 255, 255, 0.52); }

/* ---------------------------------------------------------------------------
   The rendered mini client site. Everything inside .mini is sized in `em`,
   and .mini's font-size is tied to the mock's own width (container query
   units, with a viewport fallback) so the whole layout scales as one unit at
   every resolution. Every colour is a --mock-* token, swapped per brand. */
.browser-body {
  position: relative;
  background: var(--mock-bg);
  container-type: inline-size;
  transition: background-color 0.5s ease;
}

/* Loading bar: sweeps across the top of the frame the moment a brand name is
   "entered" in the address bar, right before the new mini site renders. Purely
   the finishing touch on the search-then-load feel; driven by js/hero-preview.js. */
.mock-load {
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(90deg, var(--mock-accent), var(--mock-accent-2));
  box-shadow: 0 0 8px var(--mock-accent-soft);
}
.browser-body.is-loading .mock-load { animation: mock-load 0.43s ease-out forwards; }
@keyframes mock-load {
  0%   { width: 0;    opacity: 1; }
  72%  { width: 82%;  opacity: 1; }
  100% { width: 100%; opacity: 0; }
}
.browser-stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1.85;   /* landscape browser proportion (was 40/27, ~20% shorter) */
  min-height: 0;
  transition: opacity 0.4s ease;
}
/* On phones the frame is narrow, so the landscape ratio squeezes each mini
   site into a short strip. Give it ~15% more height (taller ratio) below the
   point where the mock stops shrinking, so the content breathes. */
@media (max-width: 560px) {
  .browser-stage { aspect-ratio: 1.6; }
}
.mini {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9em;
  padding: 1.15em 1.2em;
  overflow: hidden;
  font-size: clamp(8px, 2.2vw, 12.5px);   /* fallback */
  font-size: clamp(8px, 2.45cqw, 12.5px); /* scales with the mock width */
  color: var(--mock-ink);
  transition: opacity 0.26s ease, transform 0.26s ease;
}
.mini.is-navigating { opacity: 0.5; }
.mini.is-swapping { opacity: 0; transform: translateY(0.5em) scale(0.985); }
.mini > * { flex: none; }

/* Swap-in polish: the blocks of a freshly painted mini site rise softly into
   place top to bottom, like sections streaming in on a real page load. Fires
   on DOM insertion (no JS timers), compositor-friendly (transform/opacity
   only), and neutralised in the reduced-motion block at the end of the sheet. */
@keyframes mp-rise {
  from { opacity: 0; transform: translateY(0.45em); }
}
.mini > * { animation: mp-rise 0.4s ease backwards; }
.mini > :nth-child(2) { animation-delay: 70ms; }
.mini > :nth-child(3) { animation-delay: 140ms; }
.mini > :nth-child(4) { animation-delay: 210ms; }

/* ---- Primitives shared by every block ---- */
.mp-line { display: block; height: 0.62em; border-radius: 0.34em; background: var(--mock-ink); width: 100%; }
.mp-line.soft  { background: var(--mock-ink-soft); }
.mp-line.faint { background: var(--mock-ink-soft); opacity: 0.55; }
.mp-line.accent{ background: var(--mock-accent); }
.mp-line.title { height: 1.05em; border-radius: 0.4em; }
.mp-line.big   { height: 1.5em;  border-radius: 0.45em; }
.mp-line.thin  { height: 0.42em; }
.mp-btn {
  height: 1.7em; width: 5.6em; border-radius: 999px; flex: none;
  background: linear-gradient(180deg, var(--mock-accent-2), var(--mock-accent));
  box-shadow: 0 0.5em 1.1em -0.55em var(--mock-accent), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.mp-btn.sm { height: 1.35em; width: 4em; }
.mp-btn.ghost { background: transparent; border: 1px solid var(--mock-accent); box-shadow: none; }
.mp-btn.wide { width: 100%; }
/* "Photography" blocks: layered mesh gradient + a soft top sheen for depth. */
.mp-art {
  border-radius: 0.7em; flex: none;
  background:
    radial-gradient(72% 115% at 12% 6%, var(--mock-accent-2), transparent 46%),
    radial-gradient(85% 105% at 94% 98%, var(--mock-accent), transparent 55%),
    linear-gradient(140deg, var(--mock-accent) -12%, var(--mock-bg) 94%);
  box-shadow:
    inset 0 0 0 1px var(--mock-line),
    inset 0 1.4em 2.4em -1.4em rgba(255, 255, 255, 0.24);
}
.mp-chip {
  height: 1.35em; min-width: 2.6em; border-radius: 999px; flex: none;
  background: var(--mock-surface); border: 1px solid var(--mock-line);
}
.mp-chip.on { background: var(--mock-accent-soft); border-color: var(--mock-accent); }
.mp-avatar { width: 2.4em; height: 2.4em; border-radius: 50%; flex: none;
  background: radial-gradient(80% 80% at 30% 22%, var(--mock-accent-2), var(--mock-accent) 78%);
  box-shadow: inset 0 0 0 1px var(--mock-line), inset 0 0.35em 0.7em -0.3em rgba(255, 255, 255, 0.35); }
.mp-avatar.sm { width: 1.7em; height: 1.7em; }
.mp-dot { width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--mock-accent); flex: none; }
.mp-card {
  border-radius: 0.6em;
  background: linear-gradient(180deg, var(--mock-surface), transparent);
  border: 1px solid var(--mock-line); overflow: hidden;
  box-shadow: 0 0.5em 1em -0.7em rgba(0, 0, 0, 0.35);
}
.mp-card.on { background: var(--mock-accent-soft); border-color: var(--mock-accent); }

/* ---- Layout helpers ---- */
.mp-row { display: flex; align-items: center; gap: 0.6em; }
.mp-row.top { align-items: flex-start; }
.mp-row.between { justify-content: space-between; }
.mp-col { display: flex; flex-direction: column; gap: 0.5em; min-width: 0; }
.mp-grow { flex: 1 1 auto; min-width: 0; }
.mp-grid { display: grid; gap: 0.55em; }

/* ---- Fill: one block per design grows to fill the frame (no dead space) ----
   The renderer wraps the chosen block in .mp-fill; these rules make each
   growable block look intentional when it stretches to eat the slack. */
.mp-fill { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.mp-fill > * { flex: 1 1 auto; min-height: 0; }
.mp-fill > .mp-gal,
.mp-fill > .mp-masonry,
.mp-fill > .mp-cards,
.mp-fill > .mp-stats,
.mp-fill > .mp-pricing,
.mp-fill > .mp-team,
.mp-fill > .mp-slots { grid-auto-rows: 1fr; }
.mp-fill > .mp-menu,
.mp-fill > .mp-list { justify-content: space-between; }
.mp-fill > .mp-feed,
.mp-fill > .mp-steps,
.mp-fill > .mp-faq,
.mp-fill > .mp-form { justify-content: center; gap: 0.85em; }
.mp-fill > .mp-profile { justify-content: center; }
.mp-fill > .mp-count { align-items: center; justify-content: center; }
.mp-fill > .mp-quote { justify-content: space-between; }
.mp-fill > .mp-hero.stacked .mp-art,
.mp-fill > .mp-hero.center .mp-art { flex: 1 1 auto; min-height: 0; }
.mp-fill .mp-stat,
.mp-fill .mp-tier,
.mp-fill .mp-member { justify-content: center; }
.mp-fill .mp-cards .mp-card { justify-content: space-between; }
.mp-fill .mp-prod .mp-art { flex: 1 1 auto; min-height: 0; }

/* ---- Header ---- */
.mp-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; }
.mp-brand { display: flex; align-items: center; gap: 0.45em; flex: none; }
.mp-mark { width: 1.15em; height: 1.15em; border-radius: 0.32em; flex: none;
  background: linear-gradient(145deg, var(--mock-accent-2), var(--mock-accent));
  box-shadow: 0 0.2em 0.6em -0.2em var(--mock-accent), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.mp-mark.round { border-radius: 50%; }
.mp-word { width: 2.7em; height: 0.62em; border-radius: 0.3em; background: var(--mock-ink); opacity: 0.9; flex: none; }
.mp-navi { display: flex; gap: 0.5em; align-items: center; }
.mp-navi i { width: 1.6em; height: 0.42em; border-radius: 0.21em; background: var(--mock-ink-soft); opacity: 0.6; display: block; }
.mp-navcta { width: 2.6em; height: 1.25em; border-radius: 999px; background: var(--mock-accent-soft); border: 1px solid var(--mock-accent); flex: none; }

/* ---- Hero ---- */
.mp-hero { display: flex; gap: 0.85em; }
.mp-hero.center { flex-direction: column; align-items: center; text-align: center; }
.mp-hero.center .mp-htext { align-items: center; }
.mp-hero.stacked { flex-direction: column; }
.mp-hero .mp-htext { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.55em; justify-content: center; }
.mp-hero .mp-htext .mp-line.title { height: 1.3em; border-radius: 0.42em; }
.mp-hero.overlay .mp-htext .mp-line.title { height: 1.15em; }
.mp-hero .mp-htext .mp-btnrow { display: flex; gap: 0.5em; margin-top: 0.2em; }
.mp-hero .mp-art { width: 40%; align-self: stretch; min-height: 4.2em; }
.mp-hero.stacked .mp-art, .mp-hero.center .mp-art { width: 100%; min-height: 4.6em; }
.mp-hero.overlay { position: relative; }
.mp-hero.overlay .mp-art { width: 100%; min-height: 6.5em; }
.mp-hero.overlay .mp-htext { position: absolute; left: 0.9em; right: 0.9em; bottom: 0.8em; z-index: 1; }

/* ---- Cards / grids ---- */
.mp-cards { display: grid; gap: 0.55em; }
.mp-cards .mp-card { min-height: 3.1em; padding: 0.5em; display: flex; flex-direction: column; gap: 0.4em; }
.mp-cards .mp-card .mp-ic { width: 1.2em; height: 1.2em; border-radius: 0.3em; background: var(--mock-accent-soft); border: 1px solid var(--mock-accent); }
.mp-gal { display: grid; gap: 0.45em; }
.mp-gal .mp-art { min-height: 2.6em; border-radius: 0.5em; width: auto; }
.mp-gal .mp-art:nth-child(3n+2) { background: linear-gradient(150deg, var(--mock-accent-2), var(--mock-bg)); }
.mp-gal .mp-art:nth-child(3n) { background: linear-gradient(30deg, var(--mock-accent), var(--mock-surface)); }
.mp-masonry { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: 1.7em; gap: 0.45em; }
.mp-masonry .mp-art { width: auto; min-height: 0; border-radius: 0.5em; }
.mp-masonry .mp-art.t2 { grid-row: span 2; }

/* ---- Products / price rows ---- */
.mp-cards .mp-prod { padding: 0; gap: 0; }
.mp-prod .mp-art { width: auto; min-height: 2.6em; border-radius: 0.5em 0.5em 0 0; }
.mp-prod .mp-meta { padding: 0.4em 0.45em; display: flex; flex-direction: column; gap: 0.35em; }
.mp-price { color: var(--mock-accent); }
.mp-priceline { height: 0.6em; width: 2.4em; border-radius: 0.3em; background: var(--mock-accent); }

/* ---- Menu / list rows ---- */
.mp-menu { display: flex; flex-direction: column; gap: 0.55em; }
.mp-mrow { display: flex; align-items: center; gap: 0.6em; }
.mp-mrow .mp-line { flex: 0 1 auto; }
.mp-mrow .mp-priceline { flex: none; }
.mp-mrow.dots .mp-grow { border-bottom: 1px dashed var(--mock-line); height: 0.9em; }
.mp-list { display: flex; flex-direction: column; gap: 0.55em; }
.mp-li { display: flex; align-items: center; gap: 0.6em; }
.mp-li .mp-lead { width: 1.1em; height: 1.1em; border-radius: 0.3em; background: var(--mock-accent-soft); border: 1px solid var(--mock-accent); flex: none; }
.mp-li .mp-lead.round { border-radius: 50%; }

/* ---- Countdown ---- */
.mp-count { display: flex; gap: 0.55em; justify-content: center; }
.mp-count .mp-digit { flex: 1 1 0; max-width: 3.2em; aspect-ratio: 1 / 1; border-radius: 0.45em;
  background: var(--mock-surface); border: 1px solid var(--mock-line); display: grid; place-items: center; }
.mp-count .mp-digit::before { content: ""; width: 55%; height: 0.7em; border-radius: 0.3em; background: var(--mock-accent); }

/* ---- Profile / link-in-bio ---- */
.mp-profile { display: flex; flex-direction: column; align-items: center; gap: 0.6em; text-align: center; }
.mp-profile .mp-avatar { width: 3.2em; height: 3.2em; }
.mp-links { display: flex; flex-direction: column; gap: 0.5em; width: 100%; }
.mp-links .mp-link { height: 1.7em; border-radius: 999px; background: var(--mock-surface); border: 1px solid var(--mock-line); }
.mp-links .mp-link.on { background: var(--mock-accent-soft); border-color: var(--mock-accent); }

/* ---- Stats ---- */
.mp-stats { display: grid; gap: 0.55em; }
.mp-stat { padding: 0.55em; border-radius: 0.55em; background: var(--mock-surface); border: 1px solid var(--mock-line);
  display: flex; flex-direction: column; gap: 0.4em; }
.mp-stat .mp-big { height: 1.2em; width: 60%; border-radius: 0.3em; background: var(--mock-accent); }

/* ---- Booking / form ---- */
.mp-form { display: flex; flex-direction: column; gap: 0.55em; }
.mp-field { height: 1.7em; border-radius: 0.45em; background: var(--mock-surface); border: 1px solid var(--mock-line); }

/* ---- Testimonial / quote ---- */
.mp-quote { display: flex; flex-direction: column; gap: 0.55em; padding: 0.7em; border-radius: 0.6em;
  background: var(--mock-surface); border: 1px solid var(--mock-line); }
.mp-stars { display: flex; gap: 0.3em; }
.mp-stars i { width: 0.7em; height: 0.7em; border-radius: 0.15em; transform: rotate(45deg); background: var(--mock-accent); display: block; }

/* ---- Banner / CTA ---- */
.mp-banner { display: flex; align-items: center; justify-content: space-between; gap: 0.7em;
  padding: 0.7em 0.85em; border-radius: 0.6em; background: var(--mock-accent-soft); border: 1px solid var(--mock-accent); }
.mp-cta { display: flex; flex-direction: column; align-items: center; gap: 0.6em; text-align: center;
  padding: 0.9em; border-radius: 0.7em; background: var(--mock-surface); border: 1px solid var(--mock-line); }

/* ---- Map + hours ---- */
.mp-maphours { display: flex; gap: 0.6em; }
.mp-map { flex: 1 1 55%; min-height: 4em; border-radius: 0.6em; position: relative; overflow: hidden;
  background:
    linear-gradient(0deg, transparent 48%, var(--mock-line) 49%, var(--mock-line) 51%, transparent 52%),
    linear-gradient(90deg, transparent 48%, var(--mock-line) 49%, var(--mock-line) 51%, transparent 52%),
    var(--mock-surface);
  background-size: 1.4em 1.4em, 1.4em 1.4em, 100% 100%; border: 1px solid var(--mock-line); }
.mp-map .mp-pin { position: absolute; top: 38%; left: 46%; width: 0.8em; height: 0.8em; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); background: var(--mock-accent); box-shadow: 0 0 0.6em -0.1em var(--mock-accent); }
.mp-hourslist { flex: 1 1 45%; display: flex; flex-direction: column; gap: 0.45em; justify-content: center; }

/* ---- Chips row ---- */
.mp-chips { display: flex; flex-wrap: wrap; gap: 0.45em; }

/* ---- Bar chart ---- */
.mp-bars { display: flex; align-items: flex-end; gap: 0.4em; height: 4em; padding: 0.5em; border-radius: 0.6em;
  background: var(--mock-surface); border: 1px solid var(--mock-line); }
.mp-bars i { flex: 1 1 0; border-radius: 0.25em 0.25em 0 0; background: var(--mock-accent); opacity: 0.85; display: block; }
.mp-bars i:nth-child(even) { background: var(--mock-accent-2); }

/* ---- Feed ---- */
.mp-feed { display: flex; flex-direction: column; gap: 0.6em; }
.mp-post { display: flex; gap: 0.55em; align-items: flex-start; }

/* ---- Steps / timeline ---- */
.mp-steps { display: flex; flex-direction: column; gap: 0.6em; }
.mp-step { display: flex; gap: 0.6em; align-items: center; }
.mp-step .mp-num { width: 1.4em; height: 1.4em; border-radius: 50%; flex: none;
  background: var(--mock-accent-soft); border: 1px solid var(--mock-accent); }

/* ---- Big art ---- */
.mp-bigart { min-height: 6.5em; border-radius: 0.7em; position: relative; }
.mp-bigart .mp-cap { position: absolute; left: 0.9em; bottom: 0.8em; right: 0.9em; display: flex; flex-direction: column; gap: 0.4em; }

/* ---- Pricing ---- */
.mp-pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5em; }
.mp-tier { padding: 0.55em 0.5em; border-radius: 0.55em; background: var(--mock-surface); border: 1px solid var(--mock-line);
  display: flex; flex-direction: column; gap: 0.45em; align-items: center; }
.mp-tier.on { background: var(--mock-accent-soft); border-color: var(--mock-accent); }
.mp-tier .mp-amt { height: 1em; width: 60%; border-radius: 0.3em; background: var(--mock-accent); }

/* ---- Slots / schedule ---- */
.mp-slots { display: grid; gap: 0.4em; }
.mp-slot { height: 1.6em; border-radius: 0.4em; background: var(--mock-surface); border: 1px solid var(--mock-line); }
.mp-slot.on { background: var(--mock-accent-soft); border-color: var(--mock-accent); }

/* ---- Lookbook ---- */
.mp-look { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5em; }
.mp-look .mp-art { width: auto; min-height: 5.5em; }
.mp-look .mp-art:nth-child(2) { background: linear-gradient(150deg, var(--mock-accent-2), var(--mock-bg)); }

/* ---- Resume / CV ---- */
.mp-resume { display: flex; gap: 0.7em; }
.mp-resume .mp-side { flex: 0 0 32%; display: flex; flex-direction: column; gap: 0.5em; }
.mp-resume .mp-side .mp-avatar { width: 100%; height: auto; aspect-ratio: 1; border-radius: 0.55em; }
.mp-resume .mp-main { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.5em; }

/* ---- FAQ ---- */
.mp-faq { display: flex; flex-direction: column; gap: 0.5em; }
.mp-qa { display: flex; align-items: center; justify-content: space-between; gap: 0.6em;
  padding: 0.5em 0.6em; border-radius: 0.5em; background: var(--mock-surface); border: 1px solid var(--mock-line); }
.mp-qa .mp-plus { width: 0.9em; height: 0.9em; border-radius: 0.2em; background: var(--mock-accent-soft); border: 1px solid var(--mock-accent); flex: none; }

/* ---- Footer ---- */
.mp-foot { display: flex; gap: 0.9em; padding-top: 0.6em; border-top: 1px solid var(--mock-line); }
.mp-foot .mp-fcol { display: flex; flex-direction: column; gap: 0.4em; flex: 1 1 0; }

/* ---- Tabs ---- */
.mp-tabs { display: flex; gap: 0.4em; }
.mp-tab { flex: 1 1 0; height: 1.5em; border-radius: 999px; background: var(--mock-surface); border: 1px solid var(--mock-line); }
.mp-tab.on { background: var(--mock-accent-soft); border-color: var(--mock-accent); }

/* ---- Ticket ---- */
.mp-ticket { display: flex; border-radius: 0.6em; overflow: hidden; border: 1px solid var(--mock-line); min-height: 4em; }
.mp-ticket .mp-stub { flex: 0 0 30%; background: var(--mock-accent-soft); border-right: 2px dashed var(--mock-line);
  display: flex; align-items: center; justify-content: center; }
.mp-ticket .mp-stub::before { content: ""; width: 60%; height: 60%; border-radius: 0.4em; background: var(--mock-accent); opacity: 0.6; }
.mp-ticket .mp-tbody { flex: 1 1 auto; padding: 0.6em; display: flex; flex-direction: column; gap: 0.45em; justify-content: center; background: var(--mock-surface); }

/* ---- Team grid ---- */
.mp-team { display: grid; gap: 0.55em; }
.mp-member { display: flex; flex-direction: column; align-items: center; gap: 0.4em; text-align: center;
  padding: 0.55em; border-radius: 0.55em; background: var(--mock-surface); border: 1px solid var(--mock-line); }

/* ---- Player (music / podcast) ---- */
.mp-player { display: flex; align-items: stretch; gap: 0.7em; padding: 0.7em; border-radius: 0.7em;
  background: var(--mock-surface); border: 1px solid var(--mock-line); }
.mp-player .mp-art { width: 4.4em; min-height: 4.4em; border-radius: 0.55em; }
.mp-player .mp-ptext { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.5em; justify-content: center; }
.mp-track { height: 0.45em; border-radius: 999px; background: var(--mock-line); overflow: hidden; }
.mp-track i { display: block; width: 42%; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--mock-accent), var(--mock-accent-2)); }
.mp-pctrl { display: flex; align-items: center; gap: 0.55em; }
.mp-pctrl span { width: 0.85em; height: 0.85em; border-radius: 50%; background: var(--mock-ink-soft); display: block; }
.mp-pctrl span.big { width: 1.35em; height: 1.35em; background: var(--mock-accent);
  box-shadow: 0 0.35em 0.9em -0.35em var(--mock-accent); }

/* ---- Logo strip ---- */
.mp-logos { display: flex; align-items: center; gap: 0.55em; }
.mp-logo { flex: 1 1 0; height: 1.7em; border-radius: 0.45em; background: var(--mock-surface);
  border: 1px solid var(--mock-line); display: grid; place-items: center; }
.mp-logo::before { content: ""; width: 45%; height: 0.5em; border-radius: 0.25em; background: var(--mock-ink-soft); opacity: 0.7; }

/* =============================================================================
   Trust bar
   ========================================================================== */
.trust-bar {
  background: var(--sand);
  border-block: 1px solid var(--line);
}
.trust-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.6rem clamp(1rem, 3vw, 2.2rem);
  list-style: none;
  padding-block: 0.95rem;
  margin: 0;
}
.trust-list li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
}
.trust-list .check { color: var(--cedar); flex: none; }

/* =============================================================================
   Generic section shells
   ========================================================================== */
.section-body { margin-top: clamp(1.75rem, 1rem + 2vw, 2.75rem); }

/* =============================================================================
   Demos — five clickable "browser screenshot" cards
   ========================================================================== */
.demos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  justify-content: center;
  gap: clamp(1rem, 0.6rem + 1.4vw, 1.5rem);
  list-style: none;
  padding: 0;
}
@media (min-width: 900px) {
  .demos-grid { grid-template-columns: repeat(3, 1fr); }
}
.demo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--glass), var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.22s ease, border-color 0.22s ease;
}
.demo-card:hover {
  transform: translateY(-5px);
  border-color: var(--cedar-line);
  box-shadow: 0 24px 50px -22px rgba(0, 0, 0, 0.85), 0 0 30px -12px rgba(52, 200, 140, 0.18);
}
/* Pointer-tracked spotlight (set via --mx / --my from main.js) */
.demo-card::after,
.service-card::after,
.tier-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.07), transparent 65%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.demo-card:hover::after,
.service-card:hover::after,
.tier-card:hover::after { opacity: 1; }

.demo-shot {
  display: block;
  border-bottom: 1px solid var(--line);
  background: #0E0E0E;
  overflow: hidden;
}
/* Thumbnails show their real client-site colour at all times; hover just
   nudges them a touch closer. */
.demo-shot svg {
  width: 100%;
  height: auto;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.demo-card:hover .demo-shot svg,
.demo-card:focus-within .demo-shot svg { transform: scale(1.03); }
.demo-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  padding: 1.1rem 1.25rem 1.25rem;
  flex: 1;
}
.demo-type {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.demo-body h3 { margin: 0.1rem 0 0; }
.demo-desc { color: var(--ink-2); font-size: 0.93rem; line-height: 1.5; margin: 0; }

/* Footer: tier pill on the left, real build price on the right. margin-top:auto
   pins it to the bottom of every card so the price rows line up in a neat row
   across the grid no matter how long each description runs. */
.demo-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  margin-top: auto;
  padding-top: 0.95rem;
  border-top: 1px solid var(--line);
}
.demo-tier {
  font-family: var(--f-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 0.33rem 0.72rem;
  border-radius: var(--pill);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-2);
}
.demo-price {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.demo-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
  min-height: 44px;
  font-weight: 700;
  color: var(--cedar-ink);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.16s ease, border-color 0.16s ease, gap 0.16s ease;
}
.demo-link:hover { color: var(--cedar-hi); border-bottom-color: var(--cedar); gap: 0.6rem; }
/* Stretch the single "view example" link to cover the whole card, so the entire
   card is one clickable button. The card's own ::after is the spotlight overlay
   (pointer-events: none), so this link ::after is what actually catches clicks. */
.demo-link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.demos-note {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
}

.section-anchor { scroll-margin-top: calc(var(--nav-h) + 14px); }

/* =============================================================================
   Footer
   ========================================================================== */
.site-footer {
  position: relative;
  background: var(--footer);
  color: rgba(255, 255, 255, 0.80);
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem) 1.5rem;
}
/* Gradient hairline along the footer's top edge */
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100%);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem clamp(1.5rem, 4vw, 3rem);
}
@media (min-width: 680px) {
  .footer-grid { grid-template-columns: 1.6fr 1fr 1.2fr; }
}
.site-footer .brand { color: #fff; font-size: 1.25rem; }
.site-footer .brand-accent {
  background: linear-gradient(120deg, #FFFFFF, #8F8F8F);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.footer-tagline {
  margin-top: 0.75rem;
  max-width: 30ch;
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.95rem;
}
.footer-col h3 {
  color: #fff;
  font-family: var(--f-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.footer-col ul { list-style: none; padding: 0; display: grid; gap: 0.6rem; }
.footer-col a {
  color: rgba(255, 255, 255, 0.70);
  text-decoration: none;
  transition: color 0.16s ease, padding-left 0.16s ease;
}
.footer-col a:hover { color: var(--cedar-ink); padding-left: 0.2rem; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: clamp(2rem, 1rem + 3vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
}
.footer-bottom .version { font-variant-numeric: tabular-nums; }

/* Focus ring stays visible on the dark footer */
.site-footer :focus-visible { outline-color: var(--cedar-hi); }

/* Footer on phones: stack and centre for a tidy, balanced column */
@media (max-width: 680px) {
  .footer-grid { justify-items: center; text-align: center; gap: 1.75rem; }
  .footer-tagline { margin-inline: auto; }
  .footer-col ul { justify-items: center; }
  .footer-bottom {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 0.7rem;
  }
}

/* =============================================================================
   Toasts
   ========================================================================== */
.toast-region {
  position: fixed;
  z-index: 200;
  left: 50%;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: min(92vw, 380px);
  pointer-events: none;
}
@media (min-width: 560px) {
  .toast-region { left: auto; right: 1.25rem; transform: none; }
}
.toast {
  pointer-events: auto;
  background: rgba(19, 19, 19, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--ink);
  padding: 0.9rem 1.05rem;
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--cedar);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-lg);
  font-size: 0.94rem;
  line-height: 1.45;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.24s ease, transform 0.24s ease;
}
.toast.show { opacity: 1; transform: none; }
.toast .toast-emoji { margin-right: 0.35rem; }

/* =============================================================================
   Service-worker update prompt (injected by main.js)
   ========================================================================== */
.sw-update {
  position: fixed;
  left: 50%;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(14px);
  z-index: 250;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 92vw;
  padding: 0.55rem 0.6rem 0.55rem 1.1rem;
  background: rgba(19, 19, 19, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line-2);
  border-radius: var(--pill);
  box-shadow: var(--shadow-lg);
  color: var(--ink);
  font-size: 0.92rem;
  opacity: 0;
  transition: opacity 0.24s ease, transform 0.24s ease;
}
.sw-update.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.sw-update-msg { font-weight: 500; }
.sw-update-reload {
  min-height: 40px;
  padding: 0.4rem 1.1rem;
  border: 0;
  border-radius: var(--pill);
  background: linear-gradient(180deg, #FFFFFF 0%, #DCDCDC 100%);
  color: #0A0A0A;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.16s ease;
}
.sw-update-reload:hover { filter: brightness(1.05); }
.sw-update-reload:disabled { opacity: 0.6; cursor: default; }
.sw-update-dismiss {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink-2);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease;
}
.sw-update-dismiss:hover { background: rgba(255, 255, 255, 0.12); color: var(--ink); }
/* On narrow phones the message takes its own line and the actions drop below,
   so the pill never overflows or clips a button. */
@media (max-width: 400px) {
  .sw-update {
    flex-wrap: wrap;
    justify-content: flex-end;
    border-radius: var(--r-lg);
    padding-left: 1rem;
  }
  .sw-update-msg { flex-basis: 100%; text-align: center; }
}

/* =============================================================================
   Utilities
   ========================================================================== */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* =============================================================================
   Services
   ========================================================================== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  justify-content: center;
  gap: clamp(1rem, 0.6rem + 1.4vw, 1.5rem);
  list-style: none;
  padding: 0;
}
@media (min-width: 900px) {
  .services-grid { grid-template-columns: repeat(3, 1fr); }
}
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  background: var(--glass), var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.22s ease, border-color 0.22s ease;
}
.service-card:hover {
  transform: translateY(-5px);
  border-color: var(--cedar-line);
  box-shadow: 0 24px 50px -22px rgba(0, 0, 0, 0.85), 0 0 30px -12px rgba(255, 255, 255, 0.14);
}
.service-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.03) 100%);
  border: 1px solid var(--line-2);
  color: #FFFFFF;
  margin-bottom: 0.2rem;
  box-shadow: 0 0 22px -10px rgba(255, 255, 255, 0.28) inset;
  transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}
.service-card:hover .service-icon {
  transform: translateY(-2px) scale(1.05);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 22px -6px rgba(255, 255, 255, 0.42) inset, 0 8px 22px -10px rgba(255, 255, 255, 0.32);
}
.service-icon svg { width: 30px; height: 30px; }
.service-card h3 { margin: 0; }
.service-card p { color: var(--ink-2); margin: 0; flex: 1; }
.chip {
  display: inline-flex;
  align-items: center;
  margin-top: 0.4rem;
  padding: 0.3rem 0.8rem;
  border-radius: var(--pill);
  background: var(--cedar-tint);
  border: 1px solid var(--cedar-line);
  color: var(--cedar-ink);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* =============================================================================
   How it works — numbered timeline
   ========================================================================== */
.timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 175px), 1fr));
  gap: clamp(1rem, 0.6rem + 1.5vw, 1.6rem);
  list-style: none;
  padding: 0;
  counter-reset: step;
}
.timeline-step {
  position: relative;
  background: var(--glass), var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  padding: 1.4rem 1.25rem 1.25rem;
}
.step-num {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(180deg, #FFFFFF, #D6D6D6);
  color: #0A0A0A;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 0.8rem;
  box-shadow: 0 6px 16px -6px rgba(255, 255, 255, 0.35);
}
.timeline-step h3 { margin-bottom: 0.35rem; }
.timeline-step p { color: var(--ink-2); margin: 0; font-size: 0.97rem; }

/* =============================================================================
   Pricing tiers
   ========================================================================== */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 0.6rem + 1.5vw, 1.5rem);
  align-items: stretch;
}
@media (min-width: 900px) {
  .pricing-grid { grid-template-columns: repeat(3, 1fr); }
}
.tier-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--glass), var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.22s ease, border-color 0.22s ease;
}
.tier-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-2);
  box-shadow: 0 26px 54px -24px rgba(0, 0, 0, 0.9);
}
.tier-card--featured {
  /* Gradient border via the padding-box / border-box double background */
  border: 1.5px solid transparent;
  background:
    linear-gradient(180deg, #1A1A1A 0%, #121212 100%) padding-box,
    linear-gradient(160deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.22) 45%, rgba(255, 255, 255, 0.55) 100%) border-box;
  box-shadow: 0 30px 60px -26px rgba(0, 0, 0, 0.9), 0 0 44px -14px rgba(255, 255, 255, 0.16);
}
.tier-card--featured:hover {
  box-shadow: 0 34px 66px -26px rgba(0, 0, 0, 0.95), 0 0 54px -12px rgba(255, 255, 255, 0.22);
}
@media (min-width: 900px) {
  .tier-card--featured { transform: translateY(-10px); }
  .tier-card--featured:hover { transform: translateY(-14px); }
}
.tier-badge {
  position: absolute;
  top: -0.85rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.3rem 0.9rem;
  border-radius: var(--pill);
  background: linear-gradient(180deg, #FFFFFF, #D6D6D6);
  color: #0A0A0A;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 6px 18px -6px rgba(255, 255, 255, 0.4);
}
.tier-name {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.4rem;
}
.tier-price {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: clamp(2.6rem, 2rem + 2.4vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.02em;
  background: var(--price-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tier-monthly { color: var(--muted); font-size: 0.95rem; margin-top: 0.35rem; }
.tier-features {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0;
  display: grid;
  gap: 0.6rem;
  border-top: 1px solid var(--line);
  padding-top: 1.25rem;
}
.tier-features li {
  position: relative;
  padding-left: 1.75rem;
  color: var(--ink-2);
  font-size: 0.97rem;
}
.tier-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--cedar-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20 6 9 17l-5-5' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.8rem no-repeat;
  box-shadow: 0 0 0 1px var(--cedar-line) inset;
}
.tier-good {
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 1.25rem;
  margin-top: auto;
}

/* Per-tier metallic identity: Starter = silver, Standard = gold, Pro = diamond.
   Each tier's price number and its feature checks carry the matching sheen so
   the card reads as one material. Only the tint changes; the white checkmark
   glyph in the ::before stays put. */
/* Use background-image (not the `background` shorthand) so the base rule's
   background-clip:text stays intact and the number keeps showing through. */
.tier-card--silver  .tier-price { background-image: var(--price-silver); }
.tier-card--gold    .tier-price { background-image: var(--price-gold); }
.tier-card--diamond .tier-price { background-image: var(--price-diamond); }

.tier-card--silver .tier-features li::before {
  background-color: rgba(211, 215, 222, 0.15);
  box-shadow: 0 0 0 1px rgba(211, 215, 222, 0.45) inset;
}
.tier-card--gold .tier-features li::before {
  background-color: rgba(232, 184, 75, 0.15);
  box-shadow: 0 0 0 1px rgba(232, 184, 75, 0.5) inset;
}
.tier-card--diamond .tier-features li::before {
  background-color: rgba(143, 216, 236, 0.16);
  box-shadow: 0 0 0 1px rgba(143, 216, 236, 0.5) inset;
}

/* =============================================================================
   Extras table
   ========================================================================== */
.extras { margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.extras-title { margin-bottom: 0.4rem; }
.extras-sub { color: var(--ink-2); max-width: 60ch; margin-bottom: 1.25rem; }
.table-scroll { overflow-x: auto; }
.extras-table { width: 100%; border-collapse: collapse; }
.extras-table th,
.extras-table td {
  text-align: left;
  padding: 0.85rem 0.5rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.extras-table th[scope="row"] {
  font-weight: 600;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.extras-table .note {
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--muted);
}
.extras-table .amt {
  text-align: right;
  white-space: nowrap;
  font-weight: 700;
  color: var(--cedar-ink);
  font-variant-numeric: tabular-nums;
}
.extras-table .row-group th {
  padding-top: 1.25rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 2px solid var(--line-2);
}
.extras-lang {
  margin-top: 1rem;
  padding-top: 1rem;
  color: var(--ink-2);
  font-size: 0.92rem;
  max-width: 70ch;
}

/* =============================================================================
   Fine print panel
   ========================================================================== */
.fineprint {
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--cedar-tint);
  border: 1px solid var(--cedar-line);
}
.fineprint-title { margin-bottom: 1.25rem; }
.fineprint-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem 2rem;
}
@media (min-width: 720px) {
  .fineprint-grid { grid-template-columns: 1fr 1fr; }
}
.fineprint-item h4 {
  font-family: var(--f-head);
  font-size: 1.02rem;
  color: var(--cedar-ink);
  margin-bottom: 0.35rem;
}
.fineprint-item p { color: var(--ink-2); font-size: 0.95rem; margin: 0; }

/* =============================================================================
   FAQ accordion
   ========================================================================== */
.faq-list {
  max-width: 780px;
  margin-inline: auto;
  background: var(--glass), var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 0; }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.35rem;
  cursor: pointer;
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
  list-style: none;
  transition: color 0.16s ease, background-color 0.16s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--cedar-ink); background: rgba(255, 255, 255, 0.04); }
.faq-item summary::after {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.faq-item[open] summary::after { transform: rotate(180deg); }
.faq-item[open] summary { color: var(--cedar-ink); }
.faq-answer { padding: 0 1.35rem 1.25rem; }
.faq-item[open] .faq-answer { animation: faq-open 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); }
@keyframes faq-open {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.faq-answer p { color: var(--ink-2); margin: 0; }

/* =============================================================================
   Calculator (kept for the order flow + dev tests)
   ========================================================================== */
.calc {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 0.8rem + 1.5vw, 2rem);
  align-items: start;
}
@media (min-width: 960px) {
  .calc { grid-template-columns: 1.5fr 1fr; }
}

.calc-main { display: grid; gap: clamp(1rem, 0.6rem + 1.5vw, 1.75rem); }
.calc-step {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--glass), var(--surface);
  box-shadow: var(--shadow-card);
  padding: clamp(1.15rem, 0.9rem + 1vw, 1.6rem);
}
.calc-step legend {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 1.1rem;
  padding: 0;
  margin-bottom: 1rem;
}
.step-badge {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cedar);
  color: #0A0A0A;
  font-size: 0.9rem;
  font-weight: 700;
  flex: none;
}

/* Tier picker */
.tier-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
@media (max-width: 460px) { .tier-picker { grid-template-columns: 1fr; } }
.tier-opt { position: relative; display: block; cursor: pointer; }
.tier-opt input {
  position: absolute; opacity: 0; width: 1px; height: 1px;
}
.tier-opt-body {
  display: block;
  text-align: center;
  padding: 0.9rem 0.6rem;
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-sm);
  transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}
.tier-opt.is-selected .tier-opt-body {
  border-color: var(--cedar);
  background: var(--cedar-tint);
  box-shadow: inset 0 0 0 1px var(--cedar);
}
.tier-opt:focus-within .tier-opt-body { outline: 3px solid var(--cedar); outline-offset: 2px; }
.tier-opt-name { display: block; font-weight: 600; }
.tier-opt-price { display: block; font-family: var(--f-head); font-weight: 800; font-size: 1.4rem; color: var(--ink); margin-top: 0.15rem; }
.tier-opt-mo { display: block; font-size: 0.8rem; color: var(--muted); }

/* Slug field */
.slug-field {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0.5rem;
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 0.35rem 0.35rem 0.35rem 0.75rem;
  background: rgba(0, 0, 0, 0.25);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.slug-field:focus-within { border-color: var(--cedar); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.14); }
.slug-prefix { align-self: center; color: var(--muted); font-size: 0.92rem; white-space: nowrap; }
.slug-field input {
  flex: 1 1 8ch;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  color: var(--ink);
  padding: 0.4rem 0;
}
.slug-field .btn { flex: none; }
.slug-msg { margin-top: 0.5rem; font-size: 0.88rem; min-height: 1.2em; color: var(--muted); }
.slug-msg[data-state="ok"] { color: var(--cedar-ink); font-weight: 600; }
.slug-msg[data-state="err"] { color: var(--red); }

/* Add-on rows */
.calc-rows { display: grid; }
.calc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--line);
}
.calc-row:first-of-type { border-top: 0; }
.calc-row-info { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.calc-row-name { font-weight: 600; }
.calc-row-meta { font-size: 0.85rem; color: var(--muted); }
.calc-row-control { display: flex; align-items: center; gap: 0.6rem; flex: none; }
.calc-row.is-locked .calc-row-name { color: var(--muted); }
.calc-row.is-included .calc-row-name { color: var(--ink); }
.calc-row-flag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.7rem;
  border-radius: var(--pill);
  background: var(--cedar-tint);
  color: var(--cedar-ink);
  font-size: 0.8rem;
  font-weight: 700;
}
.calc-subhead {
  margin-top: 0.6rem;
  padding-top: 0.9rem;
  border-top: 2px solid var(--line-2);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Stepper */
.stepper {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  border: 1.5px solid var(--line-2);
  border-radius: var(--pill);
  padding: 0.15rem;
}
.step-btn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--cedar-tint);
  color: var(--cedar-ink);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.14s ease;
}
.step-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.16); }
.step-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.step-val { min-width: 2ch; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Toggle switch */
.switch { display: inline-flex; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track {
  position: relative;
  width: 46px;
  height: 27px;
  border-radius: var(--pill);
  background: #2E2E2E;
  transition: background-color 0.18s ease;
}
.switch-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease;
}
.switch input:checked + .switch-track { background: var(--cedar); }
.switch input:checked + .switch-track::after { transform: translateX(19px); background: #0A0A0A; }
.switch input:disabled + .switch-track { opacity: 0.55; }
.switch input:focus-visible + .switch-track { outline: 3px solid var(--cedar); outline-offset: 2px; }

/* Segmented control (Pro either/or) */
.segmented { display: inline-flex; border: 1.5px solid var(--line-2); border-radius: var(--pill); overflow: hidden; }
.segmented label {
  position: relative;
  padding: 0.4rem 0.9rem;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--ink-2);
}
.segmented label:first-child { border-right: 1.5px solid var(--line-2); }
.segmented input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segmented label:has(input:checked) { background: var(--cedar); color: #0A0A0A; }
.segmented label:focus-within { outline: 3px solid var(--cedar); outline-offset: 2px; }

/* Summary */
.calc-summary { align-self: start; }
@media (min-width: 960px) {
  .calc-summary { position: sticky; top: calc(var(--nav-h) + 16px); }
}
.summary-card {
  background: var(--glass), var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}
.summary-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.9rem;
}
.summary-items { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.5rem; }
.summary-item { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.95rem; color: var(--ink-2); }
.summary-item span:last-child { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

.summary-custom { padding: 0.5rem 0 1rem; }
.summary-custom-title { font-family: var(--f-head); font-weight: 800; font-size: 1.2rem; margin-bottom: 0.35rem; }
.summary-custom p { color: var(--ink-2); }

.summary-totals { border-top: 1px solid var(--line); padding-top: 1rem; }
.summary-line { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.summary-upfront span { color: var(--muted); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.summary-upfront strong {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: clamp(2rem, 1.6rem + 1.6vw, 2.6rem);
  line-height: 1;
  background: linear-gradient(120deg, #FFFFFF 0%, #E9E9E9 45%, #9C9C9C 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.summary-note { font-size: 0.82rem; color: var(--muted); margin: 0.2rem 0 0.9rem; }
.summary-monthly { margin-bottom: 0.4rem; }
.summary-monthly span { color: var(--muted); }
.summary-monthly strong { font-size: 1.1rem; color: var(--ink); }
.summary-onetime { border-top: 1px dashed var(--line-2); margin-top: 0.6rem; padding-top: 0.6rem; }
.summary-onetime-title { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.4rem; }
.summary-onetime ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; }
.summary-onetime li { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.9rem; color: var(--ink-2); }
.summary-onetime li span:last-child { font-weight: 600; color: var(--ink); }
.summary-delivery { font-size: 0.9rem; color: var(--ink-2); margin-top: 0.7rem; }
.summary-card .btn { margin-top: 1.1rem; }
.summary-fine { font-size: 0.8rem; color: var(--muted); margin-top: 0.6rem; text-align: center; }

/* =============================================================================
   Forms (fields are shared by the auth, order, and account modals)
   ========================================================================== */
.contact-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 0.8rem + 1.5vw, 2rem);
  align-items: start;
  max-width: 920px;
  margin-inline: auto;
}
@media (min-width: 780px) {
  .contact-wrap { grid-template-columns: 1.4fr 1fr; }
}
.contact-form { display: grid; gap: 1rem; }
.field { display: grid; gap: 0.4rem; }
.field label { font-weight: 600; font-size: 0.92rem; }
.field input,
.field textarea {
  width: 100%;
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, 0.25);
  padding: 0.7rem 0.85rem;
  font: inherit;
  color: var(--ink);
  resize: vertical;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}
.field input::placeholder,
.field textarea::placeholder { color: #6C6C6C; }
.field input:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-color: var(--cedar);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.35);
}
/* Keep autofilled fields dark (WebKit paints them light by default) */
.field input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #131313 inset;
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
}

/* Password field with show/hide (eye) toggle */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 3rem; }
.pw-toggle {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.pw-toggle:hover { color: var(--ink); background: rgba(255, 255, 255, 0.06); }
.pw-toggle:focus-visible { outline: 2px solid var(--cedar); outline-offset: 2px; color: var(--ink); }
.pw-toggle .ic-eye-off { display: none; }
.pw-toggle[aria-pressed="true"] .ic-eye { display: none; }
.pw-toggle[aria-pressed="true"] .ic-eye-off { display: inline; }

/* Global loading bar (thin top progress, shown during any async action) */
.load-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, #E6E6E6, #FFFFFF);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
  border-radius: 0 3px 3px 0;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: width 0.2s ease, opacity 0.35s ease;
}
.load-bar.is-active { opacity: 1; }
.load-bar.is-done { opacity: 0; }
.form-note { font-size: 0.85rem; color: var(--muted); }
.contact-aside {
  background: var(--cedar-tint);
  border: 1px solid var(--cedar-line);
  border-radius: var(--r);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}
.contact-aside h3 { margin-bottom: 0.5rem; }
.contact-aside p { color: var(--ink-2); font-size: 0.95rem; margin-bottom: 1rem; }
.contact-aside .btn { margin-bottom: 1rem; }
.contact-aside-note { font-size: 0.82rem; color: var(--muted); margin-bottom: 0; }

/* =============================================================================
   User menu, modals, auth, order flow, account, legal pages
   ========================================================================== */

/* ---------- Header account menu ---------- */
.user-menu { position: relative; }
.user-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 40px;
  padding: 0.3rem 0.6rem 0.3rem 0.4rem;
  border: 1.5px solid var(--line-2);
  border-radius: var(--pill);
  background: rgba(255, 255, 255, 0.03);
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.16s ease, background-color 0.16s ease;
}
.user-menu-btn:hover { border-color: var(--cedar-line); background: var(--cedar-tint); }
.user-avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(180deg, #FFFFFF, #D6D6D6);
  color: #0A0A0A;
  font-size: 0.85rem;
  font-weight: 700;
  flex: none;
}
.user-name { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chev { color: var(--muted); flex: none; }
.user-menu-drop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 190px;
  background: #161616;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-lg);
  padding: 0.35rem;
  display: grid;
  gap: 0.1rem;
  z-index: 70;
  animation: drop-in 0.16s ease;
}
@keyframes drop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.user-menu-drop a,
.user-menu-drop button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.6rem 0.7rem;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  font: inherit;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}
.user-menu-drop a:hover,
.user-menu-drop button:hover { background: var(--cedar-tint); color: var(--cedar-ink); }

.drawer-user { display: grid; gap: 0.5rem; margin-top: 0.6rem; }

@media (max-width: 768px) {
  /* the account menu lives in the drawer on mobile, not the header row */
  .header-actions .js-user-menu { display: none; }
}

/* ---------- Footer legal links ---------- */
.footer-legal { display: flex; gap: 1.1rem; }
.footer-legal a { color: rgba(255, 255, 255, 0.55); text-decoration: none; }
.footer-legal a:hover { color: var(--cedar-ink); text-decoration: underline; }
.footer-legal a[aria-current="page"] { color: #fff; }

/* ---------- Modal shell (auth, order, account actions) ---------- */
body.modal-open { overflow: hidden; }
.modal { position: fixed; inset: 0; z-index: 150; display: none; }
.modal.is-open {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: clamp(1rem, 4vh, 3rem) 1rem;
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 440px);
  margin: auto;
  background: linear-gradient(180deg, #171717 0%, #111111 100%);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  animation: modal-in 0.24s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.modal-panel--wide { width: min(100%, 560px); }
@keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }
.modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background-color 0.14s ease, color 0.14s ease, transform 0.14s ease;
}
.modal-close:hover { background: var(--cedar-tint); color: var(--cedar-ink); transform: rotate(90deg); }
.modal-title { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.7rem); margin-bottom: 0.5rem; padding-right: 2rem; }
.modal-lead { color: var(--ink-2); margin-bottom: 1.25rem; }

/* ---------- Auth modal ---------- */
.auth-tabs {
  display: flex;
  gap: 0.25rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--line);
  border-radius: var(--pill);
  padding: 0.25rem;
  margin-bottom: 1.25rem;
}
.auth-tab {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 0.6rem 0.4rem;
  border-radius: var(--pill);
  font: inherit;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}
.auth-tab.is-active { background: #262626; color: var(--ink); box-shadow: var(--shadow-sm); }
.auth-form { display: grid; gap: 1rem; }
.field-hint { font-size: 0.82rem; color: var(--muted); }
.field-opt { color: var(--muted); font-weight: 400; }
.check-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.92rem;
  color: var(--ink-2);
  cursor: pointer;
}
.check-row input { margin-top: 0.15rem; width: 1.1rem; height: 1.1rem; flex: none; accent-color: var(--cedar); }
.form-error { color: var(--red); font-size: 0.9rem; font-weight: 500; }
.auth-alt { display: grid; gap: 0.4rem; text-align: center; font-size: 0.9rem; color: var(--muted); margin-top: 0.25rem; }
.auth-alt a { font-weight: 600; }
.pw-strength { height: 6px; border-radius: var(--pill); background: rgba(255, 255, 255, 0.1); overflow: hidden; margin-top: 0.5rem; }
.pw-strength .js-strength-bar { display: block; height: 100%; width: 0; border-radius: var(--pill); transition: width 0.2s ease, background-color 0.2s ease; }
.pw-strength .js-strength-bar[data-score="0"] { width: 8%;   background: #4A4A4A; }
.pw-strength .js-strength-bar[data-score="1"] { width: 30%;  background: #6E6E6E; }
.pw-strength .js-strength-bar[data-score="2"] { width: 55%;  background: #999999; }
.pw-strength .js-strength-bar[data-score="3"] { width: 78%;  background: #CFCFCF; }
.pw-strength .js-strength-bar[data-score="4"] { width: 100%; background: #FFFFFF; }
.btn.is-busy { opacity: 0.7; cursor: progress; }

/* Compact the auth modal so BOTH login and the taller signup form fit in the
   panel without an inner scrollbar, from tall phones down to short laptops.
   A tight auth form is a normal, clean pattern; scoped to #authModal so the
   order and account modals keep their roomier spacing. */
#authModal .modal-panel { padding: clamp(1.3rem, 1rem + 1.3vw, 1.7rem); }
#authModal .modal-title { margin-bottom: 0.55rem; }
#authModal .auth-tabs { margin-bottom: 0.8rem; }
#authModal .auth-form { gap: 0.6rem; }
#authModal .field { gap: 0.28rem; }
#authModal .field input { padding-block: 0.58rem; }
#authModal .pw-strength { margin-top: 0.3rem; }
#authModal .auth-alt { margin-top: 0.05rem; }

/* Short viewports (small laptops, landscape phones): trim a little more. */
@media (max-height: 700px) {
  #authModal.modal.is-open { padding-block: 0.7rem; }
  #authModal .modal-panel { padding: 1rem 1.25rem; }
  #authModal .modal-title { margin-bottom: 0.4rem; font-size: 1.35rem; }
  #authModal .auth-tabs { margin-bottom: 0.55rem; }
  #authModal .auth-form { gap: 0.5rem; }
  #authModal .field input { padding-block: 0.5rem; }
  #authModal .field-hint { font-size: 0.76rem; line-height: 1.35; }
}

/* ---------- Order modal ---------- */
.order-recap {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1rem 1.15rem;
  margin-bottom: 1.25rem;
  display: grid;
  gap: 0.4rem;
}
.order-recap-line { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.95rem; }
.order-recap-line span { color: var(--muted); }
.order-recap-line strong { color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.order-recap-note { font-size: 0.8rem; color: var(--muted); margin: -0.15rem 0 0.1rem; }
.order-form { display: grid; gap: 1rem; }
.order-fine { font-size: 0.82rem; color: var(--muted); text-align: center; }
.order-done { text-align: center; }
.order-done-mark {
  width: 60px;
  height: 60px;
  margin: 0.25rem auto 1rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cedar-tint);
  border: 1px solid var(--cedar-line);
  color: var(--cedar-ink);
  box-shadow: 0 0 34px -8px rgba(255, 255, 255, 0.3);
  animation: mark-pop 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes mark-pop { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
.order-done-cta { display: grid; gap: 0.6rem; margin-top: 1.25rem; }

/* ---------- Account page ---------- */
.account-root { min-height: 44vh; }
.account-loading { display: grid; place-items: center; gap: 0.9rem; padding: 3.5rem 0; color: var(--muted); }
.account-spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid var(--line-2);
  border-top-color: var(--cedar);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.account-head {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.account-head h1 { font-size: clamp(1.8rem, 1.4rem + 2vw, 2.4rem); margin-top: 0.2rem; }
.account-note {
  background: var(--cedar-tint);
  border: 1px solid var(--cedar-line);
  border-radius: var(--r-sm);
  padding: 0.8rem 1rem;
  font-size: 0.92rem;
  color: var(--cedar-ink);
  margin-bottom: 1.5rem;
}
.account-section { margin-top: 2rem; }
.account-section > h2 { font-size: 1.25rem; margin-bottom: 1rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--line); }

.account-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 1rem; }
.account-card {
  background: var(--glass), var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  padding: 1.1rem 1.2rem;
  display: grid;
  gap: 0.7rem;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.account-card:hover { border-color: var(--line-2); transform: translateY(-2px); }
.account-card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.account-card-title { font-weight: 700; font-size: 0.95rem; word-break: break-word; }
.account-facts { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.3rem; font-size: 0.9rem; color: var(--ink-2); }
.account-card .btn { justify-self: start; }

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.65rem;
  border-radius: var(--pill);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border: 1px solid transparent;
}
/* Monochrome ladder: the further along the lifecycle, the brighter the badge.
   Live inverts to a filled white pill; paused goes dashed; cancelled dims. */
.status-badge.is-pending   { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.16); color: #ABABAB; }
.status-badge.is-contacted { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.20); color: #C6C6C6; }
.status-badge.is-progress  { background: rgba(255, 255, 255, 0.11); border-color: rgba(255, 255, 255, 0.24); color: #DDDDDD; }
.status-badge.is-preview   { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.30); color: #F2F2F2; }
.status-badge.is-live      { background: var(--ok);                  border-color: transparent;               color: #06140E; }
.status-badge.is-paused    { background: transparent;                border-color: rgba(255, 255, 255, 0.38); color: #E0E0E0; border-style: dashed; }
.status-badge.is-cancelled { background: rgba(255, 255, 255, 0.03);  border-color: rgba(255, 255, 255, 0.10); color: #7C7C7C; }

.account-credits {
  background: var(--glass), var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  padding: 1.2rem 1.3rem;
  display: grid;
  gap: 0.5rem;
  max-width: 520px;
}
.credits-num { font-size: 1.05rem; color: var(--ink-2); }
.credits-num strong { font-family: var(--f-head); font-size: 1.6rem; color: var(--cedar-ink); }
.credits-note { font-size: 0.9rem; color: var(--muted); }
.account-credits .btn { justify-self: start; margin-top: 0.3rem; }

.order-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.order-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--glass), var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-sm);
  padding: 0.85rem 1.05rem;
  transition: border-color 0.18s ease;
}
.order-item:hover { border-color: var(--line-2); }
.order-item-main { display: grid; gap: 0.2rem; min-width: 0; }
.order-item-title { font-weight: 600; }
.order-item-sub { font-size: 0.85rem; color: var(--muted); }
.order-item-side { display: flex; align-items: center; gap: 0.85rem; flex: none; }
.order-cancel { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 0.85rem; text-decoration: underline; cursor: pointer; }
.order-cancel:hover { color: var(--red); }

.account-empty {
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.25rem 1.35rem;
  color: var(--ink-2);
  display: grid;
  gap: 0.8rem;
  justify-items: start;
}

/* ---------- Account settings ---------- */
.settings-list {
  display: grid;
  gap: 0.6rem;
  max-width: 640px;
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--glass), var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-sm);
  padding: 0.9rem 1.05rem;
}
.settings-row-info { display: grid; gap: 0.15rem; min-width: 0; }
.settings-row-name { font-weight: 600; }
.settings-row-meta { font-size: 0.85rem; color: var(--muted); overflow-wrap: anywhere; }
.settings-row .btn { flex: none; }
.settings-danger { border-color: rgba(255, 255, 255, 0.16); border-style: dashed; }

/* Destructive action: outlined, brightens with a plain white ring on hover */
.btn-danger {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--ink);
}
.btn-danger:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: #FFFFFF;
  transform: translateY(-1px);
}

@media (max-width: 560px) {
  .settings-row { flex-direction: column; align-items: flex-start; }
}

/* ---------- Legal pages (terms / privacy) ---------- */
.legal { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.legal-container { max-width: 760px; }
.legal h1 { font-size: clamp(2rem, 1.6rem + 2.2vw, 2.9rem); margin-bottom: 0.5rem; }
.legal-updated { color: var(--muted); font-size: 0.9rem; margin-bottom: 1.5rem; }
.legal-intro { font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem); color: var(--ink-2); margin-bottom: 0.5rem; }
.legal-section { margin-top: 1.75rem; }
.legal-section h2 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.legal-section p { color: var(--ink-2); margin-bottom: 0.7rem; }
.legal-section ul { color: var(--ink-2); margin: 0 0 0.7rem; padding-left: 1.2rem; display: grid; gap: 0.35rem; }
.legal-section a { font-weight: 600; }

/* ---------- Admin panel ---------- */
.admin-tag {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--cedar-tint);
  border: 1px solid var(--cedar-line);
  color: var(--cedar-ink);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}
/* The brand already links home, so the extra link can go on small phones. */
@media (max-width: 480px) {
  .admin-view-site { display: none; }
}

.admin-gate { padding: 2.5rem 0; display: grid; gap: 0.9rem; justify-items: start; max-width: 640px; }
.admin-gate h1 { font-size: clamp(1.8rem, 1.4rem + 2vw, 2.4rem); }
.admin-uid {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 0.7rem 0.9rem;
  max-width: 100%;
}
.admin-uid code { font-size: 0.95rem; word-break: break-all; }
.admin-steps { color: var(--ink-2); padding-left: 1.2rem; display: grid; gap: 0.4rem; }
.admin-steps code { background: var(--tint); border: 1px solid var(--line); padding: 0 0.3em; border-radius: 4px; }

.admin-head-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }

.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 0.8rem;
  margin-top: 1.5rem;
}
.stat-card {
  background: var(--glass), var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-sm);
  padding: 0.9rem 1rem;
  display: grid;
  gap: 0.15rem;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.stat-card:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: var(--shadow-card); }
.stat-card strong {
  font-family: var(--f-head);
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(120deg, #FFFFFF 0%, #B4B4B4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat-card span { font-size: 0.82rem; color: var(--muted); }

/* Panel entrance: header + each section rise in once on first paint. The
   dashboard adds .admin-enter one frame after it renders; reduced motion (the
   global block below) disables it. */
.admin-dash.admin-enter > * {
  animation: admin-rise 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}
.admin-dash.admin-enter > *:nth-child(1) { animation-delay: 0.02s; }
.admin-dash.admin-enter > *:nth-child(2) { animation-delay: 0.09s; }
.admin-dash.admin-enter > *:nth-child(3) { animation-delay: 0.16s; }
.admin-dash.admin-enter > *:nth-child(4) { animation-delay: 0.23s; }
.admin-dash.admin-enter > *:nth-child(5) { animation-delay: 0.30s; }
@keyframes admin-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.admin-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.filter-chip {
  border: 1.5px solid var(--line-2);
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink-2);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  min-height: 40px;
  cursor: pointer;
  transition: border-color 0.16s ease, background-color 0.16s ease;
}
.filter-chip span { color: var(--muted); font-weight: 500; }
.filter-chip:hover { border-color: var(--cedar-line); }
.filter-chip.is-active { border-color: var(--cedar); background: var(--cedar-tint); color: var(--cedar-ink); }
.filter-chip.is-active span { color: var(--cedar-ink); }

.admin-order { flex-wrap: wrap; }
.admin-order-side { flex-wrap: wrap; row-gap: 0.5rem; }
.admin-order-note { font-size: 0.85rem; color: var(--ink-2); margin-top: 0.3rem; }
.admin-status select {
  font: inherit;
  font-size: 0.88rem;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 0.4rem 0.55rem;
  min-height: 40px;
  cursor: pointer;
}
.admin-status select:focus-visible { outline: 3px solid var(--cedar); outline-offset: 2px; }

.admin-site-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.admin-overdue { font-size: 0.85rem; font-weight: 600; color: var(--red); }

.admin-user .order-item-side { flex-wrap: wrap; row-gap: 0.5rem; }

@media (max-width: 560px) {
  .admin-order .order-item-side,
  .admin-user .order-item-side { width: 100%; justify-content: flex-start; }
}

/* Admin password gate (admin/) */
.admin-login { display: grid; place-items: center; padding: clamp(2rem, 1rem + 6vw, 5rem) 0; }
.admin-login-inner {
  width: min(100%, 420px);
  display: grid;
  gap: 0.7rem;
  background: var(--glass), var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.4rem, 1rem + 2vw, 2.2rem);
}
.admin-login-inner h1 { font-size: clamp(1.6rem, 1.3rem + 1.5vw, 2rem); }
.admin-login-lead { color: var(--ink-2); margin-bottom: 0.4rem; }
.admin-login-inner form { display: grid; gap: 1rem; margin-top: 0.3rem; }
.admin-status { font-size: 0.9rem; color: var(--muted); min-height: 1.2em; text-align: center; }
.admin-status.is-error { color: var(--red); font-weight: 600; }

/* Inactivity lock warning (fixed, injected by the shell) */
.admin-lock-warning {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: var(--r-sm);
  background: #161616;
  border: 1px solid var(--line-2);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  max-width: 92vw;
}
.admin-lock-warning button {
  background: rgba(255, 255, 255, 0.1);
  color: var(--ink);
  border: 0;
  border-radius: 8px;
  padding: 8px 14px;
  font: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
}
.admin-lock-warning button:hover { background: rgba(255, 255, 255, 0.2); }

.admin-wrap { display: block; }
.admin-dash { display: block; }

/* =============================================================================
   Motion preferences
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .js .hero-copy > * { opacity: 1; transform: none; animation: none; }
  .caret { animation: none; }
  .hero::before, .hero::after { animation: none; }
  .browser-mock { transform: none !important; }
  .mini > * { animation: none; }
  .site-splash { transition: none; }
  .splash-brand { opacity: 1; transform: none; animation: none; }
  .splash-fill { animation: none; }
}

/* ---- Admin: visitor stats (Realtime Database) --------------------------- */
.admin-visitors .section-lead { margin-bottom: 1rem; }
.admin-subhead {
  margin: 1.5rem 0 0.6rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.admin-visitor-list .admin-visitor .order-item-title { color: var(--ink-2); }