/* orbytelgroup.com. Tokens and components come from the approved Data API mockup
   (dark hero over a geometric field, white and lavender sections, charcoal footer, 1080px rows). */
:root {
  --purple: #872187;
  --purple-deep: #5f1660;
  --purple-soft: #d9a8d9;
  --purple-wash: #f6f0f6;
  --ink: #222222;
  --charcoal: #353535;
  --heading: #333333;
  --text: #5e5e5e;
  --muted: #8a838a;
  --line: #e4dce4;
  --white: #ffffff;
  --ok: #2f7d4f;  --ok-bg: #e7f3ec;
  --est: #9a6a00; --est-bg: #fbf2dc;
  --copy: #5b6470; --copy-bg: #eceff2;
  --err: #a12a2a; --err-bg: #fbeaea;
  --xl: #217346; --xl-grid: #d4d4d4; --xl-head: #f3f3f3;
  --code-bg: #1b1b1b; --code-fg: #e8e2e8; --code-key: #d9a8d9; --code-str: #b9d7a8; --code-dim: #8f878f;
  --font-body: "Open Sans", Arial, Helvetica, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 16px; }
body { margin: 0; background: var(--white); color: var(--text); font-family: var(--font-body); font-size: 15px; line-height: 1.65; }
h1, h2, h3, h4 { color: var(--heading); font-weight: 600; line-height: 1.25; text-wrap: balance; margin: 0; }
p { margin: 0; }
img { max-width: 100%; height: auto; }
a { color: var(--purple); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 10; background: var(--white); padding: 8px 12px; }

.row { width: 100%; max-width: 1080px; margin-inline: auto; padding-inline: 20px; }
.row.narrow { max-width: 820px; }
.section { padding-block: 72px; }
.section.wash { background: var(--purple-wash); }
.section.tight { padding-block: 48px; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--purple); }
.section-head { display: grid; gap: 10px; max-width: 700px; margin-bottom: 36px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: clamp(24px, 3vw, 30px); }
.section-head p { font-size: 16px; }

/* header */
.site-header { background: var(--ink); position: relative; z-index: 5; }
.site-header .row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 16px; }
.logo { display: block; line-height: 0; }
.logo img { width: 150px; height: auto; }
.nav { display: flex; gap: 26px; align-items: center; font-size: 16px; font-weight: 600; }
.nav a { color: var(--white); text-decoration: none; }
.nav a:hover, .nav .sub a:hover { color: var(--purple-soft); }
.nav a[aria-current="page"], .nav .has-sub.current > a { color: #c070c0; }
.nav .has-sub { position: relative; }
.nav .has-sub > a::after { content: ""; display: inline-block; margin-left: 6px; border: 4px solid transparent; border-top-color: currentColor; transform: translateY(2px); }
.nav .sub { display: none; position: absolute; top: 100%; left: -16px; min-width: 220px; background: var(--ink); border-top: 3px solid var(--purple); padding: 8px 0; box-shadow: 0 12px 28px rgba(0,0,0,.35); }
.nav .sub a { display: block; padding: 8px 16px; font-weight: 400; font-size: 15px; }
.nav .has-sub:hover .sub, .nav .has-sub:focus-within .sub { display: block; }
.nav .has-sub::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; }
.menu-toggle { display: none; background: transparent; border: 1.5px solid rgba(255,255,255,.6); color: var(--white); border-radius: 3px; padding: 8px 12px; font: 600 14px var(--font-body); cursor: pointer; }

/* heroes */
.hero { background-color: var(--ink); background-image:
    linear-gradient(115deg, rgba(135,33,135,.22), rgba(34,34,34,0) 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='138' viewBox='0 0 160 138'%3E%3Cpath d='M0 0 L80 138 L160 0 Z M80 138 L0 0 M40 69 L120 69' fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1'/%3E%3C/svg%3E");
  color: #d6d0d6; padding-block: 56px 72px; }
.hero .row.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center; }
.hero h1 { color: var(--white); font-size: clamp(30px, 4.2vw, 44px); margin-top: 12px; }
.hero h1 em { font-style: italic; color: var(--purple-soft); }
.hero .lede { font-size: 17px; margin-top: 18px; max-width: 34em; }
.hero .brand { color: var(--purple-soft); font-size: 15px; font-weight: 700; letter-spacing: .04em; }
.hero.page { padding-block: 56px; }
.hero.page h1 { font-size: clamp(28px, 3.6vw, 38px); max-width: 26em; }
.hero.page .meta { margin-top: 10px; font-size: 14px; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn { display: inline-block; font: 600 16px/1 var(--font-body); padding: 15px 24px; border-radius: 3px; text-decoration: none; border: 2px solid transparent; cursor: pointer; }
.btn.primary { background: var(--purple); color: var(--white); }
.btn.primary:hover { background: var(--purple-deep); }
.btn.ghost { color: var(--white); border-color: rgba(255,255,255,.6); background: transparent; }
.btn.ghost:hover { border-color: var(--white); }
.btn.outline { color: var(--purple); border-color: var(--purple); background: transparent; }
.btn.outline:hover { background: var(--purple-wash); }
.btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* prose: Markdown pages (policies, careers, bio, posts) */
.prose { max-width: 760px; font-size: 16px; overflow-wrap: break-word; }
.prose > * + * { margin-top: 1em; }
.prose::after { content: ""; display: block; clear: both; }
.prose h2 { font-size: 24px; margin-top: 1.8em; }
.prose h3 { font-size: 19px; margin-top: 1.6em; }
.prose h4 { font-size: 16px; margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li + li { margin-top: .35em; }
.prose img { display: block; border: 1px solid var(--line); border-radius: 4px; }
.prose figure { margin: 1.5em 0; }
.prose figcaption { font-size: 13px; color: var(--muted); margin-top: 6px; }
.prose blockquote { margin-inline: 0; padding-left: 16px; border-left: 3px solid var(--purple); font-style: italic; color: var(--purple-deep); }
.prose table { border-collapse: collapse; width: 100%; font-size: 14px; }
.prose th, .prose td { border-bottom: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.prose iframe { width: 100%; min-height: 80vh; border: 1px solid var(--line); border-radius: 4px; }
.people { display: flex; flex-wrap: wrap; gap: 24px; }
.person { display: grid; gap: 4px; width: 160px; text-decoration: none; color: var(--text); font-size: 14px; }
.person img { width: 160px; height: 160px; object-fit: cover; border-radius: 4px; }
.person b { color: var(--heading); font-size: 16px; }
.person:hover b { color: var(--purple); }
.prose .portrait { float: right; width: 220px; margin: 0 0 16px 24px; border-radius: 4px; }

/* home: product cards and product rows */
.banner { display: block; margin: -8px auto 36px; max-width: 760px; width: 100%; }
.cards { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; }
.card { border: 1px solid var(--line); border-top: 4px solid var(--purple); border-radius: 4px; padding: 22px; display: grid; gap: 10px; align-content: start; background: var(--white); text-decoration: none; color: var(--text); }
.card:hover { border-color: var(--purple-soft); border-top-color: var(--purple); box-shadow: 0 10px 24px rgba(95,22,96,.08); }
.card img { width: 56px; height: 56px; object-fit: contain; }
.card h3 { font-size: 18px; color: var(--heading); }
.card p { font-size: 14.5px; }
.card .more { font-size: 14px; font-weight: 600; color: var(--purple); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.split.flip > :first-child { order: 2; }
.split.single { grid-template-columns: minmax(0, 1fr); max-width: 820px; }
.split h2 { font-size: clamp(24px, 3vw, 30px); }
.split .body > * + * { margin-top: 14px; }
.split .body ul { padding-left: 20px; margin-bottom: 0; }
.split .body li + li { margin-top: 6px; }
.split .media img { display: block; margin-inline: auto; }
.lists { display: grid; grid-template-columns: minmax(0,1fr); gap: 24px 32px; margin-top: 8px; }
.lists h3 { font-size: 16px; text-transform: uppercase; letter-spacing: .08em; color: var(--purple); margin-bottom: 6px; }
.lists ul { margin: 0; padding-left: 18px; font-size: 14.5px; }

/* product pages */
.highlights { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px 40px; }
.highlight { border-top: 2px solid var(--purple); padding-top: 14px; display: grid; gap: 6px; align-content: start; }
.highlight h3 { font-size: 17px; }
.highlight p { font-size: 14.5px; }
.stats { background: var(--white); border-bottom: 1px solid var(--line); }
.stats .row { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; padding-block: 32px; }
.stats.band { border: 0; background: transparent; }
.stats.band .row { padding-block: 0; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.stat b { display: block; font-size: 30px; font-weight: 600; color: var(--purple); font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat span { font-size: 14px; }
.features { display: grid; gap: 64px; }
.feature { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: start; }
.feature:nth-child(even) > .text { order: 2; }
.feature h3 { font-size: 21px; margin-bottom: 12px; }
.feature .text ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 15px; }
.shots { display: grid; gap: 10px; }
.shots.many { grid-template-columns: repeat(3, minmax(0,1fr)); }
.shots a { display: block; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: var(--white); line-height: 0; }
.shots a:hover { border-color: var(--purple-soft); }
.shots img { width: 100%; }
.shots.many img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
.shots.many a:first-child { grid-column: 1 / -1; }
.shots.many a:first-child img { aspect-ratio: auto; }
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.quote { margin: 0; background: var(--white); border-left: 3px solid var(--purple); padding: 20px 22px; display: grid; gap: 10px; }
.quote p { font-size: 16px; font-style: italic; color: var(--purple-deep); }
.quote cite { font-style: normal; font-size: 13px; color: var(--muted); }
.ticks { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px 32px; }
.tick { padding-left: 16px; border-left: 2px solid var(--purple); }
.tick h3 { font-size: 16px; margin-bottom: 4px; }
.tick p { font-size: 14px; }
.trust { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; }
.trust h3 { font-size: 19px; margin-bottom: 14px; }
.trust ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.trust li { padding-left: 16px; border-left: 2px solid var(--purple); font-size: 15px; color: var(--heading); }
.trust .cols ul { grid-template-columns: repeat(2, minmax(0,1fr)); }
.factsheet { display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 28px; align-items: center; }
.factsheet img { border: 1px solid var(--line); border-radius: 3px; box-shadow: 0 10px 24px rgba(0,0,0,.12); }
.factsheet h2 { font-size: 22px; margin-bottom: 14px; }
.video { position: relative; aspect-ratio: 16 / 9; background: var(--ink); border-radius: 4px; overflow: hidden; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* closing call to action */
.cta-band { background: var(--charcoal); color: #d6d0d6; }
.cta-band .row { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding-block: 44px; }
.cta-band h2 { color: var(--white); font-size: 24px; margin-bottom: 6px; }
.cta-band p { max-width: 640px; }

/* Data API page (from the mockup) */
.code { background: var(--code-bg); color: var(--code-fg); border-radius: 6px; font: 13px/1.6 var(--font-mono); overflow: hidden; min-width: 0; box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.code .bar { display: flex; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid #2e2a2e; color: var(--code-dim); font-size: 12px; }
.code pre { margin: 0; padding: 16px; overflow-x: auto; }
.k { color: var(--code-key); } .s { color: var(--code-str); } .d { color: var(--code-dim); } .m { color: #f0c36a; }
.why { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 48px; align-items: start; }
.since { display: grid; gap: 14px; }
.since .year { font-size: clamp(56px, 8vw, 84px); font-weight: 700; color: var(--purple); line-height: .95; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.since .year-label { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--heading); }
.since h2 { font-size: clamp(24px, 3vw, 30px); }
.since p { font-size: 16px; }
.since .motto { font-size: 18px; font-style: italic; color: var(--purple-deep); border-left: 3px solid var(--purple); padding-left: 14px; }
.why-points { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px 32px; }
.why-point { border-top: 2px solid var(--purple); padding-top: 14px; display: grid; gap: 6px; align-content: start; }
.why-point h3 { font-size: 17px; }
.why-point p { font-size: 14.5px; }
.why-point.wide { grid-column: 1 / -1; }
.naming { display: flex; flex-wrap: wrap; gap: 6px; align-items: stretch; margin-top: 8px; }
.naming span { display: grid; gap: 2px; background: var(--white); border: 1px solid var(--line); border-radius: 3px; padding: 8px 12px; font-size: 14px; color: var(--heading); font-weight: 600; }
.naming small { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.naming i { align-self: center; font-style: normal; color: var(--muted); }
.catalog { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 16px; }
.ds { border: 1px solid var(--line); border-radius: 4px; padding: 20px; display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; background: var(--white); min-width: 0; }
.ds.live { border-top: 4px solid var(--purple); }
.ds.soon { border-top: 4px dashed #c9bcc9; background: #fcfbfc; }
.ds h3 { font-size: 17px; }
.ds p { font-size: 13.5px; }
.ds .links { font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 10px; }
.ds .links b { color: var(--heading); font-weight: 600; }
.pill { justify-self: start; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.pill.on { color: var(--white); background: var(--purple); }
.pill.next { color: var(--purple-deep); background: #efdcef; }
.pill.later { color: var(--copy); background: var(--copy-bg); }
.catalog-note { margin-top: 20px; font-size: 14px; max-width: 760px; }
.ways { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 28px; align-items: stretch; }
.way { border: 1px solid var(--line); border-radius: 4px; background: var(--white); padding: 28px; display: grid; gap: 16px; align-content: start; min-width: 0; }
.way h3 { font-size: 21px; }
.way .kicker { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--purple); }
.mini-steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14.5px; }
.way .note { font-size: 13px; color: var(--muted); }
.xl { border: 1px solid #c8c8c8; border-radius: 4px; overflow: hidden; font: 12px/1.3 "Segoe UI", Arial, sans-serif; color: #222; min-width: 0; background: var(--white); }
.xl-title { background: var(--xl); color: var(--white); padding: 6px 10px; display: flex; justify-content: space-between; gap: 8px; }
.xl-ribbon { background: #f8f8f8; border-bottom: 1px solid #ddd; padding: 6px 10px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.xl-ribbon .tab { color: #555; } .xl-ribbon .tab.on { color: var(--xl); font-weight: 700; border-bottom: 2px solid var(--xl); }
.xl-refresh { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; border: 1px solid #bbb; background: var(--white); padding: 3px 8px; border-radius: 2px; }
.xl-refresh svg { width: 13px; height: 13px; }
.xl-wrap { overflow-x: auto; }
.xl table { border-collapse: collapse; width: 100%; min-width: 560px; }
.xl th, .xl td { border: 1px solid var(--xl-grid); padding: 4px 6px; white-space: nowrap; text-align: left; font-weight: 400; }
.xl thead th { background: var(--xl-head); color: #666; text-align: center; }
.xl .hdr td { background: var(--xl); color: var(--white); font-weight: 600; }
.xl td.rn { background: var(--xl-head); color: #666; text-align: center; width: 28px; }
.xl tbody tr:nth-child(odd):not(.hdr) td:not(.rn) { background: #eef6f0; }
.xl-status { background: #f3f3f3; border-top: 1px solid #ddd; padding: 4px 10px; color: #555; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.status-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: start; }
.legend { display: grid; gap: 14px; margin-top: 8px; }
.legend div { display: grid; grid-template-columns: 96px minmax(0,1fr); gap: 12px; align-items: baseline; font-size: 14px; }
.chip { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.chip.ok { color: var(--ok); background: var(--ok-bg); }
.chip.est { color: var(--est); background: var(--est-bg); }
.chip.copy { color: var(--copy); background: var(--copy-bg); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 4px; background: var(--white); min-width: 0; }
.dates { border-collapse: collapse; width: 100%; font-size: 14px; min-width: 520px; }
.dates th, .dates td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.dates th { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; background: #fbf9fb; }
.dates tr:last-child td { border-bottom: 0; }
.dates .when { display: block; color: var(--heading); font-variant-numeric: tabular-nums; }
.dates .conf { color: var(--heading); font-weight: 600; }
.caption { font-size: 12px; color: var(--muted); margin-top: 10px; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 2px solid var(--line); }
.tabs button { font: 600 15px var(--font-body); color: var(--text); background: transparent; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; padding: 10px 16px; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; }
.tabs button[aria-selected="true"] { color: var(--purple); border-bottom-color: var(--purple); }
.tabs button .soon-tag { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.panel { padding-top: 24px; }
.panel-intro { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: baseline; margin-bottom: 16px; font-size: 14px; }
.panel-intro b { color: var(--heading); }
.fields-table { border-collapse: collapse; width: 100%; font-size: 14px; min-width: 640px; }
.fields-table th, .fields-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.fields-table thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; background: #fbf9fb; position: sticky; top: 0; }
.fields-table tr.group td { background: var(--purple-wash); color: var(--purple-deep); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; padding-block: 8px; }
.fields-table td:first-child { font: 13px var(--font-mono); color: var(--heading); white-space: nowrap; }
.fields-table td:nth-child(2) { font: 12.5px var(--font-mono); color: var(--purple-deep); white-space: nowrap; }
.field-scroll { max-height: 560px; overflow: auto; border: 1px solid var(--line); border-radius: 4px; background: var(--white); }
.soon-panel { border: 1px dashed #c9bcc9; border-radius: 4px; padding: 28px; display: grid; gap: 12px; max-width: 720px; background: #fcfbfc; }
.soon-panel h3 { font-size: 19px; }
.soon-panel ul { margin: 0; padding-left: 20px; font-size: 14.5px; display: grid; gap: 4px; }
.steps-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 40px; align-items: start; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 14px; counter-increment: step; }
.steps li::before { content: counter(step); width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--purple); color: var(--purple); font-weight: 700; display: grid; place-items: center; }
.steps h3 { font-size: 17px; margin-bottom: 4px; }
.steps code, .inline-code, .prose code { font: 13px var(--font-mono); background: var(--purple-wash); color: var(--purple-deep); padding: 1px 6px; border-radius: 3px; word-break: break-word; }
.uses { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 28px; }
.use h3 { font-size: 17px; margin-bottom: 6px; }
.use p { font-size: 14px; }
.license { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.license-list { border: 1px solid var(--line); border-radius: 4px; background: var(--white); }
.license-list div { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.license-list div:last-child { border-bottom: 0; }
.license-list b { color: var(--heading); font-weight: 600; }
.license-points { margin: 16px 0 0; padding-left: 20px; display: grid; gap: 8px; font-size: 15px; }
.faq { display: grid; max-width: 820px; }
.faq details { border-bottom: 1px solid var(--line); padding-block: 16px; }
.faq summary { cursor: pointer; color: var(--heading); font-weight: 600; font-size: 16px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--purple); font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin-top: 10px; font-size: 15px; max-width: 65ch; }

/* forms */
.form-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.contact-facts { display: grid; gap: 14px; margin-top: 20px; font-size: 16px; }
.contact-facts b { display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.contact-facts a { display: inline-block; padding: 8px 0; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.form { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.form label, .form legend { font-size: 13px; font-weight: 600; color: var(--heading); }
.form label .opt { font-weight: 400; color: var(--muted); }
.form input[type=text], .form input[type=email], .form input[type=tel], .form textarea { font: 16px var(--font-body); color: var(--heading); padding: 11px 12px; border: 1px solid #cfc6cf; border-radius: 3px; background: var(--white); width: 100%; }
.form textarea { min-height: 120px; resize: vertical; }
.form fieldset { border: 0; padding: 0; margin: 0; display: flex; gap: 10px 18px; flex-wrap: wrap; }
.form fieldset legend { width: 100%; margin-bottom: 6px; }
.form fieldset label { font-weight: 400; display: inline-flex; gap: 8px; align-items: center; color: var(--text); font-size: 15px; }
.form .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { grid-column: 1 / -1; font-size: 14px; padding: 10px 14px; border-radius: 3px; color: var(--ok); background: var(--ok-bg); }
.form-msg.error { color: var(--err); background: var(--err-bg); }
.form-msg.info { color: var(--est); background: var(--est-bg); }

/* image viewer */
.viewer { border: 0; padding: 0; background: transparent; max-width: min(1200px, 96vw); max-height: 94vh; }
.viewer::backdrop { background: rgba(20,20,20,.85); }
.viewer img { display: block; max-width: 100%; max-height: 90vh; margin: auto; border-radius: 3px; }
.viewer button { position: fixed; top: 14px; right: 18px; background: var(--white); border: 0; border-radius: 3px; padding: 8px 14px; font: 600 14px var(--font-body); cursor: pointer; }

.site-footer { background: var(--ink); color: #bdb6bd; font-size: 14px; }
.site-footer .row { display: flex; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; padding-block: 28px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.site-footer a { color: #e2dbe2; text-decoration: none; }
.site-footer a:hover { color: var(--purple-soft); }

@media (max-width: 1000px) {
  .catalog { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .cards { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .hero .row.split, .why, .status-grid, .steps-grid, .ways, .license, .split, .feature, .form-layout, .trust { grid-template-columns: minmax(0,1fr); gap: 32px; }
  .split.flip > :first-child, .feature:nth-child(even) > .text { order: 0; }
  .stats .row { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ticks, .uses, .highlights { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .catalog { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .menu-toggle { display: inline-block; }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--ink); flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0 16px; border-top: 1px solid #333; }
  .nav.open { display: flex; }
  .nav > a, .nav .has-sub > a { padding: 10px 20px; }
  .nav .has-sub > a::after { display: none; }
  .nav .sub { display: block; position: static; box-shadow: none; border: 0; padding: 0 0 4px 16px; min-width: 0; }
  .nav .has-sub::before { display: none; }
}
@media (max-width: 560px) {
  .section { padding-block: 52px; }
  .ticks, .uses, .form, .catalog, .why-points, .cards, .highlights, .lists, .trust .cols ul, .shots.many { grid-template-columns: minmax(0,1fr); }
  .factsheet { grid-template-columns: 120px minmax(0,1fr); gap: 18px; }
  .row { padding-inline: 16px; }
  .prose .portrait { float: none; width: 160px; margin: 0 0 16px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media print { .site-header, .site-footer, .cta-band { display: none; } }