/* =========================================================
   Solid Core Digital — Services page
   Loads after styles.css (global tokens, header, footer, buttons, .svc-card,
   .ticks, .action-btn, .pillars) and work.css (Let’s Talk + footer legal line).
   Desktop values are 1:1 with the Figma “Our services page” frame (1440px).
   Breakpoints follow the homepage: 1439 / 1279 / 1199 / 1100 / 1023 / 860 / 767 / 479
   ========================================================= */

/* ---------- Header: current page (blue, regular weight, hover underline only) ---------- */
.page-services .site-nav > a.is-current { color: var(--blue-600); font-weight: 500; }
.page-services .site-nav > a.is-current::after {
  left: 16px; right: 16px; width: auto; bottom: 6px; height: 2px; border-radius: 2px;
  background: var(--grad); transform: scaleX(0);
}
.page-services .site-nav > a.is-current:hover::after { transform: scaleX(1); }

/* ---------- Fixed-size stage scaled to its column (same helper as project.css) ---------- */
.fit { --s: 1; position: relative; width: 100%; }
.fit__stage { position: absolute; left: 0; top: 0; transform: scale(var(--s)); transform-origin: 0 0; }

/* Gradient words measured against the whole heading box (as Figma paints them):
   the heading carries the gradient, plain words paint solid on top, .gbox__g lets it show through. */
.gbox { background-image: var(--grad); -webkit-background-clip: text; background-clip: text; }
.gbox .gbox__g { -webkit-text-fill-color: transparent; color: transparent; }

/* =========================================================
   HERO
   ========================================================= */
.shero { position: relative; height: 739px; overflow: hidden; background: #030b16; color: #fff; }
.shero__inner { position: relative; z-index: 1; height: 100%; max-width: 1440px; margin-inline: auto; padding: 172.77px 0 0 108px; }
.shero__copy { position: relative; z-index: 2; width: 648px; display: flex; flex-direction: column; align-items: flex-start; }
.shero__copy > .eyebrow { margin-bottom: 20px; }
.shero__title {
  width: 100%; height: 178px; margin-bottom: 21px; display: flex; flex-direction: column; justify-content: center;
  font-family: var(--f-display); font-weight: 800; font-size: 60px; line-height: 62px; color: #fff;
}
.shero__lead { margin-bottom: 20px; font-weight: 500; font-size: 18px; line-height: 29.25px; color: var(--text-soft); }
.shero__btn { margin-bottom: 28.5px; }

/* glass proof bar — homepage .pillars with this page’s Figma geometry */
.shero__pillars {
  width: 729px; max-width: none; height: 112px; padding: 18.27px 0 18.27px 28.72px; align-items: center;
  background: linear-gradient(130.6deg, rgba(9, 24, 48, .58) 0%, rgba(5, 15, 33, .72) 50%, rgba(2, 8, 20, .85) 100%);
}
.shero__pillars .pillar:first-child { flex: 0 0 196.28px; padding: 10.235px 20.469px 10.235px 0; }
.shero__pillars .pillar:nth-child(2) { flex: 0 0 241.28px; margin-left: 6.72px; padding: 0 20.469px 0 21.109px; }
.shero__pillars .pillar:nth-child(3) { flex: 0 0 217.28px; margin-left: 3.06px; padding: 0 0 0 21.109px; }
.shero__pillars .pillar img { width: 28px; height: 28px; transition: transform .5s var(--ease-spring); }
.shero__pillars .pillar:hover img { transform: translateY(-2px) scale(1.08); }

/* Browser-window previews (stage = Figma group 687.19 × 379.15 at x 712.99, y 196) */
.shero__visual { position: absolute; z-index: 1; right: 39.82px; top: 386.575px; translate: 0 -50%; width: min(687.19px, calc(100% - 680px - 39.82px)); }
.shero__visual .fit { aspect-ratio: 687.19 / 379.15; }
.shero__stage { width: 687.19px; height: 379.15px; }
.bcard-wrap { position: absolute; animation: bcardFloat 8s ease-in-out infinite; }
@keyframes bcardFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.bcard-wrap--a { left: 187.558px; top: 0; width: 499.637px; height: 257.116px; animation-delay: -4s; }
.bcard-wrap--b { left: -1px; top: 96.273px; width: 549.23px; height: 282.877px; }
.bcard {
  position: absolute; left: 50%; top: 50%; display: flex; flex-direction: column; overflow: hidden;
  background: #01040c; border: 1.131px solid rgba(52, 110, 205, .7); border-radius: 12.443px;
  box-shadow: 0 24.885px 47.508px 0 rgba(0, 0, 1, .7), 0 0 21.492px 0 rgba(4, 76, 182, .25);
  transform: translate(-50%, -50%) rotate(var(--rot));
  transition: transform .7s var(--ease-out), box-shadow .5s, border-color .4s;
}
.bcard--a { --rot: -3deg; width: 488.169px; height: 231.888px; }
.bcard--b { --rot: 5deg; width: 530.546px; height: 237.541px; }
.bcard__bar { flex: none; height: 21.488px; display: flex; align-items: center; gap: 4.525px; padding: 0 11.312px; background: #020307; }
.bcard__bar i { width: 4.52px; height: 4.52px; border-radius: 2.262px; background: #4a5361; }
.bcard__bar i:first-child { background: #0971f9; }
.bcard__screen { position: relative; flex: 1 1 auto; overflow: hidden; background: #020617; }
.bcard__screen img { position: absolute; left: 0; top: 0; width: 100%; max-width: none; transition: transform 1.1s var(--ease-out); }
.bcard--a .bcard__screen img { height: auto; transform: translate(.22%, 0); }
.bcard--b .bcard__screen img { height: 962.12%; object-fit: fill; transform: translate(.01%, .02%); }
@media (hover: hover) {
  .bcard:hover { --rot: 0deg; border-color: rgba(59, 130, 246, .95); box-shadow: 0 30px 60px 0 rgba(0, 0, 1, .75), 0 0 34px 0 rgba(37, 99, 235, .5); }
  .bcard-wrap:hover { z-index: 2; }
  .bcard:hover .bcard__screen img { transform: translate(0, -62%); transition: transform 9s cubic-bezier(.45, .05, .35, 1); }
  .bcard--b:hover .bcard__screen img { transform: translate(0, -78%); }
}
.shero__fade { left: 0; top: auto; bottom: 0; }

/* =========================================================
   SHARED SECTION HEAD (— EYEBROW —, 48px title, lead)
   ========================================================= */
.s-eyebrow { gap: 8px; }
.s-title { letter-spacing: -1.55px; }
.s-title .grad-text { padding-bottom: 0; }

/* =========================================================
   WHAT WE DO (services)
   ========================================================= */
.sdo { position: relative; overflow: hidden; min-height: 946px; padding: 50px 0 88px; background: #f8fafc; }
.sdo__bg { position: absolute; inset: 0; pointer-events: none; }
.sdo__bg img { width: 100%; height: 100%; object-fit: cover; }
.sdo__inner { position: relative; max-width: calc(1184px + 48px); margin-inline: auto; padding-inline: 24px; }
.sdo .s-eyebrow { margin-bottom: 10.52px; }
.sdo .s-title { margin-bottom: 15.52px; }
.sdo .s-lead { margin-bottom: 45px; translate: .5px 0; }
.sdo__grid { margin-top: 0; }
.sdo-card { min-height: 552px; padding: 32px; }
.sdo-icon { width: 56px; height: 56px; border-radius: 99px; background: var(--blue-vivid); display: grid; place-items: center; transition: transform .5s var(--ease-spring); }
.sdo-icon--framed { border-radius: 16px; background: #eaf4fe; }
.sdo-icon--framed > span { width: 56px; height: 56px; border-radius: 99px; background: var(--blue-vivid); display: grid; place-items: center; }
.sdo-card:hover .sdo-icon { transform: translateY(-3px) rotate(-6deg); }
.sdo-card .ticks { translate: 0 1.5px; }
.sdo-card .action-btn { padding: 7px 6px 7px 24px; }
@media (min-width: 1280px) { .sdo-card .ticks li { white-space: nowrap; } }

/* =========================================================
   WHAT’S GENERALLY INCLUDED (navy)
   ========================================================= */
.sinc { background: var(--navy); border-top: 1px solid #fff; padding: 60px 24px 116px; color: #fff; }
.sinc__inner { max-width: 1180px; margin-inline: auto; }
.sinc .s-eyebrow { margin-bottom: 14.52px; }
.sinc .s-title { margin-bottom: 33.52px; }
.sinc__lead { margin-bottom: 35px; line-height: 24px; translate: 7px 0; }

.inc {
  height: 318px; padding: 22px; display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid #ccd9e8; border-radius: 10px;
}
.inc__col { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; min-width: 0; }
.inc__col:nth-child(1) { width: 375px; padding-right: 22px; border-right: 1px solid #ccd9e8; }
.inc__col:nth-child(2) { width: 400px; padding: 0 22px; border-right: 1px solid #ccd9e8; }
.inc__col:nth-child(3) { width: 350px; padding-left: 22px; }
.inc__icon { width: 48px; height: 48px; border-radius: 10px; background: var(--blue-vivid); display: grid; place-items: center; transition: transform .5s var(--ease-spring); }
.inc__col:hover .inc__icon { transform: translateY(-3px) rotate(-6deg); }
.inc h3 { font-weight: 700; font-size: 20px; line-height: 21px; letter-spacing: -.35px; color: var(--ink-2); }
.inc__list { display: flex; flex-direction: column; gap: 14px; }
.inc__list li {
  display: flex; align-items: center; gap: 9px; height: 16.5px; padding-bottom: 1.5px;
  font-family: var(--f-display); font-weight: 500; font-size: 16px; line-height: 16.5px; color: var(--slate-700); white-space: nowrap;
}
.inc__list li::before { content: ""; width: 11px; height: 11px; flex: none; background: url("../img/sv-check.svg") center / 11px 11px no-repeat; }

/* =========================================================
   PRICING
   ========================================================= */
.sprice { position: relative; overflow: hidden; min-height: 954px; padding: 36px 0 61px; background: #f8fafc; }
.sprice__bg { position: absolute; inset: 0; pointer-events: none; }
.sprice__bg img { width: 100%; height: 100%; object-fit: cover; }
.sprice__inner { position: relative; max-width: calc(1220px + 48px); margin-inline: auto; padding-inline: 24px; }
.sprice .s-eyebrow { margin-bottom: 10.52px; }
.sprice .s-title { margin-bottom: 15.52px; }
.sprice .s-lead { margin-bottom: 34px; translate: -.5px 0; }

.price-grid { max-width: 1216px; margin-inline: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; align-items: start; }
.price {
  position: relative; height: 454px; padding: 36px; display: flex; flex-direction: column;
  background: #fff; border: 1px solid rgba(239, 246, 255, .8); border-radius: 32px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .4s;
}
.price--featured, .price--care { box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .05); }
.price--featured { border: 2px solid var(--blue-vivid); }
.price:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -28px rgba(37, 99, 235, .35); }
.price:not(.price--featured):hover { border-color: rgba(37, 99, 235, .35); }

.price__top { height: 319px; flex: none; display: flex; flex-direction: column; gap: 7.4px; }
.price--featured .price__top { height: 318px; }
.price--care .price__top { height: 320px; }
.price__icon { width: 56px; height: 56px; flex: none; border-radius: 16px; background: #e6f1fe; display: grid; place-items: center; transition: transform .5s var(--ease-spring); }
.price:hover .price__icon { transform: translateY(-3px) rotate(-6deg); }
.price__name { padding-top: 16.6px; font-weight: 700; font-size: 24px; line-height: 32px; color: var(--ink); }
.price__desc, .price__from {
  font-weight: 500; background: var(--grad-dark-text); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.price__desc { min-height: 42px; font-size: 16px; line-height: 22.75px; }
.price__amount { padding: 20.6px 0; display: flex; flex-direction: column; gap: 4px; }
.price__from { font-size: 14px; line-height: 20px; }
.price__value { display: flex; align-items: flex-start; height: 48px; font-family: var(--f-display); font-weight: 800; font-size: 48px; line-height: 48px; letter-spacing: -1.2px; white-space: nowrap; }
.price--care .price__value { height: 50px; }
.price__per { margin: 22px 0 0 6px; font-weight: 500; font-size: 18px; line-height: 28px; letter-spacing: 0; color: var(--slate-500); }

.price__badge {
  position: absolute; left: calc(50% + 5.1px); top: -20px; translate: -50% 0; z-index: 1;
  padding: 6px 16px; border-radius: 9999px; background: var(--blue-vivid);
  font-family: var(--f-display); font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: .3px; color: #fff; white-space: nowrap;
}

.price-btn {
  height: 62px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 24px 0 32px;
  border: 1px solid #bfdbfe; border-radius: 9999px; background: #fff;
  font-weight: 700; font-size: 14px; line-height: 20px; color: var(--ink); white-space: nowrap;
  transition: background-color .35s, border-color .35s, box-shadow .35s;
}
.price-btn i { width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--blue-vivid); display: grid; place-items: center; transition: transform .45s var(--ease-spring); }
.price-btn i img { transition: transform .45s var(--ease-out); }
.price-btn:hover { background: #eff5ff; border-color: var(--blue-600); }
.price-btn:hover i { transform: scale(1.08); }
.price-btn:hover i img { transform: rotate(45deg); }
.price-btn--solid { height: 60px; padding: 0 24px 0 32px; border: 0; background: var(--blue-vivid); color: #fff; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .05); }
.price-btn--solid i { background: #fff; }
.price-btn--solid:hover { background: #1d5ff0; box-shadow: 0 12px 24px -8px rgba(0, 102, 255, .55); }

.onboard {
  position: relative; height: 109px; margin-top: 49px; translate: -2px 0;
  display: flex; align-items: center; gap: 15px; padding: 15px 19px;
  background: var(--navy); border-radius: 8px;
}
.onboard__icon { width: 48px; height: 48px; flex: none; border-radius: 10px; background: var(--blue-600); display: grid; place-items: center; }
.onboard__text { min-width: 0; padding-top: 5px; display: flex; flex-direction: column; gap: 5px; }
.onboard__title { font-weight: 700; font-size: 18px; line-height: 28px; color: #fff; }
.onboard__title span { color: var(--blue-600); }
.onboard__note { font-size: 14px; line-height: 15px; color: var(--text-soft); }

/* =========================================================
   LET’S TALK — work.css component with this page’s Figma values
   ========================================================= */
.stalk .wtalk__bg { background: url("../img/talk-bg.webp") no-repeat 50% 50% / cover; }
.stalk .wtalk__tracker { margin-bottom: 24px; gap: 12px; letter-spacing: 3.6px; }
.stalk .wtalk__tracker span { width: 28px; background: rgba(36, 123, 255, .7); }
.stalk .wtalk__title { margin-bottom: 36px; }
.stalk .wtalk__btn { padding: 0 26px 0 28px; gap: 12px; font-weight: 700; font-size: 16px; letter-spacing: .35px; }
.stalk .wcard--1 .wcard__icon img { transform: rotate(6deg); }
.stalk .wcard--2 h3 { line-height: 24px; }
.stalk .wcard--3 h3 { line-height: 22px; white-space: nowrap; }

/* =========================================================
   MOTION PREFERENCES
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .bcard-wrap { animation: none !important; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

/* ---- ≥1200: Figma centres the talk copy left of the button ---- */
@media (min-width: 1200px) {
  .stalk .wtalk__title { translate: -36px 1px; }
  .stalk .wtalk__sub { translate: -30px 0; }
  .stalk .wtalk__tracker { translate: 2px 0; }
  .stalk .wcard--1 { left: calc(50% - 565px); top: 140.27px; }
  .stalk .wcard--2 { left: calc(50% - 565px); top: 373.91px; }
  .stalk .wcard--3 { left: calc(50% + 373px); top: 136.47px; }
  .stalk .wcard--4 { left: calc(50% + 355px); top: 370.93px; }
  .s-title { translate: -1px 1px; }
  .sdo .s-eyebrow, .sinc .s-eyebrow { translate: -6.5px 0; }
  .sprice .s-eyebrow { translate: -3.5px 0; }
}

/* ---- 1441+: keep the moon in frame on wide screens ---- */
@media (min-width: 1441px) {
  .stalk .wtalk__bg { background-position: 50% 32%; }
}

/* ---- ≤1439: keep the 1440 composition, tighten gutters ---- */
@media (max-width: 1439px) {
  .shero__inner { padding-left: clamp(24px, 7.5vw, 108px); }
  .shero__visual { right: clamp(24px, 2.77vw, 39.82px); width: min(687.19px, calc(100% - 680px - clamp(24px, 2.77vw, 39.82px))); }
  .onboard { translate: none; }
}

/* ---- ≤1279: laptop ---- */
@media (max-width: 1279px) {
  .shero__title { font-size: clamp(52px, 4.7vw, 60px); line-height: 1.033; }
  .sdo-card .br-desk, .price .br-desk { display: none; }
  .inc { height: auto; padding: 36px 22px; }
  .inc__col:nth-child(1), .inc__col:nth-child(2), .inc__col:nth-child(3) { flex: 1 1 0; width: auto; }
  .inc__list li { height: auto; min-height: 16.5px; white-space: normal; line-height: 20px; align-items: flex-start; }
  .inc__list li::before { margin-top: 4.5px; }
  .price { height: auto; min-height: 454px; padding: 30px; }
  .price--featured { padding: 29px; }
  .price__top, .price--featured .price__top, .price--care .price__top { height: auto; flex: 1 1 auto; padding-bottom: 24px; }
  .price__name { font-size: 22px; line-height: 30px; }
  .price__value { font-size: 42px; }
  .price-btn, .price-btn--solid { padding: 0 16px 0 24px; }
}

/* ---- ≤1100: stack the hero; cards 2 + 1 ---- */
@media (max-width: 1100px) {
  .shero__pillars { max-width: 100%; }
  .shero { height: auto; padding-bottom: 72px; }
  .shero__inner { height: auto; padding: 150px 40px 0; }
  .shero__copy { width: 100%; max-width: 729px; }
  .shero__title { height: auto; padding-block: 8px; font-size: clamp(46px, 6.2vw, 60px); line-height: 1.033; }
  .shero__visual { position: relative; right: auto; top: auto; translate: none; width: 100%; max-width: 687.19px; margin: 64px auto 0; }
  .sdo { min-height: 0; padding: 56px 0 72px; }
  .sdo__bg img { position: absolute; left: 0; top: -7%; height: 107%; }
  .sdo-card { min-height: 0; }
  .sdo-card.svc-card--care .svc-card__desc { margin-top: 11.2px; padding-bottom: 32.56px; }
  .sdo-card.svc-card--care .ticks { margin-top: 11.2px; }
  .sinc { padding: 56px 24px 72px; }
  .inc { flex-wrap: wrap; justify-content: flex-start; row-gap: 32px; }
  .inc__col:nth-child(1), .inc__col:nth-child(2) { flex: 1 1 calc(50% - 1px); }
  .inc__col:nth-child(2) { border-right: 0; padding-right: 0; }
  .inc__col:nth-child(3) { flex: 1 1 100%; padding: 28px 0 0; border-top: 1px solid #ccd9e8; }
  .sprice { min-height: 0; padding: 56px 0 72px; }
  .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; column-gap: 28px; }
  .price-grid > :last-child { grid-column: 1 / -1; width: 100%; max-width: calc(50% - 14px); justify-self: center; }
  .onboard { height: auto; margin-top: 40px; padding: 18px 20px; align-items: flex-start; }
  .onboard__note { line-height: 20px; }
}

/* ---- ≤1023: tablet ---- */
@media (max-width: 1023px) {
  .s-title { letter-spacing: -1.2px; }
  .sdo .s-lead, .sinc__lead, .sprice .s-lead, .sprice .s-eyebrow { translate: none; }
}

/* ---- ≤860: single column ---- */
@media (max-width: 860px) {
  .page-services .site-nav > a.is-current { color: #60a5fa; }
  .page-services .site-nav > a.is-current::after { display: none; }
  .price-grid { grid-template-columns: minmax(0, 1fr); max-width: 520px; row-gap: 36px; }
  .price-grid > :last-child { max-width: none; }
  .price { min-height: 0; }
}

/* ---- ≤767: mobile ---- */
@media (max-width: 767px) {
  .shero { padding-bottom: 56px; }
  .shero__inner { padding: 116px 20px 0; }
  .shero__copy > .eyebrow { margin-bottom: 16px; font-size: 13px; letter-spacing: 2.4px; }
  .shero__title { font-size: clamp(38px, 10.6vw, 52px); line-height: 1.05; margin-bottom: 16px; padding-block: 0; }
  .shero__lead { font-size: 16px; line-height: 26px; }
  .shero__btn { margin-bottom: 32px; }
  .shero__pillars { width: 100%; height: auto; flex-direction: column; align-items: stretch; padding: 8px 20px; }
  .shero__pillars .pillar:first-child, .shero__pillars .pillar:nth-child(2), .shero__pillars .pillar:nth-child(3) {
    flex: none; margin: 0; padding: 14px 0; border-left: 0;
  }
  .shero__pillars .pillar + .pillar { border-top: .64px solid rgba(6, 182, 212, .2); }
  .shero__pillars .pillar p { white-space: normal; }
  .shero__pillars .pillar p br { display: none; }
  .shero__visual { margin: 44px -6px 0; width: auto; }

  .sdo { padding: 56px 0 64px; }
  .sdo__inner, .sprice__inner { padding-inline: 20px; }
  .sdo .s-eyebrow, .sinc .s-eyebrow, .sprice .s-eyebrow { margin-bottom: 12px; font-size: 13px; letter-spacing: 2px; }
  .sdo .s-title, .sinc .s-title, .sprice .s-title { margin-bottom: 14px; letter-spacing: -1px; }
  .sdo .s-lead, .sprice .s-lead { margin-bottom: 32px; }
  .sdo-card .ticks li { align-items: flex-start; }
  .sdo-card .ticks li::before { margin-top: .9px; }

  .sinc { padding: 56px 20px 64px; }
  .sinc__lead { margin-bottom: 32px; }
  .inc { flex-direction: column; align-items: stretch; padding: 8px 22px; row-gap: 0; }
  .inc__col, .inc__col:nth-child(1), .inc__col:nth-child(2), .inc__col:nth-child(3) {
    flex: none; width: 100%; padding: 24px 0; border-right: 0; border-top: 1px solid #ccd9e8;
  }
  .inc__col:first-child { border-top: 0; }
  .inc__icon { width: 44px; height: 44px; }
  .inc h3 { font-size: 19px; }
  .inc__list { gap: 12px; }
  .inc__list li { font-size: 15px; }

  .sprice { padding: 56px 0 64px; }
  .price-grid { row-gap: 32px; }
  .price, .price--featured { padding: 26px 24px 24px; }
  .price--featured { padding: 25px 23px 23px; }
  .price__icon { width: 52px; height: 52px; }
  .price__name { font-size: 21px; line-height: 28px; padding-top: 12px; }
  .price__desc { font-size: 15px; line-height: 22px; min-height: 0; }
  .price__desc br { display: none; }
  .price__amount { padding: 16px 0 4px; }
  .price__value { font-size: 40px; height: auto; line-height: 44px; }
  .price--care .price__value { height: auto; }
  .price__per { margin-top: 14px; font-size: 16px; }
  .price-btn { height: 58px; }
  .price-btn--solid { height: 56px; }
  .onboard { flex-direction: column; gap: 14px; padding: 20px; }
  .onboard__text { padding-top: 0; gap: 8px; }
  .onboard__title { font-size: 17px; line-height: 25px; }
  .onboard__title span { display: inline-block; }
}

/* ---- ≤479: small phones ---- */
@media (max-width: 479px) {
  .shero__btn { align-self: stretch; }
  .sdo-card .action-btn, .price-btn { font-size: 14px; }
}