/* Glynce shared chrome.
   Design tokens, base type, the pill top nav and the footer: everything a page
   needs to look like part of the site. Page-specific layout (the landing hero,
   the bento, a feature page's sections) stays with that page.

   Extracted from landing.html so the feature pages don't each carry their own
   copy of the nav and footer. Edit here, not in a page. */

:root {
  /* Light-only for now: keeps browser-drawn controls light under a dark OS. */
  color-scheme: light;
  --ink: #14223b;
  --muted: #5f6b80;
  --rule: #e6e9f0;
  --bg: #fbfcfe;
  --card: #ffffff;
  --blue: #3b82f6;
  --blue-dark: #2563eb;
  --blue-soft: #e8f0fe;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* Every <img> carries width/height attributes so the browser can reserve the
   right space before the file arrives. Those attributes are presentational
   hints, which means they are real CSS at the bottom of the cascade: wherever
   a rule sets only width, the height hint still applies and the image renders
   stretched to its full pixel height. This puts height back to auto, so the
   attributes only supply the aspect ratio, which is all we wanted from them.
   Rules that genuinely want a fixed height (the watch faces, the hero screens)
   are more specific and still win. */
img { height: auto; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- top nav ---- */

.topnav {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 4px;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 8px 8px 8px 18px;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(22px) saturate(1.8);
  -webkit-backdrop-filter: blur(22px) saturate(1.8);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 999px;
  box-shadow:
    0 10px 34px rgba(20, 34, 59, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.topnav .brand {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-right: 18px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.topnav .brand img { height: 22px; width: auto; display: block; }

.topnav .nav-link {
  padding: 8px 12px;
  color: var(--ink);
  text-decoration: none;
  font-size: 15px;
  border-radius: 999px;
}

.topnav .nav-link:hover { background: rgba(20, 34, 59, 0.06); }

.btn-dark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  background: #0d1524;
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  border-radius: 999px;
  white-space: nowrap;
}

.btn-dark:hover { background: #1c2942; }

.btn-dark svg {
  width: 15px;
  height: 18px;
  flex-shrink: 0;
  margin-top: -2px;
}

.topnav .btn-dark { margin-left: 14px; padding: 10px 18px; }

@media (max-width: 640px) {
  .topnav .nav-link { display: none; }
  .topnav .brand { margin-right: 6px; }
}

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

.site-footer {
  border-top: 1px solid var(--rule);
  background: var(--bg);
}

.site-footer .inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 64px 24px 72px;
  display: grid;
  grid-template-columns: 1.35fr 1fr 1.15fr 1.1fr 1fr;
  gap: 32px;
  align-items: start;
}

.site-footer .brand-col .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.01em;
}

.site-footer .brand-col .brand img { height: 24px; width: auto; display: block; }

.site-footer .brand-col .tagline {
  margin: 14px 0 0;
  max-width: 15em;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}

/* The footer's own CTA. Reads as the last chance to act, so it gets real
   space above it rather than sitting flush against the tagline. */
.site-footer .brand-col .btn-dark { margin-top: 22px; }

.site-footer .brand-col .copyright {
  margin: 26px 0 0;
  font-size: 14px;
  color: var(--muted);
}

.site-footer .socials {
  display: flex;
  gap: 18px;
  margin-top: 20px;
}

.site-footer .socials a {
  color: var(--ink);
  display: inline-flex;
}

.site-footer .socials a:hover { opacity: 0.7; }

.site-footer .socials svg { width: 22px; height: 22px; }

.site-footer .col h4 {
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.site-footer .col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.site-footer .col a {
  color: var(--ink);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.site-footer .col a:hover { color: var(--blue-dark); }

@media (max-width: 940px) {
  .site-footer .inner {
    grid-template-columns: 1fr 1fr;
    gap: 40px 24px;
  }
  .site-footer .brand-col { grid-column: 1 / -1; }
  .site-footer .socials { margin-top: 24px; }
}

@media (max-width: 560px) {
  .site-footer .inner { grid-template-columns: 1fr 1fr; }
}


/* ============================================================
   Feature page shell
   Shared by every page build-pages.mjs generates. A fragment should only
   need to add what is genuinely its own.

   The rhythm is the whole point. Left flat, every section is white text on
   white at the same width and the page reads as one undifferentiated column.
   So: sections alternate between the page colour and a tinted band, the same
   trick the homepage bento uses to separate its boxes.
   ============================================================ */

/* ---- hero ----
   Two columns: copy left, product art right. A centred stack pushed the art
   below the fold and left it floating in dead space; side-by-side it earns its
   place and the fold shows both what this is and what it looks like. */

.page-hero {
  position: relative;
  overflow: hidden;
  /* Lands on var(--bg), which is where every .section-tint now starts and ends,
     so the hero dissolves into whatever follows it. */
  background: linear-gradient(180deg, #dcebfa 0%, #e9f1fb 34%, #f0f5fc 68%, var(--bg) 94%, var(--bg) 100%);
  padding: 150px 24px 96px;
}

/* The colour comes from the same two layers the landing hero uses: a soft
   rainbow band, then a white lift plus a wash that pulls everything back to a
   single flat var(--bg) before the bottom edge. Ending on flat bg is the seam
   invariant: every section-tint starts and ends on bg, so any colour left at
   the hero's bottom would hard-cut against the next section. Both pseudo layers
   sit below .page-hero .inner (z-index 1), so they never touch the copy. */
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 46% at 0% 58%, rgba(125, 211, 252, 0.32), transparent 72%),
    radial-gradient(54% 42% at 22% 68%, rgba(52, 211, 153, 0.24), transparent 72%),
    radial-gradient(50% 40% at 41% 56%, rgba(250, 204, 21, 0.19), transparent 72%),
    radial-gradient(50% 40% at 59% 68%, rgba(251, 146, 60, 0.17), transparent 72%),
    radial-gradient(54% 42% at 78% 56%, rgba(244, 114, 182, 0.21), transparent 72%),
    radial-gradient(60% 46% at 100% 66%, rgba(129, 140, 248, 0.26), transparent 72%);
  pointer-events: none;
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(420px 180px at 12% 26%, rgba(255,255,255,0.85), rgba(255,255,255,0) 70%),
    radial-gradient(520px 220px at 88% 22%, rgba(255,255,255,0.8), rgba(255,255,255,0) 70%),
    /* Reaches fully opaque var(--bg) at 96%, leaving the last sliver flat, so
       the rainbow above has dissolved into one colour by the seam. */
    linear-gradient(180deg, rgba(251,252,254,0) 60%, var(--bg) 96%);
  pointer-events: none;
}

.page-hero .inner {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.page-hero .copy { min-width: 0; }

.page-hero .eyebrow {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-dark);
}

.page-hero h1 {
  margin: 0 0 20px;
  font-size: clamp(38px, 6vw, 62px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 600;
}

.page-hero .lede {
  margin: 0 0 32px;
  max-width: 480px;
  font-size: 19px;
  line-height: 1.55;
  color: var(--muted);
}

/* Supported-CGM trust line under the hero CTA: names the sensors (and links to
   the full list) high on the page, where the search terms carry most weight. */
.page-hero .compat {
  margin: 20px 0 0;
  font-size: 14.5px;
  color: var(--muted);
}
.page-hero .compat a { color: var(--blue-dark); text-decoration: none; border-bottom: 1px solid var(--rule); }
.page-hero .compat a:hover { color: var(--ink); }

.page-hero .btn-dark { padding: 14px 26px; font-size: 16px; }

/* The shot is the hero's right column. */
.page-hero .shot {
  position: relative;
  width: 100%;
  max-width: 380px;
  justify-self: center;
  /* Show more of the phone than the old centred crop did: at eye level a hard
     fade across the top reads as a chopped-off device, not a dissolve. */
  aspect-ratio: 1350 / 1700;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10%);
  mask-image: linear-gradient(180deg, transparent 0, #000 10%);
}

.page-hero .shot img { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; }

/* Shot variants. The default crops a full-phone render to its lower half; these
   cover the other shapes a hero shot comes in. */

.page-hero .shot-top {
  aspect-ratio: 1350 / 1800;
  -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
}

.page-hero .shot-top img { top: 0; bottom: auto; }

/* A whole phone, uncropped. Narrower than the cropped variants on purpose: at
   1350x2760 the render is over twice as tall as it is wide, so the width is
   what sets the hero's height. */
.page-hero .shot-device {
  max-width: 300px;
  aspect-ratio: auto;
  overflow: visible;
  -webkit-mask-image: none;
  mask-image: none;
}

.page-hero .shot-device img {
  position: relative;
  filter: drop-shadow(0 30px 60px rgba(20, 34, 59, 0.20));
}

/* A self-contained card: show all of it, no crop, no mask. */
.page-hero .shot-wide {
  max-width: 520px;
  aspect-ratio: auto;
  overflow: visible;
  -webkit-mask-image: none;
  mask-image: none;
}

.page-hero .shot-wide img { position: relative; filter: drop-shadow(0 18px 40px rgba(20, 34, 59, 0.16)); }

.page-hero .shot-watch {
  max-width: 240px;
  aspect-ratio: auto;
  overflow: visible;
  -webkit-mask-image: none;
  mask-image: none;
}

.page-hero .shot-watch img { position: relative; filter: drop-shadow(0 18px 40px rgba(20, 34, 59, 0.18)); }

/* A short stack of goal cards, read as the list they are in the app. */
.page-hero .shot-stack {
  max-width: 460px;
  aspect-ratio: auto;
  overflow: visible;
  -webkit-mask-image: none;
  mask-image: none;
}

.page-hero .shot-stack img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 14px 30px rgba(20, 34, 59, 0.13));
}

/* Each exported card carries its own transparent margin, so left alone the
   pills sit ~60px apart. Pull them back to a list gap. Percentage margins
   resolve against the container width, which is what the cards scale with,
   so the gap holds at every viewport. */
.page-hero .shot-stack img + img { margin-top: -10%; }

/* ---- Apple Watch hero mockup ----
   The banded hero watch, composited like the landing hero: hero-watch.png is a
   banded frame with an opaque black screen, and the screen images share its
   600x960 canvas, so a screen stacked inset:0 lands exactly on that black
   screen. Frame in flow sizes the box; screen paints over it. */
.watch-mock {
  position: relative;
  width: 100%;
  margin: 0 auto;
  filter: drop-shadow(0 22px 44px rgba(20, 34, 59, 0.22));
}

.watch-mock > img { display: block; width: 100%; height: auto; }

.watch-mock .watch-mock-frame { position: relative; }

.watch-mock .watch-mock-screen { position: absolute; inset: 0; }

.watch-mock .watch-mock-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page-hero .hero-watch-mock { max-width: 296px; justify-self: center; }

/* The band-less bezel shots are pre-composited PNGs (screen baked into
   watch-bezel.png), so they are plain images with a silhouette shadow. */
.split .art .watch-render {
  display: block;
  width: 100%;
  max-width: 236px;
  height: auto;
  margin: 0 auto;
  border-radius: 0;
  filter: drop-shadow(0 20px 40px rgba(20, 34, 59, 0.20));
}

/* ---- sections ---- */

.section {
  /* 56 top + 56 bottom = a 112px gap between sections. At 96 it was 192,
     which read as a pause rather than a transition. */
  padding: 56px 24px;
}

/* The tinted band. Alternating these against the plain page colour is what
   gives the page its rhythm.

   It starts AND ends on var(--bg), tinting only through the middle, so a band
   never meets a plain section on a hard edge. No borders: a 1px rule between
   sections reads as a seam, which is the thing this is meant to avoid. The
   fade is generous (0 -> 26%, 74% -> 100%) because a short one is just a
   gradient-shaped edge rather than no edge at all. */
/* Sections are flat, like the landing page: colour lives only in the hero.
   .section-tint stays in the markup as the alternation marker (now a visual
   no-op) so a tint could be reintroduced here in one place if ever wanted. */
.section-tint { background: var(--bg); }

.section > .inner {
  max-width: 1080px;
  margin: 0 auto;
}

/* Section heads are centred with a bounded measure, so a section reads as a
   deliberate block rather than text hugging the left edge of a wide page. */
.section h2 {
  margin: 0 0 14px;
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 600;
  text-align: center;
}

.section .sub {
  margin: 0 auto 48px;
  max-width: 620px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--muted);
  text-align: center;
}

/* ---- split row: copy one side, art the other ----
   The main device for varying the page's shape. A page that only ever centres
   a heading over a grid reads as a list; alternating which side the art sits on
   gives it a rhythm you can feel while scrolling. Add .split-flip to swap. */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.split + .split { margin-top: 96px; }

.split .copy { min-width: 0; }

/* .split lives inside a .section, whose h2 is centred. A split's heading is
   part of a left-hand column, so it opts out. */
.split .copy h2 {
  margin: 0 0 16px;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.18;
  text-align: left;
}

.split .copy p {
  margin: 0 0 16px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--muted);
}

.split .copy p:last-of-type { margin-bottom: 0; }

.split .art {
  min-width: 0;
  justify-self: center;
  width: 100%;
  max-width: 460px;
}

.split .art img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  filter: drop-shadow(0 18px 40px rgba(20, 34, 59, 0.14));
}

/* a phone render needs no card treatment, it has its own shape */
.split .art img.device { border-radius: 0; max-width: 300px; margin: 0 auto; }

.split-flip .copy { order: 2; }
.split-flip .art { order: 1; }

/* a link that follows a split's copy */
.split .copy .more { justify-content: flex-start; margin-top: 24px; max-width: none; }

/* ---- card grid ---- */

.surfaces {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* An odd last card centres itself instead of leaving a hole in the grid. */
.surfaces > :last-child:nth-child(odd) {
  grid-column: 1 / -1;
  max-width: calc(50% - 10px);
  justify-self: center;
}

.surface {
  border-radius: 22px;
  padding: 32px 30px;
  background: var(--card);
  border: 1px solid var(--rule);
}


.surface h3 {
  margin: 0 0 10px;
  font-size: 19px;
  letter-spacing: -0.01em;
  font-weight: 600;
}

.surface p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--muted); }

/* ---- prose ---- */

/* Centred as a BLOCK, but the text itself is flush left. Centring running prose
   makes both edges ragged and the eye has to hunt for the start of each line;
   that's fine for a one-line sub, not for paragraphs. */
.prose {
  max-width: 660px;
  margin: 0 auto;
}

.prose p { margin: 0 0 18px; font-size: 17px; line-height: 1.7; color: var(--muted); }
.prose p:last-child { margin-bottom: 0; }

/* ---- labelled list: a scannable alternative to a wall of prose ----
   A real <dl>: these genuinely are term/description pairs, so the markup says
   so rather than faking it with bold text in a paragraph. */

.deflist {
  max-width: 660px;
  margin: 0 auto;
  display: grid;
  gap: 24px;
}

/* A why-list with art beside it. The list carries the argument, so it keeps
   the wider column; the art is support, not the subject. Pair with .split so
   the art and the mobile collapse to one column come along for free. */
.split-list { grid-template-columns: 1.45fr 1fr; }

.split-list .deflist { max-width: none; margin: 0; }

.split-list .art { max-width: 360px; }

.deflist > div { margin: 0; }

.deflist dt {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.deflist dd {
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--muted);
}

/* ---- contextual links inside copy ----
   Links mid-sentence keep an underline -- that's how you spot them without
   hunting -- but a faint one, so a paragraph with three links in it doesn't
   look striped. It firms up on hover. */

.surface p a,
.split .copy p a,
.prose p a,
.deflist dd a {
  color: var(--blue-dark);
  text-decoration: underline;
  text-decoration-color: rgba(37, 99, 235, 0.32);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.surface p a:hover,
.split .copy p a:hover,
.prose p a:hover,
.deflist dd a:hover { text-decoration-color: currentColor; }

/* ---- read-more links ---- */

.more {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
  margin: 36px auto 0;
  max-width: 660px;
  padding: 0;
  list-style: none;
}

/* links that follow prose line up with it rather than re-centring */
.prose + .more { justify-content: flex-start; }

.more a {
  font-size: 15px;
  font-weight: 500;
  color: var(--blue-dark);
  text-decoration: none;
}

.more a:hover { text-decoration: underline; }

/* ---- closing CTA ---- */

.page-cta {
  padding: 72px 24px 96px;
  text-align: center;
  /* Flat, like every other section. The footer keeps its own border: that rule
     is site-wide chrome and a deliberate content/footer divider. */
  background: var(--bg);
}

.page-cta h2 {
  margin: 0 0 12px;
  font-size: clamp(28px, 3.6vw, 38px);
  letter-spacing: -0.02em;
  font-weight: 600;
}

.page-cta p { margin: 0 0 28px; font-size: 17px; color: var(--muted); }

@media (max-width: 900px) {
  .page-hero {
    padding: 120px 24px 64px;
    text-align: center;
  }
  .page-hero .inner { grid-template-columns: 1fr; gap: 36px; }
  .page-hero h1 { font-size: clamp(32px, 8vw, 44px); }
  .page-hero .lede { margin-left: auto; margin-right: auto; font-size: 17px; }
  .page-hero .shot { max-width: 300px; }
  /* a full phone is over twice as tall as it is wide, so it needs reining in
     harder than a cropped shot once the columns stack */
  .page-hero .shot-device { max-width: 240px; }

  .split { grid-template-columns: 1fr; gap: 32px; }
  .split + .split { margin-top: 64px; }
  /* art above copy on every row, flipped or not: alternating sides is
     meaningless in one column and just makes the order unpredictable */
  .split .copy { order: 2; }
  .split .art { order: 1; }
  .split .copy h2 { text-align: center; }
  .split .copy p { text-align: center; }
  .split .copy .more { justify-content: center; }
}

@media (max-width: 760px) {
  .surfaces { grid-template-columns: 1fr; }
  .surfaces > :last-child:nth-child(odd) { max-width: none; }
  .section { padding: 44px 24px; }
  .page-cta { padding: 56px 24px 72px; }
}


/* ============================================================
   FAQ accordion
   Was inline on the homepage until a feature page wanted one too. Shared
   here rather than copied, same reason as the footer.
   ============================================================ */

.faq {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px 150px;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: start;
}

.faq h2 {
  margin: 0;
  font-size: clamp(36px, 4.6vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 600;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* On the homepage the accordion sits in a ~620px column, so its 560px answers
   fill it. Dropped into a feature section it would stretch to the full 1080px
   with the text still at 560, stranded on the left. Rein it in. */
.section > .inner > .faq-list {
  max-width: 760px;
  margin: 0 auto;
}

.faq-list details {
  background: #fff;
  border-radius: 22px;
  padding: 24px 26px;
  box-shadow: 0 6px 20px rgba(20, 34, 59, 0.06);
}

.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  cursor: pointer;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  list-style: none;
}

.faq-list summary::-webkit-details-marker { display: none; }

.faq-list .toggle {
  position: relative;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: #eef0f4;
  transition: transform 0.25s ease, background 0.25s ease;
}

.faq-list .toggle::before,
.faq-list .toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
}

.faq-list .toggle::after { transform: translate(-50%, -50%) rotate(90deg); }

.faq-list details[open] .toggle { transform: rotate(45deg); }

.faq-list details p {
  margin: 14px 0 2px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 560px;
}

/* Scannable lists inside an answer (supported sensors, the surfaces glucose
   shows up on). One item per line: a wrapping inline row packs more into the
   height, but the eye has to hunt along it, and a single column is what makes
   a list worth having here. */
.faq-list details ul {
  margin: 10px 0 2px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 560px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}

.faq-list details ul li {
  position: relative;
  padding-left: 13px;
}

.faq-list details ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
}

.faq-list details ul + p { margin-top: 12px; }

/* An answer's link to the page that covers it properly. Same quiet treatment as
   the cards: the FAQ answers the question, the link is for readers who want the
   depth, so it shouldn't compete with the answer itself. */
.faq-list details .faq-link { margin-top: 14px; }

.faq-list details .faq-link a {
  font-size: 15px;
  font-weight: 500;
  color: var(--blue-dark);
  text-decoration: none;
}

.faq-list details .faq-link a:hover { text-decoration: underline; }

.faq-list details .faq-link span { display: inline-block; transition: transform 0.15s ease; }
.faq-list details .faq-link a:hover span { transform: translateX(3px); }

.faq-list details a { color: var(--blue-dark); }

@media (max-width: 940px) {
  .faq {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-bottom: 80px;
  }
}