/* ============================================================================
   Skill Earn — Afro-minimal skin
   ----------------------------------------------------------------------------
   Every value here comes from the Figma file "Skill Earn – Landing Page
   (Afro-minimal)", key 6FlKxHKh6gihNwOsgiDZMe: the 28-variable `Skill Earn Tokens`
   collection and its 14 text styles. Nothing is invented; where the design
   system has no opinion (a hover state, a disabled field) the value is derived
   from a token rather than picked.

   Loaded last, after the template and app-extensions, so it reskins the
   existing markup instead of asking every page to be rewritten. The template's
   own :root variables are rebound first, which carries most of the app for
   free, and the rest is component work the variables cannot reach.
   ========================================================================== */

:root {
  /* ---- palette, straight from Skill Earn Tokens ---- */
  --t-ochre:          #e8b04b;
  --t-bone:           #f6f1e8;
  --t-bone-deep:      #ede3d3;
  --t-teal:           #0f4c4a;
  --t-teal-light:     #1e6f62;
  --t-clay:           #c8551f;
  --t-charcoal:       #1b1815;
  --t-charcoal-soft:  #3a322c;
  --t-muted:          #6e6259;
  --t-line:           #ded2be;

  --t-display:        'Bricolage Grotesque', 'Montserrat', sans-serif;
  --t-body:           'DM Sans', 'Open Sans', sans-serif;

  /* ----------------------------------------------------------------- cards
     Every card in the product is the same object: white, one hairline, one
     radius. Hover raises it rather than redrawing its outline — a border that
     jumps from #ded2be to near-black is a ~10:1 swing on one property, which
     reads as a validation outline appearing, not as a card responding.

     The shadow is tinted with the charcoal rather than pure black. On a bone
     page (#f6f1e8) a black shadow desaturates into grey and dirties the warm
     ground; the tint keeps it in the same light as everything else. */
  --t-card-radius:    16px;
  --t-shadow-lift:    0 12px 28px -8px rgba(27, 24, 21, .14);
  --t-shadow-rest:    0 1px 2px rgba(27, 24, 21, .04);

  /* ---------------------------------------------------------------- spacing
     One scale for the whole product. Everything sits on a 2px rhythm, which is
     what the layout was already loosely doing — 39 distinct spacing values had
     accumulated across the stylesheets, including odd numbers that were nothing
     but drift. Snapping them left 33 and no visible change.

     Reach for the nearest step rather than inventing a number. New spacing that
     is not on this scale is almost always a mistake. */
  --sp-1:  4px;   /* icon-to-label, chip innards          */
  --sp-2:  8px;   /* tight stacks, inline groups          */
  --sp-3:  12px;  /* the default gap                      */
  --sp-4:  16px;  /* card innards                         */
  --sp-5:  20px;  /* comfortable padding                  */
  --sp-6:  24px;  /* between related blocks               */
  --sp-7:  32px;  /* between sections                     */
  --sp-8:  40px;
  --sp-9:  56px;
  --sp-10: 72px;  /* the page gutter in the 1440 frames   */
  --sp-11: 80px;  /* bottom of a page                     */

  /* ---- the template's variables, rebound ----
     Doing it here rather than editing templatemo-topic-listing.css keeps the
     vendor file pristine and the whole reskin revertable by removing one
     <link>. */
  --white-color:                  #ffffff;
  --primary-color:                var(--t-teal);
  --secondary-color:              var(--t-ochre);
  --section-bg-color:             var(--t-bone-deep);
  --custom-btn-bg-color:          var(--t-teal);
  --custom-btn-bg-hover-color:    var(--t-charcoal);
  --dark-color:                   var(--t-charcoal);
  --p-color:                      var(--t-muted);
  --border-color:                 var(--t-line);
  --link-hover-color:             var(--t-clay);

  --body-font-family:             var(--t-body);
  --title-font-family:            var(--t-display);

  /* Display/XL 76, Display/L 56, Display/M 40, Heading/L 28, Heading/M 21,
     Heading/S 17 — the file's scale, mapped onto h1…h6. */
  --h1-font-size:                 76px;
  --h2-font-size:                 56px;
  --h3-font-size:                 40px;
  --h4-font-size:                 28px;
  --h5-font-size:                 21px;
  --h6-font-size:                 17px;
  --p-font-size:                  17px;   /* Body/M */
  --menu-font-size:               15px;   /* Label/M */
  --btn-font-size:                16px;   /* Button */
  --copyright-font-size:          15px;   /* Body/S */

  --border-radius-large:          999px;
  --border-radius-medium:         16px;
  --border-radius-small:          10px;

  /* Bootstrap's own variables, so its utilities land in the palette too. */
  --bs-body-bg:                   var(--t-bone);
  --bs-body-color:                var(--t-charcoal);
  --bs-body-font-family:          var(--t-body);
  --bs-primary:                   var(--t-teal);
  --bs-link-color:                var(--t-teal);
  --bs-link-hover-color:          var(--t-clay);
  --bs-border-color:              var(--t-line);
  --bs-secondary-color:           var(--t-muted);
}

/* ---------------------------------------------------------------- type ---- */

body {
  background-color: var(--t-bone);
  color: var(--t-charcoal);
  font-family: var(--t-body);
  font-size: 17px;
  line-height: 1.6;                       /* Body/M */
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--t-display);
  font-weight: 600;
  color: var(--t-charcoal);
}

/* Tracking is the whole character of this type system: the display sizes are
   set tight (-2.5px at 76) and the eyebrow is set very loose (+8px at 13). */
h1, .h1 { font-size: clamp(44px, 6vw, 76px); line-height: 1.04; letter-spacing: -2.5px; }
h2, .h2 { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.06; letter-spacing: -2px; }
h3, .h3 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.12; letter-spacing: -1.5px; }
h4, .h4 { font-size: 28px; line-height: 1.2; letter-spacing: -1px; }
h5, .h5 { font-size: 21px; line-height: 1.3; letter-spacing: -0.5px; }
h6, .h6 { font-size: 17px; line-height: 1.3; letter-spacing: -0.5px; }

p { font-size: 17px; line-height: 1.6; color: var(--t-charcoal); }
.small, small { font-size: 15px; line-height: 1.55; }
.lead { font-size: 20px; line-height: 1.55; }   /* Body/L */

/* The Eyebrow style. Used above section headings; the tracking is what makes
   the layout read as this design rather than a generic one. */
.eyebrow,
.section-eyebrow {
  font-family: var(--t-body);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.62em;                  /* 8px at 13px */
  text-transform: uppercase;
  color: var(--t-clay);
  display: block;
  margin-bottom: 14px;
}

a { color: var(--t-teal); text-decoration: none; }
a:hover { color: var(--t-clay); }

.text-primary { color: var(--t-teal) !important; }
.text-dark { color: var(--t-charcoal) !important; }
.text-muted, .app-muted, .text-secondary { color: var(--t-muted) !important; }
.bg-light { background-color: var(--t-bone-deep) !important; }
.fw-bold { font-weight: 700; }
.display-text { font-family: var(--t-display); }

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

/* Straight off Nav.svg: a white bar 88 tall, 72px margins, the wordmark at
   124, the four links centred, and a 122x44 charcoal pill with a 22 radius on
   the right. No bottom border: the Kente strip does that job. */
.navbar {
  background: var(--white-color);
  border-bottom: 0;
  min-height: 88px;
  padding: 0;
}
.navbar > .container {
  /* Full bleed. The nav is the one band that runs edge to edge: the mark sits
     hard left and the account cluster hard right, on a small margin, while the
     page content below stays in the 1296 column. */
  max-width: 100%;
  padding: 0 28px;
}

.navbar-brand,
.navbar-brand:hover,
.navbar-brand span {
  font-family: var(--t-display);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -1px;
  color: var(--t-charcoal);
}
/* The mark and the wordmark stay on one line at every width and in every
   state. Two separate causes:
   
   1. As a flex item the brand shrinks by default, so at tight widths it got
      narrower than its own content. flex:none and nowrap stop that.
   2. The template declares `.navbar-brand:hover { display: block }`, which at
      (0,2,0) beat this rule's (0,1,0) and turned the row into a stack the
      moment the pointer touched it. Hence the :hover and :focus selectors
      below, matching that specificity. */
.navbar-brand,
.navbar-brand:hover,
.navbar-brand:focus {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 0;
  flex: 0 0 auto;
  white-space: nowrap;
}
.navbar-brand span { white-space: nowrap; }
.topic-mark { display: block; width: 36px; height: 36px; flex: none; }

/* Mark hard left, account cluster hard right, links dead centre of the BAR.
   
   Done without display:contents on Bootstrap's .navbar-collapse. That trick
   relies on beating a `display:flex !important` inside a media query, and when
   it loses, the collapse becomes a single grid item and drags the links and
   the account cluster into the middle together, which is what "snapping back
   to centre" was. Taking the links out of the flow entirely cannot fail that
   way: brand and cluster sit at the two ends of a plain flex row, and the
   links are centred on the container, not on the space left between them. */
.topic-nav-end { display: flex; align-items: center; gap: 18px; }

@media (min-width: 992px) {
  .navbar > .container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .navbar-expand-lg .navbar-collapse {
    flex: 1 1 auto;
    display: flex !important;
    align-items: center;
  }
  .navbar-expand-lg .navbar-nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0 !important;
    gap: 8px;
  }
  .topic-nav-end { margin-left: auto; }
}
.navbar-nav .nav-link {
  font-family: var(--t-body);
  font-weight: 500;
  font-size: 16px;
  color: var(--t-charcoal-soft);
  padding: 8px 14px;
  border-radius: 999px;
}
.navbar-nav .nav-link:hover { color: var(--t-clay); background: transparent; }
.navbar-nav .nav-link.active { color: var(--t-charcoal); background: var(--t-bone); }

.topic-nav-auth {
  display: flex;
  align-items: center;
  gap: 22px;
  /* width + auto margin rather than justify-content on the parent: the parent
     is a plain div and one stray display:block from the template stack was
     enough to leave the pair floating 160px short of the right margin. This
     holds whatever the parent's display turns out to be. */
  width: max-content;
  margin-left: auto;
}
.topic-nav-login { font-size: 16px; font-weight: 500; color: var(--t-charcoal); }
.topic-nav-login:hover { color: var(--t-clay); }
/* Fixed 122x44 from the nav export, so the padding that would normally centre
   a Bootstrap button is zeroed out. Without inline-flex the label sits on the
   top edge of the pill, which is what it was doing. */
.topic-nav-auth .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 122px;
  height: 44px;
  padding: 0;
  border-radius: 22px;
  font-size: 15px;
  line-height: 1;
}
.topic-nav-user { font-family: var(--t-body); color: var(--t-charcoal) !important; }

.navbar-toggler { color: var(--t-charcoal) !important; }
.navbar-toggler[style] { background: var(--t-bone-deep) !important; }

.navbar .dropdown-menu {
  background: var(--white-color);
  border: 1px solid var(--t-line);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(27, 24, 21, 0.12);
  padding: 8px;
}
.navbar .dropdown-item {
  border-radius: 8px;
  font-size: 15px;
  color: var(--t-charcoal);
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus,
.navbar .dropdown-item.active {
  background: var(--t-bone);
  color: var(--t-teal);
}

/* ------------------------------------------------------------- buttons ---- */

.btn,
.custom-btn,
.custom-border-btn {
  font-family: var(--t-body);
  font-weight: 600;                        /* Button */
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 0;
  border-radius: 999px;
  padding: 13px 26px;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

/* Clay, not teal. In the design the orange is the button you are meant to
   press and teal is reserved for the closing band, the avatars and the status
   dots. Getting this backwards makes every screen read as a different
   product. */
.custom-btn {
  background: var(--t-clay);
  border: 1px solid var(--t-clay);
  color: var(--t-bone);
}
.custom-btn:hover,
.custom-btn:focus {
  background: var(--t-charcoal);
  border-color: var(--t-charcoal);
  color: var(--t-bone);
}

/* The dark secondary: "Start free" in the nav, "Choose Starter" in pricing. */
.btn-charcoal {
  background: var(--t-charcoal);
  border: 1px solid var(--t-charcoal);
  color: var(--t-bone);
}
.btn-charcoal:hover { background: var(--t-clay); border-color: var(--t-clay); color: var(--t-bone); }

.custom-border-btn {
  background: transparent;
  border: 1px solid var(--t-charcoal);
  color: var(--t-charcoal);
}
.custom-border-btn:hover {
  background: var(--t-charcoal);
  color: var(--t-bone);
}

/* The one loud button in the system: ochre on charcoal, for the single
   primary action on a page. */
.btn-accent {
  background: var(--t-ochre);
  border: 1px solid var(--t-ochre);
  color: var(--t-charcoal);
}
.btn-accent:hover { background: var(--t-clay); border-color: var(--t-clay); color: var(--t-bone); }

.btn-sm { padding: 9px 18px; font-size: 14px; }
.btn:disabled, .btn.disabled { opacity: .45; }

/* --------------------------------------------------------------- cards ---- */
/* Bordered rather than floated: a 1px line in --t-line is the flat, printed
   feel this palette is built for, and a drop shadow on bone reads as grime. */

.app-card,
.card {
  background: var(--white-color);
  border: 1px solid var(--t-line);
  border-radius: 16px;
  box-shadow: none;
}
.app-card { padding: 26px; margin-bottom: 20px; }
.card { overflow: hidden; }

.app-card:hover { border-color: var(--t-charcoal); }
.app-card-tight { padding: 16px 20px; }

.shadow-sm, .shadow { box-shadow: none !important; }
.border { border-color: var(--t-line) !important; }
.rounded-3 { border-radius: 14px !important; }

.app-shell { background: var(--t-bone); }
.app-empty {
  background: var(--t-bone-deep);
  border: 1px dashed var(--t-line);
  border-radius: 14px;
  color: var(--t-muted);
  padding: 26px;
  text-align: center;
}

.app-avatar,
.skool-avatar-img { border: 1px solid var(--t-line); }

.badge { font-family: var(--t-body); font-weight: 500; border-radius: 999px; padding: 6px 12px; }

/* --------------------------------------------------------------- forms ---- */

/* Sentence case rather than the uppercase letterspaced treatment this used to
   carry: small caps shrink the label, slow scanning, and read as enterprise
   admin rather than as a product. Matches .settings-form label so a field
   looks the same wherever it appears. */
.app-form label:not(.form-check-label) {
  font-family: var(--t-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--t-charcoal-soft);
}

.app-form label.form-check-label,
.app-form .form-check-label {
  display: inline !important;
  font-family: var(--t-body) !important;
  font-weight: 400 !important;
  font-size: 13.5px !important;
  line-height: 1.4 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--t-charcoal) !important;
  margin: 0 !important;
  cursor: pointer;
}

.app-form input:not([type="checkbox"]):not([type="radio"]),
.app-form textarea,
.app-form select,
.form-control,
.form-select {
  background: var(--white-color);
  border: 1px solid var(--t-line);
  border-radius: 10px;
  color: var(--t-charcoal);
  font-family: var(--t-body);
  font-size: 16px;
  padding: 12px 14px;
}
.app-form input:not([type="checkbox"]):not([type="radio"]):focus,
.app-form textarea:focus,
.app-form select:focus,
.form-control:focus,
.form-select:focus {
  border-color: var(--t-charcoal);
  box-shadow: 0 0 0 3px rgba(27, 24, 21, .08);
  outline: none;
}
.form-control::placeholder { color: var(--t-muted); opacity: .75; }

.app-form input[type="checkbox"],
.form-check-input {
  appearance: auto;
  -webkit-appearance: checkbox;
  accent-color: var(--t-teal, #0f4c4a);
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: none !important;
}

.app-error {
  background: rgba(200, 85, 31, 0.08);
  border: 1px solid rgba(200, 85, 31, 0.35);
  color: var(--t-clay);
  border-radius: 10px;
  padding: 12px 14px;
}
.skool-success-msg {
  background: rgba(15, 76, 74, 0.08);
  border: 1px solid rgba(15, 76, 74, 0.3);
  color: var(--t-teal);
  border-radius: 10px;
  padding: 12px 14px;
}

/* auth cards get the same treatment as any other card */
.skool-auth-card {
  background: var(--white-color);
  border: 1px solid var(--t-line);
  border-radius: 18px;
  box-shadow: none;
}
.skool-auth-header h1,
.skool-auth-header h2 { letter-spacing: -1px; }

/* ---------------------------------------------------------- breadcrumb ---- */

.breadcrumb { font-size: 15px; }
.breadcrumb-item a { color: var(--t-muted); }
.breadcrumb-item a:hover { color: var(--t-clay); }
.breadcrumb-item.active { color: var(--t-charcoal); }

/* -------------------------------------------------------------- footer ---- */
/* Charcoal, bone text at 55-62% and ochre column headings: the footer built
   in the Figma file. */

.site-footer,
footer {
  background: var(--t-charcoal);
  color: var(--t-bone);
  padding: 88px 0 40px;
}
.site-footer h1, .site-footer h2, .site-footer h3,
.site-footer h4, .site-footer h5, .site-footer h6,
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 { color: var(--t-bone); }

.site-footer-title,
footer .site-footer-title {
  font-family: var(--t-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.62em;
  text-transform: uppercase;
  color: var(--t-ochre);
  margin-bottom: 18px;
}

.site-footer-link,
.site-footer-link-item a,
footer a {
  color: rgba(246, 241, 232, 0.62);
  font-size: 17px;
}
.site-footer-link:hover,
footer a:hover { color: var(--t-ochre); }

.copyright-text,
footer .text-white-50 { color: rgba(246, 241, 232, 0.45) !important; font-size: 15px; }

/* ---------------------------------------------------------------- hero ---- */
/* The template ships a hardcoded blue-to-mint gradient, the one thing in it
   that no variable can reach. Replaced with flat charcoal and a single warm
   ochre glow: this palette earns its warmth from one accent against a dark
   ground, not from a two-colour blend. */

.hero-section {
  background-image:
    radial-gradient(120% 90% at 82% 8%, rgba(232, 176, 75, 0.22) 0%, rgba(232, 176, 75, 0) 60%),
    radial-gradient(90% 80% at 8% 100%, rgba(30, 111, 98, 0.35) 0%, rgba(30, 111, 98, 0) 62%);
  background-color: var(--t-charcoal);
  padding: 140px 0 150px;
}

/* The same gradient is hardcoded three times in the template: the hero, the
   sub-page header and the overlay. All three get the same treatment. */
.site-header {
  background-image:
    radial-gradient(120% 120% at 88% 0%, rgba(232, 176, 75, 0.20) 0%, rgba(232, 176, 75, 0) 62%);
  background-color: var(--t-charcoal);
  padding: 150px 0 80px;
}
.site-header h1, .site-header h2 { color: var(--t-bone); }
.site-header p, .site-header .lead { color: rgba(246, 241, 232, 0.68); }
.site-header .breadcrumb-item a { color: var(--t-ochre); }
.site-header .breadcrumb-item.active,
.site-header .breadcrumb-item + .breadcrumb-item::before { color: rgba(246, 241, 232, 0.55); }

.section-overlay {
  background-image: none;
  background-color: rgba(27, 24, 21, 0.55);
}

.hero-section h1 { color: var(--t-bone) !important; }
.hero-section h6,
.hero-section p {
  color: rgba(246, 241, 232, 0.68);
  font-family: var(--t-body);
  font-weight: 400;
  font-size: 20px;                        /* Body/L */
  line-height: 1.55;
  letter-spacing: 0;
  margin-top: 18px;
}

.hero-section .input-group {
  border-radius: 999px;
  padding: 8px 10px 8px 18px;
  border: 1px solid var(--t-line);
}
.hero-section .form-control { border: 0; box-shadow: none; background: transparent; }
.hero-section .form-control:focus { box-shadow: none; }
.hero-section .input-group-text { color: var(--t-muted); }
.hero-section button[type="submit"] {
  background: var(--t-teal);
  color: var(--t-bone);
  border: 0;
  border-radius: 999px;
  padding: 12px 26px;
  font-weight: 600;
}
.hero-section button[type="submit"]:hover { background: var(--t-clay); }

/* The communities search bar, which was inline-styled in the component with
   the template's mint. Moved here so it takes tokens like everything else. */
.topic-searchbar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--white-color);
  border: 1px solid var(--t-line);
  border-radius: 999px;
  padding: 6px 6px 6px 18px;
}
.topic-searchbar .form-control,
.topic-searchbar input { border: 0; box-shadow: none; background: transparent; flex: 1; }
.topic-searchbar .form-control:focus { box-shadow: none; }

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

.section-padding { padding: 96px 0; }
.section-bg { background: var(--t-bone-deep); }

/* A hairline between stacked sections instead of a colour change, which is
   what keeps a bone page from looking like unfinished HTML. */
.section-rule { border: 0; border-top: 1px solid var(--t-line); margin: 0; }

/* ------------------------------------------------------- lesson player ---- */
/* The player is deliberately dark: it is a picture, not a page. All this does
   is stop the bone page from fighting it at the edges. */

.app-video-wrap {
  background: var(--t-charcoal);
  border: 1px solid var(--t-charcoal);
  border-radius: 16px;
  overflow: hidden;
}
.app-video-wrap video { display: block; }

/* ============================================================================
   Landing composition
   ----------------------------------------------------------------------------
   Built against the Figma frame rather than inferred from the tokens: bone
   ground, left-aligned type, clay as the action colour, teal kept back for the
   closing band. The blocks below are the sections in that frame, in order.
   ========================================================================== */

.topic-wrap { max-width: 1296px; margin: 0 auto; padding: 0 24px; }

/* ---- the beaded stripe ----
   The one ornament in the design: a woven band under the nav and above the
   closing band. Drawn in CSS rather than shipped as an image so it stays
   crisp at any width and costs nothing on a phone bundle. */
/* No top padding: the header is in the flow now (see _app.js, where the
   sticky jQuery plugin is deliberately not loaded), so it takes its own 88px
   and nothing has to compensate for it. */
.navbar { position: sticky; top: 0; z-index: 20; }

.topic-stripe {
  /* Drawn as a gradient rather than the exported SVG: the bands are wider and
     more irregular, which reads as woven cloth instead of a barcode. The
     sequence spans 616px and tiles seamlessly at any viewport width, and
     because it is built from the --t-* tokens it follows the palette.
     Height stays the previous 9px so no page shifts. */
  height: 9px;
  background: repeating-linear-gradient(
    90deg,
    var(--t-clay)      0px,   var(--t-clay)      96px,
    var(--t-charcoal)  96px,  var(--t-charcoal)  110px,
    var(--t-ochre)     110px, var(--t-ochre)     150px,
    var(--t-charcoal)  150px, var(--t-charcoal)  164px,
    var(--t-teal)      164px, var(--t-teal)      236px,
    var(--t-bone)      236px, var(--t-bone)      246px,
    var(--t-ochre)     246px, var(--t-ochre)     268px,
    var(--t-clay)      268px, var(--t-clay)      322px,
    var(--t-charcoal)  322px, var(--t-charcoal)  336px,
    var(--t-teal)      336px, var(--t-teal)      374px,
    var(--t-ochre)     374px, var(--t-ochre)     462px,
    var(--t-charcoal)  462px, var(--t-charcoal)  476px,
    var(--t-clay)      476px, var(--t-clay)      506px,
    var(--t-teal)      506px, var(--t-teal)      616px
  );
}

/* ---- eyebrow with its dot ---- */
.topic-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--t-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--t-clay);
  margin-bottom: 22px;
}
.topic-eyebrow::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--t-clay);
}
.topic-eyebrow.is-ochre { color: var(--t-ochre); }
.topic-eyebrow.is-ochre::before { background: var(--t-ochre); }
.topic-eyebrow.is-teal { color: var(--t-teal); }
.topic-eyebrow.is-teal::before { background: var(--t-teal); }

/* ---- hero ---- */
.topic-hero { background: var(--t-bone); padding: 60px 0 64px; }
.topic-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: 64px;
  align-items: center;
}
.topic-hero h1 { margin: 0 0 22px; }
.topic-hero .topic-lede {
  font-size: 20px; line-height: 1.55; color: var(--t-muted);
  max-width: 30em; margin: 0 0 30px;
}
.topic-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; }

.topic-proof { display: flex; align-items: center; gap: 14px; }
.topic-avatars { display: flex; }
.topic-avatars span {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid var(--t-bone); margin-right: -9px;
}
.topic-proof p { margin: 0; font-size: 15px; line-height: 1.35; color: var(--t-muted); max-width: 15em; }

/* the framed image and the two cards floating off it */
.topic-shot { position: relative; }
/* Both artworks now carry the page's exact bone (#f6f1e8) as their field, so
   they need no box, no border and no radius: the edge of the file is
   invisible against the section behind it.
   
   height:auto and the file's own ratio, rather than a forced aspect-ratio
   box. Forcing the box made the element taller than the picture inside it,
   which is what read as "too big", and max-width:100% is what stops it
   overflowing a column narrower than the cap. */
.topic-hero-img,
.topic-feature-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}
.topic-hero-img { max-width: 540px; margin-left: auto; }
.topic-feature-img { max-width: 500px; }

.topic-frame {
  background: var(--t-bone-deep);
  border: 1px solid var(--t-line);
  border-radius: 14px;
  aspect-ratio: 604 / 540;
  display: grid;
  place-content: center;
  text-align: center;
  color: var(--t-muted);
  font-size: 13px;
  line-height: 1.7;
}
.topic-frame b { display: block; font-family: var(--t-body); font-weight: 500; opacity: .7; }

.topic-float {
  position: absolute;
  background: var(--white-color);
  border: 1px solid var(--t-line);
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 14px 34px rgba(27, 24, 21, 0.10);
  font-size: 13px;
}
.topic-float--pay { top: -18px; right: 26px; border-radius: 999px; display: flex; align-items: center; gap: 10px; }
.topic-float--card { bottom: 40px; left: -34px; width: 232px; }
.topic-float b { display: block; font-family: var(--t-body); font-weight: 600; font-size: 14px; color: var(--t-charcoal); }
.topic-float small { color: var(--t-muted); font-size: 12px; }
.topic-float .topic-price { color: var(--t-clay); font-weight: 600; }
.topic-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--t-teal); flex: none; }
.topic-float--card .topic-dot { width: 26px; height: 26px; }

/* ---- section heads ---- */
.topic-section { padding: 84px 0; }
.topic-section--deep { background: var(--t-bone-deep); }
.topic-section--white { background: var(--white-color); }
.topic-section--dark { background: var(--t-charcoal); color: var(--t-bone); }
.topic-section--dark h2, .topic-section--dark h3 { color: var(--t-bone); }
.topic-section--dark p { color: rgba(246, 241, 232, 0.62); }

.topic-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 34px; }
.topic-head h2 { margin: 0 0 10px; }
.topic-head p { margin: 0; color: var(--t-muted); font-size: 17px; }
.topic-head a { font-weight: 500; white-space: nowrap; color: var(--t-clay); }

/* ---- chips ---- */
.topic-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 30px; }
.topic-chip {
  border: 1px solid transparent;
  background: var(--t-bone);
  color: var(--t-charcoal);
  border-radius: 999px;
  padding: 0 20px;
  height: 39px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.topic-chip:hover { background: var(--t-bone-deep); }
.topic-chip.is-on { background: var(--t-charcoal); border-color: var(--t-charcoal); color: var(--t-bone); }

/* ---- community grid ---- */
.topic-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 27px; }
.topic-tile {
  background: var(--white-color);
  border: 1px solid var(--t-line);
  border-radius: var(--t-card-radius);
  padding: 15px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--t-shadow-rest);
  transition: box-shadow .18s ease, transform .18s ease;
}
.topic-tile:hover { transform: translateY(-2px); box-shadow: var(--t-shadow-lift); }
.topic-tile-img {
  position: relative;
  background: var(--t-bone-deep);
  border-radius: 14px;
  aspect-ratio: 382.667 / 168;
  display: grid;
  place-content: center;
  color: var(--t-muted);
  font-size: 12px;
  margin-bottom: 14px;
  overflow: hidden;
}
.topic-tile-img img { width: 100%; height: 100%; object-fit: cover; }
/* A bone pill, 26 tall with a 13 radius, not loose text above the title. */
.topic-kicker {
  display: inline-flex; align-items: center;
  height: 26px; padding: 0 12px; border-radius: 13px;
  background: var(--t-bone); color: var(--t-muted);
  font-size: 12px; margin-bottom: 12px; align-self: flex-start;
}
.topic-tile h3 { font-size: 21px; letter-spacing: -0.5px; margin: 0 0 6px; }
.topic-tile p { font-size: 15px; line-height: 1.5; color: var(--t-muted); margin: 0 0 16px; }
.topic-tile-foot {
  margin-top: auto;
  padding-top: 13px;
  border-top: 1px solid var(--t-line);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 13px; color: var(--t-muted);
}
.topic-tile-foot .topic-who { display: flex; align-items: center; gap: 8px; }
.topic-tile-foot .topic-dot { width: 28px; height: 28px; }
.topic-tile-foot .topic-price { color: var(--t-clay); font-weight: 600; }
.topic-tile-foot .topic-price.is-free { color: var(--t-charcoal); }

.topic-center { text-align: center; margin-top: 34px; }

/* ---- how it works, on charcoal ---- */
.topic-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.topic-step { background: var(--t-charcoal-soft); border-radius: 12px; padding: 26px 24px 28px; }
.topic-step b {
  display: block; font-family: var(--t-display); font-weight: 700;
  font-size: 30px; letter-spacing: -1px; margin-bottom: 16px;
}
.topic-step:nth-child(1) b { color: var(--t-ochre); }
.topic-step:nth-child(2) b { color: var(--t-clay); }
.topic-step:nth-child(3) b { color: var(--t-teal-light); }
.topic-step h3 { font-size: 17px; margin: 0 0 8px; }
.topic-step p { font-size: 14px; line-height: 1.55; margin: 0; }

/* ---- feature rows ---- */
.topic-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); gap: 62px; align-items: center; }
.topic-features { display: grid; gap: 22px; margin-top: 28px; }
.topic-feature { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 16px; align-items: start; }
.topic-feature i { width: 34px; height: 34px; border-radius: 9px; display: block; }
.topic-feature h3 { font-size: 17px; margin: 0 0 5px; }
.topic-feature p { font-size: 15px; line-height: 1.55; color: var(--t-muted); margin: 0; }

/* ---- stats and quotes ---- */
.topic-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.topic-stat { padding: 0 30px; border-left: 1px solid var(--t-line); }
.topic-stat:first-child { padding-left: 0; border-left: 0; }
.topic-stat b {
  display: block; font-family: var(--t-display); font-weight: 700;
  font-size: 44px; line-height: 1.05; letter-spacing: -2px; color: var(--t-charcoal);
}
.topic-stat:first-child b { color: var(--t-clay); }
.topic-stat span { font-size: 14px; color: var(--t-muted); }

.topic-quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 54px; }
.topic-quote { background: var(--t-bone-deep); border-radius: 12px; padding: 26px; }
.topic-quote p { font-size: 17px; line-height: 1.55; color: var(--t-charcoal); margin: 0 0 18px; }
.topic-quote footer { display: flex; align-items: center; gap: 10px; background: none; padding: 0; }
.topic-quote footer b { display: block; font-family: var(--t-body); font-weight: 600; font-size: 14px; color: var(--t-charcoal); }
.topic-quote footer small { color: var(--t-muted); font-size: 12px; }

/* ---- pricing ---- */
.topic-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 40px; }
.topic-plan {
  background: var(--white-color);
  border: 1px solid var(--t-line);
  border-radius: 14px;
  padding: 26px 24px 28px;
  display: flex; flex-direction: column;
}
.topic-plan--hero { background: var(--t-clay); border-color: var(--t-clay); color: var(--t-bone); }
.topic-plan--hero h3 { color: var(--t-bone); }
/* The price on the clay plan is pure white, not bone: it is the one number on
   the page that has to jump off the panel. */
.topic-plan--hero .topic-amount { color: #fff; }
.topic-plan h3 { font-family: var(--t-body); font-weight: 600; font-size: 14px; letter-spacing: .04em; margin: 0 0 14px; }
.topic-badge { background: var(--t-bone); color: var(--t-clay); border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 600; }
.topic-amount { font-family: var(--t-display); font-weight: 600; font-size: 40px; letter-spacing: -1.5px; line-height: 1.1; }
.topic-amount small { font-family: var(--t-body); font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--t-muted); margin-left: 6px; }
.topic-plan--hero .topic-amount small { color: rgba(246, 241, 232, 0.8); }
.topic-plan > p { font-size: 14px; line-height: 1.5; color: var(--t-muted); margin: 10px 0 20px; }
.topic-plan .btn { width: 100%; }
.topic-plan ul { list-style: none; padding: 0; margin: 22px 0 0; border-top: 1px solid var(--t-line); padding-top: 18px; }
.topic-plan--hero ul { border-color: rgba(246, 241, 232, 0.3); }
.topic-plan li { font-size: 14px; line-height: 1.5; color: var(--t-muted); margin-bottom: 10px; padding-left: 22px; position: relative; }
.topic-plan li::before { content: "✓"; position: absolute; left: 0; color: var(--t-clay); font-weight: 700; }
.topic-plan--hero li::before { color: var(--t-bone); }

/* Has to sit after `.topic-plan > p` and `.topic-plan li`, which set muted and
   were winning purely on source order at equal specificity. That left the
   Creator plan's blurb and its four list items in muted brown on clay, which
   is all but unreadable. Bone, and doubled class so nothing later takes it
   back. */
.topic-plan--hero.topic-plan > p,
.topic-plan--hero.topic-plan li { color: var(--t-bone); }

/* ---- closing band ---- */
.topic-cta { background: var(--t-teal); color: var(--t-bone); padding: 92px 0 96px; text-align: center; }
.topic-cta h2 { color: var(--t-bone); margin: 0 auto 18px; max-width: 14em; }
.topic-cta p { color: rgba(246, 241, 232, 0.78); max-width: 34em; margin: 0 auto 30px; }
.topic-cta .topic-actions { justify-content: center; margin-bottom: 20px; }
.topic-cta .custom-border-btn { border-color: var(--t-bone); color: var(--t-bone); }
.topic-cta .custom-border-btn:hover { background: var(--t-bone); color: var(--t-teal); }
.topic-fine { font-size: 13px; color: rgba(246, 241, 232, 0.6); }

@media (max-width: 900px) {
  .topic-hero-grid, .topic-split { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .topic-grid, .topic-steps, .topic-plans { grid-template-columns: minmax(0, 1fr); }
  .topic-stats, .topic-quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 0; }
  .topic-stat { padding: 0 18px; }
  .topic-stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .topic-float--card { left: 0; }
  .topic-head { flex-direction: column; align-items: flex-start; }
}

/* ---- footer ----
   Charcoal ground, ochre column headings, bone links at 62%: the footer laid
   out in the Figma file. */
.topic-foot {
  background: var(--t-charcoal);
  color: var(--t-bone);
  padding: 76px 0 30px;
}
.topic-foot-top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 56px;
  padding-bottom: 46px;
}
.topic-foot-brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--t-display); font-weight: 600; font-size: 24px;
  letter-spacing: -1px; color: var(--t-bone); margin-bottom: 16px;
}
.topic-foot-brand i { color: var(--t-clay); }
.topic-foot-brand-col p {
  margin: 0; max-width: 34ch;
  font-size: 15px; line-height: 1.6;
  color: rgba(246, 241, 232, 0.55);
}
.topic-foot-col h6 {
  font-family: var(--t-body); font-weight: 500;
  font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--t-ochre); margin: 6px 0 18px;
}
.topic-foot-col ul { list-style: none; margin: 0; padding: 0; }
.topic-foot-col li { margin-bottom: 12px; }
.topic-foot-col a { font-size: 16px; color: rgba(246, 241, 232, 0.62); }
.topic-foot-col a:hover { color: var(--t-ochre); }

.topic-foot-bottom {
  border-top: 1px solid rgba(246, 241, 232, 0.14);
  padding-top: 22px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
}
.topic-foot-bottom p { margin: 0; font-size: 13px; color: rgba(246, 241, 232, 0.45); }

@media (max-width: 860px) {
  .topic-foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; }
}
@media (max-width: 520px) {
  .topic-foot-top { grid-template-columns: minmax(0, 1fr); }
}

/* Replaces the mock's "1,200+ members" line under the hero buttons. */
.topic-proof-note { margin: 0; font-size: 15px; color: var(--t-muted); }

/* the two cards floating off the hero shot */
.topic-float-who { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.topic-float-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }

/* ---- written pages (about, guide, terms, privacy) ---- */
.topic-doc { padding: 64px 0 88px; }
.topic-doc h1 { margin: 0 0 18px; }
.topic-doc .topic-lede { font-size: 20px; line-height: 1.55; color: var(--t-muted); max-width: 34em; margin: 0; }
.topic-doc-date { font-size: 13px; color: var(--t-muted); margin: 18px 0 0; }
.topic-doc-body { max-width: 42em; margin-top: 40px; }
.topic-doc-body h2 {
  font-size: 21px; line-height: 1.3; letter-spacing: -0.5px;
  margin: 38px 0 10px;
}
.topic-doc-body p { font-size: 17px; line-height: 1.65; color: var(--t-charcoal); margin: 0 0 14px; }
.topic-doc-note {
  background: var(--t-bone-deep);
  border-left: 3px solid var(--t-ochre);
  border-radius: 0 8px 8px 0;
  padding: 14px 18px;
  font-size: 15px !important;
  line-height: 1.6;
  color: var(--t-muted) !important;
  max-width: 42em;
}

/* ============================================================================
   Communities discovery
   ----------------------------------------------------------------------------
   One screen: heading, controls, results. No hero band, because a member who
   clicked "Communities" has already decided to browse and does not need to be
   sold to again before seeing a single card.
   ========================================================================== */

.disc { background: var(--t-bone); padding: 56px 0 96px; min-height: 70vh; }
/* The controls were bone on white. On a bone page they would vanish, so the
   search field and the two pill groups take white instead and the cards keep
   their white so they still lift off the ground. */
.disc .disc-search,
.disc .disc-seg,
.disc .disc-sort { background: var(--white-color); }
.disc .disc-seg button.is-on { background: var(--t-bone); }
.disc .disc-search:focus-within { border-color: var(--t-charcoal); }
.disc .topic-chip { background: var(--white-color); }
.disc .topic-chip:hover { background: var(--t-bone-deep); }
.disc .topic-chip.is-on { background: var(--t-charcoal); color: var(--t-bone); }
.disc .disc-cat { background: var(--t-bone); }
.disc .disc-empty { background: var(--white-color); }

.disc-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 30px; flex-wrap: wrap; margin-bottom: 34px;
}
.disc-head h1 { margin: 0 0 10px; font-size: clamp(36px, 4.4vw, 56px); }
.disc-head p { margin: 0; color: var(--t-muted); max-width: 44ch; }

/* ---- controls ---- */
.disc-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 18px;
}
.disc-search {
  display: flex; align-items: center; gap: 10px;
  background: var(--t-bone); border: 1px solid transparent; border-radius: 999px;
  padding: 0 20px; height: 48px;
}
.disc-search:focus-within { border-color: var(--t-charcoal); background: var(--white-color); }
.disc-search svg { width: 18px; height: 18px; fill: var(--t-muted); flex: none; }
.disc-search input {
  flex: 1; border: 0; background: transparent; outline: none;
  font: 400 16px/1 var(--t-body); color: var(--t-charcoal); min-width: 0;
}
.disc-search input::placeholder { color: var(--t-muted); }

/* Segmented control rather than a third dropdown: free-or-paid is the filter
   people actually reach for, so it should be one click, not two. */
.disc-seg { display: flex; background: var(--t-bone); border-radius: 999px; padding: 4px; height: 48px; }
.disc-seg button {
  border: 0; background: transparent; cursor: pointer;
  font: 500 14px/1 var(--t-body); color: var(--t-muted);
  padding: 0 18px; border-radius: 999px;
}
.disc-seg button.is-on { background: var(--white-color); color: var(--t-charcoal); font-weight: 600; }

.disc-sort {
  display: flex; align-items: center; gap: 8px; height: 48px;
  padding: 0 8px 0 18px; background: var(--t-bone); border-radius: 999px;
}
.disc-sort span { font: 500 13px/1 var(--t-body); color: var(--t-muted); }
.disc-sort select {
  border: 0; background: transparent; outline: none; cursor: pointer;
  font: 500 14px/1 var(--t-body); color: var(--t-charcoal); padding: 8px 6px;
}

.disc-chips { margin-bottom: 26px; }

.disc-count {
  display: flex; align-items: center; gap: 14px;
  font-size: 14px; color: var(--t-muted);
  padding-bottom: 16px; margin-bottom: 22px;
  border-bottom: 1px solid var(--t-line);
}
.disc-clear {
  border: 0; background: none; cursor: pointer; padding: 0;
  font: 500 14px/1 var(--t-body); color: var(--t-clay);
}
.disc-clear:hover { text-decoration: underline; }

/* ---- results ---- */
.disc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); }

.disc-tile {
  display: flex; flex-direction: column;
  background: var(--white-color);
  border: 1px solid var(--t-line);
  border-radius: var(--t-card-radius);
  padding: 15px;
  color: inherit;
  box-shadow: var(--t-shadow-rest);
  transition: box-shadow .18s ease, transform .18s ease;
}
.disc-tile:hover { transform: translateY(-2px); box-shadow: var(--t-shadow-lift); color: inherit; }

.disc-tile-img {
  position: relative;
  aspect-ratio: 382 / 168;
  border-radius: 14px;
  overflow: hidden;
  background: var(--t-bone-deep);
  margin-bottom: 14px;
}
.disc-tile-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A flat colour block rather than a stock photo when a creator has not
   uploaded a cover: an obvious placeholder beats a stranger's office. */
/* Full strength now that it carries the weave (.topic-ph): at 22% it read as a
   half-loaded image rather than a deliberate cover. */
.disc-tile-ph { position: absolute; inset: 0; display: block; }
.disc-badge {
  position: absolute; top: 10px; right: 10px;
  background: var(--t-charcoal); color: var(--t-bone);
  font: 500 11px/1 var(--t-body); letter-spacing: .04em;
  padding: 6px 10px; border-radius: 999px;
}

.disc-tile-body { flex: 1; }
.disc-cat {
  display: inline-flex; align-items: center; height: 26px; padding: 0 12px;
  border-radius: 13px; background: var(--t-bone); color: var(--t-muted);
  font-size: 12px; margin-bottom: 12px;
}
.disc-tile h3 { font-size: 21px; letter-spacing: -0.5px; margin: 0 0 6px; }
.disc-tile p {
  font-size: 15px; line-height: 1.5; color: var(--t-muted); margin: 0 0 16px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.disc-tile-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-top: 13px; border-top: 1px solid var(--t-line);
  font-size: 13px; color: var(--t-muted);
}
.disc-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.disc-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  object-fit: cover; display: block;
}
.disc-price { color: var(--t-clay); font-weight: 600; white-space: nowrap; }
.disc-price.is-free { color: var(--t-charcoal); }

.disc-tile-meta {
  display: flex; gap: 16px; padding-top: 10px;
  font-size: 12px; color: var(--t-muted);
}

/* ---- loading and empty ---- */
.se-spinner {
  display: inline-block; flex: 0 0 auto; width: 15px; height: 15px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; opacity: .8; vertical-align: -2px;
  animation: se-spin .7s linear infinite;
}
.se-spinner-small { width: 14px; height: 14px; }
.se-spinner-medium { width: 22px; height: 22px; border-width: 2px; }
.se-loading-state {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  min-height: 100px; padding: 24px; color: var(--t-muted); text-align: center;
}
.se-loading-state .se-spinner { color: var(--t-teal); }
.authenticated-image-loading { display: inline-grid; place-items: center; color: var(--t-teal); }
button .se-spinner { margin-right: 2px; }
@keyframes se-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .se-spinner { animation-duration: 1.8s; } }

.disc-skel {
  /* Stands in for a .disc-tile, so it has to carry the same corner or the
     grid visibly re-rounds itself the moment the real cards land. */
  height: 330px; border-radius: var(--t-card-radius);
  background: linear-gradient(100deg, var(--t-bone) 30%, var(--t-bone-deep) 50%, var(--t-bone) 70%);
  background-size: 300% 100%;
  animation: disc-shimmer 1.4s linear infinite;
}
@keyframes disc-shimmer { from { background-position: 150% 0 } to { background-position: -50% 0 } }
@media (prefers-reduced-motion: reduce) { .disc-skel { animation: none } }

.disc-empty {
  border: 1px dashed var(--t-line); border-radius: var(--t-card-radius);
  background: var(--t-bone); padding: 56px 26px; text-align: center;
}
.disc-empty h3 { font-size: 24px; margin: 0 0 8px; }
.disc-empty p { color: var(--t-muted); margin: 0 0 22px; }

@media (max-width: 980px) {
  .disc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .disc-controls { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .disc-grid { grid-template-columns: minmax(0, 1fr); }
  .disc-head { align-items: flex-start; }
}

/* ---- account menu and notifications ---- */

.topic-account { position: relative; display: flex; align-items: center; gap: 4px; }
/* Panels hang from the cluster's right edge, which now sits on the page
   margin, so they need pulling back in to stay clear of it. */
.topic-account .topic-menu { right: -4px; }
.topic-bell-wrap { position: relative; }
.topic-notification-badge { position:absolute; top:2px; right:2px; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:var(--t-clay); color:#fff; font:700 10px/16px var(--t-body); text-align:center; pointer-events:none; }

.topic-icon-btn {
  width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer;
  background: transparent; display: grid; place-items: center; color: var(--t-charcoal);
}
.topic-icon-btn:hover { background: var(--t-bone); }
.topic-icon-btn svg { width: 21px; height: 21px; fill: currentColor; }

/* The trailing padding is dropped and taken back as a negative margin, so the
   avatar's visible circle lands on the same 28px margin the logo sits on. Its
   hit area stays full size; only the ink moves. */
.topic-avatar-btn {
  display: inline-flex; align-items: center; gap: 2px;
  border: 0; background: transparent; cursor: pointer;
  padding: 4px 6px 4px 4px;
  margin-right: -6px;
  border-radius: 999px;
}
.topic-avatar-btn:hover { background: var(--t-bone); }
.topic-caret { width: 16px; height: 16px; fill: var(--t-muted); }

/* The circle carrying the initials. Same element in the bar and in the menu
   header, so the two can never drift apart. */
.topic-initials {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font: 600 13px/1 var(--t-body); letter-spacing: .02em;
  color: var(--t-bone);
}

.topic-menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 40;
  background: var(--white-color);
  border: 1px solid var(--t-line);
  border-radius: 16px;
  box-shadow: 0 20px 44px rgba(27, 24, 21, 0.14);
  padding: 8px;
}
.topic-menu--account { width: 268px; }
.topic-menu--bell { width: 300px; }

.topic-menu-id { display: flex; align-items: center; gap: 12px; padding: 12px 12px 14px; }
.topic-menu-id b {
  display: block; font: 600 15px/1.2 var(--t-body); color: var(--t-charcoal);
}
/* The address can be long and must never widen the panel or spill out of it. */
.topic-menu-id small {
  display: block; font-size: 13px; color: var(--t-muted); margin-top: 3px;
  max-width: 186px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.topic-menu-sep { height: 1px; background: var(--t-line); margin: 6px 4px; }

.topic-menu a,
.topic-menu-out {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left;
  border: 0; background: transparent; cursor: pointer;
  padding: 10px 12px; border-radius: 9px;
  font: 500 15px/1.2 var(--t-body); color: var(--t-charcoal);
}
.topic-menu a:hover,
.topic-menu-out:hover { background: var(--t-bone); color: var(--t-charcoal); }
.topic-menu-note { font-size: 13px; font-weight: 400; color: var(--t-muted); }
.topic-menu-out { color: var(--t-clay); }
.topic-menu-out:hover { color: var(--t-clay); }

.topic-menu-head {
  font: 600 13px/1 var(--t-body); letter-spacing: .06em; text-transform: uppercase;
  color: var(--t-muted); padding: 12px 12px 10px;
}
.topic-menu-head { display:flex; align-items:center; justify-content:space-between; }
.topic-menu-head button { border:0; background:none; color:var(--t-teal); cursor:pointer; font:600 12px var(--t-body); padding:0; text-transform:none; letter-spacing:0; }
.topic-notification-list { max-height:360px; overflow:auto; }
.topic-notification-list a { display:block; border-radius:9px; padding:11px 12px; }
.topic-notification-list a.unread { background:var(--t-bone); }
.topic-notification-list a strong, .topic-notification-list a span, .topic-notification-list a small { display:block; }
.topic-notification-list a strong { color:var(--t-charcoal); font:600 14px/1.3 var(--t-body); }
.topic-notification-list a span { color:var(--t-muted); font-size:13px; line-height:1.4; margin-top:2px; }
.topic-notification-list a small { color:var(--t-muted); font-size:11px; margin-top:5px; }
.topic-menu-empty {
  margin: 0; padding: 4px 12px 16px;
  font-size: 14px; line-height: 1.55; color: var(--t-muted);
}

@media (max-width: 991px) {
  .topic-menu { position: static; width: 100% !important; box-shadow: none; margin-top: 8px; }
}

/* The primary action in the signed-in bar. Hidden on small screens, where the
   same item is one tap away in the account menu and the bar has no room. */
.topic-nav-create { margin-right: 6px; }
@media (max-width: 991px) { .topic-nav-create { display: none; } }
/* The anchor target must clear the fixed-height header. */
#how-it-works { scroll-margin-top: 100px; }

/* ============================================================================
   Classroom
   ----------------------------------------------------------------------------
   Course cards first, one course at a time after that. A member should be able
   to see where they got to without reading anything.
   ========================================================================== */

.cls-top { margin-bottom: 22px; }
.cls-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }

.cls-card {
  display: flex; flex-direction: column; text-align: left;
  background: var(--white-color);
  border: 1px solid var(--t-line);
  border-radius: var(--t-card-radius);
  padding: 0 0 16px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--t-shadow-rest);
  transition: box-shadow .18s ease, transform .18s ease;
  font: inherit; color: inherit;
}
.cls-card:hover { transform: translateY(-2px); box-shadow: var(--t-shadow-lift); }

/* A flat colour band rather than a stock image: courses have no cover field,
   and an obvious placeholder is better than a photo of somebody else's desk. */
.cls-cover { display: block; height: 104px; opacity: .9; }

.cls-card-body { display: block; padding: 16px 18px 0; flex: 1; }
.cls-card-body b {
  display: block; font-family: var(--t-display); font-weight: 600;
  font-size: 19px; letter-spacing: -0.5px; color: var(--t-charcoal); margin-bottom: 6px;
}
.cls-card-desc {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 14px; line-height: 1.5; color: var(--t-muted);
}

.cls-card-foot { display: block; padding: 16px 18px 0; }
.cls-card-meta {
  display: flex; justify-content: space-between; gap: 10px;
  margin-top: 8px; font-size: 13px; color: var(--t-muted);
}
.cls-card-meta b { color: var(--t-charcoal); font-weight: 600; }

/* The progress bar: the one element that makes a classroom feel like progress
   rather than a list of files. */
.cls-bar {
  display: block; height: 6px; border-radius: 999px;
  background: var(--t-bone-deep); overflow: hidden;
}
.cls-bar > span {
  display: block; height: 100%; border-radius: 999px;
  background: var(--t-clay); transition: width .3s ease;
}

/* ---- one course ---- */
.cls-back {
  border: 0; background: none; cursor: pointer; padding: 0; margin-bottom: 18px;
  font: 500 15px/1 var(--t-body); color: var(--t-muted);
}
.cls-back:hover { color: var(--t-clay); }

.cls-course-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 26px; flex-wrap: wrap;
  padding-bottom: 22px; margin-bottom: 26px;
  border-bottom: 1px solid var(--t-line);
}
.cls-course-head h2 { font-size: 30px; letter-spacing: -1px; margin: 0 0 8px; }
.cls-course-head p { margin: 0; color: var(--t-muted); max-width: 56ch; }
.cls-course-progress { min-width: 220px; }
.cls-course-progress span:last-child {
  display: block; margin-top: 8px; font-size: 13px; color: var(--t-muted);
}

.cls-module { margin-bottom: 30px; }
.cls-module > header {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 10px;
}
.cls-module h3 { font-size: 18px; letter-spacing: -0.5px; margin: 0; }
.cls-module > header span { font-size: 13px; color: var(--t-muted); }

.cls-lessons { list-style: none; margin: 0; padding: 0; border: 1px solid var(--t-line); border-radius: 14px; overflow: hidden; }
.cls-lessons li + li { border-top: 1px solid var(--t-line); }

.cls-lesson {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; background: var(--white-color); color: inherit;
}
.cls-lesson:hover { background: var(--t-bone); color: inherit; }

/* Numbered until done, ticked after: position in the course and progress in
   the same 28px circle. */
.cls-tick {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--t-bone-deep); color: var(--t-muted);
  font: 600 12px/1 var(--t-body);
}
.cls-tick.is-done { background: var(--t-teal); color: var(--t-bone); }

.cls-lesson-title { flex: 1; min-width: 0; font-size: 16px; color: var(--t-charcoal); }
.cls-lesson-title small { display: block; font-size: 13px; color: var(--t-muted); margin-top: 2px; }
.cls-lesson-go { color: var(--t-muted); opacity: 0; transition: opacity .14s ease; }
.cls-lesson:hover .cls-lesson-go { opacity: 1; }

/* ---- creator controls ---- */
.cls-add {
  border: 1px dashed var(--t-line); background: transparent; cursor: pointer;
  width: 100%; padding: 12px; margin-top: 10px; border-radius: 12px;
  font: 500 14px/1 var(--t-body); color: var(--t-muted);
}
.cls-add:hover { border-color: var(--t-charcoal); color: var(--t-charcoal); }

.cls-panel {
  background: var(--t-bone); border: 1px solid var(--t-line);
  border-radius: 14px; padding: 18px 20px 20px; margin-top: 12px;
}
.cls-panel-actions { display: flex; gap: 10px; margin-top: 18px; }
.cls-seg { height: 42px; margin-bottom: 12px; width: max-content; }
.cls-hint { font-size: 13px; line-height: 1.55; color: var(--t-muted); margin: 8px 0 0; }

@media (max-width: 980px) { .cls-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .cls-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- woven placeholder for cards with no cover image ----
   Communities have no cover by default, and the tiles used to render the
   literal string "Image · 382 × 168". A band of the brand weave reads as a
   deliberate cover rather than a missing asset. Colour comes from an inline
   background on the element; the weave sits on top of it. */
.topic-ph {
  position: absolute;
  inset: 0;
  display: block;
}

.topic-ph::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 62%;
  background: linear-gradient(
    90deg,
    var(--t-ochre) 0%,     var(--t-ochre) 15%,
    transparent    15%,    transparent    24%,
    var(--t-bone)  24%,    var(--t-bone)  33%,
    transparent    33%,    transparent    41%,
    var(--t-clay)  41%,    var(--t-clay)  72%,
    transparent    72%,    transparent    81%,
    var(--t-ochre) 81%,    var(--t-ochre) 91%,
    transparent    91%,    transparent    100%
  );
}

/* The nav avatar when the member has a picture. Shares .topic-initials sizing
   so the circle stays identical whichever branch renders. */
.topic-avatar-img {
  object-fit: cover;
  background: var(--t-bone-deep);
}