/* Self-hosted latin subsets: no third-party request, and the site keeps working
   if a font CDN is blocked or slow from Malaysia. Carried from the live site.
   T-mkt-42 (Alan, 18 Oct): two weights per family - Plex Sans 400 and 600 (and
   its 400 italic, for quotations), Poppins 600, and Poppins 700 for price figures
   only. Each face used is loaded, so nothing is synthesised (tools/test_type_scale.py). */
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;
  src:url(/poppins-600.woff2) format('woff2')}
@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;
  src:url(/poppins-700.woff2) format('woff2')}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url(/plexsans-400.woff2) format('woff2')}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;
  src:url(/plexsans-600.woff2) format('woff2')}
@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:400;font-display:swap;
  src:url(/plexsans-400i.woff2) format('woff2')}

/* Palette is the brand guide's, exactly, and matches the concepts.
   Display face is Poppins 600 - the guide's, not the concept's Arial Black. */
:root{
  --ground:#0B0B0A; --paper:#F5F2EA; --gold:#C9A227; --panel:#17150F;
  --rule:#2A2721; --muted:#9A948A; --ink:#1A1815; --paper-rule:#DCD7CB;
  --gold-paper:#8A6A12; --body-paper:#4A463F; --sub:#CBC6BA;
  --display:Poppins,"Century Gothic",sans-serif;
  --body:"IBM Plex Sans","Segoe UI",Arial,sans-serif;
  --mono:"IBM Plex Mono",Consolas,monospace;
  --measure:34rem;
}
*{box-sizing:border-box}
.nowrap{white-space:nowrap}
html{scroll-behavior:smooth}
html{scrollbar-gutter:stable}
body{margin:0;background:var(--ground);color:var(--paper);font-family:var(--body);line-height:1.55}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
.wrap{width:min(1180px,calc(100% - 40px));margin:auto}
.eyebrow{color:var(--gold);font-family:var(--mono);letter-spacing:.13em;
  text-transform:uppercase;display:block}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:600;letter-spacing:-.03em;line-height:1.05}
h1{max-width:20ch}
h1 em{color:var(--gold);font-style:normal}
h2{}
.lead{margin:0;max-width:62ch}

/* masthead */
.masthead{border-bottom:1px solid var(--rule)}
/* On a wide screen the whole header stays on screen, so "Talk to Alan" is one
   click away wherever the reader is. Anchors land below it, not under it. */
.pinned-head{position:sticky;top:0;z-index:50;background:var(--ground)}
[id]{scroll-margin-top:96px}
.nav{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px;
  flex-wrap:wrap}
.brand{font-family:var(--display);font-weight:600;letter-spacing:-.01em}
.brand span{color:var(--gold)}
.nav-links{display:flex;gap:22px;color:var(--muted);flex-wrap:wrap}
.nav-links a:hover{color:var(--paper)}
.nav-links a[aria-current]{color:var(--paper)}
.button{display:inline-block;border:1px solid var(--gold);padding:12px 17px;color:var(--paper);
  font-weight:600;transition:.2s;font-family:var(--body)}
.button:hover{background:var(--gold);color:var(--ground)}
.button.solid{background:var(--gold);color:var(--ground)}
.button.solid:hover{background:var(--paper);border-color:var(--paper)}

/* hero */
.hero{padding:82px 0 0}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:end}
.hero-copy{margin:28px 0 33px;max-width:56ch;color:var(--sub)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.hero-note{margin-top:48px;padding:15px 0;border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);color:var(--muted);}
.hero-image{min-height:520px;position:relative;background:
  linear-gradient(0deg,rgba(11,11,10,.55),rgba(11,11,10,.05)),
  url("/alan-presenting.jpg") center/cover}
.image-caption{position:absolute;left:20px;bottom:17px;font-family:var(--mono);color:var(--paper);
  letter-spacing:.08em;text-transform:uppercase}

/* sections */
.section{padding:110px 0;border-top:1px solid var(--rule)}
.section.paper{background:var(--paper);color:var(--ink);border:0}
.section.paper .eyebrow{color:var(--gold-paper)}
.section.paper a{color:var(--gold-paper)}
.section-heading{display:grid;grid-template-columns:.78fr 1.22fr;gap:52px;align-items:start;
  margin-bottom:54px}

/* method rows */
/* ---- the brochure arc (T68) --------------------------------------------
   Beat 3: three lines in the READER's voice, ending in question marks. Not a
   sentence a vendor writes about itself - one a buyer has already said in their
   own head. Italic and quiet on purpose: it is overheard, not announced. */
.pains{margin:26px 0 0;padding:0;list-style:none;border-left:2px solid var(--gold);
  padding-left:20px;display:grid;gap:8px}
.pains li{font-style:italic;color:var(--sub);line-height:1.5}
/* Beat 4: one bold line that answers all three. It carries the whole hero, so
   it is set larger than the copy above it and is the only non-italic thing in
   the block. */
.reframe{margin:22px 0 0;font-weight:600;letter-spacing:-.01em;
  color:var(--paper);max-width:34ch}

/* Beat 6: the gold panel. The strongest thing in the corpus and the most
   locally true - the site had no stakes at all before it. Serif italic because
   the brochures set it that way and the voice is the asset. */
.gold{background:var(--panel);border-top:1px solid var(--gold);border-bottom:1px solid var(--gold)}
.gold .wrap{padding-top:56px;padding-bottom:56px;display:grid;
  grid-template-columns:1.25fr 1fr;gap:48px;align-items:center}
.gold blockquote{margin:0;font-family:var(--body);font-style:italic;
  line-height:1.45;color:var(--paper)}
.gold blockquote span{display:block}
.gold .pattern h3{font-family:var(--mono);letter-spacing:.13em;
  color:var(--gold);margin:0 0 12px;text-transform:uppercase}
.gold .pattern p{margin:0;color:var(--sub);}
@media(max-width:820px){.gold .wrap{grid-template-columns:1fr;gap:26px}}

/* Beat 5: Alan, with the builder claim. Sits between the hero and the panel so
   the person is established before the stakes are raised. */
.alan{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:start}
.alan .claim{font-weight:600;letter-spacing:-.02em;margin:0 0 10px}
.alan p{margin:0 0 10px;color:var(--muted);max-width:62ch}
.alan .cred{font-family:var(--mono);letter-spacing:.1em;
  color:var(--gold);text-transform:uppercase}
@media(max-width:700px){.alan{grid-template-columns:1fr;gap:14px}}

/* Beat 8/9 on the homepage: the three doors, keyed on the BUYER'S STATE rather
   than on format and price. A reader should recognise themselves, not compare
   three numbers - the old table made them do the sorting, and most will not. */
.door-state{font-family:var(--body);font-style:italic;
  color:var(--gold);margin:0 0 14px;line-height:1.4}
.programme .facts{color:var(--muted);margin:0 0 18px;
  font-family:var(--mono);letter-spacing:.02em;line-height:1.7}
.methods{border-top:1px solid var(--paper-rule)}
.method{display:grid;grid-template-columns:90px 1fr 1.2fr;gap:24px;padding:24px 0;
  border-bottom:1px solid var(--paper-rule);align-items:baseline}
.method-number{color:var(--gold-paper);font-family:var(--mono);}
.method h3{letter-spacing:-.02em}
.method p{margin:0;color:var(--body-paper)}

/* proof grid */
.proof{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);
  border:1px solid var(--rule)}
.proof-item{background:var(--ground);padding:36px;min-height:205px}
.proof-item h3{margin:14px 0}
.proof-item p{color:var(--muted);margin:0}

/* programme cards */
.programmes{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule)}
.programme{padding:28px 28px 36px 0;margin-right:28px;border-bottom:1px solid var(--rule);
  display:flex;flex-direction:column}
.programme + .programme{border-left:1px solid var(--rule);padding-left:28px}
.programme h3{margin:16px 0 14px}
.programme p{color:var(--muted);flex:1}
.programme .price{font-family:var(--mono);letter-spacing:.06em;
  text-transform:uppercase;color:var(--gold);margin:0 0 18px;flex:none}
.programme .button{align-self:flex-start}

/* chooser layout - /training/ (2026-09-19). A page whose job is choosing between
   three rooms rendered as one 65ch reading column, leaving two-thirds of a 1180px
   frame empty. The choices now sit SIDE BY SIDE, which is the comparison the page
   asks the reader to make. Same bordered-column language as the home page's
   programme cards, so the two pages read as one site. Copy is untouched: the
   markdown is marketing's, and this only rearranges what it already says. */
.chooser-intro{max-width:var(--measure)}
.rooms{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule);
  margin:44px 0 12px}
.levels{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--rule);
  margin:34px 0 12px}
.room{padding:30px 30px 34px 0;margin-right:30px;display:flex;flex-direction:column}
.room + .room{border-left:1px solid var(--rule);padding-left:30px}
.room:last-child{margin-right:0}
.article-body .room h2{line-height:1.2;margin:0 0 18px;max-width:none}
.article-body .room p{margin:0 0 14px}
.article-body .room strong a{}
.article-body .room p.meta{margin-top:auto;padding-top:18px;border-top:1px solid var(--rule);
  font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--gold);line-height:1.6}
.article-body .room p.meta em{font-style:normal}
.chooser-rule{border:0;border-top:1px solid var(--rule);margin:56px 0 0}
@media (max-width:900px){
  .rooms,.levels{grid-template-columns:1fr}
  .room{margin-right:0;padding:26px 0}
  .room + .room{border-left:0;border-top:1px solid var(--rule);padding-left:0}
}

/* side panel - every article page and note (2026-09-19, "apply site wide").
   The reading column stays at --measure, because prose wider than ~65ch reads
   worse, not better - the empty right side was never a reason to widen the
   text. It is filled with something that EARNS the space instead: the page's
   own "The details" card (date, time, price above the fold, the thing an event
   page is visited for), its call to action, or an "On this page" list built from
   its own headings. Nothing is written for the panel; it only moves or indexes
   copy that already exists. Aligned to the right edge of the frame, the same
   line as the header's "Talk to Alan". */
.with-aside{display:grid;grid-template-columns:minmax(0,var(--measure)) 320px;
  justify-content:space-between;gap:64px;align-items:start}
.with-aside .article-body{max-width:none}
.with-aside .article-body p:has(>img:only-child){width:auto;max-width:100%;margin-left:0}
.aside{position:sticky;top:109px;margin-top:2em}
.aside-card{border:1px solid var(--rule);border-top:2px solid var(--gold);background:var(--panel);
  padding:24px 26px 26px}
.aside-card h2,.aside .toc-head{font-family:var(--mono);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 16px}
.aside-card p{margin:0 0 12px;color:var(--sub);line-height:1.55}
.aside-card p:last-child{margin-bottom:0}
.aside-card strong{color:var(--paper)}
.aside-card a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--rule)}
.toc li{margin:0}
.toc a{display:block;padding:7px 0 7px 16px;margin-left:-1px;border-left:1px solid transparent;
  color:var(--muted);text-decoration:none;line-height:1.4}
.toc a:hover{color:var(--paper);border-left-color:var(--gold)}
@media (max-width:1000px){
  .with-aside{grid-template-columns:1fr;gap:0}
  .aside{position:static;margin-top:36px}
  /* An index of the page you are already scrolling through is noise on a phone;
     a details card is not, so only the index goes. */
  .aside.toc{display:none}
}

/* answers */
.answer{display:grid;grid-template-columns:1fr 1fr;gap:34px;border-top:1px solid var(--paper-rule);
  padding-top:30px;margin-top:30px}
.answer h3{}
.answer p{margin:0;color:var(--body-paper)}

/* notes */
.insights{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.insight{border-top:1px solid var(--rule);padding-top:18px}
.insight time{font-family:var(--mono);letter-spacing:.09em;color:var(--gold);text-transform:uppercase}
.insight h3{margin:13px 0}
.insight p{color:var(--muted);margin:0}

/* closing cta */
.cta{background:var(--gold);color:var(--ground);padding:82px 0}
.cta-grid{display:flex;justify-content:space-between;gap:35px;align-items:end}
.cta h2{max-width:20ch}
.cta .eyebrow{color:#3E3100}
.cta .button{border-color:var(--ground);color:var(--ground);white-space:nowrap}
.cta .button:hover{background:var(--ground);color:var(--paper)}
.cta-actions{display:flex;flex-direction:column;align-items:flex-end;gap:10px;max-width:36ch;text-align:right}
.cta-wa{margin:0;line-height:1.5}
.cta-wa a{display:inline-block;padding:11px 0;font-weight:600;text-decoration:underline;text-underline-offset:3px}

footer{padding:44px 0;color:var(--muted);}
.footer-grid{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer a:hover{color:var(--paper)}

/* article pages - a reading measure inside the wide shell, because prose is not
   a marketing grid. Photographs and tables still escape it. */
.article{padding:72px 0 96px}
.article-head{max-width:24ch}
.article-body{max-width:var(--measure);}
.article-body h2{margin:2em 0 .6em;letter-spacing:-.02em}
.article-body h3{margin:1.8em 0 .5em}
.article-body p,.article-body li{color:var(--sub)}
.article-body a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.article-body table{width:100%;border-collapse:collapse;margin:1.4em 0;}
.article-body th,.article-body td{text-align:left;padding:10px 12px;
  border-bottom:1px solid var(--rule);vertical-align:top}
.article-body th{font-family:var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.article-body blockquote{margin:1.4em 0;padding-left:20px;border-left:2px solid var(--gold);
  color:var(--paper)}
.article-body code{font-family:var(--mono);}
.article-body p:has(>img:only-child){width:min(1180px,calc(100vw - 40px));max-width:none;
  position:relative;left:50%;transform:translateX(-50%)}
.article-body p:has(>img:only-child) img{width:100%;display:block}
.article-meta{font-family:var(--mono);letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin-top:18px}
.note-card{margin:26px 0 30px;max-width:var(--measure)}
.note-card img{display:block;width:100%;height:auto;border:1px solid var(--rule);border-radius:10px}
.short-answer{border-top:1px solid var(--gold);border-bottom:1px solid var(--rule);
  padding:22px 0;margin:30px 0 40px;max-width:var(--measure)}
.short-answer .eyebrow{margin-bottom:10px}
.short-answer p{margin:0;color:var(--paper);}

@media (max-width:900px){
  .hero-grid,.section-heading,.answer{grid-template-columns:1fr;gap:28px}
  .proof,.programmes,.insights{grid-template-columns:1fr}
  .programme + .programme{border-left:0;padding-left:0}
  .programme{margin-right:0;padding-right:0}
}
@media (max-width:760px){
  /* The concept hid the nav entirely below 760px with nothing in its place, which
     leaves a phone with no way to reach any other page. It wraps instead. */
  .nav{min-height:0;padding:14px 0;gap:12px}
  .nav-links{gap:14px;width:100%;order:3}
  .pinned-head{position:static}
  .pinned-head.pinned .nav{position:fixed;top:0;left:0;right:0;z-index:50;width:auto;margin:0;
    padding:8px 20px;background:var(--ground);border-bottom:1px solid var(--rule)}
  .pinned-head.pinned .nav-links{display:none}
  [id]{scroll-margin-top:80px}
  .hero{padding-top:54px}
  .hero-image{min-height:340px}
  .section{padding:72px 0}
  .method{grid-template-columns:52px 1fr;gap:12px}
  .method p{grid-column:2}
  .cta-grid{display:block}
  .cta .button{margin-top:28px}
  .cta-actions{align-items:flex-start;text-align:left;max-width:none}
  .article{padding:52px 0 72px}
  /* A table wider than the screen scrolls inside itself rather than scrolling
     the whole page sideways. The previous site had this; it did not survive the
     port because the stylesheet was replaced wholesale, and /hrdc-claims/ and
     /training/ both carry tables. */
  .article-body table{display:block;overflow-x:auto;max-width:100%}
}


/* Private mood trial. Production source is unchanged. */
body.mood{background:#FFFFFF;color:#15140F;--muted:#4D4A44;--rule:#E6E4DF;--sub:#4D4A44;--panel:#F6F6F4;--gold:#15140F}
.mood .wrap{width:min(1200px,calc(100% - 80px))}
.mood h1,.mood h2,.mood h3{line-height:1.14;letter-spacing:-.04em}
.mood h2{}
.mood .eyebrow{letter-spacing:.14em;margin-bottom:20px;color:#15140F}
.mood .masthead{background:#0B0B0A;border-bottom:1px solid #3A3833;color:#F5F2EA}
.mood .nav{min-height:82px;gap:28px}.mood .brand{}.mood .brand span{color:#C9A227}
.mood .nav-links{gap:26px;color:#CFC9BD;}.mood .nav-links a{padding:12px 0}
.mood .masthead .button{border-color:#6E6A62;color:#F5F2EA;padding:11px 19px}.mood .masthead .button:hover{background:#C9A227;color:#0B0B0A}
.mood .button{border:1px solid #15140F;color:#15140F;padding:14px 21px;min-height:48px;text-align:center;line-height:1.3}
.mood .button.solid{background:#15140F;color:#fff}.mood .button:hover,.mood .button.solid:hover{background:#000000;border-color:#15140F;color:#fff}
.mood a:focus-visible,.mood button:focus-visible{outline:3px solid #0B0B0A;outline-offset:4px}
.mood .text-link{display:inline-flex;align-items:center;gap:12px;border-bottom:1px solid #E6E4DF;padding:7px 0;color:#4D4A44;font-weight:600}
.mood .welcome{padding-top:72px}.mood .welcome-grid{display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:62px}
.mood .welcome h1{max-width:13ch;line-height:1.1;letter-spacing:-.052em}
.mood .welcome h1 em{color:#15140F}.mood .welcome .eyebrow{margin-bottom:23px}
.mood .welcome-lead{line-height:1.6;color:#15140F;max-width:40ch;margin:28px 0 11px}
.mood .welcome-answer{line-height:1.65;color:#4D4A44;max-width:44ch;margin:0}
.mood .welcome-actions{display:flex;flex-wrap:wrap;gap:15px 24px;align-items:center;margin-top:28px}
.mood .welcome-actions .button span{margin-left:16px}.mood .audience{color:#4D4A44;margin:26px 0 0}
.mood figure{margin:0}.mood .welcome-photo{align-self:center}.mood .welcome-photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain}
.mood figcaption{color:#4D4A44;line-height:1.5;padding-top:12px}.mood .welcome-photo figcaption{display:flex;justify-content:space-between;gap:15px}
.mood .welcome-photo figcaption span:first-child{font-weight:600;color:#4D4A44}
.mood .trust-line{margin-top:62px;padding:22px 0 26px;border-top:1px solid #E6E4DF;display:flex;justify-content:space-between;gap:16px;color:#4D4A44}
.mood .trust-separator{display:inline-block;margin:0 12px;color:#15140F}
.mood .section{padding:90px 0;border-top:1px solid #E6E4DF;background:#FFFFFF}
.mood .section.paper,.mood .experience{background:#F6F6F4;color:#15140F}
.mood .section-heading{grid-template-columns:1fr 1fr;gap:80px;align-items:end;margin-bottom:43px}.mood .section-heading .eyebrow{margin-bottom:15px}
.mood .lead{color:#4D4A44;line-height:1.7;max-width:44ch}
.mood .experience-grid{display:grid;grid-template-columns:1fr 1fr;gap:74px;align-items:start}.mood .experience-photo img{width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;display:block}
.mood .learning-step{display:grid;grid-template-columns:35px 1fr;gap:18px;padding:22px 0;border-top:1px solid #E6E4DF}.mood .learning-step:first-child{padding-top:0;border-top:0}
.mood .learning-step .eyebrow{margin-bottom:8px;}.mood .learning-step h3{letter-spacing:-.025em}.mood .learning-step p{color:#4D4A44;margin:12px 0 0;line-height:1.65}
.mood .step-number{font-family:var(--body);color:#15140F;padding-top:3px}
.mood .practice-strip{margin-top:55px;padding-top:38px;border-top:1px solid #E6E4DF;display:grid;grid-template-columns:240px 1fr;gap:40px;align-items:center}
.mood .practice-strip img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain}.mood .practice-strip .eyebrow{margin:0 0 12px}
.mood .practice-strip p{font-family:var(--display);font-weight:600;line-height:1.25;letter-spacing:-.035em;margin:0 0 15px}.mood .practice-caption{color:#4D4A44}
.mood .programmes{border-color:#E6E4DF}.mood .programme{padding-top:26px;border-color:#E6E4DF}.mood .programme + .programme{border-color:#E6E4DF}
.mood .programme .eyebrow{margin-bottom:14px}.mood .programme .door-state{color:#15140F;flex:none;margin:0 0 10px;min-height:2.8em}
.mood .programme h3{letter-spacing:-.035em;margin:8px 0 14px}.mood .programme p{color:#4D4A44;line-height:1.7}
.mood .programme .facts{color:#4D4A44;line-height:1.85;padding-top:12px}.mood .programme .button{}
.mood .alan-band{background:#0B0B0A;color:#F5F2EA;border:0}.mood .alan-intro{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.mood .alan-band .eyebrow{color:#C9A227}.mood .alan-band h2{}.mood .alan-band p{color:#CFC9BD;line-height:1.75;margin-top:0}.mood .alan-band .text-link{color:#C9A227;border-color:#6E6A62}
.mood .method{grid-template-columns:70px 1fr 1.5fr;padding:27px 0}.mood .method p{line-height:1.6}.mood .method h3{}
.mood .reframe{line-height:1.65}.mood .answer{grid-template-columns:.9fr 1.1fr;gap:80px;padding-top:28px;margin-top:28px}.mood .answer h3{line-height:1.5;letter-spacing:-.02em}.mood .answer p{line-height:1.7;color:#4D4A44}
.mood .section.paper a{color:#15140F;text-decoration:underline;text-underline-offset:3px}
.mood .insights{border-color:#E6E4DF}.mood .insight{border-color:#E6E4DF}.mood .insight time{color:#4D4A44;}.mood .insight h3{line-height:1.35}.mood .insight p{color:#4D4A44;line-height:1.65}.mood .insight:hover h3{color:#15140F}
.mood .cta{background:#0B0B0A;color:#15140F;padding:75px 0;border-top:1px solid #E6E4DF}.mood .cta .eyebrow{color:#15140F}.mood .cta h2{line-height:1.16}.mood .cta .button.solid{background:#15140F;border-color:#15140F;color:#fff}
.mood footer{background:#0B0B0A;color:#CFC9BD;padding:46px 0;line-height:1.75}.mood .footer-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:24px 70px}.mood .footer-grid>div:last-child{grid-column:1/-1;padding-top:22px;border-top:1px solid #3A3833;color:#CFC9BD}.mood footer a:hover{color:#C9A227}
.mood .article{padding:68px 0 100px}.mood .article>.wrap{max-width:1080px}.mood .article .eyebrow{margin-bottom:20px}.mood .article-head{max-width:19ch;line-height:1.13;letter-spacing:-.045em}
.mood .article-meta{color:#4D4A44;letter-spacing:.055em;line-height:1.7;margin-top:24px}
.mood .note-card{max-width:600px;margin:36px 0 35px}.mood .note-card img{border-radius:0;border-color:#E6E4DF;width:100%;height:auto}
.mood .short-answer{max-width:600px;border-top:2px solid #0B0B0A;border-bottom:1px solid #E6E4DF;padding:25px 0;margin:30px 0 38px}.mood .short-answer .eyebrow{margin-bottom:12px}
.mood .short-answer p{color:#4D4A44;line-height:1.75}.mood .with-aside{grid-template-columns:minmax(0,600px) 260px;gap:75px}
.mood .article-body{line-height:1.8}.mood .article-body p,.mood .article-body li{color:#4D4A44}.mood .article-body p{margin:0 0 1.3em}.mood .article-body strong{color:#15140F;font-weight:600}.mood .article-body h2{line-height:1.3;letter-spacing:-.03em;margin:2.1em 0 .7em;color:#15140F}.mood .article-body a{color:#15140F}
.mood .aside{margin-top:0}.mood .toc-head{color:#15140F}.mood .toc ol{border-color:#E6E4DF}.mood .toc a{color:#4D4A44;line-height:1.5;padding:10px 0 10px 17px;}.mood .toc a:hover{color:#15140F;border-color:#0B0B0A}
@media(min-width:1500px){.mood .welcome-grid{gap:76px}.mood .welcome{padding-top:90px}}
@media(max-width:1100px){.mood .wrap{width:calc(100% - 56px)}.mood .welcome-grid{gap:34px;grid-template-columns:1fr 1.1fr}.mood .welcome h1{}.mood .nav-links{gap:18px}.mood .nav{gap:20px}.mood .experience-grid,.mood .section-heading,.mood .alan-intro{gap:42px}.mood .with-aside{grid-template-columns:minmax(0,600px) 210px;gap:42px}.mood .answer{gap:42px}.mood .programme .button{padding:13px}}
@media(max-width:900px){.mood .nav{padding:18px 0}.mood .nav-links{order:3;width:100%;justify-content:space-between;border-top:1px solid #3A3833;padding-top:5px}.mood .welcome-grid{grid-template-columns:1fr;gap:35px}.mood .welcome-copy{max-width:620px}.mood .welcome h1{max-width:15ch}.mood .desktop-break{display:none}.mood .welcome-answer{max-width:57ch}.mood .welcome-photo{max-width:680px}.mood .welcome-lead{max-width:55ch}.mood .welcome{padding-top:47px}.mood .trust-line{margin-top:38px;flex-wrap:wrap;gap:8px}.mood .experience-grid{grid-template-columns:1fr 1fr;gap:35px}.mood .learning-step h3{}.mood .learning-step{gap:8px;grid-template-columns:25px 1fr}.mood .section{padding:65px 0}.mood .with-aside{display:block}.mood .article-body{max-width:600px}.mood .aside.toc{display:none}.mood .programme .facts{}.mood .programme{margin-right:16px;padding-right:16px}.mood .programme+.programme{padding-left:16px}.mood .programme h3{}.mood .programme .door-state{min-height:4.2em}.mood .article{padding-top:45px}}
@media(max-width:700px){.mood .wrap{width:calc(100% - 40px)}.mood .nav{gap:10px;min-height:auto;padding:14px 0 8px}.mood .brand{}.mood .masthead .button{min-height:44px;padding:12px 14px}.mood .nav-links{gap:12px;flex-wrap:nowrap;margin-top:5px}.mood .nav-links a{padding:11px 0;white-space:nowrap}.mood .welcome{padding-top:37px}.mood .welcome .eyebrow{margin-bottom:20px}.mood .welcome h1{line-height:1.12;max-width:13ch}.mood .welcome-lead{margin-top:23px}.mood .welcome-answer{line-height:1.7}.mood .welcome-actions{gap:14px;margin-top:25px;align-items:flex-start;flex-direction:column}.mood .welcome-actions .button{min-width:225px}.mood .audience{line-height:1.65;max-width:38ch;margin-top:22px}.mood .welcome-grid{gap:28px}.mood .welcome-photo figcaption{gap:8px}.mood .trust-line{margin-top:25px;padding:19px 0 22px;line-height:1.6}.mood .trust-separator{margin:0 5px}.mood .section{padding:51px 0}.mood .section-heading{grid-template-columns:1fr;gap:21px;margin-bottom:29px}.mood .section-heading .eyebrow{margin-bottom:14px}.mood h2{}.mood .lead{line-height:1.7}.mood .experience-grid{grid-template-columns:1fr;gap:27px}.mood .learning-step{grid-template-columns:30px 1fr;gap:12px;padding:22px 0}.mood .learning-step h3{}.mood .learning-step p{}.mood .practice-strip{grid-template-columns:1fr;gap:22px;margin-top:26px;padding-top:28px}.mood .practice-strip figure{max-width:100%}.mood .practice-strip p{}.mood .practice-caption{}.mood .programmes{grid-template-columns:1fr}.mood .programme{margin:0;padding:25px 0 30px}.mood .programme+.programme{border-left:0;padding-left:0}.mood .programme .door-state{min-height:auto;margin-bottom:6px}.mood .programme h3{}.mood .programme p{}.mood .programme .facts{padding-top:3px}.mood .programme .button{padding:14px 19px}.mood .alan-intro{grid-template-columns:1fr;gap:25px}.mood .alan-band p{}.mood .method{grid-template-columns:35px 1fr;gap:10px 15px;padding:25px 0}.mood .method p{grid-column:2;}.mood .method h3{}.mood .answer{grid-template-columns:1fr;gap:12px}.mood .answer h3{}.mood .answer p{margin-top:0}.mood .insights{grid-template-columns:1fr}.mood .insight{padding:27px 0;margin:0;border-left:0}.mood .insight+.insight{padding-left:0;border-left:0;border-top:1px solid #E6E4DF}.mood .insight h3{}.mood .cta{padding:48px 0}.mood .cta-grid{display:block}.mood .cta .button{margin-top:28px;white-space:normal}.mood .cta h2{}.mood footer{padding:34px 0}.mood .footer-grid{display:block}.mood .footer-grid>div+div{margin-top:23px}.mood .article{padding:40px 0 62px}.mood .article-head{line-height:1.17}.mood .article-meta{line-height:1.9;margin-top:21px}.mood .note-card{margin:28px 0}.mood .short-answer{margin:26px 0 32px;padding:22px 0}.mood .short-answer p{line-height:1.75}.mood .article-body{line-height:1.8}.mood .article-body h2{line-height:1.3}.mood .article-body p{margin-bottom:1.2em}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.mood *{transition:none!important}}

/* Alternative homepage: all photographs keep their complete original framing. */
.mood.parallax .welcome-photo,
.mood.parallax .practice-photo { transform:translate3d(0,var(--photo-shift,0px),0); }
.mood.parallax.motion-active .welcome-photo,
.mood.parallax.motion-active .practice-photo { will-change:transform; }
.mood.parallax .trust-line { margin-top:100px; }
.mood.parallax .experience-grid { min-height:690px; }
.mood.parallax .learning-step { min-height:230px; padding:38px 0; }
.mood.parallax .learning-step:first-child { padding-top:16px; }
.mood.parallax .experience-photo { position:sticky; top:48px; }
.mood.parallax .practice-strip { grid-template-columns:1.1fr .9fr; gap:74px; padding:80px 0 45px; margin-top:65px; }
.mood.parallax .practice-strip p {  line-height:1.2; }
.mood.parallax .motion-control { display:inline-flex; align-items:center; gap:9px; margin-top:16px; border:0; border-bottom:1px solid #E6E4DF; background:none; padding:6px 0; color:#4D4A44; font:inherit;  cursor:pointer; }
.mood.parallax .motion-control::before { content:''; width:5px; height:5px; border-radius:50%; background:#15140F; }
.mood.parallax .motion-control[aria-pressed=true]::before { background:#4D4A44; }
.mood.parallax .motion-control:disabled { cursor:default; }
.mood.parallax .motion-control[hidden] { display:none; }
.mood.parallax.motion-paused .experience-photo { position:static; }
@media(max-width:1100px){.mood.parallax .practice-strip { gap:42px; }}
@media(max-width:900px){
  .mood.parallax .trust-line { margin-top:55px; }
  .mood.parallax .experience-grid { min-height:0; }
  .mood.parallax .experience-photo { position:static; }
  .mood.parallax .learning-step { min-height:0; padding:22px 0; }
  .mood.parallax .learning-step:first-child { padding-top:0; }
  .mood.parallax .practice-strip { gap:35px; margin-top:40px; padding:45px 0 25px; }
}
@media(max-width:700px){
  .mood.parallax .trust-line { margin-top:45px; }
  .mood.parallax .practice-strip { grid-template-columns:1fr; gap:35px; margin-top:26px; padding:42px 0 15px; }
  .mood.parallax .practice-strip p {  }
}
@media(prefers-reduced-motion:reduce){
  .mood.parallax .welcome-photo,.mood.parallax .practice-photo { transform:none!important; will-change:auto; }
  .mood.parallax .experience-photo { position:static; }
}

/* alangoh.com/ - what the 6 Oct design trial did not have: the paper
   panels that stand in for uncleared photos, the familiar/after lists, the
   programme cards, the starting-point tool, its result pages and the WhatsApp
   doors. Loaded after mood.css and parallax.css (the trial, ported unchanged). */

/* `hidden` always wins. Without this, any rule here that sets display (the
   Other text box, a .button) silently overrides the attribute - seen live on
   10 Oct: the Q3 text box showed with Other unticked. */
.mood [hidden]{display:none!important}

/* Paper panels: where the parallax layout wanted a photo not yet cleared for
   public use (pack §0), a plain warm panel carrying one line of approved copy. */
.mood .paper-panel{aspect-ratio:4/3;background:#F6F6F4;border:1px solid #E6E4DF;display:flex;align-items:flex-end;
  padding:clamp(22px,3vw,38px);box-sizing:border-box}
.mood .paper-panel p{margin:0;font-family:var(--display);font-weight:600;line-height:1.25;
  letter-spacing:-.03em;color:#4D4A44;max-width:16ch}
.mood .practice-photo.paper-panel p{max-width:14ch}

/* The one photo already live (1080x652) keeps its own shape: the trial's 4:3
   box would letterbox it. */
.mood .welcome-photo img{aspect-ratio:auto}

/* Hero copy pieces that the trial did not have. */
.mood .welcome-actions .text-link{border:0;border-bottom:1px solid #E6E4DF}
.mood .credential{margin-top:18px;color:#4D4A44}

/* Lists in plain sections. */
.mood .plain-list{list-style:none;margin:0;padding:0;max-width:62ch}
.mood .plain-list li{padding:15px 0 15px 26px;border-top:1px solid #E6E4DF;position:relative;line-height:1.6;color:#4D4A44}
.mood .plain-list li::before{content:"";position:absolute;left:4px;top:1.45em;width:8px;height:1.5px;background:#15140F}
.mood .plain-list li strong{color:#15140F;font-weight:600}
.mood .section .close{margin-top:26px;line-height:1.65;color:#15140F;max-width:56ch}
.mood .two-col{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
@media(max-width:900px){.mood .two-col{grid-template-columns:1fr;gap:28px}}

/* The live biography block, on the dark band. */
.mood .alan-band .cred{color:#CFC9BD;margin-top:16px}

/* Programme facts can carry a link (the seminar's "announced to people who ask"). */
.mood .programme .facts a{color:#15140F;text-decoration:underline;text-underline-offset:3px}

/* /training/ - four cards. */
.mood .cards4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px}
.mood .card4{border-top:1px solid #E6E4DF;padding:30px 0 34px}
.mood .card4 h2{margin:0 0 10px}
.mood .card4 .door-state{color:#15140F;margin:0 0 14px}
.mood .card4 p{color:#4D4A44;line-height:1.7;margin:0 0 10px}
.mood .card4 .facts{color:#4D4A44;}
.mood .card4 .text-link{margin-top:8px}
@media(max-width:800px){.mood .cards4{grid-template-columns:1fr}}

/* /start/ - one question per screen, phone first. The buttons are .choice,
   not .answer: the base site's .answer is the Straight-answers block (grid, gap,
   rule), and inheriting it put 40px between choices on a phone. */
.mood .tool-wrap{max-width:680px}
.mood .tool-intro{line-height:1.65;color:#4D4A44;margin:0 0 26px}
.mood .progress{height:4px;background:#E6E4DF;border-radius:2px;overflow:hidden;margin:0 0 28px}
.mood .progress span{display:block;height:100%;background:#15140F;transition:width .25s ease}
.mood .qtext{line-height:1.25;letter-spacing:-.03em;margin:0 0 22px;outline:none}
.mood .answers{display:grid;gap:10px}
.mood .choice{display:block;width:100%;min-height:52px;text-align:left;padding:13px 16px;font:inherit;
  line-height:1.4;color:#15140F;background:#FFFFFF;border:1px solid #E6E4DF;border-radius:8px;cursor:pointer}
.mood .choice:hover{border-color:#0B0B0A}
.mood .choice[aria-pressed="true"]{background:#FFFFFF;border-color:#0B0B0A;box-shadow:inset 3px 0 0 #0B0B0A}
.mood .other-text{display:block;width:100%;box-sizing:border-box;margin-top:12px;min-height:48px;padding:11px 14px;
  font:inherit;border:1px solid #E6E4DF;border-radius:8px;background:#fff;color:#15140F}
.mood .tool-nav{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:26px}
.mood .text-btn{min-height:44px;padding:10px 4px;background:none;border:0;font:inherit;color:#4D4A44;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.mood button.button{font:inherit;cursor:pointer}
/* A plain (not .solid) button is an outline, like a link styled as one - not the browser's grey. */
.mood button.button:not(.solid){background:transparent}
.mood button.button:disabled{opacity:.45;cursor:default}
.mood .note-card-tool{background:#F6F6F4;border-left:3px solid #0B0B0A;padding:24px 24px 24px 22px;border-radius:0 8px 8px 0}
.mood .note-card-tool p{margin:0;line-height:1.65;color:#15140F}
.mood .noscript-box{background:#F6F6F4;padding:22px;border-radius:8px;}
.mood .noscript-box a{color:#15140F;font-weight:600}

/* Result pages. */
.mood .result h1{max-width:20ch}
.mood .result h2{letter-spacing:-.02em;margin:34px 0 10px}
.mood .result p{line-height:1.7;color:#4D4A44;max-width:62ch}
.mood .told{background:#F6F6F4;border-radius:8px;padding:18px 22px;margin-top:28px}
.mood .told ul{margin:8px 0 0;padding-left:18px}.mood .told li{margin:4px 0;color:#4D4A44}
.mood .told h2{margin-top:0}
.mood .addition{border-left:3px solid #0B0B0A;padding:4px 0 4px 16px;margin:18px 0}
.mood .result-actions{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;margin-top:30px}
.mood .wa-text{display:block;width:100%;box-sizing:border-box;min-height:190px;padding:14px;font-family:var(--body);line-height:1.55;
  border:1px solid #E6E4DF;border-radius:8px;background:#fff;color:#15140F}
.mood .hint{color:#4D4A44}
/* "No rush": the notes become the main button and WhatsApp the second. */
.mood .result-actions .notes-main{display:none}
.mood.no-rush .result-actions .notes-main{display:inline-block;order:-1}
.mood.no-rush .result-actions .wa-main{background:none;color:#15140F}
.mood.no-rush .result-actions .notes-sub{display:none}

/* WhatsApp doors. */
.mood .go{padding:90px 0;min-height:50vh}
.mood .go p{}

@media(max-width:700px){
  .mood .choice{padding:13px 14px}
  .mood .tool-nav .button{min-width:0}
  .mood .result-actions{flex-direction:column;align-items:flex-start}
}

/* Phone: menu links and the motion control are full 44px tap targets, and the
   menu may wrap rather than push the page sideways (measured at 390px). */
.mood .motion-control{min-height:44px}
@media(max-width:700px){
  .mood .nav-links{flex-wrap:wrap;justify-content:flex-start;gap:0 18px}
  .mood .nav-links a{display:inline-flex;align-items:center;min-height:44px;padding:0}
}

/* ── Voice and Copy v2 (T-mkt-09, 11 Oct) ─────────────────────────────────── */

/* "Where is your team today?" - four stages, each leading to its product. */
.mood .stages-h{margin:0 0 30px}
.mood .programmes.stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.mood .stage p{margin:0 0 6px}
/* T-mkt-38: "Questions? WhatsApp Alan", under a seminar sign-up; its button stacks above it. */
.mood .signup{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.mood .signup-ask{margin:6px 0 0}
.mood .stage h3{margin:14px 0 6px}
.mood .stage h3 a{color:inherit;text-decoration:underline;text-decoration-color:#0B0B0A;text-underline-offset:5px}
.mood .stages-under{margin:30px 0 0;color:#4D4A44}
.mood .class-runs h2{margin:0 0 18px}
.mood .class-runs .lead + .lead,.mood .two-col .lead + .lead{margin-top:16px}
.mood .alan-band .quote{font-family:var(--body);font-style:italic;line-height:1.4;color:#F5F2EA;margin-top:18px}
.mood .cta-talk h3{margin:0 0 8px}
.mood .cta-talk .text-link{display:inline-flex;align-items:center;min-height:44px}
@media(max-width:1100px){.mood .programmes.stages{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mood .programmes.stages .programme{margin:0;padding:24px 18px 26px 0;border-left:0}
  .mood .programmes.stages .programme+.programme{padding-left:0}}
@media(max-width:700px){.mood .programmes.stages{grid-template-columns:1fr}
  .mood .cta-talk{margin-top:36px}}

/* The sticky header (shared with the live site, rules in style.css) in the
   site colours: a solid gold button on the dark bar, the phone's one-row bar
   on the same ground. */
.mood .masthead .button.solid{background:#C9A227;border-color:#C9A227;color:#0B0B0A}
.mood .masthead .button.solid:hover{background:#FFFFFF;border-color:#F5F2EA;color:#0B0B0A}
.mood .pinned-head.pinned .nav{background:#0B0B0A;border-bottom-color:#3A3833}
/* The one-row bar from 900px down (the live site switches at 760px), because
   the menu wraps to a second row below 900px. Matches the pin script in next_build.py. */
@media(max-width:900px){.mood .pinned-head{position:static}
  .mood .pinned-head.pinned .nav{position:fixed;top:0;left:0;right:0;z-index:50;width:auto;margin:0;min-height:0;
    padding:8px 28px;border-bottom:1px solid #3A3833}
  .mood .pinned-head.pinned .nav-links{display:none}
  .mood [id]{scroll-margin-top:80px}}
@media(max-width:700px){.mood .pinned-head.pinned .nav{padding:8px 20px}}

/* "How a class runs" (Alan, 11 Oct: fix the layout). The trial held a class
   photo still while four tall steps scrolled past; v2 has two paragraphs and no
   cleared photo, so the 4:3 paper panel stood taller than the text and opened
   the section on a phone with an empty box. Now the text leads, and the panel
   is only as tall as the text, on the right - alternating with the practice
   strip below, which keeps its panel on the left. Nothing sticks: there is no
   photo to hold. When a class photo is cleared, revisit this block. */
.mood.parallax .experience-photo{position:static}
.mood .experience-grid .class-runs{order:-1}
.mood .experience-grid .experience-photo{aspect-ratio:auto;align-self:stretch;min-height:200px}
@media(max-width:700px){.mood .experience-grid .experience-photo{min-height:150px}}

/* The leave-only pop-up: small, centred, never more than 40% of a phone's height,
   so the WhatsApp link shows on ordinary phones (T-mkt-30, 15 Oct). */
.mood .leave-pop{width:min(420px,calc(100% - 40px));max-height:40vh;box-sizing:border-box;margin:auto;
  --pop-pt:22px;--pop-pr:24px;padding:var(--pop-pt) var(--pop-pr) 18px;
  border:0;border-radius:12px;background:#FFFFFF;color:#15140F;box-shadow:0 18px 60px rgba(0,0,0,.28);overflow:auto}
/* T-mkt-30 (15 Oct): the close button has its own grid column beside the heading,
   so no heading, text or button runs under it. Its margins keep it 8px from the
   corner and reserve its focus ring (mood.css: 3px outline + 4px offset) plus 4px
   of air; the text and buttons start below that, at full width. Only while open:
   a closed dialog keeps the browser's display:none. */
.mood .leave-pop[open]{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;
  --x-at:8px;--x-clear:11px}
.mood .leave-pop[open] > *{grid-column:1/-1}
.mood .leave-pop::backdrop{background:rgba(26,24,21,.45)}
.mood .leave-pop h2{line-height:1.2;margin:0 0 8px}
.mood .leave-pop[open] > h2{grid-column:1;grid-row:1}
.mood .leave-pop p{line-height:1.5;color:#4D4A44;margin:0 0 14px}
.mood .leave-actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px}
.mood .leave-actions .button{min-height:46px;padding:12px 18px}
.mood .leave-actions .text-link{display:inline-flex;align-items:center;min-height:44px;}
.mood .leave-x{width:44px;height:44px;border:0;background:none;
  line-height:1;color:#4D4A44;cursor:pointer;border-radius:50%}
.mood .leave-pop[open] > .leave-x{grid-column:2;grid-row:1;
  margin:calc(var(--x-at) - var(--pop-pt)) calc(var(--x-at) - var(--pop-pr)) var(--x-clear) var(--x-clear)}
.mood .leave-x:hover,.mood .leave-x:focus-visible{background:#F6F6F4}
@media(max-width:700px){.mood .leave-pop{--pop-pt:18px;--pop-pr:18px;padding-bottom:12px}.mood .leave-pop h2{}
  .mood .leave-pop p{margin-bottom:10px}.mood .leave-actions{gap:0 16px}}
/* The trial sized every paragraph in the practice strip as a display quote; the
   v2 strip carries body copy beside its panel. And "How a class runs" is two
   paragraphs, not the trial's four tall steps, so the grid needs no reserved
   height, and its panel stretches to the text (see "How a class runs" above). */
.mood.parallax .practice-strip p.lead{font-family:inherit;line-height:1.7;letter-spacing:0;margin:18px 0 0}
.mood.parallax .experience-grid{min-height:0;align-items:stretch}

/* The four remaining pages (T-mkt-11): seminar, about, open class, in-house. A
   heading block, then each section as a heading beside its content. */
.mood .page-head h1{max-width:18ch;margin:14px 0 22px}
.mood .page-lead{max-width:56ch}
.mood .page-dates{margin-top:22px;color:#4D4A44}
/* T-mkt-35: the role pages' "All notes" link, under the six newest. */
.mood .notes-all{margin:30px 0 0}
.mood .notes-all .text-link{min-height:44px}
.mood .page-intro{max-width:62ch;margin-top:30px}
.mood .page-intro p{line-height:1.75;color:#4D4A44;margin:0 0 16px}
.mood .page-quote{font-family:var(--body);font-style:italic;line-height:1.45;letter-spacing:-.01em;color:#15140F;
  border-left:3px solid #0B0B0A;padding-left:18px;margin:28px 0 0}
.mood .page-photo{margin:36px 0 0;max-width:760px}
.mood .page-photo img{display:block;width:100%;height:auto}
.mood .page-body p,.mood .page-body li{line-height:1.7;color:#4D4A44}
/* T-mkt-41, widened by T-mkt-42: no lone last word in any paragraph or list item. */
.mood p,.mood li{text-wrap:pretty}
.mood .page-body p{margin:0 0 14px}
.mood .page-list,.mood .page-steps{margin:0 0 14px;padding-left:22px}
.mood .page-list li,.mood .page-steps li{margin:0 0 10px;padding-left:4px}
.mood .page-body strong{color:#15140F}
.mood .page-body .text-link,.mood .page-dates .text-link{min-height:44px}
.mood .page-actions{padding-top:44px}
@media(max-width:700px){.mood .page-quote{}.mood .page-photo{margin-top:28px}}

/* /start/ - the starting-point tool (T-mkt-12). Builds on the tool's .choice,
   .answers, .other-text and .wa-text; these are only what v2 adds. */
.mood .v2-label,.mood .v2-q{display:block;font-weight:600;color:#15140F;margin:22px 0 10px;}
.mood .v2-form .other-text{margin-top:0}
.mood .turnstile{margin-top:18px;min-height:0}
.mood .v2-steps{list-style:none;margin:6px 0 0;padding:0}
.mood .v2-steps li{position:relative;padding:10px 0 10px 34px;color:#4D4A44}
.mood .v2-steps li::before{content:'';position:absolute;left:4px;top:15px;width:14px;height:14px;border-radius:50%;
  border:2px solid #0B0B0A;border-right-color:transparent;animation:v2spin .9s linear infinite}
.mood .v2-steps li.done{color:#15140F}
.mood .v2-steps li.done::before{animation:none;border:0;width:auto;height:auto;top:9px;left:2px;content:'\2713';color:#15140F;font-weight:600}
@keyframes v2spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.mood .v2-steps li::before{animation:none;border-right-color:#0B0B0A}}
.mood .v2-sentence strong{color:#15140F}
.mood .v2-industries{max-height:60vh;overflow:auto;margin-top:12px;padding-right:4px}
.mood .v2-pillar{margin-top:26px}
.mood .v2-pillar .eyebrow{margin-bottom:10px}
.mood .v2-roles{grid-template-columns:repeat(3,minmax(0,1fr))}
.mood .v2-answer{border-top:1px solid #E6E4DF;padding:24px 0 6px;margin-top:22px}
.mood .v2-answer h3{line-height:1.35;letter-spacing:-.02em;margin:0 0 14px}
.mood .v2-answer p{line-height:1.7;color:#4D4A44;margin:0 0 12px;max-width:62ch}
.mood .v2-answer p strong{color:#15140F}
.mood .v2-talk{background:#F6F6F4;border-radius:8px;padding:22px;margin-top:30px}
.mood .v2-talk h3{margin:0 0 10px}
.mood .v2-talk .wa-text{min-height:120px;margin-top:8px}
@media(max-width:700px){.mood .v2-roles{grid-template-columns:1fr}.mood .v2-talk{padding:18px 16px}}

/* Spec §8.3-8.4 on the answer screen: email it to yourself, and feedback. */
.mood .v2-email-block,.mood .v2-feedback{border-top:1px solid #E6E4DF;margin-top:30px;padding-top:24px}
.mood .v2-email-block h3,.mood .v2-feedback h3{margin:0 0 10px}
.mood .v2-email-row{display:flex;gap:10px;align-items:stretch}
.mood .v2-email-row .other-text{margin-top:0;flex:1 1 auto;min-width:0}
.mood .v2-email-row .button{flex:0 0 auto;min-height:48px}
.mood .v2-consent{display:flex;gap:10px;align-items:flex-start;margin-top:14px;color:#4D4A44;cursor:pointer;min-height:44px}
.mood .v2-consent input{width:22px;height:22px;margin:2px 0 0;flex:none;accent-color:#15140F}
.mood .v2-email-status{min-height:1.4em;margin:8px 0 0}
.mood .v2-email-done{font-weight:600;color:#15140F;margin:6px 0 0}
.mood .v2-thumbs{display:flex;gap:10px;margin-top:6px}
.mood .v2-thumbs .choice{width:auto;flex:0 0 auto;padding:12px 20px;text-align:center}
.mood .v2-reasons{margin:4px 0 6px}
@media(max-width:700px){.mood .v2-email-row{flex-direction:column}.mood .v2-email-row .button{width:100%}}

/* Spec §8.5: picking two, with the limit visible. */
.mood .choice[aria-pressed="true"]{position:relative;padding-right:44px}
.mood .choice[aria-pressed="true"]::after{content:'\2713';position:absolute;right:16px;top:50%;transform:translateY(-50%);
  color:#15140F;font-weight:600}
.mood .v2-picknav{align-items:flex-end}
.mood .v2-picknav .button{white-space:nowrap;flex:none}
.mood .v2-counter{color:#4D4A44;font-weight:600}
.mood .v2-nudge{margin:6px 0 0;color:#15140F;max-width:34ch}
.mood .choice.v2-pulse{animation:v2pulse .7s ease-out 1}
@keyframes v2pulse{0%{box-shadow:inset 3px 0 0 #0B0B0A,0 0 0 0 rgba(11,11,10,.3)}100%{box-shadow:inset 3px 0 0 #0B0B0A,0 0 0 10px rgba(11,11,10,0)}}
@media(prefers-reduced-motion:reduce){.mood .choice.v2-pulse{animation:none;outline:2px solid #0B0B0A}}

/* Visual direction B (T-mkt-14; Alan, 12 Oct: "go with B").
   Spec: 04_Marketing/Website Concepts/Visual Direction B - Web Spec - 20261012.md.
   Black and gold on the dark bands, white reading sections (no beige), gold only
   on dark or as a fill or line - never as text on white - and one colour per
   pillar, always People, Process, Technology, Money. Loaded last; the three files
   before it were re-coloured by role, not overridden. Website only. */

body.mood{
  --b-dark:#0B0B0A; --b-on-dark:#F5F2EA; --b-on-dark-sub:#CFC9BD;
  --b-page:#FFFFFF; --b-alt:#F6F6F4; --b-ink:#15140F; --b-sub:#4D4A44; --b-rule:#E6E4DF; --b-gold:#C9A227;
  /* T-mkt-45 (Alan, 19 Oct): gold only on dark. Every gold line, rule, underline
     or ring on a light ground is this ink instead (tools/test_gold_on_dark.py). */
  --b-line:#0B0B0A;
  --people:#E0663D; --process:#149189; --tech:#4C5FD5; --money:#2F8A4C;
  --people-ink:#B8481F; --process-ink:#0E6E68; --tech-ink:#3A4BB8; --money-ink:#24693A;
  --people-t:#FDEEE8; --process-t:#E4F4F3; --tech-t:#ECEEFC; --money-t:#E7F3EB;
  background:var(--b-page); color:var(--b-ink); 
  /* IBM Plex Mono leaves the web (§2): the base stylesheet's mono slot is the body face here. */
  --mono:var(--body);
}
.mood .facts,.mood time,.mood .eyebrow{letter-spacing:normal;text-transform:none}
.mood h1,.mood h2,.mood h3{color:var(--b-ink)}
/* No single word left alone on a heading's last line (visual pass, 14 Oct). */
.mood h1,.mood h2,.mood h3{text-wrap:balance}
/* The hero's gold line is its own box, so it balances too ("into working / AI
   solutions." on a phone, not one word left on the last line). */
.mood .b-hero h1>span{display:inline-block}
/* T-mkt-42: emphasis in body text is Plex Sans 600 - b, strong and th default to 700. */
.mood b,.mood strong,.mood th{font-weight:600}

/* ── header and footer: the dark band ─────────────────────────────────────── */
.mood .masthead,.mood .pinned-head.pinned .nav{background:var(--b-dark);border-bottom-color:#2A2925}
.mood .masthead .brand{color:var(--b-on-dark)}
.mood .masthead .brand span{color:var(--b-gold)}
.mood .masthead .nav-links a{color:var(--b-on-dark-sub)}
.mood .masthead .nav-links a[aria-current],.mood .masthead .nav-links a:hover{color:var(--b-on-dark)}
.mood .masthead .button,.mood .masthead .button.solid{background:var(--b-gold);border-color:var(--b-gold);color:var(--b-ink);border-radius:10px}
.mood .masthead .button:hover{background:var(--b-on-dark);border-color:var(--b-on-dark);color:var(--b-ink)}
.mood footer{background:var(--b-dark);color:var(--b-on-dark-sub);border-top:1px solid #3A3833}
.mood footer a{color:var(--b-on-dark)}

/* ── buttons ──────────────────────────────────────────────────────────────── */
.mood .btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:13px 22px;border-radius:10px;
  font-weight:600;text-decoration:none;border:1.5px solid transparent;line-height:1.25}
.mood .btn-gold{background:var(--b-gold);color:var(--b-ink)}
.mood .btn-gold:hover{background:var(--b-on-dark)}
.mood .btn-ghost{border-color:var(--b-on-dark-sub);color:var(--b-on-dark)}
.mood .btn-ghost:hover{border-color:var(--b-on-dark);background:rgba(245,242,234,.08)}
.mood .btn-ink{background:var(--b-ink);color:#FFFFFF}
.mood .btn-ink:hover{background:#000000}
.mood .btn-outline{border-color:var(--b-ink);color:var(--b-ink)}
.mood .btn-outline:hover{background:var(--b-ink);color:#FFFFFF}
/* the older buttons on white sections: ink, rounded */
.mood .button{border-radius:10px;border-color:var(--b-ink);color:var(--b-ink)}
.mood .button.solid{background:var(--b-ink);border-color:var(--b-ink);color:#FFFFFF}
.mood .button.solid:hover,.mood .button:hover{background:#000000;border-color:#000000;color:#FFFFFF}
.mood .text-link{color:var(--b-ink);border-bottom-color:var(--b-line)}
/* Hover on light: the rule thickens to 2px (a shadow under it, so nothing moves). */
.mood .text-link:hover{box-shadow:0 1px 0 var(--b-line)}

/* ── sections: white, then the neutral alternate, for rhythm ─────────────── */
/* One section gap for the whole site (Alan, 14 Oct: "very wide vertical empty
   spaces"). 88-110px a side stacked to ~180px between two sections' content;
   now 64px at desktop easing to 44px on a phone. Every section wrapper takes
   it - the B sections, the trial's .section (the four pages, the notes index,
   the trainer band) and the closing band - so the rhythm is the same on every
   page. The first and last child lose their outer margin so a heading's
   margin-top or a paragraph's margin-bottom cannot open a second gap. */
.mood .b-section,.mood .section,.mood .b-close{padding-block:clamp(44px,6vw,64px)}
.mood .article{padding-bottom:clamp(44px,6vw,64px)}
.mood :is(.b-section,.section)>.wrap>:first-child,.mood .page-head-text>:first-child{margin-top:0}
.mood :is(.b-section,.section)>.wrap>:last-child,.mood .page-head-text>:last-child,.mood .page-body>:last-child{margin-bottom:0}
.mood .b-section{background:var(--b-page);border-top:0}
.mood .b-section.b-alt{background:var(--b-alt)}
.mood .b-section h2{line-height:1.15}
.mood .b-body,.mood .b-intro{color:var(--b-sub);line-height:1.65;margin:18px 0 26px;max-width:36em}
.mood .b-small{margin:14px 0 0;color:var(--b-sub);max-width:34em}
.mood .section.paper{background:var(--b-alt)}

/* ── homepage hero ────────────────────────────────────────────────────────── */
.mood .b-hero{background:var(--b-dark);color:var(--b-on-dark)}
.mood .b-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:start;padding:56px 0 72px}
.mood .b-kicker{color:var(--b-gold);font-weight:600;margin:0 0 14px}
.mood .b-hero h1{color:var(--b-on-dark);line-height:1.08;letter-spacing:-.02em;max-width:none}
.mood .b-hero h1 span{color:var(--b-gold)}
.mood .b-lead{color:var(--b-on-dark-sub);line-height:1.6;margin:20px 0 30px;max-width:34em}
.mood .b-ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.mood .b-for{margin:22px 0 0;color:var(--b-on-dark-sub)}
.mood .b-trust{margin:10px 0 0;color:var(--b-on-dark-sub)}
/* T-mkt-41: one line per identity (next_build.py). */
.mood .b-trust-line{display:block}
/* Alan, 14 Oct: an example result beside the words, the whole card one link
   (next_build.py), in the Starting Point's result-card style; on the dark band it
   lifts and takes a gold edge on hover, and the site's gold ring on focus. */
.mood .b-hero-ex{max-width:540px;width:100%;justify-self:center}
.mood .b-ex-link{display:block;color:inherit;text-decoration:none;border:0;border-radius:16px}
.mood .b-ex-link .v2-rcard{box-shadow:0 30px 60px -30px rgba(0,0,0,.6);transition:transform .15s ease,box-shadow .15s ease}
.mood .b-ex-link .v2-get{margin-bottom:0}
.mood .b-ex-cap{display:flex;justify-content:space-between;gap:12px;margin:12px 4px 0;color:var(--b-on-dark-sub)}
.mood .b-ex-link:hover .v2-rcard{transform:translateY(-3px);box-shadow:0 0 0 2px var(--b-gold),0 34px 64px -30px rgba(0,0,0,.7)}
.mood .b-ex-link:hover .b-ex-cap{color:var(--b-on-dark)}
.mood .b-ex-link:focus-visible{outline:3px solid var(--b-gold);outline-offset:6px}
@media(prefers-reduced-motion:reduce){.mood .b-ex-link .v2-rcard{transition:none}.mood .b-ex-link:hover .v2-rcard{transform:none}}
/* T-mkt-28 (marketing's "Homepage Hero - Pain Card Mock-up - 20261014", variant
   B): the pain, the month-end as it runs now, one pain chip. Hero only - screen
   1's card keeps the v2- rules alone. Sizes are type.css's (small step). Day
   numbers on light orange are #7A2E12 (5.5:1; #B8481F was 3.1:1), on People
   orange ink (5.4:1; white was 3.4:1) - both small text, so 4.5:1. */
.mood .b-hero-ex .v2-mini-h{margin-bottom:6px}
/* The lower half at the small step, as in the mock-up, so the card is no taller than it needs to be. */
.mood .b-hero-ex .v2-rdo{gap:4px}
.mood .b-hero-ex .v2-rdo li{line-height:1.5}
.mood .b-ex-ctx{margin:0 0 12px;color:var(--b-sub);line-height:1.5}
.mood .b-ex-month{border:1px solid var(--b-rule);border-radius:10px;padding:10px 12px 8px;margin:0 0 12px}
.mood .b-ex-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
.mood .b-ex-mlabel{margin:0 0 6px;font-weight:600;letter-spacing:.04em;color:var(--b-sub);line-height:1.3}
.mood .b-ex-pins,.mood .b-ex-days,.mood .b-ex-keys{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:3px}
.mood .b-ex-pins{margin-bottom:3px}
/* The two events, above the cells, each ending in an arrow over the middle of
   its day. Payments spans days 1-7 (7 columns, 6 gaps): half a column is
   100%/14 - 18px/14. The report spans days 7-10 (4 columns, 3 gaps; half a
   column is 12.5% - 1.125px) but starts past day 7's arrow, so the two can
   never meet: when it is short of room it wraps instead. */
.mood .b-ex-pin{grid-row:1;justify-self:end;display:flex;align-items:flex-end;gap:.2em;text-align:right;font-weight:600;line-height:1.2;color:var(--b-ink)}
.mood .b-ex-pin.pay{grid-column:1/8;margin-right:calc(100%/14 - 1.286px - .5em)}
.mood .b-ex-pin.cf{grid-column:7/-1;margin:0 calc(12.5% - 1.125px - .5em) 0 calc(12.5% - 1.125px + .5em + 4px);color:var(--people-ink)}
.mood .b-ex-pin-mark{flex:none;width:1em;text-align:center}
.mood .b-ex-pin>span:first-child,.mood .b-ex-mlabel{text-wrap:balance}
.mood .b-ex-day{display:block;min-height:26px;line-height:26px;border-radius:4px;background:#EFEDE8;color:var(--b-sub);font-weight:600;text-align:center}
.mood .b-ex-day.m{background:var(--people);color:var(--b-ink)}
.mood .b-ex-day.f{background:#F4B9A3;color:#7A2E12}
.mood .b-ex-day.p{background:var(--b-ink);color:#fff}
.mood .b-ex-day.c{background:var(--b-page);box-shadow:inset 0 0 0 2px var(--people-ink);color:var(--people-ink)}
.mood .b-ex-keys{margin-top:5px;line-height:1.25;color:var(--b-sub)}
.mood .b-ex-keys span:nth-child(1){grid-column:1/4}
.mood .b-ex-keys span:nth-child(2){grid-column:4/7}
.mood .b-ex-keys span:nth-child(3){grid-column:7/10}
.mood .b-ex-after{margin:8px 0 2px;padding-top:8px;border-top:1px dashed var(--b-rule);line-height:1.45;color:var(--b-ink)}
.mood .b-ex-pain{display:flex;align-items:center;gap:6px;width:fit-content;margin:0 0 14px;padding:6px 10px;border-radius:8px;
  background:var(--people-t);color:var(--people-ink);font-weight:600;line-height:1.25}
.mood .b-ex-pain svg{width:1em;height:1em;flex:none}
.mood .b-ex-get-title{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.mood .b-ex-ready{padding:2px 9px;border-radius:999px;background:var(--money-t);color:var(--money-ink);font-weight:600;line-height:1.4}
.mood .b-ex-strong{font-weight:600}
.mood .b-pillbar{display:flex;height:6px}
.mood .b-pillbar i{flex:1}
.mood .b-pillbar i:nth-child(1){background:var(--people)} .mood .b-pillbar i:nth-child(2){background:var(--process)}
.mood .b-pillbar i:nth-child(3){background:var(--tech)}   .mood .b-pillbar i:nth-child(4){background:var(--money)}

/* ── the tool, shown (a replica of screen 5 from real library rows) ──────── */
/* .75/1.25 (was .9/1.1): the replica's cards wrap to fewer lines. The text
   starts level with the replica's top instead of floating at its middle. */
.mood .b-tool-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:56px;align-items:start}
.mood .rep-screen{background:var(--b-page);border:1px solid var(--b-rule);border-radius:16px;padding:22px;
  box-shadow:0 24px 50px -28px rgba(20,20,40,.35)}
.mood .rep-q{font-family:var(--display);font-weight:600;line-height:1.3;margin:0}
.mood .rep-meta{display:flex;justify-content:space-between;gap:12px;color:var(--b-sub);margin:6px 0 16px}
.mood .rep-meta b{color:var(--b-ink);white-space:nowrap}
.mood .rep-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mood .rep-card{position:relative;border:1.5px solid var(--b-rule);border-left-width:5px;border-radius:10px;padding:11px 12px;
  line-height:1.4;background:var(--b-page);color:var(--b-ink)}
.mood .rep-tag{display:block;font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-bottom:4px}
.mood .rep-card.on{border-color:var(--b-ink);box-shadow:0 0 0 1.5px var(--b-ink) inset;padding-right:30px}
.mood .rep-card.on::after{content:'\2713';position:absolute;top:8px;right:10px;font-weight:600}
.mood .rep-card.dim{opacity:.6}

/* ── the pillar colours: one rule set, for the replica and the real tool ─── */
.mood .pillar-people{border-left-color:var(--people)}   .mood .pillar-people .rep-tag,.mood .pillar-people>.pillar-label{color:var(--people-ink)}
.mood .pillar-process{border-left-color:var(--process)} .mood .pillar-process .rep-tag,.mood .pillar-process>.pillar-label{color:var(--process-ink)}
.mood .pillar-tech{border-left-color:var(--tech)}       .mood .pillar-tech .rep-tag,.mood .pillar-tech>.pillar-label{color:var(--tech-ink)}
.mood .pillar-money{border-left-color:var(--money)}     .mood .pillar-money .rep-tag,.mood .pillar-money>.pillar-label{color:var(--money-ink)}
.mood .rep-card.on.pillar-people,.mood .rep-card.on.pillar-process,.mood .rep-card.on.pillar-tech,.mood .rep-card.on.pillar-money{border-left-width:5px}
.mood .rep-card.on.pillar-people{border-left-color:var(--people)} .mood .rep-card.on.pillar-process{border-left-color:var(--process)}
.mood .rep-card.on.pillar-tech{border-left-color:var(--tech)}     .mood .rep-card.on.pillar-money{border-left-color:var(--money)}

/* the real tool, screen 5: the same colours on its cards */
.mood .v2-pillar>.pillar-label{font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin:0 0 10px}
.mood .choice{border-radius:10px;background:var(--b-page);border-color:var(--b-rule);color:var(--b-ink)}
.mood .choice:hover{border-color:var(--b-ink)}
.mood .choice[aria-pressed="true"]{background:var(--b-page);border-color:var(--b-ink);box-shadow:0 0 0 1.5px var(--b-ink) inset}
.mood .choice.pillar-people,.mood .choice.pillar-process,.mood .choice.pillar-tech,.mood .choice.pillar-money{border-left-width:5px}
.mood .choice.pillar-people{border-left-color:var(--people)}   .mood .choice.pillar-process{border-left-color:var(--process)}
.mood .choice.pillar-tech{border-left-color:var(--tech)}       .mood .choice.pillar-money{border-left-color:var(--money)}
.mood .choice[aria-pressed="true"]::after{color:var(--b-ink)}
.mood .choice.v2-pulse{animation:b-pulse .7s ease-out 1}
@keyframes b-pulse{0%{box-shadow:0 0 0 1.5px var(--b-ink) inset,0 0 0 0 rgba(11,11,10,.3)}100%{box-shadow:0 0 0 1.5px var(--b-ink) inset,0 0 0 10px rgba(11,11,10,0)}}
@media(prefers-reduced-motion:reduce){.mood .choice.v2-pulse{animation:none;outline:2px solid var(--b-line)}}
.mood .v2-nudge{color:var(--b-ink)}

/* ── ABOD's four pillars ──────────────────────────────────────────────────── */
.mood .b-pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:40px}
.mood .pcard{background:var(--b-page);border-radius:14px;padding:24px 22px;border-top:6px solid var(--b-rule)}
.mood .pcard h3{margin:0 0 8px}
.mood .pcard p{color:var(--b-sub);line-height:1.55;margin:0}
.mood .pcard .eg{margin-top:14px;padding:10px 12px;border-radius:8px;color:var(--b-ink)}
.mood .pcard.pillar-people{border-top-color:var(--people)}   .mood .pcard.pillar-people h3{color:var(--people-ink)}   .mood .pcard.pillar-people .eg{background:var(--people-t)}
.mood .pcard.pillar-process{border-top-color:var(--process)} .mood .pcard.pillar-process h3{color:var(--process-ink)} .mood .pcard.pillar-process .eg{background:var(--process-t)}
.mood .pcard.pillar-tech{border-top-color:var(--tech)}       .mood .pcard.pillar-tech h3{color:var(--tech-ink)}       .mood .pcard.pillar-tech .eg{background:var(--tech-t)}
.mood .pcard.pillar-money{border-top-color:var(--money)}     .mood .pcard.pillar-money h3{color:var(--money-ink)}     .mood .pcard.pillar-money .eg{background:var(--money-t)}

/* ── how a class runs: the diagram (Alan, 14 Oct: "send it"; mock-up "How a
   Class Runs - Diagram Mock-up - 20261014"). The problem, how the team thinks it
   through, the result, with arrows between; one column with down arrows below
   860px. Gold only on the dark panel, as its top band and the number discs. ── */
.mood .b-cr-intro{margin-bottom:36px}
/* Centred, not stretched: a stretched problem card stood half empty beside the
   taller method panel; centred, each arrow points at the middle of its card. */
.mood .b-flow{display:grid;grid-template-columns:1fr 64px 1.5fr 64px 1fr;align-items:center}
.mood .b-cr-card{background:var(--b-page);border:1px solid var(--b-rule);border-radius:14px;padding:22px}
.mood .b-cr-problem{border-top:6px solid var(--people)}
.mood .b-cr-result{border-top:6px solid var(--money)}
.mood .b-cr-label{font-family:var(--body);font-weight:600;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;
  color:var(--b-sub);margin:0 0 12px}
.mood .b-cr-q{font-family:var(--display);font-weight:600;line-height:1.35;color:var(--b-ink);margin:0 0 10px;text-wrap:balance}
.mood .b-cr-result .b-cr-q{margin-bottom:14px}
.mood .b-cr-sub{color:var(--b-sub);line-height:1.55;margin:0}
.mood .b-cr-tags,.mood .b-cr-inputs{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.mood .b-cr-tags li{font-weight:600;line-height:1;padding:8px 11px;border-radius:999px}
.mood .b-cr-tags .pillar-people{background:var(--people-t);color:var(--people-ink)}
.mood .b-cr-tags .pillar-process{background:var(--process-t);color:var(--process-ink)}
.mood .b-cr-tags .pillar-tech{background:var(--tech-t);color:var(--tech-ink)}
.mood .b-cr-tags .pillar-money{background:var(--money-t);color:var(--money-ink)}
.mood .b-cr-arrow{display:flex;align-items:center;justify-content:center;color:var(--b-sub)}
.mood .b-cr-arrow svg{width:36px;height:36px}
.mood .b-cr-method{background:var(--b-dark);color:var(--b-on-dark);border-radius:14px;padding:24px 22px;border-top:6px solid var(--b-gold)}
.mood .b-cr-method .b-cr-label{color:var(--b-on-dark-sub)}
.mood .b-cr-steps{list-style:none;padding:0;margin:0}
.mood .b-cr-steps>li{display:grid;grid-template-columns:36px 1fr;gap:12px;padding:12px 0;border-top:1px solid rgba(255,255,255,.12)}
.mood .b-cr-steps>li:first-child{border-top:0;padding-top:4px}
.mood .b-cr-num{width:32px;height:32px;border-radius:50%;background:var(--b-gold);color:var(--b-dark);display:flex;
  align-items:center;justify-content:center;font-family:var(--display);font-weight:600;line-height:1}
.mood .b-cr-steps h4{font-family:var(--display);font-weight:600;line-height:1.3;margin:4px 0;color:var(--b-on-dark)}
.mood .b-cr-steps p{margin:0;color:var(--b-on-dark-sub);line-height:1.55}
.mood .b-cr-inputs{margin-top:10px}
.mood .b-cr-inputs li{display:flex;align-items:center;gap:7px;font-weight:600;line-height:1;padding:8px 11px;border-radius:8px;
  border:1px solid rgba(255,255,255,.25);color:var(--b-on-dark)}
.mood .b-cr-inputs i{width:9px;height:9px;border-radius:50%;display:inline-block;flex:0 0 auto}
.mood .b-cr-inputs .pillar-people i{background:var(--people)}
.mood .b-cr-inputs .pillar-process i{background:var(--process)}
.mood .b-cr-inputs .pillar-tech i{background:var(--tech)}
.mood .b-did{margin:30px 0 0;color:var(--b-sub)}
.mood .b-did b{color:var(--b-ink);font-weight:600}
@media(max-width:859px){
  .mood .b-flow{grid-template-columns:1fr}
  .mood .b-cr-arrow{height:48px}
  .mood .b-cr-arrow svg{transform:rotate(90deg)}
}

/* ── programmes and the stage cards ───────────────────────────────────────── */
.mood .stage-name{font-weight:600;color:var(--b-ink);margin:0 0 8px}
.mood .programme h3 a{text-decoration-color:var(--b-line)}
/* Not .card4: it is a hairline on top, and a radius curled the hairline's ends. */
.mood .paper-panel{border-radius:16px}
.mood .practice-photo,.mood .welcome-photo img{border-radius:16px}
.mood .answer{border-top-color:var(--b-rule)}

/* ── the trainer band and the closing band: dark ─────────────────────────── */
.mood .alan-band{background:var(--b-dark);color:var(--b-on-dark)}
.mood .alan-band h2{color:var(--b-on-dark)}
.mood .alan-band p,.mood .alan-band .cred{color:var(--b-on-dark-sub)}
.mood .alan-band .quote{color:var(--b-on-dark)}
.mood .alan-band .text-link{color:var(--b-on-dark);border-bottom-color:var(--b-gold)}
/* On dark the link keeps its gold rule and has no light-ground hover. */
.mood :is(.alan-band,.sp-close) .text-link:hover{box-shadow:none}
.mood .b-close{background:var(--b-dark);color:var(--b-on-dark);text-align:center}
.mood .b-close h2{color:var(--b-on-dark);}
.mood .b-close p{color:var(--b-on-dark-sub);margin:14px auto 28px;max-width:34em;}
.mood .b-close .b-ctas{justify-content:center}

/* ── "Your team brings the expertise" (Alan, 14 Oct: "still looks quite empty").
   The trial's practice strip sat under a hairline with 65px of margin and 80px of
   padding on top of the section's own, and its panel kept the 4:3 box of a photo
   slot with the line pinned to the bottom. Now: the section padding is the only
   gap, and the panel is a pull-quote card as tall as its line, centred against
   the text. Colours unchanged. */
.mood .b-section.experience .practice-strip{margin-top:0;padding:0;border-top:0;align-items:center}
.mood .b-section.experience .practice-photo.paper-panel{aspect-ratio:auto;align-items:center;padding:clamp(28px,3vw,40px)}
.mood .b-section.experience .practice-photo.paper-panel p{max-width:20ch}

/* ── the pop-up and the tool's answer screen ──────────────────────────────── */
.mood .leave-pop{border-radius:16px;background:var(--b-page);color:var(--b-ink)}
.mood .v2-talk{background:var(--b-alt);border-radius:16px}
.mood .wa-text,.mood .other-text{border-radius:10px;border-color:var(--b-rule)}

/* ── The tool's result screen (screen 6), redesigned: spec §5.1 and the mock-up
   "Tool Result Screen - Redesign Mock-up". The page title steps aside (still
   read by a screen reader) and the result takes a little more width. ─────── */
.mood .tool-wrap.v2-result-mode{max-width:760px}
/* Headings take focus when a screen changes (for screen readers); no ring for that. */
.mood #tool [tabindex="-1"]:focus{outline:none}
/* T-mkt-17 §5: every screen of the tool has its own headline ("See where AI could
   help your business." on screen 1), so the page title steps aside on all of them. */
.mood .tool-wrap>h1,.mood .v2-result-mode>h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mood .v2-rhead{background:var(--b-dark);color:var(--b-on-dark);border-radius:16px 16px 0 0;padding:32px 28px 26px}
.mood .v2-rkicker{color:var(--b-gold);font-weight:600;margin:0 0 10px}
.mood .v2-rhead .v2-rtitle{color:var(--b-on-dark);margin:0;line-height:1.15}
.mood .v2-rfor{color:var(--b-on-dark-sub);margin:12px 0 0}
.mood .v2-rfor strong{color:var(--b-on-dark);font-weight:600}
.mood .v2-rpicks{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.mood .v2-chip{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:5px 12px;font-weight:600;
  background:#1F1E1B;color:var(--b-on-dark);border:1px solid #3A3833}
.mood .v2-chip i,.mood .v2-start i{width:9px;height:9px;border-radius:50%;display:inline-block;flex:0 0 auto}
.mood .v2-chip.pillar-people i{background:var(--people)}   .mood .v2-chip.pillar-process i{background:var(--process)}
.mood .v2-chip.pillar-tech i{background:var(--tech)}       .mood .v2-chip.pillar-money i{background:var(--money)}
.mood .v2-rstrip{display:flex;height:6px;border-radius:0 0 4px 4px;overflow:hidden}
.mood .v2-rstrip i{flex:1}
.mood .v2-rstrip i:nth-child(1){background:var(--people)} .mood .v2-rstrip i:nth-child(2){background:var(--process)}
.mood .v2-rstrip i:nth-child(3){background:var(--tech)}   .mood .v2-rstrip i:nth-child(4){background:var(--money)}
.mood .v2-rcards{margin-top:28px}
.mood .v2-rcard{background:var(--b-page);border:1px solid var(--b-rule);border-radius:16px;overflow:hidden;
  box-shadow:0 18px 40px -26px rgba(0,0,0,.35);--c:var(--b-ink);--t:var(--b-alt);--tx:var(--b-ink)}
.mood .v2-rcard.pillar-people{--c:var(--people);--t:var(--people-t);--tx:var(--people-ink)}
.mood .v2-rcard.pillar-process{--c:var(--process);--t:var(--process-t);--tx:var(--process-ink)}
.mood .v2-rcard.pillar-tech{--c:var(--tech);--t:var(--tech-t);--tx:var(--tech-ink)}
.mood .v2-rcard.pillar-money{--c:var(--money);--t:var(--money-t);--tx:var(--money-ink)}
.mood .v2-rband{height:8px;background:var(--c)}
.mood .v2-rin{padding:22px 24px 20px}
.mood .v2-rtop{display:flex;justify-content:space-between;gap:10px 12px;align-items:center;flex-wrap:wrap}
.mood .v2-rtag{font-family:var(--display);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--tx)}
.mood .v2-start{display:inline-flex;align-items:center;gap:7px;font-weight:600;padding:5px 12px;border-radius:999px}
/* T-mkt-18 bug 2: on an iPhone the start chip drew as a tall oval, stretched
   to the card's height. A chip is one line high, whatever its row does: it
   never grows, shrinks or stretches, and keeps its words on one line. */
.mood .v2-start,.mood .v2-chip{align-self:center;height:auto;min-height:0;line-height:1.25;max-width:100%;box-sizing:border-box}
.mood .v2-start{flex:none;white-space:nowrap}
.mood .v2-chip{flex:0 1 auto}
.mood .v2-chip i,.mood .v2-start i{align-self:center;height:9px;max-height:9px}
.mood .v2-start.go{color:#24693A;background:#E7F3EB}      .mood .v2-start.go i{background:#24693A}
.mood .v2-start.guide{color:#8A5A00;background:#FDF3DE}   .mood .v2-start.guide i{background:#8A5A00}
.mood .v2-rcard h3{margin:10px 0 18px;line-height:1.35;color:var(--b-ink)}
.mood .v2-rlabel{font-family:var(--display);font-weight:600;color:var(--b-sub);margin:0 0 8px}
.mood .v2-rdo{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:8px}
.mood .v2-rdo li{position:relative;padding-left:22px;color:var(--b-ink)}
.mood .v2-rdo li::before{content:"";position:absolute;left:4px;top:.62em;width:8px;height:8px;border-radius:2px;background:var(--c)}
.mood .v2-takes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.mood .v2-take{background:var(--t);border-radius:12px;padding:12px 13px;line-height:1.45}
.mood .v2-take p{margin:0;color:var(--b-ink)}
.mood .v2-take .v2-tic{display:flex;align-items:center;gap:7px;font-family:var(--display);font-weight:600;color:var(--tx);margin-bottom:5px}
.mood .v2-tic svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.mood .v2-more{border-top:1px solid var(--b-rule);padding-top:4px}
.mood .v2-more summary{cursor:pointer;font-weight:600;color:var(--b-sub);list-style:none;min-height:44px;display:flex;align-items:center}
.mood .v2-more summary::-webkit-details-marker{display:none}
.mood .v2-more summary::after{content:"⌄";margin-left:8px}
.mood .v2-more[open] summary::after{content:"⌃"}
.mood .v2-more p{margin:4px 0 4px;color:var(--b-sub)}
.mood .v2-rarrow{text-align:center;color:var(--b-sub);padding:10px 0}
.mood .v2-rnext{background:var(--b-dark);color:var(--b-on-dark);border-radius:16px;padding:28px 26px;margin-top:28px}
.mood .v2-rnext h3{color:var(--b-on-dark);margin:0}
.mood .v2-rnext>p{color:var(--b-on-dark-sub);margin:8px 0 20px}
.mood .v2-rnext .btn-gold{display:inline-flex;align-items:center;min-height:48px;padding:12px 20px;border-radius:10px;font-weight:600;text-decoration:none}
.mood .v2-rnext .v2-email-block{border-top:1px solid #3A3833;margin-top:24px;padding-top:20px}
.mood .v2-rnext .v2-email-block h3{color:var(--b-on-dark);margin:0 0 6px}
.mood .v2-rnext .v2-label,.mood .v2-rnext .v2-consent,.mood .v2-rnext .hint{color:var(--b-on-dark-sub)}
.mood .v2-rnext .other-text{background:#1B1A17;border-color:#3A3833;color:var(--b-on-dark)}
.mood .v2-rnext .button{border-color:var(--b-on-dark-sub);color:var(--b-on-dark);background:transparent}
.mood .v2-rnext .button:hover{border-color:var(--b-on-dark);background:rgba(245,242,234,.08)}
.mood .v2-rnext .v2-email-done{color:var(--b-on-dark)}
.mood .v2-result-mode .v2-feedback{background:var(--b-page);border:1px solid var(--b-rule);border-radius:16px;padding:20px 22px;margin-top:16px}
.mood .v2-again{margin:18px 0 0}
@media(max-width:620px){
  .mood .v2-takes{grid-template-columns:1fr}
  .mood .v2-rin{padding:18px 18px 16px}
  .mood .v2-rhead{padding:26px 20px 22px}
  .mood .v2-rnext{padding:24px 16px}
  .mood .v2-rnext .btn-gold{width:100%;justify-content:center;text-align:center;box-sizing:border-box}
}

/* ── narrow screens ───────────────────────────────────────────────────────── */
@media(max-width:900px){
  .mood .b-hero-grid,.mood .b-tool-grid{grid-template-columns:1fr;gap:32px}
  .mood .b-pgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .mood .b-hero-grid{padding:24px 0 52px}
  .mood .b-pgrid,.mood .rep-cards{grid-template-columns:1fr}
  .mood .rep-meta{flex-direction:column;gap:4px}
  .mood .b-ctas .btn{width:100%;justify-content:center}
}

/* Tap targets of 44px for the links the checker measured short (§4): the brand,
   the product names on the stage cards, the text links on /training/. */
.mood .masthead .brand{display:inline-flex;align-items:center;min-height:44px}
.mood .programme h3 a{display:inline-flex;align-items:center;min-height:44px}
.mood .card4 .text-link{min-height:44px}
/* T-mkt-41 rulings (marketing, 18 Oct): /training/'s cards, one card one action as on
   the homepage - the link stretched over the card; hover darkens the card's hairline;
   keyboard focus rings the whole card. */
.mood .card4{position:relative}
.mood .card4-go::after{content:"";position:absolute;inset:0}
.mood .card4:hover{border-top-color:var(--b-ink)}
.mood .card4-go:focus-visible{outline:none}
.mood .card4-go:focus-visible::after{outline:3px solid var(--b-ink);outline-offset:4px}

/* "Fade slightly" (spec §8.5), without dropping below 4.5:1: the unchosen cards
   lighten their text and border instead of turning transparent. Opacity .55 put
   ink at about 3:1 on white. #6E6A62 on white is 5.3:1. */
.mood .v2-full .choice[aria-pressed="false"]{opacity:1;color:#6E6A62;background:var(--b-page)}
.mood .v2-full .choice[aria-pressed="false"]:hover{color:var(--b-ink)}
.mood .rep-card.dim{opacity:1;color:#6E6A62}
/* T-mkt-45 B (Alan, 19 Oct): on a phone the replica shows four cards - the two
   chosen and the next two - and says how many more the tool has (next_build.py
   counts them). Desktop shows all eight and no line. */
.mood .rep-more-line{display:none}
@media(max-width:639px){
  .mood .rep-card.rep-more{display:none}
  .mood .rep-more-line{display:block;margin:12px 0 0;color:var(--b-sub);line-height:1.5}
}

/* ── One left edge, each heading above its text (Alan, 12 Oct: "yes to all
   four"). The visual check found three layouts: heading beside text, a left
   column, and a centred column. Now every page starts its text on the logo's
   edge, in one reading measure. Split layouts stay only where the other side
   is a picture, the tool or cards (the hero, the tool replica, how a class
   runs, the practice strip); the closing band is the one centred thing. ──── */
body.mood{--b-measure:680px}
/* The measure goes on what is inside: .two-col and .alan-intro sit on the .wrap
   itself, and a narrow .wrap centres (margin:auto). */
.mood .two-col,.mood .section-heading,.mood .alan-intro,.mood .answer{display:block}
.mood .two-col>*,.mood .section-heading>*,.mood .alan-intro>*,.mood .answer>*{max-width:var(--b-measure)}
.mood .two-col>*+*,.mood .section-heading>*+*,.mood .alan-intro>*+*{margin-top:18px}
.mood .answer h3{margin:0 0 10px}
.mood .lead,.mood .page-lead,.mood .page-intro,.mood .page-body{max-width:var(--b-measure)}
/* The tool is an app, not a reading page: its column is centred, as in the
   result-screen mock-up (Alan, 13 Oct: "aligned to left and imbalance"). */
.mood .tool-wrap{max-width:var(--b-measure);margin:0 auto}

/* Bands: grey on every second section marks where a section starts and ends,
   so the hairline above each one goes. */
.mood .section{border-top:0}
.mood .section.b-alt{background:var(--b-alt)}
.mood .page-actions{padding-top:0}

/* ── HRDC claims, privacy and the notes on direction B (they kept the old dark
   page because the spec named /next/ pages only). White reading column on the
   same left edge, the "On this page" index on the right, no typewriter labels. */
.mood .article>.wrap{max-width:none}
.mood .with-aside{grid-template-columns:minmax(0,var(--b-measure)) 260px}
.mood .article-body,.mood .note-card,.mood .short-answer{max-width:var(--b-measure)}
/* Reading width: at 680px a body line ran to 83-88 characters. Paragraphs and
   lists stop at 33em (~75 characters); headings, cards and figures keep the
   column. And the 404's heading sat on its paragraph with no gap. */
.mood .article-body>p,.mood .article-body>ul,.mood .article-body>ol,
/* T-mkt-41: a .page-list (ul) has no cap of its own - it runs to .page-body's
   measure, so its indented text is not cut short of the paragraphs'. */
.mood .page-body>p,.mood .page-body>ol{max-width:33em}
.mood .article-head+.article-body{margin-top:24px}
.mood .article-meta{text-transform:none;letter-spacing:normal}
.mood .article .lead{margin-bottom:32px}
.mood .article-body blockquote{color:var(--b-ink)}
.mood .short-answer{background:var(--b-alt);border:0;border-left:4px solid var(--b-line);border-radius:0 12px 12px 0;padding:22px 26px}
.mood .short-answer p{color:var(--b-ink)}
.mood .short-answer p.short-label{margin:0 0 8px;font-weight:600;color:var(--b-sub)}
.mood .aside .toc-head,.mood .aside-card h2{font-family:var(--body);font-weight:600;letter-spacing:normal;text-transform:none;color:var(--b-ink)}
.mood .aside-card{background:var(--b-alt);border-color:var(--b-rule)}
.mood .aside-card strong{color:var(--b-ink)}

/* ── "Find your starting point" where readers already are (T-mkt-16). ────────
   The one-line card (1b): grey, the four-pillar strip along its top, a text
   link rather than a button. */
.mood .sp-card{position:relative;overflow:hidden;background:var(--b-alt);border-radius:12px;padding:22px 22px 10px;margin:36px 0}
.mood .sp-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,var(--people) 0 25%,var(--process) 25% 50%,var(--tech) 50% 75%,var(--money) 75% 100%)}
.mood .sp-card p,.mood .article-body .sp-card p{margin:0;color:var(--b-ink)}
.mood .sp-card .text-link{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
/* 1c: under "On this page", travelling with it; the sidebar hides below 900px. */
.mood .aside .sp-side{margin-top:28px;border:0;border-radius:12px;padding:18px 18px 20px;background:var(--b-alt)}
.mood .sp-side .sp-side-h{font-weight:600;color:var(--b-ink);margin:0 0 6px}
.mood .sp-side p{color:var(--b-sub);margin:0 0 14px}
.mood .toc .sp-side .button{display:inline-flex;align-items:center;min-height:44px;padding:10px 14px;margin:0;border:0;
  border-radius:10px;background:var(--b-ink);color:#FFFFFF;text-decoration:none;font-weight:600;line-height:1.3;gap:6px}
.mood .toc .sp-side .button:hover{background:#000000;color:#FFFFFF}
/* 1a: the closing block led by the tool; the programmes as a text link. */
.mood .sp-close .sp-more{margin:22px auto 0}
.mood .sp-close .text-link{display:inline-flex;align-items:center;min-height:44px;color:var(--b-on-dark);border-bottom-color:var(--b-gold)}

/* ── Moving between notes (Alan, 14 Oct). ────────────────────────────────────
   The note's head shares the reading column, so the side column starts level
   with the title and stays in view as the note scrolls. On this page comes
   first, then the starting-point card (spec 1c: "under On this page"). It
   sticks below the header (sticky, ~83px; content lands at the sheet's own 109px).
   T-mkt-43 #1: a list of every note under the card made the column taller than a
   laptop window; it was capped and scrolled inside itself, slicing a title and
   hiding the current note. The list left the column (marketing's ruling): More
   notes under the article ends in "All notes". */
@media(min-width:901px){
  .mood .note-layout .aside{position:sticky;top:101px}
}
/* Older / Newer, right under the note; Newer always on the right. */
.mood .note-pager{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:var(--b-measure);
  margin:48px 0 0;padding-top:28px;border-top:1px solid var(--b-rule)}
.mood .pager-link{display:flex;flex-direction:column;gap:4px;min-height:44px;padding:16px 18px;border-radius:12px;
  background:var(--b-alt);color:var(--b-ink);text-decoration:none}
.mood .pager-link:hover{background:#EDECE8}
.mood .pager-newer{grid-column:2;text-align:right;align-items:flex-end}
.mood .pager-dir{color:var(--b-sub);font-weight:600}
.mood .pager-title{font-weight:600;line-height:1.35}
@media(max-width:700px){
  .mood .note-pager{grid-template-columns:1fr;gap:12px}
  .mood .pager-newer{grid-column:auto}
}
/* More notes, after the closing block: the notes index's own cards. */
.mood .more-notes h2{margin:0 0 32px}
.mood .more-notes .more-all{margin:36px 0 0}
.mood .more-notes .text-link{min-height:44px}
/* Six menu items do not fit one row on a phone (measured: two rows at 320-414px).
   The row stays one line and scrolls sideways inside itself - the page never does -
   with a fade at the right edge to show there is more. */
@media(max-width:700px){
  .mood .nav-links{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;overscroll-behavior-x:contain;
    scrollbar-width:none;padding-right:28px;-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);
    mask-image:linear-gradient(90deg,#000 86%,transparent)}
  .mood .nav-links::-webkit-scrollbar{display:none}
  .mood .nav-links a{flex:0 0 auto;white-space:nowrap}
}

/* "Picked because..." (Starting Point, T-mkt-17 §2): secondary ink, body size,
   no italics - under the card on screen 5, under the heading on screen 6. */
.mood .v2-why{display:block;margin-top:8px;color:var(--b-sub);font-style:normal;font-weight:400}
.mood .v2-full .choice[aria-pressed="false"] .v2-why{color:#6E6A62}
.mood .v2-rcard .v2-why{margin:-10px 0 18px}

/* ── Starting Point, T-mkt-17 (13 Oct): the AI's work made visible, the
   company found before it is researched, the prize shown up front. ──────── */
/* §5: the example result under the form. */
.mood .v2-example{margin:36px 0 0}
.mood .v2-example figcaption{margin-top:10px;color:var(--b-sub)}
.mood .v2-mini{box-shadow:none}
.mood .v2-mini .v2-rin{padding:16px 18px 16px}
.mood .v2-mini-h{font-family:var(--display);font-weight:600;color:var(--b-ink);margin:8px 0 12px;line-height:1.35}
.mood .v2-mini .v2-rdo{margin-bottom:14px}
/* §8: "What you'd get" - like a document or a phone message. */
.mood .v2-get{border:1px solid var(--b-rule);border-left:3px solid var(--c, var(--b-ink));border-radius:10px;background:var(--b-alt);padding:12px 14px;margin:0 0 20px}
.mood .v2-get-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 6px;font-weight:600;color:var(--b-sub)}
.mood .v2-get-tag{border:1px solid var(--b-rule);border-radius:999px;padding:1px 9px;background:var(--b-page);font-weight:600;color:var(--b-sub)}
.mood .v2-get-title{margin:0 0 4px;font-weight:600;color:var(--b-ink)}
.mood .v2-get-line{margin:0;color:var(--b-ink);line-height:1.5}
/* Screen 1 (T-mkt-33; Alan, 15 Oct: "send it"; marketing's "Starting Point -
   Action First Mock-up - 20261015"). Alan, on the screen before: the dark band
   "is catching all attention, visitor doesnt know what to do". So the question
   sits IN the band, in its own box, and "Show me" is the one gold button on the
   screen. While it is up the page's column steps aside (body.v2-s1, start.js
   showS1): the band runs edge to edge under the header, then the pillar strip,
   the three steps as one plain line, and "Here's what you'll get", centred. */
body.mood.v2-s1 main>.section{padding:0;background:var(--b-alt)}
body.mood.v2-s1 main>.section>.wrap{width:auto}
body.mood.v2-s1 .tool-wrap{max-width:none}
.mood .v2-s1-band{background:var(--b-dark);color:var(--b-on-dark);--b-ask:#17160F;--b-ask-line:rgba(255,255,255,.3)}
.mood .v2-s1-band>.v2-s1-in{width:min(760px,calc(100% - 40px));padding:40px 0;text-align:center}
.mood .v2-s1-kicker{color:var(--b-gold);font-weight:600;margin:0 0 10px}
.mood .v2-s1-kicker span{white-space:nowrap}
.mood .v2-s1-band .v2-s1-h{color:var(--b-on-dark);margin:0 auto 10px;line-height:1.15;letter-spacing:-.01em;max-width:20ch}
.mood .v2-s1-lead{color:var(--b-on-dark-sub);max-width:52ch;margin:0 auto 24px;line-height:1.6}
.mood .v2-s1-trust{display:flex;align-items:center;justify-content:center;gap:10px;margin:20px 0 0;color:var(--b-on-dark-sub)}
.mood .v2-s1-trust strong{color:var(--b-on-dark);font-weight:600}
/* The box: a gold line at 60% and a soft gold halo, on the band's own dark. */
.mood .v2-ask{background:var(--b-ask);border:1px solid rgba(201,162,39,.6);border-radius:16px;padding:20px;text-align:left;
  box-shadow:0 0 0 6px rgba(201,162,39,.08)}
.mood .v2-ask .note-card-tool{margin:0 0 16px}
/* One form, two layouts, ONE order: the field, the staff group, then "Show me",
   so Tab goes input -> staff -> Show me. From 641px the button is drawn beside
   the field; below that it follows the staff choices, full width. */
.mood .v2-ask-form{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;
  grid-template-areas:"label label" "name go" "staff staff" "ts ts" "fine fine" "fine2 fine2"}
.mood .v2-ask-label{grid-area:label;display:block;font-weight:600;color:#FFFFFF;margin:0 0 8px}
.mood .v2-ask-name{grid-area:name;min-width:0;width:100%;box-sizing:border-box;min-height:52px;padding:15px 16px;border:0;border-radius:12px;
  background:#FFFFFF;color:var(--b-ink);font-family:inherit;line-height:1.25}
.mood .v2-ask-name::placeholder{color:#6B675F;opacity:1}
.mood .v2-go{grid-area:go;justify-content:center;border:0;border-radius:12px;padding:15px 22px;cursor:pointer;font-family:inherit;white-space:nowrap}
.mood .v2-staff{grid-area:staff;margin:16px 0 0;padding:0;border:0;min-width:0}
.mood .v2-staff legend{display:block;padding:0;margin:0 0 8px;font-weight:600;color:#FFFFFF}
.mood .v2-pills{display:flex;flex-wrap:wrap;gap:8px}
.mood .v2-pill{position:relative;display:inline-flex;cursor:pointer}
/* The radio itself is out of sight but still the control: it takes the focus,
   the arrow keys and the screen reader's "radio button, 3 of 5". */
.mood .v2-pill input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.mood .v2-pill span{display:inline-block;padding:9px 14px;border:1px solid var(--b-ask-line);border-radius:999px;color:#FFFFFF;
  font-weight:600;line-height:1.4}
.mood .v2-pill:hover span{border-color:rgba(255,255,255,.6)}
.mood .v2-pill input:checked+span{border:2px solid var(--b-gold);padding:8px 13px;font-weight:600}
/* Turnstile, after "Show me": no room at all until Cloudflare is about to show
   the widget (start.js adds .v2-ts-on), which is rare with interaction-only. */
.mood .v2-ts{grid-area:ts;margin:0;min-height:0}
.mood .v2-ts.v2-ts-on{margin-top:14px}
.mood .v2-ask-fine{grid-area:fine;margin:14px 0 0;color:var(--b-on-dark-sub);line-height:1.5}
.mood .v2-ask-fine+.v2-ask-fine{grid-area:fine2;margin-top:4px}
.mood .v2-ask-fine a{color:var(--b-on-dark);text-decoration:underline;text-underline-offset:3px}
/* Focus inside the box is the light ring, never gold: gold already means
   "selected" on a staff choice, and it is the button's own fill. */
.mood .v2-ask-name:focus-visible,.mood .v2-ask .v2-go:focus-visible,.mood .v2-ask-fine a:focus-visible,
.mood .v2-pill input:focus-visible+span{outline:3px solid var(--b-on-dark);outline-offset:3px}
/* The line under the box: what is missing, said once. */
.mood .v2-s1-say{margin:14px 0 0;color:var(--b-on-dark);font-weight:600}
.mood .v2-s1-say:empty{margin:0}
/* Under the strip: the three steps as a plain line (small ink circles, nothing
   that looks pressable), then the example card, centred. */
.mood .v2-s1-below{width:min(1120px,calc(100% - 40px));margin:0 auto;padding:44px 0 60px}
.mood .v2-s1-how{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 28px;margin:0 0 28px;padding:0;list-style:none;color:var(--b-sub);cursor:default}
.mood .v2-s1-how li{display:flex;align-items:center;margin:0}
.mood .v2-s1-n{flex:none;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin-right:8px;border-radius:50%;
  background:var(--b-ink);color:#FFFFFF;font-weight:600;line-height:1}
.mood .v2-s1-get{max-width:620px;margin:0 auto}
.mood .v2-s1-get h3{margin:0 0 4px;text-align:center}
.mood .v2-s1-getline{margin:0 0 16px;color:var(--b-sub);text-align:center}
.mood .v2-s1-get .v2-example{margin:0}
.mood .v2-s1-get .v2-example figcaption{text-align:center}
.mood .v2-s1-get .v2-rcard{box-shadow:0 6px 24px rgba(0,0,0,.05)}
@media(max-width:640px){
  .mood .v2-s1-band>.v2-s1-in{width:calc(100% - 32px);padding:28px 0 30px}
  .mood .v2-s1-lead{margin-bottom:20px}
  .mood .v2-ask{padding:16px}
  .mood .v2-ask-form{grid-template-columns:minmax(0,1fr);grid-template-areas:"label" "name" "staff" "go" "ts" "fine" "fine2"}
  .mood .v2-go{width:100%;margin-top:16px}
  .mood .v2-s1-below{width:calc(100% - 32px);padding:32px 0 44px}
}
/* /start/ only: "Talk to Alan" is an outline, so "Show me" is the one gold
   button on the screen. Every other page keeps the gold header button. */
body.mood[data-next="start"] .masthead .button{background:transparent;border-color:rgba(255,255,255,.45);color:#FFFFFF}
body.mood[data-next="start"] .masthead .button:hover{background:rgba(255,255,255,.08);border-color:#FFFFFF;color:#FFFFFF}
/* T-mkt-20 §2: "At a glance" - four items in one row on the pillar tint, 2 x 2
   below 620px. The times are Alan's table's, never the model's. */
.mood .v2-glance{margin:0 0 20px}
.mood .v2-gl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0}
.mood .v2-gl.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.mood .v2-gi{background:var(--t);border-radius:12px;padding:11px 12px;line-height:1.4}
.mood .v2-gi dt{display:flex;align-items:flex-start;gap:6px;font-family:var(--display);font-weight:600;color:var(--tx);margin:0 0 4px}
.mood .v2-gi dd{margin:0;color:var(--b-ink);font-weight:600}
.mood .v2-gnote{display:block;font-weight:400;color:var(--b-sub);margin-top:2px}
.mood .v2-gline{margin:8px 0 0;color:var(--b-sub)}
/* §3: the fold, "How it would work" - Who and Information side by side. */
.mood .v2-more .v2-takes{grid-template-columns:repeat(2,1fr);margin:4px 0 12px}
@media(max-width:620px){
  .mood .v2-gl,.mood .v2-gl.n3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mood .v2-more .v2-takes{grid-template-columns:1fr}
}
/* §6: screen 2 - each step says what it found. */
.mood .v2-steps .v2-note{display:block;color:var(--b-sub);margin-top:2px}
/* §6: "How this works". */
.mood .v2-how{margin:22px 0 0}
.mood .v2-how summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;color:var(--b-sub);font-weight:600;list-style:none}
.mood .v2-how summary::-webkit-details-marker{display:none}
.mood .v2-how-i{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border:1.5px solid currentColor;border-radius:50%;font-style:normal;font-weight:600;line-height:1}
.mood .v2-how-panel{background:var(--b-alt);border-radius:12px;padding:14px 16px;margin-top:6px}
.mood .v2-how-panel p{margin:0;color:var(--b-ink)}
.mood .v2-result-mode .v2-how{margin-top:18px}
/* §6: the company shown back - logo or initials, and what was found. */
.mood .v2-logo{width:40px;height:40px;border-radius:10px;object-fit:contain;background:var(--b-page);border:1px solid var(--b-rule);flex:0 0 auto}
.mood .v2-logo.big{width:56px;height:56px;border-radius:12px}
.mood .v2-initials{display:inline-flex;align-items:center;justify-content:center;background:var(--b-ink);color:#FFFFFF;border:0;font-family:var(--display);font-weight:600}
.mood .v2-who{display:flex;align-items:center;gap:14px;margin:18px 0 6px}
.mood .v2-who-name{margin:0;font-weight:600;color:var(--b-ink)}
.mood .v2-who .hint{margin:2px 0 0}
.mood .v2-facts{background:var(--b-alt);border-radius:12px;padding:14px 16px;margin:16px 0 22px}
.mood .v2-facts ul{margin:0;padding-left:20px}
.mood .v2-facts li{margin:4px 0;color:var(--b-ink)}
.mood .v2-src{color:var(--b-sub);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
/* §6a: "Which one is yours?" */
.mood .choice.v2-cand{display:flex;align-items:center;gap:14px;text-align:left}
.mood .v2-cand-t{display:flex;flex-direction:column;gap:2px}
.mood .v2-cand-t strong{color:var(--b-ink);font-weight:600}
.mood .v2-cand-t .hint{color:var(--b-sub)}
/* §9 and §13: "My industry isn't here", "None of these fit". */
.mood .v2-nothere,.mood .v2-nonefit{margin:18px 0 0}
.mood .v2-nothere .text-btn,.mood .v2-nonefit .text-btn{min-height:44px}
.mood .v2-hintbox{background:var(--b-alt);border-radius:12px;padding:16px 18px;margin:12px 0 0}
.mood .v2-own>.pillar-label{color:var(--b-ink)}
.mood .choice.v2-owncard{border-left:5px solid var(--b-line)}
/* §14: after a second miss, above their own answer. */
.mood .v2-still{margin:0 0 12px;text-align:center}
.mood .v2-still .text-link{display:inline-flex;align-items:center;min-height:44px}
/* §10, reworked by T-mkt-20 §7: the button first, then the bio under it. */
.mood .v2-rnext .v2-talk-line{margin:8px 0 16px;color:var(--b-on-dark-sub)}
.mood .v2-rnext .v2-talk-p{margin:12px 0 18px}
.mood .v2-alan{display:flex;gap:12px;align-items:flex-start;line-height:1.45}
.mood .v2-alan-photo{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:0 0 auto;border:2px solid var(--b-gold)}
.mood .v2-alan-name{color:var(--b-on-dark);font-family:var(--display);font-weight:600}
.mood .v2-alan-bio{margin:0 0 2px;color:var(--b-on-dark-sub)}
.mood .v2-alan-cred{margin:0;color:var(--b-on-dark)}
.mood .go-who{display:flex;align-items:center;gap:14px;color:var(--b-ink);font-weight:600}
.mood .go-who .v2-alan-photo{width:64px;height:64px;border-color:var(--b-line)}
/* T-mkt-22 §1: "Send this to your team" - an outline button, under the header
   chips (on dark) and after the last card (on white). The gold training button
   stays the main action. */
.mood .v2-share{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin:24px 0 0}
.mood .v2-rhead .v2-share{margin-top:20px}
.mood .v2-share-btn{background:transparent;cursor:pointer;font-family:inherit}
.mood .v2-share-btn.btn-ghost:hover{background:rgba(245,242,234,.08)}
.mood .v2-wa-icon{width:20px;height:20px;fill:currentColor;flex:0 0 auto}
.mood .v2-share .v2-copy{color:var(--b-ink);text-decoration:underline;text-decoration-color:var(--b-line);text-underline-offset:4px}
.mood .v2-share .v2-copy:hover{text-decoration-thickness:2px}
.mood .v2-share.on-dark .v2-copy{color:var(--b-on-dark);text-decoration-color:var(--b-gold)}
.mood .v2-share.on-dark .v2-copy:hover{text-decoration-thickness:auto}
.mood .v2-share-status{color:var(--b-sub);overflow-wrap:anywhere}
.mood .v2-share.on-dark .v2-share-status{color:var(--b-on-dark-sub)}
@media(max-width:620px){.mood .v2-share-btn{width:100%;justify-content:center}}
/* T-mkt-22 §2: the shared page - the line under the header, and the two
   actions for the person it was sent to. */
.mood .v2-made{margin:14px 0 0;color:var(--b-sub)}
.mood .v2-shared-end .btn-gold{margin:16px 0 0}
.mood .v2-shared-talk{border-top:1px solid #3A3833;margin-top:26px;padding-top:22px}
.mood .v2-shared-talk h3{margin:0}
.mood .v2-shared-end .btn-ghost{display:inline-flex;align-items:center;min-height:48px}
@media(max-width:620px){.mood .v2-shared-end .btn{width:100%;justify-content:center;box-sizing:border-box}}
.mood .v2-expired{padding:24px 0 8px}
/* T-mkt-22 §9.1 (Alan, 14 Oct: "doesnt appear as a button at a glance"): the
   main action - screen 6's WhatsApp button, the shared page's "Find your
   starting point". Full width, at least 52px, gold with ink text, one line
   at 390px (the arrow is tied to the last word, so a narrower phone wraps the
   label, never the arrow alone), a soft shadow, and a hover, a pressed and a
   keyboard-focus state. */
.mood .btn-gold.v2-cta{display:flex;width:100%;box-sizing:border-box;justify-content:center;align-items:center;gap:8px;
  min-height:52px;padding:13px 12px;text-align:center;text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 18px -8px rgba(201,162,39,.6),0 2px 4px rgba(0,0,0,.35);
  transition:background-color .15s ease,box-shadow .15s ease,transform .1s ease}
.mood .btn-gold.v2-cta:hover{background:#DDB842;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 12px 24px -8px rgba(201,162,39,.7),0 3px 6px rgba(0,0,0,.4)}
.mood .btn-gold.v2-cta:active{background:#B38F1F;transform:translateY(1px);box-shadow:inset 0 2px 4px rgba(0,0,0,.25),0 1px 2px rgba(0,0,0,.35)}
.mood .btn-gold.v2-cta:focus-visible{outline:3px solid var(--b-on-dark);outline-offset:3px}
.mood .v2-cta .v2-wa-icon{width:22px;height:22px}
.mood .v2-cta-arrow{font-weight:600}
.mood .v2-rnext .v2-send-for{margin:8px 0 0;text-align:center;color:var(--b-on-dark-sub)}
/* §9.2: screen 6's bottom bar - the same gold button and the §1 share as an
   icon. Fixed, at most 64px plus the iPhone's safe area; it slides up when
   start.js adds .on, and while hidden it is out of the tab order. The room
   under the footer keeps the bar off the last content while screen 6 is up. */
.mood .v2-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--b-dark);
  box-shadow:0 -8px 20px rgba(0,0,0,.2);padding:8px 16px calc(8px + env(safe-area-inset-bottom));
  transform:translateY(100%);visibility:hidden;transition:transform .22s ease,visibility 0s linear .22s}
.mood .v2-bar.on{transform:none;visibility:visible;transition:transform .22s ease,visibility 0s}
.mood .v2-bar-in{position:relative;display:flex;gap:10px;align-items:stretch;max-width:760px;margin:0 auto}
.mood .v2-bar .btn-gold.v2-cta{flex:1 1 auto;width:auto;min-width:0;min-height:46px;padding:10px}
/* One line always, so the bar never grows past 64px on a narrow phone. */
.mood .v2-bar .v2-cta span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mood .v2-bar-share{flex:0 0 46px;height:46px;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;
  background:transparent;color:var(--b-on-dark);border:1.5px solid var(--b-on-dark-sub);border-radius:10px}
.mood .v2-bar-share svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(hover:hover){.mood .v2-bar-share:hover{border-color:var(--b-on-dark);background:rgba(245,242,234,.08)}}
.mood .v2-bar-share:active{background:rgba(245,242,234,.16)}
.mood .v2-bar-status{position:absolute;right:0;bottom:calc(100% + 16px);max-width:100%;margin:0;padding:8px 12px;border-radius:8px;
  background:var(--b-dark);color:var(--b-on-dark)}
.mood .v2-bar-status:empty{display:none}
body.mood.v2-bar-room::after{content:"";display:block;height:calc(64px + env(safe-area-inset-bottom));background:var(--b-dark)}
@media(prefers-reduced-motion:reduce){.mood .v2-bar,.mood .v2-bar.on{transition:none}}
/* T-mkt-22 §8: Alan's formal portrait (tools/make-portrait.py). At most 360 CSS px
   wide on /about/: the 2x file is 720 px, never enlarged. */
.mood .page-portrait picture{display:block}
.mood .v2-alan picture,.mood .go-who picture{display:contents}
/* ...and <source> is not hidden by the browser: as a flex item it would take a gap. */
.mood .v2-alan source,.mood .go-who source{display:none}
.mood .page-head-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:56px;align-items:start}
.mood .page-head-grid .page-head-text{grid-column:1;grid-row:1}
.mood .page-portrait{grid-column:2;grid-row:1;margin:14px 0 0;border-radius:16px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.45)}
.mood .page-portrait img{display:block;width:100%;height:auto}
.mood .page-photo figcaption{margin-top:10px;color:var(--b-sub)}
@media(max-width:900px){
  .mood .page-head-grid{grid-template-columns:1fr;gap:0}
  .mood .page-head-grid .page-head-text,.mood .page-portrait{grid-column:1;grid-row:auto}
  .mood .page-portrait{max-width:280px;margin:0 0 28px}
}

/* ── T-mkt-37: the homepage in story order (Alan, 15 Oct: "send it") ──────────
   From "Homepage - Story Order Mock-up - 20261015.html": its mk- styles as site
   CSS. Text sizes are type.css's five steps, never set here. */
/* The hero's lead: three numbered steps, the numbers in a gold ring. */
.mood .b-steps{list-style:none;counter-reset:b-step;padding:0;margin:18px 0 26px;display:grid;gap:10px}
.mood .b-steps li{counter-increment:b-step;display:flex;align-items:baseline;gap:12px;line-height:1.4;color:var(--b-on-dark)}
.mood .b-steps li::before{content:counter(b-step);flex:none;font-family:var(--display);font-weight:600;line-height:26px;width:26px;height:26px;
  border-radius:50%;border:1.5px solid var(--b-gold);color:var(--b-gold);text-align:center;transform:translateY(-1px)}
/* The hero card: its tag is a question, in sentence case. */
.mood .b-ex-q{text-transform:none;letter-spacing:0;color:var(--b-ink)}
.mood .b-ex-get{margin-top:16px}
/* How a class runs: the folded-in closing line. */
.mood .b-cr-close{margin:28px 0 0;max-width:46em}
/* Find your role: three cards, stacking below 900px. Each card is one link. */
.mood .b-roles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:24px}
.mood .b-role{position:relative;display:flex;flex-direction:column;background:var(--b-alt);border:1px solid var(--b-rule);border-radius:14px;padding:20px;color:var(--b-ink)}
.mood .b-role:hover{border-color:var(--b-ink)}
.mood .b-role-name{font-family:var(--display);font-weight:600;line-height:1.25;margin:0 0 10px}
.mood .b-role-pain{line-height:1.45;margin:0 0 10px;font-weight:600}
.mood .b-role-ai{line-height:1.5;color:var(--b-sub);margin:0 0 14px;flex:1}
.mood .b-role-ai b{color:var(--b-ink)}
.mood .b-role-go{font-weight:600;color:var(--b-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--b-line);text-decoration-thickness:2px;
  min-height:44px;display:inline-flex;align-items:center;gap:6px}
@media(max-width:900px){.mood .b-roles{grid-template-columns:1fr}}
/* Where is your team today?: four cards in a row, two by two below 1000px, and
   below 640px a swipe row (the next card peeking) the keyboard can scroll. The
   page itself never scrolls sideways: the row's negative margin stays inside
   the page's own side margin. */
.mood .b-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:28px}
.mood .b-cards:focus-visible{outline:3px solid var(--b-ink);outline-offset:4px;border-radius:14px}
.mood .b-card{background:var(--b-page);border:1px solid var(--b-rule);border-top:4px solid var(--b-line);border-radius:14px;padding:20px 20px 18px;
  display:flex;flex-direction:column;box-shadow:0 4px 18px rgba(0,0,0,.04)}
.mood .b-card-stage{font-weight:600;line-height:1.3;letter-spacing:.04em;text-transform:uppercase;color:var(--b-sub);margin:0 0 8px}
.mood .b-card-who{line-height:1.5;color:var(--b-sub);margin:0 0 14px;flex:1}
.mood .b-card h3{line-height:1.25;margin:0 0 6px}
.mood .b-card h3{color:var(--b-ink);display:flex;align-items:center;min-height:44px}
.mood .b-card-price{font-family:var(--display);font-weight:700;line-height:1.2;color:var(--b-ink);margin:0 0 2px}
.mood .b-card-price small{font-family:var(--body);font-weight:600;color:var(--b-sub)}
.mood .b-card-facts{line-height:1.45;color:var(--b-sub);margin:0 0 16px;min-height:2.9em}
.mood .b-card-go{font-weight:600;color:var(--b-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--b-line);
  text-decoration-thickness:2px;padding:6px 0;min-height:44px;display:inline-flex;align-items:center;gap:6px}
.mood .b-cards-hint{display:none}
/* T-mkt-41 (Alan, 18 Oct): one card, one action, the whole card clickable. The
   card's one link is stretched over it (::after, inset 0) - the card is not
   wrapped in a link, so the accessible name stays the short link text. Hover
   lifts the card (not under reduced motion); keyboard focus rings the WHOLE
   card: the link's own ring moves to its ::after, which is the card's shape.
   Offset 0, so the ring fits inside the swipe row's 4px padding on a phone,
   where an outset ring would be clipped by the scroller. */
.mood .b-card{position:relative;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.mood .b-card-go::after,.mood .b-role-go::after{content:"";position:absolute;inset:0;border-radius:13px}
.mood .b-card:hover{border-color:var(--b-ink);border-top-color:var(--b-line);box-shadow:0 8px 24px rgba(0,0,0,.08);transform:translateY(-2px)}
/* Hover on light: the card's link underline thickens, in ink. */
.mood .b-card:hover .b-card-go,.mood .b-role:hover .b-role-go{text-decoration-thickness:3px}
.mood .b-card-go:focus-visible,.mood .b-role-go:focus-visible{outline:none}
.mood .b-card-go:focus-visible::after,.mood .b-role-go:focus-visible::after{outline:3px solid var(--b-ink);outline-offset:0}
@media(prefers-reduced-motion:reduce){.mood .b-card{transition:none}.mood .b-card:hover{transform:none}}
/* The line under the cards: its link is a 44px tap target like the cards' own. */
.mood .stages-under .text-link{min-height:44px}
@media(max-width:1000px){.mood .b-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
  .mood .b-cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:24px -16px 0;padding:4px 16px 12px;
    scroll-padding:0 16px;scrollbar-width:none}
  .mood .b-cards::-webkit-scrollbar{display:none}
  .mood .b-card{flex:0 0 82%;scroll-snap-align:start}
  .mood .b-cards-hint{display:block;margin:4px 0 0;color:var(--b-sub)}
}

/* The pages' WhatsApp line for questions, under a sign-up: the site's text link,
   a 44px tap target (T-mkt-43 #9). */
.mood .signup-ask .text-link{min-height:44px}
/* The role pages: the seminar's line above "Reserve a seat" (marketing, 16 Oct). */
.mood .signup-now{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.mood .signup-what{margin:0;color:var(--b-sub);font-weight:600}

/* ── T-mkt-43: the visual QA of 18 Oct ("Visual QA - 20261018/_findings.md") ── */
/* #1: the notes' column (On this page, the starting-point card) sticks while the
   whole of it fits the window - build.py's ASIDE_JS adds .fits, a safeguard for a
   short window - and otherwise scrolls with the page, never with its foot out of sight. */
@media(min-width:901px){
  .mood .note-aside .aside{position:static}
  .mood .note-aside .aside.fits{position:sticky}
}

/* #2: the note's card as page text, in direction B - the dark band, a gold line
   on top, gold numbers - from the note's own `card:` (build.py note_card). Sizes
   are type.css's steps; Plex 400 and 600, Poppins 600. */
.mood .note-card{position:relative;overflow:hidden;background:var(--b-dark);color:var(--b-on-dark);border-radius:14px;padding:30px 32px}
.mood .note-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--b-gold)}
.mood .note-card .eyebrow{margin:0 0 10px;color:var(--b-gold);font-weight:600;line-height:1.4}
.mood .note-card-h{margin:0 0 18px;font-family:var(--display);font-weight:600;line-height:1.15;letter-spacing:-.02em;color:var(--b-on-dark);text-wrap:balance}
.mood .note-card-list{list-style:none;counter-reset:note-card;margin:0;padding:0;display:grid;gap:10px}
/* The number hangs in the padding; a line that wraps is balanced, so no word is
   left alone on its last line ("write-up?" was, with text-wrap:pretty). */
.mood .note-card-list li{counter-increment:note-card;position:relative;padding-left:2.1em;line-height:1.45;color:var(--b-on-dark);text-wrap:balance}
.mood .note-card-list li::before{content:counter(note-card);position:absolute;left:0;top:0;font-family:var(--display);font-weight:600;color:var(--b-gold)}
@media(max-width:700px){.mood .note-card{padding:24px 20px}}

/* #3, #9: the closing buttons in one row on one baseline; the seminar's line above
   the row and the question under it (next_build.py). On a phone they stack, each
   the full width, so the two are the same width. A dated wrapper is not a box. */
.mood .page-actions .welcome-actions{margin-top:0;align-items:center;gap:14px 16px}
.mood .welcome-actions>[data-until],.mood .page-signup>[data-until]{display:contents}
.mood .page-actions .signup-what{margin:0 0 14px}
.mood .page-actions .signup-ask{margin:10px 0 0}
@media(max-width:700px){.mood .page-actions .welcome-actions{flex-direction:column;align-items:stretch}}

/* #4: /seminar/'s head - "Reserve a seat" a solid button, the question under it. */
.mood .page-signup{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:18px}
.mood .page-signup .signup-ask{margin:0}

/* T-mkt-47: the registration close inside a card's facts line, on a line of its
   own; the seats line under "Reserve a seat", shown only once the portal answers
   (seats.js - hidden, and empty, until then). */
.mood .reg-close{display:block}
.mood .seats-line{margin:0;font-weight:600;color:var(--b-ink)}
.mood .b-card .seats-line{margin:0 0 12px}

/* T-mkt-51: the seminar's dates as a choice (next_build.py choices()) while more
   than one is offered - side by side where there is room, each its date, its own
   "Reserve a seat", its seats line and, for a date that has one, its close. In a
   card the link is the card's link style, not stretched over the card. */
.mood .seminar-choices{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:14px 32px}
.mood .seminar-choice{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin:0;padding:0}
.mood .seminar-choice p{margin:0}
.mood .choice-date{font-weight:600;color:var(--b-ink)}
.mood .choice-close{color:var(--b-sub)}
.mood .b-card .seminar-choices,.mood .card4 .seminar-choices{flex-direction:column;gap:10px}
.mood .b-card .seminar-choice,.mood .card4 .seminar-choice{gap:0}
.mood .b-card-choice{font-weight:600;color:var(--b-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--b-line);
  text-decoration-thickness:2px;min-height:44px;display:inline-flex;align-items:center;gap:6px}
.mood .page-details .seminar-choices{margin:0 0 1em}
.mood .page-actions .seminar-choices{margin:0 0 14px}

/* #5, #6: the one footer. Both paragraphs the column's width; the links a wrapping
   row without separators (no stranded middle dot), each kept whole, and a 44px tap
   target on a phone. */
.mood .footer-about p{margin:0 0 10px}
.mood .footer-about p:last-child{margin-bottom:0}
.mood .footer-links,.mood .footer-contact{display:flex;flex-wrap:wrap;align-content:flex-start;gap:4px 20px}
.mood .footer-links a,.mood .footer-contact>*{white-space:nowrap}
@media(max-width:700px){
  .mood .footer-grid>*+*{margin-top:23px}
  .mood .footer-links{gap:0 20px}
  .mood .footer-links a,.mood .footer-contact a{display:inline-flex;align-items:center;min-height:44px}
  .mood .footer-contact{align-items:center;gap:0 20px}
}

/* #8: /about/'s "Talk to me" - links in a sentence, underlined 3px under the
   words as the site's other in-text links are; the padding is a taller tap area
   that does not open the lines. */
.mood .page-talk a{color:var(--b-ink);text-decoration:underline;text-underline-offset:3px;padding-block:11px}

/* #14: the notes index - the newest note widens until the last row is full
   (build.py lead_span), three across only. */
@media(min-width:901px){
  .mood .insights .insight-span-2{grid-column:span 2}
  .mood .insights .insight-span-3{grid-column:1/-1}
  .mood .insights :is(.insight-span-2,.insight-span-3)>*{max-width:var(--b-measure)}
}

/* T-mkt-45 (Alan, 19 Oct: gold only on dark). The site's focus ring is ink on
   the light page (mood.css, 19:1 on white) and stays gold inside the dark bands
   (9.6:1 on #0B0B0A). Same width and offset; only the colour changes. */
.mood :where(.masthead,footer,.b-hero,.alan-band,.b-close,.cta,.b-cr-method,.v2-s1-band,.v2-rhead,.v2-rnext,.v2-bar,.note-card) :is(a,button):focus-visible{outline-color:var(--b-gold)}
/* A light box inside a dark band (the tool's error note in screen 1's box) keeps the ink ring. */
.mood .note-card-tool a:focus-visible{outline-color:var(--b-line)}

/* Five text sizes, and only five (Alan, 12 Oct: "too many different sizes";
   the visual check counted 29 on the homepage). The build takes every other
   font size out of site.css, so this sheet alone decides them; it may use only
   the five steps below, or inherit. Nothing on the site is smaller than 14px.

     small  footer, dates, tags, hints, captions, facts, the header menu
     body   paragraphs, lists, buttons, form fields, the tool's cards
     lead   lead lines, h3, card titles, quotes, the brand
     h2     section headings
     h1     page titles
   The allowed sizes, weights and faces are written once, in tools/test_type_scale.py. */
body.mood{--t-small:15px;--t-body:18px;--t-lead:21px;--t-h2:36px;--t-h1:60px;font-size:var(--t-body);line-height:1.65}
@media(max-width:700px){body.mood{--t-small:14px;--t-body:17px;--t-lead:19px;--t-h2:28px;--t-h1:38px}}

/* Headings, by level. */
.mood h1{font-size:var(--t-h1)}
/* T-mkt-42 (18 Oct): the homepage heading is on the scale, the h1 step like
   every other page (60px at 1280, 38px on a phone), not fluid. It wraps to four
   lines in the hero column at 1280, and the gold button still clears the fold
   at 1280x900 and 390x844 (tools/test_type_scale.py names the steps). */
.mood h2{font-size:var(--t-h2)}
.mood h3,.mood h4{font-size:var(--t-lead)}

/* Form controls and code do not inherit by default. */
.mood button,.mood input,.mood select,.mood textarea{font-size:var(--t-body)}
.mood code,.mood small,.mood sup,.mood sub{font-size:inherit}

/* lead */
.mood .brand,
.mood .lead,.mood .b-lead,.mood .page-lead,.mood .short-answer p,.mood .tool-intro,
.mood .quote,.mood .page-quote,.mood .alan-band .quote,.mood .door-state,
.mood .b-close p,.mood .rep-q,.mood .leave-pop h2,.mood .result h2,
.mood .b-cr-q{font-size:var(--t-lead)}
.mood .short-answer p.short-label{font-size:var(--t-small)}

/* h2 size on a panel standing in for a photo: one line of copy, set large. */
.mood .paper-panel p{font-size:var(--t-h2)}

/* small */
.mood footer,.mood time,.mood .facts,.mood .article-meta,.mood .hint,.mood .b-small,.mood .b-for,
.mood .b-trust,.mood .b-kicker,.mood .b-ex-cap,.mood figcaption,.mood .eyebrow,.mood .cred,.mood .credential,
.mood .rep-meta,.mood .rep-card,.mood .rep-tag,.mood .rep-more-line,.mood .pcard .eg,.mood .pillar-label,.mood .nav-links,
.mood .toc a,.mood .toc-head,.mood .aside-card h2,.mood .article-body table,.mood .image-caption,
.mood .motion-control,.mood .audience,.mood .trust-line,.mood .v2-nudge,.mood .v2-consent,
.mood .stage-name,.mood .v2-chip,.mood .v2-rtag,.mood .v2-start,.mood .v2-rlabel,.mood .v2-take,
.mood .v2-tic,.mood .sp-side,.mood .v2-note,.mood .v2-get-top,.mood .v2-get-tag,.mood .v2-src,.mood .v2-alan-cred,.mood .v2-example figcaption,
.mood .v2-send-for,.mood .v2-bar-status,.mood .pager-dir,
.mood .b-cr-label,.mood .b-cr-sub,.mood .b-cr-tags,.mood .b-cr-inputs,.mood .b-cr-steps p,.mood .b-cr-num,
.mood .b-did,
.mood .b-ex-ctx,.mood .b-ex-mlabel,.mood .b-ex-pin,.mood .b-ex-day,.mood .b-ex-keys,.mood .b-ex-after,.mood .b-ex-pain,.mood .b-ex-ready,
.mood .b-hero-ex .v2-rdo li,.mood .b-hero-ex .v2-get-title,.mood .b-hero-ex .v2-get-line,
.mood .v2-s1-kicker,.mood .v2-s1-trust,.mood .v2-s1-how,.mood .v2-s1-n,.mood .v2-s1-getline,
.mood .v2-ask-label,.mood .v2-staff legend,.mood .v2-pill span,.mood .v2-ask-fine,.mood .v2-s1-say{font-size:var(--t-small)}
/* Starting Point screen 1: its question is set at the h2 step, like every other
   question in the tool (.qtext) - T-mkt-42 put it on the scale (it was a fluid
   46px at 1280); the lead at body size. */
.mood .v2-s1-band .v2-s1-h{font-size:var(--t-h2)}
.mood .v2-s1-lead{font-size:var(--t-body)}
/* How a class runs: the step names in the dark panel are h4s, set at body size. */
.mood .b-cr-steps h4{font-size:var(--t-body)}
/* The arrow between the result cards is a glyph, at lead size. */
.mood .v2-rarrow{font-size:var(--t-lead)}
/* The close button's x is a glyph, not text: lead size reads as a button. */
.mood .leave-x{font-size:var(--t-lead)}

/* T-mkt-37, the homepage in story order. The mock-up's sizes, set to the
   nearest of the five steps: the hero's three steps at body size (the mock-up
   had 19px, 17px on a phone); in the cards, the price is the largest line, so
   the programme name drops to body size under it. */
.mood .b-steps li,.mood .b-role-pain,.mood .b-card h3{font-size:var(--t-body)}
.mood .b-role-name,.mood .b-card-price{font-size:var(--t-lead)}
.mood .b-steps li::before,.mood .b-role-ai,.mood .b-role-go,.mood .b-card-stage,.mood .b-card-who,
.mood .b-card-price small,.mood .b-card-facts,.mood .b-card-go,.mood .b-cards-hint{font-size:var(--t-small)}
/* T-mkt-38: the seminar card's WhatsApp link, under its form link. */
/* The role pages' seminar line, above its button. */
.mood .signup-what{font-size:var(--t-small)}
/* T-mkt-47: the seminar's seats line, under "Reserve a seat". */
.mood .seats-line{font-size:var(--t-small)}
/* T-mkt-51: a seminar date choice - small in a card, like the card's facts and
   link; elsewhere its close line is small, like the seats line. */
.mood .b-card .seminar-choice,.mood .card4 .seminar-choice,.mood .choice-close{font-size:var(--t-small)}
/* T-mkt-43 #2: the note's card - its heading at the h2 step, as on a panel standing
   in for a picture; the eyebrow is small (.eyebrow), the lines body size. */
.mood .note-card-h{font-size:var(--t-h2)}