/* Adseye — the site.

   One system for every page: the header and footer, the type, the buttons,
   the sections and the components the home, pricing, guides and check pages
   are built from. Per-page rules live at the end of this file under their
   page's name, because they are few. Mobile first: the base rules are the
   390px layout and the media queries add width.

   Everything works without JavaScript. Tabs are radio inputs, questions are
   <details>, the calculator is a form, the menu is a row of links. */

/* ---------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--s6);
}

body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--heading);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.025em;
  text-wrap: balance;
}
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); letter-spacing: -.015em; line-height: 1.25; }
h4 { font-size: var(--body); letter-spacing: -.01em; line-height: 1.3; }

/* The one serif: italic, in the big lines only. */
.serif, h1 em, h2 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--green);
}
.on-ink h1 em, .on-ink h2 em, .on-ink .serif { color: var(--mist); }
.on-mint h1 em, .on-mint h2 em, .on-mint .serif { color: var(--ink); }

p { margin: 0; }
p + p { margin-top: var(--s4); }
ul, ol { margin: 0; padding: 0; }
figure { margin: 0; }
strong, b { font-weight: 600; color: var(--heading); }
small, .small { font-size: var(--small); }
.tiny { font-size: var(--tiny); }
.muted { color: var(--muted); }
.mono, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--green-deep); text-decoration-thickness: 2px; }
.on-ink a:hover { color: var(--white); }
.on-mint a:hover { color: var(--ink); }

img, svg { max-width: 100%; }
img { height: auto; display: block; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
.on-ink :focus-visible { outline-color: var(--mint); }
.on-mint :focus-visible { outline-color: var(--ink); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: var(--s4); top: -80px; z-index: 100;
  background: var(--ink); color: var(--white); padding: var(--s3) var(--s4);
  font-weight: 600; text-decoration: none; border-radius: var(--radius);
}
.skip:focus { top: var(--s4); }

::selection { background: var(--mint); color: var(--ink); }

/* ---------------------------------------------------------------- layout */

.container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
.narrow { max-width: var(--narrow); }

.section { padding-block: var(--section); }
.section--soft { background: var(--soft); }
.section--tight { padding-block: calc(var(--section) * .6); }
.section--flush-top { padding-top: 0; }

.section-head { max-width: 760px; margin-bottom: var(--s8); }
.section-head h2 { margin-top: var(--s3); }
.section-head p { margin-top: var(--s4); font-size: var(--lead); color: var(--muted); max-width: 34em; }
@media (min-width: 900px) { .section-head { margin-bottom: var(--s12); } }

.eyebrow {
  display: inline-block;
  font-family: var(--mono); font-size: var(--label); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; line-height: 1.4;
  color: var(--green);
}
.on-ink .eyebrow { color: var(--mist); }
.on-mint .eyebrow { color: var(--ink); }

.stack > * + * { margin-top: var(--s4); }
.grid { display: grid; gap: var(--s4); }
@media (min-width: 700px) { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .grid { gap: var(--s6); }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: var(--hit); padding: 0 var(--s6);
  border: 1.5px solid var(--ink); border-radius: var(--radius);
  background: var(--ink); color: var(--white);
  font-weight: 600; font-size: var(--body); line-height: 1.2; text-decoration: none;
  transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { background: var(--field); border-color: var(--field); color: var(--white); }
.btn .i { width: 1em; height: 1em; flex: none; }

.btn--secondary { background: var(--white); color: var(--ink); }
.btn--secondary:hover { background: var(--soft); border-color: var(--ink); color: var(--ink); }

.btn--mint { background: var(--mint); border-color: var(--mint); color: var(--ink); }
.btn--mint:hover { background: #18CC71; border-color: #18CC71; color: var(--ink); }

.on-ink .btn--secondary { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, .5); }
.on-ink .btn--secondary:hover { background: rgba(255, 255, 255, .1); border-color: var(--white); color: var(--white); }

.btn--sm { min-height: 40px; padding: 0 var(--s4); font-size: var(--small); }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .6; cursor: default; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); }
@media (max-width: 479px) { .btn-row--stack .btn { flex: 1 1 100%; } }

/* A text link with an arrow, used at the foot of cards. */
.more { display: inline-flex; align-items: center; gap: .4em; font-weight: 600; text-decoration: none; min-height: 32px; }
.more .i { width: 1em; height: 1em; transition: transform .15s var(--ease); }
.more:hover .i { transform: translateX(3px); }
.more:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- header */

.site-head { background: var(--white); border-bottom: 1px solid var(--border); }
.site-head__row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s3) var(--s4); min-height: 64px; padding-block: var(--s2);
}
.logo { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.logo img { height: 40px; width: auto; }
.site-head__cta { display: flex; align-items: center; gap: var(--s3); }
.site-head__login { font-weight: 600; text-decoration: none; color: var(--ink); padding: var(--s2) 0; white-space: nowrap; }
.site-head__login:hover { color: var(--green); text-decoration: underline; }
.site-head__cta .btn { white-space: nowrap; }
.site-head__cta .cta-long { display: none; }
@media (min-width: 600px) { .site-head__cta .cta-long { display: inline; } .site-head__cta .cta-short { display: none; } }

.site-head__nav {
  order: 3; width: 100%;
  display: flex; justify-content: space-between; gap: var(--s3);
  border-top: 1px solid var(--border); padding: var(--s2) 0 var(--s1);
}
.site-head__nav a {
  color: var(--ink); text-decoration: none; font-weight: 500; font-size: var(--small);
  padding: var(--s2) 0; white-space: nowrap; border-bottom: 2px solid transparent;
}
.site-head__nav a:hover { color: var(--green); }
.site-head__nav a[aria-current="page"] { color: var(--green); border-bottom-color: var(--mint); }
@media (max-width: 479px) { .site-head__nav .nav-more { display: none; } }

@media (min-width: 900px) {
  .site-head__row { flex-wrap: nowrap; min-height: 76px; }
  .logo img { height: 48px; }
  .site-head__nav { order: 0; width: auto; border: 0; padding: 0; gap: var(--s6); margin-left: var(--s4); }
  .site-head__nav a { font-size: var(--body); }
  .site-head__cta { gap: var(--s5); }
}

/* ---------------------------------------------------------------- footer */

.site-foot { padding-block: var(--s12) var(--s8); }
.site-foot__top { display: grid; gap: var(--s8); }
.site-foot__brand p { margin-top: var(--s3); max-width: 28em; }
.site-foot__brand .logo img { height: 38px; }
.site-foot__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--s4); }
.site-foot__cols h3 { font-family: var(--mono); font-size: var(--label); letter-spacing: .12em; text-transform: uppercase; font-weight: 500; color: var(--mist); margin-bottom: var(--s3); }
.site-foot__cols ul { list-style: none; display: grid; gap: var(--s1); }
.site-foot__cols a { display: inline-block; padding: 5px 0; color: var(--white); text-decoration: none; }
.site-foot__cols a:hover { text-decoration: underline; }
.site-foot__line { margin-top: var(--s10); padding-top: var(--s5); border-top: 1px solid var(--border); font-size: var(--tiny); color: var(--mist); display: grid; gap: var(--s2); }
.site-foot__line .placeholder { color: var(--mist); opacity: .85; }
@media (min-width: 700px) {
  .site-foot__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .site-foot { padding-block: var(--s16) var(--s8); }
  .site-foot__top { grid-template-columns: 1.2fr 2fr; gap: var(--s12); align-items: start; }
  .site-foot__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- cards */

.card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--s6); display: flex; flex-direction: column; gap: var(--s3);
}
.card h3 { margin-top: var(--s2); }
.card p { color: var(--muted); }
.card .more { margin-top: auto; padding-top: var(--s3); }
.card__num { font-family: var(--mono); font-size: var(--label); letter-spacing: .12em; color: var(--green); }
.card--soft { background: var(--soft); border-color: transparent; }
.on-ink .card { background: var(--soft); border-color: var(--border); }
.on-ink .card p { color: var(--text); }
@media (min-width: 900px) { .card { padding: var(--s8); } }

/* A row of plain facts: mono label, big line, sentence. */
.facts { display: grid; gap: var(--s5); }
.fact { padding-top: var(--s4); border-top: 1px solid var(--border); }
.fact .eyebrow { display: block; }
.fact b { display: block; font-size: var(--h3); margin-top: var(--s2); letter-spacing: -.015em; color: var(--heading); }
.fact p { margin-top: var(--s2); color: var(--text); font-size: var(--small); }
@media (min-width: 700px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s8); } }

/* ---------------------------------------------------------------- details */

details.q { border-top: 1px solid var(--border); }
details.q:last-of-type { border-bottom: 1px solid var(--border); }
details.q summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s4);
  padding: var(--s4) 0; font-weight: 600; color: var(--heading); min-height: var(--hit);
}
details.q summary::-webkit-details-marker { display: none; }
details.q summary::after {
  content: ""; flex: none; width: 12px; height: 12px;
  border-right: 2px solid var(--green); border-bottom: 2px solid var(--green);
  transform: rotate(45deg); margin-right: 4px; transition: transform .15s var(--ease);
}
details.q[open] summary::after { transform: rotate(-135deg); }
details.q .q__body { padding: 0 0 var(--s5); max-width: 62ch; color: var(--text); }
details.q .q__body p + p { margin-top: var(--s3); }

/* ---------------------------------------------------------------- hero */

.hero { padding-block: var(--s8) 0; overflow: hidden; }
.hero__copy .eyebrow { margin-bottom: var(--s4); }
.hero h1 { font-size: var(--display); line-height: .98; letter-spacing: -.035em; }
.hero h1 em { display: block; }
.hero__lead { margin-top: var(--s5); font-size: var(--lead); max-width: 32em; color: var(--text); }
.hero .btn-row { margin-top: var(--s6); }
.hero__note { margin-top: var(--s4); font-size: var(--tiny); color: var(--muted); }

.hero__max { margin-top: var(--s8); display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--border); background: var(--white); }
.hero__max img { height: 200px; width: auto; grid-column: 1; grid-row: 1; }
.hero__max figcaption { grid-column: 2; grid-row: 1; }
.hero__max figcaption { font-size: var(--small); color: var(--muted); }
.hero__max figcaption b { display: block; font-size: var(--h3); color: var(--heading); letter-spacing: -.015em; }
.hero__max figcaption a { display: inline-block; margin-top: var(--s2); }

@media (min-width: 900px) {
  .hero { padding-block: var(--s16) var(--s12); }
  .hero .container { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--s12); align-items: center; }
  .hero__max { margin: 0; border: 0; padding: 0; grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .hero__max img { height: min(520px, 48vw); }
  .hero__max figcaption { margin-top: var(--s2); }
}

/* ---------------------------------------------------------------- platforms */

.platforms__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s5); }
.platforms__head h2 { font-size: var(--h3); }
.platforms__legend { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); font-size: var(--tiny); color: var(--muted); }
.platforms__legend li { display: inline-flex; align-items: center; gap: 6px; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.dot--now { background: var(--mint); box-shadow: 0 0 0 1px var(--green); }
.dot--wait { background: var(--white); box-shadow: 0 0 0 1.5px var(--muted); }

.chips { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.chip {
  display: flex; align-items: center; gap: var(--s3); min-height: 56px;
  padding: var(--s2) var(--s3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--white);
  font-weight: 600; font-size: var(--tiny); color: var(--heading); line-height: 1.25;
}
.chip img { width: 24px; height: 24px; flex: none; }
.chip .dot { margin-left: auto; }
.chip small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; }
.platforms__note { margin-top: var(--s5); font-size: var(--small); color: var(--muted); max-width: 70ch; }
@media (min-width: 600px) { .chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } .chip { font-size: var(--small); } }
@media (min-width: 900px) { .chips { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); } .chip { padding: var(--s3) var(--s4); min-height: 64px; } .chip img { width: 28px; height: 28px; } }
@media (min-width: 1100px) { .chips { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- rhythm band */

.rhythm { display: grid; gap: var(--s5); }
.rhythm__item { border-top: 1px solid var(--border); padding-top: var(--s4); }
.rhythm__item .eyebrow { display: block; }
.rhythm__item b { display: block; margin-top: var(--s2); font-size: var(--h3); letter-spacing: -.015em; color: var(--white); }
.rhythm__item p { margin-top: var(--s2); font-size: var(--small); }
@media (min-width: 700px) { .rhythm { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s8) var(--s6); } }
@media (min-width: 1024px) { .rhythm { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- gallery (radio tabs) */

.gallery__tabs { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s5); }
.gallery__tabs label {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s4);
  border: 1px solid var(--border); border-radius: 999px; background: var(--white);
  font-weight: 500; font-size: var(--small); color: var(--ink); cursor: pointer;
  transition: background-color .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.gallery__tabs label:hover { background: var(--soft); }
.gallery__panel { display: none; }
.gallery__panel img { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.gallery__panel figcaption { margin-top: var(--s4); display: grid; gap: var(--s1); }
.gallery__panel figcaption b { font-size: var(--body); }
.gallery__panel figcaption span { color: var(--muted); font-size: var(--small); max-width: 62ch; }
.gallery__note { margin-top: var(--s5); font-size: var(--tiny); color: var(--muted); }

#g-overview:checked ~ .gallery__tabs label[for="g-overview"],
#g-review:checked ~ .gallery__tabs label[for="g-review"],
#g-approvals:checked ~ .gallery__tabs label[for="g-approvals"],
#g-customers:checked ~ .gallery__tabs label[for="g-customers"],
#g-leads:checked ~ .gallery__tabs label[for="g-leads"],
#g-report:checked ~ .gallery__tabs label[for="g-report"],
#g-audit:checked ~ .gallery__tabs label[for="g-audit"],
#g-editor:checked ~ .gallery__tabs label[for="g-editor"] { background: var(--ink); color: var(--white); border-color: var(--ink); }

#g-overview:focus-visible ~ .gallery__tabs label[for="g-overview"],
#g-review:focus-visible ~ .gallery__tabs label[for="g-review"],
#g-approvals:focus-visible ~ .gallery__tabs label[for="g-approvals"],
#g-customers:focus-visible ~ .gallery__tabs label[for="g-customers"],
#g-leads:focus-visible ~ .gallery__tabs label[for="g-leads"],
#g-report:focus-visible ~ .gallery__tabs label[for="g-report"],
#g-audit:focus-visible ~ .gallery__tabs label[for="g-audit"],
#g-editor:focus-visible ~ .gallery__tabs label[for="g-editor"] { outline: 3px solid var(--ink); outline-offset: 3px; }

#g-overview:checked ~ .gallery__panel--overview,
#g-review:checked ~ .gallery__panel--review,
#g-approvals:checked ~ .gallery__panel--approvals,
#g-customers:checked ~ .gallery__panel--customers,
#g-leads:checked ~ .gallery__panel--leads,
#g-report:checked ~ .gallery__panel--report,
#g-audit:checked ~ .gallery__panel--audit,
#g-editor:checked ~ .gallery__panel--editor { display: block; }
.gallery__note .more { margin-left: var(--s2); }

/* ---------------------------------------------------------------- how it works */

.steps { display: grid; gap: var(--s4); counter-reset: step; }
.step { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--s6); display: flex; flex-direction: column; gap: var(--s3); }
.step::before { counter-increment: step; content: "0" counter(step); font-family: var(--mono); font-size: var(--label); letter-spacing: .12em; color: var(--green); }
.step h3 { margin-top: var(--s1); }
.step p { color: var(--muted); }
.step .more { margin-top: auto; padding-top: var(--s2); }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); } .step { padding: var(--s8); } }
.setup-q { margin-top: var(--s8); max-width: var(--narrow); }

/* ---------------------------------------------------------------- pricing */

.plans { display: grid; gap: var(--s4); }
.plan { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--s6); display: flex; flex-direction: column; }
.plan--featured { border: 2px solid var(--ink); background: #F5FBF7; }
.pill { display: inline-flex; align-items: center; width: fit-content; padding: 4px 10px; border-radius: 999px; background: var(--mint-soft); color: var(--green-deep); font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; }
.plan h3 { margin-top: var(--s5); font-size: 1.5rem; }
.price { margin-top: var(--s4); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s3); }
.price__amount { font-size: 2.75rem; font-weight: 600; letter-spacing: -.04em; line-height: 1; color: var(--heading); font-variant-numeric: tabular-nums; }
.price__per { font-size: var(--small); color: var(--muted); }
.plan > p { margin-top: var(--s4); color: var(--text); }
.ticks { list-style: none; display: grid; gap: var(--s3); margin: var(--s5) 0 var(--s6); }
.ticks li { display: flex; gap: var(--s3); align-items: flex-start; font-size: var(--small); }
.ticks .i { width: 18px; height: 18px; flex: none; color: var(--green); margin-top: 2px; }
.plan .btn { margin-top: auto; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); } .plan { padding: var(--s8); } .plan--featured { padding: calc(var(--s8) - 1px); } }

.calc { margin-top: var(--s6); background: var(--soft); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--s6); display: grid; gap: var(--s5); }
.calc__intro h3 { margin-top: var(--s2); }
.calc__row { display: grid; gap: var(--s4); }
.calc label { display: grid; gap: 6px; font-weight: 500; font-size: var(--small); }
.calc select {
  min-height: var(--hit); width: 100%; padding: 0 var(--s4); border: 1px solid #B9CDC2; border-radius: var(--radius); background: var(--white); color: var(--ink);
}
.calc .tick { display: flex; align-items: center; gap: var(--s3); min-height: var(--hit); font-weight: 500; }
.calc .tick input { width: 22px; height: 22px; accent-color: var(--ink); margin: 0; flex: none; }
.calc__total { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: var(--s4); }
.calc__total output { font-size: 2.5rem; font-weight: 600; letter-spacing: -.04em; line-height: 1; color: var(--heading); font-variant-numeric: tabular-nums; }
.calc__total small { color: var(--muted); }
.calc__breakdown { width: 100%; font-size: var(--small); color: var(--muted); }
.calc__go { justify-self: start; }
@media (min-width: 700px) {
  .calc { grid-template-columns: 1.2fr 1fr; align-items: end; padding: var(--s8); }
  .calc__intro { grid-column: 1 / -1; }
  .calc__row { grid-template-columns: 140px 1fr; align-items: end; }
  .calc__total { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .calc { grid-template-columns: 1fr auto auto auto; align-items: center; column-gap: var(--s8); }
  .calc__intro { grid-column: auto; }
  .calc__row { grid-column: auto; grid-template-columns: 150px auto; }
  .calc__go { grid-column: auto; justify-self: center; }
  .calc__total { grid-column: auto; border: 0; padding: 0; justify-self: end; text-align: right; display: grid; justify-items: end; gap: 2px; }
  .calc__total output { grid-row: 1; }
  .calc__total small { grid-row: 1; align-self: baseline; }
  .calc__total { grid-template-columns: auto auto; }
  .calc__breakdown { grid-column: 1 / -1; text-align: right; white-space: nowrap; }
}
.pricing__fine { margin-top: var(--s5); font-size: var(--tiny); color: var(--muted); max-width: 70ch; }
.pricing__more { margin-top: var(--s5); }
.faq { margin-top: var(--s10); max-width: 820px; }
.faq h2 { font-size: var(--h3); margin-bottom: var(--s3); }

/* ---------------------------------------------------------------- guide CTA, closing */

.cta-card { background: var(--soft); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--s6); display: grid; gap: var(--s5); align-items: center; }
.cta-card h2 { font-size: var(--h3); margin-top: var(--s2); }
.cta-card p { margin-top: var(--s2); color: var(--muted); }
@media (min-width: 900px) { .cta-card { grid-template-columns: 1fr auto; padding: var(--s10); } .cta-card h2 { font-size: 1.75rem; } }

.closing { padding-block: var(--section); }
.closing h2 { font-size: var(--display); line-height: .98; letter-spacing: -.035em; }
.closing p { margin-top: var(--s5); font-size: var(--lead); max-width: 30em; }
.closing .btn-row { margin-top: var(--s8); }
.closing .i { width: 44px; height: 44px; color: var(--ink); margin-bottom: var(--s4); }

/* ---------------------------------------------------------------- page heads */

.page-head { padding-block: var(--s10) var(--s8); }
.page-head h1 { margin-top: var(--s3); }
.page-head p { margin-top: var(--s4); font-size: var(--lead); color: var(--muted); max-width: 34em; }
@media (min-width: 900px) { .page-head { padding-block: var(--s16) var(--s12); } }

/* ---------------------------------------------------------------- guides */

.guide-groups { display: grid; gap: var(--s10); }
.guide-group h2 { font-size: var(--h3); margin-bottom: var(--s4); }
.guide-cards { display: grid; gap: var(--s4); }
.guide-card { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--white); text-decoration: none; color: inherit; transition: background-color .15s var(--ease); }
.guide-card:hover { background: var(--soft); color: inherit; }
.guide-card h3 { font-size: 1.125rem; }
.guide-card p { color: var(--muted); font-size: var(--small); }
.guide-card .guide-card__meta { margin-top: auto; padding-top: var(--s3); font-family: var(--mono); font-size: var(--label); letter-spacing: .08em; text-transform: uppercase; color: var(--green); }
@media (min-width: 700px) { .guide-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .guide-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); } }

.article-wrap { display: grid; gap: var(--s10); padding-block: var(--s8) var(--section); }
.article-aside { display: none; }
.article { max-width: var(--narrow); }
.article__meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.article h1 { margin-top: var(--s3); }
.article__intro { margin-top: var(--s5); font-size: var(--lead); color: var(--text); }
.before { margin-top: var(--s8); background: var(--soft); border-radius: var(--radius-lg); padding: var(--s5) var(--s6); }
.before h2 { font-size: var(--body); font-family: var(--mono); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; font-size: var(--label); color: var(--green); }
.before ul { margin-top: var(--s3); padding-left: 1.2em; display: grid; gap: var(--s2); color: var(--text); }
.article__steps { margin-top: var(--s8); list-style: none; counter-reset: guide; }
.article__steps li { counter-increment: guide; display: grid; grid-template-columns: 40px 1fr; gap: var(--s3); padding: var(--s5) 0; border-top: 1px solid var(--border); }
.article__steps li::before { content: counter(guide, decimal-leading-zero); font-family: var(--mono); font-size: var(--label); letter-spacing: .1em; color: var(--green); padding-top: 6px; }
.article__steps h2 { font-size: 1.25rem; letter-spacing: -.015em; line-height: 1.3; }
.article__steps p { margin-top: var(--s2); color: var(--text); }
.article__steps p + p { margin-top: var(--s3); }
.article__issues { margin-top: var(--s10); }
.article__issues h2 { font-size: var(--h3); margin-bottom: var(--s3); }
.article__next { margin-top: var(--s10); background: var(--soft); border-radius: var(--radius-lg); padding: var(--s6); }
.article__next h2 { font-size: var(--h3); }
.article__next p { margin-top: var(--s2); color: var(--muted); }
.article__next .btn-row { margin-top: var(--s5); }
.article ul.plain { padding-left: 1.2em; display: grid; gap: var(--s2); margin-top: var(--s3); }
.article table { width: 100%; border-collapse: collapse; margin-top: var(--s4); font-size: var(--small); }
.article th, .article td { text-align: left; padding: var(--s3) var(--s2); border-bottom: 1px solid var(--border); vertical-align: top; }
.article th { font-family: var(--mono); font-size: var(--label); letter-spacing: .1em; text-transform: uppercase; font-weight: 500; color: var(--muted); }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (min-width: 1024px) {
  .article-wrap { grid-template-columns: 240px minmax(0, 1fr); gap: var(--s16); }
  .article-aside { display: block; position: sticky; top: var(--s6); align-self: start; }
  .article-aside h2 { font-family: var(--mono); font-size: var(--label); letter-spacing: .12em; text-transform: uppercase; font-weight: 500; color: var(--muted); margin-bottom: var(--s3); margin-top: var(--s5); }
  .article-aside h2:first-child { margin-top: 0; }
  .article-aside ul { list-style: none; display: grid; gap: 2px; }
  .article-aside a { display: block; padding: 6px 0; font-size: var(--small); color: var(--ink); text-decoration: none; }
  .article-aside a:hover { color: var(--green); text-decoration: underline; }
  .article-aside a[aria-current="page"] { color: var(--green); font-weight: 600; }
}

/* ---------------------------------------------------------------- the free check */

.check { margin-top: var(--s6); max-width: 620px; }
.check__row { display: grid; gap: var(--s3); }
.check__input {
  min-height: var(--hit); width: 100%; padding: 0 var(--s4);
  border: 1px solid #B9CDC2; border-radius: var(--radius); background: var(--white);
  font-family: var(--sans); font-size: var(--body); color: var(--ink);
}
.check__input::placeholder { color: var(--muted); }
.check__fine { margin-top: var(--s3); font-size: var(--tiny); color: var(--muted); }
.check__error { margin-top: var(--s4); padding: var(--s3) var(--s4); background: var(--red-bg); color: var(--red-ink); border-radius: var(--radius); font-size: var(--small); }
@media (min-width: 600px) { .check__row { grid-template-columns: 1fr auto; } }

.results__head { max-width: 46ch; }
.results__head h2 { margin-top: var(--s3); }
.results__head p { margin-top: var(--s4); font-size: var(--lead); color: var(--text); }
.findings { list-style: none; margin-top: var(--s8); display: grid; gap: var(--s3); }
.finding { background: var(--soft); border-left: 4px solid var(--border); border-radius: 0 var(--radius) var(--radius) 0; padding: var(--s4) var(--s5); }
.finding__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.finding__head h3 { font-size: 1.125rem; }
.finding__state { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; padding: 4px 8px; border-radius: 3px; background: var(--soft-2); color: var(--ink-2); }
.finding__found { margin-top: var(--s2); color: var(--text); font-size: var(--small); }
.finding__why { margin-top: 6px; color: var(--muted); font-size: var(--small); }
.finding--ok { border-left-color: var(--green); }
.finding--ok .finding__state { background: var(--mint-soft); color: var(--green-deep); }
.finding--warn { border-left-color: #C98A1B; }
.finding--warn .finding__state { background: var(--amber-bg); color: var(--amber-ink); }
.finding--missing { border-left-color: var(--red-ink); background: #FBF1EF; }
.finding--missing .finding__state { background: var(--red-bg); color: var(--red-ink); }
.finding--info .finding__state { background: var(--blue-bg); color: var(--blue-ink); }
.plain-list { margin-top: var(--s10); max-width: 62ch; }
.plain-list h3 { font-size: var(--h3); }
.plain-list ul { list-style: none; margin-top: var(--s4); }
.plain-list li { padding: var(--s3) 0; border-top: 1px solid var(--border); font-size: var(--small); color: var(--text); }
.results__cta { margin-top: var(--s10); max-width: 56ch; border-top: 1px solid var(--border); padding-top: var(--s6); }
.results__cta p { margin-top: var(--s3); color: var(--text); }
.results__cta .btn-row { margin-top: var(--s5); }

/* ---------------------------------------------------------------- 404 */

.lost { padding-block: var(--s20); text-align: left; }
.lost h1 { font-size: var(--display); }
.lost p { margin-top: var(--s5); font-size: var(--lead); color: var(--muted); max-width: 30em; }
.lost .btn-row { margin-top: var(--s8); }

/* ---------------------------------------------------------------- hero: three statements */

/* The radios come first in the markup so :checked can reach the slides and
   the controls. With JavaScript off the numbered controls still switch the
   statement; the script only adds the seven-second rotation. */
.hero__slides { display: grid; margin-top: var(--s4); }
.hero__slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility 0s .6s; }
.hero__slide h1, .hero__slide .hero__h {
  margin: 0; font-size: clamp(2.75rem, 1.9rem + 3.4vw, 4.125rem); line-height: .98; letter-spacing: -.035em;
  font-weight: 600; color: var(--heading); text-wrap: balance;
}
.hero__slide h1 em, .hero__slide .hero__h em { display: block; font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; color: var(--green); }
.hero__slide .hero__lead { margin-top: var(--s5); }
#hero-1:checked ~ .hero__slides .hero__slide--1,
#hero-2:checked ~ .hero__slides .hero__slide--2,
#hero-3:checked ~ .hero__slides .hero__slide--3 { opacity: 1; visibility: visible; transition: opacity .6s var(--ease), visibility 0s; }

.hero__controls { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s5); }
.hero__controls label {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 32px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--white); color: var(--ink);
  font-family: var(--mono); font-size: var(--label); letter-spacing: .08em; cursor: pointer;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.hero__controls label:hover { background: var(--soft); }
#hero-1:checked ~ .hero__controls label[for="hero-1"],
#hero-2:checked ~ .hero__controls label[for="hero-2"],
#hero-3:checked ~ .hero__controls label[for="hero-3"] { background: var(--ink); color: var(--white); border-color: var(--ink); }
#hero-1:focus-visible ~ .hero__controls label[for="hero-1"],
#hero-2:focus-visible ~ .hero__controls label[for="hero-2"],
#hero-3:focus-visible ~ .hero__controls label[for="hero-3"] { outline: 3px solid var(--ink); outline-offset: 3px; }
.hero__controls .hero__pause { margin-left: var(--s2); font-family: var(--sans); font-size: var(--tiny); font-weight: 600; letter-spacing: 0; color: var(--muted); border-color: transparent; }
.hero__controls .hero__pause:hover { color: var(--ink); background: var(--soft); }
.hero__pause .is-paused { display: none; }
#hero-pause:checked ~ .hero__copy .hero__pause .is-playing { display: none; }
#hero-pause:checked ~ .hero__copy .hero__pause .is-paused { display: inline; }
#hero-pause:focus-visible ~ .hero__copy .hero__pause { outline: 3px solid var(--ink); outline-offset: 3px; }
#hero-pause:checked ~ .hero__copy .hero__pause { color: var(--ink); border-color: var(--border); }

/* ---------------------------------------------------------------- hero: the word cloud */

/* The product's own words drift around Max. Text only, CSS only: each word
   is placed by its own rule below and fades in, lifts a few pixels and fades
   out over eight to fourteen seconds, offset so five or six are on screen at
   a time. The Pause switch freezes every word; reduced motion shows six of
   them still. On a phone the cloud is one line under the figure. */
.hero__max { position: relative; }
.cloud { list-style: none; margin: 0; padding: 0; pointer-events: none; }
.cloud__w {
  position: absolute; max-width: 132px; font-size: 15px; line-height: 1.25; font-weight: 500; color: var(--ink);
  opacity: 0; animation: cloud-drift 11s ease-in-out infinite; animation-delay: var(--cw-delay, 0s);
}
.cloud__w--l { text-align: right; }
.cloud__w--green { color: var(--green); }
.cloud__w--serif { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 20px; letter-spacing: -.01em; }
.cloud__w--big { font-size: 18px; }
.cloud__w--small { font-size: 13px; }
.cloud__w--mark { box-shadow: inset 0 -.36em 0 var(--mint); }
/* Each word is on screen for about a third of its cycle, so five or six of
   the eighteen share the frame at a time rather than all of them. */
@keyframes cloud-drift {
  0% { opacity: 0; transform: translate3d(0, 8px, 0); }
  10% { opacity: 1; transform: translate3d(0, 4px, 0); }
  32% { opacity: 1; transform: translate3d(0, -4px, 0); }
  42% { opacity: 0; transform: translate3d(0, -10px, 0); }
  100% { opacity: 0; transform: translate3d(0, -10px, 0); }
}
#hero-pause:checked ~ .hero__max .cloud__w { animation-play-state: paused; }

/* Phone: one line under the figure, eight words one after another. */
.cloud { grid-column: 1 / -1; grid-row: 2; position: relative; height: 26px; overflow: hidden; margin-top: var(--s2); }
.cloud__w { left: 0; top: 0; max-width: none; white-space: nowrap; text-align: left; animation-name: cloud-line; animation-duration: 32s; animation-timing-function: ease-in-out; }
.cloud__w:nth-child(n + 9) { display: none; }
.cloud__w:nth-child(1) { --cw-delay: 0s; }
.cloud__w:nth-child(2) { --cw-delay: 4s; }
.cloud__w:nth-child(3) { --cw-delay: 8s; }
.cloud__w:nth-child(4) { --cw-delay: 12s; }
.cloud__w:nth-child(5) { --cw-delay: 16s; }
.cloud__w:nth-child(6) { --cw-delay: 20s; }
.cloud__w:nth-child(7) { --cw-delay: 24s; }
.cloud__w:nth-child(8) { --cw-delay: 28s; }
@keyframes cloud-line {
  0% { opacity: 0; transform: translate3d(0, 6px, 0); }
  2% { opacity: 1; transform: translate3d(0, 0, 0); }
  10% { opacity: 1; transform: translate3d(0, 0, 0); }
  12% { opacity: 0; transform: translate3d(0, -6px, 0); }
  100% { opacity: 0; transform: translate3d(0, -6px, 0); }
}

@media (min-width: 900px) {
  .hero .container { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  .hero__max { min-height: 560px; padding-top: var(--s6); align-self: start; display: block; text-align: center; }
  .hero__max img { height: 420px; margin: 0 auto; }
  .hero__max figcaption { margin-top: var(--s3); }
  .cloud { position: absolute; inset: 0; height: auto; overflow: visible; margin: 0; }
  .cloud__w { max-width: 132px; white-space: normal; animation-name: cloud-drift; left: auto; top: auto; }
  .cloud__w--l { text-align: right; }
  .cloud__w:nth-child(n + 9) { display: block; }
  /* Around the figure: left and right of the vial, two above the cap, none over the face or the caption. */
  .cloud__w:nth-child(1) { left: 2%; top: 9%; --cw-delay: 0s; animation-duration: 12s; }
  .cloud__w:nth-child(2) { right: 1%; top: 6%; --cw-delay: 2.2s; animation-duration: 13s; }
  .cloud__w:nth-child(3) { left: 4%; top: 30%; --cw-delay: 4.4s; animation-duration: 10s; }
  .cloud__w:nth-child(4) { right: 3%; top: 26%; --cw-delay: 6.6s; animation-duration: 12s; }
  .cloud__w:nth-child(5) { left: 1%; top: 50%; --cw-delay: 8.8s; animation-duration: 14s; }
  .cloud__w:nth-child(6) { right: 2%; top: 46%; --cw-delay: 11s; animation-duration: 9s; }
  .cloud__w:nth-child(7) { left: 3%; top: 68%; --cw-delay: 1.1s; animation-duration: 11s; }
  .cloud__w:nth-child(8) { right: 4%; top: 64%; --cw-delay: 3.3s; animation-duration: 13s; }
  .cloud__w:nth-child(9) { left: 34%; top: 0; --cw-delay: 5.5s; animation-duration: 10s; }
  .cloud__w:nth-child(10) { right: 30%; top: 1%; --cw-delay: 7.7s; animation-duration: 12s; }
  .cloud__w:nth-child(11) { left: 6%; top: 19%; --cw-delay: 9.9s; animation-duration: 11s; }
  .cloud__w:nth-child(12) { right: 6%; top: 16%; --cw-delay: 12.1s; animation-duration: 14s; }
  .cloud__w:nth-child(13) { left: 2%; top: 40%; --cw-delay: 1.7s; animation-duration: 12s; }
  .cloud__w:nth-child(14) { right: 1%; top: 37%; --cw-delay: 4.9s; animation-duration: 10s; }
  .cloud__w:nth-child(15) { left: 5%; top: 59%; --cw-delay: 8.1s; animation-duration: 13s; }
  .cloud__w:nth-child(16) { right: 5%; top: 56%; --cw-delay: 10.3s; animation-duration: 11s; }
  .cloud__w:nth-child(17) { left: 1%; top: 77%; --cw-delay: 12.5s; animation-duration: 12s; }
  .cloud__w:nth-child(18) { right: 2%; top: 74%; --cw-delay: 6.1s; animation-duration: 14s; }
}

/* ---------------------------------------------------------------- the product page */

.product-toc { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s6); }
.product-toc a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s4); border: 1px solid var(--border); border-radius: 999px; text-decoration: none; color: var(--ink); font-weight: 500; font-size: var(--small); }
.product-toc a:hover { background: var(--soft); }
.screens { display: grid; gap: var(--s8) var(--s6); }
.screen { display: flex; flex-direction: column; gap: var(--s3); }
.screen img { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.screen figcaption { display: grid; gap: var(--s1); }
.screen figcaption b { font-size: var(--body); }
.screen figcaption span { color: var(--muted); font-size: var(--small); max-width: 62ch; }
@media (min-width: 900px) {
  .screens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .screen--wide { grid-column: 1 / -1; }
  .screen--wide figcaption { max-width: 760px; }
}
.phones { display: grid; gap: var(--s6); max-width: 900px; }
.phone { display: flex; flex-direction: column; gap: var(--s3); }
.phone img { width: 100%; border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow); }
.phone figcaption b { display: block; }
.phone figcaption span { color: var(--muted); font-size: var(--small); }
@media (min-width: 600px) { .phones { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Text links that stand alone are at least 24px tall (WCAG 2.5.8). */
figcaption a, .q__body a, .article__steps a, .article__issues a, .hero__note a, .pricing__fine a, .platforms__note a, .gallery__note a, .section-head a, .page-head a { display: inline-block; padding-block: 3px; }

/* ---------------------------------------------------------------- Ask Max */

/* A small Max in the corner of every page. The launcher is a <details>, so
   it opens without JavaScript; the bubble is plain markup that appears after
   four seconds by CSS and goes away once the panel has been opened. The
   script only remembers that, so he does not ask again on the next page. */
.max-help { position: fixed; right: var(--s4); bottom: var(--s4); z-index: 90; display: flex; flex-direction: column; align-items: flex-end; gap: var(--s2); max-width: calc(100vw - 2 * var(--s4)); }
.max-help__bubble {
  margin: 0; max-width: 250px; padding: var(--s3) var(--s4);
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg) var(--radius-lg) 4px var(--radius-lg);
  box-shadow: var(--shadow); font-size: var(--small); line-height: 1.4; color: var(--ink);
  opacity: 0; transform: translate3d(0, 6px, 0); animation: bubble-in .45s var(--ease) 4s forwards;
}
@keyframes bubble-in { to { opacity: 1; transform: none; } }
.max-help:has(details[open]) .max-help__bubble, .max-help.is-dismissed .max-help__bubble { display: none; }
.max-help__d { position: relative; }
.max-help__launch {
  list-style: none; cursor: pointer; width: 56px; height: 56px; border-radius: 50%;
  background: var(--white); border: 1px solid var(--border); box-shadow: var(--shadow);
  display: grid; place-items: center; overflow: hidden; transition: border-color .15s var(--ease);
}
.max-help__launch::-webkit-details-marker { display: none; }
.max-help__launch::marker { content: ""; }
.max-help__launch img { width: 48px; height: 48px; border-radius: 50%; display: block; }
.max-help__launch:hover, .max-help__d[open] .max-help__launch { border-color: var(--ink); }
.max-help__launch:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.max-help__panel {
  position: absolute; right: 0; bottom: calc(100% + var(--s2)); width: min(340px, calc(100vw - 2 * var(--s4)));
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: var(--s5);
}
.max-help__hi { font-size: var(--small); color: var(--text); }
.max-help__hi b { color: var(--heading); }
.max-help__links { list-style: none; margin-top: var(--s3); display: grid; gap: 2px; }
.max-help__links a { display: block; min-height: 32px; padding: var(--s2) 0; font-weight: 600; color: var(--ink); text-decoration: none; }
.max-help__links a:hover { color: var(--green); text-decoration: underline; }
.max-help__links small { display: block; margin-top: -4px; padding-bottom: var(--s2); font-size: var(--tiny); color: var(--muted); }
@media (max-width: 899px) { .site-foot { padding-bottom: calc(var(--s8) + 88px); } }

/* ---------------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  /* The cloud stands still: six words, laid out plainly. */
  .cloud, .hero__max .cloud { position: static; height: auto; overflow: visible; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s1) var(--s4); margin-top: var(--s3); }
  .cloud__w, .hero__max .cloud__w { position: static; opacity: 1; max-width: none; white-space: nowrap; text-align: left; display: inline-block; }
  .cloud__w:nth-child(n + 7), .hero__max .cloud__w:nth-child(n + 7) { display: none; }
  /* Max's bubble is simply there, without the entrance. */
  .max-help__bubble { opacity: 1; transform: none; }
}