/* Service sales pages — Phase 3
   Same dark / cream / orange system as the homepage.
   Each page tints a few surfaces; nothing glows. */

html:has(.svc){
  scroll-behavior:smooth;
  overflow-x:clip;
}

.svc{
  --svc-mark:var(--paper);
  overflow-x:clip;
}

.svc[data-svc="websites"]{ --svc-mark:#fff3d6; }
.svc[data-svc="store"]{ --svc-mark:#dceee6; }
.svc[data-svc="webapp"]{ --svc-mark:#e4e8f4; }
.svc[data-svc="mobile"]{ --svc-mark:#f0e6dc; }
.svc[data-svc="brand"]{ --svc-mark:#ffe4c4; }

.svc-wrap{
  width:min(var(--container), 100%);
  margin-inline:auto;
  padding-left:max(var(--page-gutter, 1.25rem), env(safe-area-inset-left, 0px));
  padding-right:max(var(--page-gutter, 1.25rem), env(safe-area-inset-right, 0px));
}

.svc-block{ padding:clamp(3.5rem, 8vw, 7rem) 0; }

.svc-block + .svc-block{ border-top:1px solid var(--line); }

.svc-kicker{
  margin:0 0 .7rem;
}

.svc-lead{
  max-width:36rem;
  margin:.85rem 0 0;
  color:var(--muted);
  font-size:1.05rem;
}

.svc-head{
  max-width:40rem;
  margin-bottom:3.2rem;
}

.svc-head h2{
  margin:.4rem 0 0;
}

.svc-head--split{
  display:grid;
  grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr);
  gap:1.5rem 4rem;
  align-items:end;
  max-width:none;
}

.svc-head--split .svc-lead{ margin:0; }

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

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

.svc-note{
  margin:1.5rem 0 0;
  max-width:40rem;
}

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

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

/* Hero */

.svc-hero{
  display:grid;
  grid-template-columns:minmax(0, .95fr) minmax(240px, 1.05fr);
  gap:clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2.5rem);
  align-items:center;
  padding:clamp(2.8rem, 7vw, 5.5rem) 0 clamp(2.5rem, 6vw, 5rem);
  min-height:min(calc(100dvh - var(--header-offset, var(--header-h))), 44rem);
}

.svc-hero h1{
  margin:.55rem 0 1.1rem;
  font-size:clamp(2.5rem, 6.2vw, 5.6rem);
  line-height:.94;
  letter-spacing:-.045em;
  max-width:12ch;
}

.svc-hero__sub{
  margin:0 0 .9rem;
  max-width:24rem;
  font-family:var(--display);
  font-size:clamp(1.3rem, 2vw, 1.65rem);
  line-height:1.25;
  letter-spacing:-.02em;
}

.svc-hero__lead{
  max-width:32rem;
  margin:0 0 1.8rem;
  color:var(--muted);
}

.svc-hero__price{
  margin:1.15rem 0 0;
  color:var(--paper);
  font-size:.95rem;
  font-weight:600;
}

.svc-hero__stage{
  position:relative;
  min-height:0;
}

.svc-hero .device-stage,
.svc-work .device-stage{
  min-height:0;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
}

.svc-hero .device-stage__glow,
.svc-work .device-stage__glow{ display:none; }

.svc-hero .device-frame,
.svc-work .device-frame{
  width:100%;
  min-height:0;
  box-shadow:0 28px 70px rgba(0,0,0,.48), 0 0 0 1px rgba(255,250,242,.06);
}

.svc-hero .demo-frame,
.svc-work .demo-frame{
  height:clamp(240px, 48vw, 460px);
  min-height:0;
}

.svc-hero .apple-seg{ margin:1rem auto 0; }

.svc[data-svc="mobile"] .svc-hero{
  grid-template-columns:minmax(0, 1.05fr) minmax(220px, .7fr);
}

.svc[data-svc="mobile"] .svc-hero__phones{
  position:relative;
  height:520px;
}

.svc-phone{
  position:absolute;
  width:min(168px, 42vw);
  aspect-ratio:168 / 344;
  height:auto;
  padding:10px;
  border-radius:32px;
  background:#141210;
  box-shadow:0 24px 50px rgba(0,0,0,.42), 0 0 0 1px rgba(255,250,242,.06);
  overflow:hidden;
}

.svc-phone--front{
  left:18%;
  top:8%;
  z-index:2;
  transform:rotate(-6deg);
}

.svc-phone--back{
  right:8%;
  top:18%;
  z-index:1;
  transform:rotate(8deg);
  opacity:.78;
}

.svc-phone iframe,
.svc-phone .svc-screen{
  display:block;
  width:100%;
  height:100%;
  border:0;
  border-radius:22px;
  background:#fffaf2;
  color:#17120c;
  overflow:hidden;
}

.svc-phone .svc-app__panel{ pointer-events:none; }

.svc[data-svc="brand"] .svc-hero{
  grid-template-columns:1fr;
  min-height:0;
  padding-bottom:3.5rem;
}

.svc[data-svc="brand"] .svc-hero h1{
  max-width:14ch;
  font-size:clamp(3.4rem, 9vw, 7.2rem);
}

/* Offers — landing vs website */

.svc-offers{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.svc-offer{
  padding:2.4rem 0 2.6rem;
}

.svc-offer + .svc-offer{
  padding-left:3.2rem;
  margin-left:3.2rem;
  border-left:1px solid var(--line);
}

.svc-offer h3{
  margin:.2rem 0 .7rem;
  font-family:var(--display);
  font-size:clamp(2.2rem, 4vw, 3.3rem);
  font-weight:400;
  letter-spacing:-.035em;
  line-height:1;
}

.svc-offer p{ margin:0; max-width:30rem; color:var(--muted); }

.svc-offer__price{
  margin:1.15rem 0 1.3rem !important;
  color:var(--paper) !important;
  font-weight:600;
}

.svc-offer.is-target{
  scroll-margin-top:calc(var(--header-h) + 1.2rem);
}

/* Who / include */

.svc-who{
  display:grid;
  grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr);
  gap:2.5rem 4rem;
  align-items:start;
}

.svc-who h2{ margin:.4rem 0 0; }

.svc-points{
  list-style:none;
  margin:0;
  padding:0;
}

.svc-points li{
  padding:1.15rem 0;
  border-bottom:1px solid var(--line);
}

.svc-points li:first-child{ border-top:1px solid var(--line); }

.svc-points strong{
  display:block;
  font-family:var(--display);
  font-size:1.55rem;
  font-weight:400;
  letter-spacing:-.03em;
}

.svc-points span{
  display:block;
  margin-top:.3rem;
  color:var(--muted);
}

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

.svc-include li{
  display:grid;
  gap:.3rem;
  padding:1.4rem 0;
  border-bottom:1px solid var(--line);
}

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

.svc-include strong{
  font-family:var(--display);
  font-size:1.55rem;
  font-weight:400;
  letter-spacing:-.03em;
}

.svc-include span{ color:var(--muted); }

/* Feature / capability switcher */

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

.svc-feat--follow{ margin-top:3.5rem; }

.svc-feat__nav{
  display:grid;
  gap:.15rem;
}

.svc-feat__btn{
  appearance:none;
  width:100%;
  text-align:left;
  min-height:var(--tap, 44px);
  padding:.85rem 0;
  border:0;
  border-bottom:1px solid var(--line);
  background:transparent;
  color:var(--muted);
  font:inherit;
  cursor:pointer;
  touch-action:manipulation;
}

.svc-feat__btn strong{
  display:block;
  font-family:var(--display);
  font-size:1.65rem;
  font-weight:400;
  letter-spacing:-.03em;
}

.svc-feat__btn span{
  display:block;
  margin-top:.25rem;
  font-size:.92rem;
}

.svc-feat__btn:hover,
.svc-feat__btn[aria-selected="true"]{ color:var(--paper); }

.svc-feat__btn[aria-selected="true"] strong{
  box-shadow:inset 0 -1px 0 var(--paper);
}

.svc-feat__stage{
  min-height:420px;
  padding:1.4rem;
  border:1px solid var(--line);
  border-radius:22px;
  background:linear-gradient(180deg, var(--surface-2), transparent 50%), var(--surface);
}

.svc-feat__panel[hidden]{ display:none; }

.svc-feat__panel h3{
  margin:0 0 .45rem;
  font-family:var(--display);
  font-size:2rem;
  font-weight:400;
  letter-spacing:-.03em;
}

/* Interactive mocks */

.svc-mock{
  margin-top:1.15rem;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:16px;
  background:#11100e;
  color:var(--paper);
}

.svc-mock__bar{
  display:flex;
  align-items:center;
  gap:.45rem;
  padding:.65rem .85rem;
  border-bottom:1px solid var(--line);
  color:var(--muted);
  font-size:.78rem;
}

.svc-mock__bar i{
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(255,250,242,.22);
}

.svc-mock__body{ padding:1rem 1.05rem 1.15rem; }

.svc-mock__row,
.svc-path__item,
.svc-dash__cell{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  padding:.75rem 0;
  border-bottom:1px solid var(--line);
  font-size:.92rem;
}

.svc-mock__row:last-child,
.svc-path__item:last-child{ border-bottom:0; }

.svc-mock__row em,
.svc-path__item em{
  font-style:normal;
  color:var(--muted);
}

.svc-pill{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:.15rem .55rem;
  border-radius:999px;
  background:rgba(255,122,0,.16);
  color:var(--accent-2);
  font-size:.72rem;
  font-weight:600;
}

.svc-dash{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.75rem;
  margin-top:.4rem;
}

.svc-dash__cell{
  display:block;
  padding:1rem;
  border:1px solid var(--line);
  border-radius:14px;
  border-bottom:1px solid var(--line);
}

.svc-dash__cell strong{
  display:block;
  font-family:var(--display);
  font-size:1.8rem;
  font-weight:400;
}

.svc-dash__cell span{ color:var(--muted); font-size:.85rem; }

/* Store path */

.svc-path{
  display:grid;
  grid-template-columns:minmax(180px, .55fr) minmax(0, 1.45fr);
  gap:2rem 3rem;
  align-items:start;
}

.svc-path__steps{
  display:grid;
}

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

.svc-path__step[aria-selected="true"]{
  color:var(--paper);
  border-left-color:var(--accent);
}

.svc-path__stage{
  min-height:360px;
  padding:1.5rem 1.6rem;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--surface);
}

.svc-path__panel[hidden]{ display:none; }

.svc-path__panel h3{
  margin:0 0 .4rem;
  font-family:var(--display);
  font-size:2.1rem;
  font-weight:400;
}

.svc-path__pay{
  display:grid;
  gap:.65rem;
  margin-top:1rem;
}

.svc-path__pay span{
  display:block;
  padding:.85rem 1rem;
  border:1px solid var(--line);
  border-radius:12px;
  color:var(--muted);
}

/* Branding specimen */

.svc-spec{
  display:grid;
  grid-template-columns:minmax(0, .7fr) minmax(0, 1.3fr);
  gap:2rem 3rem;
}

.svc-swatches{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
}

.svc-spec__label{ margin:0 0 1rem; }

.svc-swatch{
  width:44px;
  height:44px;
  border:1px solid rgba(255,250,242,.16);
  border-radius:50%;
  cursor:pointer;
}

.svc-swatch--ink{ background:#17120c; }
.svc-swatch--paper{ background:#fffaf2; }
.svc-swatch--accent{ background:#ff7a00; }
.svc-swatch--forest{ background:#1f6b4f; }
.svc-swatch--warm{ background:#2a2420; }

.svc-swatch[aria-pressed="true"]{
  box-shadow:0 0 0 2px var(--ink), 0 0 0 4px var(--paper);
}

.svc-canvas{
  min-height:340px;
  padding:2.4rem 2.2rem;
  border-radius:22px;
  background:var(--spec-bg, #17120c);
  color:var(--spec-ink, #fffaf2);
  transition:background .4s var(--ease), color .4s var(--ease);
}

.svc-canvas .eyebrow{ color:inherit; opacity:.62; }

.svc-canvas h3{
  margin:.35rem 0 .7rem;
  font-family:var(--display);
  font-size:clamp(2.6rem, 5vw, 4.2rem);
  font-weight:400;
  letter-spacing:-.04em;
  line-height:1;
}

.svc-canvas p{
  max-width:28rem;
  margin:0;
  opacity:.78;
}

.svc-type{
  display:flex;
  gap:1.5rem;
  margin-top:2rem;
  font-size:.85rem;
  opacity:.72;
}

/* Examples */

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

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

.svc-line strong{
  font-family:var(--display);
  font-size:clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight:400;
  letter-spacing:-.03em;
}

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

.svc-line em{
  font-style:normal;
  font-size:.88rem;
  font-weight:600;
}

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

.svc-work{
  display:grid;
  grid-template-columns:minmax(240px, .7fr) minmax(0, 1.3fr);
  gap:2.4rem 3rem;
  align-items:center;
}

.svc-work h3{
  margin:.35rem 0 .55rem;
  font-family:var(--display);
  font-size:clamp(2rem, 3.6vw, 3.1rem);
  font-weight:400;
  letter-spacing:-.035em;
}

.svc-work .apple-seg{ margin:1rem auto 0; }

.svc-picks{
  display:grid;
  justify-items:start;
  gap:.1rem;
  margin:1.1rem 0 1.3rem;
}

.svc-picks button{
  appearance:none;
  border:0;
  border-bottom:1px solid transparent;
  background:transparent;
  color:var(--muted);
  min-height:36px;
  padding:.2rem 0;
  font:inherit;
  font-size:.92rem;
  font-weight:500;
  cursor:pointer;
}

.svc-picks button:hover,
.svc-picks button.is-active{
  color:var(--paper);
}

.svc-picks button.is-active{ border-bottom-color:var(--paper); }

/* Process + price + faq + close */

.svc-steps{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:0 2rem;
}

.svc-steps article{
  padding:1.3rem 0;
  border-top:1px solid var(--line);
}

.svc-steps span{
  display:block;
  margin-bottom:.55rem;
  color:var(--muted);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.16em;
}

.svc-steps h3{
  margin:0 0 .45rem;
  font-family:var(--display);
  font-size:1.7rem;
  font-weight:400;
}

.svc-steps p{ margin:0; color:var(--muted); }

.svc-pricebox{
  display:grid;
  grid-template-columns:minmax(0, 1.2fr) minmax(0, .8fr);
  gap:2rem;
  align-items:end;
}

.svc-pricebox strong{
  display:block;
  margin:.4rem 0 1rem;
  font-family:var(--display);
  font-size:clamp(2.4rem, 5vw, 3.8rem);
  font-weight:400;
  letter-spacing:-.04em;
}

.svc-build{
  border-top:1px solid var(--line);
}

.svc-build__row{
  display:grid;
  grid-template-columns:4rem minmax(0, 1.1fr) minmax(0, 1.2fr) auto;
  gap:1rem 1.5rem;
  align-items:start;
  padding:1.55rem 0;
  border-bottom:1px solid var(--line);
}

.svc-build__row > span:first-child{
  color:var(--muted);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.16em;
  padding-top:.45rem;
}

.svc-build__row h3{
  margin:0 0 .35rem;
  font-family:var(--display);
  font-size:clamp(1.7rem, 2.6vw, 2.25rem);
  font-weight:400;
  letter-spacing:-.03em;
}

.svc-build__row p{ margin:0; color:var(--muted); }

.svc-build__row em{
  font-style:normal;
  font-size:.92rem;
  font-weight:600;
  padding-top:.4rem;
  color:var(--paper);
  white-space:nowrap;
}

.svc-choose{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2.5rem 4rem;
  margin-top:2.5rem;
  padding-top:2rem;
  border-top:1px solid var(--line);
}

.svc-choose h3{
  margin:0 0 .7rem;
  font-family:var(--display);
  font-size:clamp(1.8rem, 3vw, 2.4rem);
  font-weight:400;
}

.svc-choose ul{
  margin:0;
  padding:0;
  list-style:none;
}

.svc-choose li{
  padding:.55rem 0;
  border-bottom:1px solid var(--line);
  color:var(--muted);
}

.svc-browser{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:18px;
  background:#10100e;
  min-height:360px;
}

.svc-browser__bar{
  display:flex;
  align-items:center;
  gap:.55rem;
  padding:.7rem .9rem;
  border-bottom:1px solid var(--line);
  color:var(--muted);
  font-size:.78rem;
}

.svc-browser__dots{
  display:flex;
  gap:.35rem;
}

.svc-browser__dots i{
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(255,250,242,.22);
}

.svc-browser__url{
  flex:1;
  min-width:0;
  padding:.3rem .7rem;
  border-radius:8px;
  background:rgba(0,0,0,.35);
}

.svc-browser__body{ padding:1.15rem 1.2rem 1.3rem; }

.svc-browser h3{
  margin:.2rem 0 .5rem;
  font-family:var(--display);
  font-size:2rem;
  font-weight:400;
  letter-spacing:-.03em;
}

.svc-app{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr);
  gap:2rem 2.5rem;
  align-items:center;
}

.svc-app__phone{
  width:220px;
  height:460px;
  padding:12px 10px 14px;
  border-radius:36px;
  background:#141210;
  box-shadow:0 24px 50px rgba(0,0,0,.42), 0 0 0 1px rgba(255,250,242,.06);
  display:flex;
  flex-direction:column;
}

.svc-app__status{
  display:flex;
  justify-content:space-between;
  padding:.15rem .55rem .45rem;
  color:var(--paper);
  font-size:.68rem;
  font-weight:600;
}

.svc-app__screen{
  flex:1;
  overflow:hidden;
  border-radius:22px;
  background:#fffaf2;
  color:#17120c;
}

.svc-app__panel{ padding:1rem 1.05rem 1.1rem; }

.svc-app__panel[hidden]{ display:none; }

.svc-app__panel h3{
  margin:.15rem 0 .55rem;
  font-family:var(--display);
  font-size:1.7rem;
  font-weight:400;
  letter-spacing:-.03em;
  color:#17120c;
}

.svc-app__panel p{
  margin:0 0 .85rem;
  color:#5c5348;
  font-size:.88rem;
}

.svc-app__row{
  display:flex;
  justify-content:space-between;
  gap:.7rem;
  padding:.65rem 0;
  border-bottom:1px solid #e6ddd0;
  font-size:.88rem;
}

.svc-app__home{
  width:78px;
  height:4px;
  margin:.7rem auto 0;
  border-radius:99px;
  background:rgba(255,250,242,.28);
}

.svc-app__nav{
  display:grid;
  gap:.15rem;
}

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

.svc-app__nav button[aria-selected="true"],
.svc-app__nav button:hover{ color:var(--paper); }

.svc-diff{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  margin-top:2rem;
  border-top:1px solid var(--line);
}

.svc-diff article{
  padding:2rem 0 0;
}

.svc-diff article + article{
  padding-left:3rem;
  margin-left:3rem;
  border-left:1px solid var(--line);
}

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

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

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

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

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

.svc-faq .faq-panel-inner{ padding:0 0 1.2rem; }

.svc-close{
  padding:clamp(4.5rem, 9vw, 8rem) 0 clamp(4.5rem, 10vw, 9rem);
}

.svc-close h2{
  margin:.4rem 0 .65rem;
  font-size:clamp(3.2rem, 9vw, 7.4rem);
  line-height:.92;
  letter-spacing:-.045em;
}

.svc-close p{
  margin:0 0 2rem;
  font-family:var(--display);
  font-style:italic;
  font-size:clamp(1.4rem, 2.6vw, 2rem);
  color:var(--muted);
}

.svc-feat__btn:focus-visible,
.svc-path__step:focus-visible,
.svc-swatch:focus-visible,
.svc-picks button:focus-visible,
.svc-app__nav button:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

@media(hover:hover) and (pointer:fine){
  .svc-line,
  .svc-offer{
    transition:transform var(--motion-mid, .32s) var(--ease);
  }

  .svc-line:hover{ transform:translateX(.3rem); }
}

@media(max-width:1024px){
  .svc-hero{
    gap:2.2rem;
  }

  .svc-build__row{
    grid-template-columns:3rem minmax(0, 1fr) auto;
  }

  .svc-build__row p{ grid-column:2; }
}

@media(max-width:959px){
  .svc-hero,
  .svc[data-svc="mobile"] .svc-hero{
    grid-template-columns:1fr;
    min-height:0;
    padding-top:clamp(2.4rem, 5vw, 4rem);
  }

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

  .svc[data-svc="mobile"] .svc-hero__phones{
    height:380px;
    max-width:28rem;
  }
}

@media(max-width:959px){
  .svc-head--split,
  .svc-who,
  .svc-feat,
  .svc-path,
  .svc-spec,
  .svc-work,
  .svc-pricebox,
  .svc-build__row,
  .svc-app{
    grid-template-columns:1fr;
  }

  .svc-build__row em{ white-space:normal; }

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

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

@media(max-width:699px){
  .svc-offers,
  .svc-include,
  .svc-choose,
  .svc-steps,
  .svc-diff{
    grid-template-columns:1fr;
  }

  .svc-diff article + article{
    margin:1.5rem 0 0;
    padding:1.6rem 0 0;
    border-left:0;
    border-top:1px solid var(--line);
  }

  .svc-offer + .svc-offer{
    margin:0;
    padding:2.2rem 0 0;
    border-left:0;
    border-top:1px solid var(--line);
  }

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

  .svc-phone--back{ display:none; }

  .svc-phone--front{
    left:50%;
    top:0;
    transform:translateX(-50%);
  }

  .svc[data-svc="mobile"] .svc-hero__phones{ height:360px; }
}

@media(max-width:430px){
  .svc-app__phone{
    width:100%;
    max-width:220px;
  }

  .svc-phone{
    width:min(148px, 46vw);
  }
}

@media(max-width:640px){
  .svc-hero{ padding-top:3.2rem; }

  .svc-hero h1{
    font-size:clamp(2.35rem, 12vw, 3.8rem);
  }

  .svc-close{ padding:clamp(3.5rem, 8vw, 5.5rem) 0 clamp(4rem, 9vw, 6.5rem); }

  .svc-dash{ grid-template-columns:1fr; }

  .svc-hero .demo-frame,
  .svc-work .demo-frame{
    height:clamp(200px, 62vw, 320px);
    min-height:0;
  }
}

@media(prefers-reduced-motion:reduce){
  html:has(.svc){ scroll-behavior:auto; }

  .svc-line,
  .svc-offer,
  .svc-canvas,
  .svc-phone{
    transform:none !important;
    transition:none !important;
  }
}