/* ==========================================================================
   NoteyDoc landing — Direction B, "Instrument"
   Light, neutral, one accent. The site landing page.
   Does not touch index.html (inline styles) or shared-footer.css.
   ========================================================================== */

/* --- Typefaces -----------------------------------------------------------
   Public Sans (variable 400–700) + IBM Plex Mono 500. Both SIL OFL 1.1,
   self-hosted from /fonts so no third-party request is made.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/public-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/public-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/plex-mono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/plex-mono-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens --------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Neutrals carry the page. */
  --white: #ffffff;
  --band: #f4f6f8;
  --ink: #111418;      /* 18.5:1 on white */
  --ink-2: #4c555f;    /*  7.6:1 on white */
  --rule: #dde2e8;
  --rule-strong: #c7cfd8;

  /* One accent. Nothing else is colored. */
  --accent: #2f3aa8;       /* 9.2:1 on white, white on it 9.2:1 */
  --accent-deep: #242d86;  /* hover  — white on it 11.7:1 */
  --accent-press: #1c2470; /* active — white on it 13.7:1 */
  --accent-wash: #eef0fa;  /* secondary button hover ground */

  /* Type */
  --font-sans: "Public Sans", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    monospace;

  --fs-h1: clamp(2rem, 1.45rem + 2.4vw, 3rem);
  --fs-h2: clamp(1.375rem, 1.2rem + 0.85vw, 1.75rem);
  --fs-lead: clamp(1rem, 0.95rem + 0.35vw, 1.125rem);
  --fs-h3: 1.0625rem;
  --fs-body: 1rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.875rem;
  --fs-2xs: 0.8125rem;
  --fs-label: 0.6875rem;

  /* Spacing scale, base 4 */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 72px;
  --s9: 112px;

  --r-sm: 4px;
  --r: 6px;
  --r-lg: 8px;

  --wrap: 1200px;
  --gutter: 20px;
  --section-y: 48px;

  /* The signature. Measured off noteydoc-recording-v6.mp4: the NoteyDoc panel
     docks to the right of the chart at 75.82% of screen width. That seam is
     the one line this page is built on. */
  --dock: 75.82%;

  --shadow-panel: 0 1px 2px rgba(17, 20, 24, 0.05),
    0 20px 40px -28px rgba(17, 20, 24, 0.45);
}

@media (min-width: 768px) {
  :root {
    --gutter: 32px;
  }
}

/* --- Base ----------------------------------------------------------------- */

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

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
}

img,
video {
  max-width: 100%;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-y);
}

.band {
  background: var(--band);
  border-block: 1px solid var(--rule);
}

@media (min-width: 900px) {
  :root {
    --section-y: var(--s8);
  }
}

/* Shared section header */

.sec-head {
  max-width: 62ch;
  margin-bottom: var(--s7);
}

.sec-title {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.sec-lead {
  margin-top: var(--s3);
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--ink-2);
}

.ruled {
  position: relative;
  border-top: 1px solid var(--rule);
  padding-top: var(--s5);
}

.block-title {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.block-body {
  margin-top: var(--s3);
  color: var(--ink-2);
  line-height: 1.6;
}

/* --- Header --------------------------------------------------------------- */

.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--rule);
  z-index: 50;
}

@media (min-width: 900px) {
  .site-header {
    position: sticky;
    top: 0;
  }
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s5);
  padding-block: var(--s3);
}

.brand {
  order: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  min-width: 0;
}

.brand-mark {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: var(--r);
  background: var(--accent);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-name {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.brand-sub {
  font-size: var(--fs-label);
  line-height: 1.35;
  color: var(--ink-2);
  margin-top: 1px;
}

.nav {
  order: 3;
  flex: 1 0 100%;
  display: flex;
  gap: var(--s5);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: var(--s1);
}

.nav::-webkit-scrollbar {
  display: none;
}

.nav a {
  font-size: var(--fs-xs);
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.nav a:hover {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

/* Below ~520px the seven nav items always overflow, so fade the right edge
   to show there is more to scroll to. */
@media (max-width: 520px) {
  .nav {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
}

@media (min-width: 900px) {
  .nav {
    order: 2;
    flex: 0 1 auto;
    padding-bottom: 0;
    margin-right: var(--s2);
  }
}

.header-cta {
  order: 2;
}

@media (min-width: 900px) {
  .header-cta {
    order: 3;
  }
}

/* --- Buttons -------------------------------------------------------------- */

/* Every variant carries a 2px border, transparent where it is not drawn, so
   filled and outlined buttons are exactly the same height. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.005em;
  border: 2px solid transparent;
  border-radius: var(--r);
  padding: 11px 19px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.13s ease, border-color 0.13s ease,
    color 0.13s ease, transform 0.08s ease;
}

/* Hero size: ~53px tall, comfortably over the 48px touch target. */
.btn--lg {
  padding: 15px 26px;
  font-size: var(--fs-body);
}

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
  font-weight: 700;
}

.btn--primary:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
}

.btn--primary:active {
  background: var(--accent-press);
  border-color: var(--accent-press);
  transform: translateY(1px);
}

/* Outlined in the same accent rather than a grey hairline, so it reads as the
   second real option instead of a disabled control. */
.btn--secondary {
  background: var(--white);
  color: var(--accent);
  border-color: var(--accent);
}

.btn--secondary:hover {
  background: var(--accent-wash);
  color: var(--accent-deep);
  border-color: var(--accent-deep);
}

.btn--secondary:active {
  background: var(--accent-wash);
  color: var(--accent-press);
  border-color: var(--accent-press);
  transform: translateY(1px);
}

.btn--nav {
  padding: 8px 15px;
  font-size: var(--fs-xs);
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}

.btn--nav:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
}

.btn--nav:active {
  background: var(--accent-press);
  border-color: var(--accent-press);
  transform: translateY(1px);
}

/* --- Hero ----------------------------------------------------------------- */

.hero {
  padding-block: var(--s8) var(--s7);
}

@media (min-width: 900px) {
  .hero {
    padding-block: var(--s9) var(--s8);
  }
}

/* Once the panel is beside the headline it, not the padding, sets the hero's
   height. Trading --s9 for --s7 up top hands ~64px of that back to the panel. */
@media (min-width: 1000px) {
  .hero {
    padding-block: var(--s7) var(--s8);
  }
}

/* The panel sits to the right of the copy at desktop widths, at its true
   425x615 proportions. Below 1000px there is no room for it beside the
   headline, so the hero returns to a single column without it. */
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.hero-shot {
  display: none;
}

@media (min-width: 1000px) {
  .hero-inner {
    /* The panel column sizes itself to whatever width the height cap below
       leaves it, so the grid follows the image rather than the reverse. */
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s7);
    /* Top-aligned, not centred: against a panel this tall, centring pushes
       the headline and CTA row far down the first screen. */
    align-items: start;
  }

  .hero-shot {
    display: block;
  }

  /* The panel is 1:2.10, so width is the wrong thing to constrain — capping
     the height is what keeps the whole UI in frame with nothing cropped.

     The panel starts ~111px down the page, so `100vh - 60px` lands its bottom
     edge about 50px past the fold at any viewport height: nearly all of it is
     on the first screen, and the part that runs off is itself the cue to
     scroll. 968px is its native height, so it is never scaled up — a UI
     screenshot goes soft the moment it is enlarged past source. On a short
     laptop the viewport term takes over and it shrinks to fit. */
  .hero-shot .shot-frame {
    max-width: none;
  }

  .hero-shot .shot-frame img {
    width: auto;
    height: min(968px, calc(100vh - 60px));
    max-width: 461px;
  }
}

@media (min-width: 1280px) {
  .hero-inner {
    gap: var(--s8);
  }
}

.hero-title {
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  max-width: 21ch;
  text-wrap: balance;
}

.hero-lead {
  margin-top: var(--s5);
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 56ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s6);
}

.cta-download-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* On a narrow phone both actions take the full column rather than sitting
   as two orphaned pills. */
@media (max-width: 479px) {
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cta-download-wrap {
    display: flex;
    width: 100%;
  }

  .cta-download-wrap .btn {
    flex: 1 1 auto;
  }
}

.cta-info-trigger {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--rule-strong);
  background: var(--white);
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.cta-info-trigger:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.cta-info-trigger svg {
  width: 13px;
  height: 13px;
  display: block;
}

.cta-tooltip {
  position: absolute;
  left: 0;
  top: calc(100% + 10px);
  width: max-content;
  max-width: min(290px, calc(100vw - 2 * var(--gutter)));
  padding: 10px 12px;
  border-radius: var(--r);
  background: var(--ink);
  color: var(--white);
  font-size: var(--fs-2xs);
  line-height: 1.45;
  text-align: left;
  box-shadow: 0 10px 26px -10px rgba(17, 20, 24, 0.5);
  z-index: 20;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-3px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
}

.cta-download-wrap.is-open .cta-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* --- Benefits (three ruled blocks, no boxes) ------------------------------ */

/* The hero carries the first screen on its own. No hold-back is needed above
   1000px any more: because the panel is capped against viewport height, the
   benefit blocks land just below the fold at any screen size on their own. */
.benefits-section {
  padding-top: 0;
}

.benefits {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s6);
}

@media (min-width: 860px) {
  .benefits {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s7);
  }
}

/* --- The demo, and the dock seam ------------------------------------------
   The page's one signature. A hairline sits at exactly the point where the
   NoteyDoc panel meets the chart in the recording below it, and runs the full
   height of the band, so the heading and the caption are split by the same
   line that splits the therapist's screen. It passes behind the video, where
   the real seam takes over.
   -------------------------------------------------------------------------- */

.demo-inner {
  position: relative;
}

@media (min-width: 1024px) {
  .demo-inner::before {
    content: "";
    position: absolute;
    top: calc(-1 * var(--section-y));
    bottom: calc(-1 * var(--section-y));
    left: calc(var(--gutter) + (100% - 2 * var(--gutter)) * 0.7582);
    width: 1px;
    background: var(--rule-strong);
    z-index: 0;
  }

  /* Heading and caption stay on the chart side of the seam. */
  .demo .sec-head,
  .demo .video-caption {
    max-width: calc(var(--dock) - var(--s6));
  }
}

.video-frame {
  position: relative;
  z-index: 1;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow-panel);
}

/* The demo is a 2:1 desktop recording, so on a phone it earns the full
   viewport width instead of sitting inside the text gutter. */
@media (max-width: 639px) {
  .video-frame {
    margin-inline: calc(var(--gutter) * -1);
    border-inline: 0;
    border-radius: 0;
  }
}

.video-frame video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2560 / 1278;
  background: #000;
}

.video-caption {
  position: relative;
  z-index: 1;
  margin-top: var(--s5);
  color: var(--ink-2);
  max-width: 62ch;
}

/* --- How it works (ruled timeline) ---------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: 1fr;
}

.step {
  position: relative;
  padding-top: var(--s6);
  padding-bottom: var(--s5);
}

/* The rule is a pseudo-element rather than a border so it can be drawn. */
.step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--rule);
  transform-origin: left center;
}

.step:last-child {
  padding-bottom: 0;
}

.step-number {
  position: absolute;
  top: -0.55em;
  left: 0;
  background: var(--white);
  padding-right: var(--s3);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.1;
  color: var(--accent);
}

.step h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.step p {
  margin-top: var(--s2);
  color: var(--ink-2);
}

@media (min-width: 860px) {
  .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--s6);
  }

  .step {
    padding-bottom: 0;
  }
}

/* The page's one piece of motion. These four steps are the only content that
   is genuinely a sequence, so the rules draw in order as the section arrives
   and the text follows each one. Applied only when scripting is available and
   reduced motion is not requested, so the default state is fully visible. */
.js-reveal .step::before {
  transform: scaleX(0);
}

.js-reveal .step > * {
  opacity: 0;
  transform: translateY(6px);
}

.js-reveal .steps.is-in .step::before {
  transform: scaleX(1);
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.24, 1) var(--delay, 0ms);
}

.js-reveal .steps.is-in .step > * {
  opacity: 1;
  transform: none;
  transition: opacity 0.4s ease calc(var(--delay, 0ms) + 120ms),
    transform 0.4s ease calc(var(--delay, 0ms) + 120ms);
}

.js-reveal .step:nth-child(2) {
  --delay: 90ms;
}

.js-reveal .step:nth-child(3) {
  --delay: 180ms;
}

.js-reveal .step:nth-child(4) {
  --delay: 270ms;
}

/* --- Why NoteyDoc (ruled feature blocks) ---------------------------------- */

.shot-frame {
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-panel);
  max-width: 425px;
}

.shot-frame img {
  display: block;
  width: 100%;
  height: auto;
}

/* Capped so the body copy keeps a readable measure now that the screenshot
   no longer occupies the left column of this section. */
.features {
  display: grid;
  gap: var(--s6);
  max-width: 68ch;
}

.feature-list {
  margin-top: var(--s4);
  list-style: none;
  display: grid;
  gap: var(--s2);
}

.feature-list li {
  position: relative;
  padding-left: 18px;
  color: var(--ink-2);
}

.feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 8px;
  height: 1.5px;
  background: var(--accent);
}

/* --- Testimonials --------------------------------------------------------- */

.quotes {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s7);
}

@media (min-width: 860px) {
  .quotes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s8);
  }
}

.quote {
  border-left: 2px solid var(--accent);
  padding-left: var(--s5);
}

.testimonial-stars {
  color: var(--accent);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  line-height: 1;
}

.quote blockquote {
  margin-top: var(--s4);
  font-size: var(--fs-h3);
  line-height: 1.6;
  color: var(--ink);
}

.testimonial-attribution {
  margin-top: var(--s4);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
}

.testimonial-source-link {
  display: inline-block;
  margin-top: var(--s1);
  font-size: var(--fs-xs);
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.testimonial-source-link:hover {
  color: var(--accent-deep);
}

/* --- FAQ ------------------------------------------------------------------ */

.faq-list {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--s8);
}

@media (min-width: 900px) {
  .faq-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.faq-item {
  border-top: 1px solid var(--rule);
  padding-block: var(--s5);
}

.faq-item h3 {
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.faq-item p {
  margin-top: var(--s2);
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 60ch;
}

.faq-item a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.faq-item a:hover {
  color: var(--accent-deep);
}

/* --- Footer ---------------------------------------------------------------
   The shared footer markup is injected by scripts/inject-footer.js and its
   stylesheet is loaded before this file, so these rules re-skin it for the
   light page without editing shared-footer.css.
   -------------------------------------------------------------------------- */

.noteydoc-shared-footer {
  background: var(--band);
  border-top: 1px solid var(--rule);
  color: var(--ink-2);
  font-size: var(--fs-xs);
  padding: var(--s8) 0;
}

.noteydoc-shared-footer .footer-inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  grid-template-columns: 1fr;
  gap: var(--s6);
}

@media (min-width: 560px) {
  .noteydoc-shared-footer .footer-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .noteydoc-shared-footer .footer-inner {
    grid-template-columns: minmax(0, 1.3fr) repeat(5, minmax(0, 1fr));
    gap: var(--s6) var(--s5);
  }
}

.noteydoc-shared-footer .footer-brand {
  color: var(--ink-2);
  line-height: 1.6;
}

.noteydoc-shared-footer .footer-group {
  gap: var(--s1);
}

.noteydoc-shared-footer .footer-group h2 {
  margin: 0 0 var(--s2);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

/* line-height keeps each link at least 24px tall (WCAG 2.2 target size). */
.noteydoc-shared-footer a {
  color: var(--ink-2);
  text-decoration: none;
  line-height: 1.75;
}

.noteydoc-shared-footer a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}