/* aituner website. Clean and exact: square edges, 1px rules, black and white, one accent on the primary action only,
   strong type with mono labels, line icons in the text colour. No gradients, glows, blur, pills or rounded cards. */
:root {
  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --display: ui-sans-serif, -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  --max: 1200px; --gutter: 32px; --btn-radius: 2px;
  --accent: #0a6cde; --accent-hover: #085bbe; --on-accent: #ffffff;
}
:root, :root[data-theme='dark'] {
  --bg: #0a0a0a; --surface: #0f0f0f; --line: #262626; --line-strong: #3a3a3a;
  --text: #f2f2f2; --muted: #a0a0a0; --faint: #7a7a7a; --link: #f2f2f2; --ok: #5fb98a;
  color-scheme: dark;
}
:root[data-theme='light'] {
  --bg: #ffffff; --surface: #fafafa; --line: #e5e5e5; --line-strong: #cfcfcf;
  --text: #0a0a0a; --muted: #555555; --faint: #6b6b6b; --link: #0a0a0a; --ok: #1b6e46;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.6 var(--font); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3 { font-family: var(--display); margin: 0; letter-spacing: -0.03em; }
h1 { font-size: clamp(44px, 7vw, 88px); line-height: 0.98; font-weight: 700; }
h2 { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.02; font-weight: 700; }
h3 { font-size: 20px; line-height: 1.25; font-weight: 600; letter-spacing: -0.015em; }
p { margin: 0; }
code, pre { font-family: var(--mono); font-size: 0.86em; }
:not(pre) > code { border: 1px solid var(--line); padding: 1px 5px; overflow-wrap: anywhere; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.muted { color: var(--muted); }
.after { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.label { font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--text); color: var(--bg); padding: 8px 14px; }
.skip:focus { left: 12px; }

/* top bar: solid, a single rule */
.top { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 32px; height: 64px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font: 600 18px var(--display); color: var(--text); text-decoration: none; letter-spacing: -0.02em; }
.links { display: flex; gap: 28px; margin-left: auto; }
.links a { color: var(--muted); text-decoration: none; font-size: 15px; }
.links a:hover, .links a[aria-current] { color: var(--text); }
.theme { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-strong); border-radius: var(--btn-radius); background: transparent; color: var(--text); cursor: pointer; flex: none; }

/* buttons: square, the accent only on the primary */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 1px solid var(--text); border-radius: var(--btn-radius);
  color: var(--text); text-decoration: none; font: 600 15px var(--font); background: transparent; cursor: pointer; }
.btn:hover { background: var(--text); color: var(--bg); text-decoration: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.btn.small { min-height: 36px; padding: 0 14px; font-size: 14px; }

/* hero: left-aligned, typographic */
.hero { padding: 96px 0 0; border-bottom: 1px solid var(--line); }
.hero .label { display: block; margin-bottom: 28px; }
.hero h1 { max-width: 13ch; }
.lead { font-size: clamp(18px, 1.9vw, 21px); color: var(--muted); max-width: 640px; margin-top: 28px; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 36px; align-items: center; }
.cta-row.start { margin-top: 8px; }
.req { margin-top: 18px; font: 13px var(--mono); color: var(--faint); }
.cmd { display: flex; align-items: stretch; max-width: 520px; margin-top: 20px; border: 1px solid var(--line-strong); }
.cmd code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; border: 0; padding: 13px 16px; font-size: 14px; scrollbar-width: none; }
.cmd .p { color: var(--faint); user-select: none; }
.cmd.inline { margin-top: 8px; }
.copy { flex: none; padding: 0 16px; border: 0; border-left: 1px solid var(--line-strong); background: transparent; color: var(--text); font: 500 13px var(--mono); cursor: pointer; }
.copy:hover { background: var(--text); color: var(--bg); }
.copy.done { color: var(--ok); }
.shot { margin-top: 72px; border: 1px solid var(--line); border-bottom: 0; }
.frame { border: 1px solid var(--line); }
.frame img, .shot img { width: 100%; }

/* works-with strip */
.works { border-bottom: 1px solid var(--line); }
.works .wrap { display: flex; flex-wrap: wrap; gap: 14px 40px; align-items: center; padding-top: 26px; padding-bottom: 26px; }
.works ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px 32px; font: 500 16px var(--font); color: var(--text); }

/* sections */
section.band { padding: 112px 0; border-bottom: 1px solid var(--line); }
section.band.flush { padding-top: 0; }
.head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: end; margin-bottom: 64px; }
.head .label { display: block; margin-bottom: 20px; }
.head p { color: var(--muted); font-size: 19px; }
.feature { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; align-items: start; padding: 56px 0; border-top: 1px solid var(--line); }
.feature .text { display: grid; gap: 16px; }
.feature .text p { color: var(--muted); }
.feature .num { font: 500 13px var(--mono); color: var(--faint); }
.feature ul { margin: 6px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.feature li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--text); }

/* a ruled grid of cells */
.cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.cells > * { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 32px; display: grid; gap: 12px; align-content: start; }
.cells p { color: var(--muted); font-size: 16px; }
.ico { width: 40px; height: 40px; border: 1px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: center; color: var(--text); }
.ico svg { width: 20px; height: 20px; }
.steps { counter-reset: s; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--text); }
.steps li { counter-increment: s; padding: 24px 24px 0 0; display: grid; gap: 8px; align-content: start; }
.steps li::before { content: '0' counter(s); font: 500 13px var(--mono); color: var(--faint); }
.steps strong { font-size: 19px; font-weight: 600; }
.steps span { color: var(--muted); font-size: 16px; }
.duo { display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 3fr); gap: 24px; align-items: end; margin-top: 64px; }
.phone { border: 1px solid var(--line-strong); }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.facts div { padding: 28px 28px 0 0; color: var(--muted); }
.facts strong { display: block; color: var(--text); font-size: 19px; font-weight: 600; margin-bottom: 8px; }
.faq { border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; font-size: 18px; font-weight: 600; min-height: 68px; display: flex; align-items: center; gap: 16px; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; margin-left: auto; font: 400 22px var(--mono); color: var(--faint); }
details[open] summary::after { content: '−'; }
details > div { padding: 0 0 24px; color: var(--muted); max-width: 760px; }
.final .wrap { display: flex; justify-content: space-between; align-items: end; gap: 32px; flex-wrap: wrap; }

/* download */
.dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.dl > div { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 36px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; }
.dl p { color: var(--muted); }
.release { font: 13px var(--mono); color: var(--muted); margin-top: 20px; }
.sha { font: 12px var(--mono); color: var(--faint); overflow-wrap: anywhere; }
.notice { border: 1px solid var(--text); padding: 18px 22px; margin-bottom: 40px; color: var(--muted); }
.notice strong { color: var(--text); }
.hero-tight { padding-bottom: 72px; }
.facts.near { margin-top: 48px; }
[hidden] { display: none !important; }

/* docs */
.docs { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 0; }
.docnav { position: sticky; top: 64px; align-self: start; display: grid; border-right: 1px solid var(--line); padding: 40px 24px 40px 0; min-height: calc(100vh - 64px); align-content: start; }
.docnav a { color: var(--muted); text-decoration: none; padding: 8px 0 8px 14px; font-size: 15px; border-left: 2px solid transparent; }
.docnav a:hover { color: var(--text); }
.docnav a[aria-current] { color: var(--text); font-weight: 600; border-left-color: var(--text); }
.doc { min-width: 0; max-width: 820px; padding: 40px 0 112px 56px; }
.doc h1 { font-size: clamp(36px, 4.6vw, 56px); margin-bottom: 20px; }
.doc h2 { font-size: 28px; margin: 56px 0 14px; padding-top: 24px; border-top: 1px solid var(--line); scroll-margin-top: 80px; }
.doc h3 { margin: 28px 0 8px; }
.doc p, .doc li { color: var(--muted); }
.doc p + p { margin-top: 14px; }
.doc ul, .doc ol:not(.crumbs) { padding-left: 22px; display: grid; gap: 8px; margin: 12px 0; }
.doc strong { color: var(--text); }
.doc pre { border: 1px solid var(--line); padding: 16px 18px; overflow-x: auto; margin: 16px 0; line-height: 1.6; background: var(--surface); }
.doc table { border-collapse: collapse; width: 100%; font-size: 15px; margin: 18px 0; border-top: 1px solid var(--text); }
.doc th, .doc td { text-align: left; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc th { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--faint); }
.doc td { color: var(--muted); }
.doc .frame { margin: 28px 0; }
.tablewrap { overflow-x: auto; }
.tablewrap table { min-width: 560px; }
.crumbs { list-style: none; padding: 0; margin: 0 0 28px; display: flex; gap: 10px; font: 12px var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); }
.crumbs li + li::before { content: '/'; margin-right: 10px; }
.crumbs a { color: var(--faint); text-decoration: none; }
.lede { font-size: 20px; }
.pager { display: grid; grid-template-columns: 1fr 1fr; margin-top: 72px; border-top: 1px solid var(--line); }
.pager a { display: grid; gap: 4px; padding: 20px 0; text-decoration: none; color: var(--text); font-weight: 600; }
.pager a span { font: 12px var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); font-weight: 400; }
.pager .next { text-align: right; grid-column: 2; }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin-top: 36px; }
.cards a { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 22px 24px; text-decoration: none; display: grid; gap: 6px; }
.cards a:hover { background: var(--surface); }
.cards a strong { color: var(--text); font-size: 17px; }
.cards a span { color: var(--muted); font-size: 15px; }

/* footer */
.foot { padding: 56px 0 72px; color: var(--muted); font-size: 15px; }
.foot .wrap { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.fbrand { display: grid; gap: 10px; align-content: start; }
.fbrand span { font-weight: 600; color: var(--text); font-size: 18px; }
.fbrand p { color: var(--faint); }
.foot nav { display: grid; gap: 8px; align-content: start; }
.foot h2 { font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--faint); margin-bottom: 6px; }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--text); }

@media (max-width: 960px) {
  .head, .feature, .duo, .dl { grid-template-columns: minmax(0, 1fr); }
  .head { gap: 16px; }
  .feature { gap: 28px; }
  .cells, .facts { grid-template-columns: minmax(0, 1fr); }
  .facts div { padding-right: 0; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .docs { grid-template-columns: minmax(0, 1fr); }
  .docnav { position: static; min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); padding: 20px 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
  .docnav a { padding: 6px 0; border-left: 0; }
  .docnav a[aria-current] { border-left: 0; text-decoration: underline; text-underline-offset: 6px; }
  .doc { padding: 32px 0 80px; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .foot .wrap { grid-template-columns: 1fr 1fr; }
  .phone { max-width: 280px; }
}
@media (max-width: 640px) {
  :root { --gutter: 20px; }
  body { font-size: 16px; }
  /* phones: the brand and theme on one row, the main links on a full-width row below (no hidden menu) */
  html { scroll-padding-top: 124px; }
  .top .wrap { flex-wrap: wrap; height: auto; gap: 0; }
  .top .logo { min-height: 56px; }
  .top .theme { margin-left: auto; }
  .top .cta { display: none; }
  .links { order: 3; flex: 0 0 100%; margin: 0; gap: 0; justify-content: space-between; border-top: 1px solid var(--line); }
  .links a { display: inline-flex; align-items: center; min-height: 44px; }
  .hero { padding-top: 56px; }
  section.band { padding: 72px 0; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .cells > *, .dl > div { padding: 24px; }
  .foot .wrap { grid-template-columns: 1fr; }
}
@media (pointer: coarse) { .copy, .theme { min-width: 44px; min-height: 44px; } .docnav a { padding-top: 10px; padding-bottom: 10px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }