/*
 * Hand-written app shell styles (Propshaft, no Tailwind). Aiming for a calm,
 * Typora-like writing feel: generous whitespace, one accent color, subtle
 * borders, system fonts, light + dark via prefers-color-scheme.
 *
 * Editor-specific styles for the Phase 2 TipTap surface live in editor.css
 * (owned by another agent) — keep this file to shell/chrome only.
 */

/* ---------------------------------------------------------------------------
   Two voices

   brainlog is a *log* -- a text file -- and its whole thesis is that the markdown
   you type is the truth while everything else is a view of it. The type system
   says so out loud:

     Your side   -- the writing surface -- is proportional, quiet, and gets out of
                    the way. It is prose.
     The machine's side -- ALL chrome -- is monospace, because every noun in this
                    app's vocabulary is literally file syntax: `- [ ]`, `@due()`,
                    `@assigned()`, page names, line numbers.

   So the chrome speaks the language of the file, and the page speaks yours.
   --------------------------------------------------------------------------- */
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-serif: "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --radius: 6px;
  --radius-lg: 10px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
}

/* ---------------------------------------------------------------------------
   Palette

   Warm, paper-like, and deliberately NOT neutral grey: a writing app should feel
   like paper and ink, not like a dashboard. The three panes are separated by
   real (if subtle) tonal steps -- rail darkest, sidebar mid, page lightest -- so
   the surface you write on is always the brightest thing on screen.

   The editor consumes these same tokens (see editor.css), so the chrome and the
   writing surface can never drift apart the way they did when each owned its own
   palette: a cool blue-black shell around a warm charcoal editor, both reading
   as flat black.
   --------------------------------------------------------------------------- */
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
  }
}

:root,
:root[data-theme="light"] {
  color-scheme: light;

  /* Blue-black: the colour pens actually write in. The old green was arbitrary --
     chosen because it looked calm, not because it meant anything here. */
  --accent: #2c5d78;
  --accent-soft: rgba(44, 93, 120, 0.1);
  --accent-contrast: #ffffff;

  /* Paper, then desk. A grey-warm stock, deliberately not the cream that every
     "calm writing app" reaches for. */
  --bg: #f8f7f3;
  --bg-sidebar: #f0eee8;
  --bg-rail: #e8e6df;
  --bg-raised: #fefefd;
  /* Highlighter. Used for exactly one thing: search hits. Marginalia, not decor. */
  --marker: #f2e5a4;
  --bg-hover: rgba(38, 36, 31, 0.05);
  --bg-active: var(--accent-soft);

  --text: #23231f;
  --text-muted: #6a675f;
  --text-faint: #9b968b;

  --border: #ddd9d0;
  --border-strong: #cbc5b9;

  --danger: #b4453a;

  --shadow: 0 1px 2px rgb(38 36 31 / 6%);
  --shadow-lg: 0 8px 28px rgb(38 36 31 / 12%);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --accent: #8fc0da;
  --accent-soft: rgba(143, 192, 218, 0.14);
  --accent-contrast: #14232c;
  --marker: #6b5f2c;

  /* Layered, warm, never #000: pure black on an OLED reads as a hole in the page
     and gives the panes nothing to separate against. */
  --bg: #1f1f1d;
  --bg-sidebar: #1a1a19;
  --bg-rail: #151514;
  --bg-raised: #272725;
  --bg-hover: rgba(255, 255, 255, 0.06);
  --bg-active: var(--accent-soft);

  --text: #e9e5dd;
  --text-muted: #a29d93;
  --text-faint: #736f68;

  --border: #33322e;
  --border-strong: #46443f;

  --danger: #e0776b;

  --shadow: 0 1px 2px rgb(0 0 0 / 30%);
  --shadow-lg: 0 10px 30px rgb(0 0 0 / 45%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --accent: #8fc0da;
    --accent-soft: rgba(143, 192, 218, 0.14);
    --accent-contrast: #14232c;
    --marker: #6b5f2c;

    --bg: #1f1f1d;
    --bg-sidebar: #1a1a19;
    --bg-rail: #151514;
    --bg-raised: #272725;
    --bg-hover: rgba(255, 255, 255, 0.06);
    --bg-active: var(--accent-soft);

    --text: #e9e5dd;
    --text-muted: #a29d93;
    --text-faint: #736f68;

    --border: #33322e;
    --border-strong: #46443f;

    --danger: #e0776b;

    --shadow: 0 1px 2px rgb(0 0 0 / 30%);
    --shadow-lg: 0 10px 30px rgb(0 0 0 / 45%);
  }
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

button, input, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* ---------------------------------------------------------------- shell */

.app-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.folder-rail {
  width: 220px;
  flex: none;
  display: flex;
  flex-direction: column;
  background: var(--bg-rail);
  border-right: 1px solid var(--border);
  padding: var(--space-4) var(--space-2);
}

.folder-rail h1 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 var(--space-2) var(--space-3);
}

.folder-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.folder-list-item a {
  display: block;
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius);
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.folder-list-item a:hover {
  background: var(--bg-hover);
}

.folder-list-item.active a {
  background: var(--bg-active);
  color: var(--accent);
}

turbo-frame#main_pane {
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 0;
}

.sidebar {
  width: 280px;
  flex: none;
  display: flex;
  flex-direction: column;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--border);
}

.sidebar-header .title-edit {
  font-size: 16px;
  font-weight: 600;
}

.sidebar-actions {
  display: flex;
  gap: var(--space-1);
}

.section-list {
  flex: 1;
  padding: var(--space-2) var(--space-2) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.section {
  display: flex;
  flex-direction: column;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
}

.section-header .title-edit {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.section-actions {
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.1s ease;
}

.section:hover .section-actions,
.page-row:hover .page-actions {
  opacity: 1;
}

.page-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-height: 4px;
}

.page-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--radius);
  cursor: grab;
}

.page-row:hover {
  background: var(--bg-hover);
}

.page-row.active {
  background: var(--bg-active);
}

.page-row.active .page-link {
  color: var(--accent);
  font-weight: 600;
}

.page-row.dragging {
  opacity: 0.4;
}

.page-link {
  flex: 1;
  display: block;
  padding: var(--space-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-actions {
  padding-right: var(--space-2);
}

.new-item-form {
  padding: var(--space-2);
}

.new-item-form input {
  width: 100%;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: var(--space-2);
  background: transparent;
}

.new-item-form input:focus {
  outline: none;
  border-color: var(--accent);
  border-style: solid;
}

/* min-height:0 is load-bearing. Without it a flex child refuses to shrink below its
   content, so a long page could not scroll -- .app-shell's overflow:hidden simply
   clipped it and the rest of the note was unreachable. */
turbo-frame#content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
}

.content-pane {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
}

.editor-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-6) 0;
}

.save-status {
  font-size: 12px;
  color: var(--text-faint);
}

.save-status[data-state="saving"] {
  color: var(--text-muted);
}

.save-status[data-state="error"] {
  color: var(--danger);
}

.collaborators {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 1.5rem;
  color: var(--text-faint);
  font-size: 12px;
}

.collaborator {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--text-muted);
}

.collaborator::before {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--collaborator-color);
  content: "";
}

.page-title-input {
  width: 100%;
  border: none;
  background: transparent;
  font-size: 30px;
  font-weight: 700;
  font-family: var(--font-serif);
  padding: var(--space-5) var(--space-6) var(--space-2);
  outline: none;
}

.page-title-input::placeholder {
  color: var(--text-faint);
}

.page-body-input {
  flex: 1;
  border: none;
  background: transparent;
  resize: none;
  outline: none;
  padding: 0 var(--space-6) var(--space-6);
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.7;
  max-width: 760px;
}

/* ------------------------------------------------------------ elements */

.icon-button {
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--radius);
  width: 24px;
  height: 24px;
  line-height: 1;
  cursor: pointer;
}

.icon-button:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.icon-button.danger:hover {
  color: var(--danger);
}

.ghost-button {
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--radius);
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
}

.ghost-button:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.ghost-button.danger:hover {
  color: var(--danger);
  border-color: var(--danger);
}

.primary-button {
  border: none;
  background: var(--accent);
  color: var(--accent-contrast);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  font-weight: 500;
}

.primary-button:hover {
  filter: brightness(1.05);
}

/* .primary-button/.ghost-button were button/input styles; the marketing pages
   are the first place they dress a plain <a> (a link to sign-in, not a form
   submit), so give the anchor case its own box and drop the underline. */
a.primary-button,
a.ghost-button {
  display: inline-block;
  text-decoration: none;
}

.title-edit {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.title-edit .title-label {
  cursor: text;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.title-edit .title-label:hover {
  background: var(--bg-hover);
}

.title-edit form {
  width: 100%;
}

.title-edit input[type="text"] {
  width: 100%;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--space-1) var(--space-2);
  background: var(--bg);
  outline: none;
}

/* -------------------------------------------------------------- empty */

.empty-state {
  margin: auto;
  max-width: 340px;
  text-align: center;
  color: var(--text-muted);
  padding: var(--space-6);
}

.empty-state h2 {
  color: var(--text);
  font-size: 18px;
  margin-bottom: var(--space-2);
}

.empty-state p {
  margin: 0 0 var(--space-4);
}

.empty-hint {
  color: var(--text-faint);
  font-size: 13px;
  padding: var(--space-1) var(--space-2);
  margin: 0;
}

/* ------------------------------------------------------- view switcher */

.view-tab,
.filter-tab {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}

.view-tab:hover,
.filter-tab:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.section-view-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 var(--space-1);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.section-view-link:hover {
  background: var(--bg-hover);
  color: var(--text);
}

/* ------------------------------------------------------------ task views */

.task-view {
  padding: var(--space-5) var(--space-6) var(--space-6);
  overflow-y: auto;
}

.task-view-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.task-view-header h1 {
  font-size: 22px;
  margin: 0;
}

.task-filters {
  display: flex;
  gap: 2px;
}

.filter-tab.active {
  background: var(--bg-active);
  color: var(--accent);
}

.task-page-group {
  margin-bottom: var(--space-5);
}

.task-page-group h3 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0 0 var(--space-2);
}

.due-group {
  margin-bottom: var(--space-5);
}

.due-group h3 {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0 0 var(--space-2);
}

.board-count {
  font-weight: 400;
  color: var(--text-faint);
}

.task-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.task-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--bg);
}

.task-row + .task-row {
  border-top: 1px solid var(--border);
}

.task-checkbox {
  flex: none;
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.task-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-due,
.task-assignee,
.task-state {
  flex: none;
  font-size: 12px;
  color: var(--text-muted);
}

.task-due.overdue {
  color: var(--danger);
  font-weight: 600;
}

.task-row.overdue {
  background: color-mix(in srgb, var(--danger) 6%, var(--bg));
}

.task-state {
  min-width: 44px;
  text-align: right;
  text-transform: capitalize;
}

/* ------------------------------------------------------------- board */

.board-columns {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.board-column {
  flex: 1;
  min-width: 0;
  background: var(--bg-sidebar);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
}

.board-column h3 {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0 0 var(--space-3);
}

.board-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 24px;
}

.board-card {
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  cursor: grab;
}

.board-card.dragging {
  opacity: 0.4;
}

.board-card-text {
  font-size: 14px;
  margin-bottom: var(--space-1);
}

.board-card-meta {
  display: flex;
  gap: var(--space-2);
  font-size: 12px;
  color: var(--text-muted);
}

.board-card-meta .task-due.overdue {
  color: var(--danger);
}

.board-card-page {
  margin-top: var(--space-1);
  font-size: 11px;
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ------------------------------------------------------------- search */

.search-form {
  padding: var(--space-1) var(--space-2) var(--space-3);
}

.search-input {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: var(--space-1) var(--space-2);
  background: var(--bg);
}

.search-form-large {
  padding: 0;
  max-width: 480px;
  margin-bottom: var(--space-5);
}

.search-form-large .search-input {
  padding: var(--space-2) var(--space-3);
  font-size: 15px;
}

.search-pane {
  padding: var(--space-6);
  overflow-y: auto;
}

.search-results {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 640px;
}

.search-results li {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}

.search-breadcrumb {
  font-size: 12px;
  color: var(--text-faint);
  margin: 2px 0;
}

.search-snippet {
  font-size: 13px;
  color: var(--text-muted);
}

.search-snippet mark {
  background: var(--bg-active);
  color: var(--accent);
  border-radius: 2px;
}

/* --------------------------------------------------------------- misc */

.flash {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  background: var(--bg-sidebar);
  border: 1px solid var(--border-strong);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  z-index: 10;
  font-size: 14px;
}

.flash.alert {
  color: var(--danger);
  border-color: var(--danger);
}

.trash-list {
  list-style: none;
  margin: 0;
  padding: var(--space-6);
  max-width: 640px;
}

.trash-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}

.trash-meta {
  color: var(--text-faint);
  font-size: 13px;
}

/* ---------------------------------------------------------- auth pages */

.auth-page {
  max-width: 360px;
  margin: 15vh auto;
  padding: 0 var(--space-4);
}

/* :not([type="submit"]) is load-bearing. This selector outranks .primary-button, so
   without it the Sign in button was painted as a plain text field and its label
   disappeared into the background. */
.auth-page input:not([type="submit"]) {
  display: block;
  width: 100%;
  margin-bottom: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg);
}

.auth-page input[type="submit"] {
  width: 100%;
  margin-bottom: var(--space-3);
}

.auth-page .field-hint {
  color: var(--text-muted);
  font-size: 13px;
  margin: -var(--space-2) 0 var(--space-4);
}

/* --------------------------------------------------------- share / invite */

.share-control {
  position: relative;
}

.share-control summary {
  list-style: none;
  cursor: pointer;
}

.share-control summary::-webkit-details-marker {
  display: none;
}

.share-control[open] summary {
  background: var(--bg-hover);
  color: var(--text);
}

.share-panel-frame {
  display: block;
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  z-index: 5;
  width: 340px;
}

.share-panel {
  display: block;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  padding: var(--space-3);
}

.share-panel-new-link {
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.share-panel-new-link p {
  margin: 0 0 var(--space-1);
  font-size: 13px;
  color: var(--text-muted);
}

.copy-field {
  display: flex;
  gap: var(--space-1);
}

.copy-field input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: var(--space-1) var(--space-2);
  background: var(--bg-sidebar);
  font-size: 12px;
}

.share-link-list,
.invitation-list {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.share-link-row,
.invitation-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 12px;
}

.share-link-url,
.invitation-email {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
}

.share-link-state,
.invitation-state {
  flex: none;
  color: var(--text-faint);
}

.share-link-state.active,
.invitation-state.active {
  color: var(--accent);
}

/* A word-button sized for the 12px link row -- .icon-button's fixed 24px
   square fits a glyph, not the word "Revoke". */
.share-link-revoke {
  flex: none;
  padding: 2px var(--space-2);
  font-size: 11px;
}

.share-link-form,
.invite-form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 13px;
}

.share-link-form label,
.invite-form label {
  color: var(--text-muted);
}

.share-link-form input[type="date"],
.invite-form input[type="email"] {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: var(--space-1) var(--space-2);
  background: var(--bg);
  flex: 1;
  min-width: 0;
}

.invite-control {
  padding: 0 var(--space-2);
}

/* ---------------------------------------------------------- public page */

.public-page {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
}

.public-page-header {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
  color: var(--text-faint);
  font-size: 13px;
}

.public-page h1.public-page-title {
  font-family: var(--font-serif);
  font-size: 32px;
  margin: 0 0 var(--space-5);
}

.public-section-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.public-section-list li {
  border-top: 1px solid var(--border);
}

.public-section-list li:first-child {
  border-top: none;
}

.public-section-list a {
  display: block;
  padding: var(--space-3) var(--space-4);
}

.public-section-list a:hover {
  background: var(--bg-hover);
}

.public-not-found {
  max-width: 420px;
  margin: 20vh auto;
  text-align: center;
  color: var(--text-muted);
  padding: 0 var(--space-4);
}

.markdown-content {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.75;
}

.markdown-content > :first-child {
  margin-top: 0;
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4 {
  font-weight: 700;
  line-height: 1.3;
  margin: var(--space-5) 0 var(--space-2);
}

.markdown-content h1 { font-size: 26px; }
.markdown-content h2 { font-size: 21px; }
.markdown-content h3 { font-size: 18px; }

.markdown-content p,
.markdown-content ul,
.markdown-content ol,
.markdown-content blockquote,
.markdown-content pre,
.markdown-content table {
  margin: 0 0 var(--space-4);
}

.markdown-content a {
  color: var(--accent);
  text-decoration: underline;
}

.markdown-content blockquote {
  margin-left: 0;
  padding-left: var(--space-4);
  border-left: 3px solid var(--border-strong);
  color: var(--text-muted);
}

.markdown-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  background: var(--bg-sidebar);
  border-radius: 4px;
  padding: 0.1em 0.35em;
}

.markdown-content pre {
  background: var(--bg-sidebar);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
  overflow-x: auto;
}

.markdown-content pre code {
  background: none;
  padding: 0;
}

.markdown-content li[data-task-list-item] {
  list-style: none;
}

.markdown-content ul:has(input[type="checkbox"]) {
  padding-left: var(--space-4);
}

.markdown-content input[type="checkbox"] {
  margin-right: var(--space-2);
}

.markdown-content table {
  border-collapse: collapse;
  width: 100%;
}

.markdown-content th,
.markdown-content td {
  border: 1px solid var(--border);
  padding: var(--space-1) var(--space-2);
  text-align: left;
}

.markdown-content th {
  background: var(--bg-sidebar);
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Overflow menus

   The sidebar is 280px. Folder headers wanted four word-buttons and section
   headers wanted six controls, which overflowed the column and put a horizontal
   scrollbar under the whole pane. Secondary actions now collapse behind a "⋯"
   disclosure, reusing the same <details> pattern as the share/invite panels.
   --------------------------------------------------------------------------- */
.overflow-menu {
  position: relative;
}

.overflow-menu > summary {
  list-style: none;
  cursor: pointer;
}

.overflow-menu > summary::-webkit-details-marker {
  display: none;
}

.overflow-menu[open] > summary {
  background: var(--bg-hover);
  color: var(--text);
}

.overflow-menu__items {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-1));
  z-index: 50;
  display: flex;
  flex-direction: column;
  min-width: 184px;
  padding: var(--space-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
}

.overflow-menu__items form {
  margin: 0;
}

.menu-item {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius);
  color: var(--text);
  background: transparent;
  font: inherit;
  font-size: 13px;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.menu-item:hover,
.menu-item:focus-visible {
  background: var(--bg-hover);
}

.menu-item.danger {
  color: var(--danger);
}

/* The share panel is itself a <details>; inside a menu it must read as one more
   row, not as a boxed button sitting among plain rows. */
.overflow-menu__items .share-control > summary {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius);
  color: var(--text);
  background: transparent;
  font-size: 13px;
  text-align: left;
}

.overflow-menu__items .share-control > summary:hover {
  background: var(--bg-hover);
}

/* Section actions fade in on hover, but an OPEN menu must not vanish when the
   pointer leaves the section header. */
.section-actions:has(details[open]),
.section-actions:focus-within {
  opacity: 1;
}

/* Nothing in the sidebar may push the pane sideways. */
.sidebar,
.section-list {
  min-width: 0;
  overflow-x: clip;
}

/* ---------------------------------------------------------------------------
   Depth and warmth

   The three panes now step tonally (rail -> sidebar -> page), so instead of one
   flat black field the eye can tell where it is. Cards and menus lift off the
   surface with a real shadow rather than relying on a 1px border alone.
   --------------------------------------------------------------------------- */
.folder-rail {
  display: flex;
  flex-direction: column;
}

.rail-footer {
  margin-top: auto;
  padding: var(--space-3) var(--space-2) var(--space-2);
}

.theme-toggle {
  width: 100%;
  padding: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--text-muted);
  background: transparent;
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.theme-toggle:hover {
  border-color: var(--border);
  color: var(--text);
  background: var(--bg-hover);
}

/* Cards read as paper on a desk, not as outlined rectangles. */
.board-card,
.task-row,
.page-row {
  background: var(--bg-raised);
}

.board-card {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  transition: box-shadow 0.12s ease, transform 0.12s ease;
}

.board-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-1px);
}

.overflow-menu__items,
.share-panel-frame {
  box-shadow: var(--shadow-lg);
}

/* The page you are writing on is the brightest surface on screen. */
.content-pane {
  background: var(--bg);
}

/* An active page/folder should read as selected, not as a blue slab. */
.folder-list-item.active > a,
.page-row.active {
  color: var(--text);
  background: var(--bg-active);
  box-shadow: inset 2px 0 0 var(--accent);
}

/* ------------------------------------------------------------------ account */

.rail-link {
  display: block;
  width: 100%;
  padding: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--text-muted);
  background: transparent;
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.rail-link:hover {
  border-color: var(--border);
  color: var(--text);
  background: var(--bg-hover);
}

.rail-footer form {
  margin: 0;
}

.settings-page {
  max-width: 40rem;
  margin: 0 auto;
  padding: var(--space-6) var(--space-5) var(--space-6);
}

.settings-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.settings-header h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 28px;
}

.settings-section {
  padding: var(--space-5) 0;
  border-top: 1px solid var(--border);
}

.settings-section h2 {
  margin: 0 0 var(--space-2);
  font-size: 15px;
  font-weight: 600;
}

.settings-hint {
  margin: 0 0 var(--space-4);
  color: var(--text-muted);
  font-size: 13px;
}

.settings-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 22rem;
}

.settings-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* The agent-connection docs page reuses the settings shell; these are just
   its code sample and capability table. */
.docs-page .copy-field,
.settings-section .copy-field {
  max-width: 28rem;
  margin-bottom: var(--space-2);
}

.docs-code {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-sidebar);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  overflow-x: auto;
}

.docs-table {
  width: 100%;
  margin: 0 0 var(--space-4);
  border-collapse: collapse;
  font-size: 13px;
}

.docs-table th,
.docs-table td {
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.docs-table th {
  width: 9rem;
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
}

.docs-steps {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-5);
  font-size: 13px;
  line-height: 1.7;
}

.docs-steps li {
  margin-bottom: var(--space-1);
}

.docs-table code,
.docs-page p code,
.docs-steps code {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 1px 4px;
  border-radius: 4px;
  background: var(--bg-hover);
}

.settings-form label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  color: var(--text-muted);
  font-size: 12px;
}

.settings-form input {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-raised);
  color: var(--text);
  font-size: 14px;
}

.settings-form input:focus {
  outline: none;
  border-color: var(--accent);
}

.primary-button {
  align-self: flex-start;
  padding: var(--space-2) var(--space-4);
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 600;
  cursor: pointer;
}

.settings-errors {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  color: var(--danger);
  margin-bottom: var(--space-4);
}

.settings-errors p {
  margin: 0;
}

/* Names are click-to-rename. Say so, quietly -- with no affordance at all, people
   reasonably concluded renaming was simply not implemented. */
.title-label {
  cursor: text;
  border-bottom: 1px dashed transparent;
}

.title-label:hover {
  border-bottom-color: var(--border-strong);
}

/* ---------------------------------------------------------------------------
   Collapsible panes

   The rail and sidebar collapse independently so a writer can push the chrome
   out of the way and just write. State lives as a boolean attribute on <html>
   (not on the pane element itself): <html> survives Turbo frame navigation,
   but the sidebar is re-rendered on every folder/page visit, so keying the
   CSS off an ancestor that never gets swapped means the collapsed state
   applies the instant new sidebar markup lands -- no flash, no JS needed on
   reconnect. See pane_collapse_controller.js and the inline <head> script in
   application.html.erb (same pre-paint pattern as theme).

   Collapsing never removes the toggle: each pane shrinks to a 36px icon strip
   instead of vanishing, so there is always a visible, clickable way back --
   collapsing both panes at once cannot leave a user stuck.
   --------------------------------------------------------------------------- */
.folder-rail,
.sidebar {
  transition: width 0.12s ease;
}

/* The panes themselves no longer scroll -- their CONTENT does. Keeping the
   scrollbox inside .rail-content/.sidebar-content is what lets the rail header
   (the logo toggle) and the sidebar's bottom toggle stay put while long
   folder/section lists scroll behind them. */
.rail-content,
.sidebar-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.pane-toggle {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: var(--space-2) auto;
  border: none;
  border-radius: var(--radius);
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
}

/* The rail toggle is the brand mark; hovering it reveals the chevron in its
   place, and the collapsed rail keeps showing the logo. */
.rail-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-1) var(--space-3);
}

.rail-toggle {
  position: relative;
  width: 28px;
  height: 28px;
  margin: 0;
}

.pane-toggle-logo {
  width: 22px;
  height: 22px;
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 12%));
  transition: opacity 0.12s ease;
}

.rail-toggle .pane-toggle-icon {
  position: absolute;
  inset: 0;
  margin: auto;
  opacity: 0;
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.rail-toggle:hover .pane-toggle-logo,
.rail-toggle:focus-visible .pane-toggle-logo {
  opacity: 0;
}

.rail-toggle:hover .pane-toggle-icon,
.rail-toggle:focus-visible .pane-toggle-icon {
  opacity: 1;
}

/* The sidebar's toggle sits at the BOTTOM of the pane, pinned outside the
   scrolling content. */
.sidebar-toggle {
  margin: auto 0 var(--space-2) var(--space-2);
  align-self: flex-start;
}

.pane-toggle:hover {
  color: var(--text);
  background: var(--bg-hover);
}

.pane-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* A CSS-drawn chevron, not a font glyph: the app already learned (see
   theme_controller.js) that decorative glyphs go missing from some font
   stacks, and this is the very control a stuck user most needs to see. */
.pane-toggle-icon {
  width: 6px;
  height: 6px;
  border-style: solid;
  border-width: 0 0 1.5px 1.5px;
  transform: rotate(45deg);
  transition: transform 0.12s ease;
}

html[data-rail-collapsed] .rail-toggle .pane-toggle-icon,
html[data-sidebar-collapsed] .sidebar-toggle .pane-toggle-icon {
  transform: rotate(225deg);
}

html[data-rail-collapsed] .folder-rail {
  width: 36px;
  padding: var(--space-2) 0;
  align-items: center;
}

html[data-rail-collapsed] .rail-content {
  display: none;
}

html[data-rail-collapsed] .rail-header {
  padding: 0;
  justify-content: center;
}

html[data-rail-collapsed] .folder-rail .brand-name {
  display: none;
}

html[data-sidebar-collapsed] .sidebar {
  width: 36px;
  align-items: center;
}

html[data-sidebar-collapsed] .sidebar-content {
  display: none;
}

html[data-sidebar-collapsed] .sidebar-toggle {
  align-self: center;
  margin-left: 0;
}

@media (prefers-reduced-motion: reduce) {
  .folder-rail,
  .sidebar,
  .pane-toggle-icon,
  .pane-toggle-logo {
    transition: none;
  }
}

.landing-slogan {
  margin: var(--space-2) 0 0;
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.marketing-legal {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-5) 0 var(--space-6);
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 12px;
}

.marketing-legal a:hover {
  color: var(--text);
}

.legal-list {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-5);
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-muted);
}

.legal-list li {
  margin-bottom: var(--space-1);
}

.legal-list strong {
  color: var(--text);
}

/* ------------------------------------------------------------------- brand */

.brand-name {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

.auth-mark {
  width: 96px;
  height: 96px;
  margin-bottom: var(--space-4);
  filter: drop-shadow(0 2px 6px rgb(0 0 0 / 18%));
}

.auth-page h1 {
  margin: 0 0 var(--space-1);
  /* brain + LOG. A log is a text file, so the wordmark is set like one. */
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.auth-tagline {
  margin: 0 0 var(--space-5);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 12.5px;
}

/* The sign-in page is now a brand moment: centre the lockup and the wordmark. */
.auth-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.auth-page form {
  width: 100%;
}

/* ===========================================================================
   THE CHROME SPEAKS MONOSPACE

   Everything the app says about your file -- folder and section names, the view
   switcher, board columns, due dates, assignees, line numbers -- is set in the
   file's own typeface. Everything YOU wrote stays proportional. The two voices
   never blur, and you can always tell which side of the screen you are reading.
   =========================================================================== */

.brand-name,
.folder-rail h1,
.folder-list-item a,
.sidebar-header .title-edit,
.section-header .title-edit,
.page-link,
.view-tab,
.menu-item,
.ghost-button,
.theme-toggle,
.rail-link,
.search-input,
.new-item-form input,
.board-column h3,
.board-card-meta,
.board-card-source,
.task-due,
.task-assignee,
.save-status,
.collaborators,
.due-group h3,
.empty-hint {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: -0.01em;
}

/* The wordmark is a log line: lowercase, monospace, no flourish. */
.brand-name {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}

.folder-rail h1 {
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-faint);
}

.sidebar-header .title-edit {
  font-size: 14px;
  font-weight: 600;
}

.section-header .title-edit {
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
}

.page-link,
.folder-list-item a {
  font-size: 13px;
}

/* --- the board, which is the argument -------------------------------------
   A card sits in a column because of five characters the writer typed. The
   header says which five. The board doubles as the syntax reference, so nobody
   has to be told where tasks come from. */

.board-column h3 {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

.board-marker {
  padding: 2px 5px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-sidebar);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11.5px;
  white-space: pre;
}

.board-name {
  color: var(--text-muted);
}

.board-count {
  margin-left: auto;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

/* Provenance. The card is a view; this is the address of the thing it is a view of. */
.board-card-source {
  display: block;
  margin-top: var(--space-2);
  color: var(--text-faint);
  font-size: 11.5px;
}

.board-card-source:hover .source-page {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.source-line {
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.board-card-text {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
}

.board-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: 11.5px;
  color: var(--text-muted);
}

.task-due.overdue {
  color: var(--danger);
}

/* Search hits get the highlighter -- the one place colour is allowed to shout. */
mark,
.search-hit {
  padding: 0 2px;
  border-radius: 2px;
  background: var(--marker);
  color: inherit;
}

/* The page toolbar sticks to the top of the scrolling pane, and now carries the
   + Table / + Board / + Tasks buttons. They used to live inside the editor content,
   where they scrolled away from the writer as soon as a note got long -- a control
   you have to scroll back up to reach is a control you stop using. */
.editor-toolbar {
  position: sticky;
  top: 0;
  z-index: 20;
  gap: var(--space-3);
  background: var(--bg);
  border-bottom: 1px solid transparent;
}

/* Once you scroll past it, give it an edge so it reads as chrome over the text. */
.content-pane:not([data-at-top]) .editor-toolbar {
  border-bottom-color: var(--border);
}

/* Inside the toolbar the insert bar is just a group of buttons: no pill, no shadow,
   no sticky of its own -- the toolbar does that job now. */
.editor-toolbar .brainlog-editor__insert {
  position: static;
  display: flex;
  gap: var(--space-1);
  margin: 0 0 0 auto;
  width: auto;
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* ---------------------------------------------------------------------------
   Marketing pages ("/" for signed-out visitors, "/pricing")

   Same shell as the other public surfaces (public.html.erb, .public-page):
   one calm column, the mono/serif split the rest of the app uses, no new
   colours. These pages sell nothing directly -- there is no checkout -- so
   there is nothing here that needs to look like a SaaS template.
   --------------------------------------------------------------------------- */

.marketing-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--space-4) var(--space-6);
}

.marketing-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) 0;
}

.marketing-nav-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.marketing-nav-mark {
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 12%));
}

.marketing-nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: 13px;
}

.marketing-nav-links a {
  color: var(--text-muted);
}

.marketing-nav-links a:hover {
  color: var(--text);
}

.landing-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-5) 0 var(--space-6);
}

.landing-mark {
  margin-bottom: var(--space-4);
  filter: drop-shadow(0 2px 6px rgb(0 0 0 / 18%));
}

.landing-hero h1 {
  margin: 0 0 var(--space-3);
  /* Same wordmark treatment as the sign-in page: a log is a text file. */
  font-family: var(--font-mono);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.landing-tagline {
  max-width: 34rem;
  margin: 0 0 var(--space-5);
  color: var(--text-muted);
  font-size: 17px;
  line-height: 1.55;
}

.landing-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.landing-section {
  padding: var(--space-5) 0;
  border-top: 1px solid var(--border);
}

.landing-section h2 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-serif);
  font-size: 21px;
}

.landing-section p {
  max-width: 42rem;
  margin: 0 0 var(--space-3);
  color: var(--text-muted);
  line-height: 1.65;
}

.landing-section p:last-child {
  margin-bottom: 0;
}

.landing-section code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 1px 4px;
  border-radius: 4px;
  background: var(--bg-hover);
}

.landing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-5);
}

.feature-card h3 {
  margin: 0 0 var(--space-2);
  font-size: 15px;
  font-weight: 600;
}

.feature-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
}

.landing-footer {
  padding: var(--space-6) 0 var(--space-5);
  border-top: 1px solid var(--border);
  text-align: center;
}

.landing-footer .landing-tagline {
  margin: 0 auto var(--space-4);
}

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

.pricing-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
  margin: 0;
}

.pricing-plan {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  box-shadow: var(--shadow);
}

.plan-badge {
  align-self: flex-start;
  margin-bottom: var(--space-2);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-sidebar);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
}

.pricing-plan h2 {
  margin: 0 0 var(--space-1);
  font-family: var(--font-serif);
  font-size: 20px;
}

.pricing-price {
  margin: 0 0 var(--space-4);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 14px;
}

.pricing-plan ul {
  flex: 1;
  margin: 0 0 var(--space-4);
  padding-left: var(--space-4);
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.7;
}

.pricing-plan .primary-button,
.pricing-plan .ghost-button {
  align-self: flex-start;
}

.pricing-hint {
  margin: var(--space-3) 0 0;
  color: var(--text-faint);
  font-size: 12.5px;
  line-height: 1.6;
}

.pricing-faq {
  margin: 0;
}

.pricing-faq dt {
  margin-top: var(--space-3);
  color: var(--text);
  font-weight: 600;
  font-size: 14px;
}

.pricing-faq dt:first-child {
  margin-top: 0;
}

.pricing-faq dd {
  margin: var(--space-1) 0 0;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
}

@media (max-width: 520px) {
  .landing-hero h1 {
    font-size: 26px;
  }

  .landing-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .landing-actions .primary-button,
  .landing-actions .ghost-button {
    text-align: center;
  }
}