/* Page-specific refinements for the restored website-process design. */

/* Match the Home/About reading scale so the Websites transition does not shrink. */
html{
  font-size:116.875%;
}

body[data-nav-key="websites"]{
  font-size:1rem;
}

/* Keep every primary landing-page section title visually consistent. */
body[data-nav-key="websites"] main h2{
  font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  font-size:clamp(1.9rem,3.3vw,2.75rem) !important;
  font-weight:900 !important;
  letter-spacing:-.025em !important;
  line-height:1.08 !important;
}

@media (max-width:520px){
  html{
    font-size:113.4375%;
  }
}

[hidden]{
  display:none !important;
}

.hero-learn-more::after{
  content:"↓";
  margin-left:.5rem;
  font-size:1.02em;
}

@media (max-width:1100px){
  .web-hero-v2 .web-hero-actions{
    display:flex !important;
  }
}

.hero-heading-accent{
  display:block;
  min-height:1.05em;
  color:#3f51ff;
  white-space:nowrap;
  transition:opacity .18s ease,transform .18s ease;
}

.hero-heading-accent.is-changing{
  opacity:0;
  transform:translateY(.12em);
}

.hero-motion-card{
  margin:0;
  background:#eef1ff;
}

.hero-transformation-video{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4 / 3;
  object-fit:cover;
}

.motion-toggle{
  position:absolute;
  z-index:20;
  right:.7rem;
  bottom:.7rem;
  display:grid;
  width:2.35rem;
  height:2.35rem;
  padding:0;
  place-items:center;
  border:1px solid rgba(255,255,255,.7);
  border-radius:999px;
  background:rgba(23,25,71,.82);
  color:#fff;
  font:900 .82rem/1 "Inter",system-ui,sans-serif;
  box-shadow:0 9px 24px rgba(14,18,58,.24);
  cursor:pointer;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.motion-toggle:hover{
  background:#2e3094;
}

.motion-toggle:focus-visible{
  outline:3px solid #fff;
  outline-offset:3px;
}

.motion-toggle--dark{
  right:.95rem;
  bottom:.9rem;
  border-color:rgba(46,48,148,.16);
  background:rgba(255,255,255,.94);
  color:#2e3094;
}

.motion-toggle--dark:hover{
  background:#eef1ff;
}

.motion-toggle--dark:focus-visible{
  outline-color:#7f8cff;
}

.heatmap-card{
  position:relative;
  padding:.55rem;
  background:#fff;
}

.journey-heatmap{
  position:relative;
  width:100%;
  aspect-ratio:4 / 3;
  overflow:hidden;
  border-radius:20px;
  background:
    radial-gradient(circle at 80% 8%,rgba(105,124,255,.16),transparent 33%),
    linear-gradient(145deg,#f8faff,#edf1ff);
  color:#171947;
  isolation:isolate;
}

.heatmap-browser-bar{
  position:absolute;
  z-index:3;
  top:4.5%;
  left:5%;
  display:flex;
  width:90%;
  height:10%;
  align-items:center;
  gap:1.2%;
  padding:0 3%;
  border:1px solid rgba(46,48,148,.1);
  border-bottom:0;
  border-radius:18px 18px 0 0;
  background:rgba(255,255,255,.96);
}

.heatmap-browser-bar > span{
  width:2.1%;
  aspect-ratio:1;
  border-radius:999px;
  background:#ff7777;
}

.heatmap-browser-bar > span:nth-child(2){ background:#ffc85c; }
.heatmap-browser-bar > span:nth-child(3){ background:#4fd19a; }

.heatmap-browser-bar i{
  display:flex;
  width:68%;
  height:42%;
  margin-left:3%;
  align-items:center;
  padding:0 4%;
  border-radius:999px;
  background:#eef1f9;
  color:#7d85a2;
  font-size:clamp(.45rem,.9vw,.64rem);
  font-style:normal;
}

.heatmap-viewport{
  position:absolute;
  top:14.5%;
  left:5%;
  width:90%;
  height:68%;
  overflow:hidden;
  border:1px solid rgba(46,48,148,.1);
  border-top:0;
  border-radius:0 0 18px 18px;
  background:#fff;
}

.heatmap-pass{
  position:absolute;
  inset:0;
  overflow:hidden;
}

.heatmap-pass--before{
  animation:heatmap-before-pass 14s ease-in-out infinite;
}

.heatmap-pass--after{
  opacity:0;
  animation:heatmap-after-pass 14s ease-in-out infinite;
}

.heatmap-mode-label{
  position:absolute;
  z-index:6;
  top:4%;
  left:3%;
  padding:.32em .72em;
  border-radius:999px;
  background:rgba(144,64,64,.1);
  color:#a54b4b;
  font-size:clamp(.48rem,.9vw,.66rem);
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.heatmap-pass--after .heatmap-mode-label{
  background:rgba(29,157,112,.11);
  color:#168c62;
}

.heatmap-old-page,
.heatmap-modern-page{
  position:absolute;
  inset:0;
  padding:12% 5% 5%;
}

.heatmap-old-page{
  background:#f3f0e9;
}

.heatmap-old-nav,
.heatmap-modern-nav{
  display:flex;
  height:13%;
  align-items:center;
  gap:4%;
}

.heatmap-old-nav b{
  margin-right:auto;
  color:#5d5a54;
  font-size:clamp(.5rem,1vw,.72rem);
}

.heatmap-old-nav i{
  width:10%;
  height:10%;
  border-radius:999px;
  background:#bcb7ad;
}

.heatmap-old-hero{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:5%;
  height:42%;
  padding-top:3%;
}

.heatmap-old-hero > span{
  background:
    linear-gradient(33deg,transparent 49%,#aaa397 50%,transparent 51%),
    linear-gradient(-33deg,transparent 49%,#aaa397 50%,transparent 51%),
    #d0cabf;
}

.heatmap-old-hero div{
  padding-top:7%;
}

.heatmap-old-hero b,
.heatmap-old-hero i{
  display:block;
  height:6%;
  margin-bottom:8%;
  border-radius:999px;
  background:#b4afa6;
}

.heatmap-old-hero b{
  width:92%;
  height:12%;
  background:#716d66;
}

.heatmap-old-hero i:nth-child(3){ width:78%; }
.heatmap-old-hero i:nth-child(4){ width:52%; }

.heatmap-old-grid,
.heatmap-modern-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:3%;
  height:27%;
  margin-top:5%;
}

.heatmap-old-grid span{
  border:1px solid #c7c1b7;
  background:#ded9d0;
}

.heat-spot{
  position:absolute;
  z-index:4;
  width:16%;
  aspect-ratio:1;
  border-radius:999px;
  background:radial-gradient(circle,rgba(255,90,80,.58) 0 18%,rgba(255,181,71,.3) 30%,rgba(255,216,92,.08) 62%,transparent 70%);
  animation:heatmap-pulse 1.8s ease-in-out infinite;
}

.heat-spot--one{ top:24%; left:21%; }
.heat-spot--two{ top:34%; left:60%; animation-delay:-.65s; }
.heat-spot--three{ top:62%; left:42%; animation-delay:-1.1s; }

.journey-cursor{
  position:absolute;
  z-index:8;
  width:3.2%;
  aspect-ratio:.72;
  background:#191d48;
  clip-path:polygon(0 0,0 100%,28% 72%,45% 100%,60% 90%,43% 63%,78% 63%);
  filter:drop-shadow(0 3px 4px rgba(18,23,60,.25));
}

.journey-cursor--before{
  animation:heatmap-confused-cursor 14s cubic-bezier(.4,0,.2,1) infinite;
}

.visitor-exit,
.visitor-call{
  position:absolute;
  z-index:9;
  right:4%;
  bottom:5%;
  display:flex;
  align-items:center;
  gap:.45em;
  padding:.55em .8em;
  border-radius:12px;
  background:#332f3b;
  color:#fff;
  font-size:clamp(.52rem,.95vw,.7rem);
  font-weight:800;
  opacity:0;
  box-shadow:0 10px 25px rgba(25,25,45,.2);
  animation:heatmap-exit-notice 14s ease-in-out infinite;
}

.visitor-exit b{
  color:#ff8a8a;
  font-size:1.25em;
}

.heatmap-modern-page{
  background:linear-gradient(145deg,#fbfdff,#eef2ff);
  animation:heatmap-modern-scroll 14s ease-in-out infinite;
}

.heatmap-modern-nav b{
  display:grid;
  width:7%;
  aspect-ratio:1;
  margin-right:2%;
  place-items:center;
  border-radius:7px;
  background:#2e3094;
  color:#fff;
  font-size:clamp(.45rem,.9vw,.7rem);
}

.heatmap-modern-nav i{
  width:8%;
  height:7%;
  border-radius:999px;
  background:#a2accd;
}

.heatmap-modern-nav strong{
  margin-left:auto;
  padding:.55em 1.1em;
  border-radius:9px;
  background:#3f51ff;
  color:#fff;
  font-size:clamp(.45rem,.85vw,.64rem);
}

.heatmap-modern-hero{
  width:61%;
  padding-top:4%;
}

.heatmap-modern-hero small{
  display:inline-block;
  padding:.3em .6em;
  border-radius:999px;
  background:#dfe5ff;
  color:#3a4aca;
  font-size:clamp(.38rem,.68vw,.53rem);
  font-weight:900;
}

.heatmap-modern-hero h3{
  margin:4% 0;
  color:#171947;
  font-size:clamp(.85rem,2.1vw,1.55rem);
  line-height:.98;
}

.heatmap-modern-hero p{
  width:82%;
  height:5px;
  margin:3% 0;
  border-radius:999px;
  background:#aeb7d4;
}

.heatmap-modern-hero p:nth-of-type(2){ width:59%; }

.heatmap-modern-hero button{
  margin-top:5%;
  padding:.65em 1.2em;
  border:0;
  border-radius:9px;
  background:#3f51ff;
  color:#fff;
  font:800 clamp(.45rem,.9vw,.68rem)/1 "Inter",sans-serif;
}

.heatmap-modern-grid span{
  border-radius:10px;
  background:linear-gradient(145deg,#d8e1ff,#f8faff);
  box-shadow:inset 0 0 0 1px rgba(46,48,148,.09);
}

.journey-cursor--after{
  animation:heatmap-success-cursor 14s cubic-bezier(.4,0,.2,1) infinite;
}

.heat-spot--success{
  top:47%;
  left:21%;
  background:radial-gradient(circle,rgba(66,216,156,.62) 0 18%,rgba(95,218,173,.28) 34%,rgba(95,218,173,.06) 62%,transparent 70%);
  animation-delay:-.5s;
}

.visitor-call{
  background:#177c59;
  animation:heatmap-call-notice 14s ease-in-out infinite;
}

.visitor-call b{
  display:grid;
  width:1.5em;
  aspect-ratio:1;
  place-items:center;
  border-radius:999px;
  background:#fff;
  color:#177c59;
}

.heatmap-legend{
  position:absolute;
  z-index:4;
  right:7%;
  bottom:4.5%;
  display:flex;
  gap:1rem;
  color:#68718e;
  font-size:clamp(.43rem,.8vw,.6rem);
  font-weight:700;
}

.heatmap-legend span{
  display:flex;
  align-items:center;
  gap:.35rem;
}

.heatmap-legend i{
  width:.6rem;
  aspect-ratio:1;
  border-radius:999px;
  background:#ff756c;
  box-shadow:0 0 0 .28rem rgba(255,150,88,.14);
}

.heatmap-legend span:last-child i{
  background:#38c58f;
  box-shadow:0 0 0 .28rem rgba(56,197,143,.13);
}

.journey-heatmap.is-paused *,
.journey-heatmap.is-offscreen *,
.journey-heatmap.is-page-hidden *{
  animation-play-state:paused !important;
}

@keyframes heatmap-before-pass{
  0%,39%{ opacity:1; transform:scale(1); }
  46%,94%{ opacity:0; transform:scale(1.015); }
  98%,100%{ opacity:1; transform:scale(1); }
}

@keyframes heatmap-after-pass{
  0%,39%{ opacity:0; transform:scale(.99); }
  47%,94%{ opacity:1; transform:scale(1); }
  99%,100%{ opacity:0; transform:scale(.99); }
}

@keyframes heatmap-pulse{
  0%,100%{ opacity:.62; transform:scale(.82); }
  50%{ opacity:1; transform:scale(1.12); }
}

@keyframes heatmap-confused-cursor{
  0%{ left:10%; top:16%; opacity:0; }
  5%{ opacity:1; }
  12%{ left:28%; top:29%; }
  20%{ left:57%; top:23%; }
  28%{ left:34%; top:57%; }
  34%{ left:70%; top:47%; }
  39%{ left:88%; top:5%; opacity:1; }
  43%,100%{ left:94%; top:-4%; opacity:0; }
}

@keyframes heatmap-exit-notice{
  0%,27%,46%,100%{ opacity:0; transform:translateY(8px); }
  32%,40%{ opacity:1; transform:translateY(0); }
}

@keyframes heatmap-modern-scroll{
  0%,50%{ transform:translateY(0); }
  66%,76%{ transform:translateY(-5%); }
  84%,100%{ transform:translateY(0); }
}

@keyframes heatmap-success-cursor{
  0%,45%{ left:82%; top:18%; opacity:0; }
  50%{ opacity:1; }
  58%{ left:55%; top:31%; }
  67%{ left:31%; top:57%; }
  75%,82%{ left:22%; top:48%; opacity:1; transform:scale(.82); }
  88%,100%{ left:22%; top:48%; opacity:0; transform:scale(1); }
}

@keyframes heatmap-call-notice{
  0%,70%,97%,100%{ opacity:0; transform:translateY(8px); }
  76%,91%{ opacity:1; transform:translateY(0); }
}

/* Shared software-style animation system. */
.product-demo{
  position:relative;
  isolation:isolate;
}

.product-demo.is-paused *,
.product-demo.is-offscreen *,
.product-demo.is-page-hidden *{
  animation-play-state:paused !important;
}

.product-browser{
  overflow:hidden;
  border:1px solid rgba(46,48,148,.16);
  border-radius:18px;
  background:#fff;
  box-shadow:0 18px 45px rgba(24,28,72,.12);
}

.product-browser-bar{
  display:flex;
  height:11%;
  align-items:center;
  gap:1.25%;
  padding:0 3%;
  border-bottom:1px solid rgba(46,48,148,.09);
  background:#f5f7fd;
}

.product-browser-bar > span{
  width:1.7%;
  aspect-ratio:1;
  border-radius:999px;
  background:#ff7777;
}

.product-browser-bar > span:nth-child(2){ background:#ffc85c; }
.product-browser-bar > span:nth-child(3){ background:#4fd19a; }

.product-browser-bar i{
  display:flex;
  width:62%;
  height:42%;
  margin-left:3%;
  align-items:center;
  padding:0 4%;
  border-radius:999px;
  background:#e9edf8;
  color:#6e7797;
  font-size:clamp(.46rem,.7vw,.63rem);
  font-style:normal;
}

.product-phone{
  overflow:hidden;
  border:6px solid #171947;
  border-radius:25px;
  background:#fff;
  box-shadow:0 20px 45px rgba(18,22,62,.2);
}

.product-phone-speaker{
  position:absolute;
  z-index:4;
  top:2.2%;
  left:36%;
  width:28%;
  height:2.8%;
  border-radius:999px;
  background:#171947;
}

.demo-cursor{
  position:absolute;
  z-index:8;
  width:12px;
  height:18px;
  background:#171947;
  clip-path:polygon(0 0,0 100%,28% 72%,45% 100%,60% 90%,43% 63%,78% 63%);
  filter:drop-shadow(0 3px 4px rgba(18,23,60,.25));
}

.hero-product-demo{
  width:100%;
  max-width:560px;
  margin:0;
  aspect-ratio:4 / 3;
  background:linear-gradient(145deg,#f8faff,#e9edff);
}

.hero-demo-stage{
  position:absolute;
  inset:0;
}

.hero-demo-browser{
  position:absolute;
  top:8%;
  left:5%;
  width:78%;
  height:70%;
}

.hero-demo-site{
  position:relative;
  height:89%;
  overflow:hidden;
  padding:8% 5% 4%;
  background:#f3f0e9;
  transition:background .7s ease;
}

.hero-demo-state-labels > span{
  position:absolute;
  z-index:9;
  top:4%;
  left:4%;
  padding:.34em .7em;
  border-radius:999px;
  background:#e9e6de;
  color:#6f554b;
  font-size:clamp(.42rem,.7vw,.6rem);
  font-weight:900;
  letter-spacing:.04em;
  opacity:0;
  text-transform:uppercase;
  transition:opacity .25s ease;
}

.hero-product-demo[data-demo-state="current"] [data-stage-label="current"],
.hero-product-demo[data-demo-state="review"] [data-stage-label="review"],
.hero-product-demo[data-demo-state="redesign"] [data-stage-label="redesign"],
.hero-product-demo[data-demo-state="action"] [data-stage-label="action"],
.hero-product-demo[data-demo-state="rest"] [data-stage-label="rest"]{
  opacity:1;
}

.hero-product-demo[data-demo-state="review"] [data-stage-label="review"],
.hero-product-demo[data-demo-state="redesign"] [data-stage-label="redesign"]{
  background:#e5e9ff;
  color:#2e3094;
}

.hero-product-demo[data-demo-state="action"] [data-stage-label="action"],
.hero-product-demo[data-demo-state="rest"] [data-stage-label="rest"]{
  background:#ddf5ec;
  color:#147755;
}

.hero-demo-nav{
  display:flex;
  height:13%;
  align-items:center;
  gap:4%;
}

.hero-demo-nav b{
  display:grid;
  width:7%;
  aspect-ratio:1;
  margin-right:auto;
  place-items:center;
  border-radius:7px;
  background:#77736d;
  color:#fff;
  font-size:clamp(.45rem,.8vw,.68rem);
  transition:background .7s ease;
}

.hero-demo-nav i{
  width:9%;
  height:7%;
  border-radius:999px;
  background:#b7b2a9;
  transition:opacity .6s ease,transform .6s ease,background .6s ease;
}

.hero-demo-nav strong{
  padding:.55em .85em;
  border-radius:8px;
  background:#aaa69f;
  color:#fff;
  font-size:clamp(.42rem,.72vw,.6rem);
  transition:background .7s ease,transform .7s ease;
}

.hero-demo-content{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:6%;
  height:69%;
  padding-top:3%;
}

.hero-demo-copy{
  position:relative;
}

.hero-demo-copy small{
  color:#77736d;
  font-size:clamp(.38rem,.64vw,.53rem);
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.hero-demo-copy h3{
  position:absolute;
  top:18%;
  left:0;
  max-width:95%;
  margin:0;
  color:#4b4945;
  font-size:clamp(.8rem,1.65vw,1.35rem);
  line-height:1.04;
  transition:opacity .65s ease,transform .65s ease,color .65s ease;
}

.hero-demo-new-title{
  opacity:0;
  transform:translateY(8px);
}

.hero-demo-copy p{
  position:relative;
  top:45%;
  width:92%;
  height:5px;
  margin:0 0 5%;
  border-radius:999px;
  background:#bdb8ae;
  transition:width .65s ease,background .65s ease,opacity .65s ease;
}

.hero-demo-copy p:nth-of-type(2){ width:82%; }
.hero-demo-copy p:nth-of-type(3){ width:65%; }

.hero-demo-copy button{
  position:absolute;
  bottom:5%;
  left:0;
  padding:.65em 1em;
  border:0;
  border-radius:8px;
  background:#aaa69f;
  color:#fff;
  font:900 clamp(.42rem,.72vw,.61rem)/1 "Inter",sans-serif;
  transition:background .65s ease,transform .65s ease,box-shadow .65s ease;
}

.hero-demo-proof{
  position:absolute;
  bottom:-9%;
  left:0;
  color:#168c62;
  font-size:clamp(.38rem,.65vw,.55rem);
  font-weight:800;
  opacity:0;
  transform:translateY(5px);
  transition:opacity .6s ease,transform .6s ease;
}

.hero-demo-media{
  position:relative;
  overflow:hidden;
  border-radius:12px;
  background:#d0cac0;
  transition:background .7s ease,transform .7s ease;
}

.hero-demo-media span{
  position:absolute;
  inset:0;
  background:linear-gradient(33deg,transparent 49%,#ada69b 50%,transparent 51%),linear-gradient(-33deg,transparent 49%,#ada69b 50%,transparent 51%);
  transition:opacity .55s ease;
}

.hero-demo-media i,
.hero-demo-media b{
  position:absolute;
  right:7%;
  bottom:7%;
  left:7%;
  padding:.45em;
  border-radius:7px;
  color:#fff;
  font-size:clamp(.38rem,.65vw,.54rem);
  font-style:normal;
  text-align:center;
}

.hero-demo-media i{ background:rgba(126,70,64,.78); }
.hero-demo-media b{ background:rgba(32,36,84,.84); opacity:0; }

.hero-demo-problems{
  position:absolute;
  right:4%;
  bottom:3%;
  left:4%;
  display:flex;
  gap:2%;
  transition:opacity .35s ease;
}

.hero-demo-problems span{
  padding:.42em .65em;
  border-radius:999px;
  background:#f4dfdb;
  color:#934a42;
  font-size:clamp(.36rem,.6vw,.52rem);
  font-weight:800;
}

.hero-review-panel{
  position:absolute;
  z-index:7;
  top:19%;
  right:3%;
  width:39%;
  padding:4%;
  border:1px solid rgba(46,48,148,.16);
  border-radius:13px;
  background:rgba(255,255,255,.97);
  box-shadow:0 16px 32px rgba(22,27,74,.16);
  opacity:0;
  transform:translateX(12px);
  transition:opacity .4s ease,transform .4s ease;
}

.hero-review-panel > strong{
  display:block;
  margin-bottom:6%;
  color:#202454;
  font-size:clamp(.48rem,.85vw,.7rem);
}

.hero-review-panel > span{
  display:grid;
  grid-template-columns:1fr;
  gap:1px;
  padding:4% 0;
  border-top:1px solid #e5e8f4;
  color:#5a617d;
  font-size:clamp(.36rem,.62vw,.52rem);
}

.hero-review-panel b{
  color:#a4534d;
  font-size:.9em;
}

.hero-scan-line{
  position:absolute;
  z-index:6;
  top:10%;
  right:2%;
  left:2%;
  height:2px;
  background:#6077ff;
  box-shadow:0 0 18px rgba(77,99,255,.65);
  opacity:0;
}

.hero-demo-phone{
  position:absolute;
  z-index:8;
  right:3%;
  bottom:8%;
  width:25%;
  height:54%;
  transition:transform .7s ease,opacity .7s ease;
}

.hero-phone-old,
.hero-phone-new{
  position:absolute;
  inset:0;
  padding:18% 10% 8%;
  transition:opacity .6s ease,transform .6s ease;
}

.hero-phone-old{
  background:#f3f0e9;
}

.hero-phone-old b{
  color:#66625c;
  font-size:clamp(.42rem,.75vw,.63rem);
}

.hero-phone-old i{
  display:block;
  width:112%;
  height:5px;
  margin:16% 0 0;
  border-radius:999px;
  background:#bdb7ad;
}

.hero-phone-old i:nth-of-type(2){ width:88%; }
.hero-phone-old i:nth-of-type(3){ width:120%; }

.hero-phone-old em{
  position:absolute;
  right:7%;
  bottom:8%;
  left:7%;
  padding:.5em;
  border-radius:8px;
  background:#f0d6d2;
  color:#954b44;
  font-size:clamp(.38rem,.65vw,.54rem);
  font-style:normal;
  font-weight:800;
  text-align:center;
}

.hero-phone-new{
  background:#f8faff;
  opacity:0;
  transform:translateY(8px);
}

.hero-phone-new > b{
  color:#3f51ff;
  font-size:clamp(.38rem,.65vw,.54rem);
}

.hero-phone-new h3{
  margin:12% 0 10%;
  color:#171947;
  font-size:clamp(.72rem,1.4vw,1.15rem);
  line-height:1;
}

.hero-phone-new p{
  width:100%;
  height:5px;
  margin:0 0 7%;
  border-radius:999px;
  background:#aeb7d4;
}

.hero-phone-new > span{
  display:block;
  color:#168c62;
  font-size:clamp(.35rem,.57vw,.5rem);
  font-weight:800;
}

.hero-phone-new button{
  position:absolute;
  right:9%;
  bottom:9%;
  left:9%;
  padding:.7em .4em;
  border:0;
  border-radius:9px;
  background:#3f51ff;
  color:#fff;
  font:900 clamp(.42rem,.74vw,.62rem)/1 "Inter",sans-serif;
}

.hero-demo-cursor{
  right:14%;
  bottom:18%;
  opacity:0;
}

.hero-call-confirmation{
  position:absolute;
  z-index:10;
  right:7%;
  bottom:7%;
  left:7%;
  padding:.55em;
  border-radius:9px;
  background:#177c59;
  color:#fff;
  font-size:clamp(.38rem,.65vw,.54rem);
  opacity:0;
  text-align:center;
}

.hero-demo-outcomes{
  position:absolute;
  z-index:10;
  bottom:3.5%;
  left:4%;
  display:flex;
  gap:.45rem;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .5s ease,transform .5s ease;
}

.hero-demo-outcomes span{
  padding:.5em .72em;
  border:1px solid rgba(46,48,148,.12);
  border-radius:999px;
  background:rgba(255,255,255,.94);
  color:#202454;
  font-size:clamp(.38rem,.65vw,.56rem);
  font-weight:800;
}

.hero-demo-rest-label{
  position:absolute;
  z-index:10;
  right:4%;
  bottom:3.7%;
  margin:0;
  color:#168c62;
  font-size:clamp(.4rem,.7vw,.6rem);
  font-weight:900;
  opacity:0;
  transition:opacity .5s ease;
}

.hero-product-demo[data-demo-state="review"] .hero-review-panel{
  opacity:1;
  transform:translateX(0);
}

.hero-product-demo[data-demo-state="review"] .hero-scan-line{
  animation:hero-product-scan 1.7s ease-in-out both;
}

.hero-product-demo[data-demo-state="redesign"] .hero-demo-site,
.hero-product-demo[data-demo-state="action"] .hero-demo-site,
.hero-product-demo[data-demo-state="rest"] .hero-demo-site{
  background:#f7f9ff;
}

.hero-product-demo[data-demo-state="redesign"] .hero-demo-old-title,
.hero-product-demo[data-demo-state="action"] .hero-demo-old-title,
.hero-product-demo[data-demo-state="rest"] .hero-demo-old-title,
.hero-product-demo[data-demo-state="redesign"] .hero-demo-media span,
.hero-product-demo[data-demo-state="action"] .hero-demo-media span,
.hero-product-demo[data-demo-state="rest"] .hero-demo-media span,
.hero-product-demo[data-demo-state="redesign"] .hero-demo-media i,
.hero-product-demo[data-demo-state="action"] .hero-demo-media i,
.hero-product-demo[data-demo-state="rest"] .hero-demo-media i,
.hero-product-demo[data-demo-state="redesign"] .hero-demo-problems,
.hero-product-demo[data-demo-state="action"] .hero-demo-problems,
.hero-product-demo[data-demo-state="rest"] .hero-demo-problems,
.hero-product-demo[data-demo-state="redesign"] .hero-demo-extra-nav,
.hero-product-demo[data-demo-state="action"] .hero-demo-extra-nav,
.hero-product-demo[data-demo-state="rest"] .hero-demo-extra-nav,
.hero-product-demo[data-demo-state="redesign"] .hero-demo-extra-copy,
.hero-product-demo[data-demo-state="action"] .hero-demo-extra-copy,
.hero-product-demo[data-demo-state="rest"] .hero-demo-extra-copy{
  opacity:0;
}

.hero-product-demo[data-demo-state="redesign"] .hero-demo-new-title,
.hero-product-demo[data-demo-state="action"] .hero-demo-new-title,
.hero-product-demo[data-demo-state="rest"] .hero-demo-new-title,
.hero-product-demo[data-demo-state="redesign"] .hero-demo-proof,
.hero-product-demo[data-demo-state="action"] .hero-demo-proof,
.hero-product-demo[data-demo-state="rest"] .hero-demo-proof,
.hero-product-demo[data-demo-state="redesign"] .hero-phone-new,
.hero-product-demo[data-demo-state="action"] .hero-phone-new,
.hero-product-demo[data-demo-state="rest"] .hero-phone-new{
  opacity:1;
  transform:translateY(0);
}

.hero-product-demo[data-demo-state="redesign"] .hero-phone-old,
.hero-product-demo[data-demo-state="action"] .hero-phone-old,
.hero-product-demo[data-demo-state="rest"] .hero-phone-old{
  opacity:0;
  transform:translateY(-8px);
}

.hero-product-demo[data-demo-state="redesign"] .hero-demo-nav b,
.hero-product-demo[data-demo-state="action"] .hero-demo-nav b,
.hero-product-demo[data-demo-state="rest"] .hero-demo-nav b{
  background:#2e3094;
}

.hero-product-demo[data-demo-state="redesign"] .hero-demo-nav i,
.hero-product-demo[data-demo-state="action"] .hero-demo-nav i,
.hero-product-demo[data-demo-state="rest"] .hero-demo-nav i{
  background:#9aa5ca;
  transform:translateX(5px);
}

.hero-product-demo[data-demo-state="redesign"] .hero-demo-nav strong,
.hero-product-demo[data-demo-state="action"] .hero-demo-nav strong,
.hero-product-demo[data-demo-state="rest"] .hero-demo-nav strong,
.hero-product-demo[data-demo-state="redesign"] .hero-demo-copy button,
.hero-product-demo[data-demo-state="action"] .hero-demo-copy button,
.hero-product-demo[data-demo-state="rest"] .hero-demo-copy button{
  background:#3f51ff;
  box-shadow:0 8px 18px rgba(63,81,255,.2);
}

.hero-product-demo[data-demo-state="redesign"] .hero-demo-media,
.hero-product-demo[data-demo-state="action"] .hero-demo-media,
.hero-product-demo[data-demo-state="rest"] .hero-demo-media{
  background:linear-gradient(145deg,#8297ec,#dce4ff);
  transform:scale(.96);
}

.hero-product-demo[data-demo-state="redesign"] .hero-demo-media b,
.hero-product-demo[data-demo-state="action"] .hero-demo-media b,
.hero-product-demo[data-demo-state="rest"] .hero-demo-media b{
  opacity:1;
}

.hero-product-demo[data-demo-state="action"] .hero-demo-phone{
  transform:scale(1.08) translate(-3%,-2%);
}

.hero-product-demo[data-demo-state="action"] .hero-demo-cursor{
  animation:hero-product-click 1.5s ease-in-out both;
}

.hero-product-demo[data-demo-state="action"] .hero-call-confirmation,
.hero-product-demo[data-demo-state="rest"] .hero-call-confirmation{
  opacity:1;
}

.hero-product-demo[data-demo-state="rest"] .hero-demo-outcomes,
.hero-product-demo[data-demo-state="rest"] .hero-demo-rest-label{
  opacity:1;
  transform:translateY(0);
}

@keyframes hero-product-scan{
  0%{ top:12%; opacity:0; }
  15%,85%{ opacity:1; }
  100%{ top:91%; opacity:0; }
}

@keyframes hero-product-click{
  0%{ right:38%; bottom:38%; opacity:0; }
  35%{ opacity:1; }
  70%,85%{ right:20%; bottom:19%; opacity:1; transform:scale(.85); }
  100%{ right:20%; bottom:19%; opacity:0; transform:scale(1); }
}

/* Same-visitor trust comparison. */
.trust-product-demo{
  padding:.75rem .75rem 3.65rem;
  overflow:hidden;
  color:#171947;
}

.trust-demo-heading{
  margin:.1rem 0 .65rem;
  color:#525a76;
  font-size:.72rem;
  text-align:center;
}

.trust-demo-heading strong{ color:#202454; }

.trust-demo-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.65rem;
}

.trust-demo-panel{
  min-width:0;
  padding:.55rem;
  border:1px solid rgba(46,48,148,.12);
  border-radius:15px;
  background:#f7f8ff;
  transition:opacity .45s ease,transform .45s ease,border-color .45s ease;
}

.trust-demo-label{
  display:inline-flex;
  margin-bottom:.4rem;
  padding:.3em .62em;
  border-radius:999px;
  background:#f4dfdb;
  color:#914b44;
  font-size:clamp(.46rem,.7vw,.59rem);
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.trust-demo-panel--after .trust-demo-label{
  background:#dff5ed;
  color:#147755;
}

.trust-demo-phone{
  position:relative;
  min-height:230px;
  overflow:hidden;
  padding:1rem .75rem .75rem;
  border:4px solid #171947;
  border-radius:20px;
  background:#f3f0e9;
}

.trust-demo-panel--after .trust-demo-phone{
  background:#f7f9ff;
}

.trust-old-nav,
.trust-new-nav{
  display:flex;
  align-items:center;
  gap:.45rem;
  min-height:22px;
}

.trust-old-nav b{
  margin-right:auto;
  color:#625f59;
  font-size:.52rem;
}

.trust-old-nav i{
  width:16%;
  height:3px;
  background:#aaa69e;
}

.trust-demo-phone h3{
  margin:.75rem 0 .5rem;
  color:#4d4a45;
  font-size:1.05rem;
  line-height:1.02;
}

.trust-demo-phone p{
  width:94%;
  height:5px;
  margin:.34rem 0;
  border-radius:999px;
  background:#b8b3aa;
}

.trust-demo-phone p:nth-of-type(2){ width:66%; }

.trust-competing-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.3rem;
  margin-top:.75rem;
}

.trust-competing-actions span{
  padding:.48rem .25rem;
  border:1px solid #bfb9af;
  border-radius:6px;
  color:#65615a;
  font-size:.47rem;
  font-weight:800;
  text-align:center;
}

.trust-competing-actions span:last-child{ grid-column:1 / -1; }

.trust-demo-panel--before small{
  position:absolute;
  right:.75rem;
  bottom:.65rem;
  left:.75rem;
  color:#8d625b;
  font-size:.45rem;
  text-align:center;
}

.trust-attention-dot{
  position:absolute;
  top:43%;
  left:21%;
  width:34px;
  height:34px;
  border-radius:999px;
  background:radial-gradient(circle,rgba(238,118,93,.5),rgba(238,155,93,.12) 60%,transparent 70%);
  opacity:0;
}

.trust-cursor-before,
.trust-cursor-after{
  top:18%;
  left:16%;
  opacity:0;
}

.trust-exit,
.trust-call{
  position:absolute;
  right:.5rem;
  bottom:.5rem;
  left:.5rem;
  padding:.5rem;
  border-radius:8px;
  background:#3a3540;
  color:#fff;
  font-size:.52rem;
  opacity:0;
  text-align:center;
}

.trust-new-nav b{
  display:grid;
  width:22px;
  height:22px;
  place-items:center;
  border-radius:6px;
  background:#2e3094;
  color:#fff;
  font-size:.55rem;
}

.trust-new-nav i{
  width:34%;
  height:4px;
  margin-right:auto;
  border-radius:999px;
  background:#9ea8ca;
}

.trust-new-nav strong{
  padding:.42em .72em;
  border-radius:7px;
  background:#3f51ff;
  color:#fff;
  font-size:.47rem;
}

.trust-demo-panel--after small{
  display:block;
  margin-top:.7rem;
  color:#3f51ff;
  font-size:.46rem;
  font-weight:900;
}

.trust-demo-panel--after h3{
  margin-top:.35rem;
  color:#171947;
}

.trust-demo-panel--after p{ background:#aeb7d4; }

.trust-demo-panel--after em{
  display:block;
  margin-top:.55rem;
  color:#147755;
  font-size:.48rem;
  font-style:normal;
  font-weight:800;
}

.trust-demo-panel--after button,
.trust-demo-panel--after a{
  display:block;
  width:100%;
  margin-top:.55rem;
  padding:.58rem .35rem;
  border:0;
  border-radius:8px;
  background:#3f51ff;
  color:#fff;
  font:900 .54rem/1 "Inter",sans-serif;
  text-align:center;
}

.trust-demo-panel--after a{
  margin-top:.3rem;
  background:#e5e9ff;
  color:#2e3094;
}

.trust-call{ background:#177c59; }

.trust-demo-outcomes{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.65rem;
  margin-top:.65rem;
  opacity:.36;
  transition:opacity .45s ease;
}

.trust-demo-outcomes > div{
  display:grid;
  grid-template-columns:1fr;
  gap:.18rem;
  padding:.55rem .65rem;
  border-radius:11px;
  background:#f4f5fb;
}

.trust-demo-outcomes strong{
  color:#202454;
  font-size:.6rem;
}

.trust-demo-outcomes span{
  color:#666e89;
  font-size:.48rem;
}

.trust-product-demo[data-demo-state="before"] .trust-demo-panel--after,
.trust-product-demo[data-demo-state="after"] .trust-demo-panel--before{
  opacity:.42;
  transform:scale(.98);
}

.trust-product-demo[data-demo-state="before"] .trust-demo-panel--before,
.trust-product-demo[data-demo-state="after"] .trust-demo-panel--after,
.trust-product-demo[data-demo-state="final"] .trust-demo-panel{
  border-color:rgba(63,81,255,.3);
}

.trust-product-demo[data-demo-state="before"] .trust-attention-dot{
  animation:trust-attention 3.4s ease-in-out both;
}

.trust-product-demo[data-demo-state="before"] .trust-cursor-before{
  animation:trust-confused 3.5s ease-in-out both;
}

.trust-product-demo[data-demo-state="before"] .trust-exit{
  animation:trust-exit-in 3.5s ease-in-out both;
}

.trust-product-demo[data-demo-state="after"] .trust-cursor-after{
  animation:trust-direct 3.5s ease-in-out both;
}

.trust-product-demo[data-demo-state="after"] .trust-call,
.trust-product-demo[data-demo-state="final"] .trust-call{
  opacity:1;
}

.trust-product-demo[data-demo-state="final"] .trust-demo-outcomes{
  opacity:1;
}

@keyframes trust-attention{
  0%{ top:34%; left:12%; opacity:0; }
  15%{ opacity:1; }
  38%{ top:50%; left:60%; }
  68%{ top:68%; left:22%; }
  100%{ top:75%; left:67%; opacity:.4; }
}

@keyframes trust-confused{
  0%{ top:20%; left:12%; opacity:0; }
  15%{ opacity:1; }
  40%{ top:49%; left:65%; }
  70%{ top:67%; left:25%; }
  100%{ top:4%; left:92%; opacity:0; }
}

@keyframes trust-exit-in{
  0%,72%{ opacity:0; transform:translateY(5px); }
  86%,100%{ opacity:1; transform:translateY(0); }
}

@keyframes trust-direct{
  0%{ top:20%; left:12%; opacity:0; }
  18%{ opacity:1; }
  48%{ top:40%; left:36%; }
  78%,90%{ top:74%; left:50%; opacity:1; transform:scale(.82); }
  100%{ top:74%; left:50%; opacity:0; transform:scale(1); }
}

/* SEO and AEO sequential explanation. */
.search-demo-intro{
  max-width:900px;
}

.discovery-product-demo{
  padding:1rem 1rem 3.6rem;
  overflow:hidden;
  border:1px solid rgba(46,48,148,.15);
  border-radius:24px;
  background:#f7f8ff;
  box-shadow:0 22px 55px rgba(16,19,49,.08);
}

.discovery-demo-grid{
  position:relative;
  display:grid;
  grid-template-areas:"seo source aeo";
  grid-template-columns:1fr 1.08fr 1fr;
  gap:1rem;
  align-items:stretch;
}

.discovery-source-panel,
.discovery-path-panel{
  position:relative;
  z-index:2;
  min-width:0;
  padding:.85rem;
  border:1px solid rgba(46,48,148,.14);
  border-radius:16px;
  background:#fff;
  transition:opacity .45s ease,transform .45s ease,border-color .45s ease,box-shadow .45s ease;
}

.discovery-source-panel{ grid-area:source; }
.discovery-seo-panel{ grid-area:seo; }
.discovery-aeo-panel{ grid-area:aeo; }

.discovery-panel-label{
  display:inline-flex;
  padding:.32em .66em;
  border-radius:999px;
  background:#e6e9ff;
  color:#2e3094;
  font-size:.62rem;
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.discovery-source-page{
  margin-top:.65rem;
  padding:.75rem;
  border:1px solid #e2e6f4;
  border-radius:12px;
  background:#fafbff;
}

.discovery-source-page > b{
  color:#2e3094;
  font-size:.67rem;
}

.discovery-source-page h3{
  margin:.25rem 0 .55rem;
  color:#171947;
  font-size:1rem;
}

.discovery-source-page dl{
  display:grid;
  gap:.35rem;
  margin:0;
}

.discovery-source-page dl > div{
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  gap:.4rem;
  padding-bottom:.3rem;
  border-bottom:1px solid #e7e9f3;
  font-size:.55rem;
}

.discovery-source-page dt{ color:#747b96; }
.discovery-source-page dd{ margin:0; color:#303650; font-weight:700; }

.discovery-source-page p{
  margin:.5rem 0 0;
  color:#555d77;
  font-size:.53rem;
  line-height:1.4;
}

.discovery-source-page p strong{
  display:block;
  color:#202454;
}

.discovery-path-panel > p{
  min-height:2.4em;
  margin:.5rem 0 .65rem;
  color:#69708a;
  font-size:.57rem;
  line-height:1.3;
}

.neutral-search-box,
.neutral-answer-question{
  padding:.55rem .65rem;
  border:1px solid #dfe3f0;
  border-radius:10px;
  background:#f8f9fd;
  color:#4b536f;
  font-size:.55rem;
}

.neutral-search-box b{ float:right; color:#2e3094; }

.neutral-search-result,
.neutral-answer-card{
  margin-top:.55rem;
  padding:.7rem;
  border:1px solid #e0e4f2;
  border-radius:12px;
  background:#fff;
}

.neutral-search-result small,
.neutral-answer-card small{
  color:#777f99;
  font-size:.45rem;
  font-weight:900;
  letter-spacing:.05em;
}

.neutral-search-result > strong{
  display:block;
  margin-top:.28rem;
  color:#2e3094;
  font-size:.55rem;
}

.neutral-search-result h3{
  margin:.15rem 0;
  color:#171947;
  font-size:.83rem;
}

.neutral-search-result p,
.neutral-answer-card p{
  margin:.25rem 0;
  color:#59617a;
  font-size:.5rem;
  line-height:1.4;
}

.neutral-search-result > span{
  color:#2e3094;
  font-size:.5rem;
  font-weight:900;
}

.neutral-answer-card > span{
  display:block;
  margin-top:.45rem;
  padding-top:.4rem;
  border-top:1px solid #e4e7f1;
  color:#727a94;
  font-size:.44rem;
}

.discovery-line{
  position:absolute;
  z-index:1;
  top:50%;
  width:10%;
  height:2px;
  background:#c5cbea;
  transform:scaleX(.45);
  transition:background .45s ease,transform .45s ease;
}

.discovery-line::after{
  position:absolute;
  top:-3px;
  width:8px;
  height:8px;
  border-radius:999px;
  background:inherit;
  content:"";
}

.discovery-line--seo{ left:28%; }
.discovery-line--seo::after{ left:0; }
.discovery-line--aeo{ right:28%; }
.discovery-line--aeo::after{ right:0; }

.discovery-final-summary{
  position:absolute;
  right:3.7rem;
  bottom:.85rem;
  left:1rem;
  display:flex;
  align-items:center;
  gap:.65rem;
  opacity:.35;
  transition:opacity .45s ease;
}

.discovery-final-summary strong{
  margin-right:auto;
  color:#202454;
  font-size:.64rem;
}

.discovery-final-summary span{
  padding:.38em .65em;
  border-radius:999px;
  background:#e7eaff;
  color:#2e3094;
  font-size:.5rem;
  font-weight:800;
}

.discovery-product-demo[data-demo-state="source"] .discovery-path-panel,
.discovery-product-demo[data-demo-state="return"] .discovery-path-panel{
  opacity:.4;
  transform:scale(.985);
}

.discovery-product-demo[data-demo-state="source"] .discovery-source-panel,
.discovery-product-demo[data-demo-state="return"] .discovery-source-panel,
.discovery-product-demo[data-demo-state="final"] .discovery-source-panel{
  border-color:#3f51ff;
  box-shadow:0 12px 28px rgba(63,81,255,.12);
}

.discovery-product-demo[data-demo-state="seo"] .discovery-aeo-panel{
  opacity:.32;
}

.discovery-product-demo[data-demo-state="seo"] .discovery-seo-panel,
.discovery-product-demo[data-demo-state="aeo"] .discovery-aeo-panel,
.discovery-product-demo[data-demo-state="final"] .discovery-path-panel{
  border-color:#3f51ff;
  box-shadow:0 12px 28px rgba(63,81,255,.12);
  transform:translateY(-3px);
}

.discovery-product-demo[data-demo-state="aeo"] .discovery-seo-panel{
  opacity:.32;
}

.discovery-product-demo[data-demo-state="seo"] .discovery-line--seo,
.discovery-product-demo[data-demo-state="aeo"] .discovery-line--aeo,
.discovery-product-demo[data-demo-state="final"] .discovery-line{
  background:#3f51ff;
  transform:scaleX(1);
}

.discovery-product-demo[data-demo-state="final"] .discovery-final-summary{
  opacity:1;
}

.search-demo-note{
  max-width:none;
  margin-top:.85rem;
}

/* On-demand portfolio previews. */
.website-project-image{
  position:relative;
}

.portfolio-demo-overlay{
  position:absolute;
  z-index:3;
  inset:0;
  overflow:hidden;
  background:rgba(18,22,59,.18);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}

.portfolio-demo-focus{
  position:absolute;
  top:13%;
  left:8%;
  width:50%;
  height:20%;
  border:3px solid #fff;
  border-radius:9px;
  box-shadow:0 0 0 999px rgba(19,22,55,.42),0 9px 24px rgba(0,0,0,.18);
}

.portfolio-demo-progress{
  position:absolute;
  top:0;
  left:0;
  width:0;
  height:4px;
  background:#5568ff;
}

.portfolio-demo-step-label,
.portfolio-demo-outcome{
  position:absolute;
  right:.65rem;
  bottom:.65rem;
  left:.65rem;
  padding:.55rem .7rem;
  border-radius:10px;
  background:rgba(255,255,255,.96);
  color:#202454;
  font-size:.64rem;
  font-weight:900;
  box-shadow:0 10px 24px rgba(15,18,52,.18);
}

.portfolio-demo-outcome{
  background:#2e3094;
  color:#fff;
  opacity:0;
}

.portfolio-demo-button{
  display:inline-flex;
  min-height:38px;
  align-items:center;
  margin:0 .55rem .8rem;
  padding:.55rem .75rem;
  border:1px solid rgba(46,48,148,.2);
  border-radius:10px;
  background:#f4f5ff;
  color:#2e3094;
  font:900 .7rem/1 "Inter",sans-serif;
  cursor:pointer;
}

.portfolio-demo-button:focus-visible{
  outline:3px solid rgba(63,81,255,.45);
  outline-offset:2px;
}

.website-project-card.is-demo-playing .portfolio-demo-overlay{
  opacity:1;
}

.website-project-card.is-demo-playing .portfolio-demo-progress{
  animation:portfolio-progress 6s linear both;
}

.website-project-card.is-demo-playing .portfolio-demo-focus{
  animation:portfolio-focus 6s ease-in-out both;
}

.website-project-card.is-demo-playing .portfolio-demo-step-label{
  animation:portfolio-step-label 6s ease-in-out both;
}

.website-project-card.is-demo-playing .portfolio-demo-outcome{
  animation:portfolio-outcome 6s ease-in-out both;
}

.website-project-card.is-demo-paused *{
  animation-play-state:paused !important;
}

.portfolio-upcoming-overlay{
  position:absolute;
  z-index:3;
  right:.6rem;
  bottom:.6rem;
  left:.6rem;
  padding:.55rem .7rem;
  border-radius:10px;
  background:rgba(23,25,71,.92);
  color:#fff;
  font-size:.64rem;
  font-weight:800;
  text-align:center;
}

@keyframes portfolio-progress{ to{ width:100%; } }

@keyframes portfolio-focus{
  0%,18%{ top:13%; left:8%; width:50%; height:20%; }
  28%,43%{ top:31%; left:12%; width:42%; height:27%; }
  53%,68%{ top:48%; left:48%; width:42%; height:24%; }
  78%,100%{ top:68%; left:56%; width:35%; height:18%; }
}

@keyframes portfolio-step-label{
  0%,79%{ opacity:1; }
  88%,100%{ opacity:0; }
}

@keyframes portfolio-outcome{
  0%,80%{ opacity:0; transform:translateY(6px); }
  90%,100%{ opacity:1; transform:translateY(0); }
}

/* Build, Host, Grow system preview. */
.pricing-phase-demo{
  max-width:780px;
  margin:-1.25rem auto 1.4rem;
  padding:.75rem;
  border:1px solid rgba(46,48,148,.14);
  border-radius:16px;
  background:#fff;
  box-shadow:0 14px 34px rgba(16,19,49,.06);
}

.pricing-phase-view{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.75rem;
  align-items:center;
}

.pricing-phase-icon{
  display:grid;
  width:2.5rem;
  height:2.5rem;
  place-items:center;
  border-radius:12px;
  background:#2e3094;
  color:#fff;
  font-weight:900;
}

.pricing-phase-view > div{
  display:grid;
  grid-template-columns:1.25fr repeat(4,1fr);
  gap:.45rem;
  align-items:center;
}

.pricing-phase-view strong{
  color:#202454;
  font-size:.72rem;
}

.pricing-phase-view span:not(.pricing-phase-icon){
  position:relative;
  padding:.48rem .45rem .48rem 1.2rem;
  border-radius:8px;
  background:#f2f4ff;
  color:#515975;
  font-size:.6rem;
  font-weight:750;
}

.pricing-phase-view span:not(.pricing-phase-icon)::before{
  position:absolute;
  top:50%;
  left:.45rem;
  width:.45rem;
  height:.45rem;
  border-radius:999px;
  background:#38b982;
  content:"";
  transform:translateY(-50%);
}

@media (max-width:760px){
  .product-demo > .motion-toggle{
    right:auto;
    left:.7rem;
  }

  .hero-product-demo{
    min-height:300px;
    aspect-ratio:auto;
  }

  .hero-demo-browser{
    top:8%;
    left:4%;
    width:66%;
    height:52%;
    opacity:.64;
  }

  .hero-demo-state-labels > span,
  .hero-phone-old b,
  .hero-phone-new > b{
    font-size:.5rem;
  }

  .hero-phone-new button{
    font-size:.58rem;
  }

  .product-browser-bar i{
    font-size:.48rem;
  }

  .hero-demo-phone{
    right:22%;
    bottom:13%;
    width:34%;
    height:64%;
  }

  .hero-demo-outcomes{
    right:.8rem;
    bottom:.65rem;
    left:.8rem;
    justify-content:center;
    gap:.25rem;
  }

  .hero-demo-outcomes span{
    padding:.42em .5em;
    font-size:.48rem;
  }

  .hero-demo-rest-label{
    right:.8rem;
    bottom:3rem;
    left:.8rem;
    text-align:center;
  }

  .trust-product-demo{
    padding-bottom:3.65rem;
  }

  .trust-demo-grid{
    grid-template-columns:1fr;
  }

  .trust-demo-panel{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    gap:.55rem;
    align-items:start;
  }

  .trust-demo-label{
    grid-column:1 / -1;
    justify-self:start;
  }

  .trust-demo-phone{
    grid-column:1 / -1;
    min-height:210px;
  }

  .trust-product-demo[data-demo-state="before"] .trust-demo-panel--after,
  .trust-product-demo[data-demo-state="after"] .trust-demo-panel--before{
    max-height:54px;
    overflow:hidden;
  }

  .trust-product-demo[data-demo-state="final"] .trust-demo-panel{
    max-height:none;
  }

  .discovery-product-demo{
    padding-bottom:4.2rem;
  }

  .discovery-demo-grid{
    grid-template-areas:"source" "seo" "aeo";
    grid-template-columns:1fr;
  }

  .discovery-source-panel,
  .discovery-path-panel{
    transform:none !important;
  }

  .discovery-line{
    display:none;
  }

  .discovery-final-summary{
    right:.8rem;
    left:3.6rem;
    flex-wrap:wrap;
  }

  .discovery-final-summary strong{
    width:100%;
  }

  .pricing-phase-view > div{
    grid-template-columns:1fr 1fr;
  }

  .pricing-phase-view strong{
    grid-column:1 / -1;
  }
}

.page-section.missing-section{
  background:
    radial-gradient(700px 260px at 90% 0%,rgba(67,71,175,.45),transparent 68%),
    linear-gradient(145deg,#171947 0%,#20236f 100%);
  color:#fff;
}

.missing-section .kicker{
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.1);
  color:#fff;
}

.missing-section h2,
.missing-section .lead,
.missing-section summary{
  color:#fff;
}

.missing-section .lead{
  color:rgba(255,255,255,.76);
}

.missing-section .missing-list details{
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.07);
  box-shadow:none;
}

.missing-section .missing-list details[open]{
  border-color:rgba(255,255,255,.28);
  background:rgba(255,255,255,.11);
}

.missing-section .missing-list summary::after{
  color:#2e3094;
  font-weight:900;
}

.missing-section .missing-list p{
  color:rgba(255,255,255,.72);
}

.missing-section .missing-image{
  border-color:rgba(255,255,255,.2);
  background:#fff;
  box-shadow:0 26px 70px rgba(0,0,0,.26);
}

.lead-journey-section{
  background:linear-gradient(180deg,#fff 0%,#f7f8ff 100%);
}

.lead-journey-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem;
}

.lead-journey-card{
  position:relative;
  padding:1.25rem;
  border:1px solid rgba(46,48,148,.14);
  border-radius:20px;
  background:#f7f8ff;
}

.lead-journey-card:not(:last-child)::after{
  content:"";
  position:absolute;
  z-index:2;
  top:50%;
  right:-1.45rem;
  width:1.9rem;
  height:2px;
  background:#2e3094;
}

.lead-journey-card > span{
  display:grid;
  width:2rem;
  height:2rem;
  margin-bottom:.85rem;
  place-items:center;
  border-radius:999px;
  background:#2e3094;
  color:#fff;
  font-weight:900;
}

.lead-journey-card h3{
  margin:0;
  color:#171947;
  font-size:1.18rem;
}

.lead-journey-card p{
  margin:.55rem 0 0;
  color:#4b5064;
  line-height:1.55;
}

.lead-journey-card--focus{
  border-color:#2e3094;
  background:#171947;
  box-shadow:0 20px 48px rgba(23,25,71,.16);
}

.lead-journey-card--focus h3{
  color:#fff;
}

.lead-journey-card--focus p{
  color:rgba(255,255,255,.76);
}

.project-proof-section{
  background:linear-gradient(180deg,#f7f8ff 0%,#fff 100%);
}

.website-project-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem;
}

.website-project-card{
  overflow:hidden;
  border:1px solid rgba(46,48,148,.15);
  border-radius:20px;
  background:#fff;
  box-shadow:0 18px 44px rgba(16,19,49,.08);
}

.website-project-image{
  display:block;
  overflow:hidden;
  border-bottom:1px solid rgba(46,48,148,.12);
  background:#eef1ff;
}

.website-project-image img{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  transition:transform .3s ease;
}

.website-project-copy{
  padding:1rem 1rem 1.1rem;
}

.website-project-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  margin-bottom:.55rem;
  color:#2e3094;
  font-size:.69rem;
  font-weight:900;
  letter-spacing:.055em;
  text-transform:uppercase;
}

.website-project-meta strong{
  flex:0 0 auto;
  padding:.2rem .45rem;
  border-radius:999px;
  background:#eef1ff;
  color:#2e3094;
  font-size:.64rem;
}

.website-project-card h3{
  margin:0;
  color:#171947;
  font-size:1.18rem;
}

.website-project-card p{
  margin:.48rem 0 .72rem;
  color:#555a70;
  font-size:.88rem;
  line-height:1.52;
}

.website-project-copy > a{
  color:#2e3094;
  font-size:.84rem;
  font-weight:900;
  text-underline-offset:3px;
}

.project-proof-action{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-top:1.1rem;
  padding:1rem 1.1rem;
  border:1px solid rgba(46,48,148,.14);
  border-radius:16px;
  background:#f5f6ff;
}

.project-proof-action p{
  margin:0;
  color:#34384f;
  font-weight:750;
}

.project-proof-action .btn{
  flex:0 0 auto;
}

.page-section.approach-section{
  background:
    radial-gradient(720px 320px at 86% 0%,rgba(74,78,186,.16),transparent 68%),
    linear-gradient(180deg,#f0f2ff 0%,#fafaff 100%);
  color:#171947;
}

.approach-section .kicker{
  border-color:rgba(46,48,148,.16);
  background:#fff;
  color:#2e3094;
}

.approach-section h2{
  color:#171947;
}

.approach-section .lead{
  color:#555a70;
}

.approach-table{
  overflow:hidden;
  padding:.55rem;
  border:1px solid rgba(46,48,148,.16);
  border-radius:26px;
  background:rgba(255,255,255,.82);
  box-shadow:0 28px 74px rgba(23,25,71,.13);
}

.approach-table-head,
.approach-row{
  display:grid;
  grid-template-columns:minmax(250px,1.25fr) minmax(220px,.94fr) minmax(210px,.88fr);
}

.approach-table-head{
  gap:.55rem;
  align-items:stretch;
  padding:.1rem;
}

.approach-feature-head,
.approach-provider-head{
  display:flex;
  min-height:106px;
  flex-direction:column;
  justify-content:center;
  padding:1.1rem 1.2rem;
  border-radius:17px;
}

.approach-feature-head{
  background:linear-gradient(135deg,#171947 0%,#23265f 100%);
  color:#fff;
  font-size:1.6rem;
  font-weight:900;
  letter-spacing:-.02em;
}

.approach-provider-head{
  align-items:center;
  text-align:center;
}

.approach-provider-head span{
  font-size:1.42rem;
  font-weight:900;
  line-height:1.15;
}

.approach-provider-head small{
  max-width:170px;
  margin-top:.45rem;
  font-size:.74rem;
  font-weight:800;
  line-height:1.3;
}

.approach-provider-head--other{
  border:1px solid #d7dae6;
  background:linear-gradient(180deg,#f1f2f6 0%,#e8eaf1 100%);
  color:#34384f;
}

.approach-provider-head--other small{
  color:#676c80;
}

.approach-provider-head--bessire{
  position:relative;
  background:linear-gradient(135deg,#3b3eac 0%,#20236f 100%);
  color:#fff;
  box-shadow:0 16px 32px rgba(46,48,148,.2);
}

.approach-provider-head--bessire small{
  color:rgba(255,255,255,.78);
}

.approach-group{
  display:block;
  margin:.9rem .2rem .35rem;
  background:transparent;
}

.approach-group > div{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:.3rem .75rem;
  color:#2e3094;
  font-size:.74rem;
  font-weight:900;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.approach-group > div::after{
  content:"";
  height:1px;
  flex:1;
  background:linear-gradient(90deg,rgba(46,48,148,.28),transparent);
}

.approach-row{
  min-height:66px;
  margin:.42rem .2rem;
  overflow:hidden;
  border:1px solid #e0e3ee;
  border-radius:14px;
  background:#fff;
  box-shadow:0 7px 18px rgba(23,25,71,.045);
}

.approach-row:last-child{
  margin-bottom:.2rem;
}

.approach-feature,
.approach-status{
  display:flex;
  min-width:0;
  align-items:center;
  padding:.78rem 1rem;
}

.approach-feature{
  background:#fff;
  color:#252842;
  font-size:.9rem;
  line-height:1.32;
}

.approach-status{
  gap:.55rem;
  justify-content:center;
  border-left:1px solid #e0e3ee;
  background:#f6f7fa;
}

.approach-status--bessire{
  border-left:2px solid #b9bfe9;
  background:linear-gradient(90deg,#f0f2ff 0%,#f8f8ff 100%);
}

.compare-icon{
  display:grid;
  width:1.85rem;
  height:1.85rem;
  flex:0 0 auto;
  place-items:center;
  border:2px solid rgba(255,255,255,.9);
  border-radius:999px;
  color:#fff;
  font-size:.92rem;
  font-weight:950;
  line-height:1;
  box-shadow:0 2px 7px rgba(23,25,71,.22);
}

.compare-icon--yes{
  background:#2fa66e;
}

.compare-icon--no{
  background:#d96565;
}

.approach-status--bessire .compare-icon{
  width:1.95rem;
  height:1.95rem;
  outline:3px solid rgba(46,48,148,.1);
}

.partner-path{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem;
}

.partner-path-card{
  position:relative;
  display:flex;
  min-height:100%;
  flex-direction:column;
  padding:1.25rem;
  border:1px solid rgba(46,48,148,.16);
  border-radius:20px;
  background:#fff;
  box-shadow:0 18px 42px rgba(23,25,71,.08);
}

.partner-path-card:not(:last-child)::after{
  position:absolute;
  z-index:3;
  top:50%;
  right:-1.55rem;
  display:grid;
  width:2.1rem;
  height:2.1rem;
  place-items:center;
  border:4px solid #f0f2ff;
  border-radius:999px;
  background:#2e3094;
  color:#fff;
  content:"→";
  font-size:.9rem;
  font-weight:900;
  transform:translateY(-50%);
}

.partner-path-card--host{
  border:2px solid #2e3094;
  background:linear-gradient(180deg,#eef1ff 0%,#fff 54%);
  box-shadow:0 22px 50px rgba(46,48,148,.16);
}

.partner-path-card--grow{
  border-style:dashed;
}

.partner-path-label{
  display:flex;
  align-items:center;
  gap:.5rem;
  color:#2e3094;
}

.partner-path-label > span{
  display:grid;
  width:1.75rem;
  height:1.75rem;
  place-items:center;
  border-radius:999px;
  background:#e9ecff;
  font-size:.65rem;
  font-weight:900;
}

.partner-path-label strong{
  font-size:.82rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.partner-path-label em{
  margin-left:auto;
  padding:.25rem .48rem;
  border:1px solid rgba(46,48,148,.2);
  border-radius:999px;
  background:#fff;
  color:#565b70;
  font-size:.64rem;
  font-style:normal;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.partner-path-card h3{
  margin:.9rem 0 0;
  color:#171947;
  font-size:clamp(1.15rem,1.9vw,1.45rem);
  line-height:1.18;
}

.partner-path-card p{
  margin:.55rem 0 0;
  color:#555a70;
  font-size:.91rem;
  line-height:1.55;
}

.partner-path-billing{
  display:inline-flex;
  width:max-content;
  max-width:100%;
  margin-top:auto;
  padding-top:1rem;
  color:#2e3094;
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.partner-accountability{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(420px,1.15fr);
  gap:clamp(1rem,3vw,2.4rem);
  align-items:center;
  margin-top:1rem;
  padding:clamp(1.15rem,2.5vw,1.65rem);
  border-radius:22px;
  background:linear-gradient(135deg,#171947 0%,#282c80 100%);
  color:#fff;
  box-shadow:0 24px 60px rgba(23,25,71,.2);
}

.partner-accountability > div > span{
  color:#b9c0ff;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.partner-accountability h3{
  margin:.45rem 0 0;
  color:#fff;
  font-size:clamp(1.35rem,2.4vw,1.9rem);
  line-height:1.15;
}

.partner-accountability > div > p{
  margin:.55rem 0 0;
  color:rgba(255,255,255,.72);
  line-height:1.55;
}

.partner-accountability ul{
  display:grid;
  gap:.55rem;
  margin:0;
  padding:0;
  list-style:none;
}

.partner-accountability li{
  display:grid;
  grid-template-columns:minmax(135px,.38fr) minmax(0,.62fr);
  gap:.7rem;
  padding:.75rem .85rem;
  border:1px solid rgba(255,255,255,.13);
  border-radius:14px;
  background:rgba(255,255,255,.07);
}

.partner-accountability li strong{
  color:#fff;
  font-size:.85rem;
  line-height:1.35;
}

.partner-accountability li span{
  color:rgba(255,255,255,.7);
  font-size:.82rem;
  line-height:1.45;
}

.footer-compact{
  background:#0b0d25;
}

.footer-compact::before{
  opacity:.52;
}

.footer-identity span{
  color:#f0f2ff;
  font-weight:600;
}

.footer-links a{
  border-color:#555b9f;
  background:#25275a;
  color:#fff;
}

.footer-links a:hover,
.footer-links a:focus-visible{
  border-color:#8f96df;
  background:#343879;
  color:#fff;
}

.footer-legal-line{
  padding-top:1rem;
}

.footer-legal-line p{
  color:#d8dcf4;
}

.search-section{
  background:linear-gradient(180deg,#fff 0%,#f7f8ff 100%);
}

.search-discovery-layout{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(380px,.92fr);
  gap:clamp(1.3rem,3.5vw,3rem);
  align-items:center;
}

.search-mode-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.75rem;
  margin-top:1rem;
}

.search-mode-card{
  padding:1rem;
  border:1px solid rgba(46,48,148,.16);
  border-radius:17px;
  background:#fff;
  box-shadow:0 14px 32px rgba(16,19,49,.06);
}

.search-mode-card > span{
  display:inline-flex;
  min-height:26px;
  align-items:center;
  padding:.25rem .52rem;
  border-radius:999px;
  background:#e9ecff;
  color:#2e3094;
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.08em;
}

.search-mode-card--aeo{
  border-color:rgba(46,48,148,.28);
  background:linear-gradient(180deg,#f0f2ff 0%,#fff 72%);
}

.search-mode-card--aeo > span{
  background:#2e3094;
  color:#fff;
}

.search-mode-card h3{
  margin:.7rem 0 0;
  color:#171947;
  font-size:1.08rem;
  line-height:1.2;
}

.search-mode-card p{
  margin:.45rem 0 0;
  color:#565b70;
  font-size:.84rem;
  line-height:1.52;
}

.search-both-note{
  margin-top:.75rem;
  padding:.9rem 1rem;
  border-left:4px solid #2e3094;
  border-radius:0 14px 14px 0;
  background:#eef1ff;
}

.search-both-note strong{
  color:#202454;
  font-size:.9rem;
}

.search-both-note p{
  margin:.25rem 0 0;
  color:#555a70;
  font-size:.84rem;
  line-height:1.5;
}

.search-discovery-visual{
  margin:0;
}

.search-discovery-visual figcaption{
  padding:.8rem .9rem;
  border-top:1px solid rgba(46,48,148,.12);
  background:#fff;
  color:#565b70;
  font-size:.78rem;
  font-weight:750;
  line-height:1.45;
}

.search-priority-card{
  overflow:hidden;
  border:1px solid rgba(46,48,148,.16);
  border-radius:18px;
  background:#fff;
  box-shadow:0 16px 38px rgba(16,19,49,.07);
}

.search-priority-item{
  display:grid;
  grid-template-columns:1.8rem 1fr;
  gap:.7rem;
  align-items:start;
  padding:.85rem .95rem;
}

.search-priority-item + .search-priority-item{
  border-top:1px solid rgba(46,48,148,.12);
}

.search-priority-item > span{
  display:grid;
  width:1.65rem;
  height:1.65rem;
  place-items:center;
  border-radius:999px;
  background:#eef1ff;
  color:#2e3094;
  font-size:.67rem;
  font-weight:900;
}

.search-priority-item h3{
  margin:0;
  color:#171947;
  font-size:1rem;
  line-height:1.25;
}

.search-priority-item p{
  margin:.25rem 0 0;
  color:#565b70;
  font-size:.86rem;
  line-height:1.48;
}

.package-section{
  background:linear-gradient(180deg,#fff 0%,#f5f6ff 100%);
}

.pricing-section-head{
  max-width:820px;
}

.pricing-tabs-instruction{
  display:flex;
  justify-content:center;
  gap:.35rem;
  margin:0 auto .65rem;
  color:#565b70;
  font-size:.88rem;
  line-height:1.4;
  text-align:center;
}

.pricing-tabs-instruction strong{
  color:#202454;
}

.pricing-tabs{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  max-width:780px;
  margin:0 auto 2.35rem;
  padding:0;
}

.pricing-tabs::before{
  position:absolute;
  top:26px;
  right:16.666%;
  left:16.666%;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(46,48,148,.38) 0%,rgba(82,87,201,.2) 100%);
  content:"";
}

.pricing-tab{
  position:relative;
  z-index:1;
  display:grid;
  min-width:0;
  min-height:98px;
  justify-items:center;
  align-content:start;
  gap:.52rem;
  padding:0 .6rem .55rem;
  border:0;
  border-radius:0;
  background:transparent;
  color:#4e5369;
  cursor:pointer;
  text-align:center;
  -webkit-tap-highlight-color:transparent;
}

.pricing-step-marker{
  display:grid;
  width:54px;
  height:54px;
  place-items:center;
  border:3px solid #c7cae8;
  border-radius:999px;
  background:#fff;
  color:#454a66;
  box-shadow:0 8px 20px rgba(24,28,72,.1);
  font-size:.88rem;
  font-weight:900;
  transition:background .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease,transform .2s ease;
}

.pricing-step-copy{
  position:relative;
  display:grid;
  gap:.16rem;
  min-width:0;
  padding-bottom:.45rem;
}

.pricing-step-copy::after{
  position:absolute;
  right:28%;
  bottom:0;
  left:28%;
  height:3px;
  border-radius:999px;
  background:#2e3094;
  content:"";
  opacity:0;
  transform:scaleX(.45);
  transition:opacity .2s ease,transform .2s ease;
}

.pricing-step-copy strong{
  color:#202454;
  font-size:1.15rem;
  font-weight:900;
  line-height:1.15;
}

.pricing-step-copy > span{
  color:#686d81;
  font-size:.78rem;
  font-weight:750;
  letter-spacing:.035em;
  line-height:1.25;
  text-transform:uppercase;
}

.pricing-tab.is-active{
  color:#202454;
}

.pricing-tab.is-active .pricing-step-marker{
  border-color:#fff;
  background:linear-gradient(145deg,#202454 0%,#3e43ad 100%);
  color:#fff;
  box-shadow:0 0 0 4px #2e3094,0 12px 28px rgba(46,48,148,.25);
}

.pricing-tab.is-active .pricing-step-copy strong{
  color:#2e3094;
}

.pricing-tab.is-active .pricing-step-copy::after{
  opacity:1;
  transform:scaleX(1);
}

.pricing-optional{
  display:inline-flex;
  margin-left:.35rem;
  padding:.16rem .38rem;
  border:1px solid rgba(46,48,148,.22);
  border-radius:999px;
  background:#eef1ff;
  color:#2e3094;
  font-size:.58rem;
  font-style:normal;
  font-weight:900;
  letter-spacing:.06em;
  line-height:1;
  text-transform:uppercase;
  vertical-align:middle;
}

.pricing-tab:hover .pricing-step-marker{
  border-color:#676cbd;
  color:#2e3094;
  transform:translateY(-3px);
}

.pricing-tab.is-active:hover .pricing-step-marker{
  border-color:#fff;
  color:#fff;
}

html body.experience-ready .pricing-tab:focus-visible{
  outline:none;
}

html body.experience-ready .pricing-tab:focus-visible .pricing-step-marker{
  outline:3px solid rgba(46,48,148,.32);
  outline-offset:5px;
}

.pricing-panel[hidden]{
  display:none !important;
}

.pricing-panel-head{
  display:block;
  margin-bottom:1.2rem;
  text-align:center;
}

.pricing-panel-head h3{
  margin:0;
  color:#171947;
  font-size:clamp(1.45rem,2.6vw,2.25rem);
  font-weight:900;
  letter-spacing:-.03em;
  line-height:1.08;
}

.pricing-tier-card h4{
  min-height:0;
  margin:0;
  color:#202454;
  font-size:clamp(1.38rem,1.8vw,1.7rem);
  font-weight:900;
  letter-spacing:-.025em;
  line-height:1.08;
}

.pricing-tier-card--advanced::before{
  background:linear-gradient(90deg,#171947 0%,#5257c9 100%);
}

.pricing-tier-price{
  display:flex;
  align-items:baseline;
  gap:.25rem;
}

.pricing-tier-price span{
  color:#565b70;
  font-size:.44em;
  font-weight:800;
  letter-spacing:0;
}

.pricing-panel-note{
  max-width:920px;
  margin:1.35rem auto 0;
  padding:1rem 1.15rem;
  border:1px solid rgba(46,48,148,.14);
  border-radius:14px;
  background:rgba(255,255,255,.72);
  color:#565b70;
  font-size:.94rem;
  line-height:1.55;
  text-align:center;
}

.pricing-panel-note strong{
  color:#202454;
}

.faq-section{
  background:linear-gradient(180deg,#f5f6ff 0%,#fff 100%);
}

.website-tier-card--featured{
  transform:translateY(-10px);
  border:2px solid #2e3094;
  background:linear-gradient(180deg,#f0f2ff 0%,#fff 48%);
  box-shadow:0 30px 72px rgba(46,48,148,.22);
}

.website-tier-card--featured::before{
  height:8px;
  background:#2e3094;
}

.website-tier-card--featured .website-tier-label{
  border-color:#2e3094;
  background:#2e3094;
  color:#fff;
}

.website-tier-card--featured .website-tier-price{
  color:#202454;
}

.process-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.ai-discovery-photo figcaption{
  display:none !important;
}

@media (hover:hover){

  .website-project-image:hover img{
    transform:scale(1.025);
  }

  .website-tier-card--featured:hover{
    transform:translateY(-14px);
    box-shadow:0 34px 80px rgba(46,48,148,.25);
  }
}

@media (min-width:1101px){
  .package-section > .container{
    width:min(calc(100% - 32px),1440px);
  }
}

@media (max-width:980px){

  .lead-journey-grid{
    grid-template-columns:1fr;
  }

  .lead-journey-card:not(:last-child)::after{
    top:auto;
    right:auto;
    bottom:-1.1rem;
    left:50%;
    width:2px;
    height:1.2rem;
  }

  .website-project-grid{
    grid-template-columns:1fr 1fr;
  }

  .process-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .search-discovery-layout,
  .partner-accountability{
    grid-template-columns:1fr;
  }

  .search-discovery-visual{
    width:min(100%,680px);
  }
}

@media (max-width:900px){
  .final-cta .cta-panel{
    grid-template-columns:1fr;
  }

  .partner-path{
    grid-template-columns:1fr;
  }

  .partner-path-card:not(:last-child)::after{
    top:auto;
    right:auto;
    bottom:-1.55rem;
    left:50%;
    transform:translateX(-50%) rotate(90deg);
  }

  .pricing-panel-head{
    grid-template-columns:1fr;
    gap:.7rem;
  }

  .pricing-carousel-shell .pricing-tier-grid{
    display:flex;
    gap:.8rem;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    touch-action:pan-x pan-y;
    scroll-snap-type:x mandatory;
    padding:.08rem 1.8rem .75rem;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  .pricing-carousel-shell .pricing-tier-grid::-webkit-scrollbar{
    display:none;
  }

  .pricing-carousel-shell .pricing-tier-card{
    flex:0 0 min(82vw,340px);
    grid-column:auto;
    width:auto;
    scroll-snap-align:center;
  }

  .pricing-carousel-shell .mobile-carousel-arrows{
    display:flex;
  }

  html body.experience-ready .pricing-carousel-shell > .mobile-carousel-arrows{
    justify-content:center !important;
  }

  .pricing-panel-note{
    text-align:left;
  }

}

@media (max-width:520px){
  .pricing-tabs-instruction{
    display:block;
    text-align:center;
  }

  .pricing-tabs-instruction strong{
    display:block;
  }

  .pricing-tabs{
    grid-template-columns:repeat(3,minmax(0,1fr));
    max-width:420px;
    margin-bottom:1.7rem;
  }

  .pricing-tab{
    min-height:88px;
    gap:.42rem;
    padding:0 .2rem .4rem;
    text-align:center;
  }

  .pricing-tabs::before{
    top:20px;
  }

  .pricing-step-marker{
    width:42px;
    height:42px;
    border-width:2px;
    font-size:.78rem;
  }

  .pricing-tab.is-active .pricing-step-marker{
    box-shadow:0 0 0 3px #2e3094,0 9px 22px rgba(46,48,148,.22);
  }

  .pricing-step-copy{
    padding-bottom:.38rem;
  }

  .pricing-step-copy strong{
    font-size:.94rem;
  }

  .pricing-step-copy > span{
    font-size:.62rem;
    letter-spacing:.025em;
  }

  .pricing-optional{
    margin-left:.12rem;
    padding:.1rem .24rem;
    font-size:.47rem;
  }

  .pricing-panel-head > div{
    grid-template-columns:2rem minmax(0,1fr);
  }

  .pricing-panel-number{
    width:2rem;
    height:2rem;
  }
}

@media (max-width:700px){
  .search-mode-grid{
    grid-template-columns:1fr;
  }

  .partner-accountability li{
    grid-template-columns:1fr;
    gap:.25rem;
  }
}

@media (max-width:1100px){
  .audience-breadcrumb a,
.website-project-copy > a,
.footer-links a{
    display:inline-flex;
    min-height:44px;
    align-items:center;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }

  .audience-breadcrumb a{
    min-width:44px;
    justify-content:center;
  }

}

@media (max-width:768px){

  .mobile-carousel-arrow{
    width:46px;
    height:46px;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }

  .web-hero-copy{
    order:1;
  }

  .web-hero-visual{
    order:2;
  }

  .website-tier-card--featured{
    transform:none;
  }

  .website-project-grid{
    grid-template-columns:1fr;
  }

  .project-proof-action{
    align-items:flex-start;
    flex-direction:column;
  }

  .approach-table{
    overflow:visible;
    padding:.42rem;
    border-radius:20px;
  }

  .approach-table-head{
    position:sticky;
    top:calc(var(--header-h, 72px) + .35rem);
    z-index:30;
    grid-template-columns:1fr 1fr;
    gap:.42rem;
    margin:-.42rem -.42rem .5rem;
    padding:.42rem;
    border:1px solid rgba(46,48,148,.14);
    border-radius:18px;
    background:rgba(247,248,255,.97);
    box-shadow:0 14px 30px rgba(23,25,71,.16);
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
  }

  .approach-feature-head,
.approach-provider-head{
    padding:.8rem .65rem;
    border-radius:14px;
  }

  .approach-feature-head{
    display:none;
  }

  .approach-provider-head{
    min-height:76px;
  }

  .approach-provider-head span{
    font-size:1.08rem;
    line-height:1.15;
    text-transform:none;
  }

  .approach-provider-head small{
    margin-top:.35rem;
    font-size:.64rem;
    line-height:1.2;
  }

  .approach-provider-head--other span{
    font-size:1rem;
  }

  .approach-group{
    margin:.85rem .15rem .3rem;
  }

  .approach-group > div{
    padding:.35rem .55rem;
    font-size:.66rem;
  }

  .approach-row{
    grid-template-columns:1fr 1fr;
    min-height:0;
    margin:.5rem .15rem;
    border-radius:15px;
  }

  .approach-feature,
.approach-status{
    padding:.68rem .6rem;
  }

  .approach-feature{
    min-height:50px;
    grid-column:1/-1;
    justify-content:center;
    border-bottom:1px solid #e0e3ee;
    background:#fff;
    font-size:.83rem;
    text-align:center;
  }

  .approach-status{
    min-height:64px;
    flex-direction:column;
    gap:.28rem;
    border-left:0;
  }

  .approach-status--bessire{
    border-left:0;
    border-right:1px solid #e0e3ee;
  }

  .compare-icon{
    width:1.75rem;
    height:1.75rem;
    font-size:.84rem;
  }

  .approach-status--bessire .compare-icon{
    width:1.88rem;
    height:1.88rem;
  }

  .process-grid{
    display:flex;
    grid-template-columns:none;
  }
}

@media (max-width:520px){
  .search-priority-item{
    grid-template-columns:1.65rem 1fr;
    gap:.58rem;
    padding:.78rem;
  }

  .website-project-card{
    border-radius:18px;
  }
}

@media (prefers-reduced-motion:reduce){
  .product-demo *,
  .product-demo *::before,
  .product-demo *::after,
  .portfolio-demo-overlay *{
    animation:none !important;
    transition:none !important;
  }

  .motion-toggle,
  .portfolio-demo-button{
    display:none;
  }
}

/* Real screenshot demonstrations requested for the Website Redesign page. */
.real-redesign-demo{
  width:100%;
  max-width:620px;
  aspect-ratio:1.52;
  margin:0;
  overflow:hidden;
  border:1px solid rgba(46,48,148,.16);
  border-radius:24px;
  background:#111;
  box-shadow:0 24px 60px rgba(18,22,62,.18);
}

.redesign-comparison{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:#171717;
}

.redesign-shot{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
}

.redesign-after-layer{
  position:absolute;
  z-index:2;
  inset:0;
  overflow:hidden;
  clip-path:inset(0 100% 0 0);
}

.redesign-divider{
  position:absolute;
  z-index:6;
  top:0;
  bottom:0;
  left:0;
  width:3px;
  background:#fff;
  box-shadow:0 0 0 1px rgba(18,22,62,.22),0 0 24px rgba(255,255,255,.75);
}

.redesign-divider i{
  position:absolute;
  top:50%;
  left:50%;
  width:2.4rem;
  height:2.4rem;
  border:2px solid #fff;
  border-radius:999px;
  background:#2e3094;
  box-shadow:0 8px 22px rgba(18,22,62,.25);
  transform:translate(-50%,-50%);
}

.redesign-divider i::before,
.redesign-divider i::after{
  position:absolute;
  top:50%;
  color:#fff;
  content:"";
  transform:translateY(-50%) rotate(45deg);
}

.redesign-divider i::before{
  left:.57rem;
  width:.45rem;
  height:.45rem;
  border-bottom:2px solid currentColor;
  border-left:2px solid currentColor;
}

.redesign-divider i::after{
  right:.57rem;
  width:.45rem;
  height:.45rem;
  border-top:2px solid currentColor;
  border-right:2px solid currentColor;
}

.redesign-label{
  position:absolute;
  z-index:8;
  top:.8rem;
  padding:.42rem .68rem;
  border:1px solid rgba(255,255,255,.3);
  border-radius:999px;
  background:rgba(17,19,34,.86);
  color:#fff;
  font-size:.6rem;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  backdrop-filter:blur(8px);
}

.redesign-label--before{ left:.8rem; }
.redesign-label--after{
  right:.8rem;
  background:rgba(39,116,57,.92);
  opacity:0;
}

.redesign-finished{
  position:absolute;
  z-index:9;
  right:1rem;
  bottom:1rem;
  display:grid;
  gap:.08rem;
  padding:.7rem .85rem;
  border:1px solid rgba(255,255,255,.45);
  border-radius:12px;
  background:rgba(25,29,72,.92);
  color:#fff;
  opacity:0;
  transform:translateY(8px);
  backdrop-filter:blur(10px);
}

.redesign-finished small{ font-size:.52rem; }
.redesign-finished strong{
  font-size:1rem;
  letter-spacing:.01em;
}

.real-redesign-demo[data-demo-state="reveal"] .redesign-after-layer,
.real-redesign-demo[data-demo-state="new"] .redesign-after-layer{
  clip-path:inset(0);
}

.real-redesign-demo[data-demo-state="reveal"] .redesign-after-layer,
.real-redesign-demo[data-demo-state="reveal"] .redesign-divider{
  transition:clip-path 3.5s cubic-bezier(.65,0,.35,1),left 3.5s cubic-bezier(.65,0,.35,1);
}

.real-redesign-demo[data-demo-state="reveal"] .redesign-divider,
.real-redesign-demo[data-demo-state="new"] .redesign-divider{
  left:100%;
}

.real-redesign-demo[data-demo-state="reveal"] .redesign-label--after,
.real-redesign-demo[data-demo-state="new"] .redesign-label--after{
  opacity:1;
}

.real-redesign-demo[data-demo-state="new"] .redesign-divider,
.real-redesign-demo[data-demo-state="new"] .redesign-label--before{
  opacity:0;
}

.real-redesign-demo[data-demo-state="new"] .redesign-finished{
  opacity:1;
  transform:translateY(0);
  transition:opacity .45s ease,transform .45s ease;
}

/* Real, long-page mobile scrolling comparison. */
.real-trust-demo{
  --trust-phone-height:330px;
  padding:.8rem .8rem 3.65rem;
  overflow:hidden;
  color:#171947;
}

.real-trust-heading{
  margin:.05rem 0 .7rem;
  color:#555d78;
  font-size:.72rem;
  text-align:center;
}

.real-trust-heading strong{ color:#202454; }

.real-phone-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.75rem;
}

.real-phone-example{
  min-width:0;
  padding:.55rem;
  border:1px solid rgba(46,48,148,.14);
  border-radius:17px;
  background:#f7f8ff;
  transition:opacity .4s ease,transform .4s ease,border-color .4s ease;
}

.real-phone-label{
  display:inline-flex;
  margin-bottom:.45rem;
  padding:.3em .62em;
  border-radius:999px;
  background:#f4dfdb;
  color:#914b44;
  font-size:.54rem;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.real-phone-example--easy .real-phone-label{
  background:#dff5ed;
  color:#147755;
}

.real-iphone-frame{
  position:relative;
  height:var(--trust-phone-height);
  overflow:hidden;
  border:7px solid #171947;
  border-radius:28px;
  background:#fff;
  box-shadow:0 15px 30px rgba(18,22,62,.16);
}

.real-iphone-speaker{
  position:absolute;
  z-index:3;
  top:.35rem;
  left:50%;
  width:28%;
  height:.32rem;
  border-radius:999px;
  background:#171947;
  transform:translateX(-50%);
}

.real-phone-screen{
  position:absolute;
  inset:0;
  overflow:hidden;
  border-radius:19px;
  background:#fff;
}

.real-phone-screen img{
  display:block;
  width:100%;
  height:auto !important;
  max-height:none;
  aspect-ratio:auto !important;
  object-fit:initial;
  transform:translateY(0);
  transition:transform .5s ease;
}

.real-phone-example > p{
  margin:.55rem .15rem .05rem;
  color:#5b637d;
  font-size:.55rem;
  line-height:1.4;
}

.real-trust-demo[data-demo-state="hard"] .real-phone-example--easy,
.real-trust-demo[data-demo-state="easy"] .real-phone-example--hard{
  opacity:.42;
  transform:scale(.98);
}

.real-trust-demo[data-demo-state="hard"] .real-phone-example--hard,
.real-trust-demo[data-demo-state="easy"] .real-phone-example--easy,
.real-trust-demo[data-demo-state="final"] .real-phone-example{
  border-color:rgba(63,81,255,.32);
}

.real-trust-demo[data-demo-state="hard"] .real-phone-example--hard img,
.real-trust-demo[data-demo-state="easy"] .real-phone-example--easy img{
  transform:translateY(calc(-100% + var(--trust-phone-height)));
  transition-delay:.45s;
  transition-duration:5.7s;
  transition-timing-function:linear;
}

.real-trust-demo[data-demo-state="final"] .real-phone-example--easy img{
  transform:translateY(calc(-100% + var(--trust-phone-height)));
}

/* Concrete Google and ChatGPT discovery sequence. */
.real-discovery-demo{
  padding:1rem 1rem 4.2rem;
  overflow:hidden;
  border:1px solid rgba(46,48,148,.15);
  border-radius:24px;
  background:linear-gradient(145deg,#f8faff,#eef1ff);
  box-shadow:0 22px 55px rgba(16,19,49,.08);
}

.real-discovery-progress{
  display:flex;
  max-width:760px;
  margin:0 auto .8rem;
  align-items:center;
  justify-content:center;
  gap:.65rem;
}

.real-discovery-progress span{
  display:flex;
  align-items:center;
  gap:.42rem;
  color:#707793;
  font-size:.66rem;
  font-weight:850;
  transition:color .35s ease;
}

.real-discovery-progress b{
  display:grid;
  width:1.35rem;
  height:1.35rem;
  place-items:center;
  border-radius:999px;
  background:#e1e5f6;
  color:#555d78;
  font-size:.58rem;
  transition:background .35s ease,color .35s ease;
}

.real-discovery-progress i{
  width:clamp(2rem,8vw,5rem);
  height:2px;
  background:#d3d8eb;
}

.real-discovery-demo[data-demo-state^="google"] [data-real-step="seo"],
.real-discovery-demo[data-demo-state^="chatgpt"] [data-real-step="aeo"],
.real-discovery-demo[data-demo-state="final"] [data-real-step]{ color:#202454; }

.real-discovery-demo[data-demo-state^="google"] [data-real-step="seo"] b,
.real-discovery-demo[data-demo-state^="chatgpt"] [data-real-step="aeo"] b,
.real-discovery-demo[data-demo-state="final"] [data-real-step] b{
  background:#2e3094;
  color:#fff;
}

.real-search-browser{
  position:relative;
  width:min(920px,100%);
  height:clamp(470px,43vw,540px);
  margin:0 auto;
  overflow:hidden;
  border:1px solid rgba(46,48,148,.16);
  border-radius:18px;
  background:#fff;
  box-shadow:0 18px 45px rgba(24,28,72,.13);
}

.real-browser-bar{
  position:absolute;
  z-index:6;
  top:0;
  right:0;
  left:0;
  display:flex;
  height:42px;
  align-items:center;
  gap:.35rem;
  padding:0 .85rem;
  border-bottom:1px solid #e4e7ef;
  background:#f3f5f9;
}

.real-browser-bar > span{
  width:.55rem;
  height:.55rem;
  border-radius:999px;
  background:#ff7777;
}

.real-browser-bar > span:nth-child(2){ background:#ffc85c; }
.real-browser-bar > span:nth-child(3){ background:#4fd19a; }

.real-url{
  position:absolute;
  top:50%;
  left:50%;
  width:min(58%,440px);
  padding:.3rem .8rem;
  border-radius:999px;
  background:#e7eaf1;
  color:#555d73;
  font-size:.64rem;
  font-style:normal;
  text-align:left;
  transform:translate(-50%,-50%);
  transition:opacity .3s ease;
}

.real-url--chatgpt{ opacity:0; }
.real-discovery-demo[data-demo-state^="chatgpt"] .real-url--google,
.real-discovery-demo[data-demo-state="final"] .real-url--google{ opacity:0; }
.real-discovery-demo[data-demo-state^="chatgpt"] .real-url--chatgpt,
.real-discovery-demo[data-demo-state="final"] .real-url--chatgpt{ opacity:1; }

.real-google-scene,
.real-chatgpt-scene{
  position:absolute;
  top:42px;
  right:0;
  bottom:0;
  left:0;
  padding:1.6rem clamp(1rem,5vw,3.2rem);
  background:#fff;
  transition:opacity .45s ease,transform .45s ease;
}

.real-chatgpt-scene{
  z-index:2;
  background:#f7f7f8;
  opacity:0;
  transform:translateX(4%);
}

.real-discovery-demo[data-demo-state^="chatgpt"] .real-google-scene,
.real-discovery-demo[data-demo-state="final"] .real-google-scene{
  opacity:0;
  transform:translateX(-4%);
}

.real-discovery-demo[data-demo-state^="chatgpt"] .real-chatgpt-scene,
.real-discovery-demo[data-demo-state="final"] .real-chatgpt-scene{
  opacity:1;
  transform:translateX(0);
}

.google-wordmark{
  display:flex;
  justify-content:center;
  margin:.15rem 0 .85rem;
  font:700 2rem/1 Arial,sans-serif;
  letter-spacing:-.12em;
}

.google-wordmark b:nth-child(1),.google-wordmark b:nth-child(4){ color:#4285f4; }
.google-wordmark b:nth-child(2),.google-wordmark b:nth-child(6){ color:#ea4335; }
.google-wordmark b:nth-child(3){ color:#fbbc05; }
.google-wordmark b:nth-child(5){ color:#34a853; }

.real-query-box{
  position:relative;
  max-width:630px;
  min-height:42px;
  margin:0 auto;
  padding:.67rem 2.6rem .67rem 1rem;
  border:1px solid #d9dce4;
  border-radius:999px;
  color:#202124;
  box-shadow:0 2px 8px rgba(60,64,67,.12);
  font-size:.78rem;
}

.real-query-box > i{
  position:absolute;
  top:50%;
  right:1rem;
  width:.78rem;
  height:.78rem;
  border:2px solid #4285f4;
  border-radius:999px;
  transform:translateY(-58%);
}

.real-query-box > i::after{
  position:absolute;
  right:-.28rem;
  bottom:-.17rem;
  width:.38rem;
  height:2px;
  background:#4285f4;
  content:"";
  transform:rotate(45deg);
}

.real-google-query,
.real-chatgpt-query{
  display:block;
  width:0;
  max-width:max-content;
  overflow:hidden;
  white-space:nowrap;
}

.real-discovery-demo[data-demo-state="google-type"] .real-google-query{
  animation:real-query-type 1.7s steps(16,end) .35s forwards;
}

.real-discovery-demo[data-demo-state="google-results"] .real-google-query{ width:100%; }

.real-google-results{
  max-width:720px;
  margin:1rem auto 0;
  padding:1rem;
  border:1px solid #e1e4eb;
  border-radius:14px;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .45s ease,transform .45s ease;
}

.real-discovery-demo[data-demo-state="google-results"] .real-google-results{
  opacity:1;
  transform:translateY(0);
}

.real-google-results > small{
  color:#727780;
  font-size:.56rem;
  font-weight:900;
  letter-spacing:.06em;
}

.real-google-results h3{
  margin:.28rem 0 .65rem;
  color:#202124;
  font-size:.95rem;
}

.local-result-row{
  display:grid;
  grid-template-columns:1.5fr 1fr auto;
  gap:.6rem;
  align-items:center;
  padding:.58rem .15rem;
  border-top:1px solid #eceef2;
}

.local-result-row b{ color:#1f1f1f; font-size:.67rem; }
.local-result-row span{ color:#59636f; font-size:.58rem; }
.local-result-row em{
  padding:.4em .65em;
  border:1px solid #d6dff7;
  border-radius:999px;
  color:#1a73e8;
  font-size:.55rem;
  font-style:normal;
  font-weight:800;
}

.real-discovery-caption{
  position:absolute;
  right:1rem;
  bottom:.8rem;
  left:1rem;
  color:#2e3094;
  font-size:.66rem;
  text-align:center;
}

.chatgpt-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-bottom:.75rem;
  border-bottom:1px solid #e2e2e5;
  color:#202123;
  font-size:.72rem;
}

.chatgpt-heading span{
  padding:.38em .65em;
  border:1px solid #d9d9dd;
  border-radius:7px;
  color:#606167;
  font-size:.58rem;
}

.chatgpt-prompt{
  width:min(620px,88%);
  min-height:44px;
  margin:1rem 0 .8rem auto;
  padding:.75rem 1rem;
  border-radius:18px 18px 4px 18px;
  background:#e7e7e9;
  color:#202123;
  font-size:.72rem;
}

.real-discovery-demo[data-demo-state="chatgpt-type"] .real-chatgpt-query{
  animation:real-query-type 1.7s steps(16,end) .35s forwards;
}

.real-discovery-demo[data-demo-state="chatgpt-results"] .real-chatgpt-query,
.real-discovery-demo[data-demo-state="final"] .real-chatgpt-query{ width:100%; }

.chatgpt-answer{
  max-width:720px;
  padding:.95rem 1rem;
  border-radius:13px;
  background:#fff;
  color:#303136;
  box-shadow:0 7px 22px rgba(30,31,35,.06);
  opacity:0;
  transform:translateY(10px);
  transition:opacity .45s ease,transform .45s ease;
}

.real-discovery-demo[data-demo-state="chatgpt-results"] .chatgpt-answer,
.real-discovery-demo[data-demo-state="final"] .chatgpt-answer{
  opacity:1;
  transform:translateY(0);
}

.chatgpt-answer strong{ color:#202123; font-size:.73rem; }
.chatgpt-answer p,
.chatgpt-answer li{ font-size:.64rem; line-height:1.45; }
.chatgpt-answer p{ margin:.45rem 0; }
.chatgpt-answer ul{ display:grid; gap:.22rem; margin:.45rem 0; padding-left:1.1rem; }
.chatgpt-answer small{ color:#73747a; font-size:.54rem; }

.real-discovery-summary{
  position:absolute;
  z-index:8;
  right:4rem;
  bottom:.8rem;
  left:1rem;
  display:flex;
  align-items:center;
  gap:.55rem;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .35s ease,transform .35s ease;
}

.real-discovery-summary strong{
  padding:.4em .65em;
  border-radius:999px;
  background:#e7eaff;
  color:#2e3094;
  font-size:.58rem;
}

.real-discovery-summary span{
  margin-left:auto;
  color:#6c738d;
  font-size:.54rem;
}

.real-discovery-demo[data-demo-state="final"] .real-discovery-summary{
  opacity:1;
  transform:translateY(0);
}

@keyframes real-query-type{ from{ width:0; } to{ width:100%; } }

@media (max-width:760px){
  .real-redesign-demo{
    min-height:300px;
    aspect-ratio:auto;
  }

  .redesign-finished{
    right:.65rem;
    bottom:.65rem;
    left:.65rem;
    text-align:center;
  }

  .redesign-label{ top:.55rem; font-size:.5rem; }
  .redesign-label--before{ left:.55rem; }
  .redesign-label--after{ right:.55rem; }

  .real-trust-demo{
    --trust-phone-height:285px;
    padding:.7rem .55rem 3.5rem;
  }

  .real-phone-grid{ gap:.48rem; }
  .real-phone-example{ padding:.38rem; border-radius:13px; }
  .real-phone-label{ font-size:.44rem; }
  .real-iphone-frame{ border-width:5px; border-radius:20px; }
  .real-phone-screen{ border-radius:14px; }
  .real-phone-example > p{ font-size:.46rem; }

  .real-discovery-demo{
    padding:.7rem .65rem 5rem;
    border-radius:19px;
  }

  .real-discovery-progress{ gap:.35rem; }
  .real-discovery-progress span{ gap:.25rem; font-size:.54rem; }
  .real-discovery-progress b{ width:1.15rem; height:1.15rem; font-size:.5rem; }

  .real-search-browser{
    height:590px;
    border-radius:14px;
  }

  .real-browser-bar{ height:36px; padding:0 .55rem; }
  .real-browser-bar > span{ width:.42rem; height:.42rem; }
  .real-url{ width:62%; font-size:.52rem; }

  .real-google-scene,
  .real-chatgpt-scene{
    top:36px;
    padding:1rem .65rem;
  }

  .google-wordmark{ margin:.2rem 0 .8rem; font-size:1.55rem; }
  .real-query-box{ min-height:40px; padding:.64rem 2.25rem .64rem .75rem; font-size:.68rem; }
  .real-google-results{ margin-top:.8rem; padding:.7rem; }
  .real-google-results h3{ font-size:.8rem; }

  .local-result-row{
    grid-template-columns:1fr auto;
    gap:.25rem .4rem;
    padding:.55rem 0;
  }

  .local-result-row b{ font-size:.61rem; }
  .local-result-row span{ grid-column:1; font-size:.52rem; }
  .local-result-row em{ grid-row:1 / 3; grid-column:2; font-size:.49rem; }
  .real-discovery-caption{ font-size:.56rem; }

  .chatgpt-heading{ font-size:.65rem; }
  .chatgpt-prompt{ width:94%; padding:.65rem .75rem; font-size:.65rem; }
  .chatgpt-answer{ padding:.8rem; }
  .chatgpt-answer strong{ font-size:.67rem; }
  .chatgpt-answer p,
  .chatgpt-answer li{ font-size:.58rem; }

  .real-discovery-summary{
    right:.7rem;
    bottom:.65rem;
    left:3.5rem;
    flex-wrap:wrap;
    gap:.3rem;
  }

  .real-discovery-summary strong{ font-size:.5rem; }
  .real-discovery-summary span{ width:100%; margin-left:0; font-size:.48rem; }
}

/* Directly interactive redesign comparison. */
.hero-redesign-visual{
  display:grid;
  min-width:0;
  justify-items:center;
}

.redesign-slider-instruction{
  display:flex;
  margin:0 0 .65rem;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  color:#202454;
  font-size:.72rem;
  text-align:center;
}

.redesign-slider-instruction > span{
  display:grid;
  width:1.55rem;
  height:1.55rem;
  place-items:center;
  border-radius:999px;
  background:#e8ebff;
  color:#2e3094;
  font-size:.9rem;
  font-weight:900;
}

.real-redesign-demo{
  position:relative;
  width:100%;
  max-width:720px;
  aspect-ratio:1.52;
  margin:0;
}

.real-redesign-demo .redesign-after-layer{
  clip-path:inset(0 calc(100% - var(--reveal)) 0 0);
  transition:none;
}

.real-redesign-demo .redesign-divider{
  left:var(--reveal);
  opacity:1;
  transition:none;
}

.real-redesign-demo .redesign-label,
.real-redesign-demo .redesign-finished{
  display:none !important;
}

.redesign-range{
  position:absolute;
  z-index:12;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  appearance:none;
  -webkit-appearance:none;
  border:0;
  background:transparent;
  cursor:ew-resize;
  opacity:.001;
}

.redesign-range::-webkit-slider-runnable-track{
  width:100%;
  height:100%;
  background:transparent;
}

.redesign-range::-webkit-slider-thumb{
  width:3rem;
  height:100%;
  appearance:none;
  -webkit-appearance:none;
  border:0;
  background:transparent;
  cursor:ew-resize;
}

.redesign-range::-moz-range-track{
  width:100%;
  height:100%;
  border:0;
  background:transparent;
}

.redesign-range::-moz-range-thumb{
  width:3rem;
  height:100%;
  border:0;
  background:transparent;
  cursor:ew-resize;
}

.real-redesign-demo:focus-within{
  outline:3px solid #6975dc;
  outline-offset:4px;
}

@media (min-width:1101px){
  .web-hero-v2-inner{
    grid-template-columns:minmax(0,.78fr) minmax(570px,1.22fr);
    gap:clamp(2rem,4vw,4rem);
  }
}

/* Passive mobile screenshot frames. The previews never capture page scrolling. */
.real-trust-demo{
  padding:.8rem;
  overflow:visible;
}

.real-phone-example,
.real-trust-demo[data-demo-state] .real-phone-example{
  opacity:1;
  transform:none;
  transition:none;
}

.real-iphone-frame{
  width:100%;
  height:auto;
  aspect-ratio:390 / 844;
}

.real-phone-screen{
  overflow:hidden;
  pointer-events:none;
}

.real-phone-screen img,
.real-trust-demo[data-demo-state] .real-phone-screen img{
  --real-phone-preview-step-one:-220px;
  --real-phone-preview-step-two:-520px;
  --real-phone-preview-step-three:-900px;
  animation:real-phone-passive-scroll 20s cubic-bezier(.4,0,.2,1) infinite;
  transform:none;
  transition:none;
  will-change:transform;
}

/* Light-mode Google local results and ChatGPT answer recreation. */
.real-search-browser{
  height:clamp(590px,51vw,650px);
}

.real-google-scene,
.real-chatgpt-scene{
  padding:.85rem 1rem 2.35rem;
}

.real-google-toolbar{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:1.1rem;
  align-items:center;
}

.real-google-toolbar .google-wordmark{
  justify-content:flex-start;
  margin:0;
  font-size:1.45rem;
}

.real-google-toolbar .real-query-box{
  width:100%;
  max-width:none;
  margin:0;
}

.real-google-tabs{
  display:flex;
  gap:1.1rem;
  margin:.75rem 0 0 5.8rem;
  padding-bottom:.55rem;
  border-bottom:1px solid #e6e8ee;
  color:#6e737c;
  font-size:.58rem;
  white-space:nowrap;
}

.real-google-tabs strong{
  position:relative;
  color:#1f1f1f;
}

.real-google-tabs strong::after{
  position:absolute;
  right:0;
  bottom:-.62rem;
  left:0;
  height:2px;
  background:#1a73e8;
  content:"";
}

.real-google-location{
  display:flex;
  margin:.75rem 0 .45rem;
  align-items:center;
  gap:.35rem;
  color:#454950;
  font-size:.59rem;
}

.real-google-location span{
  margin-left:.35rem;
  padding:.34em .62em;
  border:1px solid #d8dce4;
  border-radius:999px;
  color:#1a73e8;
  font-weight:700;
}

.real-google-results{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  max-width:none;
  min-height:365px;
  margin:0;
  padding:0;
  overflow:hidden;
  border:1px solid #e0e3e8;
  border-radius:15px;
  background:#fff;
}

.real-local-list{
  min-width:0;
  padding:.85rem;
}

.real-local-list > small{
  color:#727780;
  font-size:.48rem;
  font-weight:900;
  letter-spacing:.06em;
}

.real-local-list h3{
  margin:.25rem 0 .45rem;
  color:#202124;
  font-size:1rem;
}

.real-local-list .local-result-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:.45rem;
  align-items:center;
  padding:.62rem 0;
}

.real-local-list .local-result-row > div{
  display:grid;
  gap:.13rem;
  min-width:0;
}

.real-local-list .local-result-row b{ color:#202124; font-size:.62rem; }
.real-local-list .local-result-row span{ color:#6b7078; font-size:.51rem; }
.real-local-list .local-result-row small{ color:#3b8254; font-size:.47rem; }

.real-local-map,
.chatgpt-map{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(28deg,transparent 47%,rgba(255,255,255,.88) 48%,rgba(255,255,255,.88) 51%,transparent 52%),
    linear-gradient(-42deg,transparent 48%,rgba(255,255,255,.8) 49%,rgba(255,255,255,.8) 51%,transparent 52%),
    repeating-linear-gradient(15deg,rgba(183,205,184,.33) 0 18px,rgba(217,228,214,.4) 18px 38px),
    #e5eee2;
}

.real-local-map{
  min-height:365px;
  border-left:1px solid #e0e3e8;
}

.map-road{
  position:absolute;
  width:125%;
  height:5px;
  border:1px solid #fff;
  background:#c9d2d8;
  box-shadow:0 0 0 1px rgba(133,151,159,.3);
  transform-origin:center;
}

.map-road--one{ top:28%; left:-12%; transform:rotate(24deg); }
.map-road--two{ top:62%; left:-10%; transform:rotate(-18deg); }
.map-road--three{ top:45%; left:-15%; transform:rotate(76deg); }

.map-place{
  position:absolute;
  color:#55625c;
  font-size:.52rem;
  font-weight:800;
}

.map-place--charlotte{ right:12%; bottom:14%; }
.map-place--harrisburg{ top:16%; right:10%; }

.map-marker{
  position:absolute;
  z-index:3;
  display:grid;
  width:1.45rem;
  height:1.45rem;
  place-items:center;
  border:2px solid #fff;
  border-radius:999px 999px 999px 2px;
  background:#ea4335;
  color:#fff;
  font-size:.5rem;
  box-shadow:0 4px 12px rgba(39,55,49,.22);
  transform:rotate(-45deg);
}

.map-marker::first-letter{ transform:rotate(45deg); }
.map-marker--one{ top:24%; left:28%; }
.map-marker--two{ top:49%; right:19%; }
.map-marker--three{ bottom:18%; left:38%; }

.real-chatgpt-scene{
  background:#f8f8fa;
}

.chatgpt-heading{
  padding-bottom:.55rem;
}

.chatgpt-prompt{
  width:min(520px,78%);
  min-height:38px;
  margin:.7rem 0 .65rem auto;
  padding:.62rem .85rem;
  border-radius:17px;
  font-size:.66rem;
}

.chatgpt-map{
  height:235px;
  max-width:760px;
  margin:0 auto .65rem;
  border:1px solid #dce2df;
  border-radius:15px;
}

.chatgpt-map-card{
  position:absolute;
  right:.55rem;
  bottom:.55rem;
  left:.55rem;
  display:grid;
  grid-template-columns:1fr auto;
  gap:.12rem .5rem;
  padding:.58rem .7rem;
  border:1px solid rgba(32,36,84,.1);
  border-radius:11px;
  background:rgba(255,255,255,.94);
  color:#25262a;
  box-shadow:0 8px 22px rgba(35,46,40,.13);
}

.chatgpt-map-card strong{ font-size:.6rem; }
.chatgpt-map-card span{ font-size:.5rem; }
.chatgpt-map-card small{ grid-column:1 / -1; color:#6a706e; font-size:.46rem; }

.chatgpt-answer{
  max-width:760px;
  margin:0 auto;
  padding:.75rem .9rem;
}

.chatgpt-answer ol{
  display:grid;
  gap:.35rem;
  margin:.45rem 0;
  padding-left:1.15rem;
}

.chatgpt-answer li{
  padding-left:.15rem;
}

.chatgpt-answer li b,
.chatgpt-answer li span{
  display:block;
}

.chatgpt-answer li span{
  margin-top:.05rem;
  color:#62656b;
  font-size:.54rem;
}

@media (max-width:760px){
  .hero-redesign-visual{ width:100%; }

  .redesign-slider-instruction{
    font-size:.62rem;
  }

  .real-redesign-demo{
    width:100%;
    min-height:0;
    aspect-ratio:1.35;
  }

  .redesign-divider i{
    width:2rem;
    height:2rem;
  }

  .real-trust-demo{
    padding:.65rem .5rem;
  }

  .real-phone-grid{ gap:.42rem; }
  .real-phone-example{ padding:.32rem; }
  .real-phone-label{ font-size:.42rem; }
  .real-iphone-frame{ aspect-ratio:390 / 844; }

  .real-search-browser{ height:720px; }

  .real-google-toolbar{
    grid-template-columns:1fr;
    gap:.55rem;
  }

  .real-google-toolbar .google-wordmark{
    justify-content:center;
  }

  .real-google-tabs{
    gap:.75rem;
    margin:.6rem 0 0;
    overflow:hidden;
  }

  .real-google-tabs span:nth-last-child(-n+2){ display:none; }
  .real-google-location{ margin:.65rem 0 .4rem; }

  .real-google-results{
    grid-template-columns:1fr;
    min-height:0;
  }

  .real-local-list{ padding:.65rem; }
  .real-local-list h3{ font-size:.82rem; }
  .real-local-list .local-result-row{ padding:.48rem 0; }
  .real-local-list .local-result-row b{ font-size:.57rem; }
  .real-local-list .local-result-row span{ font-size:.47rem; }
  .real-local-map{
    min-height:175px;
    border-top:1px solid #e0e3e8;
    border-left:0;
  }

  .chatgpt-prompt{ width:92%; }
  .chatgpt-map{ height:205px; }
  .chatgpt-answer{ padding:.65rem .7rem; }
  .chatgpt-answer ol{ gap:.25rem; }
  .chatgpt-answer li span{ font-size:.5rem; }
}

/* Supporting copy is intentionally 20% smaller while headings and actions stay unchanged. */
.web-hero-lead{
  font-size:clamp(.84rem,1.28vw,.992rem);
}

body[data-nav-key="websites"] main .lead{
  font-size:clamp(.8rem,1.28vw,.936rem);
}

.missing-section .missing-list p,
.lead-journey-card p,
.lead-card p,
.faq-answer p,
.final-cta p{
  font-size:.8rem;
}

.search-mode-card p,
.search-both-note p{
  font-size:.672rem;
}

.search-discovery-visual figcaption{
  font-size:.624rem;
}

.website-project-card p{
  font-size:.704rem;
}

.website-tier-card p{
  font-size:.8rem;
}

.website-tier-card li{
  font-size:.776rem;
}

.pricing-tabs-instruction{
  font-size:.704rem;
}

.pricing-panel-note{
  font-size:.752rem;
}

@media (max-width:768px){
  .missing-section .missing-list p{
    font-size:.736rem;
  }

  .website-tier-card p{
    font-size:.736rem;
  }

  .website-tier-card li{
    font-size:.72rem;
  }
}

@media (min-width:1081px){
  .web-hero-v2-inner{
    grid-template-columns:minmax(0,1.08fr) minmax(360px,.82fr);
  }

  .web-hero-visual{
    width:100%;
    max-width:560px;
    justify-self:end;
  }
}

.pricing-instruction-mobile{
  display:none;
}

@media (max-width:768px){

  .pricing-instruction-desktop{
    display:none;
  }

  .pricing-instruction-mobile{
    display:inline;
  }
}

@media (min-width:1081px){
  .web-hero-v2-inner{
    grid-template-columns:minmax(0,.78fr) minmax(620px,1.22fr);
    gap:clamp(3rem,4vw,4rem);
  }

  .web-hero-copy h1{
    font-size:clamp(2.25rem,4vw,3.6rem);
  }

  .hero-redesign-visual{
    width:100%;
    max-width:720px;
    justify-self:end;
    transform:translateX(32px);
  }

  .web-hero-copy{
    position:relative;
    z-index:2;
  }
}

.redesign-slider-status{
  display:flex;
  width:100%;
  max-width:720px;
  margin:0 0 .38rem;
  padding:0 .2rem;
  justify-content:flex-end;
  color:#353a63;
  font-size:.88rem;
  font-weight:950;
  letter-spacing:.09em;
  line-height:1;
  text-transform:uppercase;
}

.redesign-slider-status.is-after{
  justify-content:flex-start;
}

/* Static, plain-English SEO and AEO explanation. */
.search-simple-layout{
  display:block;
}

.search-explain-cards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
}

.project-proof-section .section-head{
  text-align:center !important;
}

.search-explain-card{
  position:relative;
  padding:1.15rem;
  overflow:hidden;
  border:1px solid rgba(46,48,148,.14);
  border-radius:18px;
  background:#fff;
  box-shadow:0 16px 38px rgba(19,22,66,.07);
}

.search-explain-card::before{
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:#2e3094;
  content:"";
}

.search-explain-card--aeo::before{
  background:#27765d;
}

.search-explain-card > span{
  display:inline-flex;
  min-width:3.5rem;
  min-height:1.75rem;
  padding:.25rem .7rem;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#e9ebff;
  color:#2e3094;
  font-size:.7rem;
  font-weight:950;
  letter-spacing:.08em;
}

.search-explain-card--aeo > span{
  background:#e5f4ee;
  color:#1f6b53;
}

.search-explain-card h3{
  margin:.72rem 0 .45rem;
  color:#171b47;
  font-size:clamp(1rem,1.5vw,1.25rem);
  line-height:1.18;
}

.search-explain-card p{
  margin:0;
  color:#50556e;
  font-size:.84rem;
  line-height:1.58;
}

.search-explain-card ul{
  display:grid;
  gap:.35rem;
  margin:.75rem 0 0;
  padding-left:1.05rem;
  color:#2f3454;
  font-size:.78rem;
  line-height:1.45;
}

@media (max-width:600px){
  .search-explain-cards{
    grid-template-columns:1fr;
  }

  .redesign-slider-status{
    font-size:.76rem;
  }
}

@media (max-width:760px){
  .web-hero-copy{
    order:1;
  }

  .hero-redesign-visual{
    order:2;
    width:100%;
  }

  .real-trust-demo{
    padding:.7rem 0 .85rem;
    overflow:hidden;
  }

  .real-phone-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.42rem;
    margin:0;
    padding:0 .45rem .4rem;
    overflow:visible;
    touch-action:pan-y;
  }

  .real-phone-example,
  .real-trust-demo[data-demo-state] .real-phone-example{
    display:flex;
    width:auto;
    min-width:0;
    padding:.34rem;
    flex-direction:column;
  }

  .real-phone-label{
    display:flex;
    width:100%;
    min-height:2.45em;
    margin-bottom:.35rem;
    padding:.32em .35em;
    align-items:center;
    justify-content:center;
    font-size:clamp(.48rem,2.3vw,.58rem);
    line-height:1.15;
    text-align:center;
  }

  .real-iphone-frame{
    border-width:clamp(5px,1.8vw,7px);
    border-radius:clamp(20px,6vw,28px);
  }

  .real-phone-screen{
    touch-action:auto;
  }

  .real-phone-screen img,
  .real-trust-demo[data-demo-state] .real-phone-screen img{
    --real-phone-preview-step-one:calc(clamp(180px,50vw,300px) * -1);
    --real-phone-preview-step-two:calc(clamp(420px,110vw,680px) * -1);
    --real-phone-preview-step-three:calc(clamp(720px,190vw,1000px) * -1);
  }
}

@keyframes real-phone-passive-scroll{
  0%,5%{ transform:translate3d(0,0,0); }
  18%,24%{ transform:translate3d(0,var(--real-phone-preview-step-one),0); }
  43%,49%{ transform:translate3d(0,var(--real-phone-preview-step-two),0); }
  61%,69%{ transform:translate3d(0,var(--real-phone-preview-step-three),0); }
  100%{ transform:translate3d(0,0,0); }
}

@media (prefers-reduced-motion:reduce){
  .hero-heading-accent{
    transition:none;
  }

  .real-phone-screen img,
  .real-trust-demo[data-demo-state] .real-phone-screen img{
    animation:none;
    transform:none;
  }
}

/* Keep every rotating desktop headline inside the copy column. */
@media (min-width:1081px){
  .web-hero-v2-inner{
    grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    gap:clamp(2rem,3vw,3rem);
  }

  .web-hero-copy h1{
    width:100%;
    max-width:100%;
    font-size:clamp(2.35rem,3.3vw,3.25rem);
  }

  .hero-heading-accent{
    max-width:100%;
    white-space:normal;
    overflow-wrap:break-word;
  }

  .hero-redesign-visual{
    width:100%;
    max-width:680px;
    justify-self:end;
    transform:none;
  }
}