/* The sales page: a quiet showroom for the portfolio. Its own neutral frame (warm grey paper, ink, hairlines, one
   sans) so the product is the only colour, pattern and shape on the page: the portfolio appears in screenshots on
   grey stages and in the look preview (.mini, styled by looks.css, the design's own rules). It shares the
   portfolio's grid and its small section labels, not its bands, patterns, waves, frames or headline face. Every
   path is relative: the folder works as a site of its own or under any /path. */

:root {
  --s-bg: #f5f4f0; --s-paper: #ffffff; --s-panel: #e9e7e1; --s-panel-2: #dedbd3;
  --s-ink: #1c1c1a; --s-ink-2: #55534d; --s-muted: #7a776f; --s-line: #dad7cf;
  --s-sans: "Instrument Sans", system-ui, sans-serif;
  --s-wrap: 1200px; --s-pad: clamp(16px, 4vw, 40px); --s-section: clamp(72px, 9vw, 120px);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--s-bg); color: var(--s-ink); font: 400 1.0625rem/1.6 var(--s-sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, figure, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--s-sans); text-wrap: balance; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--s-ink); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 16px; top: 12px; z-index: 40; padding: 8px 12px; background: var(--s-ink); color: #fff; }
.wrap { width: min(100% - 2 * var(--s-pad), var(--s-wrap)); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* line icons in one ink */
.ic { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; --two: currentColor; }

/* actions: flat ink pills; the WhatsApp mark says where the order goes */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border: 0; border-radius: 999px; background: var(--s-ink); color: #fff; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .15s; }
.btn:hover { background: #3a3a37; }
.btn svg { width: 18px; height: 18px; fill: currentColor; }
.btn--light { background: var(--s-paper); color: var(--s-ink); box-shadow: inset 0 0 0 1px var(--s-line); }
.btn--light:hover { background: var(--s-bg); }
.link { font-weight: 600; text-decoration: underline; text-decoration-color: var(--s-line); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.link:hover { text-decoration-color: currentColor; }

/* section heads: the portfolio's small label with its short rule, in grey; plain sans headings */
.label { display: inline-flex; align-items: center; gap: 10px; font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--s-muted); }
.label::before { content: ""; width: 20px; height: 1px; background: currentColor; }
.head { max-width: 44rem; margin-bottom: 44px; }
.head h2 { margin-top: 14px; font-size: clamp(1.9rem, 3.6vw, 2.75rem); font-weight: 600; line-height: 1.1; letter-spacing: -.025em; }
.head h2 em, h1 em { font-style: normal; color: var(--s-ink-2); }
.head p { margin-top: 14px; font-size: 1.125rem; color: var(--s-ink-2); }
.sec { padding: var(--s-section) 0; border-top: 1px solid var(--s-line); }

/* stages: where the product is shown, on grey, the only colour on the page */
.stage { position: relative; border-radius: 16px; background: var(--s-panel); padding: clamp(16px, 3vw, 40px); }
.browser { overflow: hidden; border-radius: 10px; background: var(--s-paper); box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 18px 40px -24px rgb(0 0 0 / .35); }
.browser .bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: #f1f0ec; border-bottom: 1px solid var(--s-line); font-size: .75rem; color: var(--s-muted); }
.browser .bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--s-panel-2); }
.browser .bar span { margin-left: 8px; padding: 1px 10px; border-radius: 6px; background: var(--s-paper); }
.browser img { width: 100%; }
.phone { overflow: hidden; padding: 6px; border-radius: 28px; background: #111; box-shadow: 0 20px 40px -24px rgb(0 0 0 / .5); }
.phone img { border-radius: 22px; width: 100%; }
.caption { margin-top: 14px; font-size: .875rem; color: var(--s-muted); }

/* ── the header ── */
.top { position: sticky; top: 0; z-index: 30; background: rgb(245 244 240 / .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--s-line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 64px; }
.mark { font-weight: 700; font-size: 1.125rem; letter-spacing: -.02em; text-decoration: none; }
.top nav { display: flex; align-items: center; gap: 24px; font-size: .9375rem; }
.top nav a:not(.btn) { text-decoration: none; color: var(--s-ink-2); } .top nav a:not(.btn):hover { color: var(--s-ink); }
.top .btn { padding: 9px 16px; font-size: .9375rem; }

/* ── the hero ── */
.hero { padding: clamp(48px, 7vw, 88px) 0 var(--s-section); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.hero h1 { margin-top: 16px; font-size: clamp(2.4rem, 4.6vw, 3.6rem); font-weight: 600; line-height: 1.04; letter-spacing: -.035em; }
.lede { margin-top: 20px; font-size: 1.1875rem; color: var(--s-ink-2); }
.price-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 28px; }
.price-line b { font-size: 1.75rem; font-weight: 600; letter-spacing: -.02em; }
.price-line span { color: var(--s-ink-2); }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 24px; }
.show { position: relative; padding-bottom: 28px; }
.show .browser { width: 92%; margin-left: auto; }
.show .phone { position: absolute; left: 0; bottom: 0; width: 28%; }

/* ── three facts ── */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--s-line); }
.facts li { padding: 28px 24px 0 0; }
.facts li + li { padding-left: 24px; border-left: 1px solid var(--s-line); }
.facts b { display: block; font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.facts span { display: block; margin-top: 6px; color: var(--s-ink-2); }
.facts-sec { padding: 0 0 var(--s-section); }

/* ── the site: a long screenshot beside what is on it ── */
.anatomy { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.long { position: sticky; top: 88px; }
.long .scroll { height: min(70vh, 620px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.parts { counter-reset: part; }
.part { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 20px 0; border-top: 1px solid var(--s-line); }
.part::before { counter-increment: part; content: counter(part, decimal-leading-zero); font-size: .875rem; font-weight: 600; color: var(--s-muted); padding-top: 4px; }
.part h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; }
.part p { margin-top: 6px; color: var(--s-ink-2); }
.part .opt { margin-left: 8px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--s-line); font-size: .75rem; font-weight: 600; color: var(--s-ink-2); vertical-align: .2em; }
.part .thumb { margin-top: 14px; width: min(100%, 400px); border-radius: 8px; box-shadow: 0 0 0 1px var(--s-line); }
.specs-h { margin: 64px 0 8px; font-size: 1.25rem; font-weight: 600; }
.specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.specs div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 16px; padding: 14px 0; border-top: 1px solid var(--s-line); }
.specs dt { font-weight: 600; }
.specs dd { color: var(--s-ink-2); }

/* ── the Studio ── */
.viewer { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 28px; align-items: start; }
.vtabs { display: grid; gap: 2px; }
.vtabs button { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 0; border-radius: 10px; background: none; color: var(--s-ink-2); text-align: left; cursor: pointer; }
.vtabs button:hover { background: var(--s-panel); color: var(--s-ink); }
.vtabs button[aria-selected="true"] { background: var(--s-ink); color: #fff; font-weight: 600; }
.vtabs .ic { width: 20px; height: 20px; flex: none; }
.viewer .stage { min-width: 0; }
.viewer .stage [hidden] { display: none; }
.viewer .stage > .phone { width: min(280px, 70%); margin-inline: auto; }
.vcap { margin-top: 18px; max-width: 46rem; color: var(--s-ink-2); }
.vcap b { color: var(--s-ink); }
.perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; margin-top: 56px; }
.perk { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding: 20px 0; border-top: 1px solid var(--s-line); }
.perk .ic { color: var(--s-ink-2); }
.perk h3 { font-size: 1.0625rem; font-weight: 600; }
.perk p { margin-top: 4px; font-size: .9688rem; color: var(--s-ink-2); }

/* ── looks: the product itself, a small copy of a site's top, on a stage ── */
.picker { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 48px); align-items: start; }
.mini { container-type: inline-size; position: relative; isolation: isolate; overflow: hidden; border-radius: 12px; background: var(--ground); color: var(--cream); font-family: var(--sans); box-shadow: 0 18px 40px -24px rgb(0 0 0 / .45); }
.mini::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--ground-line);
  -webkit-mask: var(--pattern) 0 0 / var(--pattern-size) repeat; mask: var(--pattern) 0 0 / var(--pattern-size) repeat; }
.mini[data-pattern="plain"]::before { display: none; }
.mini-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--ground-edge); font: 700 1rem var(--head); }
.mini-top span { display: inline-flex; align-items: center; gap: 8px; }
.mini-top span::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.mini-top i { padding: 5px 13px; border-radius: 999px; background: var(--cream); color: var(--ground); font: 600 .8125rem var(--sans); font-style: normal; }
.mini-hero { display: grid; grid-template-columns: minmax(0, 1fr) 42%; gap: 20px; align-items: center; padding: 28px 20px 36px; }
.mini-hi { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-weight: 600; font-size: .875rem; }
.mini-hi::before { content: ""; width: 18px; height: 2px; background: var(--accent); }
.mini-h { margin-top: 10px; font: 800 clamp(1.5rem, 5.4cqi, 2.4rem)/1 var(--head); letter-spacing: -.035em; }
.mini-h em { font-style: normal; color: var(--accent); }
.mini-lede { margin-top: 12px; font-size: .875rem; line-height: 1.5; color: color-mix(in srgb, var(--cream) 82%, transparent); }
.mini-go { display: inline-block; margin-top: 16px; padding: 8px 14px; border-radius: 9px; background: var(--accent); color: var(--ground); font-weight: 700; font-size: .8125rem; box-shadow: 0 3px 0 var(--accent-d); }
.mini .portrait { position: relative; width: 100%; aspect-ratio: 1; margin: 0; }
.mini .tag { position: absolute; left: 30%; top: 30%; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--cream); color: var(--ink); font-size: .6875rem; font-weight: 600; white-space: nowrap; }
.mini .tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #2f9e5b; }
@container (max-width: 520px) {
  .mini-top { padding: 10px 14px; font-size: .875rem; }
  .mini-hero { grid-template-columns: minmax(0, 1fr) 40%; gap: 10px; padding: 16px 14px 20px; }
  .mini-h { font-size: 1.25rem; }
  .mini-lede, .mini-go, .mini .tag { display: none; }
}
/* the photo frames (as in the design's site.css, for the small copy) */
.portrait::before { content: ""; position: absolute; inset: 0; background: var(--accent); -webkit-mask: var(--frame) center / contain no-repeat; mask: var(--frame) center / contain no-repeat; }
.portrait img { position: absolute; inset: 9%; width: 82%; height: 82%; border-radius: 50%; object-fit: cover; object-position: 49% 28%; border: 4px solid var(--ground); }
[data-frame="blob"] .portrait::before { transform: rotate(-12deg) translate(5%, -2%); }
[data-frame="blob"] .portrait img { inset: 15% 18% 13% 12%; width: 70%; height: 70%; }
[data-frame="blob"] .portrait::after { content: ""; position: absolute; right: 12%; top: 1%; width: 10%; aspect-ratio: 1; border-radius: 50%; background: var(--pop-l); }
[data-frame="hexagon"] .portrait::before { transform: rotate(8deg); }
[data-frame="hexagon"] .portrait img { inset: 12%; width: 76%; height: 76%; border: 0; border-radius: 0; clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%); }
[data-frame="arch"] .portrait::before { transform: translate(5%, 4%); }
[data-frame="arch"] .portrait img { inset: 4% 16% 4% 8%; width: 76%; height: 92%; border-radius: 999px 999px 14px 14px; }
[data-frame="ring"] .portrait::before { -webkit-mask: none; mask: none; background: none; inset: 2%; border: 3px dashed var(--accent); border-radius: 50%; }
[data-frame="ring"] .portrait::after { content: ""; position: absolute; left: 6%; bottom: 10%; width: 11%; aspect-ratio: 1; border-radius: 50%; background: var(--accent); }
[data-frame="plain"] .portrait::before { display: none; }
[data-frame="plain"] .portrait img { inset: 4%; width: 92%; height: 92%; }

.controls { display: grid; gap: 24px; }
.controls h3 { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-size: .9375rem; font-weight: 600; }
.controls h3 span { color: var(--s-muted); font-weight: 400; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opts button { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid var(--s-line); border-radius: 10px; background: var(--s-paper); cursor: pointer; }
.opts button:hover { border-color: var(--s-ink-2); }
.opts button[aria-pressed="true"] { border-color: var(--s-ink); box-shadow: 0 0 0 1px var(--s-ink); }
.sw { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--g) 0 56%, var(--a) 56%); }
.pt { width: 30px; height: 30px; border-radius: 6px; background: #183c46; }
.pt::after { content: ""; display: block; width: 100%; height: 100%; background: #6fb3c4; -webkit-mask: var(--pattern) 0 0 / 16px 16px repeat; mask: var(--pattern) 0 0 / 16px 16px repeat; }
.pt[data-pattern="plain"]::after { display: none; }
.fr { width: 30px; height: 30px; }
.who { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--s-line); border-radius: 999px; background: var(--s-paper); }
.who button { padding: 6px 14px; border: 0; border-radius: 999px; background: none; font-weight: 600; font-size: .9375rem; color: var(--s-ink-2); cursor: pointer; }
.who button[aria-pressed="true"] { background: var(--s-ink); color: #fff; }
.picked { padding-top: 18px; border-top: 1px solid var(--s-line); }
.picked p { font-weight: 600; }
.picked small { display: block; margin-top: 4px; color: var(--s-muted); font-size: .875rem; }
.picked .btn { margin-top: 16px; }

/* ── why not WordPress ── */
.compare { overflow-x: auto; }
.compare table { width: 100%; min-width: 820px; border-collapse: collapse; font-size: .9688rem; }
.compare th, .compare td { padding: 14px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--s-line); }
.compare thead th { border-top: 0; font-weight: 600; color: var(--s-ink-2); }
.compare tbody th { width: 17%; font-weight: 600; background: var(--s-bg); }
.compare td { color: var(--s-ink-2); }
.compare .us { background: var(--s-paper); color: var(--s-ink); font-weight: 500; }
.compare thead .us { color: var(--s-ink); border-radius: 10px 10px 0 0; }
.compare tbody tr:last-child .us { border-radius: 0 0 10px 10px; }
.compare tbody th, .compare thead th:first-child { position: sticky; left: 0; z-index: 1; }
.compare thead th:first-child { background: var(--s-bg); }
.compare-hint { display: none; margin: -28px 0 14px; font-size: .875rem; color: var(--s-muted); }
.worth { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 56px); margin-top: 64px; align-items: start; }
.worth h3 { font-size: clamp(1.4rem, 2.6vw, 1.875rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.worth > div > p { margin-top: 12px; color: var(--s-ink-2); }
.paid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.paid li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-top: 1px solid var(--s-line); }
.paid .ic { color: var(--s-ink-2); }
.paid b { display: block; font-weight: 600; }
.paid span { font-size: .9375rem; color: var(--s-ink-2); }

/* ── use cases: each beside the product as it would look ── */
.cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.case { display: grid; grid-template-columns: 36% minmax(0, 1fr); gap: 22px; padding: 20px; border-radius: 16px; background: var(--s-paper); box-shadow: inset 0 0 0 1px var(--s-line); }
.case .shot { align-self: start; padding: 14px; border-radius: 12px; background: var(--s-panel); }
.case .phone { padding: 4px; border-radius: 20px; }
.case .phone img { border-radius: 16px; }
.case > div { display: flex; flex-direction: column; }
.case h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -.015em; }
.case .for { margin-top: 4px; color: var(--s-ink-2); font-size: .9375rem; }
.case h4 { margin: 14px 0 6px; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--s-muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { padding: 2px 10px; border-radius: 999px; border: 1px solid var(--s-line); font-size: .8125rem; color: var(--s-ink-2); }
.chips .add { border-color: var(--s-ink-2); color: var(--s-ink); font-weight: 600; }
.send { font-size: .875rem; color: var(--s-ink-2); }
.send li { position: relative; padding-left: 14px; }
.send li::before { content: ""; position: absolute; left: 0; top: .65em; width: 5px; height: 5px; border-radius: 50%; background: var(--s-muted); }
.case .send { margin-bottom: 16px; }
.case .end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--s-line); }
.case .end b { font-size: 1.25rem; font-weight: 600; }
.case .end small { display: block; font-size: .8125rem; color: var(--s-muted); }
.case .btn { padding: 9px 16px; font-size: .9375rem; }

/* ── how it works ── */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; counter-reset: step; }
.step { padding-top: 20px; border-top: 1px solid var(--s-ink); }
.step h3 { font-size: 1.25rem; font-weight: 600; }
.step h3::before { counter-increment: step; content: counter(step); display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 10px; border-radius: 50%; border: 1px solid var(--s-ink); font-size: .875rem; vertical-align: .1em; }
.step p { margin-top: 8px; color: var(--s-ink-2); }
.step ul { margin-top: 10px; }

/* ── prices ── */
.prices { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: start; }
.base, .adds { padding: 28px; border-radius: 16px; background: var(--s-paper); box-shadow: inset 0 0 0 1px var(--s-line); }
.base { position: sticky; top: 88px; }
.base h3, .adds h3 { font-size: 1.25rem; font-weight: 600; }
.base .amount { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; }
.base .amount b { font-size: 3rem; font-weight: 600; line-height: 1; letter-spacing: -.04em; }
.base .amount span { color: var(--s-muted); }
.incl { display: grid; gap: 10px; margin-top: 20px; }
.incl li { position: relative; padding-left: 26px; }
.incl li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 11px; height: 6px; border-left: 2px solid var(--s-ink); border-bottom: 2px solid var(--s-ink); transform: rotate(-45deg); }
.base .later { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--s-line); font-size: .9375rem; color: var(--s-ink-2); }
.adds > p { margin-top: 4px; color: var(--s-muted); font-size: .9375rem; }
.addlist { margin-top: 14px; }
.addlist label { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 12px 2px; border-top: 1px solid var(--s-line); cursor: pointer; }
.addlist input { appearance: none; -webkit-appearance: none; display: grid; place-items: center; width: 22px; height: 22px; margin: 1px 0 0; border: 1.5px solid var(--s-ink-2); border-radius: 6px; background: var(--s-paper); cursor: pointer; }
.addlist input::after { content: ""; width: 10px; height: 5px; margin-top: -3px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.addlist input:checked { background: var(--s-ink); border-color: var(--s-ink); }
.addlist b { display: block; font-weight: 600; color: var(--s-ink); }
.addlist b + span { font-size: .875rem; color: var(--s-muted); }
.addlist em { font-style: normal; font-weight: 600; white-space: nowrap; }
.total { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 6px; padding-top: 18px; border-top: 1px solid var(--s-ink); }
.total b { display: block; font-size: 2.25rem; font-weight: 600; line-height: 1; letter-spacing: -.03em; }
.total small { display: block; margin-top: 4px; font-size: .875rem; color: var(--s-muted); }

/* ── questions ── */
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.faq details { border-top: 1px solid var(--s-line); }
.faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--s-muted); font-size: 1.25rem; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 0 18px; color: var(--s-ink-2); }

/* ── the last word and the footer: plain ink ── */
.final { padding: var(--s-section) 0; background: var(--s-ink); color: #f1f0ec; }
.final .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: end; }
.final .label { color: #a9a69e; }
.final h2 { margin-top: 14px; font-size: clamp(2rem, 4vw, 3rem); font-weight: 600; line-height: 1.05; letter-spacing: -.03em; }
.final h2 em { font-style: normal; color: #a9a69e; }
.final p { margin-top: 14px; font-size: 1.125rem; color: #c9c6be; }
.final .btn { background: #fff; color: var(--s-ink); }
.final .btn:hover { background: #e8e6e0; }
.final :focus-visible { outline-color: #fff; }
.foot { padding: 20px 0 28px; background: var(--s-ink); color: #a9a69e; font-size: .875rem; border-top: 1px solid #34342f; }
.foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }

/* ── phones and tablets ── */
@media (max-width: 1080px) {
  .top nav a:not(.btn) { display: none; }
  .viewer { grid-template-columns: minmax(0, 1fr); }
  .vtabs { display: flex; overflow-x: auto; gap: 4px; padding-bottom: 4px; scrollbar-width: thin; }
  .vtabs button { white-space: nowrap; }
  .perks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cases { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .hero .wrap, .anatomy, .picker, .worth, .prices, .final .wrap { grid-template-columns: minmax(0, 1fr); }
  .long, .base { position: static; }
  .long .scroll { height: 440px; }
  .picker > :first-child { position: sticky; top: 72px; z-index: 2; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts li, .facts li + li { padding: 18px 0; border-left: 0; }
  .facts li + li { border-top: 1px solid var(--s-line); }
  .specs, .faq, .paid { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .perks { grid-template-columns: minmax(0, 1fr); }
  .compare-hint { display: block; }
}
@media (max-width: 560px) {
  .case { grid-template-columns: minmax(0, 1fr); }
  .case .shot { width: 70%; justify-self: center; }
  .specs div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .top .btn { padding: 8px 14px; font-size: .875rem; }
  .base, .adds { padding: 20px; }
  .show .phone { width: 32%; }
}