:root{
  --bg:#050505;
  --panel:#0d0d0d;
  --text:#f4f4f5;
  --muted:#a1a1aa;
  --line:rgba(255,255,255,.10);
  --line2:rgba(255,255,255,.14);
  --acc:#ff6a00;
  --r:18px;
  --r2:26px;
  --shadow:0 14px 42px rgba(0,0,0,.55);
  --max:1160px;
  --topbar-h: 64px;
}

*{box-sizing:border-box}
html,body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background: var(--bg);
  margin:0;
  position:relative;
  overflow-x:hidden;
}

/* Fixed corner glows so they don’t scroll/cut off as you move down the page. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(900px 600px at 10% -8%, rgba(255,106,0,.12), rgba(255,106,0,0) 62%),
    radial-gradient(900px 600px at 92% 6%, rgba(255,106,0,.10), rgba(255,106,0,0) 60%),
    radial-gradient(1200px 600px at 50% 0%, rgba(255,255,255,.04), rgba(255,255,255,0) 60%);
  filter: blur(0px);
  opacity: .95;
}

/* Ensure content sits above the fixed glow layer. */
body > *{
  position:relative;
  z-index:1;
}

html{scroll-behavior:smooth}


a{color:inherit}
b,strong{color:var(--text)}
.muted{color:var(--muted)}
.tiny{font-size:.84rem;color:rgba(244,244,245,.68)}
.wrap{width:min(var(--max), calc(100% - 40px)); margin:0 auto}

.skip{position:absolute; left:-999px; top:10px; background:rgba(10,10,10,.95); border:1px solid var(--line2); padding:10px 12px; border-radius:12px}
.skip:focus{left:10px; z-index:9999}

.topbar{
  /* Fixed so it reliably stays in view once revealed (some sticky edge-cases on desktop). */
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:40;
  background:rgba(5,5,5,.76);
  backdrop-filter: blur(12px);
  border-bottom:1px solid var(--line);
  transition: opacity .22s ease, transform .22s ease;
}

/* Reserve space for the fixed topbar so anchors don't land underneath it. */
main{ padding-top: var(--topbar-h); }
.topbar.topbar--hidden{
  opacity:0;
  transform: translateY(-12px);
  pointer-events:none;
}
.topbar__inner{display:flex; align-items:center; justify-content:flex-start; gap:14px; padding:10px 0}

.brand{display:flex; align-items:center; gap:10px}
.brand__mark{width:12px; height:12px; border-radius:999px; background:var(--acc); box-shadow:0 0 0 5px rgba(255,106,0,.16)}
.brand__name{font-weight:950; letter-spacing:.2px}
.badge{font-size:.78rem; font-weight:850; border-radius:999px; padding:6px 10px; border:1px solid rgba(255,106,0,.45); background:rgba(255,106,0,.10)}
.badge--quiet{border-color:var(--line2); background:rgba(255,255,255,.04); color:rgba(244,244,245,.78)}

.topbar .badge{padding:5px 8px; font-size:.74rem}

.nav{display:flex; align-items:center; justify-content:center; gap:10px; flex:1; margin:0 auto; min-width:0}
.nav__link{
  text-decoration:none;
  padding:7px 8px;
  border-radius:12px;
  color:rgba(244,244,245,.84);
  font-size:.94rem;
  white-space:nowrap;
}
.nav__link:hover{background:rgba(255,255,255,.05)}
.topbar__cta{display:flex; gap:8px}

.topbar__cta .btn{padding:8px 10px; font-size:.92rem; border-radius:12px}

@media (max-width:1120px){
  .nav{gap:8px}
  .nav__link{padding:6px 7px; font-size:.92rem}
  .topbar .badge--quiet{display:none}
}

.btn{
  border:1px solid var(--line2);
  background:rgba(255,255,255,.04);
  color:var(--text);
  padding:10px 12px;
  border-radius:14px;
  cursor:pointer;
  font-weight:900;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{transform:translateY(-1px); background:rgba(255,255,255,.06)}
.btn:focus-visible{outline:2px solid rgba(255,106,0,.7); outline-offset:2px}
.btn--primary{
  border-color: rgba(255,106,0,.58);
  background: rgba(255,106,0,.06);
}
.btn--primary:hover{
  background: linear-gradient(180deg, rgba(255,106,0,.16), rgba(255,106,0,.08));
  box-shadow: 0 0 0 1px rgba(255,106,0,.16);
}
.btn--primary:active{
  background: linear-gradient(180deg, rgba(255,106,0,.20), rgba(255,106,0,.10));
}

.btn--ghost{background:transparent}
.btn--sm{padding:9px 10px; font-size:.92rem}
.btn--lg{padding:12px 14px; font-size:1rem}

.hero{
  position:relative;
  min-height:88vh;
  padding:76px 0 26px;
  border-bottom:1px solid var(--line);
}

/* --- Minimal hero (single message + scroll cue) --- */
:root{ --topbar-h: 64px; }
.hero--minimal{
  height: 100svh;      /* NEW: lock hero to one screen */
  min-height: 100vh;
  padding:0;
  border-bottom:0;
  margin-top: calc(-1 * var(--topbar-h));
  padding-top: var(--topbar-h);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;

  position:relative;
  overflow:hidden;

  background:#f7f7f8;
  color:#121212;
}

/* Background wash (no video on the minimal hero). */
.heroBg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}

.heroBg__wash{
  position:absolute;
  inset:0;
  /* Keep text razor readable + fade into the dark site */
  background:
    radial-gradient(1200px 600px at 50% 18%, rgba(255,255,255,.88), rgba(247,247,248,.78) 52%, rgba(247,247,248,.60) 66%, rgba(5,5,5,.12) 80%, rgba(5,5,5,1) 100%),
    radial-gradient(900px 520px at 50% 24%, rgba(255,106,0,.10), rgba(255,255,255,0) 60%);
}
.hero--minimal h1{
  margin:0;
  /* Keep the hero message on a single line for desktop while staying readable on small screens */
  /* Slightly larger, still safe for one-line on desktop */
  font-size:clamp(1.2rem, 4.15vw, 3.1rem);
  line-height:1.04;
  letter-spacing:-.02em;
  font-family: "DM Serif Text", ui-serif, Georgia, serif;
  font-weight:400;
  white-space: nowrap;
  overflow:visible;
  /* Extra room so the swipe underline + glow never clips. */
  padding:.10em .12em .34em;
}

/* On very small screens, allow wrap instead of clipping */
@media (max-width: 520px){
  .hero--minimal h1{ white-space: normal; }
}

/* In hero only: DM Serif Text + italic/bold highlight + swipe underline */
.hero--minimal .hl{
  /* Softer, premium orange that blends with the wash */
  color: var(--acc);
  font-family: "DM Serif Text", ui-serif, Georgia, serif;
  font-style: italic;
  font-weight: 700; /* DM Serif Text is 400; browsers will faux-bold if needed */
  text-decoration:none;
  position:relative;
  z-index:0;
  isolation:isolate;
  display:inline-block;
  /* Give italic glyphs + underline glow room so nothing clips at the edges */
  padding:0 .12em .28em;
  margin:0;
  overflow:visible;

  /* Blend the highlight into the background slightly (text gradient) */
  background: linear-gradient(180deg, rgba(255,106,0,.92), rgba(255,106,0,.68));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 12px 28px rgba(255,106,0,.12);
}

/* Slide-in headline on load (premium, minimal). */
.hero--minimal h1{ animation: heroSlideIn .75s cubic-bezier(.2,.9,.2,1) both; }
  .hero--minimal .kicker{ animation: heroFadeIn .6s ease both; animation-delay:.08s; }
  .hero--minimal .scrollCue{ animation: heroFadeIn .6s ease both; animation-delay:.14s; }

@keyframes heroSlideIn{
  from{ opacity:0; transform: translateX(-52px); }
  to{ opacity:1; transform: translateX(0); }
}
@keyframes heroFadeIn{
  from{ opacity:0; transform: translateY(6px); }
  to{ opacity:1; transform: translateY(0); }
}

/* Keep a subtle marker-style highlight behind the word */
.hero--minimal .hl::before{
  background:
    radial-gradient(closest-side, rgba(255,106,0,.18), rgba(255,106,0,0));
  z-index:-2;
}

/* Swipe underline (instead of a straight text-decoration underline) */
.hero--minimal .hl::after{
  content:"";
  position:absolute;
  left:.02em;
  right:.02em;
  bottom:-.14em;
  height:.22em;
  border-radius:999px;
  background:
    linear-gradient(90deg,
      rgba(255,106,0,0) 0%,
      rgba(255,106,0,.82) 16%,
      rgba(255,106,0,.82) 84%,
      rgba(255,106,0,0) 100%);
  transform: rotate(-2deg) skewX(-10deg);
  transform-origin:center;
  filter: drop-shadow(0 2px 0 rgba(255,106,0,.10));
  z-index:-1;
  pointer-events:none;
}

.hero--minimal .kicker{
  margin:14px auto 0;
  background:rgba(255,255,255,.72);
  border-color:rgba(0,0,0,.12);
  color:rgba(0,0,0,.82);
}
.hero--minimal .kicker .dot{box-shadow:0 0 0 5px rgba(255,106,0,.18)}
.heroMinimal{
  /* Wider container so the one-line hero + underline/glow never clips */
  width: min(1240px, calc(100% - 80px));
  display: grid;
  justify-items: center;
  position: relative;
  z-index: 2;
  overflow: visible;
}

@media (max-width: 820px){
  .heroMinimal{ width: min(980px, calc(100% - 40px)); }
}

/* Fade-away transition as the user scrolls past the hero */
.hero--minimal{
  --heroAlpha: 1;
  --heroY: 0px;
  --heroBgAlpha: 1;
}
.hero--minimal .heroMinimal{
  opacity: var(--heroAlpha);
  transform: translateY(var(--heroY));
  will-change: opacity, transform;
}
.hero--minimal .heroBg{
  opacity: var(--heroBgAlpha);
  will-change: opacity;
}

.scrollCue{
  margin-top:18px;
  display:grid;
  justify-items:center;
  gap:10px;
}
.scrollCue__text{font-size:.86rem; letter-spacing:.08em; text-transform:lowercase; color:rgba(0,0,0,.55)}
.scrollCue__btn{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.14);
  background:rgba(255,255,255,.76);
  color:rgba(0,0,0,.78);
  cursor:pointer;
  box-shadow: 0 12px 34px rgba(0,0,0,.18);
  animation: bob 1.35s ease-in-out infinite;
}
.scrollCue__btn:hover{animation-play-state: paused; transform: translateY(-1px); background:rgba(255,255,255,.92)}
.scrollCue__btn:active{transform: translateY(1px)}
.scrollCue__btn:focus-visible{outline:2px solid rgba(255,106,0,.7); outline-offset:3px}

@keyframes bob{
  0%,100%{ transform: translateY(0) }
  50%{ transform: translateY(6px) }
}

/* Hide legacy hero video layers if they exist */
.hero--minimal .hero__video,
.hero--minimal .hero__overlay{display:none}
.hero__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  filter: brightness(.62) contrast(1.05);
}
.hero__overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(5,5,5,.35), rgba(5,5,5,.70) 78%, rgba(5,5,5,1));
}

.hero__content{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:22px; align-items:center;
}
.kicker{
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid var(--line2);
  border-radius:999px;
  padding:8px 12px;
  background:rgba(5,5,5,.34);
  font-weight:900;
  color:rgba(244,244,245,.86);
}
.dot{width:8px; height:8px; border-radius:999px; background:var(--acc); box-shadow:0 0 0 4px rgba(255,106,0,.14)}
h1{margin:14px 0 10px; font-size:clamp(2rem, 4.3vw, 3.15rem); line-height:1.05}
.hl{
  color:var(--acc);
  position:relative;
  display:inline-block;
  text-decoration: underline;
  text-decoration-color: rgba(255,106,0,.9);
  text-decoration-thickness: .14em;
  text-underline-offset: .14em;
}
.hl::before{
  content:"";
  position:absolute;
  left:-.10em;
  right:-.10em;
  bottom:.10em;
  height:.62em;
  border-radius:999px;
  background: rgba(255,106,0,.14);
  z-index:-1;
}
.lead{font-size:1.12rem; color:rgba(244,244,245,.86); max-width:58ch}
.hero__ctas{display:flex; gap:12px; flex-wrap:wrap; margin-top:16px}
.hero__credLine{
  margin-top:12px;
  max-width:62ch;
  font-size:.92rem;
  line-height:1.35;
  color:rgba(244,244,245,.72);
}
.trust{margin:16px 0 0; padding:0; list-style:none; display:grid; gap:10px}
.trust li{
  padding-left:22px; position:relative;
  color:rgba(244,244,245,.80);
}
.trust li:before{
  content:""; position:absolute; left:0; top:.55em;
  width:10px; height:10px;
  border-radius:4px;
  border:1px solid rgba(255,106,0,.55);
  background:rgba(255,106,0,.10);
}
.pill{
  margin-top:16px;
  display:inline-flex;
  border:1px solid var(--line2);
  border-radius:999px;
  padding:10px 12px;
  background:rgba(5,5,5,.34);
  color:rgba(244,244,245,.80);
  font-size:.92rem;
}

.heroCard{
  border:1px solid var(--line2);
  border-radius:var(--r2);
  background:rgba(10,10,10,.55);
  backdrop-filter: blur(10px);
  box-shadow:var(--shadow);
  padding:16px;
  display:grid;
  gap:12px;
}
.heroCard__top{display:flex; justify-content:space-between; gap:12px; align-items:flex-start}
.heroCard__title{font-weight:950}
.meter{width:120px; height:8px; border-radius:999px; background:rgba(255,255,255,.10); overflow:hidden}
.meter__fill{height:100%; background:rgba(255,106,0,.70)}
.meter__label{display:block; margin-top:8px; font-size:.82rem; color:rgba(244,244,245,.72); text-align:right}
.heroCard__rows{display:grid; gap:10px}
.row{display:flex; justify-content:space-between; gap:12px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.03); padding:10px 12px}
.row__k{font-weight:900}
.row__v{color:rgba(244,244,245,.72); text-align:right}
.heroCard__actions{display:flex; justify-content:space-between; align-items:center; gap:12px}
.link{text-decoration:none; font-weight:950}
.link:hover{text-decoration:underline; text-decoration-color:rgba(255,106,0,.6)}

.hero__anchors{
  position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:22px;
}
.anchorCard{
  text-decoration:none;
  border:1px solid var(--line2);
  border-radius:var(--r);
  background:rgba(10,10,10,.50);
  backdrop-filter: blur(10px);
  padding:14px;
  transition: transform .15s ease, border-color .15s ease;
}
.anchorCard:hover{transform: translateY(-1px); border-color: rgba(255,106,0,.30)}
.anchorCard__t{font-weight:950}
.anchorCard__d{margin-top:6px; color:rgba(244,244,245,.72)}

.section{padding:64px 0; border-bottom:1px solid var(--line)}
.section--flush{padding-top:44px}
.section__head h2{margin:0; font-size:clamp(1.5rem, 2.6vw, 2rem)}
.section__head p{margin:10px 0 0}

.split{
  display:grid;
  grid-template-columns: 340px 1fr;
  gap:16px;
  margin-top:18px;
}
.selector{
  border:1px solid var(--line2);
  border-radius:var(--r);
  background:rgba(255,255,255,.03);
  overflow:visible;
}
.pbtn{
  width:100%;
  text-align:left;
  border:0;
  background:transparent;
  color:rgba(244,244,245,.86);
  padding:14px;
  cursor:pointer;
  border-bottom:1px solid var(--line);
  font-weight:950;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.pbtn:last-child{border-bottom:0}
.pbtn:hover{background:rgba(255,255,255,.04)}
.pbtn.is-active{background:rgba(255,106,0,.10)}
.ptag{
  font-size:.78rem;
  border:1px solid rgba(255,106,0,.45);
  background:rgba(255,106,0,.10);
  padding:4px 10px;
  border-radius:999px;
}
.panel{
  border:1px solid var(--line2);
  border-radius:var(--r2);
  background:rgba(255,255,255,.03);
  padding:16px;
}
.panel h3{margin:0 0 10px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px}
.card{
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(0,0,0,.18);
  padding:12px;
}
.card b{display:block; margin-bottom:6px}
.card p{margin:0; color:rgba(244,244,245,.74)}

.timeline{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:18px}
.timeline__item{border:1px solid var(--line2); border-radius:var(--r); background:rgba(255,255,255,.03); padding:14px; display:flex; gap:12px}
.timeline__n{width:30px; height:30px; border-radius:12px; border:1px solid rgba(255,106,0,.55); background:rgba(255,106,0,.10); display:flex; align-items:center; justify-content:center; font-weight:950}
.timeline__t{font-weight:950}
.timeline__d{color:rgba(244,244,245,.72); margin-top:4px}

.headRow{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
.notice{
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid var(--line2); border-radius:999px;
  padding:10px 12px;
  background:rgba(255,255,255,.03);
}
.notice__dot{width:10px; height:10px; border-radius:999px; background:var(--acc); box-shadow:0 0 0 4px rgba(255,106,0,.14)}

/* =========================
   ForgeFlow — About section
   Drop-in, scoped styles
========================= */

:root{
  /* Optional: uses your existing theme tokens if you have them */
  --ff-text: var(--text, #0b0b0c);
  --ff-muted: var(--muted, rgba(11,11,12,.74));
  --ff-border: var(--border, rgba(11,11,12,.14));

  --ff-accent: var(--accent, #ff7a18);
  --ff-accent-soft: rgba(255,122,24,.14);

  --ff-max: 1120px;
  --ff-pad: clamp(20px, 4vw, 48px);
}

.ff-about{
  width: 100%;
  padding: clamp(48px, 7vw, 88px) 0;
}

.ff-about__inner{
  max-width: var(--ff-max);
  margin: 0 auto;
  padding: 0 var(--ff-pad);
}

.ff-about__top{
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: clamp(16px, 3vw, 32px);
  align-items: start;
}

.ff-about__bottom{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 3vw, 42px);
  margin-top: clamp(18px, 2.8vw, 28px);
  padding-top: clamp(18px, 2.8vw, 28px);
  border-top: 1px solid var(--ff-border);
}

.ff-about__title{
  font-family: inherit;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: clamp(34px, 4vw, 60px);
  margin: 0;
  color: var(--ff-text);
}

.ff-title-accent{
  position: relative;
  white-space: nowrap;
}

.ff-accent-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--ff-accent-soft);
  color: var(--ff-text);
  margin: 0 8px 0 0;
  transform: translateY(-2px);
}

.ff-about__copy{
  margin: 0;
  color: var(--ff-muted);
  font-size: 16px;
  line-height: 1.7;
  max-width: 60ch;
}

.ff-pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  user-select:none;
}

.ff-pill--outline{
  background: rgba(255,255,255,.6);
  border: 1px solid var(--ff-border);
  box-shadow: 0 10px 30px rgba(0,0,0,.04);
}

/* Responsive */
@media (max-width: 900px){
  .ff-about__top{ grid-template-columns: 1fr; }
  .ff-about__bottom{ grid-template-columns: 1fr; }
  .ff-title-accent{ white-space: normal; }
}

/* Demo intro: brief pipeline summary */
.demoIntro{
  display:grid;
  grid-template-columns: 1fr;
  gap:16px;
  margin:14px 0 14px;
}
.demoIntro__h{margin:0; font-size:1.25rem}
.demoIntro__p{margin:8px 0 0}
.demoIntro__list{margin:12px 0 0; padding-left:18px; color:rgba(244,244,245,.82)}
.demoIntro__list li{margin:10px 0}
.demoIntro__note{margin-top:10px}

.phoneMock{
  border-radius:28px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: 0 18px 70px rgba(0,0,0,.55);
  padding:14px;
  max-width:360px;
  margin-left:auto;
}
.phoneMock::before{
  content:"";
  display:block;
  height:8px;
  width:50%;
  margin:0 auto 10px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
}
.phoneMock__top{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px}
.phoneMock__title{font-weight:950}
.phoneMock__chip{font-size:.78rem; font-weight:900; padding:6px 10px; border-radius:999px; background:rgba(255,106,0,.10); box-shadow:0 0 0 1px rgba(255,106,0,.35) inset}
.phoneMock__list{display:grid; gap:10px}
.phoneItem{
  border-radius:18px;
  background:rgba(0,0,0,.18);
  padding:10px 12px;
  box-shadow:0 0 0 1px var(--line2) inset, 0 10px 30px rgba(0,0,0,.35);
}
.phoneItem__row{display:flex; justify-content:space-between; align-items:center; gap:10px}
.phoneItem__t{font-weight:950}
.phoneItem__m{margin-top:4px; font-size:.88rem; color:rgba(244,244,245,.68)}
.phoneTag{font-size:.78rem; font-weight:900; padding:4px 10px; border-radius:999px; background:rgba(255,255,255,.05); box-shadow:0 0 0 1px var(--line2) inset}
.phoneTag--alt{background:rgba(255,106,0,.10); box-shadow:0 0 0 1px rgba(255,106,0,.35) inset}
.phoneMock__foot{margin-top:10px; font-size:.82rem; color:rgba(244,244,245,.66)}

.demoShell{
  border:1px solid var(--line2);
  border-radius:var(--r2);
  background:rgba(255,255,255,.02);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.demoTop{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:12px;
  border-bottom:1px solid var(--line);
  background:rgba(0,0,0,.18);
  flex-wrap: nowrap;     
  min-width: 0;          
}
.tabs{
  display:flex;
  gap:8px;
  flex-wrap: nowrap;      
  overflow-x: auto;       
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  min-width: 0;
}
.tabs::-webkit-scrollbar{ display:none; }
.tab{
  border:1px solid var(--line2);
  background:rgba(255,255,255,.03);
  color:rgba(244,244,245,.84);
  padding:10px 12px;
  border-radius:14px;
  cursor:pointer;
  font-weight:950;
}
.tab.is-active{border-color:rgba(255,106,0,.55); background:rgba(255,106,0,.12)}
.demoControls{display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
.ctrl{display:grid; gap:6px}
.ctrl{display:grid; gap:6px; white-space: nowrap;}
.ctrl__label{font-size:.78rem; color:rgba(244,244,245,.68); font-weight:850}
.select, input, textarea{
  background:rgba(255,255,255,.03);
  border:1px solid var(--line2);
  color:rgba(244,244,245,.92);
  padding:10px 12px;
  border-radius:14px;
  font-size:1rem;
}
.select:invalid{color:rgba(244,244,245,.62)}

/* Fix: native select dropdown options were white-on-white in some browsers */
.select option,
select option{
  color:#101012;
  background:#ffffff;
}
.demoControls{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap: nowrap;      /* one line */
  overflow-x: auto;       /* scroll instead of wrapping */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  min-width: 0;
}
.demoControls::-webkit-scrollbar{ display:none; }


.pillStatus{
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid var(--line2); border-radius:999px;
  padding:10px 12px;
  background:rgba(255,255,255,.03);
  font-weight:950;
}
.pillStatus__dot{width:10px; height:10px; border-radius:999px; background:rgba(255,255,255,.26)}
.pillStatus.is-on{border-color:rgba(255,106,0,.55)}
.pillStatus.is-on .pillStatus__dot{background:var(--acc); box-shadow:0 0 0 4px rgba(255,106,0,.14)}

.demoBody{padding:12px}
.demoPane{display:none}
.demoPane.is-active{display:block}

.board{display:grid; grid-template-columns:repeat(5,1fr); gap:10px}
.col{border:1px solid var(--line2); border-radius:var(--r); background:rgba(255,255,255,.02); overflow:hidden; min-height:310px; display:flex; flex-direction:column}
.chead{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid var(--line); background:rgba(0,0,0,.18)}
.chead b{font-weight:950}
.count{font-size:.78rem; border:1px solid rgba(255,106,0,.45); background:rgba(255,106,0,.10); padding:4px 10px; border-radius:999px}
.list{padding:10px; display:grid; gap:10px; flex:1}

.ticket{
  border:1px solid var(--line2);
  border-radius:16px;
  background:rgba(255,255,255,.03);
  padding:10px;
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.ticket:hover{transform:translateY(-1px); border-color:rgba(255,106,0,.28); background:rgba(255,255,255,.04)}
.ticket:focus-visible{outline:2px solid rgba(255,106,0,.7); outline-offset:2px}

.tTop{display:flex; justify-content:space-between; gap:10px; align-items:flex-start}
.id{font-size:.78rem; border:1px solid var(--line2); border-radius:999px; padding:4px 10px; background:rgba(0,0,0,.18); color:rgba(244,244,245,.82)}
.urg{font-size:.78rem; border:1px solid rgba(255,106,0,.45); border-radius:999px; padding:4px 10px; background:rgba(255,106,0,.10)}
.meta{margin-top:8px; display:flex; justify-content:space-between; gap:10px; color:rgba(244,244,245,.72); font-size:.92rem}
.metaRight{text-align:right}
.move{display:none; margin-top:10px; border:1px solid rgba(255,106,0,.55); background:rgba(255,106,0,.10); border-radius:12px; padding:8px 10px; font-weight:950}

.hint{margin-top:12px; border:1px dashed rgba(255,255,255,.18); border-radius:var(--r); padding:12px; color:rgba(244,244,245,.74); display:flex; gap:10px; align-items:center}
.hint__dot{width:10px; height:10px; border-radius:999px; background:rgba(255,255,255,.22)}

.kpiGrid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.kpi{border:1px solid var(--line2); border-radius:var(--r); background:rgba(255,255,255,.03); padding:14px}
.kpi .k{color:rgba(244,244,245,.72); font-weight:900; font-size:.92rem}
.kpi .v{font-size:1.6rem; font-weight:950; margin-top:6px}
.kpi .d{color:rgba(244,244,245,.66); margin-top:6px; font-size:.92rem}
.miniNote{margin-top:10px; color:rgba(244,244,245,.66); font-size:.92rem}

.templateGrid{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px}
.tpl{border:1px solid var(--line2); border-radius:var(--r); background:rgba(255,255,255,.03); padding:14px; display:grid; gap:10px}
.chip{border:1px solid var(--line2); border-radius:999px; padding:6px 10px; background:rgba(0,0,0,.18); display:inline-flex; gap:8px; align-items:center; font-size:.82rem; color:rgba(244,244,245,.78)}
.code{white-space:pre-wrap; color:rgba(244,244,245,.78); font-size:.95rem; line-height:1.35}
.tplBtns{display:flex; gap:10px; flex-wrap:wrap; margin-top:auto}

.audit{border:1px solid var(--line2); border-radius:var(--r); background:rgba(255,255,255,.02); overflow:hidden}
.arow{display:grid; grid-template-columns:150px 1fr 120px; gap:10px; padding:12px; border-bottom:1px solid var(--line); color:rgba(244,244,245,.82)}
.arow:last-child{border-bottom:0}
.arow .w{color:rgba(244,244,245,.70)}
.arow .t{font-weight:900}
.arow .time{color:rgba(244,244,245,.66); text-align:right; font-variant-numeric:tabular-nums}

.packageGrid{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:12px; margin-top:18px}
.pkg{border:1px solid var(--line2); border-radius:var(--r2); background:rgba(255,255,255,.03); padding:16px; display:grid; gap:10px}
.pkg.hot{border-color:rgba(255,106,0,.55); background:rgba(255,106,0,.07)}
.pkg .badge{justify-self:end}
.pkg h3{margin:0}
.price{font-size:1.55rem; font-weight:980}
.pkg ul{margin:0; padding-left:18px; color:rgba(244,244,245,.80)}
.pkg li{margin:8px 0}

/* -----------------------------------------------------------
   COMPARISON (inspired by high-performing tradie landing pages)
   ----------------------------------------------------------- */
.compare{margin-top:14px; border:1px solid var(--line2); border-radius:var(--r2); background:rgba(0,0,0,.14); padding:14px; display:grid; gap:10px}
.compare__h{font-weight:950}
.compare__sub{margin-top:-4px}
.compareGrid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.compareCard{border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.02); padding:12px}
.compareCard--hot{border-color:rgba(255,106,0,.45); background:rgba(255,106,0,.06)}
.compareCard__t{font-weight:950; margin-bottom:6px}
.compareCard ul{margin:0; padding-left:18px; color:rgba(244,244,245,.80)}
.compareCard li{margin:6px 0}

/* New: compact comparison table (doesn't overpower pricing) */
.compareTable{display:grid; gap:10px; margin-top:10px}
.compareRow{display:grid; grid-template-columns:1.15fr .85fr 1.35fr; gap:10px}
.compareCell{border:1px solid var(--line2); border-radius:14px; background:rgba(255,255,255,.02); padding:12px; color:rgba(244,244,245,.82); line-height:1.35; display:flex; gap:10px; align-items:flex-start}
.compareRow--head .compareCell{background:rgba(0,0,0,.22); font-weight:950}
.compareCell--label{color:rgba(244,244,245,.62); font-weight:900; display:block}
.compareCell--ff{border-color:rgba(255,106,0,.26); background:linear-gradient(180deg, rgba(255,106,0,.08), rgba(0,0,0,.18))}

.cmpIcon{flex:0 0 auto; width:10px; height:10px; border-radius:999px; margin-top:4px}
.cmpIcon--good{background:var(--acc); box-shadow:0 0 0 3px rgba(255,106,0,.14)}
.cmpIcon--bad{background:rgba(244,244,245,.32); box-shadow:0 0 0 3px rgba(244,244,245,.08)}

@media (max-width: 820px){
  .compareRow{grid-template-columns:1fr}
  .compareCell--label{order:-1}
}

/* -----------------------------------------------------------
   WHAT YOU GET (process + handover)
   ----------------------------------------------------------- */
.processGrid{margin-top:18px; display:grid; grid-template-columns:1.1fr .9fr; gap:12px; align-items:start}
.processCard{border:1px solid var(--line2); border-radius:var(--r2); background:rgba(255,255,255,.03); padding:16px}
.processCard--soft{background:rgba(0,0,0,.18)}
.processCard__h{font-weight:950; margin:0 0 10px}

.stepList{margin:0; padding-left:18px; display:grid; gap:10px}
.stepList li{color:rgba(244,244,245,.84); line-height:1.45}
.stepList li b{display:block; font-weight:950; color:rgba(244,244,245,.92)}
.stepList li span{display:block; color:rgba(244,244,245,.66); margin-top:2px}

.plainList{margin:0; padding-left:18px; display:grid; gap:8px; color:rgba(244,244,245,.78)}
.plainList b{font-weight:950; color:rgba(244,244,245,.92)}

.miniBox{margin-top:12px; border:1px dashed rgba(255,255,255,.16); border-radius:16px; padding:12px; background:rgba(0,0,0,.14)}
.miniBox__t{font-weight:950; margin:0 0 6px}

@media (max-width: 860px){
  .processGrid{grid-template-columns:1fr}
}

/* -----------------------------------------------------------
   PROOF (compact, ordered hierarchy)
   Fix: grid-stretch was creating giant empty space inside cards.
   ----------------------------------------------------------- */
.proofGrid{margin-top:16px; display:grid; grid-template-columns:1.1fr .9fr; gap:10px; align-items:start}
.proofStack{display:grid; gap:10px}
.proofCard{border:1px solid var(--line2); border-radius:var(--r2); background:rgba(255,255,255,.03); padding:14px; display:flex; flex-direction:column; gap:8px}
.proofCard--soft{background:rgba(0,0,0,.18)}
.proofCard__h{font-weight:950}

.outcomeList{margin:0; padding:0; list-style:none; display:grid; gap:8px}
.outcomeList li{display:grid; grid-template-columns:12px 1fr; gap:10px; align-items:flex-start}
.outcomeList .m{width:8px; height:8px; border-radius:999px; background:var(--acc); box-shadow:0 0 0 3px rgba(255,106,0,.14); margin-top:6px}
.outcomeList b{font-weight:950}
.outcomeList span{color:rgba(244,244,245,.74)}

.quoteList{margin:0; padding:0; list-style:none; display:grid; gap:8px}
.quoteList li{border:1px solid var(--line); border-radius:12px; background:rgba(0,0,0,.12); padding:9px 10px; color:rgba(244,244,245,.84); font-weight:900; line-height:1.25}
.quoteList li em{font-style:normal; color:rgba(244,244,245,.66); font-weight:800; display:block; margin-top:3px; font-size:.92rem}

.proofBar{grid-column:1 / -1; border:1px solid rgba(255,106,0,.45); border-radius:var(--r2); background:linear-gradient(180deg, rgba(255,106,0,.10), rgba(0,0,0,.14)); padding:14px; display:flex; align-items:center; justify-content:space-between; gap:10px}
.proofBar__t{font-weight:950; margin:0}
.proofBar__sub{color:rgba(244,244,245,.72); margin:4px 0 0}
.proofBar__left{max-width:66ch}
.proofBar__right{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}

/* Demo: export example control */
.exportCtrl{display:flex; align-items:center; gap:8px; padding-left:2px}
.exportCtrl__label{font-size:.78rem; color:rgba(244,244,245,.68); font-weight:850; white-space:nowrap}
.exportBtn{opacity:.78}
.exportBtn:hover{opacity:1}

.hint--soft{border-style:solid; border-color:rgba(255,255,255,.12); background:rgba(0,0,0,.12)}

.faq{display:grid; gap:10px; margin-top:18px}
.qa{border:1px solid var(--line2); border-radius:var(--r); background:rgba(255,255,255,.03); overflow:hidden}
.qa button{width:100%; text-align:left; border:0; background:transparent; color:rgba(244,244,245,.92); padding:14px; cursor:pointer; display:flex; justify-content:space-between; gap:10px; align-items:center; font-weight:950}
.qa .ans{padding:0 14px 14px; color:rgba(244,244,245,.76); display:none}
.qa.open .ans{display:block}
.chev{width:28px; height:28px; border:1px solid var(--line2); border-radius:12px; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.18)}

.footer{padding:46px 0 96px; background:rgba(0,0,0,.16)}
.footer__inner{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.brand--footer .badge{display:none}
.footer__cta{border:1px solid var(--line2); border-radius:var(--r2); background:rgba(255,255,255,.03); padding:16px; display:grid; gap:10px}
.footer__t{font-weight:950}
.footer__btns{display:flex; gap:10px; flex-wrap:wrap}

.stickyBar{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  border-top:1px solid var(--line);
  background:rgba(5,5,5,.86);
  backdrop-filter: blur(12px);
  padding:10px;
  display:flex;
  justify-content:center;
}
.stickyBar__inner{
  width:min(var(--max), calc(100% - 20px));
  display:flex;
  gap:10px;
  border:1px solid var(--line2);
  background:rgba(0,0,0,.22);
  border-radius:18px;
  padding:10px;
}
.stickyBar__btn{flex:1}

.modal,.drawer,.sheet{position:fixed; inset:0; z-index:80; display:none}
.modal[aria-hidden="false"], .drawer[aria-hidden="false"], .sheet[aria-hidden="false"]{display:block}
.modal__backdrop,.drawer__backdrop,.sheet__backdrop{position:absolute; inset:0; background:rgba(0,0,0,.60)}
.modal__dialog{
  max-height: calc(100vh - 24px);
  overflow:auto;

  position:relative;
  width:min(560px, calc(100% - 26px));
  margin:6vh auto 0;
  border:1px solid var(--line2);
  border-radius:var(--r2);
  background:rgba(10,10,10,.92);
  box-shadow:var(--shadow);
  padding:14px;
}
.modal__head{display:flex; justify-content:space-between; align-items:center}
.modal__head h3{margin:0}

.iconBtn{
  width:40px; height:40px;
  border-radius:14px;
  border:1px solid var(--line2);
  background:rgba(255,255,255,.04);
  color:var(--text);
  cursor:pointer;
  font-size:22px;
}
.iconBtn:hover{background:rgba(255,255,255,.06)}
.iconBtn:focus-visible{outline:2px solid rgba(255,106,0,.7); outline-offset:2px}

.form{display:grid; gap:12px; margin-top:12px}
.field{display:grid; gap:6px}
.field span{font-weight:900; color:rgba(244,244,245,.82); font-size:.92rem}
.success{border:1px solid rgba(255,106,0,.45); background:rgba(255,106,0,.06); border-radius:var(--r); padding:12px; margin-top:10px}
.success__t{font-weight:950}

.drawer__panel{
  position:absolute;
  right:0; top:0; bottom:0;
  width:min(520px, 100%);
  border-left:1px solid var(--line2);
  background:rgba(10,10,10,.96);
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
}
.drawer__head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:14px; border-bottom:1px solid var(--line)}
.drawer__head h3{margin:0}
.drawer__body{padding:14px; overflow:auto; display:grid; gap:12px}
.drawer__foot{padding:12px 14px; border-top:1px solid var(--line); color:rgba(244,244,245,.66)}
.detailGrid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.detail{border:1px solid var(--line2); border-radius:14px; background:rgba(255,255,255,.03); padding:10px 12px}
.detail .k{font-size:.78rem; color:rgba(244,244,245,.66); font-weight:900}
.detail .v{margin-top:6px; font-weight:950}
.drawer__actions{display:flex; gap:10px; align-items:flex-end}
.ctrl--full{flex:1}
.subhead{font-weight:950; margin-top:6px}
.auditMini{display:grid; gap:8px}
.auditMini .evt{border:1px solid var(--line); border-radius:14px; background:rgba(0,0,0,.18); padding:10px 12px; color:rgba(244,244,245,.78)}
.auditMini .evt .t{font-weight:950}
.auditMini .evt .m{color:rgba(244,244,245,.66); margin-top:4px; font-size:.88rem}

.sheet__panel{
  position:absolute; left:0; right:0; bottom:0;
  border-top:1px solid var(--line2);
  background:rgba(10,10,10,.96);
  border-radius:22px 22px 0 0;
  box-shadow:var(--shadow);
  padding:14px;
  max-height:78vh;
  overflow:auto;
}
.sheet__head{display:flex; justify-content:space-between; align-items:flex-start}
.sheet__title{font-weight:950}
.sheet__body{display:grid; gap:10px; margin-top:12px}
.stageBtn{border:1px solid var(--line2); border-radius:16px; background:rgba(255,255,255,.03); padding:12px; cursor:pointer; text-align:left; font-weight:950}
.stageBtn.active{border-color:rgba(255,106,0,.55); background:rgba(255,106,0,.10)}

.reveal{opacity:0; transform: translateY(10px); transition: opacity .55s ease, transform .55s ease}
.reveal.in{opacity:1; transform: translateY(0)}

@media (max-width: 980px){
  .nav{display:none}
  .topbar__cta{display:none}
  .hero__content{grid-template-columns:1fr}
  .hero__anchors{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .timeline{grid-template-columns:1fr 1fr}

  /* Demo layout: make it feel app-like on mobile */
  .demoIntro{grid-template-columns:1fr}
  .phoneMock{max-width:100%; margin:0}
  .demoTop{flex-direction:column; align-items:stretch}
  .tabs{width:100%}
  .demoControls{width:100%; justify-content:flex-start}

  /* Kanban: swipe columns instead of a very long stacked page */
  .board{
    display:flex;
    gap:12px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding-bottom:6px;
    scrollbar-width:none;
  }
  .board::-webkit-scrollbar{display:none}
  .col{flex:0 0 88%; min-height:unset; scroll-snap-align:start}

  .kpiGrid{grid-template-columns:1fr 1fr}
  .templateGrid{grid-template-columns:1fr}
  .packageGrid{grid-template-columns:1fr}
  .compareGrid{grid-template-columns:1fr}
  .proofGrid{grid-template-columns:1fr}
  .proofBar{flex-direction:column; align-items:flex-start}
  .proofBar__right{width:100%; justify-content:flex-start}
  .footer__inner{grid-template-columns:1fr}
  .move{display:inline-flex}
  .drawer__panel{width:100%}
  .arow{grid-template-columns:120px 1fr}
  .arow .time{display:none}
}


/* Care plan */
.careGrid{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:12px; margin-top:18px}
.care{border:1px solid var(--line2); border-radius:var(--r2); background:rgba(255,255,255,.03); padding:16px; display:grid; gap:10px}
.care.hot{border-color:rgba(255,106,0,.55); background:rgba(255,106,0,.06)}
.care h3{margin:0}
.care .price{font-size:1.35rem; font-weight:980}
.care .sub{color:rgba(244,244,245,.72); font-size:.92rem}
.care ul{margin:0; padding-left:18px; color:rgba(244,244,245,.80)}
.care li{margin:8px 0}

.careNote{
  margin-top:12px;
  border:1px solid var(--line2);
  border-radius:var(--r2);
  background:rgba(0,0,0,.18);
  padding:16px;
  display:grid;
  gap:12px;
}
.careNote__row{display:grid; grid-template-columns:170px 1fr; gap:12px; align-items:start}
.careNote__t{font-weight:950}

@media (max-width: 980px){
  .careGrid{grid-template-columns:1fr}
  .careNote__row{grid-template-columns:1fr}
}

.pkg .sub{color:rgba(244,244,245,.72); font-size:.92rem}


/* Calendar booking embed */
.bookingBox{
  border:1px solid var(--line2);
  border-radius:var(--r2);
  background:rgba(255,255,255,.03);
  padding:14px;
  display:grid;
  gap:12px;
  margin-top:10px;
}
.bookingTop{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}
.bookingTitle{font-weight:950}
.bookingEmbed{
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  background:rgba(0,0,0,.18);
  min-height:560px;
}
.bookingEmbed iframe{
  width:100%;
  height:560px;
  border:0;
}
@media (max-width: 980px){
  .bookingEmbed{min-height:620px}
  .bookingEmbed iframe{height:620px}
}

.ticket .move{margin-top:10px}


/* Move button visibility: show on mobile/touch, rely on drag & drop on desktop */
.ticket .move{display:none;}
@media (max-width: 980px){
  .ticket .move{display:inline-flex;}
}
@media (pointer: coarse){
  .ticket .move{display:inline-flex;}
}

.legalLink{
  margin-left:10px;
  color: var(--acc);
  text-decoration:none;
  font-weight:800;
}
.legalLink:hover{text-decoration:underline}
.legalBlock h4{margin:14px 0 6px}
.bookingEmbed iframe,.bookingFrame{
  width:100%;
  border:1px solid var(--line2);
  border-radius:16px;
  height:720px;
  background:rgba(0,0,0,.18);
}


@media (max-width:520px){
  .modal__dialog{ margin:2vh auto 0; }
  .bookingEmbed iframe,.bookingFrame{ height: 70vh; }
}

.calendly-inline-widget{height:70vh; max-height:720px;}


.badge--alt{
  border-color: rgba(255,106,0,.25);
  background: rgba(255,106,0,.08);
}

.portfolio{margin-top:18px}
.portfolio__head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap}
.carousel{display:grid; grid-template-columns:44px 1fr 44px; gap:10px; align-items:center; margin-top:12px}
.carBtn{height:44px; width:44px; border-radius:14px; border:1px solid var(--line2); background:rgba(255,255,255,.03); color:var(--text); font-weight:900; font-size:22px; cursor:pointer}
.carBtn:hover{border-color:rgba(255,106,0,.35)}
.carTrack{display:flex; overflow:auto; scroll-snap-type:x mandatory; gap:12px; padding:4px; border-radius:18px; border:1px solid var(--line2); background:rgba(255,255,255,.02)}
.carItem{flex:0 0 86%; scroll-snap-align:center; border-radius:16px; overflow:hidden; border:1px solid var(--line)}
@media (min-width:900px){
  .carItem{flex-basis:48%}
}
.carImg{display:block; width:100%; height:auto; background:rgba(0,0,0,.2)}
.carDots{display:flex; gap:8px; justify-content:center; margin-top:10px}
.carDot{height:8px; width:8px; border-radius:99px; border:1px solid var(--line2); background:rgba(255,255,255,.12)}
.carDot.is-active{background:var(--acc); border-color:var(--acc)}


/* Ensure portfolio carousel is visible outside the pain panel */
.portfolioWrap{
  margin-top: 18px;
}
.portfolio{
  width: 100%;
}


/* Portfolio carousel image fixes */
.portfolioViewport, .portfolio__viewport{ overflow: hidden; }
.portfolioTrack, .portfolio__track{
  display: flex;
  gap: 18px;
  transition: transform 420ms cubic-bezier(.2,.9,.2,1);
  will-change: transform;
}
.portfolioSlide, .portfolio__slide{
  flex: 0 0 100%;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  min-height: 260px;
}
@media (min-width: 900px){
  .portfolioSlide, .portfolio__slide{ flex-basis: 50%; min-height: 340px; }
}
.portfolioImg, .portfolio__img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}


/* Hide scrollbars for carousel (still scrollable / draggable) */
.portfolioViewport, .portfolio__viewport, .portfolioTrack, .portfolio__track{
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE/Edge legacy */
}
.portfolioViewport::-webkit-scrollbar,
.portfolio__viewport::-webkit-scrollbar,
.portfolioTrack::-webkit-scrollbar,
.portfolio__track::-webkit-scrollbar{
  width: 0;
  height: 0;
  display: none;                  /* Chrome/Safari */
}

/* Drag hint */
.dragHint{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.78);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.2px;
}
@media (min-width: 900px){
  .dragHint{ margin-left: auto; }
}

.dragHint{ max-width: fit-content; }


/* Carousel scrollbar hide (carTrack) */
.carTrack{
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* IE/Edge legacy */
}
.carTrack::-webkit-scrollbar{
  width: 0;
  height: 0;
  display: none;
}

html, body{ overflow-x:hidden; }


/* =====================================================================
   FIGMA-INSPIRED UPDATES (carousel + plan cards + ticket amounts)
   ===================================================================== */

/* Plan cards (Packages + Care) */
.packageGrid{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  margin-top:22px;
  max-width:1000px;
}
@media (min-width: 860px){
  .packageGrid{grid-template-columns:1fr 1fr;}
}

.careGrid{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  margin-top:22px;
  max-width:1000px;
}

.planCard{
  position:relative;
  padding:26px;
  border-radius:22px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10),
    0 18px 54px rgba(0,0,0,.52);
  /* Allow pills/shadows to breathe while keeping rounded hover layers */
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.planCard::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:inherit;
  background:
    radial-gradient(800px 320px at 45% -10%, rgba(255,106,0,.16), transparent 62%),
    radial-gradient(700px 280px at 85% 0%, rgba(255,106,0,.10), transparent 60%);
  opacity:0;
  transition: opacity .18s ease;
  pointer-events:none;
}

.planCard > *{
  position: relative;
  z-index: 1;
}

.planCard:hover{ transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 26px 70px rgba(0,0,0,.60); }
.planCard:hover::before{ opacity:1; }

.planCard--hot{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
  box-shadow:
    0 0 0 1px rgba(255,106,0,.26),
    0 18px 54px rgba(0,0,0,.52);
}

.planPill{
  z-index: 2;
  pointer-events: none;
  user-select: none;
  position:absolute;
  /* Keep it inside the card so it doesn't get hidden under the sticky nav */
  top:16px;
  right:16px;
  padding:7px 12px;
  border-radius:999px;
  font-size:.78rem;
  font-weight:950;
  letter-spacing:.2px;
  color:#fff;
  background: linear-gradient(90deg, rgba(255,106,0,1), rgba(255,140,40,1));
  box-shadow: 0 10px 26px rgba(0,0,0,.45);
}

.planTop{
  color: rgba(244,244,245,.55);
  font-size:.86rem;
  font-weight:850;
  margin-bottom:10px;
}

.planTitle{ margin:0 0 8px; font-size:1.55rem; font-weight:980; letter-spacing:.2px; }
.planPrice{ font-size:2.4rem; font-weight:990; line-height:1.05; color:#ff7a1a; }
.planSplit{ margin-top:8px; color: rgba(244,244,245,.55); font-size:.92rem; }
.planDesc{ margin:14px 0 0; color: rgba(244,244,245,.72); line-height:1.5; }

.planList{
  margin:18px 0 22px;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
}
.planList li{
  display:flex;
  gap:12px;
  align-items:flex-start;
  color: rgba(244,244,245,.76);
  font-size:.95rem;
  line-height:1.45;
}
.planList li::before{
  content:"✓";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  border-radius:999px;
  background: rgba(255,106,0,.14);
  box-shadow: 0 0 0 1px rgba(255,106,0,.30);
  color: var(--acc);
  font-weight:950;
  flex:0 0 20px;
  margin-top:1px;
}

.planBtn{
  width:100%;
  justify-content:center;
  border-radius:14px;
  padding:12px 14px;
}

/* Examples carousel (Figma style) */
.carousel{
  position:relative;
  display:block;
  margin-top:18px;
}

.carTrack{
  display:flex;
  gap:24px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:0 0 14px;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  border:none;
  background:transparent;
}

.carItem{
  position:relative;
  flex:0 0 calc(100vw - 48px);
  max-width: 640px;
  scroll-snap-align:start;
  border-radius:22px;
  overflow:hidden;
  aspect-ratio:4/3;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10),
    0 18px 54px rgba(0,0,0,.52);
}
@media (min-width: 740px){
  .carItem{ flex-basis: 500px; }
}
@media (min-width: 1024px){
  .carItem{ flex-basis: 600px; }
}

/* Gradient base per slide */
.exCard::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  z-index:0;
}
.exCard--a::before{ background: linear-gradient(135deg, rgba(60,120,255,.22), rgba(25,30,45,.18)); }
.exCard--b::before{ background: linear-gradient(135deg, rgba(0,180,255,.20), rgba(30,60,140,.18)); }
/* Keep the examples in the same blue/steel family (avoid random warm/red panels) */
.exCard--c::before{ background: linear-gradient(135deg, rgba(60,170,255,.20), rgba(20,40,90,.18)); }
.exCard--d::before{ background: linear-gradient(135deg, rgba(80,130,255,.18), rgba(25,25,55,.18)); }

.carImg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  z-index:1;
  opacity:1;
}

.exCenter{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:20px;
}
.exTitle{ font-size:1.55rem; font-weight:980; }
.exSub{ margin-top:6px; font-size:.9rem; color: rgba(244,244,245,.45); }

/* Hover overlay */
.exCard::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.40));
  opacity:0;
  transition: opacity .18s ease;
  pointer-events:none;
}
.exCard:hover::after{ opacity:1; }

/* Arrow buttons */
.carBtn{
  display:none;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:5;
  width:48px;
  height:48px;
  border-radius:999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  font-size:20px;
}
.carBtn:hover{ background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.26); }
#carPrev{ left:0; }
#carNext{ right:0; }
@media (min-width: 1024px){
  .carBtn{ display:flex; align-items:center; justify-content:center; }
}

/* Ticket amount pill */
.tTop{ align-items:flex-start; }
.tRight{ display:flex; align-items:center; gap:10px; }
.amt{
  font-size:.82rem;
  font-weight:950;
  padding:5px 8px;
  border-radius:999px;
  background: rgba(255,106,0,.12);
  box-shadow: 0 0 0 1px rgba(255,106,0,.28);
  color: rgba(255,106,0,1);
  white-space:nowrap;
}

/* Mobile: reduce padding so cards breathe */
@media (max-width: 520px){
  .planCard{ padding:20px; }
  .planPrice{ font-size:2.1rem; }
}


/* Hide dots for minimal carousel */
.carDots{ display:none; }


.planCard--hot:hover{
  box-shadow:
    0 0 0 1px rgba(255,106,0,.35),
    0 26px 70px rgba(0,0,0,.60);
}


/* Hide any leftover example overlay text (safety) */
.exCenter, .exSub, .exTitle{ display:none !important; }

.planCard--hot:focus-within{
  box-shadow: 0 0 0 2px rgba(255,106,0,.45), 0 26px 70px rgba(0,0,0,.60);
}

/* --- Conversion upgrades (SITE framework) --- */

.section--tight{padding:52px 0}

.hero__ctaNotes{margin-top:10px; display:flex; flex-direction:column; gap:6px; max-width:560px}
.hero__ctaNotes .ctaNote{font-size:.88rem; line-height:1.35; color:rgba(244,244,245,.82)}
.hero__ctaNotes .credLine{font-size:.82rem; color:rgba(244,244,245,.55)}

.quickCheck{margin-top:14px; padding:14px; border-radius:var(--r2); background:rgba(255,255,255,.03); box-shadow:0 0 0 1px rgba(255,255,255,.10), 0 22px 60px rgba(0,0,0,.55)}
.quickCheck__row{display:grid; grid-template-columns:1.1fr 1fr 1fr auto; gap:12px; align-items:end}
.quickCheck .f{display:flex; flex-direction:column; gap:6px}
.quickCheck .f__l{font-size:.72rem; letter-spacing:.02em; color:rgba(244,244,245,.55)}
.quickCheck__hint{margin-top:10px; font-size:.82rem; color:rgba(244,244,245,.55)}
@media (max-width:820px){
  .quickCheck__row{grid-template-columns:1fr 1fr}
  .quickCheck__row button{grid-column:1 / -1}
}
@media (max-width:520px){
  .quickCheck__row{grid-template-columns:1fr}
}

.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:18px}
.stepCard{border-radius:var(--r2); background:rgba(255,255,255,.03); box-shadow:0 0 0 1px rgba(255,255,255,.10), 0 22px 60px rgba(0,0,0,.55); padding:16px; display:flex; gap:12px; align-items:flex-start}
.stepNum{width:30px; height:30px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-weight:980; background:rgba(255,106,0,.14); box-shadow:0 0 0 1px rgba(255,106,0,.28); color:rgba(255,106,0,1); flex:0 0 auto}
.stepTitle{font-weight:980; margin-top:1px}
.sectionCta{margin-top:18px; display:flex; flex-wrap:wrap; align-items:center; gap:12px}
.sectionCta .tiny{font-size:.82rem}
@media (max-width:980px){
  .steps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .steps{grid-template-columns:1fr}
}

.proofGrid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:18px}
@media (max-width:980px){
  .proofGrid{grid-template-columns:1fr}
}

.trustBar{margin-top:14px; padding:14px 16px; border-radius:var(--r2); background:rgba(0,0,0,.35); box-shadow:0 0 0 1px rgba(255,255,255,.10), 0 22px 60px rgba(0,0,0,.55); display:flex; gap:10px; align-items:flex-start}
.trustBar .dot{margin-top:6px; width:10px; height:10px; border-radius:999px; background:rgba(255,106,0,1); box-shadow:0 0 0 4px rgba(255,106,0,.14)}
.trustBar span{font-size:.9rem; line-height:1.45}

.foundersStrip{margin:14px 0 18px; padding:14px 16px; border-radius:var(--r2); background:linear-gradient(135deg, rgba(255,106,0,.10), rgba(255,255,255,.03)); box-shadow:0 0 0 1px rgba(255,106,0,.20), 0 22px 60px rgba(0,0,0,.55); display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between}
.foundersStrip__left{display:flex; flex-direction:column; gap:3px}
.foundersStrip__label{font-weight:980}
.foundersStrip__sub{color:rgba(244,244,245,.62); font-size:.86rem}
.foundersStrip__right{display:flex; gap:10px; align-items:center}
.foundersStrip__cap{color:rgba(244,244,245,.55); font-size:.82rem}

.fitGrid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:18px}
.fitCard{border-radius:var(--r2); background:rgba(255,255,255,.03); box-shadow:0 0 0 1px rgba(255,255,255,.10), 0 22px 60px rgba(0,0,0,.55); padding:18px}
.fitCard--soft{background:rgba(0,0,0,.28)}
.fitCard h3{margin:0 0 10px}
.fitList{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.fitList li{display:flex; gap:10px; color:rgba(244,244,245,.82)}
.fitList li:before{content:""; width:8px; height:8px; border-radius:999px; margin-top:7px; background:rgba(255,106,0,1); box-shadow:0 0 0 4px rgba(255,106,0,.12); flex:0 0 auto}
@media (max-width:820px){
  .fitGrid{grid-template-columns:1fr}
}

.quickCheck__top{display:flex; align-items:center; gap:10px; margin-bottom:12px}
.quickCheck__top .dot{width:10px; height:10px; border-radius:999px; background:rgba(255,106,0,1); box-shadow:0 0 0 4px rgba(255,106,0,.14)}

/* ===============================
   Conversion upgrades (Jan 2026)
   =============================== */

/* HERO: add subheadline + CTAs without clutter */
.heroSub{max-width:46rem; margin:14px auto 0; font-size:clamp(1.0rem, 1.25vw, 1.15rem); line-height:1.45; color:rgba(18,18,18,.78)}
.heroCtas{margin-top:16px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.heroMicro{margin-top:10px; color:rgba(18,18,18,.62)}
.hero--minimal .tiny{color:rgba(18,18,18,.62)}

/* Proof strip */
.proofStrip{padding-top:40px}
.proofStrip__inner{display:grid; grid-template-columns:1.2fr .8fr; gap:18px; align-items:start}
.proofList{margin:14px 0 0; padding-left:18px; display:grid; gap:8px}
.proofStrip__cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.proofStrip__right{display:grid; gap:10px}
.trustTile{border:1px solid var(--line2); border-radius:var(--r2); background:rgba(255,255,255,.03); padding:14px}
.trustTile__t{font-weight:950; margin-bottom:6px}

@media (max-width: 920px){
  .proofStrip__inner{grid-template-columns:1fr}
}

/* What we need box */
.needBox{border:1px solid var(--line2); border-radius:var(--r2); background:rgba(255,255,255,.03); padding:16px}
.needBox__t{font-weight:950; margin-bottom:10px}
.needBox__grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px}
.needBox__item{border:1px solid rgba(255,255,255,.10); border-radius:16px; padding:12px; background:rgba(0,0,0,.14)}
@media (max-width: 920px){
  .needBox__grid{grid-template-columns:1fr}
}

/* Why this works */
.whyCard{border:1px solid var(--line2); border-radius:var(--r2); background:rgba(255,255,255,.03); padding:18px}
.whyRow{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-top:14px}
.whyItem{border:1px solid rgba(255,255,255,.10); border-radius:16px; padding:12px; background:rgba(0,0,0,.14)}
.whyItem__t{font-weight:950; margin-bottom:6px}
.whyCtas{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
@media (max-width: 920px){
  .whyRow{grid-template-columns:1fr}
}

/* Packages: add best-for line */
.planFit{margin:10px 0 0; font-size:.92rem; color:rgba(244,244,245,.74); font-weight:850}

/* Sticky CTA bar: mobile-only */
.stickyBar{display:none}
@media (max-width: 900px){
  .stickyBar{display:flex}
  body{padding-bottom:92px}
}


/* ---------- Stack marquee (tools / languages) ---------- */
.stackMarquee{
  position: relative;
  margin-top: 18px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  padding: 18px 0;
  overflow: hidden;
}
.stackMarquee__viewport{
  overflow: hidden;
}
.stackMarquee__track{
  display: flex;
  width: max-content;
  gap: 16px;
  padding: 0 18px;
  will-change: transform;
  animation: stackMarquee var(--marquee-duration, 40s) linear infinite;
}
.stackMarquee__group{
  display: flex;
  gap: 16px;
}
.stackItem{
  width: 148px;
  flex: 0 0 auto;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(9,13,22,0.65);
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.stackLogo{
  width: 52px;
  height: 52px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
  display: grid;
  place-items: center;
  font-weight: 700;
  letter-spacing: .03em;
  color: rgba(255,255,255,0.86);
}
.stackLogo img{
  width: 70%;
  height: 70%;
  object-fit: contain;
  display: block;
}
.stackLogo::after{
  content: none;
}
.stackLogo.stackLogo--placeholder::after{
  content: attr(data-mark);
  font-size: 13px;
}
.stackName{
  font-size: 13px;
  line-height: 1.2;
  text-align: center;
  color: rgba(255,255,255,0.80);
}

.stackMarquee:hover .stackMarquee__track{
  animation-play-state: paused;
}

.stackMarquee__fade{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 96px;
  pointer-events: none;
  z-index: 2;
}
.stackMarquee__fade--l{
  left: 0;
  background: linear-gradient(90deg, rgba(5,7,12,0.98), rgba(5,7,12,0.0));
}
.stackMarquee__fade--r{
  right: 0;
  background: linear-gradient(270deg, rgba(5,7,12,0.98), rgba(5,7,12,0.0));
}

@keyframes stackMarquee{
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 520px){
  .stackItem{ width: 132px; }
  .stackMarquee__fade{ width: 72px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .stackMarquee__track{ animation: none; }
  .stackMarquee__viewport{ overflow-x: auto; }
  .stackMarquee__fade{ display: none; }
  .stackMarquee__viewport{ scrollbar-width: none; -ms-overflow-style: none; }
  .stackMarquee__viewport::-webkit-scrollbar{ width: 0; height: 0; display: none; }

  /* If we explicitly force the marquee (JS adds .force-marquee), keep it moving. */
  .force-marquee .stackMarquee__track{
    animation: stackMarquee var(--marquee-duration, 40s) linear infinite;
  }
  .force-marquee .stackMarquee__viewport{ overflow: hidden; }
  .force-marquee .stackMarquee__fade{ display: block; }
}



/* =========================================================
   DIVIDER RESET + UNIFIED FADED DIVIDERS (ForgeFlow)
   Goal: remove stacked/hard lines and use one consistent fade
   ========================================================= */

/* 1) Turn off legacy auto dividers (if present) */
.ff-section + .ff-section::before{
  content: none !important;
  display: none !important;
}

/* 2) Remove hard section seams */
.hero{ border-bottom: none !important; }
.section{ border-bottom: none !important; }

/* 3) Disable any old standalone divider elements/classes (prevents duplicates) */
.ff-divider{ display:none !important; }
.ff-divider-top::before,
.ff-divider-bottom::after{
  content:none !important;
  display:none !important;
}

/* 4) Single divider style (matches the snippet you gave) */
:root{
  --ff-divider-w: min(1100px, calc(100% - 48px));
  --ff-divider: linear-gradient(
    90deg,
    rgba(255,255,255,0),
    rgba(255,255,255,0.10),
    rgba(255,255,255,0)
  );
}

/* Divider ABOVE each main section below the hero */
#stack, #demo, #proof, #fit, #how, #why, #packages, #care, #faq{
  position: relative;
}

/* place at the very top edge of the section (clean, no extra gaps) */
#stack::before,
#demo::before,
#proof::before,
#fit::before,
#how::before,
#why::before,
#packages::before,
#care::before,
#faq::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  transform: translateX(-50%);
  height:1px;
  width: var(--ff-divider-w);
  background: var(--ff-divider);
  pointer-events:none;
  z-index: 5;
}


/* Blend hero into About (prevents a hard cut between light hero and dark sections) */
#about{ position: relative; }
#about::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-2px;
  height:240px;
  pointer-events:none;
  z-index:0;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(5,5,5,0) 100%);
}
#about > *{ position: relative; z-index:1; }

/* Make ABOUT pill match the 'Recommended' orange pill */
.ff-pill--outline{
  background: linear-gradient(180deg, rgba(255,122,26,0.95), rgba(255,122,26,0.78));
  color: #fff;          /* white text */
  font-weight: 700;     /* bold */
  border: 1px solid rgba(255,122,26,0.55);
  box-shadow: 0 8px 22px rgba(255,122,26,0.18);
}

.ff-pill--outline::before{ /* if you have a dot/marker inside */
  background: rgba(0,0,0,0.35);
}

/* Minimal, premium demo styling (responsive + container-safe) */
:root{
  --bg:#050506;
  --line: rgba(255,255,255,.10);
  --line2: rgba(255,255,255,.14);
  --text: rgba(244,244,245,.92);
  --muted: rgba(244,244,245,.68);
  --acc: #ff6a00;
  --shadow: 0 18px 70px rgba(0,0,0,.55);
  --r2: 22px;
  --r3: 28px;
  --max: 1200px;
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:
    radial-gradient(1200px 600px at 50% -120px, rgba(255,255,255,.14), rgba(255,255,255,0) 55%),
    radial-gradient(900px 520px at 10% 20%, rgba(255,106,0,.14), rgba(255,106,0,0) 55%),
    radial-gradient(800px 520px at 90% 30%, rgba(255,106,0,.12), rgba(255,106,0,0) 60%),
    var(--bg);
  color: var(--text);
}
.page{
  width: min(var(--max), calc(100% - 48px));
  margin: 26px auto 70px;
}
.pageTop{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:16px;
  margin-bottom:14px;
}
.brand{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.brandDot{ width:10px; height:10px; border-radius:999px; background: var(--acc); box-shadow: 0 0 0 4px rgba(255,106,0,.14);}
.brandName{ font-weight:900; letter-spacing:.02em; font-size:.95rem; }
.brandSub{ color: var(--muted); font-size:.95rem; }
.pageTopRight{ display:flex; align-items:center; gap:10px; }
.linkBtn{ color: rgba(244,244,245,.78); text-decoration:none; border:1px solid var(--line2); padding:8px 10px; border-radius:999px; background: rgba(255,255,255,.03); }
.linkBtn:hover{ border-color: rgba(255,106,0,.55); }

.demoCard{
  border:1px solid var(--line2);
  border-radius: var(--r3);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* Top bar */
.demoBar{
  display:grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:12px;
  background: rgba(0,0,0,.22);
  border-bottom: 1px solid var(--line);
}

.demoBar__left{ min-width:0; }
.demoBar__center{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-width:0;
}
.demoBar__right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  min-width:0;
}

.navTabs{
  display:flex; gap:8px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  min-width:0;
}
.navTabs::-webkit-scrollbar{ display:none; }

.tab{
  border:1px solid var(--line2);
  background: rgba(255,255,255,.03);
  color: rgba(244,244,245,.86);
  padding:9px 11px;
  border-radius: 14px;
  font-weight: 900;
  cursor:pointer;
  white-space:nowrap;
}
.tab.is-active{
  border-color: rgba(255,106,0,.55);
  background: rgba(255,106,0,.12);
}

.viewToggle{
  display:flex; align-items:center;
  border:1px solid var(--line2);
  background: rgba(255,255,255,.02);
  border-radius: 14px;
  padding:3px;
}
.seg{
  border:0;
  background: transparent;
  color: rgba(244,244,245,.78);
  font-weight: 900;
  padding:8px 10px;
  border-radius: 11px;
  cursor:pointer;
  white-space:nowrap;
}
.seg.is-active{ background: rgba(255,106,0,.14); color: rgba(244,244,245,.94); }

.stagePicker{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--line2);
  background: rgba(255,255,255,.02);
  border-radius: 14px;
  padding:6px 10px;
  min-width: 0;
  flex:1 1 auto;
  max-width: 560px;
}
.stageLabel{ font-size:.82rem; color: rgba(244,244,245,.68); font-weight: 900; white-space:nowrap; }
.stageSeg{
  display:flex; gap:6px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  min-width: 0;
  padding:2px 0;
}
.stageSeg::-webkit-scrollbar{ display:none; }
.stageBtn{
  border:1px solid var(--line2);
  background: rgba(255,255,255,.02);
  color: rgba(244,244,245,.84);
  font-weight:900;
  padding:7px 10px;
  border-radius: 999px;
  cursor:pointer;
  white-space:nowrap;
  font-size:.92rem;
}
.stageBtn.is-active{ border-color: rgba(255,106,0,.55); background: rgba(255,106,0,.12); }

.pill{
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid var(--line2);
  border-radius:999px;
  padding:9px 11px;
  background: rgba(255,255,255,.03);
  font-weight: 900;
  white-space:nowrap;
  cursor:pointer;
  user-select:none;
}
.pill .dot{ width:10px; height:10px; border-radius:999px; background: rgba(255,255,255,.26); }
.pill.is-on{ border-color: rgba(255,106,0,.55); }
.pill.is-on .dot{ background: var(--acc); box-shadow: 0 0 0 4px rgba(255,106,0,.14); }

.rateCtrl{ display:flex; align-items:center; gap:8px; white-space:nowrap; }
.rateLbl{ font-size:.82rem; color: rgba(244,244,245,.68); font-weight:900; }

select, input, textarea{
  background: rgba(255,255,255,.03);
  border:1px solid var(--line2);
  color: rgba(244,244,245,.92);
  padding:10px 12px;
  border-radius: 14px;
  font-size: 1rem;
}
select option{ color:#101012; background:#fff; }

.btn{
  border:1px solid var(--line2);
  background: rgba(255,255,255,.03);
  color: rgba(244,244,245,.92);
  padding:9px 11px;
  border-radius: 14px;
  font-weight: 900;
  cursor:pointer;
  white-space:nowrap;
}
.btn--primary{
  border-color: rgba(255,106,0,.65);
  background: rgba(255,106,0,.12);
}
.btn--ghost:hover, .btn:hover{ border-color: rgba(255,106,0,.55); }
.iconBtn{
  border:1px solid var(--line2);
  background: rgba(255,255,255,.03);
  color: rgba(244,244,245,.92);
  width:38px; height:38px;
  border-radius: 12px;
  cursor:pointer;
}

/* Overflow menu */
.menuWrap{ position: relative; }
.menu{
  position:absolute;
  right:0;
  top: calc(100% + 10px);
  min-width: 210px;
  padding:10px;
  border-radius: 16px;
  border:1px solid var(--line2);
  background: rgba(10,10,12,.92);
  box-shadow: 0 18px 60px rgba(0,0,0,.65);
  display:none;
  z-index: 50;
}
.menu.is-open{ display:block; }
.menuItem{
  width:100%;
  text-align:left;
  padding:10px 10px;
  border-radius: 12px;
  border:1px solid transparent;
  background: transparent;
  color: rgba(244,244,245,.92);
  font-weight: 900;
  cursor:pointer;
}
.menuItem:hover{ border-color: rgba(255,106,0,.45); background: rgba(255,106,0,.10); }
.menuSep{ height:1px; margin:8px 0; background: rgba(255,255,255,.10); }
.menuHead{ font-size:.82rem; color: rgba(244,244,245,.66); font-weight:900; margin:6px 2px; }

/* Menu layout helpers (used for compact controls inside “More”) */
.menuRow{ display:flex; gap:8px; align-items:center; margin:8px 0 10px; }
.pill--menu{ padding:10px 12px; border-radius:999px; flex:1 1 auto; justify-content:center; }
.rateCtrl--menu{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--line2);
  background: rgba(255,255,255,.03);
  flex:0 0 auto;
}
.rateCtrl--menu .rateLbl{ font-size:.82rem; color: rgba(244,244,245,.66); font-weight:900; }
.rateCtrl--menu select{
  background: transparent;
  border: 0;
  padding: 0 0 0 2px;
  color: rgba(244,244,245,.92);
  font-weight: 950;
}

/* Body */
.demoBody{ padding: 14px; }

/* Pipeline layout: main board + slide-out demo dock. */
.pipeWrap{ position:relative; min-width:0; overflow: visible; }
.pipeMain{ min-width:0; }

/* Click-catcher when dock is open */

.dockScrim{
  /* Desktop: no scrim (dock is outside). Mobile: used when dock becomes a sheet. */
  display:none;
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.45);
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease;
  z-index: 40;
}

/* Dock panel: anchored to the pipeline edge and slides OUT to the right (so it feels like it comes from the pipeline). */
/* Demo controls dock (opens OUTSIDE the pipeline; toggle in top bar) */
.sideDock{
  /* container is just a hook; panel itself is fixed-positioned */
  position: static;
}

.dockToggle{
  height: 42px;
  width: 42px;
  border-radius: 14px;
  border:1px solid rgba(255,106,0,.55);
  background: rgba(255,106,0,.16);
  color: rgba(244,244,245,.96);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}
.dockToggle:hover{ background: rgba(255,106,0,.22); }
.dockToggle:active{ transform: translateY(1px); }
.dockToggle__icon{ display:block; transition: transform .18s ease; }
.dockToggle[aria-expanded="true"] .dockToggle__icon{ transform: rotate(180deg); }

/* Fixed panel (position is set by JS relative to .pipeWrap) */
.sideDock__panel{
  position: fixed;
  width: 320px;
  height: auto;
  max-height: 80vh;
  opacity: 0;
  transform: translateX(8px);
  pointer-events:none;
  transition: opacity .18s ease, transform .22s ease;
  z-index: 80; /* above demo card */
}
.pipeWrap.dock-open .sideDock__panel{
  opacity: 1;
  transform: translateX(0);
  pointer-events:auto;
}
.sideDock__panel::before{
  content:"";
  position:absolute;
  left: -1px;
  top: 16px;
  bottom: 16px;
  width: 1px;
  background: rgba(255,255,255,.10);
}

.sideCard{
  max-height: 100%;
  overflow:auto;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(8,8,10,1); /* fully opaque */
  box-shadow: 0 18px 60px rgba(0,0,0,.42);
  padding: 14px;
}

/* Hide scrollbar/scroll when dock is closed */
.pipeWrap:not(.dock-open) .sideCard{ overflow:hidden; }

/* Mobile: dock becomes a bottom sheet with scrim */
@media (max-width: 900px){
  .sideDock__panel{
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: min(520px, calc(100% - 20px));
    margin: 0 auto 10px;
    transform: translateY(14px);
    max-height: 70vh;
  }
  .pipeWrap.dock-open .sideDock__panel{
    transform: translateY(0);
  }
  .sideDock__panel::before{ display:none; }
}

.sideTitle{ font-weight:950; margin-bottom: 10px; }
.sideSection{ padding-top: 12px; margin-top: 12px; border-top:1px solid rgba(255,255,255,.10); }
.sideSection:first-of-type{ padding-top:0; margin-top:0; border-top:none; }
.sideLabel{ color: rgba(244,244,245,.72); font-weight: 900; font-size:.85rem; margin-bottom: 10px; }
.sideRow{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.sideRow .btn{ flex: 1 1 120px; }
.sideRow .pill{ flex: 1 1 150px; }
.sideRow .rateCtrl{
  flex: 1 1 150px;
  /* Prevent label/select overlap in tighter widths */
  display:grid;
  gap:6px;
  align-items:start;
}
.sideRow .rateCtrl select{ width:100%; }

.pane{ display:none; }
.pane.is-active{ display:block; }
.paneTitle{ margin:0 0 12px; font-size:1.1rem; }

/* Kanban */
.kanban{
  display:grid;
  /* Never let columns squeeze so far that card content appears to overlap.
     If the viewport is narrower, the board scrolls horizontally instead. */
  grid-template-columns: repeat(4, minmax(280px, 1fr));
  gap:12px;
  overflow-x:auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling:touch;
}
.col{
  border:1px solid var(--line2);
  border-radius: var(--r2);
  background: rgba(0,0,0,.14);
  padding:10px;
  min-height: 380px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.colHead{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  margin-bottom: 10px;
}
.colTitle{ font-weight: 950; }
.count{
  font-weight: 950;
  color: rgba(255,106,0,.95);
  border:1px solid rgba(255,106,0,.35);
  background: rgba(255,106,0,.10);
  padding: 4px 10px;
  border-radius: 999px;
}
.card{
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.20);
  padding: 12px 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  cursor: pointer;
  margin-bottom: 10px;
  overflow: hidden; /* clips any long tokens that would otherwise spill */
}
.card:active{ transform: translateY(1px); }
.cardTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  min-width:0;
}
.cardTop > *{ min-width:0; }

.cardName{ font-weight: 950; }
.price{
  font-weight: 950;
  font-size: 1.15rem;
  line-height: 1.1;
  color: rgba(255,106,0,.95);
  padding-left: 2px; /* prevents $ glyph clipping with overflow-hidden cards */
}
.price--empty{
  color: rgba(220,225,235,.9);
  font-size: 1.05rem;
}
.cardMeta{ margin-top: 10px; }
.small{ font-size:.86rem; color: rgba(244,244,245,.70); margin-top: 6px; line-height:1.35; }
.tagRow{ display:flex; align-items:center; gap:8px; margin-top: 10px; flex-wrap:wrap; }
.tag{
  font-size:.78rem;
  font-weight: 950;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  color: rgba(244,244,245,.78);
}
.tag--alt{ border-color: rgba(255,106,0,.35); background: rgba(255,106,0,.10); }
.code{
  font-size:.78rem;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
  color: rgba(244,244,245,.72);
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* List view */
.listView{ display:none; }
.listHead{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:12px;
  margin-bottom: 10px;
}
.listTitle{ font-weight: 950; font-size: 1.1rem; }
.listMeta{ color: rgba(244,244,245,.66); margin-top: 2px; font-size:.92rem; }
.hint{ color: rgba(244,244,245,.66); font-size:.9rem; }
.list{ display:grid; gap: 10px; }

.moveBtn{
  margin-top: 10px;
  width: 100%;
  border-radius: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(255,106,0,.35);
  background: rgba(255,106,0,.10);
  color: rgba(244,244,245,.92);
  font-weight: 950;
}

.demoFoot{
  margin-top: 14px;
  border-top: 1px dashed rgba(255,255,255,.14);
  padding-top: 12px;
}
.footLine{ display:flex; align-items:flex-start; gap:10px; color: rgba(244,244,245,.74); }
.bullet{ width:8px; height:8px; border-radius:999px; background: rgba(255,255,255,.22); margin-top: 6px; }

/* KPI pane */
.kpiGrid{
  display:grid;
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  gap: 12px;
}
.kpi{
  border:1px solid var(--line2);
  border-radius: var(--r2);
  background: rgba(0,0,0,.14);
  padding: 12px;
}
.kpiName{ color: rgba(244,244,245,.66); font-weight:900; font-size:.86rem; }
.kpiVal{ font-size: 1.6rem; font-weight: 950; margin-top: 6px; }
.kpiHint{ color: rgba(244,244,245,.66); font-size:.88rem; margin-top: 6px; }

.cardGrid{ display:grid; grid-template-columns: repeat(3, minmax(220px,1fr)); gap: 12px; }
.infoCard{ border:1px solid var(--line2); border-radius: var(--r2); background: rgba(0,0,0,.14); padding: 12px; }
.infoTitle{ font-weight: 950; }
.infoText{ color: rgba(244,244,245,.74); margin: 8px 0 0; }

.audit{
  border:1px solid var(--line2);
  border-radius: var(--r2);
  background: rgba(0,0,0,.14);
  padding: 12px;
  max-height: 380px;
  overflow:auto;
}
.auditItem{
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.auditItem:last-child{ border-bottom:none; }
.auditT{ font-weight: 900; }
.auditM{ color: rgba(244,244,245,.70); margin-top: 4px; font-size:.92rem; }

/* Overlays */
.drawer, .sheet, .modal{ position: fixed; inset: 0; display:none; z-index: 100; }
.drawer.is-open, .sheet.is-open, .modal.is-open{ display:block; }
.drawer__backdrop, .sheet__backdrop, .modal__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.55); z-index:0; }

/* Ensure panels sit above the backdrop so inputs are clickable */
.drawer__panel, .sheet__panel, .modal__panel{ z-index:1; }
.drawer__panel{
  position:absolute; right: 18px; top: 18px; bottom: 18px;
  width: min(420px, calc(100% - 36px));
  border-radius: 22px;
  border:1px solid var(--line2);
  background: rgba(10,10,12,.94);
  box-shadow: 0 22px 80px rgba(0,0,0,.7);
  display:flex; flex-direction:column; overflow:hidden;
}
.drawer__head, .drawer__foot{
  padding:12px; background: rgba(0,0,0,.22);
  border-bottom:1px solid rgba(255,255,255,.10);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.drawer__foot{ border-bottom:0; border-top:1px solid rgba(255,255,255,.10); }
.drawer__title{ font-weight: 950; }
.drawer__body{ padding:12px; overflow:auto; }
.kv{ display:grid; grid-template-columns: 120px 1fr; gap:10px; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.kv:last-child{ border-bottom:none; }
.k{ color: rgba(244,244,245,.66); font-weight: 900; font-size:.86rem; }
.v{ font-weight: 900; }
.note{ margin-top: 10px; color: rgba(244,244,245,.74); line-height:1.5; }

.sheet__panel{
  position:absolute; left: 50%; transform: translateX(-50%);
  bottom: 16px;
  width: min(520px, calc(100% - 32px));
  border-radius: 22px;
  border:1px solid var(--line2);
  background: rgba(10,10,12,.94);
  box-shadow: 0 22px 80px rgba(0,0,0,.7);
  height: 80dvh;
  max-height: calc(100dvh - 32px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.sheet__head{
  padding:12px; background: rgba(0,0,0,.22);
  border-bottom:1px solid rgba(255,255,255,.10);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.sheet__title{ font-weight: 950; }
.sheet__body{
  padding: 12px;
  display:grid;
  gap: 10px;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}
.moveOpt{
  width:100%; text-align:left;
  padding: 12px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: rgba(244,244,245,.92);
  font-weight: 950;
  cursor:pointer;
}
.moveOpt:hover{ border-color: rgba(255,106,0,.45); background: rgba(255,106,0,.10); }

.modal__panel{
  position:absolute; left:50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100% - 32px));
  border-radius: 22px;
  border:1px solid var(--line2);
  background: rgba(10,10,12,.94);
  box-shadow: 0 22px 80px rgba(0,0,0,.7);
  overflow:hidden;
}
.modal__head{
  padding:12px; background: rgba(0,0,0,.22);
  border-bottom:1px solid rgba(255,255,255,.10);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.modal__title{ font-weight: 950; }
.modal__body{ padding:12px; display:grid; gap:12px; }
.field label{ display:block; font-size:.86rem; font-weight:900; color: rgba(244,244,245,.70); margin-bottom:6px; }
.fieldRow{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal__actions{ display:flex; gap:10px; justify-content:flex-end; }

/* Responsive */
@media (max-width: 1100px){
  .kpiGrid{ grid-template-columns: repeat(2, minmax(170px,1fr)); }
  .cardGrid{ grid-template-columns: 1fr; }
}
@media (max-width: 900px){
  .demoBar{
  display:grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:12px;
  background: rgba(0,0,0,.22);
  border-bottom: 1px solid var(--line);
}

  .demoBar__left{ min-width:0; }
  .demoBar__center{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-width:0;
}
  .demoBar__right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  min-width:0;
}
  .btn--primary{ flex: 1 1 180px; }
  .listView{ display:block; }
}
@media (max-width: 560px){
  .page{ width: calc(100% - 24px); margin: 16px auto 60px; }
  .brandSub{ display:none; }
  .demoBody{ padding: 12px; }
  .listHead{ flex-direction: column; align-items:flex-start; }
  .drawer__panel{ right: 12px; left: 12px; width: auto; }
  .fieldRow{ grid-template-columns: 1fr; }
}


/* --- DemoBar responsiveness (prevents overlap / funky spacing) --- */
@media (max-width: 1120px){
  .demoBar{
    grid-template-columns: minmax(0,1fr);
    grid-auto-rows: auto;
    row-gap:10px;
  }
  .demoBar__left{ order:1; }
  .demoBar__center{ order:2; justify-content:flex-start; }
  .demoBar__right{ order:3; justify-content:flex-start; flex-wrap:wrap; }
  .stagePicker{ max-width: none; width:100%; }
}

@media (max-width: 720px){
  .demoBar{ padding:10px; }
  .demoBar__center{ flex-wrap:wrap; }
  .viewToggle{ width:100%; justify-content:space-between; }
  .stagePicker{ width:100%; }
  .stageLabel{ display:none; }
  .demoBar__right{ gap:8px; }
  #createBtn{ width:100%; }
}



/* (dock mobile styles are defined in the main dock block above) */