/* AI Usage Hub landing page. Warm neutral surfaces with ink text and buttons; the red of the
   ads appears only in the logo mark. System fonts (SF Pro on Apple, Segoe UI on Windows,
   Roboto on Android), so the page loads nothing from other companies. */
:root {
  color-scheme: light;
  --bg: #FAF9F6;
  --surface: #FFFFFF;
  --surface-2: #F3F1EC;
  --surface-3: #FCFBF9;
  --border: #E6E3DC;
  --border-strong: #CFCAC0;
  --ink: #1C1B19;
  --ink-2: #57534C;   /* 7:1 on --bg */
  --ink-3: #736E66;   /* 4.8:1 on --bg, hints and placeholders only */
  --green: #1E7B4F;
  --green-bg: #E7F2EC;
  --amber: #A4500A;
  --amber-bar: #E8A23A;
  --amber-bg: #FDF1E2;
  --error: #B42318;
  --error-bg: #FEF3F2;
  --error-border: #F5C2BC;
  --shadow: 0 1px 2px rgba(28, 27, 25, .05), 0 10px 30px rgba(28, 27, 25, .07);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
[tabindex="-1"]:focus { outline: none; }
[hidden] { display: none !important; }
h1, h2, h3 { text-wrap: balance; }
.i {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.wrap.narrow { max-width: 760px; }
@media (min-width: 768px) { .wrap { padding: 0 32px; } }

/* Header with the booking button in the corner */
.top {
  position: sticky;
  z-index: 20;
  top: 0;
  padding-top: env(safe-area-inset-top);
  border-bottom: 1px solid var(--border);
  background: rgba(250, 249, 246, .9);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
}
.top-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
  white-space: nowrap;
}
.brand img { border-radius: 7px; }
.top-call { display: flex; align-items: center; gap: 12px; }
.call-q { color: var(--ink-2); font-size: 15px; }
@media (max-width: 479px) { .call-q { display: none; } }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 10px;
  font: 600 16px/1 var(--font);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, opacity .15s;
}
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #3A3833; }
.btn-primary:disabled { opacity: .3; cursor: not-allowed; }
.btn-secondary { border-color: var(--border-strong); background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(28, 27, 25, .05); }
.btn-secondary:hover { background: var(--surface-2); }
.btn-ghost { padding: 0 12px; background: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn-lg { min-height: 54px; padding: 0 26px; font-size: 17px; }
.btn-sm { min-height: 40px; padding: 0 14px; font-size: 15px; }

/* Hero */
.hero { display: grid; gap: 40px; align-items: center; padding-top: 40px; padding-bottom: 56px; }
@media (min-width: 920px) { .hero { grid-template-columns: 1.05fr .95fr; gap: 56px; padding-top: 72px; padding-bottom: 88px; } }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 5px 12px 5px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-bg); }
h1 {
  margin: 20px 0 0;
  font-size: clamp(34px, 7.4vw, 56px);
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -.035em;
}
.lead { margin: 14px 0 0; font-size: clamp(19px, 4.4vw, 23px); font-weight: 600; line-height: 1.35; letter-spacing: -.01em; }
.intro { max-width: 34em; margin: 18px 0 0; color: var(--ink-2); font-size: 17px; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 28px; }
.hint { color: var(--ink-3); font-size: 14px; }
.trust { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; color: var(--ink-2); font-size: 14px; }
@media (max-width: 519px) { .cta .btn { width: 100%; } }

/* Product preview: an example of the dashboard, drawn in HTML */
.preview-wrap { margin: 0; }
.preview { overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.preview-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-3);
  color: var(--ink-3);
  font-size: 12px;
}
.preview-bar span { width: 10px; height: 10px; border-radius: 50%; background: #E2DFD8; }
.preview-bar b { margin-left: 8px; font-weight: 600; }
.preview-body { padding: 18px 18px 8px; }
.total { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.total small { display: block; color: var(--ink-3); font-size: 12px; }
.total strong { display: block; font-size: 30px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
.total-limit { text-align: right; }
.total-limit b { font-size: 15px; font-weight: 600; }
.meter { display: block; height: 5px; overflow: hidden; border-radius: 999px; background: var(--surface-2); }
.meter i { display: block; height: 100%; border-radius: inherit; background: var(--ink); }
.meter-lg { height: 8px; margin-top: 10px; }
.devices { display: grid; margin: 16px 0 0; padding: 0; list-style: none; font-size: 14px; }
.devices li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 12px; padding: 11px 0; border-top: 1px solid var(--border); }
.devices .meter { grid-column: 1 / -1; }
.dev { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.dev .i { width: 16px; height: 16px; color: var(--ink-3); }
.amt { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tag { padding: 1px 7px; border-radius: 999px; background: var(--amber-bg); color: var(--amber); font-size: 11.5px; font-weight: 600; }
.warn .amt { color: var(--amber); font-weight: 600; }
.warn .meter i { background: var(--amber-bar); }
.off .dev { color: var(--ink-3); }
.toggle { position: relative; width: 32px; height: 18px; border-radius: 999px; background: #D9D5CD; }
.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
figcaption { margin-top: 10px; color: var(--ink-3); font-size: 13px; text-align: center; }

/* Sections below the hero */
.section { padding: 56px 0; border-top: 1px solid var(--border); }
@media (min-width: 768px) { .section { padding: 80px 0; } }
.section h2 { margin: 0; font-size: clamp(26px, 5.6vw, 36px); font-weight: 700; line-height: 1.15; letter-spacing: -.03em; }
.section-lead { margin: 10px 0 0; color: var(--ink-2); font-size: 17px; }
.grid { display: grid; gap: 14px; margin-top: 28px; }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 920px) { .grid { grid-template-columns: repeat(3, 1fr); } }
.feature {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 14px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
.feature .ico { grid-row: span 2; }
.feature h3 { margin: 0 0 2px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.feature p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.55; }
@media (min-width: 640px) {
  .feature { display: block; padding: 20px; }
  .feature h3 { margin-top: 14px; }
}
.ico {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--ink);
}
.ico .i { width: 20px; height: 20px; }
.ico-green { background: var(--green-bg); color: var(--green); }

.faq { margin-top: 24px; border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  font-size: 17px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-right: 2px solid var(--ink-2);
  border-bottom: 2px solid var(--ink-2);
  transform: translateY(-3px) rotate(45deg);
  transition: transform .2s;
}
.faq details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.faq details p { max-width: 44em; margin: 0 0 20px; color: var(--ink-2); }

.closing { text-align: center; }
.closing p { margin: 10px 0 24px; color: var(--ink-2); font-size: 17px; }

/* The form: one step at a time inside a card. Without JS every step shows and it posts normally. */
.js .step { display: none; }
.js .step.is-active { display: block; animation: step-in .2s ease-out; }
.js [data-step="hero"].is-active { animation: none; } /* the first screen shows at once */
@keyframes step-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .js .step.is-active { animation: none; } }
.js .panel:not(.is-open) { display: none; }
html:not(.js) .panel { margin-top: 0; }
html:not(.js) .panel .step + .step { margin-top: 40px; }
html:not(.js) .panel-head,
html:not(.js) [data-next],
html:not(.js) [data-back],
html:not(.js) [data-step="info"],
html:not(.js) [data-step="done"] { display: none; }

.panel {
  max-width: 600px;
  margin: 24px auto 56px;
  padding: 24px 20px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
@media (min-width: 640px) { .panel { margin-top: 48px; padding: 36px 40px; } }
.panel-head { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 28px; }
.panel-head span { height: 4px; border-radius: 999px; background: var(--surface-2); transition: background-color .3s; }
.panel-head span.on { background: var(--ink); }
.panel h2 { margin: 0 0 20px; font-size: clamp(23px, 5.4vw, 28px); font-weight: 700; line-height: 1.2; letter-spacing: -.025em; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { display: block; width: 100%; padding: 0; }
.count { display: block; margin-bottom: 8px; color: var(--ink-3); font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.sub { margin: -10px 0 16px; color: var(--ink-2); }

/* Answer options: the real radio or checkbox covers the whole row, so taps and keys just work */
.options { display: grid; gap: 8px; }
.option { position: relative; display: block; }
.option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.option > span {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 12px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.option > span::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
}
.option input[type="checkbox"] + span::before { border-radius: 6px; }
.option small { display: block; margin-top: 2px; color: var(--ink-2); font-size: 14px; font-weight: 400; }
.option input:hover + span { border-color: var(--ink-3); background: var(--surface-3); }
.option input:checked + span { border-color: var(--ink); background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--ink); }
.option input[type="radio"]:checked + span::before { border: 6px solid var(--ink); }
.option input[type="checkbox"]:checked + span::before {
  border-color: var(--ink);
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
}
.option input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }

.note {
  display: flex;
  gap: 10px;
  margin: 18px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.5;
}
.note .i { margin-top: 2px; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
@media (max-width: 519px) { .nav .btn-primary { flex: 1; } }

/* Result screen */
.result { display: flex; gap: 14px; padding: 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-3); }
.result + .result { margin-top: 10px; }
.result h3 { margin: 6px 0; font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.result p { margin: 0; color: var(--ink-2); font-size: 15px; }
.result .fine { margin-top: 10px; color: var(--ink-3); font-size: 13px; line-height: 1.5; }
@media (max-width: 519px) {
  .result { display: block; }
  .result h3 { margin-top: 12px; }
}

/* Contact fields */
.field { display: block; margin: 0 0 16px; }
.field > span { display: block; margin-bottom: 6px; font-size: 15px; font-weight: 600; }
.field em { color: var(--ink-3); font-style: normal; font-weight: 400; }
.field input,
.field textarea {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font: 400 16px/1.4 var(--font); /* 16px or more stops iOS from zooming in on focus */
  transition: border-color .15s, box-shadow .15s;
}
.field textarea { min-height: 92px; resize: vertical; }
.field ::placeholder { color: var(--ink-3); opacity: 1; }
.field input:focus,
.field textarea:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px rgba(28, 27, 25, .12); }
.field [aria-invalid="true"],
.field [aria-invalid="true"]:focus { border-color: var(--error); box-shadow: 0 0 0 3px rgba(180, 35, 24, .15); }
.consent { margin: 4px 0 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.5; }
.error {
  margin: 14px 0 0;
  padding: 10px 14px;
  border: 1px solid var(--error-border);
  border-radius: 10px;
  background: var(--error-bg);
  color: var(--error);
  font-size: 15px;
  font-weight: 500;
}
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Done */
.success {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--green-bg);
  color: var(--green);
}
.success .i { width: 26px; height: 26px; stroke-width: 2.2; }
[data-step="done"] > p { margin: 0; color: var(--ink-2); font-size: 17px; }
[data-step="done"] b { color: var(--ink); overflow-wrap: anywhere; }
.callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
  margin-top: 24px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-3);
}
.callout h3 { margin: 0 0 4px; font-size: 17px; font-weight: 600; }
.callout p { margin: 0; color: var(--ink-2); font-size: 15px; }

/* Footer */
.foot {
  padding: 24px 16px calc(28px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  color: var(--ink-3);
  font-size: 13.5px;
  text-align: center;
}
.foot p { margin: 4px 0; }
.foot a { color: var(--ink-2); }

/* Legal pages and the server's message pages */
.legal,
.msg { width: 100%; max-width: 760px; margin: 0 auto; padding: 40px 16px 64px; }
.legal h1,
.msg h1 { margin: 0; font-size: clamp(30px, 6.5vw, 42px); font-weight: 700; line-height: 1.15; letter-spacing: -.03em; }
.legal h2 { margin: 36px 0 8px; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.legal p,
.legal li { color: var(--ink-2); }
.legal ul { padding-left: 22px; }
.legal .updated { margin-top: 8px; color: var(--ink-3); }
.msg p { color: var(--ink-2); font-size: 17px; }
.msg form { margin-top: 24px; }