@font-face { font-family: "Inter"; src: url("/assets/inter-cyrillic.71d5ee93cc.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; src: url("/assets/inter-latin.3100e775e8.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@view-transition { navigation: auto; }

:root {
  color-scheme: light;
  --bg: #ffffff;
  --bg-2: #f5f5f7;
  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --line: #d2d2d7;
  --card: #ffffff;
  --blue: #0071e3;
  --blue-hover: #0077ed;
  --link: #0066cc;
  --bar: rgba(251, 251, 253, .8);
  --shadow: 0 4px 22px rgba(0, 0, 0, .08);
  --ease: cubic-bezier(.28, .11, .32, 1);
  --gutter: max(22px, calc((100vw - 1200px) / 2));
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --bg-2: #161617;
  --ink: #f5f5f7;
  --ink-2: #a1a1a6;
  --line: #424245;
  --card: #1d1d1f;
  --link: #2997ff;
  --bar: rgba(22, 22, 23, .8);
  --shadow: none;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 110px; background: var(--bg); }
html.locked { overflow: hidden; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.47 "Inter", -apple-system, system-ui, sans-serif; letter-spacing: -.012em; -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 4px; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 60; padding: 10px 14px; background: var(--bg); border-radius: 8px; }
.skip:focus { top: 8px; }

/* pictures follow the theme; a hidden lazy image is never downloaded */
.for-light { display: block; }
.for-dark { display: none; }
[data-theme="dark"] .for-light { display: none; }
[data-theme="dark"] .for-dark { display: block; }
.always-dark .for-light { display: none; }
.always-dark .for-dark { display: block; }

/* links and buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 22px; border: 1px solid transparent; border-radius: 980px; background: var(--blue); color: #fff; font-size: 17px; line-height: 1.2; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .25s var(--ease); }
.btn:hover { background: var(--blue-hover); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .55; cursor: wait; }
.btn-line { background: transparent; color: var(--link); border-color: var(--link); }
.btn-line:hover { background: var(--link); color: #fff; }
.always-dark .btn-line { color: #2997ff; border-color: #2997ff; }
.always-dark .btn-line:hover { background: #2997ff; color: #000; }
.btn-sm { min-height: 30px; padding: 5px 13px; font-size: 13px; }
.more { color: var(--link); }
.more::after { content: " ›"; }
.more:hover { text-decoration: underline; }

/* top bar */
.nav { position: sticky; top: 0; z-index: 50; height: 48px; background: var(--bar); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
.nav-in { display: flex; align-items: center; gap: 4px; height: 48px; padding-inline: var(--gutter); font-size: 13px; }
.logo { font-size: 20px; font-weight: 600; letter-spacing: -.03em; margin-right: 22px; }
.nav-item { position: static; }
.nav-item > button { height: 48px; padding: 0 12px; background: none; border: 0; color: var(--ink); opacity: .86; cursor: pointer; transition: opacity .2s; }
.nav-item > button:hover, .nav-item.open > button { opacity: 1; }
.nav-gap { flex: 1; }
.nav-order { padding-inline: 12px; color: var(--ink); opacity: .86; line-height: 48px; }
.nav-order:hover { opacity: 1; }
.icon-btn { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; background: none; border: 0; border-radius: 50%; color: var(--ink); opacity: .86; cursor: pointer; }
.icon-btn:hover { opacity: 1; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.icon-btn svg { width: 18px; height: 18px; }
.sun { display: none; }
[data-theme="dark"] .sun { display: block; }
[data-theme="dark"] .moon { display: none; }
.burger { display: none; }

.fly { position: absolute; left: 0; right: 0; top: 48px; background: var(--bg); padding: 0; max-height: 0; overflow: hidden; visibility: hidden; opacity: 0; transition: max-height .36s var(--ease), opacity .2s, visibility .36s; box-shadow: 0 30px 40px -30px rgba(0, 0, 0, .25); }
.nav-item.open .fly { max-height: 560px; opacity: 1; visibility: visible; }
.fly-in { display: grid; grid-template-columns: 240px 1fr; gap: 40px; padding: 36px var(--gutter) 52px; }
.fly h3 { font-size: 28px; font-weight: 600; line-height: 1.12; letter-spacing: -.024em; }
.fly-line { margin-top: 8px; color: var(--ink-2); font-size: 14px; }
.fly-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.fly-list a { display: flex; align-items: center; gap: 13px; padding: 9px; border-radius: 14px; transition: background .15s; }
.fly-list a:hover { background: var(--bg-2); }
.fly-list img { width: 60px; height: 60px; object-fit: cover; border-radius: 12px; flex: none; }
.fly-list b { display: block; font-size: 15px; font-weight: 600; }
.fly-list span { display: block; font-size: 12.5px; line-height: 1.3; color: var(--ink-2); }
.scrim { position: fixed; inset: 48px 0 0; z-index: 40; background: rgba(0, 0, 0, .28); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); opacity: 0; pointer-events: none; transition: opacity .3s; }
.scrim.on { opacity: 1; pointer-events: auto; }

/* notice */
.ribbon { padding: 12px var(--gutter); background: var(--bg-2); text-align: center; font-size: 14px; }

/* intro */
.intro { padding: clamp(36px, 5vw, 64px) var(--gutter) clamp(18px, 2vw, 24px); }
.intro h1 { font-size: clamp(38px, 5.2vw, 64px); font-weight: 600; line-height: 1.07; letter-spacing: -.032em; max-width: 15em; text-wrap: balance; }
.intro h1 em { font-style: normal; color: var(--ink-2); }
.intro p { margin-top: 14px; max-width: 34em; color: var(--ink-2); font-size: clamp(17px, 1.6vw, 21px); line-height: 1.35; }

/* catalogue strip */
.strip { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 16px var(--gutter) 30px; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); }
.strip::-webkit-scrollbar { display: none; }
.strip a { flex: none; width: 118px; padding: 8px 6px 12px; text-align: center; font-size: 13.5px; font-weight: 500; line-height: 1.22; border-radius: 16px; scroll-snap-align: start; transition: background .2s; }
.strip a:hover { background: var(--bg-2); }
.strip img { width: 92px; height: 92px; object-fit: cover; margin: 0 auto 9px; border-radius: 20px; transition: transform .45s var(--ease); }
.strip a:hover img { transform: scale(1.05); }

/* section heading */
.group-head { padding: clamp(46px, 6vw, 80px) var(--gutter) 22px; }
.group-head h2 { font-size: clamp(30px, 3.4vw, 44px); font-weight: 600; line-height: 1.1; letter-spacing: -.026em; }
.group-head h2 span { color: var(--ink-2); }

/* product tiles */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-inline: 12px; }
.tile { position: relative; display: block; overflow: hidden; min-height: 580px; background: var(--bg-2); color: var(--ink); text-align: center; }
.tile.full { grid-column: 1 / -1; min-height: 660px; }
.tile.always-dark { background: #0b0b0e; color: #f5f5f7; }
[data-theme="dark"] .tile { background: #0b0b0e; color: #f5f5f7; }
.tile-pic { position: absolute; inset: 0; overflow: hidden; }
.tile-pic picture, .s-pic picture { width: 100%; height: 100%; }
.tile-pic img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; transform: scale(var(--zoom, 1)); transform-origin: center bottom; transition: transform .9s cubic-bezier(.16, .84, .3, 1); will-change: transform; }
.tile-text { position: relative; z-index: 1; padding: 40px 24px 0; }
.tile h3 { font-size: clamp(34px, 3.4vw, 48px); font-weight: 600; line-height: 1.08; letter-spacing: -.028em; }
.tile.full h3 { font-size: clamp(38px, 4.4vw, 56px); }
.tile p { margin: 6px auto 0; max-width: 24em; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.22; letter-spacing: -.016em; }
.tile.full p { font-size: clamp(19px, 2vw, 26px); max-width: 28em; }
.tile-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 17px; }
.tile .btn { position: relative; z-index: 2; }
.tile-link { position: absolute; inset: 0; z-index: 1; }

/* problem chooser */
.pick { padding: clamp(64px, 8vw, 110px) var(--gutter); }
.pick h2, .sec-title { font-size: clamp(32px, 4.1vw, 56px); font-weight: 600; line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; }
.pick > p { margin-top: 12px; max-width: 32em; color: var(--ink-2); font-size: clamp(17px, 1.6vw, 21px); }
.pick-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); margin-top: 32px; border-top: 1px solid var(--line); column-gap: 32px; }
.pick-list a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 17px 2px; border-bottom: 1px solid var(--line); font-size: 18px; font-weight: 500; letter-spacing: -.018em; transition: color .15s, padding .3s var(--ease); }
.pick-list a span { flex: none; color: var(--link); font-weight: 400; font-size: 14px; }
.pick-list a:hover { color: var(--link); padding-left: 8px; }

/* horizontal cards */
.band { background: var(--bg-2); padding-block: clamp(60px, 7vw, 100px); }
.band-head { display: flex; justify-content: space-between; align-items: end; gap: 22px; padding-inline: var(--gutter); }
.rail { display: flex; gap: 20px; overflow-x: auto; scrollbar-width: none; padding: 34px var(--gutter) 30px; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); }
.rail::-webkit-scrollbar { display: none; }
.rail > * { flex: none; scroll-snap-align: start; }
.rail-btns { display: flex; justify-content: flex-end; gap: 12px; padding-inline: var(--gutter); }
.round { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--ink) 11%, transparent); cursor: pointer; transition: background .2s, opacity .2s; }
.round:hover { background: color-mix(in srgb, var(--ink) 18%, transparent); }
.round:disabled { opacity: .35; cursor: default; }
.round svg { width: 14px; height: 14px; }
.promise { width: min(312px, 78vw); min-height: 290px; padding: 28px 26px; border-radius: 18px; background: var(--card); box-shadow: var(--shadow); }
.promise i { display: block; width: 28px; height: 28px; margin-bottom: 40px; color: var(--link); }
.promise h3 { font-size: 23px; font-weight: 600; line-height: 1.14; letter-spacing: -.022em; }
.promise p { margin-top: 11px; font-size: 15.5px; line-height: 1.42; color: var(--ink-2); }

/* steps */
.steps-wrap { padding: clamp(64px, 8vw, 110px) var(--gutter); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 40px; counter-reset: s; }
.steps li { counter-increment: s; padding-top: 16px; border-top: 1px solid var(--line); }
.steps li::before { content: counter(s); display: block; margin-bottom: 18px; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.steps h3 { font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.steps p { margin-top: 7px; font-size: 15.5px; line-height: 1.42; color: var(--ink-2); }

/* closing call */
.closing { position: relative; overflow: hidden; background: var(--bg-2); padding: clamp(70px, 9vw, 120px) 24px; text-align: center; }
.closing h2 { font-size: clamp(36px, 4.8vw, 64px); font-weight: 600; line-height: 1.06; letter-spacing: -.032em; text-wrap: balance; }
.closing p { max-width: 30em; margin: 14px auto 26px; color: var(--ink-2); font-size: clamp(17px, 1.6vw, 21px); line-height: 1.35; }
.cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* service: sticky bar */
.subnav { position: sticky; top: 48px; z-index: 30; background: var(--bar); border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
.subnav-in { display: flex; align-items: center; gap: 22px; min-height: 52px; padding-inline: var(--gutter); }
.subnav b { margin-right: auto; font-size: 20px; font-weight: 600; letter-spacing: -.022em; white-space: nowrap; }
.subnav a:not(.btn) { position: relative; font-size: 13px; line-height: 52px; color: var(--ink); opacity: .75; white-space: nowrap; }
.subnav a:not(.btn):hover, .subnav a.on { opacity: 1; }
.subnav a.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink); }

/* service: hero */
.s-hero { padding-top: clamp(32px, 3.8vw, 56px); text-align: center; overflow: hidden; }
.s-hero .eyebrow { font-size: clamp(19px, 1.9vw, 24px); font-weight: 600; letter-spacing: -.02em; }
.s-hero h1 { margin: 8px auto 0; padding-inline: 22px; max-width: 15em; font-size: clamp(40px, 6vw, 80px); font-weight: 600; line-height: 1.05; letter-spacing: -.035em; text-wrap: balance; }
.s-hero .lead { margin: 18px auto 0; padding-inline: 22px; max-width: 36em; color: var(--ink-2); font-size: clamp(18px, 1.7vw, 22px); line-height: 1.34; letter-spacing: -.016em; }
.s-hero .cta-row { margin-top: 24px; }
.s-pic { margin-top: clamp(-40px, -2vw, 0px); overflow: hidden; }
.s-pic img { width: 100%; height: auto; aspect-ratio: 2.75; -webkit-mask-image: linear-gradient(transparent, #000 22%); mask-image: linear-gradient(transparent, #000 22%); object-fit: cover; object-position: center bottom; transform: scale(var(--zoom, 1)); transform-origin: center bottom; }

/* service: highlight cards */
.hl { width: min(400px, 84vw); min-height: 330px; padding: 32px 30px; border-radius: 28px; background: var(--card); box-shadow: var(--shadow); display: flex; flex-direction: column; }
.hl .num { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: auto; border-radius: 50%; background: var(--bg-2); color: var(--ink-2); font-size: 15px; font-weight: 600; }
[data-theme="dark"] .hl .num { background: #2c2c2e; }
.hl h3 { margin-top: 46px; font-size: clamp(25px, 2.3vw, 30px); font-weight: 600; line-height: 1.12; letter-spacing: -.026em; }
.hl p { margin-top: 12px; font-size: 17px; line-height: 1.38; color: var(--ink-2); }

/* service: plans */
.plans-wrap { padding: clamp(64px, 8vw, 110px) var(--gutter); }
.plans-wrap > p { margin-top: 12px; max-width: 34em; color: var(--ink-2); font-size: clamp(17px, 1.6vw, 21px); }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: 30px 26px 26px; border: 1px solid var(--line); border-radius: 22px; background: var(--bg); transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .25s; }
.plan:hover { transform: translateY(-4px); box-shadow: 0 18px 44px -24px rgba(0, 0, 0, .35); }
.plan.best { border: 2px solid var(--blue); padding: 29px 25px 25px; }
.badge { position: absolute; left: 24px; top: -12px; padding: 3px 11px; border-radius: 980px; background: var(--blue); color: #fff; font-size: 12px; font-weight: 500; }
.plan h3 { font-size: 26px; font-weight: 600; letter-spacing: -.024em; }
.plan .for { margin-top: 5px; min-height: 2.8em; color: var(--ink-2); font-size: 15px; line-height: 1.38; }
.plan ul { margin: 18px 0 24px; }
.plan li { position: relative; padding: 9px 0 9px 24px; border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); font-size: 15px; line-height: 1.34; }
.plan li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 11px; height: 6px; border-left: 1.8px solid var(--link); border-bottom: 1.8px solid var(--link); transform: rotate(-45deg); }
.plan .btn { margin-top: auto; }
.plan-price { margin-bottom: 10px; font-size: 15px; font-weight: 600; }

/* service: questions */
.faq-wrap { padding: clamp(64px, 8vw, 110px) var(--gutter); background: var(--bg-2); }
.faq { max-width: 860px; margin-top: 30px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: baseline; gap: 22px; padding: 20px 0; list-style: none; cursor: pointer; font-size: clamp(18px, 1.7vw, 21px); font-weight: 600; letter-spacing: -.02em; line-height: 1.24; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { position: relative; flex: none; width: 13px; height: 13px; color: var(--ink-2); }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: currentColor; transition: transform .3s var(--ease); }
.faq summary i::after { transform: rotate(90deg); }
.faq details[open] summary i::after { transform: none; }
.faq details p { padding-bottom: 22px; max-width: 42em; color: var(--ink-2); }

/* service: related */
.rel { padding: clamp(64px, 8vw, 110px) 0 clamp(50px, 6vw, 80px); }
.rel h2 { padding-inline: var(--gutter); }
.rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 30px; padding-inline: 12px; }
.rel-card { position: relative; display: block; overflow: hidden; min-height: 400px; padding: 28px 24px; background: var(--bg-2); border-radius: 18px; }
[data-theme="dark"] .rel-card { background: #000; box-shadow: inset 0 0 0 1px #262628; }
.rel-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; transition: transform .8s var(--ease); }
.rel-card:hover img { transform: scale(1.035); }
.rel-card h3, .rel-card p { position: relative; z-index: 1; }
.rel-card h3 { font-size: 24px; font-weight: 600; letter-spacing: -.024em; }
.rel-card p { margin-top: 4px; font-size: 15px; line-height: 1.3; color: var(--ink-2); max-width: 19em; }

.buybar { display: none; }

/* order */
.order { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 7vw, 100px); padding: clamp(40px, 6vw, 84px) var(--gutter) clamp(70px, 8vw, 110px); }
.order h1 { font-size: clamp(38px, 4.8vw, 60px); font-weight: 600; line-height: 1.07; letter-spacing: -.032em; text-wrap: balance; }
.order-side > p { margin-top: 14px; color: var(--ink-2); font-size: clamp(17px, 1.6vw, 21px); line-height: 1.35; max-width: 26em; }
.next { margin-top: 36px; }
.next li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; padding: 15px 0; border-top: 1px solid var(--line); font-size: 15.5px; line-height: 1.38; color: var(--ink-2); }
.next b { color: var(--ink); font-weight: 600; }
.next span:first-child { font-size: 13px; color: var(--ink-2); padding-top: 1px; }
.direct { margin-top: 26px; display: grid; gap: 4px; justify-items: start; }
.direct span { font-size: 13px; color: var(--ink-2); }
.direct a { color: var(--link); font-size: 19px; }
form.lead { align-self: start; padding: clamp(22px, 3vw, 36px); border-radius: 24px; background: var(--bg-2); }
.fld { display: block; margin-bottom: 15px; }
.fld > span { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.fld input, .fld textarea, .fld select { display: block; width: 100%; min-height: 50px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); outline: 0; transition: border-color .15s, box-shadow .15s; }
.fld select { appearance: none; -webkit-appearance: none; padding-right: 38px; background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%); background-position: right 20px center, right 15px center; background-size: 5px 5px; background-repeat: no-repeat; }
.fld textarea { min-height: 112px; resize: vertical; line-height: 1.38; }
.fld input:focus, .fld textarea:focus, .fld select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 25%, transparent); }
.fld ::placeholder { color: var(--ink-2); opacity: .75; }
.plan-box { margin: -4px 0 15px; font-size: 14px; color: var(--ink-2); }
.plan-box b { color: var(--ink); font-weight: 600; }
.hp { position: absolute; left: -9999px; }
form.lead .btn { width: 100%; min-height: 52px; }
.err { min-height: 1.4em; margin-top: 8px; color: #e0242f; font-size: 14px; }
.consent { font-size: 12.5px; line-height: 1.42; color: var(--ink-2); }
.consent a { color: var(--link); }
.ok { align-self: start; padding: clamp(26px, 3vw, 40px); border-radius: 24px; background: var(--bg-2); outline: 0; }
.ok h2 { font-size: 34px; font-weight: 600; letter-spacing: -.028em; }
.ok p { margin: 10px 0 22px; color: var(--ink-2); }

/* text pages */
.doc { max-width: 760px; margin-inline: auto; padding: clamp(40px, 6vw, 84px) 22px clamp(60px, 8vw, 100px); }
.doc h1 { font-size: clamp(36px, 4.6vw, 56px); font-weight: 600; line-height: 1.08; letter-spacing: -.03em; }
.doc .meta { margin-top: 10px; color: var(--ink-2); font-size: 15px; }
.doc h2 { margin: 32px 0 8px; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.doc p { color: var(--ink-2); }
.lost { min-height: 62vh; display: grid; place-content: center; justify-items: center; padding: 60px 22px; text-align: center; }
.lost h1 { font-size: clamp(38px, 5vw, 64px); font-weight: 600; letter-spacing: -.03em; line-height: 1.08; }
.lost p { margin: 12px 0 24px; color: var(--ink-2); font-size: 19px; }

/* footer */
.foot { padding: 34px var(--gutter) 22px; background: var(--bg-2); font-size: 12.5px; color: var(--ink-2); }
.foot-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; padding-bottom: 26px; }
.foot h4 { margin-bottom: 9px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.foot li { margin-bottom: 8px; }
.foot a:hover { color: var(--ink); text-decoration: underline; }
.foot-end { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 26px; padding-top: 16px; border-top: 1px solid var(--line); }
.foot-end div { display: flex; flex-wrap: wrap; gap: 6px 22px; }

/* reveal */
.anim [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.anim [data-reveal].in { opacity: 1; transform: none; }
.rail > [data-reveal]:nth-child(2), .plans > [data-reveal]:nth-child(2), .steps > [data-reveal]:nth-child(2) { transition-delay: .08s; }
.rail > [data-reveal]:nth-child(3), .plans > [data-reveal]:nth-child(3), .steps > [data-reveal]:nth-child(3) { transition-delay: .16s; }
.steps > [data-reveal]:nth-child(4), .rail > [data-reveal]:nth-child(4) { transition-delay: .24s; }

/* page changes */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .38s; animation-timing-function: var(--ease); }
::view-transition-group(*) { animation-duration: .5s; animation-timing-function: var(--ease); }

@media (max-width: 1000px) {
  .nav-item, .nav-order { display: none; }
  .burger { display: grid; }
  .nav.mobile-open { background: var(--bg); }
  .nav.mobile-open .nav-in { flex-wrap: wrap; height: auto; }
  .nav.mobile-open { height: 100dvh; overflow-y: auto; }
  .m-menu { display: none; }
  .nav.mobile-open .m-menu { display: block; padding: 6px var(--gutter) 60px; }
  .m-menu h4 { margin: 24px 0 8px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
  .m-menu a { display: block; padding: 7px 0; font-size: 25px; font-weight: 600; letter-spacing: -.024em; line-height: 1.2; }
  .steps { grid-template-columns: 1fr 1fr; }
  .plans, .rel-grid { grid-template-columns: 1fr; }
  .plan .for { min-height: 0; }
  .order { grid-template-columns: 1fr; }
  .subnav a:not(.btn) { display: none; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1001px) { .m-menu { display: none; } }

@media (max-width: 734px) {
  body { font-size: 16px; }
  .tiles { grid-template-columns: 1fr; padding-inline: 0; }
  .tile, .tile.full { grid-column: 1; min-height: 0; padding-bottom: calc(100vw / 1.36 * .6); }
  .tile-text { padding-top: 34px; }
  .tile-pic { inset: auto 0 0; }
  .tile-pic picture { height: auto; }
  .tile-pic img { height: auto; aspect-ratio: 1.36; -webkit-mask-image: linear-gradient(transparent, #000 26%); mask-image: linear-gradient(transparent, #000 26%); }
  .rel-grid { padding-inline: 16px; }
  .s-pic img { aspect-ratio: 1.62; }
  .s-hero .cta-row { padding-inline: 16px; }
  .buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 9px 16px calc(9px + env(safe-area-inset-bottom)); background: var(--bar); border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); font-size: 15px; font-weight: 600; }
  .with-bar .foot { padding-bottom: 86px; }
  .subnav .btn { display: none; }
  .steps { grid-template-columns: 1fr; gap: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  @view-transition { navigation: none; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media (min-width: 1240px) {
  .strip { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px; overflow: visible; }
  .strip a { width: auto; font-size: 12.5px; padding-inline: 2px; }
  .strip img { width: 84px; height: 84px; }
}
[data-vt="hosting"]{view-transition-name:pic-hosting}[data-vt="servers"]{view-transition-name:pic-servers}[data-vt="domains"]{view-transition-name:pic-domains}[data-vt="security"]{view-transition-name:pic-security}[data-vt="support"]{view-transition-name:pic-support}[data-vt="sites"]{view-transition-name:pic-sites}[data-vt="shop"]{view-transition-name:pic-shop}[data-vt="mobile"]{view-transition-name:pic-mobile}[data-vt="software"]{view-transition-name:pic-software}[data-vt="automation"]{view-transition-name:pic-automation}[data-vt="bots"]{view-transition-name:pic-bots}[data-vt="ai"]{view-transition-name:pic-ai}