/* Homepage — Phase 2
   Editorial studio layout. Orange stays an accent. */

html:has(.home-hero){
  scroll-behavior:smooth;
}

html.home-motion:not(.home-motion-ready) .home-hero .eyebrow,
html.home-motion:not(.home-motion-ready) .home-hero__sub,
html.home-motion:not(.home-motion-ready) .home-hero__lead,
html.home-motion:not(.home-motion-ready) .home-hero .btns,
html.home-motion:not(.home-motion-ready) .home-hero h1{
  opacity:0;
}

html.home-motion:not(.home-motion-ready) .home-hero .line > span{
  transform:translateY(110%);
}

html.home-motion-ready .home-hero .line > span{
  transform:none !important;
}

html.home-motion:not(.home-motion-ready) .home-hero .device{
  --dev-op:0;
  --rise:48px;
}

.need-row,
.work-line,
.price-line--pack,
.faq-card{
  transition:transform var(--motion-mid, .32s) var(--ease);
}

@media(hover:hover) and (pointer:fine){
  .need-row:hover,
  .work-line:hover,
  .price-line--pack:hover{
    transform:translateX(.35rem);
  }
}

.home-hero,
.home-need,
.home-work,
.home-include,
.home-why,
.home-process,
.home-price,
.home-faq,
.home-close{
  padding:clamp(3.25rem, 7.5vw, 6.5rem) 0;
}

.home-section-head{
  max-width:40rem;
  margin-bottom:3.25rem;
}

.home-section-head h2,
.home-close__title{
  margin:.45rem 0 0;
}

.home-section-head--split{
  display:grid;
  grid-template-columns:minmax(0, 1.2fr) minmax(0, .8fr);
  gap:2rem 4rem;
  align-items:end;
  max-width:none;
}

.home-section-head--split .muted{
  margin:0;
  max-width:32ch;
}

.muted{ color:var(--muted); }

.text-link{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  margin-top:1.75rem;
  color:var(--paper);
  text-decoration:none;
  font-size:.95rem;
  font-weight:600;
}

.text-link:hover{ color:var(--accent-2); }

.btns{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
}

/* Hero */

.home-hero{
  display:grid;
  grid-template-columns:minmax(0, .92fr) minmax(320px, 1.15fr);
  gap:clamp(1.5rem, 3vw, 2.75rem) clamp(1.25rem, 3vw, 2.5rem);
  align-items:center;
  width:min(var(--container), 100%);
  margin:0 auto;
  padding-left:max(var(--page-gutter), env(safe-area-inset-left, 0px));
  padding-right:max(var(--page-gutter), env(safe-area-inset-right, 0px));
  padding-top:clamp(.55rem, 1.5vh, 1.25rem);
  padding-bottom:clamp(1.4rem, 3.4vh, 2.6rem);
  min-height:min(calc(100dvh - var(--header-offset, var(--header-h))), 46rem);
  overflow-x:clip;
}

.home-hero__copy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  max-width:38rem;
}

.home-hero__copy > *{
  margin-top:0;
}

.home-hero__copy .eyebrow{
  margin:0 0 clamp(.85rem, 1.6vw, 1.15rem);
}

.home-hero__display,
.home-hero__sub{
  margin:0 0 clamp(.85rem, 1.5vw, 1.15rem);
  max-width:16ch;
  font-family:var(--display);
  font-size:clamp(2.2rem, 5.2vw, 4.55rem);
  font-weight:400;
  line-height:.96;
  letter-spacing:-.045em;
  color:var(--paper);
}

.home-hero__display em{
  font-style:italic;
  color:var(--accent);
}

.home-hero h1{
  margin:0 0 clamp(.85rem, 1.4vw, 1.1rem);
  font-size:clamp(1.2rem, 1.8vw, 1.55rem);
  line-height:1.2;
  letter-spacing:-.03em;
  max-width:none;
  color:var(--muted-2);
}

.home-hero h1 .line{
  display:block;
  overflow:hidden;
}

.home-hero h1 .line > span{ display:block; }

@media(min-width:641px){
  .home-hero h1 .line > span{ white-space:nowrap; }
}

.home-hero__lead{
  max-width:34rem;
  margin:0 0 clamp(1.4rem, 2vw, 1.85rem);
  color:var(--muted);
  font-size:.98rem;
  line-height:1.65;
}

.home-hero .btns{
  margin:0;
}


.hero-showcase,
.home-hero__stage{
  --hero-laptop-w:78%;
  --hero-laptop-left:9%;
  --hero-laptop-top:11%;
  --hero-tablet-w:20%;
  --hero-tablet-right:.5%;
  --hero-tablet-top:0%;
  --hero-phone-w:18.2%;
  --hero-phone-left:.2%;
  --hero-phone-bottom:0%;
  position:relative;
  display:block;
  width:min(100%, 54rem);
  aspect-ratio:760 / 580;
  justify-self:end;
  margin-right:0;
  color:inherit;
  text-decoration:none;
  perspective:1800px;
  transform-style:preserve-3d;
}

.hero-showcase::before{
  content:"";
  position:absolute;
  inset:16% 6% 10% 10%;
  z-index:0;
  border-radius:50%;
  background:radial-gradient(ellipse at 55% 48%, var(--glow), transparent 68%);
  filter:blur(28px);
  pointer-events:none;
}

.hero-showcase__cluster{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  animation:hero-showcase-float 8s ease-in-out infinite;
}

.hero-showcase__hint{
  position:absolute;
  left:50%;
  bottom:.15rem;
  z-index:4;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.35rem .7rem;
  border-radius:999px;
  background:rgba(8,6,4,.55);
  color:var(--paper);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.01em;
  opacity:0;
  transform:translate(-50%, 8px);
  transition:opacity .28s var(--ease, ease), transform .28s var(--ease, ease);
  pointer-events:none;
}

.hero-showcase:hover,
.hero-showcase:focus-visible{
  transform:translateY(-4px);
}

.hero-showcase:hover .hero-showcase__cluster,
.hero-showcase:focus-visible .hero-showcase__cluster{
  animation-play-state:paused;
}

.hero-showcase:hover .hero-showcase__hint,
.hero-showcase:focus-visible .hero-showcase__hint{
  opacity:1;
  transform:translate(-50%, 0);
}

.hero-showcase:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:8px;
  border-radius:18px;
}

@keyframes hero-showcase-float{
  0%,100%{ transform:translate3d(0, 0, 0); }
  50%{ transform:translate3d(0, -7px, 0); }
}

.home-hero .device{
  position:absolute;
  overflow:visible;
  background:transparent;
  box-shadow:none;
  pointer-events:none;
  opacity:var(--dev-op, 1);
  transform-origin:center center;
}

.home-hero .device__screen{
  position:relative;
  overflow:hidden;
  min-height:0;
  container-type:size;
  background:#1a120c;
}

.device--laptop{
  left:var(--hero-laptop-left);
  top:var(--hero-laptop-top);
  z-index:2;
  width:var(--hero-laptop-w);
  aspect-ratio:16 / 10.4;
  height:auto;
  border-radius:14px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:var(--device-screen);
  box-shadow:var(--shadow-device);
  transform:
    translate3d(var(--px, 0px), calc(var(--py, 0px) + var(--rise, 0px)), 36px)
    rotateX(5deg) rotateY(-6deg) rotate(-.4deg);
}

.device--laptop .device-chrome{
  width:100%;
  border-radius:14px 14px 0 0;
}

.device--laptop .device__screen{
  flex:1;
  border-radius:0 0 14px 14px;
}

.tablet-shell,
.phone-shell{
  position:relative;
  width:100%;
  height:100%;
  box-sizing:border-box;
}

.device--tablet{
  right:var(--hero-tablet-right);
  top:var(--hero-tablet-top);
  z-index:1;
  width:var(--hero-tablet-w);
  aspect-ratio:3 / 4;
  height:auto;
  border-radius:16px;
  transform:
    translate3d(var(--px, 0px), calc(var(--py, 0px) + var(--rise, 0px)), -20px)
    rotateX(6deg) rotateY(12deg) rotate(5deg);
}

.tablet-shell{
  padding:4px;
  border-radius:16px;
  background:
    linear-gradient(160deg, #d8d5d0 0%, #8d8a86 38%, #3f3d3b 72%, #1b1a19 100%);
  box-shadow:
    var(--shadow-device),
    inset 0 0 0 1px rgba(255,255,255,.22);
}

.tablet-screen{
  width:100%;
  height:100%;
  border-radius:12px;
}

.tablet-camera{
  position:absolute;
  top:5px;
  left:50%;
  z-index:2;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#1a1918;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
  transform:translateX(-50%);
}

.device--phone{
  left:var(--hero-phone-left);
  bottom:var(--hero-phone-bottom);
  z-index:3;
  width:var(--hero-phone-w);
  aspect-ratio:9 / 19.5;
  height:auto;
  border-radius:24px;
  transform:
    translate3d(var(--px, 0px), calc(var(--py, 0px) + var(--rise, 0px)), 48px)
    rotateX(5deg) rotateY(-11deg) rotate(-6deg);
}

.phone-shell{
  padding:2px;
  border-radius:24px;
  background:
    linear-gradient(165deg, #3f4046 0%, #17171b 42%, #0b0b0d 100%);
  box-shadow:
    var(--shadow-device),
    0 18px 36px rgba(0,0,0,.28),
    inset 0 0 0 1px rgba(255,255,255,.1);
}

.phone-screen{
  position:relative;
  width:100%;
  height:100%;
  border-radius:22px;
  overflow:hidden;
  contain:strict;
}

.phone-island{
  position:absolute;
  top:6px;
  left:50%;
  z-index:2;
  width:26%;
  max-width:42px;
  height:9px;
  border-radius:999px;
  background:#050506;
  transform:translateX(-50%);
}

.hr-preview{
  --hr-bg:#1a120c;
  --hr-ink:#f7efe6;
  --hr-muted:#cbb7a4;
  --hr-accent:#d0894a;
  height:100%;
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(ellipse at 18% 0%, rgba(196,122,58,.26), transparent 46%),
    linear-gradient(180deg,#20160f,var(--hr-bg));
  color:var(--hr-ink);
  font-family:var(--sans);
}

.hr-preview__nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.4em;
  padding:.55em .7em;
  border-bottom:1px solid rgba(243,230,214,.12);
  background:rgba(26,18,12,.88);
}

.hr-preview__brand{
  display:inline-flex;
  align-items:center;
  gap:.35em;
  min-width:0;
  font-family:var(--display);
  font-weight:600;
  letter-spacing:-.03em;
  line-height:1;
  white-space:nowrap;
}

.hr-preview__brand img{
  width:1.15em;
  height:1.15em;
  border-radius:.28em;
  flex-shrink:0;
}

.hr-preview__links{
  color:var(--hr-muted);
  font-size:.62em;
  font-weight:600;
  letter-spacing:.01em;
  white-space:nowrap;
}

.hr-preview__book,
.hr-preview__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  padding:.38em .7em;
  border-radius:999px;
  background:linear-gradient(135deg,#d8924e,var(--hr-accent));
  color:#1a120c;
  font-size:.58em;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
}

.hr-preview__hero{
  flex:1;
  min-height:0;
  display:grid;
  align-items:center;
}

.hr-preview__kicker{
  display:block;
  margin-bottom:.45em;
  color:var(--hr-accent);
  font-size:.52em;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.hr-preview__title{
  margin:0 0 .4em;
  font-family:var(--display);
  font-weight:400;
  line-height:.98;
  letter-spacing:-.04em;
}

.hr-preview__lede{
  margin:0 0 .7em;
  color:var(--hr-muted);
  line-height:1.4;
}

.hr-preview__photo{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:.7em;
}

.hr-preview--desk{
  container-type:size;
}

.hr-preview--desk .hr-preview__nav{
  padding:.7em .9em;
  font-size:clamp(13px, 3.1cqw, 18px);
}

.hr-preview--desk .hr-preview__hero{
  grid-template-columns:1.05fr .95fr;
  gap:1.1em;
  padding:.85em 1em 1em;
}

.hr-preview--desk .hr-preview__title{
  font-size:clamp(22px, 6.4cqw, 38px);
}

.hr-preview--desk .hr-preview__lede{
  max-width:28ch;
  font-size:clamp(10px, 2.15cqw, 14px);
}

.hr-preview--desk .hr-preview__cta{
  font-size:clamp(10px, 2.1cqw, 13px);
}

.hr-preview--tablet{
  container-type:size;
}

.hr-preview--tablet .hr-preview__nav{
  font-size:clamp(9px, 7.2cqw, 13px);
}

.hr-preview--tablet .hr-preview__hero{
  align-content:start;
  padding:.7em .75em .8em;
}

.hr-preview--tablet .hr-preview__title{
  font-size:clamp(13px, 11cqw, 20px);
}

.hr-preview--tablet .hr-preview__cta{
  margin-bottom:.7em;
  font-size:clamp(8px, 6.2cqw, 11px);
}

.hr-preview--tablet .hr-preview__photo{
  min-height:0;
  height:42%;
}

.hr-preview--phone{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  width:100%;
  height:100%;
  -webkit-font-smoothing:antialiased;
}

.hr-preview--phone .hr-preview__nav{
  padding:13.3cqw 5.1cqw 3.6cqw;
  font-size:4.1cqw;
}

.hr-preview--phone .hr-preview__brand img{
  width:5.6cqw;
  height:5.6cqw;
  border-radius:1.5cqw;
}

.hr-preview--phone .hr-preview__burger{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  width:5.4cqw;
  height:3.8cqw;
  flex-shrink:0;
  color:var(--hr-ink);
}

.hr-preview--phone .hr-preview__burger i{
  display:block;
  height:.45cqw;
  border-radius:999px;
  background:currentColor;
  font-style:normal;
}

.hr-preview--phone .hr-preview__hero{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  flex:1;
  min-height:0;
  gap:0;
  padding:4.6cqw 5.1cqw 5.6cqw;
}

.hr-preview--phone .hr-preview__kicker{
  margin-bottom:2.6cqw;
  font-size:2.8cqw;
  letter-spacing:.18em;
}

.hr-preview--phone .hr-preview__title{
  margin:0 0 2.6cqw;
  font-size:8.7cqw;
  line-height:1.02;
  letter-spacing:-.04em;
}

.hr-preview--phone .hr-preview__lede{
  max-width:32ch;
  margin:0 0 4.1cqw;
  font-size:3.6cqw;
  line-height:1.45;
}

.hr-preview--phone .hr-preview__actions{
  display:flex;
  flex-direction:column;
  gap:2.05cqw;
  width:100%;
  margin:0 0 4.1cqw;
}

.hr-preview--phone .hr-preview__cta,
.hr-preview--phone .hr-preview__ghost{
  width:100%;
  box-sizing:border-box;
  padding:3.3cqw 4.1cqw;
  border-radius:999px;
  font-size:3.6cqw;
  font-weight:700;
  line-height:1;
}

.hr-preview--phone .hr-preview__ghost{
  background:transparent;
  color:var(--hr-ink);
  border:1px solid rgba(243,230,214,.28);
}

.hr-preview--phone .hr-preview__photo{
  width:100%;
  height:0;
  min-height:22cqh;
  aspect-ratio:auto;
  object-fit:cover;
  object-position:center;
  border-radius:4.1cqw;
  flex:1 1 auto;
}

.hr-preview--phone .hr-preview__tiles{
  display:none;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:1.5cqw;
  margin-top:3.6cqw;
}

.hr-preview--phone .hr-preview__tiles span{
  min-width:0;
  padding:2.05cqw .5cqw;
  border:1px solid rgba(243,230,214,.12);
  border-radius:2.6cqw;
  color:var(--hr-muted);
  font-size:2.3cqw;
  font-weight:700;
  letter-spacing:.04em;
  line-height:1.2;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

@container (min-width: 168px) and (min-height: 360px){
  .hr-preview--phone .hr-preview__tiles{ display:grid; }
  .hr-preview--phone .hr-preview__photo{ flex:1 1 22cqh; max-height:28cqh; }
}

/* What do you need */

.home-need{ border-top:1px solid var(--line); }

.need-lead{
  display:grid;
  grid-template-columns:4rem minmax(0, 1fr);
  gap:1rem 2rem;
  padding-bottom:2.75rem;
  border-bottom:1px solid var(--line);
}

.need-lead__num,
.need-row > span{
  color:var(--muted);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.16em;
}

.need-lead h3{
  margin:0 0 .7rem;
  font-family:var(--display);
  font-size:clamp(2.8rem, 7vw, 6.4rem);
  font-weight:400;
  line-height:.9;
  letter-spacing:-.045em;
}

.need-lead p,
.need-row p{
  max-width:36rem;
  margin:0;
  color:var(--muted);
}

.need-price{
  margin:1.25rem 0 1.4rem !important;
  color:var(--paper) !important;
  font-size:1.05rem;
  font-weight:600;
}

.need-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem 3.5rem;
  margin-top:2rem;
  padding-top:1.85rem;
  border-top:1px solid var(--line);
}

.need-split__item h4{
  margin:0 0 .55rem;
  font-family:var(--display);
  font-size:clamp(1.85rem, 3vw, 2.45rem);
  font-weight:400;
  letter-spacing:-.03em;
  line-height:1;
}

.need-split__item p{
  max-width:28rem;
}

.need-split .need-price{
  margin:1rem 0 1.15rem !important;
  font-size:1.25rem !important;
  letter-spacing:-.02em;
}

.need-split .btns{ margin-top:.15rem; }

.need-list{ border-bottom:1px solid var(--line); }

.need-row{
  display:grid;
  grid-template-columns:3rem minmax(0, 1.4fr) auto minmax(10rem, .7fr);
  gap:1rem 1.5rem;
  align-items:start;
  padding:1.7rem 0;
  border-top:1px solid var(--line);
}

.need-row h3{
  margin:0 0 .35rem;
  font-family:var(--display);
  font-size:clamp(1.8rem, 2.6vw, 2.3rem);
  font-weight:400;
  letter-spacing:-.03em;
}

.need-row strong{
  padding-top:.35rem;
  font-size:.95rem;
  font-weight:600;
  color:var(--muted);
  white-space:nowrap;
}

.need-row__actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:.85rem 1.25rem;
  padding-top:.35rem;
}

.need-row__actions a{
  display:inline-flex;
  align-items:center;
  min-height:var(--tap, 44px);
  color:var(--paper);
  text-decoration:none;
  font-size:.9rem;
  font-weight:600;
}

.need-row__actions a:hover{ color:var(--accent-2); }

.home-need__note{
  margin:1.6rem 0 0;
}

.home-need__note .text-link{
  margin:0;
  display:inline;
}

/* Selected work */

.home-work .device-stage{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
}

.home-work .device-stage__glow{ display:none; }

.work-stage{
  display:grid;
  grid-template-columns:minmax(240px, .72fr) minmax(0, 1.28fr);
  gap:2.5rem 3rem;
  align-items:center;
}

.work-stage__meta h3{
  margin:.35rem 0 .6rem;
  font-family:var(--display);
  font-size:clamp(2.2rem, 4vw, 3.4rem);
  font-weight:400;
  letter-spacing:-.035em;
  line-height:1;
}

.work-stage__services{
  margin:.85rem 0 1.4rem;
  color:var(--muted);
  font-size:.92rem;
}

.work-stage__picks{
  display:grid;
  justify-items:start;
  gap:.15rem;
  margin:0 0 1.4rem;
}

.work-stage__picks button{
  appearance:none;
  border:0;
  border-bottom:1px solid transparent;
  background:transparent;
  color:var(--text-muted);
  min-height:var(--tap, 44px);
  padding:.35rem 0;
  border-radius:0;
  font:inherit;
  font-size:.92rem;
  font-weight:500;
  cursor:pointer;
  touch-action:manipulation;
  transition:color .2s var(--ease, ease), border-color .2s var(--ease, ease);
}

.work-stage__picks button:hover,
.work-stage__picks button.is-active{
  color:var(--text-primary);
}

.work-stage__picks button.is-active{
  border-bottom-color:var(--text-primary);
}

.work-stage__picks button:focus-visible{
  outline:none;
  box-shadow:var(--focus-ring);
  border-radius:4px;
}

.work-stage__actions{
  align-items:center;
}

.work-stage__hint{
  margin:.7rem 0 0;
  text-align:center;
  color:var(--text-muted);
  font-size:.82rem;
}

.home-work .device-frame{
  min-height:0;
}

.home-work .device-stage[data-device="laptop"] .demo-frame{
  height:clamp(240px, 42vw, 460px);
  min-height:0;
}

.home-work .device-frame{ width:100%; }

.home-work .apple-seg{
  margin:1.1rem auto 0;
  align-self:center;
}

.work-stage.is-switching .device-frame{
  opacity:.55;
}

.work-lines{
  margin-top:4.5rem;
  border-top:1px solid var(--line);
}

.work-line{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto auto;
  gap:1rem 1.5rem;
  align-items:center;
  padding:1.6rem 0;
  border-bottom:1px solid var(--line);
  color:inherit;
  text-decoration:none;
}

.work-line strong{
  font-family:var(--display);
  font-size:clamp(1.7rem, 2.8vw, 2.4rem);
  font-weight:400;
  letter-spacing:-.03em;
}

.work-line span:not(.badge){ color:var(--muted); }

.work-line em{
  font-style:normal;
  font-size:.88rem;
  font-weight:600;
  color:var(--text-primary);
}

.work-line:hover strong{ color:var(--accent); }

/* Why */

.why-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 4rem;
}

.why-list li{
  display:grid;
  gap:.35rem;
  padding:1.5rem 0;
  border-bottom:1px solid var(--line);
}

.why-list li:nth-child(-n+2){ border-top:1px solid var(--line); }

.why-list strong{
  font-family:var(--display);
  font-size:1.7rem;
  font-weight:400;
  letter-spacing:-.03em;
}

.why-list span{ color:var(--muted); }

/* Process */

.home-process{
  border-top:1px solid var(--line);
}

.home-process__grid{
  display:grid;
  grid-template-columns:minmax(220px, .7fr) minmax(0, 1.3fr);
  gap:3rem;
  align-items:start;
}

.home-process__sticky{
  position:sticky;
  top:calc(var(--header-h) + 1.5rem);
}

.home-process__sticky h2{ margin:.45rem 0 2rem; }

.process-nav-wrap{
  position:relative;
}

.process-nav__fill{
  position:absolute;
  left:0;
  top:0;
  width:1px;
  height:100%;
  background:var(--paper);
  transform:scaleY(0);
  transform-origin:top center;
  pointer-events:none;
}

.process-nav{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.15rem;
}

.process-nav button{
  appearance:none;
  display:block;
  width:100%;
  text-align:left;
  min-height:var(--tap, 44px);
  padding:.55rem 0;
  border:0;
  border-left:1px solid var(--line);
  padding-left:1rem;
  background:transparent;
  color:var(--muted);
  font:inherit;
  font-size:1rem;
  cursor:pointer;
  touch-action:manipulation;
}

.process-nav button.is-active{
  color:var(--paper);
  border-left-color:var(--accent);
}

.process-panel{
  min-height:46vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:2.5rem 0;
  border-bottom:1px solid var(--line);
  opacity:.38;
  transition:opacity .4s var(--ease);
}

.process-panel.is-active{ opacity:1; }

.process-panel h3{
  font-family:var(--display);
  font-size:clamp(2.4rem, 5vw, 4rem);
  font-weight:400;
  letter-spacing:-.04em;
  line-height:1;
}

.process-panel p{
  max-width:28rem;
  margin:1rem 0 0;
  color:var(--muted);
  font-size:1.1rem;
}

/* Pricing */

.price-lines{ border-top:1px solid var(--line); }

.price-line{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1.5rem;
  padding:1.7rem 0;
  border-bottom:1px solid var(--line);
  color:inherit;
  text-decoration:none;
}

.price-line span{
  font-family:var(--display);
  font-size:clamp(1.8rem, 3vw, 2.6rem);
  letter-spacing:-.03em;
}

.price-line strong{
  font-size:1.05rem;
  font-weight:600;
  color:var(--muted);
}

.price-line:hover span{ color:var(--accent); }

.price-line--pack{
  display:grid;
  grid-template-columns:minmax(0, 1.4fr) auto auto;
  align-items:center;
  text-decoration:none;
}

.price-line--pack p{
  margin:.35rem 0 0;
  color:var(--muted);
  font-size:.95rem;
}

.price-line--pack:hover span{ color:inherit; }

.price-line--pack .btn,
.price-line--pack .btn-ghost{
  justify-self:end;
}

.home-price__note{
  margin:1.5rem 0 0;
  max-width:40rem;
}

/* Homepage FAQ — typographic, not glow cards */

.home-faq .faq-card,
.home-faq .faq-card.open,
.home-faq .faq-card:hover{
  background:transparent;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  box-shadow:none;
  padding:0;
}

.home-faq .faq-card:first-child{ border-top:1px solid var(--line); }

.home-faq .faq-card::before,
.home-faq .faq-card::after{ display:none; }

.home-faq .faq-trigger{
  width:100%;
  padding:1.25rem 0;
  gap:1rem;
}

.home-faq .faq-trigger h3{
  margin:0;
  font-family:var(--sans);
  font-size:1.05rem;
  font-weight:600;
  letter-spacing:-.02em;
  text-align:left;
}

.home-faq .faq-panel-inner{ padding:0 0 1.25rem; }

/* Close */

.home-close{
  padding-top:clamp(4.5rem, 9vw, 8rem);
  padding-bottom:clamp(4.5rem, 10vw, 9rem);
  border-top:1px solid var(--line);
}

.home-close__title{
  margin:.4rem 0 .6rem;
  font-size:clamp(2.5rem, 8vw, 6.8rem);
  line-height:.9;
  letter-spacing:-.045em;
  text-wrap:pretty;
}

.home-close__line{
  margin:0 0 2.2rem;
  font-family:var(--display);
  font-style:italic;
  font-size:clamp(1.5rem, 3vw, 2.2rem);
  color:var(--muted);
}

/* Motion helpers */

.home-hero .reveal-delay-1{ transition-delay:70ms; }
.home-hero .reveal-delay-2{ transition-delay:130ms; }
.home-hero .reveal-delay-3{ transition-delay:190ms; }
.home-hero .reveal-delay-4{ transition-delay:250ms; }
.home-hero .reveal-delay-5{ transition-delay:310ms; }

@media(max-width:1279px){
  .home-hero__stage{
    --hero-laptop-w:73%;
    --hero-laptop-left:12.5%;
    --hero-tablet-w:18.5%;
    --hero-tablet-right:1%;
    --hero-tablet-top:1.5%;
    --hero-phone-w:17.2%;
    --hero-phone-left:1%;
    --hero-phone-bottom:1%;
  }
}

@media(max-width:959px){
  .home-hero{
    grid-template-columns:1fr;
    min-height:0;
    padding-top:clamp(.85rem, 1.8vh, 1.5rem);
    padding-bottom:2.5rem;
  }

  .home-hero h1{ max-width:none; }

  .home-hero__stage{
    width:min(100%, 42rem);
    justify-self:center;
    margin-right:0;
    --hero-laptop-w:74%;
    --hero-laptop-left:13%;
    --hero-tablet-w:18%;
    --hero-tablet-right:1.2%;
    --hero-tablet-top:2%;
    --hero-phone-w:16.8%;
    --hero-phone-left:1.5%;
    --hero-phone-bottom:1.2%;
  }
}

@media(max-width:1023px){
  .home-hero__stage{
    --hero-laptop-w:78%;
    --hero-laptop-left:11%;
    --hero-phone-w:17.6%;
    --hero-phone-left:1.4%;
    --hero-phone-bottom:1.6%;
  }

  .device--tablet{
    display:none;
  }
}

@media(max-width:959px){
  .home-section-head--split,
  .need-lead,
  .need-row,
  .work-stage,
  .home-process__grid,
  .price-line--pack{
    grid-template-columns:1fr;
  }

  .need-row__actions{ justify-content:flex-start; }

  .home-process__sticky{ position:static; }
  .process-nav__fill{ display:none; }

  .process-nav{
    display:flex;
    gap:.4rem;
    overflow-x:auto;
    padding-bottom:.6rem;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  .process-nav::-webkit-scrollbar{ display:none; }

  .process-nav li{ flex:0 0 auto; }

  .process-nav button{
    border-left:0;
    min-height:var(--tap, 44px);
    padding:.45rem .75rem;
    border:1px solid var(--line);
    border-radius:999px;
  }

  .process-nav button.is-active{
    border-color:var(--line-strong);
    background:var(--accent-soft);
  }

  .process-panel{
    min-height:0;
    opacity:1;
    padding:1.6rem 0;
  }
}

@media(max-width:800px){
  .home-hero{
    padding-top:clamp(.85rem, 1.7vh, 1.35rem);
    padding-bottom:2.25rem;
  }

  .home-hero__stage{
    width:min(100%, 36rem);
    --hero-laptop-w:78%;
    --hero-laptop-left:11%;
    --hero-phone-w:18%;
    --hero-phone-left:1.2%;
    --hero-phone-bottom:1.5%;
  }

  .device--tablet{
    display:none;
  }

  .work-line{
    grid-template-columns:auto 1fr;
  }

  .work-line span:not(.badge),
  .work-line em{ grid-column:2; }

  .home-work .device-stage[data-device="laptop"] .demo-frame,
  .home-work .device-stage[data-device="tablet"] .demo-frame,
  .home-work .device-stage[data-device="phone"] .demo-frame{
    height:clamp(220px, 58vw, 380px);
    min-height:0;
  }
}

@media(max-width:699px){
  .need-split,
  .why-list{
    grid-template-columns:1fr;
  }

  .why-list li:nth-child(-n+2){ border-top:0; }
  .why-list li:first-child{ border-top:1px solid var(--line); }
}

@media(max-width:640px){
  .home-hero{
    padding-top:.85rem;
    overflow-x:clip;
  }

  .home-hero__display,
  .home-hero__sub{
    max-width:12ch;
    font-size:clamp(2.1rem, 10.5vw, 3.2rem);
  }

  .home-hero h1{
    font-size:clamp(1.05rem, 3.8vw, 1.15rem);
  }

  .home-hero__stage{
    width:100%;
    aspect-ratio:16 / 10.6;
    --hero-laptop-w:100%;
    --hero-laptop-left:0%;
    --hero-laptop-top:0%;
  }

  .hero-showcase__cluster{
    animation:none;
  }

  .device--tablet,
  .device--phone{
    display:none;
  }

  .device--laptop{
    transform:none;
  }

  .hero-showcase__hint{
    opacity:.92;
    transform:translate(-50%, 0);
  }

  .need-lead h3{
    font-size:clamp(2.4rem, 12vw, 4.2rem);
  }

  .price-line--pack .btn,
  .price-line--pack .btn-ghost{
    justify-self:start;
  }

  .home-close{ padding-bottom:6rem; }
}

@media(max-width:430px){
  .home-hero__stage{
    aspect-ratio:16 / 10.8;
  }
}

@media(max-width:390px){
  .home-hero{
    padding-top:.75rem;
  }

  .home-hero__stage{
    aspect-ratio:16 / 10.8;
  }
}

@media(max-width:375px){
  .home-hero__stage{
    aspect-ratio:16 / 10.8;
  }
}

@media(prefers-reduced-motion:reduce){
  .hero-showcase__cluster,
  .hero-showcase:hover,
  .hero-showcase:focus-visible{
    animation:none;
    transform:none;
  }

  html:has(.home-hero){ scroll-behavior:auto; }

  html.home-motion:not(.home-motion-ready) .home-hero .eyebrow,
  html.home-motion:not(.home-motion-ready) .home-hero__sub,
  html.home-motion:not(.home-motion-ready) .home-hero__lead,
  html.home-motion:not(.home-motion-ready) .home-hero .btns,
  html.home-motion:not(.home-motion-ready) .home-hero h1{
    opacity:1;
  }

  html.home-motion:not(.home-motion-ready) .home-hero .line > span{
    transform:none;
  }

  html.home-motion:not(.home-motion-ready) .home-hero .device{
    --dev-op:1;
    --rise:0px;
  }

  .home-hero .device,
  .process-panel,
  .work-stage.is-switching .device-frame,
  .need-row,
  .work-line,
  .price-line--pack{
    transform:none !important;
    transition:none !important;
    opacity:1 !important;
  }
}