/* Self Align by Design, course platform (paper world).
   Black & white + one rose accent (#FF1D58), Cormorant + DM Sans.
   Variable names are kept for continuity; values now map to the brand
   system (forest→near-black, sage/terra→rose, cream→paper, ghost→sand). */
:root {
  --cream:      #FAFAF9;   /* page background: paper */
  --cream-mid:  #F1F1F0;   /* alternating band */
  --cream-dark: #E2E2E0;   /* track / draft badge fill */
  --forest:     #0B0B0B;   /* headings, dark surfaces: near-black */
  --sage:       #FF1D58;   /* links, emphasis, accents: rose */
  --sage-mid:   #FF1D58;   /* focus, progress fill, completed state: rose */
  --sage-pale:  #FFB3C9;   /* light rose on dark (video placeholder) */
  --sage-ghost: #EDE7E0;   /* quiet warm fill: sand */
  --terra:      #FF1D58;   /* primary button: rose */
  --terra-light:#E2003F;   /* primary button hover: rose-600 */
  --text:       #1A1A19;   /* body ink */
  --text-mid:   #5A5A57;   /* secondary text */
  --text-muted: #9A9A96;   /* tertiary / captions */
  --border:     rgba(11, 11, 11, 0.12);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--cream);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: 'Cormorant Garamond', serif; font-weight: 500; color: var(--forest); line-height: 1.15; }
em, .italic { font-style: italic; color: var(--sage); }
a { color: var(--sage); text-decoration: none; }
a:hover { color: var(--forest); }

/* Nav */
.nav { background: rgba(250,248,243,0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; }
/* Wider than .main on purpose: four pillar menus plus the Studio links need about
   1150px on one row, and squeezing them into the 1100px content column wrapped
   "Course Studio" and "Log out" onto two lines each. */
.nav-inner { max-width: 1240px; margin: 0 auto; padding: 0 24px; height: 64px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 30px; height: 30px; }
/* nowrap because the wordmark is a logo, not a sentence. Flexbox will happily
   shrink it to four stacked lines to make room for the nav otherwise. */
.brand-word { font-family: 'Cormorant Garamond', serif; font-style: normal; font-weight: 500; font-size: 20px; color: var(--forest); letter-spacing: 0.01em; white-space: nowrap; }
.brand-word em { font-style: italic; color: var(--sage); }
.nav-links { display: flex; align-items: center; gap: 20px; font-size: 14px; }
/* A link is one line. When the row runs out of room the bar wraps (below), it
   never folds a two-word link in half. */
.nav-links > a, .nav-links > span, .nav-links > form { white-space: nowrap; }
.nav-name { color: var(--text-muted); font-size: 13px; }

/* Pillar menus. Each catalog section (four of them as of 2026-08-25) is a nav item
   that opens its own resources, so the header names the structure and the pieces
   live inside. */
.nav-menu { position: relative; }
.nav-menu-btn {
  background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit;
  font-size: 14px; font-weight: 300; line-height: inherit; color: var(--sage);
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
.nav-menu-btn:hover, .nav-menu-btn[aria-expanded="true"] { color: var(--forest); }
.nav-menu-caret { font-size: 10px; transition: transform .15s; }
.nav-menu-btn[aria-expanded="true"] .nav-menu-caret { transform: rotate(180deg); }
.nav-menu-panel {
  position: absolute; top: calc(100% + 12px); left: 0; z-index: 60;
  display: flex; flex-direction: column;
  min-width: 260px; max-width: min(340px, calc(100vw - 40px));
  padding: 8px; background: #fff; border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 14px 34px rgba(11, 11, 11, 0.1);
}
/* The last pillar sits at the right edge of the bar, so its panel opens leftward;
   anchored to its left edge it ran off-screen between about 1020 and 1240px. */
.nav-menu:last-of-type .nav-menu-panel { left: auto; right: 0; }
/* An author `display: flex` beats the UA rule for [hidden], so say it here. */
.nav-menu-panel[hidden] { display: none; }
.nav-menu-panel a { display: block; padding: 9px 11px; border-radius: 8px; font-size: 14px; line-height: 1.4; color: var(--text); }
.nav-menu-panel a:hover { background: var(--sage-ghost); color: var(--forest); }
.nav-menu-panel a.nav-menu-all { margin-top: 5px; padding-top: 12px; border-top: 1px solid var(--border); border-radius: 0; font-size: 13px; color: var(--sage); }
.nav-menu-panel a.nav-menu-all:hover { background: none; color: var(--forest); }
.inline { display: inline; }
.link-btn { background: none; border: none; color: var(--sage); font: inherit; font-size: 14px; cursor: pointer; padding: 0; }
.link-btn:hover { color: var(--forest); }

/* Layout */
.main { flex: 1 0 auto; max-width: 1100px; width: 100%; margin: 0 auto; padding: 40px 24px 64px; }
.narrow { max-width: 460px; margin: 48px auto; }
.footer { flex-shrink: 0; border-top: 1px solid var(--border); padding: 28px 24px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: 12px; color: var(--text-muted); max-width: 1100px; margin: 0 auto; width: 100%; }

/* Flash */
.flash { max-width: 1100px; margin: 16px auto 0; padding: 12px 20px; border-radius: 10px; font-size: 14px; }
.flash-success { background: var(--sage-ghost); color: var(--sage); border: 1px solid rgba(255,29,88,0.22); }
.flash-error { background: #FFE4EC; color: #C20030; border: 1px solid rgba(194,0,48,0.25); }

/* Buttons */
.btn { display: inline-block; background: var(--terra); color: #fff; border: none; border-radius: 8px; padding: 12px 24px; font: inherit; font-weight: 500; font-size: 15px; cursor: pointer; transition: background .2s, transform .15s; }
.btn:hover { background: var(--terra-light); color: #fff; transform: translateY(-1px); }
.btn-sm { padding: 8px 16px; font-size: 13px; }
.btn-ghost { background: transparent; color: var(--sage); border: 1px solid var(--sage-mid); }
.btn-ghost:hover { background: var(--sage-ghost); color: var(--forest); }
.btn-block { width: 100%; text-align: center; }
.btn-danger { background: transparent; color: var(--text-muted); border: 1px solid var(--border); }
.btn-danger:hover { background: #FFE4EC; color: #C20030; }
/* A file input that a button opens for you. Kept in the layout rather than
   display:none, because iOS Safari will not open the picker for a hidden input. */
.file-pick { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Forms */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 500; color: var(--text-mid); margin-bottom: 6px; }
.field input[type=text], .field input[type=email], .field input[type=password], .field input[type=number], .field textarea, .field select {
  width: 100%; padding: 11px 14px; border: 1px solid var(--border); border-radius: 8px; background: #fff;
  font: inherit; font-size: 15px; color: var(--text); outline: none; transition: border-color .2s;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--sage-mid); }
.field textarea { min-height: 160px; resize: vertical; font-size: 14px; line-height: 1.6; }
.field .hint { font-size: 12px; color: var(--text-muted); margin-top: 5px; }
.checkbox { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--text-mid); }
.checkbox input { width: 16px; height: 16px; }
.row { display: flex; gap: 16px; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 180px; }

/* Cards */
.card { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 28px; }
.eyebrow { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--sage); font-weight: 500; margin-bottom: 12px; }
.page-head { margin-bottom: 28px; }
.page-head h1 { font-size: 38px; }
.page-head p { color: var(--text-mid); margin-top: 6px; }
.muted { color: var(--text-muted); }
.section-gap { margin-top: 36px; }

/* Catalog sections: Cosmic Alignment, Self Align By Design, Radical Realignment,
   Creative Alignment */
.catalog-section + .catalog-section { margin-top: 40px; }
/* The nav is sticky, so an anchor jump from a pillar menu would otherwise land
   with the heading hidden behind it. */
.catalog-section { scroll-margin-top: 84px; }
.catalog-section-head { border-top: 1px solid var(--border); padding-top: 16px; margin-bottom: 18px; }
.catalog-section-head h2 { font-size: 28px; }
.catalog-section-head p { font-size: 14px; margin-top: 4px; }

/* Course grid */
/* Card sizes brought in 2026-09-23 (Jamie: "a little smaller, easier to scroll"):
   four across on a laptop instead of three, and compact rows on a phone (below). */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.course-card { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 18px 18px 16px; transition: transform .2s, box-shadow .2s; display: block; }
.course-card::after { content: ''; display: block; clear: both; }
.course-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(11,11,11,0.08); }
.course-emoji { font-size: 26px; display: block; margin-bottom: 8px; }
.course-card h3 { font-size: 19px; margin-bottom: 4px; }
/* A card can hold a body link plus a separate Preview button (tools, 2026-09-03). */
.course-card .card-link { display: block; color: inherit; }
.course-card .card-preview { margin-top: 10px; }
.course-card p { font-size: 13.5px; color: var(--text-mid); }
.badge { display: inline-block; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; padding: 3px 10px; border-radius: 100px; font-weight: 500; }
.badge-draft { background: var(--cream-dark); color: var(--text-mid); }
.badge-published { background: var(--sage-ghost); color: var(--sage); }
.badge-free { background: var(--terra); color: #fff; }
.badge-tool { background: var(--forest); color: #fff; }
.progress { height: 6px; background: var(--cream-dark); border-radius: 100px; margin-top: 14px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--sage-mid); }

/* Course outline */
.outline { list-style: none; }
.outline .sec { margin-top: 26px; }
.outline .sec-title { font-family: 'Cormorant Garamond', serif; font-size: 22px; color: var(--forest); margin-bottom: 8px; }
.lesson-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; background: #fff; }
.lesson-row .ico { width: 24px; height: 24px; border-radius: 50%; background: var(--sage-ghost); color: var(--sage); display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.lesson-row.done .ico { background: var(--sage-mid); color: #fff; }
.lesson-row .t { flex: 1; font-size: 15px; color: var(--text); }
.lesson-row .lock { color: var(--text-muted); font-size: 13px; }

/* Lesson player */
.player-wrap { display: grid; grid-template-columns: 1fr 300px; gap: 32px; align-items: start; }
.video-frame { aspect-ratio: 16/9; width: 100%; background: var(--forest); border-radius: 14px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.video-frame video, .video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
/* A lesson can lead with a still instead of a video; it sits in the same frame. */
.video-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-empty { color: var(--sage-pale); font-size: 14px; text-align: center; padding: 24px; }
.lesson-body { margin-top: 26px; font-size: 16px; color: var(--text-mid); line-height: 1.8; }
.lesson-body h1, .lesson-body h2, .lesson-body h3 { margin: 22px 0 10px; }
.lesson-body p { margin-bottom: 14px; }
.lesson-body ul, .lesson-body ol { margin: 0 0 14px 22px; }
.lesson-body li { margin-bottom: 6px; }
/* Everything below is what Markdown actually produces once a lesson is written
   or imported: images, pull quotes, key terms, rules. Without these they fall
   back to browser defaults, which is where an on-brand lesson stops looking
   on-brand. Body copy sits at --text-mid, so emphasis darkens toward the ink. */
.lesson-body img { max-width: 100%; height: auto; border-radius: 10px; display: block; margin: 22px 0; }
.lesson-body strong { font-weight: 500; color: var(--forest); }
/* The signature pull quote: Cormorant italic against a single rose rule. */
.lesson-body blockquote {
  margin: 24px 0; padding: 4px 0 4px 22px; border-left: 2px solid var(--sage);
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 400;
  font-size: 22px; line-height: 1.45; color: var(--forest);
}
.lesson-body blockquote p { margin-bottom: 8px; }
.lesson-body blockquote p:last-child { margin-bottom: 0; }
/* Links in prose need to be findable without relying on color alone. */
.lesson-body a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.lesson-body hr { border: 0; border-top: 1px solid var(--border); margin: 32px 0; }
.lesson-body code { background: var(--sage-ghost); border-radius: 5px; padding: 2px 6px; font-size: 14px; }
.lesson-body pre { background: var(--sage-ghost); border-radius: 10px; padding: 16px; overflow-x: auto; margin: 0 0 14px; }
.lesson-body pre code { background: none; padding: 0; }
.lesson-body table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 15px; }
.lesson-body th, .lesson-body td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.lesson-body th { font-weight: 500; color: var(--forest); }
.lesson-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 32px; }
.side-outline { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 18px; position: sticky; top: 84px; }
.side-outline .sec-title { font-size: 18px; margin: 14px 0 6px; }
.side-outline .sec-title:first-child { margin-top: 0; }
.side-outline a { display: block; padding: 8px 10px; border-radius: 8px; font-size: 14px; color: var(--text-mid); }
.side-outline a:hover { background: var(--cream-mid); }
.side-outline a.active { background: var(--sage-ghost); color: var(--forest); font-weight: 500; }
.side-outline a .check { color: var(--sage-mid); }

/* Auth hero */
.auth-head { text-align: center; margin-bottom: 28px; }
.auth-head h1 { font-size: 34px; }
.auth-head p { color: var(--text-mid); margin-top: 6px; font-size: 15px; }
.alt-line { text-align: center; margin-top: 18px; font-size: 14px; color: var(--text-mid); }

/* Landing */
.hero { text-align: center; padding: 30px 0 10px; }
.hero h1 { font-size: clamp(36px, 6vw, 60px); }
.hero h1 em { color: var(--sage); }
.hero p { max-width: 560px; margin: 18px auto 28px; font-size: 17px; color: var(--text-mid); }
.cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.stack-sm > * + * { margin-top: 10px; }
table.members { width: 100%; border-collapse: collapse; font-size: 14px; }
table.members th, table.members td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); }
table.members th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 500; }

@media (max-width: 760px) {
  .player-wrap { grid-template-columns: 1fr; }
  .side-outline { position: static; }
}

/* The wordmark plus four pillar menus and the Studio links needs roughly 1150px on
   one row (it was 950px with three pillars and a 1000px breakpoint). Below that
   the bar wraps instead of crushing the wordmark, which used to break onto four
   lines and push the page into a sideways scroll. */
@media (max-width: 1240px) {
  .nav-inner { height: auto; padding: 12px 24px; flex-wrap: wrap; gap: 6px 18px; }
  .nav-links { flex-wrap: wrap; gap: 6px 18px; }
  /* Once the bar wraps, a panel anchored to its own button can start far enough
     right to run off the edge. Anchor it to the bar instead and pin it left,
     where it fits at every width. .nav is sticky, so it is the containing block. */
  .nav-menu { position: static; }
  .nav-menu-panel, .nav-menu:last-of-type .nav-menu-panel {
    top: calc(100% + 4px); left: 24px; right: auto;
    width: min(340px, calc(100vw - 48px)); min-width: 0; max-width: none;
  }
}

@media (max-width: 620px) {
  .nav-inner { padding: 12px 20px; }
  /* Narrow enough that the panel may as well span the bar. left/right rather
     than a 100vw width, which would overshoot next to a classic scrollbar. */
  .nav-menu-panel, .nav-menu:last-of-type .nav-menu-panel { left: 20px; right: 20px; width: auto; }
  /* Cards as compact rows: the icon floats left of the title and the text clears
     under it, so a pillar page is roughly half as tall to scroll on a phone. */
  .grid { gap: 10px; }
  .course-card { padding: 14px 16px 13px; }
  .course-emoji { float: left; font-size: 22px; line-height: 1; margin: 1px 10px 0 0; }
  .course-card h3 { font-size: 18px; line-height: 1.25; }
  .course-card h3 + p { clear: left; }
  .course-card .card-preview { margin-top: 8px; }
}

/* Icon picker under the Icon box on the course and resource forms. Closed by
   default so the forms stay short; opens to a grid grouped by pillar theme. */
.icon-picker { margin: -6px 0 16px; font-size: 13px; }
.icon-picker summary { cursor: pointer; color: var(--sage); font-weight: 500; list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.icon-picker summary::-webkit-details-marker { display: none; }
.icon-picker summary::before { content: "▸"; font-size: 11px; transition: transform .15s; }
.icon-picker[open] summary::before { transform: rotate(90deg); }
.icon-picker-groups { margin-top: 10px; padding: 12px 14px; background: #fff; border: 1px solid var(--border); border-radius: 10px; }
.icon-picker-group + .icon-picker-group { margin-top: 10px; }
.icon-picker-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.icon-picker-grid { display: flex; flex-wrap: wrap; gap: 4px; }
.icon-picker-btn { width: 38px; height: 38px; border: 1px solid transparent; border-radius: 8px; background: none; font-size: 22px; line-height: 1; cursor: pointer; }
.icon-picker-btn:hover { background: var(--sage-ghost); border-color: var(--sage-mid); }

/* Pillar pages: the switch row under the heading, and the post feed. */
.pillar-switch { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.pillar-switch a { font-size: 13px; font-weight: 500; color: var(--text-mid); background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; white-space: nowrap; }
.pillar-switch a:hover, .pillar-switch a.is-current { color: var(--forest); border-color: var(--sage-mid); background: var(--sage-ghost); }
/* The pillar's description (2026-09-23), under the chips and before the courses.
   Three parts as Jamie writes them: a line of themes, a paragraph, "Start here if". */
.pillar-intro { max-width: 720px; margin-top: 22px; }
.pillar-intro p { font-size: 16px; line-height: 1.65; color: var(--text-mid); margin-top: 0; }
.pillar-intro p + p { margin-top: 10px; }
.pillar-intro p:first-child em { font-style: normal; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--sage); font-weight: 500; }
.pillar-intro p + p em { font-style: normal; font-weight: 600; color: var(--text); }
.section-editor { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
.field textarea.short { min-height: 96px; }
.post-feed { display: flex; flex-direction: column; gap: 12px; }
.post-row { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px; transition: transform .2s, box-shadow .2s; }
.post-row:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(11,11,11,0.08); }
.post-emoji { font-size: 26px; line-height: 1.2; }
.post-body { display: flex; flex-direction: column; gap: 3px; }
.post-date { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.post-title { font-family: 'Cormorant Garamond', serif; font-size: 23px; font-weight: 500; color: var(--forest); line-height: 1.2; }
.post-sub { font-size: 14px; color: var(--text-mid); }
.post-body .lock, .post-body .badge { margin-top: 6px; align-self: flex-start; }
.badge-post { background: var(--sage-ghost); color: var(--forest); border: 1px solid var(--sage-mid); }

/* The Hub front door (/hub, and / for visitors, 2026-09-08): four pillar doors in
   a fixed order, then the overview. Reuses the card, eyebrow, and cta-row
   vocabulary above. */
.hub-head { text-align: center; padding: 8px 0 30px; }
.hub-head h1 { font-size: clamp(36px, 6vw, 58px); }
.hub-head h1 em { color: var(--sage); }
.hub-head p { max-width: 640px; margin: 16px auto 0; font-size: 17px; color: var(--text-mid); }
.hub-pillars { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.hub-pillar { display: flex; flex-direction: column; gap: 10px; height: 100%; background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 24px 24px 22px; color: inherit; transition: transform .2s, box-shadow .2s, border-color .2s; }
.hub-pillar:hover { transform: translateY(-3px); box-shadow: 0 12px 34px rgba(11,11,11,0.08); border-color: var(--sage-mid); color: inherit; }
.hub-pillar-top { display: flex; align-items: center; justify-content: space-between; }
.hub-pillar-num { font-size: 11px; letter-spacing: .16em; font-weight: 500; color: var(--sage); }
.hub-pillar-icon { font-size: 28px; line-height: 1; }
.hub-pillar h2 { font-size: 26px; }
.hub-pillar-text { font-size: 14px; color: var(--text-mid); flex: 1; }
.hub-pillar-inside { font-size: 13px; color: var(--text-muted); }
.hub-free { color: var(--sage); font-weight: 500; }
.hub-pillar-go { font-size: 14px; font-weight: 500; color: var(--sage); }
.hub-pillar:hover .hub-pillar-go { color: var(--forest); }
.hub-overview { margin-top: 48px; }
.hub-overview .catalog-section-head p { max-width: 640px; }
.hub-overview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.hub-overview .card h3 { font-size: 22px; margin-bottom: 10px; }
.hub-overview .card p { font-size: 14px; color: var(--text-mid); }
.hub-overview .card p + p { margin-top: 8px; }
.hub-overview .card p strong { font-weight: 500; color: var(--forest); }
.hub-stats { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin-bottom: 12px; font-size: 14px; color: var(--text-mid); }
.hub-stats strong { display: block; font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 32px; line-height: 1; color: var(--forest); }
.hub-steps { list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--text-mid); }
.hub-steps li { display: flex; gap: 10px; }
.hub-steps .n { font-family: 'Cormorant Garamond', serif; font-size: 20px; line-height: 1.1; color: var(--sage); min-width: 18px; }
.hub-cta { text-align: center; margin-top: 36px; }
.hub-cta p { font-size: 15px; color: var(--text-mid); margin-bottom: 14px; }
.hub-cta .hub-cta-alt { margin: 16px 0 0; font-size: 14px; }

/* Membership plans (2026-09-08): monthly and annual side by side in one form,
   founding rate shown against the regular price while the coupon is valid. */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; max-width: 820px; }
.plan-card { display: flex; flex-direction: column; gap: 8px; }
.plan-card .btn { margin-top: auto; }
.plan-card-dark { background: var(--forest); border-color: var(--forest); color: #FAFAF9; }
.plan-card-dark .eyebrow { color: var(--sage-pale); }
.plan-card-dark .plan-per, .plan-card-dark .plan-was, .plan-card-dark .plan-note { color: rgba(250,250,249,0.62); }
.plan-card-dark .plan-amount { color: #fff; }
.plan-price { display: flex; align-items: baseline; gap: 8px; }
.plan-amount { font-family: 'Cormorant Garamond', serif; font-size: 52px; line-height: 1; color: var(--forest); }
.plan-per { color: var(--text-mid); font-size: 15px; }
.plan-was { font-size: 13px; color: var(--text-muted); }
.plan-was s { text-decoration-color: var(--sage); }
.plan-note { font-size: 13px; color: var(--text-mid); margin-bottom: 8px; }
.plan-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; }
.plan-code { font-size: 14px; color: var(--text-mid); display: inline-flex; align-items: center; gap: 8px; }
.plan-code input { width: 160px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14px; background: #fff; }
.plan-foot .hint { font-size: 12px; color: var(--text-muted); }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.included { list-style: none; }
.included li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.included li:last-child { border-bottom: 0; }
.included .tick { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--sage); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.included strong { display: block; font-size: 14px; font-weight: 500; color: var(--text); }
.included span.sub { font-size: 13px; color: var(--text-muted); }

/* Course Studio pillar chips (2026-09-17): the pillar-switch row reused as a
   filter on the Resources and Posts pages, each chip carrying a count. */
.studio-chips { margin: 4px 0 26px; }
.studio-chips .chip-count { color: var(--text-muted); font-weight: 400; margin-left: 2px; }
.studio-chips a.is-current .chip-count { color: inherit; }
/* A Studio post row carries several badges (status, pillar, on the site). */
.post-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.post-body .post-meta .badge { margin-top: 0; }

/* Members page and member page in the Studio (2026-09-18). */
.member-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 28px; }
.member-search { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.member-search input[type=search] { font: inherit; font-size: 14px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; min-width: 230px; background: #fff; }
.member-search input[type=search]:focus { outline: none; border-color: var(--sage-mid); }
.table-scroll { overflow-x: auto; }
table.members a { color: var(--forest); font-weight: 500; }
table.members td { white-space: nowrap; }
.member-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; margin-bottom: 18px; }
.member-grid .card h3 { font-size: 20px; margin-bottom: 8px; }
.member-grid .card p { font-size: 14px; color: var(--text-mid); }
.invite-box { border-color: var(--sage); background: var(--sage-ghost); margin-bottom: 18px; }
.invite-box input { width: 100%; font: inherit; font-size: 13px; padding: 9px 12px; border: 1px solid var(--sage-mid); border-radius: 8px; background: #fff; margin-top: 8px; }
.field label.choice { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; font-size: 14px; color: var(--text); margin-top: 6px; }
.field label.choice input { margin-top: 3px; }

/* One-off sales (2026-09-18): the price on a locked card and in the Studio. */
.badge-price { background: #fff; color: var(--forest); border: 1px solid var(--forest); }

/* Moon Oracle page (2026-09-24): a long form in three cards, with the save,
   preview, and publish buttons pinned to the bottom of the window. */
.oracle-status { margin-bottom: 24px; padding: 20px 24px; font-size: 15px; }
.oracle-card { margin-bottom: 24px; }
.oracle-card h2 { font-size: 26px; margin-bottom: 4px; }
.oracle-sub { font-size: 14px; margin-bottom: 18px; }
.oracle-h3 { font-size: 20px; margin: 26px 0 12px; }
.field textarea.tiny { min-height: 64px; }
.field textarea.meanings { min-height: 0; font-size: 13.5px; line-height: 1.55; }
.oracle-actions { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: var(--cream); border-top: 1px solid var(--border); padding: 14px 0; margin-bottom: 28px; }
.oracle-actions .hint { font-size: 12px; flex: 1 1 260px; }
.oracle-reset h3 { font-size: 20px; margin-bottom: 6px; }
.oracle-reset p { font-size: 14px; margin-bottom: 12px; }
@media (max-width: 620px) {
  /* On a phone the pinned bar stays one row: the preview banner says what the note says. */
  .oracle-actions { gap: 8px; padding: 10px 0; }
  .oracle-actions .btn { padding: 10px 12px; font-size: 14px; }
  .oracle-actions .hint { display: none; }
}

/* AI apps (2026-09-29): the consent page an AI app opens, and Connected apps. */
.connect { max-width: 680px; margin: 0 auto; }
.connect .page-head h1 { font-size: clamp(30px, 5vw, 38px); }
.connect-h { font-size: 24px; margin: 0 0 10px; }
.connect .card .connect-h + .connect-list { margin-top: 0; }
.connect-h3 { font-size: 13px; font-weight: 500; color: var(--text); margin: 20px 0 6px; }
.connect-list { margin: 0 0 20px; padding-left: 20px; color: var(--text-mid); font-size: 15px; line-height: 1.7; }
.connect-list li + li { margin-top: 4px; }
.connect-steps { margin: 0; padding-left: 20px; color: var(--text-mid); font-size: 15px; line-height: 1.7; }
.connect-steps li + li { margin-top: 10px; }
.connect-check { align-items: flex-start; margin: 4px 0 24px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--cream); color: var(--text); line-height: 1.5; }
.connect-check input { margin-top: 3px; flex-shrink: 0; }
.connect-hint { display: block; font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.connect-body { margin: 0; color: var(--text-mid); font-size: 15px; line-height: 1.7; }
.connect-fine { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin: 20px 0; }
.connect .btn-row { margin-top: 4px; }
.connect-url { display: flex; gap: 8px; margin-top: 8px; }
.connect-url input { flex: 1; min-width: 0; font: inherit; font-size: 14px; padding: 9px 12px; border: 1px solid var(--sage-mid); border-radius: 8px; background: #fff; color: var(--text); }
.app-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; border-top: 1px solid var(--border); }
.app-row:first-of-type { border-top: 0; padding-top: 0; }
.app-who { min-width: 0; }
.app-who .badge { margin-left: 6px; vertical-align: 2px; }
.app-when { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
@media (max-width: 560px) {
  .app-row { flex-direction: column; align-items: flex-start; }
}

/* Leads page and lead page in the Studio (2026-10-02): the three lists the
   marketing site saves signups to. Built on the Members page's table, stats,
   and search; these are only the pieces it did not already have. */
.lead-recent { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.lead-blurb { font-size: 14px; max-width: 760px; margin: 0 0 18px; }
.lead-foot { font-size: 13px; margin-top: 14px; }
.lead-note { border-color: var(--sage-mid); background: var(--sage-ghost); margin-bottom: 14px; font-size: 14px; }
.lead-fields { border: 0; padding: 0; margin: 0; min-width: 0; }
.lead-fields:disabled input, .lead-fields:disabled textarea { background: var(--cream); color: var(--text-mid); }
/* The Members table never wraps and scrolls sideways when it runs out of room.
   A lead row carries a long email and birth details, so here the cells wrap
   (only the date and the button stay on one line), and on a phone or a tablet
   each person becomes a short stack instead of a table to scroll. */
table.leads td { white-space: normal; overflow-wrap: break-word; vertical-align: top; }
table.leads td:first-child { min-width: 130px; }
table.leads td.lead-email { overflow-wrap: anywhere; min-width: 220px; }
table.leads td.lead-detail { min-width: 190px; }
.lead-pages { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; font-size: 13px; }
table.leads td.lead-when, table.leads td:last-child { white-space: nowrap; overflow-wrap: normal; }
@media (max-width: 900px) {
  table.leads thead { display: none; }
  table.leads, table.leads tbody, table.leads tr, table.leads td { display: block; width: 100%; }
  table.leads tr { padding: 12px 0; border-bottom: 1px solid var(--border); }
  table.leads tr:first-child { padding-top: 0; }
  table.leads tr:last-child { border-bottom: 0; padding-bottom: 0; }
  table.leads td { border: 0; padding: 1px 0; font-size: 13.5px; }
  table.leads td:first-child { font-size: 16px; min-width: 0; padding-bottom: 2px; }
  table.leads td.lead-email, table.leads td.lead-detail { min-width: 0; }
  table.leads td.lead-when { white-space: normal; }
  table.leads td:last-child { display: none; } /* the name opens the person */
}