/* Dated guides (scripts/gen-dated-guides.mjs). Layout 1 is the article page
   as it was ("Before"); 2 and 3 are switcher options set as data-gl on <html>
   by guide-switchers.js. Without that script nothing here changes the page. */

/* Parts only the new layouts show. */
.g-rail, .g-tl, .g-kicker, .g-evidence-note { display: none; }

html[data-gl="2"], html[data-gl="3"] {
  --g-ink: #0A1B31; --g-text: #344054; --g-grey: #667085; --g-faint: #98A2B3;
  --g-line: #ECEEF1; --g-panel: #F5F6F8; --g-blue: #2C4FB8; --g-tint: #EEF3FE;
}
html[data-gl="2"] .res-doc, html[data-gl="3"] .res-doc { --f: 'Onest', 'Inter', system-ui, sans-serif; background: #fff; }
html[data-gl="2"] .article-hero, html[data-gl="3"] .article-hero { padding: 44px 24px 0; }
html[data-gl="2"] .article-tag, html[data-gl="3"] .article-tag,
html[data-gl="2"] .back-link, html[data-gl="3"] .back-link { display: none; }
html[data-gl="2"] .g-kicker, html[data-gl="3"] .g-kicker { display: flex; gap: 8px; align-items: center; font: 500 13px/1 var(--f); color: var(--g-grey); margin-bottom: 18px; }
.g-kicker a { color: var(--g-grey); } .g-kicker a:hover { color: var(--g-ink); }
html[data-gl="2"] .article-title, html[data-gl="3"] .article-title { font: 600 40px/1.12 var(--f); letter-spacing: -0.025em; color: var(--g-ink); margin: 0 0 14px; }
html[data-gl="2"] .article-dek, html[data-gl="3"] .article-dek { font: 400 17px/1.6 var(--f); color: var(--g-grey); margin: 0 0 18px; }
html[data-gl="2"] .article-meta, html[data-gl="3"] .article-meta { font: 400 13px/1 var(--f); color: var(--g-faint); gap: 14px; }

html[data-gl="2"] .article-body, html[data-gl="3"] .article-body { font-family: var(--f); color: var(--g-text); }
html[data-gl="2"] .article-body p, html[data-gl="3"] .article-body p,
html[data-gl="2"] .article-body li, html[data-gl="3"] .article-body li { font-size: 16px; line-height: 1.7; color: var(--g-text); }
html[data-gl="2"] .article-body h2, html[data-gl="3"] .article-body h2 { font: 600 22px/1.3 var(--f); letter-spacing: -0.015em; color: var(--g-ink); margin: 44px 0 12px; scroll-margin-top: 90px; }
html[data-gl="2"] .article-body strong, html[data-gl="3"] .article-body strong { color: var(--g-ink); font-weight: 600; }
html[data-gl="2"] .article-body a, html[data-gl="3"] .article-body a { color: var(--g-ink); text-decoration-color: #C7CDD6; }
html[data-gl="2"] .article-body a:hover, html[data-gl="3"] .article-body a:hover { text-decoration-color: var(--g-ink); }

/* Tables: hairline rows, no grey header block. */
html[data-gl="2"] .fig-table th, html[data-gl="3"] .fig-table th { background: none; color: var(--g-faint); font: 500 12px/1.4 var(--f); text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--g-line); padding: 10px 12px 10px 0; }
html[data-gl="2"] .fig-table td, html[data-gl="3"] .fig-table td { font: 400 14.5px/1.5 var(--f); color: var(--g-text); border-bottom: 1px solid var(--g-line); padding: 12px 12px 12px 0; }
html[data-gl="2"] .fig-table td:first-child, html[data-gl="3"] .fig-table td:first-child { color: var(--g-ink); font-weight: 600; }

/* The grainy pastel card (useno-ui section 6), used once: the short answer. */
html[data-gl="2"] .article-body .callout {
  position: relative; isolation: isolate; overflow: hidden; border: 0; border-radius: 18px; padding: 24px 26px; margin: 8px 0 30px;
  background: radial-gradient(70% 90% at 0% 100%, #FFE2D2 0%, transparent 60%), radial-gradient(60% 80% at 60% 0%, #FAD2E3 0%, transparent 62%), radial-gradient(70% 90% at 100% 70%, #DCD3FA 0%, transparent 65%), #FCF4F7;
}
html[data-gl="2"] .article-body .callout::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .36; mix-blend-mode: multiply; background-size: 180px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 -.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-gl="2"] .article-body .callout p { font: 500 18px/1.6 var(--f); color: var(--g-ink); }
html[data-gl="2"] .article-body .callout strong:first-child { display: block; font: 600 11.5px/1 var(--f); letter-spacing: .09em; text-transform: uppercase; color: var(--g-blue); margin-bottom: 12px; }

/* Layout 2: article plus a sticky rail. */
html[data-gl="2"] .g-wrap { display: grid; grid-template-columns: minmax(0, 680px) 280px; gap: 64px; max-width: 1072px; margin: 0 auto; padding: 0 24px; align-items: start; }
html[data-gl="2"] .article-hero-inner { max-width: 1024px; }
html[data-gl="2"] .article-hero-inner > * { max-width: 680px; }
html[data-gl="2"] .g-wrap .article-body { max-width: none; margin: 0; padding: 26px 0 20px; }
html[data-gl="2"] .g-rail { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 92px; padding-top: 30px; }
.g-toc-h { font: 600 11.5px/1 var(--f); letter-spacing: .09em; text-transform: uppercase; color: var(--g-faint); margin: 0 0 10px; }
.g-toc { list-style: none; margin: 0; padding: 0 0 0 12px; border-left: 1px solid var(--g-line); display: flex; flex-direction: column; gap: 9px; }
.g-toc a { font: 400 13.5px/1.4 var(--f); color: var(--g-grey); }
.g-toc a:hover { color: var(--g-ink); }
.g-cta { border-radius: 16px; padding: 18px; box-shadow: inset 0 0 0 1px var(--g-line); display: flex; flex-direction: column; gap: 10px; }
.g-cta-n { font: 600 22px/1.15 var(--f); letter-spacing: -0.02em; color: var(--g-ink); }
.g-cta-l { font: 400 13.5px/1.5 var(--f); color: var(--g-grey); margin: 0; }
.g-orb { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; padding: 11px 18px 11px 12px; border-radius: 999px; background: #0A1B31; color: #fff !important; font: 500 14.5px/1 var(--f); transition: background .18s, transform .18s; }
.g-orb:hover { background: #16263C; } .g-orb:active { transform: scale(.98); }
.g-orb::before { content: ''; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 8%, transparent 30%), conic-gradient(#557AEC, #90C8F9, #A79BF4, #F2A7C8, #557AEC); box-shadow: 0 0 10px 2px rgba(167,155,244,.75), 0 0 18px 4px rgba(144,200,249,.35); }

/* Key dates strip (Linear timeline): months across, a Today line, one bar per program. */
html[data-gl="2"] .g-tl, html[data-gl="3"] .g-tl { display: block; margin: 0 0 34px; padding: 18px 20px 16px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--g-line); }
.g-tl-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; font: 600 14.5px/1.3 var(--f); color: var(--g-ink); }
.g-tl-h span { font: 400 12.5px/1 var(--f); color: var(--g-faint); }
.g-tl-axis, .g-tl-row { position: relative; display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 12px; }
.g-tl-months { position: relative; height: 18px; display: flex; }
.g-tl-months span.y { color: var(--g-ink); }
.g-tl-months span { flex: 1; overflow: hidden; white-space: nowrap; font: 500 11px/1 var(--f); color: var(--g-faint); border-left: 1px solid var(--g-line); padding-left: 4px; }
.g-tl-row { min-height: 34px; border-top: 1px solid #F5F6F8; }
.g-tl-name { font: 500 13px/1.3 var(--f); color: var(--g-ink); }
.g-tl-track { position: relative; height: 34px; }
.g-tl-bar { position: absolute; top: 11px; height: 12px; border-radius: 6px; background: #0A1B31; min-width: 8px; }
.g-tl-bar.closed { background: #D0D5DD; }
.g-tl-bar.next { background: #fff; box-shadow: inset 0 0 0 1.5px #0A1B31; }
.g-tl-bar.dot { width: 12px !important; min-width: 12px; border-radius: 50%; }
.g-tl-today { position: absolute; top: -4px; bottom: 0; width: 0; border-left: 1.5px solid #557AEC; z-index: 2; }
.g-tl-today b { position: absolute; bottom: -17px; left: -16px; font: 600 10.5px/1 var(--f); color: var(--g-blue); white-space: nowrap; }
.g-tl-key { display: flex; gap: 16px; margin-top: 26px; font: 400 12px/1 var(--f); color: var(--g-grey); }
.g-tl-key i { display: inline-block; width: 18px; height: 8px; border-radius: 4px; background: #0A1B31; margin-right: 6px; vertical-align: 0; }
.g-tl-key i.closed { background: #D0D5DD; }
.g-tl-key i.next { background: #fff; box-shadow: inset 0 0 0 1.5px #0A1B31; }

/* Sources as evidence cards (Copilot), each marked by kind. */
html[data-gl="2"] .g-src { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
html[data-gl="2"] .g-src li { margin: 0; }
html[data-gl="2"] .g-src a { display: flex; flex-direction: column; gap: 6px; height: 100%; box-sizing: border-box; padding: 13px 14px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--g-line); text-decoration: none; font: 500 14px/1.4 var(--f); color: var(--g-ink); transition: box-shadow .18s; }
html[data-gl="2"] .g-src a:hover { box-shadow: inset 0 0 0 1px #C7CDD6, 0 2px 8px rgba(16,24,40,.05); }
.g-src .g-kind { display: none; }
html[data-gl="2"] .g-src .g-kind, html[data-gl="3"] .g-src .g-kind { display: inline-block; align-self: flex-start; font: 600 10.5px/1 var(--f); letter-spacing: .04em; padding: 4px 7px; border-radius: 5px; background: #F2F4F7; color: #475467; }
html[data-gl] .g-src .g-kind.k-official { background: var(--g-tint); color: var(--g-blue); }
html[data-gl] .g-src .g-kind.k-useno { background: #0A1B31; color: #fff; }
.g-src .g-host { display: none; }
html[data-gl="2"] .g-src .g-host { display: block; font: 400 12.5px/1.3 var(--f); color: var(--g-faint); }
html[data-gl="2"] .g-evidence-note, html[data-gl="3"] .g-evidence-note { display: block; font: 400 13.5px/1.6 var(--f); color: var(--g-grey); margin: -4px 0 14px; }

/* Layout 3: one column, the sections hang off a vertical line (Clerk). */
html[data-gl="3"] .g-wrap { max-width: 808px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
html[data-gl="3"] .g-wrap .article-body { max-width: none; padding: 26px 0 20px; }
html[data-gl="3"] .article-body .callout { background: none; border: 0; padding: 0; margin: 6px 0 30px; }
html[data-gl="3"] .article-body .callout p { font: 400 21px/1.55 var(--f); color: var(--g-ink); letter-spacing: -0.01em; }
html[data-gl="3"] .article-body .callout strong:first-child { display: none; }
html[data-gl="3"] .article-body { position: relative; }
html[data-gl="3"] .article-body h2 { position: relative; padding-left: 30px; }
html[data-gl="3"] .article-body h2::before { content: ''; position: absolute; left: 2px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #0A1B31; }
html[data-gl="3"] .g-steps { position: relative; }
html[data-gl="3"] .g-steps::before { content: ''; position: absolute; left: 7.5px; top: 52px; bottom: 8px; width: 1px; background: var(--g-line); }
html[data-gl="3"] .g-steps > *:not(h2) { margin-left: 30px; }
html[data-gl="3"] .g-src { counter-reset: src; list-style: none; padding: 0; }
html[data-gl="3"] .g-src li { counter-increment: src; display: flex; gap: 10px; align-items: baseline; }
html[data-gl="3"] .g-src li::before { content: counter(src); font: 600 12px/1 var(--f); color: var(--g-faint); width: 14px; }

@media (max-width: 900px) {
  .g-tl { overflow-x: auto; } .g-tl-axis, .g-tl-row { min-width: 520px; }
  html[data-gl="2"] .g-wrap { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  html[data-gl="2"] .g-rail { position: static; padding-top: 0; }
  html[data-gl="2"] .g-toc-wrap { display: none; }
  html[data-gl="2"] .article-title, html[data-gl="3"] .article-title { font-size: 30px; }
  html[data-gl="2"] .g-src { grid-template-columns: 1fr; }
  .g-tl-axis, .g-tl-row { grid-template-columns: 96px 1fr; }
}
@media (prefers-reduced-motion: reduce) { .g-orb, .g-src a { transition: none; } }

/* Footer (Lucas 2026-11-09, "what the hell is going on with this footer"): the
   page wrapper is grey (#F4F7FB) under a white article, which showed as a band
   behind the footer, and the old blue "Use Useno" strip sat on that seam. The
   new layouts are white to the bottom like the homepage, and the strip is gone
   (the rail card and the footer already ask). */
html[data-gl="2"], html[data-gl="3"] { background: #fff; }
html[data-gl="2"] .main, html[data-gl="3"] .main { background: #fff; }
html[data-gl="2"] .res-doc .cta-strip, html[data-gl="3"] .res-doc .cta-strip { display: none; }
html[data-gl="2"] .res-doc main, html[data-gl="3"] .res-doc main { padding-bottom: 72px; }

/* The hub: every guide as a card, grouped (Lucas, 2026-11-09, "build the hub").
   Not gated by layout: the list must read in every layout. */
.g-hub-line { color: #667085; margin: -4px 0 14px !important; }
.g-cards { list-style: none; padding: 0 !important; margin: 0 0 8px !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.g-cards li { margin: 0 !important; }
.g-card { display: flex; flex-direction: column; gap: 6px; height: 100%; box-sizing: border-box; padding: 14px 16px; border-radius: 12px; box-shadow: inset 0 0 0 1px #ECEEF1; text-decoration: none !important; transition: box-shadow .18s, transform .18s; }
.g-card:hover { box-shadow: inset 0 0 0 1px #C7CDD6, 0 2px 8px rgba(16,24,40,.05); }
.g-card:active { transform: scale(.985); }
.g-card b { font: 600 15px/1.35 'Onest', 'Inter', system-ui, sans-serif; color: #0A1B31; }
.g-card span { font: 400 13.5px/1.5 'Onest', 'Inter', system-ui, sans-serif; color: #667085; }
@media (max-width: 640px) { .g-cards { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .g-card { transition: none; } }

/* Blog layout 1 ("Before"): the plain grouped list. The parts the blog layout
   adds stay hidden, and the card's inner wrapper melts away. */
.g-top, .g-all-bar, .g-feat, .g-pills, .g-thumb, .g-card-tag, .g-card-meta { display: none; }
.g-card-tx { display: contents; }

/* Blog layout 2 (Lucas, 2026-11-09, "klook, assembly"): Assembly's featured
   post and filter pills over Klook's two-column cards (small cover, tag,
   excerpt, Read more). No rail; the short answer moves under the cards. */
html[data-bl="2"] .g-hubwrap { display: block; max-width: 1072px; }
html[data-bl="2"] .g-hubwrap .g-rail { display: none; }
html[data-bl="2"] .article-hero-inner > * { max-width: 760px; }
html[data-bl="2"] .article-meta { border-bottom: 0; padding-bottom: 0; }
html[data-bl="2"] .g-hubwrap .article-body { display: flex; flex-direction: column; padding-top: 30px; }
html[data-bl="2"] .g-hubwrap .article-body > * { order: 3; }
html[data-bl="2"] .g-hubwrap .article-body > .g-top, html[data-bl="2"] .g-hubwrap .article-body > .g-all-bar { order: 0; display: block; }
html[data-bl="2"] .g-sec-h, html[data-bl="2"] .g-new { display: none; }
html[data-bl="2"] .g-hubwrap .article-body > .g-groups { order: 1; }
html[data-bl="2"] .g-hubwrap .article-body > .callout { order: 2; margin: 40px 0 0; }

/* The grainy pastel, three variants rotated across the covers. */
html[data-bl="2"] .g-feat-cover, html[data-bl="2"] .g-thumb {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: center; flex: none;
  background: radial-gradient(70% 90% at 0% 100%, #FFE2D2 0%, transparent 60%), radial-gradient(60% 80% at 60% 0%, #FAD2E3 0%, transparent 62%), radial-gradient(70% 90% at 100% 70%, #DCD3FA 0%, transparent 65%), #FCF4F7;
}
html[data-bl="2"] .g-cards li:nth-child(3n+2) .g-thumb { background: radial-gradient(70% 90% at 0% 100%, #D3E1FB 0%, transparent 60%), radial-gradient(60% 80% at 60% 0%, #E3D9FA 0%, transparent 62%), radial-gradient(70% 90% at 100% 70%, #FCE7F0 0%, transparent 65%), #F6F5FD; }
html[data-bl="2"] .g-cards li:nth-child(3n) .g-thumb { background: radial-gradient(70% 90% at 0% 100%, #FFECD2 0%, transparent 60%), radial-gradient(60% 80% at 60% 0%, #FCDAE0 0%, transparent 62%), radial-gradient(70% 90% at 100% 70%, #EDE2FB 0%, transparent 65%), #FDF6F2; }
html[data-bl="2"] .g-feat-cover::after, html[data-bl="2"] .g-thumb::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .36; mix-blend-mode: multiply; background-size: 180px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 -.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Featured guide (Assembly): big cover left, the text right, a hairline under. */
html[data-bl="2"] .g-feat { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 44px; align-items: center; padding-bottom: 36px; margin-bottom: 28px; border-bottom: 1px solid var(--g-line); text-decoration: none !important; }
html[data-bl="2"] .g-feat-cover { flex-direction: column; gap: 10px; aspect-ratio: 16 / 10; border-radius: 18px; transition: box-shadow .18s; }
html[data-bl="2"] .g-feat:hover .g-feat-cover { box-shadow: 0 8px 22px rgba(44,79,184,.16); }
html[data-bl="2"] .g-feat-cover i { font: 600 34px/1.1 var(--f); font-style: normal; letter-spacing: -0.02em; color: var(--g-ink); text-align: center; padding: 0 24px; }
html[data-bl="2"] .g-feat-cover small { font: 600 11.5px/1 var(--f); letter-spacing: .09em; text-transform: uppercase; color: var(--g-blue); }
html[data-bl="2"] .g-feat-tx { display: flex; flex-direction: column; gap: 12px; }
html[data-bl="2"] .g-feat-tag { font: 600 11.5px/1 var(--f); letter-spacing: .09em; text-transform: uppercase; color: var(--g-blue); }
html[data-bl="2"] .g-feat-tx b { font: 600 30px/1.2 var(--f); letter-spacing: -0.02em; color: var(--g-ink); }
html[data-bl="2"] .g-feat-meta { font: 400 13px/1 var(--f); color: var(--g-faint); }
html[data-bl="2"] .g-feat-ex { font: 400 15.5px/1.6 var(--f); color: var(--g-grey); }
html[data-bl="2"] .g-feat-more { font: 500 14.5px/1 var(--f); color: var(--g-ink); text-decoration: underline; text-decoration-color: #C7CDD6; text-underline-offset: 4px; }
html[data-bl="2"] .g-feat:hover .g-feat-more { text-decoration-color: var(--g-ink); }

/* Filter pills (Assembly): one navy, the rest outlined. */
html[data-bl="2"] .g-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
html[data-bl="2"] .g-pills a { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px #E4E7EC; font: 500 13.5px/1 var(--f); color: var(--g-text); text-decoration: none; transition: background .18s, color .18s, box-shadow .18s; }
html[data-bl="2"] .g-pills a:hover { box-shadow: inset 0 0 0 1px #C7CDD6; }
html[data-bl="2"] .g-pills a.on { background: var(--g-ink); color: #fff; box-shadow: none; }
html[data-bl="2"] .g-pills a:active { transform: scale(.98); }
html[data-bl="2"] .g-groups[data-f="by-field"] .g-group:not([data-g="by-field"]),
html[data-bl="2"] .g-groups[data-f="by-company"] .g-group:not([data-g="by-company"]),
html[data-bl="2"] .g-groups[data-f="by-season"] .g-group:not([data-g="by-season"]),
html[data-bl="2"] .g-groups[data-f="how-to"] .g-group:not([data-g="how-to"]) { display: none; }
/* One grid, like Assembly: the group headings give way to each card's tag
   (they stay in the markup for layout 1 and for readers without styles). */
html[data-bl="2"] .g-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
html[data-bl="2"] .g-group, html[data-bl="2"] .g-group .g-cards { display: contents; }
html[data-bl="2"] .g-group h2, html[data-bl="2"] .g-group .g-hub-line { display: none; }

/* Cards (Klook): cover left, then tag, title, two-line excerpt, meta and Read more. */
html[data-bl="2"] .g-cards { gap: 14px; }
html[data-bl="2"] .g-card { flex-direction: row; align-items: stretch; gap: 16px; padding: 14px; border-radius: 14px; }
html[data-bl="2"] .g-card:hover { box-shadow: inset 0 0 0 1px #C7CDD6, 0 4px 14px rgba(16,24,40,.06); }
html[data-bl="2"] .g-thumb { width: 112px; height: 112px; border-radius: 11px; }
html[data-bl="2"] .g-thumb i { font: 600 15px/1.2 var(--f); font-style: normal; letter-spacing: -0.01em; color: var(--g-ink); text-align: center; padding: 0 10px; }
html[data-bl="2"] .g-thumb-logo img { width: 52px; height: 52px; padding: 10px; border-radius: 15px; background: #fff; box-shadow: 0 1px 2px rgba(16,24,40,.06); object-fit: contain; }
html[data-bl="2"] .g-card-tx { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
html[data-bl="2"] .g-card .g-card-tag { align-self: flex-start; display: inline-block; padding: 3px 7px; border-radius: 6px; background: #F2F4F7; font: 500 11.5px/1.3 var(--f); color: #475467; }
html[data-bl="2"] .g-card b { font-size: 15.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html[data-bl="2"] .g-card .g-card-ex { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; }
html[data-bl="2"] .g-card .g-card-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: auto; padding-top: 2px; }
html[data-bl="2"] .g-card .g-card-meta span { font-size: 12.5px; color: var(--g-faint); }
html[data-bl="2"] .g-card .g-card-meta .g-card-more { font-weight: 500; color: var(--g-ink); text-decoration: underline; text-decoration-color: #C7CDD6; text-underline-offset: 3px; white-space: nowrap; }
html[data-bl="2"] .g-card:hover .g-card-more { text-decoration-color: var(--g-ink); }
@media (max-width: 900px) {
  html[data-bl="2"] .g-feat { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  html[data-bl="2"] .g-feat-tx b { font-size: 24px; }
}
@media (max-width: 640px) {
  html[data-bl="2"] .g-groups { grid-template-columns: minmax(0, 1fr); }
  html[data-bl="2"] .g-thumb { width: 84px; height: 84px; }
  html[data-bl="2"] .g-thumb-logo img { width: 44px; height: 44px; padding: 8px; }
  html[data-bl="2"] .g-thumb i { font-size: 13px; padding: 0 6px; }
  html[data-bl="2"] .g-card b { -webkit-line-clamp: 3; }
  html[data-bl="2"] .g-card .g-card-meta .g-card-more { display: none; }
  html[data-bl="2"] .g-feat-cover i { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) { html[data-bl="2"] .g-feat-cover, html[data-bl="2"] .g-pills a { transition: none; } }

html[data-gl="2"] .g-colon, html[data-gl="3"] .g-colon { display: none; }

/* Blog layout 3, the default (Lucas, 2026-11-09, "Typeform + Mural"): a
   featured guide with its subject in big type on the grainy pastel, "Start
   here" text rows beside it, then every guide as a quiet text row (group
   label, title) under an "All guides" bar with text tabs. No boxes, no tags,
   no Read more: hairlines carry the structure. */
html[data-bl="3"] .g-hubwrap { display: block; max-width: 1072px; }
html[data-bl="3"] .g-hubwrap .g-rail { display: none; }
html[data-bl="3"] .article-hero-inner > * { max-width: 760px; }
html[data-bl="3"] .article-meta { border-bottom: 0; padding-bottom: 0; }
html[data-bl="3"] .g-hubwrap .article-body { display: flex; flex-direction: column; padding-top: 34px; }
html[data-bl="3"] .g-hubwrap .article-body > * { order: 4; }
html[data-bl="3"] .g-hubwrap .article-body > .g-top { order: 0; }
html[data-bl="3"] .g-hubwrap .article-body > .g-all-bar { order: 1; }
html[data-bl="3"] .g-hubwrap .article-body > .g-groups { order: 2; }
html[data-bl="3"] .g-hubwrap .article-body > .callout { order: 3; margin: 56px 0 0; }

html[data-bl="3"] .g-sec-h { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 18px !important; font: 500 26px/1.2 var(--f) !important; letter-spacing: -0.02em; color: var(--g-ink) !important; }
html[data-bl="3"] .g-sec-h a { font: 500 14px/1 var(--f); color: var(--g-ink); text-underline-offset: 4px; }

/* Top: featured left, Start here right. */
html[data-bl="3"] .g-top { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 56px; padding-bottom: 56px; }
html[data-bl="3"] .g-feat { display: block; text-decoration: none !important; }
html[data-bl="3"] .g-feat-cover {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  aspect-ratio: 16 / 10; box-sizing: border-box; padding: 34px 36px; border-radius: 18px; transition: box-shadow .18s;
  background: radial-gradient(70% 90% at 0% 100%, #FFE2D2 0%, transparent 60%), radial-gradient(60% 80% at 60% 0%, #FAD2E3 0%, transparent 62%), radial-gradient(70% 90% at 100% 70%, #DCD3FA 0%, transparent 65%), #FCF4F7;
}
html[data-bl="3"] .g-feat-cover::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .36; mix-blend-mode: multiply; background-size: 180px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 -.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-bl="3"] .g-feat:hover .g-feat-cover { box-shadow: 0 8px 22px rgba(44,79,184,.16); }
html[data-bl="3"] .g-feat-cover i { font: 600 64px/1.02 var(--f); font-style: normal; letter-spacing: -0.035em; color: var(--g-ink); max-width: 9ch; }
html[data-bl="3"] .g-feat-cover small { font: 600 12px/1 var(--f); letter-spacing: .09em; text-transform: uppercase; color: var(--g-blue); }
html[data-bl="3"] .g-feat-tx { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
html[data-bl="3"] .g-feat-tag { font: 400 13px/1 var(--f); color: var(--g-grey); }
html[data-bl="3"] .g-feat-tx b { font: 500 28px/1.22 var(--f); letter-spacing: -0.02em; color: var(--g-ink); }
html[data-bl="3"] .g-feat:hover .g-feat-tx b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
html[data-bl="3"] .g-feat-ex { font: 400 15.5px/1.6 var(--f); color: var(--g-grey); }
html[data-bl="3"] .g-feat-meta { order: 3; font: 400 13px/1 var(--f); color: var(--g-faint); }
html[data-bl="3"] .g-feat-more { display: none; }

html[data-bl="3"] .g-new { display: block; }
html[data-bl="3"] .g-new ul { list-style: none; margin: 0 !important; padding: 0 !important; border-top: 1px solid var(--g-line); }
html[data-bl="3"] .g-new li { margin: 0 !important; border-bottom: 1px solid var(--g-line); }
html[data-bl="3"] .g-new li a { display: flex; flex-direction: column; gap: 6px; padding: 20px 0; text-decoration: none !important; }
html[data-bl="3"] .g-new small { font: 400 12.5px/1 var(--f); color: var(--g-grey); }
html[data-bl="3"] .g-new li span { font: 500 17px/1.38 var(--f); letter-spacing: -0.01em; color: var(--g-ink); }
html[data-bl="3"] .g-new li a:hover span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* All guides bar: the heading left, text tabs right (Mural's category bar). */
html[data-bl="3"] .g-all-bar { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; padding-top: 40px; border-top: 1px solid var(--g-line); }
html[data-bl="3"] .g-all-bar .g-sec-h { margin: 0 !important; }
html[data-bl="3"] .g-pills { display: flex; gap: 22px; }
html[data-bl="3"] .g-pills a { font: 500 14.5px/1 var(--f); color: var(--g-grey); text-decoration: none; padding: 6px 0; box-shadow: inset 0 -1.5px 0 transparent; transition: color .18s, box-shadow .18s; }
html[data-bl="3"] .g-pills a:hover { color: var(--g-ink); }
html[data-bl="3"] .g-pills a.on { color: var(--g-ink); box-shadow: inset 0 -1.5px 0 var(--g-ink); }

/* Every guide as a text row: group label, then the title. Two columns. */
html[data-bl="3"] .g-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; margin-top: 14px; }
html[data-bl="3"] .g-group, html[data-bl="3"] .g-group .g-cards { display: contents; }
html[data-bl="3"] .g-group h2, html[data-bl="3"] .g-group .g-hub-line { display: none; }
html[data-bl="3"] .g-groups[data-f="by-field"] .g-group:not([data-g="by-field"]),
html[data-bl="3"] .g-groups[data-f="by-company"] .g-group:not([data-g="by-company"]),
html[data-bl="3"] .g-groups[data-f="by-season"] .g-group:not([data-g="by-season"]),
html[data-bl="3"] .g-groups[data-f="how-to"] .g-group:not([data-g="how-to"]) { display: none; }
html[data-bl="3"] .g-card { display: flex; flex-direction: column; gap: 7px; padding: 20px 0 21px; border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--g-line); }
html[data-bl="3"] .g-card:hover { box-shadow: none; }
html[data-bl="3"] .g-thumb, html[data-bl="3"] .g-card .g-card-ex, html[data-bl="3"] .g-card .g-card-meta { display: none; }
html[data-bl="3"] .g-card-tx { display: contents; }
html[data-bl="3"] .g-card .g-card-tag { display: block; font: 400 12.5px/1 var(--f); color: var(--g-grey); }
html[data-bl="3"] .g-card b { font: 500 17px/1.38 var(--f); letter-spacing: -0.01em; color: var(--g-ink); }
html[data-bl="3"] .g-card:hover b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

@media (max-width: 900px) {
  html[data-bl="3"] .g-top { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  html[data-bl="3"] .g-feat-cover i { font-size: 48px; }
}
@media (max-width: 640px) {
  html[data-bl="3"] .g-groups { grid-template-columns: minmax(0, 1fr); }
  html[data-bl="3"] .g-top { padding-bottom: 36px; }
  html[data-bl="3"] .g-all-bar { padding-top: 32px; }
  html[data-bl="3"] .g-feat-cover { padding: 24px; }
  html[data-bl="3"] .g-feat-cover i { font-size: 38px; }
  html[data-bl="3"] .g-feat-tx b { font-size: 23px; }
  html[data-bl="3"] .g-sec-h { font-size: 22px !important; }
  html[data-bl="3"] .g-pills { width: 100%; overflow-x: auto; gap: 18px; scrollbar-width: none; }
  html[data-bl="3"] .g-pills a { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { html[data-bl="3"] .g-feat-cover, html[data-bl="3"] .g-pills a { transition: none; } }