/* ===========================================================================
   Find Your Passion
   Loaded after tl-system.css and ni.css, so it only states differences.

   The design it comes from was thirty-six per cent orange by coloured element,
   which is why it read as loud rather than warm. Orange has one job here: the
   single primary action on a screen. Structure is calm, and the colours that
   remain are the ones carrying meaning, which is the four circles and the five
   patterns.
   =========================================================================== */

.fyp { --fyp-accent: var(--tone-blue); }

/* ---- the bar --------------------------------------------------------------
   One logo, in the bar. The hero opens on the headline instead of repeating
   the mark at full size directly underneath it. */

/* The shared bar is 14px of padding around a 36px mark, which is right for a
   dense site and too tight for this one: FYP opens on a decision, and a
   cramped bar above it reads as hurried. */
.fyp-head .bar { padding-top: 22px; padding-bottom: 22px; }
@media (max-width: 900px) { .fyp-head .bar { padding-top: 16px; padding-bottom: 16px; } }

.fyp-brand img { height: 42px; width: auto; display: block; }
@media (max-width: 900px) { .fyp-brand img { height: 32px; } }
/* The supplied mark is dark artwork on transparency, so it needs lifting on
   the dark ground rather than on the light one. */
.fyp-brand img { filter: brightness(1.06); }
:root[data-theme="dark"] .fyp-brand img { filter: none; }

.fyp-head .cta { background: var(--tone-orange); color: #241100; font-weight: 700;
                 padding: 10px 18px; border-radius: 999px; text-decoration: none; font-size: 14px; }

/* ---- shared bits ----------------------------------------------------------- */

.narrow { max-width: 820px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; }
.col-h { font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
         color: var(--faint); margin: 0 0 10px; }
.cols2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; margin-top: 26px; }
.bullets.muted li { color: var(--muted); }
.disclaimer { margin-top: 22px; padding: 14px 16px; border-radius: var(--r-md);
              background: rgba(var(--ink), .04); border: 1px solid var(--line2); }

/* ---- the four circles ------------------------------------------------------ */

.circles { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; margin-top: 26px; }
.circle { border: 1px solid var(--line2); border-radius: var(--r-lg); padding: 20px;
          background: var(--card); border-top: 3px solid var(--tc); }
.circle-name { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 17px;
               margin: 0 0 4px; color: var(--text); }
.circle-line { margin: 0 0 12px; font-size: 13px; color: var(--muted); }

/* ---- the five stages ------------------------------------------------------- */

.stages { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 2px; }
.stage { display: flex; gap: 18px; padding: 18px 0; border-top: 1px solid var(--line2); }
.stage-n { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 13px;
           color: var(--tone-blue-ink, var(--fyp-accent)); flex: 0 0 auto; padding-top: 3px; }
.stage h3 { margin: 0 0 5px; font-size: 18px; }
.stage p { margin: 0; color: var(--prose); font-size: 15px; line-height: 1.5; }

/* ---- the interest wall -----------------------------------------------------
   Forty-four of them, so this is a wrapping list rather than a grid of cards.
   Each is a details element: it works with no scripting, it is keyboard
   reachable, and a screen reader announces it as expandable. */

.wall { list-style: none; padding: 0; margin: 26px 0 0;
        display: flex; flex-wrap: wrap; gap: 9px; }
.wall-item { max-width: 100%; }
.wall-item summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center;
                     gap: 8px; padding: 9px 15px; border-radius: 999px; font-size: 14px;
                     font-weight: 600; color: var(--prose);
                     border: 1px solid var(--line2); background: rgba(var(--ink), .02);
                     transition: border-color .2s ease, color .2s ease; }
.wall-item summary::-webkit-details-marker { display: none; }
.wall-item summary::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--tc); }
@media (hover: hover) { .wall-item summary:hover { border-color: var(--tc); color: var(--text); } }
.wall-item[open] summary { border-color: var(--tc); color: var(--text); }
.wall-item[open] { width: 100%; }
.wall-who { margin: 14px 0 4px; font-size: 12.5px; letter-spacing: .04em;
            text-transform: uppercase; color: var(--faint); font-weight: 700; }
.wall-story { margin: 0 0 4px; max-width: var(--measure); color: var(--prose);
              font-size: 15.5px; line-height: 1.55; }

/* ---- the quiz -------------------------------------------------------------- */

.quizform { display: grid; gap: 30px; margin-top: 10px; }
.q { border: 0; padding: 0; margin: 0; }
.q legend { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 19px;
            line-height: 1.3; color: var(--text); margin-bottom: 14px; display: flex;
            gap: 11px; align-items: baseline; }
.q-n { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
       width: 25px; height: 25px; border-radius: 50%; font-size: 12px;
       background: rgba(var(--ink), .06); color: var(--muted); }
.q-opts { display: grid; gap: 9px; }
.q-opts label { position: relative; display: flex; align-items: center; cursor: pointer;
                padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--line2);
                background: rgba(var(--ink), .02); font-size: 15px; color: var(--prose);
                transition: border-color .2s ease, color .2s ease, background .2s ease; }
.q-opts input { position: absolute; inset: 0; width: 100%; height: 100%;
                opacity: 0; margin: 0; cursor: pointer; border-radius: var(--r-md); }
.q-opts input:focus-visible { outline: 2px solid var(--fyp-accent); outline-offset: 2px; }
@media (hover: hover) { .q-opts label:hover { border-color: rgba(var(--ink), .26); color: var(--text); } }
.q-opts label:has(input:checked) { border-color: var(--fyp-accent); color: var(--text);
                                   background: color-mix(in srgb, var(--fyp-accent) 10%, transparent); }
.formerr { padding: 13px 16px; border-radius: var(--r-md); margin-bottom: 20px;
           background: color-mix(in srgb, var(--tone-red) 12%, transparent);
           border: 1px solid color-mix(in srgb, var(--tone-red) 40%, transparent);
           color: var(--text); font-size: 15px; }

/* ---- the result ------------------------------------------------------------ */

.patterns { display: grid; gap: 14px; }
.pattern { border: 1px solid var(--line2); border-top: 3px solid var(--tc);
           border-radius: var(--r-lg); padding: 24px; background: var(--card); }
.pattern h2 { margin: 0 0 10px; font-size: clamp(24px, 3.4vw, 32px); }
.pattern-desc { margin: 0 0 16px; font-size: 16.5px; line-height: 1.55; color: var(--prose); }
.traits { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.traits li { font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px;
             color: var(--muted); border: 1px solid var(--line2); }
.experiment { padding: 16px 18px; border-radius: var(--r-md); background: rgba(var(--ink), .04); }
.exp-h { margin: 0 0 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .14em;
         text-transform: uppercase; color: var(--tc); }
.experiment p { margin: 0; color: var(--prose); font-size: 15.5px; line-height: 1.55; }

.bars { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 11px; }
.bars li { display: grid; grid-template-columns: 96px 1fr 22px; align-items: center; gap: 13px; }
.bar-name { font-size: 14px; color: var(--prose); }
/* count-bar, not bar. The shared header is <div class="wrap bar">, so a rule
   on .bar here was setting a 7px height and overflow:hidden on the site header
   of every page this stylesheet loads on. A generic class name in a stylesheet
   that loads after a shared one is a collision waiting to be found by somebody
   wondering why the header looks wrong. */
.count-bar { height: 7px; border-radius: 999px; background: rgba(var(--ink), .07); overflow: hidden; }
.count-bar span { display: block; height: 100%; border-radius: 999px; }
.bar-n { font-size: 13px; color: var(--muted); text-align: right; }

/* ---- programmes ------------------------------------------------------------ */

.progs { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px; margin-top: 26px; }
.prog { border: 1px solid var(--line2); border-radius: var(--r-lg); padding: 22px; background: var(--card); }
.prog-top { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-bottom: 12px; }
.prog-top h3 { margin: 0; font-size: 19px; }
.prog-price { margin: 0; font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 17px;
              color: var(--text); white-space: nowrap; }
.prog-price span { font-weight: 500; font-size: 13px; color: var(--muted); }
.prog-line { margin: 0 0 10px; color: var(--prose); font-size: 15px; line-height: 1.5; }
.prog-note { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }

.faq { padding: 20px 0; border-top: 1px solid var(--line2); }
.faq h3 { margin: 0 0 7px; font-size: 18px; }
.faq p { margin: 0; color: var(--prose); font-size: 15.5px; line-height: 1.55; max-width: var(--measure); }

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

.fyp-foot .foot-lede { font-size: 18px; margin: 0 0 6px; color: var(--text); }
.fyp-foot .foot-h { font-weight: 700; font-size: 12px; letter-spacing: .1em;
                    text-transform: uppercase; color: var(--faint); margin: 0 0 12px; }
/* :not(.btn) matters. Without it this rule also painted the green call to
   action in the footer, giving it grey text on a green ground that nobody
   could read. A blanket "every link in here is grey" is almost always wrong
   the moment one of those links is a button. */
.fyp-foot .cols a:not(.btn) { display: block; color: var(--muted); text-decoration: none;
                              font-size: 14.5px; padding: 4px 0; }
.fyp-foot .cols a:not(.btn):hover { color: var(--text); }
.fyp-foot .cols .btn { margin-top: 16px; }

/* ---- the quiz flow ---------------------------------------------------------
   One question at a time, inside the viewport, no page scroll.

   Everything here is behind .is-flow, which the script adds. A browser that
   never runs the script gets the plain five-question form instead of a
   half-assembled interface, which is the whole point of doing it this way
   round. */

.flow { max-width: 820px; margin: 0 auto; padding: 0 24px; }

.flow.is-flow { display: flex; flex-direction: column; max-height: calc(100dvh - 96px);
  /* dvh rather than vh: on a phone, vh is the tallest the viewport ever gets,
     so the last option sits underneath the browser chrome until you scroll,
     which is exactly what this layout exists to avoid. */
  min-height: calc(100dvh - 96px); }
@supports not (height: 100dvh) { .flow.is-flow { min-height: calc(100vh - 96px); } }

html.flow-open, html.flow-open body { overflow: hidden; }
.flow.is-flow { overflow-y: auto; }
.flow.is-flow .flow-intro { display: none; }
@media (max-width: 900px) {
  html.flow-open, html.flow-open body { overflow: auto; }
  .flow.is-flow { overflow: visible; }
}

.flow-top { padding: 26px 0 0; }
.flow-bar { height: 4px; border-radius: 999px; background: rgba(var(--ink), .08); overflow: hidden; }
.flow-bar span { display: block; height: 100%; border-radius: 999px; width: 0;
                 background: linear-gradient(90deg, var(--tone-red), var(--tone-orange),
                             var(--tone-yellow), var(--tone-green), var(--tone-blue));
                 transition: width .42s cubic-bezier(.22,.9,.24,1); }
.flow-count { margin: 10px 0 0; font-size: 12.5px; color: var(--faint);
              letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }

.flow-body { flex: 1; display: flex; flex-direction: column; justify-content: center;
             padding: 24px 0 40px; }
.flow.is-flow .quizform { gap: 0; margin: 0; }
.flow.is-flow .q legend { font-size: clamp(22px, 3.4vw, 34px); margin-bottom: 26px; }
.flow.is-flow .q-n { display: none; }
.flow.is-flow .q-opts { gap: 11px; }
.flow.is-flow .q-opts label { padding: 18px 20px; font-size: 16.5px; border-radius: var(--r-md); }

.flow.is-flow .q.slide-in { animation: flow-in .34s cubic-bezier(.22,.9,.24,1) both; }
@keyframes flow-in { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) {
  .flow.is-flow .q.slide-in { animation: none; }
  .flow-bar span { transition: none; }
}

/* The number beside each option, for keyboard use. Hidden where there is no
   keyboard to press, rather than shown as decoration. */
.q-opts kbd { margin-left: auto; font: 600 11px/1 ui-monospace, monospace; color: var(--faint);
              border: 1px solid var(--line2); border-radius: var(--r-xs); padding: 4px 7px; }
@media (hover: none) { .q-opts kbd { display: none; } }

.flow-actions { display: flex; align-items: center; gap: 12px; margin-top: 30px; }
/* .btn.ghost is the quiet button, defined in tl-components.css. */

/* The free step, and the statement it hands over. The statement is the whole
   point of the free tier, so it is given the weight of a pull quote rather
   than being tucked under the pattern cards. */
.prog-free { border-color: color-mix(in srgb, var(--tone-green) 45%, var(--line2)); }

.statement { padding: 30px; border-radius: var(--r-xl); border: 1px solid var(--line2);
             background: linear-gradient(160deg,
               color-mix(in srgb, var(--tone-green) 9%, transparent) 0%,
               transparent 62%); }
.statement-h { margin: 0 0 16px; font-size: 11.5px; font-weight: 800; letter-spacing: .14em;
               text-transform: uppercase; color: var(--faint); }
.statement-text { margin: 0; padding: 0; border: 0; font-family: 'Outfit', sans-serif;
                  font-weight: 600; font-size: clamp(19px, 2.6vw, 25px); line-height: 1.4;
                  letter-spacing: -.01em; color: var(--text); }
.statement-meta { margin: 18px 0 0; font-size: 13px; color: var(--muted); }

/* ---- the full profile ------------------------------------------------------ */

.profileform { display: grid; gap: 34px; }
.circle-set { border: 1px solid var(--line2); border-top: 3px solid var(--tc);
              border-radius: var(--r-lg); padding: 24px; margin: 0; background: var(--card); }
.circle-set legend { padding: 0 10px; }
.circle-set .circle-name { display: block; font-family: 'Outfit', sans-serif; font-weight: 700;
                           font-size: 18px; color: var(--text); margin: 0; }
.circle-set .circle-line { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.ask { display: block; margin-top: 20px; }
.ask-q { display: block; font-size: 15.5px; color: var(--prose); margin-bottom: 8px; }
.ask-note { display: block; font-size: 12.5px; color: var(--tc); margin-bottom: 8px; font-weight: 600; }
.ask textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--line2);
                border-radius: var(--r-md); background: rgba(var(--ink), .02); padding: 13px 15px;
                font: 400 15.5px/1.5 'Inter', system-ui, sans-serif; color: var(--text); resize: vertical; }
.ask textarea:focus-visible { outline: 2px solid var(--tc); outline-offset: 1px; }
/* A box that opened with something already in it is marked, so nobody wonders
   where the words came from. */
.ask.seeded textarea { border-color: color-mix(in srgb, var(--tc) 40%, var(--line2));
                       background: color-mix(in srgb, var(--tc) 5%, transparent); }
.circle-answer { margin: 0 0 10px; color: var(--prose); font-size: 15.5px; line-height: 1.55; }
.circle.empty { opacity: .72; border-top-style: dashed; }
.carry-form { margin: 0; }

/* ---- referring ------------------------------------------------------------- */

.row3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }

.members { display: grid; gap: 12px; }
.member { border: 1px solid var(--line2); border-radius: var(--r-md); padding: 16px 18px; margin: 0; }
.member legend { padding: 0 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .08em;
                 text-transform: uppercase; color: var(--faint); }
.referform .check { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px;
                    color: var(--prose); }
.referform .check input { width: auto; margin: 3px 0 0; flex: 0 0 auto; }
.formok { padding: 14px 17px; border-radius: var(--r-md); font-size: 15.5px; color: var(--text);
          background: color-mix(in srgb, var(--tone-green) 12%, transparent);
          border: 1px solid color-mix(in srgb, var(--tone-green) 40%, transparent); }

/* ---------------------------------------------------------------- checkout
   The sheet is the one place orange is allowed to dominate, because the whole
   screen has exactly one thing to do. */
.buy { margin: 18px 0 0; }
.prog-buy { width: 100%; text-align: center; }
.prog-free .prog-buy { background: transparent; color: var(--ink); border: 1px solid var(--line); }

.sheet[hidden] { display: none !important; }
.sheet { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; }
.sheet-scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(6px); }
.sheet-card {
  position: relative; width: min(440px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 30px 28px 26px; box-shadow: 0 24px 60px rgba(0,0,0,.28);
  animation: sheet-in .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes sheet-in { from { opacity: 0; transform: translateY(14px) scale(.985); } }
@media (prefers-reduced-motion: reduce) { .sheet-card { animation: none; } }
html.sheet-open { overflow: hidden; }

.sheet-x {
  position: absolute; top: 12px; right: 12px; width: 34px; height: 34px;
  background: none; border: 0; border-radius: var(--r-sm); cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--faint);
}
.sheet-x:hover { background: var(--line); color: var(--ink); }
.sheet-eyebrow { margin: 0 0 6px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.sheet-card h2 { margin: 0 0 4px; font-size: 22px; }
.sheet-price { margin: 0; font-size: 32px; font-weight: 600; letter-spacing: -.02em; }
.sheet-price .sheet-unit { font-size: 15px; font-weight: 400; color: var(--muted); }
.sheet-tax { margin: 4px 0 20px; font-size: 13px; color: var(--faint); }

.sheet-form .field { display: block; margin: 0 0 14px; }
.sheet-form .field > span { display: block; margin: 0 0 5px; font-size: 13.5px; font-weight: 500; }

.sheet-form .field small { display: block; margin: 5px 0 0; font-size: 12.5px; color: var(--faint); }
.agree { display: flex; gap: 9px; align-items: flex-start; margin: 0 0 18px; font-size: 13px; color: var(--muted); }
.agree input { margin-top: 2px; flex: none; }
.sheet-fine { margin: 10px 0 0; font-size: 12.5px; color: var(--faint); }
.sheet-warn { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--r-sm); font-size: 13px;
  background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--ink); }
.sheet-form.standalone { max-width: 420px; }
.pay-price { font-size: 34px; font-weight: 600; letter-spacing: -.02em; margin: 6px 0 0; }
.pay-price span { font-size: 15px; font-weight: 400; color: var(--muted); }
.warn { padding: 12px 14px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--accent) 14%, transparent); }

/* ---------------------------------------------------------------- calendar */
.calendly { min-height: 660px; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.calendly-failed { min-height: 0; padding: 20px; }

/* ---------------------------------------------------------------- ninety days */
.arcs { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.arc { padding: 22px 22px 20px; border: 1px solid var(--line); border-radius: var(--r-md); position: relative; overflow: hidden; }
.arc::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: currentColor; opacity: .55; }
.arc-days { margin: 0 0 8px; font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.arc h3 { margin: 0 0 8px; font-size: 18px; }
.arc-premise { margin: 0 0 12px; color: var(--muted); font-size: 14.5px; }
.arc-closes { margin: 0; font-size: 13.5px; color: var(--faint); }

.samples { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sample { padding: 16px 18px; border-left: 2px solid var(--line); }
.sample-day { margin: 0; font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.sample-name { margin: 3px 0 5px; font-weight: 600; }
.sample-name span { font-weight: 400; color: var(--faint); font-size: 13px; }
.sample-task { margin: 0; color: var(--muted); font-size: 14.5px; }

.day-head h1 { margin: 4px 0 6px; }
.day-min { margin: 0; color: var(--faint); font-size: 14px; }
.day-task { font-size: 19px; line-height: 1.55; margin: 0 0 16px; }
.day-why { margin: 0 0 14px; padding-left: 16px; border-left: 2px solid var(--line); color: var(--muted); }
.day-lens { margin: 0 0 14px; color: var(--muted); font-size: 14.5px; }
.day-call { margin: 0 0 18px; padding: 12px 14px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.day-form { margin: 24px 0 16px; }

.day-skip { font-size: 13.5px; color: var(--faint); margin: 0 0 20px; }
.day-links { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.day-links form { margin: 0; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: inherit;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.linkish:hover { color: var(--ink); }

.rec-arcs { display: flex; gap: 10px; flex-wrap: wrap; }
.rec-arc { flex: 1 1 130px; padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid var(--line); }
.rec-arc-name { margin: 0; font-size: 13px; font-weight: 600; }
.rec-arc-count { margin: 2px 0 0; font-size: 12.5px; color: var(--faint); }
.rec-days { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.rec-day { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.rec-day:not(.has) { opacity: .5; }
.rec-n { margin: 0; font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.rec-task { margin: 3px 0 7px; font-weight: 600; font-size: 14.5px; }
.rec-text { margin: 0; font-size: 14px; color: var(--muted); white-space: pre-wrap; }
.rec-blank { margin: 0; font-size: 13px; color: var(--faint); font-style: italic; }

@media print {
  .fyp-head, .fyp-foot, .cta-row, .rec-arcs { display: none; }
  .rec-days { grid-template-columns: 1fr 1fr; }
  .rec-day { break-inside: avoid; border-color: #ccc; }
  .rec-day:not(.has) { display: none; }
}

/* ---------------------------------------------------------------- great minds
   The tabs are links. They look like tabs because that is the right affordance
   for switching between six views of the same thing, and they are links because
   each view is a real page. */
.mind-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.mind-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border-radius: 999px; border: 1px solid var(--line);
  font-size: 14px; font-weight: 500; color: var(--muted); text-decoration: none;
  transition: color .15s, border-color .15s, background .15s;
}
.mind-tab:hover { color: var(--ink); border-color: color-mix(in srgb, var(--tc) 45%, var(--line)); }
.mind-tab.on {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--tc) 55%, transparent);
  background: color-mix(in srgb, var(--tc) 10%, transparent);
}
.mind-tab-n { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.mind-tab.on .mind-tab-n { color: color-mix(in srgb, var(--tc) 70%, var(--ink)); }
.mind-lead { max-width: 62ch; color: var(--muted); margin: 0 0 24px; }

.minds { list-style: none; margin: 0; padding: 0;
  display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.mind { position: relative; }
.mind-btn {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--card); font: inherit; color: var(--ink);
  transition: border-color .15s, transform .15s;
}
.mind-btn:hover, .mind-btn:focus-visible {
  border-color: color-mix(in srgb, var(--tc) 50%, var(--line));
  transform: translateY(-1px);
}
.mind-btn:focus-visible { outline: 2px solid var(--tc); outline-offset: 2px; }
.mind-name { display: block; font-weight: 600; font-size: 15.5px; }
.mind-years { display: block; margin-top: 2px; font-size: 12.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.mind-what { display: block; margin-top: 5px; font-size: 13.5px; color: var(--muted); }

/* The highlights. Hover and keyboard focus reveal them by the same rule, so a
   keyboard user is never shown less than a mouse user. */
.mind-hi {
  display: block; overflow: hidden;
  max-height: 0; opacity: 0;
  transition: max-height .22s ease, opacity .18s ease, margin-top .22s ease;
}
.mind-btn:hover .mind-hi, .mind-btn:focus-visible .mind-hi { max-height: 280px; opacity: 1; margin-top: 12px; }
.mind-hi-label {
  display: block; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: color-mix(in srgb, var(--tc) 70%, var(--muted)); margin-bottom: 6px;
}
.mind-hi ul { margin: 0; padding-left: 15px; }
.mind-hi li { font-size: 12.5px; line-height: 1.5; color: var(--muted); margin-bottom: 3px; }

@media (prefers-reduced-motion: reduce) {
  .mind-hi { transition: none; }
  .mind-btn:hover, .mind-btn:focus-visible { transform: none; }
}

/* With no script this stays in the flow, open, and reads perfectly well. Script
   hides it and moves the contents into the dialog. */
.mind-full { padding: 14px 18px 4px; }
.mind-full-name { margin: 0; font-weight: 600; font-size: 19px; }
.mind-full-years { margin: 3px 0 14px; font-size: 13px; color: var(--faint); }
.mind-full-hi { margin: 0 0 16px; padding-left: 17px; }
.mind-full-hi li { font-size: 14px; line-height: 1.6; color: var(--muted); margin-bottom: 5px; }
.mind-full-why { margin: 0; font-size: 15px; line-height: 1.65; }
.mind-also { margin: 14px 0 0; font-size: 12.5px; color: var(--faint); }
.mind-sheet .sheet-card { width: min(520px, 100%); }
.mind-sheet .sheet-card:focus { outline: none; }

/* ---------------------------------------------------------------- mission */
.mv { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin: 0 0 8px; }
.mv-card { padding: 26px 26px 24px; border: 1px solid var(--line); border-radius: var(--r-md); position: relative; overflow: hidden; }
.mv-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: currentColor; opacity: .5; }
.mv-label { margin: 0 0 12px; font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); }
.mv-big { margin: 0 0 14px; font-size: 20px; line-height: 1.42; font-weight: 500; letter-spacing: -.01em; }
.mv-note { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.commit { list-style: none; margin: 0; padding: 0; }
.commit li { padding: 16px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.6; color: var(--muted); }
.commit li strong { color: var(--ink); font-weight: 600; }