/* meetkeely.com's long-form pages: the content pages (F34: Polar Loop, the metrics, the methodology and the
   comparisons), the Privacy Policy, the Terms of Use and Support. Loaded after site.css, which supplies the tokens,
   the glass nav, the footer, the skip link and the focus ring. One dark look like the rest of the site, no
   JavaScript, and an ink-on-paper version for print.
   1 Page · 2 Head · 3 Summary and callout · 4 Contents · 5 Sections and text · 6 Tables · 7 Support
   8 Content pages · 8b Connect · 9 Responsive · 10 Reduced motion · 11 Print */

/* 1 · Page ------------------------------------------------------------------------------------------------------ */
.nav { border-bottom-color: var(--hair); }             /* no scroll script on these pages, so the hairline stays on */
.nav-links a[aria-current="page"] { color: var(--snow); }

.doc {
  --measure: 68ch;
  max-width: calc(760px + 2 * var(--gutter));
  margin: 0 auto;
  padding: 72px var(--gutter) 120px;
  line-height: 1.65;
  overflow-wrap: break-word;
}

/* 2 · Head ------------------------------------------------------------------------------------------------------ */
.doc-head { padding-bottom: 36px; }
.doc-head h1 { margin: 0 0 18px; font-size: clamp(40px, 5vw, 60px); line-height: 1.02; letter-spacing: -0.024em; }
.doc-lede { max-width: 32em; font: 400 21px/1.5 var(--font-voice); color: var(--fog); }
.doc-dates {
  display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 22px;
  font-size: 14px; line-height: 1.5; color: var(--mist); font-variant-numeric: tabular-nums;
}
.doc-dates span { white-space: nowrap; }

/* 3 · Summary and callout: quiet cards on Deep Water ------------------------------------------------------------ */
.summary, .callout, .toc, .contact {
  border-radius: 22px; background: var(--deep-water); box-shadow: inset 0 0 0 1px var(--hair);
}
.summary { padding: 26px 26px 28px; }
.summary h2 { margin: 0 0 16px; font-size: 23px; line-height: 1.2; letter-spacing: -0.01em; }
.summary ul { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.summary li { position: relative; padding-left: 20px; font-size: 16px; line-height: 1.55; color: var(--fog); }
.summary li::before {
  content: ""; position: absolute; left: 1px; top: 0.56em; width: 7px; height: 7px; border-radius: 50%;
  background: var(--glacier);
}
.summary li b { font-weight: 600; color: var(--snow); }

.callout { padding: 20px 24px; font-size: 16px; line-height: 1.55; color: var(--fog); }
.callout b { font-weight: 600; color: var(--snow); }

/* 4 · Contents: compact, two columns where there's room --------------------------------------------------------- */
.toc { margin-top: 20px; padding: 20px 24px 16px; }
.toc-title {
  margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fog);
}
.toc ol { margin: 0; padding: 0; list-style: none; columns: 2 250px; column-gap: 36px; }
.toc li { break-inside: avoid; }
.toc a {
  display: flex; gap: 10px; padding: 6px 0; font-size: 15px; line-height: 1.4; color: var(--fog);
  text-decoration: none; transition: color 0.2s;
}
.toc a:hover { color: var(--snow); }
.toc .n { flex: none; min-width: 1.5em; color: var(--mist); font-variant-numeric: tabular-nums; }

/* 5 · Sections and text ----------------------------------------------------------------------------------------- */
.doc-body > section { margin-top: 56px; padding-top: 48px; border-top: 1px solid var(--hair); }
.doc-body h2 { margin: 0; font-size: 27px; line-height: 1.2; letter-spacing: -0.01em; }
.doc-body h2 .n {
  display: inline-block; min-width: 1.75em; font: 500 15px/1 var(--font-ui); color: var(--mist);
  font-variant-numeric: tabular-nums; vertical-align: 0.28em;
}
.doc-body h3 { margin: 0; font: 600 17px/1.4 var(--font-ui); color: var(--snow); }
.doc-body section > * + * { margin-top: 16px; }
.doc-body section > h2 + * { margin-top: 18px; }
.doc-body section > h3 { margin-top: 32px; }
.doc-body section > h3 + * { margin-top: 8px; }

.doc-body p, .doc-body ul, .doc-body ol { max-width: var(--measure); }
.doc-body ul, .doc-body ol { margin-bottom: 0; padding-left: 1.25em; }
.doc-body li + li { margin-top: 8px; }
.doc-body li::marker { color: var(--mist); }
.doc-body ol.alpha { list-style: lower-alpha; }
.doc-body b, .doc-body strong { font-weight: 600; }
.doc-body .quiet { color: var(--fog); }

.doc-body a:not([class]) {
  color: var(--snow); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in oklab, var(--glacier) 70%, transparent);
  transition: color 0.2s, text-decoration-color 0.2s;
}
.doc-body a:not([class]):hover { color: var(--glacier); text-decoration-color: currentColor; }

.doc-body address { font-style: normal; line-height: 1.6; }

/* 6 · Tables: inventories on Deep Water, scrolling sideways inside their own box if they ever outgrow it -------- */
.table-wrap {
  margin-top: 20px; overflow-x: auto; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--hair);
  /* Edge hints that appear only while there's more table to scroll to. */
  background:
    linear-gradient(90deg, var(--deep-water) 40%, rgba(17, 24, 32, 0)) 0 0 / 48px 100% no-repeat local,
    linear-gradient(270deg, var(--deep-water) 40%, rgba(17, 24, 32, 0)) 100% 0 / 48px 100% no-repeat local,
    linear-gradient(90deg, rgba(236, 241, 245, 0.1), rgba(236, 241, 245, 0)) 0 0 / 16px 100% no-repeat scroll,
    linear-gradient(270deg, rgba(236, 241, 245, 0.1), rgba(236, 241, 245, 0)) 100% 0 / 16px 100% no-repeat scroll,
    var(--deep-water);
}
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.table-wrap caption {
  padding: 16px 18px 8px; text-align: left; font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fog);
}
.table-wrap th, .table-wrap td {
  padding: 13px 18px; text-align: left; vertical-align: top; border-top: 1px solid var(--hair); overflow-wrap: anywhere;
}
.table-wrap thead th { padding-block: 10px; font-size: 13px; font-weight: 600; color: var(--mist); }
.table-wrap tbody th { width: 30%; min-width: 7.5em; font-weight: 600; color: var(--snow); overflow-wrap: normal; }
.table-wrap tbody th small { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--mist); }
.table-wrap td { color: var(--fog); }

/* 7 · Support --------------------------------------------------------------------------------------------------- */
.contact { padding: 28px 28px 26px; }
.contact h2 { margin: 0 0 10px; font-size: 27px; line-height: 1.2; letter-spacing: -0.01em; }
.contact-lead { max-width: 34em; font-size: 18px; line-height: 1.55; color: var(--fog); }
.addr { font-weight: 600; color: var(--snow); -webkit-user-select: all; user-select: all; }
.contact-actions { margin-top: 22px; }
.contact-note { margin-top: 20px; max-width: 46em; font-size: 14px; line-height: 1.55; color: var(--mist); }
.contact address { margin-top: 6px; font-style: normal; font-size: 14px; line-height: 1.55; color: var(--mist); }

.faq { max-width: var(--measure); border-top: 1px solid var(--hair-2); }
.faq details { border-bottom: 1px solid var(--hair-2); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 2px;
  font: 400 21px/1.3 var(--font-voice); color: var(--snow); cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 9px; height: 9px; margin-right: 6px;
  border-right: 1.8px solid var(--fog); border-bottom: 1.8px solid var(--fog);
  transform: translateY(-3px) rotate(45deg); transition: transform var(--d-glide) var(--ease-glide), border-color 0.2s;
}
.faq summary:hover::after { border-color: var(--snow); }
.faq details[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.faq-answer { padding: 0 2px 24px; color: var(--fog); }
.faq-answer > * + * { margin-top: 12px; }
.faq-answer b { color: var(--snow); }
/* Answers open with a glide where the browser can animate to auto height; elsewhere they simply appear. */
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content {
    block-size: 0; overflow-y: clip;
    transition: block-size var(--d-glide) var(--ease-glide), content-visibility var(--d-glide) allow-discrete;
  }
  .faq details[open]::details-content { block-size: auto; }
}

.more { display: grid; gap: 12px; }
.more-card {
  display: grid; align-content: start; gap: 4px; padding: 20px 22px; border-radius: 18px; background: var(--deep-water);
  box-shadow: inset 0 0 0 1px var(--hair); color: var(--snow); text-decoration: none; transition: background 0.2s;
}
.more-card:hover { background: var(--raised); }
.more-card b { font: 400 21px/1.25 var(--font-voice); }
.more-card span { font-size: 15px; line-height: 1.5; color: var(--fog); }

/* 8 · Content pages (F34): the answer first, then the depth. With a screen, the phone stays beside the text on
   wide screens, as on the home page. ------------------------------------------------------------------------------ */
.page {
  --measure: 68ch;
  max-width: calc(760px + 2 * var(--gutter)); margin: 0 auto; padding: 64px var(--gutter) 120px;
  line-height: 1.65; overflow-wrap: break-word;
}
.crumbs ol { display: flex; flex-wrap: wrap; margin: 0 0 18px; padding: 0; list-style: none; font-size: 14px; color: var(--mist); }
.crumbs li + li::before { content: "/"; margin: 0 10px; color: var(--mist); }
.crumbs a { color: var(--fog); text-decoration: none; transition: color 0.2s; }
.crumbs a:hover { color: var(--snow); }
.page-head h1 { margin: 0 0 20px; font-size: clamp(40px, 5.2vw, 64px); line-height: 1.02; letter-spacing: -0.024em; }
.answer { max-width: 34em; }
.answer p { font: 400 21px/1.5 var(--font-voice); color: var(--fog); }
.answer p + p { margin-top: 12px; }
.answer strong { font-weight: 500; color: var(--snow); }
.answer a { color: var(--snow); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.page-date { margin-top: 22px; font-size: 14px; color: var(--mist); font-variant-numeric: tabular-nums; }

.page-body { margin-top: 40px; }
.page-body > * + * { margin-top: 20px; }
.page-body > section:first-child { margin-top: 0; }

.page-shot { display: grid; justify-items: center; margin-top: 44px; }
.page-shot .device, .figure .device { --device-w: min(290px, 72vw); }
.page-shot .device::before, .figure .device::before {
  content: ""; position: absolute; left: 50%; top: 42%; width: 200%; aspect-ratio: 1; translate: -50% -50%; z-index: -1;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--tone) 24%, transparent), color-mix(in oklab, var(--tone) 7%, transparent) 45%, transparent);
}
.figure { display: grid; justify-items: center; gap: 18px; padding-block: 16px; }
.figure figcaption { max-width: 30em; font: italic 400 17px/1.45 var(--font-voice); color: var(--fog); text-align: center; }

/* Key facts, as the home page's ledger: label over value, hairlines between. */
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); column-gap: 32px; margin: 0; border-top: 1px solid var(--hair-2); }
.facts > div { padding: 14px 0 15px; border-bottom: 1px solid var(--hair-2); }
.facts dt { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mist); }
.facts dd { margin: 4px 0 0; font-size: 16px; line-height: 1.5; color: var(--snow); }

.doc-body code {
  padding: 0.12em 0.4em; border-radius: 6px; background: var(--fill);
  font: 0.86em/1 ui-monospace, "SF Mono", Menlo, monospace; color: var(--snow); overflow-wrap: anywhere;
}
.formula {
  margin: 0; padding: 18px 22px; overflow-x: auto; border-radius: 16px;
  background: var(--deep-water); box-shadow: inset 0 0 0 1px var(--hair);
}
.formula code { padding: 0; background: none; font: 14.5px/1.75 ui-monospace, "SF Mono", Menlo, monospace; white-space: pre; overflow-wrap: normal; }
.doc-body blockquote { margin: 0; padding-left: 18px; border-left: 2px solid var(--hair-2); color: var(--fog); }
.doc-body hr { margin-block: 36px; border: 0; border-top: 1px solid var(--hair); }

.doc-body ol.steps { display: grid; gap: 14px; padding: 0; list-style: none; counter-reset: step; }
.steps > li { position: relative; margin: 0; padding-left: 44px; counter-increment: step; }
.steps > li::before {
  content: counter(step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; background: var(--fill); box-shadow: inset 0 0 0 1px var(--hair-2);
  font: 600 14px/1 var(--font-ui); color: var(--snow); font-variant-numeric: tabular-nums;
}
.doc-body .steps li + li { margin-top: 0; }

.cta-band { padding: 26px 26px 24px; border-radius: 22px; background: var(--deep-water); box-shadow: inset 0 0 0 1px var(--hair); }
.cta-band .cta { margin-top: 0; }
.cta-band .btn svg { width: 16px; height: 16px; }

.page-body .legend { margin-top: 20px; }
/* Content tables break lines only between words. On phones, three or more columns stack: each row becomes a
   block under its heading, each cell labelled with its column. */
.page .table-wrap th, .page .table-wrap td { overflow-wrap: normal; }
@media (max-width: 599px) {
  .table-wrap.stack { background: var(--deep-water); }
  .stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .stack table, .stack tbody, .stack tr, .stack th, .stack td { display: block; }
  .stack tr { padding: 14px 16px 12px; border-top: 1px solid var(--hair); }
  .stack tbody tr:first-child { border-top: 0; }
  .page .stack th, .page .stack td { width: auto; min-width: 0; padding: 0; border: 0; }
  .page .stack tbody th { margin-bottom: 6px; }
  .page .stack td { display: grid; grid-template-columns: minmax(0, 7em) minmax(0, 1fr); gap: 12px; padding: 3px 0; }
  .stack td::before { content: attr(data-label); font-size: 13px; line-height: 1.6; color: var(--mist); }
}
.related { margin-top: 20px; }

@media (min-width: 960px) {
  .page.has-shot {
    display: grid; grid-template-columns: minmax(0, 700px) minmax(0, 1fr); column-gap: clamp(48px, 6vw, 104px);
    max-width: calc(var(--max) + 2 * var(--gutter));
  }
  .has-shot .page-head, .has-shot .page-body { grid-column: 1; }
  .has-shot .page-shot {
    grid-column: 2; grid-row: 1 / span 2; align-self: start; position: sticky; margin-top: 12px;
    top: calc(var(--nav-h) + 36px);
  }
  .has-shot .page-shot .device { --device-w: clamp(240px, (100svh - var(--nav-h) - 96px) / 2.1234, 300px); }
}

/* 8b · Connect (F35): signing in to connect an assistant, and the list of connected ones --------------------- */
.connect-card {
  margin-top: 24px; padding: 24px 24px 22px; border-radius: 22px;
  background: var(--deep-water); box-shadow: inset 0 0 0 1px var(--hair);
}
.connect-card h2 { margin: 0 0 10px; font-size: 25px; line-height: 1.2; letter-spacing: -0.01em; }
.connect-card h3 { margin: 22px 0 10px; font: 600 15px/1.4 var(--font-ui); color: var(--snow); }
.connect-card p { color: var(--fog); }
.connect-card > * + p { margin-top: 14px; }
.connect-card b { font-weight: 600; color: var(--snow); }
.connect-card a:not([class]) { color: var(--snow); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
.connect form { display: grid; gap: 10px; max-width: 26em; margin-top: 16px; }
.connect label { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--fog); }
.connect input {
  height: 52px; padding: 0 16px; border: 0; border-radius: 14px; background: var(--night); color: var(--snow);
  box-shadow: inset 0 0 0 1px var(--hair-2); font: 500 17px/1 var(--font-ui);
}
.connect input:focus-visible { outline: 2px solid var(--glacier); outline-offset: 2px; }
.connect input#code { font-size: 22px; letter-spacing: 0.3em; font-variant-numeric: tabular-nums; }
.connect button.btn { border: 0; cursor: pointer; font-family: var(--font-ui); }
.connect form .btn { justify-self: start; margin-top: 6px; }
.connect button:disabled { opacity: 0.55; cursor: default; }
.btn-quiet {
  height: 54px; padding: 0 22px; border: 0; border-radius: 27px; background: var(--fill); color: var(--snow);
  font: 600 17px/1 var(--font-ui); cursor: pointer; transition: background 0.2s;
}
.btn-quiet:hover { background: var(--hair-2); }
.link {
  padding: 0; border: 0; background: none; color: var(--snow); font: inherit; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in oklab, var(--glacier) 70%, transparent);
}
.connect-columns { display: grid; gap: 4px 28px; }
.connect-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.connect-list li { position: relative; padding-left: 22px; font-size: 15.5px; line-height: 1.5; color: var(--fog); }
.connect-list li::before {
  content: ""; position: absolute; left: 2px; top: 0.6em; width: 8px; height: 8px; border-radius: 50%; background: var(--glacier);
}
.connect-list.no li::before { background: none; box-shadow: inset 0 0 0 1.5px var(--mist); }
.connect-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.connect-status { min-height: 1.5em; margin-top: 16px; font-size: 15px; color: var(--fog); }
.connect-status.is-error { color: var(--ember); }
.connect-url {
  padding: 14px 18px; border-radius: 14px; background: var(--deep-water); box-shadow: inset 0 0 0 1px var(--hair);
  font: 500 16px/1.4 ui-monospace, "SF Mono", Menlo, monospace; color: var(--snow); -webkit-user-select: all; user-select: all;
}
.grants { margin: 16px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--hair-2); }
.grants li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--hair-2); }
.grants li + li { margin-top: 0; }
.grants b { display: block; color: var(--snow); }
.grants span { font-size: 14px; color: var(--mist); }
.grants .btn-quiet { flex: none; height: 40px; padding: 0 16px; font-size: 15px; }
@media (min-width: 720px) { .connect-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 9 · Responsive ------------------------------------------------------------------------------------------------ */
@media (max-width: 719px) {
  .doc { padding-top: 44px; padding-bottom: 88px; }
  .doc-lede { font-size: 19px; }
  .doc-head { padding-bottom: 28px; }
  .doc-body > section { margin-top: 44px; padding-top: 40px; }
  .doc-body h2, .contact h2 { font-size: 25px; }
  .summary, .contact { padding: 22px 20px 24px; border-radius: 20px; }
  .callout { padding: 18px 20px; border-radius: 20px; }
  .toc { padding: 18px 20px 14px; border-radius: 20px; }
  .table-wrap th, .table-wrap td { padding: 12px 14px; }
  .table-wrap caption { padding: 14px 14px 6px; }
  .faq summary { font-size: 19px; }
  .page { padding-top: 40px; padding-bottom: 88px; }
  .answer p { font-size: 19px; }
  .cta-band { padding: 22px 20px; border-radius: 20px; }
  .formula { padding: 16px 18px; }
  .formula code { font-size: 13px; }
}
@media (min-width: 720px) {
  .more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Wide screens: section numbers hang in the margin, so the headings line up with the text. */
@media (min-width: 1000px) {
  .doc-body h2 { position: relative; }
  .doc-body h2 .n { position: absolute; right: 100%; top: 0.62em; min-width: 0; margin-right: 20px; text-align: right; }
}

/* 10 · Reduced motion: site.css shortens every transition; the answers also stop gliding ----------------------- */
@media (prefers-reduced-motion: reduce) {
  .faq details::details-content { transition: none; }
}

/* 11 · Print: ink on paper, without the nav or the contents --------------------------------------------------- */
@media print {
  html, body { background: #fff; color: #000; }
  .skip, .nav, .toc, .foot-map, .foot .lockup, .contact-actions, .page-shot, .cta-band { display: none; }
  .doc { max-width: none; padding: 0; }
  .doc *, .page *, .foot * { color: #000 !important; background: transparent !important; box-shadow: none !important; }
  .summary li::before { background: #000 !important; }
  .doc-body > section, .table-wrap th, .table-wrap td, .faq, .faq details { border-color: #bbb; }
  .doc-body > section { break-inside: auto; }
  .doc-body h2, .doc-body h3, .faq summary { break-after: avoid; }
  .table-wrap { overflow: visible; }
  .doc-body h2 .n { position: static; margin-right: 0; min-width: 1.75em; }
}