/* ============================================================
   Natural Intelligence: components

   Sits on tl-system.css, which carries the palette, the glow, the type
   scale, the measure and the rhythm ported from BrandOS. Only what is
   this site's own belongs here.

   The accent is green, its colour in the group system.
   ============================================================ */

:root { --cta: #00A86B; --cta-ink: #04170B; --accent-line: #00A86B; --bullet: #00A86B; }
:root[data-theme="light"] { --cta: #00754A; --cta-ink: #FFFFFF; --accent-line: #00754A; --bullet: #00754A; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --cta: #00754A; --cta-ink: #FFFFFF;
    --accent-line: #00754A; --bullet: #00754A; }
}
.brand em { font-style: normal; color: var(--cta); }

/* ---- hero ------------------------------------------------------------- */

.hero { padding: clamp(56px, 9vw, 112px) 24px clamp(36px, 5vw, 64px); position: relative; z-index: 4; }
.hero h1 { max-width: 14ch; }
.hero .lede { max-width: 58ch; }
.hero-note { color: var(--faint); font-size: 13.5px; margin-top: 22px; }

/* ---- the four themes --------------------------------------------------- */

.themegrid { display: grid; gap: 14px; grid-template-columns: 1fr; margin-top: 34px; }
@media (min-width: 700px)  { .themegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .themegrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.theme { position: relative; overflow: hidden; display: flex; flex-direction: column;
         padding: 28px 24px; border-radius: var(--r-lg); background: var(--bg2);
         border: 1px solid var(--line2); text-decoration: none;
         transition: transform .35s ease, border-color .35s ease; }
.theme::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
                 background: linear-gradient(90deg, var(--tc), transparent 78%); opacity: .85; }
@media (hover: hover) { .theme:hover { transform: translateY(-4px); border-color: rgba(var(--ink),.26); } }
.theme > * { position: relative; }
/* Twelve pixels and uppercase, so it takes the readable tone rather than the
   display one. The display tokens are tuned for headings at 3:1. */
.theme-name { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 12px;
              letter-spacing: .1em; text-transform: uppercase; color: var(--tc-ink, var(--tc)); }
.theme strong { font-family: 'Outfit', sans-serif; font-size: 19px; line-height: 1.2;
                margin: 16px 0 10px; letter-spacing: -0.02em; }
.theme-lead { color: var(--muted); font-size: 14px; line-height: 1.5; }
.theme-go { margin-top: auto; padding-top: 20px; font-size: 12.5px; color: var(--faint); }

/* ---- item cards, shared by guides, practices, books and tracks --------- */

.items { display: grid; gap: 14px; grid-template-columns: 1fr; margin-top: 30px; }
@media (min-width: 660px)  { .items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .items { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.item a { display: flex; flex-direction: column; height: 100%; padding: 24px 22px;
          border-radius: var(--r-lg); background: var(--bg2); border: 1px solid var(--line2);
          text-decoration: none; transition: transform .35s ease, border-color .35s ease; }
@media (hover: hover) { .item a:hover { transform: translateY(-4px); border-color: var(--ic); } }
.item-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.item-theme { font-size: 10.5px; font-weight: 800; letter-spacing: .1em;
              text-transform: uppercase; color: var(--ic-ink, var(--ic)); }
.item strong { font-family: 'Outfit', sans-serif; font-size: 18px; line-height: 1.25;
               color: var(--text); margin: 14px 0 0; letter-spacing: -0.02em; }
.item-sub { color: var(--muted); font-size: 13.5px; margin-top: 4px; font-style: italic; }
.item-body { color: var(--muted); font-size: 14px; line-height: 1.5; margin-top: 10px; }
.item-foot { margin-top: auto; padding-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 14px;
             align-items: center; font-size: 12px; color: var(--faint); }

/* ---- how a thing is paid for ------------------------------------------- */

.tag { font-size: 9.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
       padding: 4px 9px; border-radius: 999px; white-space: nowrap; cursor: help; }
/* A label on a tinted panel of its own colour is the easiest contrast mistake
   to make and the hardest to see coming: it looks deliberate, and it measures
   at 1.3:1. These use the ink tokens, which the theme resolves to a value
   readable against its own tint rather than a fixed hex that only ever suited
   one theme. */
.tag-free  { color: var(--tone-green-ink);  background: color-mix(in srgb, var(--tone-green) 14%, transparent); }
.tag-pwyw  { color: var(--tone-amber-ink);  background: color-mix(in srgb, var(--tone-amber) 14%, transparent); }
.tag-fixed { color: var(--tone-blue-ink);   background: color-mix(in srgb, var(--tone-blue) 14%, transparent); }
.soon { font-size: 9.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
        color: var(--tone-amber-ink, var(--amber)); }
.price { color: var(--muted); }

/* ---- theme chips ------------------------------------------------------- */

.chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.chip { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px; border-radius: 999px;
        border: 1px solid var(--line2); background: var(--bg2); color: var(--muted);
        font-size: 13px; font-weight: 600; text-decoration: none;
        transition: color .25s ease, border-color .25s ease; }
.chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--tc); flex-shrink: 0; }
@media (hover: hover) { .chip:hover { color: var(--text); border-color: rgba(var(--ink),.28); } }

/* ---- the assessment ---------------------------------------------------- */

.assess { max-width: 760px; }
.q { border: 0; padding: 0; margin: 0 0 34px; min-width: 0; }
.q legend { display: flex; align-items: flex-start; gap: 13px; padding: 0;
            font-family: 'Outfit', sans-serif; font-weight: 700;
            font-size: clamp(17px, 2vw, 21px); line-height: 1.32; color: var(--text);
            letter-spacing: -0.02em; }
.q-n { display: grid; place-items: center; width: 27px; height: 27px; flex-shrink: 0;
       border-radius: 50%; font-size: 11.5px; font-weight: 800;
       /* A neutral tint rather than a tint of the numeral's own hue. Tinting
          the background in the same hue as the text lifts the ground in exactly
          the channel the text needs, and no amount of darkening the ink fully
          recovers it: sixteen per cent measured 2.32:1, ten reached only 3.98:1,
          and even a neutral seven per cent left purple at 4.29:1. The colour stays where it is legible, on the numeral. */
       background: color-mix(in srgb, var(--text) 4%, transparent); color: var(--tc-ink, var(--tc));
       font-family: 'Inter', sans-serif; margin-top: 2px; }
@supports not (color: color-mix(in srgb, red, blue)) {
  .q-n { background: rgba(var(--ink),.08); color: var(--muted); }
}
.q-scale { display: grid; gap: 8px; grid-template-columns: 1fr; margin: 18px 0 0 40px; }
@media (min-width: 640px) { .q-scale { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; } }
.q-scale label { display: flex; align-items: center; justify-content: center; cursor: pointer;
                 position: relative;
                 padding: 13px 10px; margin: 0; border-radius: var(--r-md); text-align: center;
                 border: 1px solid var(--line2); background: rgba(var(--ink),.02);
                 font-size: 13px; font-weight: 600; color: var(--muted);
                 transition: border-color .2s ease, color .2s ease, background .2s ease; }
.q-scale input { position: absolute; inset: 0; width: 100%; height: 100%;
                 opacity: 0; margin: 0; cursor: pointer; border-radius: var(--r-md); }
.q-scale input:focus-visible { outline: 2px solid var(--cta); outline-offset: 2px; }
@media (hover: hover) { .q-scale label:hover { color: var(--text); border-color: rgba(var(--ink),.26); } }
.q-scale label:has(input:checked) { border-color: var(--tc); color: var(--text);
                                    background: color-mix(in srgb, var(--tc) 12%, transparent); }
@supports not selector(:has(*)) {
  .q-scale input:checked + span { color: var(--text); text-decoration: underline; }
}
.assess-go { margin-top: 40px; }
.assess-go button { font: inherit; font-weight: 700; font-size: 15px; cursor: pointer;
                    padding: 15px 32px; border-radius: 999px; border: 1px solid var(--cta);
                    background: var(--cta); color: var(--cta-ink); }
.assess-go button:hover { filter: brightness(1.08); }
.note { color: var(--faint); font-size: 13px; margin-top: 14px; }

/* With scripting on, one question at a time. Without it, all twelve at once
   and a single submit, which is what the markup already is. */
.assess.is-stepped .q { display: none; }
.assess.is-stepped .q.on { display: block; }
.assess-bar { height: 3px; border-radius: 999px; background: rgba(var(--ink),.10);
              margin-bottom: 34px; overflow: hidden; }
.assess-bar i { display: block; height: 100%; width: var(--w, 8%); border-radius: 999px;
                background: var(--tl-rainbow);
                transition: width .4s cubic-bezier(.4,0,.2,1); }
.assess-nav { display: flex; gap: 10px; margin-top: 30px; }
.assess-nav button { font: inherit; font-weight: 700; font-size: 14.5px; cursor: pointer;
                     padding: 13px 26px; border-radius: 999px; border: 1px solid var(--line);
                     background: transparent; color: var(--text); }
.assess-nav .on-next { background: var(--cta); border-color: var(--cta); color: var(--cta-ink); }

/* ---- results ----------------------------------------------------------- */

.results { display: grid; gap: 14px; grid-template-columns: 1fr; margin-top: 30px; }
@media (min-width: 640px)  { .results { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .results { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.result { position: relative; overflow: hidden; padding: 26px 22px; border-radius: var(--r-lg);
          background: var(--bg2); border: 1px solid var(--line2); display: flex; flex-direction: column; }
.result::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
                  background: linear-gradient(90deg, var(--tc), transparent 78%); }
.result-band { font-size: 10.5px; font-weight: 800; letter-spacing: .1em;
               text-transform: uppercase; color: var(--tc); }
.result h3 { font-size: 21px; margin: 12px 0 10px; }
.result p { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 0 0 10px; max-width: none; }
.result-claim { color: var(--faint); font-size: 13px; font-style: italic; }
.result a { margin-top: auto; padding-top: 16px; font-size: 13.5px; font-weight: 700;
            color: var(--text); text-decoration: none; }
.result a:hover { color: var(--tc); }

/* ---- practices --------------------------------------------------------- */

.practices { display: grid; gap: 14px; grid-template-columns: 1fr; margin-top: 26px; }
@media (min-width: 760px) { .practices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.practice { position: relative; overflow: hidden; padding: 26px 24px; border-radius: var(--r-lg);
            background: var(--bg2); border: 1px solid var(--line2); scroll-margin-top: 92px; }
.practice::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
                    background: linear-gradient(90deg, var(--tc), transparent 78%); }
.practice h3 { font-size: 18px; margin: 0 0 12px; }
.practice-what { color: var(--text); font-size: 15px; line-height: 1.5; margin: 0 0 10px; max-width: none; }
.practice-why { color: var(--muted); font-size: 14px; font-style: italic; margin: 0; max-width: none; }
.practice-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 18px 0 0;
                 font-size: 12px; color: var(--faint); }

/* ---- the paid tier ----------------------------------------------------- */

.deeps { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 30px; }
@media (min-width: 900px) { .deeps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.deep { padding: 28px 26px; border-radius: var(--r-lg); background: var(--bg2); border: 1px solid var(--line2); }
.deep-kind { font-size: 10.5px; font-weight: 800; letter-spacing: .1em;
             text-transform: uppercase; color: var(--blue); }
.deep h3 { font-size: 20px; margin: 14px 0 8px; }
.deep-price { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 26px;
              color: var(--text); margin: 0 0 14px; letter-spacing: -0.03em; }
.deep-price span { font-size: 13px; font-weight: 600; color: var(--faint); letter-spacing: 0; }
.deep p { color: var(--muted); font-size: 14.5px; line-height: 1.55; max-width: none; }
.deep-costs { border-left: 2px solid var(--blue); padding-left: 16px; margin-top: 18px; }
.deep-free { border-left: 2px solid var(--cta); padding-left: 16px; }

/* ---- tiers, on the pricing page ---------------------------------------- */

.tiers { display: grid; gap: 14px; grid-template-columns: 1fr; margin-top: 26px; }
@media (min-width: 820px) { .tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tier { padding: 26px 24px; border-radius: var(--r-lg); background: var(--bg2); border: 1px solid var(--line2); }
.tier h3 { font-size: 18px; margin: 0 0 10px; }
.tier p { color: var(--muted); font-size: 14.5px; margin: 0; max-width: none; }
.tier-free  { border-color: rgba(0,168,107,.34); }
.tier-pwyw  { border-color: rgba(255,179,92,.34); }
.tier-fixed { border-color: rgba(0,102,178,.34); }

/* ---- the care note, wherever the body comes up -------------------------- */

.care { max-width: calc(var(--maxw) - 48px); margin: 0 auto var(--gap-section);
        padding: 26px 28px; border-radius: var(--r-lg);
        background: rgba(255,179,92,.07); border: 1px solid rgba(255,179,92,.26); }
.care p { color: var(--prose); font-size: 14.5px; line-height: 1.6; margin: 0; max-width: 76ch; }
.care strong { color: var(--text); }

/* ---- a guide ----------------------------------------------------------- */

.guide-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
              font-size: 13px; color: var(--faint); margin-top: 20px; }
.pull { font-family: 'Outfit', sans-serif; font-weight: 700;
        font-size: clamp(20px, 2.6vw, 28px); line-height: 1.3; color: var(--text);
        letter-spacing: -0.02em; border-left: 3px solid var(--cta); padding-left: 22px;
        margin: 0 0 26px; max-width: 32ch; }

/* ---- principles and faq ------------------------------------------------- */

.principles { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; }
@media (min-width: 900px) { .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.principles li { padding: 24px; border-radius: var(--r-md); background: var(--bg2); border: 1px solid var(--line2); }
.principles strong { display: block; font-family: 'Outfit', sans-serif; font-size: 17px;
                     margin-bottom: 8px; letter-spacing: -0.02em; }
.principles span { color: var(--muted); font-size: 14.5px; line-height: 1.55; }

/* Two columns once there is room. Capped at the reading measure, a list of
   closed questions left half the page empty and read as an afterthought;
   the answers inside still wrap at a readable width. */
.faq { margin-top: 24px; display: grid; gap: 10px; align-content: start; }
@media (min-width: 900px) { .faq { grid-template-columns: 1fr 1fr; gap: 10px 18px; } }
.faq details[open] { grid-column: 1 / -1; }
.faq .faq-a, .faq details > div, .faq details > p { max-width: var(--measure); }
.faq details { border: 1px solid var(--line2); border-radius: var(--r-md); background: var(--bg2);
               margin-bottom: 10px; overflow: hidden; }
.faq summary { cursor: pointer; padding: 18px 22px; font-weight: 700; font-size: 15px;
               color: var(--text); list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ' +'; color: var(--muted); float: right; }
.faq details[open] summary::after { content: ' -'; }
.faq p { padding: 0 22px 20px; color: var(--muted); font-size: 14.5px; line-height: 1.6; margin: 0; }

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

.foot-themes a { display: inline-flex; align-items: center; gap: 8px; }
.foot-themes a::before { content: ''; width: 7px; height: 7px; border-radius: 50%;
                         background: var(--fc); flex-shrink: 0; }

.contactform { background: var(--bg2); border: 1px solid var(--line2); border-radius: var(--r-xl);
               padding: 34px; max-width: 720px; }
.cta-band { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: 44px 38px;
            max-width: calc(var(--maxw) - 48px); margin: 0 auto var(--gap-section);
            background: var(--bg2); border: 1px solid var(--line2); }
.cta-band::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--tl-rainbow); }

@media (max-width: 430px) {
  .contactform, .care { padding: 22px; border-radius: var(--r-md); }
  .cta-band { padding: 28px 22px; border-radius: var(--r-lg); }
  .q-scale { margin-left: 0; }
}

/* ---- the mark -------------------------------------------------------------
   The Natural Intelligence logo as supplied: a hand-drawn ring, pure white on
   transparency, trimmed to its own bounding box so the gap beside the wordmark
   is set by the flex gap rather than by dead space inside the image.

   White is correct on the dark ground and invisible on the light one, so the
   light themes invert it. A straight invert is exact rather than approximate
   here: every opaque pixel in the file is pure white and there is no colour in
   the artwork to distort, which was checked rather than assumed.

   The shared stylesheet points .brand-mark at the Turtle Labs logo and sizes it
   square. This is portrait, so both dimensions are restated, including inside
   the mobile breakpoint, where a bare override would otherwise leave the width
   from here and the height from there. */

/* The mark is a single-colour vector used as a mask, so it takes the colour of
   the text beside it and needs no second asset and no invert filter.

   The PNG it replaces was white pixels flipped with invert(1) on the light
   theme. That worked and it meant the logo could only ever be pure black or
   pure white: it could not sit in a coloured header, and any change to the
   palette left it behind. A mask inherits currentColor, so it follows.

   The fallback keeps the old behaviour for anything without mask support,
   rather than showing an empty box where the logo should be. */
.brand-mark {
  width: 27px; height: 36px;
  background-image: url('/assets/ni-mark.png');
  background-size: contain; background-repeat: no-repeat; background-position: center;
}
@media (max-width: 900px) { .brand-mark { width: 24px; height: 32px; } }

:root[data-theme="light"] .brand-mark { filter: invert(1); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .brand-mark { filter: invert(1); }
}

@supports ((mask-image: url('#')) or (-webkit-mask-image: url('#'))) {
  .brand-mark {
    background-image: none;
    background-color: currentColor;
    -webkit-mask-image: url('/assets/ni-mark.svg');
            mask-image: url('/assets/ni-mark.svg');
    -webkit-mask-size: contain;  mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center;  mask-position: center;
    filter: none;
  }
  :root[data-theme="light"] .brand-mark { filter: none; }
  @media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .brand-mark { filter: none; }
  }
}

/* ---- legal documents -------------------------------------------------------
   Long text that somebody has to be able to read and cite, so: a contents
   list, addressable headings, and a table where the content is genuinely
   tabular rather than forced into prose. */

.legal-sec { padding-top: 0; }
.legal-sec h2 { scroll-margin-top: 90px; font-size: clamp(21px, 2.6vw, 27px); margin-bottom: 14px; }
.legal-lead { font-size: 16.5px; color: var(--prose); max-width: var(--measure); margin: 0 0 16px; }
.legal-p { font-size: 15.5px; line-height: 1.65; color: var(--prose);
           max-width: var(--measure); margin: 0 0 14px; }
.legal-toc { border: 1px solid var(--line2); border-radius: var(--r-lg); padding: 22px 24px; }
.legal-toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 30px; }
.legal-toc li { margin-bottom: 7px; font-size: 14.5px; }
.legal-toc a { color: var(--muted); text-decoration: none; }
.legal-toc a:hover { color: var(--text); text-decoration: underline; }
@media (max-width: 640px) { .legal-toc ol { columns: 1; } }

.legal-table { overflow-x: auto; margin: 6px 0 18px; max-width: var(--measure); }
.legal-table table { border-collapse: collapse; width: 100%; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 12px 16px 12px 0;
                                   border-top: 1px solid var(--line2); font-size: 14.5px;
                                   line-height: 1.55; }
.legal-table th { color: var(--text); font-weight: 700; width: 30%; min-width: 150px; }
.legal-table td { color: var(--prose); }

/* A fact about the company that nobody has supplied yet. Deliberately loud:
   an unfilled placeholder on a legal page is a defect, and the check in the
   suite fails while any remains. */
.gap { background: color-mix(in srgb, var(--tone-red) 22%, transparent);
       color: var(--text); border-bottom: 1px dashed var(--tone-red);
       padding: 1px 5px; border-radius: 4px; font-style: italic; }

/* ---- guide bodies ---- */
.guide-body h2 { font-size: 19px; margin: 30px 0 10px; letter-spacing: -.01em; }
.guide-body h2:first-of-type { margin-top: 22px; }
.guide-body p { margin: 0 0 14px; line-height: 1.7; }
.guide-points { margin: 0 0 18px; padding-left: 18px; }
.guide-points li { margin-bottom: 11px; line-height: 1.65; }
.guide-try {
  margin: 34px 0 0; padding: 22px 24px;
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  background: var(--card);
}
.try-label {
  margin: 0 0 10px; font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; font-weight: 700; color: var(--accent);
}
.try-what { margin: 0 0 16px; font-size: 16.5px; line-height: 1.6; }
.try-meta { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; }
.try-meta dt {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: var(--faint); padding-top: 3px; white-space: nowrap;
}
.try-meta dd { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.6; }
@media (max-width: 520px) {
  .try-meta { grid-template-columns: 1fr; gap: 2px 0; }
  .try-meta dd { margin-bottom: 10px; }
}

/* ---- The Living Commons -------------------------------------------------
   A principle leads with what to do and keeps 2,000 words of research behind
   disclosures, so the page reads as an instruction with its working attached
   rather than an essay with an instruction buried at paragraph forty. */
.cm-filter-label { font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 800; color: var(--faint); margin: 0 0 18px; }
.cm-grid { display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.cm-card { display: flex; flex-direction: column; gap: 8px; padding: 24px 24px 20px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card);
  text-decoration: none; color: inherit; }
.cm-card:hover { border-color: var(--text); }
.cm-card-domain { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 800; color: var(--tone-green-ink, var(--accent)); margin: 0; }
.cm-card h3 { font-family: 'Outfit', sans-serif; font-size: 20px; line-height: 1.25;
  margin: 0; letter-spacing: -.01em; }
.cm-card-line { font-size: 14.5px; color: var(--muted); margin: 0; line-height: 1.55; }
.cm-card-go { margin: auto 0 0; padding-top: 10px; font-size: 13.5px; font-weight: 700;
  color: var(--tone-green-ink, var(--accent)); }

/* The two sections somebody can act on, given the weight the rest is not. */
.cm-do, .cm-child { border-left: 3px solid var(--accent); padding-left: 22px; }
.cm-do .cm-list li { font-size: 16.5px; line-height: 1.6; padding: 9px 0; }
.cm-child p { font-size: 16.5px; line-height: 1.7; }

.cm-fold { border-top: 1px solid var(--line); }
.cm-fold:last-of-type { border-bottom: 1px solid var(--line); }
.cm-fold > summary { cursor: pointer; padding: 16px 2px; font-weight: 700; font-size: 16px;
  list-style: none; display: flex; align-items: center; gap: 10px; }
.cm-fold > summary::-webkit-details-marker { display: none; }
.cm-fold > summary::before { content: '+'; width: 20px; flex: none; font-weight: 400;
  font-size: 19px; color: var(--muted); }
.cm-fold[open] > summary::before { content: '\2212'; }
.cm-fold > summary:hover { color: var(--accent); }
.cm-fold-body { padding: 0 2px 22px 30px; }
.cm-fold-body p { font-size: 15.5px; line-height: 1.7; color: var(--muted); }
.cm-fold-body h4 { font-family: 'Outfit', sans-serif; font-size: 16px; margin: 20px 0 6px;
  color: var(--text); }
.cm-label { font-size: 11px !important; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 800; color: var(--faint) !important; margin: 18px 0 6px !important; }
.cm-list { margin: 0 0 14px; padding-left: 20px; }
.cm-list li { font-size: 15.5px; line-height: 1.65; color: var(--muted); margin-bottom: 7px; }
.cm-draft { font-size: 13.5px !important; border-left: 3px solid var(--tone-amber-ink, var(--amber));
  padding-left: 14px; margin-bottom: 18px !important; }
.cm-unwritten { color: var(--faint); font-size: .9em; }
@media (max-width: 620px) {
  .cm-fold-body { padding-left: 4px; }
  .cm-do, .cm-child { padding-left: 16px; }
}


/* A section heading that carries an icon: the plate takes the heading's hue
   and the heading stays on one line with it. */
.band > h2.tl-row { gap: 14px; align-items: center; }


/* Only the block the current statement belongs to shows its heading. With
   scripting off the form is not stepped at all and every heading stays, which
   is the point of putting the behaviour behind .is-stepped. */
.assess.is-stepped .assess-block > .tl-head { display: none; }
.assess.is-stepped .assess-block.on > .tl-head { display: flex; }
.assess-block > .tl-head { margin-bottom: 26px; }