/* ============================================================
   photoaicompany — "welcoming canvas light" design system
   Rebuilt 2026-10-01. Light-first, canva-craft: template-forward
   hero, friendly geometric type, disciplined color, pill buttons.
   One easing, one radius system, no ambient loops, no shine sweeps.
   ============================================================ */
:root {
  color-scheme: dark;
  --paper: #000000;
  --surface: #0d0d0d;
  --surface-2: #161616;
  --ink: #ffffff;
  --muted: #ffffff;
  --line: #262626;
  --line-soft: #1c1c1c;

  --violet: #ffffff;
  --violet-dark: #e5e5e5;
  --violet-ink: #ffffff;
  --violet-tint: #141414;
  --pink: #ffffff;

  /* disciplined soft tints for category tiles */
  --tint-blue: #141414;
  --tint-pink: #181818;
  --tint-gold: #121212;
  --tint-green: #161616;
  --tint-purple: #1a1a1a;
  --tint-orange: #131313;

  --radius-card: 16px;
  --radius-stage: 24px;
  --radius-input: 10px;
  --radius-pill: 999px;

  --ease-out: cubic-bezier(0,0,.13,1);
  --ease-in: cubic-bezier(.68,0,.23,1);
  --dur-1: 100ms;
  --dur-2: 200ms;
  --dur-3: 300ms;

  --shadow-card: 0 1px 2px rgba(0,0,0,.2);
  --shadow-lift: 0 12px 28px rgba(0,0,0,.28);
  --shadow-hero: 0 30px 80px rgba(0,0,0,.4);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(255,255,255,.25); }
a { color: var(--violet-ink); }
img, canvas, svg { max-width: 100%; }
img { height: auto; }

h1, h2, h3,
.display {
  font-family: "Chillax", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.12;
  letter-spacing: -.02em;
  text-wrap: balance;
  margin: 0 0 .8em;
}
h1 { font-weight: 800; }
h2, h3 { font-weight: 700; }
p { margin: 0 0 1em; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; }
main .wrap { padding-top: 0; padding-bottom: 5rem; }

.muted { color: var(--muted); }
.small { font-size: .85rem; }
.lede { font-size: 1.15rem; color: var(--muted); max-width: 680px; }
.stat-num, .amount { font-variant-numeric: tabular-nums; }

/* ============ header ============ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(0,0,0,.92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--dur-2) var(--ease-out);
}
.site-header.scrolled { box-shadow: 0 6px 24px rgba(0,0,0,.25); }
.site-header .wrap { display: flex; align-items: center; gap: 1.5rem; padding-top: .75rem; padding-bottom: .75rem; }
.brand {
  font-family: "Chillax", "Nunito", system-ui, sans-serif;
  font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em;
  text-decoration: none; color: var(--ink);
  display: inline-flex; align-items: center; flex: none;
}
.brand .dot { color: var(--pink); }
.brand-logo {
  height: 32px; width: 32px; border-radius: 9px; object-fit: cover;
  margin-right: .55rem; flex: none; box-shadow: var(--shadow-card);
}
.site-nav { display: flex; gap: 1.35rem; margin-left: auto; align-items: center; }
.site-nav a {
  text-decoration: none; color: var(--muted); font-weight: 600; font-size: .95rem;
  letter-spacing: .01em; transition: color var(--dur-1) var(--ease-out);
}
.site-nav a:hover, .site-nav a.active { color: var(--violet-ink); }
/* Nav CTA must stay a >=44px touch target on all viewports (audit 2026-10-08:
   "Open the app" measured 34px desktop / 31px mobile). */
.btn-header { flex: none; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* mobile hamburger */
.nav-toggle { display: none; }
@media (max-width: 760px) {
  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; align-items: center;
    gap: 5px; width: 44px; height: 44px; margin-left: auto; flex: none;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-input); cursor: pointer;
    color: var(--ink);
  }
  .nav-toggle span { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out); }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .site-nav {
    display: none; position: absolute; top: calc(100% + 8px); left: 1rem; right: 1rem;
    flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: .5rem;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card);
    box-shadow: var(--shadow-lift); z-index: 60;
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: .75rem .9rem; border-radius: 8px; font-size: 1rem; }
  .site-nav a:hover { background: var(--violet-tint); }
  .site-header .wrap { position: relative; }
}

/* ============ buttons: pills everywhere ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .85rem 1.9rem; border-radius: var(--radius-pill);
  background: var(--violet); color: #fff;
  font-weight: 600; font-size: 1rem; letter-spacing: .02em; line-height: 1;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.btn:hover { background: #000; color: #fff; transform: translateY(-2px); box-shadow: 0 0 0 1.5px rgba(255,255,255,.55), 0 10px 24px rgba(0,0,0,.5); }
.btn:active { transform: translateY(0); }
.btn.ghost { background: #000; color: #fff; border-color: #333; box-shadow: none; }
.btn.ghost:hover { background: #000; color: #fff; border-color: #666; box-shadow: 0 8px 20px rgba(0,0,0,.5); }
/* white pill for gradient bands */
.btn-light { background: #000; color: #fff; box-shadow: 0 0 0 1.5px rgba(255,255,255,.55), 0 12px 30px rgba(0,0,0,.5); }
.btn-light:hover { background: #111; color: #fff; box-shadow: 0 0 0 1.5px rgba(255,255,255,.75), 0 16px 36px rgba(0,0,0,.55); }
/* gradient pill: Pro emphasis only */
.btn-grad { background: #000; color: #fff; box-shadow: 0 0 0 1.5px rgba(255,255,255,.55); }
.btn-grad:hover { background: #111; color: #fff; box-shadow: 0 0 0 1.5px rgba(255,255,255,.75); }
.btn-sm { padding: .55rem 1.2rem; font-size: .9rem; }
.btn-row { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; align-items: center; }
.btn-row[hidden] { display: none; }

/* ============ eyebrow chips ============ */
.eyebrow {
  display: inline-flex; align-items: center;
  font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  border-radius: var(--radius-pill); padding: .45rem 1.05rem; margin: 0 0 1.4rem;
  background: var(--violet-tint); color: var(--violet-ink); border: 1px solid transparent;
}
.eyebrow.on-gradient {
  background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.38);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

/* ============ hero: full-bleed static gradient band ============ */
.hero-band {
  padding: clamp(4rem, 8vw, 6.5rem) 0 clamp(3rem, 6vw, 5rem);
  background: linear-gradient(135deg, #050505 0%, #141414 52%, #1f1f1f 100%);
  text-align: center; color: #fff;
}
.hero-band h1 {
  color: #fff; font-size: clamp(2.9rem, 6.4vw, 4.75rem); font-weight: 800;
  letter-spacing: -.025em; line-height: 1.02; margin: 0 auto 1.1rem; max-width: 16ch;
}
.hero-band .lede { color: rgba(255,255,255,.92); margin: 0 auto 2rem; font-size: clamp(1.05rem, 2vw, 1.25rem); }
.hero-band .btn-row { margin-bottom: 0; }

/* ============ product editor mockup (the hero image) ============ */
.mockup {
  max-width: 980px; margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  background: #fff; border-radius: var(--radius-stage);
  box-shadow: var(--shadow-hero); overflow: hidden; text-align: left;
  border: 1px solid rgba(255,255,255,.5);
}
.mock-bar {
  display: flex; align-items: center; gap: 1rem;
  padding: .8rem 1.2rem; border-bottom: 1px solid var(--line); background: #fbfcfd;
}
.mock-dots { display: flex; gap: .4rem; }
.mock-dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); display: block; }
.mock-dots i:first-child { background: #ff5f57; border-color: #e0443e; }
.mock-dots i:nth-child(2) { background: #febc2e; border-color: #de9f22; }
.mock-dots i:nth-child(3) { background: #28c840; border-color: #1dad32; }
.mock-docname { font-size: .85rem; font-weight: 600; color: var(--muted); letter-spacing: .01em; }
.mock-export {
  margin-left: auto; font-size: .8rem; font-weight: 600; letter-spacing: .02em;
  background: var(--violet); color: #fff; border-radius: var(--radius-pill);
  padding: .45rem 1.1rem; text-decoration: none;
}
.mock-body { display: grid; grid-template-columns: 76px 1fr 210px; min-height: 340px; }
.mock-rail {
  border-right: 1px solid var(--line); background: var(--surface);
  display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .9rem .4rem;
}
.mock-rail span {
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  width: 100%; padding: .55rem 0; border-radius: 10px; cursor: default;
}
.mock-rail span.on { background: var(--violet-tint); }
.mock-rail b { font-size: 1.05rem; font-weight: 700; color: var(--muted); font-style: normal; }
.mock-rail span.on b { color: var(--violet-ink); }
.mock-rail em { font-style: normal; font-size: .6rem; font-weight: 600; letter-spacing: .04em; color: var(--muted); text-transform: uppercase; }
.mock-canvas { background: var(--surface-2); display: flex; align-items: center; justify-content: center; padding: 1.6rem; }
.mock-design {
  width: min(100%, 340px); background: #fff; border-radius: 12px; overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.3); border: 1px solid var(--line);
}
.mock-design img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.mock-copy { padding: 1rem 1.1rem 1.2rem; }
.mock-copy strong { display: block; font-family: "Chillax", "Nunito", sans-serif; font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: .25rem; }
.mock-copy > span { display: block; font-size: .82rem; color: var(--muted); margin-bottom: .8rem; }
.mock-copy em {
  font-style: normal; display: inline-block; font-size: .78rem; font-weight: 600;
  background: var(--violet); color: #fff; border-radius: var(--radius-pill); padding: .4rem .95rem;
}
.mock-panel { border-left: 1px solid var(--line); padding: 1.1rem 1rem; background: #fff; }
.mock-ptitle { font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 0 0 .55rem; }
.mock-panel .mock-ptitle:not(:first-child) { margin-top: 1.1rem; }
.mock-swatches { display: flex; gap: .45rem; flex-wrap: wrap; }
.mock-swatches i { width: 26px; height: 26px; border-radius: 8px; display: block; border: 1px solid rgba(0,0,0,.08); }
.mock-lines i { display: block; height: 9px; border-radius: 5px; background: var(--surface-2); margin-bottom: .45rem; }
.mock-layers i { display: block; height: 26px; border-radius: 7px; background: var(--surface); border: 1px solid var(--line); margin-bottom: .4rem; }
.mock-layers i.on { border-color: var(--violet); background: var(--violet-tint); }
.mock-note { text-align: center; color: rgba(255,255,255,.85); font-size: .85rem; margin-top: 1.2rem; }

/* ============ sections ============ */
.section { padding: clamp(3rem, 6vw, 5rem) 0 0; }
.section-title {
  font-size: clamp(1.7rem, 3.2vw, 2.35rem); font-weight: 800; letter-spacing: -.02em;
  margin: 0 0 .6rem; scroll-margin-top: 90px;
  /* Masked text-reveal: the SplitText word entrance animates words up from
   * y:+34px; without this mask they paint over the card grid below during
   * the 0.7s tween and read as a layout bug. At rest nothing leaves the
   * border box, so this changes nothing when animations are settled. */
  overflow: hidden;
}
.section-sub { color: var(--muted); font-size: 1.08rem; max-width: 640px; margin: 0 0 2rem; }
.center { text-align: center; }
.center .section-sub, .center .lede { margin-left: auto; margin-right: auto; }

/* ============ category tiles: colorful but disciplined ============ */
.tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.tile {
  display: block; text-decoration: none; color: var(--ink);
  border-radius: var(--radius-card); padding: 1.35rem 1.25rem;
  border: 1px solid transparent;
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); color: var(--ink); }
.tile.tint-blue { background: var(--tint-blue); }
.tile.tint-pink { background: var(--tint-pink); }
.tile.tint-gold { background: var(--tint-gold); }
.tile.tint-green { background: var(--tint-green); }
.tile.tint-purple { background: var(--tint-purple); }
.tile.tint-orange { background: var(--tint-orange); }
.tile h3 { font-size: 1.08rem; margin: 0 0 .3rem; }
.tile p { font-size: .88rem; color: var(--muted); margin: 0; }
.tile .tile-cta { display: inline-block; margin-top: .8rem; font-size: .85rem; font-weight: 600; color: var(--violet-ink); }

/* ============ cards & grids ============ */
.grid { display: grid; gap: 1.1rem; }
.grid.c2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid.c3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: 1.5rem; text-decoration: none; color: inherit; display: block;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
a.card:hover { border-color: #404040; box-shadow: var(--shadow-lift); transform: translateY(-2px); color: inherit; }
.card h2, .card h3 { margin: 0 0 .5rem; font-size: 1.15rem; letter-spacing: -.01em; }
.card p { margin: .3rem 0; color: var(--muted); font-size: .95rem; }
.card .card-thumb {
  display: block; width: calc(100% + 3rem); max-width: none;
  margin: -1.5rem -1.5rem 1rem; aspect-ratio: 16/9; object-fit: cover;
  border-radius: var(--radius-card) var(--radius-card) 0 0; background: #141414;
}
.card .tag, .tag {
  display: inline-block; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--violet-ink); background: var(--violet-tint); border-radius: var(--radius-pill);
  padding: .22rem .7rem; margin-bottom: .7rem;
}
.cat-icon {
  width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.25rem; font-weight: 800; font-family: "Chillax", "Nunito", sans-serif;
  color: var(--violet-ink); background: var(--violet-tint); margin-bottom: .9rem;
}
.tool-count { font-size: .8rem; font-weight: 600; color: var(--muted); letter-spacing: .02em; }

/* AI feature cards with real art */
.ai-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.ai-card {
  display: block; text-decoration: none; color: inherit; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.ai-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); color: inherit; }
.ai-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; border-radius: 12px 12px 0 0; }
.ai-card .ai-body { padding: 1.25rem 1.35rem 1.4rem; }
.ai-card h3 { font-size: 1.15rem; margin: 0 0 .4rem; }
.ai-card p { font-size: .93rem; color: var(--muted); margin: 0 0 .9rem; }
.ai-card .tile-cta { font-size: .88rem; font-weight: 600; color: var(--violet-ink); }

/* ============ honest proof band ============ */
.proof-band {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-stage);
  padding: clamp(2rem, 4vw, 3rem); margin-top: clamp(3rem, 6vw, 5rem);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; text-align: center;
}
.proof-stat .num {
  font-family: "Chillax", "Nunito", sans-serif; font-weight: 800;
  font-size: clamp(2rem, 4vw, 2.9rem); letter-spacing: -.02em; color: var(--ink);
  font-variant-numeric: tabular-nums; display: block; margin-bottom: .35rem;
}
.proof-stat p { color: var(--muted); font-size: .95rem; margin: 0; max-width: 30ch; margin-left: auto; margin-right: auto; }

/* ============ pricing ============ */
.price-hero {
  padding: clamp(3.5rem, 7vw, 5.5rem) 0 clamp(3rem, 6vw, 4.5rem);
  background: linear-gradient(135deg, #1f1f1f 0%, #141414 52%, #050505 100%);
  text-align: center; color: #fff;
}
.price-hero h1 { color: #fff; font-size: clamp(2.2rem, 4.6vw, 3.4rem); font-weight: 800; margin: 0 auto .9rem; max-width: 20ch; }
.price-hero .lede { color: rgba(255,255,255,.92); margin: 0 auto 1.8rem; }
.billing-toggle {
  display: inline-flex; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.35);
  border-radius: var(--radius-pill); padding: .3rem; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.billing-toggle button {
  border: 0; background: transparent; color: #fff; font: inherit; font-weight: 600; font-size: .92rem;
  letter-spacing: .02em; padding: .55rem 1.5rem; border-radius: var(--radius-pill); cursor: pointer;
  min-height: 44px; /* touch target (audit 2026-10-08: measured 37px) */
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.billing-toggle button.on { background: #fff; color: var(--ink); }
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2.5rem; align-items: stretch; }
.plan-grid.four { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.price-card {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-card); padding: 2rem 1.8rem; box-shadow: var(--shadow-card);
  display: flex; flex-direction: column;
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.price-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.price-card.hot {
  border: 2px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box,
              linear-gradient(135deg, var(--violet), var(--pink)) border-box;
  box-shadow: 0 16px 44px rgba(125,42,232,.14);
}
.popular-badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--violet), var(--pink)); color: #fff;
  font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  border-radius: var(--radius-pill); padding: .3rem .95rem; white-space: nowrap;
}
.price-card h3 { font-size: 1.25rem; margin: 0 0 .4rem; }
.price-card .amount {
  font-family: "Chillax", "Nunito", sans-serif;
  font-size: 2.5rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink);
}
.price-card .per { color: var(--muted); font-size: .85rem; margin: .1rem 0 0; min-height: 2.6em; }
.price-card ul { list-style: none; padding: 0; margin: 1.3rem 0 1.6rem; flex: 1; }
.price-card li { padding: .42rem 0 .42rem 1.75rem; position: relative; font-size: .95rem; color: #ffffff; }
.price-card li::before {
  content: "✓"; position: absolute; left: 0; top: .42rem;
  width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: var(--violet-tint); color: var(--violet-ink);
  font-weight: 700; font-size: .75rem; display: inline-flex; align-items: center; justify-content: center;
}
.price-card .btn { width: 100%; }
.enterprise-strip {
  margin-top: 1.25rem; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-card); padding: 1.6rem 2rem;
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
}
.enterprise-strip h3 { margin: 0 0 .25rem; font-size: 1.2rem; }
.enterprise-strip p { margin: 0; color: var(--muted); font-size: .95rem; flex: 1; min-width: 220px; }

/* ============ final CTA band ============ */
.cta-band {
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
  padding: clamp(3.5rem, 7vw, 5.5rem) 0;
  background: linear-gradient(135deg, #050505 0%, #141414 52%, #1f1f1f 100%);
  text-align: center; color: #fff;
}
.cta-band h2 { color: #fff; font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 800; margin: 0 auto 1rem; max-width: 20ch; }
.cta-band p { color: rgba(255,255,255,.92); max-width: 560px; margin: 0 auto 2rem; font-size: 1.08rem; }
/* compat: old CTA markup with background art */
.cta-band .cta-bg { display: none; }
.cta-band .cta-inner { position: relative; }

/* ============ footer ============ */
.site-footer { border-top: 1px solid var(--line); background: var(--surface); margin-top: 0; }
.site-footer .wrap.foot-grid, .site-footer > .wrap:first-child {
  padding-top: 3rem; padding-bottom: 2.5rem;
  display: grid; gap: 2rem; grid-template-columns: 1.5fr 1fr 1fr;
}
.site-footer h4 { margin: 0 0 .7rem; font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-family: "Nunito", system-ui, sans-serif; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: .35rem 0; font-size: .93rem; }
.site-footer a { color: var(--muted); text-decoration: none; transition: color var(--dur-1) var(--ease-out); }
.site-footer a:hover { color: var(--violet-ink); }
.site-footer .brand { margin-bottom: .8rem; }
.legal { border-top: 1px solid var(--line); padding: 1.1rem 0; font-size: .82rem; color: var(--muted); text-align: center; }
.legal .wrap { padding-top: 0; padding-bottom: 0; }

/* 2026-10-24: on narrow viewports the fixed chat + to-top widgets (bottom
   corners) occlude both ends of the centered legal line at page end -
   390px confirmed. Side-pad the wrap so the text clears the widget zones. */
@media (max-width: 520px) {
  .site-footer .legal .wrap { padding-left: 76px; padding-right: 76px; }
}

/* ============ tool pages: hero, prose, breadcrumb ============ */
.tool-hero { padding: 3rem 0 1.5rem; max-width: 820px; }
.tool-hero .tag { margin-bottom: .9rem; }
.tool-hero h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); letter-spacing: -.02em; margin: 0 0 .8rem; }
.tool-hero .lede { font-size: 1.12rem; }
/* Photographic tool-hero band (William: photographic backdrops only — the
   breadcrumb + tool-hero pair is wrapped in this band at build time). */
.tool-hero-band { position: relative; border-radius: 20px; overflow: hidden; background-size: cover; background-position: center 38%; margin: 0 0 2.75rem; }
.tool-hero-band .thb-scrim { position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.62), rgba(0,0,0,.44)); }
.tool-hero-band .thb-inner { position: relative; padding: clamp(2rem, 5vw, 3.25rem) clamp(1.25rem, 4vw, 2.5rem); }
.tool-hero-band .breadcrumb { color: rgba(255,255,255,.82); margin: 0 0 1.1rem; }
.tool-hero-band .breadcrumb a { color: #fff; }
.tool-hero-band .breadcrumb a:hover { color: #ffffff; }
.tool-hero-band .tool-hero { padding: 0; max-width: 780px; }
.tool-hero-band .tool-hero h1 { color: #fff; }
.tool-hero-band .tool-hero .lede { color: rgba(255,255,255,.9); }
.tool-hero-band .tool-hero .tag { background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.38); }
/* ---- BYOS (bring-your-own-storage) photographic band ---- */
.byos-band { position: relative; border-radius: 22px; overflow: hidden; background-size: cover; background-position: center 35%; margin: 0; }
.byos-band .byos-scrim { position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.8), rgba(0,0,0,.62)); }
.byos-band .byos-inner { position: relative; padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 5vw, 3.5rem); color: #fff; }
.byos-band .eyebrow { color: #ffffff; }
.byos-band h2 { color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.5rem); letter-spacing: -.02em; margin: 0 0 .8rem; max-width: 22ch; }
.byos-band .lede { color: rgba(255,255,255,.9); font-size: 1.12rem; max-width: 62ch; }
.byos-providers { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.4rem 0 .4rem; align-items: center; }
.byos-chip { display: inline-flex; align-items: center; gap: .5rem; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); color: #fff; border-radius: 999px; padding: .5rem 1rem; font-weight: 600; font-size: .92rem; }
.byos-chip .n { display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: rgba(255,255,255,.22); font-size: .75rem; }
.byos-arrow { color: rgba(255,255,255,.5); font-weight: 700; }
.byos-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1rem; margin-top: 1.6rem; }
.byos-point { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-radius: 14px; padding: 1.1rem 1.2rem; }
.byos-point h3 { color: #fff; font-size: 1.02rem; margin: 0 0 .4rem; }
.byos-point p { color: rgba(255,255,255,.82); font-size: .94rem; line-height: 1.55; margin: 0; }
.byos-note { margin-top: 1.3rem; color: rgba(255,255,255,.65); font-size: .85rem; }
.prose { max-width: 740px; }
.prose h2 { font-size: 1.45rem; margin: 2.4rem 0 .7rem; letter-spacing: -.015em; }
.prose p, .prose li { color: #ffffff; }
.prose ol, .prose ul { padding-left: 1.4rem; }
.prose li { margin: .4rem 0; }
.breadcrumb { font-size: .85rem; color: var(--muted); margin: 1.2rem 0 .4rem; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--violet-ink); }

/* ============ interactive lab ============ */
.lab {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: 1.8rem; margin: 2.2rem 0; box-shadow: var(--shadow-card);
}
.lab h2 { margin: 0 0 1.1rem; font-size: 1.3rem; }
.field { margin: 0 0 1.1rem; }
.field label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .35rem; }
.field .hint { font-size: .85rem; color: var(--muted); font-weight: 400; display: block; margin-top: .25rem; }
input[type=text], input[type=url], input[type=number], select, textarea {
  width: 100%; padding: .65rem .8rem; border: 1.5px solid var(--line); border-radius: var(--radius-input);
  font: inherit; background: #fff; color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--violet); outline-offset: 1px; border-color: var(--violet); }
textarea { min-height: 90px; resize: vertical; }
input[type=color] { width: 3.2rem; height: 2.4rem; border: 1.5px solid var(--line); border-radius: 8px; padding: 2px; background: #fff; }
input[type=range] { width: 100%; accent-color: var(--violet); }
input[type=checkbox] { width: 1.1rem; height: 1.1rem; accent-color: var(--violet); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.checkline { display: flex; gap: .6rem; align-items: center; margin: .5rem 0; font-size: .95rem; }
.status-line { margin: .8rem 0; min-height: 1.2em; }

/* results */
.result { border-radius: 12px; padding: 1.1rem 1.25rem; margin-top: 1.2rem; border: 1.5px solid; color: var(--ink); }
.result.ok { background: #f4fbf6; border-color: #bfe6cd; }
.result.err { background: #fdf3f4; border-color: #f3c2c7; }
.result.warn { background: #101010; border-color: #f0d9a8; }
.result h3 { margin: 0 0 .6rem; font-size: 1.05rem; font-family: "Nunito", system-ui, sans-serif; letter-spacing: 0; color: var(--ink); }
.result dl { display: grid; grid-template-columns: minmax(110px, 170px) 1fr; gap: .25rem .9rem; margin: 0; font-size: .93rem; }
.result dt { font-weight: 700; color: var(--muted); }
.result dd { margin: 0; overflow-wrap: anywhere; }
.result .note { font-size: .9rem; color: var(--muted); margin: .7rem 0 0; }

/* preview canvas */
.preview-canvas {
  border: 1px solid var(--line); border-radius: var(--radius-input); background: #fff;
  box-shadow: var(--shadow-card); display: block; margin: .6rem auto;
}
.preview-wrap { text-align: center; }

/* swatches */
.swatches { display: inline-flex; gap: .35rem; vertical-align: middle; }
.swatch { width: 1.6rem; height: 1.6rem; border-radius: 6px; border: 1px solid rgba(0,0,0,.15); display: inline-block; }
.palette-card .swatches .swatch { width: 2.4rem; height: 2.4rem; }
.hexrow { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
.hex { font-family: ui-monospace, monospace; font-size: .8rem; background: var(--surface); border-radius: 6px; padding: .2rem .5rem; cursor: pointer; border: 1px solid var(--line); }

/* font gallery (tool pages list design fonts here — real font names, real samples) */
.font-sample { padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); }
.font-sample:last-child { border-bottom: 0; }
.font-sample .fname { font-size: .8rem; color: var(--muted); font-weight: 600; }
.font-sample .ftext { font-size: 1.7rem; margin-top: .2rem; }

/* template gallery */
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
/* gallery category filter chips (built from the real listing categories) */
.tpl-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.25rem; }
.tpl-filter {
  font: inherit; cursor: pointer; border: 1px solid var(--line);
  background: transparent; color: inherit; border-radius: var(--radius-pill, 999px);
  padding: .42rem .9rem; font-size: .85rem; font-weight: 600; line-height: 1.2;
}
.tpl-filter .n { opacity: .55; font-weight: 400; margin-left: .25rem; }
.tpl-filter:hover { border-color: var(--violet, #ffffff); }
.tpl-filter.is-on { background: var(--violet-ink, #3a2b6b); border-color: transparent; color: #fff; }
.tpl-filter:focus-visible { outline: 2px solid var(--violet, #ffffff); outline-offset: 2px; }
body.ts-dark .tpl-filter { border-color: rgba(255, 255, 255, .18); color: var(--ts-ink, #fff); }
body.ts-dark .tpl-filter:hover { border-color: var(--violet, #ffffff); }
body.ts-dark .tpl-filter.is-on { background: var(--violet, #ffffff); border-color: transparent; color: #fff; }
.tpl-card { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; box-shadow: var(--shadow-card); }
.tpl-card canvas, .tpl-card img.tpl-preview { width: 100%; display: block; background: var(--surface); }
.tpl-card .body { padding: .8rem 1rem 1rem; }
.tpl-card h3 { margin: 0 0 .25rem; font-size: 1rem; font-family: "Nunito", system-ui, sans-serif; letter-spacing: 0; }
.tpl-card p { margin: 0 0 .7rem; font-size: .85rem; color: var(--muted); }
.tpl-state { text-align: center; padding: 3rem 1rem; color: var(--muted); }
.spinner {
  width: 34px; height: 34px; margin: 0 auto 1rem; border-radius: 50%;
  border: 3px solid rgba(125,42,232,.2); border-top-color: var(--violet);
  
}

/* key-gated checklist */
.keybox { background: #101010; border: 1.5px dashed #e3b94e; border-radius: 12px; padding: 1.2rem 1.4rem; margin: 1.2rem 0; }

/* before/after compare, generated art */
.rb-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.2rem 0; }
.rb-shot { margin: 0; }
.rb-shot figcaption { font-weight: 700; font-size: .9rem; margin-bottom: .4rem; color: var(--muted); }
.rb-shot img { width: 100%; border-radius: var(--radius-input); border: 1px solid var(--line); display: block; }
.rb-shot img.checker {
  background-image: linear-gradient(45deg, #2a2a2a 25%, transparent 25%), linear-gradient(-45deg, #2a2a2a 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #2a2a2a 75%), linear-gradient(-45deg, transparent 75%, #2a2a2a 75%);
  background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}
.gen-img { max-width: 100%; border-radius: var(--radius-input); border: 1px solid var(--line); display: block; margin: .6rem auto; }

/* faq */
.faq details { border: 1px solid var(--line); border-radius: var(--radius-input); padding: .85rem 1.15rem; margin: .6rem 0; background: #fff; transition: border-color var(--dur-2) var(--ease-out); }
.faq details:hover { border-color: #404040; }
.faq details[open] { border-color: #404040; background: #101010; }
.faq summary { font-weight: 600; cursor: pointer; font-family: "Nunito", system-ui, sans-serif; }
.faq p { color: #ffffff; margin: .5rem 0 0; }

/* data tables */
.dim-table { width: 100%; border-collapse: collapse; font-size: .95rem; margin: 1rem 0; }
.dim-table th, .dim-table td { text-align: left; padding: .55rem .8rem; border-bottom: 1px solid var(--line); }
.dim-table th { color: var(--muted); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }

/* auth handoff cards */
.auth-card {
  max-width: 520px; margin: 3.5rem auto; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-card); padding: 2.8rem; text-align: center; box-shadow: var(--shadow-lift);
}
.auth-card h1 { font-size: 1.9rem; }
/* Auth cards are white with a photographic ::before wash at .14 opacity:
   --muted text fails contrast over the photo. Darker slate keeps the body
   copy and fine print legible (verified against the seeded signup/login
   photos, 2026-10-04 audit). */
.auth-card p { color: #3a4250; }
.auth-card p.muted { color: #49515e; }
.auth-card ul { color: #ffffff; }

/* misc */
.hr-glow { border: 0; height: 1px; margin: 3.2rem auto; max-width: 760px; background: var(--line); }

/* scroll reveals: one-shot, never ambient */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); transition-delay: var(--rd, 0ms); }
.reveal.in { opacity: 1; transform: none; }

/* SplitText hero headlines: chars animate individually, but lines may only
   break BETWEEN words — never inside a word ("templa|te,"). The word wrapper
   keeps each word on one line while chars stay individually animatable. */
.gs-word { display: inline-block; white-space: nowrap; }
.tb-word { display: inline-block; white-space: nowrap; }
.gs-char { display: inline-block; }

/* back-to-top */
#to-top {
  position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 60;
  width: 3rem; height: 3rem; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(255,255,255,.94);
  color: var(--violet-ink); font-size: 1.35rem; line-height: 1; cursor: pointer;
  box-shadow: var(--shadow-lift);
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: border-color var(--dur-2) var(--ease-out);
}
#to-top.show { opacity: 1; transform: none; pointer-events: auto; }
#to-top:hover { border-color: var(--violet); }

/* neutral scrollbar + focus */
html { scrollbar-width: thin; scrollbar-color: #d4d4d4 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d4d4d4; border-radius: 8px; border: 2px solid #fff; }
::-webkit-scrollbar-thumb:hover { background: #a7aebb; }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 6px; }

/* ============ LEGACY COMPAT — old class names, new tokens ============
   Old pages/markup keep working; nothing here introduces dark chrome. */
body.lux { /* legacy alias — the design is light-first; no overrides needed */ }
.grad { color: var(--violet); } /* static brand color, never animated */
.hero-lux { /* old dark hero markup → map to the light gradient band */ }
a.hero-lux, section.hero-lux {
  display: block; margin: 1.6rem 0 0;
  padding: clamp(3rem, 7vw, 5rem) 1.5rem; border-radius: 0;
  background: linear-gradient(135deg, #050505 0%, #141414 52%, #1f1f1f 100%);
  color: #fff; text-align: center;
}
.hero-lux h1 { color: #fff; }
.hero-lux .lede, .hero-lux p.lede { color: rgba(255,255,255,.92); }
.hero-visual, .hero-inner { transform: none; }
.hero-art { margin: 2.5rem auto 0; max-width: 640px; }
.hero-art img { width: 100%; height: auto; border-radius: var(--radius-card); display: block; box-shadow: var(--shadow-lift); }
.ai-badge {
  display: inline-block; padding: .45rem .9rem; border-radius: var(--radius-pill);
  background: rgba(0,0,0,.92); color: var(--ink);
  font-size: .8rem; font-weight: 600; letter-spacing: .02em; margin-top: .8rem;
}
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.bento-card {
  position: relative; overflow: hidden; border-radius: var(--radius-card); min-height: 300px;
  display: flex; flex-direction: column; justify-content: flex-end;
  border: 1px solid var(--line); text-decoration: none; color: inherit;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.bento-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.bento-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bento-card .bento-body {
  position: relative; z-index: 1; padding: 1.5rem;
  background: linear-gradient(180deg, transparent, rgba(10,12,16,.88) 60%);
  color: #fff; border-radius: 0 0 var(--radius-card) var(--radius-card);
}
.bento-card .bento-body h3 { margin: 0 0 .4rem; font-size: 1.25rem; color: #fff; }
.bento-card .bento-body p { margin: 0; color: rgba(255,255,255,.85); font-size: .95rem; }
.bento-card .bento-cta {
  display: inline-block; margin-top: .8rem; padding: .5rem 1.2rem; border-radius: var(--radius-pill);
  background: #fff; color: var(--ink); font-weight: 600; font-size: .88rem;
}

/* ============ responsive ============ */
@media (max-width: 900px) {
  .plan-grid { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; }
  .ai-grid { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; }
  .proof-band { grid-template-columns: 1fr; gap: 2rem; }
  .mock-body { grid-template-columns: 60px 1fr; }
  .mock-panel { display: none; }
}
@media (max-width: 720px) {
  .site-footer > .wrap:first-child { grid-template-columns: 1fr; }
  .rb-compare { grid-template-columns: 1fr; }
  .row2 { grid-template-columns: 1fr; }
  .enterprise-strip { flex-direction: column; align-items: stretch; }
}
/* phone: one-row header — compact brand + nowrap CTA, nav behind hamburger */
@media (max-width: 640px) {
  .site-header .wrap { gap: .6rem; padding-left: 1rem; padding-right: 1rem; }
  .site-header .brand { font-size: 1.05rem; }
  .site-header .brand-logo { height: 26px; width: 26px; margin-right: .4rem; }
  .site-header .btn { white-space: nowrap; }
  .site-header .btn-header { padding: .5rem .9rem; font-size: .82rem; margin-left: .1rem; }
  .nav-toggle { width: 44px; height: 44px; }
  .btn-row .btn { flex: 1 1 auto; }
  .mock-body { grid-template-columns: 1fr; }
  .mock-rail { flex-direction: row; border-right: 0; border-bottom: 1px solid var(--line); padding: .5rem; justify-content: space-around; }
  .mock-rail span { width: auto; padding: .4rem .6rem; }
  .mock-rail em { display: none; }
  #to-top { right: 1rem; bottom: 1rem; }
  .eyebrow { letter-spacing: .06em; }
}

/* ============ reduced motion: everything still, everything visible ============ */


/* ================================================================
   MOTION SYSTEM v2 — adopted from motion.so deep inspection
   (hidden_files/motion-so-inspection-20261001.md). Tokens verbatim.
   Discipline: nothing over .5s except the 2s shimmer; everything
   Cinematic motion always. No JS animation libraries.
   ================================================================ */
:root{
  --duration-stagger:40ms;
  --duration-quick:.15s; --duration-fast:.25s; --duration-medium:.35s;
  --duration-slow:.4s;  --duration-very-slow:.5s;
  --ease-smooth-out:cubic-bezier(.22,1,.36,1);   /* the house curve */
  --ease-hero-word:cubic-bezier(.16,1,.3,1);     /* snappier, hero only */
  --ease-spring:cubic-bezier(.34,1.35,.64,1);    /* physical spring */
  --distance-medium:12px;
  --blur-small:2px; --blur-medium:3px;
  --toggle-travel:100%;
  --shimmer-dur:2s;
}

/* ---------- 1. blur + rise + stagger (the signature) ---------- */
/* JS arms it (adds .t-armed) so content is fully visible without JS. */
.t-stagger .t-stagger-line{
  transition:opacity var(--duration-very-slow) var(--ease-smooth-out),
             transform var(--duration-very-slow) var(--ease-smooth-out),
             filter var(--duration-very-slow) var(--ease-smooth-out);
}
.t-stagger.t-armed .t-stagger-line{
  opacity:0; transform:translateY(var(--distance-medium)); filter:blur(var(--blur-medium));
  will-change:transform,opacity,filter;
}
.t-stagger.t-armed.is-shown .t-stagger-line{opacity:1;filter:blur(0);transform:translateY(0)}
.t-stagger-line--2{transition-delay:var(--duration-stagger)}
.t-stagger-line--3{transition-delay:calc(var(--duration-stagger)*2)}
.t-stagger-line--4{transition-delay:calc(var(--duration-stagger)*3)}
.t-stagger-line--5{transition-delay:calc(var(--duration-stagger)*4)}
.t-stagger-line--6{transition-delay:calc(var(--duration-stagger)*5)}
.t-stagger-line--7{transition-delay:calc(var(--duration-stagger)*6)}
.t-stagger-line--8{transition-delay:calc(var(--duration-stagger)*7)}

/* ---------- 2. word-by-word hero blur-in ---------- */
@keyframes hero-word-in{
  0%{opacity:0;filter:blur(8px);transform:translateY(4px) scale(.98)}
  to{opacity:1;filter:blur(0);transform:translateY(0) scale(1)}
}
.hero-word{display:inline-block;animation:hero-word-in .52s var(--ease-hero-word) both;animation-delay:var(--wd,0ms)}
.em-serif{font-family:Georgia,'Times New Roman',serif;font-style:italic;letter-spacing:-.01em}

/* ---------- 3. photographic hero band (gradient + stock, not flat) ---------- */
.hero-band{position:relative;isolation:isolate;overflow:hidden}
.hero-band::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:url(/assets/img/stock/hero-abstract.jpg) center 30%/cover no-repeat;
  opacity:.42;transform:scale(var(--hd-scale,1.04)) translateY(var(--hd-y,0px));
}
.hero-band::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(135deg,rgba(255,255,255,.38) 0%,rgba(255,255,255,.3) 52%,rgba(255,255,255,.35) 100%);
}
.price-hero{position:relative;isolation:isolate;overflow:hidden}
.price-hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:url(/assets/img/stock/hero-abstract.jpg) center 70%/cover no-repeat;
  opacity:.3;transform:scale(var(--hd-scale,1.06)) translateY(var(--hd-y,0px));
}
.price-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(135deg,rgba(255,255,255,.4) 0%,rgba(255,255,255,.35) 52%,rgba(255,255,255,.4) 100%);
}

/* ---------- 4. living editor mockup ---------- */
.mockup{position:relative;transform:translateY(0);transition:transform var(--duration-medium) var(--ease-smooth-out),box-shadow var(--duration-medium) var(--ease-smooth-out)}
.mockup:hover{transform:translateY(-6px)}
/* toolbar sequence: tools highlight in a 10s loop */
.mock-rail span{animation-delay:calc(var(--i,0)*2s)}
.mock-rail span b{transition:color var(--duration-fast) var(--ease-smooth-out)}
/* fake cursor: moves in, drags the design, settles */
.mock-canvas{position:relative;overflow:hidden}
.mock-cursor{
  position:absolute;left:8%;top:12%;z-index:3;width:18px;height:18px;pointer-events:none;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.25));
  
}
.mock-cursor svg{display:block}
/* the design nudges while the cursor "drags" it */
.mock-design{}
/* layers cascade in when the mockup enters */
.mockup.is-shown .mock-layers i{
  animation:layer-in var(--duration-medium) var(--ease-smooth-out) both;
  animation-delay:calc(var(--i,0)*90ms + .35s);
}
@keyframes layer-in{from{opacity:0;transform:translateX(-8px);filter:blur(2px)}to{opacity:1;transform:none;filter:blur(0)}}
/* brand swatches pop on hover */
.mock-swatches i{transition:transform var(--duration-fast) var(--ease-spring);cursor:pointer}
.mock-swatches i:hover{transform:scale(1.35)}
/* export button: periodic shimmer sweep + hover lift */
.mock-export{position:relative;overflow:hidden;transition:transform var(--duration-fast) var(--ease-smooth-out),box-shadow var(--duration-fast) var(--ease-smooth-out)}
.mock-export::after{
  content:"";position:absolute;top:0;bottom:0;width:40%;left:var(--es-left,-60%);
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
}
.mock-export:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(255,255,255,.22)}

/* ---------- 5. template filmstrip marquee (pure CSS) ---------- */
.filmstrip{overflow:hidden;position:relative;margin:0 calc(-1*var(--wrap-pad,0px));padding:.5rem 0 1.5rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.filmstrip-track{display:flex;gap:1.25rem;width:max-content;padding:0 1.25rem}
.filmstrip:hover .filmstrip-track{animation-play-state:paused}
.filmstrip .tile{flex:0 0 300px;margin:0}
.filmstrip::after{ /* slow shimmer wash over the strip */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.14) 50%,transparent 60%);
  background-size:220% 100%;background-position:var(--ss-pos,200% 0);
}

/* ---------- 6. spring billing toggle ---------- */
.billing-toggle{position:relative}
.billing-toggle .toggle-knob{
  position:absolute;top:.3rem;bottom:.3rem;left:.3rem;width:calc(50% - .3rem);
  background:#fff;border-radius:var(--radius-pill);z-index:0;
  box-shadow:0 2px 10px rgba(0,0,0,.35);
}
.billing-toggle button{position:relative;z-index:1;min-width:7.5rem;background:transparent!important;transition:color var(--duration-fast) var(--ease-smooth-out)}
.billing-toggle button.on{color:var(--ink)}
.billing-toggle button:not(.on){color:#fff}
/* price numerals crossfade on toggle */
.amount,.per{transition:opacity var(--duration-fast) var(--ease-smooth-out),transform var(--duration-fast) var(--ease-smooth-out)}
.amount.swap{opacity:0;transform:translateY(6px);filter:blur(2px)}

/* ---------- 7. grid-rows accordion (FAQ) ---------- */
.acc-item{border:1px solid var(--line);border-radius:var(--radius-input);margin:.6rem 0;background:#fff;overflow:hidden;
  transition:border-color var(--duration-fast) var(--ease-smooth-out),background var(--duration-fast) var(--ease-smooth-out)}
.acc-item:hover{border-color:#c9b3f5}
.acc-item.open{border-color:#c9b3f5;background:#101010}
.acc-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:none;border:0;padding:.95rem 1.15rem;font:inherit;font-weight:700;cursor:pointer;text-align:left;color:var(--ink);
}
.acc-icon{position:relative;flex:0 0 1.4em;height:1.4em;display:inline-grid;place-items:center}
.acc-icon i{grid-area:1/1;font-style:normal;font-weight:400;font-size:1.3rem;line-height:1;color:var(--violet-ink);
  transition:opacity var(--duration-fast) ease-in-out,filter var(--duration-fast) ease-in-out,transform var(--duration-fast) ease-in-out}
.acc-icon i:last-child{opacity:0;filter:blur(2px);transform:scale(.25)}
.acc-item.open .acc-icon i:first-child{opacity:0;filter:blur(2px);transform:scale(.25)}
.acc-item.open .acc-icon i:last-child{opacity:1;filter:blur(0);transform:scale(1)}
.acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--duration-fast) var(--ease-smooth-out)}
.acc-item.open .acc-panel{grid-template-rows:1fr}
.acc-inner{overflow:hidden;min-height:0}
.acc-inner p{color:#ffffff;margin:0;padding:0 1.15rem 1.05rem}

/* ---------- 8. blur-in toasts ---------- */
.toast-stack{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:.5rem;align-items:center;pointer-events:none}
.toast{
  background:#14161a;color:#fff;font-size:.9rem;font-weight:600;
  padding:.7rem 1.25rem;border-radius:var(--radius-pill);
  box-shadow:0 12px 32px rgba(10,5,30,.3);display:flex;align-items:center;gap:.6rem;
  
}
.toast.out{}

/* ---------- 9. skeleton shimmer ---------- */

/* ---------- 10. photographic split sections ---------- */
.photo-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;margin:0 auto}
.photo-split .photo{position:relative;overflow:hidden;border-radius:var(--radius-card);box-shadow:var(--shadow-lift)}
.photo-split .photo img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3;
  transition:transform var(--duration-very-slow) var(--ease-smooth-out)}
.photo-split .photo:hover img{transform:scale(1.045)}
.photo-split .photo::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(200deg,transparent 55%,rgba(0,0,0,.4));pointer-events:none}
.photo-split h2{font-size:clamp(1.6rem,3vw,2.3rem);letter-spacing:-.02em;margin:0 0 .9rem}
.photo-split p.lede{margin:0 0 1.4rem}
@media(max-width:820px){.photo-split{grid-template-columns:1fr}.photo-split .photo{order:-1}}

/* ---------- 11. house-curve hovers everywhere ---------- */
.card,.tile,.ai-card,.price-card,.tpl-card{
  transition:transform var(--duration-medium) var(--ease-smooth-out),
             box-shadow var(--duration-medium) var(--ease-smooth-out),
             border-color var(--duration-fast) var(--ease-smooth-out)!important;
}
.card:hover,.tile:hover,.ai-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift)}
.price-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift)}
.price-card.hot:hover{transform:translateY(-5px) scale(1.01)}
.btn{transition:transform var(--duration-fast) var(--ease-smooth-out),box-shadow var(--duration-fast) var(--ease-smooth-out),background var(--duration-fast) var(--ease-smooth-out)}
.btn:hover{transform:translateY(-2px)}
.tile-cta{display:inline-flex;align-items:center;gap:.45rem;font-weight:700}
.tile-cta .arr{position:relative;display:inline-grid;width:1em;height:1em}
.tile-cta .arr i{grid-area:1/1;font-style:normal;transition:opacity var(--duration-fast) ease-in-out,filter var(--duration-fast) ease-in-out,transform var(--duration-fast) ease-in-out}
.tile-cta .arr i:last-child{opacity:0;filter:blur(2px);transform:translateX(-6px)}
a:hover .tile-cta .arr i:first-child,a:focus-visible .tile-cta .arr i:first-child{opacity:0;filter:blur(2px);transform:translateX(6px)}
a:hover .tile-cta .arr i:last-child,a:focus-visible .tile-cta .arr i:last-child{opacity:1;filter:blur(0);transform:translateX(0)}
/* count-up numerals */
.stat-num{font-variant-numeric:tabular-nums}

/* ---------- 12. reduced motion: everything still, everything visible ---------- */




/* ---- 1. page load: top progress bar sweep ---- */
body.lux::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 2000;
  background: linear-gradient(90deg, #3a3a3a, #ffffff, #3a3a3a);
  transform-origin: left center; pointer-events: none;
  transform: scaleX(var(--lb-x,0)); opacity: var(--lb-op,1);
}

/* ---- 2. page load: whole-page fade ---- */
body.lux {  }

/* ---- 3. header drops in ---- */
.site-header {  }

/* ---- 4. header gradient underline grows ---- */
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, #3a3a3a, #ffffff, #3a3a3a);
  transform-origin: left center; transform: scaleX(var(--hl-x,0));
}

/* ---- 5. brand logo pops in ---- */
.site-header .brand { display: inline-flex;  }

/* ---- 6. brand dot breathes (ambient) ---- */
.brand .dot { display: inline-block;  }

/* ---- 7. nav links stagger in ---- */
.site-header .site-nav a {  }
.site-header .site-nav a:nth-child(1) { animation-delay: .08s; }
.site-header .site-nav a:nth-child(2) { animation-delay: .13s; }
.site-header .site-nav a:nth-child(3) { animation-delay: .18s; }
.site-header .site-nav a:nth-child(4) { animation-delay: .23s; }
.site-header .site-nav a:nth-child(5) { animation-delay: .28s; }
.site-header .site-nav a:nth-child(6) { animation-delay: .33s; }

/* ---- 8. hamburger pops in ---- */
.nav-toggle {  }

/* ---- 9. header CTA pops in ---- */
.btn-header {  }

/* ---- 10. main content rises on load ---- */
main {  }

/* ---- 11. cards pop in ---- */
.auth-card, .card {  }

/* ---- 12. tag pill pops ---- */
.tag { display: inline-block;  }

/* ---- 13. h1 blur-rise ---- */
main h1 {  }

/* ---- 14. h1 accent bar grows (not on hero — hero h1 is centered) ---- */
main h1::after {
  content: ""; display: block; width: 64px; height: 4px; border-radius: 2px;
  margin-top: .65rem; background: linear-gradient(90deg, var(--violet), var(--pink));
  transform: scaleX(var(--h1b-x,0)); transform-origin: left center;
}
.hero h1::after { display: none; }

/* ---- 15. eyebrow badge pops ---- */
.eyebrow {  }

/* ---- 16. lede fades up ---- */
.lede {  }

/* ---- v3: hover / active / focus ---- */

/* ---- 17. nav underline sweeps in ---- */
@keyframes pa-navline { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.site-nav a { position: relative; }
.site-nav a::after {
  content: ""; position: absolute; left: 2px; right: 2px; bottom: -3px; height: 2px;
  border-radius: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right center;
}
.site-nav a:hover::after, .site-nav a:focus-visible::after {
  transform-origin: left center; animation: pa-navline .3s var(--ease-smooth-out) both;
}

/* ---- 18. nav link lifts ---- */
@keyframes pa-navlift { from { transform: translateY(0); } to { transform: translateY(-2px); } }
.site-nav a:hover { animation: pa-navlift .25s var(--ease-smooth-out) both; }

/* ---- 19. brand logo spins on hover ---- */
@keyframes pa-brandspin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.brand:hover .brand-logo { animation: pa-brandspin .55s var(--ease-smooth-out); }

/* ---- 20. button lift ---- */
@keyframes pa-btnlift { from { transform: translateY(0); } to { transform: translateY(-2px); } }
.btn:hover { animation: pa-btnlift .25s var(--ease-smooth-out) both; }

/* ---- 21. button press ---- */
@keyframes pa-btnpress { from { transform: scale(1); } to { transform: scale(.95); } }
.btn:active { animation: pa-btnpress .15s ease-out both; }

/* ---- 22. button shine sweeps ---- */
@keyframes pa-btnshine { from { left: -60%; } to { left: 135%; } }
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ""; position: absolute; top: -10%; bottom: -10%; width: 42%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg); pointer-events: none;
}
.btn:hover::after { animation: pa-btnshine .6s ease-out; }

/* ---- 23+24. gradient button: ambient pan + glow breathe ---- */
.btn-grad {
  background-size: 200% 200%;
  
}

/* ---- 25. hamburger bars pulse on hover ---- */
@keyframes pa-burger {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(.72); }
}
.nav-toggle:hover span { animation: pa-burger .5s ease-in-out; }
.nav-toggle:hover span:nth-child(2) { animation-delay: .06s; }
.nav-toggle:hover span:nth-child(3) { animation-delay: .12s; }

/* ---- 26. focus ring blooms ---- */
@keyframes pa-focusring {
  from { outline-offset: 6px; outline-color: transparent; }
  to { outline-offset: 2px; }
}
:focus-visible {
  outline: 2px solid var(--violet); outline-offset: 2px;
  animation: pa-focusring .25s var(--ease-smooth-out);
}

/* ---- 27. card shine on hover ---- */
@keyframes pa-cardshine { from { left: -70%; opacity: 0; } 20% { opacity: 1; } to { left: 140%; opacity: 0; } }
.card, .auth-card { position: relative; overflow: hidden; }
.card::after, .auth-card::after {
  content: ""; position: absolute; top: -10%; bottom: -10%; width: 45%; left: -70%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-18deg); pointer-events: none; opacity: 0;
}
.card:hover::after, .auth-card:hover::after { animation: pa-cardshine .7s ease-out; }

/* ---- 28. content link underline grows ---- */
@keyframes pa-linkline { from { transform: scaleX(0); } to { transform: scaleX(1); } }
main p a, main li a { position: relative; }
main p a::after, main li a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: right center;
}
main p a:hover::after, main li a:hover::after {
  transform-origin: left center; animation: pa-linkline .28s var(--ease-smooth-out) both;
}

/* ---- 29. content link nudges ---- */
@keyframes pa-linknudge { from { transform: translateX(0); } to { transform: translateX(2px); } }
main p a:hover, main li a:hover { animation: pa-linknudge .25s var(--ease-smooth-out) both; }

/* ---- 30. footer link slides ---- */
@keyframes pa-footerlink { from { transform: translateX(0); } to { transform: translateX(4px); } }
.site-footer a:hover { animation: pa-footerlink .25s var(--ease-smooth-out) both; }

/* ---- 31. tag wiggles ---- */
@keyframes pa-taghover {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-4deg) scale(1.05); }
  75% { transform: rotate(4deg) scale(1.05); }
}
.tag:hover { animation: pa-taghover .4s ease-in-out; }

/* ---- 32. content image zooms ---- */
@keyframes pa-imgzoom { from { transform: scale(1); } to { transform: scale(1.045); } }
main img { overflow: hidden; }
main img:hover { animation: pa-imgzoom .5s var(--ease-smooth-out) both; }

/* ---- 33. back-to-top hops ---- */
@keyframes pa-tophover {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
#to-top:hover { animation: pa-tophover .35s ease-in-out; }

/* ---- v3: scroll-driven entrances ----
   Triggered by IntersectionObserver (.in), released on animationend (.done).
   The GSAP driver (gsap-motion.js) adds .in on entry: CSS
   animation-timeline: view() cannot see through ScrollSmoother's transformed
   content, so IO drives these instead. William 2026-10-02. */

/* ---- 34. h2 rises into view ---- */
/* v4 2026-10-17: entrance motion for this selector moved to the
   GSAP-only universal text entrance in gsap-motion.js (same motion
   values); CSS no longer hides or keyframe-animates it. */



/* ---- 35. paragraphs fade up ---- */
/* v4 2026-10-17: entrance motion for this selector moved to the
   GSAP-only universal text entrance in gsap-motion.js (same motion
   values); CSS no longer hides or keyframe-animates it. */



/* ---- 36. list items pop ---- */
/* v4 2026-10-17: entrance motion for this selector moved to the
   GSAP-only universal text entrance in gsap-motion.js (same motion
   values); CSS no longer hides or keyframe-animates it. */



/* ---- 37. tables rise ---- */
/* v4 2026-10-17: entrance motion for this selector moved to the
   GSAP-only universal text entrance in gsap-motion.js (same motion
   values); CSS no longer hides or keyframe-animates it. */



/* ---- 38. detail cards pop ---- */
/* v4 2026-10-17: entrance motion for this selector moved to the
   GSAP-only universal text entrance in gsap-motion.js (same motion
   values); CSS no longer hides or keyframe-animates it. */



/* ---- 39. footer rises ---- */
/* v4 2026-10-17: entrance motion for this selector moved to the
   GSAP-only universal text entrance in gsap-motion.js (same motion
   values); CSS no longer hides or keyframe-animates it. */
/* .in is still added to .site-footer for the ::before line below. */


/* ---- 40. footer top line glows in ---- */
.site-footer::before {
  content: ""; display: block; height: 2px;
  background: linear-gradient(90deg, transparent, var(--violet), var(--pink), transparent);
  transform: scaleX(0); opacity: 0;
}
.site-footer.in::before {  }

/* ---- 41. footer headings fade ---- */
/* v4 2026-10-17: entrance motion for this selector moved to the
   GSAP-only universal text entrance in gsap-motion.js (same motion
   values); CSS no longer hides or keyframe-animates it. */


/* ---- 42. legal line fades ---- */
/* v4 2026-10-17: entrance motion for this selector moved to the
   GSAP-only universal text entrance in gsap-motion.js (same motion
   values); CSS no longer hides or keyframe-animates it. */
/* legal entrances once on load via GSAP (IO cannot reach it). */

/* ---- 43. footer brand pops — CONVERTED to GSAP (gsap-motion.js footer block) ---- */

/* ---- 44. footer columns cascade — CONVERTED to GSAP (gsap-motion.js footer block) ---- */

/* ---- v3: state-based (JS-toggled classes / user actions) ---- */

/* ---- 45. header gains depth on scroll ---- */
.site-header.scrolled {  }

/* ---- 46. mobile menu items drop in ---- */
.site-nav.open a {  }
.site-nav.open a:nth-child(2) { animation-delay: .05s; }
.site-nav.open a:nth-child(3) { animation-delay: .1s; }
.site-nav.open a:nth-child(4) { animation-delay: .15s; }
.site-nav.open a:nth-child(5) { animation-delay: .2s; }
.site-nav.open a:nth-child(6) { animation-delay: .25s; }

/* ---- 47. disclosure caret flips open ---- */
main details summary { list-style: none; cursor: pointer; }
main details summary::-webkit-details-marker { display: none; }
main details summary::after {
  content: "\25BE"; display: inline-block; margin-left: .5em;
  color: var(--violet); font-size: .85em;
  transform: rotate(var(--caret-r,0deg));
}
main details[open] summary::after {  }

/* ---- 48. back-to-top springs in ---- */
#to-top.show {  }

/* ---- v3: ambient ---- */

/* ---- 49. auth card ambient dot drift ---- */
.auth-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background-image: radial-gradient(rgba(125,42,232,.10) 1.5px, transparent 1.6px);
  background-size: 28px 28px;
  background-position: var(--dd-pos,0 0); opacity: var(--dd-op,.5); --dotdrift-dur: 9;
}
/* ---- end MOTION SYSTEM v3 ---- */

/* ---- v3 extras: card hover lift + h3 scroll rise (blog-class pages) ---- */

/* ---- 50. cards lift on hover ---- */
@keyframes pa-cardlift { from { transform: translateY(0); } to { transform: translateY(-4px); } }
.card:hover, .auth-card:hover { animation: pa-cardlift .3s var(--ease-smooth-out) both; }

/* ---- 51. h3 rises into view ---- */
/* v4 2026-10-17: entrance motion for this selector moved to the
   GSAP-only universal text entrance in gsap-motion.js (same motion
   values); CSS no longer hides or keyframe-animates it. */


/* ================================================================
   PHOTOGRAPHY-FIRST OVERRIDES (William 2026-10-01):
   decorative gradients replaced with real stock photography.
   Only functional readability scrims remain (solid rgba, not gradients).
   ================================================================ */
.hero-band {
  background: #000000 url(/assets/img/stock/hero-abstract.jpg) center 30%/cover no-repeat;
}
.hero-band::after {
  background: rgba(0,0,0, .62); /* solid readability scrim */
}
.hero-band::before {
  background: url(/assets/img/stock/team-collaboration.jpg) center 70%/cover no-repeat;
  opacity: .28;
}
.price-hero {
  background: #000000 url(/assets/img/stock/designer-workstation.jpg) center 40%/cover no-repeat;
}
.price-hero::after {
  background: rgba(0,0,0, .66); /* solid readability scrim */
}
.cta-band {
  background: #000000 url(/assets/img/stock/team-collaboration.jpg) center 60%/cover no-repeat;
  position: relative;
}
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(0,0,0, .68); /* solid readability scrim */
}
.cta-band > * { position: relative; z-index: 1; }
a.hero-lux, section.hero-lux {
  background: #000000 url(/assets/img/stock/hero-abstract.jpg) center 30%/cover no-repeat;
  color: #fff; position: relative;
}
.btn-grad, a.btn-grad {
  background: var(--violet); /* solid brand color, no gradient */
}
.btn-grad:hover { background: var(--violet); filter: brightness(.93); }
/* auth card: photographic texture instead of the dot pattern */
.auth-card { position: relative; overflow: hidden; }
.auth-card::before {
  background-image: url(/assets/img/stock/designer-workstation.jpg);
  background-size: cover; background-position: center;
  opacity: var(--dd-op,.12); --dotdrift-dur: 14;
}


/* 2026-10-05 upgrade audit: inline code must never clip on narrow viewports
   (the /docs/api/ GET URL rendered cut-off at 390px because UA default
   white-space:pre prevented wrapping). Long tokens break instead. */
code{white-space:break-spaces;overflow-wrap:anywhere}
pre{overflow-x:auto;white-space:pre-wrap;overflow-wrap:anywhere}
.api-pre{background:#0b1020;color:#dbe7ff;border-radius:12px;padding:16px;font-size:13px;line-height:1.55;max-height:340px;overflow:auto}

/* ================================================================
   B/W THEME R2 (2026-10-24): repair contrast regressions from the
   violet->white token remap. 2026-10-29: grayscale removed - images
   retain default color per owner instruction; B/W interface stays.
   Paint surfaces only: leaf img boxes and dedicated photo pseudo-
   elements. No ancestor filters/veils, no fixed-position traps,
   no asset removal or replacement. Artwork preserved.
   ================================================================ */

/* 1. Raster content images in page content (leaf boxes, no descendants) */
/* Scoped to owned marketing asset paths only: tool input previews,
   customer uploads, template editable artwork, output/download pixels
   and functional pickers are NOT served from these prefixes and stay
   untouched (main ruling 2026-10-24). */


/* 3. Element-carried photos relocated under their existing scrims
      (identical stack order and scrim opacity) */
.hero-band { background: #000; }
.hero-band::after {
  background: linear-gradient(rgba(0,0,0,.62), rgba(0,0,0,.62)),
    url(/assets/img/stock/hero-abstract.jpg) center 30%/cover no-repeat;
}
.price-hero { background: #000; }
.price-hero::after {
  background: linear-gradient(rgba(0,0,0,.66), rgba(0,0,0,.66)),
    url(/assets/img/stock/designer-workstation.jpg) center 40%/cover no-repeat;
}
.cta-band { background: #000; }
.cta-band::before {
  background: linear-gradient(rgba(0,0,0,.68), rgba(0,0,0,.68)),
    url(/assets/img/stock/team-collaboration.jpg) center 60%/cover no-repeat;
}
a.hero-lux, section.hero-lux { background: #000; isolation: isolate; }
.hero-lux::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url(/assets/img/stock/hero-abstract.jpg) center 30%/cover no-repeat;
}

/* 4. Contrast repairs after the token remap (white-on-white button,
      blue-tinted code panel) */
.btn-grad, a.btn-grad { background: #000; color: #fff; box-shadow: 0 0 0 1.5px rgba(255,255,255,.55); }
.btn-grad:hover, a.btn-grad:hover { background: #111; color: #fff; box-shadow: 0 0 0 1.5px rgba(255,255,255,.75); filter: none; }
.api-pre { background: #0a0a0a; color: #f2f2f2; }

/* 5. Inline-styled photographic bands: element-carried bg photos whose
      only descendants are white captions/scrims (relative/absolute, no
      fixed-position content). Grayscale leaves white text untouched. */
.tool-hero-band, .pg-backdrop { }


/* 6. Base .btn white-on-white repair (var(--violet)=#fff + color #fff
      after token remap). Rings stay stripped per the authored
      borderless/no-lines policy (bw-borderless:218, interface-no-lines:4);
      flat white-text CTAs match the live design language. */
.btn, .btn-light, .btn-grad, a.btn-grad { background: #000; color: #fff; }

/* Pro plan emphasis + ghost CTA affordance (main ruling 2026-10-24):
   filled dark-gray surfaces with white text, spacing/type only.
   No borders, no shadows, no copy change. Requires the matching
   carve-out in bw-borderless-20261014.css universal background rule. */
.price-card.hot { background-color: #161616; padding: 2.5rem 2.1rem; }
.price-card.hot .amount { font-size: 2.9rem; }
.price-card.hot .popular-badge { letter-spacing: .04em; }
.btn.ghost, a.btn.ghost { background-color: #161616; }