/* Earleads layer on top of Kenza's styles (loaded after hers on every page, see src/lib/kenza.js).
   Othmane, 2026-10-28: the article reads as one page on the brown ground, not a stack of boxes.
   No glass containers (cover, summary, table of contents, case study, bio, related), no gold traces: cream ink and cream hairlines,
   the site's own colours. Her files stay untouched so a re-import never loses this. */

/* ---- Article ---- */
.ar { --c: 255, 250, 240; }
.ar .card-glass, .ar .card-glass::before { background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; }
.ar .card-glass::before { content: none !important; }

.ar-cover { margin-top: 40px; padding: 0; border-radius: 0; }
.ar-cover img { border-radius: 12px; }

/* summary: the lead paragraph of the article, with its label */
.ar-summary { margin: 0 0 44px; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.ar-summary small { margin-bottom: 10px; color: rgba(var(--c), .55); }
.ar-summary p { font-size: 19px; line-height: 31px; letter-spacing: -.005em; color: rgb(var(--c)); }

.ar .prose, .ar .prose p, .ar .prose li { color: rgba(var(--c), .82); }
.ar .prose h2, .ar .prose h3, .ar .prose strong, .ar .prose th { color: rgb(var(--c)); }
.ar .prose li::marker { color: rgba(var(--c), .5); }
/* links: same ink as the text, the underline only gets stronger on hover (no colour flip) */
.ar .prose a { color: rgb(var(--c)); text-decoration-color: rgba(var(--c), .38); transition: text-decoration-color .2s; }
.ar .prose a:hover { color: rgb(var(--c)); text-decoration-color: rgb(var(--c)); }
.ar .prose code { background: rgba(var(--c), .1); color: rgb(var(--c)); }
/* diagrams: white like the drawing itself, small corners */
.ar .prose img { padding: 14px; border-radius: 6px; background: #FFFFFF; box-shadow: 0 1px 2px rgba(20, 10, 6, .2); }
.ar .prose p > em:only-child, .ar .prose img + em { color: rgba(var(--c), .55); }
.ar .prose blockquote { margin-left: 0; padding-left: 18px; box-shadow: inset 2px 0 0 rgba(var(--c), .3); color: rgba(var(--c), .82); }
/* tables: rows on the ground, hairlines instead of a white box */
.ar .prose table { border-radius: 0; background: none; box-shadow: inset 0 -1px 0 rgba(var(--c), .14); color: rgba(var(--c), .82); }
.ar .prose th { background: none; box-shadow: inset 0 -1px 0 rgba(var(--c), .3); padding-left: 0; }
.ar .prose td { box-shadow: inset 0 1px 0 rgba(var(--c), .12); padding-left: 0; }

/* table of contents: a quiet column on the right, the section being read gets the cream rule */
.ar-toc { padding: 0; border-radius: 0; }
.ar-toc h2 { color: rgba(var(--c), .5); }
.ar-toc a { color: rgba(var(--c), .58); box-shadow: inset 1px 0 0 rgba(var(--c), .16); }
.ar-toc a:hover { color: rgb(var(--c)); }
.ar-toc a.on { color: rgb(var(--c)); box-shadow: inset 2px 0 0 rgb(var(--c)); }

/* case study, FAQ, bio: sections of the page separated by hairlines */
.ar-case { margin-top: 64px; padding: 32px 0 0; border-radius: 0; box-shadow: inset 0 1px 0 rgba(var(--c), .16) !important; }
.ar-case h2, .ar-faq > h2, .ar-bio h3, .ar-faq summary { color: rgb(var(--c)); }
.ar-case p, .ar-case .done-line { color: rgba(var(--c), .66); }
.ar-case form { background: rgba(var(--c), .08); box-shadow: inset 0 0 0 1px rgba(var(--c), .2); }
.ar-case select, .ar-case input { color: rgb(var(--c)); }
.ar-case input::placeholder { color: rgba(var(--c), .5); }
.ar-case select { box-shadow: inset -1px 0 0 rgba(var(--c), .18);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' fill='none' stroke='%23FFFAF0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ar-case select option { color: #2B2625; }
.ar-case button { background: #FFFAF0; color: #2B2625; }
.ar-faq details { box-shadow: inset 0 -1px 0 rgba(var(--c), .14); }
.ar-faq details p { color: rgba(var(--c), .75); }
.ar-bio { margin-top: 64px; padding: 32px 0 0; border-radius: 0; box-shadow: inset 0 1px 0 rgba(var(--c), .16) !important; }
.ar-bio small { color: rgba(var(--c), .5); }
.ar-bio p { color: rgba(var(--c), .72); }
.ar-bio a { color: rgb(var(--c)); text-decoration: underline; text-decoration-color: rgba(var(--c), .38); text-underline-offset: 3px; }
.ar-bio a:hover { text-decoration-color: rgb(var(--c)); }

/* keep reading: cover, topic, title, straight on the ground */
.rel a { border-radius: 0; }
.rel .c { margin: 0; border-radius: 12px; background: rgba(var(--c), .06); }
.rel .t { padding: 16px 0 0; }
.rel small { color: rgba(var(--c), .55); }
.rel strong { color: rgb(var(--c)); }
.ar-related > h2 { color: rgb(var(--c)); }
@media (max-width: 720px) { .ar-cover { padding: 0; } .ar-case select { box-shadow: inset 0 -1px 0 rgba(var(--c), .18); } }

/* ---- Blog cards: no gold kicker either ---- */
.post-kicker { color: rgba(255, 250, 240, .6) !important; }

/* ---- Home FAQ: the answer sits in the page, no box around it ---- */
.faq-box { margin: 0 0 26px; padding: 0 48px 0 0; border-radius: 0; background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; }
.faq-box::before { content: none !important; }

/* ---- Home section 4: every tab is a recording painted on the page ground (scripts/rec/); no glass card, a clear cream border
   around the frame (Othmane, 2026-10-28: "a bit more emphasized") ---- */
.fp-stage { border-radius: 16px; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .5); }
.fp-stage::before { content: none; }
.fp-stage::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 250, 240, .34); pointer-events: none; }
.fp-panel:has(.fp-rec) { inset: 0; border-radius: 16px; box-shadow: none; }
@media (max-width: 720px) { .fp-panel:has(.fp-rec) { inset: 0; border-radius: 12px; } .fp-stage { border-radius: 12px; } }

/* ---- Forms: no gold halo when a field is focused (Othmane, 2026-10-28), a thin cream line keeps the focus visible ---- */
.audit-bar:focus-within { box-shadow: 0 0 0 1px rgba(255, 250, 240, .5), 0 18px 40px -18px rgba(0, 0, 0, .35); }
.ft-form:focus-within, .pf-form:focus-within { box-shadow: 0 0 0 1px rgba(255, 250, 240, .5), 0 14px 28px -14px rgba(40, 16, 4, .5); }
.modal-form input:focus { box-shadow: 0 0 0 1px rgba(255, 250, 240, .5); }
.pf-pt:focus-visible { outline-color: rgba(255, 250, 240, .8); }

/* ---- Home section 2 "How we make LLMs your best sales" (Othmane, 2026-10-28): the ChatGPT answer, the Slack alert and the CRM task
   keep their layout and Kenza's scroll choreography, but lose the apps' own colours (white, Slack purple, HubSpot orange, blue buttons,
   emoji) AND any window fill: like the section 4 cards, the page's own background shows through, a clear cream border frames it,
   cream ink in three strengths, cream hairlines, gold only for us. ---- */
.story { --c: 255, 250, 240; --g: 217, 168, 94; }
.story .chat { background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  box-shadow: inset 0 0 0 1px rgba(var(--c), .34) !important; border-radius: 16px; color: rgba(var(--c), .82); }
.story .chat * { color: inherit !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; border-color: rgba(var(--c), .16) !important; }
/* strong ink */
.story .chat :is(b, strong, h4, h5, .cg-h, .sl-h, u, .sl-title, .sl-team, .sl-mhd b, .sl-co, .cg-tr.head, .cg-tr > :first-child, .cg-logo, .sl-tabs .on, .sl-side p.on, .sl-ri.on) { color: rgb(var(--c)) !important; }
/* quiet ink */
.story .chat :is(small, .cg-time, .cg-thought, .cg-note, .cg-chip, .cg-chip span, .sl-desc, .cg-input > span, .cg-input em, .cg-mcomp > span, .sl-compose, .sl-ctools, .sl-tabs span, .sl-side p, .sl-side h5, .sl-ri, .sl-nav, .sl-search, .sl-help, .sl-tools, .cg-status, .sl-ind) { color: rgba(var(--c), .58) !important; }
.story .chat .sl-ind { color: rgba(var(--c), .7) !important; }
/* window chrome */
.story .window-bar, .story .chat .sl-top { box-shadow: inset 0 -1px 0 rgba(var(--c), .14) !important; }
.story .window-bar i, .story .chat .sl-lights i { visibility: hidden; }   /* no window buttons: it is part of the page, not an app window */
.story .chat .gpt-side { box-shadow: inset -1px 0 0 rgba(var(--c), .12) !important; }
.story .chat .sl-rail { box-shadow: inset -1px 0 0 rgba(var(--c), .1) !important; }
.story .chat .sl-side { box-shadow: inset -1px 0 0 rgba(var(--c), .1) !important; }
.story .chat .sl-search { box-shadow: inset 0 0 0 1px rgba(var(--c), .16) !important; }
/* tiles that carry a mark or a letter */
.story .chat :is(.gpt-avatar, .sl-me, .sl-dm.app, .sl-av.app, .sl-ws) { background-color: rgba(var(--c), .12) !important; color: rgb(var(--c)) !important; }
.story .chat :is(.sl-ri.on b, .sl-side p.on, .cg-seg b) { background-color: rgba(var(--c), .1) !important; }
.story .chat :is(.sl-ri em, .sl-side h5 em, .sl-side .sl-h em) { background-color: rgba(var(--c), .2) !important; color: rgb(var(--c)) !important; }
/* the question bubble, the inputs, the buttons */
.story .chat .cg-q { background-color: rgba(var(--c), .1) !important; color: rgb(var(--c)) !important; }
.story .chat :is(.cg-input, .cg-mcomp, .cg-down, .cg-logo, .cg-mbtn, .cg-seg, .sl-compose) { box-shadow: inset 0 0 0 1px rgba(var(--c), .2) !important; }
.story .chat :is(.cg-input b, .cg-mcomp b) { background-color: rgb(var(--c)) !important; color: #2B2625 !important; }
/* nothing hides the answer under the "Ask anything" bar any more, so the answer fades out just above it */
@media (min-width: 721px) { .story .chat .pane-1 .cg-col {   /* the bar sits ~428px down the pane: the answer is whole above 380px, gone by 425px */
  -webkit-mask-image: linear-gradient(#000 380px, transparent 425px); mask-image: linear-gradient(#000 380px, transparent 425px); } }
.story .chat .sl-btns span, .story .chat .sl-ctools b { box-shadow: inset 0 0 0 1px rgba(var(--c), .24) !important; border-color: transparent !important; color: rgb(var(--c)) !important; }
.story .chat .sl-tabs .on { box-shadow: inset 0 -2px 0 rgb(var(--c)) !important; }
.story .chat .sl-links a { color: rgb(var(--c)) !important; text-decoration: underline; text-decoration-color: rgba(var(--c), .4); text-underline-offset: 2px; }
.story .chat .cg-col u { text-decoration-color: rgba(var(--c), .45); }
.story .chat .sl-app { box-shadow: inset 0 0 0 1px rgba(var(--c), .3) !important; color: rgba(var(--c), .7) !important; }
/* gold: only what is ours / AI */
.story .chat .cg-tr.pick { background-color: rgba(var(--g), .16) !important; box-shadow: inset 2px 0 0 rgb(var(--g)) !important; }
.story .chat .cg-chip { box-shadow: inset 0 0 0 1px rgba(var(--c), .2) !important; }
.story .chat .cg-chip i { background-color: rgb(var(--g)) !important; }
.story .chat .sl-att { box-shadow: inset 2px 0 0 rgb(var(--g)) !important; }
.story .chat .sl-ctx { background-color: rgba(var(--c), .06) !important; color: rgba(var(--c), .8) !important; }
/* app logos in one ink, the photo warmed to the page */
.story .chat :is(.gpt-side img, .sl-co img) { filter: brightness(0) invert(1); opacity: .85; }
.story .chat :is(img.sl-av, img.sl-dm) { filter: grayscale(1) sepia(.35) brightness(.95); }
/* phone battery and status icons */
.story .chat .cg-batt { box-shadow: inset 0 0 0 1px rgba(var(--c), .4) !important; } .story .chat .cg-batt i, .story .chat .cg-batt::after { background-color: rgba(var(--c), .7) !important; }
@media (max-width: 720px) {
  /* each step is its own window on a phone: the same dark glass and cream border */
  .story .chat .pane, .story .chat .pane-1 { background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    box-shadow: inset 0 0 0 1px rgba(var(--c), .34) !important; border-radius: 14px; }
  .story .chat .pane::before { background: none !important; box-shadow: none !important; }
  .story .chat .sl-mhead { box-shadow: inset 0 -1px 0 rgba(var(--c), .14) !important; }
}
/* the CRM logo was an orange tile; in one ink it turned into a solid square, so the task gets an outlined checkbox instead */
.story .chat .sl-co img { display: none; }
.story .chat .sl-att .sl-co::before { content: ""; width: 11px; height: 11px; flex-shrink: 0; border-radius: 3px; box-shadow: inset 0 0 0 1.5px rgba(var(--c), .75); }
/* icons drawn with the apps' own colours in their markup: back to the page's ink */
.story .chat [stroke="#3A6FE0"] { stroke: rgb(var(--c)) !important; }
.story .chat [stroke="#C9C9C9"] { stroke: rgba(var(--c), .3) !important; }
.story .chat [stroke="#0D0D0D"] { stroke: currentColor !important; }
.story .chat [fill="#0D0D0D"] { fill: currentColor !important; }

/* section 4 title (Othmane, 2026-10-28): the longer line sits on two balanced lines on desktop */
@media (min-width: 1025px) { .fp-head { max-width: 1080px; } .fp-head h2 { text-wrap: balance; } }

/* article (Othmane, 2026-10-28): no contents panel, one centred column; title block centred over it, cover a little wider */
.ar-layout { grid-template-columns: minmax(0, 720px); justify-content: center; }
.ar-crumbs, .ar-head { width: min(860px, 100%); margin-left: auto; margin-right: auto; }
.ar-crumbs, .ar-by { justify-content: center; }
.ar-head { text-align: center; }
.ar-cover { position: relative; width: min(720px, 100%); margin-left: auto; margin-right: auto; border-radius: 16px; }

/* section 2 mock-ups: their h4/h5 became plain text (not page headings), same look as Kenza's h4/h5 */
.cg-col .cg-h { margin: 6px 0 8px; font-size: 13.5px; line-height: 20px; font-weight: 600; }
.sl-side .sl-h { display: flex; align-items: center; margin: 10px 0 2px; padding: 0 8px; font-size: 11.5px; line-height: 18px; font-weight: 700; }
.sl-side .sl-h em { margin-left: auto; min-width: 16px; padding: 0 5px; border-radius: 8px; font: normal 700 9.5px/15px var(--font-body); text-align: center; }

/* 404, in the blog's ground and type */
.nf { display: flex; flex-direction: column; align-items: center; gap: 16px; width: min(720px, 100% - 40px); margin: 0 auto; padding: 220px 0 200px; text-align: center; }
.nf small { font: 500 12px/16px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 250, 240, .6); }
.nf h1 { margin: 0; font: 500 56px/62px var(--font-display); letter-spacing: -.04em; color: rgb(255, 250, 240); text-wrap: balance; }
.nf p { max-width: 520px; margin: 0; font-size: 18px; line-height: 28px; color: rgba(255, 250, 240, .72); }
.nf .go { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px; margin-top: 12px; }
.nf .go a:not(.glass-btn) { color: rgb(255, 250, 240); text-decoration: underline; text-decoration-color: rgba(255, 250, 240, .4); text-underline-offset: 3px; }
@media (max-width: 720px) { .nf { padding: 160px 0 120px; } .nf h1 { font-size: 36px; line-height: 42px; } }

/* proof chart pager (home): each step keeps its look but gets a 24px+ tap area (WCAG 2.2 target size) */
.pf-pager button { position: relative; }
.pf-pager button::after { content: ""; position: absolute; inset: -8px -6px; }
/* article cover (Othmane, 2026-10-28): the width of the text column, framed by the same 1px cream line as the home sections */
.ar-cover img { aspect-ratio: 16 / 9; border-radius: 16px; }
.ar-cover::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 250, 240, .34); pointer-events: none; }
/* width/height attributes give the ratio only; the CSS decides the size */
.ar-cover img, .ar .prose img { height: auto; }

/* section 4 (Othmane, 2026-10-28): same intensity as the attribution dashboard: the recording sits a little back on the
   page ground (its ground shows the page through), hairline frame, no drop shadow */
.fp-stage { box-shadow: none; }
.fp-stage::after { box-shadow: inset 0 0 0 1px rgba(255, 250, 240, .2); }
.fp-panel .fp-rec { opacity: .74; }

/* centred section titles (Othmane, 2026-10-28): lines of even length, no single word left alone on the last line.
   The left-aligned "How companies that raised $900M" title keeps its own breaks. */
.imp-head h2, #s2-title, #faq-title { text-wrap: balance; }

/* article pages: her top ground fades out while the fixed brown ground only fades in ~700px down, so a light area sat
   right behind the summary and first paragraphs (cream text on it: too little contrast). Articles read on the brown
   ground from the top, like the home sections. */
body:has(article.ar) .top-fond { display: none; }
body:has(article.ar) .page-dark { -webkit-mask: none; mask: none; }
/* her nav ink follows the ivory top ground that articles no longer have: keep it cream there */
body:has(article.ar) .top { --ink: 255, 250, 240 !important; --k: 0 !important; }

/* phones (Othmane, 2026-10-28): text scrolled under the floating logo collided with it. Scroll-edge fade behind the header,
   in the page brown, shown once the page has moved (no change at the very top) */
@media (max-width: 720px) {
  .top::before { content: ""; position: fixed; left: 0; right: 0; top: 0; height: 92px; z-index: -1; pointer-events: none;
    background: linear-gradient(rgba(44, 28, 23, .94), rgba(44, 28, 23, .72) 55%, rgba(44, 28, 23, 0));
    opacity: 0; transition: opacity .3s ease; }
  html.k-scrolled .top::before { opacity: 1; }
}
@media (max-width: 720px) and (prefers-reduced-motion: reduce) { .top::before { transition: none; } }

/* section 4 on phones (Othmane, 2026-10-28): the recordings have phone versions (scripts/rec/m.css, 400 × 520, readable
   text), swapped in by k-wire.js; the card takes their proportion */
@media (max-width: 720px) { .fp-stage { aspect-ratio: 400 / 520; } }
/* footer call to action on phones: "See where your / brand / could leave / its mark." → even lines */
@media (max-width: 720px) { .ft-card h2 > span, .ft-card > p { text-wrap: balance; } }
/* proof chart points: same 24px+ tap area */
.pf-pt::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; }