@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

:root{
  --bg-color:#F0F0F2;
  --text-primary:#2A2A2A;
  --text-secondary:#4A4A4F;
  --accent-cyan:#3DDAC9;
  --accent-orange:#F89B72;
  --accent-purple:#9F86FF;
  --glass-bg:rgba(255,255,255,.65);
  --glass-border:rgba(255,255,255,.4);
  --shadow-soft:0 22px 44px rgba(42,42,42,0.08);
  /* Keep app-mode search and entry card vertically aligned and easy to tune. */
  --app-entry-vertical-shift:clamp(56px, 8vh, 94px);
  --app-shell-center-y:calc(134px + var(--app-entry-vertical-shift));
  --app-shell-results-y:calc(100vh - env(safe-area-inset-bottom,0px) - clamp(52px, 9vh, 72px));
  --app-shell-nav-offset:0px;
}



@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('fonts/jetbrainsmono-400.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url('fonts/jetbrainsmono-500.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url('fonts/jetbrainsmono-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Libre Baskerville';
  font-style: italic;
  font-weight: 400;
  font-display: block;
  src: url('fonts/librebaskerville-400-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('fonts/librebaskerville-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url('fonts/librebaskerville-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: block;
  src: url('fonts/playfair-italic-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('fonts/playfair-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url('fonts/playfair-600.woff2') format('woff2');
}

html,body{height:100%;}
body{
  font-family:'DM Sans Variable','DM Sans',-apple-system,sans-serif;
  background:var(--bg-color);
  color:var(--text-primary);
  overflow-x:hidden;
  scroll-behavior:smooth;
}

/* Use a custom cursor only when it’s likely to feel good */
@media (pointer:fine) and (prefers-reduced-motion:no-preference){
  body{cursor:none;}
}

.serif{font-family:'Libre Baskerville', Georgia, serif;}
.qa-mono{font-family:'JetBrains Mono', monospace;}
.hero-anything-em{
  font-family:'Playfair Display',serif;
  font-style:italic;
  font-weight:400;
}

/* ===================== Cursor ===================== */
.cursor-dot,
.cursor-outline{position:fixed; top:0; left:0; transform:translate(-50%,-50%); border-radius:999px; z-index:9999; pointer-events:none; display:none;}
@media (pointer:fine) and (prefers-reduced-motion:no-preference){
  .cursor-dot,.cursor-outline{display:block;}
}
.cursor-dot{width:8px; height:8px; background:var(--text-primary);}
.cursor-outline{width:40px; height:40px; border:1px solid rgba(42,42,42,.2); transition:width .2s,height .2s,background-color .2s,border-color .2s;}

/* ===================== Aura Blobs ===================== */
.aura-blobs{position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:0;}
.blob{position:absolute; border-radius:50%; filter:blur(100px); opacity:.7; animation:float 15s infinite ease-in-out; z-index:0; scale:1; transition:scale .8s ease-out, opacity 1s ease, filter 1s ease, z-index 0s 1s;}
.blob-1{width:550px; height:550px; background:var(--accent-cyan); top:-10%; left:-10%; animation-delay:0s;}
.blob-2{width:480px; height:480px; background:var(--accent-orange); bottom:-10%; right:10%; animation-delay:5s;}
.blob-3{width:420px; height:420px; background:var(--accent-purple); top:30%; left:30%; animation-delay:10s; mix-blend-mode:multiply;}

@media (max-width:860px){
  .blob{
    filter:blur(72px);
    opacity:.56;
  }
  .blob-1{
    width:min(72vw, 340px);
    height:min(72vw, 340px);
    top:-12%;
    left:-24%;
  }
  .blob-2{
    width:min(68vw, 320px);
    height:min(68vw, 320px);
    bottom:-14%;
    right:-18%;
  }
  .blob-3{
    width:min(62vw, 290px);
    height:min(62vw, 290px);
    top:24%;
    left:18%;
    opacity:.5;
    mix-blend-mode:normal;
  }
}

@keyframes float{
  0%{transform:translate(0,0) scale(1);}
  25%{transform:translate(40px,-60px) scale(1.15);}
  50%{transform:translate(-30px,30px) scale(.85);}
  75%{transform:translate(25px,-40px) scale(1.1);}
  100%{transform:translate(0,0) scale(1);}
}

.blob.is-washing{
  scale:4 !important;
  opacity:.9 !important;
  filter:blur(60px) !important;
  z-index:40;
  transition:scale .75s cubic-bezier(.16,1,.3,1), opacity .75s ease, filter .75s ease !important;
}

/* ===================== Ripple Canvas ===================== */
#ripple-canvas{
  position:fixed; inset:0;
  z-index:6;
  pointer-events:none;
  opacity:.5;
}

/* ===================== Legacy marquee ===================== */
@keyframes marquee{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}
.marquee-container{position:relative;}
.marquee-content{
  width:max-content;
  animation:marquee 38s linear infinite;
}
.marquee-fade{
  -webkit-mask-image:linear-gradient(to right, transparent 0%, black 9%, black 91%, transparent 100%);
  mask-image:linear-gradient(to right, transparent 0%, black 9%, black 91%, transparent 100%);
}

/* ===================== Glass ===================== */
.glass-card{
  background:var(--glass-bg);
  backdrop-filter:blur(30px);
  -webkit-backdrop-filter:blur(30px);
  border:1px solid var(--glass-border);
}

@keyframes frosted-blob-float{
  0%{transform:translate(0,0) scale(1);}
  100%{transform:translate(10px,15px) scale(1.05);}
}

.glass-card--frosted-blob{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.glass-card--frosted-blob::before,
.glass-card--frosted-blob::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:0;
  animation:frosted-blob-float 20s infinite alternate ease-in-out;
  transition:transform .6s cubic-bezier(.16,1,.3,1), opacity .6s ease;
}
.glass-card--frosted-blob::before{
  left:-12%;
  bottom:-26%;
  width:54%;
  height:60%;
  background:radial-gradient(circle, rgba(61,218,201,.22) 0%, rgba(61,218,201,0) 72%);
  filter:blur(10px);
}
.glass-card--frosted-blob::after{
  top:-18%;
  right:-8%;
  width:46%;
  height:52%;
  background:radial-gradient(circle, rgba(159,134,255,.18) 0%, rgba(248,155,114,.1) 45%, transparent 74%);
  filter:blur(8px);
}
.glass-card--frosted-blob:hover::before{
  transform:scale(1.1) translate(10px,-10px);
  opacity:.4;
}
.glass-card--frosted-blob:hover::after{
  transform:scale(1.1) translate(-10px,10px);
  opacity:.35;
}
.glass-card--frosted-blob > *{
  position:relative;
  z-index:1;
}

/* ===================== Nav ===================== */
.site-nav{
  pointer-events:none;
  padding:1rem;
  --nav-frosted-filter:blur(40px) saturate(1.8) brightness(1.08) contrast(.76);
  --nav-row-height:68px;
  --nav-shell-width:min(500px, calc(100vw - 1rem));
  --nav-shell-width-open:min(752px, calc(100vw - 1rem));
  transition:transform .46s cubic-bezier(.22,.61,.36,1), opacity .33s ease, padding .32s cubic-bezier(.16,1,.3,1);
  will-change:transform, opacity;
}
@media (min-width:768px){
  .site-nav{
    padding:1.4rem;
    --nav-row-height:72px;
    --nav-shell-width:min(450px, calc(100vw - 3rem));
    --nav-shell-width-open:min(812px, calc(100vw - 3rem));
  }
}
.site-nav.is-scrolled{
  padding-top:.55rem;
  padding-bottom:.55rem;
  --nav-row-height:60px;
  --nav-shell-width:min(415px, calc(100vw - 1rem));
  --nav-shell-width-open:min(736px, calc(100vw - 1rem));
}
.site-nav.is-hidden{
  transform:translateY(calc(-100% - .75rem));
  opacity:0;
  transition-duration:.58s, .42s, .32s;
  transition-timing-function:cubic-bezier(.32,0,.2,1), ease, cubic-bezier(.16,1,.3,1);
}
.site-nav.is-menu-open{
  transform:translateY(0);
  opacity:1;
}
@media (min-width:768px){
  .site-nav.is-scrolled{
    padding-top:.75rem;
    padding-bottom:.75rem;
    --nav-row-height:62px;
    --nav-shell-width:min(450px, calc(100vw - 3rem));
    --nav-shell-width-open:min(796px, calc(100vw - 3rem));
  }
}

.site-nav-shell{
  pointer-events:auto;
  position:relative;
  width:var(--nav-shell-width);
  margin:0 auto;
  overflow:hidden;
  isolation:isolate;
  border-radius:999px;
  border:2px solid rgba(235,235,235,.4);
  border-top-color:rgba(255,255,255,.58);
  border-left-color:rgba(255,255,255,.48);
  background:
    linear-gradient(180deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.82) 40%, rgba(250,252,255,.78) 100%),
    linear-gradient(120deg, rgba(255,255,255,.66) 0%, rgba(246,250,255,.5) 100%);
  box-shadow:
    0 18px 40px rgba(8,14,24,.14),
    0 1px 0 rgba(255,255,255,.72) inset,
    0 -16px 24px rgba(160,170,186,.1) inset,
    0 0 0 1px rgba(255,255,255,.16);
  transition:width .4s cubic-bezier(.16,1,.3,1), border-radius .24s cubic-bezier(.24,.9,.27,1), background .32s ease, border-color .32s ease, box-shadow .32s ease;
}
.site-nav-shell::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.32) 24%, rgba(255,255,255,.2) 60%, rgba(255,255,255,.16) 100%),
    radial-gradient(115% 125% at 20% -4%, rgba(255,255,255,.78) 0%, rgba(255,255,255,.3) 22%, rgba(255,255,255,.08) 52%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.76),
    inset 0 -14px 24px rgba(12,18,32,.08),
    inset 0 0 0 1px rgba(255,255,255,.16);
}
.site-nav-shell::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:0;
  background:
    linear-gradient(115deg,
      rgba(255,255,255,.2) 0%,
      rgba(255,255,255,.06) 36%,
      rgba(255,255,255,0) 74%),
    radial-gradient(86% 106% at 92% 92%, rgba(125,196,255,.1) 0%, transparent 56%);
  mix-blend-mode:screen;
  opacity:.48;
}
.site-nav-shell > *{
  position:relative;
  z-index:1;
}
@supports ((backdrop-filter:blur(18px)) or (-webkit-backdrop-filter:blur(18px))){
  .site-nav-shell{
    backdrop-filter:var(--nav-frosted-filter);
    -webkit-backdrop-filter:var(--nav-frosted-filter);
  }
}
.site-nav.is-scrolled .site-nav-shell{
  border-color:rgba(235,235,235,.42);
  border-top-color:rgba(255,255,255,.6);
  background:
    linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.84) 40%, rgba(251,252,255,.8) 100%),
    linear-gradient(120deg, rgba(255,255,255,.7) 0%, rgba(247,251,255,.54) 100%);
  box-shadow:
    0 16px 34px rgba(8,14,24,.16),
    0 1px 0 rgba(255,255,255,.76) inset,
    0 -16px 24px rgba(160,170,186,.12) inset,
    0 0 0 1px rgba(255,255,255,.18);
}
.site-nav.is-menu-open .site-nav-shell{
  width:var(--nav-shell-width-open);
  border-radius:26px;
  border-color:rgba(235,235,235,.46);
  border-top-color:rgba(255,255,255,.64);
  background:
    linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.87) 40%, rgba(252,253,255,.83) 100%),
    linear-gradient(120deg, rgba(255,255,255,.74) 0%, rgba(248,251,255,.58) 100%);
}

.site-nav-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  min-height:var(--nav-row-height);
  padding:0 .7rem;
  gap:0;
  transition:min-height .32s cubic-bezier(.16,1,.3,1), padding .32s cubic-bezier(.16,1,.3,1);
}
@media (min-width:768px){
  .site-nav-row{
    padding:0 1rem;
    gap:0;
  }
}
.site-nav-brand{
  justify-self:center;
  white-space:nowrap;
  font-size:1.45rem;
  line-height:1;
}
.site-nav-cta{
  justify-self:start;
  padding:.6rem .95rem;
  min-height:0;
  font-size:.78rem;
  line-height:1;
  box-shadow:0 10px 22px rgba(42,42,42,.2);
}
@media (min-width:768px){
  .site-nav-cta{
    padding:.68rem 1.12rem;
    font-size:.84rem;
  }
}
.site-nav.is-scrolled .site-nav-cta{
  padding:.54rem .9rem;
}
.site-nav-menu-button{
  justify-self:end;
  width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid transparent;
  background:transparent;
  color:#2A2A2A;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
  transition:background-color .24s ease, border-color .24s ease, box-shadow .24s ease, transform .24s cubic-bezier(.16,1,.3,1);
}
.site-nav-menu-button:hover{
  background:rgba(42,42,42,.06);
  border-color:rgba(42,42,42,.14);
  box-shadow:inset 0 0 0 1px rgba(42,42,42,.08);
}
.site-nav-menu-button:active{
  transform:scale(.97);
  background:rgba(42,42,42,.1);
}
.site-nav-icon{
  position:absolute;
  transition:opacity .2s ease, transform .24s cubic-bezier(.16,1,.3,1);
}
.site-nav-icon-close{
  opacity:0;
  transform:rotate(-45deg) scale(.72);
}
.site-nav.is-menu-open .site-nav-icon-menu{
  opacity:0;
  transform:rotate(45deg) scale(.72);
}
.site-nav.is-menu-open .site-nav-icon-close{
  opacity:1;
  transform:rotate(0deg) scale(1);
}

.site-nav-panel{
  border-top:1px solid rgba(255,255,255,.38);
  max-height:0;
  opacity:0;
  visibility:hidden;
  transform:translateY(-10px);
  transition:max-height .38s cubic-bezier(.16,1,.3,1), opacity .22s ease, transform .38s cubic-bezier(.16,1,.3,1), visibility .22s ease;
}
.site-nav.is-menu-open .site-nav-panel{
  max-height:22rem;
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.site-nav-panel-inner{
  padding:.85rem .95rem 1rem;
}
@media (min-width:768px){
  .site-nav-panel-inner{
    padding:1rem 1.15rem 1.15rem;
  }
}
.site-nav-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.38rem .62rem;
}
@media (min-width:768px){
  .site-nav-links{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:.42rem .55rem;
  }
}
@media (min-width:1024px){
  .site-nav-links{
    gap:.45rem .7rem;
  }
}
.site-nav-panel-link{
  display:inline-flex;
  width:auto;
  flex:0 1 calc((100% - 1.24rem) / 3);
  max-width:calc((100% - 1.24rem) / 3);
  justify-content:center;
  padding:.34rem 0;
  text-align:center;
  color:#2A2A2A;
  font-size:.9rem;
  font-weight:600;
  white-space:nowrap;
}
@media (min-width:768px){
  .site-nav-panel-link{
    width:100%;
    flex:none;
    max-width:none;
  }
}
.site-nav-panel-copy{
  margin-top:.8rem;
  max-width:44rem;
}
.site-nav-backdrop{
  position:fixed;
  inset:0;
  z-index:40;
  background:rgba(16,16,20,.28);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .24s ease, visibility .24s ease;
}
.site-nav-backdrop.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.site-nav a,.site-nav button{pointer-events:auto;}
.nav-link{position:relative;}
.nav-link::after{
  content:""; position:absolute; left:0; bottom:-4px;
  width:0%; height:1px; background:var(--text-primary);
  transition:width .28s ease;
}
.nav-link:hover::after{width:100%;}

@media (max-width:430px){
  .site-nav-brand{
    font-size:1.2rem;
  }
  .site-nav-cta{
    padding:.56rem .78rem;
    font-size:.74rem;
  }
}

/* ===================== Buttons ===================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem;
  border-radius:999px;
  padding:.9rem 1.2rem;
  font-weight:650;
  letter-spacing:-0.01em;
  transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s cubic-bezier(.16,1,.3,1), background-color .25s ease, opacity .2s ease;
}
.btn:active{transform:translateY(0) scale(.99);}
.btn-primary{
  background:#2A2A2A; color:#fff;
  box-shadow:0 12px 26px rgba(42,42,42,.22);
}
.btn-primary:hover{background:#191919; transform:translateY(-1px); box-shadow:0 18px 34px rgba(42,42,42,.26);}
.btn-secondary{
  background:rgba(255,255,255,.65);
  border:1px solid rgba(255,255,255,.55);
  color:#2A2A2A;
  box-shadow:0 10px 22px rgba(42,42,42,.08);
}
.btn-secondary:hover{background:rgba(255,255,255,.85); transform:translateY(-1px); box-shadow:0 14px 26px rgba(42,42,42,.10);}
.btn-ghost{
  background:transparent;
  border:1px solid rgba(42,42,42,.10);
  color:#2A2A2A;
}
.btn-ghost:hover{background:rgba(255,255,255,.55); transform:translateY(-1px);}

/* ===================== Scroll reveal ===================== */
.reveal-on-scroll{opacity:0; transform:translateY(26px) scale(.99); filter:blur(2px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1), filter .9s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--reveal-order,0) * 110ms);
}
.reveal-on-scroll.is-visible{opacity:1; transform:translateY(0) scale(1); filter:blur(0);}

/* ===================== Hero Search Shell ===================== */
.hero-search-shell{
  --search-progress:0;
  --hero-frosted-filter:blur(16px) saturate(1.22) brightness(1.04);
  position:fixed; left:50%; top:50%;
  z-index:45;
  width:min(56rem, calc(100vw - 1rem));
  transform-origin:center;
  transform:translate(-50%,-50%) scale(1);
  opacity:0;
  pointer-events:none;
  transition:opacity .45s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1);
  will-change:opacity;
  isolation:isolate;
}
.hero-search-shell.is-ready{
  opacity:1;
  pointer-events:auto;
}
.hero-search-shell.is-app-transitioning{
  transition:
    opacity .45s cubic-bezier(.16,1,.3,1),
    box-shadow .35s cubic-bezier(.16,1,.3,1),
    width .8s cubic-bezier(.16,1,.3,1),
    top .8s cubic-bezier(.16,1,.3,1),
    transform .8s cubic-bezier(.16,1,.3,1);
}
.hero-search-shell::before{
  content:"";
  position:absolute;
  inset:-14px -20px;
  z-index:0;
  border-radius:999px;
  pointer-events:none;
  background:
    radial-gradient(76% 130% at 18% 14%, rgba(255,255,255,.46) 0%, rgba(255,255,255,.14) 36%, transparent 62%),
    radial-gradient(62% 140% at 88% 92%, rgba(125,196,255,.16) 0%, transparent 60%);
  filter:blur(22px);
  opacity:.54;
  transform:translateZ(0);
  transition:opacity .35s ease, transform .35s ease;
}
.hero-search-shell.is-motion::before{
  opacity:.68;
  transform:translateZ(0) scale(1.01);
}

.hero-search-pill{
  position:relative;
  z-index:1;
  overflow:hidden;
  isolation:isolate;
  border:1px solid rgba(255,255,255,.56);
  border-top-color:rgba(255,255,255,.8);
  border-left-color:rgba(255,255,255,.66);
  background:
    linear-gradient(180deg, rgba(255,255,255,.64) 0%, rgba(255,255,255,.42) 40%, rgba(255,255,255,.32) 100%),
    linear-gradient(120deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.10) 100%);
  box-shadow:
    0 18px 40px rgba(8,14,24,.14),
    0 1px 0 rgba(255,255,255,.72) inset,
    0 -16px 24px rgba(160,170,186,.12) inset,
    0 0 0 1px rgba(255,255,255,.12);
  backdrop-filter:var(--hero-frosted-filter);
  -webkit-backdrop-filter:var(--hero-frosted-filter);
  transition:box-shadow .35s ease, border-color .35s ease, background .35s ease, transform .35s ease;
  transform:translateZ(0);
  will-change:box-shadow;
}
.hero-search-pill::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.52) 0%, rgba(255,255,255,.16) 24%, rgba(255,255,255,0) 60%, rgba(255,255,255,.10) 100%),
    radial-gradient(115% 125% at 20% -4%, rgba(255,255,255,.74) 0%, rgba(255,255,255,.2) 22%, transparent 52%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.76),
    inset 0 10px 20px rgba(255,255,255,.08),
    inset 0 -18px 28px rgba(12,18,32,.1),
    inset 0 0 0 1px rgba(255,255,255,.18);
}
.hero-search-pill::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  border-radius:inherit;
  pointer-events:none;
  background:
    linear-gradient(115deg,
      rgba(255,255,255,.22) 0%,
      rgba(255,255,255,.06) 36%,
      rgba(255,255,255,0) 74%),
    radial-gradient(86% 106% at 92% 92%, rgba(125,196,255,.12) 0%, transparent 56%);
  mix-blend-mode:screen;
  opacity:.56;
  transition:opacity .35s ease;
}
.hero-search-pill:focus-within{
  border-top-color:rgba(255,255,255,.9);
  border-color:rgba(255,255,255,.62);
  box-shadow:
    0 24px 50px rgba(8,14,24,.18),
    0 12px 28px rgba(255,255,255,.14) inset,
    0 1px 0 rgba(255,255,255,.78) inset,
    0 0 0 1px rgba(255,255,255,.2);
}
.hero-search-pill > *{
  position:relative;
  z-index:2;
}

.hero-search-shell.is-docked .hero-search-pill{
  border-color:rgba(255,255,255,.52);
  border-top-color:rgba(255,255,255,.78);
  box-shadow:
    0 16px 34px rgba(8,14,24,.16),
    0 8px 20px rgba(255,255,255,.1) inset,
    0 1px 0 rgba(255,255,255,.72) inset,
    0 0 0 1px rgba(255,255,255,.14);
}
.hero-search-shell.is-docked .hero-search-pill::after{
  opacity:.46;
}

.hero-input-wrap{position:relative; flex:1; min-width:0; display:flex; align-items:center;}
.hero-hint-overlay{
  position:absolute; inset:0; display:flex; align-items:center;
  color:#B7B7BC;
  font-size:clamp(1.35rem, 3.6vw, 3.05rem);
  font-weight:400;
  letter-spacing:-0.025em;
  line-height:1.06;
  pointer-events:none;
  overflow:hidden;
  transition:opacity .2s ease;
  z-index:0;
}
.hero-hint-overlay.is-hidden{opacity:0;}
.hero-hint-slot{position:relative; width:100%; height:1.1em; overflow:hidden; white-space:nowrap;}
.hero-hint-text{
  position:absolute; left:0; top:0;
  transform:translateY(0%);
  opacity:1;
  transition:transform .38s cubic-bezier(.16,1,.3,1), opacity .38s cubic-bezier(.16,1,.3,1);
}
.hero-hint-overlay.is-resetting .hero-hint-text{transition:none;}
.hero-hint-text--next{transform:translateY(108%); opacity:0;}
.hero-hint-overlay.is-animating .hero-hint-text--current{transform:translateY(-108%); opacity:0;}
.hero-hint-overlay.is-animating .hero-hint-text--next{transform:translateY(0%); opacity:1;}

#go-button{
  border:none;
  background:#2A2A2A;
  color:#fff;
  box-shadow:0 10px 24px rgba(42,42,42,.28);
  transition:transform .3s cubic-bezier(.16,1,.3,1), background-color .3s ease, box-shadow .3s ease, color .3s ease;
}
#go-button[disabled]{
  background:rgba(42,42,42,.14);
  color:rgba(42,42,42,.35);
  box-shadow:none;
  cursor:default;
}
#go-button:not([disabled]):hover{
  background:#191919;
  transform:translateY(-1px) scale(1.02);
  box-shadow:0 16px 30px rgba(42,42,42,.34);
}

.product-story{
  position:relative;
  height:340vh;
  z-index:12;
}
.product-story-sticky{
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.25rem;
}
.story-stage{
  position:relative;
  width:min(1280px, 100%);
  height:min(78vh, 720px);
  border-radius:32px;
  overflow:hidden;
}

.story-stage::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 500px at 20% 20%, rgba(61,218,201,.22), transparent 60%),
    radial-gradient(900px 500px at 85% 70%, rgba(159,134,255,.18), transparent 62%),
    radial-gradient(700px 420px at 40% 92%, rgba(248,155,114,.18), transparent 60%);
  z-index:0;
  pointer-events:none;
}
.story-stage::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(255,255,255,.22);
  z-index:1;
  pointer-events:none;
}

#story-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index:0;
}
.story-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap:1rem;
  padding:1.25rem;
  pointer-events:none;
}
.story-copy{
  align-self:end;
  padding:1.1rem 1.1rem;
  border-radius:24px;
  pointer-events:none;
}
.story-copy-inner{
  max-width:460px;
}
.story-kicker{
  font-size:.75rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  font-weight:800;
  color:rgba(142,142,147,.9);
  margin-bottom:.7rem;
}
.story-head{
  font-size:clamp(2rem, 3.6vw, 3.4rem);
  letter-spacing:-0.03em;
  line-height:1.02;
  margin-bottom:.75rem;
  color:#111827;
}
.story-body{
  color:rgba(142,142,147,1);
  font-size:1rem;
  line-height:1.6;
  margin-bottom:1rem;
}
.story-chips{display:flex; flex-wrap:wrap; gap:.5rem;}
.story-chip{
  font-size:.75rem;
  font-weight:650;
  border-radius:999px;
  padding:.35rem .6rem;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.55);
  color:rgba(17,24,39,.78);
}
.story-step{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .35s cubic-bezier(.16,1,.3,1), transform .35s cubic-bezier(.16,1,.3,1);
}
.story-step.is-active{
  opacity:1;
  transform:translateY(0);
}
.story-skip{
  position:absolute;
  top:1rem;
  right:1rem;
  z-index:3;
  pointer-events:auto;
  font-size:.82rem;
  font-weight:700;
  color:rgba(42,42,42,.68);
  background:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.55);
  padding:.55rem .85rem;
  border-radius:999px;
  transition:opacity .2s ease, transform .25s cubic-bezier(.16,1,.3,1), background-color .2s ease;
}
.story-skip:hover{opacity:.9; transform:translateY(-1px); background:rgba(255,255,255,.75);}

.story-steps-indicator{
  position:absolute;
  bottom:1rem;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:.45rem;
  pointer-events:none;
  z-index:3;
}
.story-dot{
  width:8px; height:8px;
  border-radius:999px;
  background:rgba(42,42,42,.18);
  transition:transform .25s ease, background-color .25s ease;
}
.story-dot.is-active{background:rgba(42,42,42,.75); transform:scale(1.15);}
.story-dot.is-done{background:rgba(42,42,42,.36);}

/* Mobile fallback */
.product-story-mobile{display:none;}
@media (max-width: 860px){
  .product-story{height:auto; padding:5rem 0 2rem;}
  .product-story-sticky{position:relative; height:auto; padding:0;}
  .story-stage{height:auto; border-radius:0; overflow:visible; width:100%;}
  #story-canvas{display:none;}
  .story-overlay{display:none;}
  .product-story-mobile{display:block;}
}

/* ===================== Built For ===================== */
#built-for,
#how-it-works{
  scroll-margin-top:160px;
}
.built-for-section{
  perspective:1600px;
}
.built-for-shell{
  --built-for-progress:0;
  --built-for-lift:72px;
  --built-for-scale:.94;
  --built-for-tilt:10deg;
  position:relative;
  overflow:hidden;
  padding:clamp(1.4rem, 3vw, 2.3rem);
  border-radius:36px;
  background:linear-gradient(145deg, rgba(255,255,255,.74) 0%, rgba(255,255,255,.56) 58%, rgba(255,255,255,.68) 100%);
  border:1px solid rgba(255,255,255,.72);
  backdrop-filter:blur(28px);
  -webkit-backdrop-filter:blur(28px);
  box-shadow:0 28px 70px rgba(42,42,42,.14);
  transform:translate3d(0,var(--built-for-lift),0) scale(var(--built-for-scale)) rotateX(var(--built-for-tilt));
  transform-origin:center top;
  transition:box-shadow .35s ease, border-color .35s ease;
  will-change:transform;
}
.built-for-shell::before,
.built-for-shell::after{
  content:"";
  position:absolute;
  pointer-events:none;
}
.built-for-shell::before{
  left:-12%;
  bottom:-26%;
  width:54%;
  height:60%;
  background:radial-gradient(circle, rgba(61,218,201,.34) 0%, rgba(61,218,201,0) 72%);
  filter:blur(10px);
}
.built-for-shell::after{
  top:-18%;
  right:-8%;
  width:46%;
  height:52%;
  background:radial-gradient(circle, rgba(159,134,255,.28) 0%, rgba(248,155,114,.16) 45%, transparent 74%);
  filter:blur(8px);
}
.built-for-top,
.built-for-grid{
  position:relative;
  z-index:1;
}
.built-for-top{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:1.25rem;
}
.built-for-copy{
  margin:25px auto 0;
  width:100%;
  max-width:min(1100px, 100%);
}
.built-for-title{
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  color:#111827;
  font-family:'DM Sans Variable','DM Sans',-apple-system,sans-serif;
  letter-spacing:-0.03em;
}
.built-for-title-label{
  display:block;
  font-size:4.5rem;
  line-height:1.1;
  font-weight:300;
}
.built-for-title em{
  display:block;
  margin-top:10px;
  font-size:4.5rem;
  line-height:1.1;
  font-family:'Playfair Display',serif;
  font-style:italic;
  font-weight:400;
  color:#111827;
  white-space:nowrap;
}
.built-for-subtext{
  max-width:44rem;
  margin-left:auto;
  margin-right:auto;
}
.built-for-actions{
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  margin-bottom:25px;
}
.built-for-signals{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  margin-top:1rem;
}
.built-for-signals span{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:.45rem .75rem;
  background:rgba(255,255,255,.58);
  border:1px solid rgba(255,255,255,.7);
  color:rgba(42,42,42,.76);
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.built-for-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
  margin-top:2rem;
}
@media (min-width: 768px){
  .built-for-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px){
  .built-for-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}
.usecase-card{
  border-radius:24px;
  padding:1.25rem 1.25rem;
  border:1px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.55);
  box-shadow:0 14px 26px rgba(42,42,42,.06);
  transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, background-color .25s ease;
}
.usecase-card:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.75);
  box-shadow:0 18px 36px rgba(42,42,42,.08);
}
.built-for-card{
  background:rgba(255,255,255,.74);
  border-color:rgba(255,255,255,.78);
  box-shadow:0 22px 38px rgba(42,42,42,.08);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.built-for-card:hover{
  transform:translateY(-6px);
  background:rgba(255,255,255,.88);
  box-shadow:0 30px 52px rgba(42,42,42,.12);
}
.usecase-icon{
  width:42px; height:42px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(0,0,0,.05);
  margin-bottom:.9rem;
}

/* ===================== How It Works v2 ===================== */
.howitworks-v2-section{
  position:relative;
  isolation:isolate;
  padding:2rem 0 clamp(2rem, 3vw, 3.2rem);
  --grad-top:rgba(255,255,255,.74);
  --grad-mid:rgba(255,255,255,.56);
  --grad-bottom:rgba(255,255,255,.50);
  --howitworks-parallax:0px;
  --hw-text:#111827;
  --hw-text-soft:rgba(17,24,39,.74);
  --hw-text-subtle:rgba(17,24,39,.52);
  --hw-border:rgba(255,255,255,.74);
  --border-light:rgba(17,24,39,0.14);
  --hw-accent:rgba(17,24,39,.46);
  --font-sans:'DM Sans Variable','DM Sans',-apple-system,sans-serif;
  --font-serif:'Playfair Display',serif;
  --font-mono:'JetBrains Mono',monospace;
}

.howitworks-v2-section .terminal-wrapper{
  position:relative;
  z-index:1;
  background:linear-gradient(145deg,var(--grad-top) 0%,var(--grad-mid) 58%,var(--grad-bottom) 100%);
  border:0;
  box-shadow:0 28px 70px rgba(42,42,42,.14);
  border-radius:0px;
  backdrop-filter:blur(28px);
  -webkit-backdrop-filter:blur(28px);
  transform:translate3d(0, var(--howitworks-parallax), 0);
  will-change:transform;
  overflow:hidden;
}

.howitworks-v2-section .terminal-wrapper::before,
.howitworks-v2-section .terminal-wrapper::after{
  content:"";
  position:absolute;
  pointer-events:none;
}

.howitworks-v2-section .terminal-wrapper::before{
  left:-12%;
  bottom:-24%;
  width:54%;
  height:52%;
  background:radial-gradient(circle, rgba(61,218,201,.34) 0%, rgba(61,218,201,0) 72%);
  filter:blur(10px);
}

.howitworks-v2-section .terminal-wrapper::after{
  top:-18%;
  right:-8%;
  width:46%;
  height:48%;
  background:radial-gradient(circle, rgba(159,134,255,.28) 0%, rgba(248,155,114,.16) 45%, transparent 74%);
  filter:blur(8px);
}

.howitworks-v2-section .terminal-wrapper{
  width:100%;
  min-height:calc(100vh - 4rem);
}

.howitworks-v2-section .scanline-texture{
  position:absolute;
  inset:0;
  background-image:repeating-linear-gradient(to right,rgba(17,24,39,0.015) 0px,rgba(17,24,39,0.015) 1px,transparent 1px,transparent 3px);
  pointer-events:none;
  z-index:100;
  border-radius:0px;
}

.howitworks-v2-section .terminal-wrapper .container{
  max-width:1100px;
  margin:0 auto;
  padding:0 40px;
  position:relative;
  z-index:10;
}

/* Nav */
.top-nav{
  padding:32px 0;
  display:flex;
  justify-content:center;
  gap:12px;
}

.nav-pill{
  padding:6px 16px;
  border-radius:20px;
  font-size:11px;
  font-weight:600;
  color:#1f2d34;
  background:#fff;
  letter-spacing:0.02em;
}

/* Hero — matches the reference exactly */
.hero-section{
  padding:120px 0 120px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.5rem;
}

.system-status{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:0.3em;
  color:var(--hw-text-soft);
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:8px;
}

.system-status::before{
  content:'';
  width:6px;
  height:6px;
  background:#4ade80;
  border-radius:50%;
  box-shadow:0 0 8px rgba(74,222,128,0.4);
}

.headline{
  font-size:4.5rem;
  line-height:1.1;
  letter-spacing:-0.03em;
  color:var(--hw-text);
  font-weight:300;
  max-width:900px;
  font-family:var(--font-sans);
}

.headline em{
  font-family:var(--font-serif);
  font-weight:400;
  display:block;
  margin-top:10px;
  color:var(--hw-text);
}

#methodology-story{
  --hw-text:#111827;
  --font-sans:'DM Sans Variable','DM Sans',-apple-system,sans-serif;
  --font-serif:'Playfair Display',serif;
}

.proof-headline{
  margin:0 auto;
  text-align:center;
  font-size:clamp(2.2rem, 4.4vw, 3.8rem);
}

.proof-headline em{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:400;
  display:inline;
  margin-top:0;
  color:var(--hw-text);
}

.subheadline{
  font-size:16px;
  color:var(--hw-text-soft);
  max-width:500px;
  line-height:1.6;
}

/* Steps */
.process-flow{padding-bottom:200px;}

.step-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:100px;
  margin-bottom:160px;
}

.step-row:nth-child(even){
  flex-direction:row-reverse;
}

.step-text{flex:1;max-width:440px;}

.step-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  margin-bottom:24px;
  border-top:1px solid var(--border-light);
  padding-top:16px;
}

.step-num{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--hw-accent);
}

.step-title{
  font-size:14px;
  font-weight:500;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--hw-text);
}

/* The subtle glass container — same on all 3 steps */
.micro-ui-container{
  width:420px;
  flex-shrink:0;
  background:rgba(255,255,255,0.54);
  border:1px solid rgba(255,255,255,0.34);
  border-radius:16px;
  padding:2rem;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:0 20px 40px rgba(0,0,0,0.15);
  display:flex;
  flex-direction:column;
  gap:1.25rem;
}

/* ── Step 1 ── */
.scan-row{display:flex;gap:20px;align-items:center;}

.floating-card{
  position:relative;
  width:160px;
  height:210px;
  flex-shrink:0;
  background:linear-gradient(145deg,#f1f5f9,#e2e8f0);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 14px 36px rgba(0,0,0,0.22);
  border:1px solid rgba(255,255,255,0.9);
}

.scan-asset-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 35%;
}

.qa-scan-beam{
  position:absolute;
  width:100%;
  height:2px;
  background:#2dd4bf;
  box-shadow:0 0 14px 2px #2dd4bf;
  animation:qa-scan 3s infinite ease-in-out;
  top:0;
  z-index:10;
}

@keyframes qa-scan{
  0%,100%{top:0%;opacity:0;}
  10%{opacity:1;}
  90%{opacity:1;}
  50%{top:100%;}
}

.pulse-teal{
  position:absolute;
  width:13px;
  height:13px;
  border-radius:50%;
  background:#2dd4bf;
  border:2px solid #fff;
  box-shadow:0 0 10px rgba(45,212,191,0.6);
  animation:pglow 2s infinite;
}

@keyframes pglow{
  0%,100%{box-shadow:0 0 10px rgba(45,212,191,0.5);}
  50%{box-shadow:0 0 18px rgba(45,212,191,0.9);}
}

.quote-side{flex:1;}

.quote-label{
  font-family:var(--font-mono);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:0.14em;
  color:var(--hw-text-subtle);
  margin-bottom:8px;
}

.quote-mark{
  font-family:var(--font-serif);
  font-size:2.8rem;
  line-height:0.8;
  color:rgba(17,24,39,.2);
  display:block;
  margin-bottom:4px;
}

.quote-text{
  font-family:var(--font-serif);
  font-style:italic;
  font-size:0.92rem;
  line-height:1.55;
  color:var(--hw-text-soft);
}

.data-rows{
  border-top:1px solid var(--border-light);
  padding-top:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.data-row{display:flex;justify-content:space-between;}

.mu-label{
  font-family:var(--font-mono);
  font-size:9px;
  color:var(--hw-text-subtle);
  text-transform:uppercase;
  letter-spacing:0.15em;
}

.mu-value{
  font-size:14px;
  color:var(--hw-text);
}

/* ── Step 2 ── */
.market-header-row{display:flex;justify-content:space-between;align-items:center;}

.market-label{
  font-family:var(--font-mono);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:0.14em;
  color:var(--hw-text-soft);
}

.market-badges{display:flex;gap:5px;}

.mbadge{
  font-family:var(--font-mono);
  font-size:9px;
  padding:2px 7px;
  border-radius:4px;
}

.mbadge-gray{
  background:rgba(17,24,39,0.08);
  color:var(--hw-text);
  border:1px solid rgba(17,24,39,0.12);
}

.mbadge-live{
  background:rgba(52,211,153,0.15);
  color:#34d399;
}

.sources-outer{
  position:relative;
  height:290px;
  overflow:hidden;
  border-radius:10px;
}

.sources-scroll-wrap{position:relative;}

.sources-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  margin-right:14px;
}
.scroll-hint {
  position: absolute;
  top: 5px;
  right: 2px;
  bottom: 55px;
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 7px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--hw-text-soft);
}



.scroll-hint-track {
  width: 4px;
  flex: 1;
  min-height: 40px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.12);
  position: relative;
  overflow: hidden;
}

.scroll-hint-thumb {
  position: absolute;
  top: 0%;
  left: 0;
  width: 100%;
  height: 34%;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.35);
}

/* White photo-style source cards */
.src-card{
  border-radius:10px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(255,255,255,0.9);
}

.src-card.best-card{
  border:1.5px solid #3b82f6;
  box-shadow:0 2px 12px rgba(59,130,246,0.18);
}

.src-card.dim-card{opacity:0.55;}

.src-photo{
  height:40px;
  background:#e2e8f0;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

.src-photo img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.src-photo-placeholder{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#e2e8f0,#cbd5e1);
}

.best-flag{
  position:absolute;
  top:5px;
  right:5px;
  font-size:7px;
  font-weight:700;
  padding:2px 5px;
  border-radius:99px;
  background:#3b82f6;
  color:#fff;
  z-index:2;
}

.src-info{
  padding:6px 8px;
}

.src-name{
  font-size:9px;
  font-weight:600;
  color:#111827;
  margin-bottom:1px;
}

.src-price{
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:700;
  color:#1f2937;
}

.src-price.best-price{color:#1d4ed8;}

.src-meta{
  font-size:7px;
  color:#6b7280;
  margin-top:1px;
}

.mkt-fade{
  position:absolute;
  bottom:0;
  left:0;
  right:14px;
  height:180px;
  background:linear-gradient(to bottom,transparent 0%,rgba(120,136,150,.32) 45%,rgba(120,136,150,.72) 80%);
  border-radius:0 0 10px 0;
  pointer-events:none;
  z-index:5;
}

.stat-row{
  position:absolute;
  bottom:0;
  left:0;
  right:14px;
  z-index:6;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}

.stat-card{
  border-radius:9px;
  padding:9px 11px;
  background:rgba(255,255,255,0.28);
  border:1px solid rgba(255,255,255,0.42);
  backdrop-filter:blur(12px);
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
}

.stat-lbl{
  font-family:var(--font-mono);
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--hw-text-soft);
}

.stat-sub{
  font-size:8px;
  color:var(--hw-text-soft);
  margin-top:1px;
}

.stat-val{
  font-family:var(--font-mono);
  font-size:14px;
  font-weight:400;
  color:var(--hw-text);
}

/* ── Step 3 ── */
.range-block{border-bottom:1px solid var(--border-light);padding-bottom:14px;}

.range-lbl-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:6px;
}

.range-badge{
  font-size:9px;
  font-weight:700;
  padding:2px 7px;
  border-radius:99px;
  background:rgba(52,211,153,0.15);
  color:#34d399;
  border:1px solid rgba(52,211,153,0.3);
}

.price-range{
  font-size:28px;
  font-weight:300;
  letter-spacing:-0.02em;
  color:var(--hw-text);
}

.notes-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.note-card{
  border-radius:8px;
  padding:9px 10px;
  background:rgba(255,255,255,0.54);
  border:1px solid rgba(255,255,255,0.38);
}

.note-lbl{
  font-family:var(--font-mono);
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:var(--hw-text-subtle);
  margin-bottom:4px;
}

.note-text{
  font-size:10px;
  color:var(--hw-text-soft);
  line-height:1.5;
}

.evidence-section{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.evidence-hdr{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.evidence-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}

.ev-main{
  border-radius:9px;
  overflow:hidden;
  background:#fff;
  border:1px solid #dbeafe;
  display:flex;
  flex-direction:column;
}

.ev-main-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding:8px 9px;
  border-bottom:1px solid #f3f4f6;
}

.ev-title{
  font-size:10px;
  font-weight:700;
  color:#111827;
  line-height:1.3;
  flex:1;
  padding-right:5px;
}

.ev-body{
  display:flex;
  gap:7px;
  padding:8px 9px;
  flex:1;
}

.ev-photo{
  flex:1;
  background:linear-gradient(135deg,#e2e8f0,#cbd5e1);
  border-radius:5px;
  border:1px solid #f3f4f6;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  position:relative;
}

.ev-photo img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.ev-stats{flex:1;display:flex;flex-direction:column;justify-content:center;gap:3px;}

.ev-price{
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:700;
  color:#111827;
}

.ev-match{
  font-size:8px;
  font-family:var(--font-mono);
  color:#059669;
}

.ev-src{
  font-size:8px;
  color:#9ca3af;
}

.mini-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
}

.mini-card{
  border-radius:7px;
  padding:7px 8px;
  background:rgba(255,255,255,0.62);
  border:1px solid rgba(255,255,255,0.34);
}

.mini-name{
  font-size:8px;
  font-weight:600;
  color:var(--hw-text);
}

.mini-price{
  font-family:var(--font-mono);
  font-size:9px;
  font-weight:400;
  color:var(--hw-text-soft);
  margin-top:1px;
}

.mini-sub{
  font-size:7px;
  color:var(--hw-text-subtle);
}

/* ===================== How It Works ===================== */
.how-story-section{
  position:relative;
  perspective:2200px;
  overflow:visible;
  padding:clamp(1.2rem, 2.4vw, 2.4rem) clamp(10px, 1.6vw, 24px) clamp(3.2rem, 4.4vw, 4.6rem);
}
.how-story-chapter{
  position:relative;
  width:100%;
  margin:0 auto;
}
.how-page-card{
  --how-page-progress:0;
  --how-page-lift:132px;
  --how-page-scale:.97;
  --how-page-tilt:10deg;
  --how-page-hero-shift:58px;
  --how-page-header-shift:34px;
  --how-page-stage-shift:26px;
  --how-page-rail-shift:42px;
  --how-page-exit-shift:104px;
  --how-accent:rgba(61,218,201,.42);
  --how-accent-solid:#14b8a6;
  position:relative;
  width:100%;
  max-width:none;
  margin:0 auto;
  transform:translate3d(0,var(--how-page-lift),0) scale3d(1, var(--how-page-scale), 1) rotateX(var(--how-page-tilt));
  transform-origin:center top;
  will-change:transform;
}
.how-page-card[data-how-active="2"]{
  --how-accent:rgba(96,165,250,.42);
  --how-accent-solid:#2563eb;
}
.how-page-card[data-how-active="3"]{
  --how-accent:rgba(192,132,252,.45);
  --how-accent-solid:#9333ea;
}
.how-page-card::before,
.how-page-card::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:0;
}
.how-page-card::before{
  top:-10%;
  right:-6%;
  width:34%;
  height:28%;
  background:radial-gradient(circle, var(--how-accent) 0%, rgba(255,255,255,0) 72%);
  filter:blur(34px);
  opacity:.9;
}
.how-page-card::after{
  left:12%;
  bottom:8%;
  width:28%;
  height:22%;
  background:radial-gradient(circle, rgba(159,134,255,.24) 0%, rgba(248,155,114,0) 72%);
  filter:blur(44px);
}
.how-page-surface{
  position:relative;
  z-index:1;
  min-height:clamp(920px, 100svh, 1280px);
  width:100vw;
  margin-left:50%;
  transform:translateX(-50%);
  padding:clamp(1.1rem, 1.7vw, 1.8rem);
  /* Rounded top corners, perfectly straight bottom edge */
  border-radius:clamp(34px, 3vw, 52px) clamp(34px, 3vw, 52px) 0 0;
  overflow:hidden;
  isolation:isolate;
  background:linear-gradient(160deg, rgba(4,9,17,.985) 0%, rgba(8,18,31,.972) 22%, rgba(12,27,44,.952) 50%, rgba(8,16,28,.94) 100%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 46px 120px rgba(8,13,24,.34);
}
.how-page-surface::before,
.how-page-surface::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}
.how-page-surface::before{
  background:
    radial-gradient(circle at 82% 10%, var(--how-accent) 0%, rgba(255,255,255,0) 28%),
    radial-gradient(circle at 18% 88%, rgba(248,155,114,.2) 0%, rgba(248,155,114,0) 34%),
    linear-gradient(135deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 34%);
  opacity:.92;
}
.how-page-surface::after{
  inset:1px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 16%, rgba(255,255,255,0) 84%, rgba(255,255,255,.07) 100%),
    linear-gradient(90deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 18%, rgba(255,255,255,0) 82%, rgba(255,255,255,.04) 100%);
  mix-blend-mode:screen;
}
.how-page-hero,
.how-stage-header,
.how-stage,
.how-story-exit{
  position:relative;
  z-index:1;
}
.how-page-hero{
  display:grid;
  grid-template-columns:minmax(0, 1.12fr) minmax(300px, .88fr);
  gap:clamp(1.15rem, 2.6vw, 3rem);
  align-items:end;
  padding:clamp(.7rem, 1.2vw, 1.4rem) clamp(.2rem, .4vw, .35rem) clamp(1.1rem, 1.8vw, 2rem);
  transform:translate3d(0,var(--how-page-hero-shift),0);
  will-change:transform;
}
.how-page-kicker{
  margin:0 0 .85rem;
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:rgba(255,255,255,.52);
}
.how-page-title{
  margin:0;
  max-width:11ch;
  font-size:clamp(3.2rem, 6vw, 7.2rem);
  line-height:.9;
  letter-spacing:-.065em;
  color:#fff;
}
.how-page-lead{
  margin:1.25rem 0 0;
  max-width:44rem;
  font-size:clamp(1.05rem, 1.55vw, 1.24rem);
  line-height:1.72;
  color:rgba(255,255,255,.76);
}
.how-page-meta{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-content:flex-end;
  gap:.8rem;
}
.how-page-meta span{
  display:inline-flex;
  align-items:center;
  min-height:50px;
  border-radius:999px;
  padding:.74rem 1.05rem;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.8);
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 18px 34px rgba(5,10,18,.2);
}
.how-stage-header{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(240px, .34fr);
  gap:1rem 2rem;
  align-items:end;
  margin-bottom:clamp(1rem, 1.5vw, 1.4rem);
  padding:0 clamp(.2rem, .4vw, .35rem);
  transform:translate3d(0,var(--how-page-header-shift),0);
  will-change:transform;
}
.how-stage-eyebrow{
  margin:0 0 .65rem;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(255,255,255,.54);
}
.how-stage-copy{
  margin:0;
  max-width:54rem;
  font-size:clamp(1.05rem, 1.38vw, 1.2rem);
  color:rgba(255,255,255,.8);
  line-height:1.72;
}
.how-stage-note{
  margin:0;
  justify-self:end;
  max-width:19rem;
  padding:1rem 1.05rem;
  border-radius:24px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.72);
  font-size:.86rem;
  line-height:1.6;
  box-shadow:0 18px 30px rgba(6,12,21,.18), 0 0 0 1px rgba(255,255,255,.03) inset;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.how-stage{
  display:grid;
  grid-auto-flow:row dense;
  grid-template-columns:minmax(248px, 290px) minmax(0, 1fr);
  gap:clamp(1rem, 1.6vw, 1.4rem);
  align-items:stretch;
  padding:0 clamp(.2rem, .4vw, .35rem);
  transform:translate3d(0,var(--how-page-stage-shift),0);
  will-change:transform;
}
.how-shell{
  position:relative;
  z-index:1;
  grid-column:2;
  min-width:0;
  overflow:hidden;
  min-height:clamp(650px, 76svh, 860px);
  border-radius:36px;
  background:linear-gradient(180deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.035) 100%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 34px 84px rgba(4,9,17,.3);
}
.how-shell::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,0) 18%, rgba(255,255,255,0) 82%, rgba(255,255,255,.035) 100%);
}
.how-stage-footer{
  position:relative;
  z-index:1;
  grid-column:1;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:1rem;
  padding:clamp(1rem, 1.5vw, 1.18rem);
  min-width:0;
  border-radius:32px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 28px 70px rgba(4,9,17,.2);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  transform:translate3d(0,var(--how-page-rail-shift),0);
  will-change:transform;
}
.how-step-controls{
  display:flex;
  flex-direction:column;
  gap:.85rem;
  align-items:stretch;
  flex:1;
}
.how-step-rail{
  display:grid;
  grid-template-columns:1fr;
  gap:.75rem;
  min-width:0;
}
.how-step-btn{
  position:relative;
  width:100%;
  min-height:134px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:.45rem;
  text-align:left;
  border-radius:22px;
  padding:1rem 1.05rem 1.05rem 1.3rem;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.09);
  color:#fff;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transition:transform .22s cubic-bezier(.16,1,.3,1), background-color .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.how-step-btn:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.18);
}
.how-step-btn.is-active{
  background:rgba(255,255,255,.94);
  color:#111827;
  border-color:rgba(255,255,255,.68);
  box-shadow:0 22px 40px rgba(13,24,39,.18);
}
.how-step-btn.is-active::after{
  content:"";
  position:absolute;
  top:1rem;
  bottom:1rem;
  left:.7rem;
  width:4px;
  border-radius:999px;
  background:var(--how-accent-solid);
}
.how-step-index{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.how-step-btn.is-active .how-step-index{
  color:rgba(17,24,39,.46);
}
.how-step-title{
  font-size:1.15rem;
  line-height:1.2;
  font-weight:700;
  letter-spacing:-.02em;
}
.how-step-summary{
  font-size:.92rem;
  line-height:1.6;
  color:rgba(255,255,255,.72);
}
.how-step-btn.is-active .how-step-summary{
  color:rgba(75,85,99,.86);
}
.how-cycle-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:flex-start;
  width:76px;
  min-width:76px;
  min-height:76px;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.1);
  color:#fff;
  box-shadow:0 18px 30px rgba(17,24,39,.18);
  transition:transform .22s cubic-bezier(.16,1,.3,1), background-color .22s ease, border-color .22s ease;
}
.how-cycle-btn:hover{
  transform:translateX(2px) scale(1.01);
  background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.24);
}
.how-cycle-btn svg{
  transition:transform .22s ease;
}
.how-cycle-btn:hover svg{
  transform:translateX(2px);
}
.how-rail-footer{
  padding:.1rem .15rem 0;
  color:rgba(255,255,255,.62);
  font-size:.78rem;
  line-height:1.6;
}
.how-rail-footer p{
  margin:0;
}
.how-story-exit{
  position:relative;
  /* Very short transition band directly under the card */
  height:clamp(56px, 7vw, 80px);
  width:100vw;
  margin:0;
  margin-left:50%;
  transform:translate3d(-50%,var(--how-page-exit-shift),0);
  will-change:transform;
}
.how-story-exit::before,
.how-story-exit::after{
  content:"";
  position:absolute;
  pointer-events:none;
}
.how-story-exit::before{
  inset:0;
  /* Very soft vertical fade of the card color into transparency */
  background:linear-gradient(
    to bottom,
    rgba(6,12,21,0.92) 0%,
    rgba(6,12,21,0.55) 35%,
    rgba(6,12,21,0.18) 70%,
    rgba(6,12,21,0) 100%
  );
}
.how-story-exit::after{
  /* Subtle glow that helps the card visually "dissolve" into the page background */
  inset:auto 0 0 0;
  height:56px;
  background:radial-gradient(
    circle at 50% 0%,
    rgba(255,255,255,0.42) 0%,
    rgba(255,255,255,0) 70%
  );
  filter:blur(26px);
  opacity:.95;
}
.how-story-outro{
  height:clamp(52px, 5vw, 86px);
}
.how-panel{display:none;}
.how-panel.is-active{display:block;}

/* ===== Old-site workflow mock components ===== */
.qa-app-shell{
  width:100%;
  min-height:640px;
  background:rgba(255,255,255,.65);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 25px 50px -12px rgba(0,0,0,.15), 0 0 0 1px rgba(255,255,255,.4) inset;
  border-radius:24px;
  display:flex;
  overflow:hidden;
  position:relative;
}
.qa-sidebar{
  width:280px;
  background:rgba(255,255,255,.75);
  border-right:1px solid rgba(0,0,0,.06);
  padding:28px 24px;
  display:flex;
  flex-direction:column;
  z-index:20;
  flex-shrink:0;
}
.qa-content-area{
  flex:1;
  position:relative;
  background:rgba(255,255,255,.15);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.qa-checklist-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid transparent;
  transition:all .2s ease;
  cursor:default;
}
.qa-checklist-item:hover{
  background:rgba(240,253,250,.5);
  transform:translateX(2px);
}
.qa-checklist-item.active-item{
  background:rgba(240,253,250,.6);
  border-color:rgba(13,148,136,.15);
}
.qa-scan-beam{
  position:absolute;
  width:100%;
  height:2px;
  background:#2dd4bf;
  box-shadow:0 0 20px 2px #2dd4bf;
  animation:qa-scan 3s infinite ease-in-out;
  top:0;
  z-index:10;
}
@keyframes qa-scan{
  0%,100%{top:0%; opacity:0;}
  10%{opacity:1;}
  90%{opacity:1;}
  50%{top:100%;}
}
.qa-card-perspective{
  perspective:1000px;
}
.qa-floating-card{
  transform:rotateY(-8deg) rotateX(4deg);
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
  transform-style:preserve-3d;
}
.qa-floating-card:hover{
  transform:rotateY(0deg) rotateX(0deg);
}
.qa-data-row{
  transition:all .2s ease;
  border-radius:8px;
}
.qa-data-row:hover{
  background:rgba(255,255,255,.7);
  transform:scale(1.01);
  box-shadow:0 4px 6px -1px rgba(0,0,0,.05);
}
.qa-stat-card{
  background:rgba(255,255,255,.6);
  border:1px solid rgba(255,255,255,.8);
  transition:all .3s ease;
}
.qa-stat-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 15px -3px rgba(0,0,0,.05);
  background:rgba(255,255,255,.8);
}
.qa-view-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:24px;
}
.qa-tag-pill{
  font-size:10px;
  padding:4px 8px;
  border-radius:99px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.qa-progress-btn{
  width:100%;
  margin-top:auto;
  padding:12px 20px;
  background:#111827;
  color:#fff;
  border-radius:12px;
  font-size:12px;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:all .2s ease;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
  cursor:pointer;
  border:none;
  letter-spacing:.02em;
}
.qa-progress-btn:hover{
  background:#0f172a;
  box-shadow:0 8px 20px rgba(0,0,0,.2);
}
.qa-custom-scroll::-webkit-scrollbar{
  width:4px;
}
.qa-custom-scroll::-webkit-scrollbar-track{
  background:transparent;
}
.qa-custom-scroll::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.1);
  border-radius:4px;
}

@media (max-width: 1024px){
  .built-for-shell{
    --built-for-lift:0px;
    --built-for-scale:1;
    --built-for-tilt:0deg;
  }
  .built-for-top{
    gap:1rem;
  }
  .how-story-section{
    padding:clamp(2.2rem, 4.8vw, 3.25rem) 16px clamp(3rem, 4vw, 4rem);
  }
  .how-page-card{
    --how-page-lift:0px;
    --how-page-scale:1;
    --how-page-tilt:0deg;
    --how-page-hero-shift:0px;
    --how-page-header-shift:0px;
    --how-page-stage-shift:0px;
    --how-page-rail-shift:0px;
    --how-page-exit-shift:0px;
  }
  .how-page-surface{
    min-height:auto;
    padding:1rem;
    border-radius:38px;
  }
  .how-page-hero{
    grid-template-columns:1fr;
    align-items:start;
    padding:.15rem 0 1.35rem;
  }
  .how-page-meta{
    justify-content:flex-start;
  }
  .how-stage-header{
    grid-template-columns:1fr;
    gap:.85rem;
    padding:0;
  }
  .how-stage-note{
    justify-self:start;
    max-width:none;
  }
  .how-stage{
    grid-template-columns:minmax(248px, 290px) minmax(0, 1fr);
    padding:0 clamp(.2rem, .4vw, .35rem);
  }
  .how-shell{
    grid-column:2;
    min-height:clamp(650px, 76svh, 860px);
  }
  .how-stage-footer{
    grid-column:1;
    justify-content:space-between;
    padding:clamp(1rem, 1.5vw, 1.18rem);
  }
  .how-step-controls{
    flex:1;
  }
  .how-step-rail{
    display:grid;
    grid-template-columns:1fr;
    overflow-x:visible;
    padding-bottom:0;
  }
  .how-step-btn{
    min-width:0;
    flex:initial;
    min-height:134px;
  }
  .how-step-btn.is-active::after{
    top:1rem;
    bottom:1rem;
    left:.7rem;
    right:auto;
    width:4px;
    height:auto;
  }
  .how-cycle-btn{
    align-self:flex-start;
    width:76px;
    min-width:76px;
    min-height:76px;
    border-radius:26px;
  }
  .how-story-exit{
    height:clamp(160px, 22vw, 240px);
    margin-top:-14px;
  }
  .qa-app-shell{
    min-height:560px;
  }
}

@media (max-width: 768px){
  .built-for-shell{
    padding:1.2rem;
  }
  .built-for-signals{
    gap:.45rem;
  }
  .built-for-signals span{
    font-size:.68rem;
    letter-spacing:.06em;
  }
  .how-story-section{
    padding:2rem .75rem 3rem;
  }
  .how-page-surface{
    padding:.85rem;
    border-radius:30px;
  }
  .how-page-hero{
    gap:1rem;
    padding:.1rem 0 1.1rem;
  }
  .how-page-title{
    max-width:none;
    font-size:clamp(2.6rem, 12vw, 4.1rem);
  }
  .how-page-lead{
    margin-top:1rem;
    font-size:1rem;
  }
  .how-page-meta{
    gap:.5rem;
  }
  .how-page-meta span{
    min-height:42px;
    padding:.6rem .85rem;
    font-size:.72rem;
  }
  .how-stage-header{
    margin-bottom:.9rem;
  }
  .how-stage-copy{
    font-size:.98rem;
  }
  .how-stage-note{
    width:100%;
    padding:.78rem .88rem;
    font-size:.82rem;
  }
  .how-stage-footer{
    grid-column:auto;
    justify-content:flex-start;
    padding:.9rem;
    border-radius:26px;
  }
  .how-stage{
    grid-template-columns:1fr;
    padding:0;
  }
  .how-shell{
    grid-column:auto;
    min-height:auto;
  }
  .how-step-controls{
    flex:0 0 auto;
  }
  .how-step-rail{
    display:flex;
    overflow-x:auto;
    padding-bottom:.25rem;
  }
  .how-step-rail::-webkit-scrollbar{
    height:4px;
  }
  .how-step-rail::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.22);
    border-radius:999px;
  }
  .how-step-btn{
    min-height:124px;
    min-width:220px;
    flex:0 0 220px;
    padding-left:1.05rem;
  }
  .how-step-btn.is-active::after{
    top:auto;
    left:1rem;
    right:1rem;
    bottom:.75rem;
    width:auto;
    height:3px;
  }
  .how-cycle-btn{
    align-self:flex-end;
    width:60px;
    min-width:60px;
    min-height:60px;
    border-radius:20px;
  }
  .how-story-exit{
    height:130px;
    margin-top:-10px;
  }
  .how-story-outro{
    height:44px;
  }
  .qa-app-shell{
    flex-direction:column;
    overflow-y:visible;
    height:auto !important;
    min-height:auto;
  }
  .qa-sidebar{
    width:100%;
    border-right:none;
    border-bottom:1px solid rgba(0,0,0,.06);
    padding:1.25rem;
  }
  .qa-content-area{
    padding:1.25rem !important;
    flex:1;
    min-height:400px;
  }
  .qa-content-area > .flex.gap-6{
    flex-direction:column;
    height:auto !important;
    align-items:center;
  }
  .qa-scan-beam,
  .qa-floating-card{
    animation:none !important;
    transform:none !important;
    transition:none !important;
  }
}

/* ===================== Methodology Story ===================== */
.methodology-story{
  position:relative;
  height:320vh;
  z-index:12;
}
.methodology-sticky{
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.25rem;
}
.methodology-stage{
  width:min(1200px, 100%);
  height:min(80vh, 720px);
  border-radius:32px;
  overflow:hidden;
  padding:1.5rem;
}
.methodology-slides{
  position:relative;
  height:100%;
}
.method-slide{
  position:absolute;
  inset:0;
  display:flex;
  align-items:stretch;
  opacity:0;
  transform:translateY(14px) scale(.995);
  filter:blur(1px);
  transition:opacity .35s cubic-bezier(.16,1,.3,1), transform .35s cubic-bezier(.16,1,.3,1), filter .35s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.method-slide.is-active{
  opacity:1;
  transform:translateY(0) scale(1);
  filter:blur(0);
  pointer-events:auto;
}
.method-slide-shell{
  display:grid;
  grid-template-columns:minmax(0, 1.02fr) minmax(320px, .98fr);
  gap:1.25rem;
  align-items:center;
  width:100%;
  height:100%;
}
.method-slide-shell-center{
  grid-template-columns:1fr;
  place-items:center;
}
.method-copy-block{
  max-width:560px;
  padding:.5rem .75rem .5rem .25rem;
}
.method-copy-block-center{
  max-width:720px;
  margin:0 auto;
  padding:.25rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.method-copy-block-solo .method-title{margin-bottom:0;}
.method-copy-block-wide{max-width:none;}
.method-kicker{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(142,142,147,1);
  margin-bottom:.9rem;
}
.method-visual{
  border-radius:24px;
  border:1px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.55);
  box-shadow:0 18px 36px rgba(42,42,42,.06);
  padding:1.1rem;
}
.method-title{
  font-size:clamp(2rem, 3.2vw, 3.1rem);
  letter-spacing:-0.03em;
  line-height:1.05;
  margin-bottom:.7rem;
}
.method-copy{color:rgba(142,142,147,1); line-height:1.65; font-size:1.02rem;}
.method-bullets{margin-top:1rem; display:flex; flex-wrap:wrap; gap:.5rem;}
.method-bullets span{font-size:.75rem; font-weight:650; border-radius:999px; padding:.35rem .6rem; background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.55);}
.method-cta-actions{
  margin-top:1.5rem;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.75rem;
}
.method-slide-shell-table{
  grid-template-columns:1fr;
  align-content:start;
}
.method-table-visual{
  padding:0;
  overflow:hidden;
}

.pain-grid{display:grid; gap:.85rem;}
.pain-card{
  position:relative;
  padding:1rem 1rem 1rem 3.4rem;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.62);
  background:rgba(255,255,255,.68);
  box-shadow:0 12px 24px rgba(42,42,42,.04);
}
.pain-card-index{
  position:absolute;
  top:1rem;
  left:1rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.8rem;
  height:1.8rem;
  border-radius:999px;
  background:rgba(17,24,39,.08);
  color:#111827;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.08em;
}
.pain-card strong{
  display:block;
  margin-bottom:.35rem;
  color:#111827;
  font-size:1rem;
  line-height:1.3;
}
.pain-card p{
  color:rgba(142,142,147,1);
  font-size:.95rem;
  line-height:1.55;
}

.method-stat-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:.85rem;
}
.method-stat-card{
  min-height:176px;
  padding:1rem;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.62);
  background:rgba(255,255,255,.68);
  box-shadow:0 12px 24px rgba(42,42,42,.04);
}
.method-stat-card-primary{
  background:linear-gradient(180deg, rgba(61,218,201,.16), rgba(255,255,255,.78));
}

.comparison-table{
  border-collapse:separate;
  border-spacing:0;
  width:100%;
  table-layout:fixed;
}
.comparison-table th,
.comparison-table td{
  padding:.95rem 1rem;
  border-bottom:1px solid rgba(42,42,42,.06);
  text-align:left;
  vertical-align:middle;
}
.comparison-table thead th{
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(142,142,147,1);
}
.comparison-table tbody th{
  width:38%;
  font-size:.92rem;
  font-weight:650;
  line-height:1.45;
  color:#111827;
}
.comparison-table tbody td{
  width:31%;
  font-size:.95rem;
  line-height:1.45;
  color:#111827;
}
.comparison-table tr:last-child td{border-bottom:none;}
.comparison-table tr:last-child th{border-bottom:none;}
.highlight-col{background:rgba(61,218,201,.13);}

.status-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.5rem;
  height:1.5rem;
  border-radius:999px;
  border:1px solid transparent;
  font-size:.9rem;
  font-weight:700;
  line-height:1;
  vertical-align:middle;
}
.status-chip-yes{
  background:rgba(37,196,153,.18);
  border-color:rgba(37,196,153,.35);
  color:#1d7a61;
}
.status-chip-no{
  background:rgba(239,68,68,.14);
  border-color:rgba(239,68,68,.3);
  color:#b91c1c;
}

.method-progress{
  position:absolute;
  bottom:1.25rem;
  left:50%;
  transform:translateX(-50%);
  width:min(420px, calc(100vw - 4rem));
  height:2px;
  background:rgba(42,42,42,.14);
  overflow:hidden;
  border-radius:999px;
}
.method-progress > span{
  display:block; height:100%;
  background:#2A2A2A;
  width:100%;
  transform-origin:left;
  transform:scaleX(0);
  transition:transform .2s linear;
}

@media (max-width: 980px){
  .methodology-story{height: auto; padding:5rem 0 2rem;}
  .methodology-sticky{position:relative; height:auto;}
  .methodology-stage{
    height:auto;
    padding:1rem;
  }
  .method-slide{position:relative; opacity:1; transform:none; filter:none; pointer-events:auto; margin-bottom:1rem;}
  .method-slide-shell,
  .method-stat-grid{
    grid-template-columns:1fr;
  }
  .method-slide-shell{padding-top:4.5rem;}
  .method-copy-block{max-width:none; padding:.25rem;}
  .method-progress{display:none;}
  .comparison-table th,
  .comparison-table td{
    padding:.75rem .7rem;
  }
  .comparison-table tbody th,
  .comparison-table tbody td{
    font-size:.9rem;
  }
  .comparison-table thead th{
    letter-spacing:.12em;
  }
}

/* ===================== FAQ ===================== */
.faq{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
}
.faq-column{
  display:grid;
  gap:1rem;
  align-content:start;
}
.faq-item{
  border-radius:20px;
  border:1px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.55);
  box-shadow:0 12px 24px rgba(42,42,42,.03);
  transition:background-color .28s ease, transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s ease, border-color .28s ease;
}
.faq-item:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.62);
  box-shadow:0 18px 30px rgba(42,42,42,.05);
}
.faq-item.is-open{
  background:rgba(255,255,255,.76);
  border-color:rgba(255,255,255,.72);
  box-shadow:0 22px 34px rgba(42,42,42,.06);
}
.faq-trigger{
  width:100%;
  border:none;
  background:transparent;
  padding:1.1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  text-align:left;
  font-weight:700;
  color:#111827;
  cursor:pointer;
}
.faq-trigger span{
  font-size:clamp(1.1rem, 1.15vw, 1.22rem);
  line-height:1.35;
}
.faq-chevron{
  width:18px;
  height:18px;
  flex-shrink:0;
  opacity:.55;
  transform:rotate(0deg);
  transition:transform .32s cubic-bezier(.16,1,.3,1), opacity .24s ease;
}
.faq-item.is-open .faq-chevron{
  transform:rotate(180deg);
  opacity:.78;
}
.faq-panel{
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  transition:grid-template-rows .38s cubic-bezier(.16,1,.3,1), opacity .24s ease, transform .38s cubic-bezier(.16,1,.3,1);
  transform:translateY(-6px);
}
.faq-item.is-open .faq-panel{
  grid-template-rows:1fr;
  opacity:1;
  transform:translateY(0);
}
.faq-panel-inner{
  overflow:hidden;
  padding:0 1.1rem 0;
}
.faq-item.is-open .faq-panel-inner{
  padding-bottom:1.1rem;
}
.faq-panel p{
  color:rgba(142,142,147,1);
  line-height:1.7;
}

@media (min-width: 768px){
  .faq{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:1rem;
    align-items:start;
  }
}

/* ===================== Appraisal Modal ===================== */
#appraisal-view{opacity:0; transform:translateY(10px); transition:opacity .45s cubic-bezier(.16,1,.3,1), transform .45s cubic-bezier(.16,1,.3,1);}
#appraisal-view.is-visible{opacity:1; transform:none;}

body.app-mode-active{overflow:hidden;}
body.app-mode-active .hero-search-shell{
  width:min(56rem, calc(100vw - 40px)) !important;
  top:var(--app-shell-active-y, max(calc(env(safe-area-inset-top,0px) + var(--app-shell-center-y)), var(--app-shell-center-y))) !important;
  transform:var(--app-shell-active-transform, translate(-50%, calc(-50% - var(--app-shell-nav-offset, 0px)))) !important;
  transition:
    opacity .45s cubic-bezier(.16,1,.3,1),
    box-shadow .35s cubic-bezier(.16,1,.3,1),
    width .8s cubic-bezier(.16,1,.3,1),
    top .8s cubic-bezier(.16,1,.3,1),
    transform .46s cubic-bezier(.22,.61,.36,1);
  will-change:transform, opacity;
}
body.app-mode-active #appraisal-view{
  padding-top:max(calc(env(safe-area-inset-top,0px) + var(--app-entry-vertical-shift)), var(--app-entry-vertical-shift));
  padding-bottom:max(calc(env(safe-area-inset-bottom,0px) + 7rem), 7rem);
}
body.app-mode-active.app-results-ready{
  --app-shell-active-y:var(--app-shell-results-y);
  --app-shell-active-transform:translate(-50%, -50%);
  --app-close-active-transform:translate3d(0, -50%, 0);
}
body.app-mode-active.app-results-ready #appraisal-view{
  padding-bottom:max(calc(env(safe-area-inset-bottom,0px) + 10.5rem), 10.5rem);
}
body.app-mode-active #appraisal-card{
  margin-top:clamp(1rem, 4vh, 4.5rem);
  padding-bottom:calc(clamp(3.5rem, 8vh, 5.5rem) + env(safe-area-inset-bottom,0px));
}
#appraisal-view:not(.hidden) #appraisal-close-row{
  min-height:clamp(72px, 9vh, 100px);
}
#appraisal-view.has-results #appraisal-close-row{
  min-height:clamp(18px, 3vh, 32px);
}
#appraisal-view:not(.hidden) #close-appraisal{
  position:fixed;
  top:var(--app-shell-active-y, max(calc(env(safe-area-inset-top,0px) + var(--app-shell-center-y)), var(--app-shell-center-y)));
  left:calc(100vw - 124px);
  transform:var(--app-close-active-transform, translate3d(0, calc(-50% - var(--app-shell-nav-offset, 0px)),0));
  margin:0;
  z-index:46;
}
#close-appraisal.appraisal-close-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  width:48px !important;
  height:48px !important;
  min-width:48px !important;
  min-height:48px !important;
  aspect-ratio:1 / 1;
  padding:0;
  border-radius:9999px !important;
  border:1px solid rgba(255,255,255,.56);
  border-top-color:rgba(255,255,255,.8);
  border-left-color:rgba(255,255,255,.66);
  background:
    linear-gradient(180deg, rgba(255,255,255,.64) 0%, rgba(255,255,255,.42) 40%, rgba(255,255,255,.32) 100%),
    linear-gradient(120deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.10) 100%);
  color:#2A2A2A;
  box-shadow:
    0 16px 34px rgba(8,14,24,.16),
    0 8px 20px rgba(255,255,255,.1) inset,
    0 1px 0 rgba(255,255,255,.72) inset,
    0 0 0 1px rgba(255,255,255,.14);
  backdrop-filter:blur(16px) saturate(1.22) brightness(1.04);
  -webkit-backdrop-filter:blur(16px) saturate(1.22) brightness(1.04);
  transition:left .24s cubic-bezier(.16,1,.3,1), transform .46s cubic-bezier(.22,.61,.36,1), box-shadow .32s ease, border-color .32s ease, background .32s ease;
}
#close-appraisal.appraisal-close-btn::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.52) 0%, rgba(255,255,255,.16) 24%, rgba(255,255,255,0) 60%, rgba(255,255,255,.10) 100%),
    radial-gradient(115% 125% at 20% -4%, rgba(255,255,255,.74) 0%, rgba(255,255,255,.2) 22%, transparent 52%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.76),
    inset 0 8px 16px rgba(255,255,255,.08),
    inset 0 -14px 22px rgba(12,18,32,.1),
    inset 0 0 0 1px rgba(255,255,255,.18);
}
#close-appraisal.appraisal-close-btn::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  border-radius:inherit;
  pointer-events:none;
  background:
    linear-gradient(115deg,
      rgba(255,255,255,.22) 0%,
      rgba(255,255,255,.06) 36%,
      rgba(255,255,255,0) 74%),
    radial-gradient(86% 106% at 92% 92%, rgba(125,196,255,.12) 0%, transparent 56%);
  mix-blend-mode:screen;
  opacity:.52;
  transition:opacity .3s ease;
}
#close-appraisal.appraisal-close-btn > *{
  position:relative;
  z-index:2;
}
#close-appraisal.appraisal-close-btn:hover{
  transform:translate3d(0, calc(-50% - var(--app-shell-nav-offset, 0px) - 1px), 0);
  border-top-color:rgba(255,255,255,.86);
  border-color:rgba(255,255,255,.62);
  box-shadow:
    0 20px 38px rgba(8,14,24,.2),
    0 10px 24px rgba(255,255,255,.14) inset,
    0 1px 0 rgba(255,255,255,.78) inset,
    0 0 0 1px rgba(255,255,255,.18);
}
#close-appraisal.appraisal-close-btn:hover::after{
  opacity:.62;
}
#close-appraisal.appraisal-close-btn:active{
  transform:translate3d(0, calc(-50% - var(--app-shell-nav-offset, 0px)),0) scale(.98);
}
body.app-mode-active.app-results-ready #close-appraisal.appraisal-close-btn:hover{
  transform:translate3d(0, calc(-50% - 1px), 0);
}
body.app-mode-active.app-results-ready #close-appraisal.appraisal-close-btn:active{
  transform:translate3d(0, -50%,0) scale(.98);
}
@media (min-width:768px){
  #appraisal-view:not(.hidden) #appraisal-close-row{
    min-height:clamp(72px, 9vh, 112px);
  }
  body.app-mode-active #appraisal-card{
    margin-top:clamp(1rem, 3.5vh, 5.5rem);
    padding-bottom:calc(clamp(3.5rem, 8vh, 7rem) + env(safe-area-inset-bottom,0px));
  }
}

.appraisal-results-layout{
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.appraisal-results-shell{
  display:flex;
  flex-direction:column;
  gap:.78rem;
}
.appraisal-range-hero{
  border-bottom:1px solid rgba(42,42,42,.14);
  padding:.15rem 0 .85rem;
}
.appraisal-range-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:.42rem;
}
.appraisal-range-label{
  font-family:'JetBrains Mono', monospace;
  font-size:.64rem;
  text-transform:uppercase;
  letter-spacing:.15em;
  color:rgba(17,24,39,.56);
  font-weight:500;
}
.appraisal-range-value{
  margin:0;
  color:#111827;
  font-size:clamp(2.05rem, 4.4vw, 3.25rem);
  line-height:1.04;
  font-weight:300;
  letter-spacing:-0.026em;
}

.appraisal-best-match-card{
  display:grid;
  grid-template-columns:minmax(96px, 118px) minmax(0, 1fr);
  gap:.9rem;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.58);
  background:linear-gradient(138deg, rgba(255,255,255,.88) 0%, rgba(245,247,251,.82) 100%);
  padding:.76rem;
  box-shadow:0 14px 26px rgba(20,24,32,.08);
}
.appraisal-best-match-image-wrap{
  border-radius:12px;
  overflow:hidden;
  background:linear-gradient(130deg, rgba(211,216,225,.95), rgba(229,233,240,.95));
  min-height:108px;
}
.appraisal-best-match-image{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.appraisal-best-match-image.is-placeholder{
  min-height:108px;
}
.appraisal-best-match-content{
  display:flex;
  flex-direction:column;
  gap:.36rem;
  min-width:0;
}
.appraisal-best-vendor{
  margin:0;
  font-size:.66rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#6d7683;
  font-weight:700;
}
.appraisal-best-title{
  margin:0;
  color:#1f1f22;
  font-size:.94rem;
  line-height:1.36;
  font-weight:600;
}
.appraisal-best-price{
  margin:0;
  color:#18212b;
  font-size:1rem;
  font-weight:700;
}
.appraisal-best-link{
  width:fit-content;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  border-radius:999px;
  padding:.38rem .68rem;
  border:1px solid rgba(42,42,42,.12);
  font-size:.69rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:700;
  color:#2a2a2a;
  background:rgba(255,255,255,.88);
  text-decoration:none;
  transition:transform .18s ease, background-color .2s ease, border-color .2s ease;
}
.appraisal-best-link:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,1);
  border-color:rgba(42,42,42,.22);
}

.appraisal-insight-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:.72rem;
}
.appraisal-panel{
  border-radius:16px;
  border:1px solid rgba(255,255,255,.54);
  background:rgba(255,255,255,.74);
  box-shadow:0 10px 22px rgba(20,24,32,.055);
  padding:.8rem .9rem;
}
.appraisal-comparables-panel{
  padding:.9rem 1rem 1rem;
}
.appraisal-panel-title{
  margin:0 0 .52rem;
  font-size:.7rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#6f7682;
  font-weight:700;
}
.appraisal-bullet-list{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:.42rem;
}
.appraisal-bullet-list > li{
  margin:0;
  color:#2f3440;
  font-size:.79rem;
  line-height:1.42;
  padding-left:.9rem;
  position:relative;
}
.appraisal-bullet-list > li::before{
  content:"";
  position:absolute;
  left:0;
  top:.52em;
  width:5px;
  height:5px;
  border-radius:999px;
  background:#3ddac9;
  box-shadow:0 0 0 3px rgba(61,218,201,.18);
}
.appraisal-bullet-list > li.appraisal-list-empty{
  color:#5f6673;
}
.appraisal-bullet-list > li.appraisal-list-empty::before{
  background:#97a0af;
  box-shadow:0 0 0 3px rgba(151,160,175,.16);
}

.appraisal-similar-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
  gap:.62rem;
}
.appraisal-similar-item{
  border-radius:12px;
  border:1px solid rgba(255,255,255,.54);
  background:linear-gradient(165deg, rgba(255,255,255,.86), rgba(244,247,252,.82));
  box-shadow:0 8px 16px rgba(20,24,32,.05);
  display:flex;
  flex-direction:column;
  align-items:stretch;
  text-decoration:none;
  color:inherit;
  overflow:hidden;
  transition:transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}
.appraisal-similar-item:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 22px rgba(20,24,32,.08);
  border-color:rgba(255,255,255,.78);
}
.appraisal-similar-media{
  background:linear-gradient(130deg, rgba(224,229,238,.95), rgba(238,241,248,.95));
  min-height:124px;
  aspect-ratio:16 / 10;
}
.appraisal-similar-image{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.appraisal-similar-image-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  color:#7f8795;
  font-size:.66rem;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.appraisal-similar-body{
  min-width:0;
  padding:.62rem .68rem .72rem;
  display:flex;
  flex-direction:column;
  gap:.3rem;
}
.appraisal-similar-vendor{
  margin:0;
  color:#687282;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.56rem;
  font-weight:700;
}
.appraisal-similar-title{
  margin:0;
  color:#232831;
  font-size:.72rem;
  line-height:1.34;
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.appraisal-similar-price{
  margin:0;
  color:#15202d;
  font-size:.78rem;
  font-weight:700;
}
.appraisal-similar-empty{
  grid-column:1 / -1;
  border-radius:12px;
  border:1px dashed rgba(42,42,42,.18);
  padding:.72rem .84rem;
  color:#5d6674;
  font-size:.78rem;
  line-height:1.45;
  background:rgba(255,255,255,.56);
}

.appraisal-raw-response{
  border-radius:14px;
  border:1px solid rgba(255,255,255,.52);
  background:rgba(255,255,255,.7);
  padding:.52rem .68rem;
}
.appraisal-raw-response > summary{
  cursor:pointer;
  font-size:.67rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#6e7683;
  font-weight:700;
}
.appraisal-result-json{
  margin:.55rem 0 0;
  max-height:220px;
  overflow:auto;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.06);
  background:rgba(255,255,255,.82);
  padding:.58rem .62rem;
  color:#21242b;
  font-family:'JetBrains Mono', monospace;
  font-size:.67rem;
  line-height:1.42;
  white-space:pre-wrap;
  word-break:break-word;
}

@media (max-width:900px){
  .appraisal-insight-grid{
    grid-template-columns:1fr;
  }
  .appraisal-similar-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
@media (max-width:640px){
  .appraisal-best-match-card{
    grid-template-columns:1fr;
  }
  .appraisal-best-match-image-wrap{
    min-height:156px;
  }
  .appraisal-similar-grid{
    grid-template-columns:1fr;
  }
}

#blob-wash-overlay{
  backdrop-filter:blur(0px);
  background-color:rgba(240,240,242,0);
  transition:backdrop-filter 1s ease, background-color 1s ease;
}
#blob-wash-overlay.is-active{
  backdrop-filter:blur(40px);
  background-color:rgba(240,240,242,.5);
  pointer-events:auto;
}

/* ===================== Code blocks ===================== */
.codeblock{
  border-radius:20px;
  overflow:auto;
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 18px 36px rgba(42,42,42,.06);
}
.codeblock.dark{background:rgba(0,0,0,.88); color:#fff;}
.codeblock.light{background:rgba(255,255,255,.70); color:#111827;}
.codeblock pre{
  margin:0;
  padding:1rem 1.1rem;
  font-family:'JetBrains Mono', monospace;
  font-size:.82rem;
  line-height:1.55;
}

/* ===================== Reduced motion ===================== */
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important;}
  .blob{animation:none !important;}
  #ripple-canvas{display:none;}
  .cursor-dot,.cursor-outline{display:none !important;}
  .reveal-on-scroll{transition:none !important; opacity:1 !important; transform:none !important; filter:none !important;}
}


/* Scan beam animation used in demo upload preview */
@keyframes workflowScanMove{
  0%{top:0; opacity:0;}
  12%{opacity:1;}
  55%{top:calc(100% - 6px); opacity:1;}
  100%{top:calc(100% - 6px); opacity:0;}
}

/* ===================== HOW-IT-WORKS: Fix card-in-card nesting ===================== */

/* 1. Strip .how-shell visual card — qa-app-shell is the real surface */
.how-shell {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
}
.how-shell::after { display: none; }

/* 2. Strip card styling from .how-step-btn — treat as list items */
.how-step-btn {
  min-height: 72px;
  border-radius: 6px;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding-left: 1.15rem;
}
.how-step-btn:last-child { border-bottom: none; }
.how-step-btn:hover {
  transform: none;
  background: rgba(255,255,255,0.06);
  border-bottom-color: rgba(255,255,255,0.07);
  border-color: transparent;
  box-shadow: none;
}
.how-step-btn.is-active {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border-color: transparent;
  box-shadow: none;
  border-radius: 8px;
}
.how-step-btn.is-active::after {
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
}
.how-step-btn.is-active .how-step-index { color: rgba(255,255,255,0.42); }
.how-step-btn.is-active .how-step-title { color: #fff; }
.how-step-btn.is-active .how-step-summary { color: rgba(255,255,255,0.62); }

/* 3. Redesigned sidebar — narrow status strip, no repeated step info */
.qa-sidebar {
  width: 160px;
  min-width: 160px;
  padding: 20px 14px;
  background: rgba(255,255,255,0.72);
  border-right: 1px solid rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.qa-sidebar-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9ca3af;
  margin-bottom: 10px;
}

.qa-sidebar-items { display: flex; flex-direction: column; gap: 2px; flex: 1; }

.qa-checklist-item {
  padding: 7px 8px;
  gap: 8px;
  border-radius: 8px;
}
.qa-checklist-item .text-xs { font-size: 10px; }

/* 4. Slimmer content area header */
.qa-view-header { margin-bottom: 16px; }
.qa-step-crumb {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9ca3af;
  margin-bottom: 4px;
}
.qa-view-title {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

/* ===================== Mobile Fixes: Built For + How It Works v2 ===================== */
@media (max-width: 860px) {
  .built-for-title-label {
    font-size: clamp(2.4rem, 13vw, 3.2rem);
    line-height: 1.05;
  }

  .built-for-title em {
    font-size: clamp(2.6rem, 14vw, 3.4rem);
    line-height: 1.05;
    white-space: normal;
    text-wrap: balance;
  }

  .built-for-subtext {
    font-size: clamp(1.05rem, 4.8vw, 1.35rem);
    line-height: 1.45;
    max-width: 34rem;
  }

  .built-for-actions {
    width: 100%;
    gap: 0.7rem;
  }

  .built-for-actions .btn {
    flex: 1 1 180px;
  }
}

@media (max-width: 480px) {
  .built-for-shell {
    padding: 1rem;
    border-radius: 28px;
  }

  .built-for-actions .btn {
    width: 100%;
    flex-basis: 100%;
  }
}

@media (max-width: 980px) {
  .howitworks-v2-section .terminal-wrapper .container {
    padding: 0 20px;
  }

  .hero-section {
    padding: 72px 0 68px;
    gap: 1.1rem;
  }

  .headline {
    font-size: clamp(2.25rem, 11vw, 3.5rem);
  }

  .subheadline {
    max-width: 100%;
  }

  .process-flow {
    padding-bottom: 96px;
  }

  .step-row,
  .step-row:nth-child(even) {
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
    margin-bottom: 3.6rem;
  }

  .step-text {
    width: 100%;
    max-width: none;
    flex: none;
  }

  .micro-ui-container {
    width: 100%;
    max-width: none;
    flex-shrink: 1;
    padding: 1.2rem;
  }
}

@media (max-width: 640px) {
  .howitworks-v2-section .terminal-wrapper .container {
    padding: 0 16px;
  }

  .hero-section {
    padding: 56px 0 52px;
  }

  .step-header {
    margin-bottom: 14px;
    padding-top: 12px;
  }

  .scan-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .floating-card {
    width: min(220px, 100%);
    height: 250px;
    margin: 0 auto;
  }

  .notes-row {
    grid-template-columns: 1fr;
  }
}