/* Product, email and migration pages: ProductHero, PlanTable, ServiceTile, IconFeatureList, section frame.
   Tiers: desktop >= 1024 · tablet 768–1023 · phone < 768 ("m" = below 1024). */
@media (max-width: 1023px) { .btn--block-tab { width: 100%; } }

/* ---------- section frame ---------- */
.pp-sec__pad { padding-top: 96px; padding-bottom: 96px; }
.pp-stack { display: flex; flex-direction: column; gap: 36px; }
.pp-head { display: flex; flex-direction: column; gap: 12px; }
.pp-split { display: grid; grid-template-columns: minmax(0,4fr) minmax(0,8fr); gap: 64px; align-items: start; }
.pp-cta { padding-top: 96px; padding-bottom: 96px; }
.pp-links { display: flex; flex-wrap: wrap; gap: 12px 32px; }
.pp-note { font-size: 15px; line-height: 1.55; color: var(--text-muted); text-wrap: pretty; }
.pp-line { font-size: 16px; line-height: 1.5; color: var(--text-body); }
.pp-line a { font-weight: 600; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; align-items: stretch; }
@media (max-width: 1023px) {
  .pp-sec__pad { padding-top: 56px; padding-bottom: 64px; }
  .pp-stack { gap: 24px; }
  .pp-split { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .pp-cta { padding-top: 48px; padding-bottom: 64px; }
}
@media (max-width: 767px) { .grid-3 { grid-template-columns: minmax(0,1fr); } }

/* ---------- ProductHero ---------- */
.ph { position: relative; overflow: hidden; background: var(--surface-page); }
/* Bottom = top − 16 on desktop: the eyebrow and the white header already make the top read larger. Stacked
   (< 1024): bottom keeps just the room for the pause button (12 + 44). */
.ph__inner { position: relative; isolation: isolate; padding-top: 88px; padding-bottom: 72px; container-type: inline-size; }
.ph__grid { display: grid; gap: 64px; align-items: center; }
.ph__text { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.ph__title { font-family: var(--font-display); font-weight: 600; font-size: 56px; line-height: 1.08; letter-spacing: var(--tracking-display); color: var(--text-strong); text-wrap: balance; }
.ph__text_limit .ph__title{line-height: 1;}
.ph__sub { font-size: 18px; line-height: 1.6; color: var(--text-body); max-width: 36em; text-wrap: pretty; }
.ph__text_limit .ph__sub{line-height: 1.2;}
.ph__ctas { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; margin-top: 6px; }
.ph__link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; font-size: 16px; color: var(--text-link); }
.ph__link:hover { color: var(--text-link-hover); }
.ph__art { position: relative; justify-self: end; }
.ph__box { position: relative; aspect-ratio: 1610 / 1797; }
.ph__sym { position: absolute; left: 50%; top: 50%; width: 640px; height: auto; translate: -50% -50%; z-index: -1; opacity: var(--motif-opacity); pointer-events: none; max-width: none; }
.ph__frag {
  position: absolute; display: flex; flex-direction: column; gap: 10px; background: var(--surface-raised);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-2);
}
.ph__row { display: flex; align-items: center; flex-wrap: nowrap; gap: 6px 8px; }
.ph__row--col { flex-direction: column; align-items: flex-start; }
.ph__icon { --icon-size: 20px; color: var(--icon); }
.ph__label { font-weight: 600; line-height: 1.3; color: var(--text-strong); white-space: nowrap; min-width: 0; }
.ph__label--wrap { white-space: normal; }
.ph__status--push { margin-left: auto; }
.ph__bars { display: flex; flex-direction: column; gap: 8px; }
.ph__bars > div { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 8px; align-items: center; }
.ph__bars > div > span:first-child { font-family: var(--font-mono); font-weight: 500; font-size: 11px; color: var(--text-muted); }
.ph__bars > div > span:last-child { height: 6px; border-radius: 3px; background: var(--surface-inset); overflow: hidden; }
.ph__bars > div > span:last-child > span { display: block; height: 100%; background: var(--graphic); opacity: 0.75; }
.ph__checks { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.ph__checks li { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--text-strong); }
.ph__checks .icon { color: var(--text-success); font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20; }
.ph__fsub { font-size: 13px; line-height: 1.4; color: var(--text-muted); }
@media (max-width: 1023px) {
  .ph__inner { padding-top: 48px; padding-bottom: 56px; }
  .ph__grid { gap: 44px; }
  .ph__title { font-size: 36px; }
  .ph__sub { font-size: 17px; }
  .ph__art { justify-self: center; }
  .ph__sym { width: 380px; }
}

/* ---------- IconFeatureList ---------- */
.ifl { list-style: none; display: grid; gap: 28px 40px; }
.ifl--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.ifl--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.ifl--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.ifl li { display: flex; gap: 14px; align-items: flex-start; padding-top: 18px; border-top: 1px solid var(--border-strong); }
.ifl li > .icon { --icon-size: 22px; margin-top: 1px; color: var(--icon); }
.ifl p { font-size: 16px; line-height: 1.55; color: var(--text-body); }
.ifl strong { font-weight: 600; color: var(--text-strong); }
@media (max-width: 1023px) { .ifl--4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 767px) { .ifl--2, .ifl--3, .ifl--4 { grid-template-columns: minmax(0,1fr); } }

/* ---------- ServiceTile (DS) ---------- */
.service-tile {
  display: flex; gap: 20px; align-items: flex-start; height: 100%; padding: 24px; background: var(--surface-subtle);
  border: 1px solid var(--border); border-radius: var(--radius-md); color: inherit; transition: border-color var(--dur) var(--ease);
}
.service-tile:hover { border-color: var(--border-strong); color: inherit; }
.service-tile__text { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.service-tile__title { font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 1.3; letter-spacing: var(--tracking-heading); color: var(--text-strong); }
.service-tile p { font-size: 15px; line-height: 1.55; color: var(--text-body); text-wrap: pretty; }
.service-tile__arrow {
  width: 36px; height: 36px; flex: none; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-strong); border-radius: var(--radius-full); color: var(--text-link);
}

/* ---------- PlanTable ---------- */
.pt { width: 100%; }
.pt__frame { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-card); }
.pt__table { width: 100%; border-collapse: collapse; }
.pt__table thead td, .pt__table thead th { padding: 24px 20px; border-bottom: 1px solid var(--border-strong); text-align: left; vertical-align: top; font-weight: 400; }
.pt__table thead th { border-left: 1px solid var(--border); }
.pt__head { display: flex; flex-direction: column; gap: 12px; height: 100%; }
.pt__name { font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1.25; letter-spacing: var(--tracking-heading); color: var(--text-strong); min-height: 50px; }
.pt__good { font-size: 14px; line-height: 1.45; color: var(--text-body); }
.pt__price { display: flex; align-items: baseline; gap: 4px; }
.pt__num { font-family: var(--font-display); font-weight: 600; font-size: 36px; line-height: 1; letter-spacing: var(--tracking-display); color: var(--text-strong); }
.pt__num--lg { font-size: 40px; }
.pt__unit { font-size: 15px; color: var(--text-muted); }
.pt__table tbody tr:nth-child(even) { background: var(--surface-subtle); }
.pt__table tbody th { padding: 12px 20px; border-top: 1px solid var(--border); text-align: left; font-weight: 600; font-size: 14px; line-height: 1.4; color: var(--text-strong); }
.pt__table tbody td { padding: 12px 20px; border-top: 1px solid var(--border); border-left: 1px solid var(--border); font-size: 15px; line-height: 1.4; color: var(--text-strong); }
.pt__v { display: inline-flex; align-items: center; gap: 6px; }
.pt__v--no { color: var(--text-muted); }
.pt__yes { color: var(--icon); }
.pt__picker { display: none; flex-direction: column; gap: 16px; }
.pt__opts { display: grid; gap: 8px; }
.pt__opt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 56px; padding: 8px 14px;
  border-radius: var(--radius-md); border: 1px solid var(--border-strong); background: var(--surface-card); cursor: pointer; text-align: left;
}
.pt__opt[aria-checked="true"] { border: 2px solid var(--action-bg); padding: 7px 13px; background: var(--surface-inset); }
.pt__opt { line-height: 1.3; }
.pt__opt-name { font-weight: 600; font-size: 15px; color: var(--text-strong); }
.pt__opt-price { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--text-body); }
.pt__opt[aria-checked="true"] .pt__opt-price { color: var(--text-strong); }
.pt__opt-price span { font-family: var(--font-body); font-weight: 400; font-size: 13px; color: var(--text-muted); }
.pt__card { display: flex; flex-direction: column; gap: 16px; padding: 24px 20px; background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-md); }
.pt__card-name { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.25; color: var(--text-strong); }
.pt__card-good { font-size: 15px; line-height: 1.5; color: var(--text-body); }
.pt__dl { margin: 0; display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.pt__dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 15px; line-height: 1.4; }
.pt__dl dt { color: var(--text-body); }
.pt__dl dd { margin: 0; display: flex; align-items: center; gap: 6px; text-align: right; font-weight: 600; color: var(--text-strong); }
.pt__dl .pt__dd--no { color: var(--text-muted); }
@media (max-width: 767px) {
  .pt__frame { display: none; }
  .pt__picker { display: flex; }
}

.pp-notes { display: flex; flex-direction: column; gap: 10px; max-width: 72ch; }
.pp-head .h2 { text-wrap: wrap; }

.ifl--top li { flex-direction: column; gap: 12px; }
.ifl--top li > .icon { --icon-size: 24px; margin-top: 0; }
.pp-actions { display: flex; }

/* two cards side by side (VPS "What you get") / two tiles */
.pp-halves { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; align-items: stretch; }
.pp-card { display: flex; flex-direction: column; gap: 16px; padding: 28px; background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-md); }
.pp-card__hex { max-width: 300px; align-self: center; }
.pp-card__title { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.25; letter-spacing: var(--tracking-heading); color: var(--text-strong); }
.pp-card__list { list-style: none; display: flex; flex-direction: column; }
.pp-card__list li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--border); font-size: 16px; line-height: 1.45; color: var(--text-strong); }
.pp-card__list li > .icon { margin-top: 1px; color: var(--icon); }
@media (max-width: 1023px) { .pp-card { padding: 20px; } .pp-card__hex { max-width: 280px; } }
@media (max-width: 767px) { .pp-halves { grid-template-columns: minmax(0,1fr); } .pp-card__hex { max-width: 260px; } }
.ifl--4 { gap: 28px 32px; }

/* text + hexagon photo feature row (WordPress #migration, Email Platforms, migration pages) */
.pp-feature { display: grid; grid-template-columns: minmax(0,8fr) minmax(0,4fr); gap: 64px; align-items: center; }
.pp-feature__text { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.pp-lead { max-width: 36em; }
.pp-feature__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 8px; }
.pp-hex { max-width: 300px; justify-self: center; --hex-off: -8%; }
.pp-hex__check { bottom: 4%; width: 208px; }
.pp-hex__check--left { left: var(--hex-off); }
.pp-hex__check--right { right: var(--hex-off); }
@media (max-width: 1023px) {
  .pp-feature { grid-template-columns: minmax(0,1fr); gap: 40px; }
  .pp-hex { max-width: 280px; }
  .pp-hex__check { width: 180px; }
}
@media (max-width: 767px) { .pp-hex { max-width: 260px; --hex-off: -4%; } }

/* numbered steps in a grid (GPU 3 cols, migration 5 cols) */
.steps-grid { list-style: none; display: grid; gap: 28px 40px; }
.steps-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.steps-grid li { display: flex; flex-direction: column; gap: 14px; }
.steps-grid p { font-size: 16px; line-height: 1.55; color: var(--text-body); }
.steps-grid strong { font-weight: 600; color: var(--text-strong); }
@media (max-width: 767px) { .steps-grid--3 { grid-template-columns: minmax(0,1fr); } }

.h2--balance { text-wrap: balance; }
.plat-lead { max-width: 40em; }

/* check rows (platforms "Good for", "What we handle", migration needs) */
.check-rows { list-style: none; display: flex; flex-direction: column; border-top: 1px solid var(--border-strong); }
.check-rows li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 16px; line-height: 1.45; color: var(--text-strong); }
.check-rows li > .icon { --icon-size: 20px; margin-top: 1px; color: var(--icon); }
.check-rows--center li { align-items: center; }
.check-rows--center li > .icon { margin-top: 0; }
.check-rows--roomy li { padding: 14px 0; line-height: 1.5; }

/* ---------- migration pages ---------- */
.mig-scope { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px 40px; }
.mig-scope li { display: flex; gap: 14px; align-items: center; padding-top: 16px; border-top: 1px solid var(--border-strong); font-size: 16px; line-height: 1.45; font-weight: 600; color: var(--text-strong); }
.mig-scope li > .icon { --icon-size: 22px; color: var(--icon); }
.mig-scope__links { display: flex; flex-direction: column; gap: 6px; }
.mig-needs { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.mig-pricing { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 64px; align-items: center; }
.mig-pricing__text { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.steps-grid--5 { grid-template-columns: repeat(5, minmax(0,1fr)); gap: 28px 32px; }
@media (max-width: 1023px) {
  .steps-grid--5 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mig-pricing { gap: 24px; }
}
@media (max-width: 767px) {
  .mig-scope, .steps-grid--5, .mig-pricing { grid-template-columns: minmax(0,1fr); }
}

/* ---------- Services hub ---------- */
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; align-items: stretch; }
@media (max-width: 1023px) { .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 767px) { .grid-4 { grid-template-columns: minmax(0,1fr); } }
.mono-link { font-family: var(--font-mono); font-weight: 500; white-space: nowrap; }
.svc-hero { position: relative; overflow: hidden; background: var(--surface-page); }
.svc-hero__motif { position: absolute; right: -80px; top: -120px; width: 640px; height: auto; opacity: var(--motif-opacity); pointer-events: none; }
.svc-hero__grid { position: relative; padding-top: 88px; padding-bottom: 72px; display: grid; grid-template-columns: minmax(0,6fr) minmax(0,6fr); gap: 64px; align-items: start; }
.svc-hero__text { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.svc-hero__title { font-family: var(--font-display); font-weight: 600; font-size: 52px; line-height: 1.08; letter-spacing: var(--tracking-display); color: var(--text-strong); max-width: 14ch; text-wrap: balance; }
.svc-hero__sub { font-size: 18px; line-height: 1.6; color: var(--text-body); max-width: 34em; text-wrap: pretty; }
.svc-hero__cta { margin-top: 6px; }
.svc-fits { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.svc-fits h2 { margin: 0; }
.svc-fits ul { list-style: none; display: flex; flex-direction: column; border-top: 1px solid var(--border-strong); }
.svc-fits li { border-bottom: 1px solid var(--border); }
.svc-fits a { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 16px; align-items: center; min-height: 56px; padding: 12px 0; color: var(--text-body); }
.svc-fits a:hover { color: var(--text-link); }
.svc-fits a > span { font-size: 16px; line-height: 1.45; }
.svc-fits strong { font-weight: 600; color: var(--text-strong); }
.svc-fits .icon { color: var(--text-link); }
@media (max-width: 1023px) {
  .svc-hero__motif { width: 380px; right: -160px; top: -60px; }
  .svc-hero__grid { padding-top: 48px; padding-bottom: 56px; grid-template-columns: minmax(0,1fr); gap: 40px; }
  .svc-hero__title { font-size: 36px; }
  .svc-hero__sub { font-size: 17px; }
}